diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
index 75e0f3dcec..e057bf10f8 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
@@ -156,14 +156,14 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
 
   if (!appDetail) {
     return (
-      <div className='flex h-full items-center justify-center bg-background-body'>
+      <div className='bg-background-body flex h-full items-center justify-center'>
         <Loading />
       </div>
     )
   }
 
   return (
-    <div className={cn(s.app, 'flex relative', 'overflow-hidden')}>
+    <div className={cn(s.app, 'relative flex', 'overflow-hidden')}>
       {appDetail && (
         <AppSideBar title={appDetail.name} icon={appDetail.icon} icon_background={appDetail.icon_background as string} desc={appDetail.mode} navigation={navigation} />
       )}
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx
index 208078f612..79b45941f1 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx
@@ -122,7 +122,7 @@ const CardView: FC<ICardViewProps> = ({ appId, isInPanel, className }) => {
     return <Loading />
 
   return (
-    <div className={className || 'grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'}>
+    <div className={className || 'mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'}>
       <AppCard
         appInfo={appDetail}
         cardType="webapp"
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx
index 00f1190045..f5354f8918 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx
@@ -46,7 +46,7 @@ export default function ChartView({ appId }: IChartViewProps) {
 
   return (
     <div>
-      <div className='flex flex-row items-center mt-8 mb-4 system-xl-semibold text-text-primary'>
+      <div className='system-xl-semibold text-text-primary mb-4 mt-8 flex flex-row items-center'>
         <span className='mr-3'>{t('appOverview.analysis.title')}</span>
         <SimpleSelect
           items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))}
@@ -61,13 +61,13 @@ export default function ChartView({ appId }: IChartViewProps) {
         />
       </div>
       {!isWorkflow && (
-        <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+        <div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
           <ConversationsChart period={period} id={appId} />
           <EndUsersChart period={period} id={appId} />
         </div>
       )}
       {!isWorkflow && (
-        <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+        <div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
           {isChatApp
             ? (
               <AvgSessionInteractions period={period} id={appId} />
@@ -79,24 +79,24 @@ export default function ChartView({ appId }: IChartViewProps) {
         </div>
       )}
       {!isWorkflow && (
-        <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+        <div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
           <UserSatisfactionRate period={period} id={appId} />
           <CostChart period={period} id={appId} />
         </div>
       )}
       {!isWorkflow && isChatApp && (
-        <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+        <div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
           <MessagesChart period={period} id={appId} />
         </div>
       )}
       {isWorkflow && (
-        <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+        <div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
           <WorkflowMessagesChart period={period} id={appId} />
           <WorkflowDailyTerminalsChart period={period} id={appId} />
         </div>
       )}
       {isWorkflow && (
-        <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+        <div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
           <WorkflowCostChart period={period} id={appId} />
           <AvgUserInteractions period={period} id={appId} />
         </div>
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx
index 32e21be6c0..5303272458 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx
@@ -13,7 +13,7 @@ const Overview = async ({
 }: IDevelopProps) => {
   const { appId } = await params
   return (
-    <div className="h-full px-4 sm:px-12 py-6 overflow-scroll bg-chatbot-bg">
+    <div className="bg-chatbot-bg h-full overflow-scroll px-4 py-6 sm:px-12">
       <ApikeyInfoPanel />
       <TracingPanel />
       <CardView appId={appId} />
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx
index ca6fa3a904..dd86565d16 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx
@@ -58,8 +58,8 @@ const ConfigBtn: FC<Props> = ({
       }}
     >
       <PortalToFollowElemTrigger onClick={handleTrigger}>
-        <div className={cn(className, 'p-1 rounded-md')}>
-          <RiEqualizer2Line className='w-4 h-4 text-text-tertiary' />
+        <div className={cn(className, 'rounded-md p-1')}>
+          <RiEqualizer2Line className='text-text-tertiary h-4 w-4' />
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[11]'>
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx
index d46563c430..962f1da054 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx
@@ -162,15 +162,15 @@ const ConfigPopup: FC<PopupProps> = ({
   }
 
   return (
-    <div className='w-[420px] p-4 rounded-2xl bg-components-panel-bg border-[0.5px] border-components-panel-border shadow-xl'>
-      <div className='flex justify-between items-center'>
+    <div className='bg-components-panel-bg border-components-panel-border w-[420px] rounded-2xl border-[0.5px] p-4 shadow-xl'>
+      <div className='flex items-center justify-between'>
         <div className='flex items-center'>
           <TracingIcon size='md' className='mr-2' />
           <div className='text-text-primary title-2xl-semibold'>{t(`${I18N_PREFIX}.tracing`)}</div>
         </div>
         <div className='flex items-center'>
           <Indicator color={enabled ? 'green' : 'gray'} />
-          <div className={cn('ml-1 system-xs-semibold-uppercase text-text-tertiary', enabled && 'text-util-colors-green-green-600')}>
+          <div className={cn('system-xs-semibold-uppercase text-text-tertiary ml-1', enabled && 'text-util-colors-green-green-600')}>
             {t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`)}
           </div>
           {!readOnly && (
@@ -189,7 +189,7 @@ const ConfigPopup: FC<PopupProps> = ({
         </div>
       </div>
 
-      <div className='mt-2 system-xs-regular text-text-tertiary'>
+      <div className='system-xs-regular text-text-tertiary mt-2'>
         {t(`${I18N_PREFIX}.tracingDescription`)}
       </div>
       <Divider className='my-3' />
@@ -211,7 +211,7 @@ const ConfigPopup: FC<PopupProps> = ({
               <div className='mt-2 space-y-2'>
                 {configuredProviderPanel()}
               </div>
-              <div className='mt-3 system-xs-medium-uppercase text-text-tertiary'>{t(`${I18N_PREFIX}.configProviderTitle.moreProvider`)}</div>
+              <div className='system-xs-medium-uppercase text-text-tertiary mt-3'>{t(`${I18N_PREFIX}.configProviderTitle.moreProvider`)}</div>
               <div className='mt-2 space-y-2'>
                 {moreProviderPanel()}
               </div>
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx
index 84c48a6dde..d6001b9749 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx
@@ -26,7 +26,7 @@ const Field: FC<Props> = ({
   return (
     <div className={cn(className)}>
       <div className='flex py-[7px]'>
-        <div className={cn(labelClassName, 'flex items-center h-[18px] text-[13px] font-medium text-text-primary')}>{label} </div>
+        <div className={cn(labelClassName, 'text-text-primary flex h-[18px] items-center text-[13px] font-medium')}>{label} </div>
         {isRequired && <span className='ml-0.5 text-xs font-semibold text-[#D92D20]'>*</span>}
       </div>
       <Input
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
index bb679cf02e..c73dfbc328 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
@@ -31,7 +31,7 @@ const Title = ({
   const { t } = useTranslation()
 
   return (
-    <div className={cn('flex items-center system-xl-semibold text-text-primary', className)}>
+    <div className={cn('system-xl-semibold text-text-primary flex items-center', className)}>
       {t('common.appMenus.overview')}
     </div>
   )
@@ -141,7 +141,7 @@ const Panel: FC = () => {
   }, [setControlShowPopup])
   if (!isLoaded) {
     return (
-      <div className='flex items-center justify-between mb-3'>
+      <div className='mb-3 flex items-center justify-between'>
         <Title className='h-[41px]' />
         <div className='w-[200px]'>
           <Loading />
@@ -151,11 +151,11 @@ const Panel: FC = () => {
   }
 
   return (
-    <div className={cn('mb-3 flex justify-between items-center')}>
+    <div className={cn('mb-3 flex items-center justify-between')}>
       <Title className='h-[41px]' />
       <div
         className={cn(
-          'flex items-center p-2 rounded-xl bg-background-default-dodge border-t border-l-[0.5px] border-effects-highlight shadow-xs cursor-pointer hover:bg-background-default-lighter hover:border-effects-highlight-lightmode-off',
+          'bg-background-default-dodge border-effects-highlight shadow-xs hover:bg-background-default-lighter hover:border-effects-highlight-lightmode-off flex cursor-pointer items-center rounded-xl border-l-[0.5px] border-t p-2',
           controlShowPopup && 'bg-background-default-lighter border-effects-highlight-lightmode-off',
         )}
         onClick={showPopup}
@@ -163,7 +163,7 @@ const Panel: FC = () => {
         {!inUseTracingProvider && (
           <>
             <TracingIcon size='md' />
-            <div className='mx-2 system-sm-semibold text-text-secondary'>{t(`${I18N_PREFIX}.title`)}</div>
+            <div className='system-sm-semibold text-text-secondary mx-2'>{t(`${I18N_PREFIX}.title`)}</div>
             <div className='flex items-center' onClick={e => e.stopPropagation()}>
               <ConfigButton
                 appId={appId}
@@ -182,8 +182,8 @@ const Panel: FC = () => {
               />
             </div>
             <Divider type='vertical' className='h-3.5' />
-            <div className='p-1 rounded-md'>
-              <RiArrowDownDoubleLine className='w-4 h-4 text-text-tertiary' />
+            <div className='rounded-md p-1'>
+              <RiArrowDownDoubleLine className='text-text-tertiary h-4 w-4' />
             </div>
           </>
         )}
@@ -191,7 +191,7 @@ const Panel: FC = () => {
           <>
             <div className='ml-4 mr-1 flex items-center'>
               <Indicator color={enabled ? 'green' : 'gray'} />
-              <div className='ml-1.5 system-xs-semibold-uppercase text-text-tertiary'>
+              <div className='system-xs-semibold-uppercase text-text-tertiary ml-1.5'>
                 {t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`)}
               </div>
             </div>
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
index e6a520648f..b1451406f4 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
@@ -167,11 +167,11 @@ const ProviderConfigModal: FC<Props> = ({
       {!isShowRemoveConfirm
         ? (
           <PortalToFollowElem open>
-            <PortalToFollowElemContent className='w-full h-full z-[60]'>
-              <div className='fixed inset-0 flex items-center justify-center bg-background-overlay'>
-                <div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-components-panel-bg shadow-xl rounded-2xl overflow-y-auto'>
+            <PortalToFollowElemContent className='z-[60] h-full w-full'>
+              <div className='bg-background-overlay fixed inset-0 flex items-center justify-center'>
+                <div className='bg-components-panel-bg mx-2 max-h-[calc(100vh-120px)] w-[640px] overflow-y-auto rounded-2xl shadow-xl'>
                   <div className='px-8 pt-8'>
-                    <div className='flex justify-between items-center mb-4'>
+                    <div className='mb-4 flex items-center justify-between'>
                       <div className='title-2xl-semibold text-text-primary'>{t(`${I18N_PREFIX}.title`)}{t(`app.tracing.${type}.title`)}</div>
                     </div>
 
@@ -265,20 +265,20 @@ const ProviderConfigModal: FC<Props> = ({
                       )}
 
                     </div>
-                    <div className='my-8 flex justify-between items-center h-8'>
+                    <div className='my-8 flex h-8 items-center justify-between'>
                       <a
-                        className='flex items-center space-x-1 leading-[18px] text-xs font-normal text-[#155EEF]'
+                        className='flex items-center space-x-1 text-xs font-normal leading-[18px] text-[#155EEF]'
                         target='_blank'
                         href={docURL[type]}
                       >
                         <span>{t(`${I18N_PREFIX}.viewDocsLink`, { key: t(`app.tracing.${type}.title`) })}</span>
-                        <LinkExternal02 className='w-3 h-3' />
+                        <LinkExternal02 className='h-3 w-3' />
                       </a>
                       <div className='flex items-center'>
                         {isEdit && (
                           <>
                             <Button
-                              className='h-9 text-sm font-medium text-text-secondary'
+                              className='text-text-secondary h-9 text-sm font-medium'
                               onClick={showRemoveConfirm}
                             >
                               <span className='text-[#D92D20]'>{t('common.operation.remove')}</span>
@@ -287,7 +287,7 @@ const ProviderConfigModal: FC<Props> = ({
                           </>
                         )}
                         <Button
-                          className='mr-2 h-9 text-sm font-medium text-text-secondary'
+                          className='text-text-secondary mr-2 h-9 text-sm font-medium'
                           onClick={onCancel}
                         >
                           {t('common.operation.cancel')}
@@ -304,9 +304,9 @@ const ProviderConfigModal: FC<Props> = ({
 
                     </div>
                   </div>
-                  <div className='border-t-[0.5px] border-divider-regular'>
-                    <div className='flex justify-center items-center py-3 bg-background-section-burn text-xs text-text-tertiary'>
-                      <Lock01 className='mr-1 w-3 h-3 text-text-tertiary' />
+                  <div className='border-divider-regular border-t-[0.5px]'>
+                    <div className='bg-background-section-burn text-text-tertiary flex items-center justify-center py-3 text-xs'>
+                      <Lock01 className='text-text-tertiary mr-1 h-3 w-3' />
                       {t('common.modelProvider.encrypted.front')}
                       <a
                         className='text-primary-600 mx-1'
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx
index 36221357a4..7eecd74b02 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx
@@ -65,36 +65,36 @@ const ProviderPanel: FC<Props> = ({
   return (
     <div
       className={cn(
-        'px-4 py-3 rounded-xl border-[1.5px] bg-background-section-burn',
+        'bg-background-section-burn rounded-xl border-[1.5px] px-4 py-3',
         isChosen ? 'bg-background-section border-components-option-card-option-selected-border' : 'border-transparent',
         !isChosen && hasConfigured && !readOnly && 'cursor-pointer',
       )}
       onClick={handleChosen}
     >
-      <div className={'flex justify-between items-center space-x-1'}>
+      <div className={'flex items-center justify-between space-x-1'}>
         <div className='flex items-center'>
           <Icon className='h-6' />
-          {isChosen && <div className='ml-1 flex items-center h-4 px-1 rounded-[4px] border border-text-accent-secondary system-2xs-medium-uppercase text-text-accent-secondary'>{t(`${I18N_PREFIX}.inUse`)}</div>}
+          {isChosen && <div className='border-text-accent-secondary system-2xs-medium-uppercase text-text-accent-secondary ml-1 flex h-4 items-center rounded-[4px] border px-1'>{t(`${I18N_PREFIX}.inUse`)}</div>}
         </div>
         {!readOnly && (
-          <div className={'flex justify-between items-center space-x-1'}>
+          <div className={'flex items-center justify-between space-x-1'}>
             {hasConfigured && (
-              <div className='flex px-2 items-center h-6 bg-components-button-secondary-bg rounded-md border-[0.5px] border-components-button-secondary-border shadow-xs cursor-pointer text-text-secondary space-x-1' onClick={viewBtnClick} >
-                <View className='w-3 h-3' />
+              <div className='bg-components-button-secondary-bg border-components-button-secondary-border shadow-xs text-text-secondary flex h-6 cursor-pointer items-center space-x-1 rounded-md border-[0.5px] px-2' onClick={viewBtnClick} >
+                <View className='h-3 w-3' />
                 <div className='text-xs font-medium'>{t(`${I18N_PREFIX}.view`)}</div>
               </div>
             )}
             <div
-              className='flex px-2 items-center h-6 bg-components-button-secondary-bg rounded-md border-[0.5px] border-components-button-secondary-border shadow-xs cursor-pointer text-text-secondary space-x-1'
+              className='bg-components-button-secondary-bg border-components-button-secondary-border shadow-xs text-text-secondary flex h-6 cursor-pointer items-center space-x-1 rounded-md border-[0.5px] px-2'
               onClick={handleConfigBtnClick}
             >
-              <RiEqualizer2Line className='w-3 h-3' />
+              <RiEqualizer2Line className='h-3 w-3' />
               <div className='text-xs font-medium'>{t(`${I18N_PREFIX}.config`)}</div>
             </div>
           </div>
         )}
       </div>
-      <div className='mt-2 system-xs-regular text-text-tertiary'>
+      <div className='system-xs-regular text-text-tertiary mt-2'>
         {t(`${I18N_PREFIX}.${type}.description`)}
       </div>
     </div>
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx
index 0f51671b30..ec9117dd38 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx
@@ -21,7 +21,7 @@ const TracingIcon: FC<Props> = ({
   const sizeClass = sizeClassMap[size]
   return (
     <div className={cn(className, sizeClass, 'bg-primary-500 shadow-md')}>
-      <Icon className='w-full h-full' />
+      <Icon className='h-full w-full' />
     </div>
   )
 }
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx
index 1d26e6525a..f4d49425ae 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx
@@ -4,7 +4,7 @@ import Workflow from '@/app/components/workflow'
 
 const Page = () => {
   return (
-    <div className='w-full h-full overflow-x-auto'>
+    <div className='h-full w-full overflow-x-auto'>
       <Workflow />
     </div>
   )
diff --git a/web/app/(commonLayout)/apps/AppCard.tsx b/web/app/(commonLayout)/apps/AppCard.tsx
index e7e1251897..4069a03140 100644
--- a/web/app/(commonLayout)/apps/AppCard.tsx
+++ b/web/app/(commonLayout)/apps/AppCard.tsx
@@ -241,10 +241,10 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
           <>
             <Divider className="!my-1" />
             <div
-              className='h-9 py-2 px-3 mx-1 flex items-center hover:bg-gray-50 rounded-lg cursor-pointer'
+              className='mx-1 flex h-9 cursor-pointer items-center rounded-lg px-3 py-2 hover:bg-gray-50'
               onClick={onClickSwitch}
             >
-              <span className='text-gray-700 text-sm leading-5'>{t('app.switch')}</span>
+              <span className='text-sm leading-5 text-gray-700'>{t('app.switch')}</span>
             </div>
           </>
         )}
@@ -277,9 +277,9 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
           e.preventDefault()
           getRedirection(isCurrentWorkspaceEditor, app, push)
         }}
-        className='relative h-[160px] group col-span-1 bg-components-card-bg border-[1px] border-solid border-components-card-border rounded-xl shadow-sm inline-flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg'
+        className='bg-components-card-bg border-components-card-border group relative col-span-1 inline-flex h-[160px] cursor-pointer flex-col rounded-xl border-[1px] border-solid shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg'
       >
-        <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
+        <div className='flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]'>
           <div className='relative shrink-0'>
             <AppIcon
               size="large"
@@ -288,13 +288,13 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
               background={app.icon_background}
               imageUrl={app.icon_url}
             />
-            <AppTypeIcon type={app.mode} wrapperClassName='absolute -bottom-0.5 -right-0.5 w-4 h-4 shadow-sm' className='w-3 h-3' />
+            <AppTypeIcon type={app.mode} wrapperClassName='absolute -bottom-0.5 -right-0.5 w-4 h-4 shadow-sm' className='h-3 w-3' />
           </div>
-          <div className='grow w-0 py-[1px]'>
-            <div className='flex items-center text-sm leading-5 font-semibold text-text-secondary'>
+          <div className='w-0 grow py-[1px]'>
+            <div className='text-text-secondary flex items-center text-sm font-semibold leading-5'>
               <div className='truncate' title={app.name}>{app.name}</div>
             </div>
-            <div className='flex items-center text-[10px] leading-[18px] text-text-tertiary font-medium'>
+            <div className='text-text-tertiary flex items-center text-[10px] font-medium leading-[18px]'>
               {app.mode === 'advanced-chat' && <div className='truncate'>{t('app.types.advanced').toUpperCase()}</div>}
               {app.mode === 'chat' && <div className='truncate'>{t('app.types.chatbot').toUpperCase()}</div>}
               {app.mode === 'agent-chat' && <div className='truncate'>{t('app.types.agent').toUpperCase()}</div>}
@@ -303,7 +303,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
             </div>
           </div>
         </div>
-        <div className='title-wrapper h-[90px] px-[14px] text-xs leading-normal text-text-tertiary'>
+        <div className='title-wrapper text-text-tertiary h-[90px] px-[14px] text-xs leading-normal'>
           <div
             className={cn(tags.length ? 'line-clamp-2' : 'line-clamp-4', 'group-hover:line-clamp-2')}
             title={app.description}
@@ -312,17 +312,17 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
           </div>
         </div>
         <div className={cn(
-          'absolute bottom-1 left-0 right-0 items-center shrink-0 pt-1 pl-[14px] pr-[6px] pb-[6px] h-[42px]',
+          'absolute bottom-1 left-0 right-0 h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1',
           tags.length ? 'flex' : '!hidden group-hover:!flex',
         )}>
           {isCurrentWorkspaceEditor && (
             <>
-              <div className={cn('grow flex items-center gap-1 w-0')} onClick={(e) => {
+              <div className={cn('flex w-0 grow items-center gap-1')} onClick={(e) => {
                 e.stopPropagation()
                 e.preventDefault()
               }}>
                 <div className={cn(
-                  'group-hover:!block group-hover:!mr-0 mr-[41px] grow w-full',
+                  'mr-[41px] w-full grow group-hover:!mr-0 group-hover:!block',
                   tags.length ? '!block' : '!hidden',
                 )}>
                   <TagSelector
@@ -336,23 +336,23 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
                   />
                 </div>
               </div>
-              <div className='!hidden group-hover:!flex shrink-0 mx-1 w-[1px] h-[14px]' />
-              <div className='!hidden group-hover:!flex shrink-0'>
+              <div className='mx-1 !hidden h-[14px] w-[1px] shrink-0 group-hover:!flex' />
+              <div className='!hidden shrink-0 group-hover:!flex'>
                 <CustomPopover
                   htmlContent={<Operations />}
                   position="br"
                   trigger="click"
                   btnElement={
                     <div
-                      className='flex items-center justify-center w-8 h-8 cursor-pointer rounded-md'
+                      className='flex h-8 w-8 cursor-pointer items-center justify-center rounded-md'
                     >
-                      <RiMoreFill className='w-4 h-4 text-text-tertiary' />
+                      <RiMoreFill className='text-text-tertiary h-4 w-4' />
                     </div>
                   }
                   btnClassName={open =>
                     cn(
                       open ? '!bg-black/5 !shadow-none' : '!bg-transparent',
-                      'h-8 w-8 !p-2 rounded-md border-none hover:!bg-black/5',
+                      'h-8 w-8 rounded-md border-none !p-2 hover:!bg-black/5',
                     )
                   }
                   popupClassName={
@@ -360,7 +360,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
                       ? '!w-[256px] translate-x-[-224px]'
                       : '!w-[160px] translate-x-[-128px]'
                   }
-                  className={'h-fit !z-20'}
+                  className={'!z-20 h-fit'}
                 />
               </div>
             </>
diff --git a/web/app/(commonLayout)/apps/Apps.tsx b/web/app/(commonLayout)/apps/Apps.tsx
index 34a28d908e..11527c547c 100644
--- a/web/app/(commonLayout)/apps/Apps.tsx
+++ b/web/app/(commonLayout)/apps/Apps.tsx
@@ -78,10 +78,10 @@ const Apps = () => {
 
   const anchorRef = useRef<HTMLDivElement>(null)
   const options = [
-    { value: 'all', text: t('app.types.all'), icon: <RiApps2Line className='w-[14px] h-[14px] mr-1' /> },
-    { value: 'chat', text: t('app.types.chatbot'), icon: <RiMessage3Line className='w-[14px] h-[14px] mr-1' /> },
-    { value: 'agent-chat', text: t('app.types.agent'), icon: <RiRobot3Line className='w-[14px] h-[14px] mr-1' /> },
-    { value: 'workflow', text: t('app.types.workflow'), icon: <RiExchange2Line className='w-[14px] h-[14px] mr-1' /> },
+    { value: 'all', text: t('app.types.all'), icon: <RiApps2Line className='mr-1 h-[14px] w-[14px]' /> },
+    { value: 'chat', text: t('app.types.chatbot'), icon: <RiMessage3Line className='mr-1 h-[14px] w-[14px]' /> },
+    { value: 'agent-chat', text: t('app.types.agent'), icon: <RiRobot3Line className='mr-1 h-[14px] w-[14px]' /> },
+    { value: 'workflow', text: t('app.types.workflow'), icon: <RiExchange2Line className='mr-1 h-[14px] w-[14px]' /> },
   ]
 
   useEffect(() => {
@@ -128,7 +128,7 @@ const Apps = () => {
 
   return (
     <>
-      <div className='sticky top-0 flex justify-between items-center pt-4 px-12 pb-2 leading-[56px] bg-background-body z-10 flex-wrap gap-y-2'>
+      <div className='bg-background-body sticky top-0 z-10 flex flex-wrap items-center justify-between gap-y-2 px-12 pb-2 pt-4 leading-[56px]'>
         <TabSliderNew
           value={activeTab}
           onChange={setActiveTab}
@@ -153,14 +153,14 @@ const Apps = () => {
         </div>
       </div>
       {(data && data[0].total > 0)
-        ? <div className='grid content-start grid-cols-1 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6 gap-4 px-12 pt-2 grow relative'>
+        ? <div className='2k:grid-cols-6 relative grid grow grid-cols-1 content-start gap-4 px-12 pt-2 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5'>
           {isCurrentWorkspaceEditor
             && <NewAppCard onSuccess={mutate} />}
           {data.map(({ data: apps }) => apps.map(app => (
             <AppCard key={app.id} app={app} onRefresh={mutate} />
           )))}
         </div>
-        : <div className='grid content-start grid-cols-1 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6 gap-4 px-12 pt-2 grow relative overflow-hidden'>
+        : <div className='2k:grid-cols-6 relative grid grow grid-cols-1 content-start gap-4 overflow-hidden px-12 pt-2 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5'>
           {isCurrentWorkspaceEditor
             && <NewAppCard className='z-10' onSuccess={mutate} />}
           <NoAppsFound />
@@ -180,14 +180,14 @@ function NoAppsFound() {
   const { t } = useTranslation()
   function renderDefaultCard() {
     const defaultCards = Array.from({ length: 36 }, (_, index) => (
-      <div key={index} className='h-[160px] inline-flex rounded-xl bg-background-default-lighter'></div>
+      <div key={index} className='bg-background-default-lighter inline-flex h-[160px] rounded-xl'></div>
     ))
     return defaultCards
   }
   return (
     <>
       {renderDefaultCard()}
-      <div className='absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-gradient-to-t from-background-body to-transparent'>
+      <div className='from-background-body absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center bg-gradient-to-t to-transparent'>
         <span className='system-md-medium text-text-tertiary'>{t('app.newApp.noAppsFound')}</span>
       </div>
     </>
diff --git a/web/app/(commonLayout)/apps/NewAppCard.tsx b/web/app/(commonLayout)/apps/NewAppCard.tsx
index 2ad8cd7d0b..eb63b8bd47 100644
--- a/web/app/(commonLayout)/apps/NewAppCard.tsx
+++ b/web/app/(commonLayout)/apps/NewAppCard.tsx
@@ -47,22 +47,22 @@ const CreateAppCard = (
   return (
     <div
       ref={ref}
-      className={cn('relative col-span-1 inline-flex flex-col justify-between h-[160px] bg-components-card-bg rounded-xl border-[0.5px] border-components-card-border', className)}
+      className={cn('bg-components-card-bg border-components-card-border relative col-span-1 inline-flex h-[160px] flex-col justify-between rounded-xl border-[0.5px]', className)}
     >
-      <div className='grow p-2 rounded-t-xl'>
-        <div className='px-6 pt-2 pb-1 text-xs font-medium leading-[18px] text-text-tertiary'>{t('app.createApp')}</div>
-        <button className='w-full flex items-center mb-1 px-6 py-[7px] rounded-lg text-[13px] font-medium leading-[18px] text-text-tertiary cursor-pointer hover:text-text-secondary hover:bg-state-base-hover' onClick={() => setShowNewAppModal(true)}>
-          <FilePlus01 className='shrink-0 mr-2 w-4 h-4' />
+      <div className='grow rounded-t-xl p-2'>
+        <div className='text-text-tertiary px-6 pb-1 pt-2 text-xs font-medium leading-[18px]'>{t('app.createApp')}</div>
+        <button className='text-text-tertiary hover:text-text-secondary hover:bg-state-base-hover mb-1 flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px]' onClick={() => setShowNewAppModal(true)}>
+          <FilePlus01 className='mr-2 h-4 w-4 shrink-0' />
           {t('app.newApp.startFromBlank')}
         </button>
-        <button className='w-full flex items-center px-6 py-[7px] rounded-lg text-[13px] font-medium leading-[18px] text-text-tertiary cursor-pointer hover:text-text-secondary hover:bg-state-base-hover' onClick={() => setShowNewAppTemplateDialog(true)}>
-          <FilePlus02 className='shrink-0 mr-2 w-4 h-4' />
+        <button className='text-text-tertiary hover:text-text-secondary hover:bg-state-base-hover flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px]' onClick={() => setShowNewAppTemplateDialog(true)}>
+          <FilePlus02 className='mr-2 h-4 w-4 shrink-0' />
           {t('app.newApp.startFromTemplate')}
         </button>
         <button
           onClick={() => setShowCreateFromDSLModal(true)}
-          className='w-full flex items-center px-6 py-[7px] rounded-lg text-[13px] font-medium leading-[18px] text-text-tertiary cursor-pointer hover:text-text-secondary hover:bg-state-base-hover'>
-          <FileArrow01 className='shrink-0 mr-2 w-4 h-4' />
+          className='text-text-tertiary hover:text-text-secondary hover:bg-state-base-hover flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px]'>
+          <FileArrow01 className='mr-2 h-4 w-4 shrink-0' />
           {t('app.importDSL')}
         </button>
       </div>
diff --git a/web/app/(commonLayout)/apps/page.tsx b/web/app/(commonLayout)/apps/page.tsx
index 972aabc8bc..d0ec85f139 100644
--- a/web/app/(commonLayout)/apps/page.tsx
+++ b/web/app/(commonLayout)/apps/page.tsx
@@ -13,17 +13,17 @@ const AppList = () => {
   const systemFeatures = useContextSelector(AppContext, v => v.systemFeatures)
 
   return (
-    <div className='relative flex flex-col overflow-y-auto bg-background-body shrink-0 h-0 grow'>
+    <div className='bg-background-body relative flex h-0 shrink-0 grow flex-col overflow-y-auto'>
       <Apps />
-      {systemFeatures.license.status === LicenseStatus.NONE && <footer className='px-12 py-6 grow-0 shrink-0'>
-        <h3 className='text-xl font-semibold leading-tight text-gradient'>{t('app.join')}</h3>
-        <p className='mt-1 system-sm-regular text-text-tertiary'>{t('app.communityIntro')}</p>
-        <div className='flex items-center gap-2 mt-3'>
+      {systemFeatures.license.status === LicenseStatus.NONE && <footer className='shrink-0 grow-0 px-12 py-6'>
+        <h3 className='text-gradient text-xl font-semibold leading-tight'>{t('app.join')}</h3>
+        <p className='system-sm-regular text-text-tertiary mt-1'>{t('app.communityIntro')}</p>
+        <div className='mt-3 flex items-center gap-2'>
           <Link className={style.socialMediaLink} target='_blank' rel='noopener noreferrer' href='https://github.com/langgenius/dify'>
-            <RiGithubFill className='w-5 h-5 text-text-tertiary' />
+            <RiGithubFill className='text-text-tertiary h-5 w-5' />
           </Link>
           <Link className={style.socialMediaLink} target='_blank' rel='noopener noreferrer' href='https://discord.gg/FngNHpbcY7'>
-            <RiDiscordFill className='w-5 h-5 text-text-tertiary' />
+            <RiDiscordFill className='text-text-tertiary h-5 w-5' />
           </Link>
         </div>
       </footer>}
diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
index 10d63b68e6..6b1f921b09 100644
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
@@ -98,7 +98,7 @@ const ExtraInfo = ({ isMobile, relatedApps, expand }: IExtraInfoProps) => {
               />
             }
           >
-            <div className='system-xs-medium-uppercase inline-flex cursor-pointer items-center space-x-1 text-text-secondary'>
+            <div className='system-xs-medium-uppercase text-text-secondary inline-flex cursor-pointer items-center space-x-1'>
               <span>{relatedAppsTotal || '--'} {t('common.datasetMenus.relatedApp')}</span>
               <RiInformation2Line className='h-4 w-4' />
             </div>
@@ -117,13 +117,13 @@ const ExtraInfo = ({ isMobile, relatedApps, expand }: IExtraInfoProps) => {
         noDecoration
         needsDelay
         popupContent={
-          <div className='w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-4'>
-            <div className='inline-flex rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle p-2'>
-              <RiApps2AddLine className='h-4 w-4 text-text-tertiary' />
+          <div className='border-components-panel-border bg-components-panel-bg-blur w-[240px] rounded-xl border-[0.5px] p-4'>
+            <div className='border-components-panel-border-subtle bg-background-default-subtle inline-flex rounded-lg border-[0.5px] p-2'>
+              <RiApps2AddLine className='text-text-tertiary h-4 w-4' />
             </div>
-            <div className='my-2 text-xs text-text-tertiary'>{t('common.datasetMenus.emptyTip')}</div>
+            <div className='text-text-tertiary my-2 text-xs'>{t('common.datasetMenus.emptyTip')}</div>
             <a
-              className='mt-2 inline-flex cursor-pointer items-center text-xs text-text-accent'
+              className='text-text-accent mt-2 inline-flex cursor-pointer items-center text-xs'
               href={
                 locale === LanguagesSupported[1]
                   ? 'https://docs.dify.ai/v/zh-hans/guides/knowledge-base/integrate-knowledge-within-application'
@@ -137,7 +137,7 @@ const ExtraInfo = ({ isMobile, relatedApps, expand }: IExtraInfoProps) => {
           </div>
         }
       >
-        <div className='system-xs-medium-uppercase inline-flex cursor-pointer items-center space-x-1 text-text-secondary'>
+        <div className='system-xs-medium-uppercase text-text-secondary inline-flex cursor-pointer items-center space-x-1'>
           <span>{t('common.datasetMenus.noRelatedApp')}</span>
           <RiInformation2Line className='h-4 w-4' />
         </div>
@@ -220,7 +220,7 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
         dataset: datasetRes,
         mutateDatasetRes: () => mutateDatasetRes(),
       }}>
-        <div className="grow overflow-hidden bg-background-default-subtle">{children}</div>
+        <div className="bg-background-default-subtle grow overflow-hidden">{children}</div>
       </DatasetDetailContext.Provider>
     </div>
   )
diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/settings/page.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/settings/page.tsx
index 10798c4c74..e9af945a88 100644
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/settings/page.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/settings/page.tsx
@@ -9,7 +9,7 @@ const Settings = async () => {
   return (
     <div className='h-full overflow-y-auto'>
       <div className='px-6 py-3'>
-        <div className='mb-1 system-xl-semibold text-text-primary'>{t('title')}</div>
+        <div className='system-xl-semibold text-text-primary mb-1'>{t('title')}</div>
         <div className='system-sm-regular text-text-tertiary'>{t('desc')}</div>
       </div>
       <Form />
diff --git a/web/app/(commonLayout)/datasets/ApiServer.tsx b/web/app/(commonLayout)/datasets/ApiServer.tsx
index 82d96c1987..0756178e7f 100644
--- a/web/app/(commonLayout)/datasets/ApiServer.tsx
+++ b/web/app/(commonLayout)/datasets/ApiServer.tsx
@@ -15,22 +15,22 @@ const ApiServer: FC<ApiServerProps> = ({
   const { t } = useTranslation()
 
   return (
-    <div className='flex items-center flex-wrap gap-y-2'>
-      <div className='flex items-center mr-2 pl-1.5 pr-1 h-8 bg-white/80 border-[0.5px] border-white rounded-lg leading-5'>
-        <div className='mr-0.5 px-1.5 h-5 border border-gray-200 text-[11px] text-gray-500 rounded-md shrink-0'>{t('appApi.apiServer')}</div>
-        <div className='px-1 truncate w-fit sm:w-[248px] text-[13px] font-medium text-gray-800'>{apiBaseUrl}</div>
-        <div className='mx-1 w-[1px] h-[14px] bg-gray-200'></div>
+    <div className='flex flex-wrap items-center gap-y-2'>
+      <div className='mr-2 flex h-8 items-center rounded-lg border-[0.5px] border-white bg-white/80 pl-1.5 pr-1 leading-5'>
+        <div className='mr-0.5 h-5 shrink-0 rounded-md border border-gray-200 px-1.5 text-[11px] text-gray-500'>{t('appApi.apiServer')}</div>
+        <div className='w-fit truncate px-1 text-[13px] font-medium text-gray-800 sm:w-[248px]'>{apiBaseUrl}</div>
+        <div className='mx-1 h-[14px] w-[1px] bg-gray-200'></div>
         <CopyFeedback
           content={apiBaseUrl}
           selectorId={randomString(8)}
-          className={'!w-6 !h-6 hover:bg-gray-200'}
+          className={'!h-6 !w-6 hover:bg-gray-200'}
         />
       </div>
-      <div className='flex items-center mr-2 px-3 h-8 bg-[#ECFDF3] text-xs font-semibold text-[#039855] rounded-lg border-[0.5px] border-[#D1FADF]'>
+      <div className='mr-2 flex h-8 items-center rounded-lg border-[0.5px] border-[#D1FADF] bg-[#ECFDF3] px-3 text-xs font-semibold text-[#039855]'>
         {t('appApi.ok')}
       </div>
       <SecretKeyButton
-        className='shrink-0 !h-8 bg-white'
+        className='!h-8 shrink-0 bg-white'
       />
     </div>
   )
diff --git a/web/app/(commonLayout)/datasets/Container.tsx b/web/app/(commonLayout)/datasets/Container.tsx
index f484d30a3d..a833ca353a 100644
--- a/web/app/(commonLayout)/datasets/Container.tsx
+++ b/web/app/(commonLayout)/datasets/Container.tsx
@@ -82,8 +82,8 @@ const Container = () => {
   }, [currentWorkspace, router])
 
   return (
-    <div ref={containerRef} className='grow relative flex flex-col bg-background-body overflow-y-auto scroll-container'>
-      <div className='sticky top-0 flex justify-between pt-4 px-12 pb-2 leading-[56px] bg-background-body z-10 flex-wrap gap-y-2'>
+    <div ref={containerRef} className='bg-background-body scroll-container relative flex grow flex-col overflow-y-auto'>
+      <div className='bg-background-body sticky top-0 z-10 flex flex-wrap justify-between gap-y-2 px-12 pb-2 pt-4 leading-[56px]'>
         <TabSliderNew
           value={activeTab}
           onChange={newActiveTab => setActiveTab(newActiveTab)}
@@ -108,13 +108,13 @@ const Container = () => {
               onChange={e => handleKeywordsChange(e.target.value)}
               onClear={() => handleKeywordsChange('')}
             />
-            <div className="w-[1px] h-4 bg-divider-regular" />
+            <div className="bg-divider-regular h-4 w-[1px]" />
             <Button
-              className='gap-0.5 shadows-shadow-xs'
+              className='shadows-shadow-xs gap-0.5'
               onClick={() => setShowExternalApiPanel(true)}
             >
-              <ApiConnectionMod className='w-4 h-4 text-components-button-secondary-text' />
-              <div className='flex px-0.5 justify-center items-center gap-1 text-components-button-secondary-text system-sm-medium'>{t('dataset.externalAPIPanelTitle')}</div>
+              <ApiConnectionMod className='text-components-button-secondary-text h-4 w-4' />
+              <div className='text-components-button-secondary-text system-sm-medium flex items-center justify-center gap-1 px-0.5'>{t('dataset.externalAPIPanelTitle')}</div>
             </Button>
           </div>
         )}
diff --git a/web/app/(commonLayout)/datasets/DatasetCard.tsx b/web/app/(commonLayout)/datasets/DatasetCard.tsx
index ad83a41dff..13a8b8067a 100644
--- a/web/app/(commonLayout)/datasets/DatasetCard.tsx
+++ b/web/app/(commonLayout)/datasets/DatasetCard.tsx
@@ -84,17 +84,17 @@ const DatasetCard = ({
     }
     return (
       <div className="relative w-full py-1" onMouseLeave={onMouseLeave}>
-        <div className='h-8 py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-gray-100 rounded-lg cursor-pointer' onClick={onClickRename}>
-          <span className='text-gray-700 text-sm'>{t('common.operation.settings')}</span>
+        <div className='mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-gray-100' onClick={onClickRename}>
+          <span className='text-sm text-gray-700'>{t('common.operation.settings')}</span>
         </div>
         {props.showDelete && (
           <>
             <Divider className="!my-1" />
             <div
-              className='group h-8 py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-red-50 rounded-lg cursor-pointer'
+              className='group mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-red-50'
               onClick={onClickDelete}
             >
-              <span className={cn('text-gray-700 text-sm', 'group-hover:text-red-500')}>
+              <span className={cn('text-sm text-gray-700', 'group-hover:text-red-500')}>
                 {t('common.operation.delete')}
               </span>
             </div>
@@ -111,7 +111,7 @@ const DatasetCard = ({
   return (
     <>
       <div
-        className='group relative col-span-1 bg-components-card-bg border-[0.5px] border-solid border-components-card-border rounded-xl shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg'
+        className='bg-components-card-bg border-components-card-border group relative col-span-1 flex min-h-[160px] cursor-pointer flex-col rounded-xl border-[0.5px] border-solid shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg'
         data-disable-nprogress={true}
         onClick={(e) => {
           e.preventDefault()
@@ -121,25 +121,25 @@ const DatasetCard = ({
         }}
       >
         {isExternalProvider(dataset.provider) && <CornerLabel label='External' className='absolute right-0' labelClassName='rounded-tr-xl' />}
-        <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
+        <div className='flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]'>
           <div className={cn(
-            'shrink-0 flex items-center justify-center p-2.5 bg-[#F5F8FF] rounded-md border-[0.5px] border-[#E0EAFF]',
+            'flex shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#E0EAFF] bg-[#F5F8FF] p-2.5',
             !dataset.embedding_available && 'opacity-50 hover:opacity-100',
           )}>
-            <Folder className='w-5 h-5 text-[#444CE7]' />
+            <Folder className='h-5 w-5 text-[#444CE7]' />
           </div>
-          <div className='grow w-0 py-[1px]'>
-            <div className='flex items-center text-sm leading-5 font-semibold text-text-secondary'>
-              <div className={cn('truncate', !dataset.embedding_available && 'opacity-50 hover:opacity-100 text-text-tertiary')} title={dataset.name}>{dataset.name}</div>
+          <div className='w-0 grow py-[1px]'>
+            <div className='text-text-secondary flex items-center text-sm font-semibold leading-5'>
+              <div className={cn('truncate', !dataset.embedding_available && 'text-text-tertiary opacity-50 hover:opacity-100')} title={dataset.name}>{dataset.name}</div>
               {!dataset.embedding_available && (
                 <Tooltip
                   popupContent={t('dataset.unavailableTip')}
                 >
-                  <span className='shrink-0 inline-flex w-max ml-1 px-1 border border-gray-200 rounded-md text-gray-500 text-xs font-normal leading-[18px]'>{t('dataset.unavailable')}</span>
+                  <span className='ml-1 inline-flex w-max shrink-0 rounded-md border border-gray-200 px-1 text-xs font-normal leading-[18px] text-gray-500'>{t('dataset.unavailable')}</span>
                 </Tooltip>
               )}
             </div>
-            <div className='flex items-center mt-[1px] text-xs leading-[18px] text-text-tertiary'>
+            <div className='text-text-tertiary mt-[1px] flex items-center text-xs leading-[18px]'>
               <div
                 className={cn('truncate', (!dataset.embedding_available || !dataset.document_count) && 'opacity-50')}
                 title={dataset.provider === 'external' ? `${dataset.app_count}${t('dataset.appCount')}` : `${dataset.document_count}${t('dataset.documentCount')} · ${Math.round(dataset.word_count / 1000)}${t('dataset.wordCount')} · ${dataset.app_count}${t('dataset.appCount')}`}
@@ -150,9 +150,9 @@ const DatasetCard = ({
                   </>
                   : <>
                     <span>{dataset.document_count}{t('dataset.documentCount')}</span>
-                    <span className='shrink-0 mx-0.5 w-1 text-gray-400'>·</span>
+                    <span className='mx-0.5 w-1 shrink-0 text-gray-400'>·</span>
                     <span>{Math.round(dataset.word_count / 1000)}{t('dataset.wordCount')}</span>
-                    <span className='shrink-0 mx-0.5 w-1 text-gray-400'>·</span>
+                    <span className='mx-0.5 w-1 shrink-0 text-gray-400'>·</span>
                     <span>{dataset.app_count}{t('dataset.appCount')}</span>
                   </>
                 }
@@ -162,7 +162,7 @@ const DatasetCard = ({
         </div>
         <div
           className={cn(
-            'grow mb-2 px-[14px] max-h-[72px] text-xs leading-normal text-text-tertiary group-hover:line-clamp-2 group-hover:max-h-[36px]',
+            'text-text-tertiary mb-2 max-h-[72px] grow px-[14px] text-xs leading-normal group-hover:line-clamp-2 group-hover:max-h-[36px]',
             tags.length ? 'line-clamp-2' : 'line-clamp-4',
             !dataset.embedding_available && 'opacity-50 hover:opacity-100',
           )}
@@ -170,15 +170,15 @@ const DatasetCard = ({
           {dataset.description}
         </div>
         <div className={cn(
-          'items-center shrink-0 mt-1 pt-1 pl-[14px] pr-[6px] pb-[6px] h-[42px]',
+          'mt-1 h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1',
           tags.length ? 'flex' : '!hidden group-hover:!flex',
         )}>
-          <div className={cn('grow flex items-center gap-1 w-0', !dataset.embedding_available && 'opacity-50 hover:opacity-100')} onClick={(e) => {
+          <div className={cn('flex w-0 grow items-center gap-1', !dataset.embedding_available && 'opacity-50 hover:opacity-100')} onClick={(e) => {
             e.stopPropagation()
             e.preventDefault()
           }}>
             <div className={cn(
-              'group-hover:!block group-hover:!mr-0 mr-[41px] grow w-full',
+              'mr-[41px] w-full grow group-hover:!mr-0 group-hover:!block',
               tags.length ? '!block' : '!hidden',
             )}>
               <TagSelector
@@ -192,26 +192,26 @@ const DatasetCard = ({
               />
             </div>
           </div>
-          <div className='!hidden group-hover:!flex shrink-0 mx-1 w-[1px] h-[14px] bg-gray-200' />
-          <div className='!hidden group-hover:!flex shrink-0'>
+          <div className='mx-1 !hidden h-[14px] w-[1px] shrink-0 bg-gray-200 group-hover:!flex' />
+          <div className='!hidden shrink-0 group-hover:!flex'>
             <CustomPopover
               htmlContent={<Operations showDelete={!isCurrentWorkspaceDatasetOperator} />}
               position="br"
               trigger="click"
               btnElement={
                 <div
-                  className='flex items-center justify-center w-8 h-8 cursor-pointer rounded-md'
+                  className='flex h-8 w-8 cursor-pointer items-center justify-center rounded-md'
                 >
-                  <RiMoreFill className='w-4 h-4 text-gray-700' />
+                  <RiMoreFill className='h-4 w-4 text-gray-700' />
                 </div>
               }
               btnClassName={open =>
                 cn(
                   open ? '!bg-black/5 !shadow-none' : '!bg-transparent',
-                  'h-8 w-8 !p-2 rounded-md border-none hover:!bg-black/5',
+                  'h-8 w-8 rounded-md border-none !p-2 hover:!bg-black/5',
                 )
               }
-              className={'!w-[128px] h-fit !z-20'}
+              className={'!z-20 h-fit !w-[128px]'}
             />
           </div>
         </div>
diff --git a/web/app/(commonLayout)/datasets/DatasetFooter.tsx b/web/app/(commonLayout)/datasets/DatasetFooter.tsx
index b87098000f..c5d12c6e0c 100644
--- a/web/app/(commonLayout)/datasets/DatasetFooter.tsx
+++ b/web/app/(commonLayout)/datasets/DatasetFooter.tsx
@@ -6,8 +6,8 @@ const DatasetFooter = () => {
   const { t } = useTranslation()
 
   return (
-    <footer className='px-12 py-6 grow-0 shrink-0'>
-      <h3 className='text-xl font-semibold leading-tight text-gradient'>{t('dataset.didYouKnow')}</h3>
+    <footer className='shrink-0 grow-0 px-12 py-6'>
+      <h3 className='text-gradient text-xl font-semibold leading-tight'>{t('dataset.didYouKnow')}</h3>
       <p className='mt-1 text-sm font-normal leading-tight text-gray-700'>
         {t('dataset.intro1')}<span className='inline-flex items-center gap-1 text-blue-600'>{t('dataset.intro2')}</span>{t('dataset.intro3')}<br />
         {t('dataset.intro4')}<span className='inline-flex items-center gap-1 text-blue-600'>{t('dataset.intro5')}</span>{t('dataset.intro6')}
diff --git a/web/app/(commonLayout)/datasets/Doc.tsx b/web/app/(commonLayout)/datasets/Doc.tsx
index f56a5bc909..54777f35ae 100644
--- a/web/app/(commonLayout)/datasets/Doc.tsx
+++ b/web/app/(commonLayout)/datasets/Doc.tsx
@@ -71,8 +71,8 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
       <div className={`fixed right-16 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}>
         {isTocExpanded
           ? (
-            <nav className="toc w-full bg-gray-50 p-4 rounded-lg shadow-md max-h-[calc(100vh-150px)] overflow-y-auto">
-              <div className="flex justify-between items-center mb-4">
+            <nav className="toc max-h-[calc(100vh-150px)] w-full overflow-y-auto rounded-lg bg-gray-50 p-4 shadow-md">
+              <div className="mb-4 flex items-center justify-between">
                 <h3 className="text-lg font-semibold">{t('appApi.develop.toc')}</h3>
                 <button
                   onClick={() => setIsTocExpanded(false)}
@@ -86,7 +86,7 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
                   <li key={index}>
                     <a
                       href={item.href}
-                      className="text-gray-600 hover:text-gray-900 hover:underline transition-colors duration-200"
+                      className="text-gray-600 transition-colors duration-200 hover:text-gray-900 hover:underline"
                       onClick={e => handleTocClick(e, item)}
                     >
                       {item.text}
@@ -99,13 +99,13 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
           : (
             <button
               onClick={() => setIsTocExpanded(true)}
-              className="w-10 h-10 bg-gray-50 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 transition-colors duration-200"
+              className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-50 shadow-md transition-colors duration-200 hover:bg-gray-100"
             >
-              <RiListUnordered className="w-6 h-6" />
+              <RiListUnordered className="h-6 w-6" />
             </button>
           )}
       </div>
-      <article className='mx-1 px-4 sm:mx-12 pt-16 bg-white rounded-t-xl prose prose-xl'>
+      <article className='prose prose-xl mx-1 rounded-t-xl bg-white px-4 pt-16 sm:mx-12'>
         {locale !== LanguagesSupported[1]
           ? <TemplateEn apiBaseUrl={apiBaseUrl} />
           : <TemplateZh apiBaseUrl={apiBaseUrl} />
diff --git a/web/app/(commonLayout)/datasets/NewDatasetCard.tsx b/web/app/(commonLayout)/datasets/NewDatasetCard.tsx
index 99b612cd1a..6f8ab57acc 100644
--- a/web/app/(commonLayout)/datasets/NewDatasetCard.tsx
+++ b/web/app/(commonLayout)/datasets/NewDatasetCard.tsx
@@ -14,23 +14,23 @@ const CreateAppCard = (
   const { t } = useTranslation()
 
   return (
-    <div className='flex flex-col bg-background-default-dimm border-[0.5px] border-components-panel-border rounded-xl
-      min-h-[160px] transition-all duration-200 ease-in-out'
+    <div className='bg-background-default-dimm border-components-panel-border flex min-h-[160px] flex-col rounded-xl
+      border-[0.5px] transition-all duration-200 ease-in-out'
     >
-      <a ref={ref} className='group flex grow items-start p-4 cursor-pointer' href='/datasets/create'>
+      <a ref={ref} className='group flex grow cursor-pointer items-start p-4' href='/datasets/create'>
         <div className='flex items-center gap-3'>
-          <div className='w-10 h-10 p-2 flex items-center justify-center border border-dashed border-divider-regular rounded-lg
-            bg-background-default-lighter group-hover:border-solid group-hover:border-effects-highlight group-hover:bg-background-default-dodge'
+          <div className='border-divider-regular bg-background-default-lighter group-hover:border-effects-highlight group-hover:bg-background-default-dodge flex h-10 w-10 items-center justify-center rounded-lg
+            border border-dashed p-2 group-hover:border-solid'
           >
-            <RiAddLine className='w-4 h-4 text-text-tertiary group-hover:text-text-accent'/>
+            <RiAddLine className='text-text-tertiary group-hover:text-text-accent h-4 w-4'/>
           </div>
           <div className='system-md-semibold text-text-secondary group-hover:text-text-accent'>{t('dataset.createDataset')}</div>
         </div>
       </a>
-      <div className='p-4 pt-0 text-text-tertiary system-xs-regular'>{t('dataset.createDatasetIntro')}</div>
-      <a className='group flex p-4 items-center gap-1 border-t-[0.5px] border-divider-subtle rounded-b-xl cursor-pointer' href='/datasets/connect'>
+      <div className='text-text-tertiary system-xs-regular p-4 pt-0'>{t('dataset.createDatasetIntro')}</div>
+      <a className='border-divider-subtle group flex cursor-pointer items-center gap-1 rounded-b-xl border-t-[0.5px] p-4' href='/datasets/connect'>
         <div className='system-xs-medium text-text-tertiary group-hover:text-text-accent'>{t('dataset.connectDataset')}</div>
-        <RiArrowRightLine className='w-3.5 h-3.5 text-text-tertiary group-hover:text-text-accent' />
+        <RiArrowRightLine className='text-text-tertiary group-hover:text-text-accent h-3.5 w-3.5' />
       </a>
     </div>
   )
diff --git a/web/app/(shareLayout)/layout.tsx b/web/app/(shareLayout)/layout.tsx
index 94ac1deb0b..83adbd3cae 100644
--- a/web/app/(shareLayout)/layout.tsx
+++ b/web/app/(shareLayout)/layout.tsx
@@ -10,7 +10,7 @@ const Layout: FC<{
   children: React.ReactNode
 }> = ({ children }) => {
   return (
-    <div className="min-w-[300px] h-full pb-[env(safe-area-inset-bottom)]">
+    <div className="h-full min-w-[300px] pb-[env(safe-area-inset-bottom)]">
       {children}
     </div>
   )
diff --git a/web/app/(shareLayout)/webapp-signin/page.tsx b/web/app/(shareLayout)/webapp-signin/page.tsx
index 12f4152c6f..d58fafa151 100644
--- a/web/app/(shareLayout)/webapp-signin/page.tsx
+++ b/web/app/(shareLayout)/webapp-signin/page.tsx
@@ -92,8 +92,8 @@ const WebSSOForm: FC = () => {
   }, [message, tokenFromUrl]) // Added dependencies to useEffect
 
   return (
-    <div className="flex items-center justify-center h-full">
-      <div className={cn('flex flex-col items-center w-full grow justify-center', 'px-6', 'md:px-[108px]')}>
+    <div className="flex h-full items-center justify-center">
+      <div className={cn('flex w-full grow flex-col items-center justify-center', 'px-6', 'md:px-[108px]')}>
         <Loading type='area' />
       </div>
     </div>
diff --git a/web/app/account/account-page/AvatarWithEdit.tsx b/web/app/account/account-page/AvatarWithEdit.tsx
index 97f6ba8da6..8250789def 100644
--- a/web/app/account/account-page/AvatarWithEdit.tsx
+++ b/web/app/account/account-page/AvatarWithEdit.tsx
@@ -83,13 +83,13 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
   return (
     <>
       <div>
-        <div className="relative group">
+        <div className="group relative">
           <Avatar {...props} />
           <div
             onClick={() => { setIsShowAvatarPicker(true) }}
-            className="absolute inset-0 bg-black bg-opacity-50 rounded-full opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer flex items-center justify-center"
+            className="absolute inset-0 flex cursor-pointer items-center justify-center rounded-full bg-black bg-opacity-50 opacity-0 transition-opacity group-hover:opacity-100"
           >
-            <span className="text-white text-xs">
+            <span className="text-xs text-white">
               <RiPencilLine />
             </span>
           </div>
@@ -105,7 +105,7 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
         <ImageInput onImageInput={handleImageInput} cropShape='round' />
         <Divider className='m-0' />
 
-        <div className='w-full flex items-center justify-center p-3 gap-2'>
+        <div className='flex w-full items-center justify-center gap-2 p-3'>
           <Button className='w-full' onClick={() => setIsShowAvatarPicker(false)}>
             {t('app.iconPicker.cancel')}
           </Button>
diff --git a/web/app/account/account-page/index.tsx b/web/app/account/account-page/index.tsx
index 16d826a7c2..cb8a5cecee 100644
--- a/web/app/account/account-page/index.tsx
+++ b/web/app/account/account-page/index.tsx
@@ -122,17 +122,17 @@ export default function AccountPage() {
         <div className='mr-3'>
           <AppIcon size='tiny' />
         </div>
-        <div className='mt-[3px] system-sm-medium text-text-secondary'>{item.name}</div>
+        <div className='system-sm-medium text-text-secondary mt-[3px]'>{item.name}</div>
       </div>
     )
   }
 
   return (
     <>
-      <div className='pt-2 pb-3'>
+      <div className='pb-3 pt-2'>
         <h4 className='title-2xl-semi-bold text-text-primary'>{t('common.account.myAccount')}</h4>
       </div>
-      <div className='mb-8 p-6 rounded-xl flex items-center bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1'>
+      <div className='from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 mb-8 flex items-center rounded-xl bg-gradient-to-r p-6'>
         <AvatarWithEdit avatar={userProfile.avatar_url} name={userProfile.name} onSave={ mutateUserProfile } size={64} />
         <div className='ml-4'>
           <p className='system-xl-semibold text-text-primary'>{userProfile.name}</p>
@@ -141,19 +141,19 @@ export default function AccountPage() {
       </div>
       <div className='mb-8'>
         <div className={titleClassName}>{t('common.account.name')}</div>
-        <div className='flex items-center justify-between gap-2 w-full mt-2'>
-          <div className='flex-1 bg-components-input-bg-normal rounded-lg p-2 system-sm-regular text-components-input-text-filled '>
+        <div className='mt-2 flex w-full items-center justify-between gap-2'>
+          <div className='bg-components-input-bg-normal system-sm-regular text-components-input-text-filled flex-1 rounded-lg p-2 '>
             <span className='pl-1'>{userProfile.name}</span>
           </div>
-          <div className='bg-components-button-tertiary-bg rounded-lg py-2 px-3 cursor-pointer system-sm-medium text-components-button-tertiary-text' onClick={handleEditName}>
+          <div className='bg-components-button-tertiary-bg system-sm-medium text-components-button-tertiary-text cursor-pointer rounded-lg px-3 py-2' onClick={handleEditName}>
             {t('common.operation.edit')}
           </div>
         </div>
       </div>
       <div className='mb-8'>
         <div className={titleClassName}>{t('common.account.email')}</div>
-        <div className='flex items-center justify-between gap-2 w-full mt-2'>
-          <div className='flex-1 bg-components-input-bg-normal rounded-lg p-2 system-sm-regular text-components-input-text-filled '>
+        <div className='mt-2 flex w-full items-center justify-between gap-2'>
+          <div className='bg-components-input-bg-normal system-sm-regular text-components-input-text-filled flex-1 rounded-lg p-2 '>
             <span className='pl-1'>{userProfile.email}</span>
           </div>
         </div>
@@ -162,14 +162,14 @@ export default function AccountPage() {
         systemFeatures.enable_email_password_login && (
           <div className='mb-8 flex justify-between gap-2'>
             <div>
-              <div className='mb-1 system-sm-semibold text-text-secondary'>{t('common.account.password')}</div>
-              <div className='mb-2 body-xs-regular text-text-tertiary'>{t('common.account.passwordTip')}</div>
+              <div className='system-sm-semibold text-text-secondary mb-1'>{t('common.account.password')}</div>
+              <div className='body-xs-regular text-text-tertiary mb-2'>{t('common.account.passwordTip')}</div>
             </div>
             <Button onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</Button>
           </div>
         )
       }
-      <div className='mb-6 border-[1px] border-divider-subtle' />
+      <div className='border-divider-subtle mb-6 border-[1px]' />
       <div className='mb-8'>
         <div className={titleClassName}>{t('common.account.langGeniusAccount')}</div>
         <div className={descriptionClassName}>{t('common.account.langGeniusAccountTip')}</div>
@@ -181,7 +181,7 @@ export default function AccountPage() {
             wrapperClassName='mt-2'
           />
         )}
-        {!IS_CE_EDITION && <Button className='mt-2 text-components-button-destructive-secondary-text' onClick={() => setShowDeleteAccountModal(true)}>{t('common.account.delete')}</Button>}
+        {!IS_CE_EDITION && <Button className='text-components-button-destructive-secondary-text mt-2' onClick={() => setShowDeleteAccountModal(true)}>{t('common.account.delete')}</Button>}
       </div>
       {
         editNameModalVisible && (
@@ -190,13 +190,13 @@ export default function AccountPage() {
             onClose={() => setEditNameModalVisible(false)}
             className={s.modal}
           >
-            <div className='mb-6 title-2xl-semi-bold text-text-primary'>{t('common.account.editName')}</div>
+            <div className='title-2xl-semi-bold text-text-primary mb-6'>{t('common.account.editName')}</div>
             <div className={titleClassName}>{t('common.account.name')}</div>
             <Input className='mt-2'
               value={editName}
               onChange={e => setEditName(e.target.value)}
             />
-            <div className='flex justify-end mt-10'>
+            <div className='mt-10 flex justify-end'>
               <Button className='mr-2' onClick={() => setEditNameModalVisible(false)}>{t('common.operation.cancel')}</Button>
               <Button
                 disabled={editing || !editName}
@@ -219,7 +219,7 @@ export default function AccountPage() {
             }}
             className={s.modal}
           >
-            <div className='mb-6 title-2xl-semi-bold text-text-primary'>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</div>
+            <div className='title-2xl-semi-bold text-text-primary mb-6'>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</div>
             {userProfile.is_password_set && (
               <>
                 <div className={titleClassName}>{t('common.account.currentPassword')}</div>
@@ -242,7 +242,7 @@ export default function AccountPage() {
                 </div>
               </>
             )}
-            <div className='mt-8 system-sm-semibold text-text-secondary'>
+            <div className='system-sm-semibold text-text-secondary mt-8'>
               {userProfile.is_password_set ? t('common.account.newPassword') : t('common.account.password')}
             </div>
             <div className='relative mt-2'>
@@ -261,7 +261,7 @@ export default function AccountPage() {
                 </Button>
               </div>
             </div>
-            <div className='mt-8 system-sm-semibold text-text-secondary'>{t('common.account.confirmPassword')}</div>
+            <div className='system-sm-semibold text-text-secondary mt-8'>{t('common.account.confirmPassword')}</div>
             <div className='relative mt-2'>
               <Input
                 type={showConfirmPassword ? 'text' : 'password'}
@@ -278,7 +278,7 @@ export default function AccountPage() {
                 </Button>
               </div>
             </div>
-            <div className='flex justify-end mt-10'>
+            <div className='mt-10 flex justify-end'>
               <Button className='mr-2' onClick={() => {
                 setEditPasswordModalVisible(false)
                 resetPasswordForm()
diff --git a/web/app/account/avatar.tsx b/web/app/account/avatar.tsx
index 29b740a427..f994ee4ab6 100644
--- a/web/app/account/avatar.tsx
+++ b/web/app/account/avatar.tsx
@@ -38,10 +38,10 @@ export default function AppSelector() {
             <div>
               <MenuButton
                 className={`
-                    inline-flex items-center
-                    rounded-[20px] p-1x text-sm
-                    text-text-primary
-                    mobile:px-1
+                    p-1x text-text-primary
+                    mobile:px-1 inline-flex items-center
+                    rounded-[20px]
+                    text-sm
                     ${open && 'bg-components-panel-bg-blur'}
                   `}
               >
@@ -59,8 +59,8 @@ export default function AppSelector() {
             >
               <MenuItems
                 className="
-                    absolute -right-2 -top-1 w-60 max-w-80
-                    divide-y divide-divider-subtle origin-top-right rounded-lg bg-components-panel-bg-blur
+                    divide-divider-subtle bg-components-panel-bg-blur absolute -right-2 -top-1
+                    w-60 max-w-80 origin-top-right divide-y rounded-lg
                     shadow-lg
                   "
               >
@@ -78,10 +78,10 @@ export default function AppSelector() {
                 <MenuItem>
                   <div className='p-1' onClick={() => handleLogout()}>
                     <div
-                      className='flex items-center justify-start h-9 px-3 rounded-lg cursor-pointer group hover:bg-state-base-hover'
+                      className='hover:bg-state-base-hover group flex h-9 cursor-pointer items-center justify-start rounded-lg px-3'
                     >
-                      <LogOut01 className='w-4 h-4 text-text-tertiary flex mr-1' />
-                      <div className='font-normal text-[14px] text-text-secondary'>{t('common.userProfile.logout')}</div>
+                      <LogOut01 className='text-text-tertiary mr-1 flex h-4 w-4' />
+                      <div className='text-text-secondary text-[14px] font-normal'>{t('common.userProfile.logout')}</div>
                     </div>
                   </div>
                 </MenuItem>
diff --git a/web/app/account/delete-account/components/check-email.tsx b/web/app/account/delete-account/components/check-email.tsx
index 84ea8a4c24..8b6a674727 100644
--- a/web/app/account/delete-account/components/check-email.tsx
+++ b/web/app/account/delete-account/components/check-email.tsx
@@ -29,18 +29,18 @@ export default function CheckEmail(props: DeleteAccountProps) {
   }, [getDeleteEmailVerifyCode, props])
 
   return <>
-    <div className='py-1 text-text-destructive body-md-medium'>
+    <div className='text-text-destructive body-md-medium py-1'>
       {t('common.account.deleteTip')}
     </div>
-    <div className='pt-1 pb-2 text-text-secondary body-md-regular'>
+    <div className='text-text-secondary body-md-regular pb-2 pt-1'>
       {t('common.account.deletePrivacyLinkTip')}
       <Link href='https://dify.ai/privacy' className='text-text-accent'>{t('common.account.deletePrivacyLink')}</Link>
     </div>
-    <label className='mt-3 mb-1 h-6 flex items-center system-sm-semibold text-text-secondary'>{t('common.account.deleteLabel')}</label>
+    <label className='system-sm-semibold text-text-secondary mb-1 mt-3 flex h-6 items-center'>{t('common.account.deleteLabel')}</label>
     <Input placeholder={t('common.account.deletePlaceholder') as string} onChange={(e) => {
       setUserInputEmail(e.target.value)
     }} />
-    <div className='w-full flex flex-col mt-3 gap-2'>
+    <div className='mt-3 flex w-full flex-col gap-2'>
       <Button className='w-full' disabled={userInputEmail !== userProfile.email || isSendingEmail} loading={isSendingEmail} variant='primary' onClick={handleConfirm}>{t('common.account.sendVerificationButton')}</Button>
       <Button className='w-full' onClick={props.onCancel}>{t('common.operation.cancel')}</Button>
     </div>
diff --git a/web/app/account/delete-account/components/feed-back.tsx b/web/app/account/delete-account/components/feed-back.tsx
index 1d01c69d94..b87d51da64 100644
--- a/web/app/account/delete-account/components/feed-back.tsx
+++ b/web/app/account/delete-account/components/feed-back.tsx
@@ -56,11 +56,11 @@ export default function FeedBack(props: DeleteAccountProps) {
     className="max-w-[480px]"
     footer={false}
   >
-    <label className='mt-3 mb-1 flex items-center system-sm-semibold text-text-secondary'>{t('common.account.feedbackLabel')}</label>
+    <label className='system-sm-semibold text-text-secondary mb-1 mt-3 flex items-center'>{t('common.account.feedbackLabel')}</label>
     <Textarea rows={6} value={userFeedback} placeholder={t('common.account.feedbackPlaceholder') as string} onChange={(e) => {
       setUserFeedback(e.target.value)
     }} />
-    <div className='w-full flex flex-col mt-3 gap-2'>
+    <div className='mt-3 flex w-full flex-col gap-2'>
       <Button className='w-full' loading={isPending} variant='primary' onClick={handleSubmit}>{t('common.operation.submit')}</Button>
       <Button className='w-full' onClick={handleSkip}>{t('common.operation.skip')}</Button>
     </div>
diff --git a/web/app/account/delete-account/components/verify-email.tsx b/web/app/account/delete-account/components/verify-email.tsx
index a986c79154..2679b88737 100644
--- a/web/app/account/delete-account/components/verify-email.tsx
+++ b/web/app/account/delete-account/components/verify-email.tsx
@@ -35,18 +35,18 @@ export default function VerifyEmail(props: DeleteAccountProps) {
     catch (error) { console.error(error) }
   }, [emailToken, verificationCode, confirmDeleteAccount, props])
   return <>
-    <div className='pt-1 text-text-destructive body-md-medium'>
+    <div className='text-text-destructive body-md-medium pt-1'>
       {t('common.account.deleteTip')}
     </div>
-    <div className='pt-1 pb-2 text-text-secondary body-md-regular'>
+    <div className='text-text-secondary body-md-regular pb-2 pt-1'>
       {t('common.account.deletePrivacyLinkTip')}
       <Link href='https://dify.ai/privacy' className='text-text-accent'>{t('common.account.deletePrivacyLink')}</Link>
     </div>
-    <label className='mt-3 mb-1 h-6 flex items-center system-sm-semibold text-text-secondary'>{t('common.account.verificationLabel')}</label>
+    <label className='system-sm-semibold text-text-secondary mb-1 mt-3 flex h-6 items-center'>{t('common.account.verificationLabel')}</label>
     <Input minLength={6} maxLength={6} placeholder={t('common.account.verificationPlaceholder') as string} onChange={(e) => {
       setVerificationCode(e.target.value)
     }} />
-    <div className='w-full flex flex-col mt-3 gap-2'>
+    <div className='mt-3 flex w-full flex-col gap-2'>
       <Button className='w-full' disabled={shouldButtonDisabled} loading={isDeleting} variant='warning' onClick={handleConfirm}>{t('common.account.permanentlyDeleteButton')}</Button>
       <Button className='w-full' onClick={props.onCancel}>{t('common.operation.cancel')}</Button>
       <Countdown onResend={sendEmail} />
diff --git a/web/app/account/header.tsx b/web/app/account/header.tsx
index 694533e5ab..077c8f40d9 100644
--- a/web/app/account/header.tsx
+++ b/web/app/account/header.tsx
@@ -16,19 +16,19 @@ const Header = () => {
   return (
     <div className='flex flex-1 items-center justify-between px-4'>
       <div className='flex items-center gap-3'>
-        <div className='flex items-center cursor-pointer' onClick={back}>
+        <div className='flex cursor-pointer items-center' onClick={back}>
           <LogoSite className='object-contain' />
         </div>
-        <div className='w-[1px] h-4 bg-divider-regular' />
+        <div className='bg-divider-regular h-4 w-[1px]' />
         <p className='text-text-primary title-3xl-semi-bold'>{t('common.account.account')}</p>
       </div>
-      <div className='flex items-center flex-shrink-0 gap-3'>
-        <Button className='gap-2 py-2 px-3 system-sm-medium' onClick={back}>
-          <RiRobot2Line className='w-4 h-4' />
+      <div className='flex shrink-0 items-center gap-3'>
+        <Button className='system-sm-medium gap-2 px-3 py-2' onClick={back}>
+          <RiRobot2Line className='h-4 w-4' />
           <p>{t('common.account.studio')}</p>
-          <RiArrowRightUpLine className='w-4 h-4' />
+          <RiArrowRightUpLine className='h-4 w-4' />
         </Button>
-        <div className='w-[1px] h-4 bg-divider-regular' />
+        <div className='bg-divider-regular h-4 w-[1px]' />
         <Avatar />
       </div>
     </div>
diff --git a/web/app/account/layout.tsx b/web/app/account/layout.tsx
index 11a6abeab4..893c11d596 100644
--- a/web/app/account/layout.tsx
+++ b/web/app/account/layout.tsx
@@ -21,7 +21,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
                 <HeaderWrapper>
                   <Header />
                 </HeaderWrapper>
-                <div className='relative flex flex-col overflow-y-auto bg-components-panel-bg shrink-0 h-0 grow'>
+                <div className='bg-components-panel-bg relative flex h-0 shrink-0 grow flex-col overflow-y-auto'>
                   {children}
                 </div>
               </ModalContextProvider>
diff --git a/web/app/account/page.tsx b/web/app/account/page.tsx
index bb7e7f7feb..baf386e2ba 100644
--- a/web/app/account/page.tsx
+++ b/web/app/account/page.tsx
@@ -1,7 +1,7 @@
 import AccountPage from './account-page'
 
 export default function Account() {
-  return <div className='max-w-[640px] w-full mx-auto pt-12 px-6'>
+  return <div className='mx-auto w-full max-w-[640px] px-6 pt-12'>
     <AccountPage />
   </div>
 }
diff --git a/web/app/activate/activateForm.tsx b/web/app/activate/activateForm.tsx
index 9a32a76a73..aef5b5a290 100644
--- a/web/app/activate/activateForm.tsx
+++ b/web/app/activate/activateForm.tsx
@@ -41,7 +41,7 @@ const ActivateForm = () => {
   return (
     <div className={
       cn(
-        'flex flex-col items-center w-full grow justify-center',
+        'flex w-full grow flex-col items-center justify-center',
         'px-6',
         'md:px-[108px]',
       )
@@ -49,11 +49,11 @@ const ActivateForm = () => {
       {!checkRes && <Loading />}
       {checkRes && !checkRes.is_valid && (
         <div className="flex flex-col md:w-[400px]">
-          <div className="w-full mx-auto">
-            <div className="mb-3 flex justify-center items-center w-20 h-20 p-5 rounded-[20px] border border-gray-100 shadow-lg text-[40px] font-bold">🤷‍♂️</div>
+          <div className="mx-auto w-full">
+            <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-gray-100 p-5 text-[40px] font-bold shadow-lg">🤷‍♂️</div>
             <h2 className="text-[32px] font-bold text-gray-900">{t('login.invalid')}</h2>
           </div>
-          <div className="w-full mx-auto mt-6">
+          <div className="mx-auto mt-6 w-full">
             <Button variant='primary' className='w-full !text-sm'>
               <a href="https://dify.ai">{t('login.explore')}</a>
             </Button>
diff --git a/web/app/activate/page.tsx b/web/app/activate/page.tsx
index 0f18544335..de207286bf 100644
--- a/web/app/activate/page.tsx
+++ b/web/app/activate/page.tsx
@@ -8,14 +8,14 @@ const Activate = () => {
   return (
     <div className={cn(
       style.background,
-      'flex w-full min-h-screen',
+      'flex min-h-screen w-full',
       'sm:p-4 lg:p-8',
       'gap-x-20',
       'justify-center lg:justify-start',
     )}>
       <div className={
         cn(
-          'flex w-full flex-col bg-white shadow rounded-2xl shrink-0',
+          'flex w-full shrink-0 flex-col rounded-2xl bg-white shadow',
           'space-between',
         )
       }>
diff --git a/web/app/components/app-sidebar/app-info.tsx b/web/app/components/app-sidebar/app-info.tsx
index 57eb013be7..631ebc1fb4 100644
--- a/web/app/components/app-sidebar/app-info.tsx
+++ b/web/app/components/app-sidebar/app-info.tsx
@@ -191,7 +191,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
         }}
         className='block w-full'
       >
-        <div className={cn('flex rounded-lg', expand ? 'p-2 pb-2.5 flex-col gap-2' : 'p-1 gap-1 justify-center items-start', open && 'bg-state-base-hover', isCurrentWorkspaceEditor && 'hover:bg-state-base-hover cursor-pointer')}>
+        <div className={cn('flex rounded-lg', expand ? 'flex-col gap-2 p-2 pb-2.5' : 'items-start justify-center gap-1 p-1', open && 'bg-state-base-hover', isCurrentWorkspaceEditor && 'hover:bg-state-base-hover cursor-pointer')}>
           <div className={`flex items-center self-stretch ${expand ? 'justify-between' : 'flex-col gap-1'}`}>
             <AppIcon
               size={expand ? 'large' : 'small'}
@@ -200,9 +200,9 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
               background={appDetail.icon_background}
               imageUrl={appDetail.icon_url}
             />
-            <div className='flex p-0.5 justify-center items-center rounded-md'>
-              <div className='flex w-5 h-5 justify-center items-center'>
-                <RiEqualizer2Line className='w-4 h-4 text-text-tertiary' />
+            <div className='flex items-center justify-center rounded-md p-0.5'>
+              <div className='flex h-5 w-5 items-center justify-center'>
+                <RiEqualizer2Line className='text-text-tertiary h-4 w-4' />
               </div>
             </div>
           </div>
@@ -221,9 +221,9 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
       <ContentDialog
         show={open}
         onClose={() => setOpen(false)}
-        className='!p-0 flex flex-col absolute left-2 top-2 bottom-2 w-[420px] rounded-2xl'
+        className='absolute bottom-2 left-2 top-2 flex w-[420px] flex-col rounded-2xl !p-0'
       >
-        <div className='flex p-4 flex-col justify-center items-start gap-3 self-stretch shrink-0'>
+        <div className='flex shrink-0 flex-col items-start justify-center gap-3 self-stretch p-4'>
           <div className='flex items-center gap-3 self-stretch'>
             <AppIcon
               size="large"
@@ -232,8 +232,8 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
               background={appDetail.icon_background}
               imageUrl={appDetail.icon_url}
             />
-            <div className='flex flex-col justify-center items-start grow w-full'>
-              <div className='text-text-secondary system-md-semibold truncate w-full'>{appDetail.name}</div>
+            <div className='flex w-full grow flex-col items-start justify-center'>
+              <div className='text-text-secondary system-md-semibold w-full truncate'>{appDetail.name}</div>
               <div className='text-text-tertiary system-2xs-medium-uppercase'>{appDetail.mode === 'advanced-chat' ? t('app.types.chatbot') : appDetail.mode === 'agent-chat' ? t('app.types.agent') : appDetail.mode === 'chat' ? t('app.types.chatbot') : appDetail.mode === 'completion' ? t('app.types.completion') : t('app.types.workflow')}</div>
             </div>
           </div>
@@ -252,7 +252,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
                 setShowEditModal(true)
               }}
             >
-              <RiEditLine className='w-3.5 h-3.5 text-components-button-secondary-text' />
+              <RiEditLine className='text-components-button-secondary-text h-3.5 w-3.5' />
               <span className='text-components-button-secondary-text system-xs-medium'>{t('app.editApp')}</span>
             </Button>
             <Button
@@ -264,7 +264,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
                 setShowDuplicateModal(true)
               }}
             >
-              <RiFileCopy2Line className='w-3.5 h-3.5 text-components-button-secondary-text' />
+              <RiFileCopy2Line className='text-components-button-secondary-text h-3.5 w-3.5' />
               <span className='text-components-button-secondary-text system-xs-medium'>{t('app.duplicate')}</span>
             </Button>
             <Button
@@ -273,7 +273,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
               className='gap-[1px]'
               onClick={exportCheck}
             >
-              <RiFileDownloadLine className='w-3.5 h-3.5 text-components-button-secondary-text' />
+              <RiFileDownloadLine className='text-components-button-secondary-text h-3.5 w-3.5' />
               <span className='text-components-button-secondary-text system-xs-medium'>{t('app.export')}</span>
             </Button>
             {
@@ -287,7 +287,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
                     setShowImportDSLModal(true)
                   }}
                 >
-                  <RiFileUploadLine className='w-3.5 h-3.5 text-components-button-secondary-text' />
+                  <RiFileUploadLine className='text-components-button-secondary-text h-3.5 w-3.5' />
                   <span className='text-components-button-secondary-text system-xs-medium'>{t('workflow.common.importDSL')}</span>
                 </Button>
               )
@@ -298,10 +298,10 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
           <CardView
             appId={appDetail.id}
             isInPanel={true}
-            className='flex flex-col px-2 py-1 gap-2 grow overflow-auto'
+            className='flex grow flex-col gap-2 overflow-auto px-2 py-1'
           />
         </div>
-        <div className='flex p-2 flex-col justify-center items-start gap-3 self-stretch border-t-[0.5px] border-divider-subtle shrink-0 min-h-fit'>
+        <div className='border-divider-subtle flex min-h-fit shrink-0 flex-col items-start justify-center gap-3 self-stretch border-t-[0.5px] p-2'>
           <Button
             size={'medium'}
             variant={'ghost'}
@@ -311,7 +311,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
               setShowConfirmDelete(true)
             }}
           >
-            <RiDeleteBinLine className='w-4 h-4 text-text-tertiary' />
+            <RiDeleteBinLine className='text-text-tertiary h-4 w-4' />
             <span className='text-text-tertiary system-sm-medium'>{t('common.operation.deleteApp')}</span>
           </Button>
         </div>
diff --git a/web/app/components/app-sidebar/basic.tsx b/web/app/components/app-sidebar/basic.tsx
index 6d56f6ad86..77ca03e0cf 100644
--- a/web/app/components/app-sidebar/basic.tsx
+++ b/web/app/components/app-sidebar/basic.tsx
@@ -48,9 +48,9 @@ const NotionSvg = <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xm
 
 const ICON_MAP = {
   app: <AppIcon className='border !border-[rgba(0,0,0,0.05)]' />,
-  api: <AppIcon innerIcon={ApiSvg} className='border !bg-purple-50 !border-purple-200' />,
-  dataset: <AppIcon innerIcon={DatasetSvg} className='!border-[0.5px] !border-indigo-100 !bg-indigo-25' />,
-  webapp: <AppIcon innerIcon={WebappSvg} className='border !bg-primary-100 !border-primary-200' />,
+  api: <AppIcon innerIcon={ApiSvg} className='border !border-purple-200 !bg-purple-50' />,
+  dataset: <AppIcon innerIcon={DatasetSvg} className='!bg-indigo-25 !border-[0.5px] !border-indigo-100' />,
+  webapp: <AppIcon innerIcon={WebappSvg} className='!bg-primary-100 !border-primary-200 border' />,
   notion: <AppIcon innerIcon={NotionSvg} className='!border-[0.5px] !border-indigo-100 !bg-white' />,
 }
 
@@ -58,20 +58,20 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
   const { t } = useTranslation()
 
   return (
-    <div className="flex items-center grow">
+    <div className="flex grow items-center">
       {icon && icon_background && iconType === 'app' && (
-        <div className='shrink-0 mr-3'>
+        <div className='mr-3 shrink-0'>
           <AppIcon icon={icon} background={icon_background} />
         </div>
       )}
       {iconType !== 'app'
-        && <div className='shrink-0 mr-3'>
+        && <div className='mr-3 shrink-0'>
           {ICON_MAP[iconType]}
         </div>
 
       }
       {mode === 'expand' && <div className="group">
-        <div className={`flex flex-row items-center system-md-semibold text-text-secondary group-hover:text-text-primary ${textStyle?.main ?? ''}`}>
+        <div className={`system-md-semibold text-text-secondary group-hover:text-text-primary flex flex-row items-center ${textStyle?.main ?? ''}`}>
           <div className="max-w-[180px] truncate">
             {name}
           </div>
diff --git a/web/app/components/app-sidebar/dataset-info.tsx b/web/app/components/app-sidebar/dataset-info.tsx
index 5ce51d46e9..2a5ff0d941 100644
--- a/web/app/components/app-sidebar/dataset-info.tsx
+++ b/web/app/components/app-sidebar/dataset-info.tsx
@@ -26,16 +26,16 @@ const DatasetInfo: FC<Props> = ({
   const { t } = useTranslation()
   return (
     <div className='pl-1 pt-1'>
-      <div className='flex-shrink-0 mr-3'>
-        <AppIcon innerIcon={DatasetSvg} className='!border-[0.5px] !border-indigo-100 !bg-indigo-25' />
+      <div className='mr-3 shrink-0'>
+        <AppIcon innerIcon={DatasetSvg} className='!bg-indigo-25 !border-[0.5px] !border-indigo-100' />
       </div>
       {expand && (
         <div className='mt-2'>
           <div className='system-md-semibold text-text-secondary'>
             {name}
           </div>
-          <div className='mt-1 text-text-tertiary system-2xs-medium-uppercase'>{isExternal ? t('dataset.externalTag') : t('dataset.localDocs')}</div>
-          <div className='my-3  system-xs-regular text-text-tertiary first-letter:capitalize'>{description}</div>
+          <div className='text-text-tertiary system-2xs-medium-uppercase mt-1'>{isExternal ? t('dataset.externalTag') : t('dataset.localDocs')}</div>
+          <div className='system-xs-regular  text-text-tertiary my-3 first-letter:capitalize'>{description}</div>
         </div>
       )}
       {extraInfo}
diff --git a/web/app/components/app-sidebar/index.tsx b/web/app/components/app-sidebar/index.tsx
index dec8499eb5..2c7c0286b1 100644
--- a/web/app/components/app-sidebar/index.tsx
+++ b/web/app/components/app-sidebar/index.tsx
@@ -50,7 +50,7 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
   return (
     <div
       className={`
-        shrink-0 flex flex-col bg-background-default-subtle border-r border-divider-burn transition-all
+        bg-background-default-subtle border-divider-burn flex shrink-0 flex-col border-r transition-all
         ${expand ? 'w-[216px]' : 'w-14'}
       `}
     >
@@ -85,7 +85,7 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
         )}
       </div>
       <div className='px-4'>
-        <div className={cn('mt-1 mx-auto h-[1px] bg-divider-subtle', !expand && 'w-6')} />
+        <div className={cn('bg-divider-subtle mx-auto mt-1 h-[1px]', !expand && 'w-6')} />
       </div>
       <nav
         className={`
@@ -108,13 +108,13 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
             `}
           >
             <div
-              className='flex items-center justify-center w-6 h-6 text-gray-500 cursor-pointer'
+              className='flex h-6 w-6 cursor-pointer items-center justify-center text-gray-500'
               onClick={() => handleToggle(appSidebarExpand)}
             >
               {
                 expand
-                  ? <RiLayoutRight2Line className='w-5 h-5 text-components-menu-item-text' />
-                  : <LayoutRight2LineMod className='w-5 h-5 text-components-menu-item-text' />
+                  ? <RiLayoutRight2Line className='text-components-menu-item-text h-5 w-5' />
+                  : <LayoutRight2LineMod className='text-components-menu-item-text h-5 w-5' />
               }
             </div>
           </div>
diff --git a/web/app/components/app/annotation/add-annotation-modal/edit-item/index.tsx b/web/app/components/app/annotation/add-annotation-modal/edit-item/index.tsx
index 032e4b8357..390eb26b68 100644
--- a/web/app/components/app/annotation/add-annotation-modal/edit-item/index.tsx
+++ b/web/app/components/app/annotation/add-annotation-modal/edit-item/index.tsx
@@ -21,17 +21,17 @@ const EditItem: FC<Props> = ({
   onChange,
 }) => {
   const { t } = useTranslation()
-  const avatar = type === EditItemType.Query ? <User className='w-6 h-6' /> : <Robot className='w-6 h-6' />
+  const avatar = type === EditItemType.Query ? <User className='h-6 w-6' /> : <Robot className='h-6 w-6' />
   const name = type === EditItemType.Query ? t('appAnnotation.addModal.queryName') : t('appAnnotation.addModal.answerName')
   const placeholder = type === EditItemType.Query ? t('appAnnotation.addModal.queryPlaceholder') : t('appAnnotation.addModal.answerPlaceholder')
 
   return (
     <div className='flex' onClick={e => e.stopPropagation()}>
-      <div className='shrink-0 mr-3'>
+      <div className='mr-3 shrink-0'>
         {avatar}
       </div>
       <div className='grow'>
-        <div className='mb-1 system-xs-semibold text-text-primary'>{name}</div>
+        <div className='system-xs-semibold text-text-primary mb-1'>{name}</div>
         <Textarea
           value={content}
           onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)}
diff --git a/web/app/components/app/annotation/add-annotation-modal/index.tsx b/web/app/components/app/annotation/add-annotation-modal/index.tsx
index c6cfb54b23..08f33a08a3 100644
--- a/web/app/components/app/annotation/add-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/add-annotation-modal/index.tsx
@@ -76,7 +76,7 @@ const AddAnnotationModal: FC<Props> = ({
         maxWidthClassName='!max-w-[480px]'
         title={t('appAnnotation.addModal.title') as string}
         body={(
-          <div className='p-6 pb-4 space-y-6'>
+          <div className='space-y-6 p-6 pb-4'>
             <EditItem
               type={EditItemType.Query}
               content={question}
@@ -93,11 +93,11 @@ const AddAnnotationModal: FC<Props> = ({
           (
             <div>
               {isAnnotationFull && (
-                <div className='mt-6 mb-4 px-6'>
+                <div className='mb-4 mt-6 px-6'>
                   <AnnotationFull />
                 </div>
               )}
-              <div className='px-4 flex h-16 items-center justify-between border-t border-divider-subtle bg-background-section-burn rounded-bl-xl rounded-br-xl system-sm-medium text-text-tertiary'>
+              <div className='border-divider-subtle bg-background-section-burn system-sm-medium text-text-tertiary flex h-16 items-center justify-between rounded-bl-xl rounded-br-xl border-t px-4'>
                 <div
                   className='flex items-center space-x-2'
                 >
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.tsx
index d2189b4581..3b60c6ede7 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.tsx
@@ -35,17 +35,17 @@ const CSVDownload: FC = () => {
     <div className='mt-6'>
       <div className='system-sm-medium text-text-primary'>{t('share.generation.csvStructureTitle')}</div>
       <div className='mt-2 max-h-[500px] overflow-auto'>
-        <table className='table-fixed w-full border-separate border-spacing-0 border border-divider-regular rounded-lg text-xs'>
+        <table className='border-divider-regular w-full table-fixed border-separate border-spacing-0 rounded-lg border text-xs'>
           <thead className='text-text-tertiary'>
             <tr>
-              <td className='h-9 pl-3 pr-2 border-b border-divider-regular'>{t('appAnnotation.batchModal.question')}</td>
-              <td className='h-9 pl-3 pr-2 border-b border-divider-regular'>{t('appAnnotation.batchModal.answer')}</td>
+              <td className='border-divider-regular h-9 border-b pl-3 pr-2'>{t('appAnnotation.batchModal.question')}</td>
+              <td className='border-divider-regular h-9 border-b pl-3 pr-2'>{t('appAnnotation.batchModal.answer')}</td>
             </tr>
           </thead>
           <tbody className='text-gray-700'>
             <tr>
-              <td className='h-9 pl-3 pr-2 border-b border-divider-subtle text-[13px]'>{t('appAnnotation.batchModal.question')} 1</td>
-              <td className='h-9 pl-3 pr-2 border-b border-divider-subtle text-[13px]'>{t('appAnnotation.batchModal.answer')} 1</td>
+              <td className='border-divider-subtle h-9 border-b pl-3 pr-2 text-[13px]'>{t('appAnnotation.batchModal.question')} 1</td>
+              <td className='border-divider-subtle h-9 border-b pl-3 pr-2 text-[13px]'>{t('appAnnotation.batchModal.answer')} 1</td>
             </tr>
             <tr>
               <td className='h-9 pl-3 pr-2 text-[13px]'>{t('appAnnotation.batchModal.question')} 2</td>
@@ -55,14 +55,14 @@ const CSVDownload: FC = () => {
         </table>
       </div>
       <CSVDownloader
-        className="block mt-2 cursor-pointer"
+        className="mt-2 block cursor-pointer"
         type={Type.Link}
         filename={`template-${locale}`}
         bom={true}
         data={getTemplate()}
       >
-        <div className='flex items-center h-[18px] space-x-1 text-text-accent system-xs-medium'>
-          <DownloadIcon className='w-3 h-3 mr-1' />
+        <div className='text-text-accent system-xs-medium flex h-[18px] items-center space-x-1'>
+          <DownloadIcon className='mr-1 h-3 w-3' />
           {t('appAnnotation.batchModal.template')}
         </div>
       </CSVDownloader>
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
index d37593c784..5a41b00764 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
@@ -91,29 +91,29 @@ const CSVUploader: FC<Props> = ({
       />
       <div ref={dropRef}>
         {!file && (
-          <div className={cn('flex items-center h-20 rounded-xl bg-components-dropzone-bg border border-dashed border-components-dropzone-border system-sm-regular', dragging && 'bg-components-dropzone-bg-accent border border-components-dropzone-border-accent')}>
-            <div className='w-full flex items-center justify-center space-x-2'>
+          <div className={cn('bg-components-dropzone-bg border-components-dropzone-border system-sm-regular flex h-20 items-center rounded-xl border border-dashed', dragging && 'bg-components-dropzone-bg-accent border-components-dropzone-border-accent border')}>
+            <div className='flex w-full items-center justify-center space-x-2'>
               <CSVIcon className="shrink-0" />
               <div className='text-text-tertiary'>
                 {t('appAnnotation.batchModal.csvUploadTitle')}
                 <span className='text-text-accent cursor-pointer' onClick={selectHandle}>{t('appAnnotation.batchModal.browse')}</span>
               </div>
             </div>
-            {dragging && <div ref={dragRef} className='absolute w-full h-full top-0 left-0' />}
+            {dragging && <div ref={dragRef} className='absolute left-0 top-0 h-full w-full' />}
           </div>
         )}
         {file && (
-          <div className={cn('flex items-center h-20 px-6 rounded-xl bg-components-panel-bg border border-components-panel-border text-sm font-normal group', 'hover:bg-components-panel-bg-blur hover:border-components-panel-bg-blur')}>
+          <div className={cn('bg-components-panel-bg border-components-panel-border group flex h-20 items-center rounded-xl border px-6 text-sm font-normal', 'hover:bg-components-panel-bg-blur hover:border-components-panel-bg-blur')}>
             <CSVIcon className="shrink-0" />
-            <div className='flex ml-2 w-0 grow'>
-              <span className='max-w-[calc(100%_-_30px)] text-ellipsis whitespace-nowrap overflow-hidden text-text-primary'>{file.name.replace(/.csv$/, '')}</span>
-              <span className='shrink-0 text-text-tertiary'>.csv</span>
+            <div className='ml-2 flex w-0 grow'>
+              <span className='text-text-primary max-w-[calc(100%_-_30px)] overflow-hidden text-ellipsis whitespace-nowrap'>{file.name.replace(/.csv$/, '')}</span>
+              <span className='text-text-tertiary shrink-0'>.csv</span>
             </div>
-            <div className='hidden group-hover:flex items-center'>
+            <div className='hidden items-center group-hover:flex'>
               <Button variant='secondary' onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
-              <div className='mx-2 w-px h-4 bg-divider-regular' />
-              <div className='p-2 cursor-pointer' onClick={removeFile}>
-                <RiDeleteBinLine className='w-4 h-4 text-text-tertiary' />
+              <div className='bg-divider-regular mx-2 h-4 w-px' />
+              <div className='cursor-pointer p-2' onClick={removeFile}>
+                <RiDeleteBinLine className='text-text-tertiary h-4 w-4' />
               </div>
             </div>
           </div>
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
index 9a496a1989..658e998854 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
@@ -87,10 +87,10 @@ const BatchModal: FC<IBatchModalProps> = ({
   }
 
   return (
-    <Modal isShow={isShow} onClose={() => { }} className='px-8 py-6 !max-w-[520px] !rounded-xl'>
-      <div className='relative pb-1 system-xl-medium text-text-primary'>{t('appAnnotation.batchModal.title')}</div>
-      <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onCancel}>
-        <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+    <Modal isShow={isShow} onClose={() => { }} className='!max-w-[520px] !rounded-xl px-8 py-6'>
+      <div className='system-xl-medium text-text-primary relative pb-1'>{t('appAnnotation.batchModal.title')}</div>
+      <div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onCancel}>
+        <RiCloseLine className='text-text-tertiary h-4 w-4' />
       </div>
       <CSVUploader
         file={currentCSV}
@@ -104,8 +104,8 @@ const BatchModal: FC<IBatchModalProps> = ({
         </div>
       )}
 
-      <div className='mt-[28px] pt-6 flex justify-end'>
-        <Button className='mr-2 text-text-tertiary system-sm-medium' onClick={onCancel}>
+      <div className='mt-[28px] flex justify-end pt-6'>
+        <Button className='text-text-tertiary system-sm-medium mr-2' onClick={onCancel}>
           {t('appAnnotation.batchModal.cancel')}
         </Button>
         <Button
diff --git a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
index 208da90093..378d859f49 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
@@ -20,11 +20,11 @@ type Props = {
 }
 
 export const EditTitle: FC<{ className?: string; title: string }> = ({ className, title }) => (
-  <div className={cn(className, 'flex items-center h-[18px] system-xs-medium text-text-tertiary')}>
-    <RiEditFill className='mr-1 w-3.5 h-3.5' />
+  <div className={cn(className, 'system-xs-medium text-text-tertiary flex h-[18px] items-center')}>
+    <RiEditFill className='mr-1 h-3.5 w-3.5' />
     <div>{title}</div>
     <div
-      className='ml-2 grow h-[1px]'
+      className='ml-2 h-[1px] grow'
       style={{
         background: 'linear-gradient(90deg, rgba(0, 0, 0, 0.05) -1.65%, rgba(0, 0, 0, 0.00) 100%)',
       }}
@@ -40,7 +40,7 @@ const EditItem: FC<Props> = ({
   const { t } = useTranslation()
   const [newContent, setNewContent] = useState('')
   const showNewContent = newContent && newContent !== content
-  const avatar = type === EditItemType.Query ? <User className='w-6 h-6' /> : <Robot className='w-6 h-6' />
+  const avatar = type === EditItemType.Query ? <User className='h-6 w-6' /> : <Robot className='h-6 w-6' />
   const name = type === EditItemType.Query ? t('appAnnotation.editModal.queryName') : t('appAnnotation.editModal.answerName')
   const editTitle = type === EditItemType.Query ? t('appAnnotation.editModal.yourQuery') : t('appAnnotation.editModal.yourAnswer')
   const placeholder = type === EditItemType.Query ? t('appAnnotation.editModal.queryPlaceholder') : t('appAnnotation.editModal.answerPlaceholder')
@@ -58,11 +58,11 @@ const EditItem: FC<Props> = ({
 
   return (
     <div className='flex' onClick={e => e.stopPropagation()}>
-      <div className='shrink-0 mr-3'>
+      <div className='mr-3 shrink-0'>
         {avatar}
       </div>
       <div className='grow'>
-        <div className='mb-1 system-xs-semibold text-text-primary'>{name}</div>
+        <div className='system-xs-semibold text-text-primary mb-1'>{name}</div>
         <div className='system-sm-regular text-text-primary'>{content}</div>
         {!isEdit
           ? (
@@ -70,34 +70,34 @@ const EditItem: FC<Props> = ({
               {showNewContent && (
                 <div className='mt-3'>
                   <EditTitle title={editTitle} />
-                  <div className='mt-1 system-sm-regular text-text-primary'>{newContent}</div>
+                  <div className='system-sm-regular text-text-primary mt-1'>{newContent}</div>
                 </div>
               )}
               <div className='mt-2 flex items-center'>
                 {!readonly && (
                   <div
-                    className='flex items-center space-x-1 system-xs-medium text-text-accent cursor-pointer'
+                    className='system-xs-medium text-text-accent flex cursor-pointer items-center space-x-1'
                     onClick={() => {
                       setIsEdit(true)
                     }}
                   >
-                    <RiEditLine className='mr-1 w-3.5 h-3.5' />
+                    <RiEditLine className='mr-1 h-3.5 w-3.5' />
                     <div>{t('common.operation.edit')}</div>
                   </div>
                 )}
 
                 {showNewContent && (
-                  <div className='ml-2 flex items-center system-xs-medium text-text-tertiary'>
+                  <div className='system-xs-medium text-text-tertiary ml-2 flex items-center'>
                     <div className='mr-2'>·</div>
                     <div
-                      className='flex items-center space-x-1 cursor-pointer'
+                      className='flex cursor-pointer items-center space-x-1'
                       onClick={() => {
                         setNewContent(content)
                         onSave(content)
                       }}
                     >
-                      <div className='w-3.5 h-3.5'>
-                        <RiDeleteBinLine className='w-3.5 h-3.5' />
+                      <div className='h-3.5 w-3.5'>
+                        <RiDeleteBinLine className='h-3.5 w-3.5' />
                       </div>
                       <div>{t('common.operation.delete')}</div>
                     </div>
diff --git a/web/app/components/app/annotation/edit-annotation-modal/index.tsx b/web/app/components/app/annotation/edit-annotation-modal/index.tsx
index dc00199e79..d0ccad04ec 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/index.tsx
@@ -86,7 +86,7 @@ const EditAnnotationModal: FC<Props> = ({
         title={t('appAnnotation.editModal.title') as string}
         body={(
           <div>
-            <div className='p-6 pb-4 space-y-6'>
+            <div className='space-y-6 p-6 pb-4'>
               <EditItem
                 type={EditItemType.Query}
                 content={query}
@@ -115,7 +115,7 @@ const EditAnnotationModal: FC<Props> = ({
         foot={
           <div>
             {isAnnotationFull && (
-              <div className='mt-6 mb-4 px-6'>
+              <div className='mb-4 mt-6 px-6'>
                 <AnnotationFull />
               </div>
             )}
@@ -123,9 +123,9 @@ const EditAnnotationModal: FC<Props> = ({
             {
               annotationId
                 ? (
-                  <div className='px-4 flex h-16 items-center justify-between border-t border-divider-subtle bg-background-section-burn rounded-bl-xl rounded-br-xl system-sm-medium text-text-tertiary'>
+                  <div className='border-divider-subtle bg-background-section-burn system-sm-medium text-text-tertiary flex h-16 items-center justify-between rounded-bl-xl rounded-br-xl border-t px-4'>
                     <div
-                      className='flex items-center pl-3 space-x-2 cursor-pointer'
+                      className='flex cursor-pointer items-center space-x-2 pl-3'
                       onClick={() => setShowModal(true)}
                     >
                       <MessageCheckRemove />
diff --git a/web/app/components/app/annotation/empty-element.tsx b/web/app/components/app/annotation/empty-element.tsx
index 9ba31ce11e..5a4b87e68d 100644
--- a/web/app/components/app/annotation/empty-element.tsx
+++ b/web/app/components/app/annotation/empty-element.tsx
@@ -13,10 +13,10 @@ const EmptyElement: FC = () => {
   const { t } = useTranslation()
 
   return (
-    <div className='flex items-center justify-center h-full'>
-      <div className='bg-background-section-burn w-[560px] h-fit box-border px-5 py-4 rounded-2xl'>
-        <span className='text-text-secondary system-md-semibold'>{t('appAnnotation.noData.title')}<ThreeDotsIcon className='inline relative -top-3 -left-1.5' /></span>
-        <div className='mt-2 text-text-tertiary system-sm-regular'>
+    <div className='flex h-full items-center justify-center'>
+      <div className='bg-background-section-burn box-border h-fit w-[560px] rounded-2xl px-5 py-4'>
+        <span className='text-text-secondary system-md-semibold'>{t('appAnnotation.noData.title')}<ThreeDotsIcon className='relative -left-1.5 -top-3 inline' /></span>
+        <div className='text-text-tertiary system-sm-regular mt-2'>
           {t('appAnnotation.noData.description')}
         </div>
       </div>
diff --git a/web/app/components/app/annotation/filter.tsx b/web/app/components/app/annotation/filter.tsx
index 52abb8169a..44016f6a7b 100644
--- a/web/app/components/app/annotation/filter.tsx
+++ b/web/app/components/app/annotation/filter.tsx
@@ -29,7 +29,7 @@ const Filter: FC<IFilterProps> = ({
   if (!data)
     return null
   return (
-    <div className='flex justify-between flex-row flex-wrap gap-2 items-center mb-2'>
+    <div className='mb-2 flex flex-row flex-wrap items-center justify-between gap-2'>
       <Input
         wrapperClassName='w-[200px]'
         showLeftIcon
diff --git a/web/app/components/app/annotation/header-opts/index.tsx b/web/app/components/app/annotation/header-opts/index.tsx
index d57bc74e7d..f4988bfebd 100644
--- a/web/app/components/app/annotation/header-opts/index.tsx
+++ b/web/app/components/app/annotation/header-opts/index.tsx
@@ -80,17 +80,17 @@ const HeaderOptions: FC<Props> = ({
   const Operations = () => {
     return (
       <div className="w-full py-1">
-        <button className='h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]' onClick={() => {
+        <button className='hover:bg-components-panel-on-panel-item-bg-hover mx-1 flex h-9 w-[calc(100%_-_8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 disabled:opacity-50' onClick={() => {
           setShowBulkImportModal(true)
         }}>
-          <FilePlus02 className='w-4 h-4 text-text-tertiary' />
-          <span className='grow text-text-secondary system-sm-regular text-left'>{t('appAnnotation.table.header.bulkImport')}</span>
+          <FilePlus02 className='text-text-tertiary h-4 w-4' />
+          <span className='text-text-secondary system-sm-regular grow text-left'>{t('appAnnotation.table.header.bulkImport')}</span>
         </button>
-        <Menu as="div" className="relative w-full h-full">
-          <MenuButton className='h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]'>
-            <FileDownload02 className='w-4 h-4 text-text-tertiary' />
-            <span className='grow text-text-secondary system-sm-regular text-left'>{t('appAnnotation.table.header.bulkExport')}</span>
-            <ChevronRight className='shrink-0 w-[14px] h-[14px] text-text-tertiary' />
+        <Menu as="div" className="relative h-full w-full">
+          <MenuButton className='hover:bg-components-panel-on-panel-item-bg-hover mx-1 flex h-9 w-[calc(100%_-_8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 disabled:opacity-50'>
+            <FileDownload02 className='text-text-tertiary h-4 w-4' />
+            <span className='text-text-secondary system-sm-regular grow text-left'>{t('appAnnotation.table.header.bulkExport')}</span>
+            <ChevronRight className='text-text-tertiary h-[14px] w-[14px] shrink-0' />
           </MenuButton>
           <Transition
             as={Fragment}
@@ -103,7 +103,7 @@ const HeaderOptions: FC<Props> = ({
           >
             <MenuItems
               className={cn(
-                'absolute top-[1px] left-1 -translate-x-full py-1 min-w-[100px] z-10 bg-components-panel-bg border-[0.5px] border-components-panel-on-panel-item-bg origin-top-right rounded-xl shadow-xs',
+                'bg-components-panel-bg border-components-panel-on-panel-item-bg shadow-xs absolute left-1 top-[1px] z-10 min-w-[100px] origin-top-right -translate-x-full rounded-xl border-[0.5px] py-1',
               )}
             >
               <CSVDownloader
@@ -115,12 +115,12 @@ const HeaderOptions: FC<Props> = ({
                   ...list.map(item => [item.question, item.answer]),
                 ]}
               >
-                <button disabled={annotationUnavailable} className='h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]'>
-                  <span className='grow text-text-secondary system-sm-regular text-left'>CSV</span>
+                <button disabled={annotationUnavailable} className='hover:bg-components-panel-on-panel-item-bg-hover mx-1 flex h-9 w-[calc(100%_-_8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 disabled:opacity-50'>
+                  <span className='text-text-secondary system-sm-regular grow text-left'>CSV</span>
                 </button>
               </CSVDownloader>
-              <button disabled={annotationUnavailable} className={cn('h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]', '!border-0')} onClick={JSONLOutput}>
-                <span className='grow text-text-secondary system-sm-regular text-left'>JSONL</span>
+              <button disabled={annotationUnavailable} className={cn('hover:bg-components-panel-on-panel-item-bg-hover mx-1 flex h-9 w-[calc(100%_-_8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 disabled:opacity-50', '!border-0')} onClick={JSONLOutput}>
+                <span className='text-text-secondary system-sm-regular grow text-left'>JSONL</span>
               </button>
             </MenuItems>
           </Transition>
@@ -134,7 +134,7 @@ const HeaderOptions: FC<Props> = ({
   return (
     <div className='flex space-x-2'>
       <Button variant='primary' onClick={() => setShowAddModal(true)}>
-        <RiAddLine className='w-4 h-4 mr-0.5' />
+        <RiAddLine className='mr-0.5 h-4 w-4' />
         <div>{t('appAnnotation.table.header.addAnnotation')}</div>
       </Button>
       <CustomPopover
@@ -143,11 +143,11 @@ const HeaderOptions: FC<Props> = ({
         trigger="click"
         btnElement={
           <Button variant='secondary' className='w-8 p-0'>
-            <RiMoreFill className='w-4 h-4' />
+            <RiMoreFill className='h-4 w-4' />
           </Button>
         }
         btnClassName='p-0 border-0'
-        className={'!w-[155px] h-fit !z-20'}
+        className={'!z-20 h-fit !w-[155px]'}
         popupClassName='!w-full !overflow-visible'
         manualClose
       />
diff --git a/web/app/components/app/annotation/index.tsx b/web/app/components/app/annotation/index.tsx
index 132734e651..6e6c1e6d36 100644
--- a/web/app/components/app/annotation/index.tsx
+++ b/web/app/components/app/annotation/index.tsx
@@ -152,15 +152,15 @@ const Annotation: FC<Props> = ({
   }
 
   return (
-    <div className='flex flex-col h-full'>
+    <div className='flex h-full flex-col'>
       <p className='text-text-tertiary system-sm-regular'>{t('appLog.description')}</p>
-      <div className='flex flex-col py-4 flex-1'>
+      <div className='flex flex-1 flex-col py-4'>
         <Filter appId={appDetail.id} queryParams={queryParams} setQueryParams={setQueryParams}>
           <div className='flex items-center space-x-2'>
             {isChatApp && (
               <>
-                <div className={cn(!annotationConfig?.enabled && 'pr-2', 'flex items-center h-7 rounded-lg bg-components-panel-bg-blur border border-components-panel-border pl-2 space-x-1')}>
-                  <MessageFast className='w-4 h-4 text-util-colors-indigo-indigo-600' />
+                <div className={cn(!annotationConfig?.enabled && 'pr-2', 'bg-components-panel-bg-blur border-components-panel-border flex h-7 items-center space-x-1 rounded-lg border pl-2')}>
+                  <MessageFast className='text-util-colors-indigo-indigo-600 h-4 w-4' />
                   <div className='system-sm-medium text-text-primary'>{t('appAnnotation.name')}</div>
                   <Switch
                     key={controlRefreshSwitch}
@@ -188,14 +188,14 @@ const Annotation: FC<Props> = ({
                   ></Switch>
                   {annotationConfig?.enabled && (
                     <div className='flex items-center pl-1.5'>
-                      <div className='shrink-0 mr-1 w-[1px] h-3.5 bg-divider-subtle'></div>
+                      <div className='bg-divider-subtle mr-1 h-3.5 w-[1px] shrink-0'></div>
                       <ActionButton onClick={() => setIsShowEdit(true)}>
-                        <RiEqualizer2Line className='w-4 h-4 text-text-tertiary' />
+                        <RiEqualizer2Line className='text-text-tertiary h-4 w-4' />
                       </ActionButton>
                     </div>
                   )}
                 </div>
-                <div className='shrink-0 mx-3 w-[1px] h-3.5 bg-divider-regular'></div>
+                <div className='bg-divider-regular mx-3 h-3.5 w-[1px] shrink-0'></div>
               </>
             )}
 
@@ -217,7 +217,7 @@ const Annotation: FC<Props> = ({
               onRemove={handleRemove}
               onView={handleView}
             />
-            : <div className='grow flex h-full items-center justify-center'><EmptyElement /></div>
+            : <div className='flex h-full grow items-center justify-center'><EmptyElement /></div>
         }
         {/* Show Pagination only if the total is more than the limit */}
         {(total && total > APP_PAGE_LIMIT)
diff --git a/web/app/components/app/annotation/list.tsx b/web/app/components/app/annotation/list.tsx
index 8944c04851..aae05b6c44 100644
--- a/web/app/components/app/annotation/list.tsx
+++ b/web/app/components/app/annotation/list.tsx
@@ -29,18 +29,18 @@ const List: FC<Props> = ({
       <table className={cn('mt-2 w-full min-w-[440px] border-collapse border-0')}>
         <thead className='system-xs-medium-uppercase text-text-tertiary'>
           <tr>
-            <td className='pl-2 pr-1 w-5 rounded-l-lg bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.table.header.question')}</td>
-            <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.table.header.answer')}</td>
-            <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.table.header.createdAt')}</td>
-            <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.table.header.hits')}</td>
-            <td className='pl-3 py-1.5 rounded-r-lg bg-background-section-burn whitespace-nowrap w-[96px]'>{t('appAnnotation.table.header.actions')}</td>
+            <td className='bg-background-section-burn w-5 whitespace-nowrap rounded-l-lg pl-2 pr-1'>{t('appAnnotation.table.header.question')}</td>
+            <td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appAnnotation.table.header.answer')}</td>
+            <td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appAnnotation.table.header.createdAt')}</td>
+            <td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appAnnotation.table.header.hits')}</td>
+            <td className='bg-background-section-burn w-[96px] whitespace-nowrap rounded-r-lg py-1.5 pl-3'>{t('appAnnotation.table.header.actions')}</td>
           </tr>
         </thead>
         <tbody className="text-text-secondary system-sm-regular">
           {list.map(item => (
             <tr
               key={item.id}
-              className='border-b border-divider-subtle hover:bg-background-default-hover cursor-pointer'
+              className='border-divider-subtle hover:bg-background-default-hover cursor-pointer border-b'
               onClick={
                 () => {
                   onView(item)
@@ -48,20 +48,20 @@ const List: FC<Props> = ({
               }
             >
               <td
-                className='p-3 pr-2 whitespace-nowrap overflow-hidden text-ellipsis max-w-[250px]'
+                className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
                 title={item.question}
               >{item.question}</td>
               <td
-                className='p-3 pr-2 whitespace-nowrap overflow-hidden text-ellipsis max-w-[250px]'
+                className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
                 title={item.answer}
               >{item.answer}</td>
               <td className='p-3 pr-2'>{formatTime(item.created_at, t('appLog.dateTimeFormat') as string)}</td>
               <td className='p-3 pr-2'>{item.hit_count}</td>
               <td className='w-[96px] p-3 pr-2' onClick={e => e.stopPropagation()}>
                 {/* Actions */}
-                <div className='flex space-x-1 text-text-tertiary'>
+                <div className='text-text-tertiary flex space-x-1'>
                   <ActionButton onClick={() => onView(item)}>
-                    <RiEditLine className='w-4 h-4' />
+                    <RiEditLine className='h-4 w-4' />
                   </ActionButton>
                   <ActionButton
                     onClick={() => {
@@ -69,7 +69,7 @@ const List: FC<Props> = ({
                       setShowConfirmDelete(true)
                     }}
                   >
-                    <RiDeleteBinLine className='w-4 h-4' />
+                    <RiDeleteBinLine className='h-4 w-4' />
                   </ActionButton>
                 </div>
               </td>
diff --git a/web/app/components/app/annotation/view-annotation-modal/hit-history-no-data.tsx b/web/app/components/app/annotation/view-annotation-modal/hit-history-no-data.tsx
index 6f7c32283a..bf8a6ebfaf 100644
--- a/web/app/components/app/annotation/view-annotation-modal/hit-history-no-data.tsx
+++ b/web/app/components/app/annotation/view-annotation-modal/hit-history-no-data.tsx
@@ -7,9 +7,9 @@ import { ClockFastForward } from '@/app/components/base/icons/src/vender/line/ti
 const HitHistoryNoData: FC = () => {
   const { t } = useTranslation()
   return (
-    <div className='mx-auto mt-20 w-[480px] p-5 rounded-2xl bg-background-section-burn space-y-2'>
-      <div className='inline-block p-3 rounded-lg border border-divider-subtle'>
-        <ClockFastForward className='w-5 h-5 text-text-tertiary' />
+    <div className='bg-background-section-burn mx-auto mt-20 w-[480px] space-y-2 rounded-2xl p-5'>
+      <div className='border-divider-subtle inline-block rounded-lg border p-3'>
+        <ClockFastForward className='text-text-tertiary h-5 w-5' />
       </div>
       <div className='system-sm-regular text-text-tertiary'>{t('appAnnotation.viewModal.noHitHistory')}</div>
     </div>
diff --git a/web/app/components/app/annotation/view-annotation-modal/index.tsx b/web/app/components/app/annotation/view-annotation-modal/index.tsx
index 83a64b980f..9c7bfead06 100644
--- a/web/app/components/app/annotation/view-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/view-annotation-modal/index.tsx
@@ -116,30 +116,30 @@ const ViewAnnotationModal: FC<Props> = ({
         <table className={cn('w-full min-w-[440px] border-collapse border-0')} >
           <thead className="system-xs-medium-uppercase text-text-tertiary">
             <tr>
-              <td className='pl-2 pr-1 w-5 rounded-l-lg bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.hitHistoryTable.query')}</td>
-              <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.hitHistoryTable.match')}</td>
-              <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.hitHistoryTable.response')}</td>
-              <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.hitHistoryTable.source')}</td>
-              <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.hitHistoryTable.score')}</td>
-              <td className='pl-3 py-1.5 rounded-r-lg bg-background-section-burn whitespace-nowrap w-[160px]'>{t('appAnnotation.hitHistoryTable.time')}</td>
+              <td className='bg-background-section-burn w-5 whitespace-nowrap rounded-l-lg pl-2 pr-1'>{t('appAnnotation.hitHistoryTable.query')}</td>
+              <td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appAnnotation.hitHistoryTable.match')}</td>
+              <td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appAnnotation.hitHistoryTable.response')}</td>
+              <td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appAnnotation.hitHistoryTable.source')}</td>
+              <td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appAnnotation.hitHistoryTable.score')}</td>
+              <td className='bg-background-section-burn w-[160px] whitespace-nowrap rounded-r-lg py-1.5 pl-3'>{t('appAnnotation.hitHistoryTable.time')}</td>
             </tr>
           </thead>
           <tbody className="text-text-secondary system-sm-regular">
             {hitHistoryList.map(item => (
               <tr
                 key={item.id}
-                className={'border-b border-divider-subtle hover:bg-background-default-hover cursor-pointer'}
+                className={'border-divider-subtle hover:bg-background-default-hover cursor-pointer border-b'}
               >
                 <td
-                  className='p-3 pr-2 whitespace-nowrap overflow-hidden text-ellipsis max-w-[250px]'
+                  className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
                   title={item.question}
                 >{item.question}</td>
                 <td
-                  className='p-3 pr-2 whitespace-nowrap overflow-hidden text-ellipsis max-w-[250px]'
+                  className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
                   title={item.match}
                 >{item.match}</td>
                 <td
-                  className='p-3 pr-2 whitespace-nowrap overflow-hidden text-ellipsis max-w-[250px]'
+                  className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
                   title={item.response}
                 >{item.response}</td>
                 <td className='p-3 pr-2'>{item.source}</td>
@@ -168,7 +168,7 @@ const ViewAnnotationModal: FC<Props> = ({
         maxWidthClassName='!max-w-[800px]'
         title={
           <TabSlider
-            className='shrink-0 relative top-[9px]'
+            className='relative top-[9px] shrink-0'
             value={activeTab}
             onChange={v => setActiveTab(v as TabType)}
             options={tabs}
@@ -178,7 +178,7 @@ const ViewAnnotationModal: FC<Props> = ({
         }
         body={(
           <div>
-            <div className='p-6 pb-4 space-y-6'>
+            <div className='space-y-6 p-6 pb-4'>
               {activeTab === TabType.annotation ? annotationTab : hitHistoryTab}
             </div>
             <Confirm
@@ -195,9 +195,9 @@ const ViewAnnotationModal: FC<Props> = ({
         )}
         foot={id
           ? (
-            <div className='px-4 flex h-16 items-center justify-between border-t border-divider-subtle bg-background-section-burn rounded-bl-xl rounded-br-xl system-sm-medium text-text-tertiary'>
+            <div className='border-divider-subtle bg-background-section-burn system-sm-medium text-text-tertiary flex h-16 items-center justify-between rounded-bl-xl rounded-br-xl border-t px-4'>
               <div
-                className='flex items-center pl-3 space-x-2 cursor-pointer'
+                className='flex cursor-pointer items-center space-x-2 pl-3'
                 onClick={() => setShowModal(true)}
               >
                 <MessageCheckRemove />
diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index a2260a889d..5d0aa5d891 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -139,19 +139,19 @@ const AppPublisher = ({
           disabled={disabled}
         >
           {t('workflow.common.publish')}
-          <RiArrowDownSLine className='w-4 h-4 ml-0.5' />
+          <RiArrowDownSLine className='ml-0.5 h-4 w-4' />
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[11]'>
-        <div className='w-[336px] bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl'>
+        <div className='bg-components-panel-bg border-components-panel-border w-[336px] rounded-2xl border-[0.5px] shadow-xl'>
           <div className='p-4 pt-3'>
-            <div className='flex items-center h-6 system-xs-medium-uppercase text-text-tertiary'>
+            <div className='system-xs-medium-uppercase text-text-tertiary flex h-6 items-center'>
               {publishedAt ? t('workflow.common.latestPublished') : t('workflow.common.currentDraftUnpublished')}
             </div>
             {publishedAt
               ? (
-                <div className='flex justify-between items-center h-[18px]'>
-                  <div className='flex items-center mt-[3px] mb-[3px] leading-[18px] text-[13px] font-medium text-text-secondary'>
+                <div className='flex h-[18px] items-center justify-between'>
+                  <div className='text-text-secondary mb-[3px] mt-[3px] flex items-center text-[13px] font-medium leading-[18px]'>
                     {t('workflow.common.publishedAt')} {formatTimeFromNow(publishedAt)}
                   </div>
                   <Button
@@ -165,7 +165,7 @@ const AppPublisher = ({
                 </div>
               )
               : (
-                <div className='flex items-center h-[18px] leading-[18px] text-[13px] font-medium text-text-secondary'>
+                <div className='text-text-secondary flex h-[18px] items-center text-[13px] font-medium leading-[18px]'>
                   {t('workflow.common.autoSaved')} · {Boolean(draftUpdatedAt) && formatTimeFromNow(draftUpdatedAt!)}
                 </div>
               )}
@@ -180,7 +180,7 @@ const AppPublisher = ({
               : (
                 <Button
                   variant='primary'
-                  className='w-full mt-3'
+                  className='mt-3 w-full'
                   onClick={() => handlePublish()}
                   disabled={publishDisabled || published}
                 >
@@ -193,14 +193,14 @@ const AppPublisher = ({
               )
             }
           </div>
-          <div className='p-4 pt-3 border-t-[0.5px] border-divider-regular'>
+          <div className='border-divider-regular border-t-[0.5px] p-4 pt-3'>
             <SuggestedAction disabled={!publishedAt} link={appURL} icon={<PlayCircle />}>{t('workflow.common.runApp')}</SuggestedAction>
             {appDetail?.mode === 'workflow'
               ? (
                 <SuggestedAction
                   disabled={!publishedAt}
                   link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
-                  icon={<LeftIndent02 className='w-4 h-4' />}
+                  icon={<LeftIndent02 className='h-4 w-4' />}
                 >
                   {t('workflow.common.batchRunApp')}
                 </SuggestedAction>
@@ -212,7 +212,7 @@ const AppPublisher = ({
                     handleTrigger()
                   }}
                   disabled={!publishedAt}
-                  icon={<CodeBrowser className='w-4 h-4' />}
+                  icon={<CodeBrowser className='h-4 w-4' />}
                 >
                   {t('workflow.common.embedIntoSite')}
                 </SuggestedAction>
@@ -222,11 +222,11 @@ const AppPublisher = ({
                 handleOpenInExplore()
               }}
               disabled={!publishedAt}
-              icon={<RiPlanetLine className='w-4 h-4' />}
+              icon={<RiPlanetLine className='h-4 w-4' />}
             >
               {t('workflow.common.openInExplore')}
             </SuggestedAction>
-            <SuggestedAction disabled={!publishedAt} link='./develop' icon={<FileText className='w-4 h-4' />}>{t('workflow.common.accessAPIReference')}</SuggestedAction>
+            <SuggestedAction disabled={!publishedAt} link='./develop' icon={<FileText className='h-4 w-4' />}>{t('workflow.common.accessAPIReference')}</SuggestedAction>
             {appDetail?.mode === 'workflow' && (
               <WorkflowToolConfigureButton
                 disabled={!publishedAt}
diff --git a/web/app/components/app/app-publisher/publish-with-multiple-model.tsx b/web/app/components/app/app-publisher/publish-with-multiple-model.tsx
index 8dd728442c..ecd68f7888 100644
--- a/web/app/components/app/app-publisher/publish-with-multiple-model.tsx
+++ b/web/app/components/app/app-publisher/publish-with-multiple-model.tsx
@@ -73,25 +73,25 @@ const PublishWithMultipleModel: FC<PublishWithMultipleModelProps> = ({
           className='mt-3 w-full'
         >
           {t('appDebug.operation.applyConfig')}
-          <RiArrowDownSLine className='ml-0.5 w-3 h-3' />
+          <RiArrowDownSLine className='ml-0.5 h-3 w-3' />
         </Button>
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='mt-1 w-[288px] z-50'>
-        <div className='p-1 rounded-lg border-[0.5px] border-components-panel-border shadow-lg bg-components-panel-bg'>
-          <div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>
+      <PortalToFollowElemContent className='z-50 mt-1 w-[288px]'>
+        <div className='border-components-panel-border bg-components-panel-bg rounded-lg border-[0.5px] p-1 shadow-lg'>
+          <div className='text-text-tertiary flex h-[22px] items-center px-3 text-xs font-medium'>
             {t('appDebug.publishAs')}
           </div>
           {
             validModelConfigs.map((item, index) => (
               <div
                 key={item.id}
-                className='flex items-center h-8 px-3 text-sm text-text-tertiary rounded-lg cursor-pointer hover:bg-state-base-hover'
+                className='text-text-tertiary hover:bg-state-base-hover flex h-8 cursor-pointer items-center rounded-lg px-3 text-sm'
                 onClick={() => handleSelect(item)}
               >
-                <span className='italic min-w-[18px]'>#{index + 1}</span>
+                <span className='min-w-[18px] italic'>#{index + 1}</span>
                 <ModelIcon modelName={item.model} provider={item.providerItem} className='ml-2' />
                 <div
-                  className='ml-1 text-text-secondary truncate'
+                  className='text-text-secondary ml-1 truncate'
                   title={item.modelItem.label[language]}
                 >
                   {item.modelItem.label[language]}
diff --git a/web/app/components/app/app-publisher/suggested-action.tsx b/web/app/components/app/app-publisher/suggested-action.tsx
index 6099b2e7bb..805d47f530 100644
--- a/web/app/components/app/app-publisher/suggested-action.tsx
+++ b/web/app/components/app/app-publisher/suggested-action.tsx
@@ -20,8 +20,8 @@ const SuggestedAction = ({ icon, link, disabled, children, className, ...props }
     )}
     {...props}
   >
-    <div className='relative w-4 h-4'>{icon}</div>
-    <div className='grow shrink basis-0 text-[13px] font-medium leading-[18px]'>{children}</div>
+    <div className='relative h-4 w-4'>{icon}</div>
+    <div className='shrink grow basis-0 text-[13px] font-medium leading-[18px]'>{children}</div>
     <ArrowUpRight />
   </a>
 )
diff --git a/web/app/components/app/configuration/base/feature-panel/index.tsx b/web/app/components/app/configuration/base/feature-panel/index.tsx
index 2ee0ae0d69..c81135a40b 100644
--- a/web/app/components/app/configuration/base/feature-panel/index.tsx
+++ b/web/app/components/app/configuration/base/feature-panel/index.tsx
@@ -23,15 +23,15 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
   children,
 }) => {
   return (
-    <div className={cn('rounded-xl border-t-[0.5px] border-l-[0.5px] border-effects-highlight bg-background-section-burn pb-3', noBodySpacing && 'pb-0', className)}>
+    <div className={cn('border-effects-highlight bg-background-section-burn rounded-xl border-l-[0.5px] border-t-[0.5px] pb-3', noBodySpacing && 'pb-0', className)}>
       {/* Header */}
-      <div className={cn('px-3 pt-2', hasHeaderBottomBorder && 'border-b border-divider-subtle')}>
-        <div className='flex justify-between items-center h-8'>
-          <div className='flex items-center space-x-1 shrink-0'>
-            {headerIcon && <div className='flex items-center justify-center w-6 h-6'>{headerIcon}</div>}
+      <div className={cn('px-3 pt-2', hasHeaderBottomBorder && 'border-divider-subtle border-b')}>
+        <div className='flex h-8 items-center justify-between'>
+          <div className='flex shrink-0 items-center space-x-1'>
+            {headerIcon && <div className='flex h-6 w-6 items-center justify-center'>{headerIcon}</div>}
             <div className='text-text-secondary system-sm-semibold'>{title}</div>
           </div>
-          <div className='flex gap-2 items-center'>
+          <div className='flex items-center gap-2'>
             {headerRight && <div>{headerRight}</div>}
           </div>
         </div>
diff --git a/web/app/components/app/configuration/base/group-name/index.tsx b/web/app/components/app/configuration/base/group-name/index.tsx
index 51fe09021b..f45ad0fad8 100644
--- a/web/app/components/app/configuration/base/group-name/index.tsx
+++ b/web/app/components/app/configuration/base/group-name/index.tsx
@@ -10,9 +10,9 @@ const GroupName: FC<IGroupNameProps> = ({
   name,
 }) => {
   return (
-    <div className='flex items-center mb-1'>
-      <div className='mr-3 leading-[18px] text-xs font-semibold text-gray-500 uppercase'>{name}</div>
-      <div className='grow h-[1px]'
+    <div className='mb-1 flex items-center'>
+      <div className='mr-3 text-xs font-semibold uppercase leading-[18px] text-gray-500'>{name}</div>
+      <div className='h-[1px] grow'
         style={{
           background: 'linear-gradient(270deg, rgba(243, 244, 246, 0) 0%, #F3F4F6 100%)',
 
diff --git a/web/app/components/app/configuration/base/icons/remove-icon/index.tsx b/web/app/components/app/configuration/base/icons/remove-icon/index.tsx
index e07a462d49..f4b30a9605 100644
--- a/web/app/components/app/configuration/base/icons/remove-icon/index.tsx
+++ b/web/app/components/app/configuration/base/icons/remove-icon/index.tsx
@@ -17,7 +17,7 @@ const RemoveIcon = ({
   const computedIsHovered = isHoverStatus || isHovered
   return (
     <div
-      className={cn(className, computedIsHovered && 'bg-[#FEE4E2]', 'flex w-6 h-6 items-center justify-center rounded-md cursor-pointer hover:bg-[#FEE4E2]')}
+      className={cn(className, computedIsHovered && 'bg-[#FEE4E2]', 'flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-[#FEE4E2]')}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
       onClick={onClick}
diff --git a/web/app/components/app/configuration/base/operation-btn/index.tsx b/web/app/components/app/configuration/base/operation-btn/index.tsx
index 7a0c8892ea..c7bfc770b2 100644
--- a/web/app/components/app/configuration/base/operation-btn/index.tsx
+++ b/web/app/components/app/configuration/base/operation-btn/index.tsx
@@ -16,8 +16,8 @@ export type IOperationBtnProps = {
 }
 
 const iconMap = {
-  add: <RiAddLine className='w-3.5 h-3.5' />,
-  edit: <RiEditLine className='w-3.5 h-3.5' />,
+  add: <RiAddLine className='h-3.5 w-3.5' />,
+  edit: <RiEditLine className='h-3.5 w-3.5' />,
 }
 
 const OperationBtn: FC<IOperationBtnProps> = ({
@@ -29,7 +29,7 @@ const OperationBtn: FC<IOperationBtnProps> = ({
   const { t } = useTranslation()
   return (
     <div
-      className={cn('flex items-center rounded-md h-7 px-3 space-x-1 text-text-secondary cursor-pointer hover:bg-state-base-hover select-none', className)}
+      className={cn('text-text-secondary hover:bg-state-base-hover flex h-7 cursor-pointer select-none items-center space-x-1 rounded-md px-3', className)}
       onClick={onClick}>
       <div>
         {iconMap[type]}
diff --git a/web/app/components/app/configuration/base/var-highlight/index.tsx b/web/app/components/app/configuration/base/var-highlight/index.tsx
index 3dd6c14902..b8e0bae308 100644
--- a/web/app/components/app/configuration/base/var-highlight/index.tsx
+++ b/web/app/components/app/configuration/base/var-highlight/index.tsx
@@ -16,7 +16,7 @@ const VarHighlight: FC<IVarHighlightProps> = ({
   return (
     <div
       key={name}
-      className={`${s.item} ${className} flex mb-2 items-center justify-center rounded-md px-1 h-5 text-xs font-medium text-primary-600`}
+      className={`${s.item} ${className} text-primary-600 mb-2 flex h-5 items-center justify-center rounded-md px-1 text-xs font-medium`}
     >
       <span className='opacity-60'>{'{{'}</span>
       <span>{name}</span>
diff --git a/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx b/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx
index 52756189a1..be247b024f 100644
--- a/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx
+++ b/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx
@@ -20,7 +20,7 @@ const FormattingChanged: FC<IFormattingChangedProps> = ({
       description={t('appDebug.feature.dataSet.queryVariable.unableToQueryDataSetTip')}
       footer={
         <div className='flex space-x-2'>
-          <Button variant='primary' className='flex justify-start !w-[96px]' onClick={onConfirm}>
+          <Button variant='primary' className='flex !w-[96px] justify-start' onClick={onConfirm}>
             <span className='text-[13px] font-medium'>{t('appDebug.feature.dataSet.queryVariable.ok')}</span>
           </Button>
         </div>
diff --git a/web/app/components/app/configuration/base/warning-mask/index.tsx b/web/app/components/app/configuration/base/warning-mask/index.tsx
index 03df4f16df..fbe58bee11 100644
--- a/web/app/components/app/configuration/base/warning-mask/index.tsx
+++ b/web/app/components/app/configuration/base/warning-mask/index.tsx
@@ -22,11 +22,11 @@ const WarningMask: FC<IWarningMaskProps> = ({
   footer,
 }) => {
   return (
-    <div className={`${s.mask} absolute z-10 inset-0 pt-16`}
+    <div className={`${s.mask} absolute inset-0 z-10 pt-16`}
     >
       <div className='mx-auto px-10'>
-        <div className={`${s.icon} flex items-center justify-center w-11 h-11 rounded-xl bg-white`}>{warningIcon}</div>
-        <div className='mt-4 text-[24px] leading-normal font-semibold text-gray-800'>
+        <div className={`${s.icon} flex h-11 w-11 items-center justify-center rounded-xl bg-white`}>{warningIcon}</div>
+        <div className='mt-4 text-[24px] font-semibold leading-normal text-gray-800'>
           {title}
         </div>
         <div className='mt-3 text-base text-gray-500'>
diff --git a/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
index afa2bf8e27..53fc44a3f7 100644
--- a/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
@@ -141,17 +141,17 @@ const AdvancedPromptInput: FC<Props> = ({
   const [editorHeight, setEditorHeight] = React.useState(isChatMode ? 200 : 508)
   const contextMissing = (
     <div
-      className='flex justify-between items-center h-11 pt-2 pr-3 pb-1 pl-4 rounded-tl-xl rounded-tr-xl'
+      className='flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl pb-1 pl-4 pr-3 pt-2'
       style={{
         background: 'linear-gradient(180deg, #FEF0C7 0%, rgba(254, 240, 199, 0) 100%)',
       }}
     >
       <div className='flex items-center pr-2' >
-        <RiErrorWarningFill className='mr-1 w-4 h-4 text-[#F79009]' />
-        <div className='leading-[18px] text-[13px] font-medium text-[#DC6803]'>{t('appDebug.promptMode.contextMissing')}</div>
+        <RiErrorWarningFill className='mr-1 h-4 w-4 text-[#F79009]' />
+        <div className='text-[13px] font-medium leading-[18px] text-[#DC6803]'>{t('appDebug.promptMode.contextMissing')}</div>
       </div>
       <div
-        className='flex items-center h-6 px-2 rounded-md bg-[#fff] border border-gray-200 shadow-xs text-xs font-medium text-primary-600 cursor-pointer'
+        className='shadow-xs text-primary-600 flex h-6 cursor-pointer items-center rounded-md border border-gray-200 bg-[#fff] px-2 text-xs font-medium'
         onClick={onHideContextMissingTip}
       >{t('common.operation.ok')}</div>
     </div>
@@ -162,7 +162,7 @@ const AdvancedPromptInput: FC<Props> = ({
         {isContextMissing
           ? contextMissing
           : (
-            <div className={cn(s.boxHeader, 'flex justify-between items-center h-11 pt-2 pr-3 pb-1 pl-4 rounded-tl-xl rounded-tr-xl bg-white hover:shadow-xs')}>
+            <div className={cn(s.boxHeader, 'hover:shadow-xs flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl bg-white pb-1 pl-4 pr-3 pt-2')}>
               {isChatMode
                 ? (
                   <MessageTypeSelector value={type} onChange={onTypeChange} />
@@ -182,11 +182,11 @@ const AdvancedPromptInput: FC<Props> = ({
                   </div>)}
               <div className={cn(s.optionWrap, 'items-center space-x-1')}>
                 {canDelete && (
-                  <RiDeleteBinLine onClick={onDelete} className='h-6 w-6 p-1 text-gray-500 cursor-pointer' />
+                  <RiDeleteBinLine onClick={onDelete} className='h-6 w-6 cursor-pointer p-1 text-gray-500' />
                 )}
                 {!isCopied
                   ? (
-                    <Clipboard className='h-6 w-6 p-1 text-gray-500 cursor-pointer' onClick={() => {
+                    <Clipboard className='h-6 w-6 cursor-pointer p-1 text-gray-500' onClick={() => {
                       copy(value)
                       setIsCopied(true)
                     }} />
@@ -199,13 +199,13 @@ const AdvancedPromptInput: FC<Props> = ({
           )}
 
         <PromptEditorHeightResizeWrap
-          className='px-4 min-h-[102px] overflow-y-auto text-sm text-gray-700'
+          className='min-h-[102px] overflow-y-auto px-4 text-sm text-gray-700'
           height={editorHeight}
           minHeight={minHeight}
           onHeightChange={setEditorHeight}
           footer={(
-            <div className='pl-4 pb-2 flex'>
-              <div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{value.length}</div>
+            <div className='flex pb-2 pl-4'>
+              <div className="h-[18px] rounded-md bg-gray-100 px-1 text-xs leading-[18px] text-gray-500">{value.length}</div>
             </div>
           )}
           hideResize={noResize}
diff --git a/web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx b/web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx
index 922f8bb36a..c48d25df1e 100644
--- a/web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx
+++ b/web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx
@@ -46,7 +46,7 @@ const ConfirmAddVar: FC<IConfirmAddVarProps> = ({
       >
         <div className='flex items-start space-x-3'>
           <div
-            className='shrink-0 flex items-center justify-center h-10 w-10 rounded-xl border border-gray-100'
+            className='flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-gray-100'
             style={{
               backgroundColor: 'rgba(255, 255, 255, 0.9)',
               boxShadow: '0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03)',
@@ -54,7 +54,7 @@ const ConfirmAddVar: FC<IConfirmAddVarProps> = ({
           >{VarIcon}</div>
           <div className='grow-1'>
             <div className='text-sm font-medium text-gray-900'>{t('appDebug.autoAddVar')}</div>
-            <div className='flex flex-wrap mt-[15px] max-h-[66px] overflow-y-auto px-1 space-x-1'>
+            <div className='mt-[15px] flex max-h-[66px] flex-wrap space-x-1 overflow-y-auto px-1'>
               {varNameArr.map(name => (
                 <VarHighlight key={name} name={name} />
               ))}
diff --git a/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx b/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx
index e0ef97e247..8f413ec70b 100644
--- a/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx
+++ b/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx
@@ -28,8 +28,8 @@ const EditModal: FC<Props> = ({
       isShow={isShow}
       onClose={onClose}
     >
-      <div className={'mt-6 font-medium text-sm leading-[21px] text-text-primary'}>{t('appDebug.feature.conversationHistory.editModal.userPrefix')}</div>
-      <input className={'mt-2 w-full rounded-lg h-10 box-border px-3 text-sm leading-10 bg-components-input-bg-normal'}
+      <div className={'text-text-primary mt-6 text-sm font-medium leading-[21px]'}>{t('appDebug.feature.conversationHistory.editModal.userPrefix')}</div>
+      <input className={'bg-components-input-bg-normal mt-2 box-border h-10 w-full rounded-lg px-3 text-sm leading-10'}
         value={tempData.user_prefix}
         onChange={e => setTempData({
           ...tempData,
@@ -37,8 +37,8 @@ const EditModal: FC<Props> = ({
         })}
       />
 
-      <div className={'mt-6 font-medium text-sm leading-[21px] text-text-primary'}>{t('appDebug.feature.conversationHistory.editModal.assistantPrefix')}</div>
-      <input className={'mt-2 w-full rounded-lg h-10 box-border px-3 text-sm leading-10 bg-components-input-bg-normal'}
+      <div className={'text-text-primary mt-6 text-sm font-medium leading-[21px]'}>{t('appDebug.feature.conversationHistory.editModal.assistantPrefix')}</div>
+      <input className={'bg-components-input-bg-normal mt-2 box-border h-10 w-full rounded-lg px-3 text-sm leading-10'}
         value={tempData.assistant_prefix}
         onChange={e => setTempData({
           ...tempData,
diff --git a/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.tsx b/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.tsx
index 5a06111eac..1b86a8fd39 100644
--- a/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.tsx
+++ b/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.tsx
@@ -30,20 +30,20 @@ const HistoryPanel: FC<Props> = ({
         </div>
       }
       headerIcon={
-        <div className='p-1 rounded-md shadow-xs'>
-          <MessageClockCircle className='w-4 h-4 text-[#DD2590]' />
+        <div className='shadow-xs rounded-md p-1'>
+          <MessageClockCircle className='h-4 w-4 text-[#DD2590]' />
         </div>}
       headerRight={
         <div className='flex items-center'>
-          <div className='text-xs text-text-tertiary'>{t('appDebug.feature.conversationHistory.description')}</div>
-          <div className='ml-3 w-[1px] h-[14px] bg-divider-regular'></div>
+          <div className='text-text-tertiary text-xs'>{t('appDebug.feature.conversationHistory.description')}</div>
+          <div className='bg-divider-regular ml-3 h-[14px] w-[1px]'></div>
           <OperationBtn type="edit" onClick={onShowEditModal} />
         </div>
       }
       noBodySpacing
     >
       {showWarning && (
-        <div className='flex justify-between py-2 px-3 rounded-b-xl bg-background-section-burn text-xs text-text-secondary'>
+        <div className='bg-background-section-burn text-text-secondary flex justify-between rounded-b-xl px-3 py-2 text-xs'>
           <div>{t('appDebug.feature.conversationHistory.tip')}
             <a href={`${locale === LanguagesSupported[1]
               ? 'https://docs.dify.ai/v/zh-hans/guides/application-design/prompt-engineering'
diff --git a/web/app/components/app/configuration/config-prompt/index.tsx b/web/app/components/app/configuration/config-prompt/index.tsx
index 64870b7545..4cd148a174 100644
--- a/web/app/components/app/configuration/config-prompt/index.tsx
+++ b/web/app/components/app/configuration/config-prompt/index.tsx
@@ -157,8 +157,8 @@ const Prompt: FC<IPromptProps> = ({
       {(modelModeType === ModelModeType.chat && (currentAdvancedPrompt as PromptItem[]).length < MAX_PROMPT_MESSAGE_LENGTH) && (
         <div
           onClick={handleAddMessage}
-          className='mt-3 flex items-center h-8 justify-center bg-gray-50 rounded-lg cursor-pointer text-[13px] font-medium text-gray-700 space-x-2'>
-          <RiAddLine className='w-4 h-4' />
+          className='mt-3 flex h-8 cursor-pointer items-center justify-center space-x-2 rounded-lg bg-gray-50 text-[13px] font-medium text-gray-700'>
+          <RiAddLine className='h-4 w-4' />
           <div>{t('appDebug.promptMode.operation.addMessage')}</div>
         </div>
       )}
diff --git a/web/app/components/app/configuration/config-prompt/message-type-selector.tsx b/web/app/components/app/configuration/config-prompt/message-type-selector.tsx
index d522292f76..25882e8922 100644
--- a/web/app/components/app/configuration/config-prompt/message-type-selector.tsx
+++ b/web/app/components/app/configuration/config-prompt/message-type-selector.tsx
@@ -24,12 +24,12 @@ const MessageTypeSelector: FC<Props> = ({
     <div className='relative left-[-8px]' ref={ref}>
       <div
         onClick={toggleShow}
-        className={cn(showOption && 'bg-indigo-100', 'flex items-center h-7 pl-1.5 pr-1 space-x-0.5 rounded-lg cursor-pointer text-indigo-800')}>
+        className={cn(showOption && 'bg-indigo-100', 'flex h-7 cursor-pointer items-center space-x-0.5 rounded-lg pl-1.5 pr-1 text-indigo-800')}>
         <div className='text-sm font-semibold uppercase'>{value}</div>
-        <ChevronSelectorVertical className='w-3 h-3 ' />
+        <ChevronSelectorVertical className='h-3 w-3 ' />
       </div>
       {showOption && (
-        <div className='absolute z-10 top-[30px] p-1 border border-gray-200 shadow-lg rounded-lg bg-white'>
+        <div className='absolute top-[30px] z-10 rounded-lg border border-gray-200 bg-white p-1 shadow-lg'>
           {allTypes.map(type => (
             <div
               key={type}
@@ -37,7 +37,7 @@ const MessageTypeSelector: FC<Props> = ({
                 setHide()
                 onChange(type)
               }}
-              className='flex items-center h-9 min-w-[44px] px-3 rounded-lg cursor-pointer text-sm font-medium text-gray-700 uppercase hover:bg-gray-50'
+              className='flex h-9 min-w-[44px] cursor-pointer items-center rounded-lg px-3 text-sm font-medium uppercase text-gray-700 hover:bg-gray-50'
             >{type}</div>
           ))
           }
diff --git a/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx b/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx
index 9fdc71b64e..1457a298f2 100644
--- a/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx
+++ b/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx
@@ -85,9 +85,9 @@ const PromptEditorHeightResizeWrap: FC<Props> = ({
       {footer}
       {!hideResize && (
         <div
-          className='absolute bottom-0 left-0 w-full flex justify-center h-2 cursor-row-resize'
+          className='absolute bottom-0 left-0 flex h-2 w-full cursor-row-resize justify-center'
           onMouseDown={handleStartResize}>
-          <div className='w-5 h-[3px] rounded-sm bg-gray-300'></div>
+          <div className='h-[3px] w-5 rounded-sm bg-gray-300'></div>
         </div>
       )}
     </div>
diff --git a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
index 1987013698..5f245f9dd8 100644
--- a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
@@ -164,7 +164,7 @@ const Prompt: FC<ISimplePromptInput> = ({
     <div className={cn((!readonly || gradientBorder) ? `${s.gradientBorder}` : 'bg-gray-50', ' relative shadow-md')}>
       <div className='rounded-xl bg-[#EEF4FF]'>
         {!noTitle && (
-          <div className="flex justify-between items-center h-11 pl-3 pr-6">
+          <div className="flex h-11 items-center justify-between pl-3 pr-6">
             <div className="flex items-center space-x-1">
               <div className='h2'>{mode !== AppType.completion ? t('appDebug.chatSubTitle') : t('appDebug.completionSubTitle')}</div>
               {!readonly && (
@@ -186,14 +186,14 @@ const Prompt: FC<ISimplePromptInput> = ({
         )}
 
         <PromptEditorHeightResizeWrap
-          className='px-4 pt-2 min-h-[228px] bg-white rounded-t-xl text-sm text-gray-700'
+          className='min-h-[228px] rounded-t-xl bg-white px-4 pt-2 text-sm text-gray-700'
           height={editorHeight}
           minHeight={minHeight}
           onHeightChange={setEditorHeight}
           hideResize={noResize}
           footer={(
-            <div className='pl-4 pb-2 flex bg-white rounded-b-xl'>
-              <div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{promptTemplate.length}</div>
+            <div className='flex rounded-b-xl bg-white pb-2 pl-4'>
+              <div className="h-[18px] rounded-md bg-gray-100 px-1 text-xs leading-[18px] text-gray-500">{promptTemplate.length}</div>
             </div>
           )}
         >
diff --git a/web/app/components/app/configuration/config-var/config-modal/index.tsx b/web/app/components/app/configuration/config-var/config-modal/index.tsx
index 85e241a203..a68cb5eea5 100644
--- a/web/app/components/app/configuration/config-var/config-modal/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/index.tsx
@@ -233,7 +233,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
             />
           )}
 
-          <div className='!mt-5 flex items-center h-6 space-x-2'>
+          <div className='!mt-5 flex h-6 items-center space-x-2'>
             <Checkbox checked={tempPayload.required} onCheck={() => handlePayloadChange('required')(!tempPayload.required)} />
             <span className='text-text-secondary system-sm-semibold'>{t('appDebug.variableConfig.required')}</span>
           </div>
diff --git a/web/app/components/app/configuration/config-var/config-select/index.tsx b/web/app/components/app/configuration/config-var/config-select/index.tsx
index 449cb8b12f..0e4256c691 100644
--- a/web/app/components/app/configuration/config-var/config-select/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-select/index.tsx
@@ -41,7 +41,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
           >
             {options.map((o, index) => (
               <div className={`${s.inputWrap} relative`} key={index}>
-                <div className='handle flex items-center justify-center w-4 h-4 cursor-grab'>
+                <div className='handle flex h-4 w-4 cursor-grab items-center justify-center'>
                   <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path fillRule="evenodd" clipRule="evenodd" d="M1 2C1.55228 2 2 1.55228 2 1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2ZM1 6C1.55228 6 2 5.55228 2 5C2 4.44772 1.55228 4 1 4C0.447715 4 0 4.44772 0 5C0 5.55228 0.447715 6 1 6ZM6 1C6 1.55228 5.55228 2 5 2C4.44772 2 4 1.55228 4 1C4 0.447715 4.44772 0 5 0C5.55228 0 6 0.447715 6 1ZM5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6ZM2 9C2 9.55229 1.55228 10 1 10C0.447715 10 0 9.55229 0 9C0 8.44771 0.447715 8 1 8C1.55228 8 2 8.44771 2 9ZM5 10C5.55228 10 6 9.55229 6 9C6 8.44771 5.55228 8 5 8C4.44772 8 4 8.44771 4 9C4 9.55229 4.44772 10 5 10Z" fill="#98A2B3" />
                   </svg>
@@ -59,10 +59,10 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
                       return item
                     }))
                   }}
-                  className={'w-full pl-1.5 pr-8 text-sm leading-9 text-gray-900 border-0 grow h-9 bg-transparent focus:outline-none cursor-pointer'}
+                  className={'h-9 w-full grow cursor-pointer border-0 bg-transparent pl-1.5 pr-8 text-sm leading-9 text-gray-900 focus:outline-none'}
                 />
                 <RemoveIcon
-                  className={`${s.deleteBtn} absolute top-1/2 translate-y-[-50%] right-1.5 items-center justify-center w-6 h-6 rounded-md cursor-pointer hover:bg-[#FEE4E2]`}
+                  className={`${s.deleteBtn} absolute right-1.5 top-1/2 h-6 w-6 translate-y-[-50%] cursor-pointer items-center justify-center rounded-md hover:bg-[#FEE4E2]`}
                   onClick={() => {
                     onChange(options.filter((_, i) => index !== i))
                   }}
@@ -75,9 +75,9 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
 
       <div
         onClick={() => { onChange([...options, '']) }}
-        className='flex items-center h-9 px-3 gap-2 rounded-lg cursor-pointer text-gray-400  bg-gray-100'>
+        className='flex h-9 cursor-pointer items-center gap-2 rounded-lg bg-gray-100 px-3  text-gray-400'>
         <PlusIcon width={16} height={16}></PlusIcon>
-        <div className='text-gray-500 text-[13px]'>{t('appDebug.variableConfig.addOption')}</div>
+        <div className='text-[13px] text-gray-500'>{t('appDebug.variableConfig.addOption')}</div>
       </div>
     </div>
   )
diff --git a/web/app/components/app/configuration/config-var/index.tsx b/web/app/components/app/configuration/config-var/index.tsx
index b579d66954..b52fad5e5a 100644
--- a/web/app/components/app/configuration/config-var/index.tsx
+++ b/web/app/components/app/configuration/config-var/index.tsx
@@ -219,11 +219,11 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
     >
       {!hasVar && (
         <div className='mt-1 px-3 pb-3'>
-          <div className='pt-2 pb-1 text-xs text-text-tertiary'>{t('appDebug.notSetVar')}</div>
+          <div className='text-text-tertiary pb-1 pt-2 text-xs'>{t('appDebug.notSetVar')}</div>
         </div>
       )}
       {hasVar && (
-        <div className='flex flex-wrap mt-1 px-3 pb-3 justify-between'>
+        <div className='mt-1 flex flex-wrap justify-between px-3 pb-3'>
           {promptVariables.map(({ key, name, type, required, config, icon, icon_background }, index) => (
             <VarItem
               key={index}
diff --git a/web/app/components/app/configuration/config-var/select-type-item/index.tsx b/web/app/components/app/configuration/config-var/select-type-item/index.tsx
index e88b44ce10..16faecb7cd 100644
--- a/web/app/components/app/configuration/config-var/select-type-item/index.tsx
+++ b/web/app/components/app/configuration/config-var/select-type-item/index.tsx
@@ -27,12 +27,12 @@ const SelectTypeItem: FC<ISelectTypeItemProps> = ({
   return (
     <div
       className={cn(
-        'flex flex-col justify-center items-center h-[58px] rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg space-y-1 text-text-secondary',
-        selected ? 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs system-xs-medium' : ' hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs cursor-pointer system-xs-regular')}
+        'border-components-option-card-option-border bg-components-option-card-option-bg text-text-secondary flex h-[58px] flex-col items-center justify-center space-y-1 rounded-lg border',
+        selected ? 'border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs system-xs-medium border-[1.5px]' : ' hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs system-xs-regular cursor-pointer')}
       onClick={onClick}
     >
       <div className='shrink-0'>
-        <InputVarTypeIcon type={type} className='w-5 h-5' />
+        <InputVarTypeIcon type={type} className='h-5 w-5' />
       </div>
       <span>{typeName}</span>
     </div>
diff --git a/web/app/components/app/configuration/config-var/select-var-type.tsx b/web/app/components/app/configuration/config-var/select-var-type.tsx
index 14d4f926ed..f82e931882 100644
--- a/web/app/components/app/configuration/config-var/select-var-type.tsx
+++ b/web/app/components/app/configuration/config-var/select-var-type.tsx
@@ -28,11 +28,11 @@ type ItemProps = {
 const SelectItem: FC<ItemProps> = ({ text, type, value, Icon, onClick }) => {
   return (
     <div
-      className='flex items-center px-3 h-8 rounded-lg hover:bg-gray-50 cursor-pointer'
+      className='flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-gray-50'
       onClick={() => onClick(value)}
     >
-      {Icon ? <Icon className='w-4 h-4 text-gray-500' /> : <InputVarTypeIcon type={type!} className='w-4 h-4 text-gray-500' />}
-      <div className='ml-2 text-xs text-gray-600 truncate'>{text}</div>
+      {Icon ? <Icon className='h-4 w-4 text-gray-500' /> : <InputVarTypeIcon type={type!} className='h-4 w-4 text-gray-500' />}
+      <div className='ml-2 truncate text-xs text-gray-600'>{text}</div>
     </div>
   )
 }
@@ -60,7 +60,7 @@ const SelectVarType: FC<Props> = ({
         <OperationBtn type='add' className={cn(open && 'bg-gray-200')} />
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 1000 }}>
-        <div className='bg-white border border-gray-200 shadow-lg rounded-lg min-w-[192px]'>
+        <div className='min-w-[192px] rounded-lg border border-gray-200 bg-white shadow-lg'>
           <div className='p-1'>
             <SelectItem type={InputVarType.textInput} value='string' text={t('appDebug.variableConfig.string')} onClick={handleChange}></SelectItem>
             <SelectItem type={InputVarType.paragraph} value='paragraph' text={t('appDebug.variableConfig.paragraph')} onClick={handleChange}></SelectItem>
diff --git a/web/app/components/app/configuration/config-var/var-item.tsx b/web/app/components/app/configuration/config-var/var-item.tsx
index d695a09a15..b2de523c54 100644
--- a/web/app/components/app/configuration/config-var/var-item.tsx
+++ b/web/app/components/app/configuration/config-var/var-item.tsx
@@ -33,37 +33,37 @@ const VarItem: FC<ItemProps> = ({
   const [isDeleting, setIsDeleting] = useState(false)
 
   return (
-    <div className={cn('group relative flex items-center mb-1 last-of-type:mb-0  pl-2.5 py-2 pr-3 w-full rounded-lg bg-components-panel-on-panel-item-bg border-components-panel-border-subtle border-[0.5px] shadow-xs hover:shadow-sm hover:bg-components-panel-on-panel-item-bg-hover', isDeleting && 'hover:bg-state-destructive-hover border-state-destructive-border', readonly && 'cursor-not-allowed opacity-30')}>
-      <VarIcon className='shrink-0 mr-1 w-4 h-4 text-text-accent' />
+    <div className={cn('bg-components-panel-on-panel-item-bg border-components-panel-border-subtle shadow-xs hover:bg-components-panel-on-panel-item-bg-hover group relative  mb-1 flex w-full items-center rounded-lg border-[0.5px] py-2 pl-2.5 pr-3 last-of-type:mb-0 hover:shadow-sm', isDeleting && 'hover:bg-state-destructive-hover border-state-destructive-border', readonly && 'cursor-not-allowed opacity-30')}>
+      <VarIcon className='text-text-accent mr-1 h-4 w-4 shrink-0' />
       <div className='grow'>
-        <div className='flex items-center h-[18px]'>
+        <div className='flex h-[18px] items-center'>
           <div className='grow truncate' title={name}>
             <span className='system-sm-medium text-text-secondary'>{name}</span>
-            <span className='px-1 system-xs-regular text-text-quaternary'>·</span>
+            <span className='system-xs-regular text-text-quaternary px-1'>·</span>
             <span className='system-xs-medium text-text-tertiary'>{label}</span>
           </div>
-          <div className='group-hover:hidden flex items-center'>
+          <div className='flex items-center group-hover:hidden'>
             {required && <Badge text='required' />}
-            <span className='pl-2 pr-1 system-xs-regular text-text-tertiary'>{type}</span>
+            <span className='system-xs-regular text-text-tertiary pl-2 pr-1'>{type}</span>
             <IconTypeIcon type={type as IInputTypeIconProps['type']} className='text-text-tertiary' />
           </div>
         </div>
       </div>
       {!readonly && (
-        <div className='hidden rounded-lg group-hover:flex items-center justify-end absolute right-0 top-0 bottom-0 pr-2 w-[124px]'>
+        <div className='absolute bottom-0 right-0 top-0 hidden w-[124px] items-center justify-end rounded-lg pr-2 group-hover:flex'>
           <div
-            className='flex items-center justify-center mr-1 w-6 h-6 hover:bg-black/5 rounded-md cursor-pointer'
+            className='mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-black/5'
             onClick={onEdit}
           >
-            <RiEditLine className='w-4 h-4 text-text-tertiary' />
+            <RiEditLine className='text-text-tertiary h-4 w-4' />
           </div>
           <div
-            className='flex items-center justify-center w-6 h-6  text-text-tertiary cursor-pointer hover:text-text-destructive'
+            className='text-text-tertiary hover:text-text-destructive flex h-6 w-6  cursor-pointer items-center justify-center'
             onClick={onRemove}
             onMouseOver={() => setIsDeleting(true)}
             onMouseLeave={() => setIsDeleting(false)}
           >
-            <RiDeleteBinLine className='w-4 h-4' />
+            <RiDeleteBinLine className='h-4 w-4' />
           </div>
         </div>
       )}
diff --git a/web/app/components/app/configuration/config-vision/index.tsx b/web/app/components/app/configuration/config-vision/index.tsx
index dd63b9db64..7f1649af4d 100644
--- a/web/app/components/app/configuration/config-vision/index.tsx
+++ b/web/app/components/app/configuration/config-vision/index.tsx
@@ -57,14 +57,14 @@ const ConfigVision: FC = () => {
     return null
 
   return (
-    <div className='mt-2 flex items-center gap-2 p-2 rounded-xl border-effects-highlight border-t-[0.5px] border-l-[0.5px] bg-background-section-burn'>
+    <div className='border-effects-highlight bg-background-section-burn mt-2 flex items-center gap-2 rounded-xl border-l-[0.5px] border-t-[0.5px] p-2'>
       <div className='shrink-0 p-1'>
-        <div className='p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600'>
-          <Vision className='w-4 h-4 text-text-primary-on-surface' />
+        <div className='border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600 rounded-lg border-[0.5px] p-1'>
+          <Vision className='text-text-primary-on-surface h-4 w-4' />
         </div>
       </div>
-      <div className='grow flex items-center'>
-        <div className='mr-1 text-text-secondary system-sm-semibold'>{t('appDebug.vision.name')}</div>
+      <div className='flex grow items-center'>
+        <div className='text-text-secondary system-sm-semibold mr-1'>{t('appDebug.vision.name')}</div>
         <Tooltip
           popupContent={
             <div className='w-[180px]' >
@@ -73,7 +73,7 @@ const ConfigVision: FC = () => {
           }
         />
       </div>
-      <div className='shrink-0 flex items-center'>
+      <div className='flex shrink-0 items-center'>
         {/* <div className='mr-2 flex items-center gap-0.5'>
           <div className='text-text-tertiary system-xs-medium-uppercase'>{t('appDebug.vision.visionSettings.resolution')}</div>
           <Tooltip
@@ -99,7 +99,7 @@ const ConfigVision: FC = () => {
           />
         </div> */}
         <ParamConfig />
-        <div className='ml-1 mr-3 w-[1px] h-3.5 bg-divider-regular'></div>
+        <div className='bg-divider-regular ml-1 mr-3 h-3.5 w-[1px]'></div>
         <Switch
           defaultValue={isImageEnabled}
           onChange={handleChange}
diff --git a/web/app/components/app/configuration/config-vision/param-config-content.tsx b/web/app/components/app/configuration/config-vision/param-config-content.tsx
index 27a69a9aaf..08060e7b21 100644
--- a/web/app/components/app/configuration/config-vision/param-config-content.tsx
+++ b/web/app/components/app/configuration/config-vision/param-config-content.tsx
@@ -41,11 +41,11 @@ const ParamConfigContent: FC = () => {
 
   return (
     <div>
-      <div className='leading-6 text-base font-semibold text-text-primary'>{t('appDebug.vision.visionSettings.title')}</div>
-      <div className='pt-3 space-y-6'>
+      <div className='text-text-primary text-base font-semibold leading-6'>{t('appDebug.vision.visionSettings.title')}</div>
+      <div className='space-y-6 pt-3'>
         <div>
           <div className='mb-2 flex items-center  space-x-1'>
-            <div className='leading-[18px] text-[13px] font-semibold text-text-secondary'>{t('appDebug.vision.visionSettings.resolution')}</div>
+            <div className='text-text-secondary text-[13px] font-semibold leading-[18px]'>{t('appDebug.vision.visionSettings.resolution')}</div>
             <Tooltip
               popupContent={
                 <div className='w-[180px]' >
@@ -78,7 +78,7 @@ const ParamConfigContent: FC = () => {
           </div>
         </div>
         <div>
-          <div className='mb-2 leading-[18px] text-[13px] font-semibold text-text-secondary'>{t('appDebug.vision.visionSettings.uploadMethod')}</div>
+          <div className='text-text-secondary mb-2 text-[13px] font-semibold leading-[18px]'>{t('appDebug.vision.visionSettings.uploadMethod')}</div>
           <div className='flex items-center gap-1'>
             <OptionCard
               className='grow'
diff --git a/web/app/components/app/configuration/config-vision/param-config.tsx b/web/app/components/app/configuration/config-vision/param-config.tsx
index 6f932e9d1c..367cf76d71 100644
--- a/web/app/components/app/configuration/config-vision/param-config.tsx
+++ b/web/app/components/app/configuration/config-vision/param-config.tsx
@@ -27,12 +27,12 @@ const ParamsConfig: FC = () => {
     >
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
         <Button variant='ghost' size='small' className={cn('')}>
-          <RiSettings2Line className='w-3.5 h-3.5' />
+          <RiSettings2Line className='h-3.5 w-3.5' />
           <div className='ml-1'>{t('appDebug.voice.settings')}</div>
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 50 }}>
-        <div className='w-80 sm:w-[412px] p-4 bg-components-panel-bg rounded-lg border-[0.5px] border-components-panel-border shadow-lg space-y-3'>
+        <div className='bg-components-panel-bg border-components-panel-border w-80 space-y-3 rounded-lg border-[0.5px] p-4 shadow-lg sm:w-[412px]'>
           <ParamConfigContent />
         </div>
       </PortalToFollowElemContent>
diff --git a/web/app/components/app/configuration/config/agent-setting-button.tsx b/web/app/components/app/configuration/config/agent-setting-button.tsx
index 91ba86b191..db69a6a7da 100644
--- a/web/app/components/app/configuration/config/agent-setting-button.tsx
+++ b/web/app/components/app/configuration/config/agent-setting-button.tsx
@@ -25,8 +25,8 @@ const AgentSettingButton: FC<Props> = ({
 
   return (
     <>
-      <Button onClick={() => setIsShowAgentSetting(true)} className='shrink-0 mr-2'>
-        <RiSettings2Line className='mr-1 w-4 h-4 text-text-tertiary' />
+      <Button onClick={() => setIsShowAgentSetting(true)} className='mr-2 shrink-0'>
+        <RiSettings2Line className='text-text-tertiary mr-1 h-4 w-4' />
         {t('appDebug.agent.setting.name')}
       </Button>
       {isShowAgentSetting && (
diff --git a/web/app/components/app/configuration/config/agent/agent-setting/index.tsx b/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
index 9fae3417b9..6bc96a450f 100644
--- a/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
@@ -36,47 +36,47 @@ const AgentSetting: FC<Props> = ({
   }
 
   return (
-    <div className='fixed z-[100] inset-0 overflow-hidden flex justify-end p-2'
+    <div className='fixed inset-0 z-[100] flex justify-end overflow-hidden p-2'
       style={{
         backgroundColor: 'rgba(16, 24, 40, 0.20)',
       }}
     >
       <div
-        className='w-[640px] flex flex-col h-full overflow-hidden bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-xl shadow-xl'
+        className='bg-components-panel-bg border-components-panel-border flex h-full w-[640px] flex-col overflow-hidden rounded-xl border-[0.5px] shadow-xl'
       >
-        <div className='shrink-0 flex justify-between items-center pl-6 pr-5 h-14 border-b border-divider-regular'>
-          <div className='flex flex-col text-base font-semibold text-text-primary'>
+        <div className='border-divider-regular flex h-14 shrink-0 items-center justify-between border-b pl-6 pr-5'>
+          <div className='text-text-primary flex flex-col text-base font-semibold'>
             <div className='leading-6'>{t('appDebug.agent.setting.name')}</div>
           </div>
           <div className='flex items-center'>
             <div
               onClick={onCancel}
-              className='flex justify-center items-center w-6 h-6 cursor-pointer'
+              className='flex h-6 w-6 cursor-pointer items-center justify-center'
             >
-              <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+              <RiCloseLine className='text-text-tertiary h-4 w-4' />
             </div>
           </div>
         </div>
         {/* Body */}
-        <div className='grow p-6 pt-5 border-b overflow-y-auto pb-[68px]' style={{
+        <div className='grow overflow-y-auto border-b p-6 pb-[68px] pt-5' style={{
           borderBottom: 'rgba(0, 0, 0, 0.05)',
         }}>
           {/* Agent Mode */}
           <ItemPanel
             className='mb-4'
             icon={
-              <CuteRobot className='w-4 h-4 text-indigo-600' />
+              <CuteRobot className='h-4 w-4 text-indigo-600' />
             }
             name={t('appDebug.agent.agentMode')}
             description={t('appDebug.agent.agentModeDes')}
           >
-            <div className='leading-[18px] text-[13px] font-medium text-text-primary'>{isFunctionCall ? t('appDebug.agent.agentModeType.functionCall') : t('appDebug.agent.agentModeType.ReACT')}</div>
+            <div className='text-text-primary text-[13px] font-medium leading-[18px]'>{isFunctionCall ? t('appDebug.agent.agentModeType.functionCall') : t('appDebug.agent.agentModeType.ReACT')}</div>
           </ItemPanel>
 
           <ItemPanel
             className='mb-4'
             icon={
-              <Unblur className='w-4 h-4 text-[#FB6514]' />
+              <Unblur className='h-4 w-4 text-[#FB6514]' />
             }
             name={t('appDebug.agent.setting.maximumIterations.name')}
             description={t('appDebug.agent.setting.maximumIterations.description')}
@@ -99,7 +99,7 @@ const AgentSetting: FC<Props> = ({
                 type="number"
                 min={maxIterationsMin}
                 max={maxIterationsMax} step={1}
-                className="block w-11 h-7 leading-7 rounded-lg border-0 pl-1 px-1.5 bg-components-input-bg-normal text-text-primary placeholder:text-text-tertiary focus:ring-1 focus:ring-inset focus:ring-primary-600"
+                className="bg-components-input-bg-normal text-text-primary placeholder:text-text-tertiary focus:ring-primary-600 block h-7 w-11 rounded-lg border-0 px-1.5 pl-1 leading-7 focus:ring-1 focus:ring-inset"
                 value={tempPayload.max_iteration}
                 onChange={(e) => {
                   let value = Number.parseInt(e.target.value, 10)
@@ -117,20 +117,20 @@ const AgentSetting: FC<Props> = ({
           </ItemPanel>
 
           {!isFunctionCall && (
-            <div className='py-2 bg-background-section-burn rounded-xl shadow-xs'>
-              <div className='flex items-center h-8 px-4 leading-6 text-sm font-semibold text-text-secondary'>{t('tools.builtInPromptTitle')}</div>
-              <div className='h-[396px] px-4 overflow-y-auto leading-5 text-sm font-normal text-text-secondary whitespace-pre-line'>
+            <div className='bg-background-section-burn shadow-xs rounded-xl py-2'>
+              <div className='text-text-secondary flex h-8 items-center px-4 text-sm font-semibold leading-6'>{t('tools.builtInPromptTitle')}</div>
+              <div className='text-text-secondary h-[396px] overflow-y-auto whitespace-pre-line px-4 text-sm font-normal leading-5'>
                 {isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion}
               </div>
               <div className='px-4'>
-                <div className='inline-flex items-center h-5 px-1 bg-components-input-bg-normal rounded-md leading-[18px] text-xs font-medium text-text-tertiary'>{(isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion).length}</div>
+                <div className='bg-components-input-bg-normal text-text-tertiary inline-flex h-5 items-center rounded-md px-1 text-xs font-medium leading-[18px]'>{(isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion).length}</div>
               </div>
             </div>
           )}
 
         </div>
         <div
-          className='sticky z-[5] bottom-0 w-full flex justify-end py-4 px-6 border-t bg-background-section-burn border-divider-regular'
+          className='bg-background-section-burn border-divider-regular sticky bottom-0 z-[5] flex w-full justify-end border-t px-6 py-4'
         >
           <Button
             onClick={onCancel}
diff --git a/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx b/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
index 78b6100a64..e6076c5f75 100644
--- a/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
@@ -19,10 +19,10 @@ const ItemPanel: FC<Props> = ({
   children,
 }) => {
   return (
-    <div className={cn(className, 'flex justify-between items-center h-12 px-3 rounded-lg bg-background-section-burn')}>
+    <div className={cn(className, 'bg-background-section-burn flex h-12 items-center justify-between rounded-lg px-3')}>
       <div className='flex items-center'>
         {icon}
-        <div className='ml-3 mr-1 leading-6 text-sm font-semibold text-text-secondary'>{name}</div>
+        <div className='text-text-secondary ml-3 mr-1 text-sm font-semibold leading-6'>{name}</div>
         <Tooltip
           popupContent={
             <div className='w-[180px]'>
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
index e4a0e9737f..03603341db 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
@@ -121,10 +121,10 @@ const AgentTools: FC = () => {
         }
         headerRight={
           <div className='flex items-center'>
-            <div className='leading-[18px] text-xs font-normal text-text-tertiary'>{tools.filter((item: any) => !!item.enabled).length}/{tools.length}&nbsp;{t('appDebug.agent.tools.enabled')}</div>
+            <div className='text-text-tertiary text-xs font-normal leading-[18px]'>{tools.filter((item: any) => !!item.enabled).length}/{tools.length}&nbsp;{t('appDebug.agent.tools.enabled')}</div>
             {tools.length < MAX_TOOLS_NUM && (
               <>
-                <div className='ml-3 mr-1 h-3.5 w-px bg-divider-regular'></div>
+                <div className='bg-divider-regular ml-3 mr-1 h-3.5 w-px'></div>
                 <ToolPicker
                   trigger={<OperationBtn type="add" />}
                   isShow={isShowChooseTool}
@@ -139,25 +139,25 @@ const AgentTools: FC = () => {
           </div>
         }
       >
-        <div className='grid gap-1 grid-cols-1 2xl:grid-cols-2 items-center flex-wrap justify-between'>
+        <div className='grid grid-cols-1 flex-wrap items-center justify-between gap-1 2xl:grid-cols-2'>
           {tools.map((item: AgentTool & { icon: any; collection?: Collection }, index) => (
             <div key={index}
               className={cn(
-                'group relative flex justify-between items-center last-of-type:mb-0 p-1.5 pr-2 w-full bg-components-panel-on-panel-item-bg rounded-lg border-[0.5px] border-components-panel-border-subtle shadow-xs hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm cursor',
+                'bg-components-panel-on-panel-item-bg border-components-panel-border-subtle shadow-xs hover:bg-components-panel-on-panel-item-bg-hover cursor group relative flex w-full items-center justify-between rounded-lg border-[0.5px] p-1.5 pr-2 last-of-type:mb-0 hover:shadow-sm',
                 isDeleting === index && 'hover:bg-state-destructive-hover border-state-destructive-border',
               )}
             >
-              <div className='grow w-0 flex items-center'>
-                {item.isDeleted && <DefaultToolIcon className='w-5 h-5' />}
+              <div className='flex w-0 grow items-center'>
+                {item.isDeleted && <DefaultToolIcon className='h-5 w-5' />}
                 {!item.isDeleted && (
                   <div className={cn((item.notAuthor || !item.enabled) && 'opacity-50')}>
-                    {typeof item.icon === 'string' && <div className='w-5 h-5 bg-cover bg-center rounded-md' style={{ backgroundImage: `url(${item.icon})` }} />}
+                    {typeof item.icon === 'string' && <div className='h-5 w-5 rounded-md bg-cover bg-center' style={{ backgroundImage: `url(${item.icon})` }} />}
                     {typeof item.icon !== 'string' && <AppIcon className='rounded-md' size='xs' icon={item.icon?.content} background={item.icon?.background} />}
                   </div>
                 )}
                 <div
                   className={cn(
-                    'grow w-0 ml-1.5 flex items-center system-xs-regular truncate',
+                    'system-xs-regular ml-1.5 flex w-0 grow items-center truncate',
                     (item.isDeleted || item.notAuthor || !item.enabled) ? 'opacity-50' : '',
                   )}
                 >
@@ -168,34 +168,34 @@ const AgentTools: FC = () => {
                       needsDelay
                       popupContent={
                         <div className='w-[180px]'>
-                          <div className='mb-1.5 text-text-secondary'>{item.tool_name}</div>
-                          <div className='mb-1.5 text-text-tertiary'>{t('tools.toolNameUsageTip')}</div>
+                          <div className='text-text-secondary mb-1.5'>{item.tool_name}</div>
+                          <div className='text-text-tertiary mb-1.5'>{t('tools.toolNameUsageTip')}</div>
                           <div className='text-text-accent cursor-pointer' onClick={() => copy(item.tool_name)}>{t('tools.copyToolName')}</div>
                         </div>
                       }
                     >
-                      <div className='w-4 h-4'>
-                        <div className='hidden group-hover:inline-block ml-0.5'>
-                          <RiInformation2Line className='w-4 h-4 text-text-tertiary' />
+                      <div className='h-4 w-4'>
+                        <div className='ml-0.5 hidden group-hover:inline-block'>
+                          <RiInformation2Line className='text-text-tertiary h-4 w-4' />
                         </div>
                       </div>
                     </Tooltip>
                   )}
                 </div>
               </div>
-              <div className='shrink-0 ml-1 flex items-center'>
+              <div className='ml-1 flex shrink-0 items-center'>
                 {item.isDeleted && (
-                  <div className='flex items-center mr-2'>
+                  <div className='mr-2 flex items-center'>
                     <Tooltip
                       popupContent={t('tools.toolRemoved')}
                       needsDelay
                     >
-                      <div className='mr-1 p-1 rounded-md hover:bg-black/5 cursor-pointer'>
-                        <AlertTriangle className='w-4 h-4 text-[#F79009]' />
+                      <div className='mr-1 cursor-pointer rounded-md p-1 hover:bg-black/5'>
+                        <AlertTriangle className='h-4 w-4 text-[#F79009]' />
                       </div>
                     </Tooltip>
                     <div
-                      className='p-1 rounded-md text-text-tertiary cursor-pointer hover:text-text-destructive'
+                      className='text-text-tertiary hover:text-text-destructive cursor-pointer rounded-md p-1'
                       onClick={() => {
                         const newModelConfig = produce(modelConfig, (draft) => {
                           draft.agentConfig.tools.splice(index, 1)
@@ -206,27 +206,27 @@ const AgentTools: FC = () => {
                       onMouseOver={() => setIsDeleting(index)}
                       onMouseLeave={() => setIsDeleting(-1)}
                     >
-                      <RiDeleteBinLine className='w-4 h-4' />
+                      <RiDeleteBinLine className='h-4 w-4' />
                     </div>
                   </div>
                 )}
                 {!item.isDeleted && (
-                  <div className='hidden group-hover:flex items-center gap-1 mr-2'>
+                  <div className='mr-2 hidden items-center gap-1 group-hover:flex'>
                     {!item.notAuthor && (
                       <Tooltip
                         popupContent={t('tools.setBuiltInTools.infoAndSetting')}
                         needsDelay
                       >
-                        <div className='p-1 rounded-md hover:bg-black/5  cursor-pointer' onClick={() => {
+                        <div className='cursor-pointer rounded-md p-1  hover:bg-black/5' onClick={() => {
                           setCurrentTool(item)
                           setIsShowSettingTool(true)
                         }}>
-                          <RiEqualizer2Line className='w-4 h-4 text-text-tertiary' />
+                          <RiEqualizer2Line className='text-text-tertiary h-4 w-4' />
                         </div>
                       </Tooltip>
                     )}
                     <div
-                      className='p-1 rounded-md text-text-tertiary cursor-pointer hover:text-text-destructive'
+                      className='text-text-tertiary hover:text-text-destructive cursor-pointer rounded-md p-1'
                       onClick={() => {
                         const newModelConfig = produce(modelConfig, (draft) => {
                           draft.agentConfig.tools.splice(index, 1)
@@ -237,7 +237,7 @@ const AgentTools: FC = () => {
                       onMouseOver={() => setIsDeleting(index)}
                       onMouseLeave={() => setIsDeleting(-1)}
                     >
-                      <RiDeleteBinLine className='w-4 h-4' />
+                      <RiDeleteBinLine className='h-4 w-4' />
                     </div>
                   </div>
                 )}
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
index da6063045a..845b313f67 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
@@ -119,7 +119,7 @@ const SettingBuiltInTool: FC<Props> = ({
   const infoUI = (
     <div className=''>
       {infoSchemas.length > 0 && (
-        <div className='py-2 space-y-1'>
+        <div className='space-y-1 py-2'>
           {infoSchemas.map((item: any, index) => (
             <div key={index} className='py-1'>
               <div className='flex items-center gap-2'>
@@ -132,7 +132,7 @@ const SettingBuiltInTool: FC<Props> = ({
                 )}
               </div>
               {item.human_description && (
-                <div className='mt-0.5 text-text-tertiary system-xs-regular'>
+                <div className='text-text-tertiary system-xs-regular mt-0.5'>
                   {item.human_description?.[language]}
                 </div>
               )}
@@ -163,47 +163,47 @@ const SettingBuiltInTool: FC<Props> = ({
       footer={null}
       mask={false}
       positionCenter={false}
-      panelClassname={cn('justify-start mt-[64px] mr-2 mb-2 !w-[420px] !max-w-[420px] !p-0 !bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl')}
+      panelClassname={cn('!bg-components-panel-bg border-components-panel-border mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] !p-0 shadow-xl')}
     >
       <>
         {isLoading && <Loading type='app' />}
         {!isLoading && (
           <>
             {/* header */}
-            <div className='relative p-4 pb-3 border-b border-divider-subtle'>
-              <div className='absolute top-3 right-3'>
+            <div className='border-divider-subtle relative border-b p-4 pb-3'>
+              <div className='absolute right-3 top-3'>
                 <ActionButton onClick={onHide}>
-                  <RiCloseLine className='w-4 h-4' />
+                  <RiCloseLine className='h-4 w-4' />
                 </ActionButton>
               </div>
               {showBackButton && (
                 <div
-                  className='mb-2 flex items-center gap-1 text-text-accent-secondary system-xs-semibold-uppercase cursor-pointer'
+                  className='text-text-accent-secondary system-xs-semibold-uppercase mb-2 flex cursor-pointer items-center gap-1'
                   onClick={onHide}
                 >
-                  <RiArrowLeftLine className='w-4 h-4' />
+                  <RiArrowLeftLine className='h-4 w-4' />
                   BACK
                 </div>
               )}
               <div className='flex items-center gap-1'>
-                <Icon size='tiny' className='w-6 h-6' src={collection.icon} />
+                <Icon size='tiny' className='h-6 w-6' src={collection.icon} />
                 <OrgInfo
                   packageNameClassName='w-auto'
                   orgName={collection.author}
                   packageName={collection.name.split('/').pop() || ''}
                 />
               </div>
-              <div className='mt-1 text-text-primary system-md-semibold'>{currTool?.label[language]}</div>
+              <div className='text-text-primary system-md-semibold mt-1'>{currTool?.label[language]}</div>
               {!!currTool?.description[language] && (
                 <Description className='mt-3' text={currTool.description[language]} descriptionLineRows={2}></Description>
               )}
             </div>
             {/* form */}
             <div className='h-full'>
-              <div className='flex flex-col h-full'>
+              <div className='flex h-full flex-col'>
                 {(hasSetting && !readonly) ? (
                   <TabSlider
-                    className='shrink-0 mt-1 px-4'
+                    className='mt-1 shrink-0 px-4'
                     itemClassName='py-3'
                     noBorderBottom
                     value={currType}
@@ -216,15 +216,15 @@ const SettingBuiltInTool: FC<Props> = ({
                     ]}
                   />
                 ) : (
-                  <div className='p-4 pb-1 text-text-primary system-sm-semibold-uppercase'>{t('tools.setBuiltInTools.parameters')}</div>
+                  <div className='text-text-primary system-sm-semibold-uppercase p-4 pb-1'>{t('tools.setBuiltInTools.parameters')}</div>
                 )}
-                <div className='grow h-0 overflow-y-auto px-4'>
+                <div className='h-0 grow overflow-y-auto px-4'>
                   {isInfoActive ? infoUI : settingUI}
                 </div>
                 {!readonly && !isInfoActive && (
-                  <div className='mt-2 shrink-0 flex justify-end py-4 px-6  space-x-2 rounded-b-[10px] bg-components-panel-bg border-t border-divider-regular'>
-                    <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium ' onClick={onHide}>{t('common.operation.cancel')}</Button>
-                    <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' disabled={!isValid} onClick={() => onSave?.(addDefaultValue(tempSetting, formSchemas))}>{t('common.operation.save')}</Button>
+                  <div className='bg-components-panel-bg border-divider-regular mt-2 flex shrink-0 justify-end  space-x-2 rounded-b-[10px] border-t px-6 py-4'>
+                    <Button className='flex h-8 items-center !px-3 !text-[13px] font-medium ' onClick={onHide}>{t('common.operation.cancel')}</Button>
+                    <Button className='flex h-8 items-center !px-3 !text-[13px] font-medium' variant='primary' disabled={!isValid} onClick={() => onSave?.(addDefaultValue(tempSetting, formSchemas))}>{t('common.operation.save')}</Button>
                   </div>
                 )}
               </div>
diff --git a/web/app/components/app/configuration/config/agent/prompt-editor.tsx b/web/app/components/app/configuration/config/agent/prompt-editor.tsx
index 1532c96fb6..d24f5cca7d 100644
--- a/web/app/components/app/configuration/config/agent/prompt-editor.tsx
+++ b/web/app/components/app/configuration/config/agent/prompt-editor.tsx
@@ -75,12 +75,12 @@ const Editor: FC<Props> = ({
   return (
     <div className={cn(className, s.gradientBorder, 'relative')}>
       <div className='rounded-xl bg-white'>
-        <div className={cn(s.boxHeader, 'flex justify-between items-center h-11 pt-2 pr-3 pb-1 pl-4 rounded-tl-xl rounded-tr-xl bg-white hover:shadow-xs')}>
+        <div className={cn(s.boxHeader, 'hover:shadow-xs flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl bg-white pb-1 pl-4 pr-3 pt-2')}>
           <div className='text-sm font-semibold uppercase text-indigo-800'>{t(`appDebug.agent.${isFirstPrompt ? 'firstPrompt' : 'nextIteration'}`)}</div>
           <div className={cn(s.optionWrap, 'items-center space-x-1')}>
             {!isCopied
               ? (
-                <Clipboard className='h-6 w-6 p-1 text-gray-500 cursor-pointer' onClick={() => {
+                <Clipboard className='h-6 w-6 cursor-pointer p-1 text-gray-500' onClick={() => {
                   copy(value)
                   setIsCopied(true)
                 }} />
@@ -90,7 +90,7 @@ const Editor: FC<Props> = ({
               )}
           </div>
         </div>
-        <div className={cn(editorHeight, ' px-4 min-h-[102px] overflow-y-auto text-sm text-gray-700')}>
+        <div className={cn(editorHeight, ' min-h-[102px] overflow-y-auto px-4 text-sm text-gray-700')}>
           <PromptEditor
             className={editorHeight}
             value={value}
@@ -138,8 +138,8 @@ const Editor: FC<Props> = ({
             onBlur={() => { }}
           />
         </div>
-        <div className='pl-4 pb-2 flex'>
-          <div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{value.length}</div>
+        <div className='flex pb-2 pl-4'>
+          <div className="h-[18px] rounded-md bg-gray-100 px-1 text-xs leading-[18px] text-gray-500">{value.length}</div>
         </div>
       </div>
     </div>
diff --git a/web/app/components/app/configuration/config/assistant-type-picker/index.tsx b/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
index 336d736e3b..42a0cb03ff 100644
--- a/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
+++ b/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
@@ -40,19 +40,19 @@ type ItemProps = {
 const SelectItem: FC<ItemProps> = ({ text, value, Icon, isChecked, description, onClick, disabled }) => {
   return (
     <div
-      className={cn(disabled ? 'opacity-50' : 'cursor-pointer', isChecked ? 'border-[2px] border-indigo-600 shadow-sm' : 'border border-gray-100', 'mb-2 p-3 pr-4 rounded-xl bg-gray-25 hover:bg-gray-50')}
+      className={cn(disabled ? 'opacity-50' : 'cursor-pointer', isChecked ? 'border-[2px] border-indigo-600 shadow-sm' : 'border border-gray-100', 'bg-gray-25 mb-2 rounded-xl p-3 pr-4 hover:bg-gray-50')}
       onClick={() => !disabled && onClick(value)}
     >
       <div className='flex items-center justify-between'>
         <div className='flex items-center '>
-          <div className='mr-3 p-1 bg-indigo-50 rounded-lg'>
-            <Icon className='w-4 h-4 text-indigo-600' />
+          <div className='mr-3 rounded-lg bg-indigo-50 p-1'>
+            <Icon className='h-4 w-4 text-indigo-600' />
           </div>
-          <div className='leading-5 text-sm font-medium text-gray-900'>{text}</div>
+          <div className='text-sm font-medium leading-5 text-gray-900'>{text}</div>
         </div>
         <Radio isChecked={isChecked} />
       </div>
-      <div className='ml-9 leading-[18px] text-xs font-normal text-gray-500'>{description}</div>
+      <div className='ml-9 text-xs font-normal leading-[18px] text-gray-500'>{description}</div>
     </div>
   )
 }
@@ -83,7 +83,7 @@ const AssistantTypePicker: FC<Props> = ({
     <>
       <div className='my-4 h-[1px] bg-gray-100'></div>
       <div
-        className={cn(isAgent ? 'group cursor-pointer hover:bg-primary-50' : 'opacity-30', 'p-3 pr-4 rounded-xl bg-gray-50 ')}
+        className={cn(isAgent ? 'hover:bg-primary-50 group cursor-pointer' : 'opacity-30', 'rounded-xl bg-gray-50 p-3 pr-4 ')}
         onClick={() => {
           if (isAgent) {
             setOpen(false)
@@ -93,14 +93,14 @@ const AssistantTypePicker: FC<Props> = ({
       >
         <div className='flex items-center justify-between'>
           <div className='flex items-center '>
-            <div className='mr-3 p-1 bg-gray-200 group-hover:bg-white rounded-lg'>
-              <Settings04 className='w-4 h-4 text-gray-600 group-hover:text-[#155EEF]' />
+            <div className='mr-3 rounded-lg bg-gray-200 p-1 group-hover:bg-white'>
+              <Settings04 className='h-4 w-4 text-gray-600 group-hover:text-[#155EEF]' />
             </div>
-            <div className='leading-5 text-sm font-medium text-gray-900 group-hover:text-[#155EEF]'>{t('appDebug.agent.setting.name')}</div>
+            <div className='text-sm font-medium leading-5 text-gray-900 group-hover:text-[#155EEF]'>{t('appDebug.agent.setting.name')}</div>
           </div>
-          <ArrowUpRight className='w-4 h-4 text-gray-500 group-hover:text-[#155EEF]' />
+          <ArrowUpRight className='h-4 w-4 text-gray-500 group-hover:text-[#155EEF]' />
         </div>
-        <div className='ml-9 leading-[18px] text-xs font-normal text-gray-500'>{t('appDebug.agent.setting.description')}</div>
+        <div className='ml-9 text-xs font-normal leading-[18px] text-gray-500'>{t('appDebug.agent.setting.description')}</div>
       </div>
     </>
   )
@@ -116,15 +116,15 @@ const AssistantTypePicker: FC<Props> = ({
         }}
       >
         <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
-          <div className={cn(open && 'bg-gray-50', 'flex items-center h-8 px-3 border border-black/5 rounded-lg cursor-pointer select-none space-x-1 text-indigo-600')}>
-            {isAgent ? <BubbleText className='w-3 h-3' /> : <CuteRobot className='w-3 h-3' />}
+          <div className={cn(open && 'bg-gray-50', 'flex h-8 cursor-pointer select-none items-center space-x-1 rounded-lg border border-black/5 px-3 text-indigo-600')}>
+            {isAgent ? <BubbleText className='h-3 w-3' /> : <CuteRobot className='h-3 w-3' />}
             <div className='text-xs font-medium'>{t(`appDebug.assistantType.${isAgent ? 'agentAssistant' : 'chatAssistant'}.name`)}</div>
-            <RiArrowDownSLine className='w-3 h-3' />
+            <RiArrowDownSLine className='h-3 w-3' />
           </div>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent style={{ zIndex: 1000 }}>
-          <div className='relative left-0.5 p-6 bg-white border border-black/8 shadow-lg rounded-xl w-[480px]'>
-            <div className='mb-2 leading-5 text-sm font-semibold text-gray-900'>{t('appDebug.assistantType.name')}</div>
+          <div className='border-black/8 relative left-0.5 w-[480px] rounded-xl border bg-white p-6 shadow-lg'>
+            <div className='mb-2 text-sm font-semibold leading-5 text-gray-900'>{t('appDebug.assistantType.name')}</div>
             <SelectItem
               Icon={BubbleText}
               value='chat'
diff --git a/web/app/components/app/configuration/config/automatic/automatic-btn.tsx b/web/app/components/app/configuration/config/automatic/automatic-btn.tsx
index f70976082d..8cb7fe34f7 100644
--- a/web/app/components/app/configuration/config/automatic/automatic-btn.tsx
+++ b/web/app/components/app/configuration/config/automatic/automatic-btn.tsx
@@ -13,10 +13,10 @@ const AutomaticBtn: FC<IAutomaticBtnProps> = ({
   const { t } = useTranslation()
 
   return (
-    <div className='flex space-x-1 items-center !h-8 cursor-pointer'
+    <div className='flex !h-8 cursor-pointer items-center space-x-1'
       onClick={onClick}
     >
-      <Generator className='w-3.5 h-3.5 text-indigo-600' />
+      <Generator className='h-3.5 w-3.5 text-indigo-600' />
       <span className='text-xs font-semibold text-indigo-600'>{t('appDebug.operation.automatic')}</span>
     </div>
   )
diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index 549421401c..57c6d56e8e 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -54,10 +54,10 @@ const TryLabel: FC<{
 }> = ({ Icon, text, onClick }) => {
   return (
     <div
-      className='mt-2 mr-1 shrink-0 flex h-7 items-center px-2 bg-gray-100 rounded-lg cursor-pointer'
+      className='mr-1 mt-2 flex h-7 shrink-0 cursor-pointer items-center rounded-lg bg-gray-100 px-2'
       onClick={onClick}
     >
-      <Icon className='w-4 h-4 text-gray-500'></Icon>
+      <Icon className='h-4 w-4 text-gray-500'></Icon>
       <div className='ml-1 text-xs font-medium text-gray-700'>{text}</div>
     </div>
   )
@@ -138,16 +138,16 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
   const [res, setRes] = React.useState<AutomaticRes | null>(null)
 
   const renderLoading = (
-    <div className='w-0 grow flex flex-col items-center justify-center h-full space-y-3'>
+    <div className='flex h-full w-0 grow flex-col items-center justify-center space-y-3'>
       <Loading />
       <div className='text-[13px] text-gray-400'>{t('appDebug.generate.loading')}</div>
     </div>
   )
 
   const renderNoData = (
-    <div className='w-0 grow flex flex-col items-center px-8 justify-center h-full space-y-3'>
-      <Generator className='w-14 h-14 text-gray-300' />
-      <div className='leading-5 text-center text-[13px] font-normal text-gray-400'>
+    <div className='flex h-full w-0 grow flex-col items-center justify-center space-y-3 px-8'>
+      <Generator className='h-14 w-14 text-gray-300' />
+      <div className='text-center text-[13px] font-normal leading-5 text-gray-400'>
         <div>{t('appDebug.generate.noDataLine1')}</div>
         <div>{t('appDebug.generate.noDataLine2')}</div>
       </div>
@@ -189,18 +189,18 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
     <Modal
       isShow={isShow}
       onClose={onClose}
-      className='!p-0 min-w-[1140px]'
+      className='min-w-[1140px] !p-0'
       closable
     >
       <div className='flex h-[680px] flex-wrap'>
-        <div className='w-[570px] shrink-0 p-6 h-full overflow-y-auto border-r border-gray-100'>
+        <div className='h-full w-[570px] shrink-0 overflow-y-auto border-r border-gray-100 p-6'>
           <div className='mb-8'>
-            <div className={`leading-[28px] text-lg font-bold ${s.textGradient}`}>{t('appDebug.generate.title')}</div>
+            <div className={`text-lg font-bold leading-[28px] ${s.textGradient}`}>{t('appDebug.generate.title')}</div>
             <div className='mt-1 text-[13px] font-normal text-gray-500'>{t('appDebug.generate.description')}</div>
           </div>
-          <div className='flex items-center mb-8'>
+          <div className='mb-8 flex items-center'>
             <ModelIcon
-              className='shrink-0 mr-1.5 '
+              className='mr-1.5 shrink-0 '
               provider={currentProvider}
               modelName={currentModel?.model}
             />
@@ -213,8 +213,8 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
           </div>
           <div >
             <div className='flex items-center'>
-              <div className='mr-3 shrink-0 leading-[18px] text-xs font-semibold text-gray-500 uppercase'>{t('appDebug.generate.tryIt')}</div>
-              <div className='grow h-px' style={{
+              <div className='mr-3 shrink-0 text-xs font-semibold uppercase leading-[18px] text-gray-500'>{t('appDebug.generate.tryIt')}</div>
+              <div className='h-px grow' style={{
                 background: 'linear-gradient(to right, rgba(243, 244, 246, 1), rgba(243, 244, 246, 0))',
               }}></div>
             </div>
@@ -232,7 +232,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
           {/* inputs */}
           <div className='mt-6'>
             <div className='text-[0px]'>
-              <div className='mb-2 leading-5 text-sm font-medium text-gray-900'>{t('appDebug.generate.instruction')}</div>
+              <div className='mb-2 text-sm font-medium leading-5 text-gray-900'>{t('appDebug.generate.instruction')}</div>
               <Textarea
                 className="h-[200px] resize-none"
                 placeholder={t('appDebug.generate.instructionPlaceHolder') as string}
@@ -247,7 +247,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
                 onClick={onGenerate}
                 disabled={isLoading}
               >
-                <Generator className='w-4 h-4 text-white' />
+                <Generator className='h-4 w-4 text-white' />
                 <span className='text-xs font-semibold text-white'>{t('appDebug.generate.generate')}</span>
               </Button>
             </div>
@@ -255,8 +255,8 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
         </div>
 
         {(!isLoading && res) && (
-          <div className='w-0 grow p-6 pb-0 h-full'>
-            <div className='shrink-0 mb-3 leading-[160%] text-base font-semibold text-gray-800'>{t('appDebug.generate.resTitle')}</div>
+          <div className='h-full w-0 grow p-6 pb-0'>
+            <div className='mb-3 shrink-0 text-base font-semibold leading-[160%] text-gray-800'>{t('appDebug.generate.resTitle')}</div>
             <div className={cn('max-h-[555px] overflow-y-auto', !isInLLMNode && 'pb-2')}>
               <ConfigPrompt
                 mode={mode}
@@ -283,17 +283,17 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
                     <div className='mt-7'>
                       <GroupName name={t('appDebug.feature.groupChat.title')} />
                       <div
-                        className='mb-1 p-3 border-t-[0.5px] border-l-[0.5px] border-effects-highlight rounded-xl bg-background-section-burn'
+                        className='border-effects-highlight bg-background-section-burn mb-1 rounded-xl border-l-[0.5px] border-t-[0.5px] p-3'
                       >
                         <div className='mb-2 flex items-center gap-2'>
-                          <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
-                            <LoveMessage className='w-4 h-4 text-text-primary-on-surface' />
+                          <div className='border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500 shrink-0 rounded-lg border-[0.5px] p-1'>
+                            <LoveMessage className='text-text-primary-on-surface h-4 w-4' />
                           </div>
-                          <div className='grow flex items-center text-text-secondary system-sm-semibold'>
+                          <div className='text-text-secondary system-sm-semibold flex grow items-center'>
                             {t('appDebug.feature.conversationOpener.title')}
                           </div>
                         </div>
-                        <div className='min-h-8 text-text-tertiary system-xs-regular'>{res.opening_statement}</div>
+                        <div className='text-text-tertiary system-xs-regular min-h-8'>{res.opening_statement}</div>
                       </div>
                     </div>
                   )}
@@ -301,7 +301,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
               )}
             </div>
 
-            <div className='flex justify-end py-4 bg-white'>
+            <div className='flex justify-end bg-white py-4'>
               <Button onClick={onClose}>{t('common.operation.cancel')}</Button>
               <Button variant='primary' className='ml-2' onClick={() => {
                 setShowConfirmOverwrite(true)
diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index 85c522ca0f..ddae2f5b26 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -100,15 +100,15 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
   const [showConfirmOverwrite, setShowConfirmOverwrite] = React.useState(false)
 
   const renderLoading = (
-    <div className='w-0 grow flex flex-col items-center justify-center h-full space-y-3'>
+    <div className='flex h-full w-0 grow flex-col items-center justify-center space-y-3'>
       <Loading />
       <div className='text-[13px] text-gray-400'>{t('appDebug.codegen.loading')}</div>
     </div>
   )
   const renderNoData = (
-    <div className='w-0 grow flex flex-col items-center px-8 justify-center h-full space-y-3'>
-      <Generator className='w-14 h-14 text-gray-300' />
-      <div className='leading-5 text-center text-[13px] font-normal text-gray-400'>
+    <div className='flex h-full w-0 grow flex-col items-center justify-center space-y-3 px-8'>
+      <Generator className='h-14 w-14 text-gray-300' />
+      <div className='text-center text-[13px] font-normal leading-5 text-gray-400'>
         <div>{t('appDebug.codegen.noDataLine1')}</div>
         <div>{t('appDebug.codegen.noDataLine2')}</div>
       </div>
@@ -119,18 +119,18 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
     <Modal
       isShow={isShow}
       onClose={onClose}
-      className='!p-0 min-w-[1140px]'
+      className='min-w-[1140px] !p-0'
       closable
     >
       <div className='relative flex h-[680px] flex-wrap'>
-        <div className='w-[570px] shrink-0 p-8 h-full overflow-y-auto border-r border-gray-100'>
+        <div className='h-full w-[570px] shrink-0 overflow-y-auto border-r border-gray-100 p-8'>
           <div className='mb-8'>
-            <div className={'leading-[28px] text-lg font-bold'}>{t('appDebug.codegen.title')}</div>
+            <div className={'text-lg font-bold leading-[28px]'}>{t('appDebug.codegen.title')}</div>
             <div className='mt-1 text-[13px] font-normal text-gray-500'>{t('appDebug.codegen.description')}</div>
           </div>
           <div className='flex items-center'>
             <ModelIcon
-              className='shrink-0 mr-1.5'
+              className='mr-1.5 shrink-0'
               provider={currentProvider}
               modelName={currentModel?.model}
             />
@@ -143,9 +143,9 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
           </div>
           <div className='mt-6'>
             <div className='text-[0px]'>
-              <div className='mb-2 leading-5 text-sm font-medium text-gray-900'>{t('appDebug.codegen.instruction')}</div>
+              <div className='mb-2 text-sm font-medium leading-5 text-gray-900'>{t('appDebug.codegen.instruction')}</div>
               <textarea
-                className="w-full h-[200px] overflow-y-auto px-3 py-2 text-sm bg-gray-50 rounded-lg"
+                className="h-[200px] w-full overflow-y-auto rounded-lg bg-gray-50 px-3 py-2 text-sm"
                 placeholder={t('appDebug.codegen.instructionPlaceholder') || ''}
                 value={instruction}
                 onChange={e => setInstruction(e.target.value)}
@@ -159,7 +159,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
                 onClick={onGenerate}
                 disabled={isLoading}
               >
-                <Generator className='w-4 h-4 text-white' />
+                <Generator className='h-4 w-4 text-white' />
                 <span className='text-xs font-semibold text-white'>{t('appDebug.codegen.generate')}</span>
               </Button>
             </div>
@@ -168,8 +168,8 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
         {isLoading && renderLoading}
         {!isLoading && !res && renderNoData}
         {(!isLoading && res) && (
-          <div className='w-0 grow p-6 pb-0 h-full'>
-            <div className='shrink-0 mb-3 leading-[160%] text-base font-semibold text-gray-800'>{t('appDebug.codegen.resTitle')}</div>
+          <div className='h-full w-0 grow p-6 pb-0'>
+            <div className='mb-3 shrink-0 text-base font-semibold leading-[160%] text-gray-800'>{t('appDebug.codegen.resTitle')}</div>
             <div className={cn('max-h-[555px] overflow-y-auto', !isInLLMNode && 'pb-2')}>
               <ConfigPrompt
                 mode={mode}
@@ -186,7 +186,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
                   {res?.code && (
                     <div className='mt-4'>
                       <h3 className='mb-2 text-sm font-medium text-gray-900'>{t('appDebug.codegen.generatedCode')}</h3>
-                      <pre className='p-4 bg-gray-50 rounded-lg overflow-x-auto'>
+                      <pre className='overflow-x-auto rounded-lg bg-gray-50 p-4'>
                         <code className={`language-${res.language}`}>
                           {res.code}
                         </code>
@@ -194,7 +194,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
                     </div>
                   )}
                   {res?.error && (
-                    <div className='mt-4 p-4 bg-red-50 rounded-lg'>
+                    <div className='mt-4 rounded-lg bg-red-50 p-4'>
                       <p className='text-sm text-red-600'>{res.error}</p>
                     </div>
                   )}
@@ -202,7 +202,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
               )}
             </div>
 
-            <div className='flex justify-end py-4 bg-white'>
+            <div className='flex justify-end bg-white py-4'>
               <Button onClick={onClose}>{t('common.operation.cancel')}</Button>
               <Button variant='primary' className='ml-2' onClick={() => {
                 setShowConfirmOverwrite(true)
diff --git a/web/app/components/app/configuration/config/config-document.tsx b/web/app/components/app/configuration/config/config-document.tsx
index 1ac6da0dd8..e23ee7966d 100644
--- a/web/app/components/app/configuration/config/config-document.tsx
+++ b/web/app/components/app/configuration/config/config-document.tsx
@@ -48,14 +48,14 @@ const ConfigDocument: FC = () => {
     return null
 
   return (
-    <div className='mt-2 flex items-center gap-2 p-2 rounded-xl border-t-[0.5px] border-l-[0.5px] bg-background-section-burn'>
+    <div className='bg-background-section-burn mt-2 flex items-center gap-2 rounded-xl border-l-[0.5px] border-t-[0.5px] p-2'>
       <div className='shrink-0 p-1'>
-        <div className='p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600'>
-          <Document className='w-4 h-4 text-text-primary-on-surface' />
+        <div className='border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600 rounded-lg border-[0.5px] p-1'>
+          <Document className='text-text-primary-on-surface h-4 w-4' />
         </div>
       </div>
-      <div className='grow flex items-center'>
-        <div className='mr-1 text-text-secondary system-sm-semibold'>{t('appDebug.feature.documentUpload.title')}</div>
+      <div className='flex grow items-center'>
+        <div className='text-text-secondary system-sm-semibold mr-1'>{t('appDebug.feature.documentUpload.title')}</div>
         <Tooltip
           popupContent={
             <div className='w-[180px]' >
@@ -64,8 +64,8 @@ const ConfigDocument: FC = () => {
           }
         />
       </div>
-      <div className='shrink-0 flex items-center'>
-        <div className='ml-1 mr-3 w-[1px] h-3.5 bg-divider-subtle'></div>
+      <div className='flex shrink-0 items-center'>
+        <div className='bg-divider-subtle ml-1 mr-3 h-3.5 w-[1px]'></div>
         <Switch
           defaultValue={isDocumentEnabled}
           onChange={handleChange}
diff --git a/web/app/components/app/configuration/config/index.tsx b/web/app/components/app/configuration/config/index.tsx
index dd4a076dde..dc2095502e 100644
--- a/web/app/components/app/configuration/config/index.tsx
+++ b/web/app/components/app/configuration/config/index.tsx
@@ -57,7 +57,7 @@ const Config: FC = () => {
   return (
     <>
       <div
-        className="grow h-0 relative px-6 pb-[50px] overflow-y-auto"
+        className="relative h-0 grow overflow-y-auto px-6 pb-[50px]"
       >
         {/* Template */}
         <ConfigPrompt
diff --git a/web/app/components/app/configuration/ctrl-btn-group/index.tsx b/web/app/components/app/configuration/ctrl-btn-group/index.tsx
index 9ed1bf38f1..e126e12164 100644
--- a/web/app/components/app/configuration/ctrl-btn-group/index.tsx
+++ b/web/app/components/app/configuration/ctrl-btn-group/index.tsx
@@ -13,8 +13,8 @@ export type IContrlBtnGroupProps = {
 const ContrlBtnGroup: FC<IContrlBtnGroupProps> = ({ onSave, onReset }) => {
   const { t } = useTranslation()
   return (
-    <div className="fixed left-[224px] bottom-0 w-[519px] h-[64px]">
-      <div className={`${s.ctrlBtn} flex items-center h-full pl-4  gap-2 bg-white`}>
+    <div className="fixed bottom-0 left-[224px] h-[64px] w-[519px]">
+      <div className={`${s.ctrlBtn} flex h-full items-center gap-2  bg-white pl-4`}>
         <Button variant='primary' onClick={onSave}>{t('appDebug.operation.applyConfig')}</Button>
         <Button onClick={onReset}>{t('appDebug.operation.resetConfig')}</Button>
       </div>
diff --git a/web/app/components/app/configuration/dataset-config/card-item/index.tsx b/web/app/components/app/configuration/dataset-config/card-item/index.tsx
index a528b2288c..1220c75ed6 100644
--- a/web/app/components/app/configuration/dataset-config/card-item/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/card-item/index.tsx
@@ -28,24 +28,24 @@ const CardItem: FC<ICardItemProps> = ({
     <div
       className={
         cn(className, s.card,
-          'relative flex items-center rounded-xl  px-3 py-2.5 bg-white border border-gray-200  cursor-pointer')
+          'relative flex cursor-pointer items-center  rounded-xl border border-gray-200 bg-white px-3  py-2.5')
       }>
       <div className='flex items-center space-x-2'>
         <div className={cn(!config.embedding_available && 'opacity-50')}>
           <TypeIcon type="upload_file" />
         </div>
         <div>
-          <div className='flex items-center w-[160px] mr-1'>
-            <div className={cn('text-[13px] leading-[18px] font-medium text-gray-800 overflow-hidden text-ellipsis whitespace-nowrap', !config.embedding_available && 'opacity-50')}>{config.name}</div>
+          <div className='mr-1 flex w-[160px] items-center'>
+            <div className={cn('overflow-hidden text-ellipsis whitespace-nowrap text-[13px] font-medium leading-[18px] text-gray-800', !config.embedding_available && 'opacity-50')}>{config.name}</div>
             {!config.embedding_available && (
               <Tooltip
                 popupContent={t('dataset.unavailableTip')}
               >
-                <span className='shrink-0 inline-flex whitespace-nowrap px-1 border border-gray-200 rounded-md text-gray-500 text-xs font-normal leading-[18px]'>{t('dataset.unavailable')}</span>
+                <span className='inline-flex shrink-0 whitespace-nowrap rounded-md border border-gray-200 px-1 text-xs font-normal leading-[18px] text-gray-500'>{t('dataset.unavailable')}</span>
               </Tooltip>
             )}
           </div>
-          <div className={cn('max-w-[150px] flex text-xs text-gray-500', !config.embedding_available && 'opacity-50')}>
+          <div className={cn('flex max-w-[150px] text-xs text-gray-500', !config.embedding_available && 'opacity-50')}>
             {formatNumber(config.word_count)} {t('appDebug.feature.dataSet.words')} · {formatNumber(config.document_count)} {t('appDebug.feature.dataSet.textBlocks')}
           </div>
         </div>
diff --git a/web/app/components/app/configuration/dataset-config/card-item/item.tsx b/web/app/components/app/configuration/dataset-config/card-item/item.tsx
index 637fd8483c..1cf8a3e691 100644
--- a/web/app/components/app/configuration/dataset-config/card-item/item.tsx
+++ b/web/app/components/app/configuration/dataset-config/card-item/item.tsx
@@ -47,31 +47,31 @@ const Item: FC<ItemProps> = ({
   const [isDeleting, setIsDeleting] = useState(false)
 
   return (
-    <div className={cn('group relative flex items-center mb-1 last-of-type:mb-0  pl-2.5 py-2 pr-3 w-full rounded-lg bg-components-panel-on-panel-item-bg border-components-panel-border-subtle border-[0.5px] shadow-xs hover:shadow-sm hover:bg-components-panel-on-panel-item-bg-hover', isDeleting && 'hover:bg-state-destructive-hover border-state-destructive-border')}>
+    <div className={cn('bg-components-panel-on-panel-item-bg border-components-panel-border-subtle shadow-xs hover:bg-components-panel-on-panel-item-bg-hover group relative  mb-1 flex w-full items-center rounded-lg border-[0.5px] py-2 pl-2.5 pr-3 last-of-type:mb-0 hover:shadow-sm', isDeleting && 'hover:bg-state-destructive-hover border-state-destructive-border')}>
       {
         config.data_source_type === DataSourceType.FILE && (
-          <div className='shrink-0 flex items-center justify-center mr-2 w-6 h-6 bg-[#F5F8FF] rounded-md border-[0.5px] border-[#E0EAFF]'>
-            <Folder className='w-4 h-4 text-[#444CE7]' />
+          <div className='mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#E0EAFF] bg-[#F5F8FF]'>
+            <Folder className='h-4 w-4 text-[#444CE7]' />
           </div>
         )
       }
       {
         config.data_source_type === DataSourceType.NOTION && (
-          <div className='shrink-0 flex items-center justify-center mr-2 w-6 h-6 rounded-md border-[0.5px] border-[#EAECF5]'>
-            <FileIcon type='notion' className='w-4 h-4' />
+          <div className='mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#EAECF5]'>
+            <FileIcon type='notion' className='h-4 w-4' />
           </div>
         )
       }
       {
         config.data_source_type === DataSourceType.WEB && (
-          <div className='shrink-0 flex items-center justify-center mr-2 w-6 h-6 bg-[#F5FAFF] border-[0.5px] border-blue-100 rounded-md'>
-            <Globe06 className='w-4 h-4 text-blue-600' />
+          <div className='mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-blue-100 bg-[#F5FAFF]'>
+            <Globe06 className='h-4 w-4 text-blue-600' />
           </div>
         )
       }
       <div className='grow'>
-        <div className='flex items-center h-[18px]'>
-          <div className='grow text-[13px] font-medium text-text-secondary truncate' title={config.name}>{config.name}</div>
+        <div className='flex h-[18px] items-center'>
+          <div className='text-text-secondary grow truncate text-[13px] font-medium' title={config.name}>{config.name}</div>
           {config.provider === 'external'
             ? <Badge text={t('dataset.externalTag') as string} />
             : <Badge
@@ -79,22 +79,22 @@ const Item: FC<ItemProps> = ({
             />}
         </div>
       </div >
-      <div className='hidden rounded-lg group-hover:flex items-center justify-end absolute right-0 top-0 bottom-0 pr-2 w-[124px] bg-gradient-to-r from-white/50 to-white to-50%'>
+      <div className='absolute bottom-0 right-0 top-0 hidden w-[124px] items-center justify-end rounded-lg bg-gradient-to-r from-white/50 to-white to-50% pr-2 group-hover:flex'>
         {
           editable && <div
-            className='flex items-center justify-center mr-1 w-6 h-6 hover:bg-black/5 rounded-md cursor-pointer'
+            className='mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-black/5'
             onClick={() => setShowSettingsModal(true)}
           >
-            <RiEditLine className='w-4 h-4 text-text-tertiary' />
+            <RiEditLine className='text-text-tertiary h-4 w-4' />
           </div>
         }
         <div
-          className='flex items-center justify-center w-6 h-6  text-text-tertiary cursor-pointer hover:text-text-destructive'
+          className='text-text-tertiary hover:text-text-destructive flex h-6 w-6  cursor-pointer items-center justify-center'
           onClick={() => onRemove(config.id)}
           onMouseOver={() => setIsDeleting(true)}
           onMouseLeave={() => setIsDeleting(false)}
         >
-          <RiDeleteBinLine className='w-4 h-4' />
+          <RiDeleteBinLine className='h-4 w-4' />
         </div>
       </div>
       <Drawer isOpen={showSettingsModal} onClose={() => setShowSettingsModal(false)} footer={null} mask={isMobile} panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl'>
diff --git a/web/app/components/app/configuration/dataset-config/context-var/index.tsx b/web/app/components/app/configuration/dataset-config/context-var/index.tsx
index 530dd22175..ff1dbcb0d2 100644
--- a/web/app/components/app/configuration/dataset-config/context-var/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/context-var/index.tsx
@@ -14,12 +14,12 @@ const ContextVar: FC<Props> = (props) => {
   const currItem = options.find(item => item.value === value)
   const notSetVar = !currItem
   return (
-    <div className={cn(notSetVar ? 'rounded-bl-xl rounded-br-xl bg-[#FEF0C7] border-[#FEF0C7]' : 'border-components-panel-border-subtle', 'flex justify-between items-center h-12 px-3 border-t ')}>
-      <div className='flex items-center space-x-1 shrink-0'>
+    <div className={cn(notSetVar ? 'rounded-bl-xl rounded-br-xl border-[#FEF0C7] bg-[#FEF0C7]' : 'border-components-panel-border-subtle', 'flex h-12 items-center justify-between border-t px-3 ')}>
+      <div className='flex shrink-0 items-center space-x-1'>
         <div className='p-1'>
-          <BracketsX className='w-4 h-4 text-text-accent' />
+          <BracketsX className='text-text-accent h-4 w-4' />
         </div>
-        <div className='mr-1 text-sm font-medium text-text-secondary'>{t('appDebug.feature.dataSet.queryVariable.title')}</div>
+        <div className='text-text-secondary mr-1 text-sm font-medium'>{t('appDebug.feature.dataSet.queryVariable.title')}</div>
         <Tooltip
           popupContent={
             <div className='w-[180px]'>
diff --git a/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx b/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx
index 4e7ca93e99..fc80e5b1e7 100644
--- a/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx
+++ b/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx
@@ -23,7 +23,7 @@ export type Props = {
 }
 
 const VarItem: FC<{ item: Option }> = ({ item }) => (
-  <div className='flex items-center h-[18px] px-1 bg-[#EFF8FF] rounded space-x-1'>
+  <div className='flex h-[18px] items-center space-x-1 rounded bg-[#EFF8FF] px-1'>
     <IconTypeIcon type={item.type as IInputTypeIconProps['type']} className='text-[#1570EF]' />
     <div className='flex text-xs font-medium text-[#1570EF]'>
       <span className='opacity-60'>{'{{'}</span>
@@ -56,10 +56,10 @@ const VarPicker: FC<Props> = ({
       <PortalToFollowElemTrigger className={cn(triggerClassName)} onClick={() => setOpen(v => !v)}>
         <div className={cn(
           className,
-          notSetVar ? 'bg-[#FFFCF5] border-[#FEDF89] text-[#DC6803]' : ' hover:bg-components-button-secondary-bg border-components-button-secondary-border text-text-accent',
+          notSetVar ? 'border-[#FEDF89] bg-[#FFFCF5] text-[#DC6803]' : ' hover:bg-components-button-secondary-bg border-components-button-secondary-border text-text-accent',
           open ? 'bg-components-button-secondary-bg' : 'bg-transparent',
           `
-          flex items-center h-8 justify-center px-2 space-x-1 rounded-lg border  shadow-xs cursor-pointer
+          shadow-xs flex h-8 cursor-pointer items-center justify-center space-x-1 rounded-lg  border px-2
           text-[13px]  font-medium
           `)}>
           <div>
@@ -71,16 +71,16 @@ const VarPicker: FC<Props> = ({
                 {notSelectedVarTip || t('appDebug.feature.dataSet.queryVariable.choosePlaceholder')}
               </div>)}
           </div>
-          <ChevronDownIcon className={cn(open && 'rotate-180 text-text-tertiary', 'w-3.5 h-3.5')} />
+          <ChevronDownIcon className={cn(open && 'text-text-tertiary rotate-180', 'h-3.5 w-3.5')} />
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 1000 }}>
         {options.length > 0
-          ? (<div className='w-[240px] max-h-[50vh] overflow-y-auto p-1  border bg-components-panel-bg border-components-panel-border rounded-lg shadow-lg'>
+          ? (<div className='bg-components-panel-bg border-components-panel-border max-h-[50vh] w-[240px]  overflow-y-auto rounded-lg border p-1 shadow-lg'>
             {options.map(({ name, value, type }, index) => (
               <div
                 key={index}
-                className='px-3 py-1 flex rounded-lg hover:bg-state-base-hover cursor-pointer'
+                className='hover:bg-state-base-hover flex cursor-pointer rounded-lg px-3 py-1'
                 onClick={() => {
                   onChange(value)
                   setOpen(false)
@@ -91,9 +91,9 @@ const VarPicker: FC<Props> = ({
             ))}
           </div>)
           : (
-            <div className='w-[240px] p-6 bg-components-panel-bg border border-components-panel-border rounded-lg shadow-lg'>
-              <div className='mb-1 text-sm font-medium text-text-secondary'>{t('appDebug.feature.dataSet.queryVariable.noVar')}</div>
-              <div className='text-xs leading-normal text-text-tertiary'>{t('appDebug.feature.dataSet.queryVariable.noVarTip')}</div>
+            <div className='bg-components-panel-bg border-components-panel-border w-[240px] rounded-lg border p-6 shadow-lg'>
+              <div className='text-text-secondary mb-1 text-sm font-medium'>{t('appDebug.feature.dataSet.queryVariable.noVar')}</div>
+              <div className='text-text-tertiary text-xs leading-normal'>{t('appDebug.feature.dataSet.queryVariable.noVarTip')}</div>
             </div>
           )}
 
diff --git a/web/app/components/app/configuration/dataset-config/index.tsx b/web/app/components/app/configuration/dataset-config/index.tsx
index 5868118e94..a92477f0d5 100644
--- a/web/app/components/app/configuration/dataset-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/index.tsx
@@ -130,7 +130,7 @@ const DatasetConfig: FC = () => {
     >
       {hasData
         ? (
-          <div className='flex flex-wrap mt-1 px-3 pb-3 justify-between'>
+          <div className='mt-1 flex flex-wrap justify-between px-3 pb-3'>
             {formattedDataset.map(item => (
               <CardItem
                 key={item.id}
@@ -144,7 +144,7 @@ const DatasetConfig: FC = () => {
         )
         : (
           <div className='mt-1 px-3 pb-3'>
-            <div className='pt-2 pb-1 text-xs text-text-tertiary'>{t('appDebug.feature.dataSet.noData')}</div>
+            <div className='text-text-tertiary pb-1 pt-2 text-xs'>{t('appDebug.feature.dataSet.noData')}</div>
           </div>
         )}
 
diff --git a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
index d65bbe7209..cb6bfb8d21 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
@@ -185,30 +185,30 @@ const ConfigContent: FC<Props> = ({
       </div>
       {type === RETRIEVE_TYPE.multiWay && (
         <>
-          <div className='flex items-center my-2 py-1 h-6'>
-            <div className='shrink-0 mr-2 system-xs-semibold-uppercase text-text-secondary'>
+          <div className='my-2 flex h-6 items-center py-1'>
+            <div className='system-xs-semibold-uppercase text-text-secondary mr-2 shrink-0'>
               {t('dataset.rerankSettings')}
             </div>
-            <Divider bgStyle='gradient' className='!h-px mx-0' />
+            <Divider bgStyle='gradient' className='mx-0 !h-px' />
           </div>
           {
             selectedDatasetsMode.inconsistentEmbeddingModel
             && (
-              <div className='mt-4 system-xs-medium text-text-warning'>
+              <div className='system-xs-medium text-text-warning mt-4'>
                 {t('dataset.inconsistentEmbeddingModelTip')}
               </div>
             )
           }
           {
             selectedDatasetsMode.mixtureInternalAndExternal && (
-              <div className='mt-4 system-xs-medium text-text-warning'>
+              <div className='system-xs-medium text-text-warning mt-4'>
                 {t('dataset.mixtureInternalAndExternalTip')}
               </div>
             )
           }
           {
             selectedDatasetsMode.allExternal && (
-              <div className='mt-4 system-xs-medium text-text-warning'>
+              <div className='system-xs-medium text-text-warning mt-4'>
                 {t('dataset.allExternalTip')}
               </div>
             )
@@ -216,7 +216,7 @@ const ConfigContent: FC<Props> = ({
           {
             selectedDatasetsMode.mixtureHighQualityAndEconomic
             && (
-              <div className='mt-4 system-xs-medium text-text-warning'>
+              <div className='system-xs-medium text-text-warning mt-4'>
                 {t('dataset.mixtureHighQualityAndEconomicTip')}
               </div>
             )
@@ -229,8 +229,8 @@ const ConfigContent: FC<Props> = ({
                     <div
                       key={option.value}
                       className={cn(
-                        'flex items-center justify-center w-[calc((100%-8px)/2)] h-8 rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg cursor-pointer system-sm-medium text-text-secondary',
-                        selectedRerankMode === option.value && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary',
+                        'border-components-option-card-option-border bg-components-option-card-option-bg system-sm-medium text-text-secondary flex h-8 w-[calc((100%-8px)/2)] cursor-pointer items-center justify-center rounded-lg border',
+                        selectedRerankMode === option.value && 'border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary border-[1.5px]',
                       )}
                       onClick={() => handleRerankModeChange(option.value)}
                     >
@@ -264,7 +264,7 @@ const ConfigContent: FC<Props> = ({
                       />
                     )
                   }
-                  <div className='leading-[32px] ml-1 text-text-secondary system-sm-semibold'>{t('common.modelProvider.rerankModel.key')}</div>
+                  <div className='text-text-secondary system-sm-semibold ml-1 leading-[32px]'>{t('common.modelProvider.rerankModel.key')}</div>
                   <Tooltip
                     popupContent={
                       <div className="w-[200px]">
@@ -353,7 +353,7 @@ const ConfigContent: FC<Props> = ({
       {isInWorkflow && type === RETRIEVE_TYPE.oneWay && (
         <div className='mt-4'>
           <div className='flex items-center space-x-0.5'>
-            <div className='leading-[32px] text-[13px] font-medium text-text-primary'>{t('common.modelProvider.systemReasoningModel.key')}</div>
+            <div className='text-text-primary text-[13px] font-medium leading-[32px]'>{t('common.modelProvider.systemReasoningModel.key')}</div>
             <Tooltip
               popupContent={t('common.modelProvider.systemReasoningModel.tip')}
             />
diff --git a/web/app/components/app/configuration/dataset-config/params-config/index.tsx b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
index a236eaaf24..df2b4293c4 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
@@ -121,7 +121,7 @@ const ParamsConfig = ({
         }}
         disabled={disabled}
       >
-        <RiEqualizer2Line className='mr-1 w-3.5 h-3.5' />
+        <RiEqualizer2Line className='mr-1 h-3.5 w-3.5' />
         {t('dataset.retrievalSettings')}
       </Button>
       {
diff --git a/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx b/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx
index 87767c2a10..3f0079d75b 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx
@@ -29,9 +29,9 @@ const WeightedScore = ({
 
   return (
     <div>
-      <div className='px-3 pt-5 pb-2 space-x-3 rounded-lg border border-components-panel-border'>
+      <div className='border-components-panel-border space-x-3 rounded-lg border px-3 pb-2 pt-5'>
         <Slider
-          className={cn('grow h-0.5 !bg-util-colors-teal-teal-500 rounded-full')}
+          className={cn('!bg-util-colors-teal-teal-500 h-0.5 grow rounded-full')}
           max={1.0}
           min={0}
           step={0.1}
@@ -39,14 +39,14 @@ const WeightedScore = ({
           onChange={v => onChange({ value: [v, (10 - v * 10) / 10] })}
           trackClassName='weightedScoreSliderTrack'
         />
-        <div className='flex justify-between mt-3'>
-          <div className='shrink-0 flex items-center w-[90px] system-xs-semibold-uppercase text-util-colors-blue-light-blue-light-500'>
+        <div className='mt-3 flex justify-between'>
+          <div className='system-xs-semibold-uppercase text-util-colors-blue-light-blue-light-500 flex w-[90px] shrink-0 items-center'>
             <div className='mr-1 truncate uppercase' title={t('dataset.weightedScore.semantic') || ''}>
               {t('dataset.weightedScore.semantic')}
             </div>
             {formatNumber(value.value[0])}
           </div>
-          <div className='shrink-0 flex items-center justify-end w-[90px] system-xs-semibold-uppercase text-util-colors-teal-teal-500'>
+          <div className='system-xs-semibold-uppercase text-util-colors-teal-teal-500 flex w-[90px] shrink-0 items-center justify-end'>
             {formatNumber(value.value[1])}
             <div className='ml-1 truncate uppercase' title={t('dataset.weightedScore.keyword') || ''}>
               {t('dataset.weightedScore.keyword')}
diff --git a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
index ad012a7d94..ad489f1c3c 100644
--- a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
@@ -104,26 +104,26 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
       )}
 
       {(loaded && hasNoData) && (
-        <div className='flex items-center justify-center mt-6 rounded-lg space-x-1  h-[128px] text-[13px] border'
+        <div className='mt-6 flex h-[128px] items-center justify-center space-x-1  rounded-lg border text-[13px]'
           style={{
             background: 'rgba(0, 0, 0, 0.02)',
             borderColor: 'rgba(0, 0, 0, 0.02',
           }}
         >
           <span className='text-text-tertiary'>{t('appDebug.feature.dataSet.noDataSet')}</span>
-          <Link href="/datasets/create" className='font-normal text-text-accent'>{t('appDebug.feature.dataSet.toCreate')}</Link>
+          <Link href="/datasets/create" className='text-text-accent font-normal'>{t('appDebug.feature.dataSet.toCreate')}</Link>
         </div>
       )}
 
       {datasets && datasets?.length > 0 && (
         <>
-          <div ref={listRef} className='mt-7 space-y-1 max-h-[286px] overflow-y-auto'>
+          <div ref={listRef} className='mt-7 max-h-[286px] space-y-1 overflow-y-auto'>
             {datasets.map(item => (
               <div
                 key={item.id}
                 className={cn(
-                  'flex justify-between items-center h-10 px-2 rounded-lg bg-components-panel-on-panel-item-bg border-components-panel-border-subtle border-[0.5px] shadow-xs cursor-pointer hover:border-components-panel-border hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm',
-                  selected.some(i => i.id === item.id) && 'border-[1.5px] border-components-option-card-option-selected-border bg-state-accent-hover shadow-xs hover:shadow-xs hover:border-components-option-card-option-selected-border hover:bg-state-accent-hover',
+                  'bg-components-panel-on-panel-item-bg border-components-panel-border-subtle shadow-xs hover:border-components-panel-border hover:bg-components-panel-on-panel-item-bg-hover flex h-10 cursor-pointer items-center justify-between rounded-lg border-[0.5px] px-2 hover:shadow-sm',
+                  selected.some(i => i.id === item.id) && 'border-components-option-card-option-selected-border bg-state-accent-hover shadow-xs hover:shadow-xs hover:border-components-option-card-option-selected-border hover:bg-state-accent-hover border-[1.5px]',
                   !item.embedding_available && 'hover:border-components-panel-border-subtle hover:bg-components-panel-on-panel-item-bg hover:shadow-xs',
                 )}
                 onClick={() => {
@@ -136,9 +136,9 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
                   <div className={cn('mr-2', !item.embedding_available && 'opacity-30')}>
                     <TypeIcon type="upload_file" size='md' />
                   </div>
-                  <div className={cn('max-w-[200px] text-[13px] font-medium text-text-secondary overflow-hidden text-ellipsis whitespace-nowrap', !item.embedding_available && 'opacity-30 !max-w-[120px]')}>{item.name}</div>
+                  <div className={cn('text-text-secondary max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap text-[13px] font-medium', !item.embedding_available && '!max-w-[120px] opacity-30')}>{item.name}</div>
                   {!item.embedding_available && (
-                    <span className='ml-1 shrink-0 px-1 border border-divider-deep rounded-md text-text-tertiary text-xs font-normal leading-[18px]'>{t('dataset.unavailable')}</span>
+                    <span className='border-divider-deep text-text-tertiary ml-1 shrink-0 rounded-md border px-1 text-xs font-normal leading-[18px]'>{t('dataset.unavailable')}</span>
                   )}
                 </div>
                 {
@@ -159,8 +159,8 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
         </>
       )}
       {loaded && (
-        <div className='flex justify-between items-center mt-8'>
-          <div className='text-sm  font-medium text-text-secondary'>
+        <div className='mt-8 flex items-center justify-between'>
+          <div className='text-text-secondary  text-sm font-medium'>
             {selected.length > 0 && `${selected.length} ${t('appDebug.feature.dataSet.selected')}`}
           </div>
           <div className='flex space-x-2'>
diff --git a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
index ec2ed78a15..52fe17fbe4 100644
--- a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
@@ -172,27 +172,27 @@ const SettingsModal: FC<SettingsModalProps> = ({
 
   return (
     <div
-      className='overflow-hidden w-full flex flex-col bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-xl shadow-xl'
+      className='bg-components-panel-bg border-components-panel-border flex w-full flex-col overflow-hidden rounded-xl border-[0.5px] shadow-xl'
       style={{
         height: 'calc(100vh - 72px)',
       }}
       ref={ref}
     >
-      <div className='shrink-0 flex justify-between items-center pl-6 pr-5 h-14 border-b border-divider-regular'>
-        <div className='flex flex-col text-base font-semibold text-text-primary'>
+      <div className='border-divider-regular flex h-14 shrink-0 items-center justify-between border-b pl-6 pr-5'>
+        <div className='text-text-primary flex flex-col text-base font-semibold'>
           <div className='leading-6'>{t('datasetSettings.title')}</div>
         </div>
         <div className='flex items-center'>
           <div
             onClick={onCancel}
-            className='flex justify-center items-center w-6 h-6 cursor-pointer'
+            className='flex h-6 w-6 cursor-pointer items-center justify-center'
           >
-            <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+            <RiCloseLine className='text-text-tertiary h-4 w-4' />
           </div>
         </div>
       </div>
       {/* Body */}
-      <div className='p-6 pt-5 border-b border-divider-regular overflow-y-auto pb-[68px]'>
+      <div className='border-divider-regular overflow-y-auto border-b p-6 pb-[68px] pt-5'>
         <div className={cn(rowClass, 'items-center')}>
           <div className={labelClass}>
             <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.name')}</div>
@@ -215,8 +215,8 @@ const SettingsModal: FC<SettingsModalProps> = ({
               className='resize-none'
               placeholder={t('datasetSettings.form.descPlaceholder') || ''}
             />
-            <a className='mt-2 flex items-center h-[18px] px-3 text-xs text-text-tertiary' href="https://docs.dify.ai/features/datasets#how-to-write-a-good-dataset-description" target='_blank' rel='noopener noreferrer'>
-              <BookOpenIcon className='w-3 h-[18px] mr-1' />
+            <a className='text-text-tertiary mt-2 flex h-[18px] items-center px-3 text-xs' href="https://docs.dify.ai/features/datasets#how-to-write-a-good-dataset-description" target='_blank' rel='noopener noreferrer'>
+              <BookOpenIcon className='mr-1 h-[18px] w-3' />
               {t('datasetSettings.form.descWrite')}
             </a>
           </div>
@@ -258,7 +258,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
               <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.embeddingModel')}</div>
             </div>
             <div className='w-full'>
-              <div className='w-full h-8 rounded-lg bg-components-input-bg-normal opacity-60'>
+              <div className='bg-components-input-bg-normal h-8 w-full rounded-lg opacity-60'>
                 <ModelSelector
                   readonly
                   defaultModel={{
@@ -268,7 +268,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
                   modelList={embeddingsModelList}
                 />
               </div>
-              <div className='mt-2 w-full text-xs leading-6 text-text-tertiary'>
+              <div className='text-text-tertiary mt-2 w-full text-xs leading-6'>
                 {t('datasetSettings.form.embeddingModelTip')}
                 <span className='text-text-accent cursor-pointer' onClick={() => setShowAccountSettingModal({ payload: 'provider' })}>{t('datasetSettings.form.embeddingModelTipLink')}</span>
               </div>
@@ -298,9 +298,9 @@ const SettingsModal: FC<SettingsModalProps> = ({
                 <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.externalKnowledgeAPI')}</div>
               </div>
               <div className='w-full max-w-[480px]'>
-                <div className='flex h-full px-3 py-2 items-center gap-1 rounded-lg bg-components-input-bg-normal'>
-                  <ApiConnectionMod className='w-4 h-4 text-text-secondary' />
-                  <div className='overflow-hidden text-text-secondary text-ellipsis system-sm-medium'>
+                <div className='bg-components-input-bg-normal flex h-full items-center gap-1 rounded-lg px-3 py-2'>
+                  <ApiConnectionMod className='text-text-secondary h-4 w-4' />
+                  <div className='text-text-secondary system-sm-medium overflow-hidden text-ellipsis'>
                     {currentDataset?.external_knowledge_info.external_knowledge_api_name}
                   </div>
                   <div className='text-text-tertiary system-xs-regular'>·</div>
@@ -313,7 +313,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
                 <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.externalKnowledgeID')}</div>
               </div>
               <div className='w-full max-w-[480px]'>
-                <div className='flex h-full px-3 py-2 items-center gap-1 rounded-lg bg-components-input-bg-normal'>
+                <div className='bg-components-input-bg-normal flex h-full items-center gap-1 rounded-lg px-3 py-2'>
                   <div className='text-text-tertiary system-xs-regular'>{currentDataset?.external_knowledge_info.external_knowledge_id}</div>
                 </div>
               </div>
@@ -324,7 +324,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
             <div className={cn(labelClass, 'w-auto min-w-[168px]')}>
               <div>
                 <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.retrievalSetting.title')}</div>
-                <div className='leading-[18px] text-xs font-normal text-text-tertiary'>
+                <div className='text-text-tertiary text-xs font-normal leading-[18px]'>
                   <a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-text-accent'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
                   {t('datasetSettings.form.retrievalSetting.description')}
                 </div>
@@ -348,23 +348,23 @@ const SettingsModal: FC<SettingsModalProps> = ({
           </div>}
       </div>
       {isRetrievalChanged && !isHideChangedTip && (
-        <div className='absolute z-10 left-[30px] right-[30px] bottom-[76px] flex h-10 items-center px-3 rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] shadow-lg justify-between'>
+        <div className='absolute bottom-[76px] left-[30px] right-[30px] z-10 flex h-10 items-center justify-between rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 shadow-lg'>
           <div className='flex items-center'>
-            <AlertTriangle className='mr-1 w-3 h-3 text-[#F79009]' />
-            <div className='leading-[18px] text-xs font-medium text-gray-700'>{t('appDebug.datasetConfig.retrieveChangeTip')}</div>
+            <AlertTriangle className='mr-1 h-3 w-3 text-[#F79009]' />
+            <div className='text-xs font-medium leading-[18px] text-gray-700'>{t('appDebug.datasetConfig.retrieveChangeTip')}</div>
           </div>
-          <div className='p-1 cursor-pointer' onClick={(e) => {
+          <div className='cursor-pointer p-1' onClick={(e) => {
             setIsHideChangedTip(true)
             e.stopPropagation()
             e.nativeEvent.stopImmediatePropagation()
           }}>
-            <RiCloseLine className='w-4 h-4 text-gray-500' />
+            <RiCloseLine className='h-4 w-4 text-gray-500' />
           </div>
         </div>
       )}
 
       <div
-        className='sticky z-[5] bottom-0 w-full flex justify-end py-4 px-6 border-t border-divider-regular bg-background-section'
+        className='border-divider-regular bg-background-section sticky bottom-0 z-[5] flex w-full justify-end border-t px-6 py-4'
       >
         <Button
           onClick={onCancel}
diff --git a/web/app/components/app/configuration/debug/chat-user-input.tsx b/web/app/components/app/configuration/debug/chat-user-input.tsx
index 281e328ef9..95357b3678 100644
--- a/web/app/components/app/configuration/debug/chat-user-input.tsx
+++ b/web/app/components/app/configuration/debug/chat-user-input.tsx
@@ -47,15 +47,15 @@ const ChatUserInput = ({
     return null
 
   return (
-    <div className={cn('bg-components-panel-on-panel-item-bg rounded-xl border-[0.5px] border-components-panel-border-subtle shadow-xs z-[1]')}>
-      <div className='px-4 pt-3 pb-4'>
+    <div className={cn('bg-components-panel-on-panel-item-bg border-components-panel-border-subtle shadow-xs z-[1] rounded-xl border-[0.5px]')}>
+      <div className='px-4 pb-4 pt-3'>
         {promptVariables.map(({ key, name, type, options, max_length, required }, index) => (
           <div
             key={key}
             className='mb-4 last-of-type:mb-0'
           >
             <div>
-              <div className='h-6 mb-1 flex items-center gap-1 text-text-secondary system-sm-semibold'>
+              <div className='text-text-secondary system-sm-semibold mb-1 flex h-6 items-center gap-1'>
                 <div className='truncate'>{name || key}</div>
                 {!required && <span className='text-text-tertiary system-xs-regular'>{t('workflow.panel.optional')}</span>}
               </div>
@@ -71,7 +71,7 @@ const ChatUserInput = ({
                 )}
                 {type === 'paragraph' && (
                   <Textarea
-                    className='grow h-[120px]'
+                    className='h-[120px] grow'
                     placeholder={name}
                     value={inputs[key] ? `${inputs[key]}` : ''}
                     onChange={(e) => { handleInputValueChange(key, e.target.value) }}
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx
index e135574924..b2fdf7c402 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx
@@ -64,11 +64,11 @@ const DebugItem: FC<DebugItemProps> = ({
 
   return (
     <div
-      className={`flex flex-col min-w-[320px] rounded-xl bg-background-section-burn ${className}`}
+      className={`bg-background-section-burn flex min-w-[320px] flex-col rounded-xl ${className}`}
       style={style}
     >
-      <div className='shrink-0 flex items-center justify-between h-10 px-3 border-b-[0.5px] border-divider-regular'>
-        <div className='flex items-center justify-center w-6 h-5 font-medium italic text-text-tertiary'>
+      <div className='border-divider-regular flex h-10 shrink-0 items-center justify-between border-b-[0.5px] px-3'>
+        <div className='text-text-tertiary flex h-5 w-6 items-center justify-center font-medium italic'>
           #{index + 1}
         </div>
         <ModelParameterTrigger
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx
index d5662cb49c..75ba8362ae 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx
@@ -102,10 +102,10 @@ const DebugWithMultipleModel = () => {
   const inputsForm = modelConfig.configs.prompt_variables.filter(item => item.type !== 'api').map(item => ({ ...item, label: item.name, variable: item.key })) as InputForm[]
 
   return (
-    <div className='flex flex-col h-full'>
+    <div className='flex h-full flex-col'>
       <div
         className={`
-          grow mb-3 relative px-6 overflow-auto
+          relative mb-3 grow overflow-auto px-6
         `}
         style={{ height: isChatMode ? 'calc(100% - 60px)' : '100%' }}
       >
@@ -131,7 +131,7 @@ const DebugWithMultipleModel = () => {
         }
       </div>
       {isChatMode && (
-        <div className='shrink-0 pb-0 px-6'>
+        <div className='shrink-0 px-6 pb-0'>
           <ChatInputArea
             showFeatureBar
             showFileUpload={false}
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.tsx
index 49c01aa4b3..2320745a16 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.tsx
@@ -72,7 +72,7 @@ const ModelParameterTrigger: FC<ModelParameterTriggerProps> = ({
       }) => (
         <div
           className={`
-            flex items-center max-w-[200px] h-8 px-2 rounded-lg cursor-pointer
+            flex h-8 max-w-[200px] cursor-pointer items-center rounded-lg px-2
             ${open && 'bg-state-base-hover'}
             ${currentModel && currentModel.status !== ModelStatusEnum.active && '!bg-[#FFFAEB]'}
           `}
@@ -80,7 +80,7 @@ const ModelParameterTrigger: FC<ModelParameterTriggerProps> = ({
           {
             currentProvider && (
               <ModelIcon
-                className='mr-1 !w-4 !h-4'
+                className='mr-1 !h-4 !w-4'
                 provider={currentProvider}
                 modelName={currentModel?.model}
               />
@@ -88,31 +88,31 @@ const ModelParameterTrigger: FC<ModelParameterTriggerProps> = ({
           }
           {
             !currentProvider && (
-              <div className='flex items-center justify-center mr-1 w-4 h-4 rounded'>
-                <CubeOutline className='w-4 h-4 text-text-accent' />
+              <div className='mr-1 flex h-4 w-4 items-center justify-center rounded'>
+                <CubeOutline className='text-text-accent h-4 w-4' />
               </div>
             )
           }
           {
             currentModel && (
               <ModelName
-                className='mr-0.5 text-text-secondary'
+                className='text-text-secondary mr-0.5'
                 modelItem={currentModel}
               />
             )
           }
           {
             !currentModel && (
-              <div className='mr-0.5 text-[13px] font-medium text-text-accent truncate'>
+              <div className='text-text-accent mr-0.5 truncate text-[13px] font-medium'>
                 {t('common.modelProvider.selectModel')}
               </div>
             )
           }
-          <RiArrowDownSLine className={`w-3 h-3 ${(currentModel && currentProvider) ? 'text-text-tertiary' : 'text-text-accent'}`} />
+          <RiArrowDownSLine className={`h-3 w-3 ${(currentModel && currentProvider) ? 'text-text-tertiary' : 'text-text-accent'}`} />
           {
             currentModel && currentModel.status !== ModelStatusEnum.active && (
               <Tooltip popupContent={MODEL_STATUS_TEXT[currentModel.status][language]}>
-                <AlertTriangle className='w-4 h-4 text-[#F79009]' />
+                <AlertTriangle className='h-4 w-4 text-[#F79009]' />
               </Tooltip>
             )
           }
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/text-generation-item.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/text-generation-item.tsx
index 57c8f83f3f..718419186b 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/text-generation-item.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/text-generation-item.tsx
@@ -133,7 +133,7 @@ const TextGenerationItem: FC<TextGenerationItemProps> = ({
 
   return (
     <TextGeneration
-      className='flex flex-col h-full overflow-y-auto border-none'
+      className='flex h-full flex-col overflow-y-auto border-none'
       innerClassName='grow flex flex-col'
       contentClassName='grow'
       content={completion}
diff --git a/web/app/components/app/configuration/debug/index.tsx b/web/app/components/app/configuration/debug/index.tsx
index 480bd782ae..b0841640fc 100644
--- a/web/app/components/app/configuration/debug/index.tsx
+++ b/web/app/components/app/configuration/debug/index.tsx
@@ -391,7 +391,7 @@ const Debug: FC<IDebug> = ({
   return (
     <>
       <div className="shrink-0">
-        <div className='flex items-center justify-between px-4 pt-3 pb-2'>
+        <div className='flex items-center justify-between px-4 pb-2 pt-3'>
           <div className='text-text-primary system-xl-semibold'>{t('appDebug.inputs.title')}</div>
           <div className='flex items-center'>
             {
@@ -403,10 +403,10 @@ const Debug: FC<IDebug> = ({
                       onClick={() => onMultipleModelConfigsChange(true, [...multipleModelConfigs, { id: `${Date.now()}`, model: '', provider: '', parameters: {} }])}
                       disabled={multipleModelConfigs.length >= 4}
                     >
-                      <RiAddLine className='mr-1 w-3.5 h-3.5' />
+                      <RiAddLine className='mr-1 h-3.5 w-3.5' />
                       {t('common.modelProvider.addModel')}({multipleModelConfigs.length}/4)
                     </Button>
-                    <div className='mx-2 w-[1px] h-[14px] bg-divider-regular' />
+                    <div className='bg-divider-regular mx-2 h-[14px] w-[1px]' />
                   </>
                 )
                 : null
@@ -417,7 +417,7 @@ const Debug: FC<IDebug> = ({
                   popupContent={t('common.operation.refresh')}
                 >
                   <ActionButton onClick={clearConversation}>
-                    <RefreshCcw01 className='w-4 h-4' />
+                    <RefreshCcw01 className='h-4 w-4' />
                   </ActionButton>
                 </TooltipPlus>
                 {varList.length > 0 && (
@@ -426,10 +426,10 @@ const Debug: FC<IDebug> = ({
                       popupContent={t('workflow.panel.userInputField')}
                     >
                       <ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => setExpanded(!expanded)}>
-                        <RiEqualizer2Line className='w-4 h-4' />
+                        <RiEqualizer2Line className='h-4 w-4' />
                       </ActionButton>
                     </TooltipPlus>
-                    {expanded && <div className='absolute z-10 bottom-[-14px] right-[5px] w-3 h-3 bg-components-panel-on-panel-item-bg border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle rotate-45' />}
+                    {expanded && <div className='bg-components-panel-on-panel-item-bg border-components-panel-border-subtle absolute bottom-[-14px] right-[5px] z-10 h-3 w-3 rotate-45 border-l-[0.5px] border-t-[0.5px]' />}
                   </div>
                 )}
               </>
@@ -457,7 +457,7 @@ const Debug: FC<IDebug> = ({
       </div>
       {
         debugWithMultipleModel && (
-          <div className='grow mt-3 overflow-hidden' ref={ref}>
+          <div className='mt-3 grow overflow-hidden' ref={ref}>
             <DebugWithMultipleModel
               multipleModelConfigs={multipleModelConfigs}
               onMultipleModelConfigsChange={onMultipleModelConfigsChange}
@@ -489,10 +489,10 @@ const Debug: FC<IDebug> = ({
       }
       {
         !debugWithMultipleModel && (
-          <div className="flex flex-col grow" ref={ref}>
+          <div className="flex grow flex-col" ref={ref}>
             {/* Chat */}
             {mode !== AppType.completion && (
-              <div className='grow h-0 overflow-hidden'>
+              <div className='h-0 grow overflow-hidden'>
                 <DebugWithSingleModel
                   ref={debugWithSingleModelRef}
                   checkCanSend={checkCanSend}
@@ -525,8 +525,8 @@ const Debug: FC<IDebug> = ({
                   </>
                 )}
                 {!completionRes && !isResponding && (
-                  <div className='grow flex flex-col items-center justify-center gap-2'>
-                    <RiSparklingFill className='w-12 h-12 text-text-empty-state-icon' />
+                  <div className='flex grow flex-col items-center justify-center gap-2'>
+                    <RiSparklingFill className='text-text-empty-state-icon h-12 w-12' />
                     <div className='text-text-quaternary system-sm-regular'>{t('appDebug.noResult')}</div>
                   </div>
                 )}
diff --git a/web/app/components/app/configuration/features/experience-enhance-group/more-like-this/index.tsx b/web/app/components/app/configuration/features/experience-enhance-group/more-like-this/index.tsx
index f63ed1c25a..e110d0c9cc 100644
--- a/web/app/components/app/configuration/features/experience-enhance-group/more-like-this/index.tsx
+++ b/web/app/components/app/configuration/features/experience-enhance-group/more-like-this/index.tsx
@@ -34,13 +34,13 @@ const MoreLikeThis: FC = () => {
       noBodySpacing
     >
       {!isHideTip && (
-        <div className='flex justify-between items-center h-9 px-3 rounded-b-xl bg-[#FFFAEB] text-xs text-gray-700'>
+        <div className='flex h-9 items-center justify-between rounded-b-xl bg-[#FFFAEB] px-3 text-xs text-gray-700'>
           <div className='flex  items-center space-x-2'>
             <div>{warningIcon}</div>
             <div>{t('appDebug.feature.moreLikeThis.tip')}</div>
           </div>
-          <div className='flex items-center justify-center w-4 h-4 cursor-pointer' onClick={() => setIsHideTip(true)}>
-            <XMarkIcon className="w-3 h-3" />
+          <div className='flex h-4 w-4 cursor-pointer items-center justify-center' onClick={() => setIsHideTip(true)}>
+            <XMarkIcon className="h-3 w-3" />
           </div>
         </div>
       )}
diff --git a/web/app/components/app/configuration/index.tsx b/web/app/components/app/configuration/index.tsx
index 1d37f73724..b1b562d8d3 100644
--- a/web/app/components/app/configuration/index.tsx
+++ b/web/app/components/app/configuration/index.tsx
@@ -811,7 +811,7 @@ const Configuration: FC = () => {
   }
 
   if (isLoading) {
-    return <div className='flex items-center justify-center h-full'>
+    return <div className='flex h-full items-center justify-center'>
       <Loading type='area' />
     </div>
   }
@@ -893,16 +893,16 @@ const Configuration: FC = () => {
     >
       <FeaturesProvider features={featuresData}>
         <>
-          <div className="flex flex-col h-full">
-            <div className='relative flex grow h-[200px] pt-14'>
+          <div className="flex h-full flex-col">
+            <div className='relative flex h-[200px] grow pt-14'>
               {/* Header */}
-              <div className='absolute top-0 left-0 w-full bg-default-subtle h-14'>
-                <div className='flex items-center justify-between px-6 h-14'>
+              <div className='bg-default-subtle absolute left-0 top-0 h-14 w-full'>
+                <div className='flex h-14 items-center justify-between px-6'>
                   <div className='flex items-center'>
                     <div className='system-xl-semibold text-text-primary'>{t('appDebug.orchestrate')}</div>
-                    <div className='flex items-center h-[14px] space-x-1 text-xs'>
+                    <div className='flex h-[14px] items-center space-x-1 text-xs'>
                       {isAdvancedMode && (
-                        <div className='ml-1 flex items-center h-5 px-1.5 border border-components-button-secondary-border rounded-md system-xs-medium-uppercase text-text-tertiary uppercase'>{t('appDebug.promptMode.advanced')}</div>
+                        <div className='border-components-button-secondary-border system-xs-medium-uppercase text-text-tertiary ml-1 flex h-5 items-center rounded-md border px-1.5 uppercase'>{t('appDebug.promptMode.advanced')}</div>
                       )}
                     </div>
                   </div>
@@ -944,7 +944,7 @@ const Configuration: FC = () => {
                     {isMobile && (
                       <Button className='mr-2 !h-8 !text-[13px] font-medium' onClick={showDebugPanel}>
                         <span className='mr-1'>{t('appDebug.operation.debugConfig')}</span>
-                        <CodeBracketIcon className="w-4 h-4 text-text-tertiary" />
+                        <CodeBracketIcon className="text-text-tertiary h-4 w-4" />
                       </Button>
                     )}
                     <AppPublisher {...{
@@ -959,11 +959,11 @@ const Configuration: FC = () => {
                   </div>
                 </div>
               </div>
-              <div className={`w-full sm:w-1/2 shrink-0 flex flex-col h-full ${debugWithMultipleModel && 'max-w-[560px]'}`}>
+              <div className={`flex h-full w-full shrink-0 flex-col sm:w-1/2 ${debugWithMultipleModel && 'max-w-[560px]'}`}>
                 <Config />
               </div>
-              {!isMobile && <div className="relative flex flex-col w-1/2 h-full overflow-y-auto grow " style={{ borderColor: 'rgba(0, 0, 0, 0.02)' }}>
-                <div className='grow flex flex-col border-t-[0.5px] border-l-[0.5px] rounded-tl-2xl border-components-panel-border bg-chatbot-bg '>
+              {!isMobile && <div className="relative flex h-full w-1/2 grow flex-col overflow-y-auto " style={{ borderColor: 'rgba(0, 0, 0, 0.02)' }}>
+                <div className='border-components-panel-border bg-chatbot-bg flex grow flex-col rounded-tl-2xl border-l-[0.5px] border-t-[0.5px] '>
                   <Debug
                     isAPIKeySet={isAPIKeySet}
                     onSetting={() => setShowAccountSettingModal({ payload: 'provider' })}
diff --git a/web/app/components/app/configuration/prompt-mode/advanced-mode-waring.tsx b/web/app/components/app/configuration/prompt-mode/advanced-mode-waring.tsx
index 6fb58ba9a1..4d7ed9a57f 100644
--- a/web/app/components/app/configuration/prompt-mode/advanced-mode-waring.tsx
+++ b/web/app/components/app/configuration/prompt-mode/advanced-mode-waring.tsx
@@ -18,9 +18,9 @@ const AdvancedModeWarning: FC<Props> = ({
   if (!show)
     return null
   return (
-    <div className='mb-3 py-3 px-4 border border-[#FEF0C7] rounded-xl bg-[#FFFAEB]' >
-      <div className='mb-2 text-xs leading-[18px] font-bold text-[#DC6803]'>{t('appDebug.promptMode.advancedWarning.title')}</div>
-      <div className='flex justify-between items-center'>
+    <div className='mb-3 rounded-xl border border-[#FEF0C7] bg-[#FFFAEB] px-4 py-3' >
+      <div className='mb-2 text-xs font-bold leading-[18px] text-[#DC6803]'>{t('appDebug.promptMode.advancedWarning.title')}</div>
+      <div className='flex items-center justify-between'>
         <div className='text-xs leading-[18px] '>
           <span className='text-gray-700'>{t('appDebug.promptMode.advancedWarning.description')}</span>
           <a
@@ -35,12 +35,12 @@ const AdvancedModeWarning: FC<Props> = ({
         <div className='flex items-center space-x-1'>
           <div
             onClick={onReturnToSimpleMode}
-            className='shrink-0 flex items-center h-6 px-2 bg-indigo-600 shadow-xs border border-gray-200 rounded-lg text-white text-xs font-semibold cursor-pointer space-x-1'
+            className='shadow-xs flex h-6 shrink-0 cursor-pointer items-center space-x-1 rounded-lg border border-gray-200 bg-indigo-600 px-2 text-xs font-semibold text-white'
           >
             <div className='text-xs font-semibold uppercase'>{t('appDebug.promptMode.switchBack')}</div>
           </div>
           <div
-            className='flex items-center h-6 px-2 rounded-md bg-[#fff] border border-gray-200 shadow-xs text-xs font-medium text-primary-600 cursor-pointer'
+            className='shadow-xs text-primary-600 flex h-6 cursor-pointer items-center rounded-md border border-gray-200 bg-[#fff] px-2 text-xs font-medium'
             onClick={() => setShow(false)}
           >{t('appDebug.promptMode.advancedWarning.ok')}</div>
         </div>
diff --git a/web/app/components/app/configuration/prompt-value-panel/index.tsx b/web/app/components/app/configuration/prompt-value-panel/index.tsx
index 2625f224eb..8eb9480988 100644
--- a/web/app/components/app/configuration/prompt-value-panel/index.tsx
+++ b/web/app/components/app/configuration/prompt-value-panel/index.tsx
@@ -90,26 +90,26 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
 
   return (
     <>
-      <div className='relative z-[1] mx-3 border-[0.5px] bg-components-panel-on-panel-item-bg border-components-panel-border-subtle rounded-xl shadow-md'>
+      <div className='bg-components-panel-on-panel-item-bg border-components-panel-border-subtle relative z-[1] mx-3 rounded-xl border-[0.5px] shadow-md'>
         <div className={cn('px-4 pt-3', userInputFieldCollapse ? 'pb-3' : 'pb-1')}>
-          <div className='flex items-center gap-0.5 py-0.5 cursor-pointer' onClick={() => setUserInputFieldCollapse(!userInputFieldCollapse)}>
+          <div className='flex cursor-pointer items-center gap-0.5 py-0.5' onClick={() => setUserInputFieldCollapse(!userInputFieldCollapse)}>
             <div className='text-text-secondary system-md-semibold-uppercase'>{t('appDebug.inputs.userInputField')}</div>
-            {userInputFieldCollapse && <RiArrowRightSLine className='w-4 h-4 text-text-secondary'/>}
-            {!userInputFieldCollapse && <RiArrowDownSLine className='w-4 h-4 text-text-secondary'/>}
+            {userInputFieldCollapse && <RiArrowRightSLine className='text-text-secondary h-4 w-4'/>}
+            {!userInputFieldCollapse && <RiArrowDownSLine className='text-text-secondary h-4 w-4'/>}
           </div>
           {!userInputFieldCollapse && (
-            <div className='mt-1 text-text-tertiary system-xs-regular'>{t('appDebug.inputs.completionVarTip')}</div>
+            <div className='text-text-tertiary system-xs-regular mt-1'>{t('appDebug.inputs.completionVarTip')}</div>
           )}
         </div>
         {!userInputFieldCollapse && promptVariables.length > 0 && (
-          <div className='px-4 pt-3 pb-4'>
+          <div className='px-4 pb-4 pt-3'>
             {promptVariables.map(({ key, name, type, options, max_length, required }, index) => (
               <div
                 key={key}
                 className='mb-4 last-of-type:mb-0'
               >
                 <div>
-                  <div className='h-6 mb-1 flex items-center gap-1 text-text-secondary system-sm-semibold'>
+                  <div className='text-text-secondary system-sm-semibold mb-1 flex h-6 items-center gap-1'>
                     <div className='truncate'>{name || key}</div>
                     {!required && <span className='text-text-tertiary system-xs-regular'>{t('workflow.panel.optional')}</span>}
                   </div>
@@ -125,7 +125,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                     )}
                     {type === 'paragraph' && (
                       <Textarea
-                        className='grow h-[120px]'
+                        className='h-[120px] grow'
                         placeholder={name}
                         value={inputs[key] ? `${inputs[key]}` : ''}
                         onChange={(e) => { handleInputValueChange(key, e.target.value) }}
@@ -156,8 +156,8 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
               </div>
             ))}
             {visionConfig?.enabled && (
-              <div className="mt-3 xl:flex justify-between">
-                <div className="mr-1 py-2 shrink-0 w-[120px] text-sm text-text-primary">{t('common.imageUploader.imageUpload')}</div>
+              <div className="mt-3 justify-between xl:flex">
+                <div className="text-text-primary mr-1 w-[120px] shrink-0 py-2 text-sm">{t('common.imageUploader.imageUpload')}</div>
                 <div className='grow'>
                   <TextGenerationImageUploader
                     settings={visionConfig}
@@ -174,7 +174,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
           </div>
         )}
         {!userInputFieldCollapse && (
-          <div className='flex justify-between p-4 pt-3 border-t border-divider-subtle'>
+          <div className='border-divider-subtle flex justify-between border-t p-4 pt-3'>
             <Button className='w-[72px]' onClick={onClear}>{t('common.operation.clear')}</Button>
             {canNotRun && (
               <Tooltip popupContent={t('appDebug.otherError.promptNoBeEmpty')} needsDelay>
@@ -183,7 +183,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                   disabled={canNotRun}
                   onClick={() => onSend && onSend()}
                   className="w-[96px]">
-                  <RiPlayLargeFill className="shrink-0 w-4 h-4 mr-0.5" aria-hidden="true" />
+                  <RiPlayLargeFill className="mr-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
                   {t('appDebug.inputs.run')}
                 </Button>
               </Tooltip>
@@ -194,7 +194,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                 disabled={canNotRun}
                 onClick={() => onSend && onSend()}
                 className="w-[96px]">
-                <RiPlayLargeFill className="shrink-0 w-4 h-4 mr-0.5" aria-hidden="true" />
+                <RiPlayLargeFill className="mr-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
                 {t('appDebug.inputs.run')}
               </Button>
             )}
diff --git a/web/app/components/app/configuration/tools/external-data-tool-modal.tsx b/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
index e1fe73ee32..1735f95464 100644
--- a/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
+++ b/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
@@ -186,13 +186,13 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
     <Modal
       isShow
       onClose={() => { }}
-      className='!p-8 !pb-6 !max-w-none !w-[640px]'
+      className='!w-[640px] !max-w-none !p-8 !pb-6'
     >
       <div className='mb-2 text-xl font-semibold text-gray-900'>
         {`${action} ${t('appDebug.variableConfig.apiBasedVar')}`}
       </div>
       <div className='py-2'>
-        <div className='leading-9 text-sm font-medium text-gray-900'>
+        <div className='text-sm font-medium leading-9 text-gray-900'>
           {t('common.apiBasedExtension.type')}
         </div>
         <SimpleSelect
@@ -207,46 +207,46 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
         />
       </div>
       <div className='py-2'>
-        <div className='leading-9 text-sm font-medium text-gray-900'>
+        <div className='text-sm font-medium leading-9 text-gray-900'>
           {t('appDebug.feature.tools.modal.name.title')}
         </div>
         <div className='flex items-center'>
           <input
             value={localeData.label || ''}
             onChange={e => handleValueChange({ label: e.target.value })}
-            className='grow block mr-2 px-3 h-9 bg-gray-100 rounded-lg text-sm text-gray-900 outline-none appearance-none'
+            className='mr-2 block h-9 grow appearance-none rounded-lg bg-gray-100 px-3 text-sm text-gray-900 outline-none'
             placeholder={t('appDebug.feature.tools.modal.name.placeholder') || ''}
           />
           <AppIcon size='large'
             onClick={() => { setShowEmojiPicker(true) }}
-            className='!w-9 !h-9 rounded-lg border-[0.5px] border-black/5 cursor-pointer '
+            className='!h-9 !w-9 cursor-pointer rounded-lg border-[0.5px] border-black/5 '
             icon={localeData.icon}
             background={localeData.icon_background}
           />
         </div>
       </div>
       <div className='py-2'>
-        <div className='leading-9 text-sm font-medium text-gray-900'>
+        <div className='text-sm font-medium leading-9 text-gray-900'>
           {t('appDebug.feature.tools.modal.variableName.title')}
         </div>
         <input
           value={localeData.variable || ''}
           onChange={e => handleValueChange({ variable: e.target.value })}
-          className='block px-3 w-full h-9 bg-gray-100 rounded-lg text-sm text-gray-900 outline-none appearance-none'
+          className='block h-9 w-full appearance-none rounded-lg bg-gray-100 px-3 text-sm text-gray-900 outline-none'
           placeholder={t('appDebug.feature.tools.modal.variableName.placeholder') || ''}
         />
       </div>
       {
         localeData.type === 'api' && (
           <div className='py-2'>
-            <div className='flex justify-between items-center h-9 text-sm font-medium text-gray-900'>
+            <div className='flex h-9 items-center justify-between text-sm font-medium text-gray-900'>
               {t('common.apiBasedExtension.selector.title')}
               <a
                 href={t('common.apiBasedExtension.linkUrl') || '/'}
                 target='_blank' rel='noopener noreferrer'
-                className='group flex items-center text-xs font-normal text-gray-500 hover:text-primary-600'
+                className='hover:text-primary-600 group flex items-center text-xs font-normal text-gray-500'
               >
-                <BookOpen01 className='mr-1 w-3 h-3 text-gray-500 group-hover:text-primary-600' />
+                <BookOpen01 className='group-hover:text-primary-600 mr-1 h-3 w-3 text-gray-500' />
                 {t('common.apiBasedExtension.link')}
               </a>
             </div>
@@ -268,7 +268,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
           />
         )
       }
-      <div className='flex items-center justify-end mt-6'>
+      <div className='mt-6 flex items-center justify-end'>
         <Button
           onClick={onCancel}
           className='mr-2'
diff --git a/web/app/components/app/configuration/tools/index.tsx b/web/app/components/app/configuration/tools/index.tsx
index 03525d7232..f70a024cda 100644
--- a/web/app/components/app/configuration/tools/index.tsx
+++ b/web/app/components/app/configuration/tools/index.tsx
@@ -82,24 +82,24 @@ const Tools = () => {
   }
 
   return (
-    <div className='mt-3 px-3 rounded-xl bg-gray-50'>
-      <div className='flex items-center h-12'>
-        <div className='grow flex items-center'>
+    <div className='mt-3 rounded-xl bg-gray-50 px-3'>
+      <div className='flex h-12 items-center'>
+        <div className='flex grow items-center'>
           <div
             className={`
-              group flex items-center justify-center mr-1 w-6 h-6 rounded-md 
+              group mr-1 flex h-6 w-6 items-center justify-center rounded-md 
               ${externalDataToolsConfig.length && 'hover:shadow-xs hover:bg-white'}
             `}
             onClick={() => setExpanded(v => !v)}
           >
             {
               externalDataToolsConfig.length
-                ? <Tool03 className='group-hover:hidden w-4 h-4 text-[#444CE7]' />
-                : <Tool03 className='w-4 h-4 text-[#444CE7]' />
+                ? <Tool03 className='h-4 w-4 text-[#444CE7] group-hover:hidden' />
+                : <Tool03 className='h-4 w-4 text-[#444CE7]' />
             }
             {
               !!externalDataToolsConfig.length && (
-                <RiArrowDownSLine className={`hidden group-hover:block w-4 h-4 text-primary-600 cursor-pointer ${expanded ? 'rotate-180' : 'rotate-0'}`} />
+                <RiArrowDownSLine className={`text-primary-600 hidden h-4 w-4 cursor-pointer group-hover:block ${expanded ? 'rotate-180' : 'rotate-0'}`} />
               )
             }
           </div>
@@ -118,15 +118,15 @@ const Tools = () => {
           !expanded && !!externalDataToolsConfig.length && (
             <>
               <div className='mr-3 text-xs text-gray-500'>{t('appDebug.feature.tools.toolsInUse', { count: externalDataToolsConfig.length })}</div>
-              <div className='mr-1 w-[1px] h-3.5 bg-gray-200' />
+              <div className='mr-1 h-3.5 w-[1px] bg-gray-200' />
             </>
           )
         }
         <div
-          className='flex items-center h-7 px-3 text-xs font-medium text-gray-700 cursor-pointer'
+          className='flex h-7 cursor-pointer items-center px-3 text-xs font-medium text-gray-700'
           onClick={() => handleOpenExternalDataToolModal({}, -1)}
         >
-          <RiAddLine className='mr-[5px] w-3.5 h-3.5 ' />
+          <RiAddLine className='mr-[5px] h-3.5 w-3.5 ' />
           {t('common.operation.add')}
         </div>
       </div>
@@ -137,11 +137,11 @@ const Tools = () => {
               externalDataToolsConfig.map((item, index: number) => (
                 <div
                   key={`${index}-${item.type}-${item.label}-${item.variable}`}
-                  className='group flex items-center mb-1 last-of-type:mb-0 px-2.5 py-2 rounded-lg border-[0.5px] border-gray-200 bg-white shadow-xs'
+                  className='shadow-xs group mb-1 flex items-center rounded-lg border-[0.5px] border-gray-200 bg-white px-2.5 py-2 last-of-type:mb-0'
                 >
-                  <div className='grow flex items-center'>
+                  <div className='flex grow items-center'>
                     <AppIcon size='large'
-                      className='mr-2 !w-6 !h-6 rounded-md border-[0.5px] border-black/5'
+                      className='mr-2 !h-6 !w-6 rounded-md border-[0.5px] border-black/5'
                       icon={item.icon}
                       background={item.icon_background}
                     />
@@ -161,18 +161,18 @@ const Tools = () => {
                     </Tooltip>
                   </div>
                   <div
-                    className='hidden group-hover:flex items-center justify-center mr-1 w-6 h-6 hover:bg-black/5 rounded-md cursor-pointer'
+                    className='mr-1 hidden h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-black/5 group-hover:flex'
                     onClick={() => handleOpenExternalDataToolModal(item, index)}
                   >
-                    <Settings01 className='w-4 h-4 text-gray-500' />
+                    <Settings01 className='h-4 w-4 text-gray-500' />
                   </div>
                   <div
-                    className='hidden group/action group-hover:flex items-center justify-center w-6 h-6 hover:bg-[#FEE4E2] rounded-md cursor-pointer'
+                    className='group/action hidden h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-[#FEE4E2] group-hover:flex'
                     onClick={() => setExternalDataToolsConfig([...externalDataToolsConfig.slice(0, index), ...externalDataToolsConfig.slice(index + 1)])}
                   >
-                    <RiDeleteBinLine className='w-4 h-4 text-gray-500 group-hover/action:text-[#D92D20]' />
+                    <RiDeleteBinLine className='h-4 w-4 text-gray-500 group-hover/action:text-[#D92D20]' />
                   </div>
-                  <div className='hidden group-hover:block ml-2 mr-3 w-[1px] h-3.5 bg-gray-200' />
+                  <div className='ml-2 mr-3 hidden h-3.5 w-[1px] bg-gray-200 group-hover:block' />
                   <Switch
                     size='l'
                     defaultValue={item.enabled}
diff --git a/web/app/components/app/create-app-dialog/app-card/index.tsx b/web/app/components/app/create-app-dialog/app-card/index.tsx
index f1807941ee..189ad7ce61 100644
--- a/web/app/components/app/create-app-dialog/app-card/index.tsx
+++ b/web/app/components/app/create-app-dialog/app-card/index.tsx
@@ -20,8 +20,8 @@ const AppCard = ({
   const { t } = useTranslation()
   const { app: appBasicInfo } = app
   return (
-    <div className={cn('p-4 h-[132px] relative overflow-hidden flex flex-col group bg-components-panel-on-panel-item-bg border-[0.5px] border-components-panel-border rounded-xl shadow-xs  hover:shadow-lg cursor-pointer')}>
-      <div className='flex items-center gap-3 pb-2 grow-0 shrink-0'>
+    <div className={cn('bg-components-panel-on-panel-item-bg border-components-panel-border shadow-xs group relative flex h-[132px] cursor-pointer flex-col overflow-hidden rounded-xl border-[0.5px]  p-4 hover:shadow-lg')}>
+      <div className='flex shrink-0 grow-0 items-center gap-3 pb-2'>
         <div className='relative shrink-0'>
           <AppIcon
             size='large'
@@ -31,24 +31,24 @@ const AppCard = ({
             imageUrl={appBasicInfo.icon_url}
           />
           <AppTypeIcon wrapperClassName='absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-[4px] border border-divider-regular outline outline-components-panel-on-panel-item-bg'
-            className='w-3 h-3' type={appBasicInfo.mode} />
+            className='h-3 w-3' type={appBasicInfo.mode} />
         </div>
-        <div className='grow flex flex-col gap-1'>
+        <div className='flex grow flex-col gap-1'>
           <div className='line-clamp-1'>
             <span className='system-md-semibold text-text-secondary' title={appBasicInfo.name}>{appBasicInfo.name}</span>
           </div>
           <AppTypeLabel className='system-2xs-medium-uppercase text-text-tertiary' type={app.app.mode} />
         </div>
       </div>
-      <div className="py-1 system-xs-regular text-text-tertiary">
+      <div className="system-xs-regular text-text-tertiary py-1">
         <div className='line-clamp-3'>
           {app.description}
         </div>
       </div>
-      <div className={cn('hidden absolute bottom-0 left-0 right-0 p-4 pt-8 group-hover:flex bg-gradient-to-t from-[60.27%] from-components-panel-gradient-2 to-transparent')}>
-        <div className={cn('flex items-center w-full space-x-2 h-8')}>
+      <div className={cn('from-components-panel-gradient-2 absolute bottom-0 left-0 right-0 hidden bg-gradient-to-t from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
+        <div className={cn('flex h-8 w-full items-center space-x-2')}>
           <Button variant='primary' className='grow' onClick={() => onCreate()}>
-            <PlusIcon className='w-4 h-4 mr-1' />
+            <PlusIcon className='mr-1 h-4 w-4' />
             <span className='text-xs'>{t('app.newApp.useTemplate')}</span>
           </Button>
         </div>
diff --git a/web/app/components/app/create-app-dialog/app-list/index.tsx b/web/app/components/app/create-app-dialog/app-list/index.tsx
index a545774f2c..74b204d098 100644
--- a/web/app/components/app/create-app-dialog/app-list/index.tsx
+++ b/web/app/components/app/create-app-dialog/app-list/index.tsx
@@ -167,12 +167,12 @@ const Apps = ({
   }
 
   return (
-    <div className='h-full flex flex-col'>
-      <div className='flex justify-between items-center py-3 border-b border-divider-burn'>
+    <div className='flex h-full flex-col'>
+      <div className='border-divider-burn flex items-center justify-between border-b py-3'>
         <div className='min-w-[180px] pl-5'>
           <span className='title-xl-semi-bold text-text-primary'>{t('app.newApp.startFromTemplate')}</span>
         </div>
-        <div className='flex-1 max-w-[548px] p-1.5 flex items-center rounded-xl shadow-md bg-components-panel-bg-blur border border-components-panel-border'>
+        <div className='bg-components-panel-bg-blur border-components-panel-border flex max-w-[548px] flex-1 items-center rounded-xl border p-1.5 shadow-md'>
           <AppTypeSelector value={currentType} onChange={setCurrentType} />
           <div className='h-[14px]'>
             <Divider type='vertical' />
@@ -180,29 +180,29 @@ const Apps = ({
           <Input
             showClearIcon
             wrapperClassName='w-full flex-1'
-            className='bg-transparent hover:bg-transparent focus:bg-transparent hover:border-transparent focus:border-transparent focus:shadow-none'
+            className='bg-transparent hover:border-transparent hover:bg-transparent focus:border-transparent focus:bg-transparent focus:shadow-none'
             placeholder={t('app.newAppFromTemplate.searchAllTemplate') as string}
             value={keywords}
             onChange={e => handleKeywordsChange(e.target.value)}
             onClear={() => handleKeywordsChange('')}
           />
         </div>
-        <div className='w-[180px] h-8'></div>
+        <div className='h-8 w-[180px]'></div>
       </div>
       <div className='relative flex flex-1 overflow-y-auto'>
-        {!searchKeywords && <div className='w-[200px] h-full p-4'>
+        {!searchKeywords && <div className='h-full w-[200px] p-4'>
           <Sidebar current={currCategory as AppCategories} onClick={(category) => { setCurrCategory(category) }} onCreateFromBlank={onCreateFromBlank} />
         </div>}
-        <div className='flex-1 h-full overflow-auto shrink-0 grow p-6 pt-2 border-l border-divider-burn'>
+        <div className='border-divider-burn h-full flex-1 shrink-0 grow overflow-auto border-l p-6 pt-2'>
           {searchFilteredList && searchFilteredList.length > 0 && <>
-            <div className='pt-4 pb-1'>
+            <div className='pb-1 pt-4'>
               {searchKeywords
                 ? <p className='title-md-semi-bold text-text-tertiary'>{searchFilteredList.length > 1 ? t('app.newApp.foundResults', { count: searchFilteredList.length }) : t('app.newApp.foundResult', { count: searchFilteredList.length })}</p>
                 : <AppCategoryLabel category={currCategory as AppCategories} className='title-md-semi-bold text-text-primary' />}
             </div>
             <div
               className={cn(
-                'grid content-start shrink-0 gap-3 grid-cols-1 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6',
+                '2k:grid-cols-6 grid shrink-0 grid-cols-1 content-start gap-3 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5',
               )}>
               {searchFilteredList.map(app => (
                 <AppCard
@@ -241,9 +241,9 @@ export default React.memo(Apps)
 
 function NoTemplateFound() {
   const { t } = useTranslation()
-  return <div className='p-4 rounded-lg w-full bg-workflow-process-bg'>
-    <div className='w-8 h-8 rounded-lg inline-flex items-center justify-center mb-2 shadow-lg bg-components-card-bg'>
-      <RiRobot2Line className='w-5 h-5 text-text-tertiary' />
+  return <div className='bg-workflow-process-bg w-full rounded-lg p-4'>
+    <div className='bg-components-card-bg mb-2 inline-flex h-8 w-8 items-center justify-center rounded-lg shadow-lg'>
+      <RiRobot2Line className='text-text-tertiary h-5 w-5' />
     </div>
     <p className='title-md-semi-bold text-text-primary'>{t('app.newApp.noTemplateFound')}</p>
     <p className='system-sm-regular text-text-tertiary'>{t('app.newApp.noTemplateFoundTip')}</p>
diff --git a/web/app/components/app/create-app-dialog/app-list/sidebar.tsx b/web/app/components/app/create-app-dialog/app-list/sidebar.tsx
index 73b34c7d02..28d35e8b1b 100644
--- a/web/app/components/app/create-app-dialog/app-list/sidebar.tsx
+++ b/web/app/components/app/create-app-dialog/app-list/sidebar.tsx
@@ -22,12 +22,12 @@ type SidebarProps = {
 
 export default function Sidebar({ current, onClick, onCreateFromBlank }: SidebarProps) {
   const { t } = useTranslation()
-  return <div className="w-full h-full flex flex-col">
+  return <div className="flex h-full w-full flex-col">
     <ul>
       <CategoryItem category={AppCategories.RECOMMENDED} active={current === AppCategories.RECOMMENDED} onClick={onClick} />
     </ul>
-    <div className='px-3 pt-2 pb-1 system-xs-medium-uppercase text-text-tertiary'>{t('app.newAppFromTemplate.byCategories')}</div>
-    <ul className='flex-grow flex flex-col gap-0.5'>
+    <div className='system-xs-medium-uppercase text-text-tertiary px-3 pb-1 pt-2'>{t('app.newAppFromTemplate.byCategories')}</div>
+    <ul className='flex grow flex-col gap-0.5'>
       <CategoryItem category={AppCategories.ASSISTANT} active={current === AppCategories.ASSISTANT} onClick={onClick} />
       <CategoryItem category={AppCategories.AGENT} active={current === AppCategories.AGENT} onClick={onClick} />
       <CategoryItem category={AppCategories.HR} active={current === AppCategories.HR} onClick={onClick} />
@@ -36,8 +36,8 @@ export default function Sidebar({ current, onClick, onCreateFromBlank }: Sidebar
       <CategoryItem category={AppCategories.WRITING} active={current === AppCategories.WRITING} onClick={onClick} />
     </ul>
     <Divider bgStyle='gradient' />
-    <div className='px-3 py-1 flex items-center gap-1 text-text-tertiary cursor-pointer' onClick={onCreateFromBlank}>
-      <RiStickyNoteAddLine className='w-3.5 h-3.5' />
+    <div className='text-text-tertiary flex cursor-pointer items-center gap-1 px-3 py-1' onClick={onCreateFromBlank}>
+      <RiStickyNoteAddLine className='h-3.5 w-3.5' />
       <span className='system-xs-regular'>{t('app.newApp.startFromBlank')}</span>
     </div>
   </div>
@@ -52,7 +52,7 @@ function CategoryItem({ category, active, onClick }: CategoryItemProps) {
   return <li
     className={classNames('p-1 pl-3 rounded-lg flex items-center gap-2 group cursor-pointer hover:bg-state-base-hover [&.active]:bg-state-base-active', active && 'active')}
     onClick={() => { onClick?.(category) }}>
-    <div className='w-5 h-5 inline-flex items-center justify-center rounded-md border border-divider-regular bg-components-icon-bg-midnight-solid group-[.active]:bg-components-icon-bg-blue-solid'>
+    <div className='border-divider-regular bg-components-icon-bg-midnight-solid group-[.active]:bg-components-icon-bg-blue-solid inline-flex h-5 w-5 items-center justify-center rounded-md border'>
       <AppCategoryIcon category={category} />
     </div>
     <AppCategoryLabel category={category}
@@ -74,18 +74,18 @@ type AppCategoryIconProps = {
 }
 function AppCategoryIcon({ category }: AppCategoryIconProps) {
   if (category === AppCategories.AGENT)
-    return <RiSpeakAiFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
+    return <RiSpeakAiFill className='text-components-avatar-shape-fill-stop-100 h-3.5 w-3.5' />
   if (category === AppCategories.ASSISTANT)
-    return <RiChatSmileAiFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
+    return <RiChatSmileAiFill className='text-components-avatar-shape-fill-stop-100 h-3.5 w-3.5' />
   if (category === AppCategories.HR)
-    return <RiPassPendingFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
+    return <RiPassPendingFill className='text-components-avatar-shape-fill-stop-100 h-3.5 w-3.5' />
   if (category === AppCategories.PROGRAMMING)
-    return <RiTerminalBoxFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
+    return <RiTerminalBoxFill className='text-components-avatar-shape-fill-stop-100 h-3.5 w-3.5' />
   if (category === AppCategories.RECOMMENDED)
-    return <RiThumbUpFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
+    return <RiThumbUpFill className='text-components-avatar-shape-fill-stop-100 h-3.5 w-3.5' />
   if (category === AppCategories.WRITING)
-    return <RiQuillPenAiFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
+    return <RiQuillPenAiFill className='text-components-avatar-shape-fill-stop-100 h-3.5 w-3.5' />
   if (category === AppCategories.WORKFLOW)
-    return <RiExchange2Fill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
-  return <RiAppsFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
+    return <RiExchange2Fill className='text-components-avatar-shape-fill-stop-100 h-3.5 w-3.5' />
+  return <RiAppsFill className='text-components-avatar-shape-fill-stop-100 h-3.5 w-3.5' />
 }
diff --git a/web/app/components/app/create-app-modal/index.tsx b/web/app/components/app/create-app-modal/index.tsx
index d218aa9a89..0fe8fec43f 100644
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/web/app/components/app/create-app-modal/index.tsx
@@ -93,17 +93,17 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
     handleCreateApp()
   })
   return <>
-    <div className='flex justify-center h-full overflow-y-auto overflow-x-hidden'>
-      <div className='flex-1 shrink-0 flex justify-end'>
+    <div className='flex h-full justify-center overflow-y-auto overflow-x-hidden'>
+      <div className='flex flex-1 shrink-0 justify-end'>
         <div className='px-10'>
-          <div className='w-full h-6 2xl:h-[139px]' />
-          <div className='pt-1 pb-6'>
+          <div className='h-6 w-full 2xl:h-[139px]' />
+          <div className='pb-6 pt-1'>
             <span className='title-2xl-semi-bold text-text-primary'>{t('app.newApp.startFromBlank')}</span>
           </div>
-          <div className='leading-6 mb-2'>
+          <div className='mb-2 leading-6'>
             <span className='system-sm-semibold text-text-secondary'>{t('app.newApp.chooseAppType')}</span>
           </div>
-          <div className='flex flex-col w-[660px] gap-4'>
+          <div className='flex w-[660px] flex-col gap-4'>
             <div>
               <div className='mb-2'>
                 <span className='system-2xs-medium-uppercase text-text-tertiary'>{t('app.newApp.forBeginners')}</span>
@@ -113,8 +113,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
                   active={appMode === 'chat'}
                   title={t('app.types.chatbot')}
                   description={t('app.newApp.chatbotShortDescription')}
-                  icon={<div className='w-6 h-6 bg-components-icon-bg-blue-solid rounded-md flex items-center justify-center'>
-                    <ChatBot className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
+                  icon={<div className='bg-components-icon-bg-blue-solid flex h-6 w-6 items-center justify-center rounded-md'>
+                    <ChatBot className='text-components-avatar-shape-fill-stop-100 h-4 w-4' />
                   </div>}
                   onClick={() => {
                     setAppMode('chat')
@@ -123,8 +123,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
                   active={appMode === 'agent-chat'}
                   title={t('app.types.agent')}
                   description={t('app.newApp.agentShortDescription')}
-                  icon={<div className='w-6 h-6 bg-components-icon-bg-violet-solid rounded-md flex items-center justify-center'>
-                    <Logic className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
+                  icon={<div className='bg-components-icon-bg-violet-solid flex h-6 w-6 items-center justify-center rounded-md'>
+                    <Logic className='text-components-avatar-shape-fill-stop-100 h-4 w-4' />
                   </div>}
                   onClick={() => {
                     setAppMode('agent-chat')
@@ -133,8 +133,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
                   active={appMode === 'completion'}
                   title={t('app.newApp.completeApp')}
                   description={t('app.newApp.completionShortDescription')}
-                  icon={<div className='w-6 h-6 bg-components-icon-bg-teal-solid rounded-md flex items-center justify-center'>
-                    <ListSparkle className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
+                  icon={<div className='bg-components-icon-bg-teal-solid flex h-6 w-6 items-center justify-center rounded-md'>
+                    <ListSparkle className='text-components-avatar-shape-fill-stop-100 h-4 w-4' />
                   </div>}
                   onClick={() => {
                     setAppMode('completion')
@@ -151,8 +151,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
                   active={appMode === 'advanced-chat'}
                   title={t('app.types.advanced')}
                   description={t('app.newApp.advancedShortDescription')}
-                  icon={<div className='w-6 h-6 bg-components-icon-bg-blue-light-solid rounded-md flex items-center justify-center'>
-                    <BubbleTextMod className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
+                  icon={<div className='bg-components-icon-bg-blue-light-solid flex h-6 w-6 items-center justify-center rounded-md'>
+                    <BubbleTextMod className='text-components-avatar-shape-fill-stop-100 h-4 w-4' />
                   </div>}
                   onClick={() => {
                     setAppMode('advanced-chat')
@@ -162,8 +162,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
                   active={appMode === 'workflow'}
                   title={t('app.types.workflow')}
                   description={t('app.newApp.workflowShortDescription')}
-                  icon={<div className='w-6 h-6 bg-components-icon-bg-indigo-solid rounded-md flex items-center justify-center'>
-                    <RiExchange2Fill className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
+                  icon={<div className='bg-components-icon-bg-indigo-solid flex h-6 w-6 items-center justify-center rounded-md'>
+                    <RiExchange2Fill className='text-components-avatar-shape-fill-stop-100 h-4 w-4' />
                   </div>}
                   onClick={() => {
                     setAppMode('workflow')
@@ -171,9 +171,9 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
               </div>
             </div>
             <Divider style={{ margin: 0 }} />
-            <div className='flex space-x-3 items-center'>
+            <div className='flex items-center space-x-3'>
               <div className='flex-1'>
-                <div className='h-6 flex items-center mb-1'>
+                <div className='mb-1 flex h-6 items-center'>
                   <label className='system-sm-semibold text-text-secondary'>{t('app.newApp.captionName')}</label>
                 </div>
                 <Input
@@ -201,7 +201,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
               />}
             </div>
             <div>
-              <div className='h-6 flex items-center mb-1'>
+              <div className='mb-1 flex h-6 items-center'>
                 <label className='system-sm-semibold text-text-secondary'>{t('app.newApp.captionDescription')}</label>
                 <span className='system-xs-regular text-text-tertiary ml-1'>({t('app.newApp.optional')})</span>
               </div>
@@ -213,11 +213,11 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
               />
             </div>
           </div>
-          <div className='pt-5 pb-10 flex justify-between items-center'>
-            <div className='flex gap-1 items-center system-xs-regular text-text-tertiary cursor-pointer' onClick={onCreateFromTemplate}>
+          <div className='flex items-center justify-between pb-10 pt-5'>
+            <div className='system-xs-regular text-text-tertiary flex cursor-pointer items-center gap-1' onClick={onCreateFromTemplate}>
               <span>{t('app.newApp.noIdeaTip')}</span>
               <div className='p-[1px]'>
-                <RiArrowRightLine className='w-3.5 h-3.5' />
+                <RiArrowRightLine className='h-3.5 w-3.5' />
               </div>
             </div>
             <div className='flex gap-2'>
@@ -225,28 +225,28 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
               <Button disabled={isAppsFull || !name} className='gap-1' variant="primary" onClick={handleCreateApp}>
                 <span>{t('app.newApp.Create')}</span>
                 <div className='flex gap-0.5'>
-                  <RiCommandLine size={14} className='p-0.5 system-kbd bg-components-kbd-bg-white rounded-sm' />
-                  <RiCornerDownLeftLine size={14} className='p-0.5 system-kbd bg-components-kbd-bg-white rounded-sm' />
+                  <RiCommandLine size={14} className='system-kbd bg-components-kbd-bg-white rounded-sm p-0.5' />
+                  <RiCornerDownLeftLine size={14} className='system-kbd bg-components-kbd-bg-white rounded-sm p-0.5' />
                 </div>
               </Button>
             </div>
           </div>
         </div>
       </div>
-      <div className='flex-1 shrink h-full flex justify-start relative overflow-hidden'>
-        <div className='h-6 2xl:h-[139px] absolute left-0 top-0 right-0 border-b border-b-divider-subtle'></div>
-        <div className='max-w-[760px] border-x border-x-divider-subtle'>
+      <div className='relative flex h-full flex-1 shrink justify-start overflow-hidden'>
+        <div className='border-b-divider-subtle absolute left-0 right-0 top-0 h-6 border-b 2xl:h-[139px]'></div>
+        <div className='border-x-divider-subtle max-w-[760px] border-x'>
           <div className='h-6 2xl:h-[139px]' />
           <AppPreview mode={appMode} />
-          <div className='absolute left-0 right-0 border-b border-b-divider-subtle'></div>
-          <div className='w-[664px] h-[448px] flex items-center justify-center' style={{ background: 'repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(16,24,40,0.04) 4px,transparent 3px, transparent 6px)' }}>
+          <div className='border-b-divider-subtle absolute left-0 right-0 border-b'></div>
+          <div className='flex h-[448px] w-[664px] items-center justify-center' style={{ background: 'repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(16,24,40,0.04) 4px,transparent 3px, transparent 6px)' }}>
             <AppScreenShot show={appMode === 'chat'} mode='chat' />
             <AppScreenShot show={appMode === 'advanced-chat'} mode='advanced-chat' />
             <AppScreenShot show={appMode === 'agent-chat'} mode='agent-chat' />
             <AppScreenShot show={appMode === 'completion'} mode='completion' />
             <AppScreenShot show={appMode === 'workflow'} mode='workflow' />
           </div>
-          <div className='absolute left-0 right-0 border-b border-b-divider-subtle'></div>
+          <div className='border-b-divider-subtle absolute left-0 right-0 border-b'></div>
         </div>
       </div>
     </div>
@@ -289,19 +289,19 @@ function AppTypeCard({ icon, title, beta = false, description, active, onClick }
   const { t } = useTranslation()
   return <div
     className={
-      cn(`w-[191px] h-[84px] p-3 border-[0.5px] relative box-content
-      rounded-xl border-components-option-card-option-border
-      bg-components-panel-on-panel-item-bg shadow-xs cursor-pointer hover:shadow-md`, active
-        ? 'outline outline-[1.5px] outline-components-option-card-option-selected-border shadow-md'
+      cn(`border-components-option-card-option-border bg-components-panel-on-panel-item-bg shadow-xs relative box-content h-[84px]
+      w-[191px] cursor-pointer
+      rounded-xl border-[0.5px] p-3 hover:shadow-md`, active
+        ? 'outline-components-option-card-option-selected-border shadow-md outline outline-[1.5px]'
         : '')
     }
     onClick={onClick}
   >
-    {beta && <div className='px-[5px] py-[3px]
-      rounded-[5px] min-w-[18px] absolute top-3 right-3
-      border border-divider-deep system-2xs-medium-uppercase text-text-tertiary'>{t('common.menus.status')}</div>}
+    {beta && <div className='border-divider-deep system-2xs-medium-uppercase
+      text-text-tertiary absolute right-3 top-3 min-w-[18px]
+      rounded-[5px] border px-[5px] py-[3px]'>{t('common.menus.status')}</div>}
     {icon}
-    <div className='system-sm-semibold text-text-secondary mt-2 mb-0.5'>{title}</div>
+    <div className='system-sm-semibold text-text-secondary mb-0.5 mt-2'>{title}</div>
     <div className='system-xs-regular text-text-tertiary'>{description}</div>
   </div>
 }
@@ -338,7 +338,7 @@ function AppPreview({ mode }: { mode: AppMode }) {
   const previewInfo = modeToPreviewInfoMap[mode]
   return <div className='px-8 py-4'>
     <h4 className='system-sm-semibold-uppercase text-text-secondary'>{previewInfo.title}</h4>
-    <div className='mt-1 system-xs-regular text-text-tertiary max-w-96 min-h-8'>
+    <div className='system-xs-regular text-text-tertiary mt-1 min-h-8 max-w-96'>
       <span>{previewInfo.description}</span>
       {previewInfo.link && <Link target='_blank' href={previewInfo.link} className='text-text-accent ml-1'>{t('app.newApp.learnMore')}</Link>}
     </div>
diff --git a/web/app/components/app/create-from-dsl-modal/index.tsx b/web/app/components/app/create-from-dsl-modal/index.tsx
index 26e175eb56..86ea24d6c5 100644
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -202,26 +202,26 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
   return (
     <>
       <Modal
-        className='p-0 w-[520px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'
+        className='border-components-panel-border bg-components-panel-bg w-[520px] rounded-2xl border-[0.5px] p-0 shadow-xl'
         isShow={show}
         onClose={() => { }}
       >
-        <div className='flex items-center justify-between pt-6 pl-6 pr-5 pb-3 text-text-primary title-2xl-semi-bold'>
+        <div className='text-text-primary title-2xl-semi-bold flex items-center justify-between pb-3 pl-6 pr-5 pt-6'>
           {t('app.importFromDSL')}
           <div
-            className='flex items-center w-8 h-8 cursor-pointer'
+            className='flex h-8 w-8 cursor-pointer items-center'
             onClick={() => onClose()}
           >
-            <RiCloseLine className='w-5 h-5 text-text-tertiary' />
+            <RiCloseLine className='text-text-tertiary h-5 w-5' />
           </div>
         </div>
-        <div className='flex items-center px-6 h-9 space-x-6 system-md-semibold text-text-tertiary border-b border-divider-subtle'>
+        <div className='system-md-semibold text-text-tertiary border-divider-subtle flex h-9 items-center space-x-6 border-b px-6'>
           {
             tabs.map(tab => (
               <div
                 key={tab.key}
                 className={cn(
-                  'relative flex items-center h-full cursor-pointer',
+                  'relative flex h-full cursor-pointer items-center',
                   currentTab === tab.key && 'text-text-primary',
                 )}
                 onClick={() => setCurrentTab(tab.key)}
@@ -229,7 +229,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
                 {tab.label}
                 {
                   currentTab === tab.key && (
-                    <div className='absolute bottom-0 w-full h-[2px] bg-util-colors-blue-brand-blue-brand-600'></div>
+                    <div className='bg-util-colors-blue-brand-blue-brand-600 absolute bottom-0 h-[2px] w-full'></div>
                   )
                 }
               </div>
@@ -249,7 +249,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
           {
             currentTab === CreateFromDSLModalTab.FROM_URL && (
               <div>
-                <div className='mb-1 system-md-semibold leading6'>DSL URL</div>
+                <div className='system-md-semibold leading6 mb-1'>DSL URL</div>
                 <Input
                   placeholder={t('app.importFromDSLUrlPlaceholder') || ''}
                   value={dslUrlValue}
@@ -274,9 +274,9 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         onClose={() => setShowErrorModal(false)}
         className='w-[480px]'
       >
-        <div className='flex pb-4 flex-col items-start gap-2 self-stretch'>
+        <div className='flex flex-col items-start gap-2 self-stretch pb-4'>
           <div className='text-text-primary title-2xl-semi-bold'>{t('app.newApp.appCreateDSLErrorTitle')}</div>
-          <div className='flex grow flex-col text-text-secondary system-md-regular'>
+          <div className='text-text-secondary system-md-regular flex grow flex-col'>
             <div>{t('app.newApp.appCreateDSLErrorPart1')}</div>
             <div>{t('app.newApp.appCreateDSLErrorPart2')}</div>
             <br />
@@ -284,7 +284,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
             <div>{t('app.newApp.appCreateDSLErrorPart4')}<span className='system-md-medium'>{versions?.systemVersion}</span></div>
           </div>
         </div>
-        <div className='flex pt-6 justify-end items-start gap-2 self-stretch'>
+        <div className='flex items-start justify-end gap-2 self-stretch pt-6'>
           <Button variant='secondary' onClick={() => setShowErrorModal(false)}>{t('app.newApp.Cancel')}</Button>
           <Button variant='primary' destructive onClick={onDSLConfirm}>{t('app.newApp.Confirm')}</Button>
         </div>
diff --git a/web/app/components/app/create-from-dsl-modal/uploader.tsx b/web/app/components/app/create-from-dsl-modal/uploader.tsx
index beb2b4b1a0..4e6332e044 100644
--- a/web/app/components/app/create-from-dsl-modal/uploader.tsx
+++ b/web/app/components/app/create-from-dsl-modal/uploader.tsx
@@ -102,35 +102,35 @@ const Uploader: FC<Props> = ({
       />
       <div ref={dropRef}>
         {!file && (
-          <div className={cn('flex items-center h-12 rounded-xl bg-gray-50 border border-dashed border-gray-200 text-sm font-normal', dragging && 'bg-[#F5F8FF] border border-[#B2CCFF]')}>
-            <div className='w-full flex items-center justify-center space-x-2'>
-              <UploadCloud01 className='w-6 h-6 mr-2' />
+          <div className={cn('flex h-12 items-center rounded-xl border border-dashed border-gray-200 bg-gray-50 text-sm font-normal', dragging && 'border border-[#B2CCFF] bg-[#F5F8FF]')}>
+            <div className='flex w-full items-center justify-center space-x-2'>
+              <UploadCloud01 className='mr-2 h-6 w-6' />
               <div className='text-gray-500'>
                 {t('datasetCreation.stepOne.uploader.button')}
-                <span className='pl-1 text-[#155eef] cursor-pointer' onClick={selectHandle}>{t('datasetDocuments.list.batchModal.browse')}</span>
+                <span className='cursor-pointer pl-1 text-[#155eef]' onClick={selectHandle}>{t('datasetDocuments.list.batchModal.browse')}</span>
               </div>
             </div>
-            {dragging && <div ref={dragRef} className='absolute w-full h-full top-0 left-0' />}
+            {dragging && <div ref={dragRef} className='absolute left-0 top-0 h-full w-full' />}
           </div>
         )}
         {file && (
-          <div className={cn('flex items-center rounded-lg bg-components-panel-on-panel-item-bg border-[0.5px] border-components-panel-border shadow-xs group', 'hover:bg-[#F5F8FF] hover:border-[#B2CCFF]')}>
-            <div className='flex p-3 justify-center items-center'>
-              <YamlIcon className="w-6 h-6 shrink-0" />
+          <div className={cn('bg-components-panel-on-panel-item-bg border-components-panel-border shadow-xs group flex items-center rounded-lg border-[0.5px]', 'hover:border-[#B2CCFF] hover:bg-[#F5F8FF]')}>
+            <div className='flex items-center justify-center p-3'>
+              <YamlIcon className="h-6 w-6 shrink-0" />
             </div>
-            <div className='flex py-1 pr-2 grow flex-col items-start gap-0.5'>
-              <span className='max-w-[calc(100%_-_30px)] text-ellipsis whitespace-nowrap overflow-hidden text-text-secondary font-inter text-[12px] font-medium leading-4'>{file.name}</span>
-              <div className='flex h-3 items-center gap-1 self-stretch text-text-tertiary font-inter text-[10px] font-medium leading-3 uppercase'>
+            <div className='flex grow flex-col items-start gap-0.5 py-1 pr-2'>
+              <span className='text-text-secondary font-inter max-w-[calc(100%_-_30px)] overflow-hidden text-ellipsis whitespace-nowrap text-[12px] font-medium leading-4'>{file.name}</span>
+              <div className='text-text-tertiary font-inter flex h-3 items-center gap-1 self-stretch text-[10px] font-medium uppercase leading-3'>
                 <span>YAML</span>
                 <span className='text-text-quaternary'>·</span>
                 <span>{formatFileSize(file.size)}</span>
               </div>
             </div>
-            <div className='hidden group-hover:flex items-center'>
+            <div className='hidden items-center group-hover:flex'>
               <Button onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
-              <div className='mx-2 w-px h-4 bg-gray-200' />
-              <div className='p-2 cursor-pointer' onClick={removeFile}>
-                <RiDeleteBinLine className='w-4 h-4 text-text-tertiary' />
+              <div className='mx-2 h-4 w-px bg-gray-200' />
+              <div className='cursor-pointer p-2' onClick={removeFile}>
+                <RiDeleteBinLine className='text-text-tertiary h-4 w-4' />
               </div>
             </div>
           </div>
diff --git a/web/app/components/app/duplicate-modal/index.tsx b/web/app/components/app/duplicate-modal/index.tsx
index 25a5cbf6c1..548dc94c11 100644
--- a/web/app/components/app/duplicate-modal/index.tsx
+++ b/web/app/components/app/duplicate-modal/index.tsx
@@ -97,7 +97,7 @@ const DuplicateAppModal = ({
           {isAppsFull && <AppsFull loc='app-duplicate-create' />}
         </div>
         <div className='flex flex-row-reverse'>
-          <Button disabled={isAppsFull} className='w-24 ml-2' variant='primary' onClick={submit}>{t('app.duplicate')}</Button>
+          <Button disabled={isAppsFull} className='ml-2 w-24' variant='primary' onClick={submit}>{t('app.duplicate')}</Button>
           <Button className='w-24' onClick={onHide}>{t('common.operation.cancel')}</Button>
         </div>
       </Modal>
diff --git a/web/app/components/app/log-annotation/index.tsx b/web/app/components/app/log-annotation/index.tsx
index 696cc19ba4..ce51e8aa1a 100644
--- a/web/app/components/app/log-annotation/index.tsx
+++ b/web/app/components/app/log-annotation/index.tsx
@@ -34,14 +34,14 @@ const LogAnnotation: FC<Props> = ({
 
   if (!appDetail) {
     return (
-      <div className='flex h-full items-center justify-center bg-background-body'>
+      <div className='bg-background-body flex h-full items-center justify-center'>
         <Loading />
       </div>
     )
   }
 
   return (
-    <div className='pt-3 px-6 h-full flex flex-col'>
+    <div className='flex h-full flex-col px-6 pt-3'>
       {appDetail.mode !== 'workflow' && (
         <TabSlider
           className='shrink-0'
@@ -52,7 +52,7 @@ const LogAnnotation: FC<Props> = ({
           options={options}
         />
       )}
-      <div className={cn('grow h-0', appDetail.mode !== 'workflow' && 'mt-3')}>
+      <div className={cn('h-0 grow', appDetail.mode !== 'workflow' && 'mt-3')}>
         {pageType === PageType.log && appDetail.mode !== 'workflow' && (<Log appDetail={appDetail} />)}
         {pageType === PageType.annotation && (<Annotation appDetail={appDetail} />)}
         {pageType === PageType.log && appDetail.mode === 'workflow' && (<WorkflowLog appDetail={appDetail} />)}
diff --git a/web/app/components/app/log/filter.tsx b/web/app/components/app/log/filter.tsx
index 787b7405c1..c718ac4c06 100644
--- a/web/app/components/app/log/filter.tsx
+++ b/web/app/components/app/log/filter.tsx
@@ -40,11 +40,11 @@ const Filter: FC<IFilterProps> = ({ isChatMode, appId, queryParams, setQueryPara
   if (!data)
     return null
   return (
-    <div className='flex flex-row flex-wrap gap-2 items-center mb-2'>
+    <div className='mb-2 flex flex-row flex-wrap items-center gap-2'>
       <Chip
         className='min-w-[150px]'
         panelClassName='w-[270px]'
-        leftIcon={<RiCalendarLine className='h-4 w-4 text-text-secondary' />}
+        leftIcon={<RiCalendarLine className='text-text-secondary h-4 w-4' />}
         value={queryParams.period}
         onSelect={(item) => {
           setQueryParams({ ...queryParams, period: item.value })
@@ -80,7 +80,7 @@ const Filter: FC<IFilterProps> = ({ isChatMode, appId, queryParams, setQueryPara
       />
       {isChatMode && (
         <>
-          <div className='w-px h-3.5 bg-divider-regular'></div>
+          <div className='bg-divider-regular h-3.5 w-px'></div>
           <Sort
             order={queryParams.sort_by?.startsWith('-') ? '-' : ''}
             value={queryParams.sort_by?.replace('-', '') || 'created_at'}
diff --git a/web/app/components/app/log/index.tsx b/web/app/components/app/log/index.tsx
index 592233facd..e7b609a9e3 100644
--- a/web/app/components/app/log/index.tsx
+++ b/web/app/components/app/log/index.tsx
@@ -37,10 +37,10 @@ const EmptyElement: FC<{ appUrl: string }> = ({ appUrl }) => {
   const pathname = usePathname()
   const pathSegments = pathname.split('/')
   pathSegments.pop()
-  return <div className='flex items-center justify-center h-full'>
-    <div className='bg-background-section-burn w-[560px] h-fit box-border px-5 py-4 rounded-2xl'>
-      <span className='text-text-secondary system-md-semibold'>{t('appLog.table.empty.element.title')}<ThreeDotsIcon className='inline relative -top-3 -left-1.5' /></span>
-      <div className='mt-2 text-text-tertiary system-sm-regular'>
+  return <div className='flex h-full items-center justify-center'>
+    <div className='bg-background-section-burn box-border h-fit w-[560px] rounded-2xl px-5 py-4'>
+      <span className='text-text-secondary system-md-semibold'>{t('appLog.table.empty.element.title')}<ThreeDotsIcon className='relative -left-1.5 -top-3 inline' /></span>
+      <div className='text-text-tertiary system-sm-regular mt-2'>
         <Trans
           i18nKey="appLog.table.empty.element.content"
           components={{ shareLink: <Link href={`${pathSegments.join('/')}/overview`} className='text-util-colors-blue-blue-600' />, testLink: <Link href={appUrl} className='text-util-colors-blue-blue-600' target='_blank' rel='noopener noreferrer' /> }}
@@ -101,9 +101,9 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
   const total = isChatMode ? chatConversations?.total : completionConversations?.total
 
   return (
-    <div className='grow flex flex-col h-full'>
-      <p className='shrink-0 text-text-tertiary system-sm-regular'>{t('appLog.description')}</p>
-      <div className='grow max-h-[calc(100%-16px)] flex flex-col py-4 flex-1'>
+    <div className='flex h-full grow flex-col'>
+      <p className='text-text-tertiary system-sm-regular shrink-0'>{t('appLog.description')}</p>
+      <div className='flex max-h-[calc(100%-16px)] flex-1 grow flex-col py-4'>
         <Filter isChatMode={isChatMode} appId={appDetail.id} queryParams={queryParams} setQueryParams={setQueryParams} />
         {total === undefined
           ? <Loading type='app' />
diff --git a/web/app/components/app/log/list.tsx b/web/app/components/app/log/list.tsx
index 2862eebfa7..21278c4d3f 100644
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@@ -72,8 +72,8 @@ const DrawerContext = createContext<IDrawerContext>({} as IDrawerContext)
 const HandThumbIconWithCount: FC<{ count: number; iconType: 'up' | 'down' }> = ({ count, iconType }) => {
   const classname = iconType === 'up' ? 'text-primary-600 bg-primary-50' : 'text-red-600 bg-red-50'
   const Icon = iconType === 'up' ? HandThumbUpIcon : HandThumbDownIcon
-  return <div className={`inline-flex items-center w-fit rounded-md p-1 text-xs ${classname} mr-1 last:mr-0`}>
-    <Icon className={'h-3 w-3 mr-0.5 rounded-md'} />
+  return <div className={`inline-flex w-fit items-center rounded-md p-1 text-xs ${classname} mr-1 last:mr-0`}>
+    <Icon className={'mr-0.5 h-3 w-3 rounded-md'} />
     {count > 0 ? count : null}
   </div>
 }
@@ -84,7 +84,7 @@ const statusTdRender = (statusCount: StatusCount) => {
 
   if (statusCount.partial_success + statusCount.failed === 0) {
     return (
-      <div className='inline-flex items-center gap-1 system-xs-semibold-uppercase'>
+      <div className='system-xs-semibold-uppercase inline-flex items-center gap-1'>
         <Indicator color={'green'} />
         <span className='text-util-colors-green-green-600'>Success</span>
       </div>
@@ -92,7 +92,7 @@ const statusTdRender = (statusCount: StatusCount) => {
   }
   else if (statusCount.failed === 0) {
     return (
-      <div className='inline-flex items-center gap-1 system-xs-semibold-uppercase'>
+      <div className='system-xs-semibold-uppercase inline-flex items-center gap-1'>
         <Indicator color={'green'} />
         <span className='text-util-colors-green-green-600'>Partial Success</span>
       </div>
@@ -100,7 +100,7 @@ const statusTdRender = (statusCount: StatusCount) => {
   }
   else {
     return (
-      <div className='inline-flex items-center gap-1 system-xs-semibold-uppercase'>
+      <div className='system-xs-semibold-uppercase inline-flex items-center gap-1'>
         <Indicator color={'red'} />
         <span className='text-util-colors-red-red-600'>{statusCount.failed} {`${statusCount.failed > 1 ? 'Failures' : 'Failure'}`}</span>
       </div>
@@ -360,13 +360,13 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
   }, [])
 
   return (
-    <div ref={ref} className='rounded-xl border-[0.5px] border-components-panel-border h-full flex flex-col'>
+    <div ref={ref} className='border-components-panel-border flex h-full flex-col rounded-xl border-[0.5px]'>
       {/* Panel Header */}
-      <div className='shrink-0 pl-4 pt-3 pr-3 pb-2 flex items-center gap-2 bg-components-panel-bg rounded-t-xl'>
+      <div className='bg-components-panel-bg flex shrink-0 items-center gap-2 rounded-t-xl pb-2 pl-4 pr-3 pt-3'>
         <div className='shrink-0'>
-          <div className='mb-0.5 text-text-primary system-xs-semibold-uppercase'>{isChatMode ? t('appLog.detail.conversationId') : t('appLog.detail.time')}</div>
+          <div className='text-text-primary system-xs-semibold-uppercase mb-0.5'>{isChatMode ? t('appLog.detail.conversationId') : t('appLog.detail.time')}</div>
           {isChatMode && (
-            <div className='flex items-center text-text-secondary system-2xs-regular-uppercase'>
+            <div className='text-text-secondary system-2xs-regular-uppercase flex items-center'>
               <Tooltip
                 popupContent={detail.id}
               >
@@ -379,16 +379,16 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
             <div className='text-text-secondary system-2xs-regular-uppercase'>{formatTime(detail.created_at, t('appLog.dateTimeFormat') as string)}</div>
           )}
         </div>
-        <div className='grow flex items-center flex-wrap gap-y-1 justify-end'>
+        <div className='flex grow flex-wrap items-center justify-end gap-y-1'>
           {!isAdvanced && <ModelInfo model={detail.model_config.model} />}
         </div>
         <ActionButton size='l' onClick={onClose}>
-          <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+          <RiCloseLine className='text-text-tertiary h-4 w-4' />
         </ActionButton>
       </div>
       {/* Panel Body */}
-      <div className='shrink-0 pt-1 px-1'>
-        <div className='p-3 pb-2 rounded-t-xl bg-background-section-burn'>
+      <div className='shrink-0 px-1 pt-1'>
+        <div className='bg-background-section-burn rounded-t-xl p-3 pb-2'>
           {(varList.length > 0 || (!isChatMode && message_files.length > 0)) && (
             <VarPanel
               varList={varList}
@@ -397,12 +397,12 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
           )}
         </div>
       </div>
-      <div className='grow mx-1 mb-1 bg-background-section-burn rounded-b-xl overflow-auto'>
+      <div className='bg-background-section-burn mx-1 mb-1 grow overflow-auto rounded-b-xl'>
         {!isChatMode
           ? <div className="px-6 py-4">
             <div className='flex h-[18px] items-center space-x-3'>
               <div className='text-text-tertiary system-xs-semibold-uppercase'>{t('appLog.table.header.output')}</div>
-              <div className='grow h-[1px]' style={{
+              <div className='h-[1px] grow' style={{
                 background: 'linear-gradient(270deg, rgba(243, 244, 246, 0) 0%, rgb(243, 244, 246) 100%)',
               }}></div>
             </div>
@@ -424,7 +424,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
             />
           </div>
           : threadChatItems.length < 8
-            ? <div className="pt-4 mb-4">
+            ? <div className="mb-4 pt-4">
               <Chat
                 config={{
                   appId: appDetail?.id,
@@ -464,7 +464,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
                 dataLength={threadChatItems.length}
                 next={fetchData}
                 hasMore={hasMore}
-                loader={<div className='text-center text-text-tertiary system-xs-regular'>{t('appLog.detail.loading')}...</div>}
+                loader={<div className='text-text-tertiary system-xs-regular text-center'>{t('appLog.detail.loading')}...</div>}
                 // endMessage={<div className='text-center'>Nothing more to show</div>}
                 // below props only if you need pull down functionality
                 refreshFunction={fetchData}
@@ -645,8 +645,8 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
     return (
       <Tooltip
         popupContent={
-          <span className='text-xs text-text-tertiary inline-flex items-center'>
-            <RiEditFill className='w-3 h-3 mr-1' />{`${t('appLog.detail.annotationTip', { user: annotation?.account?.name })} ${formatTime(annotation?.created_at || dayjs().unix(), 'MM-DD hh:mm A')}`}
+          <span className='text-text-tertiary inline-flex items-center text-xs'>
+            <RiEditFill className='mr-1 h-3 w-3' />{`${t('appLog.detail.annotationTip', { user: annotation?.account?.name })} ${formatTime(annotation?.created_at || dayjs().unix(), 'MM-DD hh:mm A')}`}
           </span>
         }
         popupClassName={(isHighlight && !isChatMode) ? '' : '!hidden'}
@@ -674,15 +674,15 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
       <table className={cn('mt-2 w-full min-w-[440px] border-collapse border-0')}>
         <thead className='system-xs-medium-uppercase text-text-tertiary'>
           <tr>
-            <td className='pl-2 pr-1 w-5 rounded-l-lg bg-background-section-burn whitespace-nowrap'></td>
-            <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{isChatMode ? t('appLog.table.header.summary') : t('appLog.table.header.input')}</td>
-            <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.endUser')}</td>
-            {isChatflow && <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.status')}</td>}
-            <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{isChatMode ? t('appLog.table.header.messageCount') : t('appLog.table.header.output')}</td>
-            <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.userRate')}</td>
-            <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.adminRate')}</td>
-            <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.updatedTime')}</td>
-            <td className='pl-3 py-1.5 rounded-r-lg bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.time')}</td>
+            <td className='bg-background-section-burn w-5 whitespace-nowrap rounded-l-lg pl-2 pr-1'></td>
+            <td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{isChatMode ? t('appLog.table.header.summary') : t('appLog.table.header.input')}</td>
+            <td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appLog.table.header.endUser')}</td>
+            {isChatflow && <td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appLog.table.header.status')}</td>}
+            <td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{isChatMode ? t('appLog.table.header.messageCount') : t('appLog.table.header.output')}</td>
+            <td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appLog.table.header.userRate')}</td>
+            <td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appLog.table.header.adminRate')}</td>
+            <td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appLog.table.header.updatedTime')}</td>
+            <td className='bg-background-section-burn whitespace-nowrap rounded-r-lg py-1.5 pl-3'>{t('appLog.table.header.time')}</td>
           </tr>
         </thead>
         <tbody className="text-text-secondary system-sm-regular">
@@ -692,23 +692,23 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
             const rightValue = get(log, isChatMode ? 'message_count' : 'message.answer')
             return <tr
               key={log.id}
-              className={cn('border-b border-divider-subtle hover:bg-background-default-hover cursor-pointer', currentConversation?.id !== log.id ? '' : 'bg-background-default-hover')}
+              className={cn('border-divider-subtle hover:bg-background-default-hover cursor-pointer border-b', currentConversation?.id !== log.id ? '' : 'bg-background-default-hover')}
               onClick={() => {
                 setShowDrawer(true)
                 setCurrentConversation(log)
               }}>
               <td className='h-4'>
                 {!log.read_at && (
-                  <div className='p-3 pr-0.5 flex items-center'>
-                    <span className='inline-block bg-util-colors-blue-blue-500 h-1.5 w-1.5 rounded'></span>
+                  <div className='flex items-center p-3 pr-0.5'>
+                    <span className='bg-util-colors-blue-blue-500 inline-block h-1.5 w-1.5 rounded'></span>
                   </div>
                 )}
               </td>
-              <td className='p-3 pr-2 w-[160px]' style={{ maxWidth: isChatMode ? 300 : 200 }}>
+              <td className='w-[160px] p-3 pr-2' style={{ maxWidth: isChatMode ? 300 : 200 }}>
                 {renderTdValue(leftValue || t('appLog.table.empty.noChat'), !leftValue, isChatMode && log.annotated)}
               </td>
               <td className='p-3 pr-2'>{renderTdValue(endUser || defaultValue, !endUser)}</td>
-              {isChatflow && <td className='p-3 pr-2 w-[160px]' style={{ maxWidth: isChatMode ? 300 : 200 }}>
+              {isChatflow && <td className='w-[160px] p-3 pr-2' style={{ maxWidth: isChatMode ? 300 : 200 }}>
                 {statusTdRender(log.status_count)}
               </td>}
               <td className='p-3 pr-2' style={{ maxWidth: isChatMode ? 100 : 200 }}>
diff --git a/web/app/components/app/log/model-info.tsx b/web/app/components/app/log/model-info.tsx
index b0fb0ec757..161dbbdb4d 100644
--- a/web/app/components/app/log/model-info.tsx
+++ b/web/app/components/app/log/model-info.tsx
@@ -57,9 +57,9 @@ const ModelInfo: FC<Props> = ({
 
   return (
     <div className={cn('flex items-center rounded-lg')}>
-      <div className='shrink-0 flex items-center gap-1 mr-px h-8 pl-1.5 pr-2 rounded-l-lg bg-components-input-bg-normal'>
+      <div className='bg-components-input-bg-normal mr-px flex h-8 shrink-0 items-center gap-1 rounded-l-lg pl-1.5 pr-2'>
         <ModelIcon
-          className='!w-5 !h-5'
+          className='!h-5 !w-5'
           provider={currentProvider}
           modelName={currentModel?.model}
         />
@@ -80,15 +80,15 @@ const ModelInfo: FC<Props> = ({
             className='block'
           >
             <div className={cn(
-              'p-2 rounded-r-lg bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover cursor-pointer',
+              'bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover cursor-pointer rounded-r-lg p-2',
               open && 'bg-components-button-tertiary-bg-hover',
             )}>
-              <RiInformation2Line className='h-4 w-4 text-text-tertiary' />
+              <RiInformation2Line className='text-text-tertiary h-4 w-4' />
             </div>
           </PortalToFollowElemTrigger>
           <PortalToFollowElemContent className='z-[1002]'>
-            <div className='relative w-[280px] pt-3 px-4 pb-2 bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl overflow-hidden'>
-              <div className='mb-1 h-6 text-text-secondary system-sm-semibold-uppercase'>{t('appLog.detail.modelParams')}</div>
+            <div className='bg-components-panel-bg border-components-panel-border relative w-[280px] overflow-hidden rounded-2xl border-[0.5px] px-4 pb-2 pt-3 shadow-xl'>
+              <div className='text-text-secondary system-sm-semibold-uppercase mb-1 h-6'>{t('appLog.detail.modelParams')}</div>
               <div className='py-1'>
                 {['temperature', 'top_p', 'presence_penalty', 'max_tokens', 'stop'].map((param: string, index: number) => {
                   return <div className='flex justify-between py-1.5' key={index}>
diff --git a/web/app/components/app/log/var-panel.tsx b/web/app/components/app/log/var-panel.tsx
index eef1a1a4c0..83408ff155 100644
--- a/web/app/components/app/log/var-panel.tsx
+++ b/web/app/components/app/log/var-panel.tsx
@@ -25,40 +25,40 @@ const VarPanel: FC<Props> = ({
   const [imagePreviewUrl, setImagePreviewUrl] = useState('')
 
   return (
-    <div className='rounded-[10px] border border-divider-subtle bg-chat-bubble-bg'>
+    <div className='border-divider-subtle bg-chat-bubble-bg rounded-[10px] border'>
       <div
-        className={cn('flex items-center gap-1 px-3 pt-2.5 pb-2 border-b border-divider-subtle text-text-secondary cursor-pointer', isCollapse && 'pb-2.5 border-0')}
+        className={cn('border-divider-subtle text-text-secondary flex cursor-pointer items-center gap-1 border-b px-3 pb-2 pt-2.5', isCollapse && 'border-0 pb-2.5')}
         onClick={toggleCollapse}
       >
-        <Variable02 className='w-4 h-4' />
-        <div className='grow system-md-medium'>{t('appLog.detail.variables')}</div>
+        <Variable02 className='h-4 w-4' />
+        <div className='system-md-medium grow'>{t('appLog.detail.variables')}</div>
         {
           isCollapse
-            ? <RiArrowRightSLine className='w-4 h-4' />
-            : <RiArrowDownSLine className='w-4 h-4' />
+            ? <RiArrowRightSLine className='h-4 w-4' />
+            : <RiArrowDownSLine className='h-4 w-4' />
         }
       </div>
       {!isCollapse && (
-        <div className='p-3 flex flex-col gap-2 max-h-[500px] overflow-y-auto'>
+        <div className='flex max-h-[500px] flex-col gap-2 overflow-y-auto p-3'>
           {varList.map(({ label, value }, index) => (
-            <div key={index} className='flex py-2 system-xs-medium'>
-              <div className='shrink-0 w-[128px] flex text-text-accent'>
+            <div key={index} className='system-xs-medium flex py-2'>
+              <div className='text-text-accent flex w-[128px] shrink-0'>
                 <span className='shrink-0 opacity-60'>{'{{'}</span>
                 <span className='truncate'>{label}</span>
                 <span className='shrink-0 opacity-60'>{'}}'}</span>
               </div>
-              <div className='pl-2.5 whitespace-pre-wrap text-text-secondary'>{value}</div>
+              <div className='text-text-secondary whitespace-pre-wrap pl-2.5'>{value}</div>
             </div>
           ))}
 
           {message_files.length > 0 && (
             <div className='mt-1 flex py-2'>
-              <div className='shrink-0 w-[128px] system-xs-medium text-text-tertiary'>{t('appLog.detail.uploadImages')}</div>
+              <div className='system-xs-medium text-text-tertiary w-[128px] shrink-0'>{t('appLog.detail.uploadImages')}</div>
               <div className="flex space-x-2">
                 {message_files.map((url, index) => (
                   <div
                     key={index}
-                    className="ml-2.5 w-16 h-16 rounded-lg bg-no-repeat bg-cover bg-center cursor-pointer"
+                    className="ml-2.5 h-16 w-16 cursor-pointer rounded-lg bg-cover bg-center bg-no-repeat"
                     style={{ backgroundImage: `url(${url})` }}
                     onClick={() => setImagePreviewUrl(url)}
                   />
diff --git a/web/app/components/app/overview/apikey-info-panel/index.tsx b/web/app/components/app/overview/apikey-info-panel/index.tsx
index 2ca098a313..f6ae7983ae 100644
--- a/web/app/components/app/overview/apikey-info-panel/index.tsx
+++ b/web/app/components/app/overview/apikey-info-panel/index.tsx
@@ -27,8 +27,8 @@ const APIKeyInfoPanel: FC = () => {
     return null
 
   return (
-    <div className={cn('bg-components-panel-bg border-components-panel-border', 'mb-6 relative rounded-2xl shadow-md border p-8 ')}>
-      <div className={cn('text-[24px] text-text-primary font-semibold', isCloud ? 'flex items-center h-8 space-x-1' : 'leading-8 mb-6')}>
+    <div className={cn('bg-components-panel-bg border-components-panel-border', 'relative mb-6 rounded-2xl border p-8 shadow-md ')}>
+      <div className={cn('text-text-primary text-[24px] font-semibold', isCloud ? 'flex h-8 items-center space-x-1' : 'mb-6 leading-8')}>
         {isCloud && <em-emoji id={'😀'} />}
         {isCloud
           ? (
@@ -42,7 +42,7 @@ const APIKeyInfoPanel: FC = () => {
           )}
       </div>
       {isCloud && (
-        <div className='mt-1 text-sm text-text-tertiary font-normal'>{t(`appOverview.apiKeyInfo.cloud.${'trial'}.description`)}</div>
+        <div className='text-text-tertiary mt-1 text-sm font-normal'>{t(`appOverview.apiKeyInfo.cloud.${'trial'}.description`)}</div>
       )}
       <Button
         variant='primary'
@@ -50,22 +50,22 @@ const APIKeyInfoPanel: FC = () => {
         onClick={() => setShowAccountSettingModal({ payload: 'provider' })}
       >
         <div className='text-sm font-medium'>{t('appOverview.apiKeyInfo.setAPIBtn')}</div>
-        <LinkExternal02 className='w-4 h-4' />
+        <LinkExternal02 className='h-4 w-4' />
       </Button>
       {!isCloud && (
         <a
-          className='mt-2 flex items-center h-[26px] text-xs  font-medium text-[#155EEF] p-1 space-x-1'
+          className='mt-2 flex h-[26px] items-center space-x-1  p-1 text-xs font-medium text-[#155EEF]'
           href='https://cloud.dify.ai/apps'
           target='_blank' rel='noopener noreferrer'
         >
           <div>{t('appOverview.apiKeyInfo.tryCloud')}</div>
-          <LinkExternal02 className='w-3 h-3' />
+          <LinkExternal02 className='h-3 w-3' />
         </a>
       )}
       <div
         onClick={() => setIsShow(false)}
-        className='absolute right-4 top-4 flex items-center justify-center w-8 h-8 cursor-pointer '>
-        <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+        className='absolute right-4 top-4 flex h-8 w-8 cursor-pointer items-center justify-center '>
+        <RiCloseLine className='text-text-tertiary h-4 w-4' />
       </div>
     </div>
   )
diff --git a/web/app/components/app/overview/appCard.tsx b/web/app/components/app/overview/appCard.tsx
index 39800ab634..ff2175a68e 100644
--- a/web/app/components/app/overview/appCard.tsx
+++ b/web/app/components/app/overview/appCard.tsx
@@ -130,11 +130,11 @@ function AppCard({
   return (
     <div
       className={
-        `${isInPanel ? 'border-l-[0.5px] border-t' : 'shadow-xs border-[0.5px]'} rounded-xl border-effects-highlight w-full max-w-full ${className ?? ''}`}
+        `${isInPanel ? 'border-l-[0.5px] border-t' : 'shadow-xs border-[0.5px]'} border-effects-highlight w-full max-w-full rounded-xl ${className ?? ''}`}
     >
       <div className={`${customBgColor ?? 'bg-background-default'} rounded-xl`}>
-        <div className='flex flex-col p-3 justify-center items-start gap-3 self-stretch border-b-[0.5px] border-divider-subtle w-full'>
-          <div className='flex items-center gap-3 self-stretch w-full'>
+        <div className='border-divider-subtle flex w-full flex-col items-start justify-center gap-3 self-stretch border-b-[0.5px] p-3'>
+          <div className='flex w-full items-center gap-3 self-stretch'>
             <AppBasic
               iconType={cardType}
               icon={appInfo.icon}
@@ -156,15 +156,15 @@ function AppCard({
             </div>
             <Switch defaultValue={runningStatus} onChange={onChangeStatus} disabled={toggleDisabled} />
           </div>
-          <div className='flex flex-col justify-center items-start self-stretch'>
-            <div className="pb-1 system-xs-medium text-text-tertiary">
+          <div className='flex flex-col items-start justify-center self-stretch'>
+            <div className="system-xs-medium text-text-tertiary pb-1">
               {isApp
                 ? t('appOverview.overview.appInfo.accessibleAddress')
                 : t('appOverview.overview.apiInfo.accessibleAddress')}
             </div>
-            <div className="w-full h-9 pl-2 p-1 bg-components-input-bg-normal rounded-lg items-center inline-flex gap-0.5">
-              <div className="h-4 px-1 justify-start items-start gap-2 flex flex-1 min-w-0">
-                <div className="text-text-secondary text-xs font-medium text-ellipsis overflow-hidden whitespace-nowrap">
+            <div className="bg-components-input-bg-normal inline-flex h-9 w-full items-center gap-0.5 rounded-lg p-1 pl-2">
+              <div className="flex h-4 min-w-0 flex-1 items-start justify-start gap-2 px-1">
+                <div className="text-text-secondary overflow-hidden text-ellipsis whitespace-nowrap text-xs font-medium">
                   {isApp ? appUrl : apiUrl}
                 </div>
               </div>
@@ -172,8 +172,8 @@ function AppCard({
                 content={isApp ? appUrl : apiUrl}
                 className={'!size-6'}
               />
-              {isApp && <ShareQRCode content={isApp ? appUrl : apiUrl} className='z-50 !size-6 hover:bg-state-base-hover rounded-md' selectorId={randomString(8)} />}
-              {isApp && <Divider type="vertical" className="!h-3.5 shrink-0 !mx-0.5" />}
+              {isApp && <ShareQRCode content={isApp ? appUrl : apiUrl} className='hover:bg-state-base-hover z-50 !size-6 rounded-md' selectorId={randomString(8)} />}
+              {isApp && <Divider type="vertical" className="!mx-0.5 !h-3.5 shrink-0" />}
               {/* button copy link/ button regenerate */}
               {showConfirmDelete && (
                 <Confirm
@@ -193,12 +193,12 @@ function AppCard({
                   popupContent={t('appOverview.overview.appInfo.regenerate') || ''}
                 >
                   <div
-                    className="w-6 h-6 cursor-pointer hover:bg-state-base-hover rounded-md"
+                    className="hover:bg-state-base-hover h-6 w-6 cursor-pointer rounded-md"
                     onClick={() => setShowConfirmDelete(true)}
                   >
                     <div
                       className={
-                        `w-full h-full ${style.refreshIcon} ${genLoading ? style.generateLogo : ''}`}
+                        `h-full w-full ${style.refreshIcon} ${genLoading ? style.generateLogo : ''}`}
                     ></div>
                   </div>
                 </Tooltip>
@@ -206,7 +206,7 @@ function AppCard({
             </div>
           </div>
         </div>
-        <div className={'flex p-3 items-center gap-1 self-stretch'}>
+        <div className={'flex items-center gap-1 self-stretch p-3'}>
           {!isApp && <SecretKeyButton appId={appInfo.id} />}
           {OPERATIONS_MAP[cardType].map((op) => {
             const disabled
diff --git a/web/app/components/app/overview/appChart.tsx b/web/app/components/app/overview/appChart.tsx
index 3d8de9077a..85b8b00b81 100644
--- a/web/app/components/app/overview/appChart.tsx
+++ b/web/app/components/app/overview/appChart.tsx
@@ -230,7 +230,7 @@ const Chart: React.FC<IChartProps> = ({
   const sumData = isAvg ? (sum(yData) / yData.length) : sum(yData)
 
   return (
-    <div className={`flex flex-col w-full px-6 py-4 rounded-xl bg-components-chart-bg shadow-xs ${className ?? ''}`}>
+    <div className={`bg-components-chart-bg shadow-xs flex w-full flex-col rounded-xl px-6 py-4 ${className ?? ''}`}>
       <div className='mb-3'>
         <Basic name={title} type={timePeriod} hoverTip={explanation} />
       </div>
@@ -241,7 +241,7 @@ const Chart: React.FC<IChartProps> = ({
           type={!CHART_TYPE_CONFIG[chartType].showTokens
             ? ''
             : <span>{t('appOverview.analysis.tokenUsage.consumed')} Tokens<span className='text-sm'>
-              <span className='ml-1 text-text-tertiary'>(</span>
+              <span className='text-text-tertiary ml-1'>(</span>
               <span className='text-orange-400'>~{sum(statistics.map(item => Number.parseFloat(get(item, 'total_price', '0')))).toLocaleString('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 4 })}</span>
               <span className='text-text-tertiary'>)</span>
             </span></span>}
diff --git a/web/app/components/app/overview/customize/index.tsx b/web/app/components/app/overview/customize/index.tsx
index 2925ba41ee..bb04eb8779 100644
--- a/web/app/components/app/overview/customize/index.tsx
+++ b/web/app/components/app/overview/customize/index.tsx
@@ -21,7 +21,7 @@ type IShareLinkProps = {
 }
 
 const StepNum: FC<{ children: React.ReactNode }> = ({ children }) =>
-  <div className='h-7 w-7 flex justify-center items-center shrink-0 mr-3 text-text-accent bg-util-colors-blue-blue-50 rounded-2xl'>
+  <div className='text-text-accent bg-util-colors-blue-blue-50 mr-3 flex h-7 w-7 shrink-0 items-center justify-center rounded-2xl'>
     {children}
   </div>
 
@@ -51,17 +51,17 @@ const CustomizeModal: FC<IShareLinkProps> = ({
     description={t(`${prefixCustomize}.explanation`)}
     isShow={isShow}
     onClose={onClose}
-    className='!max-w-2xl w-[640px]'
+    className='w-[640px] !max-w-2xl'
     closable={true}
   >
-    <div className='w-full mt-4 px-6 py-5 border-components-panel-border rounded-lg border-[0.5px]'>
+    <div className='border-components-panel-border mt-4 w-full rounded-lg border-[0.5px] px-6 py-5'>
       <Tag bordered={true} hideBg={true} className='text-text-accent-secondary border-text-accent-secondary uppercase'>{t(`${prefixCustomize}.way`)} 1</Tag>
-      <p className='my-2 system-sm-medium text-text-secondary'>{t(`${prefixCustomize}.way1.name`)}</p>
+      <p className='system-sm-medium text-text-secondary my-2'>{t(`${prefixCustomize}.way1.name`)}</p>
       <div className='flex py-4'>
         <StepNum>1</StepNum>
         <div className='flex flex-col'>
           <div className='text-text-primary'>{t(`${prefixCustomize}.way1.step1`)}</div>
-          <div className='text-text-tertiary text-xs mt-1 mb-2'>{t(`${prefixCustomize}.way1.step1Tip`)}</div>
+          <div className='text-text-tertiary mb-2 mt-1 text-xs'>{t(`${prefixCustomize}.way1.step1Tip`)}</div>
           <a href={`https://github.com/langgenius/${isChatApp ? 'webapp-conversation' : 'webapp-text-generator'}`} target='_blank' rel='noopener noreferrer'>
             <Button><GithubIcon className='text-text-secondary mr-2' />{t(`${prefixCustomize}.way1.step1Operation`)}</Button>
           </a>
@@ -71,10 +71,10 @@ const CustomizeModal: FC<IShareLinkProps> = ({
         <StepNum>2</StepNum>
         <div className='flex flex-col'>
           <div className='text-text-primary'>{t(`${prefixCustomize}.way1.step3`)}</div>
-          <div className='text-text-tertiary text-xs mt-1 mb-2'>{t(`${prefixCustomize}.way1.step2Tip`)}</div>
+          <div className='text-text-tertiary mb-2 mt-1 text-xs'>{t(`${prefixCustomize}.way1.step2Tip`)}</div>
           <a href="https://vercel.com/docs/concepts/deployments/git/vercel-for-github" target='_blank' rel='noopener noreferrer'>
             <Button>
-              <div className='mr-1.5 border-solid border-t-0 border-r-[7px] border-l-[7px] border-b-[12px] border-r-transparent border-text-primary border-l-transparent border-t-transparent'></div>
+              <div className='border-text-primary mr-1.5 border-b-[12px] border-l-[7px] border-r-[7px] border-t-0 border-solid border-l-transparent border-r-transparent border-t-transparent'></div>
               <span>{t(`${prefixCustomize}.way1.step2Operation`)}</span>
             </Button>
           </a>
@@ -82,10 +82,10 @@ const CustomizeModal: FC<IShareLinkProps> = ({
       </div>
       <div className='flex py-4'>
         <StepNum>3</StepNum>
-        <div className='flex flex-col w-full overflow-hidden'>
+        <div className='flex w-full flex-col overflow-hidden'>
           <div className='text-text-primary'>{t(`${prefixCustomize}.way1.step3`)}</div>
-          <div className='text-text-tertiary text-xs mt-1 mb-2'>{t(`${prefixCustomize}.way1.step3Tip`)}</div>
-          <pre className='overflow-x-scroll box-border py-3 px-4 bg-background-section text-xs font-medium rounded-lg select-text text-text-secondary border-[0.5px] border-components-panel-border'>
+          <div className='text-text-tertiary mb-2 mt-1 text-xs'>{t(`${prefixCustomize}.way1.step3Tip`)}</div>
+          <pre className='bg-background-section text-text-secondary border-components-panel-border box-border select-text overflow-x-scroll rounded-lg border-[0.5px] px-4 py-3 text-xs font-medium'>
             NEXT_PUBLIC_APP_ID={`'${appId}'`} <br />
             NEXT_PUBLIC_APP_KEY={'\'<Web API Key From Dify>\''} <br />
             NEXT_PUBLIC_API_URL={`'${api_base_url}'`}
@@ -94,9 +94,9 @@ const CustomizeModal: FC<IShareLinkProps> = ({
       </div>
 
     </div>
-    <div className='w-full mt-4 px-6 py-5 border-components-panel-border rounded-lg border-[0.5px]'>
+    <div className='border-components-panel-border mt-4 w-full rounded-lg border-[0.5px] px-6 py-5'>
       <Tag bordered={true} hideBg={true} className='text-text-accent-secondary border-text-accent-secondary uppercase'>{t(`${prefixCustomize}.way`)} 2</Tag>
-      <p className='my-2 system-sm-medium text-text-secondary'>{t(`${prefixCustomize}.way2.name`)}</p>
+      <p className='system-sm-medium text-text-secondary my-2'>{t(`${prefixCustomize}.way2.name`)}</p>
       <Button
         className='mt-2'
         onClick={() =>
@@ -109,8 +109,8 @@ const CustomizeModal: FC<IShareLinkProps> = ({
           )
         }
       >
-        <span className='text-sm text-text-secondary'>{t(`${prefixCustomize}.way2.operation`)}</span>
-        <ArrowTopRightOnSquareIcon className='w-4 h-4 ml-1 text-text-secondary shrink-0' />
+        <span className='text-text-secondary text-sm'>{t(`${prefixCustomize}.way2.operation`)}</span>
+        <ArrowTopRightOnSquareIcon className='text-text-secondary ml-1 h-4 w-4 shrink-0' />
       </Button>
     </div>
   </Modal>
diff --git a/web/app/components/app/overview/embedded/index.tsx b/web/app/components/app/overview/embedded/index.tsx
index 06b06e28a8..975084b852 100644
--- a/web/app/components/app/overview/embedded/index.tsx
+++ b/web/app/components/app/overview/embedded/index.tsx
@@ -119,11 +119,11 @@ const Embedded = ({ siteInfo, isShow, onClose, appBaseUrl, accessToken, classNam
       title={t(`${prefixEmbedded}.title`)}
       isShow={isShow}
       onClose={onClose}
-      className="!max-w-2xl w-[640px]"
+      className="w-[640px] !max-w-2xl"
       wrapperClassName={className}
       closable={true}
     >
-      <div className="mb-4 mt-8 text-text-primary system-sm-medium">
+      <div className="text-text-primary system-sm-medium mb-4 mt-8">
         {t(`${prefixEmbedded}.explanation`)}
       </div>
       <div className="flex flex-wrap items-center justify-between gap-y-2">
@@ -145,18 +145,18 @@ const Embedded = ({ siteInfo, isShow, onClose, appBaseUrl, accessToken, classNam
         })}
       </div>
       {option === 'chromePlugin' && (
-        <div className="w-full mt-6">
-          <div className={cn('gap-2 py-3 justify-center items-center inline-flex w-full rounded-lg',
-            'bg-primary-600 hover:bg-primary-600/75 cursor-pointer text-white hover:shadow-sm flex-shrink-0')}>
-            <div className={`w-4 h-4 relative ${style.pluginInstallIcon}`}></div>
-            <div className="text-white text-sm font-medium font-['Inter'] leading-tight" onClick={navigateToChromeUrl}>{t(`${prefixEmbedded}.chromePlugin`)}</div>
+        <div className="mt-6 w-full">
+          <div className={cn('inline-flex w-full items-center justify-center gap-2 rounded-lg py-3',
+            'bg-primary-600 hover:bg-primary-600/75 shrink-0 cursor-pointer text-white hover:shadow-sm')}>
+            <div className={`relative h-4 w-4 ${style.pluginInstallIcon}`}></div>
+            <div className="font-['Inter'] text-sm font-medium leading-tight text-white" onClick={navigateToChromeUrl}>{t(`${prefixEmbedded}.chromePlugin`)}</div>
           </div>
         </div>
       )}
-      <div className={cn('w-full bg-background-section border-[0.5px] border-components-panel-border rounded-lg flex-col justify-start items-start inline-flex',
+      <div className={cn('bg-background-section border-components-panel-border inline-flex w-full flex-col items-start justify-start rounded-lg border-[0.5px]',
         'mt-6')}>
-        <div className="inline-flex items-center self-stretch justify-start gap-2 py-1 pl-3 pr-1  rounded-t-lg bg-background-section-burn">
-          <div className="grow shrink-0 text-text-secondary system-sm-medium">
+        <div className="bg-background-section-burn inline-flex items-center justify-start gap-2 self-stretch rounded-t-lg py-1  pl-3 pr-1">
+          <div className="text-text-secondary system-sm-medium shrink-0 grow">
             {t(`${prefixEmbedded}.${option}`)}
           </div>
           <Tooltip
@@ -170,14 +170,14 @@ const Embedded = ({ siteInfo, isShow, onClose, appBaseUrl, accessToken, classNam
               <div
                 onClick={onClickCopy}
               >
-                {isCopied[option] && <RiClipboardFill className='w-4 h-4' />}
-                {!isCopied[option] && <RiClipboardLine className='w-4 h-4' />}
+                {isCopied[option] && <RiClipboardFill className='h-4 w-4' />}
+                {!isCopied[option] && <RiClipboardLine className='h-4 w-4' />}
               </div>
             </ActionButton>
           </Tooltip>
         </div>
-        <div className="flex items-start justify-start w-full gap-2 p-3 overflow-x-auto">
-          <div className="grow shrink basis-0 text-text-secondary text-[13px] leading-tight font-mono">
+        <div className="flex w-full items-start justify-start gap-2 overflow-x-auto p-3">
+          <div className="text-text-secondary shrink grow basis-0 font-mono text-[13px] leading-tight">
             <pre className='select-text'>{OPTION_MAP[option].getContent(appBaseUrl, accessToken, themeBuilder.theme?.primaryColor ?? '#1C64F2', isTestEnv)}</pre>
           </div>
         </div>
diff --git a/web/app/components/app/overview/settings/index.tsx b/web/app/components/app/overview/settings/index.tsx
index f1340c08be..bddcab7418 100644
--- a/web/app/components/app/overview/settings/index.tsx
+++ b/web/app/components/app/overview/settings/index.tsx
@@ -221,24 +221,24 @@ const SettingsModal: FC<ISettingsModalProps> = ({
         className='max-w-[520px] p-0'
       >
         {/* header */}
-        <div className='pl-6 pt-5 pr-5 pb-3'>
+        <div className='pb-3 pl-6 pr-5 pt-5'>
           <div className='flex items-center gap-1'>
-            <div className='grow text-text-primary title-2xl-semi-bold'>{t(`${prefixSettings}.title`)}</div>
+            <div className='text-text-primary title-2xl-semi-bold grow'>{t(`${prefixSettings}.title`)}</div>
             <ActionButton className='shrink-0' onClick={onHide}>
-              <RiCloseLine className='w-4 h-4' />
+              <RiCloseLine className='h-4 w-4' />
             </ActionButton>
           </div>
-          <div className='mt-0.5 text-text-tertiary system-xs-regular'>
+          <div className='text-text-tertiary system-xs-regular mt-0.5'>
             <span>{t(`${prefixSettings}.modalTip`)}</span>
             <Link href={`${locale === LanguagesSupported[1] ? 'https://docs.dify.ai/zh-hans/guides/application-publishing/launch-your-webapp-quickly#she-zhi-ni-de-ai-zhan-dian' : 'https://docs.dify.ai/guides/application-publishing/launch-your-webapp-quickly#setting-up-your-ai-site'}`} target='_blank' rel='noopener noreferrer' className='text-text-accent'>{t('common.operation.learnMore')}</Link>
           </div>
         </div>
         {/* form body */}
-        <div className='px-6 py-3 space-y-5'>
+        <div className='space-y-5 px-6 py-3'>
           {/* name & icon */}
           <div className='flex gap-4'>
             <div className='grow'>
-              <div className={cn('mb-1 py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.webName`)}</div>
+              <div className={cn('text-text-secondary system-sm-semibold mb-1 py-1')}>{t(`${prefixSettings}.webName`)}</div>
               <Input
                 className='w-full'
                 value={inputInfo.title}
@@ -258,32 +258,32 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           </div>
           {/* description */}
           <div className='relative'>
-            <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.webDesc`)}</div>
+            <div className={cn('text-text-secondary system-sm-semibold py-1')}>{t(`${prefixSettings}.webDesc`)}</div>
             <Textarea
               className='mt-1'
               value={inputInfo.desc}
               onChange={e => onDesChange(e.target.value)}
               placeholder={t(`${prefixSettings}.webDescPlaceholder`) as string}
             />
-            <p className={cn('pb-0.5 text-text-tertiary body-xs-regular')}>{t(`${prefixSettings}.webDescTip`)}</p>
+            <p className={cn('text-text-tertiary body-xs-regular pb-0.5')}>{t(`${prefixSettings}.webDescTip`)}</p>
           </div>
-          <Divider className="h-px my-0" />
+          <Divider className="my-0 h-px" />
           {/* answer icon */}
           {isChat && (
             <div className='w-full'>
-              <div className='flex justify-between items-center'>
-                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t('app.answerIcon.title')}</div>
+              <div className='flex items-center justify-between'>
+                <div className={cn('text-text-secondary system-sm-semibold py-1')}>{t('app.answerIcon.title')}</div>
                 <Switch
                   defaultValue={inputInfo.use_icon_as_answer_icon}
                   onChange={v => setInputInfo({ ...inputInfo, use_icon_as_answer_icon: v })}
                 />
               </div>
-              <p className='pb-0.5 text-text-tertiary body-xs-regular'>{t('app.answerIcon.description')}</p>
+              <p className='text-text-tertiary body-xs-regular pb-0.5'>{t('app.answerIcon.description')}</p>
             </div>
           )}
           {/* language */}
           <div className='flex items-center'>
-            <div className={cn('grow py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.language`)}</div>
+            <div className={cn('text-text-secondary system-sm-semibold grow py-1')}>{t(`${prefixSettings}.language`)}</div>
             <SimpleSelect
               wrapperClassName='w-[200px]'
               items={languages.filter(item => item.supported)}
@@ -296,8 +296,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           {isChat && (
             <div className='flex items-center'>
               <div className='grow'>
-                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.chatColorTheme`)}</div>
-                <div className='pb-0.5 body-xs-regular text-text-tertiary'>{t(`${prefixSettings}.chatColorThemeDesc`)}</div>
+                <div className={cn('text-text-secondary system-sm-semibold py-1')}>{t(`${prefixSettings}.chatColorTheme`)}</div>
+                <div className='body-xs-regular text-text-tertiary pb-0.5'>{t(`${prefixSettings}.chatColorThemeDesc`)}</div>
               </div>
               <div className='shrink-0'>
                 <Input
@@ -306,7 +306,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                   onChange={onChange('chatColorTheme')}
                   placeholder='E.g #A020F0'
                 />
-                <div className='flex justify-between items-center'>
+                <div className='flex items-center justify-between'>
                   <p className={cn('body-xs-regular text-text-tertiary')}>{t(`${prefixSettings}.chatColorThemeInverted`)}</p>
                   <Switch defaultValue={inputInfo.chatColorThemeInverted} onChange={v => setInputInfo({ ...inputInfo, chatColorThemeInverted: v })}></Switch>
                 </div>
@@ -315,24 +315,24 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           )}
           {/* workflow detail */}
           <div className='w-full'>
-            <div className='flex justify-between items-center'>
-              <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.workflow.subTitle`)}</div>
+            <div className='flex items-center justify-between'>
+              <div className={cn('text-text-secondary system-sm-semibold py-1')}>{t(`${prefixSettings}.workflow.subTitle`)}</div>
               <Switch
                 disabled={!(appInfo.mode === 'workflow' || appInfo.mode === 'advanced-chat')}
                 defaultValue={inputInfo.show_workflow_steps}
                 onChange={v => setInputInfo({ ...inputInfo, show_workflow_steps: v })}
               />
             </div>
-            <p className='pb-0.5 text-text-tertiary body-xs-regular'>{t(`${prefixSettings}.workflow.showDesc`)}</p>
+            <p className='text-text-tertiary body-xs-regular pb-0.5'>{t(`${prefixSettings}.workflow.showDesc`)}</p>
           </div>
           {/* SSO */}
           {systemFeatures.enable_web_sso_switch_component && (
             <>
-              <Divider className="h-px my-0" />
+              <Divider className="my-0 h-px" />
               <div className='w-full'>
-                <p className='mb-1 system-xs-medium-uppercase text-text-tertiary'>{t(`${prefixSettings}.sso.label`)}</p>
-                <div className='flex justify-between items-center'>
-                  <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.sso.title`)}</div>
+                <p className='system-xs-medium-uppercase text-text-tertiary mb-1'>{t(`${prefixSettings}.sso.label`)}</p>
+                <div className='flex items-center justify-between'>
+                  <div className={cn('text-text-secondary system-sm-semibold py-1')}>{t(`${prefixSettings}.sso.title`)}</div>
                   <Tooltip
                     disabled={systemFeatures.sso_enforced_for_web}
                     popupContent={
@@ -343,19 +343,19 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                     <Switch disabled={!systemFeatures.sso_enforced_for_web || !isCurrentWorkspaceEditor} defaultValue={systemFeatures.sso_enforced_for_web && inputInfo.enable_sso} onChange={v => setInputInfo({ ...inputInfo, enable_sso: v })}></Switch>
                   </Tooltip>
                 </div>
-                <p className='pb-0.5 body-xs-regular text-text-tertiary'>{t(`${prefixSettings}.sso.description`)}</p>
+                <p className='body-xs-regular text-text-tertiary pb-0.5'>{t(`${prefixSettings}.sso.description`)}</p>
               </div>
             </>
           )}
           {/* more settings switch */}
-          <Divider className="h-px my-0" />
+          <Divider className="my-0 h-px" />
           {!isShowMore && (
-            <div className='flex items-center cursor-pointer' onClick={() => setIsShowMore(true)}>
+            <div className='flex cursor-pointer items-center' onClick={() => setIsShowMore(true)}>
               <div className='grow'>
-                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.more.entry`)}</div>
-                <p className={cn('pb-0.5 text-text-tertiary body-xs-regular')}>{t(`${prefixSettings}.more.copyRightPlaceholder`)} & {t(`${prefixSettings}.more.privacyPolicyPlaceholder`)}</p>
+                <div className={cn('text-text-secondary system-sm-semibold py-1')}>{t(`${prefixSettings}.more.entry`)}</div>
+                <p className={cn('text-text-tertiary body-xs-regular pb-0.5')}>{t(`${prefixSettings}.more.copyRightPlaceholder`)} & {t(`${prefixSettings}.more.privacyPolicyPlaceholder`)}</p>
               </div>
-              <RiArrowRightSLine className='shrink-0 ml-1 w-4 h-4 text-text-secondary' />
+              <RiArrowRightSLine className='text-text-secondary ml-1 h-4 w-4 shrink-0' />
             </div>
           )}
           {/* more settings */}
@@ -364,13 +364,13 @@ const SettingsModal: FC<ISettingsModalProps> = ({
               {/* copyright */}
               <div className='w-full'>
                 <div className='flex items-center'>
-                  <div className='grow flex items-center'>
-                    <div className={cn('mr-1 py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.more.copyright`)}</div>
+                  <div className='flex grow items-center'>
+                    <div className={cn('text-text-secondary system-sm-semibold mr-1 py-1')}>{t(`${prefixSettings}.more.copyright`)}</div>
                     {/* upgrade button */}
                     {enableBilling && isFreePlan && (
-                      <div className='select-none h-[18px]'>
+                      <div className='h-[18px] select-none'>
                         <PremiumBadge size='s' color='blue' allowHover={true} onClick={handlePlanClick}>
-                          <SparklesSoft className='flex items-center py-[1px] pl-[3px] w-3.5 h-3.5 text-components-premium-badge-indigo-text-stop-0' />
+                          <SparklesSoft className='text-components-premium-badge-indigo-text-stop-0 flex h-3.5 w-3.5 items-center py-[1px] pl-[3px]' />
                           <div className='system-xs-medium'>
                             <span className='p-1'>
                               {t('billing.upgradeBtn.encourageShort')}
@@ -394,7 +394,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                     />
                   </Tooltip>
                 </div>
-                <p className='pb-0.5 text-text-tertiary body-xs-regular'>{t(`${prefixSettings}.more.copyrightTip`)}</p>
+                <p className='text-text-tertiary body-xs-regular pb-0.5'>{t(`${prefixSettings}.more.copyrightTip`)}</p>
                 {inputInfo.copyrightSwitchValue && (
                   <Input
                     className='mt-2 h-10'
@@ -406,8 +406,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
               </div>
               {/* privacy policy */}
               <div className='w-full'>
-                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.more.privacyPolicy`)}</div>
-                <p className={cn('pb-0.5 body-xs-regular text-text-tertiary')}>
+                <div className={cn('text-text-secondary system-sm-semibold py-1')}>{t(`${prefixSettings}.more.privacyPolicy`)}</div>
+                <p className={cn('body-xs-regular text-text-tertiary pb-0.5')}>
                   <Trans
                     i18nKey={`${prefixSettings}.more.privacyPolicyTip`}
                     components={{ privacyPolicyLink: <Link href={'https://docs.dify.ai/user-agreement/privacy-policy'} target='_blank' rel='noopener noreferrer' className='text-text-accent' /> }}
@@ -422,8 +422,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
               </div>
               {/* custom disclaimer */}
               <div className='w-full'>
-                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.more.customDisclaimer`)}</div>
-                <p className={cn('pb-0.5 body-xs-regular text-text-tertiary')}>{t(`${prefixSettings}.more.customDisclaimerTip`)}</p>
+                <div className={cn('text-text-secondary system-sm-semibold py-1')}>{t(`${prefixSettings}.more.customDisclaimer`)}</div>
+                <p className={cn('body-xs-regular text-text-tertiary pb-0.5')}>{t(`${prefixSettings}.more.customDisclaimerTip`)}</p>
                 <Textarea
                   className='mt-1'
                   value={inputInfo.customDisclaimer}
@@ -435,7 +435,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           )}
         </div>
         {/* footer */}
-        <div className='p-6 pt-5 flex justify-end'>
+        <div className='flex justify-end p-6 pt-5'>
           <Button className='mr-2' onClick={onHide}>{t('common.operation.cancel')}</Button>
           <Button variant='primary' onClick={onClickSave} loading={saveLoading}>{t('common.operation.save')}</Button>
         </div>
diff --git a/web/app/components/app/switch-app-modal/index.tsx b/web/app/components/app/switch-app-modal/index.tsx
index e1fe809e10..3141e9dc80 100644
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/web/app/components/app/switch-app-modal/index.tsx
@@ -95,20 +95,20 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
   return (
     <>
       <Modal
-        className={cn('p-8 max-w-[600px] w-[600px]', s.bg)}
+        className={cn('w-[600px] max-w-[600px] p-8', s.bg)}
         isShow={show}
         onClose={() => { }}
       >
-        <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
-          <RiCloseLine className='w-4 h-4 text-gray-500' />
+        <div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onClose}>
+          <RiCloseLine className='h-4 w-4 text-gray-500' />
         </div>
-        <div className='w-12 h-12 p-3 bg-white rounded-xl border-[0.5px] border-gray-100 shadow-xl'>
-          <AlertTriangle className='w-6 h-6 text-[rgb(247,144,9)]' />
+        <div className='h-12 w-12 rounded-xl border-[0.5px] border-gray-100 bg-white p-3 shadow-xl'>
+          <AlertTriangle className='h-6 w-6 text-[rgb(247,144,9)]' />
         </div>
         <div className='relative mt-3 text-xl font-semibold leading-[30px] text-gray-900'>{t('app.switch')}</div>
-        <div className='my-1 text-gray-500 text-sm leading-5'>
+        <div className='my-1 text-sm leading-5 text-gray-500'>
           <span>{t('app.switchTipStart')}</span>
-          <span className='text-gray-700 font-medium'>{t('app.switchTip')}</span>
+          <span className='font-medium text-gray-700'>{t('app.switchTip')}</span>
           <span>{t('app.switchTipEnd')}</span>
         </div>
         <div className='pb-4'>
@@ -127,7 +127,7 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
               value={name}
               onChange={e => setName(e.target.value)}
               placeholder={t('app.newApp.appNamePlaceholder') || ''}
-              className='grow h-10'
+              className='h-10 grow'
             />
           </div>
           {showAppIconPicker && <AppIconPicker
@@ -144,10 +144,10 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
           />}
         </div>
         {isAppsFull && <AppsFull loc='app-switch' />}
-        <div className='pt-6 flex justify-between items-center'>
+        <div className='flex items-center justify-between pt-6'>
           <div className='flex items-center'>
             <Checkbox className='shrink-0' checked={removeOriginal} onCheck={() => setRemoveOriginal(!removeOriginal)} />
-            <div className="ml-2 text-sm leading-5 text-gray-700 cursor-pointer" onClick={() => setRemoveOriginal(!removeOriginal)}>{t('app.removeOriginal')}</div>
+            <div className="ml-2 cursor-pointer text-sm leading-5 text-gray-700" onClick={() => setRemoveOriginal(!removeOriginal)}>{t('app.removeOriginal')}</div>
           </div>
           <div className='flex items-center'>
             <Button className='mr-2' onClick={onClose}>{t('app.newApp.Cancel')}</Button>
diff --git a/web/app/components/app/text-generate/item/index.tsx b/web/app/components/app/text-generate/item/index.tsx
index 5f0b645570..1be7ce471a 100644
--- a/web/app/components/app/text-generate/item/index.tsx
+++ b/web/app/components/app/text-generate/item/index.tsx
@@ -74,7 +74,7 @@ export const SimpleBtn = ({ className, isDisabled, onClick, children }: {
   children: React.ReactNode
 }) => (
   <div
-    className={cn(isDisabled ? 'border-gray-100 text-gray-300' : 'border-gray-200 text-gray-700 cursor-pointer hover:border-gray-300 hover:shadow-sm', 'flex items-center h-7 px-3 rounded-md border text-xs  font-medium', className)}
+    className={cn(isDisabled ? 'border-gray-100 text-gray-300' : 'cursor-pointer border-gray-200 text-gray-700 hover:border-gray-300 hover:shadow-sm', 'flex h-7 items-center rounded-md border px-3 text-xs  font-medium', className)}
     onClick={() => !isDisabled && onClick?.()}
   >
     {children}
@@ -239,7 +239,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                   rating: 'like',
                 })
               }}
-              className='flex w-6 h-6 items-center justify-center rounded-md cursor-pointer hover:bg-gray-100'>
+              className='flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-gray-100'>
               <HandThumbUpIcon width={16} height={16} />
             </div>
             <div
@@ -248,7 +248,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                   rating: 'dislike',
                 })
               }}
-              className='flex w-6 h-6 items-center justify-center rounded-md cursor-pointer hover:bg-gray-100'>
+              className='flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-gray-100'>
               <HandThumbDownIcon width={16} height={16} />
             </div>
           </>
@@ -261,7 +261,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
               rating: null,
             })
           }}
-          className='flex w-7 h-7 items-center justify-center rounded-md cursor-pointer  !text-primary-600 border border-primary-200 bg-primary-100 hover:border-primary-300 hover:bg-primary-200'>
+          className='!text-primary-600 border-primary-200 bg-primary-100 hover:border-primary-300 hover:bg-primary-200 flex h-7  w-7 cursor-pointer items-center justify-center rounded-md border'>
           <HandThumbUpIcon width={16} height={16} />
         </div>
       )}
@@ -272,7 +272,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
               rating: null,
             })
           }}
-          className='flex w-7 h-7 items-center justify-center rounded-md cursor-pointer  !text-red-600 border border-red-200 bg-red-100 hover:border-red-300 hover:bg-red-200'>
+          className='flex h-7 w-7 cursor-pointer items-center justify-center rounded-md  border border-red-200 bg-red-100 !text-red-600 hover:border-red-300 hover:bg-red-200'>
           <HandThumbDownIcon width={16} height={16} />
         </div>
       )}
@@ -282,7 +282,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
   const [currentTab, setCurrentTab] = useState<string>('DETAIL')
 
   return (
-    <div ref={ref} className={cn(isTop ? `rounded-xl border ${!isError ? 'border-gray-200 bg-chat-bubble-bg' : 'border-[#FECDCA] bg-[#FEF3F2]'} ` : 'rounded-br-xl !mt-0', className)}
+    <div ref={ref} className={cn(isTop ? `rounded-xl border ${!isError ? 'bg-chat-bubble-bg border-gray-200' : 'border-[#FECDCA] bg-[#FEF3F2]'} ` : '!mt-0 rounded-br-xl', className)}
       style={isTop
         ? {
           boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)',
@@ -291,21 +291,21 @@ const GenerationItem: FC<IGenerationItemProps> = ({
     >
       {isLoading
         ? (
-          <div className='flex items-center h-10'><Loading type='area' /></div>
+          <div className='flex h-10 items-center'><Loading type='area' /></div>
         )
         : (
           <div
-            className={cn(!isTop && 'rounded-br-xl border-l-2 border-primary-400', 'p-4', innerClassName)}
+            className={cn(!isTop && 'border-primary-400 rounded-br-xl border-l-2', 'p-4', innerClassName)}
             style={mainStyle}
           >
             {(isTop && taskId) && (
-              <div className='mb-2 text-gray-500 border border-gray-200 box-border flex items-center rounded-md italic text-[11px] pl-1 pr-1.5 font-medium w-fit group-hover:opacity-100'>
-                <HashtagIcon className='w-3 h-3 text-gray-400 fill-current mr-1 stroke-current stroke-1' />
+              <div className='mb-2 box-border flex w-fit items-center rounded-md border border-gray-200 pl-1 pr-1.5 text-[11px] font-medium italic text-gray-500 group-hover:opacity-100'>
+                <HashtagIcon className='mr-1 h-3 w-3 fill-current stroke-current stroke-1 text-gray-400' />
                 {taskId}
               </div>)
             }
             <div className={`flex ${contentClassName}`}>
-              <div className='grow w-0'>
+              <div className='w-0 grow'>
                 {siteInfo && workflowProcessData && (
                   <WorkflowProcessItem
                     data={workflowProcessData}
@@ -319,7 +319,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                   <ResultTab data={workflowProcessData} content={content} currentTab={currentTab} onCurrentTabChange={setCurrentTab} />
                 )}
                 {isError && (
-                  <div className='text-gray-400 text-sm'>{t('share.generation.batchFailed.outputPlaceholder')}</div>
+                  <div className='text-sm text-gray-400'>{t('share.generation.batchFailed.outputPlaceholder')}</div>
                 )}
                 {!workflowProcessData && !isError && (typeof content === 'string') && (
                   <Markdown content={content} />
@@ -327,15 +327,15 @@ const GenerationItem: FC<IGenerationItemProps> = ({
               </div>
             </div>
 
-            <div className='flex items-center justify-between mt-3'>
+            <div className='mt-3 flex items-center justify-between'>
               <div className='flex items-center'>
                 {
                   !isInWebApp && !isInstalledApp && !isResponding && (
                     <SimpleBtn
                       isDisabled={isError || !messageId}
-                      className={cn(isMobile && '!px-1.5', 'space-x-1 mr-1')}
+                      className={cn(isMobile && '!px-1.5', 'mr-1 space-x-1')}
                       onClick={handleOpenLogModal}>
-                      <File02 className='w-3.5 h-3.5' />
+                      <File02 className='h-3.5 w-3.5' />
                       {!isMobile && <div>{t('common.operation.log')}</div>}
                     </SimpleBtn>
                   )
@@ -352,7 +352,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                         copy(JSON.stringify(copyContent))
                       Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
                     }}>
-                    <RiClipboardLine className='w-3.5 h-3.5' />
+                    <RiClipboardLine className='h-3.5 w-3.5' />
                     {!isMobile && <div>{t('common.operation.copy')}</div>}
                   </SimpleBtn>
                 )}
@@ -365,7 +365,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                         className={cn(isMobile && '!px-1.5', 'ml-2 space-x-1')}
                         onClick={() => { onSave?.(messageId as string) }}
                       >
-                        <Bookmark className='w-3.5 h-3.5' />
+                        <Bookmark className='h-3.5 w-3.5' />
                         {!isMobile && <div>{t('common.operation.save')}</div>}
                       </SimpleBtn>
                     )}
@@ -375,7 +375,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                         className={cn(isMobile && '!px-1.5', 'ml-2 space-x-1')}
                         onClick={handleMoreLikeThis}
                       >
-                        <Stars02 className='w-3.5 h-3.5' />
+                        <Stars02 className='h-3.5 w-3.5' />
                         {!isMobile && <div>{t('appDebug.feature.moreLikeThis.title')}</div>}
                       </SimpleBtn>
                     )}
@@ -384,12 +384,12 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                         onClick={onRetry}
                         className={cn(isMobile && '!px-1.5', 'ml-2 space-x-1')}
                       >
-                        <RefreshCcw01 className='w-3.5 h-3.5' />
+                        <RefreshCcw01 className='h-3.5 w-3.5' />
                         {!isMobile && <div>{t('share.generation.batchFailed.retry')}</div>}
                       </SimpleBtn>
                     )}
                     {!isError && messageId && !isWorkflow && (
-                      <div className="mx-3 w-[1px] h-[14px] bg-gray-200"></div>
+                      <div className="mx-3 h-[14px] w-[1px] bg-gray-200"></div>
                     )}
                     {ratingContent}
                   </>
diff --git a/web/app/components/app/text-generate/item/result-tab.tsx b/web/app/components/app/text-generate/item/result-tab.tsx
index 1e324d2096..ad7301d60f 100644
--- a/web/app/components/app/text-generate/item/result-tab.tsx
+++ b/web/app/components/app/text-generate/item/result-tab.tsx
@@ -34,19 +34,19 @@ const ResultTab = ({
   }, [data?.files?.length, data?.resultText])
 
   return (
-    <div className='grow relative flex flex-col'>
+    <div className='relative flex grow flex-col'>
       {(data?.resultText || !!data?.files?.length) && (
-        <div className='shrink-0 flex items-center mb-2 border-b-[0.5px] border-[rgba(0,0,0,0.05)]'>
+        <div className='mb-2 flex shrink-0 items-center border-b-[0.5px] border-[rgba(0,0,0,0.05)]'>
           <div
             className={cn(
-              'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
+              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-gray-400',
               currentTab === 'RESULT' && '!border-[rgb(21,94,239)] text-gray-700',
             )}
             onClick={() => switchTab('RESULT')}
           >{t('runLog.result')}</div>
           <div
             className={cn(
-              'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
+              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-gray-400',
               currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-gray-700',
             )}
             onClick={() => switchTab('DETAIL')}
@@ -60,8 +60,8 @@ const ResultTab = ({
             {!!data?.files?.length && (
               <div className='flex flex-col gap-2'>
                 {data?.files.map((item: any) => (
-                  <div key={item.varName} className='flex flex-col gap-1 system-xs-regular'>
-                    <div className='py-1 text-text-tertiary '>{item.varName}</div>
+                  <div key={item.varName} className='system-xs-regular flex flex-col gap-1'>
+                    <div className='text-text-tertiary py-1 '>{item.varName}</div>
                     <FileList
                       files={item.list}
                       showDeleteAction={false}
diff --git a/web/app/components/app/text-generate/saved-items/index.tsx b/web/app/components/app/text-generate/saved-items/index.tsx
index 8bfebbc17f..eeb1783cc7 100644
--- a/web/app/components/app/text-generate/saved-items/index.tsx
+++ b/web/app/components/app/text-generate/saved-items/index.tsx
@@ -46,13 +46,13 @@ const SavedItems: FC<ISavedItemsProps> = ({
           {list.map(({ id, answer }) => (
             <div
               key={id}
-              className='p-4 rounded-xl  bg-gray-50'
+              className='rounded-xl bg-gray-50  p-4'
               style={{
                 boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)',
               }}
             >
               <Markdown content={answer} />
-              <div className='flex items-center justify-between mt-3'>
+              <div className='mt-3 flex items-center justify-between'>
                 <div className='flex items-center space-x-2'>
                   <SimpleBtn
                     className='space-x-1'
diff --git a/web/app/components/app/text-generate/saved-items/no-data/index.tsx b/web/app/components/app/text-generate/saved-items/no-data/index.tsx
index 0b087a647f..e5889bcd36 100644
--- a/web/app/components/app/text-generate/saved-items/no-data/index.tsx
+++ b/web/app/components/app/text-generate/saved-items/no-data/index.tsx
@@ -15,7 +15,7 @@ const markIcon = (
 )
 
 const lightIcon = (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className="inline relative -top-3 -left-1.5"><path d="M5 6.5V5M8.93934 7.56066L10 6.5M10.0103 11.5H11.5103" stroke="#374151" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path></svg>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className="relative -left-1.5 -top-3 inline"><path d="M5 6.5V5M8.93934 7.56066L10 6.5M10.0103 11.5H11.5103" stroke="#374151" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path></svg>
 )
 
 const NoData: FC<INoDataProps> = ({
@@ -24,23 +24,23 @@ const NoData: FC<INoDataProps> = ({
   const { t } = useTranslation()
 
   return (
-    <div className='mt-[60px] px-5 py-4 rounded-2xl bg-gray-50 '>
-      <div className='flex items-center justify-center w-11 h-11 border border-gray-100 rounded-lg'>
+    <div className='mt-[60px] rounded-2xl bg-gray-50 px-5 py-4 '>
+      <div className='flex h-11 w-11 items-center justify-center rounded-lg border border-gray-100'>
         {markIcon}
       </div>
       <div className='mt-2'>
-        <span className='text-gray-700 font-semibold'>{t('share.generation.savedNoData.title')}</span>
+        <span className='font-semibold text-gray-700'>{t('share.generation.savedNoData.title')}</span>
         {lightIcon}
       </div>
-      <div className='mt-2 text-gray-500 text-[13px] font-normal'>
+      <div className='mt-2 text-[13px] font-normal text-gray-500'>
         {t('share.generation.savedNoData.description')}
       </div>
       <Button
         className='mt-4'
         onClick={onStartCreateContent}
       >
-        <div className='flex items-center space-x-2 text-primary-600 text-[13px] font-medium'>
-          <PlusIcon className='w-4 h-4' />
+        <div className='text-primary-600 flex items-center space-x-2 text-[13px] font-medium'>
+          <PlusIcon className='h-4 w-4' />
           <span>{t('share.generation.savedNoData.startCreateContent')}</span>
         </div>
       </Button>
diff --git a/web/app/components/app/type-selector/index.tsx b/web/app/components/app/type-selector/index.tsx
index 74303c3735..e967aeb839 100644
--- a/web/app/components/app/type-selector/index.tsx
+++ b/web/app/components/app/type-selector/index.tsx
@@ -33,19 +33,19 @@ const AppTypeSelector = ({ value, onChange }: AppSelectorProps) => {
           className='block'
         >
           <div className={cn(
-            'flex items-center justify-between rounded-md cursor-pointer px-2 space-x-1 hover:bg-state-base-hover',
+            'hover:bg-state-base-hover flex cursor-pointer items-center justify-between space-x-1 rounded-md px-2',
           )}>
             <AppTypeSelectTrigger values={value} />
-            {value && value.length > 0 && <div className='w-4 h-4' onClick={(e) => {
+            {value && value.length > 0 && <div className='h-4 w-4' onClick={(e) => {
               e.stopPropagation()
               onChange([])
             }}>
-              <RiCloseCircleFill className='w-3.5 h-3.5 text-text-quaternary hover:text-text-tertiary cursor-pointer' />
+              <RiCloseCircleFill className='text-text-quaternary hover:text-text-tertiary h-3.5 w-3.5 cursor-pointer' />
             </div>}
           </div>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1002]'>
-          <ul className='relative p-1 w-[240px] bg-components-panel-bg-blur backdrop-blur-[5px] rounded-xl shadow-lg border border-components-panel-border'>
+          <ul className='bg-components-panel-bg-blur border-components-panel-border relative w-[240px] rounded-xl border p-1 shadow-lg backdrop-blur-[5px]'>
             {allTypes.map(mode => (
               <AppTypeSelectorItem key={mode} type={mode}
                 checked={Boolean(value.length > 0 && value?.indexOf(mode) !== -1)}
@@ -69,25 +69,25 @@ function AppTypeSelectTrigger({ values }: { values: AppSelectorProps['value'] })
   const { t } = useTranslation()
   if (!values || values.length === 0) {
     return <div className={cn(
-      'flex items-center justify-between gap-1 h-8',
+      'flex h-8 items-center justify-between gap-1',
     )}>
-      <RiFilter3Line className='w-4 h-4 text-text-tertiary' />
-      <div className='grow min-w-[65px] text-center system-sm-medium text-text-tertiary'>{t('app.typeSelector.all')}</div>
-      <RiArrowDownSLine className='w-4 h-4 text-text-tertiary' />
+      <RiFilter3Line className='text-text-tertiary h-4 w-4' />
+      <div className='system-sm-medium text-text-tertiary min-w-[65px] grow text-center'>{t('app.typeSelector.all')}</div>
+      <RiArrowDownSLine className='text-text-tertiary h-4 w-4' />
     </div>
   }
   if (values.length === 1) {
     return <div className={cn(
-      'flex items-center justify-between gap-1 h-8 flex-nowrap',
+      'flex h-8 flex-nowrap items-center justify-between gap-1',
     )}>
       <AppTypeIcon type={values[0]} />
-      <div className='flex flex-1 items-center text-center line-clamp-1'>
+      <div className='line-clamp-1 flex flex-1 items-center text-center'>
         <AppTypeLabel type={values[0]} className="system-sm-medium text-components-menu-item-text" />
       </div>
     </div>
   }
   return <div className={cn(
-    'flex items-center justify-between h-8 -space-x-2 relative',
+    'relative flex h-8 items-center justify-between -space-x-2',
   )}>
     {values.map((mode, index) => (<AppTypeIcon key={mode} type={mode} wrapperClassName='border border-components-panel-on-panel-item-bg' style={{ zIndex: 5 - index }} />))}
   </div>
@@ -99,7 +99,7 @@ type AppTypeSelectorItemProps = {
   onClick: () => void
 }
 function AppTypeSelectorItem({ checked, type, onClick }: AppTypeSelectorItemProps) {
-  return <li className='flex items-center space-x-2 pl-2 py-1 pr-1 rounded-lg cursor-pointer hover:bg-state-base-hover' onClick={onClick}>
+  return <li className='hover:bg-state-base-hover flex cursor-pointer items-center space-x-2 rounded-lg py-1 pl-2 pr-1' onClick={onClick}>
     <Checkbox checked={checked} />
     <AppTypeIcon type={type} />
     <div className='grow p-1 pl-0'>
@@ -116,8 +116,8 @@ type AppTypeIconProps = {
 }
 
 export function AppTypeIcon({ type, className, wrapperClassName, style }: AppTypeIconProps) {
-  const wrapperClassNames = cn('w-5 h-5 inline-flex items-center justify-center rounded-md border border-divider-regular', wrapperClassName)
-  const iconClassNames = cn('w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100', className)
+  const wrapperClassNames = cn('border-divider-regular inline-flex h-5 w-5 items-center justify-center rounded-md border', wrapperClassName)
+  const iconClassNames = cn('text-components-avatar-shape-fill-stop-100 h-3.5 w-3.5', className)
   if (type === 'chat') {
     return <div style={style} className={cn(wrapperClassNames, 'bg-components-icon-bg-blue-solid')}>
       <ChatBot className={iconClassNames} />
diff --git a/web/app/components/app/workflow-log/detail.tsx b/web/app/components/app/workflow-log/detail.tsx
index f5cf7c3a3b..f949510059 100644
--- a/web/app/components/app/workflow-log/detail.tsx
+++ b/web/app/components/app/workflow-log/detail.tsx
@@ -13,11 +13,11 @@ const DetailPanel: FC<ILogDetail> = ({ runID, onClose }) => {
   const { t } = useTranslation()
 
   return (
-    <div className='grow relative flex flex-col pt-3'>
-      <span className='absolute right-3 top-4 p-1 cursor-pointer z-20' onClick={onClose}>
-        <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+    <div className='relative flex grow flex-col pt-3'>
+      <span className='absolute right-3 top-4 z-20 cursor-pointer p-1' onClick={onClose}>
+        <RiCloseLine className='text-text-tertiary h-4 w-4' />
       </span>
-      <h1 className='shrink-0 px-4 py-1 text-text-primary system-xl-semibold'>{t('appLog.runDetail.workflowTitle')}</h1>
+      <h1 className='text-text-primary system-xl-semibold shrink-0 px-4 py-1'>{t('appLog.runDetail.workflowTitle')}</h1>
       <Run runID={runID}/>
     </div>
   )
diff --git a/web/app/components/app/workflow-log/filter.tsx b/web/app/components/app/workflow-log/filter.tsx
index d25f938719..24a35cfd99 100644
--- a/web/app/components/app/workflow-log/filter.tsx
+++ b/web/app/components/app/workflow-log/filter.tsx
@@ -14,7 +14,7 @@ interface IFilterProps {
 const Filter: FC<IFilterProps> = ({ queryParams, setQueryParams }: IFilterProps) => {
   const { t } = useTranslation()
   return (
-    <div className='flex flex-row flex-wrap gap-2 mb-2'>
+    <div className='mb-2 flex flex-row flex-wrap gap-2'>
       <Chip
         value={queryParams.status || 'all'}
         onSelect={(item) => {
diff --git a/web/app/components/app/workflow-log/index.tsx b/web/app/components/app/workflow-log/index.tsx
index 453f2cd75a..4b92e3aedb 100644
--- a/web/app/components/app/workflow-log/index.tsx
+++ b/web/app/components/app/workflow-log/index.tsx
@@ -33,10 +33,10 @@ const EmptyElement: FC<{ appUrl: string }> = ({ appUrl }) => {
   const pathname = usePathname()
   const pathSegments = pathname.split('/')
   pathSegments.pop()
-  return <div className='flex items-center justify-center h-full'>
-    <div className='bg-background-section-burn w-[560px] h-fit box-border px-5 py-4 rounded-2xl'>
-      <span className='text-text-secondary system-md-semibold'>{t('appLog.table.empty.element.title')}<ThreeDotsIcon className='inline relative -top-3 -left-1.5' /></span>
-      <div className='mt-2 text-text-tertiary system-sm-regular'>
+  return <div className='flex h-full items-center justify-center'>
+    <div className='bg-background-section-burn box-border h-fit w-[560px] rounded-2xl px-5 py-4'>
+      <span className='text-text-secondary system-md-semibold'>{t('appLog.table.empty.element.title')}<ThreeDotsIcon className='relative -left-1.5 -top-3 inline' /></span>
+      <div className='text-text-tertiary system-sm-regular mt-2'>
         <Trans
           i18nKey="appLog.table.empty.element.content"
           components={{ shareLink: <Link href={`${pathSegments.join('/')}/overview`} className='text-util-colors-blue-blue-600' />, testLink: <Link href={appUrl} className='text-util-colors-blue-blue-600' target='_blank' rel='noopener noreferrer' /> }}
@@ -73,10 +73,10 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
   const total = workflowLogs?.total
 
   return (
-    <div className='flex flex-col h-full'>
+    <div className='flex h-full flex-col'>
       <h1 className='text-text-primary system-xl-semibold'>{t('appLog.workflowTitle')}</h1>
       <p className='text-text-tertiary system-sm-regular'>{t('appLog.workflowSubtitle')}</p>
-      <div className='flex flex-col py-4 flex-1 max-h-[calc(100%-16px)]'>
+      <div className='flex max-h-[calc(100%-16px)] flex-1 flex-col py-4'>
         <Filter queryParams={queryParams} setQueryParams={setQueryParams} />
         {/* workflow log */}
         {total === undefined
diff --git a/web/app/components/app/workflow-log/list.tsx b/web/app/components/app/workflow-log/list.tsx
index 41db9b5d46..3f00d597ea 100644
--- a/web/app/components/app/workflow-log/list.tsx
+++ b/web/app/components/app/workflow-log/list.tsx
@@ -33,7 +33,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
   const statusTdRender = (status: string) => {
     if (status === 'succeeded') {
       return (
-        <div className='inline-flex items-center gap-1 system-xs-semibold-uppercase'>
+        <div className='system-xs-semibold-uppercase inline-flex items-center gap-1'>
           <Indicator color={'green'} />
           <span className='text-util-colors-green-green-600'>Success</span>
         </div>
@@ -41,7 +41,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
     }
     if (status === 'failed') {
       return (
-        <div className='inline-flex items-center gap-1 system-xs-semibold-uppercase'>
+        <div className='system-xs-semibold-uppercase inline-flex items-center gap-1'>
           <Indicator color={'red'} />
           <span className='text-util-colors-red-red-600'>Fail</span>
         </div>
@@ -49,7 +49,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
     }
     if (status === 'stopped') {
       return (
-        <div className='inline-flex items-center gap-1 system-xs-semibold-uppercase'>
+        <div className='system-xs-semibold-uppercase inline-flex items-center gap-1'>
           <Indicator color={'yellow'} />
           <span className='text-util-colors-warning-warning-600'>Stop</span>
         </div>
@@ -57,7 +57,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
     }
     if (status === 'running') {
       return (
-        <div className='inline-flex items-center gap-1 system-xs-semibold-uppercase'>
+        <div className='system-xs-semibold-uppercase inline-flex items-center gap-1'>
           <Indicator color={'blue'} />
           <span className='text-util-colors-blue-light-blue-light-600'>Running</span>
         </div>
@@ -65,7 +65,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
     }
     if (status === 'partial-succeeded') {
       return (
-        <div className='inline-flex items-center gap-1 system-xs-semibold-uppercase'>
+        <div className='system-xs-semibold-uppercase inline-flex items-center gap-1'>
           <Indicator color={'green'} />
           <span className='text-util-colors-green-green-600'>Partial Success</span>
         </div>
@@ -87,12 +87,12 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
       <table className={cn('mt-2 w-full min-w-[440px] border-collapse border-0')}>
         <thead className='system-xs-medium-uppercase text-text-tertiary'>
           <tr>
-            <td className='pl-2 pr-1 w-5 rounded-l-lg bg-background-section-burn whitespace-nowrap'></td>
-            <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.startTime')}</td>
-            <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.status')}</td>
-            <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.runtime')}</td>
-            <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.tokens')}</td>
-            <td className='pl-3 py-1.5 rounded-r-lg bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.user')}</td>
+            <td className='bg-background-section-burn w-5 whitespace-nowrap rounded-l-lg pl-2 pr-1'></td>
+            <td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appLog.table.header.startTime')}</td>
+            <td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appLog.table.header.status')}</td>
+            <td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appLog.table.header.runtime')}</td>
+            <td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appLog.table.header.tokens')}</td>
+            <td className='bg-background-section-burn whitespace-nowrap rounded-r-lg py-1.5 pl-3'>{t('appLog.table.header.user')}</td>
           </tr>
         </thead>
         <tbody className="text-text-secondary system-sm-regular">
@@ -100,19 +100,19 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
             const endUser = log.created_by_end_user ? log.created_by_end_user.session_id : log.created_by_account ? log.created_by_account.name : defaultValue
             return <tr
               key={log.id}
-              className={cn('border-b border-divider-subtle hover:bg-background-default-hover cursor-pointer', currentLog?.id !== log.id ? '' : 'bg-background-default-hover')}
+              className={cn('border-divider-subtle hover:bg-background-default-hover cursor-pointer border-b', currentLog?.id !== log.id ? '' : 'bg-background-default-hover')}
               onClick={() => {
                 setCurrentLog(log)
                 setShowDrawer(true)
               }}>
               <td className='h-4'>
                 {!log.read_at && (
-                  <div className='p-3 pr-0.5 flex items-center'>
-                    <span className='inline-block bg-util-colors-blue-blue-500 h-1.5 w-1.5 rounded'></span>
+                  <div className='flex items-center p-3 pr-0.5'>
+                    <span className='bg-util-colors-blue-blue-500 inline-block h-1.5 w-1.5 rounded'></span>
                   </div>
                 )}
               </td>
-              <td className='p-3 pr-2 w-[160px]'>{formatTime(log.created_at, t('appLog.dateTimeFormat') as string)}</td>
+              <td className='w-[160px] p-3 pr-2'>{formatTime(log.created_at, t('appLog.dateTimeFormat') as string)}</td>
               <td className='p-3 pr-2'>{statusTdRender(log.workflow_run.status)}</td>
               <td className='p-3 pr-2'>
                 <div className={cn(
diff --git a/web/app/components/base/agent-log-modal/detail.tsx b/web/app/components/base/agent-log-modal/detail.tsx
index 62bdb4b172..151e1f3296 100644
--- a/web/app/components/base/agent-log-modal/detail.tsx
+++ b/web/app/components/base/agent-log-modal/detail.tsx
@@ -79,28 +79,28 @@ const AgentLogDetail: FC<AgentLogDetailProps> = ({
   }, [appDetail, conversationID, messageID])
 
   return (
-    <div className='grow relative flex flex-col'>
+    <div className='relative flex grow flex-col'>
       {/* tab */}
-      <div className='shrink-0 flex items-center px-4 border-b-[0.5px] border-divider-regular'>
+      <div className='border-divider-regular flex shrink-0 items-center border-b-[0.5px] px-4'>
         <div
           className={cn(
-            'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-text-tertiary cursor-pointer',
-            currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-text-secondary',
+            'text-text-tertiary mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px]',
+            currentTab === 'DETAIL' && 'text-text-secondary !border-[rgb(21,94,239)]',
           )}
           onClick={() => switchTab('DETAIL')}
         >{t('runLog.detail')}</div>
         <div
           className={cn(
-            'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-text-tertiary cursor-pointer',
-            currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-text-secondary',
+            'text-text-tertiary mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px]',
+            currentTab === 'TRACING' && 'text-text-secondary !border-[rgb(21,94,239)]',
           )}
           onClick={() => switchTab('TRACING')}
         >{t('runLog.tracing')}</div>
       </div>
       {/* panel detail */}
-      <div className={cn('grow bg-components-panel-bg h-0 overflow-y-auto rounded-b-2xl', currentTab !== 'DETAIL' && '!bg-background-section')}>
+      <div className={cn('bg-components-panel-bg h-0 grow overflow-y-auto rounded-b-2xl', currentTab !== 'DETAIL' && '!bg-background-section')}>
         {loading && (
-          <div className='flex h-full items-center justify-center bg-components-panel-bg'>
+          <div className='bg-components-panel-bg flex h-full items-center justify-center'>
             <Loading />
           </div>
         )}
diff --git a/web/app/components/base/agent-log-modal/index.tsx b/web/app/components/base/agent-log-modal/index.tsx
index 3e62a7f121..b4ab7dcce2 100644
--- a/web/app/components/base/agent-log-modal/index.tsx
+++ b/web/app/components/base/agent-log-modal/index.tsx
@@ -35,7 +35,7 @@ const AgentLogModal: FC<AgentLogModalProps> = ({
 
   return (
     <div
-      className={cn('relative flex flex-col py-3 bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-xl shadow-xl z-10')}
+      className={cn('bg-components-panel-bg border-components-panel-border relative z-10 flex flex-col rounded-xl border-[0.5px] py-3 shadow-xl')}
       style={{
         width: 480,
         position: 'fixed',
@@ -45,9 +45,9 @@ const AgentLogModal: FC<AgentLogModalProps> = ({
       }}
       ref={ref}
     >
-      <h1 className='shrink-0 px-4 py-1 text-md font-semibold text-text-primary'>{t('appLog.runDetail.workflowTitle')}</h1>
-      <span className='absolute right-3 top-4 p-1 cursor-pointer z-20' onClick={onCancel}>
-        <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+      <h1 className='text-md text-text-primary shrink-0 px-4 py-1 font-semibold'>{t('appLog.runDetail.workflowTitle')}</h1>
+      <span className='absolute right-3 top-4 z-20 cursor-pointer p-1' onClick={onCancel}>
+        <RiCloseLine className='text-text-tertiary h-4 w-4' />
       </span>
       <AgentLogDetail
         conversationID={currentLogItem.conversationId}
diff --git a/web/app/components/base/agent-log-modal/iteration.tsx b/web/app/components/base/agent-log-modal/iteration.tsx
index b2647ad21a..6074b4373d 100644
--- a/web/app/components/base/agent-log-modal/iteration.tsx
+++ b/web/app/components/base/agent-log-modal/iteration.tsx
@@ -19,12 +19,12 @@ const Iteration: FC<Props> = ({ iterationInfo, isFinal, index }) => {
     <div className={cn('px-4 py-2')}>
       <div className='flex items-center'>
         {isFinal && (
-          <div className='shrink-0 mr-3 text-text-tertiary text-xs leading-[18px] font-semibold'>{t('appLog.agentLogDetail.finalProcessing')}</div>
+          <div className='text-text-tertiary mr-3 shrink-0 text-xs font-semibold leading-[18px]'>{t('appLog.agentLogDetail.finalProcessing')}</div>
         )}
         {!isFinal && (
-          <div className='shrink-0 mr-3 text-text-tertiary text-xs leading-[18px] font-semibold'>{`${t('appLog.agentLogDetail.iteration').toUpperCase()} ${index}`}</div>
+          <div className='text-text-tertiary mr-3 shrink-0 text-xs font-semibold leading-[18px]'>{`${t('appLog.agentLogDetail.iteration').toUpperCase()} ${index}`}</div>
         )}
-        <Divider bgStyle='gradient' className='grow h-[1px] mx-0'/>
+        <Divider bgStyle='gradient' className='mx-0 h-[1px] grow'/>
       </div>
       <ToolCall
         isLLM
diff --git a/web/app/components/base/agent-log-modal/result.tsx b/web/app/components/base/agent-log-modal/result.tsx
index 45953cee6c..f7ba42805b 100644
--- a/web/app/components/base/agent-log-modal/result.tsx
+++ b/web/app/components/base/agent-log-modal/result.tsx
@@ -45,7 +45,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
           error={error}
         />
       </div>
-      <div className='px-4 py-2 flex flex-col gap-2'>
+      <div className='flex flex-col gap-2 px-4 py-2'>
         <CodeEditor
           readOnly
           title={<div>INPUT</div>}
@@ -62,57 +62,57 @@ const ResultPanel: FC<ResultPanelProps> = ({
         />
       </div>
       <div className='px-4 py-2'>
-        <div className='h-[0.5px] bg-divider-regular opacity-5' />
+        <div className='bg-divider-regular h-[0.5px] opacity-5' />
       </div>
       <div className='px-4 py-2'>
         <div className='relative'>
-          <div className='h-6 leading-6 text-text-tertiary text-xs font-medium'>{t('runLog.meta.title')}</div>
+          <div className='text-text-tertiary h-6 text-xs font-medium leading-6'>{t('runLog.meta.title')}</div>
           <div className='py-1'>
             <div className='flex'>
-              <div className='shrink-0 w-[104px] px-2 py-[5px] text-text-tertiary text-xs leading-[18px] truncate'>{t('runLog.meta.status')}</div>
-              <div className='grow px-2 py-[5px] text-text-primary text-xs leading-[18px]'>
+              <div className='text-text-tertiary w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px]'>{t('runLog.meta.status')}</div>
+              <div className='text-text-primary grow px-2 py-[5px] text-xs leading-[18px]'>
                 <span>SUCCESS</span>
               </div>
             </div>
             <div className='flex'>
-              <div className='shrink-0 w-[104px] px-2 py-[5px] text-text-tertiary text-xs leading-[18px] truncate'>{t('runLog.meta.executor')}</div>
-              <div className='grow px-2 py-[5px] text-text-primary text-xs leading-[18px]'>
+              <div className='text-text-tertiary w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px]'>{t('runLog.meta.executor')}</div>
+              <div className='text-text-primary grow px-2 py-[5px] text-xs leading-[18px]'>
                 <span>{created_by || 'N/A'}</span>
               </div>
             </div>
             <div className='flex'>
-              <div className='shrink-0 w-[104px] px-2 py-[5px] text-text-tertiary text-xs leading-[18px] truncate'>{t('runLog.meta.startTime')}</div>
-              <div className='grow px-2 py-[5px] text-text-primary text-xs leading-[18px]'>
+              <div className='text-text-tertiary w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px]'>{t('runLog.meta.startTime')}</div>
+              <div className='text-text-primary grow px-2 py-[5px] text-xs leading-[18px]'>
                 <span>{formatTime(Date.parse(created_at) / 1000, t('appLog.dateTimeFormat') as string)}</span>
               </div>
             </div>
             <div className='flex'>
-              <div className='shrink-0 w-[104px] px-2 py-[5px] text-text-tertiary text-xs leading-[18px] truncate'>{t('runLog.meta.time')}</div>
-              <div className='grow px-2 py-[5px] text-text-primary text-xs leading-[18px]'>
+              <div className='text-text-tertiary w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px]'>{t('runLog.meta.time')}</div>
+              <div className='text-text-primary grow px-2 py-[5px] text-xs leading-[18px]'>
                 <span>{`${elapsed_time?.toFixed(3)}s`}</span>
               </div>
             </div>
             <div className='flex'>
-              <div className='shrink-0 w-[104px] px-2 py-[5px] text-text-tertiary text-xs leading-[18px] truncate'>{t('runLog.meta.tokens')}</div>
-              <div className='grow px-2 py-[5px] text-text-primary text-xs leading-[18px]'>
+              <div className='text-text-tertiary w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px]'>{t('runLog.meta.tokens')}</div>
+              <div className='text-text-primary grow px-2 py-[5px] text-xs leading-[18px]'>
                 <span>{`${total_tokens || 0} Tokens`}</span>
               </div>
             </div>
             <div className='flex'>
-              <div className='shrink-0 w-[104px] px-2 py-[5px] text-text-tertiary text-xs leading-[18px] truncate'>{t('appLog.agentLogDetail.agentMode')}</div>
-              <div className='grow px-2 py-[5px] text-text-primary text-xs leading-[18px]'>
+              <div className='text-text-tertiary w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px]'>{t('appLog.agentLogDetail.agentMode')}</div>
+              <div className='text-text-primary grow px-2 py-[5px] text-xs leading-[18px]'>
                 <span>{agentMode === 'function_call' ? t('appDebug.agent.agentModeType.functionCall') : t('appDebug.agent.agentModeType.ReACT')}</span>
               </div>
             </div>
             <div className='flex'>
-              <div className='shrink-0 w-[104px] px-2 py-[5px] text-text-tertiary text-xs leading-[18px] truncate'>{t('appLog.agentLogDetail.toolUsed')}</div>
-              <div className='grow px-2 py-[5px] text-text-primary text-xs leading-[18px]'>
+              <div className='text-text-tertiary w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px]'>{t('appLog.agentLogDetail.toolUsed')}</div>
+              <div className='text-text-primary grow px-2 py-[5px] text-xs leading-[18px]'>
                 <span>{tools?.length ? tools?.join(', ') : 'Null'}</span>
               </div>
             </div>
             <div className='flex'>
-              <div className='shrink-0 w-[104px] px-2 py-[5px] text-text-tertiary text-xs leading-[18px] truncate'>{t('appLog.agentLogDetail.iterations')}</div>
-              <div className='grow px-2 py-[5px] text-text-primary text-xs leading-[18px]'>
+              <div className='text-text-tertiary w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px]'>{t('appLog.agentLogDetail.iterations')}</div>
+              <div className='text-text-primary grow px-2 py-[5px] text-xs leading-[18px]'>
                 <span>{iterations}</span>
               </div>
             </div>
diff --git a/web/app/components/base/agent-log-modal/tool-call.tsx b/web/app/components/base/agent-log-modal/tool-call.tsx
index d77a3f60b9..049431776a 100644
--- a/web/app/components/base/agent-log-modal/tool-call.tsx
+++ b/web/app/components/base/agent-log-modal/tool-call.tsx
@@ -48,25 +48,25 @@ const ToolCallItem: FC<Props> = ({ toolCall, isLLM = false, isFinal, tokens, obs
 
   return (
     <div className={cn('py-1')}>
-      <div className={cn('group transition-all bg-background-default border border-components-panel-border rounded-2xl shadow-xs hover:shadow-md')}>
+      <div className={cn('bg-background-default border-components-panel-border shadow-xs group rounded-2xl border transition-all hover:shadow-md')}>
         <div
           className={cn(
-            'flex items-center py-3 pl-[6px] pr-3 cursor-pointer',
+            'flex cursor-pointer items-center py-3 pl-[6px] pr-3',
             !collapseState && '!pb-2',
           )}
           onClick={() => setCollapseState(!collapseState)}
         >
           <ChevronRight
             className={cn(
-              'shrink-0 w-3 h-3 mr-1 text-text-quaternary transition-all group-hover:text-text-tertiary',
+              'text-text-quaternary group-hover:text-text-tertiary mr-1 h-3 w-3 shrink-0 transition-all',
               !collapseState && 'rotate-90',
             )}
           />
-          <BlockIcon className={cn('shrink-0 mr-2')} type={isLLM ? BlockEnum.LLM : BlockEnum.Tool} toolIcon={toolCall.tool_icon} />
+          <BlockIcon className={cn('mr-2 shrink-0')} type={isLLM ? BlockEnum.LLM : BlockEnum.Tool} toolIcon={toolCall.tool_icon} />
           <div className={cn(
-            'grow text-text-secondary text-[13px] leading-[16px] font-semibold truncate',
+            'text-text-secondary grow truncate text-[13px] font-semibold leading-[16px]',
           )} title={toolName}>{toolName}</div>
-          <div className='shrink-0 text-text-tertiary text-xs leading-[18px]'>
+          <div className='text-text-tertiary shrink-0 text-xs leading-[18px]'>
             {toolCall.time_cost && (
               <span>{getTime(toolCall.time_cost || 0)}</span>
             )}
@@ -75,17 +75,17 @@ const ToolCallItem: FC<Props> = ({ toolCall, isLLM = false, isFinal, tokens, obs
             )}
           </div>
           {toolCall.status === 'success' && (
-            <RiCheckboxCircleLine className='shrink-0 ml-2 w-3.5 h-3.5 text-[#12B76A]' />
+            <RiCheckboxCircleLine className='ml-2 h-3.5 w-3.5 shrink-0 text-[#12B76A]' />
           )}
           {toolCall.status === 'error' && (
-            <RiErrorWarningLine className='shrink-0 ml-2 w-3.5 h-3.5 text-[#F04438]' />
+            <RiErrorWarningLine className='ml-2 h-3.5 w-3.5 shrink-0 text-[#F04438]' />
           )}
         </div>
         {!collapseState && (
           <div className='pb-2'>
             <div className={cn('px-[10px] py-1')}>
               {toolCall.status === 'error' && (
-                <div className='px-3 py-[10px] bg-[#fef3f2] rounded-lg border-[0.5px] border-[rbga(0,0,0,0.05)] text-xs leading-[18px] text-[#d92d20] shadow-xs'>{toolCall.error}</div>
+                <div className='shadow-xs rounded-lg border-[0.5px] border-[rbga(0,0,0,0.05)] bg-[#fef3f2] px-3 py-[10px] text-xs leading-[18px] text-[#d92d20]'>{toolCall.error}</div>
               )}
             </div>
             {toolCall.tool_input && (
diff --git a/web/app/components/base/answer-icon/index.tsx b/web/app/components/base/answer-icon/index.tsx
index 8c6363e05c..faad4e5aaa 100644
--- a/web/app/components/base/answer-icon/index.tsx
+++ b/web/app/components/base/answer-icon/index.tsx
@@ -38,7 +38,7 @@ const AnswerIcon: FC<AnswerIconProps> = ({
     style={{ background: background || '#D5F5F6' }}
   >
     {isValidImageIcon
-      ? <img src={imageUrl} className="w-full h-full rounded-full" alt="answer icon" />
+      ? <img src={imageUrl} className="h-full w-full rounded-full" alt="answer icon" />
       : (icon && icon !== '') ? <em-emoji id={icon} /> : <em-emoji id='🤖' />
     }
   </div>
diff --git a/web/app/components/base/app-icon-picker/ImageInput.tsx b/web/app/components/base/app-icon-picker/ImageInput.tsx
index 0111b3c68d..a973362ec8 100644
--- a/web/app/components/base/app-icon-picker/ImageInput.tsx
+++ b/web/app/components/base/app-icon-picker/ImageInput.tsx
@@ -101,8 +101,8 @@ const ImageInput: FC<UploaderProps> = ({
         {
           !inputImage
             ? <>
-              <ImagePlus className="w-[30px] h-[30px] mb-3 pointer-events-none" />
-              <div className="text-sm font-medium mb-[2px]">
+              <ImagePlus className="pointer-events-none mb-3 h-[30px] w-[30px]" />
+              <div className="mb-[2px] text-sm font-medium">
                 <span className="pointer-events-none">Drop your image here, or&nbsp;</span>
                 <button className="text-components-button-primary-bg" onClick={() => inputRef.current?.click()}>browse</button>
                 <input
@@ -112,7 +112,7 @@ const ImageInput: FC<UploaderProps> = ({
                   onChange={handleLocalFileInput}
                 />
               </div>
-              <div className="text-xs pointer-events-none">Supports PNG, JPG, JPEG, WEBP and GIF</div>
+              <div className="pointer-events-none text-xs">Supports PNG, JPG, JPEG, WEBP and GIF</div>
             </>
             : handleShowImage()
         }
diff --git a/web/app/components/base/app-icon-picker/index.tsx b/web/app/components/base/app-icon-picker/index.tsx
index 277e2fa1d0..ffc99356b5 100644
--- a/web/app/components/base/app-icon-picker/index.tsx
+++ b/web/app/components/base/app-icon-picker/index.tsx
@@ -113,13 +113,13 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
     wrapperClassName={className}
     className={cn(s.container, '!w-[362px] !p-0')}
   >
-    {!DISABLE_UPLOAD_IMAGE_AS_ICON && <div className="p-2 pb-0 w-full">
-      <div className='p-1 flex items-center justify-center gap-2 bg-background-body rounded-xl'>
+    {!DISABLE_UPLOAD_IMAGE_AS_ICON && <div className="w-full p-2 pb-0">
+      <div className='bg-background-body flex items-center justify-center gap-2 rounded-xl p-1'>
         {tabs.map(tab => (
           <button
             key={tab.key}
             className={`
-                        p-2 flex-1 flex justify-center items-center h-8 rounded-xl text-sm shrink-0 font-medium
+                        flex h-8 flex-1 shrink-0 items-center justify-center rounded-xl p-2 text-sm font-medium
                         ${activeTab === tab.key && 'bg-components-main-nav-nav-button-bg-active shadow-md'}
                       `}
             onClick={() => setActiveTab(tab.key as AppIconType)}
@@ -134,7 +134,7 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
     <ImageInput className={activeTab === 'image' ? 'block' : 'hidden'} onImageInput={handleImageInput} />
 
     <Divider className='m-0' />
-    <div className='w-full flex items-center justify-center p-3 gap-2'>
+    <div className='flex w-full items-center justify-center gap-2 p-3'>
       <Button className='w-full' onClick={() => onClose?.()}>
         {t('app.iconPicker.cancel')}
       </Button>
diff --git a/web/app/components/base/app-icon/index.tsx b/web/app/components/base/app-icon/index.tsx
index 1938c42d3e..84b1095062 100644
--- a/web/app/components/base/app-icon/index.tsx
+++ b/web/app/components/base/app-icon/index.tsx
@@ -62,7 +62,7 @@ const AppIcon: FC<AppIconProps> = ({
   >
     {isValidImageIcon
       // eslint-disable-next-line @next/next/no-img-element
-      ? <img src={imageUrl} className="w-full h-full" alt="app icon" />
+      ? <img src={imageUrl} className="h-full w-full" alt="app icon" />
       : (innerIcon || ((icon && icon !== '') ? <em-emoji id={icon} /> : <em-emoji id='🤖' />))
     }
   </span>
diff --git a/web/app/components/base/app-unavailable.tsx b/web/app/components/base/app-unavailable.tsx
index b8b42108a9..00abb4cfa0 100644
--- a/web/app/components/base/app-unavailable.tsx
+++ b/web/app/components/base/app-unavailable.tsx
@@ -17,8 +17,8 @@ const AppUnavailable: FC<IAppUnavailableProps> = ({
   const { t } = useTranslation()
 
   return (
-    <div className='flex items-center justify-center w-screen h-screen'>
-      <h1 className='mr-5 h-[50px] leading-[50px] pr-5 text-[24px] font-medium'
+    <div className='flex h-screen w-screen items-center justify-center'>
+      <h1 className='mr-5 h-[50px] pr-5 text-[24px] font-medium leading-[50px]'
         style={{
           borderRight: '1px solid rgba(0,0,0,.3)',
         }}>{code}</h1>
diff --git a/web/app/components/base/audio-btn/audio.player.manager.ts b/web/app/components/base/audio-btn/audio.player.manager.ts
index 9b3349754f..4637bd2063 100644
--- a/web/app/components/base/audio-btn/audio.player.manager.ts
+++ b/web/app/components/base/audio-btn/audio.player.manager.ts
@@ -12,7 +12,7 @@ export class AudioPlayerManager {
   private audioPlayers: AudioPlayer | null = null
   private msgId: string | undefined
 
-  // eslint-disable-next-line
+   
   private constructor() {
   }
 
diff --git a/web/app/components/base/audio-btn/index.tsx b/web/app/components/base/audio-btn/index.tsx
index 40a7b96666..db1aef0a40 100644
--- a/web/app/components/base/audio-btn/index.tsx
+++ b/web/app/components/base/audio-btn/index.tsx
@@ -87,18 +87,18 @@ const AudioBtn = ({
       >
         <button
           disabled={audioState === 'loading'}
-          className={`box-border w-6 h-6 flex items-center justify-center cursor-pointer ${isAudition ? 'p-0.5' : 'p-0 rounded-md bg-white'}`}
+          className={`box-border flex h-6 w-6 cursor-pointer items-center justify-center ${isAudition ? 'p-0.5' : 'rounded-md bg-white p-0'}`}
           onClick={handleToggle}
         >
           {audioState === 'loading'
             ? (
-              <div className='w-full h-full rounded-md flex items-center justify-center'>
+              <div className='flex h-full w-full items-center justify-center rounded-md'>
                 <Loading />
               </div>
             )
             : (
-              <div className={`w-full h-full rounded-md flex items-center justify-center ${!isAudition ? 'hover:bg-gray-50' : 'hover:bg-gray-50'}`}>
-                <div className={`w-4 h-4 ${(audioState === 'playing') ? s.pauseIcon : s.playIcon}`}></div>
+              <div className={`flex h-full w-full items-center justify-center rounded-md ${!isAudition ? 'hover:bg-gray-50' : 'hover:bg-gray-50'}`}>
+                <div className={`h-4 w-4 ${(audioState === 'playing') ? s.pauseIcon : s.playIcon}`}></div>
               </div>
             )}
         </button>
diff --git a/web/app/components/base/auto-height-textarea/common.tsx b/web/app/components/base/auto-height-textarea/common.tsx
index 8cc2bedd06..841bfdd729 100644
--- a/web/app/components/base/auto-height-textarea/common.tsx
+++ b/web/app/components/base/auto-height-textarea/common.tsx
@@ -39,7 +39,7 @@ const AutoHeightTextarea = (
         <textarea
           ref={ref}
           placeholder={placeholder}
-          className={cn(className, 'disabled:bg-transparent absolute inset-0 outline-none border-none appearance-none resize-none w-full h-full')}
+          className={cn(className, 'absolute inset-0 h-full w-full resize-none appearance-none border-none outline-none disabled:bg-transparent')}
           value={value}
           disabled={disabled}
           {...rest}
diff --git a/web/app/components/base/auto-height-textarea/index.tsx b/web/app/components/base/auto-height-textarea/index.tsx
index 0c7e9429e0..da412a176d 100644
--- a/web/app/components/base/auto-height-textarea/index.tsx
+++ b/web/app/components/base/auto-height-textarea/index.tsx
@@ -67,7 +67,7 @@ const AutoHeightTextarea = (
 
   return (
     (<div className={`relative ${wrapperClassName}`}>
-      <div className={cn(className, 'invisible whitespace-pre-wrap break-all  overflow-y-auto')} style={{
+      <div className={cn(className, 'invisible overflow-y-auto whitespace-pre-wrap  break-all')} style={{
         minHeight,
         maxHeight,
         paddingRight: (value && value.trim().length > 10000) ? 140 : 130,
diff --git a/web/app/components/base/avatar/index.tsx b/web/app/components/base/avatar/index.tsx
index af406555bf..2a08f75f7b 100644
--- a/web/app/components/base/avatar/index.tsx
+++ b/web/app/components/base/avatar/index.tsx
@@ -42,7 +42,7 @@ const Avatar = ({
       style={style}
     >
       <div
-        className={cn(textClassName, 'text-center text-white scale-[0.4]')}
+        className={cn(textClassName, 'scale-[0.4] text-center text-white')}
         style={style}
       >
         {name[0].toLocaleUpperCase()}
diff --git a/web/app/components/base/badge.tsx b/web/app/components/base/badge.tsx
index fe034ad2f4..bde60d30f2 100644
--- a/web/app/components/base/badge.tsx
+++ b/web/app/components/base/badge.tsx
@@ -20,13 +20,13 @@ const Badge = ({
   return (
     <div
       className={cn(
-        'relative inline-flex items-center px-[5px] h-5 rounded-[5px] border border-divider-deep leading-3 text-text-tertiary',
+        'border-divider-deep text-text-tertiary relative inline-flex h-5 items-center rounded-[5px] border px-[5px] leading-3',
         uppercase ? 'system-2xs-medium-uppercase' : 'system-xs-medium',
         className,
       )}
     >
       {hasRedCornerMark && (
-        <div className='absolute top-[-2px] right-[-2px] w-1.5 h-1.5 border border-components-badge-status-light-error-border-inner bg-components-badge-status-light-error-bg rounded-[2px] shadow-sm'>
+        <div className='border-components-badge-status-light-error-border-inner bg-components-badge-status-light-error-bg absolute right-[-2px] top-[-2px] h-1.5 w-1.5 rounded-[2px] border shadow-sm'>
         </div>
       )}
       {children || text}
diff --git a/web/app/components/base/block-input/index.tsx b/web/app/components/base/block-input/index.tsx
index 43c14de4c9..9b26b524f6 100644
--- a/web/app/components/base/block-input/index.tsx
+++ b/web/app/components/base/block-input/index.tsx
@@ -134,8 +134,8 @@ const BlockInput: FC<IBlockInputProps> = ({
       {textAreaContent}
       {/* footer */}
       {!readonly && (
-        <div className='pl-4 pb-2 flex'>
-          <div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{currentValue?.length}</div>
+        <div className='flex pb-2 pl-4'>
+          <div className="h-[18px] rounded-md bg-gray-100 px-1 text-xs leading-[18px] text-gray-500">{currentValue?.length}</div>
         </div>
       )}
 
diff --git a/web/app/components/base/button/add-button.tsx b/web/app/components/base/button/add-button.tsx
index 0b06a493ad..c05a9310bb 100644
--- a/web/app/components/base/button/add-button.tsx
+++ b/web/app/components/base/button/add-button.tsx
@@ -14,8 +14,8 @@ const AddButton: FC<Props> = ({
   onClick,
 }) => {
   return (
-    <div className={cn(className, 'p-1 rounded-md cursor-pointer hover:bg-state-base-hover select-none')} onClick={onClick}>
-      <RiAddLine className='w-4 h-4 text-text-tertiary' />
+    <div className={cn(className, 'hover:bg-state-base-hover cursor-pointer select-none rounded-md p-1')} onClick={onClick}>
+      <RiAddLine className='text-text-tertiary h-4 w-4' />
     </div>
   )
 }
diff --git a/web/app/components/base/button/index.stories.tsx b/web/app/components/base/button/index.stories.tsx
index 2964275e12..c1b18f1e50 100644
--- a/web/app/components/base/button/index.stories.tsx
+++ b/web/app/components/base/button/index.stories.tsx
@@ -99,7 +99,7 @@ export const WithIcon: Story = {
     variant: 'primary',
     children: (
       <>
-        <RocketLaunchIcon className="h-4 w-4 mr-1.5 stroke-[1.8px]" />
+        <RocketLaunchIcon className="mr-1.5 h-4 w-4 stroke-[1.8px]" />
         Launch
       </>
     ),
diff --git a/web/app/components/base/button/index.tsx b/web/app/components/base/button/index.tsx
index 3bd4b21a5e..7c01043e9d 100644
--- a/web/app/components/base/button/index.tsx
+++ b/web/app/components/base/button/index.tsx
@@ -50,7 +50,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       >
         {children}
-        {loading && <Spinner loading={loading} className='!text-white !h-3 !w-3 !border-2 !ml-1' />}
+        {loading && <Spinner loading={loading} className='!ml-1 !h-3 !w-3 !border-2 !text-white' />}
       </button>
     )
   },
diff --git a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
index 77259201ba..0c95ca91d8 100644
--- a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
+++ b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
@@ -155,7 +155,7 @@ const ChatWrapper = () => {
 
   return (
     <div
-      className='h-full bg-chatbot-bg overflow-hidden'
+      className='bg-chatbot-bg h-full overflow-hidden'
     >
       <Chat
         appData={appData}
diff --git a/web/app/components/base/chat/chat-with-history/config-panel/form-input.tsx b/web/app/components/base/chat/chat-with-history/config-panel/form-input.tsx
index 2e6df72bfb..3eb5bbf2f6 100644
--- a/web/app/components/base/chat/chat-with-history/config-panel/form-input.tsx
+++ b/web/app/components/base/chat/chat-with-history/config-panel/form-input.tsx
@@ -35,7 +35,7 @@ const FormInput: FC<InputProps> = ({
 
   return (
     <input
-      className='grow h-9 rounded-lg bg-gray-100 px-2.5 outline-none appearance-none'
+      className='h-9 grow appearance-none rounded-lg bg-gray-100 px-2.5 outline-none'
       value={value || ''}
       maxLength={max_length}
       onChange={e => onChange(variable, e.target.value)}
diff --git a/web/app/components/base/chat/chat-with-history/config-panel/form.tsx b/web/app/components/base/chat/chat-with-history/config-panel/form.tsx
index 1292edabd2..2b78b94e08 100644
--- a/web/app/components/base/chat/chat-with-history/config-panel/form.tsx
+++ b/web/app/components/base/chat/chat-with-history/config-panel/form.tsx
@@ -44,7 +44,7 @@ const Form = () => {
     if (form.type === 'number') {
       return (
         <input
-          className="grow h-9 rounded-lg bg-gray-100 px-2.5 outline-none appearance-none"
+          className="h-9 grow appearance-none rounded-lg bg-gray-100 px-2.5 outline-none"
           type="number"
           value={newConversationInputs[variable] || ''}
           onChange={e => handleFormChange(variable, e.target.value)}
@@ -103,9 +103,9 @@ const Form = () => {
         inputsForms.map(form => (
           <div
             key={form.variable}
-            className={`flex mb-3 last-of-type:mb-0 text-sm text-gray-900 ${isMobile && '!flex-wrap'}`}
+            className={`mb-3 flex text-sm text-gray-900 last-of-type:mb-0 ${isMobile && '!flex-wrap'}`}
           >
-            <div className={`shrink-0 mr-2 py-2 w-[128px] ${isMobile && '!w-full'}`}>{form.label}</div>
+            <div className={`mr-2 w-[128px] shrink-0 py-2 ${isMobile && '!w-full'}`}>{form.label}</div>
             {renderField(form)}
           </div>
         ))
diff --git a/web/app/components/base/chat/chat-with-history/config-panel/index.tsx b/web/app/components/base/chat/chat-with-history/config-panel/index.tsx
index c864a3925d..235fa65189 100644
--- a/web/app/components/base/chat/chat-with-history/config-panel/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/config-panel/index.tsx
@@ -23,10 +23,10 @@ const ConfigPanel = () => {
   const site = appData?.site
 
   return (
-    <div className='flex flex-col max-h-[80%] w-full max-w-[720px]'>
+    <div className='flex max-h-[80%] w-full max-w-[720px] flex-col'>
       <div
         className={`
-          grow rounded-xl overflow-y-auto
+          grow overflow-y-auto rounded-xl
           ${showConfigPanelBeforeChat && 'border-[0.5px] border-gray-100 shadow-lg'}
           ${!showConfigPanelBeforeChat && collapsed && 'border border-indigo-100'}
           ${!showConfigPanelBeforeChat && !collapsed && 'border-[0.5px] border-gray-100 shadow-lg'}
@@ -34,14 +34,14 @@ const ConfigPanel = () => {
       >
         <div
           className={`
-            flex flex-wrap px-6 py-4 rounded-t-xl bg-indigo-25
+            bg-indigo-25 flex flex-wrap rounded-t-xl px-6 py-4
             ${isMobile && '!px-4 !py-3'}
           `}
         >
           {
             showConfigPanelBeforeChat && (
               <>
-                <div className='flex items-center h-8 text-2xl font-semibold text-gray-800'>
+                <div className='flex h-8 items-center text-2xl font-semibold text-gray-800'>
                   <AppIcon
                     iconType={appData?.site.icon_type}
                     icon={appData?.site.icon}
@@ -65,8 +65,8 @@ const ConfigPanel = () => {
           {
             !showConfigPanelBeforeChat && collapsed && (
               <>
-                <Star06 className='mr-1 mt-1 w-4 h-4 text-indigo-600' />
-                <div className='grow py-[3px] text-[13px] text-indigo-600 leading-[18px] font-medium'>
+                <Star06 className='mr-1 mt-1 h-4 w-4 text-indigo-600' />
+                <div className='grow py-[3px] text-[13px] font-medium leading-[18px] text-indigo-600'>
                   {t('share.chat.configStatusDes')}
                 </div>
                 <Button
@@ -75,7 +75,7 @@ const ConfigPanel = () => {
                   className='shrink-0'
                   onClick={() => setCollapsed(false)}
                 >
-                  <Edit02 className='mr-1 w-3 h-3' />
+                  <Edit02 className='mr-1 h-3 w-3' />
                   {t('common.operation.edit')}
                 </Button>
               </>
@@ -84,8 +84,8 @@ const ConfigPanel = () => {
           {
             !showConfigPanelBeforeChat && !collapsed && (
               <>
-                <Star06 className='mr-1 mt-1 w-4 h-4 text-indigo-600' />
-                <div className='grow py-[3px] text-[13px] text-indigo-600 leading-[18px] font-medium'>
+                <Star06 className='mr-1 mt-1 h-4 w-4 text-indigo-600' />
+                <div className='grow py-[3px] text-[13px] font-medium leading-[18px] text-indigo-600'>
                   {t('share.chat.privatePromptConfigTitle')}
                 </div>
               </>
@@ -94,9 +94,9 @@ const ConfigPanel = () => {
         </div>
         {
           !collapsed && !showConfigPanelBeforeChat && (
-            <div className='p-6 rounded-b-xl'>
+            <div className='rounded-b-xl p-6'>
               <Form />
-              <div className={`pl-[136px] flex items-center ${isMobile && '!pl-0'}`}>
+              <div className={`flex items-center pl-[136px] ${isMobile && '!pl-0'}`}>
                 <Button
                   variant='primary'
                   className='mr-2'
@@ -118,7 +118,7 @@ const ConfigPanel = () => {
         }
         {
           showConfigPanelBeforeChat && (
-            <div className='p-6 rounded-b-xl'>
+            <div className='rounded-b-xl p-6'>
               <Form />
               <Button
                 className={`${inputsForms.length && !isMobile && 'ml-[136px]'}`}
@@ -126,7 +126,7 @@ const ConfigPanel = () => {
                 size='large'
                 onClick={handleStartChat}
               >
-                <MessageDotsCircle className='mr-2 w-4 h-4 text-white' />
+                <MessageDotsCircle className='mr-2 h-4 w-4 text-white' />
                 {t('share.chat.startChat')}
               </Button>
             </div>
@@ -135,11 +135,11 @@ const ConfigPanel = () => {
       </div>
       {
         showConfigPanelBeforeChat && (site || customConfig) && (
-          <div className='mt-4 flex flex-wrap justify-between items-center py-2 text-xs text-gray-400'>
+          <div className='mt-4 flex flex-wrap items-center justify-between py-2 text-xs text-gray-400'>
             {site?.privacy_policy
               ? <div className={`flex items-center ${isMobile && 'w-full justify-end'}`}>{t('share.chat.privacyPolicyLeft')}
                 <a
-                  className='text-gray-500 px-1'
+                  className='px-1 text-gray-500'
                   href={site?.privacy_policy}
                   target='_blank' rel='noopener noreferrer'>{t('share.chat.privacyPolicyMiddle')}</a>
                 {t('share.chat.privacyPolicyRight')}
@@ -151,11 +151,11 @@ const ConfigPanel = () => {
                 ? null
                 : (
                   <div className={`flex items-center justify-end ${isMobile && 'w-full'}`}>
-                    <div className='flex items-center pr-3 space-x-3'>
+                    <div className='flex items-center space-x-3 pr-3'>
                       <span className='uppercase'>{t('share.chat.poweredBy')}</span>
                       {
                         customConfig?.replace_webapp_logo
-                          ? <img src={customConfig?.replace_webapp_logo} alt='logo' className='block w-auto h-5' />
+                          ? <img src={customConfig?.replace_webapp_logo} alt='logo' className='block h-5 w-auto' />
                           : <LogoSite className='!h-5' />
                       }
                     </div>
diff --git a/web/app/components/base/chat/chat-with-history/header-in-mobile.tsx b/web/app/components/base/chat/chat-with-history/header-in-mobile.tsx
index 4178940014..bfe21d1f94 100644
--- a/web/app/components/base/chat/chat-with-history/header-in-mobile.tsx
+++ b/web/app/components/base/chat/chat-with-history/header-in-mobile.tsx
@@ -16,14 +16,14 @@ const HeaderInMobile = () => {
 
   return (
     <>
-      <div className='shrink-0 flex items-center px-3 h-[44px] border-b-[0.5px] border-b-gray-200'>
+      <div className='flex h-[44px] shrink-0 items-center border-b-[0.5px] border-b-gray-200 px-3'>
         <div
-          className='shrink-0 flex items-center justify-center w-8 h-8 rounded-lg'
+          className='flex h-8 w-8 shrink-0 items-center justify-center rounded-lg'
           onClick={() => setShowSidebar(true)}
         >
-          <Menu01 className='w-4 h-4 text-gray-700' />
+          <Menu01 className='h-4 w-4 text-gray-700' />
         </div>
-        <div className='grow flex justify-center items-center px-3'>
+        <div className='flex grow items-center justify-center px-3'>
           <AppIcon
             className='mr-2'
             size='tiny'
@@ -32,15 +32,15 @@ const HeaderInMobile = () => {
             imageUrl={appData?.site.icon_url}
             background={appData?.site.icon_background}
           />
-          <div className='py-1 text-base font-semibold text-gray-800 truncate'>
+          <div className='truncate py-1 text-base font-semibold text-gray-800'>
             {appData?.site.title}
           </div>
         </div>
         <div
-          className='shrink-0 flex items-center justify-center w-8 h-8 rounded-lg'
+          className='flex h-8 w-8 shrink-0 items-center justify-center rounded-lg'
           onClick={handleNewConversation}
         >
-          <Edit05 className='w-4 h-4 text-gray-700' />
+          <Edit05 className='h-4 w-4 text-gray-700' />
         </div>
       </div>
       {
diff --git a/web/app/components/base/chat/chat-with-history/header.tsx b/web/app/components/base/chat/chat-with-history/header.tsx
index d269b97766..0af5be7166 100644
--- a/web/app/components/base/chat/chat-with-history/header.tsx
+++ b/web/app/components/base/chat/chat-with-history/header.tsx
@@ -12,8 +12,8 @@ const Header: FC<HeaderProps> = ({
   return (
     <div
       className={`
-      sticky top-0 flex items-center px-8 h-16 bg-white/80 text-base font-medium 
-      text-gray-900 border-b-[0.5px] border-b-gray-100 backdrop-blur-md z-10
+      sticky top-0 z-10 flex h-16 items-center border-b-[0.5px] border-b-gray-100 bg-white/80 
+      px-8 text-base font-medium text-gray-900 backdrop-blur-md
       ${isMobile && '!h-12'}
       `}
     >
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
index 69716f9ed8..e2a79d843e 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
@@ -60,10 +60,10 @@ const Sidebar = () => {
   }, [showRename, handleRenameConversation, handleCancelRename])
 
   return (
-    <div className='shrink-0 h-full flex flex-col w-[240px] border-r border-r-gray-100'>
+    <div className='flex h-full w-[240px] shrink-0 flex-col border-r border-r-gray-100'>
       {
         !isMobile && (
-          <div className='shrink-0 flex p-4'>
+          <div className='flex shrink-0 p-4'>
             <AppIcon
               className='mr-3'
               size='small'
@@ -81,14 +81,14 @@ const Sidebar = () => {
       <div className='shrink-0 p-4'>
         <Button
           variant='secondary-accent'
-          className='justify-start w-full'
+          className='w-full justify-start'
           onClick={handleNewConversation}
         >
-          <Edit05 className='mr-2 w-4 h-4' />
+          <Edit05 className='mr-2 h-4 w-4' />
           {t('share.chat.newChat')}
         </Button>
       </div>
-      <div className='grow px-4 py-2 overflow-y-auto'>
+      <div className='grow overflow-y-auto px-4 py-2'>
         {
           !!pinnedConversationList.length && (
             <div className='mb-4'>
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/item.tsx b/web/app/components/base/chat/chat-with-history/sidebar/item.tsx
index 90458cbf9d..fca974bb3e 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/item.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/item.tsx
@@ -30,16 +30,16 @@ const Item: FC<ItemProps> = ({
       ref={ref}
       key={item.id}
       className={`
-        flex mb-0.5 last-of-type:mb-0 py-1.5 pl-3 pr-1.5 text-sm font-medium text-gray-700 
-        rounded-lg cursor-pointer hover:bg-gray-50 group
+        group mb-0.5 flex cursor-pointer rounded-lg py-1.5 pl-3 pr-1.5 text-sm 
+        font-medium text-gray-700 last-of-type:mb-0 hover:bg-gray-50
         ${currentConversationId === item.id && 'text-primary-600 bg-primary-50'}
       `}
       onClick={() => onChangeConversation(item.id)}
     >
-      <MessageDotsCircle className={`shrink-0 mt-1 mr-2 w-4 h-4 text-gray-400 ${currentConversationId === item.id && 'text-primary-600'}`} />
-      <div className='grow py-0.5 break-all' title={item.name}>{item.name}</div>
+      <MessageDotsCircle className={`mr-2 mt-1 h-4 w-4 shrink-0 text-gray-400 ${currentConversationId === item.id && 'text-primary-600'}`} />
+      <div className='grow break-all py-0.5' title={item.name}>{item.name}</div>
       {item.id !== '' && (
-        <div className='shrink-0 h-6' onClick={e => e.stopPropagation()}>
+        <div className='h-6 shrink-0' onClick={e => e.stopPropagation()}>
           <ItemOperation
             isPinned={!!isPin}
             isItemHovering={isHovering}
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/list.tsx b/web/app/components/base/chat/chat-with-history/sidebar/list.tsx
index a2a3e1fa81..540325c0a9 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/list.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/list.tsx
@@ -22,7 +22,7 @@ const List: FC<ListProps> = ({
     <div>
       {
         title && (
-          <div className='mb-0.5 px-3 h-[26px] text-xs font-medium text-gray-500'>
+          <div className='mb-0.5 h-[26px] px-3 text-xs font-medium text-gray-500'>
             {title}
           </div>
         )
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx b/web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx
index 8c2c587b52..0fb78b421c 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx
@@ -29,16 +29,16 @@ const RenameModal: FC<IRenameModalProps> = ({
       isShow={isShow}
       onClose={onClose}
     >
-      <div className={'mt-6 font-medium text-sm leading-[21px] text-gray-900'}>{t('common.chat.conversationName')}</div>
-      <input className={'mt-2 w-full rounded-lg h-10 box-border px-3 text-sm leading-10 bg-gray-100'}
+      <div className={'mt-6 text-sm font-medium leading-[21px] text-gray-900'}>{t('common.chat.conversationName')}</div>
+      <input className={'mt-2 box-border h-10 w-full rounded-lg bg-gray-100 px-3 text-sm leading-10'}
         value={tempName}
         onChange={e => setTempName(e.target.value)}
         placeholder={t('common.chat.conversationNamePlaceholder') || ''}
       />
 
       <div className='mt-10 flex justify-end'>
-        <Button className='mr-2 flex-shrink-0' onClick={onClose}>{t('common.operation.cancel')}</Button>
-        <Button variant='primary' className='flex-shrink-0' onClick={() => onSave(tempName)} loading={saveLoading}>{t('common.operation.save')}</Button>
+        <Button className='mr-2 shrink-0' onClick={onClose}>{t('common.operation.cancel')}</Button>
+        <Button variant='primary' className='shrink-0' onClick={() => onSave(tempName)} loading={saveLoading}>{t('common.operation.save')}</Button>
       </div>
     </Modal>
   )
diff --git a/web/app/components/base/chat/chat/answer/index.tsx b/web/app/components/base/chat/chat/answer/index.tsx
index 72e2a4bb1d..db9137ec1f 100644
--- a/web/app/components/base/chat/chat/answer/index.tsx
+++ b/web/app/components/base/chat/chat/answer/index.tsx
@@ -105,7 +105,7 @@ const Answer: FC<AnswerProps> = ({
       <div className='relative h-10 w-10 shrink-0'>
         {answerIcon || <AnswerIcon />}
         {responding && (
-          <div className='absolute -left-[3px] -top-[3px] flex h-4 w-4 items-center rounded-full border-[0.5px] border-gray-50 bg-white pl-[6px] shadow-xs'>
+          <div className='shadow-xs absolute -left-[3px] -top-[3px] flex h-4 w-4 items-center rounded-full border-[0.5px] border-gray-50 bg-white pl-[6px]'>
             <LoadingAnim type='avatar' />
           </div>
         )}
@@ -114,7 +114,7 @@ const Answer: FC<AnswerProps> = ({
         <div className={cn('group relative pr-10', chatAnswerContainerInner)}>
           <div
             ref={contentRef}
-            className={cn('body-lg-regular relative inline-block max-w-full rounded-2xl bg-chat-bubble-bg px-4 py-3 text-text-primary', workflowProcess && 'w-full')}
+            className={cn('body-lg-regular bg-chat-bubble-bg text-text-primary relative inline-block max-w-full rounded-2xl px-4 py-3', workflowProcess && 'w-full')}
           >
             {
               !responding && (
@@ -213,15 +213,15 @@ const Answer: FC<AnswerProps> = ({
                 disabled={!item.prevSibling}
                 onClick={() => item.prevSibling && switchSibling?.(item.prevSibling)}
               >
-                <ChevronRight className="h-[14px] w-[14px] rotate-180 text-text-primary" />
+                <ChevronRight className="text-text-primary h-[14px] w-[14px] rotate-180" />
               </button>
-              <span className="px-2 text-xs text-text-primary">{item.siblingIndex + 1} / {item.siblingCount}</span>
+              <span className="text-text-primary px-2 text-xs">{item.siblingIndex + 1} / {item.siblingCount}</span>
               <button
                 className={`${item.nextSibling ? 'opacity-100' : 'opacity-30'}`}
                 disabled={!item.nextSibling}
                 onClick={() => item.nextSibling && switchSibling?.(item.nextSibling)}
               >
-                <ChevronRight className="h-[14px] w-[14px] text-text-primary" />
+                <ChevronRight className="text-text-primary h-[14px] w-[14px]" />
               </button>
             </div>}
           </div>
diff --git a/web/app/components/base/chat/chat/answer/more.tsx b/web/app/components/base/chat/chat/answer/more.tsx
index 03fa7b2aed..9f494b825c 100644
--- a/web/app/components/base/chat/chat/answer/more.tsx
+++ b/web/app/components/base/chat/chat/answer/more.tsx
@@ -13,25 +13,25 @@ const More: FC<MoreProps> = ({
   const { t } = useTranslation()
 
   return (
-    <div className='flex items-center mt-1 h-[18px] text-xs text-gray-400 opacity-0 group-hover:opacity-100'>
+    <div className='mt-1 flex h-[18px] items-center text-xs text-gray-400 opacity-0 group-hover:opacity-100'>
       {
         more && (
           <>
             <div
-              className='mr-2 shrink-0 truncate max-w-[33.3%]'
+              className='mr-2 max-w-[33.3%] shrink-0 truncate'
               title={`${t('appLog.detail.timeConsuming')} ${more.latency}${t('appLog.detail.second')}`}
             >
               {`${t('appLog.detail.timeConsuming')} ${more.latency}${t('appLog.detail.second')}`}
             </div>
             <div
-              className='shrink-0 truncate max-w-[33.3%]'
+              className='max-w-[33.3%] shrink-0 truncate'
               title={`${t('appLog.detail.tokenCost')} ${formatNumber(more.tokens)}`}
             >
               {`${t('appLog.detail.tokenCost')} ${formatNumber(more.tokens)}`}
             </div>
-            <div className='shrink-0 mx-2'>·</div>
+            <div className='mx-2 shrink-0'>·</div>
             <div
-              className='shrink-0 truncate max-w-[33.3%]'
+              className='max-w-[33.3%] shrink-0 truncate'
               title={more.time}
             >
               {more.time}
diff --git a/web/app/components/base/chat/chat/answer/operation.tsx b/web/app/components/base/chat/chat/answer/operation.tsx
index 9886b755b5..ed2ed1b6ed 100644
--- a/web/app/components/base/chat/chat/answer/operation.tsx
+++ b/web/app/components/base/chat/chat/answer/operation.tsx
@@ -102,8 +102,8 @@ const Operation: FC<OperationProps> = ({
       <div
         className={cn(
           'absolute flex justify-end gap-1',
-          hasWorkflowProcess && '-top-3.5 -right-3.5',
-          !positionRight && '-top-3.5 -right-3.5',
+          hasWorkflowProcess && '-right-3.5 -top-3.5',
+          !positionRight && '-right-3.5 -top-3.5',
           !hasWorkflowProcess && positionRight && '!top-[9px]',
         )}
         style={(!hasWorkflowProcess && positionRight) ? { left: contentWidth + 8 } : {}}
@@ -116,11 +116,11 @@ const Operation: FC<OperationProps> = ({
         )}
 
         {!isOpeningStatement && (showPromptLog || config?.text_to_speech?.enabled) && (
-          <div className='hidden group-hover:flex items-center w-max h-[28px] p-0.5 rounded-lg bg-white border-[0.5px] border-gray-100 shadow-md shrink-0'>
+          <div className='hidden h-[28px] w-max shrink-0 items-center rounded-lg border-[0.5px] border-gray-100 bg-white p-0.5 shadow-md group-hover:flex'>
             {showPromptLog && (
               <>
                 <Log logItem={item} />
-                <div className='mx-1 w-[1px] h-[14px] bg-gray-200' />
+                <div className='mx-1 h-[14px] w-[1px] bg-gray-200' />
               </>
             )}
 
@@ -143,7 +143,7 @@ const Operation: FC<OperationProps> = ({
             appId={config?.appId || ''}
             messageId={id}
             annotationId={annotation?.id || ''}
-            className='hidden group-hover:block ml-1 shrink-0'
+            className='ml-1 hidden shrink-0 group-hover:block'
             cached={hasAnnotation}
             query={question}
             answer={content}
@@ -155,36 +155,36 @@ const Operation: FC<OperationProps> = ({
         {
           annotation?.id && (
             <div
-              className='relative box-border flex items-center justify-center h-7 w-7 p-0.5 rounded-lg bg-white cursor-pointer text-[#444CE7] shadow-md group-hover:hidden'
+              className='relative box-border flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg bg-white p-0.5 text-[#444CE7] shadow-md group-hover:hidden'
             >
-              <div className='p-1 rounded-lg bg-[#EEF4FF] '>
-                <MessageFast className='w-4 h-4' />
+              <div className='rounded-lg bg-[#EEF4FF] p-1 '>
+                <MessageFast className='h-4 w-4' />
               </div>
             </div>
           )
         }
         {
-          !isOpeningStatement && !noChatInput && <RegenerateBtn className='hidden group-hover:block mr-1' onClick={() => onRegenerate?.(item)} />
+          !isOpeningStatement && !noChatInput && <RegenerateBtn className='mr-1 hidden group-hover:block' onClick={() => onRegenerate?.(item)} />
         }
         {
           config?.supportFeedback && !localFeedback?.rating && onFeedback && !isOpeningStatement && (
-            <div className='hidden group-hover:flex shrink-0 items-center px-0.5 bg-white border-[0.5px] border-gray-100 shadow-md text-gray-500 rounded-lg'>
+            <div className='hidden shrink-0 items-center rounded-lg border-[0.5px] border-gray-100 bg-white px-0.5 text-gray-500 shadow-md group-hover:flex'>
               <Tooltip popupContent={t('appDebug.operation.agree')}>
                 <div
-                  className='flex items-center justify-center mr-0.5 w-6 h-6 rounded-md hover:bg-black/5 hover:text-gray-800 cursor-pointer'
+                  className='mr-0.5 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-black/5 hover:text-gray-800'
                   onClick={() => handleFeedback('like')}
                 >
-                  <ThumbsUp className='w-4 h-4' />
+                  <ThumbsUp className='h-4 w-4' />
                 </div>
               </Tooltip>
               <Tooltip
                 popupContent={t('appDebug.operation.disagree')}
               >
                 <div
-                  className='flex items-center justify-center w-6 h-6 rounded-md hover:bg-black/5 hover:text-gray-800 cursor-pointer'
+                  className='flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-black/5 hover:text-gray-800'
                   onClick={() => handleFeedback('dislike')}
                 >
-                  <ThumbsDown className='w-4 h-4' />
+                  <ThumbsDown className='h-4 w-4' />
                 </div>
               </Tooltip>
             </div>
@@ -197,7 +197,7 @@ const Operation: FC<OperationProps> = ({
             >
               <div
                 className={`
-                  flex items-center justify-center w-7 h-7 rounded-[10px] border-[2px] border-white cursor-pointer
+                  flex h-7 w-7 cursor-pointer items-center justify-center rounded-[10px] border-[2px] border-white
                   ${localFeedback.rating === 'like' && 'bg-blue-50 text-blue-600'}
                   ${localFeedback.rating === 'dislike' && 'bg-red-100 text-red-600'}
                 `}
@@ -205,12 +205,12 @@ const Operation: FC<OperationProps> = ({
               >
                 {
                   localFeedback.rating === 'like' && (
-                    <ThumbsUp className='w-4 h-4' />
+                    <ThumbsUp className='h-4 w-4' />
                   )
                 }
                 {
                   localFeedback.rating === 'dislike' && (
-                    <ThumbsDown className='w-4 h-4' />
+                    <ThumbsDown className='h-4 w-4' />
                   )
                 }
               </div>
diff --git a/web/app/components/base/chat/chat/answer/suggested-questions.tsx b/web/app/components/base/chat/chat/answer/suggested-questions.tsx
index dd8e79b8f4..649cb99208 100644
--- a/web/app/components/base/chat/chat/answer/suggested-questions.tsx
+++ b/web/app/components/base/chat/chat/answer/suggested-questions.tsx
@@ -23,7 +23,7 @@ const SuggestedQuestions: FC<SuggestedQuestionsProps> = ({
       {suggestedQuestions.filter(q => !!q && q.trim()).map((question, index) => (
         <div
           key={index}
-          className='mt-1 mr-1 max-w-full last:mr-0 shrink-0 py-[5px] leading-[18px] items-center px-4 rounded-lg border border-gray-200 shadow-xs bg-white text-xs font-medium text-primary-600 cursor-pointer'
+          className='shadow-xs text-primary-600 mr-1 mt-1 max-w-full shrink-0 cursor-pointer items-center rounded-lg border border-gray-200 bg-white px-4 py-[5px] text-xs font-medium leading-[18px] last:mr-0'
           onClick={() => onSend?.(question)}
         >
           {question}
diff --git a/web/app/components/base/chat/chat/answer/tool-detail.tsx b/web/app/components/base/chat/chat/answer/tool-detail.tsx
index aeaeafc5ac..6ea35e94dd 100644
--- a/web/app/components/base/chat/chat/answer/tool-detail.tsx
+++ b/web/app/components/base/chat/chat/answer/tool-detail.tsx
@@ -24,40 +24,40 @@ const ToolDetail = ({
     <div
       className={cn(
         'rounded-xl',
-        !expand && 'border-l-[0.25px] border-components-panel-border bg-workflow-process-bg',
-        expand && 'border-[0.5px] border-components-panel-border-subtle bg-background-section-burn',
+        !expand && 'border-components-panel-border bg-workflow-process-bg border-l-[0.25px]',
+        expand && 'border-components-panel-border-subtle bg-background-section-burn border-[0.5px]',
       )}
     >
       <div
         className={cn(
-          'flex items-center system-xs-medium text-text-tertiary px-2.5 py-2 cursor-pointer',
+          'system-xs-medium text-text-tertiary flex cursor-pointer items-center px-2.5 py-2',
           expand && 'pb-1.5',
         )}
         onClick={() => setExpand(!expand)}
       >
-        {isFinished && <RiHammerFill className='mr-1 w-3.5 h-3.5' />}
-        {!isFinished && <RiLoader2Line className='mr-1 w-3.5 h-3.5 animate-spin' />}
+        {isFinished && <RiHammerFill className='mr-1 h-3.5 w-3.5' />}
+        {!isFinished && <RiLoader2Line className='mr-1 h-3.5 w-3.5 animate-spin' />}
         {t(`tools.thought.${isFinished ? 'used' : 'using'}`)}
-        <div className='mx-1 text-text-secondary'>{toolLabel}</div>
-        {!expand && <RiArrowRightSLine className='w-4 h-4' />}
-        {expand && <RiArrowDownSLine className='ml-auto w-4 h-4' />}
+        <div className='text-text-secondary mx-1'>{toolLabel}</div>
+        {!expand && <RiArrowRightSLine className='h-4 w-4' />}
+        {expand && <RiArrowDownSLine className='ml-auto h-4 w-4' />}
       </div>
       {
         expand && (
           <>
-            <div className='mb-0.5 mx-1 rounded-[10px] bg-components-panel-on-panel-item-bg text-text-secondary'>
-              <div className='flex items-center justify-between px-2 pt-1 h-7 system-xs-semibold-uppercase'>
+            <div className='bg-components-panel-on-panel-item-bg text-text-secondary mx-1 mb-0.5 rounded-[10px]'>
+              <div className='system-xs-semibold-uppercase flex h-7 items-center justify-between px-2 pt-1'>
                 {t('tools.thought.requestTitle')}
               </div>
-              <div className='pt-1 px-3 pb-2 code-xs-regular break-words'>
+              <div className='code-xs-regular break-words px-3 pb-2 pt-1'>
                 {input}
               </div>
             </div>
-            <div className='mx-1 mb-1 rounded-[10px] bg-components-panel-on-panel-item-bg text-text-secondary'>
-              <div className='flex items-center justify-between px-2 pt-1 h-7 system-xs-semibold-uppercase'>
+            <div className='bg-components-panel-on-panel-item-bg text-text-secondary mx-1 mb-1 rounded-[10px]'>
+              <div className='system-xs-semibold-uppercase flex h-7 items-center justify-between px-2 pt-1'>
                 {t('tools.thought.responseTitle')}
               </div>
-              <div className='pt-1 px-3 pb-2 code-xs-regular break-words'>
+              <div className='code-xs-regular break-words px-3 pb-2 pt-1'>
                 {output}
               </div>
             </div>
diff --git a/web/app/components/base/chat/chat/answer/workflow-process.tsx b/web/app/components/base/chat/chat/answer/workflow-process.tsx
index 270d168644..89b10b2604 100644
--- a/web/app/components/base/chat/chat/answer/workflow-process.tsx
+++ b/web/app/components/base/chat/chat/answer/workflow-process.tsx
@@ -56,36 +56,36 @@ const WorkflowProcessItem = ({
   return (
     <div
       className={cn(
-        '-mx-1 px-2.5 rounded-xl border-[0.5px]',
-        collapse ? 'py-[7px] border-components-panel-border' : 'pt-[7px] px-1 pb-1 border-components-panel-border-subtle',
+        '-mx-1 rounded-xl border-[0.5px] px-2.5',
+        collapse ? 'border-components-panel-border py-[7px]' : 'border-components-panel-border-subtle px-1 pb-1 pt-[7px]',
       )}
       style={{
         background,
       }}
     >
       <div
-        className={cn('flex items-center cursor-pointer', !collapse && 'px-1.5', readonly && 'cursor-default')}
+        className={cn('flex cursor-pointer items-center', !collapse && 'px-1.5', readonly && 'cursor-default')}
         onClick={() => !readonly && setCollapse(!collapse)}
       >
         {
           running && (
-            <RiLoader2Line className='shrink-0 mr-1 w-3.5 h-3.5 text-text-tertiary' />
+            <RiLoader2Line className='text-text-tertiary mr-1 h-3.5 w-3.5 shrink-0' />
           )
         }
         {
           succeeded && (
-            <CheckCircle className='shrink-0 mr-1 w-3.5 h-3.5 text-text-success' />
+            <CheckCircle className='text-text-success mr-1 h-3.5 w-3.5 shrink-0' />
           )
         }
         {
           failed && (
-            <RiErrorWarningFill className='shrink-0 mr-1 w-3.5 h-3.5 text-text-destructive' />
+            <RiErrorWarningFill className='text-text-destructive mr-1 h-3.5 w-3.5 shrink-0' />
           )
         }
         <div className={cn('system-xs-medium text-text-secondary', !collapse && 'grow')}>
           {t('workflow.common.workflowProcess')}
         </div>
-        {!readonly && <RiArrowRightSLine className={`'ml-1 w-4 h-4 text-text-tertiary' ${collapse ? '' : 'rotate-90'}`} />}
+        {!readonly && <RiArrowRightSLine className={`'ml-1 text-text-tertiary' h-4 w-4 ${collapse ? '' : 'rotate-90'}`} />}
       </div>
       {
         !collapse && !readonly && (
diff --git a/web/app/components/base/chat/chat/chat-input-area/index.tsx b/web/app/components/base/chat/chat/chat-input-area/index.tsx
index 0355de4c4a..2d49631431 100644
--- a/web/app/components/base/chat/chat/chat-input-area/index.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/index.tsx
@@ -153,27 +153,27 @@ const ChatInputArea = ({
     <>
       <div
         className={cn(
-          'relative pb-[9px] bg-components-panel-bg-blur border border-components-chat-input-border rounded-xl shadow-md z-10',
-          isDragActive && 'border border-dashed border-components-option-card-option-selected-border',
+          'bg-components-panel-bg-blur border-components-chat-input-border relative z-10 rounded-xl border pb-[9px] shadow-md',
+          isDragActive && 'border-components-option-card-option-selected-border border border-dashed',
         )}
       >
-        <div className='relative px-[9px] pt-[9px] max-h-[158px] overflow-x-hidden overflow-y-auto'>
+        <div className='relative max-h-[158px] overflow-y-auto overflow-x-hidden px-[9px] pt-[9px]'>
           <FileListInChatInput fileConfig={visionConfig!} />
           <div
             ref={wrapperRef}
             className='flex items-center justify-between'
           >
-            <div className='flex items-center relative grow w-full'>
+            <div className='relative flex w-full grow items-center'>
               <div
                 ref={textValueRef}
-                className='absolute w-auto h-auto p-1 leading-6 body-lg-regular pointer-events-none whitespace-pre invisible'
+                className='body-lg-regular pointer-events-none invisible absolute h-auto w-auto whitespace-pre p-1 leading-6'
               >
                 {query}
               </div>
               <Textarea
                 ref={textareaRef}
                 className={cn(
-                  'p-1 w-full leading-6 body-lg-regular text-text-tertiary bg-transparent outline-none',
+                  'body-lg-regular text-text-tertiary w-full bg-transparent p-1 leading-6 outline-none',
                 )}
                 placeholder={t('common.chat.inputPlaceholder') || ''}
                 autoFocus
diff --git a/web/app/components/base/chat/chat/chat-input-area/operation.tsx b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
index 79d1d8edc0..122dfcb6fb 100644
--- a/web/app/components/base/chat/chat/chat-input-area/operation.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
@@ -35,7 +35,7 @@ const Operation = (
   return (
     <div
       className={cn(
-        'shrink-0 flex items-center justify-end',
+        'flex shrink-0 items-center justify-end',
       )}
     >
       <div
@@ -50,13 +50,13 @@ const Operation = (
                 size='l'
                 onClick={onShowVoiceInput}
               >
-                <RiMicLine className='w-5 h-5' />
+                <RiMicLine className='h-5 w-5' />
               </ActionButton>
             )
           }
         </div>
         <Button
-          className='ml-3 px-0 w-8'
+          className='ml-3 w-8 px-0'
           variant='primary'
           onClick={onSend}
           style={
@@ -67,7 +67,7 @@ const Operation = (
               : {}
           }
         >
-          <RiSendPlane2Fill className='w-4 h-4' />
+          <RiSendPlane2Fill className='h-4 w-4' />
         </Button>
       </div>
     </div>
diff --git a/web/app/components/base/chat/chat/citation/index.tsx b/web/app/components/base/chat/chat/citation/index.tsx
index 2ca7b80ae7..7a5c9e3fb8 100644
--- a/web/app/components/base/chat/chat/citation/index.tsx
+++ b/web/app/components/base/chat/chat/citation/index.tsx
@@ -76,17 +76,17 @@ const Citation: FC<CitationProps> = ({
   const resourcesLength = resources.length
 
   return (
-    <div className='mt-3 -mb-1'>
-      <div className='flex items-center mb-2 text-xs font-medium text-gray-500'>
+    <div className='-mb-1 mt-3'>
+      <div className='mb-2 flex items-center text-xs font-medium text-gray-500'>
         {t('common.chat.citation.title')}
-        <div className='grow ml-2 h-[1px] bg-black/5' />
+        <div className='ml-2 h-[1px] grow bg-black/5' />
       </div>
       <div className='relative flex flex-wrap'>
         {
           resources.map((res, index) => (
             <div
               key={index}
-              className='absolute top-0 left-0 w-auto mr-1 mb-1 pl-7 pr-2 max-w-[240px] h-7 text-xs whitespace-nowrap opacity-0 -z-10'
+              className='absolute left-0 top-0 -z-10 mb-1 mr-1 h-7 w-auto max-w-[240px] whitespace-nowrap pl-7 pr-2 text-xs opacity-0'
               ref={ele => (elesRef.current[index] = ele!)}
             >
               {res.documentName}
@@ -95,7 +95,7 @@ const Citation: FC<CitationProps> = ({
         }
         {
           resources.slice(0, showMore ? resourcesLength : limitNumberInOneLine).map((res, index) => (
-            <div key={index} className='mr-1 mb-1 cursor-pointer'>
+            <div key={index} className='mb-1 mr-1 cursor-pointer'>
               <Popup
                 data={res}
                 showHitInfo={showHitInfo}
@@ -106,13 +106,13 @@ const Citation: FC<CitationProps> = ({
         {
           limitNumberInOneLine < resourcesLength && (
             <div
-              className='flex items-center px-2 h-7 bg-white rounded-lg text-xs font-medium text-gray-500 cursor-pointer'
+              className='flex h-7 cursor-pointer items-center rounded-lg bg-white px-2 text-xs font-medium text-gray-500'
               onClick={() => setShowMore(v => !v)}
             >
               {
                 !showMore
                   ? `+ ${resourcesLength - limitNumberInOneLine}`
-                  : <RiArrowDownSLine className='w-4 h-4 text-gray-600 rotate-180' />
+                  : <RiArrowDownSLine className='h-4 w-4 rotate-180 text-gray-600' />
               }
             </div>
           )
diff --git a/web/app/components/base/chat/chat/citation/popup.tsx b/web/app/components/base/chat/chat/citation/popup.tsx
index 9b98329e70..99572c8590 100644
--- a/web/app/components/base/chat/chat/citation/popup.tsx
+++ b/web/app/components/base/chat/chat/citation/popup.tsx
@@ -47,28 +47,28 @@ const Popup: FC<PopupProps> = ({
       }}
     >
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
-        <div className='flex items-center px-2 max-w-[240px] h-7 bg-white rounded-lg'>
-          <FileIcon type={fileType} className='shrink-0 mr-1 w-4 h-4' />
-          <div className='text-xs text-gray-600 truncate'>{data.documentName}</div>
+        <div className='flex h-7 max-w-[240px] items-center rounded-lg bg-white px-2'>
+          <FileIcon type={fileType} className='mr-1 h-4 w-4 shrink-0' />
+          <div className='truncate text-xs text-gray-600'>{data.documentName}</div>
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 1000 }}>
-        <div className='max-w-[360px] bg-gray-50 rounded-xl shadow-lg'>
-          <div className='px-4 pt-3 pb-2'>
-            <div className='flex items-center h-[18px]'>
-              <FileIcon type={fileType} className='shrink-0 mr-1 w-4 h-4' />
-              <div className='text-xs font-medium text-gray-600 truncate'>{data.documentName}</div>
+        <div className='max-w-[360px] rounded-xl bg-gray-50 shadow-lg'>
+          <div className='px-4 pb-2 pt-3'>
+            <div className='flex h-[18px] items-center'>
+              <FileIcon type={fileType} className='mr-1 h-4 w-4 shrink-0' />
+              <div className='truncate text-xs font-medium text-gray-600'>{data.documentName}</div>
             </div>
           </div>
-          <div className='px-4 py-0.5 max-h-[450px] bg-white rounded-lg overflow-y-auto'>
+          <div className='max-h-[450px] overflow-y-auto rounded-lg bg-white px-4 py-0.5'>
             <div className='w-full'>
               {
                 data.sources.map((source, index) => (
                   <Fragment key={index}>
                     <div className='group py-3'>
-                      <div className='flex items-center justify-between mb-2'>
-                        <div className='flex items-center px-1.5 h-5 border border-gray-200 rounded-md'>
-                          <Hash02 className='mr-0.5 w-3 h-3 text-gray-400' />
+                      <div className='mb-2 flex items-center justify-between'>
+                        <div className='flex h-5 items-center rounded-md border border-gray-200 px-1.5'>
+                          <Hash02 className='mr-0.5 h-3 w-3 text-gray-400' />
                           <div className='text-[11px] font-medium text-gray-500'>
                             {source.segment_position || index + 1}
                           </div>
@@ -77,31 +77,31 @@ const Popup: FC<PopupProps> = ({
                           showHitInfo && (
                             <Link
                               href={`/datasets/${source.dataset_id}/documents/${source.document_id}`}
-                              className='hidden items-center h-[18px] text-xs text-primary-600 group-hover:flex'>
+                              className='text-primary-600 hidden h-[18px] items-center text-xs group-hover:flex'>
                               {t('common.chat.citation.linkToDataset')}
-                              <ArrowUpRight className='ml-1 w-3 h-3' />
+                              <ArrowUpRight className='ml-1 h-3 w-3' />
                             </Link>
                           )
                         }
                       </div>
-                      <div className='text-[13px] text-gray-800 break-words'>{source.content}</div>
+                      <div className='break-words text-[13px] text-gray-800'>{source.content}</div>
                       {
                         showHitInfo && (
-                          <div className='flex items-center mt-2 text-xs font-medium text-gray-500 flex-wrap'>
+                          <div className='mt-2 flex flex-wrap items-center text-xs font-medium text-gray-500'>
                             <Tooltip
                               text={t('common.chat.citation.characters')}
                               data={source.word_count}
-                              icon={<TypeSquare className='mr-1 w-3 h-3' />}
+                              icon={<TypeSquare className='mr-1 h-3 w-3' />}
                             />
                             <Tooltip
                               text={t('common.chat.citation.hitCount')}
                               data={source.hit_count}
-                              icon={<Target04 className='mr-1 w-3 h-3' />}
+                              icon={<Target04 className='mr-1 h-3 w-3' />}
                             />
                             <Tooltip
                               text={t('common.chat.citation.vectorHash')}
                               data={source.index_node_hash?.substring(0, 7)}
-                              icon={<BezierCurve03 className='mr-1 w-3 h-3' />}
+                              icon={<BezierCurve03 className='mr-1 h-3 w-3' />}
                             />
                             {
                               source.score && (
diff --git a/web/app/components/base/chat/chat/citation/progress-tooltip.tsx b/web/app/components/base/chat/chat/citation/progress-tooltip.tsx
index 1f24d847b4..1b965fa3c5 100644
--- a/web/app/components/base/chat/chat/citation/progress-tooltip.tsx
+++ b/web/app/components/base/chat/chat/citation/progress-tooltip.tsx
@@ -27,15 +27,15 @@ const ProgressTooltip: FC<ProgressTooltipProps> = ({
         onMouseEnter={() => setOpen(true)}
         onMouseLeave={() => setOpen(false)}
       >
-        <div className='grow flex items-center'>
-          <div className='mr-1 w-16 h-1.5 rounded-[3px] border border-gray-400 overflow-hidden'>
-            <div className='bg-gray-400 h-full' style={{ width: `${data * 100}%` }}></div>
+        <div className='flex grow items-center'>
+          <div className='mr-1 h-1.5 w-16 overflow-hidden rounded-[3px] border border-gray-400'>
+            <div className='h-full bg-gray-400' style={{ width: `${data * 100}%` }}></div>
           </div>
           {data}
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 1001 }}>
-        <div className='p-3 bg-white text-xs font-medium text-gray-500 rounded-lg shadow-lg'>
+        <div className='rounded-lg bg-white p-3 text-xs font-medium text-gray-500 shadow-lg'>
           {t('common.chat.citation.hitScore')} {data}
         </div>
       </PortalToFollowElemContent>
diff --git a/web/app/components/base/chat/chat/citation/tooltip.tsx b/web/app/components/base/chat/chat/citation/tooltip.tsx
index 794b22be27..2fb2bc90ba 100644
--- a/web/app/components/base/chat/chat/citation/tooltip.tsx
+++ b/web/app/components/base/chat/chat/citation/tooltip.tsx
@@ -29,13 +29,13 @@ const Tooltip: FC<TooltipProps> = ({
         onMouseEnter={() => setOpen(true)}
         onMouseLeave={() => setOpen(false)}
       >
-        <div className='flex items-center mr-6'>
+        <div className='mr-6 flex items-center'>
           {icon}
           {data}
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 1001 }}>
-        <div className='p-3 bg-white text-xs font-medium text-gray-500 rounded-lg shadow-lg'>
+        <div className='rounded-lg bg-white p-3 text-xs font-medium text-gray-500 shadow-lg'>
           {text} {data}
         </div>
       </PortalToFollowElemContent>
diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
index d728375763..1f5094c421 100644
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@@ -251,7 +251,7 @@ const Chat: FC<ChatProps> = ({
           </div>
         </div>
         <div
-          className={`absolute bottom-0 bg-chat-input-mask ${(hasTryToAsk || !noChatInput || !noStopResponding) && chatFooterClassName}`}
+          className={`bg-chat-input-mask absolute bottom-0 ${(hasTryToAsk || !noChatInput || !noStopResponding) && chatFooterClassName}`}
           ref={chatFooterRef}
         >
           <div
@@ -260,10 +260,10 @@ const Chat: FC<ChatProps> = ({
           >
             {
               !noStopResponding && isResponding && (
-                <div className='flex justify-center mb-2'>
+                <div className='mb-2 flex justify-center'>
                   <Button onClick={onStopResponding}>
-                    <StopCircle className='mr-[5px] w-3.5 h-3.5 text-gray-500' />
-                    <span className='text-xs text-gray-500 font-normal'>{t('appDebug.operation.stopResponding')}</span>
+                    <StopCircle className='mr-[5px] h-3.5 w-3.5 text-gray-500' />
+                    <span className='text-xs font-normal text-gray-500'>{t('appDebug.operation.stopResponding')}</span>
                   </Button>
                 </div>
               )
diff --git a/web/app/components/base/chat/chat/log/index.tsx b/web/app/components/base/chat/chat/log/index.tsx
index c2b976164e..d1c01dfe01 100644
--- a/web/app/components/base/chat/chat/log/index.tsx
+++ b/web/app/components/base/chat/chat/log/index.tsx
@@ -20,7 +20,7 @@ const Log: FC<LogProps> = ({
 
   return (
     <div
-      className='shrink-0 p-1 flex items-center justify-center rounded-[6px] font-medium text-gray-500 hover:bg-gray-50 cursor-pointer hover:text-gray-700'
+      className='flex shrink-0 cursor-pointer items-center justify-center rounded-[6px] p-1 font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700'
       onClick={(e) => {
         e.stopPropagation()
         e.nativeEvent.stopImmediatePropagation()
@@ -33,7 +33,7 @@ const Log: FC<LogProps> = ({
           setShowPromptLogModal(true)
       }}
     >
-      <File02 className='mr-1 w-4 h-4' />
+      <File02 className='mr-1 h-4 w-4' />
       <div className='text-xs leading-4'>{runID ? t('appLog.viewLog') : isAgent ? t('appLog.agentLog') : t('appLog.promptLog')}</div>
     </div>
   )
diff --git a/web/app/components/base/chat/chat/question.stories.tsx b/web/app/components/base/chat/chat/question.stories.tsx
index 450e88d0ef..9c0eb8cad8 100644
--- a/web/app/components/base/chat/chat/question.stories.tsx
+++ b/web/app/components/base/chat/chat/question.stories.tsx
@@ -26,8 +26,8 @@ export const Default: Story = {
       content: 'You are a helpful assistant.',
     } satisfies ChatItem,
     theme: undefined,
-    questionIcon: <div className='w-full h-full rounded-full border-[0.5px] border-black/5'>
-      <User className='w-full h-full' />
+    questionIcon: <div className='h-full w-full rounded-full border-[0.5px] border-black/5'>
+      <User className='h-full w-full' />
     </div>,
   },
 }
diff --git a/web/app/components/base/chat/chat/question.tsx b/web/app/components/base/chat/chat/question.tsx
index 3df5aa215c..b29e0e018f 100644
--- a/web/app/components/base/chat/chat/question.tsx
+++ b/web/app/components/base/chat/chat/question.tsx
@@ -28,10 +28,10 @@ const Question: FC<QuestionProps> = ({
   } = item
 
   return (
-    <div className='flex justify-end mb-2 last:mb-0 pl-14'>
+    <div className='mb-2 flex justify-end pl-14 last:mb-0'>
       <div className='group relative mr-4 max-w-full'>
         <div
-          className='px-4 py-3 bg-[#D1E9FF]/50 rounded-2xl text-sm text-gray-900'
+          className='rounded-2xl bg-[#D1E9FF]/50 px-4 py-3 text-sm text-gray-900'
           style={theme?.chatBubbleColorStyle ? CssTransform(theme.chatBubbleColorStyle) : {}}
         >
           {
@@ -47,11 +47,11 @@ const Question: FC<QuestionProps> = ({
         </div>
         <div className='mt-1 h-[18px]' />
       </div>
-      <div className='shrink-0 w-10 h-10'>
+      <div className='h-10 w-10 shrink-0'>
         {
           questionIcon || (
-            <div className='w-full h-full rounded-full border-[0.5px] border-black/5'>
-              <User className='w-full h-full' />
+            <div className='h-full w-full rounded-full border-[0.5px] border-black/5'>
+              <User className='h-full w-full' />
             </div>
           )
         }
diff --git a/web/app/components/base/chat/chat/thought/panel.tsx b/web/app/components/base/chat/chat/thought/panel.tsx
index 2b0f1f9970..541818c8d1 100644
--- a/web/app/components/base/chat/chat/thought/panel.tsx
+++ b/web/app/components/base/chat/chat/thought/panel.tsx
@@ -17,11 +17,11 @@ const Panel: FC<Props> = ({
   const { t } = useTranslation()
 
   return (
-    <div className='rounded-md bg-gray-100 overflow-hidden border border-black/5'>
-      <div className='flex items-center px-2 py-1 leading-[18px] bg-gray-50 uppercase text-xs font-medium text-gray-500'>
+    <div className='overflow-hidden rounded-md border border-black/5 bg-gray-100'>
+      <div className='flex items-center bg-gray-50 px-2 py-1 text-xs font-medium uppercase leading-[18px] text-gray-500'>
         {t(`tools.thought.${isRequest ? 'requestTitle' : 'responseTitle'}`)} {toolName}
       </div>
-      <div className='p-2 border-t border-black/5 leading-4 text-xs text-gray-700'>{content}</div>
+      <div className='border-t border-black/5 p-2 text-xs leading-4 text-gray-700'>{content}</div>
     </div>
   )
 }
diff --git a/web/app/components/base/chat/chat/thought/tool.tsx b/web/app/components/base/chat/chat/thought/tool.tsx
index 7d6a1a0e6f..d0a3c52a3d 100644
--- a/web/app/components/base/chat/chat/thought/tool.tsx
+++ b/web/app/components/base/chat/chat/thought/tool.tsx
@@ -30,7 +30,7 @@ const getIcon = (toolName: string, allToolIcons: Record<string, string | Emoji>)
     typeof icon === 'string'
       ? (
         <div
-          className='w-3 h-3 bg-cover bg-center rounded-[3px] shrink-0'
+          className='h-3 w-3 shrink-0 rounded-[3px] bg-cover bg-center'
           style={{
             backgroundImage: `url(${icon})`,
           }}
@@ -38,7 +38,7 @@ const getIcon = (toolName: string, allToolIcons: Record<string, string | Emoji>)
       )
       : (
         <AppIcon
-          className='rounded-[3px] shrink-0'
+          className='shrink-0 rounded-[3px]'
           size='xs'
           icon={icon?.content}
           background={icon?.background}
@@ -58,35 +58,35 @@ const Tool: FC<Props> = ({
   const icon = getIcon(name, allToolIcons) as any
   return (
     <div>
-      <div className={cn(!isShowDetail && 'shadow-sm', !isShowDetail && 'inline-block', 'max-w-full overflow-x-auto bg-white rounded-md')}>
+      <div className={cn(!isShowDetail && 'shadow-sm', !isShowDetail && 'inline-block', 'max-w-full overflow-x-auto rounded-md bg-white')}>
         <div
-          className={cn('flex items-center h-7 px-2 cursor-pointer')}
+          className={cn('flex h-7 cursor-pointer items-center px-2')}
           onClick={() => setIsShowDetail(!isShowDetail)}
         >
           {!isFinished && (
-            <RiLoader2Line className='w-3 h-3 text-gray-500 animate-spin shrink-0' />
+            <RiLoader2Line className='h-3 w-3 shrink-0 animate-spin text-gray-500' />
           )}
           {isFinished && !isShowDetail && (
-            <CheckCircle className='w-3 h-3 text-[#12B76A] shrink-0' />
+            <CheckCircle className='h-3 w-3 shrink-0 text-[#12B76A]' />
           )}
           {isFinished && isShowDetail && (
             icon
           )}
-          <span className='mx-1 text-xs font-medium text-gray-500 shrink-0'>
+          <span className='mx-1 shrink-0 text-xs font-medium text-gray-500'>
             {t(`tools.thought.${isFinished ? 'used' : 'using'}`)}
           </span>
           <span
-            className='text-xs font-medium text-gray-700 truncate'
+            className='truncate text-xs font-medium text-gray-700'
             title={toolLabel}
           >
             {toolLabel}
           </span>
           <RiArrowDownSLine
-            className={cn(isShowDetail && 'rotate-180', 'ml-1 w-3 h-3 text-gray-500 select-none cursor-pointer shrink-0')}
+            className={cn(isShowDetail && 'rotate-180', 'ml-1 h-3 w-3 shrink-0 cursor-pointer select-none text-gray-500')}
           />
         </div>
         {isShowDetail && (
-          <div className='border-t border-black/5 p-2 space-y-2 '>
+          <div className='space-y-2 border-t border-black/5 p-2 '>
             <Panel
               isRequest={true}
               toolName={toolName}
diff --git a/web/app/components/base/chat/chat/try-to-ask.tsx b/web/app/components/base/chat/chat/try-to-ask.tsx
index 94ae4df064..b7b1f74261 100644
--- a/web/app/components/base/chat/chat/try-to-ask.tsx
+++ b/web/app/components/base/chat/chat/try-to-ask.tsx
@@ -17,19 +17,19 @@ const TryToAsk: FC<TryToAskProps> = ({
 
   return (
     <div>
-      <div className='flex items-center mb-2.5 py-2'>
+      <div className='mb-2.5 flex items-center py-2'>
         <div
-          className='grow h-[1px]'
+          className='h-[1px] grow'
           style={{
             background: 'linear-gradient(270deg, #F3F4F6 0%, rgba(243, 244, 246, 0) 100%)',
           }}
         />
-        <div className='shrink-0 flex items-center px-3 text-gray-500'>
-          <Star04 className='mr-1 w-2.5 h-2.5' />
-          <span className='text-xs text-gray-500 font-medium'>{t('appDebug.feature.suggestedQuestionsAfterAnswer.tryToAsk')}</span>
+        <div className='flex shrink-0 items-center px-3 text-gray-500'>
+          <Star04 className='mr-1 h-2.5 w-2.5' />
+          <span className='text-xs font-medium text-gray-500'>{t('appDebug.feature.suggestedQuestionsAfterAnswer.tryToAsk')}</span>
         </div>
         <div
-          className='grow h-[1px]'
+          className='h-[1px] grow'
           style={{
             background: 'linear-gradient(270deg, rgba(243, 244, 246, 0) 0%, #F3F4F6 100%)',
           }}
diff --git a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
index 8d0af02f8f..e474e85ddc 100644
--- a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
@@ -113,7 +113,7 @@ const ChatWrapper = () => {
       return (
         <>
           {!currentConversationId && (
-            <div className={cn('mx-auto w-full max-w-full tablet:px-4', isMobile && 'px-4')}>
+            <div className={cn('tablet:px-4 mx-auto w-full max-w-full', isMobile && 'px-4')}>
               <div className='mb-6' />
               <ConfigPanel />
               <div
@@ -146,9 +146,9 @@ const ChatWrapper = () => {
       config={appConfig}
       chatList={chatList}
       isResponding={isResponding}
-      chatContainerInnerClassName={cn('mx-auto w-full max-w-full tablet:px-4', isMobile && 'px-4')}
+      chatContainerInnerClassName={cn('tablet:px-4 mx-auto w-full max-w-full', isMobile && 'px-4')}
       chatFooterClassName='pb-4'
-      chatFooterInnerClassName={cn('mx-auto w-full max-w-full tablet:px-4', isMobile && 'px-4')}
+      chatFooterInnerClassName={cn('tablet:px-4 mx-auto w-full max-w-full', isMobile && 'px-4')}
       onSend={doSend}
       inputs={currentConversationId ? currentConversationItem?.inputs as any : newConversationInputs}
       inputsForm={inputsForms}
diff --git a/web/app/components/base/chat/embedded-chatbot/config-panel/form-input.tsx b/web/app/components/base/chat/embedded-chatbot/config-panel/form-input.tsx
index 2e6df72bfb..3eb5bbf2f6 100644
--- a/web/app/components/base/chat/embedded-chatbot/config-panel/form-input.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/config-panel/form-input.tsx
@@ -35,7 +35,7 @@ const FormInput: FC<InputProps> = ({
 
   return (
     <input
-      className='grow h-9 rounded-lg bg-gray-100 px-2.5 outline-none appearance-none'
+      className='h-9 grow appearance-none rounded-lg bg-gray-100 px-2.5 outline-none'
       value={value || ''}
       maxLength={max_length}
       onChange={e => onChange(variable, e.target.value)}
diff --git a/web/app/components/base/chat/embedded-chatbot/config-panel/form.tsx b/web/app/components/base/chat/embedded-chatbot/config-panel/form.tsx
index 718b9a9d94..57a823924b 100644
--- a/web/app/components/base/chat/embedded-chatbot/config-panel/form.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/config-panel/form.tsx
@@ -44,7 +44,7 @@ const Form = () => {
     if (form.type === 'number') {
       return (
         <input
-          className="grow h-9 rounded-lg bg-gray-100 px-2.5 outline-none appearance-none"
+          className="h-9 grow appearance-none rounded-lg bg-gray-100 px-2.5 outline-none"
           type="number"
           value={newConversationInputs[variable] || ''}
           onChange={e => handleFormChange(variable, e.target.value)}
@@ -56,7 +56,7 @@ const Form = () => {
     if (form.type === 'number') {
       return (
         <input
-          className="grow h-9 rounded-lg bg-gray-100 px-2.5 outline-none appearance-none"
+          className="h-9 grow appearance-none rounded-lg bg-gray-100 px-2.5 outline-none"
           type="number"
           value={newConversationInputs[variable] || ''}
           onChange={e => handleFormChange(variable, e.target.value)}
@@ -115,9 +115,9 @@ const Form = () => {
         inputsForms.map(form => (
           <div
             key={form.variable}
-            className={`flex mb-3 last-of-type:mb-0 text-sm text-gray-900 ${isMobile && '!flex-wrap'}`}
+            className={`mb-3 flex text-sm text-gray-900 last-of-type:mb-0 ${isMobile && '!flex-wrap'}`}
           >
-            <div className={`shrink-0 mr-2 py-2 w-[128px] ${isMobile && '!w-full'}`}>{form.label}</div>
+            <div className={`mr-2 w-[128px] shrink-0 py-2 ${isMobile && '!w-full'}`}>{form.label}</div>
             {renderField(form)}
           </div>
         ))
diff --git a/web/app/components/base/chat/embedded-chatbot/config-panel/index.tsx b/web/app/components/base/chat/embedded-chatbot/config-panel/index.tsx
index 375f61dec0..65da2b834a 100644
--- a/web/app/components/base/chat/embedded-chatbot/config-panel/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/config-panel/index.tsx
@@ -27,10 +27,10 @@ const ConfigPanel = () => {
   const themeBuilder = useThemeContext()
 
   return (
-    <div className='flex flex-col max-h-[80%] w-full max-w-[720px]'>
+    <div className='flex max-h-[80%] w-full max-w-[720px] flex-col'>
       <div
         className={cn(
-          'grow rounded-xl overflow-y-auto',
+          'grow overflow-y-auto rounded-xl',
           showConfigPanelBeforeChat && 'border-[0.5px] border-gray-100 shadow-lg',
           !showConfigPanelBeforeChat && collapsed && 'border border-indigo-100',
           !showConfigPanelBeforeChat && !collapsed && 'border-[0.5px] border-gray-100 shadow-lg',
@@ -39,14 +39,14 @@ const ConfigPanel = () => {
         <div
           style={CssTransform(themeBuilder.theme?.roundedBackgroundColorStyle ?? '')}
           className={`
-            flex flex-wrap px-6 py-4 rounded-t-xl bg-indigo-25
+            bg-indigo-25 flex flex-wrap rounded-t-xl px-6 py-4
             ${isMobile && '!px-4 !py-3'}
           `}
         >
           {
             showConfigPanelBeforeChat && (
               <>
-                <div className='flex items-center h-8 text-2xl font-semibold text-gray-800'>
+                <div className='flex h-8 items-center text-2xl font-semibold text-gray-800'>
                   <AppIcon
                     iconType={appData?.site.icon_type}
                     icon={appData?.site.icon}
@@ -70,8 +70,8 @@ const ConfigPanel = () => {
           {
             !showConfigPanelBeforeChat && collapsed && (
               <>
-                <Star06 className='mr-1 mt-1 w-4 h-4 text-indigo-600' />
-                <div className='grow py-[3px] text-[13px] text-indigo-600 leading-[18px] font-medium'>
+                <Star06 className='mr-1 mt-1 h-4 w-4 text-indigo-600' />
+                <div className='grow py-[3px] text-[13px] font-medium leading-[18px] text-indigo-600'>
                   {t('share.chat.configStatusDes')}
                 </div>
                 <Button
@@ -81,7 +81,7 @@ const ConfigPanel = () => {
                   className='shrink-0 text-white'
                   onClick={() => setCollapsed(false)}
                 >
-                  <Edit02 className='mr-1 w-3 h-3' />
+                  <Edit02 className='mr-1 h-3 w-3' />
                   {t('common.operation.edit')}
                 </Button>
               </>
@@ -90,8 +90,8 @@ const ConfigPanel = () => {
           {
             !showConfigPanelBeforeChat && !collapsed && (
               <>
-                <Star06 className='mr-1 mt-1 w-4 h-4 text-indigo-600' />
-                <div className='grow py-[3px] text-[13px] text-indigo-600 leading-[18px] font-medium'>
+                <Star06 className='mr-1 mt-1 h-4 w-4 text-indigo-600' />
+                <div className='grow py-[3px] text-[13px] font-medium leading-[18px] text-indigo-600'>
                   {t('share.chat.privatePromptConfigTitle')}
                 </div>
               </>
@@ -100,9 +100,9 @@ const ConfigPanel = () => {
         </div>
         {
           !collapsed && !showConfigPanelBeforeChat && (
-            <div className='p-6 rounded-b-xl'>
+            <div className='rounded-b-xl p-6'>
               <Form />
-              <div className={cn('pl-[136px] flex items-center', isMobile && '!pl-0')}>
+              <div className={cn('flex items-center pl-[136px]', isMobile && '!pl-0')}>
                 <Button
                   styleCss={CssTransform(themeBuilder.theme?.backgroundButtonDefaultColorStyle ?? '')}
                   variant='primary'
@@ -125,7 +125,7 @@ const ConfigPanel = () => {
         }
         {
           showConfigPanelBeforeChat && (
-            <div className='p-6 rounded-b-xl'>
+            <div className='rounded-b-xl p-6'>
               <Form />
               <Button
                 styleCss={CssTransform(themeBuilder.theme?.backgroundButtonDefaultColorStyle ?? '')}
@@ -134,7 +134,7 @@ const ConfigPanel = () => {
                 size='large'
                 onClick={handleStartChat}
               >
-                <MessageDotsCircle className='mr-2 w-4 h-4 text-white' />
+                <MessageDotsCircle className='mr-2 h-4 w-4 text-white' />
                 {t('share.chat.startChat')}
               </Button>
             </div>
@@ -143,11 +143,11 @@ const ConfigPanel = () => {
       </div>
       {
         showConfigPanelBeforeChat && (site || customConfig) && (
-          <div className='mt-4 flex flex-wrap justify-between items-center py-2 text-xs text-gray-400'>
+          <div className='mt-4 flex flex-wrap items-center justify-between py-2 text-xs text-gray-400'>
             {site?.privacy_policy
               ? <div className={cn(isMobile && 'mb-2 w-full text-center')}>{t('share.chat.privacyPolicyLeft')}
                 <a
-                  className='text-gray-500 px-1'
+                  className='px-1 text-gray-500'
                   href={site?.privacy_policy}
                   target='_blank' rel='noopener noreferrer'>{t('share.chat.privacyPolicyMiddle')}</a>
                 {t('share.chat.privacyPolicyRight')}
@@ -159,11 +159,11 @@ const ConfigPanel = () => {
                 ? null
                 : (
                   <div className={cn('flex items-center justify-end', isMobile && 'w-full')}>
-                    <div className='flex items-center pr-3 space-x-3'>
+                    <div className='flex items-center space-x-3 pr-3'>
                       <span className='uppercase'>{t('share.chat.poweredBy')}</span>
                       {
                         customConfig?.replace_webapp_logo
-                          ? <img src={customConfig?.replace_webapp_logo} alt='logo' className='block w-auto h-5' />
+                          ? <img src={customConfig?.replace_webapp_logo} alt='logo' className='block h-5 w-auto' />
                           : <LogoSite className='!h-5' />
                       }
                     </div>
diff --git a/web/app/components/base/chat/embedded-chatbot/header.tsx b/web/app/components/base/chat/embedded-chatbot/header.tsx
index a5c74434c6..da932d14c1 100644
--- a/web/app/components/base/chat/embedded-chatbot/header.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/header.tsx
@@ -27,7 +27,7 @@ const Header: FC<IHeaderProps> = ({
   return (
     <div
       className={`
-        shrink-0 flex items-center justify-between h-14 px-4 
+        flex h-14 shrink-0 items-center justify-between px-4 
       `}
       style={Object.assign({}, CssTransform(theme?.backgroundHeaderColorStyle ?? ''), CssTransform(theme?.headerBorderBottomStyle ?? '')) }
     >
@@ -43,7 +43,7 @@ const Header: FC<IHeaderProps> = ({
       <Tooltip
         popupContent={t('share.chat.resetChat')}
       >
-        <div className='flex cursor-pointer hover:rounded-lg hover:bg-black/5 w-8 h-8 items-center justify-center' onClick={() => {
+        <div className='flex h-8 w-8 cursor-pointer items-center justify-center hover:rounded-lg hover:bg-black/5' onClick={() => {
           onCreateNewChat?.()
         }}>
           <RiRefreshLine className="h-4 w-4 text-sm font-bold text-white" color={theme?.colorPathOnHeader}/>
diff --git a/web/app/components/base/chat/embedded-chatbot/index.tsx b/web/app/components/base/chat/embedded-chatbot/index.tsx
index 703dde1076..61cd7ae4af 100644
--- a/web/app/components/base/chat/embedded-chatbot/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/index.tsx
@@ -73,10 +73,10 @@ const Chatbot = () => {
         theme={themeBuilder?.theme}
         onCreateNewChat={handleNewConversation}
       />
-      <div className='flex bg-white overflow-hidden'>
-        <div className={cn('h-[100vh] grow flex flex-col overflow-y-auto', isMobile && '!h-[calc(100vh_-_3rem)]')}>
+      <div className='flex overflow-hidden bg-white'>
+        <div className={cn('flex h-[100vh] grow flex-col overflow-y-auto', isMobile && '!h-[calc(100vh_-_3rem)]')}>
           {showConfigPanelBeforeChat && !appChatListDataLoading && !appPrevChatList.length && (
-            <div className={cn('flex w-full items-center justify-center h-full tablet:px-4', isMobile && 'px-4')}>
+            <div className={cn('tablet:px-4 flex h-full w-full items-center justify-center', isMobile && 'px-4')}>
               <ConfigPanel />
             </div>
           )}
@@ -84,13 +84,13 @@ const Chatbot = () => {
             <Loading type='app' />
           )}
           {chatReady && !appChatListDataLoading && (
-            <div className='relative h-full pt-8 mx-auto w-full max-w-[720px]'>
+            <div className='relative mx-auto h-full w-full max-w-[720px] pt-8'>
               {!isMobile && (
-                <div className='absolute top-2.5 right-3 z-20'>
+                <div className='absolute right-3 top-2.5 z-20'>
                   <Tooltip
                     popupContent={t('share.chat.resetChat')}
                   >
-                    <div className='p-1.5 bg-white border-[0.5px] border-gray-100 rounded-lg shadow-md cursor-pointer' onClick={handleNewConversation}>
+                    <div className='cursor-pointer rounded-lg border-[0.5px] border-gray-100 bg-white p-1.5 shadow-md' onClick={handleNewConversation}>
                       <RiLoopLeftLine className="h-4 w-4 text-gray-500"/>
                     </div>
                   </Tooltip>
diff --git a/web/app/components/base/checkbox/index.tsx b/web/app/components/base/checkbox/index.tsx
index df2c368cc0..ee6ebbdd5a 100644
--- a/web/app/components/base/checkbox/index.tsx
+++ b/web/app/components/base/checkbox/index.tsx
@@ -15,7 +15,7 @@ const Checkbox = ({ checked, onCheck, className, disabled, mixed }: CheckboxProp
     return (
       <div
         className={cn(
-          'w-4 h-4 rounded-[4px] bg-components-checkbox-bg-unchecked border border-components-checkbox-border hover:bg-components-checkbox-bg-unchecked-hover hover:border-components-checkbox-border-hover shadow-xs cursor-pointer',
+          'bg-components-checkbox-bg-unchecked border-components-checkbox-border hover:bg-components-checkbox-bg-unchecked-hover hover:border-components-checkbox-border-hover shadow-xs h-4 w-4 cursor-pointer rounded-[4px] border',
           disabled && 'border-components-checkbox-border-disabled bg-components-checkbox-bg-disabled hover:border-components-checkbox-border-disabled hover:bg-components-checkbox-bg-disabled cursor-not-allowed',
           mixed && s.mixed,
           className,
@@ -31,7 +31,7 @@ const Checkbox = ({ checked, onCheck, className, disabled, mixed }: CheckboxProp
   return (
     <div
       className={cn(
-        'w-4 h-4 flex items-center justify-center rounded-[4px] bg-components-checkbox-bg hover:bg-components-checkbox-bg-hover text-components-checkbox-icon shadow-xs cursor-pointer',
+        'bg-components-checkbox-bg hover:bg-components-checkbox-bg-hover text-components-checkbox-icon shadow-xs flex h-4 w-4 cursor-pointer items-center justify-center rounded-[4px]',
         disabled && 'bg-components-checkbox-bg-disabled-checked hover:bg-components-checkbox-bg-disabled-checked text-components-checkbox-icon-disabled cursor-not-allowed',
         className,
       )}
@@ -42,7 +42,7 @@ const Checkbox = ({ checked, onCheck, className, disabled, mixed }: CheckboxProp
         onCheck?.()
       }}
     >
-      <RiCheckLine className={cn('w-3 h-3')} />
+      <RiCheckLine className={cn('h-3 w-3')} />
     </div>
   )
 }
diff --git a/web/app/components/base/chip/index.tsx b/web/app/components/base/chip/index.tsx
index cf81b6dbff..2c1b75fc77 100644
--- a/web/app/components/base/chip/index.tsx
+++ b/web/app/components/base/chip/index.tsx
@@ -52,7 +52,7 @@ const Chip: FC<Props> = ({
           className='block'
         >
           <div className={cn(
-            'flex items-center min-h-8 px-2 py-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal cursor-pointer hover:bg-state-base-hover-alt',
+            'bg-components-input-bg-normal hover:bg-state-base-hover-alt flex min-h-8 cursor-pointer items-center rounded-lg border-[0.5px] border-transparent px-2 py-1',
             open && !value && '!bg-state-base-hover-alt hover:bg-state-base-hover-alt',
             !open && !!value && '!bg-components-button-secondary-bg shadow-xs !border-components-button-secondary-border hover:!bg-components-button-secondary-bg-hover hover:border-components-button-secondary-border-hover',
             open && !!value && '!bg-components-button-secondary-bg-hover !border-components-button-secondary-border-hover shadow-xs hover:!bg-components-button-secondary-bg-hover hover:border-components-button-secondary-border-hover',
@@ -61,40 +61,40 @@ const Chip: FC<Props> = ({
             {showLeftIcon && (
               <div className='p-0.5'>
                 {leftIcon || (
-                  <RiFilter3Line className={cn('h-4 w-4 text-text-tertiary', !!value && 'text-text-secondary')} />
+                  <RiFilter3Line className={cn('text-text-tertiary h-4 w-4', !!value && 'text-text-secondary')} />
                 )}
               </div>
             )}
-            <div className='grow first-line:p-1 flex items-center gap-0.5'>
+            <div className='flex grow items-center gap-0.5 first-line:p-1'>
               <div className={cn('system-sm-regular text-text-tertiary', !!value && 'text-text-secondary')}>
                 {triggerContent}
               </div>
             </div>
-            {!value && <RiArrowDownSLine className='h-4 w-4 text-text-tertiary' />}
+            {!value && <RiArrowDownSLine className='text-text-tertiary h-4 w-4' />}
             {!!value && (
-              <div className='p-[1px] cursor-pointer group/clear' onClick={(e) => {
+              <div className='group/clear cursor-pointer p-[1px]' onClick={(e) => {
                 e.stopPropagation()
                 onClear()
               }}>
-                <RiCloseCircleFill className='h-3.5 w-3.5 text-text-quaternary group-hover/clear:text-text-tertiary' />
+                <RiCloseCircleFill className='text-text-quaternary group-hover/clear:text-text-tertiary h-3.5 w-3.5' />
               </div>
             )}
           </div>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1002]'>
-          <div className={cn('relative w-[240px] bg-components-panel-bg-blur rounded-xl border-[0.5px] border-components-panel-border shadow-lg', panelClassName)}>
-            <div className='p-1 max-h-72 overflow-auto'>
+          <div className={cn('bg-components-panel-bg-blur border-components-panel-border relative w-[240px] rounded-xl border-[0.5px] shadow-lg', panelClassName)}>
+            <div className='max-h-72 overflow-auto p-1'>
               {items.map(item => (
                 <div
                   key={item.value}
-                  className='flex items-center gap-2 pl-3 py-[6px] px-2 rounded-lg cursor-pointer hover:bg-state-base-hover'
+                  className='hover:bg-state-base-hover flex cursor-pointer items-center gap-2 rounded-lg px-2 py-[6px] pl-3'
                   onClick={() => {
                     onSelect(item)
                     setOpen(false)
                   }}
                 >
-                  <div title={item.name} className='grow text-text-secondary system-sm-medium truncate'>{item.name}</div>
-                  {value === item.value && <RiCheckLine className='shrink-0 w-4 h-4 text-util-colors-blue-light-blue-light-600' />}
+                  <div title={item.name} className='text-text-secondary system-sm-medium grow truncate'>{item.name}</div>
+                  {value === item.value && <RiCheckLine className='text-util-colors-blue-light-blue-light-600 h-4 w-4 shrink-0' />}
                 </div>
               ))}
             </div>
diff --git a/web/app/components/base/confirm/index.tsx b/web/app/components/base/confirm/index.tsx
index 813254cb3f..59c9192a62 100644
--- a/web/app/components/base/confirm/index.tsx
+++ b/web/app/components/base/confirm/index.tsx
@@ -80,18 +80,18 @@ function Confirm({
     return null
 
   return createPortal(
-    <div className={'fixed inset-0 flex items-center justify-center z-[10000000] bg-background-overlay'}
+    <div className={'bg-background-overlay fixed inset-0 z-[10000000] flex items-center justify-center'}
       onClick={(e) => {
         e.preventDefault()
         e.stopPropagation()
       }}>
       <div ref={dialogRef} className={'relative w-full max-w-[480px] overflow-hidden'}>
-        <div className='flex flex-col items-start max-w-full rounded-2xl border-[0.5px] border-solid border-components-panel-border shadows-shadow-lg bg-components-panel-bg'>
-          <div className='flex pt-6 pl-6 pr-6 pb-4 flex-col items-start gap-2 self-stretch'>
+        <div className='border-components-panel-border shadows-shadow-lg bg-components-panel-bg flex max-w-full flex-col items-start rounded-2xl border-[0.5px] border-solid'>
+          <div className='flex flex-col items-start gap-2 self-stretch pb-4 pl-6 pr-6 pt-6'>
             <div className='title-2xl-semi-bold text-text-primary'>{title}</div>
             <div className='system-md-regular text-text-tertiary w-full'>{content}</div>
           </div>
-          <div className='flex p-6 gap-2 justify-end items-start self-stretch'>
+          <div className='flex items-start justify-end gap-2 self-stretch p-6'>
             {showCancel && <Button onClick={onCancel}>{cancelTxt}</Button>}
             {showConfirm && <Button variant={'primary'} destructive={type !== 'info'} loading={isLoading} disabled={isDisabled} onClick={onConfirm}>{confirmTxt}</Button>}
           </div>
diff --git a/web/app/components/base/content-dialog/index.tsx b/web/app/components/base/content-dialog/index.tsx
index 9e6726b1f6..513decb9a2 100644
--- a/web/app/components/base/content-dialog/index.tsx
+++ b/web/app/components/base/content-dialog/index.tsx
@@ -19,7 +19,7 @@ const ContentDialog = ({
     <Transition
       show={show}
       as="div"
-      className="absolute left-0 top-0 w-full h-full z-20 p-2 box-border"
+      className="absolute left-0 top-0 z-20 box-border h-full w-full p-2"
     >
       <Transition.Child
         as={Fragment}
@@ -31,7 +31,7 @@ const ContentDialog = ({
         leaveTo="opacity-0"
       >
         <div
-          className="absolute left-0 inset-0 w-full bg-app-detail-overlay-bg"
+          className="bg-app-detail-overlay-bg absolute inset-0 left-0 w-full"
           onClick={onClose}
         />
       </Transition.Child>
diff --git a/web/app/components/base/copy-btn/index.tsx b/web/app/components/base/copy-btn/index.tsx
index 5159a96040..ff66cb749e 100644
--- a/web/app/components/base/copy-btn/index.tsx
+++ b/web/app/components/base/copy-btn/index.tsx
@@ -36,7 +36,7 @@ const CopyBtn = ({
       >
         <div
           onMouseLeave={onMouseLeave}
-          className={'box-border p-0.5 flex items-center justify-center rounded-md bg-components-button-secondary-bg cursor-pointer'}
+          className={'bg-components-button-secondary-bg box-border flex cursor-pointer items-center justify-center rounded-md p-0.5'}
           style={!isPlain
             ? {
               boxShadow: '0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)',
@@ -44,7 +44,7 @@ const CopyBtn = ({
             : {}}
           onClick={onClickCopy}
         >
-          <div className={`w-6 h-6 rounded-md hover:bg-components-button-secondary-bg-hover  ${s.copyIcon} ${isCopied ? s.copied : ''}`}></div>
+          <div className={`hover:bg-components-button-secondary-bg-hover h-6 w-6 rounded-md  ${s.copyIcon} ${isCopied ? s.copied : ''}`}></div>
         </div>
       </Tooltip>
     </div>
diff --git a/web/app/components/base/copy-feedback/index.tsx b/web/app/components/base/copy-feedback/index.tsx
index 025f6486f0..c23b62064f 100644
--- a/web/app/components/base/copy-feedback/index.tsx
+++ b/web/app/components/base/copy-feedback/index.tsx
@@ -44,8 +44,8 @@ const CopyFeedback = ({ content }: Props) => {
           onClick={onClickCopy}
           onMouseLeave={onMouseLeave}
         >
-          {isCopied && <RiClipboardFill className='w-4 h-4' />}
-          {!isCopied && <RiClipboardLine className='w-4 h-4' />}
+          {isCopied && <RiClipboardFill className='h-4 w-4' />}
+          {!isCopied && <RiClipboardLine className='h-4 w-4' />}
         </div>
       </ActionButton>
     </Tooltip>
@@ -76,13 +76,13 @@ export const CopyFeedbackNew = ({ content, className }: Pick<Props, 'className'
       }
     >
       <div
-        className={`w-8 h-8 cursor-pointer hover:bg-components-button-ghost-bg-hover rounded-lg ${className ?? ''
+        className={`hover:bg-components-button-ghost-bg-hover h-8 w-8 cursor-pointer rounded-lg ${className ?? ''
           }`}
       >
         <div
           onClick={onClickCopy}
           onMouseLeave={onMouseLeave}
-          className={`w-full h-full ${copyStyle.copyIcon} ${isCopied ? copyStyle.copied : ''
+          className={`h-full w-full ${copyStyle.copyIcon} ${isCopied ? copyStyle.copied : ''
             }`}
         ></div>
       </div>
diff --git a/web/app/components/base/copy-icon/index.tsx b/web/app/components/base/copy-icon/index.tsx
index 9f886a1f32..0f54017b83 100644
--- a/web/app/components/base/copy-icon/index.tsx
+++ b/web/app/components/base/copy-icon/index.tsx
@@ -39,10 +39,10 @@ export const CopyIcon = ({ content }: Props) => {
       <div onMouseLeave={onMouseLeave}>
         {!isCopied
           ? (
-            <Clipboard className='mx-1 w-3.5 h-3.5 text-text-tertiary cursor-pointer' onClick={onClickCopy} />
+            <Clipboard className='text-text-tertiary mx-1 h-3.5 w-3.5 cursor-pointer' onClick={onClickCopy} />
           )
           : (
-            <ClipboardCheck className='mx-1 w-3.5 h-3.5 text-text-tertiary' />
+            <ClipboardCheck className='text-text-tertiary mx-1 h-3.5 w-3.5' />
           )
         }
       </div>
diff --git a/web/app/components/base/corner-label/index.tsx b/web/app/components/base/corner-label/index.tsx
index 0ad33ce8a6..6a6cea8239 100644
--- a/web/app/components/base/corner-label/index.tsx
+++ b/web/app/components/base/corner-label/index.tsx
@@ -10,8 +10,8 @@ type CornerLabelProps = {
 const CornerLabel: React.FC<CornerLabelProps> = ({ label, className, labelClassName }) => {
   return (
     <div className={cn('group/corner-label inline-flex items-start', className)}>
-      <Corner className='w-[13px] h-5 text-background-section group-hover/corner-label:text-background-section-burn' />
-      <div className={cn('flex py-1 pr-2 items-center gap-0.5 bg-background-section group-hover/corner-label:bg-background-section-burn', labelClassName)}>
+      <Corner className='text-background-section group-hover/corner-label:text-background-section-burn h-5 w-[13px]' />
+      <div className={cn('bg-background-section group-hover/corner-label:bg-background-section-burn flex items-center gap-0.5 py-1 pr-2', labelClassName)}>
         <div className='text-text-tertiary system-2xs-medium-uppercase'>{label}</div>
       </div>
     </div>
diff --git a/web/app/components/base/dialog/index.tsx b/web/app/components/base/dialog/index.tsx
index 829d3f0c04..4497380a4c 100644
--- a/web/app/components/base/dialog/index.tsx
+++ b/web/app/components/base/dialog/index.tsx
@@ -44,7 +44,7 @@ const CustomDialog = ({
         </TransitionChild>
 
         <div className="fixed inset-0 overflow-y-auto">
-          <div className="flex items-center justify-center min-h-full">
+          <div className="flex min-h-full items-center justify-center">
             <TransitionChild>
               <DialogPanel className={classNames(
                 'w-full max-w-[800px] p-6 overflow-hidden transition-all transform bg-components-panel-bg border-[0.5px] border-components-panel-border shadow-xl rounded-2xl',
diff --git a/web/app/components/base/divider/with-label.tsx b/web/app/components/base/divider/with-label.tsx
index 608bc79998..76d30c6cea 100644
--- a/web/app/components/base/divider/with-label.tsx
+++ b/web/app/components/base/divider/with-label.tsx
@@ -10,7 +10,7 @@ export type DividerWithLabelProps = DividerProps & {
 export const DividerWithLabel: FC<DividerWithLabelProps> = (props) => {
   const { label, className, ...rest } = props
   return <div
-    className="flex items-center gap-2 my-2"
+    className="my-2 flex items-center gap-2"
   >
     <Divider {...rest} className={classNames('flex-1', className)} />
     <span className="text-text-tertiary text-xs">
diff --git a/web/app/components/base/drawer-plus/index.tsx b/web/app/components/base/drawer-plus/index.tsx
index b16bcc4858..a19d9aa179 100644
--- a/web/app/components/base/drawer-plus/index.tsx
+++ b/web/app/components/base/drawer-plus/index.tsx
@@ -55,31 +55,31 @@ const DrawerPlus: FC<Props> = ({
       footer={null}
       mask={isMobile || isShowMask}
       positionCenter={positionCenter}
-      panelClassname={cn('mt-16 mx-2 sm:mr-2 mb-3 !p-0 rounded-xl', panelClassName, maxWidthClassName)}
+      panelClassname={cn('mx-2 mb-3 mt-16 rounded-xl !p-0 sm:mr-2', panelClassName, maxWidthClassName)}
     >
       <div
-        className={cn(contentClassName, 'w-full flex flex-col bg-components-panel-bg border-[0.5px] border-divider-subtle rounded-xl shadow-xl')}
+        className={cn(contentClassName, 'bg-components-panel-bg border-divider-subtle flex w-full flex-col rounded-xl border-[0.5px] shadow-xl')}
         style={{
           height,
         }}
         ref={ref}
       >
-        <div className={cn(headerClassName, 'shrink-0 border-b border-divider-subtle py-4')}>
-          <div className='flex justify-between items-center pl-6 pr-5 h-6'>
+        <div className={cn(headerClassName, 'border-divider-subtle shrink-0 border-b py-4')}>
+          <div className='flex h-6 items-center justify-between pl-6 pr-5'>
             <div className='system-xl-semibold text-text-primary'>
               {title}
             </div>
             <div className='flex items-center'>
               <div
                 onClick={onHide}
-                className='flex justify-center items-center w-6 h-6 cursor-pointer'
+                className='flex h-6 w-6 cursor-pointer items-center justify-center'
               >
-                <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+                <RiCloseLine className='text-text-tertiary h-4 w-4' />
               </div>
             </div>
           </div>
           {titleDescription && (
-            <div className='pl-6 pr-10 system-xs-regular text-text-tertiary'>
+            <div className='system-xs-regular text-text-tertiary pl-6 pr-10'>
               {titleDescription}
             </div>
           )}
diff --git a/web/app/components/base/drawer/index.tsx b/web/app/components/base/drawer/index.tsx
index cb6d75b4b8..f9522bb5ab 100644
--- a/web/app/components/base/drawer/index.tsx
+++ b/web/app/components/base/drawer/index.tsx
@@ -44,25 +44,25 @@ export default function Drawer({
       unmount={unmount}
       open={isOpen}
       onClose={() => !clickOutsideNotOpen && onClose()}
-      className="fixed z-30 inset-0 overflow-y-auto"
+      className="fixed inset-0 z-30 overflow-y-auto"
     >
-      <div className={cn('flex w-screen h-screen justify-end', positionCenter && '!justify-center')}>
+      <div className={cn('flex h-screen w-screen justify-end', positionCenter && '!justify-center')}>
         {/* mask */}
         <DialogBackdrop
-          className={cn('z-40 fixed inset-0', mask && 'bg-black bg-opacity-30')}
+          className={cn('fixed inset-0 z-40', mask && 'bg-black bg-opacity-30')}
         />
-        <div className={cn('relative z-50 flex flex-col justify-between bg-components-panel-bg w-full max-w-sm p-6 overflow-hidden text-left align-middle shadow-xl', panelClassname)}>
+        <div className={cn('bg-components-panel-bg relative z-50 flex w-full max-w-sm flex-col justify-between overflow-hidden p-6 text-left align-middle shadow-xl', panelClassname)}>
           <>
             {title && <DialogTitle
               as="h3"
-              className="text-lg font-medium leading-6 text-text-primary"
+              className="text-text-primary text-lg font-medium leading-6"
             >
               {title}
             </DialogTitle>}
-            {showClose && <DialogTitle className="flex items-center mb-4" as="div">
-              <XMarkIcon className='w-4 h-4 text-text-tertiary' onClick={onClose} />
+            {showClose && <DialogTitle className="mb-4 flex items-center" as="div">
+              <XMarkIcon className='text-text-tertiary h-4 w-4' onClick={onClose} />
             </DialogTitle>}
-            {description && <div className='text-text-tertiary text-xs font-normal mt-2'>{description}</div>}
+            {description && <div className='text-text-tertiary mt-2 text-xs font-normal'>{description}</div>}
             {children}
           </>
           {footer || (footer === null
diff --git a/web/app/components/base/dropdown/index.tsx b/web/app/components/base/dropdown/index.tsx
index ddcd8831fc..66a961557a 100644
--- a/web/app/components/base/dropdown/index.tsx
+++ b/web/app/components/base/dropdown/index.tsx
@@ -47,17 +47,17 @@ const Dropdown: FC<DropdownProps> = ({
             : (
               <div
                 className={`
-                  flex items-center justify-center w-6 h-6 cursor-pointer rounded-md
+                  flex h-6 w-6 cursor-pointer items-center justify-center rounded-md
                   ${open && 'bg-divider-regular'}
                 `}
               >
-                <RiMoreFill className='w-4 h-4 text-text-tertiary' />
+                <RiMoreFill className='text-text-tertiary h-4 w-4' />
               </div>
             )
         }
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className={popupClassName}>
-        <div className='rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg text-sm text-text-secondary'>
+        <div className='border-components-panel-border bg-components-panel-bg text-text-secondary rounded-lg border-[0.5px] text-sm shadow-lg'>
           {
             !!items.length && (
               <div className='p-1'>
@@ -65,7 +65,7 @@ const Dropdown: FC<DropdownProps> = ({
                   items.map(item => (
                     <div
                       key={item.value}
-                      className='flex items-center px-3 h-8 rounded-lg cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover'
+                      className='hover:bg-components-panel-on-panel-item-bg-hover flex h-8 cursor-pointer items-center rounded-lg px-3'
                       onClick={() => handleSelect(item)}
                     >
                       {item.text}
@@ -77,7 +77,7 @@ const Dropdown: FC<DropdownProps> = ({
           }
           {
             (!!items.length && !!secondItems?.length) && (
-              <div className='h-[1px] bg-divider-regular' />
+              <div className='bg-divider-regular h-[1px]' />
             )
           }
           {
@@ -87,7 +87,7 @@ const Dropdown: FC<DropdownProps> = ({
                   secondItems.map(item => (
                     <div
                       key={item.value}
-                      className='flex items-center px-3 h-8 rounded-lg cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover'
+                      className='hover:bg-components-panel-on-panel-item-bg-hover flex h-8 cursor-pointer items-center rounded-lg px-3'
                       onClick={() => handleSelect(item)}
                     >
                       {item.text}
diff --git a/web/app/components/base/emoji-picker/Inner.tsx b/web/app/components/base/emoji-picker/Inner.tsx
index e3347d4c67..2a7838890a 100644
--- a/web/app/components/base/emoji-picker/Inner.tsx
+++ b/web/app/components/base/emoji-picker/Inner.tsx
@@ -70,10 +70,10 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
   }, [onSelect, selectedEmoji, selectedBackground])
 
   return <div className={cn(className)}>
-    <div className='flex flex-col items-center w-full px-3 pb-2'>
+    <div className='flex w-full flex-col items-center px-3 pb-2'>
       <div className="relative w-full">
-        <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-          <MagnifyingGlassIcon className="w-5 h-5 text-text-quaternary" aria-hidden="true" />
+        <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+          <MagnifyingGlassIcon className="text-text-quaternary h-5 w-5" aria-hidden="true" />
         </div>
         <Input
           className="pl-10"
@@ -95,20 +95,20 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
     </div>
     <Divider className='my-3' />
 
-    <div className="w-full max-h-[200px] overflow-x-hidden overflow-y-auto px-3">
+    <div className="max-h-[200px] w-full overflow-y-auto overflow-x-hidden px-3">
       {isSearching && <>
         <div key={'category-search'} className='flex flex-col'>
           <p className='system-xs-medium-uppercase text-text-primary mb-1'>Search</p>
-          <div className='w-full h-full grid grid-cols-8 gap-1'>
+          <div className='grid h-full w-full grid-cols-8 gap-1'>
             {searchedEmojis.map((emoji: string, index: number) => {
               return <div
                 key={`emoji-search-${index}`}
-                className='inline-flex w-10 h-10 rounded-lg items-center justify-center'
+                className='inline-flex h-10 w-10 items-center justify-center rounded-lg'
                 onClick={() => {
                   setSelectedEmoji(emoji)
                 }}
               >
-                <div className='cursor-pointer w-8 h-8 p-1 flex items-center justify-center rounded-lg hover:ring-1 ring-offset-1 ring-components-input-border-hover'>
+                <div className='ring-components-input-border-hover flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg p-1 ring-offset-1 hover:ring-1'>
                   <em-emoji id={emoji} />
                 </div>
               </div>
@@ -120,16 +120,16 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
       {categories.map((category, index: number) => {
         return <div key={`category-${index}`} className='flex flex-col'>
           <p className='system-xs-medium-uppercase text-text-primary mb-1'>{category.id}</p>
-          <div className='w-full h-full grid grid-cols-8 gap-1'>
+          <div className='grid h-full w-full grid-cols-8 gap-1'>
             {category.emojis.map((emoji, index: number) => {
               return <div
                 key={`emoji-${index}`}
-                className='inline-flex w-10 h-10 rounded-lg items-center justify-center'
+                className='inline-flex h-10 w-10 items-center justify-center rounded-lg'
                 onClick={() => {
                   setSelectedEmoji(emoji)
                 }}
               >
-                <div className='cursor-pointer w-8 h-8 p-1 flex items-center justify-center rounded-lg hover:ring-1 ring-offset-1 ring-components-input-border-hover'>
+                <div className='ring-components-input-border-hover flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg p-1 ring-offset-1 hover:ring-1'>
                   <em-emoji id={emoji} />
                 </div>
               </div>
@@ -143,23 +143,23 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
     {/* Color Select */}
     <div className={cn('p-3 pb-0', selectedEmoji === '' ? 'opacity-25' : '')}>
       <p className='system-xs-medium-uppercase text-text-primary mb-2'>Choose Style</p>
-      <div className='w-full h-full grid grid-cols-8 gap-1'>
+      <div className='grid h-full w-full grid-cols-8 gap-1'>
         {backgroundColors.map((color) => {
           return <div
             key={color}
             className={
               cn(
                 'cursor-pointer',
-                'hover:ring-1 ring-offset-1',
-                'inline-flex w-10 h-10 rounded-lg items-center justify-center',
-                color === selectedBackground ? 'ring-1 ring-components-input-border-hover' : '',
+                'ring-offset-1 hover:ring-1',
+                'inline-flex h-10 w-10 items-center justify-center rounded-lg',
+                color === selectedBackground ? 'ring-components-input-border-hover ring-1' : '',
               )}
             onClick={() => {
               setSelectedBackground(color)
             }}
           >
             <div className={cn(
-              'w-8 h-8 p-1 flex items-center justify-center rounded-lg',
+              'flex h-8 w-8 items-center justify-center rounded-lg p-1',
             )
             } style={{ background: color }}>
               {selectedEmoji !== '' && <em-emoji id={selectedEmoji} />}
diff --git a/web/app/components/base/emoji-picker/index.tsx b/web/app/components/base/emoji-picker/index.tsx
index 16b07eddaf..c6b77a4f41 100644
--- a/web/app/components/base/emoji-picker/index.tsx
+++ b/web/app/components/base/emoji-picker/index.tsx
@@ -36,13 +36,13 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
       isShow
       closable={false}
       wrapperClassName={className}
-      className={cn('flex flex-col max-h-[552px] border-[0.5px] border-divider-subtle rounded-xl shadow-xl p-0')}
+      className={cn('border-divider-subtle flex max-h-[552px] flex-col rounded-xl border-[0.5px] p-0 shadow-xl')}
     >
       <EmojiPickerInner
         className="pt-3"
         onSelect={handleSelectEmoji} />
       <Divider className='mb-0 mt-3' />
-      <div className='w-full flex items-center justify-center p-3 gap-2'>
+      <div className='flex w-full items-center justify-center gap-2 p-3'>
         <Button className='w-full' onClick={() => {
           onClose && onClose()
         }}>
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-btn/index.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-btn/index.tsx
index 809b907d62..21af3ce242 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-btn/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-btn/index.tsx
@@ -74,24 +74,24 @@ const CacheCtrlBtn: FC<Props> = ({
   }
   return (
     <div className={cn('inline-block', className)}>
-      <div className='inline-flex p-0.5 space-x-0.5 rounded-lg bg-white border border-gray-100 shadow-md text-gray-500 cursor-pointer'>
+      <div className='inline-flex cursor-pointer space-x-0.5 rounded-lg border border-gray-100 bg-white p-0.5 text-gray-500 shadow-md'>
         {cached
           ? (
             <div>
               <div
                 ref={cachedBtnRef}
-                className={cn(isCachedBtnHovering ? 'bg-[#FEF3F2] text-[#D92D20]' : 'bg-[#EEF4FF] text-[#444CE7]', 'flex p-1 space-x-1 items-center rounded-md leading-4 text-xs font-medium')}
+                className={cn(isCachedBtnHovering ? 'bg-[#FEF3F2] text-[#D92D20]' : 'bg-[#EEF4FF] text-[#444CE7]', 'flex items-center space-x-1 rounded-md p-1 text-xs font-medium leading-4')}
                 onClick={() => setShowModal(true)}
               >
                 {!isCachedBtnHovering
                   ? (
                     <>
-                      <MessageFast className='w-4 h-4' />
+                      <MessageFast className='h-4 w-4' />
                       <div>{t('appDebug.feature.annotation.cached')}</div>
                     </>
                   )
                   : <>
-                    <MessageCheckRemove className='w-4 h-4' />
+                    <MessageCheckRemove className='h-4 w-4' />
                     <div>{t('appDebug.feature.annotation.remove')}</div>
                   </>}
               </div>
@@ -103,10 +103,10 @@ const CacheCtrlBtn: FC<Props> = ({
                 popupContent={t('appDebug.feature.annotation.add')}
               >
                 <div
-                  className='p-1 rounded-md hover:bg-[#EEF4FF] hover:text-[#444CE7] cursor-pointer'
+                  className='cursor-pointer rounded-md p-1 hover:bg-[#EEF4FF] hover:text-[#444CE7]'
                   onClick={handleAdd}
                 >
-                  <MessageFastPlus className='w-4 h-4' />
+                  <MessageFastPlus className='h-4 w-4' />
                 </div>
               </Tooltip>
             )
@@ -116,10 +116,10 @@ const CacheCtrlBtn: FC<Props> = ({
           popupContent={t('appDebug.feature.annotation.edit')}
         >
           <div
-            className='p-1 cursor-pointer rounded-md hover:bg-black/5'
+            className='cursor-pointer rounded-md p-1 hover:bg-black/5'
             onClick={onEdit}
           >
-            <Edit04 className='w-4 h-4' />
+            <Edit04 className='h-4 w-4' />
           </div>
         </Tooltip>
 
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
index b16c724175..1bbb00408e 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
@@ -77,9 +77,9 @@ const ConfigParamModal: FC<Props> = ({
     <Modal
       isShow={isShow}
       onClose={onHide}
-      className='!p-6 !mt-14 !max-w-none !w-[640px]'
+      className='!mt-14 !w-[640px] !max-w-none !p-6'
     >
-      <div className='mb-2 title-2xl-semibold text-text-primary'>
+      <div className='title-2xl-semibold text-text-primary mb-2'>
         {t(`appAnnotation.initSetup.${isInit ? 'title' : 'configTitle'}`)}
       </div>
 
@@ -122,7 +122,7 @@ const ConfigParamModal: FC<Props> = ({
         </Item>
       </div>
 
-      <div className='mt-6 flex gap-2 justify-end'>
+      <div className='mt-6 flex justify-end gap-2'>
         <Button onClick={onHide}>{t('common.operation.cancel')}</Button>
         <Button
           variant='primary'
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param.tsx
index 5d2ba282c8..d6ed7013e2 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param.tsx
@@ -10,11 +10,11 @@ export const Item: FC<{ title: string; tooltip: string; children: React.JSX.Elem
 }) => {
   return (
     <div>
-      <div className='flex items-center space-x-1 mb-1'>
-        <div className='py-1 system-sm-semibold text-text-secondary'>{title}</div>
+      <div className='mb-1 flex items-center space-x-1'>
+        <div className='system-sm-semibold text-text-secondary py-1'>{title}</div>
         <Tooltip
           popupContent={
-            <div className='max-w-[200px] system-sm-regular text-text-secondary'>{tooltip}</div>
+            <div className='system-sm-regular text-text-secondary max-w-[200px]'>{tooltip}</div>
           }
         />
       </div>
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
index f44aab5b9c..3cfca62234 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
@@ -77,8 +77,8 @@ const AnnotationReply = ({
     <>
       <FeatureCard
         icon={
-          <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600'>
-            <MessageFast className='w-4 h-4 text-text-primary-on-surface' />
+          <div className='border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600 shrink-0 rounded-lg border-[0.5px] p-1'>
+            <MessageFast className='text-text-primary-on-surface h-4 w-4' />
           </div>
         }
         title={t('appDebug.feature.annotation.title')}
@@ -90,19 +90,19 @@ const AnnotationReply = ({
       >
         <>
           {!annotationReply?.enabled && (
-            <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.annotation.description')}</div>
+            <div className='text-text-tertiary system-xs-regular line-clamp-2 min-h-8'>{t('appDebug.feature.annotation.description')}</div>
           )}
           {!!annotationReply?.enabled && (
             <>
               {!isHovering && (
-                <div className='pt-0.5 flex items-center gap-4'>
+                <div className='flex items-center gap-4 pt-0.5'>
                   <div className=''>
-                    <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.feature.annotation.scoreThreshold.title')}</div>
+                    <div className='text-text-tertiary system-2xs-medium-uppercase mb-0.5'>{t('appDebug.feature.annotation.scoreThreshold.title')}</div>
                     <div className='text-text-secondary system-xs-regular'>{annotationReply.score_threshold || '-'}</div>
                   </div>
-                  <div className='w-px h-[27px] bg-divider-subtle rotate-12'></div>
+                  <div className='bg-divider-subtle h-[27px] w-px rotate-12'></div>
                   <div className=''>
-                    <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('common.modelProvider.embeddingModel.key')}</div>
+                    <div className='text-text-tertiary system-2xs-medium-uppercase mb-0.5'>{t('common.modelProvider.embeddingModel.key')}</div>
                     <div className='text-text-secondary system-xs-regular'>{annotationReply.embedding_model?.embedding_model_name}</div>
                   </div>
                 </div>
@@ -110,13 +110,13 @@ const AnnotationReply = ({
               {isHovering && (
                 <div className='flex items-center justify-between'>
                   <Button className='w-[178px]' onClick={() => setIsShowAnnotationConfigInit(true)} disabled={disabled}>
-                    <RiEqualizer2Line className='mr-1 w-4 h-4' />
+                    <RiEqualizer2Line className='mr-1 h-4 w-4' />
                     {t('common.operation.params')}
                   </Button>
                   <Button className='w-[178px]' onClick={() => {
                     router.push(`/app/${appId}/annotations`)
                   }}>
-                    <RiExternalLinkLine className='mr-1 w-4 h-4' />
+                    <RiExternalLinkLine className='mr-1 h-4 w-4' />
                     {t('appDebug.feature.annotation.cacheManagement')}
                   </Button>
                 </div>
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.tsx
index 1df7253f4e..80e37eaff4 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.tsx
@@ -20,13 +20,13 @@ const Slider: React.FC<ISliderProps> = ({ className, max, min, step, value, disa
     max={max || 100}
     step={step || 1}
     className={cn(className, s.slider)}
-    thumbClassName={cn(s['slider-thumb'], 'top-[-7px] w-2 h-[18px] bg-white border !border-black/8 rounded-[36px] shadow-md cursor-pointer')}
+    thumbClassName={cn(s['slider-thumb'], '!border-black/8 top-[-7px] h-[18px] w-2 cursor-pointer rounded-[36px] border bg-white shadow-md')}
     trackClassName={s['slider-track']}
     onChange={onChange}
     renderThumb={(props, state) => (
       <div {...props}>
-        <div className='relative w-full h-full'>
-          <div className='absolute top-[-16px] left-[50%] translate-x-[-50%] system-sm-semibold text-text-primary'>
+        <div className='relative h-full w-full'>
+          <div className='system-sm-semibold text-text-primary absolute left-[50%] top-[-16px] translate-x-[-50%]'>
             {(state.valueNow / 100).toFixed(2)}
           </div>
         </div>
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx
index 3a9a34be43..428d56d74a 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx
@@ -19,7 +19,7 @@ const ScoreSlider: FC<Props> = ({
 
   return (
     <div className={className}>
-      <div className='h-[1px] mt-[14px]'>
+      <div className='mt-[14px] h-[1px]'>
         <Slider
           max={100}
           min={80}
@@ -28,13 +28,13 @@ const ScoreSlider: FC<Props> = ({
           onChange={onChange}
         />
       </div>
-      <div className='mt-[10px] flex justify-between items-center system-xs-semibold-uppercase'>
-        <div className='flex space-x-1 text-util-colors-cyan-cyan-500'>
+      <div className='system-xs-semibold-uppercase mt-[10px] flex items-center justify-between'>
+        <div className='text-util-colors-cyan-cyan-500 flex space-x-1'>
           <div>0.8</div>
           <div>·</div>
           <div>{t('appDebug.feature.annotation.scoreThreshold.easyMatch')}</div>
         </div>
-        <div className='flex space-x-1 text-util-colors-blue-blue-500'>
+        <div className='text-util-colors-blue-blue-500 flex space-x-1'>
           <div>1.0</div>
           <div>·</div>
           <div>{t('appDebug.feature.annotation.scoreThreshold.accurateMatch')}</div>
diff --git a/web/app/components/base/features/new-feature-panel/citation.tsx b/web/app/components/base/features/new-feature-panel/citation.tsx
index a0b702e9f9..4bd3084cad 100644
--- a/web/app/components/base/features/new-feature-panel/citation.tsx
+++ b/web/app/components/base/features/new-feature-panel/citation.tsx
@@ -40,8 +40,8 @@ const Citation = ({
   return (
     <FeatureCard
       icon={
-        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-warning-warning-500'>
-          <Citations className='w-4 h-4 text-text-primary-on-surface' />
+        <div className='border-divider-subtle shadow-xs bg-util-colors-warning-warning-500 shrink-0 rounded-lg border-[0.5px] p-1'>
+          <Citations className='text-text-primary-on-surface h-4 w-4' />
         </div>
       }
       title={t('appDebug.feature.citation.title')}
diff --git a/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx b/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
index ab6b3ec6db..ebd02e8de2 100644
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
@@ -81,8 +81,8 @@ const ConversationOpener = ({
   return (
     <FeatureCard
       icon={
-        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
-          <LoveMessage className='w-4 h-4 text-text-primary-on-surface' />
+        <div className='border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500 shrink-0 rounded-lg border-[0.5px] p-1'>
+          <LoveMessage className='text-text-primary-on-surface h-4 w-4' />
         </div>
       }
       title={t('appDebug.feature.conversationOpener.title')}
@@ -94,18 +94,18 @@ const ConversationOpener = ({
     >
       <>
         {!opening?.enabled && (
-          <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.conversationOpener.description')}</div>
+          <div className='text-text-tertiary system-xs-regular line-clamp-2 min-h-8'>{t('appDebug.feature.conversationOpener.description')}</div>
         )}
         {!!opening?.enabled && (
           <>
             {!isHovering && (
-              <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>
+              <div className='text-text-tertiary system-xs-regular line-clamp-2 min-h-8'>
                 {opening.opening_statement || t('appDebug.openingStatement.placeholder')}
               </div>
             )}
             {isHovering && (
               <Button className='w-full' onClick={handleOpenOpeningModal} disabled={disabled}>
-                <RiEditLine className='mr-1 w-4 h-4' />
+                <RiEditLine className='mr-1 h-4 w-4' />
                 {t('appDebug.openingStatement.writeOpener')}
               </Button>
             )}
diff --git a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
index a03886923e..56a62a1ffb 100644
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
@@ -95,12 +95,12 @@ const OpeningSettingModal = ({
     return (
       <div>
         <div className='flex items-center py-2'>
-          <div className='shrink-0 flex space-x-0.5 leading-[18px] text-xs font-medium text-text-tertiary'>
+          <div className='text-text-tertiary flex shrink-0 space-x-0.5 text-xs font-medium leading-[18px]'>
             <div className='uppercase'>{t('appDebug.openingStatement.openingQuestion')}</div>
             <div>·</div>
             <div>{tempSuggestedQuestions.length}/{MAX_QUESTION_NUM}</div>
           </div>
-          <Divider bgStyle='gradient' className='ml-3 grow w-0 h-px'/>
+          <Divider bgStyle='gradient' className='ml-3 h-px w-0 grow'/>
         </div>
         <ReactSortable
           className="space-y-1"
@@ -119,13 +119,13 @@ const OpeningSettingModal = ({
             return (
               <div
                 className={cn(
-                  'group relative rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg flex items-center pl-2.5 hover:bg-components-panel-on-panel-item-bg-hover',
+                  'border-components-panel-border-subtle bg-components-panel-on-panel-item-bg hover:bg-components-panel-on-panel-item-bg-hover group relative flex items-center rounded-lg border pl-2.5',
                   focusID === index && 'border-components-input-border-active hover:border-components-input-border-active bg-components-input-bg-active hover:bg-components-input-bg-active',
                   deletingID === index && 'border-components-input-border-destructive hover:border-components-input-border-destructive bg-state-destructive-hover hover:bg-state-destructive-hover',
                 )}
                 key={index}
               >
-                <RiDraggable className='handle w-4 h-4 text-text-quaternary cursor-grab' />
+                <RiDraggable className='handle text-text-quaternary h-4 w-4 cursor-grab' />
                 <input
                   type="input"
                   value={question || ''}
@@ -138,20 +138,20 @@ const OpeningSettingModal = ({
                       return item
                     }))
                   }}
-                  className={'w-full overflow-x-auto pl-1.5 pr-8 text-sm leading-9 text-text-secondary border-0 grow h-9 bg-transparent focus:outline-none cursor-pointer rounded-lg'}
+                  className={'text-text-secondary h-9 w-full grow cursor-pointer overflow-x-auto rounded-lg border-0 bg-transparent pl-1.5 pr-8 text-sm leading-9 focus:outline-none'}
                   onFocus={() => setFocusID(index)}
                   onBlur={() => setFocusID(null)}
                 />
 
                 <div
-                  className='block absolute top-1/2 translate-y-[-50%] right-1.5 p-1 rounded-md cursor-pointer text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive'
+                  className='text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive absolute right-1.5 top-1/2 block translate-y-[-50%] cursor-pointer rounded-md p-1'
                   onClick={() => {
                     setTempSuggestedQuestions(tempSuggestedQuestions.filter((_, i) => index !== i))
                   }}
                   onMouseEnter={() => setDeletingID(index)}
                   onMouseLeave={() => setDeletingID(null)}
                 >
-                  <RiDeleteBinLine className='w-3.5 h-3.5' />
+                  <RiDeleteBinLine className='h-3.5 w-3.5' />
                 </div>
               </div>
             )
@@ -159,8 +159,8 @@ const OpeningSettingModal = ({
         {tempSuggestedQuestions.length < MAX_QUESTION_NUM && (
           <div
             onClick={() => { setTempSuggestedQuestions([...tempSuggestedQuestions, '']) }}
-            className='mt-1 flex items-center h-9 px-3 gap-2 rounded-lg cursor-pointer text-components-button-tertiary-text  bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover'>
-            <RiAddLine className='w-4 h-4' />
+            className='text-components-button-tertiary-text bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover mt-1 flex h-9 cursor-pointer items-center gap-2  rounded-lg px-3'>
+            <RiAddLine className='h-4 w-4' />
             <div className='system-sm-medium text-[13px]'>{t('appDebug.variableConfig.addOption')}</div>
           </div>
         )}
@@ -172,22 +172,22 @@ const OpeningSettingModal = ({
     <Modal
       isShow
       onClose={() => { }}
-      className='!p-6 !mt-14 !max-w-none !w-[640px] !bg-components-panel-bg-blur'
+      className='!bg-components-panel-bg-blur !mt-14 !w-[640px] !max-w-none !p-6'
     >
-      <div className='flex items-center justify-between mb-6'>
+      <div className='mb-6 flex items-center justify-between'>
         <div className='text-text-primary title-2xl-semi-bold'>{t('appDebug.feature.conversationOpener.title')}</div>
-        <div className='p-1 cursor-pointer' onClick={onCancel}><RiCloseLine className='w-4 h-4 text-text-tertiary'/></div>
+        <div className='cursor-pointer p-1' onClick={onCancel}><RiCloseLine className='text-text-tertiary h-4 w-4'/></div>
       </div>
-      <div className='flex gap-2 mb-8'>
-        <div className='shrink-0 mt-1.5 w-8 h-8 p-1.5 rounded-lg border-components-panel-border bg-util-colors-orange-dark-orange-dark-500'>
-          <RiAsterisk className='w-5 h-5 text-text-primary-on-surface' />
+      <div className='mb-8 flex gap-2'>
+        <div className='border-components-panel-border bg-util-colors-orange-dark-orange-dark-500 mt-1.5 h-8 w-8 shrink-0 rounded-lg p-1.5'>
+          <RiAsterisk className='text-text-primary-on-surface h-5 w-5' />
         </div>
-        <div className='grow p-3 bg-chat-bubble-bg rounded-2xl border-t border-divider-subtle shadow-xs'>
+        <div className='bg-chat-bubble-bg border-divider-subtle shadow-xs grow rounded-2xl border-t p-3'>
           <textarea
             value={tempValue}
             rows={3}
             onChange={e => setTempValue(e.target.value)}
-            className="w-full px-0 text-text-secondary system-md-regular  border-0 bg-transparent focus:outline-none"
+            className="text-text-secondary system-md-regular w-full border-0  bg-transparent px-0 focus:outline-none"
             placeholder={t('appDebug.openingStatement.placeholder') as string}
           />
           {renderQuestions()}
diff --git a/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx b/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
index e6dc4e2139..15bdb43d8b 100644
--- a/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
+++ b/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
@@ -26,20 +26,20 @@ const DialogWrapper = ({
           <div className={cn(
             'fixed inset-0 bg-black bg-opacity-25',
             'data-[closed]:opacity-0',
-            'data-[enter]:ease-out data-[enter]:duration-300 data-[enter]:opacity-100',
-            'data-[leave]:ease-in data-[leave]:duration-200 data-[leave]:opacity-0',
+            'data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
+            'data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
           )} />
         </TransitionChild>
 
         <div className="fixed inset-0">
-          <div className={cn('flex flex-col items-end justify-center min-h-full pb-2', inWorkflow ? 'pt-[112px]' : 'pt-[64px] pr-2')}>
+          <div className={cn('flex min-h-full flex-col items-end justify-center pb-2', inWorkflow ? 'pt-[112px]' : 'pr-2 pt-[64px]')}>
             <TransitionChild>
               <DialogPanel className={cn(
-                'grow flex flex-col relative w-[420px] h-0 p-0 overflow-hidden text-left align-middle transition-all transform bg-components-panel-bg-alt border-components-panel-border shadow-xl',
-                inWorkflow ? 'border-t-[0.5px] border-l-[0.5px] border-b-[0.5px] rounded-l-2xl' : 'border-[0.5px] rounded-2xl',
-                'data-[closed]:opacity-0  data-[closed]:scale-95',
-                'data-[enter]:ease-out data-[enter]:duration-300 data-[enter]:opacity-100 data-[enter]:scale-100',
-                'data-[leave]:ease-in data-[leave]:duration-200 data-[leave]:opacity-0 data-[enter]:scale-95',
+                'bg-components-panel-bg-alt border-components-panel-border relative flex h-0 w-[420px] grow flex-col overflow-hidden p-0 text-left align-middle shadow-xl transition-all',
+                inWorkflow ? 'rounded-l-2xl border-b-[0.5px] border-l-[0.5px] border-t-[0.5px]' : 'rounded-2xl border-[0.5px]',
+                'data-[closed]:scale-95  data-[closed]:opacity-0',
+                'data-[enter]:scale-100 data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
+                'data-[enter]:scale-95 data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
                 className,
               )}>
                 {children}
diff --git a/web/app/components/base/features/new-feature-panel/feature-bar.tsx b/web/app/components/base/features/new-feature-panel/feature-bar.tsx
index 42fe5555c6..b07c2468c9 100644
--- a/web/app/components/base/features/new-feature-panel/feature-bar.tsx
+++ b/web/app/components/base/features/new-feature-panel/feature-bar.tsx
@@ -36,23 +36,23 @@ const FeatureBar = ({
   }, [features, isChatMode, showFileUpload])
 
   return (
-    <div className='-translate-y-2 m-1 mt-0 px-2.5 py-2 pt-4 bg-util-colors-indigo-indigo-50 rounded-b-[10px] border-l border-b border-r border-components-panel-border-subtle'>
+    <div className='bg-util-colors-indigo-indigo-50 border-components-panel-border-subtle m-1 mt-0 -translate-y-2 rounded-b-[10px] border-b border-l border-r px-2.5 py-2 pt-4'>
       {noFeatureEnabled && (
-        <div className='flex items-end gap-1 cursor-pointer' onClick={() => onFeatureBarClick?.(true)}>
-          <RiApps2AddLine className='w-3.5 h-3.5 text-text-accent' />
+        <div className='flex cursor-pointer items-end gap-1' onClick={() => onFeatureBarClick?.(true)}>
+          <RiApps2AddLine className='text-text-accent h-3.5 w-3.5' />
           <div className='text-text-accent body-xs-medium'>{t('appDebug.feature.bar.empty')}</div>
-          <RiArrowRightLine className='w-3.5 h-3.5 text-text-accent' />
+          <RiArrowRightLine className='text-text-accent h-3.5 w-3.5' />
         </div>
       )}
       {!noFeatureEnabled && (
         <div className='flex items-center gap-2'>
-          <div className='shrink-0 flex items-center gap-0.5'>
+          <div className='flex shrink-0 items-center gap-0.5'>
             {!!features.moreLikeThis?.enabled && (
               <Tooltip
                 popupContent={t('appDebug.feature.moreLikeThis.title')}
               >
-                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
-                  <RiSparklingFill className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                <div className='border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500 shrink-0 rounded-lg border-[0.5px] p-1'>
+                  <RiSparklingFill className='text-text-primary-on-surface h-3.5 w-3.5' />
                 </div>
               </Tooltip>
             )}
@@ -60,8 +60,8 @@ const FeatureBar = ({
               <Tooltip
                 popupContent={t('appDebug.feature.conversationOpener.title')}
               >
-                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
-                  <LoveMessage className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                <div className='border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500 shrink-0 rounded-lg border-[0.5px] p-1'>
+                  <LoveMessage className='text-text-primary-on-surface h-3.5 w-3.5' />
                 </div>
               </Tooltip>
             )}
@@ -69,8 +69,8 @@ const FeatureBar = ({
               <Tooltip
                 popupContent={t('appDebug.feature.moderation.title')}
               >
-                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-text-success'>
-                  <ContentModeration className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                <div className='border-divider-subtle shadow-xs bg-text-success shrink-0 rounded-lg border-[0.5px] p-1'>
+                  <ContentModeration className='text-text-primary-on-surface h-3.5 w-3.5' />
                 </div>
               </Tooltip>
             )}
@@ -78,8 +78,8 @@ const FeatureBar = ({
               <Tooltip
                 popupContent={t('appDebug.feature.speechToText.title')}
               >
-                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-violet-violet-600'>
-                  <Microphone01 className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                <div className='border-divider-subtle shadow-xs bg-util-colors-violet-violet-600 shrink-0 rounded-lg border-[0.5px] p-1'>
+                  <Microphone01 className='text-text-primary-on-surface h-3.5 w-3.5' />
                 </div>
               </Tooltip>
             )}
@@ -88,8 +88,8 @@ const FeatureBar = ({
                 <Tooltip
                   popupContent={t('appDebug.feature.textToSpeech.title')}
                 >
-                  <div className={cn('shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-violet-violet-600', !disabled && 'cursor-pointer')}>
-                    <TextToAudio className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                  <div className={cn('border-divider-subtle shadow-xs bg-util-colors-violet-violet-600 shrink-0 rounded-lg border-[0.5px] p-1', !disabled && 'cursor-pointer')}>
+                    <TextToAudio className='text-text-primary-on-surface h-3.5 w-3.5' />
                   </div>
                 </Tooltip>
               </VoiceSettings>
@@ -98,8 +98,8 @@ const FeatureBar = ({
               <Tooltip
                 popupContent={t('appDebug.feature.fileUpload.title')}
               >
-                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-blue-600'>
-                  <FolderUpload className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                <div className='border-divider-subtle shadow-xs bg-util-colors-blue-blue-600 shrink-0 rounded-lg border-[0.5px] p-1'>
+                  <FolderUpload className='text-text-primary-on-surface h-3.5 w-3.5' />
                 </div>
               </Tooltip>
             )}
@@ -107,8 +107,8 @@ const FeatureBar = ({
               <Tooltip
                 popupContent={t('appDebug.feature.suggestedQuestionsAfterAnswer.title')}
               >
-                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
-                  <VirtualAssistant className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                <div className='border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500 shrink-0 rounded-lg border-[0.5px] p-1'>
+                  <VirtualAssistant className='text-text-primary-on-surface h-3.5 w-3.5' />
                 </div>
               </Tooltip>
             )}
@@ -116,8 +116,8 @@ const FeatureBar = ({
               <Tooltip
                 popupContent={t('appDebug.feature.citation.title')}
               >
-                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-warning-warning-500'>
-                  <Citations className='w-4 h-4 text-text-primary-on-surface' />
+                <div className='border-divider-subtle shadow-xs bg-util-colors-warning-warning-500 shrink-0 rounded-lg border-[0.5px] p-1'>
+                  <Citations className='text-text-primary-on-surface h-4 w-4' />
                 </div>
               </Tooltip>
             )}
@@ -125,16 +125,16 @@ const FeatureBar = ({
               <Tooltip
                 popupContent={t('appDebug.feature.annotation.title')}
               >
-                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600'>
-                  <MessageFast className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                <div className='border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600 shrink-0 rounded-lg border-[0.5px] p-1'>
+                  <MessageFast className='text-text-primary-on-surface h-3.5 w-3.5' />
                 </div>
               </Tooltip>
             )}
           </div>
-          <div className='grow text-text-tertiary body-xs-regular'>{t('appDebug.feature.bar.enableText')}</div>
+          <div className='text-text-tertiary body-xs-regular grow'>{t('appDebug.feature.bar.enableText')}</div>
           <Button className='shrink-0' variant='ghost-accent' size='small' onClick={() => onFeatureBarClick?.(true)}>
             <div className='mx-1'>{t('appDebug.feature.bar.manage')}</div>
-            <RiArrowRightLine className='w-3.5 h-3.5 text-text-accent' />
+            <RiArrowRightLine className='text-text-accent h-3.5 w-3.5' />
           </Button>
         </div>
       )}
diff --git a/web/app/components/base/features/new-feature-panel/feature-card.tsx b/web/app/components/base/features/new-feature-panel/feature-card.tsx
index 341a693ce0..940a7af356 100644
--- a/web/app/components/base/features/new-feature-panel/feature-card.tsx
+++ b/web/app/components/base/features/new-feature-panel/feature-card.tsx
@@ -32,26 +32,26 @@ const FeatureCard = ({
 }: Props) => {
   return (
     <div
-      className='mb-1 p-3 border-t-[0.5px] border-l-[0.5px] border-effects-highlight rounded-xl bg-background-section-burn'
+      className='border-effects-highlight bg-background-section-burn mb-1 rounded-xl border-l-[0.5px] border-t-[0.5px] p-3'
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
       <div className='mb-2 flex items-center gap-2'>
         {icon}
-        <div className='grow flex items-center text-text-secondary system-sm-semibold'>
+        <div className='text-text-secondary system-sm-semibold flex grow items-center'>
           {title}
           {tooltip && (
             <Tooltip
               popupContent={tooltip}
             >
-              <div className='ml-0.5 p-px'><RiQuestionLine className='w-3.5 h-3.5 text-text-quaternary' /></div>
+              <div className='ml-0.5 p-px'><RiQuestionLine className='text-text-quaternary h-3.5 w-3.5' /></div>
             </Tooltip>
           )}
         </div>
         <Switch disabled={disabled} className='shrink-0' onChange={state => onChange?.(state)} defaultValue={value} />
       </div>
       {description && (
-        <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{description}</div>
+        <div className='text-text-tertiary system-xs-regular line-clamp-2 min-h-8'>{description}</div>
       )}
       {children}
     </div>
diff --git a/web/app/components/base/features/new-feature-panel/file-upload/index.tsx b/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
index 7babdd71fd..d8000d59b7 100644
--- a/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
@@ -50,8 +50,8 @@ const FileUpload = ({
   return (
     <FeatureCard
       icon={
-        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-blue-600'>
-          <FolderUpload className='w-4 h-4 text-text-primary-on-surface' />
+        <div className='border-divider-subtle shadow-xs bg-util-colors-blue-blue-600 shrink-0 rounded-lg border-[0.5px] p-1'>
+          <FolderUpload className='text-text-primary-on-surface h-4 w-4' />
         </div>
       }
       title={t('appDebug.feature.fileUpload.title')}
@@ -63,19 +63,19 @@ const FileUpload = ({
     >
       <>
         {!file?.enabled && (
-          <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.fileUpload.description')}</div>
+          <div className='text-text-tertiary system-xs-regular line-clamp-2 min-h-8'>{t('appDebug.feature.fileUpload.description')}</div>
         )}
         {file?.enabled && (
           <>
             {!isHovering && !modalOpen && (
-              <div className='pt-0.5 flex items-center gap-4'>
+              <div className='flex items-center gap-4 pt-0.5'>
                 <div className=''>
-                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.feature.fileUpload.supportedTypes')}</div>
+                  <div className='text-text-tertiary system-2xs-medium-uppercase mb-0.5'>{t('appDebug.feature.fileUpload.supportedTypes')}</div>
                   <div className='text-text-secondary system-xs-regular'>{supportedTypes}</div>
                 </div>
-                <div className='w-px h-[27px] bg-divider-subtle rotate-12'></div>
+                <div className='bg-divider-subtle h-[27px] w-px rotate-12'></div>
                 <div className=''>
-                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.feature.fileUpload.numberLimit')}</div>
+                  <div className='text-text-tertiary system-2xs-medium-uppercase mb-0.5'>{t('appDebug.feature.fileUpload.numberLimit')}</div>
                   <div className='text-text-secondary system-xs-regular'>{file?.number_limits}</div>
                 </div>
               </div>
@@ -90,7 +90,7 @@ const FileUpload = ({
                 onChange={onChange}
               >
                 <Button className='w-full' disabled={disabled}>
-                  <RiEqualizer2Line className='mr-1 w-4 h-4' />
+                  <RiEqualizer2Line className='mr-1 h-4 w-4' />
                   {t('common.operation.settings')}
                 </Button>
               </SettingModal>
diff --git a/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx b/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
index 7493f795d3..fb645e055f 100644
--- a/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
@@ -58,7 +58,7 @@ const SettingContent = ({
     <>
       <div className='mb-4 flex items-center justify-between'>
         <div className='text-text-primary system-xl-semibold'>{!imageUpload ? t('appDebug.feature.fileUpload.modalTitle') : t('appDebug.feature.imageUpload.modalTitle')}</div>
-        <div className='p-1 cursor-pointer' onClick={onClose}><RiCloseLine className='w-4 h-4 text-text-tertiary'/></div>
+        <div className='cursor-pointer p-1' onClick={onClose}><RiCloseLine className='text-text-tertiary h-4 w-4'/></div>
       </div>
       <FileUploadSetting
         isMultiple
diff --git a/web/app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx b/web/app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx
index e3023099a5..cae5a5d14b 100644
--- a/web/app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx
@@ -37,7 +37,7 @@ const FileUploadSettings = ({
         {children}
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 50 }}>
-        <div className='w-[360px] p-4 bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-2xl'>
+        <div className='bg-components-panel-bg border-components-panel-border w-[360px] rounded-2xl border-[0.5px] p-4 shadow-2xl'>
           <SettingContent
             imageUpload={imageUpload}
             onClose={() => onOpen(false)}
diff --git a/web/app/components/base/features/new-feature-panel/follow-up.tsx b/web/app/components/base/features/new-feature-panel/follow-up.tsx
index f4377ce77c..750d5e1ada 100644
--- a/web/app/components/base/features/new-feature-panel/follow-up.tsx
+++ b/web/app/components/base/features/new-feature-panel/follow-up.tsx
@@ -40,8 +40,8 @@ const FollowUp = ({
   return (
     <FeatureCard
       icon={
-        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
-          <VirtualAssistant className='w-4 h-4 text-text-primary-on-surface' />
+        <div className='border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500 shrink-0 rounded-lg border-[0.5px] p-1'>
+          <VirtualAssistant className='text-text-primary-on-surface h-4 w-4' />
         </div>
       }
       title={t('appDebug.feature.suggestedQuestionsAfterAnswer.title')}
diff --git a/web/app/components/base/features/new-feature-panel/image-upload/index.tsx b/web/app/components/base/features/new-feature-panel/image-upload/index.tsx
index f728520e9b..8433ab91d3 100644
--- a/web/app/components/base/features/new-feature-panel/image-upload/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/image-upload/index.tsx
@@ -50,8 +50,8 @@ const FileUpload = ({
   return (
     <FeatureCard
       icon={
-        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600'>
-          <RiImage2Fill className='w-4 h-4 text-text-primary-on-surface' />
+        <div className='border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600 shrink-0 rounded-lg border-[0.5px] p-1'>
+          <RiImage2Fill className='text-text-primary-on-surface h-4 w-4' />
         </div>
       }
       title={
@@ -59,7 +59,7 @@ const FileUpload = ({
           {t('appDebug.feature.imageUpload.title')}
           <Badge
             text='LEGACY'
-            className='shrink-0 mx-1 border-text-accent-secondary text-text-accent-secondary'
+            className='border-text-accent-secondary text-text-accent-secondary mx-1 shrink-0'
           />
         </div>
       }
@@ -71,19 +71,19 @@ const FileUpload = ({
     >
       <>
         {!file?.enabled && (
-          <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.imageUpload.description')}</div>
+          <div className='text-text-tertiary system-xs-regular line-clamp-2 min-h-8'>{t('appDebug.feature.imageUpload.description')}</div>
         )}
         {file?.enabled && (
           <>
             {!isHovering && !modalOpen && (
-              <div className='pt-0.5 flex items-center gap-4'>
+              <div className='flex items-center gap-4 pt-0.5'>
                 <div className=''>
-                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.feature.imageUpload.supportedTypes')}</div>
+                  <div className='text-text-tertiary system-2xs-medium-uppercase mb-0.5'>{t('appDebug.feature.imageUpload.supportedTypes')}</div>
                   <div className='text-text-secondary system-xs-regular'>{supportedTypes}</div>
                 </div>
-                <div className='w-px h-[27px] bg-divider-subtle rotate-12'></div>
+                <div className='bg-divider-subtle h-[27px] w-px rotate-12'></div>
                 <div className=''>
-                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.feature.imageUpload.numberLimit')}</div>
+                  <div className='text-text-tertiary system-2xs-medium-uppercase mb-0.5'>{t('appDebug.feature.imageUpload.numberLimit')}</div>
                   <div className='text-text-secondary system-xs-regular'>{file?.number_limits}</div>
                 </div>
               </div>
@@ -99,7 +99,7 @@ const FileUpload = ({
                 onChange={onChange}
               >
                 <Button className='w-full' disabled={disabled}>
-                  <RiEqualizer2Line className='mr-1 w-4 h-4' />
+                  <RiEqualizer2Line className='mr-1 h-4 w-4' />
                   {t('common.operation.settings')}
                 </Button>
               </SettingModal>
diff --git a/web/app/components/base/features/new-feature-panel/index.tsx b/web/app/components/base/features/new-feature-panel/index.tsx
index 78204f2c05..1dcf0332d8 100644
--- a/web/app/components/base/features/new-feature-panel/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/index.tsx
@@ -58,25 +58,25 @@ const NewFeaturePanel = ({
       onClose={onClose}
       inWorkflow={inWorkflow}
     >
-      <div className='grow flex flex-col h-full'>
+      <div className='flex h-full grow flex-col'>
         {/* header */}
-        <div className='shrink-0 flex justify-between p-4 pb-3'>
+        <div className='flex shrink-0 justify-between p-4 pb-3'>
           <div>
             <div className='text-text-primary system-xl-semibold'>{t('workflow.common.features')}</div>
             <div className='text-text-tertiary body-xs-regular'>{t('workflow.common.featuresDescription')}</div>
           </div>
-          <div className='w-8 h-8 p-2 cursor-pointer' onClick={onClose}><RiCloseLine className='w-4 h-4 text-text-tertiary'/></div>
+          <div className='h-8 w-8 cursor-pointer p-2' onClick={onClose}><RiCloseLine className='text-text-tertiary h-4 w-4'/></div>
         </div>
         {/* list */}
         <div className='grow basis-0 overflow-y-auto px-4 pb-4'>
           {showFileUpload && (
-            <div className='relative mb-1 p-2 rounded-xl border border-components-panel-border shadow-xs'>
-              <div className='absolute top-0 left-0 w-full h-full rounded-xl opacity-40' style={{ background: 'linear-gradient(92deg, rgba(11, 165, 236, 0.25) 18.12%, rgba(255, 255, 255, 0.00) 167.31%)' }}></div>
-              <div className='relative flex items-start w-full h-full'>
-                <div className='shrink-0 mr-0.5 p-0.5'>
-                  <RiInformation2Fill className='w-5 h-5 text-text-accent' />
+            <div className='border-components-panel-border shadow-xs relative mb-1 rounded-xl border p-2'>
+              <div className='absolute left-0 top-0 h-full w-full rounded-xl opacity-40' style={{ background: 'linear-gradient(92deg, rgba(11, 165, 236, 0.25) 18.12%, rgba(255, 255, 255, 0.00) 167.31%)' }}></div>
+              <div className='relative flex h-full w-full items-start'>
+                <div className='mr-0.5 shrink-0 p-0.5'>
+                  <RiInformation2Fill className='text-text-accent h-5 w-5' />
                 </div>
-                <div className='p-1 text-text-primary system-xs-medium'>
+                <div className='text-text-primary system-xs-medium p-1'>
                   <span>{isChatMode ? t('workflow.common.fileUploadTip') : t('workflow.common.ImageUploadLegacyTip')}</span>
                   <a
                     className='text-text-accent'
diff --git a/web/app/components/base/features/new-feature-panel/moderation/form-generation.tsx b/web/app/components/base/features/new-feature-panel/moderation/form-generation.tsx
index f5cddcc9a0..c760f27639 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/form-generation.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/form-generation.tsx
@@ -30,14 +30,14 @@ const FormGeneration: FC<FormGenerationProps> = ({
             key={index}
             className='py-2'
           >
-            <div className='flex items-center h-9 text-sm font-medium text-text-primary'>
+            <div className='text-text-primary flex h-9 items-center text-sm font-medium'>
               {locale === 'zh-Hans' ? form.label['zh-Hans'] : form.label['en-US']}
             </div>
             {
               form.type === 'text-input' && (
                 <input
                   value={value?.[form.variable] || ''}
-                  className='block px-3 w-full h-9 bg-components-input-bg-normal rounded-lg text-sm text-text-primary outline-none appearance-none'
+                  className='bg-components-input-bg-normal text-text-primary block h-9 w-full appearance-none rounded-lg px-3 text-sm outline-none'
                   placeholder={form.placeholder}
                   onChange={e => handleFormChange(form.variable, e.target.value)}
                 />
diff --git a/web/app/components/base/features/new-feature-panel/moderation/index.tsx b/web/app/components/base/features/new-feature-panel/moderation/index.tsx
index 201efe3f67..e0c968e93d 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/index.tsx
@@ -130,8 +130,8 @@ const Moderation = ({
   return (
     <FeatureCard
       icon={
-        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-text-success'>
-          <ContentModeration className='w-4 h-4 text-text-primary-on-surface' />
+        <div className='border-divider-subtle shadow-xs bg-text-success shrink-0 rounded-lg border-[0.5px] p-1'>
+          <ContentModeration className='text-text-primary-on-surface h-4 w-4' />
         </div>
       }
       title={t('appDebug.feature.moderation.title')}
@@ -143,26 +143,26 @@ const Moderation = ({
     >
       <>
         {!moderation?.enabled && (
-          <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.moderation.description')}</div>
+          <div className='text-text-tertiary system-xs-regular line-clamp-2 min-h-8'>{t('appDebug.feature.moderation.description')}</div>
         )}
         {!!moderation?.enabled && (
           <>
             {!isHovering && (
-              <div className='pt-0.5 flex items-center gap-4'>
+              <div className='flex items-center gap-4 pt-0.5'>
                 <div className=''>
-                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.feature.moderation.modal.provider.title')}</div>
+                  <div className='text-text-tertiary system-2xs-medium-uppercase mb-0.5'>{t('appDebug.feature.moderation.modal.provider.title')}</div>
                   <div className='text-text-secondary system-xs-regular'>{providerContent}</div>
                 </div>
-                <div className='w-px h-[27px] bg-divider-subtle rotate-12'></div>
+                <div className='bg-divider-subtle h-[27px] w-px rotate-12'></div>
                 <div className=''>
-                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.feature.moderation.contentEnableLabel')}</div>
+                  <div className='text-text-tertiary system-2xs-medium-uppercase mb-0.5'>{t('appDebug.feature.moderation.contentEnableLabel')}</div>
                   <div className='text-text-secondary system-xs-regular'>{enableContent}</div>
                 </div>
               </div>
             )}
             {isHovering && (
               <Button className='w-full' onClick={handleOpenModerationSettingModal} disabled={disabled}>
-                <RiEqualizer2Line className='mr-1 w-4 h-4' />
+                <RiEqualizer2Line className='mr-1 h-4 w-4' />
                 {t('common.operation.settings')}
               </Button>
             )}
diff --git a/web/app/components/base/features/new-feature-panel/moderation/moderation-content.tsx b/web/app/components/base/features/new-feature-panel/moderation/moderation-content.tsx
index a6e122fb2b..47071c64d8 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/moderation-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/moderation-content.tsx
@@ -27,13 +27,13 @@ const ModerationContent: FC<ModerationContentProps> = ({
 
   return (
     <div className='py-2'>
-      <div className='rounded-lg bg-components-panel-bg border border-components-panel-border'>
-        <div className='flex items-center justify-between px-3 h-10 rounded-lg'>
-          <div className='shrink-0 text-sm font-medium text-text-primary'>{title}</div>
-          <div className='grow flex items-center justify-end'>
+      <div className='bg-components-panel-bg border-components-panel-border rounded-lg border'>
+        <div className='flex h-10 items-center justify-between rounded-lg px-3'>
+          <div className='text-text-primary shrink-0 text-sm font-medium'>{title}</div>
+          <div className='flex grow items-center justify-end'>
             {
               info && (
-                <div className='mr-2 text-xs text-text-tertiary truncate' title={info}>{info}</div>
+                <div className='text-text-tertiary mr-2 truncate text-xs' title={info}>{info}</div>
               )
             }
             <Switch
@@ -45,19 +45,19 @@ const ModerationContent: FC<ModerationContentProps> = ({
         </div>
         {
           config.enabled && showPreset && (
-            <div className='px-3 pt-1 pb-3 bg-components-panel-bg rounded-lg'>
-              <div className='flex items-center justify-between h-8 text-[13px] font-medium text-text-secondary'>
+            <div className='bg-components-panel-bg rounded-lg px-3 pb-3 pt-1'>
+              <div className='text-text-secondary flex h-8 items-center justify-between text-[13px] font-medium'>
                 {t('appDebug.feature.moderation.modal.content.preset')}
-                <span className='text-xs font-normal text-text-tertiary'>{t('appDebug.feature.moderation.modal.content.supportMarkdown')}</span>
+                <span className='text-text-tertiary text-xs font-normal'>{t('appDebug.feature.moderation.modal.content.supportMarkdown')}</span>
               </div>
-              <div className='relative px-3 py-2 h-20 rounded-lg bg-components-input-bg-normal'>
+              <div className='bg-components-input-bg-normal relative h-20 rounded-lg px-3 py-2'>
                 <textarea
                   value={config.preset_response || ''}
-                  className='block w-full h-full bg-transparent text-sm text-text-secondary outline-none appearance-none resize-none'
+                  className='text-text-secondary block h-full w-full resize-none appearance-none bg-transparent text-sm outline-none'
                   placeholder={t('appDebug.feature.moderation.modal.content.placeholder') || ''}
                   onChange={e => handleConfigChange('preset_response', e.target.value)}
                 />
-                <div className='absolute bottom-2 right-2 flex items-center px-1 h-5 rounded-md bg-background-section text-xs font-medium text-text-quaternary'>
+                <div className='bg-background-section text-text-quaternary absolute bottom-2 right-2 flex h-5 items-center rounded-md px-1 text-xs font-medium'>
                   <span>{(config.preset_response || '').length}</span>/<span className='text-text-tertiary'>100</span>
                 </div>
               </div>
diff --git a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
index 24501c32c1..350dc2254e 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
@@ -240,32 +240,32 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
     <Modal
       isShow
       onClose={() => { }}
-      className='!p-6 !mt-14 !max-w-none !w-[600px]'
+      className='!mt-14 !w-[600px] !max-w-none !p-6'
     >
       <div className='flex items-center justify-between'>
         <div className='text-text-primary title-2xl-semi-bold'>{t('appDebug.feature.moderation.modal.title')}</div>
-        <div className='p-1 cursor-pointer' onClick={onCancel}><RiCloseLine className='w-4 h-4 text-text-tertiary'/></div>
+        <div className='cursor-pointer p-1' onClick={onCancel}><RiCloseLine className='text-text-tertiary h-4 w-4'/></div>
       </div>
       <div className='py-2'>
-        <div className='leading-9 text-sm font-medium text-text-primary'>
+        <div className='text-text-primary text-sm font-medium leading-9'>
           {t('appDebug.feature.moderation.modal.provider.title')}
         </div>
-        <div className='grid gap-2.5 grid-cols-3'>
+        <div className='grid grid-cols-3 gap-2.5'>
           {
             providers.map(provider => (
               <div
                 key={provider.key}
                 className={cn(
-                  'flex items-center px-2 h-8 rounded-md system-sm-regular bg-components-option-card-option-bg border border-components-option-card-option-border text-text-secondary cursor-default',
+                  'system-sm-regular bg-components-option-card-option-bg border-components-option-card-option-border text-text-secondary flex h-8 cursor-default items-center rounded-md border px-2',
                   localeData.type !== provider.key && 'hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover hover:shadow-xs cursor-pointer',
-                  localeData.type === provider.key && 'bg-components-option-card-option-selected-bg border-[1.5px] border-components-option-card-option-selected-border system-sm-medium shadow-xs',
+                  localeData.type === provider.key && 'bg-components-option-card-option-selected-bg border-components-option-card-option-selected-border system-sm-medium shadow-xs border-[1.5px]',
                   localeData.type === 'openai_moderation' && provider.key === 'openai_moderation' && !isOpenAIProviderConfigured && 'text-text-disabled',
                 )}
                 onClick={() => handleDataTypeChange(provider.key)}
               >
                 <div className={cn(
-                  'mr-2 w-4 h-4 border border-components-radio-border bg-components-radio-bg shadow-xs rounded-full',
-                  localeData.type === provider.key && 'border-[5px] border-components-radio-border-checked',
+                  'border-components-radio-border bg-components-radio-bg shadow-xs mr-2 h-4 w-4 rounded-full border',
+                  localeData.type === provider.key && 'border-components-radio-border-checked border-[5px]',
                 )}></div>
                 {provider.name}
               </div>
@@ -274,8 +274,8 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
         </div>
         {
           !isLoading && !isOpenAIProviderConfigured && localeData.type === 'openai_moderation' && (
-            <div className='flex items-center mt-2 px-3 py-2 bg-[#FFFAEB] rounded-lg border border-[#FEF0C7]'>
-              <InfoCircle className='mr-1 w-4 h-4 text-[#F79009]' />
+            <div className='mt-2 flex items-center rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 py-2'>
+              <InfoCircle className='mr-1 h-4 w-4 text-[#F79009]' />
               <div className='flex items-center text-xs font-medium text-gray-700'>
                 {t('appDebug.feature.moderation.modal.openaiNotConfig.before')}
                 <span
@@ -293,16 +293,16 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
       {
         localeData.type === 'keywords' && (
           <div className='py-2'>
-            <div className='mb-1 text-sm font-medium text-text-primary'>{t('appDebug.feature.moderation.modal.provider.keywords')}</div>
-            <div className='mb-2 text-xs text-text-tertiary'>{t('appDebug.feature.moderation.modal.keywords.tip')}</div>
-            <div className='relative px-3 py-2 h-[88px] bg-components-input-bg-normal rounded-lg'>
+            <div className='text-text-primary mb-1 text-sm font-medium'>{t('appDebug.feature.moderation.modal.provider.keywords')}</div>
+            <div className='text-text-tertiary mb-2 text-xs'>{t('appDebug.feature.moderation.modal.keywords.tip')}</div>
+            <div className='bg-components-input-bg-normal relative h-[88px] rounded-lg px-3 py-2'>
               <textarea
                 value={localeData.config?.keywords || ''}
                 onChange={handleDataKeywordsChange}
-                className='block w-full h-full bg-transparent text-sm text-text-secondary outline-none appearance-none resize-none'
+                className='text-text-secondary block h-full w-full resize-none appearance-none bg-transparent text-sm outline-none'
                 placeholder={t('appDebug.feature.moderation.modal.keywords.placeholder') || ''}
               />
-              <div className='absolute bottom-2 right-2 flex items-center px-1 h-5 rounded-md bg-background-section text-xs font-medium text-text-quaternary'>
+              <div className='bg-background-section text-text-quaternary absolute bottom-2 right-2 flex h-5 items-center rounded-md px-1 text-xs font-medium'>
                 <span>{(localeData.config?.keywords || '').split('\n').filter(Boolean).length}</span>/<span className='text-text-tertiary'>100 {t('appDebug.feature.moderation.modal.keywords.line')}</span>
               </div>
             </div>
@@ -312,14 +312,14 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
       {
         localeData.type === 'api' && (
           <div className='py-2'>
-            <div className='flex items-center justify-between h-9'>
-              <div className='text-sm font-medium text-text-primary'>{t('common.apiBasedExtension.selector.title')}</div>
+            <div className='flex h-9 items-center justify-between'>
+              <div className='text-text-primary text-sm font-medium'>{t('common.apiBasedExtension.selector.title')}</div>
               <a
                 href={t('common.apiBasedExtension.linkUrl') || '/'}
                 target='_blank' rel='noopener noreferrer'
-                className='group flex items-center text-xs text-text-tertiary hover:text-primary-600'
+                className='text-text-tertiary hover:text-primary-600 group flex items-center text-xs'
               >
-                <BookOpen01 className='mr-1 w-3 h-3 text-text-tertiary group-hover:text-primary-600' />
+                <BookOpen01 className='text-text-tertiary group-hover:text-primary-600 mr-1 h-3 w-3' />
                 {t('common.apiBasedExtension.link')}
               </a>
             </div>
@@ -356,7 +356,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
         info={(localeData.type === 'api' && t('appDebug.feature.moderation.modal.content.fromApi')) || ''}
         showPreset={!(localeData.type === 'api')}
       />
-      <div className='mt-1 mb-8 text-xs font-medium text-text-tertiary'>{t('appDebug.feature.moderation.modal.content.condition')}</div>
+      <div className='text-text-tertiary mb-8 mt-1 text-xs font-medium'>{t('appDebug.feature.moderation.modal.content.condition')}</div>
       <div className='flex items-center justify-end'>
         <Button
           onClick={onCancel}
diff --git a/web/app/components/base/features/new-feature-panel/more-like-this.tsx b/web/app/components/base/features/new-feature-panel/more-like-this.tsx
index ac9ab07c9d..e213b5ae62 100644
--- a/web/app/components/base/features/new-feature-panel/more-like-this.tsx
+++ b/web/app/components/base/features/new-feature-panel/more-like-this.tsx
@@ -40,8 +40,8 @@ const MoreLikeThis = ({
   return (
     <FeatureCard
       icon={
-        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
-          <RiSparklingFill className='w-4 h-4 text-text-primary-on-surface' />
+        <div className='border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500 shrink-0 rounded-lg border-[0.5px] p-1'>
+          <RiSparklingFill className='text-text-primary-on-surface h-4 w-4' />
         </div>
       }
       title={t('appDebug.feature.moreLikeThis.title')}
diff --git a/web/app/components/base/features/new-feature-panel/speech-to-text.tsx b/web/app/components/base/features/new-feature-panel/speech-to-text.tsx
index 837b924035..12550940ec 100644
--- a/web/app/components/base/features/new-feature-panel/speech-to-text.tsx
+++ b/web/app/components/base/features/new-feature-panel/speech-to-text.tsx
@@ -40,8 +40,8 @@ const SpeechToText = ({
   return (
     <FeatureCard
       icon={
-        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-violet-violet-600'>
-          <Microphone01 className='w-4 h-4 text-text-primary-on-surface' />
+        <div className='border-divider-subtle shadow-xs bg-util-colors-violet-violet-600 shrink-0 rounded-lg border-[0.5px] p-1'>
+          <Microphone01 className='text-text-primary-on-surface h-4 w-4' />
         </div>
       }
       title={t('appDebug.feature.speechToText.title')}
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
index 4bde7247a8..b44c17fcfc 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
@@ -49,8 +49,8 @@ const TextToSpeech = ({
   return (
     <FeatureCard
       icon={
-        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-violet-violet-600'>
-          <TextToAudio className='w-4 h-4 text-text-primary-on-surface' />
+        <div className='border-divider-subtle shadow-xs bg-util-colors-violet-violet-600 shrink-0 rounded-lg border-[0.5px] p-1'>
+          <TextToAudio className='text-text-primary-on-surface h-4 w-4' />
         </div>
       }
       title={t('appDebug.feature.textToSpeech.title')}
@@ -62,24 +62,24 @@ const TextToSpeech = ({
     >
       <>
         {!features.text2speech?.enabled && (
-          <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.textToSpeech.description')}</div>
+          <div className='text-text-tertiary system-xs-regular line-clamp-2 min-h-8'>{t('appDebug.feature.textToSpeech.description')}</div>
         )}
         {!!features.text2speech?.enabled && (
           <>
             {!isHovering && !modalOpen && (
-              <div className='pt-0.5 flex items-center gap-4'>
+              <div className='flex items-center gap-4 pt-0.5'>
                 <div className=''>
-                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.voice.voiceSettings.language')}</div>
+                  <div className='text-text-tertiary system-2xs-medium-uppercase mb-0.5'>{t('appDebug.voice.voiceSettings.language')}</div>
                   <div className='text-text-secondary system-xs-regular'>{languageInfo?.name || '-'}</div>
                 </div>
-                <div className='w-px h-[27px] bg-divider-subtle rotate-12'></div>
+                <div className='bg-divider-subtle h-[27px] w-px rotate-12'></div>
                 <div className=''>
-                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.voice.voiceSettings.voice')}</div>
+                  <div className='text-text-tertiary system-2xs-medium-uppercase mb-0.5'>{t('appDebug.voice.voiceSettings.voice')}</div>
                   <div className='text-text-secondary system-xs-regular'>{features.text2speech?.voice || t('appDebug.voice.defaultDisplay')}</div>
                 </div>
-                <div className='w-px h-[27px] bg-divider-subtle rotate-12'></div>
+                <div className='bg-divider-subtle h-[27px] w-px rotate-12'></div>
                 <div className=''>
-                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.voice.voiceSettings.autoPlay')}</div>
+                  <div className='text-text-tertiary system-2xs-medium-uppercase mb-0.5'>{t('appDebug.voice.voiceSettings.autoPlay')}</div>
                   <div className='text-text-secondary system-xs-regular'>{features.text2speech?.autoPlay === TtsAutoPlay.enabled ? t('appDebug.voice.voiceSettings.autoPlayEnabled') : t('appDebug.voice.voiceSettings.autoPlayDisabled')}</div>
                 </div>
               </div>
@@ -87,7 +87,7 @@ const TextToSpeech = ({
             {(isHovering || modalOpen) && (
               <VoiceSettings open={modalOpen && !disabled} onOpen={setModalOpen} onChange={onChange}>
                 <Button className='w-full' disabled={disabled}>
-                  <RiEqualizer2Line className='mr-1 w-4 h-4' />
+                  <RiEqualizer2Line className='mr-1 h-4 w-4' />
                   {t('appDebug.voice.voiceSettings.title')}
                 </Button>
               </VoiceSettings>
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
index 27ba0a66ff..197ecbf6b2 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
@@ -67,10 +67,10 @@ const VoiceParamConfig = ({
     <>
       <div className='mb-4 flex items-center justify-between'>
         <div className='system-xl-semibold text-text-primary'>{t('appDebug.voice.voiceSettings.title')}</div>
-        <div className='cursor-pointer p-1' onClick={onClose}><RiCloseLine className='h-4 w-4 text-text-tertiary' /></div>
+        <div className='cursor-pointer p-1' onClick={onClose}><RiCloseLine className='text-text-tertiary h-4 w-4' /></div>
       </div>
       <div className='mb-3'>
-        <div className='system-sm-semibold mb-1 flex items-center py-1 text-text-secondary'>
+        <div className='system-sm-semibold text-text-secondary mb-1 flex items-center py-1'>
           {t('appDebug.voice.voiceSettings.language')}
           <Tooltip
             popupContent={
@@ -93,13 +93,13 @@ const VoiceParamConfig = ({
         >
           <div className='relative h-8'>
             <ListboxButton
-              className={'h-full w-full cursor-pointer rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 focus-visible:bg-state-base-hover focus-visible:outline-none group-hover:bg-state-base-hover sm:text-sm sm:leading-6'}>
+              className={'bg-components-input-bg-normal focus-visible:bg-state-base-hover group-hover:bg-state-base-hover h-full w-full cursor-pointer rounded-lg border-0 py-1.5 pl-3 pr-10 focus-visible:outline-none sm:text-sm sm:leading-6'}>
               <span className={classNames('block truncate text-left text-text-secondary', !languageItem?.name && 'text-text-tertiary')}>
                 {languageItem?.name ? t(`common.voice.language.${languageItem?.value.replace('-', '')}`) : localLanguagePlaceholder}
               </span>
               <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                 <ChevronDownIcon
-                  className="h-4 w-4 text-text-tertiary"
+                  className="text-text-tertiary h-4 w-4"
                   aria-hidden="true"
                 />
               </span>
@@ -112,11 +112,11 @@ const VoiceParamConfig = ({
             >
 
               <ListboxOptions
-                className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg px-1 py-1 text-base shadow-lg focus:outline-none sm:text-sm">
+                className="border-components-panel-border bg-components-panel-bg absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md border-[0.5px] px-1 py-1 text-base shadow-lg focus:outline-none sm:text-sm">
                 {languages.map((item: Item) => (
                   <ListboxOption
                     key={item.value}
-                    className='relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover data-[active]:bg-state-base-active'
+                    className='text-text-secondary hover:bg-state-base-hover data-[active]:bg-state-base-active relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9'
                     value={item}
                     disabled={false}
                   >
@@ -143,7 +143,7 @@ const VoiceParamConfig = ({
         </Listbox >
       </div >
       <div className='mb-3'>
-        <div className='system-sm-semibold mb-1 py-1 text-text-secondary'>
+        <div className='system-sm-semibold text-text-secondary mb-1 py-1'>
           {t('appDebug.voice.voiceSettings.voice')}
         </div>
         <div className='flex items-center gap-1'>
@@ -158,12 +158,12 @@ const VoiceParamConfig = ({
           >
             <div className={'relative h-8 grow'}>
               <ListboxButton
-                className={'h-full w-full cursor-pointer rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 focus-visible:bg-state-base-hover focus-visible:outline-none group-hover:bg-state-base-hover sm:text-sm sm:leading-6'}>
+                className={'bg-components-input-bg-normal focus-visible:bg-state-base-hover group-hover:bg-state-base-hover h-full w-full cursor-pointer rounded-lg border-0 py-1.5 pl-3 pr-10 focus-visible:outline-none sm:text-sm sm:leading-6'}>
                 <span
                   className={classNames('block truncate text-left text-text-secondary', !voiceItem?.name && 'text-text-tertiary')}>{voiceItem?.name ?? localVoicePlaceholder}</span>
                 <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                   <ChevronDownIcon
-                    className="h-4 w-4 text-text-tertiary"
+                    className="text-text-tertiary h-4 w-4"
                     aria-hidden="true"
                   />
                 </span>
@@ -176,11 +176,11 @@ const VoiceParamConfig = ({
               >
 
                 <ListboxOptions
-                  className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg px-1 py-1 text-base shadow-lg focus:outline-none sm:text-sm">
+                  className="border-components-panel-border bg-components-panel-bg absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md border-[0.5px] px-1 py-1 text-base shadow-lg focus:outline-none sm:text-sm">
                   {voiceItems?.map((item: Item) => (
                     <ListboxOption
                       key={item.value}
-                      className='relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover data-[active]:bg-state-base-active'
+                      className='text-text-secondary hover:bg-state-base-hover data-[active]:bg-state-base-active relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9'
                       value={item}
                       disabled={false}
                     >
@@ -205,7 +205,7 @@ const VoiceParamConfig = ({
             </div >
           </Listbox >
           {languageItem?.example && (
-            <div className='h-8 shrink-0 rounded-lg bg-components-button-tertiary-bg p-1'>
+            <div className='bg-components-button-tertiary-bg h-8 shrink-0 rounded-lg p-1'>
               <AudioBtn
                 value={languageItem?.example}
                 isAudition
@@ -217,7 +217,7 @@ const VoiceParamConfig = ({
         </div >
       </div >
       <div>
-        <div className='system-sm-semibold mb-1 py-1 text-text-secondary'>
+        <div className='system-sm-semibold text-text-secondary mb-1 py-1'>
           {t('appDebug.voice.voiceSettings.autoPlay')}
         </div>
         <Switch className='shrink-0'
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/voice-settings.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/voice-settings.tsx
index 076f06e6e7..e293b924d7 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/voice-settings.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/voice-settings.tsx
@@ -37,7 +37,7 @@ const VoiceSettings = ({
         {children}
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 50 }}>
-        <div className='w-[360px] p-4 bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-2xl'>
+        <div className='bg-components-panel-bg border-components-panel-border w-[360px] rounded-2xl border-[0.5px] p-4 shadow-2xl'>
           <ParamConfigContent onClose={() => onOpen(false)} onChange={onChange} />
         </div>
       </PortalToFollowElemContent>
diff --git a/web/app/components/base/file-uploader/audio-preview.tsx b/web/app/components/base/file-uploader/audio-preview.tsx
index 9a1ed440e2..d85e94748a 100644
--- a/web/app/components/base/file-uploader/audio-preview.tsx
+++ b/web/app/components/base/file-uploader/audio-preview.tsx
@@ -19,7 +19,7 @@ const AudioPreview: FC<AudioPreviewProps> = ({
 
   return createPortal(
     <div
-      className='fixed inset-0 p-8 flex items-center justify-center bg-black/80 z-[1000]'
+      className='fixed inset-0 z-[1000] flex items-center justify-center bg-black/80 p-8'
       onClick={e => e.stopPropagation()}
       tabIndex={-1}
     >
@@ -28,15 +28,15 @@ const AudioPreview: FC<AudioPreviewProps> = ({
           <source
             type="audio/mpeg"
             src={url}
-            className='max-w-full max-h-full'
+            className='max-h-full max-w-full'
           />
         </audio>
       </div>
       <div
-        className='absolute top-6 right-6 flex items-center justify-center w-8 h-8 bg-white/[0.08] rounded-lg backdrop-blur-[2px] cursor-pointer'
+        className='absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]'
         onClick={onCancel}
       >
-        <RiCloseLine className='w-4 h-4 text-gray-500'/>
+        <RiCloseLine className='h-4 w-4 text-gray-500'/>
       </div>
     </div>
     ,
diff --git a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
index 8ae8bb0538..28f3d612f8 100644
--- a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
+++ b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
@@ -60,16 +60,16 @@ const FileFromLinkOrLocal = ({
         {trigger(open)}
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[1001]'>
-        <div className='p-3 w-[280px] bg-components-panel-bg-blur border-[0.5px] border-components-panel-border rounded-xl shadow-lg'>
+        <div className='bg-components-panel-bg-blur border-components-panel-border w-[280px] rounded-xl border-[0.5px] p-3 shadow-lg'>
           {
             showFromLink && (
               <>
                 <div className={cn(
-                  'flex items-center p-1 h-8 bg-components-input-bg-active border border-components-input-border-active rounded-lg shadow-xs',
+                  'bg-components-input-bg-active border-components-input-border-active shadow-xs flex h-8 items-center rounded-lg border p-1',
                   showError && 'border-components-input-border-destructive',
                 )}>
                   <input
-                    className='grow block mr-0.5 px-1 bg-transparent system-sm-regular outline-none appearance-none'
+                    className='system-sm-regular mr-0.5 block grow appearance-none bg-transparent px-1 outline-none'
                     placeholder={t('common.fileUploader.pasteFileLinkInputPlaceholder') || ''}
                     value={url}
                     onChange={(e) => {
@@ -90,7 +90,7 @@ const FileFromLinkOrLocal = ({
                 </div>
                 {
                   showError && (
-                    <div className='mt-0.5 body-xs-regular text-text-destructive'>
+                    <div className='body-xs-regular text-text-destructive mt-0.5'>
                       {t('common.fileUploader.pasteFileLinkInvalid')}
                     </div>
                   )
@@ -100,10 +100,10 @@ const FileFromLinkOrLocal = ({
           }
           {
             showFromLink && showFromLocal && (
-              <div className='flex items-center p-2 h-7 system-2xs-medium-uppercase text-text-quaternary'>
-                <div className='mr-2 w-[93px] h-[1px] bg-gradient-to-l from-[rgba(16,24,40,0.08)]' />
+              <div className='system-2xs-medium-uppercase text-text-quaternary flex h-7 items-center p-2'>
+                <div className='mr-2 h-[1px] w-[93px] bg-gradient-to-l from-[rgba(16,24,40,0.08)]' />
                 OR
-                <div className='ml-2 w-[93px] h-[1px] bg-gradient-to-r from-[rgba(16,24,40,0.08)]' />
+                <div className='ml-2 h-[1px] w-[93px] bg-gradient-to-r from-[rgba(16,24,40,0.08)]' />
               </div>
             )
           }
@@ -114,7 +114,7 @@ const FileFromLinkOrLocal = ({
                 variant='secondary-accent'
                 disabled={disabled}
               >
-                <RiUploadCloud2Line className='mr-1 w-4 h-4' />
+                <RiUploadCloud2Line className='mr-1 h-4 w-4' />
                 {t('common.fileUploader.uploadFromComputer')}
                 <FileInput fileConfig={fileConfig} />
               </Button>
diff --git a/web/app/components/base/file-uploader/file-image-render.tsx b/web/app/components/base/file-uploader/file-image-render.tsx
index 9d263225e1..e09769a9fc 100644
--- a/web/app/components/base/file-uploader/file-image-render.tsx
+++ b/web/app/components/base/file-uploader/file-image-render.tsx
@@ -17,9 +17,9 @@ const FileImageRender = ({
   showDownloadAction,
 }: FileImageRenderProps) => {
   return (
-    <div className={cn('border-[2px] border-effects-image-frame shadow-xs', className)}>
+    <div className={cn('border-effects-image-frame shadow-xs border-[2px]', className)}>
       <img
-        className={cn('w-full h-full object-cover', showDownloadAction && 'cursor-pointer')}
+        className={cn('h-full w-full object-cover', showDownloadAction && 'cursor-pointer')}
         alt={alt || 'Preview'}
         onLoad={onLoad}
         onError={onError}
diff --git a/web/app/components/base/file-uploader/file-input.tsx b/web/app/components/base/file-uploader/file-input.tsx
index f7d659c66f..ba3badea58 100644
--- a/web/app/components/base/file-uploader/file-input.tsx
+++ b/web/app/components/base/file-uploader/file-input.tsx
@@ -35,7 +35,7 @@ const FileInput = ({
 
   return (
     <input
-      className='absolute block inset-0 opacity-0 text-[0] w-full disabled:cursor-not-allowed cursor-pointer'
+      className='absolute inset-0 block w-full cursor-pointer text-[0] opacity-0 disabled:cursor-not-allowed'
       onClick={e => ((e.target as HTMLInputElement).value = '')}
       type='file'
       onChange={handleChange}
diff --git a/web/app/components/base/file-uploader/file-list-in-log.tsx b/web/app/components/base/file-uploader/file-list-in-log.tsx
index e76d84bace..3565e77115 100644
--- a/web/app/components/base/file-uploader/file-list-in-log.tsx
+++ b/web/app/components/base/file-uploader/file-list-in-log.tsx
@@ -35,10 +35,10 @@ const FileListInLog = ({ fileList, isExpanded = false, noBorder = false, noPaddi
     return null
 
   return (
-    <div className={cn('px-3 py-2', expanded && 'py-3', !noBorder && 'border-t border-divider-subtle', noPadding && '!p-0')}>
+    <div className={cn('px-3 py-2', expanded && 'py-3', !noBorder && 'border-divider-subtle border-t', noPadding && '!p-0')}>
       <div className='flex justify-between gap-1'>
         {expanded && (
-          <div className='grow py-1 text-text-secondary system-xs-semibold-uppercase cursor-pointer' onClick={() => setExpanded(!expanded)}>{t('appLog.runDetail.fileListLabel')}</div>
+          <div className='text-text-secondary system-xs-semibold-uppercase grow cursor-pointer py-1' onClick={() => setExpanded(!expanded)}>{t('appLog.runDetail.fileListLabel')}</div>
         )}
         {!expanded && (
           <div className='flex gap-1'>
@@ -53,7 +53,7 @@ const FileListInLog = ({ fileList, isExpanded = false, noBorder = false, noPaddi
                     >
                       <div key={id}>
                         <FileImageRender
-                          className='w-8 h-8'
+                          className='h-8 w-8'
                           imageUrl={base64Url || url || ''}
                         />
                       </div>
@@ -63,7 +63,7 @@ const FileListInLog = ({ fileList, isExpanded = false, noBorder = false, noPaddi
                     <Tooltip
                       popupContent={name}
                     >
-                      <div key={id} className='p-1.5 rounded-md bg-components-panel-on-panel-item-bg border-[0.5px] border-components-panel-border shadow-xs'>
+                      <div key={id} className='bg-components-panel-on-panel-item-bg border-components-panel-border shadow-xs rounded-md border-[0.5px] p-1.5'>
                         <FileTypeIcon
                           type={getFileAppearanceType(name, type)}
                           size='md'
@@ -76,16 +76,16 @@ const FileListInLog = ({ fileList, isExpanded = false, noBorder = false, noPaddi
             })}
           </div>
         )}
-        <div className='flex items-center gap-1 cursor-pointer' onClick={() => setExpanded(!expanded)}>
+        <div className='flex cursor-pointer items-center gap-1' onClick={() => setExpanded(!expanded)}>
           {!expanded && <div className='text-text-tertiary system-xs-medium-uppercase'>{t('appLog.runDetail.fileListDetail')}</div>}
-          <RiArrowRightSLine className={cn('w-4 h-4 text-text-tertiary', expanded && 'rotate-90')} />
+          <RiArrowRightSLine className={cn('text-text-tertiary h-4 w-4', expanded && 'rotate-90')} />
         </div>
       </div>
       {expanded && (
         <div className='flex flex-col gap-3'>
           {fileList.map(item => (
-            <div key={item.varName} className='flex flex-col gap-1 system-xs-regular'>
-              <div className='py-1 text-text-tertiary '>{item.varName}</div>
+            <div key={item.varName} className='system-xs-regular flex flex-col gap-1'>
+              <div className='text-text-tertiary py-1 '>{item.varName}</div>
               {item.list.map(file => (
                 <FileItem
                   key={file.id}
diff --git a/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx
index 722ef64a68..82b252e00f 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx
@@ -47,14 +47,14 @@ const FileInAttachmentItem = ({
   return (
     <>
       <div className={cn(
-        'flex items-center pr-3 h-12 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs',
+        'border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs flex h-12 items-center rounded-lg border-[0.5px] pr-3',
         progress === -1 && 'bg-state-destructive-hover border-state-destructive-border',
       )}>
-        <div className='flex items-center justify-center w-12 h-12'>
+        <div className='flex h-12 w-12 items-center justify-center'>
           {
             isImageFile && (
               <FileImageRender
-                className='w-8 h-8'
+                className='h-8 w-8'
                 imageUrl={base64Url || url || ''}
               />
             )
@@ -68,14 +68,14 @@ const FileInAttachmentItem = ({
             )
           }
         </div>
-        <div className='grow w-0 mr-1'>
+        <div className='mr-1 w-0 grow'>
           <div
-            className='flex items-center mb-0.5 system-xs-medium text-text-secondary truncate'
+            className='system-xs-medium text-text-secondary mb-0.5 flex items-center truncate'
             title={file.name}
           >
             <div className='truncate'>{name}</div>
           </div>
-          <div className='flex items-center system-2xs-medium-uppercase text-text-tertiary'>
+          <div className='system-2xs-medium-uppercase text-text-tertiary flex items-center'>
             {
               ext && (
                 <span>{ext.toLowerCase()}</span>
@@ -83,7 +83,7 @@ const FileInAttachmentItem = ({
             }
             {
               ext && (
-                <span className='mx-1 system-2xs-medium'>•</span>
+                <span className='system-2xs-medium mx-1'>•</span>
               )
             }
             {
@@ -93,7 +93,7 @@ const FileInAttachmentItem = ({
             }
           </div>
         </div>
-        <div className='shrink-0 flex items-center'>
+        <div className='flex shrink-0 items-center'>
           {
             progress >= 0 && !fileIsUploaded(file) && (
               <ProgressCircle
@@ -108,21 +108,21 @@ const FileInAttachmentItem = ({
                 className='mr-1'
                 onClick={() => onReUpload?.(id)}
               >
-                <ReplayLine className='w-4 h-4 text-text-tertiary' />
+                <ReplayLine className='text-text-tertiary h-4 w-4' />
               </ActionButton>
             )
           }
           {
             showDeleteAction && (
               <ActionButton onClick={() => onRemove?.(id)}>
-                <RiDeleteBinLine className='w-4 h-4' />
+                <RiDeleteBinLine className='h-4 w-4' />
               </ActionButton>
             )
           }
           {
             canPreview && isImageFile && (
               <ActionButton className='mr-1' onClick={() => setImagePreviewUrl(url || '')}>
-                <RiEyeLine className='w-4 h-4' />
+                <RiEyeLine className='h-4 w-4' />
               </ActionButton>
             )
           }
@@ -132,7 +132,7 @@ const FileInAttachmentItem = ({
                 e.stopPropagation()
                 downloadFile(url || base64Url || '', name)
               }}>
-                <RiDownloadLine className='w-4 h-4' />
+                <RiDownloadLine className='h-4 w-4' />
               </ActionButton>
             )
           }
diff --git a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
index 8d2acc4cd9..ab4e2aaa42 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
@@ -41,12 +41,12 @@ const FileUploaderInAttachment = ({
     {
       value: TransferMethod.local_file,
       label: t('common.fileUploader.uploadFromComputer'),
-      icon: <RiUploadCloud2Line className='w-4 h-4' />,
+      icon: <RiUploadCloud2Line className='h-4 w-4' />,
     },
     {
       value: TransferMethod.remote_url,
       label: t('common.fileUploader.pasteFileLink'),
-      icon: <RiLink className='w-4 h-4' />,
+      icon: <RiLink className='h-4 w-4' />,
     },
   ]
 
@@ -55,7 +55,7 @@ const FileUploaderInAttachment = ({
       <Button
         key={option.value}
         variant='tertiary'
-        className={cn('grow relative', open && 'bg-components-button-tertiary-bg-hover')}
+        className={cn('relative grow', open && 'bg-components-button-tertiary-bg-hover')}
         disabled={!!(fileConfig.number_limits && files.length >= fileConfig.number_limits)}
       >
         {option.icon}
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
index 2cc78b7fb9..f30411cd3a 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
@@ -42,21 +42,21 @@ const FileImageItem = ({
         {
           showDeleteAction && (
             <Button
-              className='hidden group-hover/file-image:flex absolute -right-1.5 -top-1.5 p-0 w-5 h-5 rounded-full z-[11]'
+              className='absolute -right-1.5 -top-1.5 z-[11] hidden h-5 w-5 rounded-full p-0 group-hover/file-image:flex'
               onClick={() => onRemove?.(id)}
             >
-              <RiCloseLine className='w-4 h-4 text-components-button-secondary-text' />
+              <RiCloseLine className='text-components-button-secondary-text h-4 w-4' />
             </Button>
           )
         }
         <FileImageRender
-          className='w-[68px] h-[68px] shadow-md'
+          className='h-[68px] w-[68px] shadow-md'
           imageUrl={base64Url || url || ''}
           showDownloadAction={showDownloadAction}
         />
         {
           progress >= 0 && !fileIsUploaded(file) && (
-            <div className='absolute inset-0 flex items-center justify-center border-[2px] border-effects-image-frame bg-background-overlay-alt z-10'>
+            <div className='border-effects-image-frame bg-background-overlay-alt absolute inset-0 z-10 flex items-center justify-center border-[2px]'>
               <ProgressCircle
                 percentage={progress}
                 size={12}
@@ -69,9 +69,9 @@ const FileImageItem = ({
         }
         {
           progress === -1 && (
-            <div className='absolute inset-0 flex items-center justify-center border-[2px] border-state-destructive-border bg-background-overlay-destructive z-10'>
+            <div className='border-state-destructive-border bg-background-overlay-destructive absolute inset-0 z-10 flex items-center justify-center border-[2px]'>
               <ReplayLine
-                className='w-5 h-5'
+                className='h-5 w-5'
                 onClick={() => onReUpload?.(id)}
               />
             </div>
@@ -79,15 +79,15 @@ const FileImageItem = ({
         }
         {
           showDownloadAction && (
-            <div className='hidden group-hover/file-image:block absolute inset-0.5 bg-background-overlay-alt bg-opacity-[0.3] z-10'>
+            <div className='bg-background-overlay-alt absolute inset-0.5 z-10 hidden bg-opacity-[0.3] group-hover/file-image:block'>
               <div
-                className='absolute bottom-0.5 right-0.5  flex items-center justify-center w-6 h-6 rounded-lg bg-components-actionbar-bg shadow-md'
+                className='bg-components-actionbar-bg absolute bottom-0.5  right-0.5 flex h-6 w-6 items-center justify-center rounded-lg shadow-md'
                 onClick={(e) => {
                   e.stopPropagation()
                   downloadFile(url || base64Url || '', name)
                 }}
               >
-                <RiDownloadLine className='w-4 h-4 text-text-tertiary' />
+                <RiDownloadLine className='text-text-tertiary h-4 w-4' />
               </div>
             </div>
           )
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
index ddbe745141..e22072abd3 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
@@ -50,31 +50,31 @@ const FileItem = ({
     <>
       <div
         className={cn(
-          'group/file-item relative p-2 w-[144px] h-[68px] rounded-lg border-[0.5px] border-components-panel-border bg-components-card-bg shadow-xs',
+          'group/file-item border-components-panel-border bg-components-card-bg shadow-xs relative h-[68px] w-[144px] rounded-lg border-[0.5px] p-2',
           !uploadError && 'hover:bg-components-card-bg-alt',
-          uploadError && 'border border-state-destructive-border bg-state-destructive-hover',
-          uploadError && 'hover:border-[0.5px] hover:border-state-destructive-border bg-state-destructive-hover-alt',
+          uploadError && 'border-state-destructive-border bg-state-destructive-hover border',
+          uploadError && 'hover:border-state-destructive-border bg-state-destructive-hover-alt hover:border-[0.5px]',
         )}
       >
         {
           showDeleteAction && (
             <Button
-              className='hidden group-hover/file-item:flex absolute -right-1.5 -top-1.5 p-0 w-5 h-5 rounded-full z-[11]'
+              className='absolute -right-1.5 -top-1.5 z-[11] hidden h-5 w-5 rounded-full p-0 group-hover/file-item:flex'
               onClick={() => onRemove?.(id)}
             >
-              <RiCloseLine className='w-4 h-4 text-components-button-secondary-text' />
+              <RiCloseLine className='text-components-button-secondary-text h-4 w-4' />
             </Button>
           )
         }
         <div
-          className='mb-1 h-8 line-clamp-2 system-xs-medium text-text-tertiary break-all cursor-pointer'
+          className='system-xs-medium text-text-tertiary mb-1 line-clamp-2 h-8 cursor-pointer break-all'
           title={name}
           onClick={() => canPreview && setPreviewUrl(tmp_preview_url || '')}
         >
           {name}
         </div>
         <div className='relative flex items-center justify-between'>
-          <div className='flex items-center system-2xs-medium-uppercase text-text-tertiary'>
+          <div className='system-2xs-medium-uppercase text-text-tertiary flex items-center'>
             <FileTypeIcon
               size='sm'
               type={getFileAppearanceType(name, type)}
@@ -96,13 +96,13 @@ const FileItem = ({
             showDownloadAction && tmp_preview_url && (
               <ActionButton
                 size='m'
-                className='hidden group-hover/file-item:flex absolute -right-1 -top-1'
+                className='absolute -right-1 -top-1 hidden group-hover/file-item:flex'
                 onClick={(e) => {
                   e.stopPropagation()
                   downloadFile(tmp_preview_url || '', name)
                 }}
               >
-                <RiDownloadLine className='w-3.5 h-3.5 text-text-tertiary' />
+                <RiDownloadLine className='text-text-tertiary h-3.5 w-3.5' />
               </ActionButton>
             )
           }
@@ -118,7 +118,7 @@ const FileItem = ({
           {
             uploadError && (
               <ReplayLine
-                className='w-4 h-4 text-text-tertiary'
+                className='text-text-tertiary h-4 w-4'
                 onClick={() => onReUpload?.(id)}
               />
             )
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
index e20a119aac..7e6e190ddb 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
@@ -23,7 +23,7 @@ const FileUploaderInChatInput = ({
         size='l'
         className={cn(open && 'bg-state-base-hover')}
       >
-        <RiAttachmentLine className='w-5 h-5' />
+        <RiAttachmentLine className='h-5 w-5' />
       </ActionButton>
     )
   }, [])
diff --git a/web/app/components/base/file-uploader/pdf-preview.tsx b/web/app/components/base/file-uploader/pdf-preview.tsx
index 04947be0a4..bf4ba5efd8 100644
--- a/web/app/components/base/file-uploader/pdf-preview.tsx
+++ b/web/app/components/base/file-uploader/pdf-preview.tsx
@@ -47,18 +47,18 @@ const PdfPreview: FC<PdfPreviewProps> = ({
 
   return createPortal(
     <div
-      className={`fixed inset-0 flex items-center justify-center bg-black/80 z-[1000] ${!isMobile && 'p-8'}`}
+      className={`fixed inset-0 z-[1000] flex items-center justify-center bg-black/80 ${!isMobile && 'p-8'}`}
       onClick={e => e.stopPropagation()}
       tabIndex={-1}
     >
       <div
-        className='h-[95vh] w-[100vw] max-w-full max-h-full overflow-hidden'
+        className='h-[95vh] max-h-full w-[100vw] max-w-full overflow-hidden'
         style={{ transform: `scale(${scale})`, transformOrigin: 'center', scrollbarWidth: 'none', msOverflowStyle: 'none' }}
       >
         <PdfLoader
           workerSrc='/pdf.worker.min.mjs'
           url={url}
-          beforeLoad={<div className='flex justify-center items-center h-64'><Loading type='app' /></div>}
+          beforeLoad={<div className='flex h-64 items-center justify-center'><Loading type='app' /></div>}
         >
           {(pdfDocument) => {
             return (
@@ -76,22 +76,22 @@ const PdfPreview: FC<PdfPreviewProps> = ({
         </PdfLoader>
       </div>
       <Tooltip popupContent={t('common.operation.zoomOut')}>
-        <div className='absolute top-6 right-24 flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer'
+        <div className='absolute right-24 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg'
           onClick={zoomOut}>
-          <RiZoomOutLine className='w-4 h-4 text-gray-500'/>
+          <RiZoomOutLine className='h-4 w-4 text-gray-500'/>
         </div>
       </Tooltip>
       <Tooltip popupContent={t('common.operation.zoomIn')}>
-        <div className='absolute top-6 right-16 flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer'
+        <div className='absolute right-16 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg'
           onClick={zoomIn}>
-          <RiZoomInLine className='w-4 h-4 text-gray-500'/>
+          <RiZoomInLine className='h-4 w-4 text-gray-500'/>
         </div>
       </Tooltip>
       <Tooltip popupContent={t('common.operation.cancel')}>
         <div
-          className='absolute top-6 right-6 flex items-center justify-center w-8 h-8 bg-white/8 rounded-lg backdrop-blur-[2px] cursor-pointer'
+          className='bg-white/8 absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg backdrop-blur-[2px]'
           onClick={onCancel}>
-          <RiCloseLine className='w-4 h-4 text-gray-500'/>
+          <RiCloseLine className='h-4 w-4 text-gray-500'/>
         </div>
       </Tooltip>
     </div>,
diff --git a/web/app/components/base/file-uploader/video-preview.tsx b/web/app/components/base/file-uploader/video-preview.tsx
index 0378f37ddf..bbe714693e 100644
--- a/web/app/components/base/file-uploader/video-preview.tsx
+++ b/web/app/components/base/file-uploader/video-preview.tsx
@@ -18,7 +18,7 @@ const VideoPreview: FC<VideoPreviewProps> = ({
 
   return createPortal(
     <div
-      className='fixed inset-0 p-8 flex items-center justify-center bg-black/80 z-[1000]'
+      className='fixed inset-0 z-[1000] flex items-center justify-center bg-black/80 p-8'
       onClick={e => e.stopPropagation()}
       tabIndex={-1}
     >
@@ -27,15 +27,15 @@ const VideoPreview: FC<VideoPreviewProps> = ({
           <source
             type="video/mp4"
             src={url}
-            className='max-w-full max-h-full'
+            className='max-h-full max-w-full'
           />
         </video>
       </div>
       <div
-        className='absolute top-6 right-6 flex items-center justify-center w-8 h-8 bg-white/[0.08] rounded-lg backdrop-blur-[2px] cursor-pointer'
+        className='absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]'
         onClick={onCancel}
       >
-        <RiCloseLine className='w-4 h-4 text-gray-500'/>
+        <RiCloseLine className='h-4 w-4 text-gray-500'/>
       </div>
     </div>
     , document.body,
diff --git a/web/app/components/base/fullscreen-modal/index.tsx b/web/app/components/base/fullscreen-modal/index.tsx
index 9d99e280ec..e576b31f84 100644
--- a/web/app/components/base/fullscreen-modal/index.tsx
+++ b/web/app/components/base/fullscreen-modal/index.tsx
@@ -43,7 +43,7 @@ export default function FullScreenModal({
             e.stopPropagation()
           }}
         >
-          <div className="w-full h-full bg-background-default-subtle rounded-2xl border border-effects-highlight relative">
+          <div className="bg-background-default-subtle border-effects-highlight relative h-full w-full rounded-2xl border">
             <TransitionChild>
               <DialogPanel className={classNames(
                 'h-full transition',
@@ -55,13 +55,13 @@ export default function FullScreenModal({
               )}>
                 {closable
                   && <div
-                    className='absolute z-50 top-3 right-3 w-9 h-9 flex items-center justify-center rounded-[10px]
-                  bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover cursor-pointer'
+                    className='bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover absolute right-3 top-3 z-50 flex h-9 w-9 cursor-pointer
+                  items-center justify-center rounded-[10px]'
                     onClick={(e) => {
                       e.stopPropagation()
                       onClose()
                     }}>
-                    <RiCloseLargeLine className='w-3.5 h-3.5 text-components-button-tertiary-text' />
+                    <RiCloseLargeLine className='text-components-button-tertiary-text h-3.5 w-3.5' />
                   </div>}
                 {children}
               </DialogPanel>
diff --git a/web/app/components/base/grid-mask/index.tsx b/web/app/components/base/grid-mask/index.tsx
index 0bf6625a83..6493de3f29 100644
--- a/web/app/components/base/grid-mask/index.tsx
+++ b/web/app/components/base/grid-mask/index.tsx
@@ -82,9 +82,9 @@ const GridMask: FC<GridMaskProps> = ({
   }, [])
 
   return (
-    <div className={`relative bg-components-panel-bg ${wrapperClassName}`}>
-      <canvas ref={canvasRef} className={`absolute inset-0 w-full h-full ${canvasClassName}`} />
-      <div className={`absolute w-full h-full z-[1] bg-gradient-to-b from-background-body to-background-gradient-mask-transparent rounded-lg ${gradientClassName}`} />
+    <div className={`bg-components-panel-bg relative ${wrapperClassName}`}>
+      <canvas ref={canvasRef} className={`absolute inset-0 h-full w-full ${canvasClassName}`} />
+      <div className={`from-background-body to-background-gradient-mask-transparent absolute z-[1] h-full w-full rounded-lg bg-gradient-to-b ${gradientClassName}`} />
       <div className='relative z-[2]'>{children}</div>
     </div>
   )
diff --git a/web/app/components/base/image-gallery/index.tsx b/web/app/components/base/image-gallery/index.tsx
index 58813900a7..5928158d27 100644
--- a/web/app/components/base/image-gallery/index.tsx
+++ b/web/app/components/base/image-gallery/index.tsx
@@ -75,7 +75,7 @@ export const ImageGalleryTest = () => {
   return (
     <div className='space-y-2'>
       {imgGallerySrcs.map((_, index) => (
-        <div key={index} className='p-4 pb-2 rounded-lg bg-[#D1E9FF80]'>
+        <div key={index} className='rounded-lg bg-[#D1E9FF80] p-4 pb-2'>
           <ImageGallery srcs={imgGallerySrcs.slice(0, index + 1)} />
         </div>
       ))}
diff --git a/web/app/components/base/image-uploader/audio-preview.tsx b/web/app/components/base/image-uploader/audio-preview.tsx
index 24ede8aa43..e468c8cb93 100644
--- a/web/app/components/base/image-uploader/audio-preview.tsx
+++ b/web/app/components/base/image-uploader/audio-preview.tsx
@@ -13,21 +13,21 @@ const AudioPreview: FC<AudioPreviewProps> = ({
   onCancel,
 }) => {
   return createPortal(
-    <div className='fixed inset-0 p-8 flex items-center justify-center bg-black/80 z-[1000]' onClick={e => e.stopPropagation()}>
+    <div className='fixed inset-0 z-[1000] flex items-center justify-center bg-black/80 p-8' onClick={e => e.stopPropagation()}>
       <div>
         <audio controls title={title} autoPlay={false} preload="metadata">
           <source
             type="audio/mpeg"
             src={url}
-            className='max-w-full max-h-full'
+            className='max-h-full max-w-full'
           />
         </audio>
       </div>
       <div
-        className='absolute top-6 right-6 flex items-center justify-center w-8 h-8 bg-white/[0.08] rounded-lg backdrop-blur-[2px] cursor-pointer'
+        className='absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]'
         onClick={onCancel}
       >
-        <RiCloseLine className='w-4 h-4 text-gray-500'/>
+        <RiCloseLine className='h-4 w-4 text-gray-500'/>
       </div>
     </div>
     ,
diff --git a/web/app/components/base/image-uploader/chat-image-uploader.tsx b/web/app/components/base/image-uploader/chat-image-uploader.tsx
index 742965be1a..401af2ba8c 100644
--- a/web/app/components/base/image-uploader/chat-image-uploader.tsx
+++ b/web/app/components/base/image-uploader/chat-image-uploader.tsx
@@ -29,11 +29,11 @@ const UploadOnlyFromLocal: FC<UploadOnlyFromLocalProps> = ({
       {hovering => (
         <div
           className={`
-            relative flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer
+            relative flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg
             ${hovering && 'bg-gray-100'}
           `}
         >
-          <ImagePlus className="w-4 h-4 text-gray-500" />
+          <ImagePlus className="h-4 w-4 text-gray-500" />
         </div>
       )}
     </Uploader>
@@ -82,20 +82,20 @@ const UploaderButton: FC<UploaderButtonProps> = ({
         <button
           type="button"
           disabled={disabled}
-          className="relative flex items-center justify-center w-8 h-8 enabled:hover:bg-gray-100 rounded-lg disabled:cursor-not-allowed"
+          className="relative flex h-8 w-8 items-center justify-center rounded-lg enabled:hover:bg-gray-100 disabled:cursor-not-allowed"
         >
-          <ImagePlus className="w-4 h-4 text-gray-500" />
+          <ImagePlus className="h-4 w-4 text-gray-500" />
         </button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className="z-50">
-        <div className="p-2 w-[260px] bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg">
+        <div className="w-[260px] rounded-lg border-[0.5px] border-gray-200 bg-white p-2 shadow-lg">
           <ImageLinkInput onUpload={handleUpload} disabled={disabled} />
           {hasUploadFromLocal && (
             <>
-              <div className="flex items-center mt-2 px-2 text-xs font-medium text-gray-400">
-                <div className="mr-3 w-[93px] h-[1px] bg-gradient-to-l from-[#F3F4F6]" />
+              <div className="mt-2 flex items-center px-2 text-xs font-medium text-gray-400">
+                <div className="mr-3 h-[1px] w-[93px] bg-gradient-to-l from-[#F3F4F6]" />
                 OR
-                <div className="ml-3 w-[93px] h-[1px] bg-gradient-to-r from-[#F3F4F6]" />
+                <div className="ml-3 h-[1px] w-[93px] bg-gradient-to-r from-[#F3F4F6]" />
               </div>
               <Uploader
                 onUpload={handleUpload}
@@ -105,11 +105,11 @@ const UploaderButton: FC<UploaderButtonProps> = ({
                 {hovering => (
                   <div
                     className={cn(
-                      'flex items-center justify-center h-8 text-[13px] font-medium text-[#155EEF] rounded-lg cursor-pointer',
+                      'flex h-8 cursor-pointer items-center justify-center rounded-lg text-[13px] font-medium text-[#155EEF]',
                       hovering && 'bg-primary-50',
                     )}
                   >
-                    <Upload03 className="mr-1 w-4 h-4" />
+                    <Upload03 className="mr-1 h-4 w-4" />
                     {t('common.imageUploader.uploadFromComputer')}
                   </div>
                 )}
diff --git a/web/app/components/base/image-uploader/image-link-input.tsx b/web/app/components/base/image-uploader/image-link-input.tsx
index f15d4f52fe..517293ef7c 100644
--- a/web/app/components/base/image-uploader/image-link-input.tsx
+++ b/web/app/components/base/image-uploader/image-link-input.tsx
@@ -33,10 +33,10 @@ const ImageLinkInput: FC<ImageLinkInputProps> = ({
   }
 
   return (
-    <div className='flex items-center pl-1.5 pr-1 h-8 border border-components-panel-border bg-components-panel-bg shadow-xs rounded-lg'>
+    <div className='border-components-panel-border bg-components-panel-bg shadow-xs flex h-8 items-center rounded-lg border pl-1.5 pr-1'>
       <input
         type="text"
-        className='grow mr-0.5 px-1 h-[18px] text-[13px] text-text-primary bg-transparent outline-none appearance-none'
+        className='text-text-primary mr-0.5 h-[18px] grow appearance-none bg-transparent px-1 text-[13px] outline-none'
         value={imageLink}
         onChange={e => setImageLink(e.target.value)}
         placeholder={t('common.imageUploader.pasteImageLinkInputPlaceholder') || ''}
diff --git a/web/app/components/base/image-uploader/image-list.tsx b/web/app/components/base/image-uploader/image-list.tsx
index 640f986350..427fcc7c25 100644
--- a/web/app/components/base/image-uploader/image-list.tsx
+++ b/web/app/components/base/image-uploader/image-list.tsx
@@ -51,23 +51,23 @@ const ImageList: FC<ImageListProps> = ({
       {list.map(item => (
         <div
           key={item._id}
-          className="group relative mr-1 border-[0.5px] border-black/5 rounded-lg"
+          className="group relative mr-1 rounded-lg border-[0.5px] border-black/5"
         >
           {item.type === TransferMethod.local_file && item.progress !== 100 && (
             <>
               <div
-                className="absolute inset-0 flex items-center justify-center z-[1] bg-black/30"
+                className="absolute inset-0 z-[1] flex items-center justify-center bg-black/30"
                 style={{ left: item.progress > -1 ? `${item.progress}%` : 0 }}
               >
                 {item.progress === -1 && (
                   <RefreshCcw01
-                    className="w-5 h-5 text-white"
+                    className="h-5 w-5 text-white"
                     onClick={() => onReUpload && onReUpload(item._id)}
                   />
                 )}
               </div>
               {item.progress > -1 && (
-                <span className="absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] text-sm text-white mix-blend-lighten z-[1]">
+                <span className="absolute left-[50%] top-[50%] z-[1] translate-x-[-50%] translate-y-[-50%] text-sm text-white mix-blend-lighten">
                   {item.progress}%
                 </span>
               )}
@@ -76,27 +76,27 @@ const ImageList: FC<ImageListProps> = ({
           {item.type === TransferMethod.remote_url && item.progress !== 100 && (
             <div
               className={`
-                  absolute inset-0 flex items-center justify-center rounded-lg z-[1] border
+                  absolute inset-0 z-[1] flex items-center justify-center rounded-lg border
                   ${item.progress === -1
-              ? 'bg-[#FEF0C7] border-[#DC6803]'
-              : 'bg-black/[0.16] border-transparent'
+              ? 'border-[#DC6803] bg-[#FEF0C7]'
+              : 'border-transparent bg-black/[0.16]'
             }
                 `}
             >
               {item.progress > -1 && (
-                <RiLoader2Line className="animate-spin w-5 h-5 text-white" />
+                <RiLoader2Line className="h-5 w-5 animate-spin text-white" />
               )}
               {item.progress === -1 && (
                 <Tooltip
                   popupContent={t('common.imageUploader.pasteImageLinkInvalid')}
                 >
-                  <AlertTriangle className="w-4 h-4 text-[#DC6803]" />
+                  <AlertTriangle className="h-4 w-4 text-[#DC6803]" />
                 </Tooltip>
               )}
             </div>
           )}
           <img
-            className="w-16 h-16 rounded-lg object-cover cursor-pointer border-[0.5px] border-black/5"
+            className="h-16 w-16 cursor-pointer rounded-lg border-[0.5px] border-black/5 object-cover"
             alt={item.file?.name}
             onLoad={() => handleImageLinkLoadSuccess(item)}
             onError={() => handleImageLinkLoadError(item)}
@@ -118,13 +118,13 @@ const ImageList: FC<ImageListProps> = ({
             <button
               type="button"
               className={cn(
-                'absolute z-10 -top-[9px] -right-[9px] items-center justify-center w-[18px] h-[18px]',
+                'absolute -right-[9px] -top-[9px] z-10 h-[18px] w-[18px] items-center justify-center',
                 'hover:bg-state-base-hover rounded-2xl shadow-lg',
                 item.progress === -1 ? 'flex' : 'hidden group-hover:flex',
               )}
               onClick={() => onRemove && onRemove(item._id)}
             >
-              <RiCloseLine className="w-3 h-3 text-text-tertiary" />
+              <RiCloseLine className="text-text-tertiary h-3 w-3" />
             </button>
           )}
         </div>
diff --git a/web/app/components/base/image-uploader/image-preview.tsx b/web/app/components/base/image-uploader/image-preview.tsx
index 1a11c91275..56a7cb4c8a 100644
--- a/web/app/components/base/image-uploader/image-preview.tsx
+++ b/web/app/components/base/image-uploader/image-preview.tsx
@@ -200,7 +200,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
   useHotkeys('right', onNext || (() => {}))
 
   return createPortal(
-    <div className='fixed inset-0 p-8 flex items-center justify-center bg-black/80 z-[1000] image-preview-container'
+    <div className='image-preview-container fixed inset-0 z-[1000] flex items-center justify-center bg-black/80 p-8'
       onClick={e => e.stopPropagation()}
       onWheel={handleWheel}
       onMouseDown={handleMouseDown}
@@ -213,49 +213,49 @@ const ImagePreview: FC<ImagePreviewProps> = ({
         ref={imgRef}
         alt={title}
         src={isBase64(url) ? `data:image/png;base64,${url}` : url}
-        className='max-w-full max-h-full'
+        className='max-h-full max-w-full'
         style={{
           transform: `scale(${scale}) translate(${position.x}px, ${position.y}px)`,
           transition: isDragging ? 'none' : 'transform 0.2s ease-in-out',
         }}
       />
       <Tooltip popupContent={t('common.operation.copyImage')}>
-        <div className='absolute top-6 right-48 flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer'
+        <div className='absolute right-48 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg'
           onClick={imageCopy}>
           {isCopied
-            ? <RiFileCopyLine className='w-4 h-4 text-green-500'/>
-            : <RiFileCopyLine className='w-4 h-4 text-gray-500'/>}
+            ? <RiFileCopyLine className='h-4 w-4 text-green-500'/>
+            : <RiFileCopyLine className='h-4 w-4 text-gray-500'/>}
         </div>
       </Tooltip>
       <Tooltip popupContent={t('common.operation.zoomOut')}>
-        <div className='absolute top-6 right-40 flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer'
+        <div className='absolute right-40 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg'
           onClick={zoomOut}>
-          <RiZoomOutLine className='w-4 h-4 text-gray-500'/>
+          <RiZoomOutLine className='h-4 w-4 text-gray-500'/>
         </div>
       </Tooltip>
       <Tooltip popupContent={t('common.operation.zoomIn')}>
-        <div className='absolute top-6 right-32 flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer'
+        <div className='absolute right-32 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg'
           onClick={zoomIn}>
-          <RiZoomInLine className='w-4 h-4 text-gray-500'/>
+          <RiZoomInLine className='h-4 w-4 text-gray-500'/>
         </div>
       </Tooltip>
       <Tooltip popupContent={t('common.operation.download')}>
-        <div className='absolute top-6 right-24 flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer'
+        <div className='absolute right-24 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg'
           onClick={downloadImage}>
-          <RiDownloadCloud2Line className='w-4 h-4 text-gray-500'/>
+          <RiDownloadCloud2Line className='h-4 w-4 text-gray-500'/>
         </div>
       </Tooltip>
       <Tooltip popupContent={t('common.operation.openInNewTab')}>
-        <div className='absolute top-6 right-16 flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer'
+        <div className='absolute right-16 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg'
           onClick={openInNewTab}>
-          <RiAddBoxLine className='w-4 h-4 text-gray-500'/>
+          <RiAddBoxLine className='h-4 w-4 text-gray-500'/>
         </div>
       </Tooltip>
       <Tooltip popupContent={t('common.operation.cancel')}>
         <div
-          className='absolute top-6 right-6 flex items-center justify-center w-8 h-8 bg-white/8 rounded-lg backdrop-blur-[2px] cursor-pointer'
+          className='bg-white/8 absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg backdrop-blur-[2px]'
           onClick={onCancel}>
-          <RiCloseLine className='w-4 h-4 text-gray-500'/>
+          <RiCloseLine className='h-4 w-4 text-gray-500'/>
         </div>
       </Tooltip>
     </div>,
diff --git a/web/app/components/base/image-uploader/text-generation-image-uploader.tsx b/web/app/components/base/image-uploader/text-generation-image-uploader.tsx
index 0a94b6ec8d..7c859fe96c 100644
--- a/web/app/components/base/image-uploader/text-generation-image-uploader.tsx
+++ b/web/app/components/base/image-uploader/text-generation-image-uploader.tsx
@@ -50,15 +50,15 @@ const PasteImageLinkButton: FC<PasteImageLinkButtonProps> = ({
     >
       <PortalToFollowElemTrigger onClick={handleToggle}>
         <div className={`
-          relative flex items-center justify-center px-3 h-8 bg-components-option-card-option-bg hover:bg-components-option-card-option-bg-hover text-xs text-text-tertiary rounded-lg
+          bg-components-option-card-option-bg hover:bg-components-option-card-option-bg-hover text-text-tertiary relative flex h-8 items-center justify-center rounded-lg px-3 text-xs
           ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
         `}>
-          <Link03 className='mr-2 w-4 h-4' />
+          <Link03 className='mr-2 h-4 w-4' />
           {t('common.imageUploader.pasteImageLink')}
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-10'>
-        <div className='p-2 w-[320px] bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-lg shadow-lg'>
+        <div className='bg-components-panel-bg border-components-panel-border w-[320px] rounded-lg border-[0.5px] p-2 shadow-lg'>
           <ImageLinkInput onUpload={handleUpload} />
         </div>
       </PortalToFollowElemContent>
@@ -98,11 +98,11 @@ const TextGenerationImageUploader: FC<TextGenerationImageUploaderProps> = ({
       {
         hovering => (
           <div className={`
-            flex items-center justify-center px-3 h-8 bg-components-option-card-option-bg 
-            text-xs text-text-tertiary rounded-lg cursor-pointer
+            bg-components-option-card-option-bg text-text-tertiary flex h-8 cursor-pointer items-center 
+            justify-center rounded-lg px-3 text-xs
             ${hovering && 'bg-components-option-card-option-bg-hover'}
           `}>
-            <ImagePlus className='mr-2 w-4 h-4' />
+            <ImagePlus className='mr-2 h-4 w-4' />
             {t('common.imageUploader.uploadFromComputer')}
           </div>
         )
diff --git a/web/app/components/base/image-uploader/uploader.tsx b/web/app/components/base/image-uploader/uploader.tsx
index f438e650b8..2f922ec511 100644
--- a/web/app/components/base/image-uploader/uploader.tsx
+++ b/web/app/components/base/image-uploader/uploader.tsx
@@ -44,7 +44,7 @@ const Uploader: FC<UploaderProps> = ({
     >
       {children(hovering)}
       <input
-        className='absolute block inset-0 opacity-0 text-[0] w-full disabled:cursor-not-allowed cursor-pointer'
+        className='absolute inset-0 block w-full cursor-pointer text-[0] opacity-0 disabled:cursor-not-allowed'
         onClick={e => ((e.target as HTMLInputElement).value = '')}
         type='file'
         accept={ALLOW_FILE_EXTENSIONS.map(ext => `.${ext}`).join(',')}
diff --git a/web/app/components/base/image-uploader/video-preview.tsx b/web/app/components/base/image-uploader/video-preview.tsx
index 15291412eb..f50d9a5c7d 100644
--- a/web/app/components/base/image-uploader/video-preview.tsx
+++ b/web/app/components/base/image-uploader/video-preview.tsx
@@ -13,21 +13,21 @@ const VideoPreview: FC<VideoPreviewProps> = ({
   onCancel,
 }) => {
   return createPortal(
-    <div className='fixed inset-0 p-8 flex items-center justify-center bg-black/80 z-[1000]' onClick={e => e.stopPropagation()}>
+    <div className='fixed inset-0 z-[1000] flex items-center justify-center bg-black/80 p-8' onClick={e => e.stopPropagation()}>
       <div>
         <video controls title={title} autoPlay={false} preload="metadata">
           <source
             type="video/mp4"
             src={url}
-            className='max-w-full max-h-full'
+            className='max-h-full max-w-full'
           />
         </video>
       </div>
       <div
-        className='absolute top-6 right-6 flex items-center justify-center w-8 h-8 bg-white/[0.08] rounded-lg backdrop-blur-[2px] cursor-pointer'
+        className='absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]'
         onClick={onCancel}
       >
-        <RiCloseLine className='w-4 h-4 text-gray-500'/>
+        <RiCloseLine className='h-4 w-4 text-gray-500'/>
       </div>
     </div>
     ,
diff --git a/web/app/components/base/input-number/index.tsx b/web/app/components/base/input-number/index.tsx
index 316d863b48..c0313a41d8 100644
--- a/web/app/components/base/input-number/index.tsx
+++ b/web/app/components/base/input-number/index.tsx
@@ -68,7 +68,7 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
       }}
       unit={unit}
     />
-    <div className='flex flex-col bg-components-input-bg-normal rounded-r-md border-l border-divider-subtle text-text-tertiary focus:shadow-xs'>
+    <div className='bg-components-input-bg-normal border-divider-subtle text-text-tertiary focus:shadow-xs flex flex-col rounded-r-md border-l'>
       <button onClick={inc} className={classNames(
         size === 'sm' ? 'pt-1' : 'pt-1.5',
         'px-1.5 hover:bg-components-input-bg-hover',
diff --git a/web/app/components/base/input/index.tsx b/web/app/components/base/input/index.tsx
index 044fc27858..44a7b66aae 100644
--- a/web/app/components/base/input/index.tsx
+++ b/web/app/components/base/input/index.tsx
@@ -50,11 +50,11 @@ const Input = ({
   const { t } = useTranslation()
   return (
     <div className={cn('relative w-full', wrapperClassName)}>
-      {showLeftIcon && <RiSearchLine className={cn('absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-components-input-text-placeholder')} />}
+      {showLeftIcon && <RiSearchLine className={cn('text-components-input-text-placeholder absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2')} />}
       <input
         style={styleCss}
         className={cn(
-          'w-full py-[7px] bg-components-input-bg-normal border border-transparent text-components-input-text-filled hover:bg-components-input-bg-hover hover:border-components-input-border-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:text-components-input-text-placeholder appearance-none outline-none caret-primary-600',
+          'bg-components-input-bg-normal text-components-input-text-filled hover:bg-components-input-bg-hover hover:border-components-input-border-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:text-components-input-text-placeholder caret-primary-600 w-full appearance-none border border-transparent py-[7px] outline-none',
           inputVariants({ size }),
           showLeftIcon && 'pl-[26px]',
           showLeftIcon && size === 'large' && 'pl-7',
@@ -62,7 +62,7 @@ const Input = ({
           showClearIcon && value && size === 'large' && 'pr-7',
           destructive && 'pr-[26px]',
           destructive && size === 'large' && 'pr-7',
-          disabled && 'bg-components-input-bg-disabled border-transparent text-components-input-text-filled-disabled cursor-not-allowed hover:bg-components-input-bg-disabled hover:border-transparent',
+          disabled && 'bg-components-input-bg-disabled text-components-input-text-filled-disabled hover:bg-components-input-bg-disabled cursor-not-allowed border-transparent hover:border-transparent',
           destructive && 'bg-components-input-bg-destructive border-components-input-border-destructive text-components-input-text-filled hover:bg-components-input-bg-destructive hover:border-components-input-border-destructive focus:bg-components-input-bg-destructive focus:border-components-input-border-destructive',
           className,
         )}
@@ -75,16 +75,16 @@ const Input = ({
         {...props}
       />
       {showClearIcon && value && !disabled && !destructive && (
-        <div className={cn('absolute right-2 top-1/2 -translate-y-1/2 group p-[1px] cursor-pointer')} onClick={onClear}>
-          <RiCloseCircleFill className='w-3.5 h-3.5 text-text-quaternary cursor-pointer group-hover:text-text-tertiary' />
+        <div className={cn('group absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer p-[1px]')} onClick={onClear}>
+          <RiCloseCircleFill className='text-text-quaternary group-hover:text-text-tertiary h-3.5 w-3.5 cursor-pointer' />
         </div>
       )}
       {destructive && (
-        <RiErrorWarningLine className='absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-text-destructive-secondary' />
+        <RiErrorWarningLine className='text-text-destructive-secondary absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2' />
       )}
       {
         unit && (
-          <div className='absolute right-2 top-1/2 -translate-y-1/2 system-sm-regular text-text-tertiary'>
+          <div className='system-sm-regular text-text-tertiary absolute right-2 top-1/2 -translate-y-1/2'>
             {unit}
           </div>
         )
diff --git a/web/app/components/base/install-button/index.tsx b/web/app/components/base/install-button/index.tsx
index 848183780c..294186746b 100644
--- a/web/app/components/base/install-button/index.tsx
+++ b/web/app/components/base/install-button/index.tsx
@@ -10,15 +10,15 @@ type InstallButtonProps = {
 const InstallButton = ({ loading, onInstall, t }: InstallButtonProps) => {
   return (
     <Button size='small' className='z-[100]' onClick={onInstall}>
-      <div className={`flex px-[3px] justify-center items-center gap-1 
+      <div className={`flex items-center justify-center gap-1 px-[3px] 
         ${loading ? 'text-components-button-secondary-text-disabled' : 'text-components-button-secondary-text'} 
         system-xs-medium`}
       >
         {loading ? t('workflow.nodes.agent.pluginInstaller.installing') : t('workflow.nodes.agent.pluginInstaller.install')}
       </div>
       {loading
-        ? <RiLoader2Line className='w-3.5 h-3.5 text-text-quaternary animate-spin' />
-        : <RiInstallLine className='w-3.5 h-3.5 text-text-secondary' />
+        ? <RiLoader2Line className='text-text-quaternary h-3.5 w-3.5 animate-spin' />
+        : <RiInstallLine className='text-text-secondary h-3.5 w-3.5' />
       }
     </Button>
   )
diff --git a/web/app/components/base/linked-apps-panel/index.tsx b/web/app/components/base/linked-apps-panel/index.tsx
index 4320cb0fc6..589e8f3559 100644
--- a/web/app/components/base/linked-apps-panel/index.tsx
+++ b/web/app/components/base/linked-apps-panel/index.tsx
@@ -27,15 +27,15 @@ const LikedItem = ({
   isMobile,
 }: ILikedItemProps) => {
   return (
-    <Link className={cn('group/link-item flex items-center justify-between w-full h-8 rounded-lg hover:bg-state-base-hover cursor-pointer px-2', isMobile && 'justify-center')} href={`/app/${detail?.id}/overview`}>
+    <Link className={cn('group/link-item hover:bg-state-base-hover flex h-8 w-full cursor-pointer items-center justify-between rounded-lg px-2', isMobile && 'justify-center')} href={`/app/${detail?.id}/overview`}>
       <div className='flex items-center'>
-        <div className={cn('relative w-6 h-6 rounded-md')}>
+        <div className={cn('relative h-6 w-6 rounded-md')}>
           <AppIcon size='tiny' iconType={detail.icon_type} icon={detail.icon} background={detail.icon_background} imageUrl={detail.icon_url} />
         </div>
-        {!isMobile && <div className={cn(' ml-2 truncate system-sm-medium text-text-primary')}>{detail?.name || '--'}</div>}
+        {!isMobile && <div className={cn(' system-sm-medium text-text-primary ml-2 truncate')}>{detail?.name || '--'}</div>}
       </div>
-      <div className='group-hover/link-item:hidden shrink-0 system-2xs-medium-uppercase text-text-tertiary'>{appTypeMap[detail.mode]}</div>
-      <RiArrowRightUpLine className='hidden group-hover/link-item:block w-4 h-4 text-text-tertiary' />
+      <div className='system-2xs-medium-uppercase text-text-tertiary shrink-0 group-hover/link-item:hidden'>{appTypeMap[detail.mode]}</div>
+      <RiArrowRightUpLine className='text-text-tertiary hidden h-4 w-4 group-hover/link-item:block' />
     </Link>
   )
 }
@@ -51,8 +51,8 @@ const LinkedAppsPanel: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   return (
-    <div className='p-1 w-[320px] bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg rounded-xl  backdrop-blur-[5px]'>
-      <div className='mt-1 mb-0.5 pl-2 system-xs-medium-uppercase text-text-tertiary'>{relatedApps.length || '--'} {t('common.datasetMenus.relatedApp')}</div>
+    <div className='bg-components-panel-bg-blur border-components-panel-border w-[320px] rounded-xl border-[0.5px] p-1 shadow-lg  backdrop-blur-[5px]'>
+      <div className='system-xs-medium-uppercase text-text-tertiary mb-0.5 mt-1 pl-2'>{relatedApps.length || '--'} {t('common.datasetMenus.relatedApp')}</div>
       {relatedApps.map((item, index) => (
         <LikedItem key={index} detail={item} isMobile={isMobile} />
       ))}
diff --git a/web/app/components/base/list-empty/index.tsx b/web/app/components/base/list-empty/index.tsx
index c295ffbaec..308e650a68 100644
--- a/web/app/components/base/list-empty/index.tsx
+++ b/web/app/components/base/list-empty/index.tsx
@@ -16,15 +16,15 @@ const ListEmpty = ({
   icon,
 }: ListEmptyProps) => {
   return (
-    <div className='flex w-[320px] p-4 flex-col items-start gap-2 rounded-[10px] bg-workflow-process-bg'>
-      <div className='flex w-10 h-10 justify-center items-center gap-2 rounded-[10px]'>
-        <div className='flex relative p-1 justify-center items-center gap-2 grow self-stretch rounded-[10px]
-          border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg'>
-          {icon || <Variable02 className='w-5 h-5 shrink-0 text-text-accent' />}
+    <div className='bg-workflow-process-bg flex w-[320px] flex-col items-start gap-2 rounded-[10px] p-4'>
+      <div className='flex h-10 w-10 items-center justify-center gap-2 rounded-[10px]'>
+        <div className='border-components-card-border bg-components-card-bg relative flex grow items-center justify-center gap-2 self-stretch
+          rounded-[10px] border-[0.5px] p-1 shadow-lg'>
+          {icon || <Variable02 className='text-text-accent h-5 w-5 shrink-0' />}
           <VerticalLine className='absolute -right-[1px] top-1/2 -translate-y-1/4'/>
           <VerticalLine className='absolute -left-[1px] top-1/2 -translate-y-1/4'/>
-          <HorizontalLine className='absolute top-0 left-3/4 -translate-x-1/4 -translate-y-1/2'/>
-          <HorizontalLine className='absolute top-full left-3/4 -translate-x-1/4 -translate-y-1/2' />
+          <HorizontalLine className='absolute left-3/4 top-0 -translate-x-1/4 -translate-y-1/2'/>
+          <HorizontalLine className='absolute left-3/4 top-full -translate-x-1/4 -translate-y-1/2' />
         </div>
       </div>
       <div className='flex flex-col items-start gap-1 self-stretch'>
diff --git a/web/app/components/base/loading/index.tsx b/web/app/components/base/loading/index.tsx
index aec4120e9c..2ae33108df 100644
--- a/web/app/components/base/loading/index.tsx
+++ b/web/app/components/base/loading/index.tsx
@@ -8,7 +8,7 @@ const Loading = (
   { type = 'area' }: ILoadingProps = { type: 'area' },
 ) => {
   return (
-    <div className={`flex w-full justify-center items-center ${type === 'app' ? 'h-full' : ''}`}>
+    <div className={`flex w-full items-center justify-center ${type === 'app' ? 'h-full' : ''}`}>
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className='spin-animation'>
         <g clipPath="url(#clip0_324_2488)">
           <path d="M15 0H10C9.44772 0 9 0.447715 9 1V6C9 6.55228 9.44772 7 10 7H15C15.5523 7 16 6.55228 16 6V1C16 0.447715 15.5523 0 15 0Z" fill="#1C64F2" />
diff --git a/web/app/components/base/logo/logo-embedded-chat-avatar.tsx b/web/app/components/base/logo/logo-embedded-chat-avatar.tsx
index 7fd94827eb..8ea60e1ce8 100644
--- a/web/app/components/base/logo/logo-embedded-chat-avatar.tsx
+++ b/web/app/components/base/logo/logo-embedded-chat-avatar.tsx
@@ -9,7 +9,7 @@ const LogoEmbeddedChatAvatar: FC<LogoEmbeddedChatAvatarProps> = ({
   return (
     <img
       src='/logo/logo-embedded-chat-avatar.png'
-      className={`block w-10 h-10 ${className}`}
+      className={`block h-10 w-10 ${className}`}
       alt='logo'
     />
   )
diff --git a/web/app/components/base/logo/logo-embedded-chat-header.tsx b/web/app/components/base/logo/logo-embedded-chat-header.tsx
index 976ce0c77a..02dc62c904 100644
--- a/web/app/components/base/logo/logo-embedded-chat-header.tsx
+++ b/web/app/components/base/logo/logo-embedded-chat-header.tsx
@@ -10,7 +10,7 @@ const LogoEmbeddedChatHeader: FC<LogoEmbeddedChatHeaderProps> = ({
   return (
     <img
       src='/logo/logo-embedded-chat-header.png'
-      className={`block w-auto h-6 ${className}`}
+      className={`block h-6 w-auto ${className}`}
       alt='logo'
     />
   )
diff --git a/web/app/components/base/markdown-blocks/button.tsx b/web/app/components/base/markdown-blocks/button.tsx
index 77e3cc1595..e1bd234f59 100644
--- a/web/app/components/base/markdown-blocks/button.tsx
+++ b/web/app/components/base/markdown-blocks/button.tsx
@@ -22,7 +22,7 @@ const MarkdownButton = ({ node }: any) => {
   return <Button
     variant={variant}
     size={size}
-    className={cn('!h-8 !px-3 select-none')}
+    className={cn('!h-8 select-none !px-3')}
     onClick={() => {
       if (is_valid_url(link)) {
         window.open(link, '_blank')
diff --git a/web/app/components/base/markdown-blocks/form.tsx b/web/app/components/base/markdown-blocks/form.tsx
index 7ce3e82b1d..257522d7a8 100644
--- a/web/app/components/base/markdown-blocks/form.tsx
+++ b/web/app/components/base/markdown-blocks/form.tsx
@@ -83,7 +83,7 @@ const MarkdownForm = ({ node }: any) => {
             <label
               key={index}
               htmlFor={child.properties.for}
-              className="my-2 system-md-semibold text-text-secondary"
+              className="system-md-semibold text-text-secondary my-2"
             >
               {child.children[0]?.value || ''}
             </label>
diff --git a/web/app/components/base/markdown-blocks/think-block.tsx b/web/app/components/base/markdown-blocks/think-block.tsx
index b68aff293d..57ab894d32 100644
--- a/web/app/components/base/markdown-blocks/think-block.tsx
+++ b/web/app/components/base/markdown-blocks/think-block.tsx
@@ -70,10 +70,10 @@ export const ThinkBlock = ({ children, ...props }: any) => {
 
   return (
     <details {...(!isComplete && { open: true })} className="group">
-      <summary className="text-gray-500 font-bold list-none pl-2 flex items-center cursor-pointer select-none whitespace-nowrap">
-        <div className="shrink-0 flex items-center">
+      <summary className="flex cursor-pointer select-none list-none items-center whitespace-nowrap pl-2 font-bold text-gray-500">
+        <div className="flex shrink-0 items-center">
           <svg
-            className="w-3 h-3 mr-2 transition-transform duration-500 group-open:rotate-90"
+            className="mr-2 h-3 w-3 transition-transform duration-500 group-open:rotate-90"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
@@ -88,7 +88,7 @@ export const ThinkBlock = ({ children, ...props }: any) => {
           {isComplete ? `${t('common.chat.thought')}(${elapsedTime.toFixed(1)}s)` : `${t('common.chat.thinking')}(${elapsedTime.toFixed(1)}s)`}
         </div>
       </summary>
-      <div className="text-gray-500 p-3 ml-2 bg-gray-50 border-l border-gray-300">
+      <div className="ml-2 border-l border-gray-300 bg-gray-50 p-3 text-gray-500">
         {displayContent}
       </div>
     </details>
diff --git a/web/app/components/base/markdown.tsx b/web/app/components/base/markdown.tsx
index ed18344278..8b25c765b7 100644
--- a/web/app/components/base/markdown.tsx
+++ b/web/app/components/base/markdown.tsx
@@ -164,12 +164,12 @@ const CodeBlock: any = memo(({ inline, className, children, ...props }) => {
   return (
     <div>
       <div
-        className='flex justify-between h-8 items-center p-1 pl-3 border-b'
+        className='flex h-8 items-center justify-between border-b p-1 pl-3'
         style={{
           borderColor: 'rgba(0, 0, 0, 0.05)',
         }}
       >
-        <div className='text-[13px] text-gray-500 font-normal'>{languageShowName}</div>
+        <div className='text-[13px] font-normal text-gray-500'>{languageShowName}</div>
         <div style={{ display: 'flex' }}>
           {(['mermaid', 'svg']).includes(language!) && <SVGBtn isSVG={isSVG} setIsSVG={setIsSVG} />}
           <CopyBtn
@@ -231,10 +231,10 @@ const Link = ({ node, ...props }: any) => {
     const { onSend } = useChatContext()
     const hidden_text = decodeURIComponent(node.properties.href.toString().split('abbr:')[1])
 
-    return <abbr className="underline decoration-dashed !decoration-primary-700 cursor-pointer" onClick={() => onSend?.(hidden_text)} title={node.children[0]?.value}>{node.children[0]?.value}</abbr>
+    return <abbr className="!decoration-primary-700 cursor-pointer underline decoration-dashed" onClick={() => onSend?.(hidden_text)} title={node.children[0]?.value}>{node.children[0]?.value}</abbr>
   }
   else {
-    return <a {...props} target="_blank" className="underline decoration-dashed !decoration-primary-700 cursor-pointer">{node.children[0] ? node.children[0]?.value : 'Download'}</a>
+    return <a {...props} target="_blank" className="!decoration-primary-700 cursor-pointer underline decoration-dashed">{node.children[0] ? node.children[0]?.value : 'Download'}</a>
   }
 }
 
diff --git a/web/app/components/base/mermaid/index.tsx b/web/app/components/base/mermaid/index.tsx
index 80f7ccccfb..ad26a5d069 100644
--- a/web/app/components/base/mermaid/index.tsx
+++ b/web/app/components/base/mermaid/index.tsx
@@ -95,10 +95,10 @@ const Flowchart = (
     (<div ref={ref}>
       <div className="msh-segmented msh-segmented-sm css-23bs09 css-var-r1">
         <div className="msh-segmented-group">
-          <label className="msh-segmented-item flex items-center space-x-1 m-2 w-[200px]">
+          <label className="msh-segmented-item m-2 flex w-[200px] items-center space-x-1">
             <div key='classic'
-              className={cn('flex items-center justify-center mb-4 w-[calc((100%-8px)/2)] h-8 rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg cursor-pointer system-sm-medium text-text-secondary',
-                look === 'classic' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary',
+              className={cn('border-components-option-card-option-border bg-components-option-card-option-bg system-sm-medium text-text-secondary mb-4 flex h-8 w-[calc((100%-8px)/2)] cursor-pointer items-center justify-center rounded-lg border',
+                look === 'classic' && 'border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary border-[1.5px]',
               )}
 
               onClick={() => setLook('classic')}
@@ -107,8 +107,8 @@ const Flowchart = (
             </div>
             <div key='handDrawn'
               className={cn(
-                'flex items-center justify-center mb-4 w-[calc((100%-8px)/2)] h-8 rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg cursor-pointer system-sm-medium text-text-secondary',
-                look === 'handDrawn' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary',
+                'border-components-option-card-option-border bg-components-option-card-option-bg system-sm-medium text-text-secondary mb-4 flex h-8 w-[calc((100%-8px)/2)] cursor-pointer items-center justify-center rounded-lg border',
+                look === 'handDrawn' && 'border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary border-[1.5px]',
               )}
               onClick={() => setLook('handDrawn')}
             >
@@ -119,19 +119,19 @@ const Flowchart = (
       </div>
       {
         svgCode
-        && <div className="mermaid cursor-pointer h-auto w-full object-fit: cover" onClick={() => setImagePreviewUrl(svgCode)}>
+        && <div className="mermaid object-fit: cover h-auto w-full cursor-pointer" onClick={() => setImagePreviewUrl(svgCode)}>
           {svgCode && <img src={svgCode} alt="mermaid_chart" />}
         </div>
       }
       {isLoading
-        && <div className='py-4 px-[26px]'>
+        && <div className='px-[26px] py-4'>
           <LoadingAnim type='text' />
         </div>
       }
       {
         errMsg
-        && <div className='py-4 px-[26px]'>
-          <ExclamationTriangleIcon className='w-6 h-6 text-red-500' />
+        && <div className='px-[26px] py-4'>
+          <ExclamationTriangleIcon className='h-6 w-6 text-red-500' />
           &nbsp;
           {errMsg}
         </div>
diff --git a/web/app/components/base/message-log-modal/index.tsx b/web/app/components/base/message-log-modal/index.tsx
index 13667f1dc7..2d282a2603 100644
--- a/web/app/components/base/message-log-modal/index.tsx
+++ b/web/app/components/base/message-log-modal/index.tsx
@@ -39,7 +39,7 @@ const MessageLogModal: FC<MessageLogModalProps> = ({
 
   return (
     <div
-      className={cn('relative flex flex-col pt-3 bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-xl shadow-xl z-10')}
+      className={cn('bg-components-panel-bg border-components-panel-border relative z-10 flex flex-col rounded-xl border-[0.5px] pt-3 shadow-xl')}
       style={{
         width: fixedWidth ? width : 480,
         ...(!fixedWidth
@@ -55,9 +55,9 @@ const MessageLogModal: FC<MessageLogModalProps> = ({
       }}
       ref={ref}
     >
-      <h1 className='shrink-0 px-4 py-1 text-text-primary system-xl-semibold'>{t('appLog.runDetail.title')}</h1>
-      <span className='absolute right-3 top-4 p-1 cursor-pointer z-20' onClick={onCancel}>
-        <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+      <h1 className='text-text-primary system-xl-semibold shrink-0 px-4 py-1'>{t('appLog.runDetail.title')}</h1>
+      <span className='absolute right-3 top-4 z-20 cursor-pointer p-1' onClick={onCancel}>
+        <RiCloseLine className='text-text-tertiary h-4 w-4' />
       </span>
       <Run
         hideResult
diff --git a/web/app/components/base/modal/index.tsx b/web/app/components/base/modal/index.tsx
index 04bc11b2c8..415e471023 100644
--- a/web/app/components/base/modal/index.tsx
+++ b/web/app/components/base/modal/index.tsx
@@ -66,8 +66,8 @@ export default function Modal({
                   {description}
                 </div>}
                 {closable
-                  && <div className='absolute z-10 top-6 right-6 w-5 h-5 rounded-2xl flex items-center justify-center hover:cursor-pointer hover:bg-state-base-hover'>
-                    <RiCloseLine className='w-4 h-4 text-text-tertiary' onClick={
+                  && <div className='hover:bg-state-base-hover absolute right-6 top-6 z-10 flex h-5 w-5 items-center justify-center rounded-2xl hover:cursor-pointer'>
+                    <RiCloseLine className='text-text-tertiary h-4 w-4' onClick={
                       (e) => {
                         e.stopPropagation()
                         onClose()
diff --git a/web/app/components/base/notion-icon/index.tsx b/web/app/components/base/notion-icon/index.tsx
index 273d90c5a2..8ad7f3bfc3 100644
--- a/web/app/components/base/notion-icon/index.tsx
+++ b/web/app/components/base/notion-icon/index.tsx
@@ -22,16 +22,16 @@ const NotionIcon = ({
           <img
             alt='workspace icon'
             src={src}
-            className={cn('block object-cover w-5 h-5', className)}
+            className={cn('block h-5 w-5 object-cover', className)}
           />
         )
       }
       return (
-        <div className={cn('flex items-center justify-center w-5 h-5', className)}>{src}</div>
+        <div className={cn('flex h-5 w-5 items-center justify-center', className)}>{src}</div>
       )
     }
     return (
-      <div className={cn('flex items-center justify-center w-5 h-5 bg-gray-200 text-xs font-medium text-gray-500 rounded', className)}>{name?.[0].toLocaleUpperCase()}</div>
+      <div className={cn('flex h-5 w-5 items-center justify-center rounded bg-gray-200 text-xs font-medium text-gray-500', className)}>{name?.[0].toLocaleUpperCase()}</div>
     )
   }
 
@@ -41,12 +41,12 @@ const NotionIcon = ({
         <img
           alt='page icon'
           src={src.url || ''}
-          className={cn('block object-cover w-5 h-5', className)}
+          className={cn('block h-5 w-5 object-cover', className)}
         />
       )
     }
     return (
-      <div className={cn('flex items-center justify-center w-5 h-5', className)}>{src?.emoji}</div>
+      <div className={cn('flex h-5 w-5 items-center justify-center', className)}>{src?.emoji}</div>
     )
   }
 
diff --git a/web/app/components/base/notion-page-selector/base.tsx b/web/app/components/base/notion-page-selector/base.tsx
index e3b321b120..aee59ec96f 100644
--- a/web/app/components/base/notion-page-selector/base.tsx
+++ b/web/app/components/base/notion-page-selector/base.tsx
@@ -88,20 +88,20 @@ const NotionPageSelector = ({
   }, [firstWorkspaceId])
 
   return (
-    <div className='bg-gray-25 border border-gray-200 rounded-xl'>
+    <div className='bg-gray-25 rounded-xl border border-gray-200'>
       {
         data?.notion_info?.length
           ? (
             <>
-              <div className='flex items-center pl-[10px] pr-2 h-11 bg-white border-b border-b-gray-200 rounded-t-xl'>
+              <div className='flex h-11 items-center rounded-t-xl border-b border-b-gray-200 bg-white pl-[10px] pr-2'>
                 <WorkspaceSelector
                   value={currentWorkspaceId || firstWorkspaceId}
                   items={notionWorkspaces}
                   onSelect={handleSelectWorkspace}
                 />
-                <div className='mx-1 w-[1px] h-3 bg-gray-200' />
+                <div className='mx-1 h-3 w-[1px] bg-gray-200' />
                 <div
-                  className={cn(s['setting-icon'], 'w-6 h-6 cursor-pointer')}
+                  className={cn(s['setting-icon'], 'h-6 w-6 cursor-pointer')}
                   onClick={() => setShowAccountSettingModal({ payload: 'data-source', onCancelCallback: mutate })}
                 />
                 <div className='grow' />
@@ -110,7 +110,7 @@ const NotionPageSelector = ({
                   onChange={handleSearchValueChange}
                 />
               </div>
-              <div className='rounded-b-xl overflow-hidden'>
+              <div className='overflow-hidden rounded-b-xl'>
                 <PageSelector
                   value={selectedPagesId}
                   disabledValue={getPagesMapAndSelectedPagesId[2]}
diff --git a/web/app/components/base/notion-page-selector/notion-page-selector-modal/index.tsx b/web/app/components/base/notion-page-selector/notion-page-selector-modal/index.tsx
index e7fba57056..03ec81aa89 100644
--- a/web/app/components/base/notion-page-selector/notion-page-selector-modal/index.tsx
+++ b/web/app/components/base/notion-page-selector/notion-page-selector-modal/index.tsx
@@ -38,12 +38,12 @@ const NotionPageSelectorModal = ({
       isShow={isShow}
       onClose={() => { }}
     >
-      <div className='flex items-center justify-between mb-6 h-8'>
+      <div className='mb-6 flex h-8 items-center justify-between'>
         <div className='text-xl font-semibold text-gray-900'>{t('common.dataSource.notion.selector.addPages')}</div>
         <div
-          className='flex items-center justify-center -mr-2 w-8 h-8 cursor-pointer'
+          className='-mr-2 flex h-8 w-8 cursor-pointer items-center justify-center'
           onClick={handleClose}>
-          <XMarkIcon className='w-4 h-4' />
+          <XMarkIcon className='h-4 w-4' />
         </div>
       </div>
       <NotionPageSelector
diff --git a/web/app/components/base/notion-page-selector/page-selector/index.tsx b/web/app/components/base/notion-page-selector/page-selector/index.tsx
index 8f398790e7..04381f1db3 100644
--- a/web/app/components/base/notion-page-selector/page-selector/index.tsx
+++ b/web/app/components/base/notion-page-selector/page-selector/index.tsx
@@ -94,7 +94,7 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
     if (hasChild) {
       return (
         <div
-          className={cn(s.arrow, current.expand && s['arrow-expand'], 'shrink-0 mr-1 w-5 h-5 hover:bg-gray-200 rounded-md')}
+          className={cn(s.arrow, current.expand && s['arrow-expand'], 'mr-1 h-5 w-5 shrink-0 rounded-md hover:bg-gray-200')}
           style={{ marginLeft: current.depth * 8 }}
           onClick={() => handleToggle(index)}
         />
@@ -106,18 +106,18 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
       )
     }
     return (
-      <div className='shrink-0 mr-1 w-5 h-5' style={{ marginLeft: current.depth * 8 }} />
+      <div className='mr-1 h-5 w-5 shrink-0' style={{ marginLeft: current.depth * 8 }} />
     )
   }
 
   return (
     <div
-      className={cn('group flex items-center pl-2 pr-[2px] rounded-md border border-transparent hover:bg-gray-100 cursor-pointer', previewPageId === current.page_id && s['preview-item'])}
+      className={cn('group flex cursor-pointer items-center rounded-md border border-transparent pl-2 pr-[2px] hover:bg-gray-100', previewPageId === current.page_id && s['preview-item'])}
       style={{ ...style, top: style.top as number + 8, left: 8, right: 8, width: 'calc(100% - 16px)' }}
     >
       <Checkbox
         className={cn(
-          'shrink-0 mr-2 group-hover:border-primary-600 group-hover:border-[2px]',
+          'group-hover:border-primary-600 mr-2 shrink-0 group-hover:border-[2px]',
           disabled && 'group-hover:border-transparent',
         )}
         checked={checkedIds.has(current.page_id)}
@@ -130,12 +130,12 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
       />
       {!searchValue && renderArrow()}
       <NotionIcon
-        className='shrink-0 mr-1'
+        className='mr-1 shrink-0'
         type='page'
         src={current.page_icon}
       />
       <div
-        className='grow text-sm font-medium text-gray-700 truncate'
+        className='grow truncate text-sm font-medium text-gray-700'
         title={current.page_name}
       >
         {current.page_name}
@@ -143,7 +143,7 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
       {
         canPreview && (
           <div
-            className='shrink-0 hidden group-hover:flex items-center ml-1 px-2 h-6 rounded-md text-xs font-medium text-gray-500 cursor-pointer hover:bg-gray-50 hover:text-gray-700'
+            className='ml-1 hidden h-6 shrink-0 cursor-pointer items-center rounded-md px-2 text-xs font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700 group-hover:flex'
             onClick={() => handlePreview(index)}>
             {t('common.dataSource.notion.selector.preview')}
           </div>
@@ -152,7 +152,7 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
       {
         searchValue && (
           <div
-            className='shrink-0 ml-1 max-w-[120px] text-xs text-gray-400 truncate'
+            className='ml-1 max-w-[120px] shrink-0 truncate text-xs text-gray-400'
             title={breadCrumbs.join(' / ')}
           >
             {breadCrumbs.join(' / ')}
@@ -278,7 +278,7 @@ const PageSelector = ({
 
   if (!currentDataList.length) {
     return (
-      <div className='flex items-center justify-center h-[296px] text-[13px] text-gray-500'>
+      <div className='flex h-[296px] items-center justify-center text-[13px] text-gray-500'>
         {t('common.dataSource.notion.selector.noSearchResult')}
       </div>
     )
diff --git a/web/app/components/base/notion-page-selector/search-input/index.tsx b/web/app/components/base/notion-page-selector/search-input/index.tsx
index 8bf55273b7..a6d33c9776 100644
--- a/web/app/components/base/notion-page-selector/search-input/index.tsx
+++ b/web/app/components/base/notion-page-selector/search-input/index.tsx
@@ -19,10 +19,10 @@ const SearchInput = ({
   }, [onChange])
 
   return (
-    <div className={cn(s['input-wrapper'], 'flex items-center px-2 h-7 rounded-md', `${value ? 'bg-white' : 'bg-gray-100'}`)}>
-      <div className={cn(s['search-icon'], 'mr-[6px] w-4 h-4')} />
+    <div className={cn(s['input-wrapper'], 'flex h-7 items-center rounded-md px-2', `${value ? 'bg-white' : 'bg-gray-100'}`)}>
+      <div className={cn(s['search-icon'], 'mr-[6px] h-4 w-4')} />
       <input
-        className='grow text-[13px] bg-inherit border-0 outline-0 appearance-none'
+        className='grow appearance-none border-0 bg-inherit text-[13px] outline-0'
         value={value}
         onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
         placeholder={t('common.dataSource.notion.selector.searchPages') || ''}
@@ -30,7 +30,7 @@ const SearchInput = ({
       {
         value && (
           <div
-            className={cn(s['clear-icon'], 'ml-1 w-4 h-4 cursor-pointer')}
+            className={cn(s['clear-icon'], 'ml-1 h-4 w-4 cursor-pointer')}
             onClick={handleClear}
           />
         )
diff --git a/web/app/components/base/notion-page-selector/workspace-selector/index.tsx b/web/app/components/base/notion-page-selector/workspace-selector/index.tsx
index 39171a02c6..97d1da017d 100644
--- a/web/app/components/base/notion-page-selector/workspace-selector/index.tsx
+++ b/web/app/components/base/notion-page-selector/workspace-selector/index.tsx
@@ -25,15 +25,15 @@ export default function WorkspaceSelector({
       {
         ({ open }) => (
           <>
-            <MenuButton className={`flex items-center justify-center h-7 rounded-md hover:bg-gray-50 ${open && 'bg-gray-50'} cursor-pointer`}>
+            <MenuButton className={`flex h-7 items-center justify-center rounded-md hover:bg-gray-50 ${open && 'bg-gray-50'} cursor-pointer`}>
               <NotionIcon
                 className='ml-1 mr-2'
                 src={currentWorkspace?.workspace_icon}
                 name={currentWorkspace?.workspace_name}
               />
-              <div className='mr-1 w-[90px] text-left text-sm font-medium text-gray-700 truncate' title={currentWorkspace?.workspace_name}>{currentWorkspace?.workspace_name}</div>
-              <div className='mr-1 px-1 h-[18px] bg-primary-50 rounded-lg text-xs font-medium text-primary-600'>{currentWorkspace?.pages.length}</div>
-              <div className={cn(s['down-arrow'], 'mr-2 w-3 h-3')} />
+              <div className='mr-1 w-[90px] truncate text-left text-sm font-medium text-gray-700' title={currentWorkspace?.workspace_name}>{currentWorkspace?.workspace_name}</div>
+              <div className='bg-primary-50 text-primary-600 mr-1 h-[18px] rounded-lg px-1 text-xs font-medium'>{currentWorkspace?.pages.length}</div>
+              <div className={cn(s['down-arrow'], 'mr-2 h-3 w-3')} />
             </MenuButton>
             <Transition
               as={Fragment}
@@ -48,25 +48,25 @@ export default function WorkspaceSelector({
                 className={cn(
                   s.popup,
                   `absolute left-0 top-8 w-80
-                  origin-top-right rounded-lg bg-white
-                  border-[0.5px] border-gray-200`,
+                  origin-top-right rounded-lg border-[0.5px]
+                  border-gray-200 bg-white`,
                 )}
               >
-                <div className="p-1 max-h-50 overflow-auto">
+                <div className="max-h-50 overflow-auto p-1">
                   {
                     items.map(item => (
                       <MenuItem key={item.workspace_id}>
                         <div
-                          className='flex items-center px-3 h-9 hover:bg-gray-50 cursor-pointer'
+                          className='flex h-9 cursor-pointer items-center px-3 hover:bg-gray-50'
                           onClick={() => onSelect(item.workspace_id)}
                         >
                           <NotionIcon
-                            className='shrink-0 mr-2'
+                            className='mr-2 shrink-0'
                             src={item.workspace_icon}
                             name={item.workspace_name}
                           />
-                          <div className='grow mr-2 text-sm text-gray-700 truncate' title={item.workspace_name}>{item.workspace_name}</div>
-                          <div className='shrink-0 text-xs font-medium text-primary-600'>
+                          <div className='mr-2 grow truncate text-sm text-gray-700' title={item.workspace_name}>{item.workspace_name}</div>
+                          <div className='text-primary-600 shrink-0 text-xs font-medium'>
                             {item.pages.length} {t('common.dataSource.notion.selector.pageSelected')}
                           </div>
                         </div>
diff --git a/web/app/components/base/pagination/index.tsx b/web/app/components/base/pagination/index.tsx
index ec67040c01..b99097c51f 100644
--- a/web/app/components/base/pagination/index.tsx
+++ b/web/app/components/base/pagination/index.tsx
@@ -62,7 +62,7 @@ const CustomizedPagination: FC<Props> = ({
 
   return (
     <Pagination
-      className={cn('flex items-center w-full px-6 py-3 select-none', className)}
+      className={cn('flex w-full select-none items-center px-6 py-3', className)}
       currentPage={current}
       edgePageCount={2}
       middlePagesSiblingCount={1}
@@ -71,14 +71,14 @@ const CustomizedPagination: FC<Props> = ({
       truncableClassName='flex items-center justify-center w-8 px-1 py-2 system-sm-medium text-text-tertiary'
       truncableText='...'
     >
-      <div className='flex items-center gap-0.5 p-0.5 rounded-[10px] bg-background-section-burn'>
+      <div className='bg-background-section-burn flex items-center gap-0.5 rounded-[10px] p-0.5'>
         <Pagination.PrevButton
           as={<div></div>}
           disabled={current === 0}
         >
           <Button
             variant='secondary'
-            className='w-7 h-7 px-1.5'
+            className='h-7 w-7 px-1.5'
             disabled={current === 0}
           >
             <RiArrowLeftLine className='h-4 w-4' />
@@ -87,7 +87,7 @@ const CustomizedPagination: FC<Props> = ({
         {!showInput && (
           <div
             ref={inputRef}
-            className='flex items-center gap-0.5 px-2 py-1.5 rounded-lg hover:bg-state-base-hover-alt hover:cursor-text'
+            className='hover:bg-state-base-hover-alt flex items-center gap-0.5 rounded-lg px-2 py-1.5 hover:cursor-text'
             onClick={() => setShowInput(true)}
           >
             <div className='system-xs-medium text-text-secondary'>{current + 1}</div>
@@ -114,45 +114,45 @@ const CustomizedPagination: FC<Props> = ({
         >
           <Button
             variant='secondary'
-            className='w-7 h-7 px-1.5'
+            className='h-7 w-7 px-1.5'
             disabled={current === totalPages - 1}
           >
             <RiArrowRightLine className='h-4 w-4' />
           </Button>
         </Pagination.NextButton>
       </div>
-      <div className={cn('grow flex items-center justify-center gap-1 list-none')}>
+      <div className={cn('flex grow list-none items-center justify-center gap-1')}>
         <Pagination.PageButton
-          className='flex items-center justify-center min-w-8 px-1 py-2 rounded-lg system-sm-medium cursor-pointer hover:bg-components-button-ghost-bg-hover'
+          className='system-sm-medium hover:bg-components-button-ghost-bg-hover flex min-w-8 cursor-pointer items-center justify-center rounded-lg px-1 py-2'
           activeClassName='bg-components-button-tertiary-bg text-components-button-tertiary-text hover:bg-components-button-ghost-bg-hover'
           inactiveClassName='text-text-tertiary'
         />
       </div>
       {onLimitChange && (
-        <div className='shrink-0 flex items-center gap-2'>
-          <div className='shrink-0 w-[51px] text-end text-text-tertiary system-2xs-regular-uppercase'>{showPerPageTip ? t('common.pagination.perPage') : ''}</div>
+        <div className='flex shrink-0 items-center gap-2'>
+          <div className='text-text-tertiary system-2xs-regular-uppercase w-[51px] shrink-0 text-end'>{showPerPageTip ? t('common.pagination.perPage') : ''}</div>
           <div
-            className='flex items-center gap-[1px] p-0.5 rounded-[10px] bg-components-segmented-control-bg-normal'
+            className='bg-components-segmented-control-bg-normal flex items-center gap-[1px] rounded-[10px] p-0.5'
             onMouseEnter={() => setShowPerPageTip(true)}
             onMouseLeave={() => setShowPerPageTip(false)}
           >
             <div
               className={cn(
-                'px-2.5 py-1.5 rounded-lg border-[0.5px] border-transparent system-sm-medium text-text-tertiary cursor-pointer hover:bg-state-base-hover hover:text-text-secondary',
+                'system-sm-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary cursor-pointer rounded-lg border-[0.5px] border-transparent px-2.5 py-1.5',
                 limit === 10 && 'shadow-xs border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg text-text-secondary hover:bg-components-segmented-control-item-active-bg',
               )}
               onClick={() => onLimitChange?.(10)}
             >10</div>
             <div
               className={cn(
-                'px-2.5 py-1.5 rounded-lg border-[0.5px] border-transparent system-sm-medium text-text-tertiary cursor-pointer hover:bg-state-base-hover hover:text-text-secondary',
+                'system-sm-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary cursor-pointer rounded-lg border-[0.5px] border-transparent px-2.5 py-1.5',
                 limit === 25 && 'shadow-xs border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg text-text-secondary hover:bg-components-segmented-control-item-active-bg',
               )}
               onClick={() => onLimitChange?.(25)}
             >25</div>
             <div
               className={cn(
-                'px-2.5 py-1.5 rounded-lg border-[0.5px] border-transparent system-sm-medium text-text-tertiary cursor-pointer hover:bg-state-base-hover hover:text-text-secondary',
+                'system-sm-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary cursor-pointer rounded-lg border-[0.5px] border-transparent px-2.5 py-1.5',
                 limit === 50 && 'shadow-xs border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg text-text-secondary hover:bg-components-segmented-control-item-active-bg',
               )}
               onClick={() => onLimitChange?.(50)}
diff --git a/web/app/components/base/param-item/index.tsx b/web/app/components/base/param-item/index.tsx
index 68c980ad09..d6a413bfe1 100644
--- a/web/app/components/base/param-item/index.tsx
+++ b/web/app/components/base/param-item/index.tsx
@@ -25,7 +25,7 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
   return (
     <div className={className}>
       <div className="flex items-center justify-between">
-        <div className="flex items-center h-6">
+        <div className="flex h-6 items-center">
           {hasSwitch && (
             <Switch
               size='md'
@@ -36,7 +36,7 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
               }}
             />
           )}
-          <span className="mr-1 text-text-secondary system-sm-semibold">{name}</span>
+          <span className="text-text-secondary system-sm-semibold mr-1">{name}</span>
           {!noTooltip && (
             <Tooltip
               triggerClassName='w-4 h-4 shrink-0'
@@ -61,7 +61,7 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
             className='w-[72px]'
           />
         </div>
-        <div className="flex items-center grow">
+        <div className="flex grow items-center">
           <Slider
             className='w-full'
             disabled={!enable}
diff --git a/web/app/components/base/popover/index.tsx b/web/app/components/base/popover/index.tsx
index 60ebb17f95..69bf893db9 100644
--- a/web/app/components/base/popover/index.tsx
+++ b/web/app/components/base/popover/index.tsx
@@ -63,7 +63,7 @@ export default function CustomPopover({
                 ref={buttonRef}
                 disabled={disabled}
                 className={cn(
-                  'group inline-flex items-center bg-components-button-secondary-bg px-3 py-2 rounded-lg text-base border border-components-button-secondary-border font-medium hover:bg-components-button-secondary-bg-hover hover:border-components-button-secondary-border-hover focus:outline-none',
+                  'bg-components-button-secondary-bg border-components-button-secondary-border hover:bg-components-button-secondary-bg-hover hover:border-components-button-secondary-border-hover group inline-flex items-center rounded-lg border px-3 py-2 text-base font-medium focus:outline-none',
                   open && 'bg-components-button-secondary-bg-hover border-components-button-secondary-border',
                   (btnClassName && typeof btnClassName === 'string') && btnClassName,
                   (btnClassName && typeof btnClassName !== 'string') && btnClassName?.(open),
@@ -74,8 +74,8 @@ export default function CustomPopover({
               <Transition as={Fragment}>
                 <PopoverPanel
                   className={cn(
-                    'absolute z-10 w-full max-w-sm px-4 mt-1 sm:px-0 lg:max-w-3xl',
-                    position === 'bottom' && '-translate-x-1/2 left-1/2',
+                    'absolute z-10 mt-1 w-full max-w-sm px-4 sm:px-0 lg:max-w-3xl',
+                    position === 'bottom' && 'left-1/2 -translate-x-1/2',
                     position === 'bl' && 'left-0',
                     position === 'br' && 'right-0',
                     className,
@@ -90,7 +90,7 @@ export default function CustomPopover({
                 >
                   {({ close }) => (
                     <div
-                      className={cn('overflow-hidden bg-components-panel-bg w-fit min-w-[130px] rounded-lg shadow-lg ring-1 ring-black ring-opacity-5', popupClassName)}
+                      className={cn('bg-components-panel-bg w-fit min-w-[130px] overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5', popupClassName)}
                       {...(trigger !== 'hover'
                         ? {}
                         : {
diff --git a/web/app/components/base/progress-bar/index.tsx b/web/app/components/base/progress-bar/index.tsx
index f0fd2a8306..759c9ea846 100644
--- a/web/app/components/base/progress-bar/index.tsx
+++ b/web/app/components/base/progress-bar/index.tsx
@@ -6,9 +6,9 @@ const ProgressBar = ({
 }: ProgressBarProps) => {
   return (
     <div className='flex items-center'>
-      <div className='mr-2 w-[100px] bg-gray-100 rounded-lg'>
+      <div className='mr-2 w-[100px] rounded-lg bg-gray-100'>
         <div
-          className='h-1 bg-[#2970FF] rounded-lg'
+          className='h-1 rounded-lg bg-[#2970FF]'
           style={{ width: `${percent}%` }}
         />
       </div>
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
index f39d56f72b..fb78bba8d5 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
@@ -44,7 +44,7 @@ export const usePromptOptions = (
       render: ({ isSelected, onSelect, onSetHighlight }) => {
         return <PromptMenuItem
           title={t('common.promptEditor.context.item.title')}
-          icon={<File05 className='w-4 h-4 text-[#6938EF]' />}
+          icon={<File05 className='h-4 w-4 text-[#6938EF]' />}
           disabled={!contextBlock.selectable}
           isSelected={isSelected}
           onClick={onSelect}
@@ -68,7 +68,7 @@ export const usePromptOptions = (
           return (
             <PromptMenuItem
               title={t('common.promptEditor.query.item.title')}
-              icon={<UserEdit02 className='w-4 h-4 text-[#FD853A]' />}
+              icon={<UserEdit02 className='h-4 w-4 text-[#FD853A]' />}
               disabled={!queryBlock.selectable}
               isSelected={isSelected}
               onClick={onSelect}
@@ -94,7 +94,7 @@ export const usePromptOptions = (
           return (
             <PromptMenuItem
               title={t('common.promptEditor.history.item.title')}
-              icon={<MessageClockCircle className='w-4 h-4 text-[#DD2590]' />}
+              icon={<MessageClockCircle className='h-4 w-4 text-[#DD2590]' />}
               disabled={!historyBlock.selectable
               }
               isSelected={isSelected}
@@ -133,7 +133,7 @@ export const useVariableOptions = (
           return (
             <VariableMenuItem
               title={item.value}
-              icon={<BracketsX className='w-[14px] h-[14px] text-text-accent' />}
+              icon={<BracketsX className='text-text-accent h-[14px] w-[14px]' />}
               queryString={queryString}
               isSelected={isSelected}
               onClick={onSelect}
@@ -162,7 +162,7 @@ export const useVariableOptions = (
         return (
           <VariableMenuItem
             title={t('common.promptEditor.variable.modal.add')}
-            icon={<BracketsX className='w-[14px] h-[14px] text-text-accent' />}
+            icon={<BracketsX className='text-text-accent h-[14px] w-[14px]' />}
             queryString={queryString}
             isSelected={isSelected}
             onClick={onSelect}
@@ -206,12 +206,12 @@ export const useExternalToolOptions = (
               title={item.name}
               icon={
                 <AppIcon
-                  className='!w-[14px] !h-[14px]'
+                  className='!h-[14px] !w-[14px]'
                   icon={item.icon}
                   background={item.icon_background}
                 />
               }
-              extraElement={<div className='text-xs text-text-tertiary'>{item.variableName}</div>}
+              extraElement={<div className='text-text-tertiary text-xs'>{item.variableName}</div>}
               queryString={queryString}
               isSelected={isSelected}
               onClick={onSelect}
@@ -240,8 +240,8 @@ export const useExternalToolOptions = (
         return (
           <VariableMenuItem
             title={t('common.promptEditor.variable.modal.addTool')}
-            icon={<Tool03 className='w-[14px] h-[14px] text-text-accent' />}
-            extraElement={< ArrowUpRight className='w-3 h-3 text-text-tertiary' />}
+            icon={<Tool03 className='text-text-accent h-[14px] w-[14px]' />}
+            extraElement={< ArrowUpRight className='text-text-tertiary h-3 w-3' />}
             queryString={queryString}
             isSelected={isSelected}
             onClick={onSelect}
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
index d7a3a81417..5a462b4faa 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
@@ -135,7 +135,7 @@ const ComponentPicker = ({
             // See https://github.com/facebook/lexical/blob/ac97dfa9e14a73ea2d6934ff566282d7f758e8bb/packages/lexical-react/src/shared/LexicalMenu.ts#L493
             <div className='h-0 w-0'>
               <div
-                className='w-[260px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'
+                className='border-components-panel-border bg-components-panel-bg-blur w-[260px] rounded-lg border-[0.5px] p-1 shadow-lg'
                 style={{
                   ...floatingStyles,
                   visibility: isPositioned ? 'visible' : 'hidden',
@@ -148,7 +148,7 @@ const ComponentPicker = ({
                       {
                         // Divider
                         index !== 0 && options.at(index - 1)?.group !== option.group && (
-                          <div className='my-1 h-px w-full -translate-x-1 bg-divider-subtle'></div>
+                          <div className='bg-divider-subtle my-1 h-px w-full -translate-x-1'></div>
                         )
                       }
                       {option.renderMenuOption({
@@ -169,7 +169,7 @@ const ComponentPicker = ({
                     <>
                       {
                         (!!options.length) && (
-                          <div className='my-1 h-px w-full -translate-x-1 bg-divider-subtle'></div>
+                          <div className='bg-divider-subtle my-1 h-px w-full -translate-x-1'></div>
                         )
                       }
                       <div className='p-1'>
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.tsx
index 211e2b7fb5..50d80fb0b2 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.tsx
@@ -21,7 +21,7 @@ export const PromptMenuItem = memo(({
   return (
     <div
       className={`
-        flex items-center px-3 h-6 cursor-pointer hover:bg-state-base-hover rounded-md
+        hover:bg-state-base-hover flex h-6 cursor-pointer items-center rounded-md px-3
         ${isSelected && !disabled && '!bg-state-base-hover'}
         ${disabled ? 'cursor-not-allowed opacity-30' : 'hover:bg-state-base-hover cursor-pointer'}
       `}
@@ -38,7 +38,7 @@ export const PromptMenuItem = memo(({
         onClick()
       }}>
       {icon}
-      <div className='ml-1 text-[13px] text-text-secondary'>{title}</div>
+      <div className='text-text-secondary ml-1 text-[13px]'>{title}</div>
     </div>
   )
 })
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/variable-option.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/variable-option.tsx
index 4fb171dc55..de28a5be21 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/variable-option.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/variable-option.tsx
@@ -38,7 +38,7 @@ export const VariableMenuItem = memo(({
   return (
     <div
       className={`
-        flex items-center px-3 h-6 rounded-md hover:bg-state-base-hover cursor-pointer
+        hover:bg-state-base-hover flex h-6 cursor-pointer items-center rounded-md px-3
         ${isSelected && 'bg-state-base-hover'}
       `}
       tabIndex={-1}
@@ -48,7 +48,7 @@ export const VariableMenuItem = memo(({
       <div className='mr-2'>
         {icon}
       </div>
-      <div className='grow text-[13px] text-text-secondary truncate' title={title}>
+      <div className='text-text-secondary grow truncate text-[13px]' title={title}>
         {before}
         <span className='text-text-accent'>{middle}</span>
         {after}
diff --git a/web/app/components/base/prompt-editor/plugins/context-block/component.tsx b/web/app/components/base/prompt-editor/plugins/context-block/component.tsx
index 91db2f39a4..a353262a5a 100644
--- a/web/app/components/base/prompt-editor/plugins/context-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/context-block/component.tsx
@@ -42,11 +42,11 @@ const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
 
   return (
     <div className={`
-      group inline-flex items-center pl-1 pr-0.5 h-6 border border-transparent bg-[#F4F3FF] text-[#6938EF] rounded-[5px] hover:bg-[#EBE9FE]
+      group inline-flex h-6 items-center rounded-[5px] border border-transparent bg-[#F4F3FF] pl-1 pr-0.5 text-[#6938EF] hover:bg-[#EBE9FE]
       ${open ? 'bg-[#EBE9FE]' : 'bg-[#F4F3FF]'}
       ${isSelected && '!border-[#9B8AFB]'}
     `} ref={ref}>
-      <File05 className='mr-1 w-[14px] h-[14px]' />
+      <File05 className='mr-1 h-[14px] w-[14px]' />
       <div className='mr-1 text-xs font-medium'>{t('common.promptEditor.context.item.title')}</div>
       {!canNotAddContext && (
         <PortalToFollowElem
@@ -60,12 +60,12 @@ const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
         >
           <PortalToFollowElemTrigger ref={triggerRef}>
             <div className={`
-            flex items-center justify-center w-[18px] h-[18px] text-[11px] font-semibold rounded cursor-pointer
-            ${open ? 'bg-[#6938EF] text-white' : 'bg-white/50 group-hover:bg-white group-hover:shadow-xs'}
+            flex h-[18px] w-[18px] cursor-pointer items-center justify-center rounded text-[11px] font-semibold
+            ${open ? 'bg-[#6938EF] text-white' : 'group-hover:shadow-xs bg-white/50 group-hover:bg-white'}
           `}>{localDatasets.length}</div>
           </PortalToFollowElemTrigger>
           <PortalToFollowElemContent style={{ zIndex: 100 }}>
-            <div className='w-[360px] bg-white rounded-xl shadow-lg'>
+            <div className='w-[360px] rounded-xl bg-white shadow-lg'>
               <div className='p-4'>
                 <div className='mb-2 text-xs font-medium text-gray-500'>
                   {t('common.promptEditor.context.modal.title', { num: localDatasets.length })}
@@ -73,23 +73,23 @@ const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
                 <div className='max-h-[270px] overflow-y-auto'>
                   {
                     localDatasets.map(dataset => (
-                      <div key={dataset.id} className='flex items-center h-8'>
-                        <div className='flex items-center justify-center shrink-0 mr-2 w-6 h-6 bg-[#F5F8FF] rounded-md border-[0.5px] border-[#EAECF5]'>
-                          <Folder className='w-4 h-4 text-[#444CE7]' />
+                      <div key={dataset.id} className='flex h-8 items-center'>
+                        <div className='mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#EAECF5] bg-[#F5F8FF]'>
+                          <Folder className='h-4 w-4 text-[#444CE7]' />
                         </div>
-                        <div className='text-sm text-gray-800 truncate' title=''>{dataset.name}</div>
+                        <div className='truncate text-sm text-gray-800' title=''>{dataset.name}</div>
                       </div>
                     ))
                   }
                 </div>
-                <div className='flex items-center h-8 text-[#155EEF] cursor-pointer' onClick={onAddContext}>
-                  <div className='shrink-0 flex justify-center items-center mr-2 w-6 h-6 rounded-md border-[0.5px] border-gray-100'>
-                    <RiAddLine className='w-[14px] h-[14px]' />
+                <div className='flex h-8 cursor-pointer items-center text-[#155EEF]' onClick={onAddContext}>
+                  <div className='mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-gray-100'>
+                    <RiAddLine className='h-[14px] w-[14px]' />
                   </div>
                   <div className='text-[13px] font-medium' title=''>{t('common.promptEditor.context.modal.add')}</div>
                 </div>
               </div>
-              <div className='px-4 py-3 text-xs text-gray-500 bg-gray-50 border-t-[0.5px] border-gray-50 rounded-b-xl'>
+              <div className='rounded-b-xl border-t-[0.5px] border-gray-50 bg-gray-50 px-4 py-3 text-xs text-gray-500'>
                 {t('common.promptEditor.context.modal.footer')}
               </div>
             </div>
diff --git a/web/app/components/base/prompt-editor/plugins/history-block/component.tsx b/web/app/components/base/prompt-editor/plugins/history-block/component.tsx
index 1dd2972ab4..2e69bd44d2 100644
--- a/web/app/components/base/prompt-editor/plugins/history-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/history-block/component.tsx
@@ -40,11 +40,11 @@ const HistoryBlockComponent: FC<HistoryBlockComponentProps> = ({
 
   return (
     <div className={`
-      group inline-flex items-center pl-1 pr-0.5 h-6 border border-transparent text-[#DD2590] rounded-[5px] hover:bg-[#FCE7F6]
+      group inline-flex h-6 items-center rounded-[5px] border border-transparent pl-1 pr-0.5 text-[#DD2590] hover:bg-[#FCE7F6]
       ${open ? 'bg-[#FCE7F6]' : 'bg-[#FDF2FA]'}
       ${isSelected && '!border-[#F670C7]'}
     `} ref={ref}>
-      <MessageClockCircle className='mr-1 w-[14px] h-[14px]' />
+      <MessageClockCircle className='mr-1 h-[14px] w-[14px]' />
       <div className='mr-1 text-xs font-medium'>{t('common.promptEditor.history.item.title')}</div>
       <PortalToFollowElem
         open={open}
@@ -57,14 +57,14 @@ const HistoryBlockComponent: FC<HistoryBlockComponentProps> = ({
       >
         <PortalToFollowElemTrigger ref={triggerRef}>
           <div className={`
-            flex items-center justify-center w-[18px] h-[18px] rounded cursor-pointer
-            ${open ? 'bg-[#DD2590] text-white' : 'bg-white/50 group-hover:bg-white group-hover:shadow-xs'}
+            flex h-[18px] w-[18px] cursor-pointer items-center justify-center rounded
+            ${open ? 'bg-[#DD2590] text-white' : 'group-hover:shadow-xs bg-white/50 group-hover:bg-white'}
           `}>
-            <RiMoreFill className='w-3 h-3' />
+            <RiMoreFill className='h-3 w-3' />
           </div>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent style={{ zIndex: 100 }}>
-          <div className='w-[360px] bg-white rounded-xl shadow-lg'>
+          <div className='w-[360px] rounded-xl bg-white shadow-lg'>
             <div className='p-4'>
               <div className='mb-2 text-xs font-medium text-gray-500'>{t('common.promptEditor.history.modal.title')}</div>
               <div className='flex items-center text-sm text-gray-700'>
@@ -77,7 +77,7 @@ const HistoryBlockComponent: FC<HistoryBlockComponentProps> = ({
               </div>
             </div>
             <div
-              className='px-4 py-3 text-xs text-[#155EEF] border-t border-black/5 rounded-b-xl cursor-pointer'
+              className='cursor-pointer rounded-b-xl border-t border-black/5 px-4 py-3 text-xs text-[#155EEF]'
               onClick={onEditRole}
             >
               {t('common.promptEditor.history.modal.edit')}
diff --git a/web/app/components/base/prompt-editor/plugins/placeholder.tsx b/web/app/components/base/prompt-editor/plugins/placeholder.tsx
index 2ad87917d2..eadc0ec20a 100644
--- a/web/app/components/base/prompt-editor/plugins/placeholder.tsx
+++ b/web/app/components/base/prompt-editor/plugins/placeholder.tsx
@@ -16,8 +16,8 @@ const Placeholder = ({
   return (
     <div className={cn(
       className,
-      'absolute top-0 left-0 h-full w-full text-sm text-components-input-text-placeholder select-none pointer-events-none',
-      compact ? 'leading-5 text-[13px]' : 'leading-6 text-sm',
+      'text-components-input-text-placeholder pointer-events-none absolute left-0 top-0 h-full w-full select-none text-sm',
+      compact ? 'text-[13px] leading-5' : 'text-sm leading-6',
     )}>
       {value || t('common.promptEditor.placeholder')}
     </div>
diff --git a/web/app/components/base/prompt-editor/plugins/query-block/component.tsx b/web/app/components/base/prompt-editor/plugins/query-block/component.tsx
index 2ade9a989f..fa46334ed6 100644
--- a/web/app/components/base/prompt-editor/plugins/query-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/query-block/component.tsx
@@ -17,12 +17,12 @@ const QueryBlockComponent: FC<QueryBlockComponentProps> = ({
   return (
     <div
       className={`
-        inline-flex items-center pl-1 pr-0.5 h-6 bg-[#FFF6ED] border border-transparent rounded-[5px] hover:bg-[#FFEAD5]
+        inline-flex h-6 items-center rounded-[5px] border border-transparent bg-[#FFF6ED] pl-1 pr-0.5 hover:bg-[#FFEAD5]
         ${isSelected && '!border-[#FD853A]'}
       `}
       ref={ref}
     >
-      <UserEdit02 className='mr-1 w-[14px] h-[14px] text-[#FD853A]' />
+      <UserEdit02 className='mr-1 h-[14px] w-[14px] text-[#FD853A]' />
       <div className='text-xs font-medium text-[#EC4A0A] opacity-60'>{'{{'}</div>
       <div className='text-xs font-medium text-[#EC4A0A]'>{t('common.promptEditor.query.item.title')}</div>
       <div className='text-xs font-medium text-[#EC4A0A] opacity-60'>{'}}'}</div>
diff --git a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
index fc6e589807..a680908926 100644
--- a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
@@ -76,7 +76,7 @@ const WorkflowVariableBlockComponent = ({
   const Item = (
     <div
       className={cn(
-        'mx-0.5 relative group/wrap flex items-center h-[18px] pl-0.5 pr-[3px] rounded-[5px] border select-none',
+        'group/wrap relative mx-0.5 flex h-[18px] select-none items-center rounded-[5px] border pl-0.5 pr-[3px]',
         isSelected ? ' border-state-accent-solid bg-state-accent-hover' : ' border-components-panel-border-subtle bg-components-badge-white-to-dark',
         !node && !isEnv && !isChatVar && '!border-state-destructive-solid !bg-state-destructive-hover',
       )}
@@ -94,24 +94,24 @@ const WorkflowVariableBlockComponent = ({
               </div>
             )
           }
-          <div className='shrink-0 mx-0.5 max-w-[60px] text-xs font-medium text-text-secondary truncate' title={node?.title} style={{
+          <div className='text-text-secondary mx-0.5 max-w-[60px] shrink-0 truncate text-xs font-medium' title={node?.title} style={{
           }}>{node?.title}</div>
-          <Line3 className='mr-0.5 text-divider-deep'></Line3>
+          <Line3 className='text-divider-deep mr-0.5'></Line3>
         </div>
       )}
-      <div className='flex items-center text-text-accent'>
-        {!isEnv && !isChatVar && <Variable02 className={cn('shrink-0 w-3.5 h-3.5', isException && 'text-text-warning')} />}
-        {isEnv && <Env className='shrink-0 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
-        {isChatVar && <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />}
+      <div className='text-text-accent flex items-center'>
+        {!isEnv && !isChatVar && <Variable02 className={cn('h-3.5 w-3.5 shrink-0', isException && 'text-text-warning')} />}
+        {isEnv && <Env className='text-util-colors-violet-violet-600 h-3.5 w-3.5 shrink-0' />}
+        {isChatVar && <BubbleX className='text-util-colors-teal-teal-700 h-3.5 w-3.5' />}
         <div className={cn(
-          'shrink-0 ml-0.5 text-xs font-medium truncate',
+          'ml-0.5 shrink-0 truncate text-xs font-medium',
           isEnv && 'text-util-colors-violet-violet-600',
           isChatVar && 'text-util-colors-teal-teal-700',
           isException && 'text-text-warning',
         )} title={varName}>{varName}</div>
         {
           !node && !isEnv && !isChatVar && (
-            <RiErrorWarningFill className='ml-0.5 w-3 h-3 text-text-destructive' />
+            <RiErrorWarningFill className='text-text-destructive ml-0.5 h-3 w-3' />
           )
         }
       </div>
diff --git a/web/app/components/base/prompt-log-modal/card.tsx b/web/app/components/base/prompt-log-modal/card.tsx
index 6ea944a452..cd340934c2 100644
--- a/web/app/components/base/prompt-log-modal/card.tsx
+++ b/web/app/components/base/prompt-log-modal/card.tsx
@@ -12,7 +12,7 @@ const Card: FC<CardProps> = ({
       {
         log.length === 1 && (
           <div className='px-4 py-2'>
-            <div className='whitespace-pre-line text-text-secondary'>
+            <div className='text-text-secondary whitespace-pre-line'>
               {log[0].text}
             </div>
           </div>
@@ -23,12 +23,12 @@ const Card: FC<CardProps> = ({
           <div>
             {
               log.map((item, index) => (
-                <div key={index} className='group/card mb-2 px-4 pt-2 pb-4 rounded-xl hover:bg-state-base-hover last-of-type:mb-0'>
-                  <div className='flex justify-between items-center h-8'>
+                <div key={index} className='group/card hover:bg-state-base-hover mb-2 rounded-xl px-4 pb-4 pt-2 last-of-type:mb-0'>
+                  <div className='flex h-8 items-center justify-between'>
                     <div className='font-semibold text-[#2D31A6]'>{item.role.toUpperCase()}</div>
-                    <CopyFeedbackNew className='hidden w-6 h-6 group-hover/card:block' content={item.text} />
+                    <CopyFeedbackNew className='hidden h-6 w-6 group-hover/card:block' content={item.text} />
                   </div>
-                  <div className='whitespace-pre-line text-text-secondary'>{item.text}</div>
+                  <div className='text-text-secondary whitespace-pre-line'>{item.text}</div>
                 </div>
               ))
             }
diff --git a/web/app/components/base/prompt-log-modal/index.tsx b/web/app/components/base/prompt-log-modal/index.tsx
index 4de5ab240c..98dd674a00 100644
--- a/web/app/components/base/prompt-log-modal/index.tsx
+++ b/web/app/components/base/prompt-log-modal/index.tsx
@@ -33,7 +33,7 @@ const PromptLogModal: FC<PromptLogModalProps> = ({
 
   return (
     <div
-      className='relative flex flex-col bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-xl shadow-xl z-10'
+      className='bg-components-panel-bg border-components-panel-border relative z-10 flex flex-col rounded-xl border-[0.5px] shadow-xl'
       style={{
         width: 480,
         position: 'fixed',
@@ -43,26 +43,26 @@ const PromptLogModal: FC<PromptLogModalProps> = ({
       }}
       ref={ref}
     >
-      <div className='shrink-0 flex justify-between items-center pl-6 pr-5 h-14 border-b border-divider-regular'>
-        <div className='text-base font-semibold text-text-primary'>PROMPT LOG</div>
+      <div className='border-divider-regular flex h-14 shrink-0 items-center justify-between border-b pl-6 pr-5'>
+        <div className='text-text-primary text-base font-semibold'>PROMPT LOG</div>
         <div className='flex items-center'>
           {
             currentLogItem.log?.length === 1 && (
               <>
-                <CopyFeedbackNew className='w-6 h-6' content={currentLogItem.log[0].text} />
-                <div className='mx-2.5 w-[1px] h-[14px] bg-divider-regular' />
+                <CopyFeedbackNew className='h-6 w-6' content={currentLogItem.log[0].text} />
+                <div className='bg-divider-regular mx-2.5 h-[14px] w-[1px]' />
               </>
             )
           }
           <div
             onClick={onCancel}
-            className='flex justify-center items-center w-6 h-6 cursor-pointer'
+            className='flex h-6 w-6 cursor-pointer items-center justify-center'
           >
-            <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+            <RiCloseLine className='text-text-tertiary h-4 w-4' />
           </div>
         </div>
       </div>
-      <div className='grow p-2 overflow-y-auto'>
+      <div className='grow overflow-y-auto p-2'>
         <Card log={currentLogItem.log} />
       </div>
     </div>
diff --git a/web/app/components/base/qrcode/index.tsx b/web/app/components/base/qrcode/index.tsx
index 711df2de2d..9c3943cc56 100644
--- a/web/app/components/base/qrcode/index.tsx
+++ b/web/app/components/base/qrcode/index.tsx
@@ -54,18 +54,18 @@ const ShareQRCode = ({ content }: Props) => {
     <Tooltip
       popupContent={t(`${prefixEmbedded}`) || ''}
     >
-      <div className='relative w-6 h-6' onClick={toggleQRCode}>
+      <div className='relative h-6 w-6' onClick={toggleQRCode}>
         <ActionButton>
-          <RiQrCodeLine className='w-4 h-4' />
+          <RiQrCodeLine className='h-4 w-4' />
         </ActionButton>
         {isShow && (
           <div
             ref={qrCodeRef}
-            className='absolute top-8 -right-8 z-10 w-[232px] flex flex-col items-center bg-components-panel-bg shadow-xs rounded-lg p-4'
+            className='bg-components-panel-bg shadow-xs absolute -right-8 top-8 z-10 flex w-[232px] flex-col items-center rounded-lg p-4'
             onClick={handlePanelClick}
           >
             <QRCode size={160} value={content} className='mb-2' />
-            <div className='flex items-center system-xs-regular'>
+            <div className='system-xs-regular flex items-center'>
               <div className='text-text-tertiary'>{t('appOverview.overview.appInfo.qrcode.scan')}</div>
               <div className='text-text-tertiary'>·</div>
               <div className='text-text-accent-secondary cursor-pointer' onClick={downloadQR}>{t('appOverview.overview.appInfo.qrcode.download')}</div>
diff --git a/web/app/components/base/radio-card/index.tsx b/web/app/components/base/radio-card/index.tsx
index b8e8440dd0..faf70a8a15 100644
--- a/web/app/components/base/radio-card/index.tsx
+++ b/web/app/components/base/radio-card/index.tsx
@@ -31,13 +31,13 @@ const RadioCard: FC<Props> = ({
   return (
     <div
       className={cn(
-        'relative p-3 border-[0.5px] border-components-option-card-option-border bg-components-option-card-option-bg rounded-xl cursor-pointer',
-        isChosen && 'border-[1.5px] bg-components-option-card-option-selected-bg',
+        'border-components-option-card-option-border bg-components-option-card-option-bg relative cursor-pointer rounded-xl border-[0.5px] p-3',
+        isChosen && 'bg-components-option-card-option-selected-bg border-[1.5px]',
         className,
       )}
     >
       <div className='flex gap-x-2' onClick={onChosen}>
-        <div className={cn(iconBgClassName, 'shrink-0 flex size-8 justify-center items-center rounded-lg shadow-md')}>
+        <div className={cn(iconBgClassName, 'flex size-8 shrink-0 items-center justify-center rounded-lg shadow-md')}>
           {icon}
         </div>
         <div className='grow'>
@@ -45,16 +45,16 @@ const RadioCard: FC<Props> = ({
           <div className='system-xs-regular text-text-tertiary'>{description}</div>
         </div>
         {!noRadio && (
-          <div className='absolute top-3 right-3'>
+          <div className='absolute right-3 top-3'>
             <div className={cn(
-              'w-4 h-4 border border-components-radio-border bg-components-radio-bg shadow-xs rounded-full',
-              isChosen && 'border-[5px] border-components-radio-border-checked',
+              'border-components-radio-border bg-components-radio-bg shadow-xs h-4 w-4 rounded-full border',
+              isChosen && 'border-components-radio-border-checked border-[5px]',
             )}></div>
           </div>
         )}
       </div>
       {((isChosen && chosenConfig) || noRadio) && (
-        <div className='flex gap-x-2 mt-2'>
+        <div className='mt-2 flex gap-x-2'>
           <div className='size-8 shrink-0'></div>
           <div className={cn(chosenConfigWrapClassName, 'grow')}>
             {chosenConfig}
diff --git a/web/app/components/base/radio-card/simple/index.tsx b/web/app/components/base/radio-card/simple/index.tsx
index f75850d75c..7bb5c0f19a 100644
--- a/web/app/components/base/radio-card/simple/index.tsx
+++ b/web/app/components/base/radio-card/simple/index.tsx
@@ -31,11 +31,11 @@ const RadioCard: FC<Props> = ({
       <div className='flex px-3 py-2'>
         {icon}
         <div>
-          <div className='flex justify-between items-center'>
-            <div className='leading-5 text-sm font-medium text-gray-900'>{title}</div>
+          <div className='flex items-center justify-between'>
+            <div className='text-sm font-medium leading-5 text-gray-900'>{title}</div>
             <div className={s.radio}></div>
           </div>
-          <div className='leading-[18px] text-xs font-normal text-gray-500'>{description}</div>
+          <div className='text-xs font-normal leading-[18px] text-gray-500'>{description}</div>
         </div>
       </div>
       {extra}
diff --git a/web/app/components/base/radio/component/radio/index.tsx b/web/app/components/base/radio/component/radio/index.tsx
index 2ecbf4d1b0..eddc53dd7f 100644
--- a/web/app/components/base/radio/component/radio/index.tsx
+++ b/web/app/components/base/radio/component/radio/index.tsx
@@ -51,7 +51,7 @@ export default function Radio({
     >
       {children && (
         <label className={
-          cn(labelClassName, 'text-sm cursor-pointer')
+          cn(labelClassName, 'cursor-pointer text-sm')
         }
         id={labelId}
         >
diff --git a/web/app/components/base/radio/ui.tsx b/web/app/components/base/radio/ui.tsx
index 772c3de8b1..9aabacb0c8 100644
--- a/web/app/components/base/radio/ui.tsx
+++ b/web/app/components/base/radio/ui.tsx
@@ -11,7 +11,7 @@ const RadioUI: FC<Props> = ({
   isChecked,
 }) => {
   return (
-    <div className={cn(isChecked ? 'border-[5px] border-components-radio-border-checked' : 'border-[2px] border-components-radio-border', 'w-4 h-4  rounded-full')}>
+    <div className={cn(isChecked ? 'border-components-radio-border-checked border-[5px]' : 'border-components-radio-border border-[2px]', 'h-4 w-4  rounded-full')}>
     </div>
   )
 }
diff --git a/web/app/components/base/regenerate-btn/index.tsx b/web/app/components/base/regenerate-btn/index.tsx
index aaf0206df6..7037d9cd82 100644
--- a/web/app/components/base/regenerate-btn/index.tsx
+++ b/web/app/components/base/regenerate-btn/index.tsx
@@ -15,13 +15,13 @@ const RegenerateBtn = ({ className, onClick }: Props) => {
         popupContent={t('appApi.regenerate') as string}
       >
         <div
-          className={'box-border p-0.5 flex items-center justify-center rounded-md bg-white cursor-pointer'}
+          className={'box-border flex cursor-pointer items-center justify-center rounded-md bg-white p-0.5'}
           onClick={() => onClick?.()}
           style={{
             boxShadow: '0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)',
           }}
         >
-          <Refresh className="p-[3.5px] w-6 h-6 text-[#667085] hover:bg-gray-50" />
+          <Refresh className="h-6 w-6 p-[3.5px] text-[#667085] hover:bg-gray-50" />
         </div>
       </Tooltip>
     </div>
diff --git a/web/app/components/base/search-input/index.tsx b/web/app/components/base/search-input/index.tsx
index 556a7bdf49..757358709e 100644
--- a/web/app/components/base/search-input/index.tsx
+++ b/web/app/components/base/search-input/index.tsx
@@ -27,23 +27,23 @@ const SearchInput: FC<SearchInputProps> = ({
 
   return (
     <div className={cn(
-      'group flex items-center px-2 h-8 rounded-lg bg-gray-200 hover:bg-gray-300 border border-transparent overflow-hidden',
-      focus && '!bg-white hover:bg-white shadow-xs !border-gray-300',
-      !focus && value && 'hover:!bg-gray-200 hover:!shadow-xs hover:!border-black/5',
-      white && '!bg-white hover:!bg-white shadow-xs !border-gray-300 hover:!border-gray-300',
+      'group flex h-8 items-center overflow-hidden rounded-lg border border-transparent bg-gray-200 px-2 hover:bg-gray-300',
+      focus && 'shadow-xs !border-gray-300 !bg-white hover:bg-white',
+      !focus && value && 'hover:!shadow-xs hover:!border-black/5 hover:!bg-gray-200',
+      white && 'shadow-xs !border-gray-300 !bg-white hover:!border-gray-300 hover:!bg-white',
       className,
     )}>
-      <div className="pointer-events-none shrink-0 flex items-center mr-1.5 justify-center w-4 h-4">
+      <div className="pointer-events-none mr-1.5 flex h-4 w-4 shrink-0 items-center justify-center">
         <RiSearchLine className="h-3.5 w-3.5 text-gray-500" aria-hidden="true" />
       </div>
       <input
         type="text"
         name="query"
         className={cn(
-          'grow block h-[18px] bg-gray-200 border-0 text-gray-700 text-[13px] placeholder:text-gray-500 appearance-none outline-none group-hover:bg-gray-300 caret-blue-600',
-          focus && '!bg-white hover:bg-white group-hover:bg-white placeholder:!text-gray-400',
+          'block h-[18px] grow appearance-none border-0 bg-gray-200 text-[13px] text-gray-700 caret-blue-600 outline-none placeholder:text-gray-500 group-hover:bg-gray-300',
+          focus && '!bg-white placeholder:!text-gray-400 hover:bg-white group-hover:bg-white',
           !focus && value && 'hover:!bg-gray-200 group-hover:!bg-gray-200',
-          white && '!bg-white hover:!bg-white group-hover:!bg-white placeholder:!text-gray-400',
+          white && '!bg-white placeholder:!text-gray-400 hover:!bg-white group-hover:!bg-white',
         )}
         placeholder={placeholder || t('common.operation.search')!}
         value={internalValue}
@@ -65,13 +65,13 @@ const SearchInput: FC<SearchInputProps> = ({
       />
       {value && (
         <div
-          className='shrink-0 flex items-center justify-center w-4 h-4 cursor-pointer group/clear'
+          className='group/clear flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center'
           onClick={() => {
             onChange('')
             setInternalValue('')
           }}
         >
-          <XCircle className='w-3.5 h-3.5 text-gray-400 group-hover/clear:text-gray-600' />
+          <XCircle className='h-3.5 w-3.5 text-gray-400 group-hover/clear:text-gray-600' />
         </div>
       )}
     </div>
diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx
index 9395ad6b87..9e069eba5f 100644
--- a/web/app/components/base/select/index.tsx
+++ b/web/app/components/base/select/index.tsx
@@ -99,10 +99,10 @@ const Select: FC<ISelectProps> = ({
         }
       }}>
       <div className={classNames('relative')}>
-        <div className='group text-text-secondary'>
+        <div className='text-text-secondary group'>
           {allowSearch
             ? <ComboboxInput
-              className={`w-full rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-state-base-hover group-hover:bg-state-base-hover ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
+              className={`w-full rounded-lg border-0 ${bgClassName} focus-visible:bg-state-base-hover group-hover:bg-state-base-hover py-1.5 pl-3 pr-10 shadow-sm focus-visible:outline-none sm:text-sm sm:leading-6 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
               onChange={(event) => {
                 if (!disabled)
                   setQuery(event.target.value)
@@ -115,7 +115,7 @@ const Select: FC<ISelectProps> = ({
                   setOpen(!open)
               }
             } className={classNames(`flex items-center h-9 w-full rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-state-base-hover group-hover:bg-state-base-hover`, optionClassName)}>
-              <div className='w-0 grow text-left truncate' title={selectedItem?.name}>{selectedItem?.name}</div>
+              <div className='w-0 grow truncate text-left' title={selectedItem?.name}>{selectedItem?.name}</div>
             </ComboboxButton>}
           <ComboboxButton className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none" onClick={
             () => {
@@ -128,7 +128,7 @@ const Select: FC<ISelectProps> = ({
         </div>
 
         {(filteredItems.length > 0 && open) && (
-          <ComboboxOptions className={`absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-components-panel-bg-blur backdrop-blur-sm py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm ${overlayClassName}`}>
+          <ComboboxOptions className={`bg-components-panel-bg-blur border-components-panel-border absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md border-[0.5px] px-1 py-1 text-base shadow-lg backdrop-blur-sm focus:outline-none sm:text-sm ${overlayClassName}`}>
             {filteredItems.map((item: Item) => (
               <ComboboxOption
                 key={item.value}
@@ -223,13 +223,13 @@ const SimpleSelect: FC<ISelectProps> = ({
                       setSelectedItem(null)
                       onSelect({ name: '', value: '' })
                     }}
-                    className="h-4 w-4 text-text-quaternary cursor-pointer"
+                    className="text-text-quaternary h-4 w-4 cursor-pointer"
                     aria-hidden="false"
                   />
                 )
                 : (
                   <ChevronDownIcon
-                    className="h-4 w-4 text-text-quaternary group-hover/simple-select:text-text-secondary"
+                    className="text-text-quaternary group-hover/simple-select:text-text-secondary h-4 w-4"
                     aria-hidden="true"
                   />
                 )}
@@ -345,7 +345,7 @@ const PortalSelect: FC<PortalSelectProps> = ({
                 {selectedItem?.name ?? localPlaceholder}
               </span>
               <div className='mx-0.5'>{installedValue && selectedItem && selectedItem.value !== installedValue && <Badge>{installedValue} {'->'} {selectedItem.value} </Badge>}</div>
-              <ChevronDownIcon className='shrink-0 h-4 w-4 text-text-quaternary group-hover:text-text-secondary' />
+              <ChevronDownIcon className='text-text-quaternary group-hover:text-text-secondary h-4 w-4 shrink-0' />
             </div>
           )}
 
@@ -358,7 +358,7 @@ const PortalSelect: FC<PortalSelectProps> = ({
             <div
               key={item.value}
               className={`
-                flex items-center justify-between px-2.5 h-9 cursor-pointer rounded-lg hover:bg-state-base-hover text-text-secondary
+                hover:bg-state-base-hover text-text-secondary flex h-9 cursor-pointer items-center justify-between rounded-lg px-2.5
                 ${item.value === value && 'bg-state-base-hover'}
               `}
               title={item.name}
@@ -373,11 +373,11 @@ const PortalSelect: FC<PortalSelectProps> = ({
               >
                 <span className='truncate'>{item.name}</span>
                 {item.value === installedValue && (
-                  <Badge uppercase={true} className='shrink-0 ml-1'>INSTALLED</Badge>
+                  <Badge uppercase={true} className='ml-1 shrink-0'>INSTALLED</Badge>
                 )}
               </span>
               {!hideChecked && item.value === value && (
-                <RiCheckLine className='shrink-0 h-4 w-4 text-text-accent' />
+                <RiCheckLine className='text-text-accent h-4 w-4 shrink-0' />
               )}
             </div>
           ))}
diff --git a/web/app/components/base/select/locale.tsx b/web/app/components/base/select/locale.tsx
index d2097c62ba..6d44725912 100644
--- a/web/app/components/base/select/locale.tsx
+++ b/web/app/components/base/select/locale.tsx
@@ -22,12 +22,12 @@ export default function Select({
     <div className="w-56 text-right">
       <Menu as="div" className="relative inline-block text-left">
         <div>
-          <MenuButton className="inline-flex w-full h-[44px]justify-center items-center
-          rounded-lg px-[10px] py-[6px]
-          text-gray-900 text-[13px] font-medium
-          border border-gray-200
+          <MenuButton className="h-[44px]justify-center inline-flex w-full items-center
+          rounded-lg border border-gray-200
+          px-[10px] py-[6px] text-[13px]
+          font-medium text-gray-900
           hover:bg-gray-100">
-            <GlobeAltIcon className="w-5 h-5 mr-1" aria-hidden="true" />
+            <GlobeAltIcon className="mr-1 h-5 w-5" aria-hidden="true" />
             {item?.name}
           </MenuButton>
         </div>
@@ -40,7 +40,7 @@ export default function Select({
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <MenuItems className="absolute right-0 mt-2 w-[200px] origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
+          <MenuItems className="absolute right-0 z-10 mt-2 w-[200px] origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
             <div className="px-1 py-1 ">
               {items.map((item) => {
                 return <MenuItem key={item.value}>
@@ -75,7 +75,7 @@ export function InputSelect({
     <div className="w-full">
       <Menu as="div" className="w-full">
         <div>
-          <MenuButton className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder:text-gray-400 sm:text-sm h-[38px] text-left">
+          <MenuButton className="block h-[38px] w-full appearance-none rounded-md border border-gray-300 px-3 py-2 text-left shadow-sm placeholder:text-gray-400 sm:text-sm">
             {item?.name}
           </MenuButton>
         </div>
@@ -88,12 +88,12 @@ export function InputSelect({
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <MenuItems className="absolute right-0 mt-2 w-full origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
+          <MenuItems className="absolute right-0 z-10 mt-2 w-full origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
             <div className="px-1 py-1 ">
               {items.map((item) => {
                 return <MenuItem key={item.value}>
                   <button
-                    className={'data-[active]:bg-gray-100 group flex w-full items-center rounded-md px-2 py-2 text-sm'}
+                    className={'group flex w-full items-center rounded-md px-2 py-2 text-sm data-[active]:bg-gray-100'}
                     onClick={() => {
                       onChange && onChange(item.value)
                     }}
diff --git a/web/app/components/base/slider/index.tsx b/web/app/components/base/slider/index.tsx
index 2b8f181633..2bd5500f30 100644
--- a/web/app/components/base/slider/index.tsx
+++ b/web/app/components/base/slider/index.tsx
@@ -31,9 +31,9 @@ const Slider: React.FC<ISliderProps> = ({
     min={min || 0}
     max={max || 100}
     step={step || 1}
-    className={cn('relative slider', className)}
-    thumbClassName={cn('absolute top-[-9px] w-2 h-5 border-[0.5px] border-components-slider-knob-border rounded-[3px] bg-components-slider-knob shadow-sm  focus:outline-none', !disabled && 'cursor-pointer', thumbClassName)}
-    trackClassName={cn('h-0.5 rounded-full slider-track', trackClassName)}
+    className={cn('slider relative', className)}
+    thumbClassName={cn('border-components-slider-knob-border bg-components-slider-knob absolute top-[-9px] h-5 w-2 rounded-[3px] border-[0.5px] shadow-sm  focus:outline-none', !disabled && 'cursor-pointer', thumbClassName)}
+    trackClassName={cn('slider-track h-0.5 rounded-full', trackClassName)}
     onChange={onChange}
   />
 }
diff --git a/web/app/components/base/sort/index.tsx b/web/app/components/base/sort/index.tsx
index 5b30a0edb8..2b29b8fbd7 100644
--- a/web/app/components/base/sort/index.tsx
+++ b/web/app/components/base/sort/index.tsx
@@ -47,32 +47,32 @@ const Sort: FC<Props> = ({
             className='block'
           >
             <div className={cn(
-              'flex items-center px-2 py-1 rounded-l-lg bg-components-input-bg-normal cursor-pointer hover:bg-state-base-hover-alt',
+              'bg-components-input-bg-normal hover:bg-state-base-hover-alt flex cursor-pointer items-center rounded-l-lg px-2 py-1',
               open && '!bg-state-base-hover-alt hover:bg-state-base-hover-alt',
             )}>
-              <div className='p-1 flex items-center gap-0.5'>
+              <div className='flex items-center gap-0.5 p-1'>
                 <div className='text-text-tertiary system-sm-regular'>{t('appLog.filter.sortBy')}</div>
                 <div className={cn('system-sm-regular text-text-tertiary', !!value && 'text-text-secondary')}>
                   {triggerContent}
                 </div>
               </div>
-              <RiArrowDownSLine className='h-4 w-4 text-text-tertiary' />
+              <RiArrowDownSLine className='text-text-tertiary h-4 w-4' />
             </div>
           </PortalToFollowElemTrigger>
           <PortalToFollowElemContent className='z-[1002]'>
-            <div className='relative w-[240px] bg-components-panel-bg-blur rounded-xl border-[0.5px] border-components-panel-border shadow-lg'>
-              <div className='p-1 max-h-72 overflow-auto'>
+            <div className='bg-components-panel-bg-blur border-components-panel-border relative w-[240px] rounded-xl border-[0.5px] shadow-lg'>
+              <div className='max-h-72 overflow-auto p-1'>
                 {items.map(item => (
                   <div
                     key={item.value}
-                    className='flex items-center gap-2 pl-3 py-[6px] px-2 rounded-lg cursor-pointer hover:bg-state-base-hover'
+                    className='hover:bg-state-base-hover flex cursor-pointer items-center gap-2 rounded-lg px-2 py-[6px] pl-3'
                     onClick={() => {
                       onSelect(`${order}${item.value}`)
                       setOpen(false)
                     }}
                   >
-                    <div title={item.name} className='grow text-text-secondary system-sm-medium truncate'>{item.name}</div>
-                    {value === item.value && <RiCheckLine className='shrink-0 w-4 h-4 text-util-colors-blue-light-blue-light-600' />}
+                    <div title={item.name} className='text-text-secondary system-sm-medium grow truncate'>{item.name}</div>
+                    {value === item.value && <RiCheckLine className='text-util-colors-blue-light-blue-light-600 h-4 w-4 shrink-0' />}
                   </div>
                 ))}
               </div>
@@ -80,9 +80,9 @@ const Sort: FC<Props> = ({
           </PortalToFollowElemContent>
         </div>
       </PortalToFollowElem>
-      <div className='ml-px p-2 rounded-r-lg bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover cursor-pointer' onClick={() => onSelect(`${order ? '' : '-'}${value}`)}>
-        {!order && <RiSortAsc className='w-4 h-4 text-components-button-tertiary-text' />}
-        {order && <RiSortDesc className='w-4 h-4 text-components-button-tertiary-text' />}
+      <div className='bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover ml-px cursor-pointer rounded-r-lg p-2' onClick={() => onSelect(`${order ? '' : '-'}${value}`)}>
+        {!order && <RiSortAsc className='text-components-button-tertiary-text h-4 w-4' />}
+        {order && <RiSortDesc className='text-components-button-tertiary-text h-4 w-4' />}
       </div>
     </div>
 
diff --git a/web/app/components/base/spinner/index.tsx b/web/app/components/base/spinner/index.tsx
index 53de4eda43..e1568c279d 100644
--- a/web/app/components/base/spinner/index.tsx
+++ b/web/app/components/base/spinner/index.tsx
@@ -10,7 +10,7 @@ type Props = {
 const Spinner: FC<Props> = ({ loading = false, children, className }) => {
   return (
     <div
-      className={`inline-block text-gray-200 h-4 w-4 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] ${loading ? 'motion-reduce:animate-[spin_1.5s_linear_infinite]' : 'hidden'} ${className ?? ''}`}
+      className={`inline-block h-4 w-4 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] text-gray-200 ${loading ? 'motion-reduce:animate-[spin_1.5s_linear_infinite]' : 'hidden'} ${className ?? ''}`}
       role="status"
     >
       <span
diff --git a/web/app/components/base/svg/index.tsx b/web/app/components/base/svg/index.tsx
index bf7cb08d46..cf280b386b 100644
--- a/web/app/components/base/svg/index.tsx
+++ b/web/app/components/base/svg/index.tsx
@@ -12,10 +12,10 @@ const SVGBtn = ({
 }: ISVGBtnProps) => {
   return (
     <div
-      className={'box-border p-0.5 flex items-center justify-center rounded-md bg-white cursor-pointer'}
+      className={'box-border flex cursor-pointer items-center justify-center rounded-md bg-white p-0.5'}
       onClick={() => { setIsSVG(prevIsSVG => !prevIsSVG) }}
     >
-      <div className={`w-6 h-6 rounded-md hover:bg-gray-50 ${s.svgIcon} ${isSVG ? s.svgIconed : ''}`}></div>
+      <div className={`h-6 w-6 rounded-md hover:bg-gray-50 ${s.svgIcon} ${isSVG ? s.svgIconed : ''}`}></div>
     </div>
   )
 }
diff --git a/web/app/components/base/tab-header/index.tsx b/web/app/components/base/tab-header/index.tsx
index 47edc5d561..395cd7f48f 100644
--- a/web/app/components/base/tab-header/index.tsx
+++ b/web/app/components/base/tab-header/index.tsx
@@ -25,7 +25,7 @@ const TabHeader: FC<ITabHeaderProps> = ({
   const renderItem = ({ id, name, extra }: Item) => (
     <div
       key={id}
-      className={cn(id === value ? `${s.itemActive} text-gray-900` : 'text-gray-500', 'relative flex items-center pb-1.5 leading-6 cursor-pointer')}
+      className={cn(id === value ? `${s.itemActive} text-gray-900` : 'text-gray-500', 'relative flex cursor-pointer items-center pb-1.5 leading-6')}
       onClick={() => onChange(id)}
     >
       <div className='text-base font-semibold'>{name}</div>
diff --git a/web/app/components/base/tab-slider-new/index.tsx b/web/app/components/base/tab-slider-new/index.tsx
index 767a553700..2713e4545d 100644
--- a/web/app/components/base/tab-slider-new/index.tsx
+++ b/web/app/components/base/tab-slider-new/index.tsx
@@ -25,7 +25,7 @@ const TabSliderNew: FC<TabSliderProps> = ({
           key={option.value}
           onClick={() => onChange(option.value)}
           className={cn(
-            'mr-1 px-3 py-[7px] h-[32px] flex items-center rounded-lg border-[0.5px] border-transparent text-text-tertiary text-[13px] font-medium leading-[18px] cursor-pointer hover:bg-components-main-nav-nav-button-bg-active',
+            'text-text-tertiary hover:bg-components-main-nav-nav-button-bg-active mr-1 flex h-[32px] cursor-pointer items-center rounded-lg border-[0.5px] border-transparent px-3 py-[7px] text-[13px] font-medium leading-[18px]',
             value === option.value && 'bg-components-main-nav-nav-button-bg-active border-components-main-nav-nav-button-border shadow-xs text-components-main-nav-nav-button-text-active',
           )}
         >
diff --git a/web/app/components/base/tab-slider-plain/index.tsx b/web/app/components/base/tab-slider-plain/index.tsx
index b9b39657af..7b26f0c15d 100644
--- a/web/app/components/base/tab-slider-plain/index.tsx
+++ b/web/app/components/base/tab-slider-plain/index.tsx
@@ -35,7 +35,7 @@ const Item: FC<ItemProps> = ({
     >
       <div className={cn(isActive ? 'text-text-primary' : 'text-text-tertiary')}>{option.text}</div>
       {isActive && (
-        <div className='absolute bottom-0 left-0 right-0 h-0.5 bg-util-colors-blue-brand-blue-brand-600'></div>
+        <div className='bg-util-colors-blue-brand-blue-brand-600 absolute bottom-0 left-0 right-0 h-0.5'></div>
       )}
     </div>
   )
@@ -61,7 +61,7 @@ const TabSlider: FC<Props> = ({
   smallItem,
 }) => {
   return (
-    <div className={cn(className, !noBorderBottom && 'border-b border-divider-subtle', 'flex  space-x-6')}>
+    <div className={cn(className, !noBorderBottom && 'border-divider-subtle border-b', 'flex  space-x-6')}>
       {options.map(option => (
         <Item
           isActive={option.value === value}
diff --git a/web/app/components/base/tab-slider/index.tsx b/web/app/components/base/tab-slider/index.tsx
index 1b4e42e0d7..e3fa74547f 100644
--- a/web/app/components/base/tab-slider/index.tsx
+++ b/web/app/components/base/tab-slider/index.tsx
@@ -43,9 +43,9 @@ const TabSlider: FC<TabSliderProps> = ({
   }, [value, options, pluginList])
 
   return (
-    <div className={cn(className, 'inline-flex p-0.5 rounded-[10px] bg-components-segmented-control-bg-normal relative items-center justify-center')}>
+    <div className={cn(className, 'bg-components-segmented-control-bg-normal relative inline-flex items-center justify-center rounded-[10px] p-0.5')}>
       <div
-        className="absolute top-0.5 bottom-0.5 left-0 right-0 bg-components-panel-bg rounded-[10px] transition-transform duration-300 ease-in-out shadows-shadow-xs"
+        className="bg-components-panel-bg shadows-shadow-xs absolute bottom-0.5 left-0 right-0 top-0.5 rounded-[10px] transition-transform duration-300 ease-in-out"
         style={sliderStyle}
       />
       {options.map((option, index) => (
@@ -53,7 +53,7 @@ const TabSlider: FC<TabSliderProps> = ({
           id={`tab-${index}`}
           key={option.value}
           className={cn(
-            'relative flex justify-center items-center px-2.5 py-1.5 gap-1 rounded-[10px] transition-colors duration-300 ease-in-out cursor-pointer z-10',
+            'relative z-10 flex cursor-pointer items-center justify-center gap-1 rounded-[10px] px-2.5 py-1.5 transition-colors duration-300 ease-in-out',
             'system-md-semibold',
             index === activeIndex
               ? 'text-text-primary'
diff --git a/web/app/components/base/tag-input/index.tsx b/web/app/components/base/tag-input/index.tsx
index e3e5cef732..544db64759 100644
--- a/web/app/components/base/tag-input/index.tsx
+++ b/web/app/components/base/tag-input/index.tsx
@@ -70,18 +70,18 @@ const TagInput: FC<TagInputProps> = ({
   }
 
   return (
-    <div className={cn('flex flex-wrap', !isInWorkflow && 'min-w-[200px]', isSpecialMode ? 'bg-gray-100 rounded-lg pb-1 pl-1' : '')}>
+    <div className={cn('flex flex-wrap', !isInWorkflow && 'min-w-[200px]', isSpecialMode ? 'rounded-lg bg-gray-100 pb-1 pl-1' : '')}>
       {
         (items || []).map((item, index) => (
           <div
             key={item}
-            className={cn('flex items-center mr-1 mt-1 pl-1.5 pr-1 py-1 system-xs-regular text-text-secondary border border-divider-deep bg-components-badge-white-to-dark rounded-md')}
+            className={cn('system-xs-regular text-text-secondary border-divider-deep bg-components-badge-white-to-dark mr-1 mt-1 flex items-center rounded-md border py-1 pl-1.5 pr-1')}
           >
             {item}
             {
               !disableRemove && (
-                <div className='flex items-center justify-center w-4 h-4 cursor-pointer' onClick={() => handleRemove(index)}>
-                  <RiCloseLine className='ml-0.5 w-3.5 h-3.5 text-text-tertiary' />
+                <div className='flex h-4 w-4 cursor-pointer items-center justify-center' onClick={() => handleRemove(index)}>
+                  <RiCloseLine className='text-text-tertiary ml-0.5 h-3.5 w-3.5' />
                 </div>
               )
             }
@@ -90,16 +90,16 @@ const TagInput: FC<TagInputProps> = ({
       }
       {
         !disableAdd && (
-          <div className={cn('flex items-center gap-x-0.5 mt-1 group/tag-add', !isSpecialMode ? 'px-1.5 rounded-md border border-dashed border-divider-deep' : '')}>
-            {!isSpecialMode && !focused && <RiAddLine className='w-3.5 h-3.5 text-text-placeholder group-hover/tag-add:text-text-secondary' />}
+          <div className={cn('group/tag-add mt-1 flex items-center gap-x-0.5', !isSpecialMode ? 'border-divider-deep rounded-md border border-dashed px-1.5' : '')}>
+            {!isSpecialMode && !focused && <RiAddLine className='text-text-placeholder group-hover/tag-add:text-text-secondary h-3.5 w-3.5' />}
             <AutosizeInput
-              inputClassName={cn('outline-none appearance-none placeholder:text-text-placeholder caret-[#295EFF] group-hover/tag-add:placeholder:text-text-secondary', isSpecialMode ? 'bg-transparent' : '')}
+              inputClassName={cn('placeholder:text-text-placeholder group-hover/tag-add:placeholder:text-text-secondary appearance-none caret-[#295EFF] outline-none', isSpecialMode ? 'bg-transparent' : '')}
               className={cn(
                 !isInWorkflow && 'max-w-[300px]',
                 isInWorkflow && 'max-w-[146px]',
                 `
-                py-1 rounded-md overflow-hidden system-xs-regular
-                ${focused && isSpecialMode && 'px-1.5 border border-dashed border-divider-deep'}
+                system-xs-regular overflow-hidden rounded-md py-1
+                ${focused && isSpecialMode && 'border-divider-deep border border-dashed px-1.5'}
               `)}
               onFocus={() => setFocused(true)}
               onBlur={handleBlur}
diff --git a/web/app/components/base/tag-management/filter.tsx b/web/app/components/base/tag-management/filter.tsx
index 00408d3b81..7562ab1d24 100644
--- a/web/app/components/base/tag-management/filter.tsx
+++ b/web/app/components/base/tag-management/filter.tsx
@@ -78,37 +78,37 @@ const TagFilter: FC<TagFilterProps> = ({
           className='block'
         >
           <div className={cn(
-            'flex items-center gap-1 px-2 h-8 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal cursor-pointer',
+            'bg-components-input-bg-normal flex h-8 cursor-pointer items-center gap-1 rounded-lg border-[0.5px] border-transparent px-2',
             !open && !!value.length && 'shadow-xs',
             open && !!value.length && 'shadow-xs',
           )}>
             <div className='p-[1px]'>
-              <Tag01 className='h-3.5 w-3.5 text-text-tertiary' />
+              <Tag01 className='text-text-tertiary h-3.5 w-3.5' />
             </div>
-            <div className='text-[13px] leading-[18px] text-text-secondary'>
+            <div className='text-text-secondary text-[13px] leading-[18px]'>
               {!value.length && t('common.tag.placeholder')}
               {!!value.length && currentTag?.name}
             </div>
             {value.length > 1 && (
-              <div className='text-xs font-medium leading-[18px] text-text-tertiary'>{`+${value.length - 1}`}</div>
+              <div className='text-text-tertiary text-xs font-medium leading-[18px]'>{`+${value.length - 1}`}</div>
             )}
             {!value.length && (
               <div className='p-[1px]'>
-                <RiArrowDownSLine className='h-3.5 w-3.5 text-text-tertiary' />
+                <RiArrowDownSLine className='text-text-tertiary h-3.5 w-3.5' />
               </div>
             )}
             {!!value.length && (
-              <div className='p-[1px] cursor-pointer group/clear' onClick={(e) => {
+              <div className='group/clear cursor-pointer p-[1px]' onClick={(e) => {
                 e.stopPropagation()
                 onChange([])
               }}>
-                <XCircle className='h-3.5 w-3.5 text-text-tertiary group-hover/clear:text-text-secondary' />
+                <XCircle className='text-text-tertiary group-hover/clear:text-text-secondary h-3.5 w-3.5' />
               </div>
             )}
           </div>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1002]'>
-          <div className='relative w-[240px] bg-components-panel-bg-blur backdrop-blur-[5px] rounded-lg border-[0.5px] border-components-panel-border shadow-lg'>
+          <div className='bg-components-panel-bg-blur border-components-panel-border relative w-[240px] rounded-lg border-[0.5px] shadow-lg backdrop-blur-[5px]'>
             <div className='p-2'>
               <Input
                 showLeftIcon
@@ -118,20 +118,20 @@ const TagFilter: FC<TagFilterProps> = ({
                 onClear={() => handleKeywordsChange('')}
               />
             </div>
-            <div className='p-1 max-h-72 overflow-auto'>
+            <div className='max-h-72 overflow-auto p-1'>
               {filteredTagList.map(tag => (
                 <div
                   key={tag.id}
-                  className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-state-base-hover'
+                  className='hover:bg-state-base-hover flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pl-3 pr-2'
                   onClick={() => selectTag(tag)}
                 >
-                  <div title={tag.name} className='grow text-sm text-text-tertiary leading-5 truncate'>{tag.name}</div>
-                  {value.includes(tag.id) && <Check className='shrink-0 w-4 h-4 text-text-secondary' />}
+                  <div title={tag.name} className='text-text-tertiary grow truncate text-sm leading-5'>{tag.name}</div>
+                  {value.includes(tag.id) && <Check className='text-text-secondary h-4 w-4 shrink-0' />}
                 </div>
               ))}
               {!filteredTagList.length && (
-                <div className='p-3 flex flex-col items-center gap-1'>
-                  <Tag03 className='h-6 w-6 text-text-tertiary' />
+                <div className='flex flex-col items-center gap-1 p-3'>
+                  <Tag03 className='text-text-tertiary h-6 w-6' />
                   <div className='text-text-tertiary text-xs leading-[14px]'>{t('common.tag.noTag')}</div>
                 </div>
               )}
diff --git a/web/app/components/base/tag-management/index.tsx b/web/app/components/base/tag-management/index.tsx
index 26d18ffcf7..cb15698c16 100644
--- a/web/app/components/base/tag-management/index.tsx
+++ b/web/app/components/base/tag-management/index.tsx
@@ -60,17 +60,17 @@ const TagManagementModal = ({ show, type }: TagManagementModalProps) => {
 
   return (
     <Modal
-      className='px-8 py-6 !max-w-[600px] !w-[600px] rounded-xl'
+      className='!w-[600px] !max-w-[600px] rounded-xl px-8 py-6'
       isShow={show}
       onClose={() => setShowTagManagementModal(false)}
     >
       <div className='relative pb-2 text-xl font-semibold leading-[30px] text-gray-900'>{t('common.tag.manageTags')}</div>
-      <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={() => setShowTagManagementModal(false)}>
-        <RiCloseLine className='w-4 h-4 text-gray-500' />
+      <div className='absolute right-4 top-4 cursor-pointer p-2' onClick={() => setShowTagManagementModal(false)}>
+        <RiCloseLine className='h-4 w-4 text-gray-500' />
       </div>
       <div className='mt-3 flex flex-wrap gap-2'>
         <input
-          className='shrink-0 w-[100px] px-2 py-1 rounded-lg border border-dashed border-gray-200 text-sm leading-5 text-gray-700 outline-none appearance-none  placeholder:text-gray-300 caret-primary-600 focus:border-solid'
+          className='caret-primary-600 w-[100px] shrink-0 appearance-none rounded-lg border border-dashed border-gray-200 px-2 py-1 text-sm leading-5 text-gray-700  outline-none placeholder:text-gray-300 focus:border-solid'
           placeholder={t('common.tag.addNew') || ''}
           autoFocus
           value={name}
diff --git a/web/app/components/base/tag-management/selector.tsx b/web/app/components/base/tag-management/selector.tsx
index 01e9eb162f..637b1d1f1e 100644
--- a/web/app/components/base/tag-management/selector.tsx
+++ b/web/app/components/base/tag-management/selector.tsx
@@ -125,8 +125,8 @@ const Panel = (props: PanelProps) => {
   })
 
   return (
-    <div className='relative w-full bg-white rounded-lg border-[0.5px] border-gray-200'>
-      <div className='p-2 border-b-[0.5px] border-black/5'>
+    <div className='relative w-full rounded-lg border-[0.5px] border-gray-200 bg-white'>
+      <div className='border-b-[0.5px] border-black/5 p-2'>
         <Input
           showLeftIcon
           showClearIcon
@@ -138,9 +138,9 @@ const Panel = (props: PanelProps) => {
       </div>
       {keywords && notExisted && (
         <div className='p-1'>
-          <div className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-gray-100' onClick={createNewTag}>
+          <div className='flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-gray-100' onClick={createNewTag}>
             <RiAddLine className='h-4 w-4 text-gray-500' />
-            <div className='grow text-sm text-gray-700 leading-5 truncate'>
+            <div className='grow truncate text-sm leading-5 text-gray-700'>
               {`${t('common.tag.create')} `}
               <span className='font-medium'>{`"${keywords}"`}</span>
             </div>
@@ -148,14 +148,14 @@ const Panel = (props: PanelProps) => {
         </div>
       )}
       {keywords && notExisted && filteredTagList.length > 0 && (
-        <Divider className='!h-[1px] !my-0' />
+        <Divider className='!my-0 !h-[1px]' />
       )}
       {(filteredTagList.length > 0 || filteredSelectedTagList.length > 0) && (
-        <div className='p-1 max-h-[172px] overflow-y-auto'>
+        <div className='max-h-[172px] overflow-y-auto p-1'>
           {filteredSelectedTagList.map(tag => (
             <div
               key={tag.id}
-              className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-gray-100'
+              className='flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-gray-100'
               onClick={() => selectTag(tag)}
             >
               <Checkbox
@@ -163,13 +163,13 @@ const Panel = (props: PanelProps) => {
                 checked={selectedTagIDs.includes(tag.id)}
                 onCheck={() => { }}
               />
-              <div title={tag.name} className='grow text-sm text-gray-700 leading-5 truncate'>{tag.name}</div>
+              <div title={tag.name} className='grow truncate text-sm leading-5 text-gray-700'>{tag.name}</div>
             </div>
           ))}
           {filteredTagList.map(tag => (
             <div
               key={tag.id}
-              className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-gray-100'
+              className='flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-gray-100'
               onClick={() => selectTag(tag)}
             >
               <Checkbox
@@ -177,24 +177,24 @@ const Panel = (props: PanelProps) => {
                 checked={selectedTagIDs.includes(tag.id)}
                 onCheck={() => { }}
               />
-              <div title={tag.name} className='grow text-sm text-gray-700 leading-5 truncate'>{tag.name}</div>
+              <div title={tag.name} className='grow truncate text-sm leading-5 text-gray-700'>{tag.name}</div>
             </div>
           ))}
         </div>
       )}
       {!keywords && !filteredTagList.length && !filteredSelectedTagList.length && (
         <div className='p-1'>
-          <div className='p-3 flex flex-col items-center gap-1'>
+          <div className='flex flex-col items-center gap-1 p-3'>
             <Tag03 className='h-6 w-6 text-gray-300' />
-            <div className='text-gray-500 text-xs leading-[14px]'>{t('common.tag.noTag')}</div>
+            <div className='text-xs leading-[14px] text-gray-500'>{t('common.tag.noTag')}</div>
           </div>
         </div>
       )}
-      <Divider className='!h-[1px] !my-0' />
+      <Divider className='!my-0 !h-[1px]' />
       <div className='p-1'>
-        <div className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-gray-100' onClick={() => setShowTagManagementModal(true)}>
+        <div className='flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-gray-100' onClick={() => setShowTagManagementModal(true)}>
           <Tag03 className='h-4 w-4 text-gray-500' />
-          <div className='grow text-sm text-gray-700 leading-5 truncate'>
+          <div className='grow truncate text-sm leading-5 text-gray-700'>
             {t('common.tag.manageTags')}
           </div>
         </div>
@@ -231,10 +231,10 @@ const TagSelector: FC<TagSelectorProps> = ({
   const Trigger = () => {
     return (
       <div className={cn(
-        'group/tip relative w-full flex items-center gap-1 px-2 py-[7px] rounded-md cursor-pointer hover:bg-gray-100',
+        'group/tip relative flex w-full cursor-pointer items-center gap-1 rounded-md px-2 py-[7px] hover:bg-gray-100',
       )}>
-        <Tag01 className='shrink-0 w-3 h-3' />
-        <div className='grow text-xs text-start leading-[18px] font-normal truncate'>
+        <Tag01 className='h-3 w-3 shrink-0' />
+        <div className='grow truncate text-start text-xs font-normal leading-[18px]'>
           {!triggerContent ? t('common.tag.addTag') : triggerContent}
         </div>
       </div>
@@ -261,11 +261,11 @@ const TagSelector: FC<TagSelectorProps> = ({
           btnClassName={open =>
             cn(
               open ? '!bg-gray-100 !text-gray-700' : '!bg-transparent',
-              '!w-full !p-0 !border-0 !text-gray-500 hover:!bg-gray-100 hover:!text-gray-700',
+              '!w-full !border-0 !p-0 !text-gray-500 hover:!bg-gray-100 hover:!text-gray-700',
             )
           }
           popupClassName='!w-full !ring-0'
-          className={'!w-full h-fit !z-20'}
+          className={'!z-20 h-fit !w-full'}
         />
       )}
     </>
diff --git a/web/app/components/base/tag-management/tag-item-editor.tsx b/web/app/components/base/tag-management/tag-item-editor.tsx
index 0605f28cf6..c0eb450917 100644
--- a/web/app/components/base/tag-management/tag-item-editor.tsx
+++ b/web/app/components/base/tag-management/tag-item-editor.tsx
@@ -103,29 +103,29 @@ const TagItemEditor: FC<TagItemEditorProps> = ({
 
   return (
     <>
-      <div className={cn('shrink-0 flex items-center gap-0.5 pr-1 pl-2 py-1 rounded-lg border border-gray-200 text-sm leading-5 text-gray-700')}>
+      <div className={cn('flex shrink-0 items-center gap-0.5 rounded-lg border border-gray-200 py-1 pl-2 pr-1 text-sm leading-5 text-gray-700')}>
         {!isEditing && (
           <>
             <div className='text-sm leading-5 text-gray-700'>
               {tag.name}
             </div>
-            <div className='shrink-0 px-1 text-sm leading-4.5 text-gray-500 font-medium'>{tag.binding_count}</div>
-            <div className='group/edit shrink-0 p-1 rounded-md cursor-pointer hover:bg-black/5' onClick={() => setIsEditing(true)}>
-              <RiEditLine className='w-3 h-3 text-gray-500 group-hover/edit:text-gray-800' />
+            <div className='leading-4.5 shrink-0 px-1 text-sm font-medium text-gray-500'>{tag.binding_count}</div>
+            <div className='group/edit shrink-0 cursor-pointer rounded-md p-1 hover:bg-black/5' onClick={() => setIsEditing(true)}>
+              <RiEditLine className='h-3 w-3 text-gray-500 group-hover/edit:text-gray-800' />
             </div>
-            <div className='group/remove shrink-0 p-1 rounded-md cursor-pointer hover:bg-black/5' onClick={() => {
+            <div className='group/remove shrink-0 cursor-pointer rounded-md p-1 hover:bg-black/5' onClick={() => {
               if (tag.binding_count)
                 setShowRemoveModal(true)
               else
                 handleRemove()
             }}>
-              <RiDeleteBinLine className='w-3 h-3 text-gray-500 group-hover/remove:text-gray-800' />
+              <RiDeleteBinLine className='h-3 w-3 text-gray-500 group-hover/remove:text-gray-800' />
             </div>
           </>
         )}
         {isEditing && (
           <input
-            className='shrink-0 outline-none appearance-none placeholder:text-gray-300 caret-primary-600'
+            className='caret-primary-600 shrink-0 appearance-none outline-none placeholder:text-gray-300'
             autoFocus
             value={name}
             onChange={e => setName(e.target.value)}
diff --git a/web/app/components/base/tag-management/tag-remove-modal.tsx b/web/app/components/base/tag-management/tag-remove-modal.tsx
index 3e4d08fe3d..62461e0d7f 100644
--- a/web/app/components/base/tag-management/tag-remove-modal.tsx
+++ b/web/app/components/base/tag-management/tag-remove-modal.tsx
@@ -21,24 +21,24 @@ const TagRemoveModal = ({ show, tag, onConfirm, onClose }: TagRemoveModalProps)
 
   return (
     <Modal
-      className={cn('p-8 max-w-[480px] w-[480px]', s.bg)}
+      className={cn('w-[480px] max-w-[480px] p-8', s.bg)}
       isShow={show}
       onClose={() => { }}
     >
-      <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
-        <RiCloseLine className='w-4 h-4 text-gray-500' />
+      <div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onClose}>
+        <RiCloseLine className='h-4 w-4 text-gray-500' />
       </div>
-      <div className='w-12 h-12 p-3 bg-white rounded-xl border-[0.5px] border-gray-100 shadow-xl'>
-        <AlertTriangle className='w-6 h-6 text-[rgb(247,144,9)]' />
+      <div className='h-12 w-12 rounded-xl border-[0.5px] border-gray-100 bg-white p-3 shadow-xl'>
+        <AlertTriangle className='h-6 w-6 text-[rgb(247,144,9)]' />
       </div>
       <div className='mt-3 text-xl font-semibold leading-[30px] text-gray-900'>
         {`${t('common.tag.delete')} `}
         <span>{`"${tag.name}"`}</span>
       </div>
-      <div className='my-1 text-gray-500 text-sm leading-5'>
+      <div className='my-1 text-sm leading-5 text-gray-500'>
         {t('common.tag.deleteTip')}
       </div>
-      <div className='pt-6 flex items-center justify-end'>
+      <div className='flex items-center justify-end pt-6'>
         <Button className='mr-2' onClick={onClose}>{t('common.operation.cancel')}</Button>
         <Button className='border-red-700' variant="warning" onClick={onConfirm}>{t('common.operation.delete')}</Button>
       </div>
diff --git a/web/app/components/base/textarea/index.tsx b/web/app/components/base/textarea/index.tsx
index 13e7af9603..cd711ca435 100644
--- a/web/app/components/base/textarea/index.tsx
+++ b/web/app/components/base/textarea/index.tsx
@@ -32,9 +32,9 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         ref={ref}
         style={styleCss}
         className={cn(
-          'w-full min-h-20 p-2 bg-components-input-bg-normal border border-transparent text-components-input-text-filled hover:bg-components-input-bg-hover hover:border-components-input-border-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:text-components-input-text-placeholder appearance-none outline-none caret-primary-600',
+          'bg-components-input-bg-normal text-components-input-text-filled hover:bg-components-input-bg-hover hover:border-components-input-border-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:text-components-input-text-placeholder caret-primary-600 min-h-20 w-full appearance-none border border-transparent p-2 outline-none',
           textareaVariants({ size }),
-          disabled && 'bg-components-input-bg-disabled border-transparent text-components-input-text-filled-disabled cursor-not-allowed hover:bg-components-input-bg-disabled hover:border-transparent',
+          disabled && 'bg-components-input-bg-disabled text-components-input-text-filled-disabled hover:bg-components-input-bg-disabled cursor-not-allowed border-transparent hover:border-transparent',
           destructive && 'bg-components-input-bg-destructive border-components-input-border-destructive text-components-input-text-filled hover:bg-components-input-bg-destructive hover:border-components-input-border-destructive focus:bg-components-input-bg-destructive focus:border-components-input-border-destructive',
           className,
         )}
diff --git a/web/app/components/base/toast/index.tsx b/web/app/components/base/toast/index.tsx
index 4526eaafcc..4285f98bc1 100644
--- a/web/app/components/base/toast/index.tsx
+++ b/web/app/components/base/toast/index.tsx
@@ -59,13 +59,13 @@ const Toast = ({
     }`}
     />
     <div className={`flex ${size === 'md' ? 'gap-1' : 'gap-0.5'}`}>
-      <div className={`flex justify-center items-center ${size === 'md' ? 'p-0.5' : 'p-1'}`}>
-        {type === 'success' && <RiCheckboxCircleFill className={`${size === 'md' ? 'w-5 h-5' : 'w-4 h-4'} text-text-success`} aria-hidden="true" />}
-        {type === 'error' && <RiErrorWarningFill className={`${size === 'md' ? 'w-5 h-5' : 'w-4 h-4'} text-text-destructive`} aria-hidden="true" />}
-        {type === 'warning' && <RiAlertFill className={`${size === 'md' ? 'w-5 h-5' : 'w-4 h-4'} text-text-warning-secondary`} aria-hidden="true" />}
-        {type === 'info' && <RiInformation2Fill className={`${size === 'md' ? 'w-5 h-5' : 'w-4 h-4'} text-text-accent`} aria-hidden="true" />}
+      <div className={`flex items-center justify-center ${size === 'md' ? 'p-0.5' : 'p-1'}`}>
+        {type === 'success' && <RiCheckboxCircleFill className={`${size === 'md' ? 'h-5 w-5' : 'h-4 w-4'} text-text-success`} aria-hidden="true" />}
+        {type === 'error' && <RiErrorWarningFill className={`${size === 'md' ? 'h-5 w-5' : 'h-4 w-4'} text-text-destructive`} aria-hidden="true" />}
+        {type === 'warning' && <RiAlertFill className={`${size === 'md' ? 'h-5 w-5' : 'h-4 w-4'} text-text-warning-secondary`} aria-hidden="true" />}
+        {type === 'info' && <RiInformation2Fill className={`${size === 'md' ? 'h-5 w-5' : 'h-4 w-4'} text-text-accent`} aria-hidden="true" />}
       </div>
-      <div className={`flex py-1 ${size === 'md' ? 'px-1' : 'px-0.5'} flex-col items-start gap-1 grow`}>
+      <div className={`flex py-1 ${size === 'md' ? 'px-1' : 'px-0.5'} grow flex-col items-start gap-1`}>
         <div className='text-text-primary system-sm-semibold'>{message}</div>
         {children && <div className='text-text-secondary system-xs-regular'>
           {children}
@@ -74,7 +74,7 @@ const Toast = ({
       </div>
       {close
         && (<ActionButton className='z-[1000]' onClick={close}>
-          <RiCloseLine className='w-4 h-4 shrink-0 text-text-tertiary' />
+          <RiCloseLine className='text-text-tertiary h-4 w-4 shrink-0' />
         </ActionButton>)
       }
     </div>
diff --git a/web/app/components/base/tooltip/content.tsx b/web/app/components/base/tooltip/content.tsx
index fe357ccfa6..97e410704e 100644
--- a/web/app/components/base/tooltip/content.tsx
+++ b/web/app/components/base/tooltip/content.tsx
@@ -13,9 +13,9 @@ export const ToolTipContent: FC<ToolTipContentProps> = ({
   return (
     <div className='w-[180px]'>
       {title && (
-        <div className='mb-1.5 text-text-secondary font-semibold'>{title}</div>
+        <div className='text-text-secondary mb-1.5 font-semibold'>{title}</div>
       )}
-      <div className='mb-1.5 text-text-tertiary'>{children}</div>
+      <div className='text-text-tertiary mb-1.5'>{children}</div>
       {action && <div className='text-text-accent cursor-pointer'>{action}</div>}
     </div>
   )
diff --git a/web/app/components/base/tooltip/index.tsx b/web/app/components/base/tooltip/index.tsx
index 65b5a99077..43e646cfa0 100644
--- a/web/app/components/base/tooltip/index.tsx
+++ b/web/app/components/base/tooltip/index.tsx
@@ -91,14 +91,14 @@ const Tooltip: FC<TooltipProps> = ({
         onMouseLeave={() => triggerMethod === 'hover' && handleLeave(true)}
         asChild={asChild}
       >
-        {children || <div className={triggerClassName || 'p-[1px] w-3.5 h-3.5 shrink-0'}><RiQuestionLine className='text-text-quaternary hover:text-text-tertiary w-full h-full' /></div>}
+        {children || <div className={triggerClassName || 'h-3.5 w-3.5 shrink-0 p-[1px]'}><RiQuestionLine className='text-text-quaternary hover:text-text-tertiary h-full w-full' /></div>}
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent
         className="z-[9999]"
       >
         {popupContent && (<div
           className={cn(
-            !noDecoration && 'relative px-3 py-2 system-xs-regular text-text-tertiary bg-components-panel-bg rounded-md shadow-lg break-words',
+            !noDecoration && 'system-xs-regular text-text-tertiary bg-components-panel-bg relative break-words rounded-md px-3 py-2 shadow-lg',
             popupClassName,
           )}
           onMouseEnter={() => triggerMethod === 'hover' && setHoverPopup()}
diff --git a/web/app/components/base/voice-input/index.tsx b/web/app/components/base/voice-input/index.tsx
index 37ebe3dd7e..736bbcd257 100644
--- a/web/app/components/base/voice-input/index.tsx
+++ b/web/app/components/base/voice-input/index.tsx
@@ -166,10 +166,10 @@ const VoiceInput = ({
 
   return (
     <div className={cn(s.wrapper, 'absolute inset-0 rounded-xl')}>
-      <div className='absolute inset-[1.5px] flex items-center pl-[14.5px] pr-[6.5px] py-[14px] bg-primary-25 rounded-[10.5px] overflow-hidden'>
-        <canvas id='voice-input-record' className='absolute left-0 bottom-0 w-full h-4' />
+      <div className='bg-primary-25 absolute inset-[1.5px] flex items-center overflow-hidden rounded-[10.5px] py-[14px] pl-[14.5px] pr-[6.5px]'>
+        <canvas id='voice-input-record' className='absolute bottom-0 left-0 h-4 w-full' />
         {
-          startConvert && <RiLoader2Line className='animate-spin mr-2 w-4 h-4 text-primary-700' />
+          startConvert && <RiLoader2Line className='text-primary-700 mr-2 h-4 w-4 animate-spin' />
         }
         <div className='grow'>
           {
@@ -190,20 +190,20 @@ const VoiceInput = ({
         {
           startRecord && (
             <div
-              className='flex justify-center items-center mr-1 w-8 h-8 hover:bg-primary-100 rounded-lg  cursor-pointer'
+              className='hover:bg-primary-100 mr-1 flex h-8 w-8 cursor-pointer items-center justify-center  rounded-lg'
               onClick={handleStopRecorder}
             >
-              <StopCircle className='w-5 h-5 text-primary-600' />
+              <StopCircle className='text-primary-600 h-5 w-5' />
             </div>
           )
         }
         {
           startConvert && (
             <div
-              className='flex justify-center items-center mr-1 w-8 h-8 hover:bg-gray-200 rounded-lg  cursor-pointer'
+              className='mr-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg  hover:bg-gray-200'
               onClick={onCancel}
             >
-              <RiCloseLine className='w-4 h-4 text-gray-500' />
+              <RiCloseLine className='h-4 w-4 text-gray-500' />
             </div>
           )
         }
diff --git a/web/app/components/billing/annotation-full/index.tsx b/web/app/components/billing/annotation-full/index.tsx
index 26d149a828..88ed5f1716 100644
--- a/web/app/components/billing/annotation-full/index.tsx
+++ b/web/app/components/billing/annotation-full/index.tsx
@@ -13,9 +13,9 @@ const AnnotationFull: FC = () => {
 
   return (
     <GridMask wrapperClassName='rounded-lg' canvasClassName='rounded-lg' gradientClassName='rounded-lg'>
-      <div className='mt-6 px-3.5 py-4 border-2 border-solid border-transparent rounded-lg shadow-md flex flex-col transition-all duration-200 ease-in-out cursor-pointer'>
-        <div className='flex justify-between items-center'>
-          <div className={cn(s.textGradient, 'leading-[24px] text-base font-semibold')}>
+      <div className='mt-6 flex cursor-pointer flex-col rounded-lg border-2 border-solid border-transparent px-3.5 py-4 shadow-md transition-all duration-200 ease-in-out'>
+        <div className='flex items-center justify-between'>
+          <div className={cn(s.textGradient, 'text-base font-semibold leading-[24px]')}>
             <div>{t('billing.annotatedResponse.fullTipLine1')}</div>
             <div>{t('billing.annotatedResponse.fullTipLine2')}</div>
           </div>
diff --git a/web/app/components/billing/annotation-full/modal.tsx b/web/app/components/billing/annotation-full/modal.tsx
index 274e709985..324a4dcc36 100644
--- a/web/app/components/billing/annotation-full/modal.tsx
+++ b/web/app/components/billing/annotation-full/modal.tsx
@@ -27,9 +27,9 @@ const AnnotationFullModal: FC<Props> = ({
       className='!p-0'
     >
       <GridMask wrapperClassName='rounded-lg' canvasClassName='rounded-lg' gradientClassName='rounded-lg'>
-        <div className='mt-6 px-7 py-6 border-2 border-solid border-transparent rounded-lg shadow-md flex flex-col transition-all duration-200 ease-in-out cursor-pointer'>
-          <div className='flex justify-between items-center'>
-            <div className={cn(s.textGradient, 'leading-[27px] text-[18px] font-semibold')}>
+        <div className='mt-6 flex cursor-pointer flex-col rounded-lg border-2 border-solid border-transparent px-7 py-6 shadow-md transition-all duration-200 ease-in-out'>
+          <div className='flex items-center justify-between'>
+            <div className={cn(s.textGradient, 'text-[18px] font-semibold leading-[27px]')}>
               <div>{t('billing.annotatedResponse.fullTipLine1')}</div>
               <div>{t('billing.annotatedResponse.fullTipLine2')}</div>
             </div>
diff --git a/web/app/components/billing/apps-full-in-dialog/index.tsx b/web/app/components/billing/apps-full-in-dialog/index.tsx
index b3601dbb10..b218216361 100644
--- a/web/app/components/billing/apps-full-in-dialog/index.tsx
+++ b/web/app/components/billing/apps-full-in-dialog/index.tsx
@@ -17,11 +17,11 @@ const AppsFull: FC<{ loc: string; className?: string }> = ({
   return (
     <GridMask wrapperClassName='rounded-lg' canvasClassName='rounded-lg' gradientClassName='rounded-lg'>
       <div className={cn(
-        'mt-6 px-3.5 py-4 border-2 border-solid border-transparent rounded-lg shadow-md flex flex-col transition-all duration-200 ease-in-out cursor-pointer',
+        'mt-6 flex cursor-pointer flex-col rounded-lg border-2 border-solid border-transparent px-3.5 py-4 shadow-md transition-all duration-200 ease-in-out',
         className,
       )}>
-        <div className='flex justify-between items-center'>
-          <div className={cn(s.textGradient, 'leading-[24px] text-base font-semibold')}>
+        <div className='flex items-center justify-between'>
+          <div className={cn(s.textGradient, 'text-base font-semibold leading-[24px]')}>
             <div>{t('billing.apps.fullTipLine1')}</div>
             <div>{t('billing.apps.fullTipLine2')}</div>
           </div>
diff --git a/web/app/components/billing/apps-full/index.tsx b/web/app/components/billing/apps-full/index.tsx
index 9167d46352..790ce9e390 100644
--- a/web/app/components/billing/apps-full/index.tsx
+++ b/web/app/components/billing/apps-full/index.tsx
@@ -12,12 +12,12 @@ const AppsFull: FC = () => {
 
   return (
     <GridMask wrapperClassName='rounded-lg' canvasClassName='rounded-lg' gradientClassName='rounded-lg'>
-      <div className='col-span-1 px-3.5 pt-3.5 border-2 border-solid border-transparent rounded-lg shadow-xs min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg'>
-        <div className={cn(s.textGradient, 'leading-[24px] text-base font-semibold')}>
+      <div className='shadow-xs col-span-1 flex min-h-[160px] cursor-pointer flex-col rounded-lg border-2 border-solid border-transparent px-3.5 pt-3.5 transition-all duration-200 ease-in-out hover:shadow-lg'>
+        <div className={cn(s.textGradient, 'text-base font-semibold leading-[24px]')}>
           <div>{t('billing.apps.fullTipLine1')}</div>
           <div>{t('billing.apps.fullTipLine2')}</div>
         </div>
-        <div className='flex mt-8'>
+        <div className='mt-8 flex'>
           <UpgradeBtn loc='app-create' />
         </div>
       </div>
diff --git a/web/app/components/billing/billing-page/index.tsx b/web/app/components/billing/billing-page/index.tsx
index 41068d516e..28852623e0 100644
--- a/web/app/components/billing/billing-page/index.tsx
+++ b/web/app/components/billing/billing-page/index.tsx
@@ -25,12 +25,12 @@ const Billing: FC = () => {
     <div>
       <PlanComp loc={'billing-page'} />
       {enableBilling && isCurrentWorkspaceManager && billingUrl && (
-        <a className='mt-5 flex px-6 justify-between h-12 items-center bg-gray-50 rounded-xl cursor-pointer' href={billingUrl} target='_blank' rel='noopener noreferrer'>
+        <a className='mt-5 flex h-12 cursor-pointer items-center justify-between rounded-xl bg-gray-50 px-6' href={billingUrl} target='_blank' rel='noopener noreferrer'>
           <div className='flex items-center'>
-            <ReceiptList className='w-4 h-4 text-gray-700' />
+            <ReceiptList className='h-4 w-4 text-gray-700' />
             <div className='ml-2 text-sm font-normal text-gray-700'>{t('billing.viewBilling')}</div>
           </div>
-          <RiExternalLinkLine className='w-3 h-3' />
+          <RiExternalLinkLine className='h-3 w-3' />
         </a>
       )}
     </div>
diff --git a/web/app/components/billing/header-billing-btn/index.tsx b/web/app/components/billing/header-billing-btn/index.tsx
index a5bc310d9b..f34fa0bce4 100644
--- a/web/app/components/billing/header-billing-btn/index.tsx
+++ b/web/app/components/billing/header-billing-btn/index.tsx
@@ -49,7 +49,7 @@ const HeaderBillingBtn: FC<Props> = ({
       onClick={handleClick}
       className={cn(
         classNames,
-        'flex items-center h-[22px] px-2 rounded-md border text-xs font-semibold uppercase',
+        'flex h-[22px] items-center rounded-md border px-2 text-xs font-semibold uppercase',
         isDisplayOnly ? 'cursor-default' : 'cursor-pointer',
       )}
     >
diff --git a/web/app/components/billing/plan/index.tsx b/web/app/components/billing/plan/index.tsx
index baf4110127..25e7e2e75d 100644
--- a/web/app/components/billing/plan/index.tsx
+++ b/web/app/components/billing/plan/index.tsx
@@ -54,29 +54,29 @@ const PlanComp: FC<Props> = ({
 
   return (
     <div
-      className='rounded-xl border border-white select-none'
+      className='select-none rounded-xl border border-white'
       style={{
         background: typeStyle[type].bg,
         boxShadow: '5px 7px 12px 0px rgba(0, 0, 0, 0.06)',
       }}
     >
-      <div className='flex justify-between px-6 py-5 items-center'>
+      <div className='flex items-center justify-between px-6 py-5'>
         <div>
           <div
-            className='leading-[18px] text-xs font-normal opacity-70'
+            className='text-xs font-normal leading-[18px] opacity-70'
             style={{
               color: 'rgba(0, 0, 0, 0.64)',
             }}
           >
             {t('billing.currentPlan')}
           </div>
-          <div className={cn(typeStyle[type].textClassNames, 'leading-[125%] text-lg font-semibold uppercase')}>
+          <div className={cn(typeStyle[type].textClassNames, 'text-lg font-semibold uppercase leading-[125%]')}>
             {t(`billing.plans.${type}.name`)}
           </div>
         </div>
         {(!isInHeader || (isInHeader && type !== Plan.sandbox)) && (
           <UpgradeBtn
-            className='flex-shrink-0'
+            className='shrink-0'
             isPlain={type !== Plan.sandbox}
             loc={loc}
           />
@@ -111,7 +111,7 @@ const PlanComp: FC<Props> = ({
         />
         {isInHeader && type === Plan.sandbox && (
           <UpgradeBtn
-            className='flex-shrink-0 my-3'
+            className='my-3 shrink-0'
             isFull
             size='lg'
             isPlain={type !== Plan.sandbox}
diff --git a/web/app/components/billing/pricing/index.tsx b/web/app/components/billing/pricing/index.tsx
index 9b5e5e7453..63f5418e32 100644
--- a/web/app/components/billing/pricing/index.tsx
+++ b/web/app/components/billing/pricing/index.tsx
@@ -26,19 +26,19 @@ const Pricing: FC<Props> = ({
 
   return createPortal(
     <div
-      className='fixed inset-0 flex bg-white z-[1000] overflow-auto'
+      className='fixed inset-0 z-[1000] flex overflow-auto bg-white'
       onClick={e => e.stopPropagation()}
     >
       <GridMask wrapperClassName='grow'>
-        <div className='grow width-[0] mt-6 p-6 flex flex-col items-center'>
-          <div className='mb-3 leading-[38px] text-[30px] font-semibold text-gray-900'>
+        <div className='width-[0] mt-6 flex grow flex-col items-center p-6'>
+          <div className='mb-3 text-[30px] font-semibold leading-[38px] text-gray-900'>
             {t('billing.plansCommon.title')}
           </div>
           <SelectPlanRange
             value={planRange}
             onChange={setPlanRange}
           />
-          <div className='mt-8 pb-6 w-full justify-center flex-nowrap flex space-x-3'>
+          <div className='mt-8 flex w-full flex-nowrap justify-center space-x-3 pb-6'>
             <PlanItem
               currentPlan={plan.type}
               plan={Plan.sandbox}
@@ -68,10 +68,10 @@ const Pricing: FC<Props> = ({
       </GridMask>
 
       <div
-        className='fixed top-6 right-6 flex items-center justify-center w-10 h-10 bg-black/[0.05] rounded-full backdrop-blur-[2px] cursor-pointer z-[1001]'
+        className='fixed right-6 top-6 z-[1001] flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-black/[0.05] backdrop-blur-[2px]'
         onClick={onCancel}
       >
-        <RiCloseLine className='w-4 h-4 text-gray-900' />
+        <RiCloseLine className='h-4 w-4 text-gray-900' />
       </div>
     </div>,
     document.body,
diff --git a/web/app/components/billing/pricing/plan-item.tsx b/web/app/components/billing/pricing/plan-item.tsx
index d64141b791..0cc2f710f3 100644
--- a/web/app/components/billing/pricing/plan-item.tsx
+++ b/web/app/components/billing/pricing/plan-item.tsx
@@ -23,8 +23,8 @@ type Props = {
 
 const KeyValue = ({ label, value, tooltip }: { label: string; value: string | number | React.JSX.Element; tooltip?: string }) => {
   return (
-    <div className='mt-3.5 leading-[125%] text-[13px] font-medium'>
-      <div className='flex items-center text-gray-500 space-x-1'>
+    <div className='mt-3.5 text-[13px] font-medium leading-[125%]'>
+      <div className='flex items-center space-x-1 text-gray-500'>
         <div>{label}</div>
         {tooltip && (
           <Tooltip
@@ -104,7 +104,7 @@ const PlanItem: FC<Props> = ({
     })[plan]
   })()
   const comingSoon = (
-    <div className='leading-[12px] text-[9px] font-semibold text-[#3538CD] uppercase'>{t('billing.plansCommon.comingSoon')}</div>
+    <div className='text-[9px] font-semibold uppercase leading-[12px] text-[#3538CD]'>{t('billing.plansCommon.comingSoon')}</div>
   )
   const supportContent = (() => {
     switch (plan) {
@@ -211,13 +211,13 @@ const PlanItem: FC<Props> = ({
     }
   }
   return (
-    <div className={cn(isMostPopularPlan ? 'bg-[#0086C9] p-0.5' : 'pt-7', 'flex flex-col min-w-[290px] w-[290px] rounded-xl')}>
+    <div className={cn(isMostPopularPlan ? 'bg-[#0086C9] p-0.5' : 'pt-7', 'flex w-[290px] min-w-[290px] flex-col rounded-xl')}>
       {isMostPopularPlan && (
-        <div className='flex items-center h-7 justify-center leading-[12px] text-xs font-medium text-[#F5F8FF]'>{t('billing.plansCommon.mostPopular')}</div>
+        <div className='flex h-7 items-center justify-center text-xs font-medium leading-[12px] text-[#F5F8FF]'>{t('billing.plansCommon.mostPopular')}</div>
       )}
-      <div className={cn(style[plan].bg, 'grow px-6 py-6 rounded-[10px]')}>
-        <div className={cn(style[plan].title, 'mb-1 leading-[125%] text-lg font-semibold')}>{t(`${i18nPrefix}.name`)}</div>
-        <div className={cn(isFreePlan ? 'mb-5 text-[#FB6514]' : 'mb-4 text-gray-500', 'h-8 leading-[125%] text-[13px] font-normal')}>{t(`${i18nPrefix}.description`)}</div>
+      <div className={cn(style[plan].bg, 'grow rounded-[10px] px-6 py-6')}>
+        <div className={cn(style[plan].title, 'mb-1 text-lg font-semibold leading-[125%]')}>{t(`${i18nPrefix}.name`)}</div>
+        <div className={cn(isFreePlan ? 'mb-5 text-[#FB6514]' : 'mb-4 text-gray-500', 'h-8 text-[13px] font-normal leading-[125%]')}>{t(`${i18nPrefix}.description`)}</div>
 
         {/* Price */}
         {isFreePlan && (
@@ -227,17 +227,17 @@ const PlanItem: FC<Props> = ({
           <div className={priceClassName}>{t('billing.plansCommon.contactSales')}</div>
         )}
         {!isFreePlan && !isEnterprisePlan && (
-          <div className='flex items-end h-9'>
+          <div className='flex h-9 items-end'>
             <div className={priceClassName}>${isYear ? planInfo.price * 10 : planInfo.price}</div>
             <div className='ml-1'>
-              {isYear && <div className='leading-[18px] text-xs font-medium text-[#F26725]'>{t('billing.plansCommon.save')}${planInfo.price * 2}</div>}
-              <div className='leading-[18px] text-[15px] font-normal text-gray-500'>/{t(`billing.plansCommon.${!isYear ? 'month' : 'year'}`)}</div>
+              {isYear && <div className='text-xs font-medium leading-[18px] text-[#F26725]'>{t('billing.plansCommon.save')}${planInfo.price * 2}</div>}
+              <div className='text-[15px] font-normal leading-[18px] text-gray-500'>/{t(`billing.plansCommon.${!isYear ? 'month' : 'year'}`)}</div>
             </div>
           </div>
         )}
 
         <div
-          className={cn(isMostPopularPlan && !isCurrent && '!bg-[#444CE7] !text-white !border !border-[#3538CD] shadow-sm', isPlanDisabled ? 'opacity-30' : `${style[plan].hoverAndActive} cursor-pointer`, 'mt-4 flex h-11 items-center justify-center border-[2px] border-gray-900 rounded-3xl text-sm font-semibold text-gray-900')}
+          className={cn(isMostPopularPlan && !isCurrent && '!border !border-[#3538CD] !bg-[#444CE7] !text-white shadow-sm', isPlanDisabled ? 'opacity-30' : `${style[plan].hoverAndActive} cursor-pointer`, 'mt-4 flex h-11 items-center justify-center rounded-3xl border-[2px] border-gray-900 text-sm font-semibold text-gray-900')}
           onClick={handleGetPayUrl}
         >
           {btnText}
@@ -245,7 +245,7 @@ const PlanItem: FC<Props> = ({
 
         <div className='my-4 h-[1px] bg-black/5'></div>
 
-        <div className='leading-[125%] text-[13px] font-normal text-gray-900'>
+        <div className='text-[13px] font-normal leading-[125%] text-gray-900'>
           {t(`${i18nPrefix}.includesTitle`)}
         </div>
         <KeyValue
diff --git a/web/app/components/billing/pricing/select-plan-range.tsx b/web/app/components/billing/pricing/select-plan-range.tsx
index 8caffaa9d2..fbb6d23972 100644
--- a/web/app/components/billing/pricing/select-plan-range.tsx
+++ b/web/app/components/billing/pricing/select-plan-range.tsx
@@ -16,7 +16,7 @@ type Props = {
 const ITem: FC<{ isActive: boolean; value: PlanRange; text: string; onClick: (value: PlanRange) => void }> = ({ isActive, value, text, onClick }) => {
   return (
     <div
-      className={cn(isActive ? 'bg-[#155EEF] text-white' : 'text-gray-900', 'flex items-center px-8 h-11 rounded-[32px] cursor-pointer text-[15px] font-medium')}
+      className={cn(isActive ? 'bg-[#155EEF] text-white' : 'text-gray-900', 'flex h-11 cursor-pointer items-center rounded-[32px] px-8 text-[15px] font-medium')}
       onClick={() => onClick(value)}
     >
       {text}
@@ -40,9 +40,9 @@ const SelectPlanRange: FC<Props> = ({
 
   return (
     <div>
-      <div className='mb-4 leading-[18px] text-sm font-medium text-[#F26725]'>{t('billing.plansCommon.yearlyTip')}</div>
+      <div className='mb-4 text-sm font-medium leading-[18px] text-[#F26725]'>{t('billing.plansCommon.yearlyTip')}</div>
 
-      <div className='inline-flex relative p-1 rounded-full bg-[#F5F8FF] border border-black/5'>
+      <div className='relative inline-flex rounded-full border border-black/5 bg-[#F5F8FF] p-1'>
         <ITem isActive={value === PlanRange.monthly} value={PlanRange.monthly} text={t('billing.plansCommon.planRange.monthly') as string} onClick={onChange} />
         <ITem isActive={value === PlanRange.yearly} value={PlanRange.yearly} text={t('billing.plansCommon.planRange.yearly') as string} onClick={onChange} />
         <div className='absolute right-0 top-[-16px] '>
diff --git a/web/app/components/billing/priority-label/index.tsx b/web/app/components/billing/priority-label/index.tsx
index 6ecac4a79e..04a6874815 100644
--- a/web/app/components/billing/priority-label/index.tsx
+++ b/web/app/components/billing/priority-label/index.tsx
@@ -43,8 +43,8 @@ const PriorityLabel = ({ className }: PriorityLabelProps) => {
       </div>
     }>
       <span className={cn(`
-        shrink-0 flex items-center ml-1 px-1 h-[18px] rounded-[5px] border border-text-accent-secondary
-        text-2xs font-medium text-text-accent-secondary
+        border-text-accent-secondary text-2xs text-text-accent-secondary ml-1 flex h-[18px] shrink-0 items-center rounded-[5px]
+        border px-1 font-medium
       `, className)}>
         {
           plan.type === Plan.professional && (
diff --git a/web/app/components/billing/progress-bar/index.tsx b/web/app/components/billing/progress-bar/index.tsx
index ec2ffcf627..dfa758d2cd 100644
--- a/web/app/components/billing/progress-bar/index.tsx
+++ b/web/app/components/billing/progress-bar/index.tsx
@@ -7,7 +7,7 @@ const ProgressBar = ({
   color = '#2970FF',
 }: ProgressBarProps) => {
   return (
-    <div className='bg-[#F2F4F7] rounded-[4px] overflow-hidden'>
+    <div className='overflow-hidden rounded-[4px] bg-[#F2F4F7]'>
       <div
         className='h-2 rounded-[4px]'
         style={{
diff --git a/web/app/components/billing/upgrade-btn/index.tsx b/web/app/components/billing/upgrade-btn/index.tsx
index f080e6bbc4..0a2e74737c 100644
--- a/web/app/components/billing/upgrade-btn/index.tsx
+++ b/web/app/components/billing/upgrade-btn/index.tsx
@@ -22,10 +22,10 @@ const PlainBtn = ({ className, onClick }: { className?: string; onClick: () => v
 
   return (
     <div
-      className={cn(className, 'flex items-center h-8 px-3 rounded-lg border border-gray-200 bg-white shadow-sm cursor-pointer')}
+      className={cn(className, 'flex h-8 cursor-pointer items-center rounded-lg border border-gray-200 bg-white px-3 shadow-sm')}
       onClick={onClick}
     >
-      <div className='leading-[18px] text-[13px] font-medium text-gray-700'>
+      <div className='text-[13px] font-medium leading-[18px] text-gray-700'>
         {t('billing.upgradeBtn.plain')}
       </div>
     </div>
@@ -66,7 +66,7 @@ const UpgradeBtn: FC<Props> = ({
       allowHover={true}
       onClick={onClick}
     >
-      <SparklesSoft className='flex items-center py-[1px] pl-[3px] w-3.5 h-3.5 text-components-premium-badge-indigo-text-stop-0' />
+      <SparklesSoft className='text-components-premium-badge-indigo-text-stop-0 flex h-3.5 w-3.5 items-center py-[1px] pl-[3px]' />
       <div className='system-xs-medium'>
         <span className='p-1'>
           {t(`billing.upgradeBtn.${isShort ? 'encourageShort' : 'encourage'}`)}
diff --git a/web/app/components/billing/usage-info/index.tsx b/web/app/components/billing/usage-info/index.tsx
index ee41508ea6..aac8aa643d 100644
--- a/web/app/components/billing/usage-info/index.tsx
+++ b/web/app/components/billing/usage-info/index.tsx
@@ -42,10 +42,10 @@ const UsageInfo: FC<Props> = ({
   })()
   return (
     <div className={className}>
-      <div className='flex justify-between h-5 items-center'>
+      <div className='flex h-5 items-center justify-between'>
         <div className='flex items-center'>
-          <Icon className='w-4 h-4 text-gray-700' />
-          <div className='mx-1 leading-5 text-sm font-medium text-gray-700'>{name}</div>
+          <Icon className='h-4 w-4 text-gray-700' />
+          <div className='mx-1 text-sm font-medium leading-5 text-gray-700'>{name}</div>
           {tooltip && (
             <Tooltip
               popupContent={
@@ -56,7 +56,7 @@ const UsageInfo: FC<Props> = ({
             />
           )}
         </div>
-        <div className='flex items-center leading-[18px] text-[13px] font-normal'>
+        <div className='flex items-center text-[13px] font-normal leading-[18px]'>
           <div style={{
             color: percent < LOW ? '#344054' : color,
           }}>{usage}{unit}</div>
diff --git a/web/app/components/billing/vector-space-full/index.tsx b/web/app/components/billing/vector-space-full/index.tsx
index 1abd27962d..58d9db068a 100644
--- a/web/app/components/billing/vector-space-full/index.tsx
+++ b/web/app/components/billing/vector-space-full/index.tsx
@@ -13,9 +13,9 @@ const VectorSpaceFull: FC = () => {
 
   return (
     <GridMask wrapperClassName='border border-gray-200 rounded-xl' canvasClassName='rounded-xl' gradientClassName='rounded-xl'>
-      <div className='py-5 px-6'>
-        <div className='flex justify-between items-center'>
-          <div className={cn(s.textGradient, 'leading-[24px] text-base font-semibold')}>
+      <div className='px-6 py-5'>
+        <div className='flex items-center justify-between'>
+          <div className={cn(s.textGradient, 'text-base font-semibold leading-[24px]')}>
             <div>{t('billing.vectorSpace.fullTip')}</div>
             <div>{t('billing.vectorSpace.fullSolution')}</div>
           </div>
diff --git a/web/app/components/custom/custom-page/index.tsx b/web/app/components/custom/custom-page/index.tsx
index 75d592389d..a4e3afb8f9 100644
--- a/web/app/components/custom/custom-page/index.tsx
+++ b/web/app/components/custom/custom-page/index.tsx
@@ -19,8 +19,8 @@ const CustomPage = () => {
       {
         showBillingTip && (
           <GridMask canvasClassName='!rounded-xl'>
-            <div className='flex justify-between mb-1 px-6 py-5 h-[88px] shadow-md rounded-xl border-[0.5px] border-gray-200'>
-              <div className={`${s.textGradient} leading-[24px] text-base font-semibold`}>
+            <div className='mb-1 flex h-[88px] justify-between rounded-xl border-[0.5px] border-gray-200 px-6 py-5 shadow-md'>
+              <div className={`${s.textGradient} text-base font-semibold leading-[24px]`}>
                 <div>{t('custom.upgradeTip.prefix')}</div>
                 <div>{t('custom.upgradeTip.suffix')}</div>
               </div>
@@ -32,7 +32,7 @@ const CustomPage = () => {
       <CustomWebAppBrand />
       {
         showContact && (
-          <div className='absolute bottom-0 h-[50px] leading-[50px] text-xs text-gray-500'>
+          <div className='absolute bottom-0 h-[50px] text-xs leading-[50px] text-gray-500'>
             {t('custom.customize.prefix')}
             <a className='text-[#155EEF]' href={contactSalesUrl} target='_blank' rel='noopener noreferrer'>{t('custom.customize.contactUs')}</a>
             {t('custom.customize.suffix')}
diff --git a/web/app/components/custom/custom-web-app-brand/index.tsx b/web/app/components/custom/custom-web-app-brand/index.tsx
index 0804f2f425..0a119db24c 100644
--- a/web/app/components/custom/custom-web-app-brand/index.tsx
+++ b/web/app/components/custom/custom-web-app-brand/index.tsx
@@ -108,23 +108,23 @@ const CustomWebAppBrand = () => {
   return (
     <div className='py-4'>
       <div className='mb-2 text-sm font-medium text-gray-900'>{t('custom.webapp.title')}</div>
-      <div className='relative mb-4 pl-4 pb-6 pr-[119px] rounded-xl border-[0.5px] border-black/8 shadow-xs bg-gray-50 overflow-hidden'>
-        <div className={`${s.mask} absolute top-0 left-0 w-full -bottom-2 z-10`}></div>
-        <div className='flex items-center -mt-2 mb-4 p-6 bg-white rounded-xl'>
-          <div className='flex items-center px-4 w-[125px] h-9 rounded-lg bg-primary-600 border-[0.5px] border-primary-700 shadow-xs'>
-            <MessageDotsCircle className='shrink-0 mr-2 w-4 h-4 text-white' />
-            <div className='grow h-2 rounded-sm bg-white opacity-50' />
+      <div className='border-black/8 shadow-xs relative mb-4 overflow-hidden rounded-xl border-[0.5px] bg-gray-50 pb-6 pl-4 pr-[119px]'>
+        <div className={`${s.mask} absolute -bottom-2 left-0 top-0 z-10 w-full`}></div>
+        <div className='-mt-2 mb-4 flex items-center rounded-xl bg-white p-6'>
+          <div className='bg-primary-600 border-primary-700 shadow-xs flex h-9 w-[125px] items-center rounded-lg border-[0.5px] px-4'>
+            <MessageDotsCircle className='mr-2 h-4 w-4 shrink-0 text-white' />
+            <div className='h-2 grow rounded-sm bg-white opacity-50' />
           </div>
         </div>
-        <div className='flex items-center h-5 justify-between'>
-          <div className='w-[369px] h-1.5 rounded-sm bg-gray-200 opacity-80' />
+        <div className='flex h-5 items-center justify-between'>
+          <div className='h-1.5 w-[369px] rounded-sm bg-gray-200 opacity-80' />
           {
             !webappBrandRemoved && (
               <div className='flex items-center text-[10px] font-medium text-gray-400'>
                 POWERED BY
                 {
                   webappLogo
-                    ? <img src={`${webappLogo}?hash=${imgKey}`} alt='logo' className='ml-2 block w-auto h-5' />
+                    ? <img src={`${webappLogo}?hash=${imgKey}`} alt='logo' className='ml-2 block h-5 w-auto' />
                     : <LogoSite className='ml-2 !h-5' />
                 }
               </div>
@@ -132,7 +132,7 @@ const CustomWebAppBrand = () => {
           }
         </div>
       </div>
-      <div className='flex items-center justify-between mb-2 px-4 h-14 rounded-xl border-[0.5px] border-gray-200 bg-gray-50 text-sm font-medium text-gray-900'>
+      <div className='mb-2 flex h-14 items-center justify-between rounded-xl border-[0.5px] border-gray-200 bg-gray-50 px-4 text-sm font-medium text-gray-900'>
         {t('custom.webapp.removeBrand')}
         <Switch
           size='l'
@@ -142,12 +142,12 @@ const CustomWebAppBrand = () => {
         />
       </div>
       <div className={`
-        flex items-center justify-between px-4 py-3 rounded-xl border-[0.5px] border-gray-200 bg-gray-50
+        flex items-center justify-between rounded-xl border-[0.5px] border-gray-200 bg-gray-50 px-4 py-3
         ${webappBrandRemoved && 'opacity-30'}
       `}>
         <div>
-          <div className='leading-5 text-sm font-medium text-gray-900'>{t('custom.webapp.changeLogo')}</div>
-          <div className='leading-[18px] text-xs text-gray-500'>{t('custom.webapp.changeLogoTip')}</div>
+          <div className='text-sm font-medium leading-5 text-gray-900'>{t('custom.webapp.changeLogo')}</div>
+          <div className='text-xs leading-[18px] text-gray-500'>{t('custom.webapp.changeLogoTip')}</div>
         </div>
         <div className='flex items-center'>
           {
@@ -158,7 +158,7 @@ const CustomWebAppBrand = () => {
                 `}
                 disabled={uploadDisabled}
               >
-                <ImagePlus className='mr-2 w-4 h-4' />
+                <ImagePlus className='mr-2 h-4 w-4' />
                 {
                   (webappLogo || fileId)
                     ? t('custom.change')
@@ -166,7 +166,7 @@ const CustomWebAppBrand = () => {
                 }
                 <input
                   className={`
-                    absolute block inset-0 opacity-0 text-[0] w-full
+                    absolute inset-0 block w-full text-[0] opacity-0
                     ${uploadDisabled ? 'cursor-not-allowed' : 'cursor-pointer'}
                   `}
                   onClick={e => (e.target as HTMLInputElement).value = ''}
@@ -184,7 +184,7 @@ const CustomWebAppBrand = () => {
                 className='relative mr-2'
                 disabled={true}
               >
-                <RiLoader2Line className='animate-spin mr-2 w-4 h-4' />
+                <RiLoader2Line className='mr-2 h-4 w-4 animate-spin' />
                 {t('custom.uploading')}
               </Button>
             )
diff --git a/web/app/components/datasets/chunk.tsx b/web/app/components/datasets/chunk.tsx
index 6f0c334246..f87a4839f5 100644
--- a/web/app/components/datasets/chunk.tsx
+++ b/web/app/components/datasets/chunk.tsx
@@ -9,9 +9,9 @@ export type ChunkLabelProps = {
 
 export const ChunkLabel: FC<ChunkLabelProps> = (props) => {
   const { label, characterCount } = props
-  return <div className='flex items-center text-text-tertiary text-xs font-medium'>
+  return <div className='text-text-tertiary flex items-center text-xs font-medium'>
     <SelectionMod className='size-[10px]' />
-    <p className='flex gap-2 ml-0.5'>
+    <p className='ml-0.5 flex gap-2'>
       <span>
         {label}
       </span>
@@ -45,11 +45,11 @@ export const QAPreview: FC<QAPreviewProps> = (props) => {
   const { qa } = props
   return <div className='flex flex-col gap-y-2'>
     <div className='flex gap-x-1'>
-      <label className='text-text-tertiary text-[13px] font-medium leading-[20px] shrink-0'>Q</label>
+      <label className='text-text-tertiary shrink-0 text-[13px] font-medium leading-[20px]'>Q</label>
       <p className='text-text-secondary body-md-regular'>{qa.question}</p>
     </div>
     <div className='flex gap-x-1'>
-      <label className='text-text-tertiary text-[13px] font-medium leading-[20px] shrink-0'>A</label>
+      <label className='text-text-tertiary shrink-0 text-[13px] font-medium leading-[20px]'>A</label>
       <p className='text-text-secondary body-md-regular'>{qa.answer}</p>
     </div>
   </div>
diff --git a/web/app/components/datasets/common/chunking-mode-label.tsx b/web/app/components/datasets/common/chunking-mode-label.tsx
index 7c6e924009..0a23bbb71e 100644
--- a/web/app/components/datasets/common/chunking-mode-label.tsx
+++ b/web/app/components/datasets/common/chunking-mode-label.tsx
@@ -19,8 +19,8 @@ const ChunkingModeLabel: FC<Props> = ({
 
   return (
     <Badge>
-      <div className='flex items-center h-full space-x-0.5 text-text-tertiary'>
-        <TypeIcon className='w-3 h-3' />
+      <div className='text-text-tertiary flex h-full items-center space-x-0.5'>
+        <TypeIcon className='h-3 w-3' />
         <span className='system-2xs-medium-uppercase'>{isGeneralMode ? `${t('dataset.chunkingMode.general')}${isQAMode ? ' · QA' : ''}` : t('dataset.chunkingMode.parentChild')}</span>
       </div>
     </Badge>
diff --git a/web/app/components/datasets/common/document-picker/document-list.tsx b/web/app/components/datasets/common/document-picker/document-list.tsx
index 3e320d7507..47528880dd 100644
--- a/web/app/components/datasets/common/document-picker/document-list.tsx
+++ b/web/app/components/datasets/common/document-picker/document-list.tsx
@@ -27,11 +27,11 @@ const DocumentList: FC<Props> = ({
         return (
           <div
             key={id}
-            className='flex items-center h-8 px-2 hover:bg-state-base-hover rounded-lg space-x-2 cursor-pointer'
+            className='hover:bg-state-base-hover flex h-8 cursor-pointer items-center space-x-2 rounded-lg px-2'
             onClick={handleChange(item)}
           >
             <FileIcon name={item.name} extension={extension} size='md' />
-            <div className='truncate text-text-secondary text-sm'>{name}</div>
+            <div className='text-text-secondary truncate text-sm'>{name}</div>
           </div>
         )
       })}
diff --git a/web/app/components/datasets/common/document-picker/index.tsx b/web/app/components/datasets/common/document-picker/index.tsx
index 30690fca00..7bd82a10b5 100644
--- a/web/app/components/datasets/common/document-picker/index.tsx
+++ b/web/app/components/datasets/common/document-picker/index.tsx
@@ -74,15 +74,15 @@ const DocumentPicker: FC<Props> = ({
       placement='bottom-start'
     >
       <PortalToFollowElemTrigger onClick={togglePopup}>
-        <div className={cn('flex items-center ml-1 px-2 py-0.5 rounded-lg hover:bg-state-base-hover select-none cursor-pointer', open && 'bg-state-base-hover')}>
+        <div className={cn('hover:bg-state-base-hover ml-1 flex cursor-pointer select-none items-center rounded-lg px-2 py-0.5', open && 'bg-state-base-hover')}>
           <FileIcon name={name} extension={extension} size='lg' />
-          <div className='flex flex-col items-start ml-1 mr-0.5'>
+          <div className='ml-1 mr-0.5 flex flex-col items-start'>
             <div className='flex items-center space-x-0.5'>
               <span className={cn('system-md-semibold')}> {name || '--'}</span>
-              <ArrowIcon className={'h-4 w-4 text-text-primary'} />
+              <ArrowIcon className={'text-text-primary h-4 w-4'} />
             </div>
-            <div className='flex items-center h-3 text-text-tertiary space-x-0.5'>
-              <TypeIcon className='w-3 h-3' />
+            <div className='text-text-tertiary flex h-3 items-center space-x-0.5'>
+              <TypeIcon className='h-3 w-3' />
               <span className={cn('system-2xs-medium-uppercase', isParentChild && 'mt-0.5' /* to icon problem cause not ver align */)}>
                 {isParentChild ? t('dataset.chunkingMode.parentChild') : t('dataset.chunkingMode.general')}
                 {isParentChild && ` · ${!parentMode ? '--' : parentMode === 'paragraph' ? t('dataset.parentMode.paragraph') : t('dataset.parentMode.fullDoc')}`}
@@ -92,7 +92,7 @@ const DocumentPicker: FC<Props> = ({
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[11]'>
-        <div className='w-[360px] p-1 pt-2 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]'>
+        <div className='border-components-panel-border bg-components-panel-bg-blur w-[360px] rounded-xl border-[0.5px] p-1 pt-2 shadow-lg backdrop-blur-[5px]'>
           <SearchInput value={query} onChange={setQuery} className='mx-1' />
           {documentsList
             ? (
@@ -106,7 +106,7 @@ const DocumentPicker: FC<Props> = ({
                 onChange={handleChange}
               />
             )
-            : (<div className='mt-2 flex items-center justify-center w-[360px] h-[100px]'>
+            : (<div className='mt-2 flex h-[100px] w-[360px] items-center justify-center'>
               <Loading />
             </div>)}
         </div>
diff --git a/web/app/components/datasets/common/document-picker/preview-document-picker.tsx b/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
index 2a35b75471..ba5c6b3eb3 100644
--- a/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
+++ b/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
@@ -50,19 +50,19 @@ const PreviewDocumentPicker: FC<Props> = ({
       offset={4}
     >
       <PortalToFollowElemTrigger onClick={togglePopup}>
-        <div className={cn('flex items-center h-6 px-1 rounded-md hover:bg-state-base-hover select-none', open && 'bg-state-base-hover', className)}>
+        <div className={cn('hover:bg-state-base-hover flex h-6 select-none items-center rounded-md px-1', open && 'bg-state-base-hover', className)}>
           <FileIcon name={name} extension={extension} size='md' />
-          <div className='flex flex-col items-start ml-1'>
+          <div className='ml-1 flex flex-col items-start'>
             <div className='flex items-center space-x-0.5'>
-              <span className={cn('system-md-semibold max-w-[200px] truncate text-text-primary')}> {name || '--'}</span>
-              <ArrowIcon className={'h-[18px] w-[18px] text-text-primary'} />
+              <span className={cn('system-md-semibold text-text-primary max-w-[200px] truncate')}> {name || '--'}</span>
+              <ArrowIcon className={'text-text-primary h-[18px] w-[18px]'} />
             </div>
           </div>
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[11]'>
-        <div className='w-[392px] p-1 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]'>
-          {files?.length > 1 && <div className='pl-2 flex items-center h-8 system-xs-medium-uppercase text-text-tertiary'>{t('dataset.preprocessDocument', { num: files.length })}</div>}
+        <div className='border-components-panel-border bg-components-panel-bg-blur w-[392px] rounded-xl border-[0.5px] p-1 shadow-lg backdrop-blur-[5px]'>
+          {files?.length > 1 && <div className='system-xs-medium-uppercase text-text-tertiary flex h-8 items-center pl-2'>{t('dataset.preprocessDocument', { num: files.length })}</div>}
           {files?.length > 0
             ? (
               <DocumentList
@@ -70,7 +70,7 @@ const PreviewDocumentPicker: FC<Props> = ({
                 onChange={handleChange}
               />
             )
-            : (<div className='mt-2 flex items-center justify-center w-[360px] h-[100px]'>
+            : (<div className='mt-2 flex h-[100px] w-[360px] items-center justify-center'>
               <Loading />
             </div>)}
         </div>
diff --git a/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx b/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx
index a8da9bf6cc..270bc5ce1c 100644
--- a/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx
+++ b/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx
@@ -46,18 +46,18 @@ const StatusAction: FC<Props> = ({
 }) => {
   const { Icon, color } = getIcon(type)
   return (
-    <div className='relative flex items-center h-[34px] rounded-lg pl-2 pr-3 border border-components-panel-border bg-components-panel-bg-blur shadow-xs'>
-      <div className={`absolute inset-0 opacity-40 rounded-lg ${(type === 'success' && 'bg-[linear-gradient(92deg,rgba(23,178,106,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
+    <div className='border-components-panel-border bg-components-panel-bg-blur shadow-xs relative flex h-[34px] items-center rounded-lg border pl-2 pr-3'>
+      <div className={`absolute inset-0 rounded-lg opacity-40 ${(type === 'success' && 'bg-[linear-gradient(92deg,rgba(23,178,106,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
         || (type === 'warning' && 'bg-[linear-gradient(92deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
         || (type === 'error' && 'bg-[linear-gradient(92deg,rgba(240,68,56,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
         || (type === 'info' && 'bg-[linear-gradient(92deg,rgba(11,165,236,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
       }`}
       />
       <div className='relative z-10 flex h-full items-center space-x-2'>
-        <Icon className={cn('w-4 h-4', color)} />
-        <div className='text-[13px] font-normal text-text-secondary'>{description}</div>
+        <Icon className={cn('h-4 w-4', color)} />
+        <div className='text-text-secondary text-[13px] font-normal'>{description}</div>
         <Divider type='vertical' className='!h-4' />
-        <div onClick={onAction} className={cn('text-text-accent font-semibold text-[13px] cursor-pointer', disabled && 'text-text-disabled cursor-not-allowed')}>{actionText}</div>
+        <div onClick={onAction} className={cn('text-text-accent cursor-pointer text-[13px] font-semibold', disabled && 'text-text-disabled cursor-not-allowed')}>{actionText}</div>
       </div>
     </div>
   )
diff --git a/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx b/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
index 5183b7a94e..17cb3ef123 100644
--- a/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
+++ b/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
@@ -25,7 +25,7 @@ const EconomicalRetrievalMethodConfig: FC<Props> = ({
   return (
     <div className='space-y-2'>
       <OptionCard
-        disabled={disabled} icon={<Image className='w-4 h-4' src={retrievalIcon.vector} alt='' />}
+        disabled={disabled} icon={<Image className='h-4 w-4' src={retrievalIcon.vector} alt='' />}
         title={t('dataset.retrieval.invertedIndex.title')}
         description={t('dataset.retrieval.invertedIndex.description')} isActive
         activeHeaderClassName='bg-dataset-option-card-purple-gradient'
diff --git a/web/app/components/datasets/common/retrieval-method-config/index.tsx b/web/app/components/datasets/common/retrieval-method-config/index.tsx
index aee978cc53..67c5828df8 100644
--- a/web/app/components/datasets/common/retrieval-method-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-method-config/index.tsx
@@ -94,7 +94,7 @@ const RetrievalMethodConfig: FC<Props> = ({
   return (
     <div className='space-y-2'>
       {supportRetrievalMethods.includes(RETRIEVE_METHOD.semantic) && (
-        <OptionCard disabled={disabled} icon={<Image className='w-4 h-4' src={retrievalIcon.vector} alt='' />}
+        <OptionCard disabled={disabled} icon={<Image className='h-4 w-4' src={retrievalIcon.vector} alt='' />}
           title={t('dataset.retrieval.semantic_search.title')}
           description={t('dataset.retrieval.semantic_search.description')}
           isActive={
@@ -112,7 +112,7 @@ const RetrievalMethodConfig: FC<Props> = ({
         </OptionCard>
       )}
       {supportRetrievalMethods.includes(RETRIEVE_METHOD.fullText) && (
-        <OptionCard disabled={disabled} icon={<Image className='w-4 h-4' src={retrievalIcon.fullText} alt='' />}
+        <OptionCard disabled={disabled} icon={<Image className='h-4 w-4' src={retrievalIcon.fullText} alt='' />}
           title={t('dataset.retrieval.full_text_search.title')}
           description={t('dataset.retrieval.full_text_search.description')}
           isActive={
@@ -130,7 +130,7 @@ const RetrievalMethodConfig: FC<Props> = ({
         </OptionCard>
       )}
       {supportRetrievalMethods.includes(RETRIEVE_METHOD.hybrid) && (
-        <OptionCard disabled={disabled} icon={<Image className='w-4 h-4' src={retrievalIcon.hybrid} alt='' />}
+        <OptionCard disabled={disabled} icon={<Image className='h-4 w-4' src={retrievalIcon.hybrid} alt='' />}
           title={
             <div className='flex items-center space-x-1'>
               <div>{t('dataset.retrieval.hybrid_search.title')}</div>
diff --git a/web/app/components/datasets/common/retrieval-method-info/index.tsx b/web/app/components/datasets/common/retrieval-method-info/index.tsx
index fc3020d4a9..37e8178d65 100644
--- a/web/app/components/datasets/common/retrieval-method-info/index.tsx
+++ b/web/app/components/datasets/common/retrieval-method-info/index.tsx
@@ -28,7 +28,7 @@ const EconomicalRetrievalMethodConfig: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const type = value.search_method
-  const icon = <Image className='size-3.5 text-util-colors-purple-purple-600' src={getIcon(type)} alt='' />
+  const icon = <Image className='text-util-colors-purple-purple-600 size-3.5' src={getIcon(type)} alt='' />
   return (
     <div className='space-y-2'>
       <RadioCard
@@ -38,7 +38,7 @@ const EconomicalRetrievalMethodConfig: FC<Props> = ({
         noRadio
         chosenConfigWrapClassName='!pb-3'
         chosenConfig={
-          <div className='flex flex-wrap leading-[18px] text-xs font-normal'>
+          <div className='flex flex-wrap text-xs font-normal leading-[18px]'>
             {value.reranking_model.reranking_model_name && (
               <div className='mr-8 flex space-x-1'>
                 <div className='text-gray-500'>{t('common.modelProvider.rerankModel.key')}</div>
diff --git a/web/app/components/datasets/common/retrieval-param-config/index.tsx b/web/app/components/datasets/common/retrieval-param-config/index.tsx
index 93d555a34d..7b298a416d 100644
--- a/web/app/components/datasets/common/retrieval-param-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-param-config/index.tsx
@@ -115,7 +115,7 @@ const RetrievalParamConfig: FC<Props> = ({
     <div>
       {!isEconomical && !isHybridSearch && (
         <div>
-          <div className='flex items-center space-x-2 mb-2'>
+          <div className='mb-2 flex items-center space-x-2'>
             {canToggleRerankModalEnable && (
               <Switch
                 size='md'
@@ -124,7 +124,7 @@ const RetrievalParamConfig: FC<Props> = ({
               />
             )}
             <div className='flex items-center'>
-              <span className='mr-0.5 system-sm-semibold text-text-secondary'>{t('common.modelProvider.rerankModel.key')}</span>
+              <span className='system-sm-semibold text-text-secondary mr-0.5'>{t('common.modelProvider.rerankModel.key')}</span>
               <Tooltip
                 popupContent={
                   <div className="w-[200px]">{t('common.modelProvider.rerankModel.tip')}</div>
@@ -153,7 +153,7 @@ const RetrievalParamConfig: FC<Props> = ({
       )}
       {
         !isHybridSearch && (
-          <div className={cn(!isEconomical && 'mt-4', 'flex space-between space-x-4')}>
+          <div className={cn(!isEconomical && 'mt-4', 'space-between flex space-x-4')}>
             <TopKItem
               className='grow'
               value={value.top_k}
@@ -191,7 +191,7 @@ const RetrievalParamConfig: FC<Props> = ({
       {
         isHybridSearch && (
           <>
-            <div className='flex gap-2 mb-4'>
+            <div className='mb-4 flex gap-2'>
               {
                 rerankingModeOptions.map(option => (
                   <RadioCard
@@ -255,7 +255,7 @@ const RetrievalParamConfig: FC<Props> = ({
                 />
               )
             }
-            <div className={cn(!isEconomical && 'mt-4', 'flex space-between space-x-6')}>
+            <div className={cn(!isEconomical && 'mt-4', 'space-between flex space-x-6')}>
               <TopKItem
                 className='grow'
                 value={value.top_k}
diff --git a/web/app/components/datasets/create/embedding-process/index.tsx b/web/app/components/datasets/create/embedding-process/index.tsx
index ead593d272..eec99ed294 100644
--- a/web/app/components/datasets/create/embedding-process/index.tsx
+++ b/web/app/components/datasets/create/embedding-process/index.tsx
@@ -252,10 +252,10 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
 
   return (
     <>
-      <div className="h-5 flex items-center mb-3">
-        <div className="flex items-center justify-between text-gray-900 font-medium text-sm mr-2">
+      <div className="mb-3 flex h-5 items-center">
+        <div className="mr-2 flex items-center justify-between text-sm font-medium text-gray-900">
           {isEmbedding && <div className='flex items-center'>
-            <RiLoader2Fill className='size-4 mr-1 animate-spin' />
+            <RiLoader2Fill className='mr-1 size-4 animate-spin' />
             {t('datasetDocuments.embedding.processing')}
           </div>}
           {isEmbeddingCompleted && t('datasetDocuments.embedding.completed')}
@@ -263,11 +263,11 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
       </div>
       {
         enableBilling && plan.type !== Plan.team && (
-          <div className='flex items-center mb-3 p-3 h-14 bg-white border-[0.5px] border-black/5 shadow-md rounded-xl'>
-            <div className='shrink-0 flex items-center justify-center w-8 h-8 bg-[#FFF6ED] rounded-lg'>
-              <ZapFast className='w-4 h-4 text-[#FB6514]' />
+          <div className='mb-3 flex h-14 items-center rounded-xl border-[0.5px] border-black/5 bg-white p-3 shadow-md'>
+            <div className='flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[#FFF6ED]'>
+              <ZapFast className='h-4 w-4 text-[#FB6514]' />
             </div>
-            <div className='grow mx-3 text-[13px] font-medium text-gray-700'>
+            <div className='mx-3 grow text-[13px] font-medium text-gray-700'>
               {t('billing.plansCommon.documentProcessingPriorityUpgrade')}
             </div>
             <UpgradeBtn loc='knowledge-speed-up' />
@@ -277,21 +277,21 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
       <div className="flex flex-col gap-0.5 pb-2">
         {indexingStatusBatchDetail.map(indexingStatusDetail => (
           <div key={indexingStatusDetail.id} className={cn(
-            'relative h-[26px] bg-components-progress-bar-bg rounded-md overflow-hidden',
+            'bg-components-progress-bar-bg relative h-[26px] overflow-hidden rounded-md',
             indexingStatusDetail.indexing_status === 'error' && 'bg-state-destructive-hover-alt',
             // indexingStatusDetail.indexing_status === 'completed' && 's.success',
           )}>
             {isSourceEmbedding(indexingStatusDetail) && (
-              <div className="absolute top-0 left-0 h-full min-w-0.5 bg-components-progress-bar-progress border-r-[2px] border-r-components-progress-bar-progress-highlight" style={{ width: `${getSourcePercent(indexingStatusDetail)}%` }} />
+              <div className="bg-components-progress-bar-progress border-r-components-progress-bar-progress-highlight absolute left-0 top-0 h-full min-w-0.5 border-r-[2px]" style={{ width: `${getSourcePercent(indexingStatusDetail)}%` }} />
             )}
-            <div className="flex gap-1 pl-[6px] pr-2 h-full items-center z-[1]">
+            <div className="z-[1] flex h-full items-center gap-1 pl-[6px] pr-2">
               {getSourceType(indexingStatusDetail.id) === DataSourceType.FILE && (
                 // <div className={cn(
                 //   'shrink-0 marker:size-4 bg-center bg-no-repeat bg-contain',
                 //   s[getFileType(getSourceName(indexingStatusDetail.id))] || s.unknownFileIcon,
                 // )} />
                 <DocumentFileIcon
-                  className="shrink-0 size-4"
+                  className="size-4 shrink-0"
                   name={getSourceName(indexingStatusDetail.id)}
                   extension={getFileType(getSourceName(indexingStatusDetail.id))}
                 />
@@ -303,8 +303,8 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
                   src={getIcon(indexingStatusDetail.id)}
                 />
               )}
-              <div className="grow flex items-center gap-1 w-0" title={getSourceName(indexingStatusDetail.id)}>
-                <div className="text-xs truncate">
+              <div className="flex w-0 grow items-center gap-1" title={getSourceName(indexingStatusDetail.id)}>
+                <div className="truncate text-xs">
                   {getSourceName(indexingStatusDetail.id)}
                 </div>
                 {
@@ -323,31 +323,31 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
                   popupContent={indexingStatusDetail.error}
                 >
                   <span>
-                    <RiErrorWarningFill className='shrink-0 size-4 text-text-destructive' />
+                    <RiErrorWarningFill className='text-text-destructive size-4 shrink-0' />
                   </span>
                 </Tooltip>
               )}
               {indexingStatusDetail.indexing_status === 'completed' && (
-                <RiCheckboxCircleFill className='shrink-0 size-4 text-text-success' />
+                <RiCheckboxCircleFill className='text-text-success size-4 shrink-0' />
               )}
             </div>
           </div>
         ))}
       </div>
-      <hr className="my-3 h-[1px] bg-divider-subtle border-0" />
+      <hr className="bg-divider-subtle my-3 h-[1px] border-0" />
       <RuleDetail
         sourceData={ruleDetail}
         indexingType={indexingType}
         retrievalMethod={retrievalMethod}
       />
-      <div className='flex items-center gap-2 my-10'>
+      <div className='my-10 flex items-center gap-2'>
         <Button className='w-fit' onClick={navToApiDocs}>
-          <RiTerminalBoxLine className='size-4 mr-2' />
+          <RiTerminalBoxLine className='mr-2 size-4' />
           <span>Access the API</span>
         </Button>
         <Button className='w-fit' variant='primary' onClick={navToDocumentList}>
           <span>{t('datasetCreation.stepThree.navTo')}</span>
-          <ArrowRightIcon className='size-4 ml-2 stroke-current stroke-1' />
+          <ArrowRightIcon className='ml-2 size-4 stroke-current stroke-1' />
         </Button>
       </div>
     </>
diff --git a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
index bce8f072d1..d588b365d4 100644
--- a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
+++ b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
@@ -61,7 +61,7 @@ const EmptyDatasetCreationModal = ({
         <Input value={inputValue} placeholder={t('datasetCreation.stepOne.modal.placeholder') || ''} onChange={e => setInputValue(e.target.value)} />
       </div>
       <div className='flex flex-row-reverse'>
-        <Button className='w-24 ml-2' variant='primary' onClick={submit}>{t('datasetCreation.stepOne.modal.confirmButton')}</Button>
+        <Button className='ml-2 w-24' variant='primary' onClick={submit}>{t('datasetCreation.stepOne.modal.confirmButton')}</Button>
         <Button className='w-24' onClick={onHide}>{t('datasetCreation.stepOne.modal.cancelButton')}</Button>
       </div>
     </Modal>
diff --git a/web/app/components/datasets/create/file-preview/index.tsx b/web/app/components/datasets/create/file-preview/index.tsx
index cb1f1d6908..9f15bc84ca 100644
--- a/web/app/components/datasets/create/file-preview/index.tsx
+++ b/web/app/components/datasets/create/file-preview/index.tsx
@@ -48,7 +48,7 @@ const FilePreview = ({
       <div className={cn(s.previewHeader)}>
         <div className={cn(s.title)}>
           <span>{t('datasetCreation.stepOne.filePreview')}</span>
-          <div className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={hidePreview}>
+          <div className='flex h-6 w-6 cursor-pointer items-center justify-center' onClick={hidePreview}>
             <XMarkIcon className='h-4 w-4'></XMarkIcon>
           </div>
         </div>
diff --git a/web/app/components/datasets/create/file-uploader/index.tsx b/web/app/components/datasets/create/file-uploader/index.tsx
index e42a24cfef..2f3e7ad51e 100644
--- a/web/app/components/datasets/create/file-uploader/index.tsx
+++ b/web/app/components/datasets/create/file-uploader/index.tsx
@@ -256,17 +256,17 @@ const FileUploader = ({
         />
       )}
 
-      <div className={cn('text-text-tertiary text-sm font-semibold leading-6 mb-1', titleClassName)}>{t('datasetCreation.stepOne.uploader.title')}</div>
+      <div className={cn('text-text-tertiary mb-1 text-sm font-semibold leading-6', titleClassName)}>{t('datasetCreation.stepOne.uploader.title')}</div>
 
       {!hideUpload && (
-        <div ref={dropRef} className={cn('relative box-border flex flex-col justify-center items-center gap-1 mb-2 px-4 py-3 max-w-[640px] min-h-20 leading-4 text-xs text-text-tertiary bg-components-dropzone-bg border border-dashed border-components-dropzone-border rounded-xl', dragging && 'bg-components-dropzone-bg-accent border-components-dropzone-border-accent')}>
-          <div className="flex justify-center items-center min-h-5 text-sm leading-4 text-text-secondary">
+        <div ref={dropRef} className={cn('text-text-tertiary bg-components-dropzone-bg border-components-dropzone-border relative mb-2 box-border flex min-h-20 max-w-[640px] flex-col items-center justify-center gap-1 rounded-xl border border-dashed px-4 py-3 text-xs leading-4', dragging && 'bg-components-dropzone-bg-accent border-components-dropzone-border-accent')}>
+          <div className="text-text-secondary flex min-h-5 items-center justify-center text-sm leading-4">
             <RiUploadCloud2Line className='mr-2 size-5' />
 
             <span>
               {t('datasetCreation.stepOne.uploader.button')}
               {supportTypes.length > 0 && (
-                <label className="ml-1 text-text-accent cursor-pointer" onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.browse')}</label>
+                <label className="text-text-accent ml-1 cursor-pointer" onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.browse')}</label>
               )}
             </span>
           </div>
@@ -274,40 +274,40 @@ const FileUploader = ({
             size: fileUploadConfig.file_size_limit,
             supportTypes: supportTypesShowNames,
           })}</div>
-          {dragging && <div ref={dragRef} className='absolute top-0 left-0 w-full h-full' />}
+          {dragging && <div ref={dragRef} className='absolute left-0 top-0 h-full w-full' />}
         </div>
       )}
-      <div className='space-y-1 max-w-[640px] cursor-default'>
+      <div className='max-w-[640px] cursor-default space-y-1'>
 
         {fileList.map((fileItem, index) => (
           <div
             key={`${fileItem.fileID}-${index}`}
             onClick={() => fileItem.file?.id && onPreview(fileItem.file)}
             className={cn(
-              'flex items-center h-12 max-w-[640px] bg-components-panel-on-panel-item-bg text-xs leading-3 text-text-tertiary border border-components-panel-border rounded-lg shadow-xs',
+              'bg-components-panel-on-panel-item-bg text-text-tertiary border-components-panel-border shadow-xs flex h-12 max-w-[640px] items-center rounded-lg border text-xs leading-3',
               // 'border-state-destructive-border bg-state-destructive-hover',
             )}
           >
-            <div className="shrink-0 flex justify-center items-center w-12">
+            <div className="flex w-12 shrink-0 items-center justify-center">
               <DocumentFileIcon
-                className="shrink-0 size-6"
+                className="size-6 shrink-0"
                 name={fileItem.file.name}
                 extension={getFileType(fileItem.file)}
               />
             </div>
-            <div className="grow shrink flex flex-col gap-0.5">
+            <div className="flex shrink grow flex-col gap-0.5">
               <div className='flex w-full'>
-                <div className="text-sm leading-4 text-text-secondary w-0 grow truncate">{fileItem.file.name}</div>
+                <div className="text-text-secondary w-0 grow truncate text-sm leading-4">{fileItem.file.name}</div>
               </div>
-              <div className="w-full leading-3 truncate text-text-tertiary">
+              <div className="text-text-tertiary w-full truncate leading-3">
                 <span className='uppercase'>{getFileType(fileItem.file)}</span>
-                <span className='px-1 text-text-quaternary'>·</span>
+                <span className='text-text-quaternary px-1'>·</span>
                 <span>{getFileSize(fileItem.file.size)}</span>
                 {/* <span className='px-1 text-text-quaternary'>·</span>
                   <span>10k characters</span> */}
               </div>
             </div>
-            <div className="shrink-0 flex items-center justify-end gap-1 pr-3 w-16">
+            <div className="flex w-16 shrink-0 items-center justify-end gap-1 pr-3">
               {/* <span className="flex justify-center items-center w-6 h-6 cursor-pointer">
                   <RiErrorWarningFill className='size-4 text-text-warning' />
                 </span> */}
@@ -315,11 +315,11 @@ const FileUploader = ({
                 // <div className={s.percent}>{`${fileItem.progress}%`}</div>
                 <SimplePieChart percentage={fileItem.progress} stroke={chartColor} fill={chartColor} animationDuration={0} />
               )}
-              <span className="flex justify-center items-center w-6 h-6 cursor-pointer" onClick={(e) => {
+              <span className="flex h-6 w-6 cursor-pointer items-center justify-center" onClick={(e) => {
                 e.stopPropagation()
                 removeFile(fileItem.fileID)
               }}>
-                <RiDeleteBinLine className='size-4 text-text-tertiary' />
+                <RiDeleteBinLine className='text-text-tertiary size-4' />
               </span>
             </div>
           </div>
diff --git a/web/app/components/datasets/create/index.tsx b/web/app/components/datasets/create/index.tsx
index b1e4087226..aaa6cad147 100644
--- a/web/app/components/datasets/create/index.tsx
+++ b/web/app/components/datasets/create/index.tsx
@@ -122,7 +122,7 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
     return <AppUnavailable code={500} unknownReason={t('datasetCreation.error.unavailable') as string} />
 
   return (
-    <div className='flex flex-col bg-components-panel-bg' style={{ height: 'calc(100vh - 56px)' }}>
+    <div className='bg-components-panel-bg flex flex-col' style={{ height: 'calc(100vh - 56px)' }}>
       <TopBar activeIndex={step - 1} datasetId={datasetId} />
       <div style={{ height: 'calc(100% - 52px)' }}>
         {step === 1 && <StepOne
diff --git a/web/app/components/datasets/create/notion-page-preview/index.tsx b/web/app/components/datasets/create/notion-page-preview/index.tsx
index f658f213e8..a210004912 100644
--- a/web/app/components/datasets/create/notion-page-preview/index.tsx
+++ b/web/app/components/datasets/create/notion-page-preview/index.tsx
@@ -48,13 +48,13 @@ const NotionPagePreview = ({
       <div className={cn(s.previewHeader)}>
         <div className={cn(s.title)}>
           <span>{t('datasetCreation.stepOne.pagePreview')}</span>
-          <div className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={hidePreview}>
+          <div className='flex h-6 w-6 cursor-pointer items-center justify-center' onClick={hidePreview}>
             <XMarkIcon className='h-4 w-4'></XMarkIcon>
           </div>
         </div>
         <div className={cn(s.fileName)}>
           <NotionIcon
-            className='shrink-0 mr-1'
+            className='mr-1 shrink-0'
             type='page'
             src={currentPage?.page_icon}
           />
diff --git a/web/app/components/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index 45dda51795..7f19195320 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -126,8 +126,8 @@ const StepOne = ({
   }, [files, isShowVectorSpaceFull])
 
   return (
-    <div className='flex w-full h-full'>
-      <div className='w-1/2 h-full overflow-y-auto relative'>
+    <div className='flex h-full w-full'>
+      <div className='relative h-full w-1/2 overflow-y-auto'>
         <div className='flex justify-end'>
           <div className={classNames(s.form)}>
             {
@@ -137,7 +137,7 @@ const StepOne = ({
             }
             {
               shouldShowDataSourceTypeList && (
-                <div className='flex items-center mb-8 flex-wrap gap-4'>
+                <div className='mb-8 flex flex-wrap items-center gap-4'>
                   <div
                     className={cn(
                       s.dataSourceItem,
@@ -198,11 +198,11 @@ const StepOne = ({
                   notSupportBatchUpload={notSupportBatchUpload}
                 />
                 {isShowVectorSpaceFull && (
-                  <div className='max-w-[640px] mb-4'>
+                  <div className='mb-4 max-w-[640px]'>
                     <VectorSpaceFull />
                   </div>
                 )}
-                <div className="flex justify-end gap-2 max-w-[640px]">
+                <div className="flex max-w-[640px] justify-end gap-2">
                   {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
                   <Button disabled={nextDisabled} variant='primary' onClick={onStepChange}>
                     <span className="flex gap-0.5 px-[10px]">
@@ -226,11 +226,11 @@ const StepOne = ({
                       />
                     </div>
                     {isShowVectorSpaceFull && (
-                      <div className='max-w-[640px] mb-4'>
+                      <div className='mb-4 max-w-[640px]'>
                         <VectorSpaceFull />
                       </div>
                     )}
-                    <div className="flex justify-end gap-2 max-w-[640px]">
+                    <div className="flex max-w-[640px] justify-end gap-2">
                       {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
                       <Button disabled={isShowVectorSpaceFull || !notionPages.length} variant='primary' onClick={onStepChange}>
                         <span className="flex gap-0.5 px-[10px]">
@@ -257,11 +257,11 @@ const StepOne = ({
                   />
                 </div>
                 {isShowVectorSpaceFull && (
-                  <div className='max-w-[640px] mb-4'>
+                  <div className='mb-4 max-w-[640px]'>
                     <VectorSpaceFull />
                   </div>
                 )}
-                <div className="flex justify-end gap-2 max-w-[640px]">
+                <div className="flex max-w-[640px] justify-end gap-2">
                   {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
                   <Button disabled={isShowVectorSpaceFull || !websitePages.length} variant='primary' onClick={onStepChange}>
                     <span className="flex gap-0.5 px-[10px]">
@@ -275,8 +275,8 @@ const StepOne = ({
             {!datasetId && (
               <>
                 <div className={s.dividerLine} />
-                <span className="inline-flex items-center cursor-pointer text-[13px] leading-4 text-text-accent" onClick={modalShowHandle}>
-                  <RiFolder6Line className="size-4 mr-1" />
+                <span className="text-text-accent inline-flex cursor-pointer items-center text-[13px] leading-4" onClick={modalShowHandle}>
+                  <RiFolder6Line className="mr-1 size-4" />
                   {t('datasetCreation.stepOne.emptyDatasetCreation')}
                 </span>
               </>
@@ -285,7 +285,7 @@ const StepOne = ({
           <EmptyDatasetCreationModal show={showModal} onHide={modalCloseHandle} />
         </div>
       </div>
-      <div className='w-1/2 h-full overflow-y-auto'>
+      <div className='h-full w-1/2 overflow-y-auto'>
         {currentFile && <FilePreview file={currentFile} hidePreview={hideFilePreview} />}
         {currentNotionPage && <NotionPagePreview currentPage={currentNotionPage} hidePreview={hideNotionPagePreview} />}
         {currentWebsite && <WebsitePreview payload={currentWebsite} hidePreview={hideWebsitePreview} />}
diff --git a/web/app/components/datasets/create/step-three/index.tsx b/web/app/components/datasets/create/step-three/index.tsx
index 8d979616d1..d982344983 100644
--- a/web/app/components/datasets/create/step-three/index.tsx
+++ b/web/app/components/datasets/create/step-three/index.tsx
@@ -23,29 +23,29 @@ const StepThree = ({ datasetId, datasetName, indexingType, creationCache, retrie
   const isMobile = media === MediaType.mobile
 
   return (
-    <div className="flex justify-center w-full max-h-full h-full overflow-y-auto">
-      <div className="grow shrink-0 h-full max-w-[960px] overflow-y-auto px-14 sm:px-16">
+    <div className="flex h-full max-h-full w-full justify-center overflow-y-auto">
+      <div className="h-full max-w-[960px] shrink-0 grow overflow-y-auto px-14 sm:px-16">
         <div className="mx-auto max-w-[640px]">
           {!datasetId && (
             <>
               <div className="pt-10">
-                <div className="mb-1 text-xl leading-[22px] font-semibold text-text-primary">{t('datasetCreation.stepThree.creationTitle')}</div>
-                <div className="mb-7 text-[13px] leading-4 text-text-tertiary">{t('datasetCreation.stepThree.creationContent')}</div>
+                <div className="text-text-primary mb-1 text-xl font-semibold leading-[22px]">{t('datasetCreation.stepThree.creationTitle')}</div>
+                <div className="text-text-tertiary mb-7 text-[13px] leading-4">{t('datasetCreation.stepThree.creationContent')}</div>
                 <div className="flex gap-4">
-                  <AppIcon {...creationCache?.dataset} className="size-14 text-2xl self-center" />
-                  <div className="grow flex flex-col gap-1">
-                    <div className="text-[13px] leading-6 font-semibold">{t('datasetCreation.stepThree.label')}</div>
-                    <div className="w-full px-3 py-2 text-[13px] leading-4 bg-components-input-bg-normal rounded-lg truncate">{datasetName || creationCache?.dataset?.name}</div>
+                  <AppIcon {...creationCache?.dataset} className="size-14 self-center text-2xl" />
+                  <div className="flex grow flex-col gap-1">
+                    <div className="text-[13px] font-semibold leading-6">{t('datasetCreation.stepThree.label')}</div>
+                    <div className="bg-components-input-bg-normal w-full truncate rounded-lg px-3 py-2 text-[13px] leading-4">{datasetName || creationCache?.dataset?.name}</div>
                   </div>
                 </div>
               </div>
-              <hr className="my-6 h-[1px] bg-divider-subtle border-0" />
+              <hr className="bg-divider-subtle my-6 h-[1px] border-0" />
             </>
           )}
           {datasetId && (
             <div className="pt-10">
-              <div className="mb-1 text-xl leading-[22px] font-semibold text-text-primary">{t('datasetCreation.stepThree.additionTitle')}</div>
-              <div className="mb-7 text-[13px] leading-4 text-text-tertiary">{`${t('datasetCreation.stepThree.additionP1')} ${datasetName || creationCache?.dataset?.name} ${t('datasetCreation.stepThree.additionP2')}`}</div>
+              <div className="text-text-primary mb-1 text-xl font-semibold leading-[22px]">{t('datasetCreation.stepThree.additionTitle')}</div>
+              <div className="text-text-tertiary mb-7 text-[13px] leading-4">{`${t('datasetCreation.stepThree.additionP1')} ${datasetName || creationCache?.dataset?.name} ${t('datasetCreation.stepThree.additionP2')}`}</div>
             </div>
           )}
           <EmbeddingProcess
@@ -58,12 +58,12 @@ const StepThree = ({ datasetId, datasetName, indexingType, creationCache, retrie
         </div>
       </div>
       {!isMobile && (
-        <div className="shrink-0 pt-[88px] pr-8 text-xs">
-          <div className="flex flex-col gap-3 w-[328px] p-6 text-text-tertiary bg-background-section rounded-xl">
-            <div className="flex justify-center items-center size-10 bg-components-card-bg rounded-[10px] shadow-lg">
-              <RiBookOpenLine className="size-5 text-text-accent" />
+        <div className="shrink-0 pr-8 pt-[88px] text-xs">
+          <div className="text-text-tertiary bg-background-section flex w-[328px] flex-col gap-3 rounded-xl p-6">
+            <div className="bg-components-card-bg flex size-10 items-center justify-center rounded-[10px] shadow-lg">
+              <RiBookOpenLine className="text-text-accent size-5" />
             </div>
-            <div className="text-base font-semibold text-text-secondary">{t('datasetCreation.stepThree.sideTipTitle')}</div>
+            <div className="text-text-secondary text-base font-semibold">{t('datasetCreation.stepThree.sideTipTitle')}</div>
             <div className="text-text-tertiary">{t('datasetCreation.stepThree.sideTipContent')}</div>
           </div>
         </div>
diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index 65a8b474a3..2b7ad78f96 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -579,8 +579,8 @@ const StepTwo = ({
   const isModelAndRetrievalConfigDisabled = !!datasetId && !!currentDataset?.data_source_type
 
   return (
-    <div className='flex w-full h-full'>
-      <div className={cn('relative h-full w-1/2 py-6 overflow-y-auto', isMobile ? 'px-4' : 'px-12')}>
+    <div className='flex h-full w-full'>
+      <div className={cn('relative h-full w-1/2 overflow-y-auto py-6', isMobile ? 'px-4' : 'px-12')}>
         <div className={'system-md-semibold mb-1'}>{t('datasetCreation.stepTwo.segmentation')}</div>
         {((isInUpload && [ChunkingMode.text, ChunkingMode.qa].includes(currentDataset!.doc_form))
           || isUploadInEmptyDataset
@@ -600,7 +600,7 @@ const StepTwo = ({
             actions={
               <>
                 <Button variant={'secondary-accent'} onClick={() => updatePreview()}>
-                  <RiSearchEyeLine className='h-4 w-4 mr-0.5' />
+                  <RiSearchEyeLine className='mr-0.5 h-4 w-4' />
                   {t('datasetCreation.stepTwo.previewChunk')}
                 </Button>
                 <Button variant={'ghost'} onClick={resetRules}>
@@ -628,7 +628,7 @@ const StepTwo = ({
                   onChange={setOverlap}
                 />
               </div>
-              <div className='w-full flex flex-col'>
+              <div className='flex w-full flex-col'>
                 <div className='flex items-center gap-x-2'>
                   <div className='inline-flex shrink-0'>
                     <TextLabel>{t('datasetCreation.stepTwo.rules')}</TextLabel>
@@ -643,11 +643,11 @@ const StepTwo = ({
                       <Checkbox
                         checked={rule.enabled}
                       />
-                      <label className="ml-2 system-sm-regular cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label>
+                      <label className="system-sm-regular text-text-secondary ml-2 cursor-pointer">{getRuleName(rule.id)}</label>
                     </div>
                   ))}
                   {IS_CE_EDITION && <>
-                    <Divider type='horizontal' className='my-4 bg-divider-subtle' />
+                    <Divider type='horizontal' className='bg-divider-subtle my-4' />
                     <div className='flex items-center py-0.5'>
                       <div className='flex items-center' onClick={() => {
                         if (currentDataset?.doc_form)
@@ -661,7 +661,7 @@ const StepTwo = ({
                           checked={currentDocForm === ChunkingMode.qa}
                           disabled={!!currentDataset?.doc_form}
                         />
-                        <label className="ml-2 system-sm-regular cursor-pointer text-text-secondary">
+                        <label className="system-sm-regular text-text-secondary ml-2 cursor-pointer">
                           {t('datasetCreation.stepTwo.useQALanguage')}
                         </label>
                       </div>
@@ -677,9 +677,9 @@ const StepTwo = ({
                         style={{
                           background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.1) 0%, rgba(255, 255, 255, 0.00) 100%)',
                         }}
-                        className='h-10 mt-2 flex items-center gap-2 rounded-xl backdrop-blur-[5px] border-components-panel-border border shadow-xs px-3 text-xs'
+                        className='border-components-panel-border shadow-xs mt-2 flex h-10 items-center gap-2 rounded-xl border px-3 text-xs backdrop-blur-[5px]'
                       >
-                        <RiAlertFill className='size-4 text-text-warning-secondary' />
+                        <RiAlertFill className='text-text-warning-secondary size-4' />
                         <span className='system-xs-medium text-text-primary'>
                           {t('datasetCreation.stepTwo.QATip')}
                         </span>
@@ -707,7 +707,7 @@ const StepTwo = ({
             actions={
               <>
                 <Button variant={'secondary-accent'} onClick={() => updatePreview()}>
-                  <RiSearchEyeLine className='h-4 w-4 mr-0.5' />
+                  <RiSearchEyeLine className='mr-0.5 h-4 w-4' />
                   {t('datasetCreation.stepTwo.previewChunk')}
                 </Button>
                 <Button variant={'ghost'} onClick={resetRules}>
@@ -784,7 +784,7 @@ const StepTwo = ({
                   </div>
                   <Divider className='grow' bgStyle='gradient' />
                 </div>
-                <div className='flex gap-3 mt-1'>
+                <div className='mt-1 flex gap-3'>
                   <DelimiterInput
                     value={parentChildConfig.child.delimiter}
                     tooltip={t('datasetCreation.stepTwo.parentChildChunkDelimiterTip')!}
@@ -824,7 +824,7 @@ const StepTwo = ({
                       <Checkbox
                         checked={rule.enabled}
                       />
-                      <label className="ml-2 system-sm-regular cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label>
+                      <label className="system-sm-regular text-text-secondary ml-2 cursor-pointer">{getRuleName(rule.id)}</label>
                     </div>
                   ))}
                 </div>
@@ -859,11 +859,11 @@ const StepTwo = ({
           {(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.ECONOMICAL)) && (
             <>
               <CustomDialog show={isQAConfirmDialogOpen} onClose={() => setIsQAConfirmDialogOpen(false)} className='w-[432px]'>
-                <header className='pt-6 mb-4'>
+                <header className='mb-4 pt-6'>
                   <h2 className='text-lg font-semibold'>
                     {t('datasetCreation.stepTwo.qaSwitchHighQualityTipTitle')}
                   </h2>
-                  <p className='font-normal text-sm mt-2'>
+                  <p className='mt-2 text-sm font-normal'>
                     {t('datasetCreation.stepTwo.qaSwitchHighQualityTipContent')}
                   </p>
                 </header>
@@ -903,7 +903,7 @@ const StepTwo = ({
                   />
                 </PortalToFollowElemTrigger>
                 <PortalToFollowElemContent>
-                  <div className='p-3 bg-components-tooltip-bg border-components-panel-border text-xs font-medium text-text-secondary rounded-lg shadow-lg'>
+                  <div className='bg-components-tooltip-bg border-components-panel-border text-text-secondary rounded-lg p-3 text-xs font-medium shadow-lg'>
                     {
                       docForm === ChunkingMode.qa
                         ? t('datasetCreation.stepTwo.notAvailableForQA')
@@ -915,16 +915,16 @@ const StepTwo = ({
             </>)}
         </div>
         {!hasSetIndexType && indexType === IndexingType.QUALIFIED && (
-          <div className='mt-2 h-10 p-2 flex items-center gap-x-0.5 rounded-xl border-[0.5px] border-components-panel-border overflow-hidden bg-components-panel-bg-blur backdrop-blur-[5px] shadow-xs'>
-            <div className='absolute top-0 left-0 right-0 bottom-0 bg-[linear-gradient(92deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0.00)_100%)] opacity-40'></div>
+          <div className='border-components-panel-border bg-components-panel-bg-blur shadow-xs mt-2 flex h-10 items-center gap-x-0.5 overflow-hidden rounded-xl border-[0.5px] p-2 backdrop-blur-[5px]'>
+            <div className='absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(92deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0.00)_100%)] opacity-40'></div>
             <div className='p-1'>
-              <AlertTriangle className='size-4 text-text-warning-secondary' />
+              <AlertTriangle className='text-text-warning-secondary size-4' />
             </div>
             <span className='system-xs-medium'>{t('datasetCreation.stepTwo.highQualityTip')}</span>
           </div>
         )}
         {hasSetIndexType && indexType === IndexingType.ECONOMICAL && (
-          <div className='mt-2 system-xs-medium'>
+          <div className='system-xs-medium mt-2'>
             {t('datasetCreation.stepTwo.indexSettingTip')}
             <Link className='text-text-accent' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link>
           </div>
@@ -932,7 +932,7 @@ const StepTwo = ({
         {/* Embedding model */}
         {indexType === IndexingType.QUALIFIED && (
           <div className='mt-5'>
-            <div className={cn('system-md-semibold mb-1', datasetId && 'flex justify-between items-center')}>{t('datasetSettings.form.embeddingModel')}</div>
+            <div className={cn('system-md-semibold mb-1', datasetId && 'flex items-center justify-between')}>{t('datasetSettings.form.embeddingModel')}</div>
             <ModelSelector
               readonly={isModelAndRetrievalConfigDisabled}
               triggerClassName={isModelAndRetrievalConfigDisabled ? 'opacity-50' : ''}
@@ -943,7 +943,7 @@ const StepTwo = ({
               }}
             />
             {isModelAndRetrievalConfigDisabled && (
-              <div className='mt-2 system-xs-medium'>
+              <div className='system-xs-medium mt-2'>
                 {t('datasetCreation.stepTwo.indexSettingTip')}
                 <Link className='text-text-accent' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link>
               </div>
@@ -964,7 +964,7 @@ const StepTwo = ({
               </div>
             )
             : (
-              <div className={cn('system-md-semibold mb-0.5', 'flex justify-between items-center')}>
+              <div className={cn('system-md-semibold mb-0.5', 'flex items-center justify-between')}>
                 <div>{t('datasetSettings.form.retrievalSetting.title')}</div>
               </div>
             )}
@@ -992,16 +992,16 @@ const StepTwo = ({
 
         {!isSetting
           ? (
-            <div className='flex items-center mt-8 py-2'>
+            <div className='mt-8 flex items-center py-2'>
               <Button onClick={() => onStepChange && onStepChange(-1)}>
-                <RiArrowLeftLine className='w-4 h-4 mr-1' />
+                <RiArrowLeftLine className='mr-1 h-4 w-4' />
                 {t('datasetCreation.stepTwo.previousStep')}
               </Button>
               <Button className='ml-auto' loading={isCreating} variant='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.nextStep')}</Button>
             </div>
           )
           : (
-            <div className='flex items-center mt-8 py-2'>
+            <div className='mt-8 flex items-center py-2'>
               <Button loading={isCreating} variant='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.save')}</Button>
               <Button className='ml-2' onClick={onCancel}>{t('datasetCreation.stepTwo.cancel')}</Button>
             </div>
@@ -1080,7 +1080,7 @@ const StepTwo = ({
               }
             </div>
           </PreviewHeader>}
-          className={cn('flex shrink-0 w-1/2 p-4 pr-0 relative h-full', isMobile && 'w-full max-w-[524px]')}
+          className={cn('relative flex h-full w-1/2 shrink-0 p-4 pr-0', isMobile && 'w-full max-w-[524px]')}
           mainClassName='space-y-6'
         >
           {currentDocForm === ChunkingMode.qa && estimate?.qa_preview && (
@@ -1137,10 +1137,10 @@ const StepTwo = ({
             })
           )}
           {currentEstimateMutation.isIdle && (
-            <div className='h-full w-full flex items-center justify-center'>
+            <div className='flex h-full w-full items-center justify-center'>
               <div className='flex flex-col items-center justify-center gap-3'>
-                <RiSearchEyeLine className='size-10 text-text-empty-state-icon' />
-                <p className='text-sm text-text-tertiary'>
+                <RiSearchEyeLine className='text-text-empty-state-icon size-10' />
+                <p className='text-text-tertiary text-sm'>
                   {t('datasetCreation.stepTwo.previewChunkTip')}
                 </p>
               </div>
diff --git a/web/app/components/datasets/create/step-two/inputs.tsx b/web/app/components/datasets/create/step-two/inputs.tsx
index acd4e3ae43..661210e59d 100644
--- a/web/app/components/datasets/create/step-two/inputs.tsx
+++ b/web/app/components/datasets/create/step-two/inputs.tsx
@@ -11,7 +11,7 @@ const TextLabel: FC<PropsWithChildren> = (props) => {
 }
 
 const FormField: FC<PropsWithChildren<{ label: ReactNode }>> = (props) => {
-  return <div className='space-y-2 flex-1'>
+  return <div className='flex-1 space-y-2'>
     <TextLabel>{props.label}</TextLabel>
     {props.children}
   </div>
@@ -19,7 +19,7 @@ const FormField: FC<PropsWithChildren<{ label: ReactNode }>> = (props) => {
 
 export const DelimiterInput: FC<InputProps & { tooltip?: string }> = (props) => {
   const { t } = useTranslation()
-  return <FormField label={<div className='flex items-center mb-1'>
+  return <FormField label={<div className='mb-1 flex items-center'>
     <span className='system-sm-semibold mr-0.5'>{t('datasetCreation.stepTwo.separator')}</span>
     <Tooltip
       popupContent={
@@ -58,7 +58,7 @@ export const MaxLengthInput: FC<InputNumberProps> = (props) => {
 
 export const OverlapInput: FC<InputNumberProps> = (props) => {
   const { t } = useTranslation()
-  return <FormField label={<div className='flex items-center mb-1'>
+  return <FormField label={<div className='mb-1 flex items-center'>
     <span className='system-sm-semibold'>{t('datasetCreation.stepTwo.overlap')}</span>
     <Tooltip
       popupContent={
diff --git a/web/app/components/datasets/create/step-two/language-select/index.tsx b/web/app/components/datasets/create/step-two/language-select/index.tsx
index 7730e0539a..8eeb464a91 100644
--- a/web/app/components/datasets/create/step-two/language-select/index.tsx
+++ b/web/app/components/datasets/create/step-two/language-select/index.tsx
@@ -28,11 +28,11 @@ const LanguageSelect: FC<ILanguageSelectProps> = ({
           {languages.filter(language => language.supported).map(({ prompt_name }) => (
             <div
               key={prompt_name}
-              className='w-full py-2 px-3 inline-flex items-center justify-between hover:bg-state-base-hover rounded-lg cursor-pointer'
+              className='hover:bg-state-base-hover inline-flex w-full cursor-pointer items-center justify-between rounded-lg px-3 py-2'
               onClick={() => onSelect(prompt_name)}
             >
               <span className='text-text-secondary system-sm-medium'>{prompt_name}</span>
-              {(currentLanguage === prompt_name) && <RiCheckLine className='size-4 text-text-accent' />}
+              {(currentLanguage === prompt_name) && <RiCheckLine className='text-text-accent size-4' />}
             </div>
           ))}
         </div>
@@ -40,22 +40,22 @@ const LanguageSelect: FC<ILanguageSelectProps> = ({
       btnElement={
         <div className={cn('inline-flex items-center gap-x-[1px]', disabled && 'cursor-not-allowed')}>
           <span className={cn(
-            'px-[3px] system-xs-semibold text-components-button-tertiary-text',
+            'system-xs-semibold text-components-button-tertiary-text px-[3px]',
             disabled ? 'text-components-button-tertiary-text-disabled' : '',
           )}>
             {currentLanguage}
           </span>
           <RiArrowDownSLine className={cn(
-            'size-3.5 text-components-button-tertiary-text',
+            'text-components-button-tertiary-text size-3.5',
             disabled ? 'text-components-button-tertiary-text-disabled' : '',
           )} />
         </div>
       }
       btnClassName={() => cn(
-        '!border-0 rounded-md !px-1.5 !py-1 !mx-1 !bg-components-button-tertiary-bg !hover:bg-components-button-tertiary-bg',
+        '!bg-components-button-tertiary-bg !hover:bg-components-button-tertiary-bg !mx-1 rounded-md !border-0 !px-1.5 !py-1',
         disabled ? 'bg-components-button-tertiary-bg-disabled' : '',
       )}
-      className='!w-[140px] h-fit !z-20 !translate-x-0 !left-1'
+      className='!left-1 !z-20 h-fit !w-[140px] !translate-x-0'
     />
   )
 }
diff --git a/web/app/components/datasets/create/step-two/option-card.tsx b/web/app/components/datasets/create/step-two/option-card.tsx
index 419f2c21dc..6ca7955142 100644
--- a/web/app/components/datasets/create/step-two/option-card.tsx
+++ b/web/app/components/datasets/create/step-two/option-card.tsx
@@ -25,16 +25,16 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
     isActive && activeClassName,
     !disabled && 'cursor-pointer',
   )}>
-    <div className='size-14 flex items-center justify-center relative overflow-hidden'>
-      {isActive && effectImg && <Image src={effectImg} className='absolute top-0 left-0 w-full h-full' alt='' width={56} height={56} />}
+    <div className='relative flex size-14 items-center justify-center overflow-hidden'>
+      {isActive && effectImg && <Image src={effectImg} className='absolute left-0 top-0 h-full w-full' alt='' width={56} height={56} />}
       <div className='p-1'>
-        <div className='size-8 rounded-lg border p-1.5 shadow-md border-components-panel-border-subtle justify-center flex bg-background-default-dodge'>
+        <div className='border-components-panel-border-subtle bg-background-default-dodge flex size-8 justify-center rounded-lg border p-1.5 shadow-md'>
           {icon}
         </div>
       </div>
     </div>
     <TriangleArrow
-      className='absolute left-4 -bottom-1.5 text-components-panel-bg'
+      className='text-components-panel-bg absolute -bottom-1.5 left-4'
     />
     <div className='flex-1 space-y-0.5 py-3 pr-4'>
       <div className='text-text-secondary system-md-semibold'>{title}</div>
@@ -93,9 +93,9 @@ export const OptionCard: FC<OptionCardProps> = (
       disabled={disabled}
     />
     {/** Body */}
-    {isActive && (children || actions) && <div className='py-3 px-4 bg-components-panel-bg rounded-b-xl'>
+    {isActive && (children || actions) && <div className='bg-components-panel-bg rounded-b-xl px-4 py-3'>
       {children}
-      {actions && <div className='flex gap-2 mt-4'>
+      {actions && <div className='mt-4 flex gap-2'>
         {actions}
       </div>
       }
diff --git a/web/app/components/datasets/create/step-two/preview-item/index.tsx b/web/app/components/datasets/create/step-two/preview-item/index.tsx
index 56102b6540..7c6c920378 100644
--- a/web/app/components/datasets/create/step-two/preview-item/index.tsx
+++ b/web/app/components/datasets/create/step-two/preview-item/index.tsx
@@ -44,9 +44,9 @@ const PreviewItem: FC<IPreviewItemProps> = ({
   const formattedIndex = (() => String(index).padStart(3, '0'))()
 
   return (
-    <div className='p-4 rounded-xl bg-gray-50'>
-      <div className='flex items-center justify-between h-5 text-xs text-gray-500'>
-        <div className='flex items-center h-[18px] space-x-1 border border-gray-200 box-border rounded-md italic pl-1 pr-1.5 font-medium'>
+    <div className='rounded-xl bg-gray-50 p-4'>
+      <div className='flex h-5 items-center justify-between text-xs text-gray-500'>
+        <div className='box-border flex h-[18px] items-center space-x-1 rounded-md border border-gray-200 pl-1 pr-1.5 font-medium italic'>
           {sharpIcon}
           <span>{formattedIndex}</span>
         </div>
@@ -55,18 +55,18 @@ const PreviewItem: FC<IPreviewItemProps> = ({
           <span>{charNums} {t('datasetCreation.stepTwo.characters')}</span>
         </div>
       </div>
-      <div className='mt-2 max-h-[120px] line-clamp-6 overflow-hidden text-sm text-gray-800'>
+      <div className='mt-2 line-clamp-6 max-h-[120px] overflow-hidden text-sm text-gray-800'>
         {type === PreviewType.TEXT && (
           <div style={{ whiteSpace: 'pre-line' }}>{content}</div>
         )}
         {type === PreviewType.QA && (
           <div style={{ whiteSpace: 'pre-line' }}>
             <div className='flex'>
-              <div className='shrink-0 mr-2 text-medium text-gray-400'>Q</div>
+              <div className='text-medium mr-2 shrink-0 text-gray-400'>Q</div>
               <div style={{ whiteSpace: 'pre-line' }}>{qa?.question}</div>
             </div>
             <div className='flex'>
-              <div className='shrink-0 mr-2 text-medium text-gray-400'>A</div>
+              <div className='text-medium mr-2 shrink-0 text-gray-400'>A</div>
               <div style={{ whiteSpace: 'pre-line' }}>{qa?.answer}</div>
             </div>
           </div>
diff --git a/web/app/components/datasets/create/stepper/index.tsx b/web/app/components/datasets/create/stepper/index.tsx
index 317c1a76ee..76f2221da2 100644
--- a/web/app/components/datasets/create/stepper/index.tsx
+++ b/web/app/components/datasets/create/stepper/index.tsx
@@ -19,7 +19,7 @@ export const Stepper: FC<StepperProps> = (props) => {
             activeIndex={activeIndex}
             index={index}
           />
-          {!isLast && <div className='w-4 h-px bg-divider-deep' />}
+          {!isLast && <div className='bg-divider-deep h-px w-4' />}
         </Fragment>
       )
     })}
diff --git a/web/app/components/datasets/create/stop-embedding-modal/index.tsx b/web/app/components/datasets/create/stop-embedding-modal/index.tsx
index 929b581829..9d29187dc2 100644
--- a/web/app/components/datasets/create/stop-embedding-modal/index.tsx
+++ b/web/app/components/datasets/create/stop-embedding-modal/index.tsx
@@ -35,7 +35,7 @@ const StopEmbeddingModal = ({
       <div className={s.title}>{t('datasetCreation.stepThree.modelTitle')}</div>
       <div className={s.content}>{t('datasetCreation.stepThree.modelContent')}</div>
       <div className='flex flex-row-reverse'>
-        <Button className='w-24 ml-2' variant='primary' onClick={submit}>{t('datasetCreation.stepThree.modelButtonConfirm')}</Button>
+        <Button className='ml-2 w-24' variant='primary' onClick={submit}>{t('datasetCreation.stepThree.modelButtonConfirm')}</Button>
         <Button className='w-24' onClick={onHide}>{t('datasetCreation.stepThree.modelButtonCancel')}</Button>
       </div>
     </Modal>
diff --git a/web/app/components/datasets/create/top-bar/index.tsx b/web/app/components/datasets/create/top-bar/index.tsx
index 8235c4f804..bd7d1b30ae 100644
--- a/web/app/components/datasets/create/top-bar/index.tsx
+++ b/web/app/components/datasets/create/top-bar/index.tsx
@@ -25,16 +25,16 @@ export const TopBar: FC<TopBarProps> = (props) => {
   }, [datasetId])
 
   return <div className={classNames('flex shrink-0 h-[52px] items-center justify-between relative border-b border-b-divider-subtle', className)}>
-    <Link href={fallbackRoute} replace className="h-12 pl-2 pr-6 py-2 justify-start items-center gap-1 inline-flex">
+    <Link href={fallbackRoute} replace className="inline-flex h-12 items-center justify-start gap-1 py-2 pl-2 pr-6">
       <div className='p-2'>
-        <RiArrowLeftLine className='size-4 text-text-primary' />
+        <RiArrowLeftLine className='text-text-primary size-4' />
       </div>
       <p className="text-text-primary system-sm-semibold-uppercase">
         {t('datasetCreation.steps.header.fallbackRoute')}
       </p>
     </Link>
     <div className={
-      'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 absolute'
+      'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'
     }>
       <Stepper
         steps={Array.from({ length: 3 }, (_, i) => ({
diff --git a/web/app/components/datasets/create/website/base/checkbox-with-label.tsx b/web/app/components/datasets/create/website/base/checkbox-with-label.tsx
index 25d40fe076..e046c72f00 100644
--- a/web/app/components/datasets/create/website/base/checkbox-with-label.tsx
+++ b/web/app/components/datasets/create/website/base/checkbox-with-label.tsx
@@ -23,7 +23,7 @@ const CheckboxWithLabel: FC<Props> = ({
   tooltip,
 }) => {
   return (
-    <label className={cn(className, 'flex items-center h-7 space-x-2')}>
+    <label className={cn(className, 'flex h-7 items-center space-x-2')}>
       <Checkbox checked={isChecked} onCheck={() => onChange(!isChecked)} />
       <div className={cn(labelClassName, 'text-sm font-normal text-gray-800')}>{label}</div>
       {tooltip && (
diff --git a/web/app/components/datasets/create/website/base/crawled-result-item.tsx b/web/app/components/datasets/create/website/base/crawled-result-item.tsx
index 5531d3e140..09808e2d48 100644
--- a/web/app/components/datasets/create/website/base/crawled-result-item.tsx
+++ b/web/app/components/datasets/create/website/base/crawled-result-item.tsx
@@ -27,13 +27,13 @@ const CrawledResultItem: FC<Props> = ({
     onCheckChange(!isChecked)
   }, [isChecked, onCheckChange])
   return (
-    <div className={cn(isPreview ? 'border-[#D1E0FF] bg-primary-50 shadow-xs' : 'group hover:bg-gray-100', 'rounded-md px-2 py-[5px] cursor-pointer border border-transparent')}>
-      <div className='flex items-center h-5'>
-        <Checkbox className='group-hover:border-2 group-hover:border-primary-600 mr-2 shrink-0' checked={isChecked} onCheck={handleCheckChange} />
-        <div className='grow w-0 truncate text-sm font-medium text-gray-700' title={payload.title}>{payload.title}</div>
-        <div onClick={onPreview} className='hidden group-hover:flex items-center h-6 px-2 text-xs rounded-md font-medium text-gray-500 uppercase hover:bg-gray-50'>{t('datasetCreation.stepOne.website.preview')}</div>
+    <div className={cn(isPreview ? 'bg-primary-50 shadow-xs border-[#D1E0FF]' : 'group hover:bg-gray-100', 'cursor-pointer rounded-md border border-transparent px-2 py-[5px]')}>
+      <div className='flex h-5 items-center'>
+        <Checkbox className='group-hover:border-primary-600 mr-2 shrink-0 group-hover:border-2' checked={isChecked} onCheck={handleCheckChange} />
+        <div className='w-0 grow truncate text-sm font-medium text-gray-700' title={payload.title}>{payload.title}</div>
+        <div onClick={onPreview} className='hidden h-6 items-center rounded-md px-2 text-xs font-medium uppercase text-gray-500 hover:bg-gray-50 group-hover:flex'>{t('datasetCreation.stepOne.website.preview')}</div>
       </div>
-      <div className='mt-0.5 truncate pl-6 leading-[18px] text-xs font-normal text-gray-500' title={payload.source_url}>{payload.source_url}</div>
+      <div className='mt-0.5 truncate pl-6 text-xs font-normal leading-[18px] text-gray-500' title={payload.source_url}>{payload.source_url}</div>
     </div>
   )
 }
diff --git a/web/app/components/datasets/create/website/base/crawled-result.tsx b/web/app/components/datasets/create/website/base/crawled-result.tsx
index d5c8d1b80a..ee06be4dcc 100644
--- a/web/app/components/datasets/create/website/base/crawled-result.tsx
+++ b/web/app/components/datasets/create/website/base/crawled-result.tsx
@@ -58,7 +58,7 @@ const CrawledResult: FC<Props> = ({
 
   return (
     <div className={cn(className, 'border-t border-gray-200')}>
-      <div className='flex items-center justify-between h-[34px] px-4 bg-gray-50 shadow-xs border-b-[0.5px] border-black/8 text-xs font-normal text-gray-700'>
+      <div className='shadow-xs border-black/8 flex h-[34px] items-center justify-between border-b-[0.5px] bg-gray-50 px-4 text-xs font-normal text-gray-700'>
         <CheckboxWithLabel
           isChecked={isCheckAll}
           onChange={handleCheckedAll} label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`) : t(`${I18N_PREFIX}.selectAll`)}
diff --git a/web/app/components/datasets/create/website/base/crawling.tsx b/web/app/components/datasets/create/website/base/crawling.tsx
index ee26e7671a..6e2ab4f350 100644
--- a/web/app/components/datasets/create/website/base/crawling.tsx
+++ b/web/app/components/datasets/create/website/base/crawling.tsx
@@ -20,7 +20,7 @@ const Crawling: FC<Props> = ({
 
   return (
     <div className={cn(className, 'border-t border-gray-200')}>
-      <div className='flex items-center h-[34px] px-4 bg-gray-50 shadow-xs border-b-[0.5px] border-black/8 text-xs font-normal text-gray-700'>
+      <div className='shadow-xs border-black/8 flex h-[34px] items-center border-b-[0.5px] bg-gray-50 px-4 text-xs font-normal text-gray-700'>
         {t('datasetCreation.stepOne.website.totalPageScraped')} {crawledNum}/{totalNum}
       </div>
 
diff --git a/web/app/components/datasets/create/website/base/error-message.tsx b/web/app/components/datasets/create/website/base/error-message.tsx
index f061c4624e..4f83bc2570 100644
--- a/web/app/components/datasets/create/website/base/error-message.tsx
+++ b/web/app/components/datasets/create/website/base/error-message.tsx
@@ -16,13 +16,13 @@ const ErrorMessage: FC<Props> = ({
   errorMsg,
 }) => {
   return (
-    <div className={cn(className, 'py-2 px-4 border-t border-gray-200 bg-[#FFFAEB]')}>
-      <div className='flex items-center h-5'>
-        <AlertTriangle className='mr-2 w-4 h-4 text-text-warning-secondary' />
+    <div className={cn(className, 'border-t border-gray-200 bg-[#FFFAEB] px-4 py-2')}>
+      <div className='flex h-5 items-center'>
+        <AlertTriangle className='text-text-warning-secondary mr-2 h-4 w-4' />
         <div className='text-sm font-medium text-[#DC6803]'>{title}</div>
       </div>
       {errorMsg && (
-        <div className='mt-1 pl-6 leading-[18px] text-xs font-normal text-gray-700'>{errorMsg}</div>
+        <div className='mt-1 pl-6 text-xs font-normal leading-[18px] text-gray-700'>{errorMsg}</div>
       )}
     </div>
   )
diff --git a/web/app/components/datasets/create/website/base/field.tsx b/web/app/components/datasets/create/website/base/field.tsx
index 5b5ca90c5d..13477ff5ff 100644
--- a/web/app/components/datasets/create/website/base/field.tsx
+++ b/web/app/components/datasets/create/website/base/field.tsx
@@ -31,7 +31,7 @@ const Field: FC<Props> = ({
   return (
     <div className={cn(className)}>
       <div className='flex py-[7px]'>
-        <div className={cn(labelClassName, 'flex items-center h-[18px] text-[13px] font-medium text-gray-900')}>{label} </div>
+        <div className={cn(labelClassName, 'flex h-[18px] items-center text-[13px] font-medium text-gray-900')}>{label} </div>
         {isRequired && <span className='ml-0.5 text-xs font-semibold text-[#D92D20]'>*</span>}
         {tooltip && (
           <Tooltip
diff --git a/web/app/components/datasets/create/website/base/input.tsx b/web/app/components/datasets/create/website/base/input.tsx
index 7d2d2b609f..96e061c50c 100644
--- a/web/app/components/datasets/create/website/base/input.tsx
+++ b/web/app/components/datasets/create/website/base/input.tsx
@@ -50,7 +50,7 @@ const Input: FC<Props> = ({
       {...otherOption}
       value={value}
       onChange={handleChange}
-      className='flex h-9 w-full py-1 px-2 rounded-lg text-xs leading-normal bg-gray-100 caret-primary-600 hover:bg-gray-100 focus:ring-1 focus:ring-inset focus:ring-gray-200 focus-visible:outline-none focus:bg-gray-50 placeholder:text-gray-400'
+      className='caret-primary-600 flex h-9 w-full rounded-lg bg-gray-100 px-2 py-1 text-xs leading-normal placeholder:text-gray-400 hover:bg-gray-100 focus:bg-gray-50 focus:ring-1 focus:ring-inset focus:ring-gray-200 focus-visible:outline-none'
       placeholder={placeholder}
     />
   )
diff --git a/web/app/components/datasets/create/website/base/options-wrap.tsx b/web/app/components/datasets/create/website/base/options-wrap.tsx
index 652401a20f..a5fa6871cb 100644
--- a/web/app/components/datasets/create/website/base/options-wrap.tsx
+++ b/web/app/components/datasets/create/website/base/options-wrap.tsx
@@ -34,14 +34,14 @@ const OptionsWrap: FC<Props> = ({
   return (
     <div className={cn(className, !fold ? 'mb-0' : 'mb-3')}>
       <div
-        className='flex justify-between items-center h-[26px] py-1 cursor-pointer select-none'
+        className='flex h-[26px] cursor-pointer select-none items-center justify-between py-1'
         onClick={foldToggle}
       >
         <div className='flex items-center text-gray-700'>
-          <Settings04 className='mr-1 w-4 h-4' />
-          <div className='text-[13px] font-semibold text-gray-800 uppercase'>{t(`${I18N_PREFIX}.options`)}</div>
+          <Settings04 className='mr-1 h-4 w-4' />
+          <div className='text-[13px] font-semibold uppercase text-gray-800'>{t(`${I18N_PREFIX}.options`)}</div>
         </div>
-        <ChevronRight className={cn(!fold && 'rotate-90', 'w-4 h-4 text-gray-500')} />
+        <ChevronRight className={cn(!fold && 'rotate-90', 'h-4 w-4 text-gray-500')} />
       </div>
       {!fold && (
         <div className='mb-4'>
diff --git a/web/app/components/datasets/create/website/firecrawl/header.tsx b/web/app/components/datasets/create/website/firecrawl/header.tsx
index c06b816120..86b791aa14 100644
--- a/web/app/components/datasets/create/website/firecrawl/header.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/header.tsx
@@ -20,20 +20,20 @@ const Header: FC<Props> = ({
     <div className='flex h-6 items-center justify-between'>
       <div className='flex items-center'>
         <div className='text-base font-medium text-gray-700'>{t(`${I18N_PREFIX}.firecrawlTitle`)}</div>
-        <div className='ml-2 mr-1 w-px h-3.5 bg-gray-200'></div>
+        <div className='ml-2 mr-1 h-3.5 w-px bg-gray-200'></div>
         <div
-          className='p-1 rounded-md hover:bg-black/5 cursor-pointer'
+          className='cursor-pointer rounded-md p-1 hover:bg-black/5'
           onClick={onSetting}
         >
-          <Settings01 className='w-3.5 h-3.5 text-gray-500' />
+          <Settings01 className='h-3.5 w-3.5 text-gray-500' />
         </div>
       </div>
       <a
         href='https://docs.firecrawl.dev/introduction'
         target='_blank' rel='noopener noreferrer'
-        className='flex items-center text-xs text-primary-600'
+        className='text-primary-600 flex items-center text-xs'
       >
-        <BookOpen01 className='mr-1 w-3.5 h-3.5 text-primary-600' />
+        <BookOpen01 className='text-primary-600 mr-1 h-3.5 w-3.5' />
         {t(`${I18N_PREFIX}.firecrawlDoc`)}
       </a>
     </div>
diff --git a/web/app/components/datasets/create/website/firecrawl/index.tsx b/web/app/components/datasets/create/website/firecrawl/index.tsx
index aa4dffc174..c1c6462ca1 100644
--- a/web/app/components/datasets/create/website/firecrawl/index.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/index.tsx
@@ -179,7 +179,7 @@ const FireCrawl: FC<Props> = ({
   return (
     <div>
       <Header onSetting={handleSetting} />
-      <div className={cn('mt-2 p-4 pb-0 rounded-xl border border-gray-200')}>
+      <div className={cn('mt-2 rounded-xl border border-gray-200 p-4 pb-0')}>
         <UrlInput onRun={handleRun} isRunning={isRunning} />
         <OptionsWrap
           className={cn('mt-4')}
@@ -189,7 +189,7 @@ const FireCrawl: FC<Props> = ({
         </OptionsWrap>
 
         {!isInit && (
-          <div className='mt-3 relative left-[-16px] w-[calc(100%_+_32px)] rounded-b-xl'>
+          <div className='relative left-[-16px] mt-3 w-[calc(100%_+_32px)] rounded-b-xl'>
             {isRunning
               && <Crawling
                 className='mt-2'
diff --git a/web/app/components/datasets/create/website/firecrawl/options.tsx b/web/app/components/datasets/create/website/firecrawl/options.tsx
index 8cc2c6757c..10f1850b65 100644
--- a/web/app/components/datasets/create/website/firecrawl/options.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/options.tsx
@@ -39,7 +39,7 @@ const Options: FC<Props> = ({
       />
       <div className='flex justify-between space-x-4'>
         <Field
-          className='grow shrink-0'
+          className='shrink-0 grow'
           label={t(`${I18N_PREFIX}.limit`)}
           value={payload.limit}
           onChange={handleChange('limit')}
@@ -47,7 +47,7 @@ const Options: FC<Props> = ({
           isRequired
         />
         <Field
-          className='grow shrink-0'
+          className='shrink-0 grow'
           label={t(`${I18N_PREFIX}.maxDepth`)}
           value={payload.max_depth}
           onChange={handleChange('max_depth')}
@@ -58,14 +58,14 @@ const Options: FC<Props> = ({
 
       <div className='flex justify-between space-x-4'>
         <Field
-          className='grow shrink-0'
+          className='shrink-0 grow'
           label={t(`${I18N_PREFIX}.excludePaths`)}
           value={payload.excludes}
           onChange={handleChange('excludes')}
           placeholder='blog/*, /about/*'
         />
         <Field
-          className='grow shrink-0'
+          className='shrink-0 grow'
           label={t(`${I18N_PREFIX}.includeOnlyPaths`)}
           value={payload.includes}
           onChange={handleChange('includes')}
diff --git a/web/app/components/datasets/create/website/index.tsx b/web/app/components/datasets/create/website/index.tsx
index 58b7f5f2fd..1639bf0c18 100644
--- a/web/app/components/datasets/create/website/index.tsx
+++ b/web/app/components/datasets/create/website/index.tsx
@@ -73,12 +73,12 @@ const Website: FC<Props> = ({
   return (
     <div>
       <div className="mb-4">
-        <div className="font-medium text-gray-700 mb-2 h-6">
+        <div className="mb-2 h-6 font-medium text-gray-700">
           {t('datasetCreation.stepOne.website.chooseProvider')}
         </div>
         <div className="flex space-x-2">
           <button
-            className={`px-4 py-2 text-sm font-medium rounded-md flex items-center justify-center ${
+            className={`flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium ${
               selectedProvider === DataSourceProvider.jinaReader
                 ? 'bg-primary-50 text-primary-600'
                 : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
@@ -89,7 +89,7 @@ const Website: FC<Props> = ({
             <span>Jina Reader</span>
           </button>
           <button
-            className={`px-4 py-2 text-sm font-medium rounded-md ${
+            className={`rounded-md px-4 py-2 text-sm font-medium ${
               selectedProvider === DataSourceProvider.fireCrawl
                 ? 'bg-primary-50 text-primary-600'
                 : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
diff --git a/web/app/components/datasets/create/website/jina-reader/base/checkbox-with-label.tsx b/web/app/components/datasets/create/website/jina-reader/base/checkbox-with-label.tsx
index 609bce3125..754de1f370 100644
--- a/web/app/components/datasets/create/website/jina-reader/base/checkbox-with-label.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/base/checkbox-with-label.tsx
@@ -23,7 +23,7 @@ const CheckboxWithLabel: FC<Props> = ({
   tooltip,
 }) => {
   return (
-    <label className={cn(className, 'flex items-center h-7 space-x-2')}>
+    <label className={cn(className, 'flex h-7 items-center space-x-2')}>
       <Checkbox checked={isChecked} onCheck={() => onChange(!isChecked)} />
       <div className={cn(labelClassName, 'text-sm font-normal text-gray-800')}>{label}</div>
       {tooltip && (
diff --git a/web/app/components/datasets/create/website/jina-reader/base/error-message.tsx b/web/app/components/datasets/create/website/jina-reader/base/error-message.tsx
index 4bd23fa293..0f7c0a8ddf 100644
--- a/web/app/components/datasets/create/website/jina-reader/base/error-message.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/base/error-message.tsx
@@ -16,13 +16,13 @@ const ErrorMessage: FC<Props> = ({
   errorMsg,
 }) => {
   return (
-    <div className={cn(className, 'py-2 px-4 border-t border-gray-200 bg-[#FFFAEB]')}>
-      <div className='flex items-center h-5'>
-        <AlertTriangle className='mr-2 w-4 h-4 text-[#F79009]' />
+    <div className={cn(className, 'border-t border-gray-200 bg-[#FFFAEB] px-4 py-2')}>
+      <div className='flex h-5 items-center'>
+        <AlertTriangle className='mr-2 h-4 w-4 text-[#F79009]' />
         <div className='text-sm font-medium text-[#DC6803]'>{title}</div>
       </div>
       {errorMsg && (
-        <div className='mt-1 pl-6 leading-[18px] text-xs font-normal text-gray-700'>{errorMsg}</div>
+        <div className='mt-1 pl-6 text-xs font-normal leading-[18px] text-gray-700'>{errorMsg}</div>
       )}
     </div>
   )
diff --git a/web/app/components/datasets/create/website/jina-reader/base/field.tsx b/web/app/components/datasets/create/website/jina-reader/base/field.tsx
index 363a57bdfc..ed9679b026 100644
--- a/web/app/components/datasets/create/website/jina-reader/base/field.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/base/field.tsx
@@ -31,7 +31,7 @@ const Field: FC<Props> = ({
   return (
     <div className={cn(className)}>
       <div className='flex py-[7px]'>
-        <div className={cn(labelClassName, 'flex items-center h-[18px] text-[13px] font-medium text-gray-900')}>{label} </div>
+        <div className={cn(labelClassName, 'flex h-[18px] items-center text-[13px] font-medium text-gray-900')}>{label} </div>
         {isRequired && <span className='ml-0.5 text-xs font-semibold text-[#D92D20]'>*</span>}
         {tooltip && (
           <Tooltip
diff --git a/web/app/components/datasets/create/website/jina-reader/base/input.tsx b/web/app/components/datasets/create/website/jina-reader/base/input.tsx
index 450ef4f721..00bf9677ce 100644
--- a/web/app/components/datasets/create/website/jina-reader/base/input.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/base/input.tsx
@@ -50,7 +50,7 @@ const Input: FC<Props> = ({
       {...otherOption}
       value={value}
       onChange={handleChange}
-      className='flex h-9 w-full py-1 px-2 rounded-lg text-xs leading-normal bg-gray-100 caret-primary-600 hover:bg-gray-100 focus:ring-1 focus:ring-inset focus:ring-gray-200 focus-visible:outline-none focus:bg-gray-50 placeholder:text-gray-400'
+      className='caret-primary-600 flex h-9 w-full rounded-lg bg-gray-100 px-2 py-1 text-xs leading-normal placeholder:text-gray-400 hover:bg-gray-100 focus:bg-gray-50 focus:ring-1 focus:ring-inset focus:ring-gray-200 focus-visible:outline-none'
       placeholder={placeholder}
     />
   )
diff --git a/web/app/components/datasets/create/website/jina-reader/base/options-wrap.tsx b/web/app/components/datasets/create/website/jina-reader/base/options-wrap.tsx
index 6446948961..b766e44447 100644
--- a/web/app/components/datasets/create/website/jina-reader/base/options-wrap.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/base/options-wrap.tsx
@@ -34,14 +34,14 @@ const OptionsWrap: FC<Props> = ({
   return (
     <div className={cn(className, !fold ? 'mb-0' : 'mb-3')}>
       <div
-        className='flex justify-between items-center h-[26px] py-1 cursor-pointer select-none'
+        className='flex h-[26px] cursor-pointer select-none items-center justify-between py-1'
         onClick={foldToggle}
       >
         <div className='flex items-center text-gray-700'>
-          <Settings04 className='mr-1 w-4 h-4' />
-          <div className='text-[13px] font-semibold text-gray-800 uppercase'>{t(`${I18N_PREFIX}.options`)}</div>
+          <Settings04 className='mr-1 h-4 w-4' />
+          <div className='text-[13px] font-semibold uppercase text-gray-800'>{t(`${I18N_PREFIX}.options`)}</div>
         </div>
-        <ChevronRight className={cn(!fold && 'rotate-90', 'w-4 h-4 text-gray-500')} />
+        <ChevronRight className={cn(!fold && 'rotate-90', 'h-4 w-4 text-gray-500')} />
       </div>
       {!fold && (
         <div className='mb-4'>
diff --git a/web/app/components/datasets/create/website/jina-reader/crawled-result-item.tsx b/web/app/components/datasets/create/website/jina-reader/crawled-result-item.tsx
index 4999aeaea6..eba8848407 100644
--- a/web/app/components/datasets/create/website/jina-reader/crawled-result-item.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/crawled-result-item.tsx
@@ -27,13 +27,13 @@ const CrawledResultItem: FC<Props> = ({
     onCheckChange(!isChecked)
   }, [isChecked, onCheckChange])
   return (
-    <div className={cn(isPreview ? 'border-[#D1E0FF] bg-primary-50 shadow-xs' : 'group hover:bg-gray-100', 'rounded-md px-2 py-[5px] cursor-pointer border border-transparent')}>
-      <div className='flex items-center h-5'>
-        <Checkbox className='group-hover:border-2 group-hover:border-primary-600 mr-2 shrink-0' checked={isChecked} onCheck={handleCheckChange} />
-        <div className='grow w-0 truncate text-sm font-medium text-gray-700' title={payload.title}>{payload.title}</div>
-        <div onClick={onPreview} className='hidden group-hover:flex items-center h-6 px-2 text-xs rounded-md font-medium text-gray-500 uppercase hover:bg-gray-50'>{t('datasetCreation.stepOne.website.preview')}</div>
+    <div className={cn(isPreview ? 'bg-primary-50 shadow-xs border-[#D1E0FF]' : 'group hover:bg-gray-100', 'cursor-pointer rounded-md border border-transparent px-2 py-[5px]')}>
+      <div className='flex h-5 items-center'>
+        <Checkbox className='group-hover:border-primary-600 mr-2 shrink-0 group-hover:border-2' checked={isChecked} onCheck={handleCheckChange} />
+        <div className='w-0 grow truncate text-sm font-medium text-gray-700' title={payload.title}>{payload.title}</div>
+        <div onClick={onPreview} className='hidden h-6 items-center rounded-md px-2 text-xs font-medium uppercase text-gray-500 hover:bg-gray-50 group-hover:flex'>{t('datasetCreation.stepOne.website.preview')}</div>
       </div>
-      <div className='mt-0.5 truncate pl-6 leading-[18px] text-xs font-normal text-gray-500' title={payload.source_url}>{payload.source_url}</div>
+      <div className='mt-0.5 truncate pl-6 text-xs font-normal leading-[18px] text-gray-500' title={payload.source_url}>{payload.source_url}</div>
     </div>
   )
 }
diff --git a/web/app/components/datasets/create/website/jina-reader/crawled-result.tsx b/web/app/components/datasets/create/website/jina-reader/crawled-result.tsx
index 1746fe63e3..c82abc1b3d 100644
--- a/web/app/components/datasets/create/website/jina-reader/crawled-result.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/crawled-result.tsx
@@ -58,7 +58,7 @@ const CrawledResult: FC<Props> = ({
 
   return (
     <div className={cn(className, 'border-t border-gray-200')}>
-      <div className='flex items-center justify-between h-[34px] px-4 bg-gray-50 shadow-xs border-b-[0.5px] border-black/8 text-xs font-normal text-gray-700'>
+      <div className='shadow-xs border-black/8 flex h-[34px] items-center justify-between border-b-[0.5px] bg-gray-50 px-4 text-xs font-normal text-gray-700'>
         <CheckboxWithLabel
           isChecked={isCheckAll}
           onChange={handleCheckedAll} label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`) : t(`${I18N_PREFIX}.selectAll`)}
diff --git a/web/app/components/datasets/create/website/jina-reader/crawling.tsx b/web/app/components/datasets/create/website/jina-reader/crawling.tsx
index b84a938d22..ab909118c9 100644
--- a/web/app/components/datasets/create/website/jina-reader/crawling.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/crawling.tsx
@@ -20,7 +20,7 @@ const Crawling: FC<Props> = ({
 
   return (
     <div className={cn(className, 'border-t border-gray-200')}>
-      <div className='flex items-center h-[34px] px-4 bg-gray-50 shadow-xs border-b-[0.5px] border-black/8 text-xs font-normal text-gray-700'>
+      <div className='shadow-xs border-black/8 flex h-[34px] items-center border-b-[0.5px] bg-gray-50 px-4 text-xs font-normal text-gray-700'>
         {t('datasetCreation.stepOne.website.totalPageScraped')} {crawledNum}/{totalNum}
       </div>
 
diff --git a/web/app/components/datasets/create/website/jina-reader/header.tsx b/web/app/components/datasets/create/website/jina-reader/header.tsx
index 85014a30ee..8367176054 100644
--- a/web/app/components/datasets/create/website/jina-reader/header.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/header.tsx
@@ -20,20 +20,20 @@ const Header: FC<Props> = ({
     <div className='flex h-6 items-center justify-between'>
       <div className='flex items-center'>
         <div className='text-base font-medium text-gray-700'>{t(`${I18N_PREFIX}.jinaReaderTitle`)}</div>
-        <div className='ml-2 mr-1 w-px h-3.5 bg-gray-200'></div>
+        <div className='ml-2 mr-1 h-3.5 w-px bg-gray-200'></div>
         <div
-          className='p-1 rounded-md hover:bg-black/5 cursor-pointer'
+          className='cursor-pointer rounded-md p-1 hover:bg-black/5'
           onClick={onSetting}
         >
-          <Settings01 className='w-3.5 h-3.5 text-gray-500' />
+          <Settings01 className='h-3.5 w-3.5 text-gray-500' />
         </div>
       </div>
       <a
         href='https://jina.ai/reader'
         target='_blank' rel='noopener noreferrer'
-        className='flex items-center text-xs text-primary-600'
+        className='text-primary-600 flex items-center text-xs'
       >
-        <BookOpen01 className='mr-1 w-3.5 h-3.5 text-primary-600' />
+        <BookOpen01 className='text-primary-600 mr-1 h-3.5 w-3.5' />
         {t(`${I18N_PREFIX}.jinaReaderDoc`)}
       </a>
     </div>
diff --git a/web/app/components/datasets/create/website/jina-reader/index.tsx b/web/app/components/datasets/create/website/jina-reader/index.tsx
index 1c133f935c..8a044ce7b5 100644
--- a/web/app/components/datasets/create/website/jina-reader/index.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/index.tsx
@@ -192,7 +192,7 @@ const JinaReader: FC<Props> = ({
   return (
     <div>
       <Header onSetting={handleSetting} />
-      <div className={cn('mt-2 p-4 pb-0 rounded-xl border border-gray-200')}>
+      <div className={cn('mt-2 rounded-xl border border-gray-200 p-4 pb-0')}>
         <UrlInput onRun={handleRun} isRunning={isRunning} />
         <OptionsWrap
           className={cn('mt-4')}
@@ -202,7 +202,7 @@ const JinaReader: FC<Props> = ({
         </OptionsWrap>
 
         {!isInit && (
-          <div className='mt-3 relative left-[-16px] w-[calc(100%_+_32px)] rounded-b-xl'>
+          <div className='relative left-[-16px] mt-3 w-[calc(100%_+_32px)] rounded-b-xl'>
             {isRunning
               && <Crawling
                 className='mt-2'
diff --git a/web/app/components/datasets/create/website/jina-reader/options.tsx b/web/app/components/datasets/create/website/jina-reader/options.tsx
index 52cfaa8b3b..ae38845b13 100644
--- a/web/app/components/datasets/create/website/jina-reader/options.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/options.tsx
@@ -45,7 +45,7 @@ const Options: FC<Props> = ({
       />
       <div className='flex justify-between space-x-4'>
         <Field
-          className='grow shrink-0'
+          className='shrink-0 grow'
           label={t(`${I18N_PREFIX}.limit`)}
           value={payload.limit}
           onChange={handleChange('limit')}
diff --git a/web/app/components/datasets/create/website/no-data.tsx b/web/app/components/datasets/create/website/no-data.tsx
index 8a508a48c6..39a8052fc8 100644
--- a/web/app/components/datasets/create/website/no-data.tsx
+++ b/web/app/components/datasets/create/website/no-data.tsx
@@ -37,13 +37,13 @@ const NoData: FC<Props> = ({
 
   return (
     <>
-      <div className='max-w-[640px] p-6 rounded-2xl bg-gray-50 mt-4'>
-        <div className='flex w-11 h-11 items-center justify-center bg-gray-50 rounded-xl border-[0.5px] border-gray-100 shadow-lg'>
+      <div className='mt-4 max-w-[640px] rounded-2xl bg-gray-50 p-6'>
+        <div className='flex h-11 w-11 items-center justify-center rounded-xl border-[0.5px] border-gray-100 bg-gray-50 shadow-lg'>
           {currentProvider.emoji}
         </div>
         <div className='my-2'>
-          <span className='text-gray-700 font-semibold'>{currentProvider.title}<Icon3Dots className='inline relative -top-3 -left-1.5' /></span>
-          <div className='mt-1 pb-3 text-gray-500 text-[13px] font-normal'>
+          <span className='font-semibold text-gray-700'>{currentProvider.title}<Icon3Dots className='relative -left-1.5 -top-3 inline' /></span>
+          <div className='mt-1 pb-3 text-[13px] font-normal text-gray-500'>
             {currentProvider.description}
           </div>
         </div>
diff --git a/web/app/components/datasets/create/website/preview.tsx b/web/app/components/datasets/create/website/preview.tsx
index 5180a83442..4a4bc7b27e 100644
--- a/web/app/components/datasets/create/website/preview.tsx
+++ b/web/app/components/datasets/create/website/preview.tsx
@@ -22,14 +22,14 @@ const WebsitePreview = ({
       <div className={cn(s.previewHeader)}>
         <div className={cn(s.title)}>
           <span>{t('datasetCreation.stepOne.pagePreview')}</span>
-          <div className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={hidePreview}>
+          <div className='flex h-6 w-6 cursor-pointer items-center justify-center' onClick={hidePreview}>
             <XMarkIcon className='h-4 w-4'></XMarkIcon>
           </div>
         </div>
-        <div className='leading-5 text-sm font-medium text-gray-900 break-words'>
+        <div className='break-words text-sm font-medium leading-5 text-gray-900'>
           {payload.title}
         </div>
-        <div className='truncate leading-[18px] text-xs font-normal text-gray-500' title={payload.source_url}>{payload.source_url}</div>
+        <div className='truncate text-xs font-normal leading-[18px] text-gray-500' title={payload.source_url}>{payload.source_url}</div>
       </div>
       <div className={cn(s.previewContent)}>
         <div className={cn(s.fileContent, 'body-md-regular')}>{payload.markdown}</div>
diff --git a/web/app/components/datasets/documents/detail/batch-modal/csv-downloader.tsx b/web/app/components/datasets/documents/detail/batch-modal/csv-downloader.tsx
index 6602244a48..a4863d6000 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/csv-downloader.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/csv-downloader.tsx
@@ -50,20 +50,20 @@ const CSVDownload: FC<{ docForm: ChunkingMode }> = ({ docForm }) => {
 
   return (
     <div className='mt-6'>
-      <div className='text-sm text-gray-900 font-medium'>{t('share.generation.csvStructureTitle')}</div>
+      <div className='text-sm font-medium text-gray-900'>{t('share.generation.csvStructureTitle')}</div>
       <div className='mt-2 max-h-[500px] overflow-auto'>
         {docForm === ChunkingMode.qa && (
-          <table className='table-fixed w-full border-separate border-spacing-0 border border-gray-200 rounded-lg text-xs'>
+          <table className='w-full table-fixed border-separate border-spacing-0 rounded-lg border border-gray-200 text-xs'>
             <thead className='text-gray-500'>
               <tr>
-                <td className='h-9 pl-3 pr-2 border-b border-gray-200'>{t('datasetDocuments.list.batchModal.question')}</td>
-                <td className='h-9 pl-3 pr-2 border-b border-gray-200'>{t('datasetDocuments.list.batchModal.answer')}</td>
+                <td className='h-9 border-b border-gray-200 pl-3 pr-2'>{t('datasetDocuments.list.batchModal.question')}</td>
+                <td className='h-9 border-b border-gray-200 pl-3 pr-2'>{t('datasetDocuments.list.batchModal.answer')}</td>
               </tr>
             </thead>
             <tbody className='text-gray-700'>
               <tr>
-                <td className='h-9 pl-3 pr-2 border-b border-gray-100 text-[13px]'>{t('datasetDocuments.list.batchModal.question')} 1</td>
-                <td className='h-9 pl-3 pr-2 border-b border-gray-100 text-[13px]'>{t('datasetDocuments.list.batchModal.answer')} 1</td>
+                <td className='h-9 border-b border-gray-100 pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.question')} 1</td>
+                <td className='h-9 border-b border-gray-100 pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.answer')} 1</td>
               </tr>
               <tr>
                 <td className='h-9 pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.question')} 2</td>
@@ -73,15 +73,15 @@ const CSVDownload: FC<{ docForm: ChunkingMode }> = ({ docForm }) => {
           </table>
         )}
         {docForm === ChunkingMode.text && (
-          <table className='table-fixed w-full border-separate border-spacing-0 border border-gray-200 rounded-lg text-xs'>
+          <table className='w-full table-fixed border-separate border-spacing-0 rounded-lg border border-gray-200 text-xs'>
             <thead className='text-gray-500'>
               <tr>
-                <td className='h-9 pl-3 pr-2 border-b border-gray-200'>{t('datasetDocuments.list.batchModal.contentTitle')}</td>
+                <td className='h-9 border-b border-gray-200 pl-3 pr-2'>{t('datasetDocuments.list.batchModal.contentTitle')}</td>
               </tr>
             </thead>
             <tbody className='text-gray-700'>
               <tr>
-                <td className='h-9 pl-3 pr-2 border-b border-gray-100 text-[13px]'>{t('datasetDocuments.list.batchModal.content')} 1</td>
+                <td className='h-9 border-b border-gray-100 pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.content')} 1</td>
               </tr>
               <tr>
                 <td className='h-9 pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.content')} 2</td>
@@ -91,14 +91,14 @@ const CSVDownload: FC<{ docForm: ChunkingMode }> = ({ docForm }) => {
         )}
       </div>
       <CSVDownloader
-        className="block mt-2 cursor-pointer"
+        className="mt-2 block cursor-pointer"
         type={Type.Link}
         filename={'template'}
         bom={true}
         data={getTemplate()}
       >
-        <div className='flex items-center h-[18px] space-x-1 text-text-accent text-xs font-medium'>
-          <DownloadIcon className='w-3 h-3 mr-1' />
+        <div className='text-text-accent flex h-[18px] items-center space-x-1 text-xs font-medium'>
+          <DownloadIcon className='mr-1 h-3 w-3' />
           {t('datasetDocuments.list.batchModal.template')}
         </div>
       </CSVDownloader>
diff --git a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
index edac3e2833..57d02ead86 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
@@ -93,29 +93,29 @@ const CSVUploader: FC<Props> = ({
       />
       <div ref={dropRef}>
         {!file && (
-          <div className={cn('flex items-center h-20 rounded-xl bg-gray-50 border border-dashed border-gray-200 text-sm font-normal', dragging && 'bg-[#F5F8FF] border border-[#B2CCFF]')}>
-            <div className='w-full flex items-center justify-center space-x-2'>
+          <div className={cn('flex h-20 items-center rounded-xl border border-dashed border-gray-200 bg-gray-50 text-sm font-normal', dragging && 'border border-[#B2CCFF] bg-[#F5F8FF]')}>
+            <div className='flex w-full items-center justify-center space-x-2'>
               <CSVIcon className="shrink-0" />
               <div className='text-gray-500'>
                 {t('datasetDocuments.list.batchModal.csvUploadTitle')}
                 <span className='text-primary-400 cursor-pointer' onClick={selectHandle}>{t('datasetDocuments.list.batchModal.browse')}</span>
               </div>
             </div>
-            {dragging && <div ref={dragRef} className='absolute w-full h-full top-0 left-0' />}
+            {dragging && <div ref={dragRef} className='absolute left-0 top-0 h-full w-full' />}
           </div>
         )}
         {file && (
-          <div className={cn('flex items-center h-20 px-6 rounded-xl bg-gray-50 border border-gray-200 text-sm font-normal group', 'hover:bg-[#F5F8FF] hover:border-[#B2CCFF]')}>
+          <div className={cn('group flex h-20 items-center rounded-xl border border-gray-200 bg-gray-50 px-6 text-sm font-normal', 'hover:border-[#B2CCFF] hover:bg-[#F5F8FF]')}>
             <CSVIcon className="shrink-0" />
-            <div className='flex ml-2 w-0 grow'>
-              <span className='max-w-[calc(100%_-_30px)] text-ellipsis whitespace-nowrap overflow-hidden text-gray-800'>{file.name.replace(/.csv$/, '')}</span>
+            <div className='ml-2 flex w-0 grow'>
+              <span className='max-w-[calc(100%_-_30px)] overflow-hidden text-ellipsis whitespace-nowrap text-gray-800'>{file.name.replace(/.csv$/, '')}</span>
               <span className='shrink-0 text-gray-500'>.csv</span>
             </div>
-            <div className='hidden group-hover:flex items-center'>
+            <div className='hidden items-center group-hover:flex'>
               <Button onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
-              <div className='mx-2 w-px h-4 bg-gray-200' />
-              <div className='p-2 cursor-pointer' onClick={removeFile}>
-                <RiDeleteBinLine className='w-4 h-4 text-gray-500' />
+              <div className='mx-2 h-4 w-px bg-gray-200' />
+              <div className='cursor-pointer p-2' onClick={removeFile}>
+                <RiDeleteBinLine className='h-4 w-4 text-gray-500' />
               </div>
             </div>
           </div>
diff --git a/web/app/components/datasets/documents/detail/batch-modal/index.tsx b/web/app/components/datasets/documents/detail/batch-modal/index.tsx
index c666ba6715..f7518844d5 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/index.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/index.tsx
@@ -39,10 +39,10 @@ const BatchModal: FC<IBatchModalProps> = ({
   }, [isShow])
 
   return (
-    <Modal isShow={isShow} onClose={() => { }} className='px-8 py-6 !max-w-[520px] !rounded-xl'>
+    <Modal isShow={isShow} onClose={() => { }} className='!max-w-[520px] !rounded-xl px-8 py-6'>
       <div className='relative pb-1 text-xl font-medium leading-[30px] text-gray-900'>{t('datasetDocuments.list.batchModal.title')}</div>
-      <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onCancel}>
-        <RiCloseLine className='w-4 h-4 text-gray-500' />
+      <div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onCancel}>
+        <RiCloseLine className='h-4 w-4 text-gray-500' />
       </div>
       <CSVUploader
         file={currentCSV}
@@ -51,7 +51,7 @@ const BatchModal: FC<IBatchModalProps> = ({
       <CSVDownloader
         docForm={docForm}
       />
-      <div className='mt-[28px] pt-6 flex justify-end'>
+      <div className='mt-[28px] flex justify-end pt-6'>
         <Button className='mr-2' onClick={onCancel}>
           {t('datasetDocuments.list.batchModal.cancel')}
         </Button>
diff --git a/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx b/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
index 085bfddc16..cf01905013 100644
--- a/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
+++ b/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
@@ -73,7 +73,7 @@ const ChildSegmentDetail: FC<IChildSegmentDetailProps> = ({
   }, [childChunkInfo?.updated_at])
 
   return (
-    <div className={'flex flex-col h-full'}>
+    <div className={'flex h-full flex-col'}>
       <div className={classNames('flex items-center justify-between', fullScreen ? 'py-3 pr-4 pl-6 border border-divider-subtle' : 'pt-3 pr-3 pl-4')}>
         <div className='flex flex-col'>
           <div className='text-text-primary system-xl-semibold'>{t('datasetDocuments.segment.editChildChunk')}</div>
@@ -96,14 +96,14 @@ const ChildSegmentDetail: FC<IChildSegmentDetailProps> = ({
                 loading={loading}
                 isChildChunk={true}
               />
-              <Divider type='vertical' className='h-3.5 bg-divider-regular ml-4 mr-2' />
+              <Divider type='vertical' className='bg-divider-regular ml-4 mr-2 h-3.5' />
             </>
           )}
-          <div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer mr-1' onClick={toggleFullScreen}>
-            <RiExpandDiagonalLine className='w-4 h-4 text-text-tertiary' />
+          <div className='mr-1 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={toggleFullScreen}>
+            <RiExpandDiagonalLine className='text-text-tertiary h-4 w-4' />
           </div>
-          <div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer' onClick={onCancel}>
-            <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+          <div className='flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={onCancel}>
+            <RiCloseLine className='text-text-tertiary h-4 w-4' />
           </div>
         </div>
       </div>
@@ -118,7 +118,7 @@ const ChildSegmentDetail: FC<IChildSegmentDetailProps> = ({
         </div>
       </div>
       {!fullScreen && (
-        <div className='flex items-center justify-end p-4 pt-3 border-t-[1px] border-t-divider-subtle'>
+        <div className='border-t-divider-subtle flex items-center justify-end border-t-[1px] p-4 pt-3'>
           <ActionButtons
             handleCancel={handleCancel}
             handleSave={handleSave}
diff --git a/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx b/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx
index 1615ea98cf..a1fe0fd680 100644
--- a/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx
+++ b/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx
@@ -94,7 +94,7 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
       isParagraphMode ? 'pt-1 pb-2' : 'px-3 grow',
       (isFullDocMode && isLoading) && 'overflow-y-hidden',
     )}>
-      {isFullDocMode ? <Divider type='horizontal' className='h-[1px] bg-divider-subtle my-1' /> : null}
+      {isFullDocMode ? <Divider type='horizontal' className='bg-divider-subtle my-1 h-[1px]' /> : null}
       <div className={classNames('flex items-center justify-between', isFullDocMode ? 'pt-2 pb-3 sticky -top-2 left-0 bg-background-default' : '')}>
         <div className={classNames(
           'h-7 flex items-center pl-1 pr-3 rounded-lg',
@@ -111,9 +111,9 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
             isParagraphMode
               ? collapsed
                 ? (
-                  <RiArrowRightSLine className='w-4 h-4 text-text-secondary opacity-50 mr-0.5' />
+                  <RiArrowRightSLine className='text-text-secondary mr-0.5 h-4 w-4 opacity-50' />
                 )
-                : (<RiArrowDownSLine className='w-4 h-4 text-text-secondary mr-0.5' />)
+                : (<RiArrowDownSLine className='text-text-secondary mr-0.5 h-4 w-4' />)
               : null
           }
           <span className='text-text-secondary system-sm-semibold-uppercase'>{totalText}</span>
@@ -150,7 +150,7 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
         ? <div className={classNames('flex gap-x-0.5', isFullDocMode ? 'grow mb-6' : 'items-center')}>
           {isParagraphMode && (
             <div className='self-stretch'>
-              <Divider type='vertical' className='w-[2px] mx-[7px] bg-text-accent-secondary' />
+              <Divider type='vertical' className='bg-text-accent-secondary mx-[7px] w-[2px]' />
             </div>
           )}
           {childChunks.length > 0
diff --git a/web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx b/web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx
index 1238d98a9c..4bc7d71caf 100644
--- a/web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx
@@ -50,7 +50,7 @@ const ActionButtons: FC<IActionButtonsProps> = ({
       >
         <div className='flex items-center gap-x-1'>
           <span className='text-components-button-secondary-text system-sm-medium'>{t('common.operation.cancel')}</span>
-          <span className='px-[1px] bg-components-kbd-bg-gray rounded-[4px] text-text-tertiary system-kbd'>ESC</span>
+          <span className='bg-components-kbd-bg-gray text-text-tertiary system-kbd rounded-[4px] px-[1px]'>ESC</span>
         </div>
       </Button>
       {(isParentChildParagraphMode && actionType === 'edit' && !isChildChunk)
@@ -72,8 +72,8 @@ const ActionButtons: FC<IActionButtonsProps> = ({
         <div className='flex items-center gap-x-1'>
           <span className='text-components-button-primary-text'>{t('common.operation.save')}</span>
           <div className='flex items-center gap-x-0.5'>
-            <span className='w-4 h-4 bg-components-kbd-bg-white rounded-[4px] text-text-primary-on-surface system-kbd capitalize'>{getKeyboardKeyNameBySystem('ctrl')}</span>
-            <span className='w-4 h-4 bg-components-kbd-bg-white rounded-[4px] text-text-primary-on-surface system-kbd'>S</span>
+            <span className='bg-components-kbd-bg-white text-text-primary-on-surface system-kbd h-4 w-4 rounded-[4px] capitalize'>{getKeyboardKeyNameBySystem('ctrl')}</span>
+            <span className='bg-components-kbd-bg-white text-text-primary-on-surface system-kbd h-4 w-4 rounded-[4px]'>S</span>
           </div>
         </div>
       </Button>
diff --git a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
index 3dd3689b64..2007735fbc 100644
--- a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
@@ -42,43 +42,43 @@ const BatchAction: FC<IBatchActionProps> = ({
   }
   return (
     <div className={classNames('w-full flex justify-center gap-x-2', className)}>
-      <div className='flex items-center gap-x-1 p-1 rounded-[10px] bg-components-actionbar-bg-accent border border-components-actionbar-border-accent shadow-xl shadow-shadow-shadow-5 backdrop-blur-[5px]'>
-        <div className='inline-flex items-center gap-x-2 pl-2 pr-3 py-1'>
-          <span className='w-5 h-5 flex items-center justify-center px-1 py-0.5 bg-text-accent rounded-md text-text-primary-on-surface text-xs font-medium'>
+      <div className='bg-components-actionbar-bg-accent border-components-actionbar-border-accent shadow-shadow-shadow-5 flex items-center gap-x-1 rounded-[10px] border p-1 shadow-xl backdrop-blur-[5px]'>
+        <div className='inline-flex items-center gap-x-2 py-1 pl-2 pr-3'>
+          <span className='bg-text-accent text-text-primary-on-surface flex h-5 w-5 items-center justify-center rounded-md px-1 py-0.5 text-xs font-medium'>
             {selectedIds.length}
           </span>
           <span className='text-text-accent text-[13px] font-semibold leading-[16px]'>{t(`${i18nPrefix}.selected`)}</span>
         </div>
-        <Divider type='vertical' className='mx-0.5 h-3.5 bg-divider-regular' />
+        <Divider type='vertical' className='bg-divider-regular mx-0.5 h-3.5' />
         <div className='flex items-center gap-x-0.5 px-3 py-2'>
-          <RiCheckboxCircleLine className='w-4 h-4 text-components-button-ghost-text' />
-          <button type='button' className='px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onBatchEnable}>
+          <RiCheckboxCircleLine className='text-components-button-ghost-text h-4 w-4' />
+          <button type='button' className='text-components-button-ghost-text px-0.5 text-[13px] font-medium leading-[16px]' onClick={onBatchEnable}>
             {t(`${i18nPrefix}.enable`)}
           </button>
         </div>
         <div className='flex items-center gap-x-0.5 px-3 py-2'>
-          <RiCloseCircleLine className='w-4 h-4 text-components-button-ghost-text' />
-          <button type='button' className='px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onBatchDisable}>
+          <RiCloseCircleLine className='text-components-button-ghost-text h-4 w-4' />
+          <button type='button' className='text-components-button-ghost-text px-0.5 text-[13px] font-medium leading-[16px]' onClick={onBatchDisable}>
             {t(`${i18nPrefix}.disable`)}
           </button>
         </div>
         {onArchive && (
           <div className='flex items-center gap-x-0.5 px-3 py-2'>
-            <RiArchive2Line className='w-4 h-4 text-components-button-ghost-text' />
-            <button type='button' className='px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onArchive}>
+            <RiArchive2Line className='text-components-button-ghost-text h-4 w-4' />
+            <button type='button' className='text-components-button-ghost-text px-0.5 text-[13px] font-medium leading-[16px]' onClick={onArchive}>
               {t(`${i18nPrefix}.archive`)}
             </button>
           </div>
         )}
         <div className='flex items-center gap-x-0.5 px-3 py-2'>
-          <RiDeleteBinLine className='w-4 h-4 text-components-button-destructive-ghost-text' />
-          <button type='button' className='px-0.5 text-components-button-destructive-ghost-text text-[13px] font-medium leading-[16px]' onClick={showDeleteConfirm}>
+          <RiDeleteBinLine className='text-components-button-destructive-ghost-text h-4 w-4' />
+          <button type='button' className='text-components-button-destructive-ghost-text px-0.5 text-[13px] font-medium leading-[16px]' onClick={showDeleteConfirm}>
             {t(`${i18nPrefix}.delete`)}
           </button>
         </div>
 
-        <Divider type='vertical' className='mx-0.5 h-3.5 bg-divider-regular' />
-        <button type='button' className='px-3.5 py-2 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onCancel}>
+        <Divider type='vertical' className='bg-divider-regular mx-0.5 h-3.5' />
+        <button type='button' className='text-components-button-ghost-text px-3.5 py-2 text-[13px] font-medium leading-[16px]' onClick={onCancel}>
           {t(`${i18nPrefix}.cancel`)}
         </button>
       </div>
diff --git a/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx b/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
index af2989b188..dc64788194 100644
--- a/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
@@ -120,7 +120,7 @@ const QATextArea: FC<IQATextAreaProps> = React.memo(({
 
   return (
     <div ref={containerRef} className='h-full overflow-hidden'>
-      <div ref={labelRef} className='text-text-tertiary text-xs font-medium mb-1'>QUESTION</div>
+      <div ref={labelRef} className='text-text-tertiary mb-1 text-xs font-medium'>QUESTION</div>
       <AutoResizeTextArea
         className='text-text-secondary text-sm tracking-[-0.07px] caret-[#295EFF]'
         value={question}
@@ -130,7 +130,7 @@ const QATextArea: FC<IQATextAreaProps> = React.memo(({
         containerRef={containerRef}
         labelRef={labelRef}
       />
-      <div className='text-text-tertiary text-xs font-medium mb-1 mt-6'>ANSWER</div>
+      <div className='text-text-tertiary mb-1 mt-6 text-xs font-medium'>ANSWER</div>
       <AutoResizeTextArea
         className='text-text-secondary text-sm tracking-[-0.07px] caret-[#295EFF]'
         value={answer}
@@ -179,7 +179,7 @@ const ChunkContent: FC<IChunkContentProps> = ({
   if (!isEditMode) {
     return (
       <Markdown
-        className='h-full w-full !text-text-secondary'
+        className='!text-text-secondary h-full w-full'
         content={question}
       />
     )
@@ -187,7 +187,7 @@ const ChunkContent: FC<IChunkContentProps> = ({
 
   return (
     <Textarea
-      className='h-full w-full pb-6 body-md-regular text-text-secondary tracking-[-0.07px] caret-[#295EFF]'
+      className='body-md-regular text-text-secondary h-full w-full pb-6 tracking-[-0.07px] caret-[#295EFF]'
       value={question}
       placeholder={t('datasetDocuments.segment.contentPlaceholder') || ''}
       onChange={e => onQuestionChange(e.target.value)}
diff --git a/web/app/components/datasets/documents/detail/completed/common/empty.tsx b/web/app/components/datasets/documents/detail/completed/common/empty.tsx
index cabcb6d4db..0af13e7cf9 100644
--- a/web/app/components/datasets/documents/detail/completed/common/empty.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/empty.tsx
@@ -8,7 +8,7 @@ type IEmptyProps = {
 
 const EmptyCard = React.memo(() => {
   return (
-    <div className='w-full h-32 rounded-xl opacity-30 bg-background-section-burn shrink-0' />
+    <div className='bg-background-section-burn h-32 w-full shrink-0 rounded-xl opacity-30' />
   )
 })
 
@@ -43,14 +43,14 @@ const Empty: FC<IEmptyProps> = ({
   const { t } = useTranslation()
 
   return (
-    <div className={'h-full relative flex items-center justify-center z-0'}>
+    <div className={'relative z-0 flex h-full items-center justify-center'}>
       <div className='flex flex-col items-center'>
-        <div className='relative z-10 flex items-center justify-center w-14 h-14 border border-divider-subtle bg-components-card-bg rounded-xl shadow-lg shadow-shadow-shadow-5'>
-          <RiFileList2Line className='w-6 h-6 text-text-secondary' />
+        <div className='border-divider-subtle bg-components-card-bg shadow-shadow-shadow-5 relative z-10 flex h-14 w-14 items-center justify-center rounded-xl border shadow-lg'>
+          <RiFileList2Line className='text-text-secondary h-6 w-6' />
           <Line className='absolute -right-[1px] top-1/2 -translate-y-1/2' />
           <Line className='absolute -left-[1px] top-1/2 -translate-y-1/2' />
-          <Line className='absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
-          <Line className='absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
+          <Line className='absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rotate-90' />
+          <Line className='absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 rotate-90' />
         </div>
         <div className='text-text-tertiary system-md-regular mt-3'>
           {t('datasetDocuments.segment.empty')}
@@ -63,14 +63,14 @@ const Empty: FC<IEmptyProps> = ({
           {t('datasetDocuments.segment.clearFilter')}
         </button>
       </div>
-      <div className='h-full w-full absolute top-0 left-0 flex flex-col gap-y-3 -z-20 overflow-hidden'>
+      <div className='absolute left-0 top-0 -z-20 flex h-full w-full flex-col gap-y-3 overflow-hidden'>
         {
           Array.from({ length: 10 }).map((_, i) => (
             <EmptyCard key={i} />
           ))
         }
       </div>
-      <div className='h-full w-full absolute top-0 left-0 bg-dataset-chunk-list-mask-bg -z-10' />
+      <div className='bg-dataset-chunk-list-mask-bg absolute left-0 top-0 -z-10 h-full w-full' />
     </div>
   )
 }
diff --git a/web/app/components/datasets/documents/detail/completed/common/keywords.tsx b/web/app/components/datasets/documents/detail/completed/common/keywords.tsx
index 8c85ec1378..83aec2b9f9 100644
--- a/web/app/components/datasets/documents/detail/completed/common/keywords.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/keywords.tsx
@@ -25,7 +25,7 @@ const Keywords: FC<IKeywordsProps> = ({
   return (
     <div className={classNames('flex flex-col', className)}>
       <div className='text-text-tertiary system-xs-medium-uppercase'>{t('datasetDocuments.segment.keywords')}</div>
-      <div className='text-text-tertiary w-full max-h-[200px] overflow-auto flex flex-wrap gap-1'>
+      <div className='text-text-tertiary flex max-h-[200px] w-full flex-wrap gap-1 overflow-auto'>
         {(!segInfo?.keywords?.length && actionType === 'view')
           ? '-'
           : (
diff --git a/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx b/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
index c9356b7f8a..a5f4ff30fc 100644
--- a/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
@@ -48,7 +48,7 @@ const RegeneratingContent: FC = React.memo(() => {
       </div>
       <div className='flex justify-end pt-6'>
         <Button variant='warning' destructive disabled className='inline-flex items-center gap-x-0.5'>
-          <RiLoader2Line className='w-4 h-4 text-components-button-destructive-primary-text-disabled animate-spin' />
+          <RiLoader2Line className='text-components-button-destructive-primary-text-disabled h-4 w-4 animate-spin' />
           <span>{t('common.operation.regenerate')}</span>
         </Button>
       </div>
diff --git a/web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx b/web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx
index 436bfb3543..459ebf0d47 100644
--- a/web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx
@@ -27,7 +27,7 @@ export const SegmentIndexTag: FC<ISegmentIndexTagProps> = ({
   }, [positionId, labelPrefix])
   return (
     <div className={cn('flex items-center', className)}>
-      <Chunk className={cn('w-3 h-3 p-[1px] text-text-tertiary mr-0.5', iconClassName)} />
+      <Chunk className={cn('text-text-tertiary mr-0.5 h-3 w-3 p-[1px]', iconClassName)} />
       <div className={cn('text-text-tertiary system-xs-medium', labelClassName)}>
         {label || localPositionId}
       </div>
diff --git a/web/app/components/datasets/documents/detail/completed/common/tag.tsx b/web/app/components/datasets/documents/detail/completed/common/tag.tsx
index bb7261ec91..6092d421d5 100644
--- a/web/app/components/datasets/documents/detail/completed/common/tag.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/tag.tsx
@@ -5,7 +5,7 @@ const Tag = ({ text, className }: { text: string; className?: string }) => {
   return (
     <div className={cn('inline-flex items-center gap-x-0.5', className)}>
       <span className='text-text-quaternary text-xs font-medium'>#</span>
-      <span className='text-text-tertiary text-xs max-w-12 line-clamp-1 shrink-0'>{text}</span>
+      <span className='text-text-tertiary line-clamp-1 max-w-12 shrink-0 text-xs'>{text}</span>
     </div>
   )
 }
diff --git a/web/app/components/datasets/documents/detail/completed/display-toggle.tsx b/web/app/components/datasets/documents/detail/completed/display-toggle.tsx
index b58b20c5f8..25232d806d 100644
--- a/web/app/components/datasets/documents/detail/completed/display-toggle.tsx
+++ b/web/app/components/datasets/documents/detail/completed/display-toggle.tsx
@@ -22,14 +22,14 @@ const DisplayToggle: FC<DisplayToggleProps> = ({
     >
       <button
         type='button'
-        className='flex items-center justify-center p-2 rounded-lg bg-components-button-secondary-bg
-        border-[0.5px] border-components-button-secondary-border shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]'
+        className='bg-components-button-secondary-bg border-components-button-secondary-border shadow-xs shadow-shadow-shadow-3 flex items-center
+        justify-center rounded-lg border-[0.5px] p-2 backdrop-blur-[5px]'
         onClick={toggleCollapsed}
       >
         {
           isCollapsed
-            ? <RiLineHeight className='w-4 h-4 text-components-button-secondary-text' />
-            : <Collapse className='w-4 h-4 text-components-button-secondary-text' />
+            ? <RiLineHeight className='text-components-button-secondary-text h-4 w-4' />
+            : <Collapse className='text-components-button-secondary-text h-4 w-4' />
         }
       </button>
 
diff --git a/web/app/components/datasets/documents/detail/completed/index.tsx b/web/app/components/datasets/documents/detail/completed/index.tsx
index e81d3cf3be..ffcf22a0bf 100644
--- a/web/app/components/datasets/documents/detail/completed/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/index.tsx
@@ -585,7 +585,7 @@ const Completed: FC<ICompletedProps> = ({
           onCheck={onSelectedAll}
           disabled={isLoadingSegmentList}
         />
-        <div className={'system-sm-semibold-uppercase pl-5 text-text-secondary flex-1'}>{totalText}</div>
+        <div className={'system-sm-semibold-uppercase text-text-secondary flex-1 pl-5'}>{totalText}</div>
         <SimpleSelect
           onSelect={onChangeStatus}
           items={statusList.current}
@@ -605,14 +605,14 @@ const Completed: FC<ICompletedProps> = ({
           onChange={e => handleInputChange(e.target.value)}
           onClear={() => handleInputChange('')}
         />
-        <Divider type='vertical' className='h-3.5 mx-3' />
+        <Divider type='vertical' className='mx-3 h-3.5' />
         <DisplayToggle isCollapsed={isCollapsed} toggleCollapsed={() => setIsCollapsed(!isCollapsed)} />
       </div>}
       {/* Segment list */}
       {
         isFullDocMode
           ? <div className={cn(
-            'flex flex-col grow overflow-x-hidden',
+            'flex grow flex-col overflow-x-hidden',
             (isLoadingSegmentList || isLoadingChildSegmentList) ? 'overflow-y-hidden' : 'overflow-y-auto',
           )}>
             <SegmentCard
@@ -656,7 +656,7 @@ const Completed: FC<ICompletedProps> = ({
           />
       }
       {/* Pagination */}
-      <Divider type='horizontal' className='w-auto h-[1px] my-0 mx-6 bg-divider-subtle' />
+      <Divider type='horizontal' className='bg-divider-subtle mx-6 my-0 h-[1px] w-auto' />
       <Pagination
         current={currentPage - 1}
         onChange={cur => setCurrentPage(cur + 1)}
@@ -722,7 +722,7 @@ const Completed: FC<ICompletedProps> = ({
       {/* Batch Action Buttons */}
       {selectedSegmentIds.length > 0
         && <BatchAction
-          className='absolute left-0 bottom-16 z-20'
+          className='absolute bottom-16 left-0 z-20'
           selectedIds={selectedSegmentIds}
           onBatchEnable={onChangeSwitch.bind(null, true, '')}
           onBatchDisable={onChangeSwitch.bind(null, false, '')}
diff --git a/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx b/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
index 55766d8ac4..5e15556cfc 100644
--- a/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
+++ b/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
@@ -53,7 +53,7 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
   }, [parentMode])
 
   const CustomButton = <>
-    <Divider type='vertical' className='h-3 mx-1 bg-divider-regular' />
+    <Divider type='vertical' className='bg-divider-regular mx-1 h-3' />
     <button
       type='button'
       className='text-text-accent system-xs-semibold'
@@ -114,7 +114,7 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
   }, [content.length])
 
   return (
-    <div className={'flex flex-col h-full'}>
+    <div className={'flex h-full flex-col'}>
       <div className={classNames('flex items-center justify-between', fullScreen ? 'py-3 pr-4 pl-6 border border-divider-subtle' : 'pt-3 pr-3 pl-4')}>
         <div className='flex flex-col'>
           <div className='text-text-primary system-xl-semibold'>{t('datasetDocuments.segment.addChildChunk')}</div>
@@ -135,14 +135,14 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
                 actionType='add'
                 isChildChunk={true}
               />
-              <Divider type='vertical' className='h-3.5 bg-divider-regular ml-4 mr-2' />
+              <Divider type='vertical' className='bg-divider-regular ml-4 mr-2 h-3.5' />
             </>
           )}
-          <div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer mr-1' onClick={toggleFullScreen}>
-            <RiExpandDiagonalLine className='w-4 h-4 text-text-tertiary' />
+          <div className='mr-1 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={toggleFullScreen}>
+            <RiExpandDiagonalLine className='text-text-tertiary h-4 w-4' />
           </div>
-          <div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer' onClick={handleCancel.bind(null, 'esc')}>
-            <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+          <div className='flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={handleCancel.bind(null, 'esc')}>
+            <RiCloseLine className='text-text-tertiary h-4 w-4' />
           </div>
         </div>
       </div>
@@ -157,7 +157,7 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
         </div>
       </div>
       {!fullScreen && (
-        <div className='flex items-center justify-between p-4 pt-3 border-t-[1px] border-t-divider-subtle'>
+        <div className='border-t-divider-subtle flex items-center justify-between border-t-[1px] p-4 pt-3'>
           <AddAnother isChecked={addAnother} onCheck={() => setAddAnother(!addAnother)} />
           <ActionButtons
             handleCancel={handleCancel.bind(null, 'esc')}
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx b/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
index 3185110d5f..2c714626cb 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
@@ -25,7 +25,7 @@ const ChunkContent: FC<ChunkContentProps> = ({
     return (
       <div className={className}>
         <div className='flex gap-x-1'>
-          <div className='w-4 text-[13px] font-medium leading-[20px] text-text-tertiary shrink-0'>Q</div>
+          <div className='text-text-tertiary w-4 shrink-0 text-[13px] font-medium leading-[20px]'>Q</div>
           <div
             className={cn('text-text-secondary body-md-regular',
               isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
@@ -34,7 +34,7 @@ const ChunkContent: FC<ChunkContentProps> = ({
           </div>
         </div>
         <div className='flex gap-x-1'>
-          <div className='w-4 text-[13px] font-medium leading-[20px] text-text-tertiary shrink-0'>A</div>
+          <div className='text-text-tertiary w-4 shrink-0 text-[13px] font-medium leading-[20px]'>A</div>
           <div className={cn('text-text-secondary body-md-regular',
             isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
           )}>
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx b/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
index 2d580469e5..d6e03634a1 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
@@ -120,14 +120,14 @@ const SegmentCard: FC<ISegmentCardProps> = ({
   return (
     <div
       className={cn(
-        'w-full px-3 rounded-xl group/card',
-        isFullDocMode ? '' : 'pt-2.5 pb-2 hover:bg-dataset-chunk-detail-card-hover-bg',
+        'group/card w-full rounded-xl px-3',
+        isFullDocMode ? '' : 'hover:bg-dataset-chunk-detail-card-hover-bg pb-2 pt-2.5',
         focused.segmentContent ? 'bg-dataset-chunk-detail-card-hover-bg' : '',
         className,
       )}
       onClick={handleClickCard}
     >
-      <div className='h-5 relative flex items-center justify-between'>
+      <div className='relative flex h-5 items-center justify-between'>
         <>
           <div className='flex items-center gap-x-2'>
             <SegmentIndexTag
@@ -153,8 +153,8 @@ const SegmentCard: FC<ISegmentCardProps> = ({
             ? <div className='flex items-center'>
               <StatusItem status={enabled ? 'enabled' : 'disabled'} reverse textCls="text-text-tertiary system-xs-regular" />
               {embeddingAvailable && (
-                <div className="absolute -top-2 -right-2.5 z-20 hidden group-hover/card:flex items-center gap-x-0.5 p-1
-                      rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-md backdrop-blur-[5px]">
+                <div className="border-components-actionbar-border bg-components-actionbar-bg absolute -right-2.5 -top-2 z-20 hidden items-center gap-x-0.5
+                      rounded-[10px] border-[0.5px] p-1 shadow-md backdrop-blur-[5px] group-hover/card:flex">
                   {!archived && (
                     <>
                       <Tooltip
@@ -162,28 +162,28 @@ const SegmentCard: FC<ISegmentCardProps> = ({
                         popupClassName='text-text-secondary system-xs-medium'
                       >
                         <div
-                          className='shrink-0 w-6 h-6 flex items-center justify-center rounded-lg hover:bg-state-base-hover cursor-pointer'
+                          className='hover:bg-state-base-hover flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg'
                           onClick={(e) => {
                             e.stopPropagation()
                             onClickEdit?.()
                           }}>
-                          <RiEditLine className='w-4 h-4 text-text-tertiary' />
+                          <RiEditLine className='text-text-tertiary h-4 w-4' />
                         </div>
                       </Tooltip>
                       <Tooltip
                         popupContent='Delete'
                         popupClassName='text-text-secondary system-xs-medium'
                       >
-                        <div className='shrink-0 w-6 h-6 flex items-center justify-center rounded-lg hover:bg-state-destructive-hover cursor-pointer group/delete'
+                        <div className='hover:bg-state-destructive-hover group/delete flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg'
                           onClick={(e) => {
                             e.stopPropagation()
                             setShowModal(true)
                           }
                           }>
-                          <RiDeleteBinLine className='w-4 h-4 text-text-tertiary group-hover/delete:text-text-destructive' />
+                          <RiDeleteBinLine className='text-text-tertiary group-hover/delete:text-text-destructive h-4 w-4' />
                         </div>
                       </Tooltip>
-                      <Divider type="vertical" className="h-3.5 bg-divider-regular" />
+                      <Divider type="vertical" className="bg-divider-regular h-3.5" />
                     </>
                   )}
                   <div
@@ -223,7 +223,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
         isFullDocMode
           ? <button
             type='button'
-            className='mt-0.5 mb-2 text-text-accent system-xs-semibold-uppercase'
+            className='text-text-accent system-xs-semibold-uppercase mb-2 mt-0.5'
             onClick={() => onClick?.()}
           >{t('common.operation.viewMore')}</button>
           : null
diff --git a/web/app/components/datasets/documents/detail/completed/segment-detail.tsx b/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
index 8891ddee85..6e61e38166 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
@@ -109,7 +109,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
   }, [isParentChildMode])
 
   return (
-    <div className={'flex flex-col h-full'}>
+    <div className={'flex h-full flex-col'}>
       <div className={classNames('flex items-center justify-between', fullScreen ? 'py-3 pr-4 pl-6 border border-divider-subtle' : 'pt-3 pr-3 pl-4')}>
         <div className='flex flex-col'>
           <div className='text-text-primary system-xl-semibold'>{titleText}</div>
@@ -128,14 +128,14 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
                 handleSave={handleSave}
                 loading={loading}
               />
-              <Divider type='vertical' className='h-3.5 bg-divider-regular ml-4 mr-2' />
+              <Divider type='vertical' className='bg-divider-regular ml-4 mr-2 h-3.5' />
             </>
           )}
-          <div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer mr-1' onClick={toggleFullScreen}>
-            <RiExpandDiagonalLine className='w-4 h-4 text-text-tertiary' />
+          <div className='mr-1 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={toggleFullScreen}>
+            <RiExpandDiagonalLine className='text-text-tertiary h-4 w-4' />
           </div>
-          <div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer' onClick={onCancel}>
-            <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+          <div className='flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={onCancel}>
+            <RiCloseLine className='text-text-tertiary h-4 w-4' />
           </div>
         </div>
       </div>
@@ -164,7 +164,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
         />}
       </div>
       {isEditMode && !fullScreen && (
-        <div className='flex items-center justify-end p-4 pt-3 border-t-[1px] border-t-divider-subtle'>
+        <div className='border-t-divider-subtle flex items-center justify-end border-t-[1px] p-4 pt-3'>
           <ActionButtons
             handleCancel={handleCancel}
             handleRegeneration={handleRegeneration}
diff --git a/web/app/components/datasets/documents/detail/completed/segment-list.tsx b/web/app/components/datasets/documents/detail/completed/segment-list.tsx
index 718636d40e..0fe4d73131 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-list.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-list.tsx
@@ -66,7 +66,7 @@ const SegmentList = (
     )
   }
   return (
-    <div ref={ref} className={'flex flex-col grow overflow-y-auto'}>
+    <div ref={ref} className={'flex grow flex-col overflow-y-auto'}>
       {
         items.map((segItem) => {
           const isLast = items[items.length - 1].id === segItem.id
@@ -79,11 +79,11 @@ const SegmentList = (
             <div key={segItem.id} className='flex items-start gap-x-2'>
               <Checkbox
                 key={`${segItem.id}-checkbox`}
-                className='shrink-0 mt-3.5'
+                className='mt-3.5 shrink-0'
                 checked={selectedSegmentIds.includes(segItem.id)}
                 onCheck={() => onSelected(segItem.id)}
               />
-              <div className='grow min-w-0'>
+              <div className='min-w-0 grow'>
                 <SegmentCard
                   key={`${segItem.id}-card`}
                   detail={segItem}
diff --git a/web/app/components/datasets/documents/detail/completed/skeleton/full-doc-list-skeleton.tsx b/web/app/components/datasets/documents/detail/completed/skeleton/full-doc-list-skeleton.tsx
index b09e72c6f9..9da099593b 100644
--- a/web/app/components/datasets/documents/detail/completed/skeleton/full-doc-list-skeleton.tsx
+++ b/web/app/components/datasets/documents/detail/completed/skeleton/full-doc-list-skeleton.tsx
@@ -3,10 +3,10 @@ import React from 'react'
 const Slice = React.memo(() => {
   return (
     <div className='flex flex-col gap-y-1'>
-      <div className='w-full h-5 bg-state-base-hover flex items-center'>
-        <span className='w-[30px] h-5 bg-state-base-hover-alt' />
+      <div className='bg-state-base-hover flex h-5 w-full items-center'>
+        <span className='bg-state-base-hover-alt h-5 w-[30px]' />
       </div>
-      <div className='w-2/3 h-5 bg-state-base-hover' />
+      <div className='bg-state-base-hover h-5 w-2/3' />
     </div>
   )
 })
@@ -15,8 +15,8 @@ Slice.displayName = 'Slice'
 
 const FullDocListSkeleton = () => {
   return (
-    <div className='w-full grow flex flex-col gap-y-3 relative z-10 overflow-y-hidden'>
-      <div className='absolute top-0 left-0 bottom-14 w-full h-full bg-dataset-chunk-list-mask-bg z-20' />
+    <div className='relative z-10 flex w-full grow flex-col gap-y-3 overflow-y-hidden'>
+      <div className='bg-dataset-chunk-list-mask-bg absolute bottom-14 left-0 top-0 z-20 h-full w-full' />
       {[...Array.from({ length: 15 })].map((_, index) => <Slice key={index} />)}
     </div>
   )
diff --git a/web/app/components/datasets/documents/detail/completed/skeleton/general-list-skeleton.tsx b/web/app/components/datasets/documents/detail/completed/skeleton/general-list-skeleton.tsx
index c4593083ce..547f6ca762 100644
--- a/web/app/components/datasets/documents/detail/completed/skeleton/general-list-skeleton.tsx
+++ b/web/app/components/datasets/documents/detail/completed/skeleton/general-list-skeleton.tsx
@@ -10,34 +10,34 @@ import Divider from '@/app/components/base/divider'
 
 export const CardSkelton = React.memo(() => {
   return (
-    <SkeletonContainer className='p-1 pb-2 gap-y-0'>
-      <SkeletonContainer className='px-2 pt-1.5 gap-y-0.5'>
+    <SkeletonContainer className='gap-y-0 p-1 pb-2'>
+      <SkeletonContainer className='gap-y-0.5 px-2 pt-1.5'>
         <SkeletonRow className='py-0.5'>
-          <SkeletonRectangle className='w-[72px] bg-text-quaternary' />
+          <SkeletonRectangle className='bg-text-quaternary w-[72px]' />
           <SkeletonPoint className='opacity-20' />
-          <SkeletonRectangle className='w-24 bg-text-quaternary' />
+          <SkeletonRectangle className='bg-text-quaternary w-24' />
           <SkeletonPoint className='opacity-20' />
-          <SkeletonRectangle className='w-24 bg-text-quaternary' />
+          <SkeletonRectangle className='bg-text-quaternary w-24' />
           <SkeletonRow className='grow justify-end gap-1'>
-            <SkeletonRectangle className='w-12 bg-text-quaternary' />
-            <SkeletonRectangle className='w-2 bg-text-quaternary mx-1' />
+            <SkeletonRectangle className='bg-text-quaternary w-12' />
+            <SkeletonRectangle className='bg-text-quaternary mx-1 w-2' />
           </SkeletonRow>
         </SkeletonRow>
         <SkeletonRow className='py-0.5'>
-          <SkeletonRectangle className='w-full bg-text-quaternary' />
+          <SkeletonRectangle className='bg-text-quaternary w-full' />
         </SkeletonRow>
         <SkeletonRow className='py-0.5'>
-          <SkeletonRectangle className='w-full bg-text-quaternary' />
+          <SkeletonRectangle className='bg-text-quaternary w-full' />
         </SkeletonRow>
         <SkeletonRow className='py-0.5'>
-          <SkeletonRectangle className='w-2/3 bg-text-quaternary' />
+          <SkeletonRectangle className='bg-text-quaternary w-2/3' />
         </SkeletonRow>
       </SkeletonContainer>
       <SkeletonContainer className='px-2 py-1.5'>
         <SkeletonRow>
-          <SkeletonRectangle className='w-14 bg-text-quaternary' />
-          <SkeletonRectangle className='w-[88px] bg-text-quaternary' />
-          <SkeletonRectangle className='w-14 bg-text-quaternary' />
+          <SkeletonRectangle className='bg-text-quaternary w-14' />
+          <SkeletonRectangle className='bg-text-quaternary w-[88px]' />
+          <SkeletonRectangle className='bg-text-quaternary w-14' />
         </SkeletonRow>
       </SkeletonContainer>
     </SkeletonContainer>
@@ -48,14 +48,14 @@ CardSkelton.displayName = 'CardSkelton'
 
 const GeneralListSkeleton = () => {
   return (
-    <div className='relative flex flex-col grow overflow-y-hidden z-10'>
-      <div className='absolute top-0 left-0 w-full h-full bg-dataset-chunk-list-mask-bg z-20' />
+    <div className='relative z-10 flex grow flex-col overflow-y-hidden'>
+      <div className='bg-dataset-chunk-list-mask-bg absolute left-0 top-0 z-20 h-full w-full' />
       {[...Array.from({ length: 10 })].map((_, index) => {
         return (
           <div key={index} className='flex items-start gap-x-2'>
             <Checkbox
               key={`${index}-checkbox`}
-              className='shrink-0 mt-3.5'
+              className='mt-3.5 shrink-0'
               disabled
             />
             <div className='grow'>
diff --git a/web/app/components/datasets/documents/detail/completed/skeleton/paragraph-list-skeleton.tsx b/web/app/components/datasets/documents/detail/completed/skeleton/paragraph-list-skeleton.tsx
index eaa7126510..794b81fa03 100644
--- a/web/app/components/datasets/documents/detail/completed/skeleton/paragraph-list-skeleton.tsx
+++ b/web/app/components/datasets/documents/detail/completed/skeleton/paragraph-list-skeleton.tsx
@@ -11,34 +11,34 @@ import Divider from '@/app/components/base/divider'
 
 const CardSkelton = React.memo(() => {
   return (
-    <SkeletonContainer className='p-1 pb-2 gap-y-0'>
-      <SkeletonContainer className='px-2 pt-1.5 gap-y-0.5'>
+    <SkeletonContainer className='gap-y-0 p-1 pb-2'>
+      <SkeletonContainer className='gap-y-0.5 px-2 pt-1.5'>
         <SkeletonRow className='py-0.5'>
-          <SkeletonRectangle className='w-[72px] bg-text-quaternary' />
+          <SkeletonRectangle className='bg-text-quaternary w-[72px]' />
           <SkeletonPoint className='opacity-20' />
-          <SkeletonRectangle className='w-24 bg-text-quaternary' />
+          <SkeletonRectangle className='bg-text-quaternary w-24' />
           <SkeletonPoint className='opacity-20' />
-          <SkeletonRectangle className='w-24 bg-text-quaternary' />
+          <SkeletonRectangle className='bg-text-quaternary w-24' />
           <SkeletonRow className='grow justify-end gap-1'>
-            <SkeletonRectangle className='w-12 bg-text-quaternary' />
-            <SkeletonRectangle className='w-2 bg-text-quaternary mx-1' />
+            <SkeletonRectangle className='bg-text-quaternary w-12' />
+            <SkeletonRectangle className='bg-text-quaternary mx-1 w-2' />
           </SkeletonRow>
         </SkeletonRow>
         <SkeletonRow className='py-0.5'>
-          <SkeletonRectangle className='w-full bg-text-quaternary' />
+          <SkeletonRectangle className='bg-text-quaternary w-full' />
         </SkeletonRow>
         <SkeletonRow className='py-0.5'>
-          <SkeletonRectangle className='w-full bg-text-quaternary' />
+          <SkeletonRectangle className='bg-text-quaternary w-full' />
         </SkeletonRow>
         <SkeletonRow className='py-0.5'>
-          <SkeletonRectangle className='w-2/3 bg-text-quaternary' />
+          <SkeletonRectangle className='bg-text-quaternary w-2/3' />
         </SkeletonRow>
       </SkeletonContainer>
       <SkeletonContainer className='p-1 pb-2'>
         <SkeletonRow>
-          <SkeletonRow className='h-7 pl-1 pr-3 gap-x-0.5 rounded-lg bg-dataset-child-chunk-expand-btn-bg'>
-            <RiArrowRightSLine className='w-4 h-4 text-text-secondary opacity-20' />
-            <SkeletonRectangle className='w-32 bg-text-quaternary' />
+          <SkeletonRow className='bg-dataset-child-chunk-expand-btn-bg h-7 gap-x-0.5 rounded-lg pl-1 pr-3'>
+            <RiArrowRightSLine className='text-text-secondary h-4 w-4 opacity-20' />
+            <SkeletonRectangle className='bg-text-quaternary w-32' />
           </SkeletonRow>
         </SkeletonRow>
       </SkeletonContainer>
@@ -50,14 +50,14 @@ CardSkelton.displayName = 'CardSkelton'
 
 const ParagraphListSkeleton = () => {
   return (
-    <div className='relative flex flex-col h-full overflow-y-hidden z-10'>
-      <div className='absolute top-0 left-0 w-full h-full bg-dataset-chunk-list-mask-bg z-20' />
+    <div className='relative z-10 flex h-full flex-col overflow-y-hidden'>
+      <div className='bg-dataset-chunk-list-mask-bg absolute left-0 top-0 z-20 h-full w-full' />
       {[...Array.from({ length: 10 })].map((_, index) => {
         return (
           <div key={index} className='flex items-start gap-x-2'>
             <Checkbox
               key={`${index}-checkbox`}
-              className='shrink-0 mt-3.5'
+              className='mt-3.5 shrink-0'
               disabled
             />
             <div className='grow'>
diff --git a/web/app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.tsx b/web/app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.tsx
index 46f5cccc03..e2cb826331 100644
--- a/web/app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.tsx
+++ b/web/app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.tsx
@@ -11,28 +11,28 @@ const ParentChunkCardSkelton = () => {
   const { t } = useTranslation()
   return (
     <div className='flex flex-col pb-2'>
-      <SkeletonContainer className='p-1 pb-0 gap-y-0'>
-        <SkeletonContainer className='px-2 pt-1.5 gap-y-0.5'>
+      <SkeletonContainer className='gap-y-0 p-1 pb-0'>
+        <SkeletonContainer className='gap-y-0.5 px-2 pt-1.5'>
           <SkeletonRow className='py-0.5'>
-            <SkeletonRectangle className='w-[72px] bg-text-quaternary' />
+            <SkeletonRectangle className='bg-text-quaternary w-[72px]' />
             <SkeletonPoint className='opacity-20' />
-            <SkeletonRectangle className='w-24 bg-text-quaternary' />
+            <SkeletonRectangle className='bg-text-quaternary w-24' />
             <SkeletonPoint className='opacity-20' />
-            <SkeletonRectangle className='w-24 bg-text-quaternary' />
+            <SkeletonRectangle className='bg-text-quaternary w-24' />
           </SkeletonRow>
           <SkeletonRow className='py-0.5'>
-            <SkeletonRectangle className='w-full bg-text-quaternary' />
+            <SkeletonRectangle className='bg-text-quaternary w-full' />
           </SkeletonRow>
           <SkeletonRow className='py-0.5'>
-            <SkeletonRectangle className='w-full bg-text-quaternary' />
+            <SkeletonRectangle className='bg-text-quaternary w-full' />
           </SkeletonRow>
           <SkeletonRow className='py-0.5'>
-            <SkeletonRectangle className='w-2/3 bg-text-quaternary' />
+            <SkeletonRectangle className='bg-text-quaternary w-2/3' />
           </SkeletonRow>
         </SkeletonContainer>
       </SkeletonContainer>
-      <div className='flex items-center px-3 mt-0.5'>
-        <button type='button' className='pt-0.5 text-components-button-secondary-accent-text-disabled system-xs-semibold-uppercase' disabled>
+      <div className='mt-0.5 flex items-center px-3'>
+        <button type='button' className='text-components-button-secondary-accent-text-disabled system-xs-semibold-uppercase pt-0.5' disabled>
           {t('common.operation.viewMore')}
         </button>
       </div>
diff --git a/web/app/components/datasets/documents/detail/completed/status-item.tsx b/web/app/components/datasets/documents/detail/completed/status-item.tsx
index 06cf70338d..ef83256385 100644
--- a/web/app/components/datasets/documents/detail/completed/status-item.tsx
+++ b/web/app/components/datasets/documents/detail/completed/status-item.tsx
@@ -12,9 +12,9 @@ const StatusItem: FC<IStatusItemProps> = ({
   selected,
 }) => {
   return (
-    <div className='flex items-center justify-between py-1.5 px-2'>
+    <div className='flex items-center justify-between px-2 py-1.5'>
       <span className='system-md-regular'>{item.name}</span>
-      {selected && <RiCheckLine className='w-4 h-4 text-text-accent' />}
+      {selected && <RiCheckLine className='text-text-accent h-4 w-4' />}
     </div>
   )
 }
diff --git a/web/app/components/datasets/documents/detail/embedding/index.tsx b/web/app/components/datasets/documents/detail/embedding/index.tsx
index c6a90a0e29..52c684efd1 100644
--- a/web/app/components/datasets/documents/detail/embedding/index.tsx
+++ b/web/app/components/datasets/documents/detail/embedding/index.tsx
@@ -248,10 +248,10 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
 
   return (
     <>
-      <div className='py-12 px-16 flex flex-col gap-y-2'>
-        <div className='flex items-center gap-x-1 h-6'>
-          {isEmbedding && <RiLoader2Line className='h-4 w-4 text-text-secondary animate-spin' />}
-          <span className='grow text-text-secondary system-md-semibold-uppercase'>
+      <div className='flex flex-col gap-y-2 px-16 py-12'>
+        <div className='flex h-6 items-center gap-x-1'>
+          {isEmbedding && <RiLoader2Line className='text-text-secondary h-4 w-4 animate-spin' />}
+          <span className='text-text-secondary system-md-semibold-uppercase grow'>
             {isEmbedding && t('datasetDocuments.embedding.processing')}
             {isEmbeddingCompleted && t('datasetDocuments.embedding.completed')}
             {isEmbeddingPaused && t('datasetDocuments.embedding.paused')}
@@ -260,12 +260,12 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
           {isEmbedding && (
             <button
               type='button'
-              className={`px-1.5 py-1 border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg
-              shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] flex items-center gap-x-1 rounded-md`}
+              className={`border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs shadow-shadow-shadow-3 flex
+              items-center gap-x-1 rounded-md border-[0.5px] px-1.5 py-1 backdrop-blur-[5px]`}
               onClick={handleSwitch}
             >
-              <RiPauseCircleLine className='w-3.5 h-3.5 text-components-button-secondary-text' />
-              <span className='pr-[3px] text-components-button-secondary-text system-xs-medium'>
+              <RiPauseCircleLine className='text-components-button-secondary-text h-3.5 w-3.5' />
+              <span className='text-components-button-secondary-text system-xs-medium pr-[3px]'>
                 {t('datasetDocuments.embedding.pause')}
               </span>
             </button>
@@ -273,12 +273,12 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
           {isEmbeddingPaused && (
             <button
               type='button'
-              className={`px-1.5 py-1 border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg
-              shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] flex items-center gap-x-1 rounded-md`}
+              className={`border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs shadow-shadow-shadow-3 flex
+              items-center gap-x-1 rounded-md border-[0.5px] px-1.5 py-1 backdrop-blur-[5px]`}
               onClick={handleSwitch}
             >
-              <RiPlayCircleLine className='w-3.5 h-3.5 text-components-button-secondary-text' />
-              <span className='pr-[3px] text-components-button-secondary-text system-xs-medium'>
+              <RiPlayCircleLine className='text-components-button-secondary-text h-3.5 w-3.5' />
+              <span className='text-components-button-secondary-text system-xs-medium pr-[3px]'>
                 {t('datasetDocuments.embedding.resume')}
               </span>
             </button>
@@ -286,7 +286,7 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
         </div>
         {/* progress bar */}
         <div className={cn(
-          'flex items-center w-full h-2 rounded-md border border-components-progress-bar-border overflow-hidden',
+          'border-components-progress-bar-border flex h-2 w-full items-center overflow-hidden rounded-md border',
           isEmbedding ? 'bg-components-progress-bar-bg bg-opacity-50' : 'bg-components-progress-bar-bg',
         )}>
           <div
@@ -298,7 +298,7 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
             style={{ width: `${percent}%` }}
           />
         </div>
-        <div className={'w-full flex items-center'}>
+        <div className={'flex w-full items-center'}>
           <span className='text-text-secondary system-xs-medium'>
             {`${t('datasetDocuments.embedding.segments')} ${indexingStatusDetail?.completed_segments || '--'}/${indexingStatusDetail?.total_segments || '--'} · ${percent}%`}
           </span>
diff --git a/web/app/components/datasets/documents/detail/embedding/skeleton/index.tsx b/web/app/components/datasets/documents/detail/embedding/skeleton/index.tsx
index d938c55cc4..7ea8fa45fa 100644
--- a/web/app/components/datasets/documents/detail/embedding/skeleton/index.tsx
+++ b/web/app/components/datasets/documents/detail/embedding/skeleton/index.tsx
@@ -9,34 +9,34 @@ import Divider from '@/app/components/base/divider'
 
 const CardSkelton = React.memo(() => {
   return (
-    <SkeletonContainer className='p-1 pb-2 gap-y-0'>
-      <SkeletonContainer className='px-2 pt-1.5 gap-y-0.5'>
+    <SkeletonContainer className='gap-y-0 p-1 pb-2'>
+      <SkeletonContainer className='gap-y-0.5 px-2 pt-1.5'>
         <SkeletonRow className='py-0.5'>
-          <SkeletonRectangle className='w-[72px] bg-text-quaternary' />
+          <SkeletonRectangle className='bg-text-quaternary w-[72px]' />
           <SkeletonPoint className='opacity-20' />
-          <SkeletonRectangle className='w-24 bg-text-quaternary' />
+          <SkeletonRectangle className='bg-text-quaternary w-24' />
           <SkeletonPoint className='opacity-20' />
-          <SkeletonRectangle className='w-24 bg-text-quaternary' />
+          <SkeletonRectangle className='bg-text-quaternary w-24' />
           <SkeletonRow className='grow justify-end gap-1'>
-            <SkeletonRectangle className='w-12 bg-text-quaternary' />
-            <SkeletonRectangle className='w-2 bg-text-quaternary mx-1' />
+            <SkeletonRectangle className='bg-text-quaternary w-12' />
+            <SkeletonRectangle className='bg-text-quaternary mx-1 w-2' />
           </SkeletonRow>
         </SkeletonRow>
         <SkeletonRow className='py-0.5'>
-          <SkeletonRectangle className='w-full bg-text-quaternary' />
+          <SkeletonRectangle className='bg-text-quaternary w-full' />
         </SkeletonRow>
         <SkeletonRow className='py-0.5'>
-          <SkeletonRectangle className='w-full bg-text-quaternary' />
+          <SkeletonRectangle className='bg-text-quaternary w-full' />
         </SkeletonRow>
         <SkeletonRow className='py-0.5'>
-          <SkeletonRectangle className='w-2/3 bg-text-quaternary' />
+          <SkeletonRectangle className='bg-text-quaternary w-2/3' />
         </SkeletonRow>
       </SkeletonContainer>
       <SkeletonContainer className='px-2 py-1.5'>
         <SkeletonRow>
-          <SkeletonRectangle className='w-14 bg-text-quaternary' />
-          <SkeletonRectangle className='w-[88px] bg-text-quaternary' />
-          <SkeletonRectangle className='w-14 bg-text-quaternary' />
+          <SkeletonRectangle className='bg-text-quaternary w-14' />
+          <SkeletonRectangle className='bg-text-quaternary w-[88px]' />
+          <SkeletonRectangle className='bg-text-quaternary w-14' />
         </SkeletonRow>
       </SkeletonContainer>
     </SkeletonContainer>
@@ -47,8 +47,8 @@ CardSkelton.displayName = 'CardSkelton'
 
 const EmbeddingSkeleton = () => {
   return (
-    <div className='relative flex flex-col grow overflow-y-hidden z-10'>
-      <div className='absolute top-0 left-0 w-full h-full bg-dataset-chunk-list-mask-bg z-20' />
+    <div className='relative z-10 flex grow flex-col overflow-y-hidden'>
+      <div className='bg-dataset-chunk-list-mask-bg absolute left-0 top-0 z-20 h-full w-full' />
       {[...Array.from({ length: 5 })].map((_, index) => {
         return (
           <div key={index} className='w-full px-11'>
diff --git a/web/app/components/datasets/documents/detail/index.tsx b/web/app/components/datasets/documents/detail/index.tsx
index 2b65c195fb..bbc2045f11 100644
--- a/web/app/components/datasets/documents/detail/index.tsx
+++ b/web/app/components/datasets/documents/detail/index.tsx
@@ -54,7 +54,7 @@ type DocumentTitleProps = {
 export const DocumentTitle: FC<DocumentTitleProps> = ({ datasetId, extension, name, processMode, parent_mode, wrapperCls }) => {
   const router = useRouter()
   return (
-    <div className={cn('flex items-center justify-start flex-1', wrapperCls)}>
+    <div className={cn('flex flex-1 items-center justify-start', wrapperCls)}>
       <DocumentPicker
         datasetId={datasetId}
         value={{
@@ -186,10 +186,10 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
       mode,
       parentMode,
     }}>
-      <div className='flex flex-col h-full bg-background-default'>
-        <div className='flex items-center justify-between flex-wrap min-h-16 pl-3 pr-4 py-2.5 border-b border-b-divider-subtle'>
-          <div onClick={backToPrev} className={'shrink-0 rounded-full w-8 h-8 flex justify-center items-center cursor-pointer hover:bg-components-button-tertiary-bg'}>
-            <RiArrowLeftLine className='text-components-button-ghost-text hover:text-text-tertiary w-4 h-4' />
+      <div className='bg-background-default flex h-full flex-col'>
+        <div className='border-b-divider-subtle flex min-h-16 flex-wrap items-center justify-between border-b py-2.5 pl-3 pr-4'>
+          <div onClick={backToPrev} className={'hover:bg-components-button-tertiary-bg flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full'}>
+            <RiArrowLeftLine className='text-components-button-ghost-text hover:text-text-tertiary h-4 w-4' />
           </div>
           <DocumentTitle
             datasetId={datasetId}
@@ -199,7 +199,7 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
             parent_mode={parentMode}
             processMode={mode}
           />
-          <div className='flex items-center flex-wrap'>
+          <div className='flex flex-wrap items-center'>
             {embeddingAvailable && documentDetail && !documentDetail.archived && !isFullDocMode && (
               <>
                 <SegmentAdd
@@ -209,7 +209,7 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
                   showBatchModal={showBatchModal}
                   embedding={embedding}
                 />
-                <Divider type='vertical' className='!bg-divider-regular !h-[14px] !mx-3' />
+                <Divider type='vertical' className='!bg-divider-regular !mx-3 !h-[14px]' />
               </>
             )}
             <StatusItem
@@ -246,17 +246,17 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
             >
               {
                 showMetadata
-                  ? <LayoutRight2LineMod className='w-4 h-4 text-components-button-secondary-text' />
-                  : <RiLayoutRight2Line className='w-4 h-4 text-components-button-secondary-text' />
+                  ? <LayoutRight2LineMod className='text-components-button-secondary-text h-4 w-4' />
+                  : <RiLayoutRight2Line className='text-components-button-secondary-text h-4 w-4' />
               }
             </button>
           </div>
         </div>
-        <div className='flex flex-row flex-1' style={{ height: 'calc(100% - 4rem)' }}>
+        <div className='flex flex-1 flex-row' style={{ height: 'calc(100% - 4rem)' }}>
           {isDetailLoading
             ? <Loading type='app' />
-            : <div className={cn('h-full grow min-w-0 flex flex-col',
-              embedding ? '' : isFullDocMode ? 'relative pt-4 pr-11 pl-11' : 'relative pt-3 pr-11 pl-5',
+            : <div className={cn('flex h-full min-w-0 grow flex-col',
+              embedding ? '' : isFullDocMode ? 'relative pl-11 pr-11 pt-4' : 'relative pl-5 pr-11 pt-3',
             )}>
               {embedding
                 ? <Embedding
diff --git a/web/app/components/datasets/documents/detail/metadata/index.tsx b/web/app/components/datasets/documents/detail/metadata/index.tsx
index da96b859be..d838bde281 100644
--- a/web/app/components/datasets/documents/detail/metadata/index.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/index.tsx
@@ -58,9 +58,9 @@ export const FieldInfo: FC<IFieldInfoProps> = ({
   const readAlignTop = !showEdit && textNeedWrap
 
   return (
-    <div className={cn('flex items-center gap-1 py-0.5 min-h-5 text-xs', editAlignTop && '!items-start', readAlignTop && '!items-start pt-1')}>
-      <div className={cn('w-[200px] text-text-tertiary overflow-hidden text-ellipsis whitespace-nowrap shrink-0', editAlignTop && 'pt-1')}>{label}</div>
-      <div className="grow flex items-center gap-1 text-text-secondary">
+    <div className={cn('flex min-h-5 items-center gap-1 py-0.5 text-xs', editAlignTop && '!items-start', readAlignTop && '!items-start pt-1')}>
+      <div className={cn('text-text-tertiary w-[200px] shrink-0 overflow-hidden text-ellipsis whitespace-nowrap', editAlignTop && 'pt-1')}>{label}</div>
+      <div className="text-text-secondary flex grow items-center gap-1">
         {valueIcon}
         {!showEdit
           ? displayedValue
@@ -348,11 +348,11 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
                   {metadataParams.documentType && <>
                     <TypeIcon iconName={metadataMap[metadataParams.documentType || 'book'].iconName || ''} className={s.iconShow} />
                     {metadataMap[metadataParams.documentType || 'book'].text}
-                    {editStatus && <div className='inline-flex items-center gap-1 ml-1'>
+                    {editStatus && <div className='ml-1 inline-flex items-center gap-1'>
                       ·
                       <div
                         onClick={() => { setShowDocTypes(true) }}
-                        className='cursor-pointer hover:text-text-accent'
+                        className='hover:text-text-accent cursor-pointer'
                       >
                         {t('common.operation.change')}
                       </div>
diff --git a/web/app/components/datasets/documents/detail/new-segment.tsx b/web/app/components/datasets/documents/detail/new-segment.tsx
index e0eec87f0a..0ed4aec0f7 100644
--- a/web/app/components/datasets/documents/detail/new-segment.tsx
+++ b/web/app/components/datasets/documents/detail/new-segment.tsx
@@ -51,7 +51,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
   const refreshTimer = useRef<any>(null)
 
   const CustomButton = <>
-    <Divider type='vertical' className='h-3 mx-1 bg-divider-regular' />
+    <Divider type='vertical' className='bg-divider-regular mx-1 h-3' />
     <button
       type='button'
       className='text-text-accent system-xs-semibold'
@@ -138,7 +138,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
   }, [question.length, answer.length, isQAModel])
 
   return (
-    <div className={'flex flex-col h-full'}>
+    <div className={'flex h-full flex-col'}>
       <div className={classNames('flex items-center justify-between', fullScreen ? 'py-3 pr-4 pl-6 border border-divider-subtle' : 'pt-3 pr-3 pl-4')}>
         <div className='flex flex-col'>
           <div className='text-text-primary system-xl-semibold'>{
@@ -160,14 +160,14 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
                 loading={loading}
                 actionType='add'
               />
-              <Divider type='vertical' className='h-3.5 bg-divider-regular ml-4 mr-2' />
+              <Divider type='vertical' className='bg-divider-regular ml-4 mr-2 h-3.5' />
             </>
           )}
-          <div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer mr-1' onClick={toggleFullScreen}>
-            <RiExpandDiagonalLine className='w-4 h-4 text-text-tertiary' />
+          <div className='mr-1 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={toggleFullScreen}>
+            <RiExpandDiagonalLine className='text-text-tertiary h-4 w-4' />
           </div>
-          <div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer' onClick={handleCancel.bind(null, 'esc')}>
-            <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+          <div className='flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={handleCancel.bind(null, 'esc')}>
+            <RiCloseLine className='text-text-tertiary h-4 w-4' />
           </div>
         </div>
       </div>
@@ -191,7 +191,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
         />}
       </div>
       {!fullScreen && (
-        <div className='flex items-center justify-between p-4 pt-3 border-t-[1px] border-t-divider-subtle'>
+        <div className='border-t-divider-subtle flex items-center justify-between border-t-[1px] p-4 pt-3'>
           <AddAnother isChecked={addAnother} onCheck={() => setAddAnother(!addAnother)} />
           <ActionButtons
             handleCancel={handleCancel.bind(null, 'esc')}
diff --git a/web/app/components/datasets/documents/detail/segment-add/index.tsx b/web/app/components/datasets/documents/detail/segment-add/index.tsx
index 7123c99b34..54e6495e4b 100644
--- a/web/app/components/datasets/documents/detail/segment-add/index.tsx
+++ b/web/app/components/datasets/documents/detail/segment-add/index.tsx
@@ -45,36 +45,36 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
     return (
       <>
         {(importStatus === ProcessStatus.WAITING || importStatus === ProcessStatus.PROCESSING) && (
-          <div className='relative overflow-hidden inline-flex items-center mr-2 px-2.5 py-2 text-components-button-secondary-accent-text
-            bg-components-progress-bar-border rounded-lg border-[0.5px] border-components-progress-bar-border
-            shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]'>
-            <div className={cn('absolute left-0 top-0 h-full bg-components-progress-bar-progress border-r-[1.5px] border-r-components-progress-bar-progress-highlight z-0', importStatus === ProcessStatus.WAITING ? 'w-3/12' : 'w-2/3')} />
-            <RiLoader2Line className='animate-spin mr-1 w-4 h-4' />
+          <div className='text-components-button-secondary-accent-text bg-components-progress-bar-border border-components-progress-bar-border shadow-xs shadow-shadow-shadow-3 relative mr-2 inline-flex
+            items-center overflow-hidden rounded-lg border-[0.5px]
+            px-2.5 py-2 backdrop-blur-[5px]'>
+            <div className={cn('bg-components-progress-bar-progress border-r-components-progress-bar-progress-highlight absolute left-0 top-0 z-0 h-full border-r-[1.5px]', importStatus === ProcessStatus.WAITING ? 'w-3/12' : 'w-2/3')} />
+            <RiLoader2Line className='mr-1 h-4 w-4 animate-spin' />
             <span className='system-sm-medium z-10 pr-0.5'>{t('datasetDocuments.list.batchModal.processing')}</span>
           </div>
         )}
         {importStatus === ProcessStatus.COMPLETED && (
-          <div className='relative inline-flex items-center mr-2 bg-components-panel-bg rounded-lg border-[0.5px] border-components-panel-border shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] overflow-hidden'>
-            <div className='inline-flex items-center px-2.5 py-2 text-text-success border-r border-r-divider-subtle'>
-              <CheckCircle className='mr-1 w-4 h-4' />
+          <div className='bg-components-panel-bg border-components-panel-border shadow-xs shadow-shadow-shadow-3 relative mr-2 inline-flex items-center overflow-hidden rounded-lg border-[0.5px] backdrop-blur-[5px]'>
+            <div className='text-text-success border-r-divider-subtle inline-flex items-center border-r px-2.5 py-2'>
+              <CheckCircle className='mr-1 h-4 w-4' />
               <span className='system-sm-medium pr-0.5'>{t('datasetDocuments.list.batchModal.completed')}</span>
             </div>
             <div className='m-1 inline-flex items-center'>
-              <span className='system-xs-medium text-components-button-ghost-text hover:bg-components-button-ghost-bg-hover px-1.5 py-1 rounded-md cursor-pointer' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
+              <span className='system-xs-medium text-components-button-ghost-text hover:bg-components-button-ghost-bg-hover cursor-pointer rounded-md px-1.5 py-1' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
             </div>
-            <div className='absolute top-0 left-0 w-full h-full bg-dataset-chunk-process-success-bg opacity-40 -z-10' />
+            <div className='bg-dataset-chunk-process-success-bg absolute left-0 top-0 -z-10 h-full w-full opacity-40' />
           </div>
         )}
         {importStatus === ProcessStatus.ERROR && (
-          <div className='relative inline-flex items-center mr-2 bg-components-panel-bg rounded-lg border-[0.5px] border-components-panel-border shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] overflow-hidden'>
-            <div className='inline-flex items-center px-2.5 py-2 text-text-destructive border-r border-r-divider-subtle'>
-              <RiErrorWarningFill className='mr-1 w-4 h-4' />
+          <div className='bg-components-panel-bg border-components-panel-border shadow-xs shadow-shadow-shadow-3 relative mr-2 inline-flex items-center overflow-hidden rounded-lg border-[0.5px] backdrop-blur-[5px]'>
+            <div className='text-text-destructive border-r-divider-subtle inline-flex items-center border-r px-2.5 py-2'>
+              <RiErrorWarningFill className='mr-1 h-4 w-4' />
               <span className='system-sm-medium pr-0.5'>{t('datasetDocuments.list.batchModal.error')}</span>
             </div>
             <div className='m-1 inline-flex items-center'>
-              <span className='system-xs-medium text-components-button-ghost-text hover:bg-components-button-ghost-bg-hover px-1.5 py-1 rounded-md cursor-pointer' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
+              <span className='system-xs-medium text-components-button-ghost-text hover:bg-components-button-ghost-bg-hover cursor-pointer rounded-md px-1.5 py-1' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
             </div>
-            <div className='absolute top-0 left-0 w-full h-full bg-dataset-chunk-process-error-bg opacity-40 -z-10' />
+            <div className='bg-dataset-chunk-process-error-bg absolute left-0 top-0 -z-10 h-full w-full opacity-40' />
           </div>
         )}
       </>
@@ -83,18 +83,18 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
 
   return (
     <div className={cn(
-      'flex items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] relative z-20',
+      'border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs shadow-shadow-shadow-3 relative z-20 flex items-center rounded-lg border-[0.5px] backdrop-blur-[5px]',
       embedding && 'border-components-button-secondary-border-disabled bg-components-button-secondary-bg-disabled',
     )}>
       <button
         type='button'
-        className={`inline-flex items-center px-2.5 py-2 rounded-l-lg border-r-[1px] border-r-divider-subtle
-          hover:bg-state-base-hover disabled:cursor-not-allowed disabled:hover:bg-transparent`}
+        className={`border-r-divider-subtle hover:bg-state-base-hover inline-flex items-center rounded-l-lg border-r-[1px] px-2.5
+          py-2 disabled:cursor-not-allowed disabled:hover:bg-transparent`}
         onClick={showNewSegmentModal}
         disabled={embedding}
       >
-        <RiAddLine className={cn('w-4 h-4', textColor)} />
-        <span className={cn('text-[13px] leading-[16px] font-medium capitalize px-0.5 ml-0.5', textColor)}>
+        <RiAddLine className={cn('h-4 w-4', textColor)} />
+        <span className={cn('ml-0.5 px-0.5 text-[13px] font-medium capitalize leading-[16px]', textColor)}>
           {t('datasetDocuments.list.action.addButton')}
         </span>
       </button>
@@ -106,7 +106,7 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
           <div className='w-full p-1'>
             <button
               type='button'
-              className='w-full py-1.5 px-2 flex items-center hover:bg-state-base-hover rounded-lg text-text-secondary system-md-regular'
+              className='hover:bg-state-base-hover text-text-secondary system-md-regular flex w-full items-center rounded-lg px-2 py-1.5'
               onClick={showBatchModal}
             >
               {t('datasetDocuments.list.action.batchAdd')}
@@ -114,18 +114,18 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
           </div>
         }
         btnElement={
-          <div className='flex justify-center items-center' >
-            <RiArrowDownSLine className={cn('w-4 h-4', textColor)}/>
+          <div className='flex items-center justify-center' >
+            <RiArrowDownSLine className={cn('h-4 w-4', textColor)}/>
           </div>
         }
         btnClassName={open => cn(
-          `!p-2 !border-0 !rounded-l-none !rounded-r-lg !hover:bg-state-base-hover backdrop-blur-[5px]
+          `!hover:bg-state-base-hover !rounded-l-none !rounded-r-lg !border-0 !p-2 backdrop-blur-[5px]
           disabled:cursor-not-allowed disabled:bg-transparent disabled:hover:bg-transparent`,
           open ? '!bg-state-base-hover' : '',
         )}
         popupClassName='!min-w-[128px] !bg-components-panel-bg-blur !rounded-xl border-[0.5px] !ring-0
           border-components-panel-border !shadow-xl !shadow-shadow-shadow-5 backdrop-blur-[5px]'
-        className='min-w-[128px] h-fit'
+        className='h-fit min-w-[128px]'
         disabled={embedding}
       />
     </div>
diff --git a/web/app/components/datasets/documents/index.tsx b/web/app/components/datasets/documents/index.tsx
index bbd1c03214..52dffcd9ef 100644
--- a/web/app/components/datasets/documents/index.tsx
+++ b/web/app/components/datasets/documents/index.tsx
@@ -62,7 +62,7 @@ const EmptyElement: FC<{ canAdd: boolean; onClick: () => void; type?: 'upload' |
       <div className={s.emptySymbolIconWrapper}>
         {type === 'upload' ? <FolderPlusIcon /> : <NotionIcon />}
       </div>
-      <span className={s.emptyTitle}>{t('datasetDocuments.list.empty.title')}<ThreeDotsIcon className='inline relative -top-3 -left-1.5' /></span>
+      <span className={s.emptyTitle}>{t('datasetDocuments.list.empty.title')}<ThreeDotsIcon className='relative -left-1.5 -top-3 inline' /></span>
       <div className={s.emptyTip}>
         {t(`datasetDocuments.list.empty.${type}.tip`)}
       </div>
@@ -235,22 +235,22 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
   }
 
   return (
-    <div className='flex flex-col h-full overflow-y-auto'>
+    <div className='flex h-full flex-col overflow-y-auto'>
       <div className='flex flex-col justify-center gap-1 px-6 pt-4'>
-        <h1 className='text-base font-semibold text-text-primary'>{t('datasetDocuments.list.title')}</h1>
-        <div className='flex items-center text-sm font-normal text-text-tertiary space-x-0.5'>
+        <h1 className='text-text-primary text-base font-semibold'>{t('datasetDocuments.list.title')}</h1>
+        <div className='text-text-tertiary flex items-center space-x-0.5 text-sm font-normal'>
           <span>{t('datasetDocuments.list.desc')}</span>
           <a
-            className='flex items-center text-text-accent'
+            className='text-text-accent flex items-center'
             target='_blank'
             href='https://docs.dify.ai/guides/knowledge-base/integrate-knowledge-within-application'>
             <span>{t('datasetDocuments.list.learnMore')}</span>
-            <RiExternalLinkLine className='w-3 h-3' />
+            <RiExternalLinkLine className='h-3 w-3' />
           </a>
         </div>
       </div>
-      <div className='flex flex-col px-6 py-4 flex-1'>
-        <div className='flex items-center justify-between flex-wrap'>
+      <div className='flex flex-1 flex-col px-6 py-4'>
+        <div className='flex flex-wrap items-center justify-between'>
           <Input
             showLeftIcon
             showClearIcon
@@ -259,12 +259,12 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
             onChange={e => handleInputChange(e.target.value)}
             onClear={() => handleInputChange('')}
           />
-          <div className='flex gap-2 justify-center items-center !h-8'>
+          <div className='flex !h-8 items-center justify-center gap-2'>
             {!isFreePlan && <AutoDisabledDocument datasetId={datasetId} />}
             <IndexFailed datasetId={datasetId} />
             {embeddingAvailable && (
               <Button variant='primary' onClick={routeToDocCreate} className='shrink-0'>
-                <PlusIcon className={cn('h-4 w-4 mr-2 stroke-current')} />
+                <PlusIcon className={cn('mr-2 h-4 w-4 stroke-current')} />
                 {isDataSourceNotion && t('datasetDocuments.list.addPages')}
                 {isDataSourceWeb && t('datasetDocuments.list.addUrl')}
                 {(!dataset?.data_source_type || isDataSourceFile) && t('datasetDocuments.list.addFile')}
diff --git a/web/app/components/datasets/documents/list.tsx b/web/app/components/datasets/documents/list.tsx
index 00ccdfddce..6f47312b37 100644
--- a/web/app/components/datasets/documents/list.tsx
+++ b/web/app/components/datasets/documents/list.tsx
@@ -145,7 +145,7 @@ export const StatusItem: FC<{
     }
     {
       scene === 'detail' && (
-        <div className='flex justify-between items-center ml-1.5'>
+        <div className='ml-1.5 flex items-center justify-between'>
           <Tooltip
             popupContent={t('datasetDocuments.list.action.enableWarning')}
             popupClassName='text-text-secondary system-xs-medium'
@@ -289,12 +289,12 @@ export const OperationAction: FC<{
           popupClassName='text-text-secondary system-xs-medium'
         >
           <button
-            className={cn('rounded-lg mr-2 cursor-pointer',
+            className={cn('mr-2 cursor-pointer rounded-lg',
               !isListScene
-                ? 'p-2 bg-components-button-secondary-bg hover:bg-components-button-secondary-bg-hover border-[0.5px] border-components-button-secondary-border hover:border-components-button-secondary-border-hover shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]'
-                : 'p-0.5 hover:bg-state-base-hover')}
+                ? 'bg-components-button-secondary-bg hover:bg-components-button-secondary-bg-hover border-components-button-secondary-border hover:border-components-button-secondary-border-hover shadow-xs shadow-shadow-shadow-3 border-[0.5px] p-2 backdrop-blur-[5px]'
+                : 'hover:bg-state-base-hover p-0.5')}
             onClick={() => router.push(`/datasets/${datasetId}/documents/${detail.id}/settings`)}>
-            <RiEqualizer2Line className='w-4 h-4 text-components-button-secondary-text' />
+            <RiEqualizer2Line className='text-components-button-secondary-text h-4 w-4' />
           </button>
         </Tooltip>
         <Popover
@@ -308,12 +308,12 @@ export const OperationAction: FC<{
                       name: detail.name,
                     })
                   }}>
-                    <RiEditLine className='w-4 h-4 text-text-tertiary' />
+                    <RiEditLine className='text-text-tertiary h-4 w-4' />
                     <span className={s.actionName}>{t('datasetDocuments.list.table.rename')}</span>
                   </div>
                   {['notion_import', DataSourceType.WEB].includes(data_source_type) && (
                     <div className={s.actionItem} onClick={() => onOperate('sync')}>
-                      <RiLoopLeftLine className='w-4 h-4 text-text-tertiary' />
+                      <RiLoopLeftLine className='text-text-tertiary h-4 w-4' />
                       <span className={s.actionName}>{t('datasetDocuments.list.action.sync')}</span>
                     </div>
                   )}
@@ -321,17 +321,17 @@ export const OperationAction: FC<{
                 </>
               )}
               {!archived && <div className={s.actionItem} onClick={() => onOperate('archive')}>
-                <RiArchive2Line className='w-4 h-4 text-text-tertiary' />
+                <RiArchive2Line className='text-text-tertiary h-4 w-4' />
                 <span className={s.actionName}>{t('datasetDocuments.list.action.archive')}</span>
               </div>}
               {archived && (
                 <div className={s.actionItem} onClick={() => onOperate('un_archive')}>
-                  <RiArchive2Line className='w-4 h-4 text-text-tertiary' />
+                  <RiArchive2Line className='text-text-tertiary h-4 w-4' />
                   <span className={s.actionName}>{t('datasetDocuments.list.action.unarchive')}</span>
                 </div>
               )}
               <div className={cn(s.actionItem, s.deleteActionItem, 'group')} onClick={() => setShowModal(true)}>
-                <RiDeleteBinLine className={'w-4 h-4 text-text-tertiary group-hover:text-text-destructive'} />
+                <RiDeleteBinLine className={'text-text-tertiary group-hover:text-text-destructive h-4 w-4'} />
                 <span className={cn(s.actionName, 'group-hover:text-text-destructive')}>{t('datasetDocuments.list.action.delete')}</span>
               </div>
             </div>
@@ -340,12 +340,12 @@ export const OperationAction: FC<{
           position='br'
           btnElement={
             <div className={cn(s.commonIcon)}>
-              <RiMoreFill className='w-4 h-4 text-text-components-button-secondary-text' />
+              <RiMoreFill className='text-text-components-button-secondary-text h-4 w-4' />
             </div>
           }
           btnClassName={open => cn(isListScene ? s.actionIconWrapperList : s.actionIconWrapperDetail, open ? '!hover:bg-state-base-hover !shadow-none' : '!bg-transparent')}
           popupClassName='!w-full'
-          className={`flex justify-end !w-[200px] h-fit !z-20 ${className}`}
+          className={`!z-20 flex h-fit !w-[200px] justify-end ${className}`}
         />
       </>
     )}
@@ -500,14 +500,14 @@ const DocumentList: FC<IDocumentListProps> = ({
   }
 
   return (
-    <div className='relative w-full h-full overflow-x-auto'>
-      <table className={`min-w-[700px] max-w-full w-full border-collapse border-0 text-sm mt-3 ${s.documentTable}`}>
-        <thead className="h-8 leading-8 border-b border-divider-subtle text-text-tertiary font-medium text-xs uppercase">
+    <div className='relative h-full w-full overflow-x-auto'>
+      <table className={`mt-3 w-full min-w-[700px] max-w-full border-collapse border-0 text-sm ${s.documentTable}`}>
+        <thead className="border-divider-subtle text-text-tertiary h-8 border-b text-xs font-medium uppercase leading-8">
           <tr>
             <td className='w-12'>
               <div className='flex items-center' onClick={e => e.stopPropagation()}>
                 <Checkbox
-                  className='shrink-0 mr-2'
+                  className='mr-2 shrink-0'
                   checked={isAllSelected}
                   mixed={!isAllSelected && isSomeSelected}
                   onCheck={onSelectedAll}
@@ -526,7 +526,7 @@ const DocumentList: FC<IDocumentListProps> = ({
             <td className='w-44'>
               <div className='flex items-center' onClick={onClickSort}>
                 {t('datasetDocuments.list.table.header.uploadTime')}
-                <ArrowDownIcon className={cn('ml-0.5 h-3 w-3 stroke-current stroke-2 cursor-pointer', enableSort ? 'text-text-tertiary' : 'text-text-disabled')} />
+                <ArrowDownIcon className={cn('ml-0.5 h-3 w-3 cursor-pointer stroke-current stroke-2', enableSort ? 'text-text-tertiary' : 'text-text-disabled')} />
               </div>
             </td>
             <td className='w-40'>{t('datasetDocuments.list.table.header.status')}</td>
@@ -539,14 +539,14 @@ const DocumentList: FC<IDocumentListProps> = ({
             const fileType = isFile ? doc.data_source_detail_dict?.upload_file?.extension : ''
             return <tr
               key={doc.id}
-              className={'border-b border-divider-subtle h-8 hover:bg-background-default-hover cursor-pointer'}
+              className={'border-divider-subtle hover:bg-background-default-hover h-8 cursor-pointer border-b'}
               onClick={() => {
                 router.push(`/datasets/${datasetId}/documents/${doc.id}`)
               }}>
-              <td className='text-left align-middle text-text-tertiary text-xs'>
+              <td className='text-text-tertiary text-left align-middle text-xs'>
                 <div className='flex items-center' onClick={e => e.stopPropagation()}>
                   <Checkbox
-                    className='shrink-0 mr-2'
+                    className='mr-2 shrink-0'
                     checked={selectedIds.includes(doc.id)}
                     onCheck={() => {
                       onSelectedIdChange(
@@ -561,25 +561,25 @@ const DocumentList: FC<IDocumentListProps> = ({
                 </div>
               </td>
               <td>
-                <div className={'group flex items-center mr-6 hover:mr-0 max-w-[460px]'}>
+                <div className={'group mr-6 flex max-w-[460px] items-center hover:mr-0'}>
                   <div className='shrink-0'>
-                    {doc?.data_source_type === DataSourceType.NOTION && <NotionIcon className='inline-flex -mt-[3px] mr-1.5 align-middle' type='page' src={doc.data_source_info.notion_page_icon} />}
+                    {doc?.data_source_type === DataSourceType.NOTION && <NotionIcon className='-mt-[3px] mr-1.5 inline-flex align-middle' type='page' src={doc.data_source_info.notion_page_icon} />}
                     {doc?.data_source_type === DataSourceType.FILE && <FileTypeIcon type={extensionToFileType(doc?.data_source_info?.upload_file?.extension ?? fileType)} className='mr-1.5' />}
-                    {doc?.data_source_type === DataSourceType.WEB && <Globe01 className='inline-flex -mt-[3px] mr-1.5 align-middle' />}
+                    {doc?.data_source_type === DataSourceType.WEB && <Globe01 className='-mt-[3px] mr-1.5 inline-flex align-middle' />}
                   </div>
-                  <span className='text-sm truncate grow-1'>{doc.name}</span>
-                  <div className='group-hover:flex group-hover:ml-auto hidden shrink-0'>
+                  <span className='grow-1 truncate text-sm'>{doc.name}</span>
+                  <div className='hidden shrink-0 group-hover:ml-auto group-hover:flex'>
                     <Tooltip
                       popupContent={t('datasetDocuments.list.table.rename')}
                     >
                       <div
-                        className='p-1 rounded-md cursor-pointer hover:bg-state-base-hover'
+                        className='hover:bg-state-base-hover cursor-pointer rounded-md p-1'
                         onClick={(e) => {
                           e.stopPropagation()
                           handleShowRenameModal(doc)
                         }}
                       >
-                        <Edit03 className='w-4 h-4 text-text-tertiary' />
+                        <Edit03 className='text-text-tertiary h-4 w-4' />
                       </div>
                     </Tooltip>
                   </div>
@@ -617,7 +617,7 @@ const DocumentList: FC<IDocumentListProps> = ({
       </table>
       {(selectedIds.length > 0) && (
         <BatchAction
-          className='absolute left-0 bottom-16 z-20'
+          className='absolute bottom-16 left-0 z-20'
           selectedIds={selectedIds}
           onArchive={handleAction(DocumentActionType.archive)}
           onBatchEnable={handleAction(DocumentActionType.enable)}
diff --git a/web/app/components/datasets/documents/rename-modal.tsx b/web/app/components/datasets/documents/rename-modal.tsx
index 0b73c37207..1295e084d5 100644
--- a/web/app/components/datasets/documents/rename-modal.tsx
+++ b/web/app/components/datasets/documents/rename-modal.tsx
@@ -59,7 +59,7 @@ const RenameModal: FC<Props> = ({
       isShow
       onClose={onClose}
     >
-      <div className={'mt-6 font-medium text-sm leading-[21px] text-gray-900'}>{t('datasetDocuments.list.table.name')}</div>
+      <div className={'mt-6 text-sm font-medium leading-[21px] text-gray-900'}>{t('datasetDocuments.list.table.name')}</div>
       <Input
         className='mt-2 h-10'
         value={newName}
@@ -67,8 +67,8 @@ const RenameModal: FC<Props> = ({
       />
 
       <div className='mt-10 flex justify-end'>
-        <Button className='mr-2 flex-shrink-0' onClick={onClose}>{t('common.operation.cancel')}</Button>
-        <Button variant='primary' className='flex-shrink-0' onClick={handleSave} loading={saveLoading}>{t('common.operation.save')}</Button>
+        <Button className='mr-2 shrink-0' onClick={onClose}>{t('common.operation.cancel')}</Button>
+        <Button variant='primary' className='shrink-0' onClick={handleSave} loading={saveLoading}>{t('common.operation.save')}</Button>
       </div>
     </Modal>
   )
diff --git a/web/app/components/datasets/external-api/external-api-modal/Form.tsx b/web/app/components/datasets/external-api/external-api-modal/Form.tsx
index 824b5e6c9e..82d92f6819 100644
--- a/web/app/components/datasets/external-api/external-api-modal/Form.tsx
+++ b/web/app/components/datasets/external-api/external-api-modal/Form.tsx
@@ -50,7 +50,7 @@ const Form: FC<FormProps> = React.memo(({
 
     return (
       <div key={variable} className={cn(itemClassName, 'flex flex-col items-start gap-1 self-stretch')}>
-        <div className="flex justify-between items-center w-full">
+        <div className="flex w-full items-center justify-between">
           <label className={cn(fieldLabelClassName, 'text-text-secondary system-sm-semibold')} htmlFor={variable}>
             {label[i18n.language] || label.en_US}
             {required && <span className='ml-1 text-red-500'>*</span>}
@@ -62,7 +62,7 @@ const Form: FC<FormProps> = React.memo(({
               rel='noopener noreferrer'
               className='text-text-accent body-xs-regular flex items-center'
             >
-              <RiBookOpenLine className='w-3 h-3 text-text-accent mr-1' />
+              <RiBookOpenLine className='text-text-accent mr-1 h-3 w-3' />
               {t('dataset.externalAPIPanelDocumentation')}
             </a>
           )}
@@ -81,7 +81,7 @@ const Form: FC<FormProps> = React.memo(({
   }
 
   return (
-    <form className={cn('flex flex-col justify-center items-start gap-4 self-stretch', className)}>
+    <form className={cn('flex flex-col items-start justify-center gap-4 self-stretch', className)}>
       {formSchemas.map(formSchema => renderField(formSchema))}
     </form>
   )
diff --git a/web/app/components/datasets/external-api/external-api-modal/index.tsx b/web/app/components/datasets/external-api/external-api-modal/index.tsx
index 340d147a50..fea965cc94 100644
--- a/web/app/components/datasets/external-api/external-api-modal/index.tsx
+++ b/web/app/components/datasets/external-api/external-api-modal/index.tsx
@@ -116,11 +116,11 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
 
   return (
     <PortalToFollowElem open>
-      <PortalToFollowElemContent className='w-full h-full z-[60]'>
+      <PortalToFollowElemContent className='z-[60] h-full w-full'>
         <div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'>
-          <div className='flex relative w-[480px] flex-col items-start bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadows-shadow-xl'>
-            <div className='flex flex-col pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
-              <div className='self-stretch text-text-primary title-2xl-semi-bold flex-grow'>
+          <div className='bg-components-panel-bg border-components-panel-border shadows-shadow-xl relative flex w-[480px] flex-col items-start rounded-2xl border-[0.5px]'>
+            <div className='flex flex-col items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6'>
+              <div className='text-text-primary title-2xl-semi-bold grow self-stretch'>
                 {
                   isEditMode ? t('dataset.editExternalAPIFormTitle') : t('dataset.createExternalAPI')
                 }
@@ -128,18 +128,18 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
               {isEditMode && (datasetBindings?.length ?? 0) > 0 && (
                 <div className='text-text-tertiary system-xs-regular flex items-center'>
                   {t('dataset.editExternalAPIFormWarning.front')}
-                  <span className='text-text-accent cursor-pointer flex items-center'>
+                  <span className='text-text-accent flex cursor-pointer items-center'>
                     &nbsp;{datasetBindings?.length} {t('dataset.editExternalAPIFormWarning.end')}&nbsp;
                     <Tooltip
                       popupClassName='flex items-center self-stretch w-[320px]'
                       popupContent={
                         <div className='p-1'>
-                          <div className='flex pt-1 pb-0.5 pl-2 pr-3 items-start self-stretch'>
+                          <div className='flex items-start self-stretch pb-0.5 pl-2 pr-3 pt-1'>
                             <div className='text-text-tertiary system-xs-medium-uppercase'>{`${datasetBindings?.length} ${t('dataset.editExternalAPITooltipTitle')}`}</div>
                           </div>
                           {datasetBindings?.map(binding => (
-                            <div key={binding.id} className='flex px-2 py-1 items-center gap-1 self-stretch'>
-                              <RiBook2Line className='w-4 h-4 text-text-secondary' />
+                            <div key={binding.id} className='flex items-center gap-1 self-stretch px-2 py-1'>
+                              <RiBook2Line className='text-text-secondary h-4 w-4' />
                               <div className='text-text-secondary system-sm-medium'>{binding.name}</div>
                             </div>
                           ))}
@@ -148,22 +148,22 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
                       asChild={false}
                       position='bottom'
                     >
-                      <RiInformation2Line className='w-3.5 h-3.5' />
+                      <RiInformation2Line className='h-3.5 w-3.5' />
                     </Tooltip>
                   </span>
                 </div>
               )}
             </div>
-            <ActionButton className='absolute top-5 right-5' onClick={onCancel}>
-              <RiCloseLine className='w-[18px] h-[18px] text-text-tertiary flex-shrink-0' />
+            <ActionButton className='absolute right-5 top-5' onClick={onCancel}>
+              <RiCloseLine className='text-text-tertiary h-[18px] w-[18px] shrink-0' />
             </ActionButton>
             <Form
               value={formData}
               onChange={handleDataChange}
               formSchemas={formSchemas}
-              className='flex px-6 py-3 flex-col justify-center items-start gap-4 self-stretch'
+              className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'
             />
-            <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+            <div className='flex items-center justify-end gap-2 self-stretch p-6 pt-5'>
               <Button type='button' variant='secondary' onClick={onCancel}>
                 {t('dataset.externalAPIForm.cancel')}
               </Button>
@@ -184,10 +184,10 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
                 {t('dataset.externalAPIForm.save')}
               </Button>
             </div>
-            <div className='flex px-2 py-3 justify-center items-center gap-1 self-stretch rounded-b-2xl
-              border-t-[0.5px] border-divider-subtle bg-background-soft text-text-tertiary system-xs-regular'
+            <div className='border-divider-subtle bg-background-soft text-text-tertiary system-xs-regular flex items-center justify-center gap-1
+              self-stretch rounded-b-2xl border-t-[0.5px] px-2 py-3'
             >
-              <RiLock2Fill className='w-3 h-3 text-text-quaternary' />
+              <RiLock2Fill className='text-text-quaternary h-3 w-3' />
               {t('dataset.externalAPIForm.encrypted.front')}
               <a
                 className='text-text-accent'
diff --git a/web/app/components/datasets/external-api/external-api-panel/index.tsx b/web/app/components/datasets/external-api/external-api-panel/index.tsx
index 044c008b12..aa7f11e058 100644
--- a/web/app/components/datasets/external-api/external-api-panel/index.tsx
+++ b/web/app/components/datasets/external-api/external-api-panel/index.tsx
@@ -39,39 +39,39 @@ const ExternalAPIPanel: React.FC<ExternalAPIPanelProps> = ({ onClose }) => {
   return (
     <div
       tabIndex={-1}
-      className={cn('absolute top-14 right-0 bottom-2 flex z-10 outline-none')}
+      className={cn('absolute bottom-2 right-0 top-14 z-10 flex outline-none')}
     >
       <div
         className={cn(
-          'relative flex flex-col w-[420px] bg-components-panel-bg-alt rounded-l-2xl h-full border border-components-panel-border',
+          'bg-components-panel-bg-alt border-components-panel-border relative flex h-full w-[420px] flex-col rounded-l-2xl border',
         )}
       >
         <div className='flex items-start self-stretch p-4 pb-0'>
-          <div className='flex flex-col items-start gap-1 flex-grow'>
-            <div className='self-stretch text-text-primary system-xl-semibold'>{t('dataset.externalAPIPanelTitle')}</div>
-            <div className='self-stretch text-text-tertiary body-xs-regular'>{t('dataset.externalAPIPanelDescription')}</div>
-            <a className='flex justify-center items-center gap-1 self-stretch cursor-pointer' href='https://docs.dify.ai/guides/knowledge-base/external-knowledge-api-documentation' target='_blank'>
-              <RiBookOpenLine className='w-3 h-3 text-text-accent' />
-              <div className='flex-grow text-text-accent body-xs-regular'>{t('dataset.externalAPIPanelDocumentation')}</div>
+          <div className='flex grow flex-col items-start gap-1'>
+            <div className='text-text-primary system-xl-semibold self-stretch'>{t('dataset.externalAPIPanelTitle')}</div>
+            <div className='text-text-tertiary body-xs-regular self-stretch'>{t('dataset.externalAPIPanelDescription')}</div>
+            <a className='flex cursor-pointer items-center justify-center gap-1 self-stretch' href='https://docs.dify.ai/guides/knowledge-base/external-knowledge-api-documentation' target='_blank'>
+              <RiBookOpenLine className='text-text-accent h-3 w-3' />
+              <div className='text-text-accent body-xs-regular grow'>{t('dataset.externalAPIPanelDocumentation')}</div>
             </a>
           </div>
           <div className='flex items-center'>
             <ActionButton onClick={() => onClose()}>
-              <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+              <RiCloseLine className='text-text-tertiary h-4 w-4' />
             </ActionButton>
           </div>
         </div>
-        <div className='flex px-4 py-3 flex-col justify-center items-start gap-2 self-stretch'>
+        <div className='flex flex-col items-start justify-center gap-2 self-stretch px-4 py-3'>
           <Button
             variant={'primary'}
-            className='flex justify-center items-center px-3 py-2 gap-0.5'
+            className='flex items-center justify-center gap-0.5 px-3 py-2'
             onClick={handleOpenExternalAPIModal}
           >
-            <RiAddLine className='w-4 h-4 text-components-button-primary-text' />
+            <RiAddLine className='text-components-button-primary-text h-4 w-4' />
             <div className='text-components-button-primary-text system-sm-medium'>{t('dataset.createExternalAPI')}</div>
           </Button>
         </div>
-        <div className='flex py-0 px-4 flex-col items-start gap-1 flex-grow self-stretch'>
+        <div className='flex grow flex-col items-start gap-1 self-stretch px-4 py-0'>
           {isLoading
             ? (
               <Loading />
diff --git a/web/app/components/datasets/external-api/external-knowledge-api-card/index.tsx b/web/app/components/datasets/external-api/external-knowledge-api-card/index.tsx
index 603b4fe7cb..573b6ff552 100644
--- a/web/app/components/datasets/external-api/external-knowledge-api-card/index.tsx
+++ b/web/app/components/datasets/external-api/external-knowledge-api-card/index.tsx
@@ -105,20 +105,20 @@ const ExternalKnowledgeAPICard: React.FC<ExternalKnowledgeAPICardProps> = ({ api
 
   return (
     <>
-      <div className={`flex p-2 pl-3 items-start self-stretch rounded-lg border-[0.5px] 
-        border-components-panel-border-subtle bg-components-panel-on-panel-item-bg 
-        shadows-shadow-xs ${isHovered ? 'bg-state-destructive-hover border-state-destructive-border' : ''}`}
+      <div className={`border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadows-shadow-xs flex items-start self-stretch rounded-lg 
+        border-[0.5px] p-2 
+        pl-3 ${isHovered ? 'bg-state-destructive-hover border-state-destructive-border' : ''}`}
       >
-        <div className='flex py-1 flex-col justify-center items-start gap-1.5 flex-grow'>
-          <div className='flex items-center gap-1 self-stretch text-text-secondary'>
-            <ApiConnectionMod className='w-4 h-4' />
+        <div className='flex grow flex-col items-start justify-center gap-1.5 py-1'>
+          <div className='text-text-secondary flex items-center gap-1 self-stretch'>
+            <ApiConnectionMod className='h-4 w-4' />
             <div className='system-sm-medium'>{api.name}</div>
           </div>
-          <div className='self-stretch text-text-tertiary system-xs-regular'>{api.settings.endpoint}</div>
+          <div className='text-text-tertiary system-xs-regular self-stretch'>{api.settings.endpoint}</div>
         </div>
         <div className='flex items-start gap-1'>
           <ActionButton onClick={handleEditClick}>
-            <RiEditLine className='w-4 h-4 text-text-tertiary hover:text-text-secondary' />
+            <RiEditLine className='text-text-tertiary hover:text-text-secondary h-4 w-4' />
           </ActionButton>
           <ActionButton
             className='hover:bg-state-destructive-hover'
@@ -126,7 +126,7 @@ const ExternalKnowledgeAPICard: React.FC<ExternalKnowledgeAPICardProps> = ({ api
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}
           >
-            <RiDeleteBinLine className='w-4 h-4 text-text-tertiary hover:text-text-destructive' />
+            <RiDeleteBinLine className='text-text-tertiary hover:text-text-destructive h-4 w-4' />
           </ActionButton>
         </div>
       </div>
diff --git a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx
index a6a46479a4..eccfeb7aa0 100644
--- a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx
@@ -59,46 +59,46 @@ const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, value, onS
   return (
     <div className="relative w-full">
       <div
-        className={`flex items-center justify-between cursor-pointer px-2 py-1 gap-0.5 self-stretch rounded-lg 
-        bg-components-input-bg-normal hover:bg-state-base-hover-alt ${isOpen && 'bg-state-base-hover-alt'}`}
+        className={`bg-components-input-bg-normal hover:bg-state-base-hover-alt flex cursor-pointer items-center justify-between gap-0.5 self-stretch rounded-lg 
+        px-2 py-1 ${isOpen && 'bg-state-base-hover-alt'}`}
         onClick={() => setIsOpen(!isOpen)}
       >
         {selectedItem
           ? (
-            <div className="flex p-1 items-center gap-2 self-stretch rounded-lg">
-              <ApiConnectionMod className='text-text-secondary w-4 h-4' />
-              <div className='flex items-center flex-grow'>
-                <span className='text-components-input-text-filled text-ellipsis system-sm-regular overflow-hidden'>{selectedItem.name}</span>
+            <div className="flex items-center gap-2 self-stretch rounded-lg p-1">
+              <ApiConnectionMod className='text-text-secondary h-4 w-4' />
+              <div className='flex grow items-center'>
+                <span className='text-components-input-text-filled system-sm-regular overflow-hidden text-ellipsis'>{selectedItem.name}</span>
               </div>
             </div>
           )
           : (
             <span className='text-components-input-text-placeholder system-sm-regular'>{t('dataset.selectExternalKnowledgeAPI.placeholder')}</span>
           )}
-        <RiArrowDownSLine className={`w-4 h-4 text-text-quaternary transition-transform ${isOpen ? 'text-text-secondary' : ''}`} />
+        <RiArrowDownSLine className={`text-text-quaternary h-4 w-4 transition-transform ${isOpen ? 'text-text-secondary' : ''}`} />
       </div>
       {isOpen && (
-        <div className="absolute z-10 w-full mt-1 bg-components-panel-bg-blur border rounded-xl shadow-lg">
+        <div className="bg-components-panel-bg-blur absolute z-10 mt-1 w-full rounded-xl border shadow-lg">
           {items.map(item => (
             <div
               key={item.value}
-              className="flex p-1 items-center cursor-pointer"
+              className="flex cursor-pointer items-center p-1"
               onClick={() => handleSelect(item)}
             >
-              <div className="flex p-2 items-center gap-2 self-stretch rounded-lg hover:bg-state-base-hover w-full">
-                <ApiConnectionMod className='text-text-secondary w-4 h-4' />
-                <span className='text-text-secondary text-ellipsis system-sm-medium overflow-hidden flex-grow'>{item.name}</span>
-                <span className='text-text-tertiary overflow-hidden text-right text-ellipsis system-xs-regular'>{item.url}</span>
+              <div className="hover:bg-state-base-hover flex w-full items-center gap-2 self-stretch rounded-lg p-2">
+                <ApiConnectionMod className='text-text-secondary h-4 w-4' />
+                <span className='text-text-secondary system-sm-medium grow overflow-hidden text-ellipsis'>{item.name}</span>
+                <span className='text-text-tertiary system-xs-regular overflow-hidden text-ellipsis text-right'>{item.url}</span>
               </div>
             </div>
           ))}
-          <div className='flex p-1 flex-col items-start self-stretch'>
+          <div className='flex flex-col items-start self-stretch p-1'>
             <div
-              className='flex p-2 items-center gap-2 self-stretch rounded-lg cursor-pointer hover:bg-state-base-hover'
+              className='hover:bg-state-base-hover flex cursor-pointer items-center gap-2 self-stretch rounded-lg p-2'
               onClick={handleAddNewAPI}
             >
-              <RiAddLine className='text-text-secondary w-4 h-4' />
-              <span className='flex-grow overflow-hidden text-text-secondary text-ellipsis system-sm-medium'>{t('dataset.createNewExternalAPI')}</span>
+              <RiAddLine className='text-text-secondary h-4 w-4' />
+              <span className='text-text-secondary system-sm-medium grow overflow-hidden text-ellipsis'>{t('dataset.createNewExternalAPI')}</span>
             </div>
           </div>
         </div>
diff --git a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
index c910d9b2a7..d7c2749e37 100644
--- a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
@@ -74,7 +74,7 @@ const ExternalApiSelection: React.FC<ExternalApiSelectionProps> = ({ external_kn
             }}
           />
           : <Button variant={'tertiary'} onClick={handleAddNewAPI} className='justify-start gap-0.5'>
-            <RiAddLine className='w-4 h-4 text-text-tertiary' />
+            <RiAddLine className='text-text-tertiary h-4 w-4' />
             <span className='text-text-tertiary system-sm-regular'>{t('dataset.noExternalKnowledge')}</span>
           </Button>
         }
diff --git a/web/app/components/datasets/external-knowledge-base/create/InfoPanel.tsx b/web/app/components/datasets/external-knowledge-base/create/InfoPanel.tsx
index bd32683c85..45cd63eb74 100644
--- a/web/app/components/datasets/external-knowledge-base/create/InfoPanel.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/InfoPanel.tsx
@@ -5,13 +5,13 @@ const InfoPanel = () => {
   const { t } = useTranslation()
 
   return (
-    <div className='flex w-[360px] pt-[108px] pb-2 pr-8 flex-col items-start'>
-      <div className='flex min-w-[240px] w-full p-6 flex-col items-start gap-3 self-stretch rounded-xl bg-background-section'>
-        <div className='flex p-1 w-10 h-10 justify-center items-center gap-2 flex-grow self-stretch rounded-lg border-[0.5px] border-components-card-border bg-components-card-bg'>
-          <RiBookOpenLine className='w-5 h-5 text-text-accent' />
+    <div className='flex w-[360px] flex-col items-start pb-2 pr-8 pt-[108px]'>
+      <div className='bg-background-section flex w-full min-w-[240px] flex-col items-start gap-3 self-stretch rounded-xl p-6'>
+        <div className='border-components-card-border bg-components-card-bg flex h-10 w-10 grow items-center justify-center gap-2 self-stretch rounded-lg border-[0.5px] p-1'>
+          <RiBookOpenLine className='text-text-accent h-5 w-5' />
         </div>
         <p className='flex flex-col items-start gap-2 self-stretch'>
-          <span className='self-stretch text-text-secondary system-xl-semibold'>
+          <span className='text-text-secondary system-xl-semibold self-stretch'>
             {t('dataset.connectDatasetIntro.title')}
           </span>
           <span className='text-text-tertiary system-sm-regular'>
@@ -21,7 +21,7 @@ const InfoPanel = () => {
             </a>
             {t('dataset.connectDatasetIntro.content.end')}
           </span>
-          <a className='self-stretch text-text-accent system-sm-regular' href='https://docs.dify.ai/guides/knowledge-base/connect-external-knowledge' target='_blank' rel="noopener noreferrer">
+          <a className='text-text-accent system-sm-regular self-stretch' href='https://docs.dify.ai/guides/knowledge-base/connect-external-knowledge' target='_blank' rel="noopener noreferrer">
             {t('dataset.connectDatasetIntro.learnMore')}
           </a>
         </p>
diff --git a/web/app/components/datasets/external-knowledge-base/create/KnowledgeBaseInfo.tsx b/web/app/components/datasets/external-knowledge-base/create/KnowledgeBaseInfo.tsx
index fec526b881..91bb19e346 100644
--- a/web/app/components/datasets/external-knowledge-base/create/KnowledgeBaseInfo.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/KnowledgeBaseInfo.tsx
@@ -41,7 +41,7 @@ const KnowledgeBaseInfo: React.FC<KnowledgeBaseInfoProps> = ({ name, description
               value={description}
               onChange={ e => handleDescriptionChange(e)}
               placeholder={t('dataset.externalKnowledgeDescriptionPlaceholder') ?? ''}
-              className={`flex h-20 py-2 p-3 self-stretch items-start rounded-lg bg-components-input-bg-normal ${description ? 'text-components-input-text-filled' : 'text-components-input-text-placeholder'} system-sm-regular`}
+              className={`bg-components-input-bg-normal flex h-20 items-start self-stretch rounded-lg p-3 py-2 ${description ? 'text-components-input-text-filled' : 'text-components-input-text-placeholder'} system-sm-regular`}
             />
           </div>
         </div>
diff --git a/web/app/components/datasets/external-knowledge-base/create/RetrievalSettings.tsx b/web/app/components/datasets/external-knowledge-base/create/RetrievalSettings.tsx
index d501dde271..e1df659e79 100644
--- a/web/app/components/datasets/external-knowledge-base/create/RetrievalSettings.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/RetrievalSettings.tsx
@@ -30,7 +30,7 @@ const RetrievalSettings: FC<RetrievalSettingsProps> = ({
 
   return (
     <div className={cn('flex flex-col gap-2 self-stretch', isInRetrievalSetting && 'w-full max-w-[480px]')}>
-      {!isInHitTesting && !isInRetrievalSetting && <div className='flex h-7 pt-1 flex-col gap-2 self-stretch'>
+      {!isInHitTesting && !isInRetrievalSetting && <div className='flex h-7 flex-col gap-2 self-stretch pt-1'>
         <label className='text-text-secondary system-sm-semibold'>{t('dataset.retrievalSettings')}</label>
       </div>}
       <div className={cn(
@@ -41,7 +41,7 @@ const RetrievalSettings: FC<RetrievalSettingsProps> = ({
           'flex-col sm:flex-row': !isInHitTesting && !isInRetrievalSetting,
         },
       )}>
-        <div className='flex flex-col gap-1 flex-grow'>
+        <div className='flex grow flex-col gap-1'>
           <TopKItem
             className='grow'
             value={topK}
@@ -49,7 +49,7 @@ const RetrievalSettings: FC<RetrievalSettingsProps> = ({
             enable={true}
           />
         </div>
-        <div className='flex flex-col gap-1 flex-grow'>
+        <div className='flex grow flex-col gap-1'>
           <ScoreThresholdItem
             className='grow'
             value={scoreThreshold}
diff --git a/web/app/components/datasets/external-knowledge-base/create/index.tsx b/web/app/components/datasets/external-knowledge-base/create/index.tsx
index 921050e218..d72ee11a28 100644
--- a/web/app/components/datasets/external-knowledge-base/create/index.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/index.tsx
@@ -49,27 +49,27 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
     && formData.external_retrieval_model.score_threshold !== undefined
 
   return (
-    <div className='flex flex-col flex-grow self-stretch rounded-t-2xl border-t border-effects-highlight bg-components-panel-bg'>
-      <div className='flex justify-center flex-grow self-stretch'>
-        <div className='flex w-full max-w-[960px] px-14 py-0 flex-col items-center'>
-          <div className='flex w-full max-w-[640px] pt-6 pb-8 flex-col grow items-center gap-4'>
-            <div className='relative flex flex-col py-2 items-center gap-[2px] self-stretch'>
-              <div className='flex-grow text-text-primary system-xl-semibold self-stretch'>{t('dataset.connectDataset')}</div>
+    <div className='border-effects-highlight bg-components-panel-bg flex grow flex-col self-stretch rounded-t-2xl border-t'>
+      <div className='flex grow justify-center self-stretch'>
+        <div className='flex w-full max-w-[960px] flex-col items-center px-14 py-0'>
+          <div className='flex w-full max-w-[640px] grow flex-col items-center gap-4 pb-8 pt-6'>
+            <div className='relative flex flex-col items-center gap-[2px] self-stretch py-2'>
+              <div className='text-text-primary system-xl-semibold grow self-stretch'>{t('dataset.connectDataset')}</div>
               <p className='text-text-tertiary system-sm-regular'>
                 <span>{t('dataset.connectHelper.helper1')}</span>
                 <span className='text-text-secondary system-sm-medium'>{t('dataset.connectHelper.helper2')}</span>
                 <span>{t('dataset.connectHelper.helper3')}</span>
-                <a className='self-stretch text-text-accent system-sm-regular' href='https://docs.dify.ai/guides/knowledge-base/connect-external-knowledge' target='_blank' rel="noopener noreferrer">
+                <a className='text-text-accent system-sm-regular self-stretch' href='https://docs.dify.ai/guides/knowledge-base/connect-external-knowledge' target='_blank' rel="noopener noreferrer">
                   {t('dataset.connectHelper.helper4')}
                 </a>
                 <span>{t('dataset.connectHelper.helper5')} </span>
               </p>
               <Button
-                className='flex w-8 h-8 p-2 items-center justify-center absolute left-[-44px] top-1 rounded-full'
+                className='absolute left-[-44px] top-1 flex h-8 w-8 items-center justify-center rounded-full p-2'
                 variant='tertiary'
                 onClick={navBackHandle}
               >
-                <RiArrowLeftLine className='w-4 h-4 text-text-tertiary' />
+                <RiArrowLeftLine className='text-text-tertiary h-4 w-4' />
               </Button>
             </div>
             <KnowledgeBaseInfo
@@ -101,7 +101,7 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
                 },
               })}
             />
-            <div className='flex py-2 justify-end items-center gap-2 self-stretch'>
+            <div className='flex items-center justify-end gap-2 self-stretch py-2'>
               <Button variant='secondary' onClick={navBackHandle}>
                 <div className='text-components-button-secondary-text system-sm-medium'>{t('dataset.externalKnowledgeForm.cancel')}</div>
               </Button>
@@ -114,7 +114,7 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
                 loading={loading}
               >
                 <div className='text-components-button-primary-text system-sm-medium'>{t('dataset.externalKnowledgeForm.connect')}</div>
-                <RiArrowRightLine className='w-4 h-4 text-components-button-primary-text' />
+                <RiArrowRightLine className='text-components-button-primary-text h-4 w-4' />
               </Button>
             </div>
           </div>
diff --git a/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx b/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx
index ca29c032e0..7a91dfb58a 100644
--- a/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx
+++ b/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx
@@ -93,7 +93,7 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
             ref={refs.setFloating}
             style={floatingStyles}
             {...getFloatingProps()}
-            className='p-1 rounded-lg bg-components-actionbar-bg shadow inline-flex items-center justify-center'
+            className='bg-components-actionbar-bg inline-flex items-center justify-center rounded-lg p-1 shadow'
             onMouseEnter={() => setDelBtnHover(true)}
             onMouseLeave={() => setDelBtnHover(false)}
           >
@@ -105,7 +105,7 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
               }}
               state={ActionButtonState.Destructive}
             >
-              <RiDeleteBinLine className='w-4 h-4' />
+              <RiDeleteBinLine className='h-4 w-4' />
             </ActionButton>
           </span>
         </FloatingFocusManager>}
diff --git a/web/app/components/datasets/formatted-text/flavours/preview-slice.tsx b/web/app/components/datasets/formatted-text/flavours/preview-slice.tsx
index 662362cbf5..475dcda3cc 100644
--- a/web/app/components/datasets/formatted-text/flavours/preview-slice.tsx
+++ b/web/app/components/datasets/formatted-text/flavours/preview-slice.tsx
@@ -47,7 +47,7 @@ export const PreviewSlice: FC<PreviewSliceProps> = (props) => {
         ref={refs.setFloating}
         style={floatingStyles}
         {...getFloatingProps()}
-        className='p-2 rounded-md bg-components-tooltip-bg shadow shadow-shadow-shadow-5 backdrop-blur-[5px] text-text-secondary leading-4 border-[0.5px] border-components-panel-border text-xs'
+        className='bg-components-tooltip-bg shadow-shadow-shadow-5 text-text-secondary border-components-panel-border rounded-md border-[0.5px] p-2 text-xs leading-4 shadow backdrop-blur-[5px]'
       >
         {tooltip}
       </span>}
diff --git a/web/app/components/datasets/hit-testing/components/child-chunks-item.tsx b/web/app/components/datasets/hit-testing/components/child-chunks-item.tsx
index 3c01e3d0b3..fd17e0165e 100644
--- a/web/app/components/datasets/hit-testing/components/child-chunks-item.tsx
+++ b/web/app/components/datasets/hit-testing/components/child-chunks-item.tsx
@@ -19,11 +19,11 @@ const ChildChunks: FC<Props> = ({
     <div
       className={!isShowAll ? 'line-clamp-2 break-all' : ''}
     >
-      <div className='inline-flex items-center relative top-[-2px]'>
-        <div className='flex items-center h-[20.5px] bg-state-accent-solid  system-2xs-semibold-uppercase text-text-primary-on-surface px-1'>C-{position}</div>
+      <div className='relative top-[-2px] inline-flex items-center'>
+        <div className='bg-state-accent-solid system-2xs-semibold-uppercase text-text-primary-on-surface flex  h-[20.5px] items-center px-1'>C-{position}</div>
         <Score value={score} besideChunkName />
       </div>
-      <SliceContent className='py-0.5 bg-state-accent-hover group-hover:bg-state-accent-hover text-sm text-text-secondary font-normal'>{content}</SliceContent>
+      <SliceContent className='bg-state-accent-hover group-hover:bg-state-accent-hover text-text-secondary py-0.5 text-sm font-normal'>{content}</SliceContent>
     </div>
   )
 }
diff --git a/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx b/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
index 463a32e4d0..7edf5ab926 100644
--- a/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
+++ b/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
@@ -42,28 +42,28 @@ const ChunkDetailModal: FC<Props> = ({
       <div className='mt-4 flex'>
         <div className={cn('flex-1', isParentChildRetrieval && 'pr-6')}>
           {/* Meta info */}
-          <div className='flex justify-between items-center'>
-            <div className='grow flex items-center space-x-2'>
+          <div className='flex items-center justify-between'>
+            <div className='flex grow items-center space-x-2'>
               <SegmentIndexTag
                 labelPrefix={`${isParentChildRetrieval ? 'Parent-' : ''}Chunk`}
                 positionId={position}
                 className={cn('w-fit group-hover:opacity-100')}
               />
               <Dot />
-              <div className='grow flex items-center space-x-1'>
+              <div className='flex grow items-center space-x-1'>
                 <FileIcon type={extension} size='sm' />
-                <span className='grow w-0 truncate text-text-secondary text-[13px] font-normal'>{document.name}</span>
+                <span className='text-text-secondary w-0 grow truncate text-[13px] font-normal'>{document.name}</span>
               </div>
             </div>
             <Score value={score} />
           </div>
           <Markdown
-            className={cn('!mt-2 !text-text-secondary', heighClassName)}
+            className={cn('!text-text-secondary !mt-2', heighClassName)}
             content={sign_content || content}
           />
           {!isParentChildRetrieval && keywords && keywords.length > 0 && (
             <div className='mt-6'>
-              <div className='font-medium text-xs text-text-tertiary uppercase'>{t(`${i18nPrefix}.keyword`)}</div>
+              <div className='text-text-tertiary text-xs font-medium uppercase'>{t(`${i18nPrefix}.keyword`)}</div>
               <div className='mt-1 flex flex-wrap'>
                 {keywords.map(keyword => (
                   <Tag key={keyword} text={keyword} className='mr-2' />
@@ -74,7 +74,7 @@ const ChunkDetailModal: FC<Props> = ({
         </div>
 
         {isParentChildRetrieval && (
-          <div className='flex-1 pl-6 pb-6'>
+          <div className='flex-1 pb-6 pl-6'>
             <div className='system-xs-semibold-uppercase text-text-secondary'>{t(`${i18nPrefix}.hitChunks`, { num: child_chunks.length })}</div>
             <div className={cn('mt-1 space-y-2', heighClassName)}>
               {child_chunks.map(item => (
diff --git a/web/app/components/datasets/hit-testing/components/result-item-external.tsx b/web/app/components/datasets/hit-testing/components/result-item-external.tsx
index 000b56d914..9f2c294e64 100644
--- a/web/app/components/datasets/hit-testing/components/result-item-external.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item-external.tsx
@@ -25,13 +25,13 @@ const ResultItemExternal: FC<Props> = ({ payload, positionId }) => {
   ] = useBoolean(false)
 
   return (
-    <div className={cn('pt-3 bg-chat-bubble-bg rounded-xl hover:shadow-lg cursor-pointer')} onClick={showDetailModal}>
+    <div className={cn('bg-chat-bubble-bg cursor-pointer rounded-xl pt-3 hover:shadow-lg')} onClick={showDetailModal}>
       {/* Meta info */}
       <ResultItemMeta className='px-3' labelPrefix={'Chunk'} positionId={positionId} wordCount={content.length} score={score} />
 
       {/* Main */}
       <div className='mt-1 px-3'>
-        <div className='line-clamp-2 body-md-regular break-all'>{content}</div>
+        <div className='body-md-regular line-clamp-2 break-all'>{content}</div>
       </div>
 
       {/* Foot */}
@@ -47,7 +47,7 @@ const ResultItemExternal: FC<Props> = ({ payload, positionId }) => {
         >
           <div className='mt-4 flex-1'>
             <ResultItemMeta labelPrefix={'Chunk'} positionId={positionId} wordCount={content.length} score={score} />
-            <div className={cn('mt-2 body-md-regular text-text-secondary break-all', 'h-[min(539px,_80vh)] overflow-y-auto')}>
+            <div className={cn('body-md-regular text-text-secondary mt-2 break-all', 'h-[min(539px,_80vh)] overflow-y-auto')}>
               {content}
             </div>
           </div>
diff --git a/web/app/components/datasets/hit-testing/components/result-item-footer.tsx b/web/app/components/datasets/hit-testing/components/result-item-footer.tsx
index 66b053ba0b..802b968b2d 100644
--- a/web/app/components/datasets/hit-testing/components/result-item-footer.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item-footer.tsx
@@ -21,15 +21,15 @@ const ResultItemFooter: FC<Props> = ({
   const { t } = useTranslation()
 
   return (
-    <div className="mt-3 flex justify-between items-center h-10 pl-3 pr-2 border-t border-divider-subtle">
-      <div className="grow flex items-center space-x-1">
+    <div className="border-divider-subtle mt-3 flex h-10 items-center justify-between border-t pl-3 pr-2">
+      <div className="flex grow items-center space-x-1">
         <FileIcon type={docType} size="sm" />
-        <span className="grow w-0 truncate text-text-secondary text-[13px] font-normal">
+        <span className="text-text-secondary w-0 grow truncate text-[13px] font-normal">
           {docTitle}
         </span>
       </div>
       <div
-        className="flex items-center space-x-1 cursor-pointer text-text-tertiary"
+        className="text-text-tertiary flex cursor-pointer items-center space-x-1"
         onClick={showDetailModal}
       >
         <div className="text-xs uppercase">{t(`${i18nPrefix}.open`)}</div>
diff --git a/web/app/components/datasets/hit-testing/components/result-item-meta.tsx b/web/app/components/datasets/hit-testing/components/result-item-meta.tsx
index 87267aa8b8..617aa77312 100644
--- a/web/app/components/datasets/hit-testing/components/result-item-meta.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item-meta.tsx
@@ -25,7 +25,7 @@ const ResultItemMeta: FC<Props> = ({
   const { t } = useTranslation()
 
   return (
-    <div className={cn('flex justify-between items-center', className)}>
+    <div className={cn('flex items-center justify-between', className)}>
       <div className="flex items-center space-x-2">
         <SegmentIndexTag
           labelPrefix={labelPrefix}
diff --git a/web/app/components/datasets/hit-testing/components/result-item.tsx b/web/app/components/datasets/hit-testing/components/result-item.tsx
index 12cbceff9c..ea7a0daea7 100644
--- a/web/app/components/datasets/hit-testing/components/result-item.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item.tsx
@@ -41,7 +41,7 @@ const ResultItem: FC<Props> = ({
   }] = useBoolean(false)
 
   return (
-    <div className={cn('pt-3 bg-chat-bubble-bg rounded-xl hover:shadow-lg cursor-pointer')} onClick={showDetailModal}>
+    <div className={cn('bg-chat-bubble-bg cursor-pointer rounded-xl pt-3 hover:shadow-lg')} onClick={showDetailModal}>
       {/* Meta info */}
       <ResultItemMeta className='px-3' labelPrefix={`${isParentChildRetrieval ? 'Parent-' : ''}Chunk`} positionId={position} wordCount={word_count} score={score} />
 
@@ -51,19 +51,19 @@ const ResultItem: FC<Props> = ({
         {isParentChildRetrieval && (
           <div className='mt-1'>
             <div
-              className={cn('inline-flex items-center h-6 space-x-0.5 text-text-secondary select-none rounded-lg cursor-pointer', isFold && 'pl-1 bg-[linear-gradient(90deg,_rgba(200,_206,_218,_0.20)_0%,_rgba(200,_206,_218,_0.04)_100%)]')}
+              className={cn('text-text-secondary inline-flex h-6 cursor-pointer select-none items-center space-x-0.5 rounded-lg', isFold && 'bg-[linear-gradient(90deg,_rgba(200,_206,_218,_0.20)_0%,_rgba(200,_206,_218,_0.04)_100%)] pl-1')}
               onClick={(e) => {
                 e.stopPropagation()
                 toggleFold()
               }}
             >
-              <Icon className={cn('w-4 h-4', isFold && 'opacity-50')} />
+              <Icon className={cn('h-4 w-4', isFold && 'opacity-50')} />
               <div className='text-xs font-semibold uppercase'>{t(`${i18nPrefix}.hitChunks`, { num: child_chunks.length })}</div>
             </div>
             {!isFold && (
               <div className='space-y-2'>
                 {child_chunks.map(item => (
-                  <div key={item.id} className='ml-[7px] pl-[7px] border-l-[2px] border-text-accent-secondary'>
+                  <div key={item.id} className='border-text-accent-secondary ml-[7px] border-l-[2px] pl-[7px]'>
                     <ChildChunkItem payload={item} isShowAll={false} />
                   </div>
                 ))}
diff --git a/web/app/components/datasets/hit-testing/components/score.tsx b/web/app/components/datasets/hit-testing/components/score.tsx
index 76914318e0..99e0f2b779 100644
--- a/web/app/components/datasets/hit-testing/components/score.tsx
+++ b/web/app/components/datasets/hit-testing/components/score.tsx
@@ -15,10 +15,10 @@ const Score: FC<Props> = ({
   if (!value || isNaN(value))
     return null
   return (
-    <div className={cn('relative items-center px-[5px] border border-components-progress-bar-border overflow-hidden',
-      besideChunkName ? 'border-l-0 h-[20.5px]' : 'h-[20px] rounded-md')}>
-      <div className={cn('absolute top-0 left-0 h-full bg-util-colors-blue-brand-blue-brand-100 border-r-[1.5px] border-components-progress-brand-progress', value === 1 && 'border-r-0')} style={{ width: `${value * 100}%` }} />
-      <div className={cn('relative flex items-center h-full space-x-0.5 text-util-colors-blue-brand-blue-brand-700')}>
+    <div className={cn('border-components-progress-bar-border relative items-center overflow-hidden border px-[5px]',
+      besideChunkName ? 'h-[20.5px] border-l-0' : 'h-[20px] rounded-md')}>
+      <div className={cn('bg-util-colors-blue-brand-blue-brand-100 border-components-progress-brand-progress absolute left-0 top-0 h-full border-r-[1.5px]', value === 1 && 'border-r-0')} style={{ width: `${value * 100}%` }} />
+      <div className={cn('text-util-colors-blue-brand-blue-brand-700 relative flex h-full items-center space-x-0.5')}>
         <div className='system-2xs-medium-uppercase'>score</div>
         <div className='system-xs-semibold'>{value?.toFixed(2)}</div>
       </div>
diff --git a/web/app/components/datasets/hit-testing/index.tsx b/web/app/components/datasets/hit-testing/index.tsx
index 983b700b5a..cf9a5c568c 100644
--- a/web/app/components/datasets/hit-testing/index.tsx
+++ b/web/app/components/datasets/hit-testing/index.tsx
@@ -34,11 +34,11 @@ type Props = {
 
 const RecordsEmpty: FC = () => {
   const { t } = useTranslation()
-  return <div className='bg-gray-50 rounded-2xl p-5'>
+  return <div className='rounded-2xl bg-gray-50 p-5'>
     <div className={s.clockWrapper}>
-      <div className={cn(s.clockIcon, 'w-5 h-5')}></div>
+      <div className={cn(s.clockIcon, 'h-5 w-5')}></div>
     </div>
-    <div className='my-2 text-gray-500 text-sm'>{t('datasetHitTesting.noRecentTip')}</div>
+    <div className='my-2 text-sm text-gray-500'>{t('datasetHitTesting.noRecentTip')}</div>
   </div>
 }
 
@@ -70,11 +70,11 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
   const [isShowModifyRetrievalModal, setIsShowModifyRetrievalModal] = useState(false)
   const [isShowRightPanel, { setTrue: showRightPanel, setFalse: hideRightPanel, set: setShowRightPanel }] = useBoolean(!isMobile)
   const renderHitResults = (results: HitTesting[] | ExternalKnowledgeBaseHitTesting[]) => (
-    <div className='h-full flex flex-col py-3 px-4 rounded-t-2xl bg-background-body'>
-      <div className='shrink-0 pl-2 text-text-primary font-semibold leading-6 mb-2'>
+    <div className='bg-background-body flex h-full flex-col rounded-t-2xl px-4 py-3'>
+      <div className='text-text-primary mb-2 shrink-0 pl-2 font-semibold leading-6'>
         {t('datasetHitTesting.hit.title', { num: results.length })}
       </div>
-      <div className='grow overflow-y-auto space-y-2'>
+      <div className='grow space-y-2 overflow-y-auto'>
         {results.map((record, idx) =>
           isExternal
             ? (
@@ -93,9 +93,9 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
   )
 
   const renderEmptyState = () => (
-    <div className='h-full flex flex-col justify-center items-center py-3 px-4 rounded-t-2xl bg-background-body'>
+    <div className='bg-background-body flex h-full flex-col items-center justify-center rounded-t-2xl px-4 py-3'>
       <div className={cn(docStyle.commonIcon, docStyle.targetIcon, '!bg-text-quaternary !h-14 !w-14')} />
-      <div className='text-text-quaternary text-[13px] mt-3'>
+      <div className='text-text-quaternary mt-3 text-[13px]'>
         {t('datasetHitTesting.hit.emptyTip')}
       </div>
     </div>
@@ -107,10 +107,10 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
 
   return (
     <div className={s.container}>
-      <div className='px-6 py-3 flex flex-col'>
-        <div className='flex flex-col justify-center mb-4'>
-          <h1 className='text-base font-semibold text-text-primary'>{t('datasetHitTesting.title')}</h1>
-          <p className='mt-0.5 text-[13px] leading-4 font-normal text-text-tertiary'>{t('datasetHitTesting.desc')}</p>
+      <div className='flex flex-col px-6 py-3'>
+        <div className='mb-4 flex flex-col justify-center'>
+          <h1 className='text-text-primary text-base font-semibold'>{t('datasetHitTesting.title')}</h1>
+          <p className='text-text-tertiary mt-0.5 text-[13px] font-normal leading-4'>{t('datasetHitTesting.desc')}</p>
         </div>
         <Textarea
           datasetId={datasetId}
@@ -127,7 +127,7 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
           retrievalConfig={retrievalConfig}
           isEconomy={currentDataset?.indexing_technique === 'economy'}
         />
-        <div className='text-base font-semibold text-text-primary mt-6 mb-3'>{t('datasetHitTesting.records')}</div>
+        <div className='text-text-primary mb-3 mt-6 text-base font-semibold'>{t('datasetHitTesting.records')}</div>
         {(!recordsRes && !error)
           ? (
             <div className='flex-1'><Loading type='app' /></div>
@@ -136,12 +136,12 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
             ? (
               <>
                 <div className='grow overflow-y-auto'>
-                  <table className={'w-full border-collapse border-0 text-[13px] leading-4 text-text-secondary '}>
-                    <thead className='sticky top-0 h-7 leading-7  text-xs text-text-tertiary font-medium uppercase'>
+                  <table className={'text-text-secondary w-full border-collapse border-0 text-[13px] leading-4 '}>
+                    <thead className='text-text-tertiary sticky top-0 h-7  text-xs font-medium uppercase leading-7'>
                       <tr>
-                        <td className='pl-3 w-[128px] rounded-l-lg bg-background-section-burn'>{t('datasetHitTesting.table.header.source')}</td>
+                        <td className='bg-background-section-burn w-[128px] rounded-l-lg pl-3'>{t('datasetHitTesting.table.header.source')}</td>
                         <td className='bg-background-section-burn'>{t('datasetHitTesting.table.header.text')}</td>
-                        <td className='pl-2 w-48 rounded-r-lg bg-background-section-burn'>{t('datasetHitTesting.table.header.time')}</td>
+                        <td className='bg-background-section-burn w-48 rounded-r-lg pl-2'>{t('datasetHitTesting.table.header.time')}</td>
                       </tr>
                     </thead>
                     <tbody>
@@ -149,17 +149,17 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
                         const SourceIcon = record.source === 'app' ? RiApps2Line : RiFocus2Line
                         return <tr
                           key={record.id}
-                          className='group border-b border-divider-subtle h-10 hover:bg-background-default-hover cursor-pointer'
+                          className='border-divider-subtle hover:bg-background-default-hover group h-10 cursor-pointer border-b'
                           onClick={() => setText(record.content)}
                         >
-                          <td className='pl-3 w-[128px]'>
+                          <td className='w-[128px] pl-3'>
                             <div className='flex items-center'>
-                              <SourceIcon className='mr-1 size-4 text-text-tertiary' />
+                              <SourceIcon className='text-text-tertiary mr-1 size-4' />
                               <span className='capitalize'>{record.source.replace('_', ' ').replace('hit testing', 'retrieval test')}</span>
                             </div>
                           </td>
                           <td className='max-w-xs py-2'>{record.content}</td>
-                          <td className='pl-2 w-36'>
+                          <td className='w-36 pl-2'>
                             {formatTime(record.created_at, t('datasetHitTesting.dateTimeFormat') as string)}
                           </td>
                         </tr>
@@ -180,7 +180,7 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
         <div className='flex flex-col pt-3'>
           {/* {renderHitResults(generalResultData)} */}
           {submitLoading
-            ? <div className='h-full flex flex-col py-3 px-4 rounded-t-2xl bg-background-body'>
+            ? <div className='bg-background-body flex h-full flex-col rounded-t-2xl px-4 py-3'>
               <CardSkelton />
             </div>
             : (
diff --git a/web/app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx b/web/app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx
index fd99c698bb..2ec2aa1d3f 100644
--- a/web/app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx
+++ b/web/app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx
@@ -42,16 +42,16 @@ const ModifyExternalRetrievalModal: React.FC<ModifyExternalRetrievalModalProps>
   }
 
   return (
-    <div className='absolute z-10 top-[36px] right-[14px] flex w-[320px] flex-col items-start rounded-2xl border-[0.5px]
-      border-components-panel-border bg-components-panel-bg shadows-shadow-2xl'
+    <div className='border-components-panel-border bg-components-panel-bg shadows-shadow-2xl absolute right-[14px] top-[36px] z-10 flex w-[320px] flex-col
+      items-start rounded-2xl border-[0.5px]'
     >
-      <div className='flex p-4 pb-2 items-center justify-between self-stretch'>
-        <div className='text-text-primary system-xl-semibold flex-grow'>{t('datasetHitTesting.settingTitle')}</div>
+      <div className='flex items-center justify-between self-stretch p-4 pb-2'>
+        <div className='text-text-primary system-xl-semibold grow'>{t('datasetHitTesting.settingTitle')}</div>
         <ActionButton className='ml-auto' onClick={onClose}>
-          <RiCloseLine className='w-4 h-4 flex-shrink-0' />
+          <RiCloseLine className='h-4 w-4 shrink-0' />
         </ActionButton>
       </div>
-      <div className='flex p-4 pt-2 flex-col justify-center items-start gap-4 self-stretch'>
+      <div className='flex flex-col items-start justify-center gap-4 self-stretch p-4 pt-2'>
         <RetrievalSettings
           topK={topK}
           scoreThreshold={scoreThreshold}
@@ -60,9 +60,9 @@ const ModifyExternalRetrievalModal: React.FC<ModifyExternalRetrievalModalProps>
           isInHitTesting={true}
         />
       </div>
-      <div className='flex p-4 pt-2 justify-end items-end gap-1 w-full'>
-        <Button className='flex-shrink-0 min-w-[72px]' onClick={onClose}>{t('common.operation.cancel')}</Button>
-        <Button variant='primary' className='flex-shrink-0 min-w-[72px]' onClick={handleSave}>{t('common.operation.save')}</Button>
+      <div className='flex w-full items-end justify-end gap-1 p-4 pt-2'>
+        <Button className='min-w-[72px] shrink-0' onClick={onClose}>{t('common.operation.cancel')}</Button>
+        <Button variant='primary' className='min-w-[72px] shrink-0' onClick={handleSave}>{t('common.operation.save')}</Button>
       </div>
     </div>
   )
diff --git a/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx b/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
index 2d469231c2..0c3843f243 100644
--- a/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
+++ b/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
@@ -59,16 +59,16 @@ const ModifyRetrievalModal: FC<Props> = ({
 
   return (
     <div
-      className='w-full flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl'
+      className='flex w-full flex-col rounded-xl border-[0.5px] border-gray-200 bg-white shadow-xl'
       style={{
         height: 'calc(100vh - 72px)',
       }}
       ref={ref}
     >
-      <div className='shrink-0 flex justify-between items-center pl-6 pr-5 h-14 border-b border-b-gray-100'>
+      <div className='flex h-14 shrink-0 items-center justify-between border-b border-b-gray-100 pl-6 pr-5'>
         <div className='text-base font-semibold text-gray-900'>
           <div>{t('datasetSettings.form.retrievalSetting.title')}</div>
-          <div className='leading-[18px] text-xs font-normal text-gray-500'>
+          <div className='text-xs font-normal leading-[18px] text-gray-500'>
             <a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-text-accent'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
             {t('datasetSettings.form.retrievalSetting.description')}
           </div>
@@ -76,14 +76,14 @@ const ModifyRetrievalModal: FC<Props> = ({
         <div className='flex items-center'>
           <div
             onClick={onHide}
-            className='flex justify-center items-center w-6 h-6 cursor-pointer'
+            className='flex h-6 w-6 cursor-pointer items-center justify-center'
           >
-            <RiCloseLine className='w-4 h-4 text-gray-500' />
+            <RiCloseLine className='h-4 w-4 text-gray-500' />
           </div>
         </div>
       </div>
 
-      <div className='p-6 border-b' style={{
+      <div className='border-b p-6' style={{
         borderBottom: 'rgba(0, 0, 0, 0.05)',
       }}>
         {indexMethod === 'high_quality'
@@ -101,13 +101,13 @@ const ModifyRetrievalModal: FC<Props> = ({
           )}
       </div>
       <div
-        className='flex justify-end pt-6 px-6 border-t'
+        className='flex justify-end border-t px-6 pt-6'
         style={{
           borderColor: 'rgba(0, 0, 0, 0.05)',
         }}
       >
-        <Button className='mr-2 flex-shrink-0' onClick={onHide}>{t('common.operation.cancel')}</Button>
-        <Button variant='primary' className='flex-shrink-0' onClick={handleSave} >{t('common.operation.save')}</Button>
+        <Button className='mr-2 shrink-0' onClick={onHide}>{t('common.operation.cancel')}</Button>
+        <Button variant='primary' className='shrink-0' onClick={handleSave} >{t('common.operation.save')}</Button>
       </div>
     </div>
   )
diff --git a/web/app/components/datasets/hit-testing/textarea.tsx b/web/app/components/datasets/hit-testing/textarea.tsx
index c497335c70..c540cf0d8a 100644
--- a/web/app/components/datasets/hit-testing/textarea.tsx
+++ b/web/app/components/datasets/hit-testing/textarea.tsx
@@ -104,13 +104,13 @@ const TextAreaWithButton = ({
   }
 
   const retrievalMethod = isEconomy ? RETRIEVE_METHOD.invertedIndex : retrievalConfig.search_method
-  const icon = <Image className='size-3.5 text-util-colors-purple-purple-600' src={getIcon(retrievalMethod)} alt='' />
+  const icon = <Image className='text-util-colors-purple-purple-600 size-3.5' src={getIcon(retrievalMethod)} alt='' />
   return (
     <>
       <div className={cn('relative rounded-xl', promptS.gradientBorder)}>
-        <div className='relative pt-1.5 rounded-tl-xl rounded-tr-xl bg-background-section-burn'>
-          <div className="pl-4 pr-1.5 pb-1 flex justify-between h-8 items-center">
-            <span className="text-text-secondary font-semibold text-[13px] leading-4 uppercase">
+        <div className='bg-background-section-burn relative rounded-tl-xl rounded-tr-xl pt-1.5'>
+          <div className="flex h-8 items-center justify-between pb-1 pl-4 pr-1.5">
+            <span className="text-text-secondary text-[13px] font-semibold uppercase leading-4">
               {t('datasetHitTesting.input.title')}
             </span>
             {isExternal
@@ -119,18 +119,18 @@ const TextAreaWithButton = ({
                 size='small'
                 onClick={() => setIsSettingsOpen(!isSettingsOpen)}
               >
-                <RiEqualizer2Line className='text-components-button-secondary-text w-3.5 h-3.5' />
-                <div className='flex px-[3px] justify-center items-center gap-1'>
+                <RiEqualizer2Line className='text-components-button-secondary-text h-3.5 w-3.5' />
+                <div className='flex items-center justify-center gap-1 px-[3px]'>
                   <span className='text-components-button-secondary-text system-xs-medium'>{t('datasetHitTesting.settingTitle')}</span>
                 </div>
               </Button>
               : <div
                 onClick={onClickRetrievalMethod}
-                className='flex px-1.5 h-7 items-center bg-components-button-secondary-bg hover:bg-components-button-secondary-bg-hover rounded-lg border-[0.5px] border-components-button-secondary-bg shadow-xs backdrop-blur-[5px] cursor-pointer space-x-0.5'
+                className='bg-components-button-secondary-bg hover:bg-components-button-secondary-bg-hover border-components-button-secondary-bg shadow-xs flex h-7 cursor-pointer items-center space-x-0.5 rounded-lg border-[0.5px] px-1.5 backdrop-blur-[5px]'
               >
                 {icon}
                 <div className='text-text-secondary text-xs font-medium uppercase'>{t(`dataset.retrieval.${retrievalMethod}.title`)}</div>
-                <RiEqualizer2Line className='size-4 text-components-menu-item-text'></RiEqualizer2Line>
+                <RiEqualizer2Line className='text-components-menu-item-text size-4'></RiEqualizer2Line>
               </div>
             }
           </div>
@@ -145,33 +145,33 @@ const TextAreaWithButton = ({
               />
             )
           }
-          <div className='h-2 rounded-tl-xl rounded-tr-xl bg-background-default'></div>
+          <div className='bg-background-default h-2 rounded-tl-xl rounded-tr-xl'></div>
         </div>
-        <div className='px-4 pb-11 bg-background-default rounded-b-xl'>
+        <div className='bg-background-default rounded-b-xl px-4 pb-11'>
           <textarea
-            className='h-[220px] border-none resize-none font-normal caret-primary-600 text-text-secondary text-sm w-full focus-visible:outline-none  placeholder:text-gray-300 placeholder:text-sm placeholder:font-normal'
+            className='caret-primary-600 text-text-secondary h-[220px] w-full resize-none border-none text-sm font-normal placeholder:text-sm  placeholder:font-normal placeholder:text-gray-300 focus-visible:outline-none'
             value={text}
             onChange={handleTextChange}
             placeholder={t('datasetHitTesting.input.placeholder') as string}
           />
-          <div className="absolute inset-x-0 bottom-0 flex items-center justify-between mx-4 mt-2 mb-2">
+          <div className="absolute inset-x-0 bottom-0 mx-4 mb-2 mt-2 flex items-center justify-between">
             {text?.length > 200
               ? (
                 <Tooltip
                   popupContent={t('datasetHitTesting.input.countWarning')}
                 >
                   <div
-                    className={cn('flex items-center h-5 px-1 rounded-md bg-background-section-burn text-red-600 text-xs font-medium', !text?.length && 'opacity-50')}
+                    className={cn('bg-background-section-burn flex h-5 items-center rounded-md px-1 text-xs font-medium text-red-600', !text?.length && 'opacity-50')}
                   >
                     {text?.length}
-                    <span className="text-red-300 mx-0.5">/</span>
+                    <span className="mx-0.5 text-red-300">/</span>
                     200
                   </div>
                 </Tooltip>
               )
               : (
                 <div
-                  className={cn('flex items-center h-5 px-1 rounded-md bg-background-section-burn text-text-tertiary text-xs font-medium', !text?.length && 'opacity-50')}
+                  className={cn('bg-background-section-burn text-text-tertiary flex h-5 items-center rounded-md px-1 text-xs font-medium', !text?.length && 'opacity-50')}
                 >
                   {text?.length}
                   <span className="text-divider-deep mx-0.5">/</span>
diff --git a/web/app/components/datasets/preview/container.tsx b/web/app/components/datasets/preview/container.tsx
index e59fc8dbac..664ab37f7c 100644
--- a/web/app/components/datasets/preview/container.tsx
+++ b/web/app/components/datasets/preview/container.tsx
@@ -17,7 +17,7 @@ export const PreviewContainer: FC<PreviewContainerProps> = forwardRef((props, re
         'flex flex-col w-full h-full overflow-y-auto rounded-l-xl border-t-[0.5px] border-l-[0.5px] border-components-panel-border bg-background-default-lighter shadow shadow-shadow-shadow-5',
       )}
     >
-      <header className='pl-5 pt-4 pr-4 pb-3 border-b border-divider-subtle'>
+      <header className='border-divider-subtle border-b pb-3 pl-5 pr-4 pt-4'>
         {header}
       </header>
       <main className={classNames('py-5 px-6 w-full h-full', mainClassName)}>
diff --git a/web/app/components/datasets/preview/header.tsx b/web/app/components/datasets/preview/header.tsx
index ccb7cf8e2f..89004d60e5 100644
--- a/web/app/components/datasets/preview/header.tsx
+++ b/web/app/components/datasets/preview/header.tsx
@@ -14,7 +14,7 @@ export const PreviewHeader: FC<PreviewHeaderProps> = (props) => {
     )}
   >
     <div
-      className='text-text-accent system-2xs-semibold-uppercase uppercase px-1 mb-1'
+      className='text-text-accent system-2xs-semibold-uppercase mb-1 px-1 uppercase'
     >
       {title}
     </div>
diff --git a/web/app/components/datasets/rename-modal/index.tsx b/web/app/components/datasets/rename-modal/index.tsx
index 22c7f8e988..4833ec0032 100644
--- a/web/app/components/datasets/rename-modal/index.tsx
+++ b/web/app/components/datasets/rename-modal/index.tsx
@@ -64,16 +64,16 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
 
   return (
     <Modal
-      className='px-8 py-6 max-w-[520px] w-[520px] rounded-xl'
+      className='w-[520px] max-w-[520px] rounded-xl px-8 py-6'
       isShow={show}
       onClose={() => { }}
     >
       <div className='relative pb-2 text-xl font-medium leading-[30px] text-gray-900'>{t('datasetSettings.title')}</div>
-      <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
-        <RiCloseLine className='w-4 h-4 text-gray-500' />
+      <div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onClose}>
+        <RiCloseLine className='h-4 w-4 text-gray-500' />
       </div>
       <div>
-        <div className={cn('flex justify-between py-4 flex-wrap items-center')}>
+        <div className={cn('flex flex-wrap items-center justify-between py-4')}>
           <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-gray-900'>
             {t('datasetSettings.form.name')}
           </div>
@@ -84,7 +84,7 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
             placeholder={t('datasetSettings.form.namePlaceholder') || ''}
           />
         </div>
-        <div className={cn('flex justify-between py-4 flex-wrap items-center')}>
+        <div className={cn('flex flex-wrap items-center justify-between py-4')}>
           <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-gray-900'>
             {t('datasetSettings.form.desc')}
           </div>
@@ -98,7 +98,7 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
           </div>
         </div>
       </div>
-      <div className='pt-6 flex justify-end'>
+      <div className='flex justify-end pt-6'>
         <Button className='mr-2' onClick={onClose}>{t('common.operation.cancel')}</Button>
         <Button disabled={loading} variant="primary" onClick={onConfirm}>{t('common.operation.save')}</Button>
       </div>
diff --git a/web/app/components/datasets/settings/form/index.tsx b/web/app/components/datasets/settings/form/index.tsx
index 7d80112cc1..78714ffb06 100644
--- a/web/app/components/datasets/settings/form/index.tsx
+++ b/web/app/components/datasets/settings/form/index.tsx
@@ -169,7 +169,7 @@ const Form = () => {
   }
 
   return (
-    <div className='w-full sm:w-[880px] px-14 py-8 flex flex-col gap-y-4'>
+    <div className='flex w-full flex-col gap-y-4 px-14 py-8 sm:w-[880px]'>
       <div className={rowClass}>
         <div className={labelClass}>
           <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.name')}</div>
@@ -214,7 +214,7 @@ const Form = () => {
       </div>
       {currentDataset && currentDataset.indexing_technique && (
         <>
-          <div className='w-full h-0 border-b border-divider-subtle my-1' />
+          <div className='border-divider-subtle my-1 h-0 w-full border-b' />
           <div className={rowClass}>
             <div className={labelClass}>
               <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.indexMethod')}</div>
@@ -227,10 +227,10 @@ const Form = () => {
                 docForm={currentDataset.doc_form}
                 currentValue={currentDataset.indexing_technique}
               />
-              {currentDataset.indexing_technique === IndexingType.ECONOMICAL && indexMethod === IndexingType.QUALIFIED && <div className='mt-2 h-10 p-2 flex items-center gap-x-0.5 rounded-xl border-[0.5px] border-components-panel-border overflow-hidden bg-components-panel-bg-blur backdrop-blur-[5px] shadow-xs'>
-                <div className='absolute top-0 left-0 right-0 bottom-0 bg-[linear-gradient(92deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0.00)_100%)] opacity-40'></div>
+              {currentDataset.indexing_technique === IndexingType.ECONOMICAL && indexMethod === IndexingType.QUALIFIED && <div className='border-components-panel-border bg-components-panel-bg-blur shadow-xs mt-2 flex h-10 items-center gap-x-0.5 overflow-hidden rounded-xl border-[0.5px] p-2 backdrop-blur-[5px]'>
+                <div className='absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(92deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0.00)_100%)] opacity-40'></div>
                 <div className='p-1'>
-                  <AlertTriangle className='size-4 text-text-warning-secondary' />
+                  <AlertTriangle className='text-text-warning-secondary size-4' />
                 </div>
                 <span className='system-xs-medium'>{t('datasetSettings.form.upgradeHighQualityTip')}</span>
               </div>}
@@ -260,7 +260,7 @@ const Form = () => {
       {/* Retrieval Method Config */}
       {currentDataset?.provider === 'external'
         ? <>
-          <div className='w-full h-0 border-b border-divider-subtle my-1' />
+          <div className='border-divider-subtle my-1 h-0 w-full border-b' />
           <div className={rowClass}>
             <div className={labelClass}>
               <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.retrievalSetting.title')}</div>
@@ -273,15 +273,15 @@ const Form = () => {
               isInRetrievalSetting={true}
             />
           </div>
-          <div className='w-full h-0 border-b border-divider-subtle my-1' />
+          <div className='border-divider-subtle my-1 h-0 w-full border-b' />
           <div className={rowClass}>
             <div className={labelClass}>
               <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.externalKnowledgeAPI')}</div>
             </div>
             <div className='w-full'>
-              <div className='flex h-full px-3 py-2 items-center gap-1 rounded-lg bg-components-input-bg-normal'>
-                <ApiConnectionMod className='w-4 h-4 text-text-secondary' />
-                <div className='overflow-hidden text-text-secondary text-ellipsis system-sm-medium'>
+              <div className='bg-components-input-bg-normal flex h-full items-center gap-1 rounded-lg px-3 py-2'>
+                <ApiConnectionMod className='text-text-secondary h-4 w-4' />
+                <div className='text-text-secondary system-sm-medium overflow-hidden text-ellipsis'>
                   {currentDataset?.external_knowledge_info.external_knowledge_api_name}
                 </div>
                 <div className='text-text-tertiary system-xs-regular'>·</div>
@@ -294,7 +294,7 @@ const Form = () => {
               <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.externalKnowledgeID')}</div>
             </div>
             <div className='w-full'>
-              <div className='flex h-full px-3 py-2 items-center gap-1 rounded-lg bg-components-input-bg-normal'>
+              <div className='bg-components-input-bg-normal flex h-full items-center gap-1 rounded-lg px-3 py-2'>
                 <div className='text-text-tertiary system-xs-regular'>{currentDataset?.external_knowledge_info.external_knowledge_id}</div>
               </div>
             </div>
@@ -302,7 +302,7 @@ const Form = () => {
         </>
         : indexMethod
           ? <>
-            <div className='w-full h-0 border-b border-divider-subtle my-1' />
+            <div className='border-divider-subtle my-1 h-0 w-full border-b' />
             <div className={rowClass}>
               <div className={labelClass}>
                 <div>
@@ -332,7 +332,7 @@ const Form = () => {
           </>
           : null
       }
-      <div className='w-full h-0 border-b border-divider-subtle my-1' />
+      <div className='border-divider-subtle my-1 h-0 w-full border-b' />
       <div className={rowClass}>
         <div className={labelClass} />
         <div className='grow'>
diff --git a/web/app/components/datasets/settings/index-method-radio/index.tsx b/web/app/components/datasets/settings/index-method-radio/index.tsx
index 05650e4876..bb1d102103 100644
--- a/web/app/components/datasets/settings/index-method-radio/index.tsx
+++ b/web/app/components/datasets/settings/index-method-radio/index.tsx
@@ -36,7 +36,7 @@ const IndexMethodRadio = ({
       key: 'high_quality',
       text: <div className='flex items-center'>
         {t('datasetCreation.stepTwo.qualified')}
-        <Badge uppercase className='ml-auto border-text-accent-secondary text-text-accent-secondary'>
+        <Badge uppercase className='border-text-accent-secondary text-text-accent-secondary ml-auto'>
           {t('datasetCreation.stepTwo.recommend')}
         </Badge>
       </div>,
@@ -91,7 +91,7 @@ const IndexMethodRadio = ({
                 </OptionCard>
               </PortalToFollowElemTrigger>
               <PortalToFollowElemContent style={{ zIndex: 60 }}>
-                <div className='p-3 bg-components-tooltip-bg border-components-panel-border text-xs font-medium text-text-secondary rounded-lg shadow-lg'>
+                <div className='bg-components-tooltip-bg border-components-panel-border text-text-secondary rounded-lg p-3 text-xs font-medium shadow-lg'>
                   {t('datasetSettings.form.indexMethodChangeToEconomyDisabledTip')}
                 </div>
               </PortalToFollowElemContent>
diff --git a/web/app/components/datasets/settings/permission-selector/index.tsx b/web/app/components/datasets/settings/permission-selector/index.tsx
index 883373ef11..9523cb1ca2 100644
--- a/web/app/components/datasets/settings/permission-selector/index.tsx
+++ b/web/app/components/datasets/settings/permission-selector/index.tsx
@@ -77,72 +77,72 @@ const PermissionSelector = ({ disabled, permission, value, memberList, onChange,
           className='block'
         >
           {isOnlyMe && (
-            <div className={cn('flex items-center px-3 py-[6px] rounded-lg bg-gray-100 cursor-pointer hover:bg-gray-200', open && 'bg-gray-200', disabled && 'hover:!bg-gray-100 !cursor-default')}>
-              <Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='shrink-0 mr-2' size={24} />
-              <div className='grow mr-2 text-gray-900 text-sm leading-5'>{t('datasetSettings.form.permissionsOnlyMe')}</div>
-              {!disabled && <RiArrowDownSLine className='shrink-0 w-4 h-4 text-gray-700' />}
+            <div className={cn('flex cursor-pointer items-center rounded-lg bg-gray-100 px-3 py-[6px] hover:bg-gray-200', open && 'bg-gray-200', disabled && '!cursor-default hover:!bg-gray-100')}>
+              <Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='mr-2 shrink-0' size={24} />
+              <div className='mr-2 grow text-sm leading-5 text-gray-900'>{t('datasetSettings.form.permissionsOnlyMe')}</div>
+              {!disabled && <RiArrowDownSLine className='h-4 w-4 shrink-0 text-gray-700' />}
             </div>
           )}
           {isAllTeamMembers && (
-            <div className={cn('flex items-center px-3 py-[6px] rounded-lg bg-gray-100 cursor-pointer hover:bg-gray-200', open && 'bg-gray-200')}>
-              <div className='mr-2 flex items-center justify-center w-6 h-6 rounded-lg bg-[#EEF4FF]'>
-                <Users01 className='w-3.5 h-3.5 text-[#444CE7]' />
+            <div className={cn('flex cursor-pointer items-center rounded-lg bg-gray-100 px-3 py-[6px] hover:bg-gray-200', open && 'bg-gray-200')}>
+              <div className='mr-2 flex h-6 w-6 items-center justify-center rounded-lg bg-[#EEF4FF]'>
+                <Users01 className='h-3.5 w-3.5 text-[#444CE7]' />
               </div>
-              <div className='grow mr-2 text-text-primary text-sm leading-5'>{t('datasetSettings.form.permissionsAllMember')}</div>
-              {!disabled && <RiArrowDownSLine className='shrink-0 w-4 h-4 text-text-secondary' />}
+              <div className='text-text-primary mr-2 grow text-sm leading-5'>{t('datasetSettings.form.permissionsAllMember')}</div>
+              {!disabled && <RiArrowDownSLine className='text-text-secondary h-4 w-4 shrink-0' />}
             </div>
           )}
           {isPartialMembers && (
-            <div className={cn('flex items-center px-3 py-[6px] rounded-lg bg-gray-100 cursor-pointer hover:bg-gray-200', open && 'bg-gray-200')}>
-              <div className='mr-2 flex items-center justify-center w-6 h-6 rounded-lg bg-[#EEF4FF]'>
-                <Users01 className='w-3.5 h-3.5 text-[#444CE7]' />
+            <div className={cn('flex cursor-pointer items-center rounded-lg bg-gray-100 px-3 py-[6px] hover:bg-gray-200', open && 'bg-gray-200')}>
+              <div className='mr-2 flex h-6 w-6 items-center justify-center rounded-lg bg-[#EEF4FF]'>
+                <Users01 className='h-3.5 w-3.5 text-[#444CE7]' />
               </div>
-              <div title={selectedMembers} className='grow mr-2 text-text-primary text-sm leading-5 truncate'>{selectedMembers}</div>
-              {!disabled && <RiArrowDownSLine className='shrink-0 w-4 h-4 text-text-secondary' />}
+              <div title={selectedMembers} className='text-text-primary mr-2 grow truncate text-sm leading-5'>{selectedMembers}</div>
+              {!disabled && <RiArrowDownSLine className='text-text-secondary h-4 w-4 shrink-0' />}
             </div>
           )}
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1002]'>
-          <div className='relative w-[480px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur backdrop-blur-sm shadow-lg'>
+          <div className='border-components-panel-border bg-components-panel-bg-blur relative w-[480px] rounded-lg border-[0.5px] shadow-lg backdrop-blur-sm'>
             <div className='p-1'>
-              <div className='pl-3 pr-2 py-1 rounded-lg hover:bg-gray-50 cursor-pointer' onClick={() => {
+              <div className='cursor-pointer rounded-lg py-1 pl-3 pr-2 hover:bg-gray-50' onClick={() => {
                 onChange(DatasetPermission.onlyMe)
                 setOpen(false)
               }}>
                 <div className='flex items-center gap-2'>
-                  <Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='shrink-0 mr-2' size={24} />
-                  <div className='grow mr-2 text-gray-900 text-sm leading-5'>{t('datasetSettings.form.permissionsOnlyMe')}</div>
-                  {isOnlyMe && <Check className='w-4 h-4 text-primary-600' />}
+                  <Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='mr-2 shrink-0' size={24} />
+                  <div className='mr-2 grow text-sm leading-5 text-gray-900'>{t('datasetSettings.form.permissionsOnlyMe')}</div>
+                  {isOnlyMe && <Check className='text-primary-600 h-4 w-4' />}
                 </div>
               </div>
-              <div className='pl-3 pr-2 py-1 rounded-lg hover:bg-gray-50 cursor-pointer' onClick={() => {
+              <div className='cursor-pointer rounded-lg py-1 pl-3 pr-2 hover:bg-gray-50' onClick={() => {
                 onChange(DatasetPermission.allTeamMembers)
                 setOpen(false)
               }}>
                 <div className='flex items-center gap-2'>
-                  <div className='mr-2 flex items-center justify-center w-6 h-6 rounded-lg bg-[#EEF4FF]'>
-                    <Users01 className='w-3.5 h-3.5 text-[#444CE7]' />
+                  <div className='mr-2 flex h-6 w-6 items-center justify-center rounded-lg bg-[#EEF4FF]'>
+                    <Users01 className='h-3.5 w-3.5 text-[#444CE7]' />
                   </div>
-                  <div className='grow mr-2 text-gray-900 text-sm leading-5'>{t('datasetSettings.form.permissionsAllMember')}</div>
-                  {isAllTeamMembers && <Check className='w-4 h-4 text-primary-600' />}
+                  <div className='mr-2 grow text-sm leading-5 text-gray-900'>{t('datasetSettings.form.permissionsAllMember')}</div>
+                  {isAllTeamMembers && <Check className='text-primary-600 h-4 w-4' />}
                 </div>
               </div>
-              <div className='pl-3 pr-2 py-1 rounded-lg hover:bg-gray-50 cursor-pointer' onClick={() => {
+              <div className='cursor-pointer rounded-lg py-1 pl-3 pr-2 hover:bg-gray-50' onClick={() => {
                 onChange(DatasetPermission.partialMembers)
                 onMemberSelect([userProfile.id])
               }}>
                 <div className='flex items-center gap-2'>
-                  <div className={cn('mr-2 flex items-center justify-center w-6 h-6 rounded-lg bg-[#FFF6ED]', isPartialMembers && '!bg-[#EEF4FF]')}>
-                    <UsersPlus className={cn('w-3.5 h-3.5 text-[#FB6514]', isPartialMembers && '!text-[#444CE7]')} />
+                  <div className={cn('mr-2 flex h-6 w-6 items-center justify-center rounded-lg bg-[#FFF6ED]', isPartialMembers && '!bg-[#EEF4FF]')}>
+                    <UsersPlus className={cn('h-3.5 w-3.5 text-[#FB6514]', isPartialMembers && '!text-[#444CE7]')} />
                   </div>
-                  <div className='grow mr-2 text-gray-900 text-sm leading-5'>{t('datasetSettings.form.permissionsInvitedMembers')}</div>
-                  {isPartialMembers && <Check className='w-4 h-4 text-primary-600' />}
+                  <div className='mr-2 grow text-sm leading-5 text-gray-900'>{t('datasetSettings.form.permissionsInvitedMembers')}</div>
+                  {isPartialMembers && <Check className='text-primary-600 h-4 w-4' />}
                 </div>
               </div>
             </div>
             {isPartialMembers && (
-              <div className='max-h-[360px] border-t-[1px] border-gray-100 p-1 overflow-y-auto'>
-                <div className='sticky left-0 top-0 p-2 pb-1 bg-white'>
+              <div className='max-h-[360px] overflow-y-auto border-t-[1px] border-gray-100 p-1'>
+                <div className='sticky left-0 top-0 bg-white p-2 pb-1'>
                   <Input
                     showLeftIcon
                     showClearIcon
@@ -152,26 +152,26 @@ const PermissionSelector = ({ disabled, permission, value, memberList, onChange,
                   />
                 </div>
                 {showMe && (
-                  <div className='pl-3 pr-[10px] py-1 flex gap-2 items-center rounded-lg'>
+                  <div className='flex items-center gap-2 rounded-lg py-1 pl-3 pr-[10px]'>
                     <Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='shrink-0' size={24} />
                     <div className='grow'>
-                      <div className='text-[13px] text-text-secondary font-medium leading-[18px] truncate'>
+                      <div className='text-text-secondary truncate text-[13px] font-medium leading-[18px]'>
                         {userProfile.name}
-                        <span className='text-xs text-text-tertiary font-normal'>{t('datasetSettings.form.me')}</span>
+                        <span className='text-text-tertiary text-xs font-normal'>{t('datasetSettings.form.me')}</span>
                       </div>
-                      <div className='text-xs text-text-tertiary leading-[18px] truncate'>{userProfile.email}</div>
+                      <div className='text-text-tertiary truncate text-xs leading-[18px]'>{userProfile.email}</div>
                     </div>
-                    <Check className='shrink-0 w-4 h-4 text-text-accent opacity-30' />
+                    <Check className='text-text-accent h-4 w-4 shrink-0 opacity-30' />
                   </div>
                 )}
                 {filteredMemberList.map(member => (
-                  <div key={member.id} className='pl-3 pr-[10px] py-1 flex gap-2 items-center rounded-lg hover:bg-state-base-hover cursor-pointer' onClick={() => selectMember(member)}>
+                  <div key={member.id} className='hover:bg-state-base-hover flex cursor-pointer items-center gap-2 rounded-lg py-1 pl-3 pr-[10px]' onClick={() => selectMember(member)}>
                     <Avatar avatar={userProfile.avatar_url} name={member.name} className='shrink-0' size={24} />
                     <div className='grow'>
-                      <div className='text-[13px] text-text-secondary font-medium leading-[18px] truncate'>{member.name}</div>
-                      <div className='text-xs text-text-tertiary leading-[18px] truncate'>{member.email}</div>
+                      <div className='text-text-secondary truncate text-[13px] font-medium leading-[18px]'>{member.name}</div>
+                      <div className='text-text-tertiary truncate text-xs leading-[18px]'>{member.email}</div>
                     </div>
-                    {value.includes(member.id) && <Check className='shrink-0 w-4 h-4 text-text-accent' />}
+                    {value.includes(member.id) && <Check className='text-text-accent h-4 w-4 shrink-0' />}
                   </div>
                 ))}
               </div>
diff --git a/web/app/components/develop/code.tsx b/web/app/components/develop/code.tsx
index 27fc6bc878..10dbc6ad6d 100644
--- a/web/app/components/develop/code.tsx
+++ b/web/app/components/develop/code.tsx
@@ -84,7 +84,7 @@ function CopyButton({ code }: { code: string }) {
           copied && '-translate-y-1.5 opacity-0',
         )}
       >
-        <ClipboardIcon className="w-5 h-5 transition-colors fill-zinc-500/20 stroke-zinc-500 group-hover/button:stroke-zinc-400" />
+        <ClipboardIcon className="h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
         Copy
       </span>
       <span
@@ -105,9 +105,9 @@ function CodePanelHeader({ tag, label }: { tag: string; label: string }) {
     return null
 
   return (
-    <div className="flex h-9 items-center gap-2 border-y border-t-transparent border-b-white/7.5 bg-zinc-900 bg-white/2.5 px-4 dark:border-b-white/5 dark:bg-white/1">
+    <div className="border-b-white/7.5 bg-white/2.5 dark:bg-white/1 flex h-9 items-center gap-2 border-y border-t-transparent bg-zinc-900 px-4 dark:border-b-white/5">
       {tag && (
-        <div className="flex dark">
+        <div className="dark flex">
           <Tag variant="small">{tag}</Tag>
         </div>
       )}
@@ -132,7 +132,7 @@ function CodePanel({ tag, label, code, children, targetCode }: ICodePanelProps)
   const child = Children.only(children)
 
   return (
-    <div className="group dark:bg-white/2.5">
+    <div className="dark:bg-white/2.5 group">
       <CodePanelHeader
         tag={child.props.tag ?? tag}
         label={child.props.label ?? label}
@@ -141,7 +141,7 @@ function CodePanel({ tag, label, code, children, targetCode }: ICodePanelProps)
         {/* <pre className="p-4 overflow-x-auto text-xs text-white">{children}</pre> */}
         {/* <CopyButton code={child.props.code ?? code} /> */}
         {/* <CopyButton code={child.props.children.props.children} /> */}
-        <pre className="p-4 overflow-x-auto text-xs text-white">{targetCode || children}</pre>
+        <pre className="overflow-x-auto p-4 text-xs text-white">{targetCode || children}</pre>
         <CopyButton code={targetCode || child.props.children.props.children} />
       </div>
     </div>
@@ -157,12 +157,12 @@ function CodeGroupHeader({ title, children, selectedIndex }: IChildrenProps) {
   return (
     <div className="flex min-h-[calc(theme(spacing.12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent">
       {title && (
-        <h3 className="pt-3 mr-auto text-xs font-semibold text-white">
+        <h3 className="mr-auto pt-3 text-xs font-semibold text-white">
           {title}
         </h3>
       )}
       {hasTabs && (
-        <TabList className="flex gap-4 -mb-px text-xs font-medium">
+        <TabList className="-mb-px flex gap-4 text-xs font-medium">
           {Children.map(children, (child, childIndex) => (
             <Tab
               className={classNames(
@@ -271,7 +271,7 @@ export function CodeGroup({ children, title, inputs, targetCode, ...props }: ICh
     <CodeGroupContext.Provider value={true}>
       <Container
         {...containerProps}
-        className="my-6 overflow-hidden shadow-md not-prose rounded-2xl bg-zinc-900 dark:ring-1 dark:ring-white/10"
+        className="not-prose my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10"
       >
         <CodeGroupHeader title={title} {...headerProps}>
           {children}
diff --git a/web/app/components/develop/doc.tsx b/web/app/components/develop/doc.tsx
index fd524ef0c1..d02d9c914a 100644
--- a/web/app/components/develop/doc.tsx
+++ b/web/app/components/develop/doc.tsx
@@ -83,8 +83,8 @@ const Doc = ({ appDetail }: IDocProps) => {
       <div className={`fixed right-8 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}>
         {isTocExpanded
           ? (
-            <nav className="toc w-full bg-gray-50 p-4 rounded-lg shadow-md">
-              <div className="flex justify-between items-center mb-4">
+            <nav className="toc w-full rounded-lg bg-gray-50 p-4 shadow-md">
+              <div className="mb-4 flex items-center justify-between">
                 <h3 className="text-lg font-semibold">{t('appApi.develop.toc')}</h3>
                 <button
                   onClick={() => setIsTocExpanded(false)}
@@ -98,7 +98,7 @@ const Doc = ({ appDetail }: IDocProps) => {
                   <li key={index}>
                     <a
                       href={item.href}
-                      className="text-gray-600 hover:text-gray-900 hover:underline transition-colors duration-200"
+                      className="text-gray-600 transition-colors duration-200 hover:text-gray-900 hover:underline"
                       onClick={e => handleTocClick(e, item)}
                     >
                       {item.text}
@@ -111,9 +111,9 @@ const Doc = ({ appDetail }: IDocProps) => {
           : (
             <button
               onClick={() => setIsTocExpanded(true)}
-              className="w-10 h-10 bg-gray-50 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 transition-colors duration-200"
+              className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-50 shadow-md transition-colors duration-200 hover:bg-gray-100"
             >
-              <RiListUnordered className="w-6 h-6" />
+              <RiListUnordered className="h-6 w-6" />
             </button>
           )}
       </div>
diff --git a/web/app/components/develop/index.tsx b/web/app/components/develop/index.tsx
index 2f6a2a2fdf..3e2730d4bd 100644
--- a/web/app/components/develop/index.tsx
+++ b/web/app/components/develop/index.tsx
@@ -24,24 +24,24 @@ const DevelopMain = ({ appId }: IDevelopMainProps) => {
   }
 
   return (
-    <div className='relative flex flex-col h-full overflow-hidden'>
-      <div className='flex items-center justify-between flex-shrink-0 px-6 border-b border-solid py-2 border-b-gray-100'>
+    <div className='relative flex h-full flex-col overflow-hidden'>
+      <div className='flex shrink-0 items-center justify-between border-b border-solid border-b-gray-100 px-6 py-2'>
         <div className='text-lg font-medium text-gray-900'></div>
-        <div className='flex items-center flex-wrap gap-y-1'>
-          <InputCopy className='flex-shrink-0 mr-1 w-52 sm:w-80' value={appDetail.api_base_url}>
-            <div className={`ml-2 border border-gray-200 border-solid flex-shrink-0 px-2 py-0.5 rounded-[6px] text-gray-500 text-[0.625rem] ${s.customApi}`}>
+        <div className='flex flex-wrap items-center gap-y-1'>
+          <InputCopy className='mr-1 w-52 shrink-0 sm:w-80' value={appDetail.api_base_url}>
+            <div className={`ml-2 shrink-0 rounded-[6px] border border-solid border-gray-200 px-2 py-0.5 text-[0.625rem] text-gray-500 ${s.customApi}`}>
               {t('appApi.apiServer')}
             </div>
           </InputCopy>
-          <div className={`flex items-center h-9 px-3 rounded-lg 
-                        text-[13px] font-normal  mr-2 ${appDetail.enable_api ? 'text-green-500 bg-green-50' : 'text-yellow-500 bg-yellow-50'}`}>
+          <div className={`mr-2 flex h-9 items-center rounded-lg 
+                        px-3 text-[13px]  font-normal ${appDetail.enable_api ? 'bg-green-50 text-green-500' : 'bg-yellow-50 text-yellow-500'}`}>
             <div className='mr-1'>{t('appApi.status')}</div>
             <div className='font-semibold'>{appDetail.enable_api ? `${t('appApi.ok')}` : `${t('appApi.disabled')}`}</div>
           </div>
-          <SecretKeyButton className='flex-shrink-0' appId={appId} />
+          <SecretKeyButton className='shrink-0' appId={appId} />
         </div>
       </div>
-      <div className='px-4 sm:px-10 py-4 overflow-auto grow'>
+      <div className='grow overflow-auto px-4 py-4 sm:px-10'>
         <Doc appDetail={appDetail} />
       </div>
     </div>
diff --git a/web/app/components/develop/md.tsx b/web/app/components/develop/md.tsx
index 643e7bdea5..655cd08280 100644
--- a/web/app/components/develop/md.tsx
+++ b/web/app/components/develop/md.tsx
@@ -42,12 +42,12 @@ export const Heading = function H2({
     <>
       <span id={name?.replace(/^#/, '')} className='relative -top-28' />
       <div className="flex items-center gap-x-3" >
-        <span className={`font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ${style}`}>{method}</span>
+        <span className={`rounded-lg px-1.5 font-mono text-[0.625rem] font-semibold leading-6 ring-1 ring-inset ${style}`}>{method}</span>
         {/* <span className="h-0.5 w-0.5 rounded-full bg-zinc-300 dark:bg-zinc-600"></span> */}
         <span className="font-mono text-xs text-zinc-400">{url}</span>
       </div>
       <h2 className='mt-2 scroll-mt-32'>
-        <a href={name} className='no-underline group text-inherit hover:text-inherit'>{title}</a>
+        <a href={name} className='group text-inherit no-underline hover:text-inherit'>{title}</a>
       </h2>
     </>
 
@@ -56,7 +56,7 @@ export const Heading = function H2({
 
 export function Row({ children }: IChildrenProps) {
   return (
-    <div className="grid items-start grid-cols-1 gap-x-16 gap-y-10 xl:!max-w-none xl:grid-cols-2">
+    <div className="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:!max-w-none xl:grid-cols-2">
       {children}
     </div>
   )
@@ -97,8 +97,8 @@ type IProperty = IChildrenProps & {
 }
 export function Property({ name, type, children }: IProperty) {
   return (
-    <li className="px-0 py-4 m-0 first:pt-0 last:pb-0">
-      <dl className="flex flex-wrap items-center m-0 gap-x-3 gap-y-2">
+    <li className="m-0 px-0 py-4 first:pt-0 last:pb-0">
+      <dl className="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
         <dt className="sr-only">Name</dt>
         <dd>
           <code>{name}</code>
@@ -122,8 +122,8 @@ type ISubProperty = IChildrenProps & {
 }
 export function SubProperty({ name, type, children }: ISubProperty) {
   return (
-    <li className="px-0 py-1 m-0 last:pb-0">
-      <dl className="flex flex-wrap items-center m-0 gap-x-3">
+    <li className="m-0 px-0 py-1 last:pb-0">
+      <dl className="m-0 flex flex-wrap items-center gap-x-3">
         <dt className="sr-only">Name</dt>
         <dd>
           <code>{name}</code>
@@ -143,6 +143,6 @@ export function SubProperty({ name, type, children }: ISubProperty) {
 
 export function PropertyInstruction({ children }: PropsWithChildren<{}>) {
   return (
-    <li className="m-0 px-0 py-4 first:pt-0 italic">{children}</li>
+    <li className="m-0 px-0 py-4 italic first:pt-0">{children}</li>
   )
 }
diff --git a/web/app/components/develop/secret-key/input-copy.tsx b/web/app/components/develop/secret-key/input-copy.tsx
index cab0d5fc66..fb39760c78 100644
--- a/web/app/components/develop/secret-key/input-copy.tsx
+++ b/web/app/components/develop/secret-key/input-copy.tsx
@@ -33,11 +33,11 @@ const InputCopy = ({
   }, [isCopied])
 
   return (
-    <div className={`flex rounded-lg bg-components-input-bg-normal hover:bg-state-base-hover py-2 items-center ${className}`}>
-      <div className="flex items-center grow h-5">
+    <div className={`bg-components-input-bg-normal hover:bg-state-base-hover flex items-center rounded-lg py-2 ${className}`}>
+      <div className="flex h-5 grow items-center">
         {children}
-        <div className='grow text-[13px] relative h-full'>
-          <div className='absolute top-0 left-0 w-full pl-2 pr-2 truncate cursor-pointer r-0' onClick={() => {
+        <div className='relative h-full grow text-[13px]'>
+          <div className='r-0 absolute left-0 top-0 w-full cursor-pointer truncate pl-2 pr-2' onClick={() => {
             copy(value)
             setIsCopied(true)
           }}>
@@ -49,13 +49,13 @@ const InputCopy = ({
             </Tooltip>
           </div>
         </div>
-        <div className="shrink-0 h-4 bg-divider-regular border" />
+        <div className="bg-divider-regular h-4 shrink-0 border" />
         <Tooltip
           popupContent={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
           position='bottom'
         >
-          <div className="px-0.5 shrink-0">
-            <div className={`box-border w-[30px] h-[30px] flex items-center justify-center rounded-lg hover:bg-state-base-hover cursor-pointer ${s.copyIcon} ${isCopied ? s.copied : ''}`} onClick={() => {
+          <div className="shrink-0 px-0.5">
+            <div className={`hover:bg-state-base-hover box-border flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-lg ${s.copyIcon} ${isCopied ? s.copied : ''}`} onClick={() => {
               copy(value)
               setIsCopied(true)
             }}>
diff --git a/web/app/components/develop/secret-key/secret-key-button.tsx b/web/app/components/develop/secret-key/secret-key-button.tsx
index e1845330ae..b3a689d911 100644
--- a/web/app/components/develop/secret-key/secret-key-button.tsx
+++ b/web/app/components/develop/secret-key/secret-key-button.tsx
@@ -22,8 +22,8 @@ const SecretKeyButton = ({ className, appId, textCls }: ISecretKeyButtonProps) =
         size='small'
         variant='ghost'
       >
-        <div className={'flex items-center justify-center w-3.5 h-3.5'}>
-          <RiKey2Line className='w-3.5 h-3.5 text-text-tertiary' />
+        <div className={'flex h-3.5 w-3.5 items-center justify-center'}>
+          <RiKey2Line className='text-text-tertiary h-3.5 w-3.5' />
         </div>
         <div className={`text-text-tertiary system-xs-medium px-[3px] ${textCls}`}>{t('appApi.apiKey')}</div>
       </Button>
diff --git a/web/app/components/develop/secret-key/secret-key-generate.tsx b/web/app/components/develop/secret-key/secret-key-generate.tsx
index 07cdf11c48..cbebb8dcd6 100644
--- a/web/app/components/develop/secret-key/secret-key-generate.tsx
+++ b/web/app/components/develop/secret-key/secret-key-generate.tsx
@@ -23,14 +23,14 @@ const SecretKeyGenerateModal = ({
   const { t } = useTranslation()
   return (
     <Modal isShow={isShow} onClose={onClose} title={`${t('appApi.apiKeyModal.apiSecretKey')}`} className={`px-8 ${className}`}>
-      <XMarkIcon className={`w-6 h-6 absolute cursor-pointer text-text-tertiary ${s.close}`} onClick={onClose} />
-      <p className='mt-1 text-[13px] text-text-tertiary font-normal leading-5'>{t('appApi.apiKeyModal.generateTips')}</p>
+      <XMarkIcon className={`text-text-tertiary absolute h-6 w-6 cursor-pointer ${s.close}`} onClick={onClose} />
+      <p className='text-text-tertiary mt-1 text-[13px] font-normal leading-5'>{t('appApi.apiKeyModal.generateTips')}</p>
       <div className='my-4'>
         <InputCopy className='w-full' value={newKey?.token} />
       </div>
-      <div className='flex justify-end my-4'>
+      <div className='my-4 flex justify-end'>
         <Button className={`shrink-0 ${s.w64}`} onClick={onClose}>
-          <span className='text-xs font-medium text-text-secondary'>{t('appApi.actionMsg.ok')}</span>
+          <span className='text-text-secondary text-xs font-medium'>{t('appApi.actionMsg.ok')}</span>
         </Button>
       </div>
 
diff --git a/web/app/components/develop/secret-key/secret-key-modal.tsx b/web/app/components/develop/secret-key/secret-key-modal.tsx
index 54b833edef..73db3adc44 100644
--- a/web/app/components/develop/secret-key/secret-key-modal.tsx
+++ b/web/app/components/develop/secret-key/secret-key-modal.tsx
@@ -97,38 +97,38 @@ const SecretKeyModal = ({
   }
 
   return (
-    <Modal isShow={isShow} onClose={onClose} title={`${t('appApi.apiKeyModal.apiSecretKey')}`} className={`${s.customModal} px-8 flex flex-col`}>
-      <XMarkIcon className={`w-6 h-6 absolute cursor-pointer text-text-tertiary ${s.close}`} onClick={onClose} />
-      <p className='mt-1 text-[13px] text-text-tertiary font-normal leading-5 shrink-0'>{t('appApi.apiKeyModal.apiSecretKeyTips')}</p>
+    <Modal isShow={isShow} onClose={onClose} title={`${t('appApi.apiKeyModal.apiSecretKey')}`} className={`${s.customModal} flex flex-col px-8`}>
+      <XMarkIcon className={`text-text-tertiary absolute h-6 w-6 cursor-pointer ${s.close}`} onClick={onClose} />
+      <p className='text-text-tertiary mt-1 shrink-0 text-[13px] font-normal leading-5'>{t('appApi.apiKeyModal.apiSecretKeyTips')}</p>
       {!apiKeysList && <div className='mt-4'><Loading /></div>}
       {
         !!apiKeysList?.data?.length && (
-          <div className='flex flex-col grow mt-4 overflow-hidden'>
-            <div className='flex items-center shrink-0 text-xs font-semibold text-text-tertiary border-b border-solid h-9'>
-              <div className='shrink-0 w-64 px-3'>{t('appApi.apiKeyModal.secretKey')}</div>
-              <div className='shrink-0 px-3 w-[200px]'>{t('appApi.apiKeyModal.created')}</div>
-              <div className='shrink-0 px-3 w-[200px]'>{t('appApi.apiKeyModal.lastUsed')}</div>
+          <div className='mt-4 flex grow flex-col overflow-hidden'>
+            <div className='text-text-tertiary flex h-9 shrink-0 items-center border-b border-solid text-xs font-semibold'>
+              <div className='w-64 shrink-0 px-3'>{t('appApi.apiKeyModal.secretKey')}</div>
+              <div className='w-[200px] shrink-0 px-3'>{t('appApi.apiKeyModal.created')}</div>
+              <div className='w-[200px] shrink-0 px-3'>{t('appApi.apiKeyModal.lastUsed')}</div>
               <div className='grow px-3'></div>
             </div>
             <div className='grow overflow-auto'>
               {apiKeysList.data.map(api => (
-                <div className='flex items-center text-sm font-normal text-text-secondary border-b border-solid h-9' key={api.id}>
-                  <div className='shrink-0 w-64 px-3 font-mono truncate'>{generateToken(api.token)}</div>
-                  <div className='shrink-0 px-3 truncate w-[200px]'>{formatTime(Number(api.created_at), t('appLog.dateTimeFormat') as string)}</div>
-                  <div className='shrink-0 px-3 truncate w-[200px]'>{api.last_used_at ? formatTime(Number(api.last_used_at), t('appLog.dateTimeFormat') as string) : t('appApi.never')}</div>
+                <div className='text-text-secondary flex h-9 items-center border-b border-solid text-sm font-normal' key={api.id}>
+                  <div className='w-64 shrink-0 truncate px-3 font-mono'>{generateToken(api.token)}</div>
+                  <div className='w-[200px] shrink-0 truncate px-3'>{formatTime(Number(api.created_at), t('appLog.dateTimeFormat') as string)}</div>
+                  <div className='w-[200px] shrink-0 truncate px-3'>{api.last_used_at ? formatTime(Number(api.last_used_at), t('appLog.dateTimeFormat') as string) : t('appApi.never')}</div>
                   <div className='flex grow px-3'>
                     <Tooltip
                       popupContent={copyValue === api.token ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
                       popupClassName='mr-1'
                     >
-                      <div className={`flex items-center justify-center shrink-0 w-6 h-6 mr-1 rounded-lg cursor-pointer hover:bg-state-base-hover ${s.copyIcon} ${copyValue === api.token ? s.copied : ''}`} onClick={() => {
+                      <div className={`hover:bg-state-base-hover mr-1 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg ${s.copyIcon} ${copyValue === api.token ? s.copied : ''}`} onClick={() => {
                         // setIsCopied(true)
                         copy(api.token)
                         setCopyValue(api.token)
                       }}></div>
                     </Tooltip>
                     {isCurrentWorkspaceManager
-                      && <div className={`flex items-center justify-center shrink-0 w-6 h-6 rounded-lg cursor-pointer ${s.trashIcon}`} onClick={() => {
+                      && <div className={`flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg ${s.trashIcon}`} onClick={() => {
                         setDelKeyId(api.id)
                         setShowConfirmDelete(true)
                       }}>
@@ -142,9 +142,9 @@ const SecretKeyModal = ({
         )
       }
       <div className='flex'>
-        <Button className={`flex shrink-0 mt-4 ${s.autoWidth}`} onClick={onCreate} disabled={!currentWorkspace || !isCurrentWorkspaceEditor}>
-          <PlusIcon className='flex shrink-0 w-4 h-4 mr-1' />
-          <div className='text-xs font-medium text-text-secondary'>{t('appApi.apiKeyModal.createNewSecretKey')}</div>
+        <Button className={`mt-4 flex shrink-0 ${s.autoWidth}`} onClick={onCreate} disabled={!currentWorkspace || !isCurrentWorkspaceEditor}>
+          <PlusIcon className='mr-1 flex h-4 w-4 shrink-0' />
+          <div className='text-text-secondary text-xs font-medium'>{t('appApi.apiKeyModal.createNewSecretKey')}</div>
         </Button>
       </div>
       <SecretKeyGenerateModal className='shrink-0' isShow={isVisible} onClose={() => setVisible(false)} newKey={newKey} />
diff --git a/web/app/components/explore/app-card/index.tsx b/web/app/components/explore/app-card/index.tsx
index 36034195ee..4095c49775 100644
--- a/web/app/components/explore/app-card/index.tsx
+++ b/web/app/components/explore/app-card/index.tsx
@@ -23,8 +23,8 @@ const AppCard = ({
   const { t } = useTranslation()
   const { app: appBasicInfo } = app
   return (
-    <div className={cn('relative overflow-hidden pb-2 group col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg')}>
-      <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
+    <div className={cn('group relative col-span-1 flex cursor-pointer flex-col overflow-hidden rounded-lg border-2 border-solid border-transparent bg-white pb-2 shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg')}>
+      <div className='flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]'>
         <div className='relative shrink-0'>
           <AppIcon
             size='large'
@@ -33,29 +33,29 @@ const AppCard = ({
             background={appBasicInfo.icon_background}
             imageUrl={appBasicInfo.icon_url}
           />
-          <span className='absolute bottom-[-3px] right-[-3px] w-4 h-4 p-0.5 bg-white rounded border-[0.5px] border-[rgba(0,0,0,0.02)] shadow-sm'>
+          <span className='absolute bottom-[-3px] right-[-3px] h-4 w-4 rounded border-[0.5px] border-[rgba(0,0,0,0.02)] bg-white p-0.5 shadow-sm'>
             {appBasicInfo.mode === 'advanced-chat' && (
-              <ChatBot className='w-3 h-3 text-[#1570EF]' />
+              <ChatBot className='h-3 w-3 text-[#1570EF]' />
             )}
             {appBasicInfo.mode === 'agent-chat' && (
-              <CuteRobot className='w-3 h-3 text-indigo-600' />
+              <CuteRobot className='h-3 w-3 text-indigo-600' />
             )}
             {appBasicInfo.mode === 'chat' && (
-              <ChatBot className='w-3 h-3 text-[#1570EF]' />
+              <ChatBot className='h-3 w-3 text-[#1570EF]' />
             )}
             {appBasicInfo.mode === 'completion' && (
-              <AiText className='w-3 h-3 text-[#0E9384]' />
+              <AiText className='h-3 w-3 text-[#0E9384]' />
             )}
             {appBasicInfo.mode === 'workflow' && (
-              <Route className='w-3 h-3 text-[#f79009]' />
+              <Route className='h-3 w-3 text-[#f79009]' />
             )}
           </span>
         </div>
-        <div className='grow w-0 py-[1px]'>
-          <div className='flex items-center text-sm leading-5 font-semibold text-text-secondary'>
+        <div className='w-0 grow py-[1px]'>
+          <div className='text-text-secondary flex items-center text-sm font-semibold leading-5'>
             <div className='truncate' title={appBasicInfo.name}>{appBasicInfo.name}</div>
           </div>
-          <div className='flex items-center text-[10px] leading-[18px] text-text-tertiary font-medium'>
+          <div className='text-text-tertiary flex items-center text-[10px] font-medium leading-[18px]'>
             {appBasicInfo.mode === 'advanced-chat' && <div className='truncate'>{t('app.types.advanced').toUpperCase()}</div>}
             {appBasicInfo.mode === 'chat' && <div className='truncate'>{t('app.types.chatbot').toUpperCase()}</div>}
             {appBasicInfo.mode === 'agent-chat' && <div className='truncate'>{t('app.types.agent').toUpperCase()}</div>}
@@ -64,26 +64,26 @@ const AppCard = ({
           </div>
         </div>
       </div>
-      <div className="description-wrapper h-[90px] px-[14px] text-xs leading-normal text-text-tertiary ">
+      <div className="description-wrapper text-text-tertiary h-[90px] px-[14px] text-xs leading-normal ">
         <div className='line-clamp-4 group-hover:line-clamp-2'>
           {app.description}
         </div>
       </div>
       {isExplore && canCreate && (
-        <div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] bg-white group-hover:flex absolute bottom-0 left-0 right-0')}>
-          <div className={cn('flex items-center w-full space-x-2')}>
-            <Button variant='primary' className='grow h-7' onClick={() => onCreate()}>
-              <PlusIcon className='w-4 h-4 mr-1' />
+        <div className={cn('absolute bottom-0 left-0 right-0 hidden min-h-[42px] flex-wrap items-center bg-white px-[14px] pb-[10px] pt-2 group-hover:flex')}>
+          <div className={cn('flex w-full items-center space-x-2')}>
+            <Button variant='primary' className='h-7 grow' onClick={() => onCreate()}>
+              <PlusIcon className='mr-1 h-4 w-4' />
               <span className='text-xs'>{t('explore.appCard.addToWorkspace')}</span>
             </Button>
           </div>
         </div>
       )}
       {!isExplore && (
-        <div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] bg-white group-hover:flex absolute bottom-0 left-0 right-0')}>
-          <div className={cn('flex items-center w-full space-x-2')}>
-            <Button variant='primary' className='grow h-7' onClick={() => onCreate()}>
-              <PlusIcon className='w-4 h-4 mr-1' />
+        <div className={cn('absolute bottom-0 left-0 right-0 hidden min-h-[42px] flex-wrap items-center bg-white px-[14px] pb-[10px] pt-2 group-hover:flex')}>
+          <div className={cn('flex w-full items-center space-x-2')}>
+            <Button variant='primary' className='h-7 grow' onClick={() => onCreate()}>
+              <PlusIcon className='mr-1 h-4 w-4' />
               <span className='text-xs'>{t('app.newApp.useTemplate')}</span>
             </Button>
           </div>
diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index 458aadcb61..cd256f2240 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -170,20 +170,20 @@ const Apps = ({
       pageType === PageType.EXPLORE ? 'h-full border-l border-gray-200' : 'h-[calc(100%-56px)]',
     )}>
       {pageType === PageType.EXPLORE && (
-        <div className='shrink-0 pt-6 px-12'>
+        <div className='shrink-0 px-12 pt-6'>
           <div className={`mb-1 ${s.textGradient} text-xl font-semibold`}>{t('explore.apps.title')}</div>
-          <div className='text-gray-500 text-sm'>{t('explore.apps.description')}</div>
+          <div className='text-sm text-gray-500'>{t('explore.apps.description')}</div>
         </div>
       )}
       <div className={cn(
-        'flex items-center justify-between mt-6',
+        'mt-6 flex items-center justify-between',
         pageType === PageType.EXPLORE ? 'px-12' : 'px-8',
       )}>
         <>
           {pageType !== PageType.EXPLORE && (
             <>
               <AppTypeSelector value={currentType} onChange={setCurrentType}/>
-              <div className='mx-2 w-[1px] h-3.5 bg-gray-200'/>
+              <div className='mx-2 h-3.5 w-[1px] bg-gray-200'/>
             </>
           )}
           <Category
@@ -205,13 +205,13 @@ const Apps = ({
       </div>
 
       <div className={cn(
-        'relative flex flex-1 pb-6 flex-col overflow-auto bg-gray-100 shrink-0 grow',
+        'relative flex flex-1 shrink-0 grow flex-col overflow-auto bg-gray-100 pb-6',
         pageType === PageType.EXPLORE ? 'mt-4' : 'mt-0 pt-2',
       )}>
         <nav
           className={cn(
             s.appList,
-            'grid content-start shrink-0',
+            'grid shrink-0 content-start',
             pageType === PageType.EXPLORE ? 'gap-4 px-6 sm:px-12' : 'gap-3 px-8  sm:!grid-cols-2 md:!grid-cols-3 lg:!grid-cols-4',
           )}>
           {searchFilteredList.map(app => (
diff --git a/web/app/components/explore/category.tsx b/web/app/components/explore/category.tsx
index 8f67f0fd49..ad6ef3a923 100644
--- a/web/app/components/explore/category.tsx
+++ b/web/app/components/explore/category.tsx
@@ -31,17 +31,17 @@ const Category: FC<ICategoryProps> = ({
   const isAllCategories = !list.includes(value as AppCategory) || value === allCategoriesEn
 
   const itemClassName = (isSelected: boolean) => cn(
-    'flex items-center px-3 py-[7px] h-[32px] rounded-lg border-[0.5px] border-transparent text-gray-700 font-medium leading-[18px] cursor-pointer hover:bg-gray-200',
-    isSelected && 'bg-white border-gray-200 shadow-xs text-primary-600 hover:bg-white',
+    'flex h-[32px] cursor-pointer items-center rounded-lg border-[0.5px] border-transparent px-3 py-[7px] font-medium leading-[18px] text-gray-700 hover:bg-gray-200',
+    isSelected && 'shadow-xs text-primary-600 border-gray-200 bg-white hover:bg-white',
   )
 
   return (
-    <div className={cn(className, 'flex space-x-1 text-[13px] flex-wrap')}>
+    <div className={cn(className, 'flex flex-wrap space-x-1 text-[13px]')}>
       <div
         className={itemClassName(isAllCategories)}
         onClick={() => onChange(allCategoriesEn)}
       >
-        <ThumbsUp className='mr-1 w-3.5 h-3.5' />
+        <ThumbsUp className='mr-1 h-3.5 w-3.5' />
         {t('explore.apps.allCategories')}
       </div>
       {list.filter(name => name !== allCategoriesEn).map(name => (
diff --git a/web/app/components/explore/create-app-modal/index.tsx b/web/app/components/explore/create-app-modal/index.tsx
index 152f3b9282..0a28ce3c1e 100644
--- a/web/app/components/explore/create-app-modal/index.tsx
+++ b/web/app/components/explore/create-app-modal/index.tsx
@@ -88,14 +88,14 @@ const CreateAppModal = ({
         onClose={() => {}}
         className='relative !max-w-[480px] px-8'
       >
-        <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onHide}>
-          <RiCloseLine className='w-4 h-4 text-gray-500' />
+        <div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onHide}>
+          <RiCloseLine className='h-4 w-4 text-gray-500' />
         </div>
         {isEditModal && (
-          <div className='mb-9 font-semibold text-xl leading-[30px] text-gray-900'>{t('app.editAppTitle')}</div>
+          <div className='mb-9 text-xl font-semibold leading-[30px] text-gray-900'>{t('app.editAppTitle')}</div>
         )}
         {!isEditModal && (
-          <div className='mb-9 font-semibold text-xl leading-[30px] text-gray-900'>{t('explore.appCustomize.title', { name: appName })}</div>
+          <div className='mb-9 text-xl font-semibold leading-[30px] text-gray-900'>{t('explore.appCustomize.title', { name: appName })}</div>
         )}
         <div className='mb-9'>
           {/* icon & name */}
@@ -115,7 +115,7 @@ const CreateAppModal = ({
                 value={name}
                 onChange={e => setName(e.target.value)}
                 placeholder={t('app.newApp.appNamePlaceholder') || ''}
-                className='grow h-10'
+                className='h-10 grow'
               />
             </div>
           </div>
@@ -132,7 +132,7 @@ const CreateAppModal = ({
           {/* answer icon */}
           {isEditModal && (appMode === 'chat' || appMode === 'advanced-chat' || appMode === 'agent-chat') && (
             <div className='pt-2'>
-              <div className='flex justify-between items-center'>
+              <div className='flex items-center justify-between'>
                 <div className='py-2 text-sm font-medium leading-[20px] text-gray-900'>{t('app.answerIcon.title')}</div>
                 <Switch
                   defaultValue={useIconAsAnswerIcon}
@@ -145,7 +145,7 @@ const CreateAppModal = ({
           {!isEditModal && isAppsFull && <AppsFull loc='app-explore-create' />}
         </div>
         <div className='flex flex-row-reverse'>
-          <Button disabled={!isEditModal && isAppsFull} className='w-24 ml-2' variant='primary' onClick={submit}>{!isEditModal ? t('common.operation.create') : t('common.operation.save')}</Button>
+          <Button disabled={!isEditModal && isAppsFull} className='ml-2 w-24' variant='primary' onClick={submit}>{!isEditModal ? t('common.operation.create') : t('common.operation.save')}</Button>
           <Button className='w-24' onClick={onHide}>{t('common.operation.cancel')}</Button>
         </div>
       </Modal>
diff --git a/web/app/components/explore/index.tsx b/web/app/components/explore/index.tsx
index cef6573bff..cd610d5685 100644
--- a/web/app/components/explore/index.tsx
+++ b/web/app/components/explore/index.tsx
@@ -40,7 +40,7 @@ const Explore: FC<IExploreProps> = ({
   }, [isCurrentWorkspaceDatasetOperator])
 
   return (
-    <div className='flex h-full bg-gray-100 border-t border-gray-200 overflow-hidden'>
+    <div className='flex h-full overflow-hidden border-t border-gray-200 bg-gray-100'>
       <ExploreContext.Provider
         value={
           {
@@ -53,7 +53,7 @@ const Explore: FC<IExploreProps> = ({
         }
       >
         <Sidebar controlUpdateInstalledApps={controlUpdateInstalledApps} />
-        <div className='grow w-0'>
+        <div className='w-0 grow'>
           {children}
         </div>
       </ExploreContext.Provider>
diff --git a/web/app/components/explore/installed-app/index.tsx b/web/app/components/explore/installed-app/index.tsx
index 2785fcc4bc..62f9452f88 100644
--- a/web/app/components/explore/installed-app/index.tsx
+++ b/web/app/components/explore/installed-app/index.tsx
@@ -28,7 +28,7 @@ const InstalledApp: FC<IInstalledAppProps> = ({
   return (
     <div className='h-full py-2 pl-0 pr-2 sm:p-2'>
       {installedApp.app.mode !== 'completion' && installedApp.app.mode !== 'workflow' && (
-        <ChatWithHistory installedAppInfo={installedApp} className='rounded-2xl shadow-md overflow-hidden' />
+        <ChatWithHistory installedAppInfo={installedApp} className='overflow-hidden rounded-2xl shadow-md' />
       )}
       {installedApp.app.mode === 'completion' && (
         <TextGenerationApp isInstalledApp installedAppInfo={installedApp}/>
diff --git a/web/app/components/explore/item-operation/index.tsx b/web/app/components/explore/item-operation/index.tsx
index 9e081c1285..324a96cc1b 100644
--- a/web/app/components/explore/item-operation/index.tsx
+++ b/web/app/components/explore/item-operation/index.tsx
@@ -59,26 +59,26 @@ const ItemOperation: FC<IItemOperationProps> = ({
       >
         <div
           ref={ref}
-          className={'min-w-[120px] p-1 bg-white rounded-lg border border--gray-200 shadow-lg'}
+          className={'border--gray-200 min-w-[120px] rounded-lg border bg-white p-1 shadow-lg'}
           onMouseEnter={setIsHovering}
           onMouseLeave={setNotHovering}
           onClick={(e) => {
             e.stopPropagation()
           }}
         >
-          <div className={cn(s.actionItem, 'hover:bg-gray-50 group')} onClick={togglePin}>
-            <Pin02 className='shrink-0 w-4 h-4 text-gray-500' />
+          <div className={cn(s.actionItem, 'group hover:bg-gray-50')} onClick={togglePin}>
+            <Pin02 className='h-4 w-4 shrink-0 text-gray-500' />
             <span className={s.actionName}>{isPinned ? t('explore.sidebar.action.unpin') : t('explore.sidebar.action.pin')}</span>
           </div>
           {isShowRenameConversation && (
-            <div className={cn(s.actionItem, 'hover:bg-gray-50 group')} onClick={onRenameConversation}>
-              <RiEditLine className='shrink-0 w-4 h-4 text-gray-500' />
+            <div className={cn(s.actionItem, 'group hover:bg-gray-50')} onClick={onRenameConversation}>
+              <RiEditLine className='h-4 w-4 shrink-0 text-gray-500' />
               <span className={s.actionName}>{t('explore.sidebar.action.rename')}</span>
             </div>
           )}
           {isShowDelete && (
-            <div className={cn(s.actionItem, s.deleteActionItem, 'hover:bg-gray-50 group')} onClick={onDelete} >
-              <RiDeleteBinLine className={cn(s.deleteActionItemChild, 'shrink-0 w-4 h-4 stroke-current text-gray-500 stroke-2')} />
+            <div className={cn(s.actionItem, s.deleteActionItem, 'group hover:bg-gray-50')} onClick={onDelete} >
+              <RiDeleteBinLine className={cn(s.deleteActionItemChild, 'h-4 w-4 shrink-0 stroke-current stroke-2 text-gray-500')} />
               <span className={cn(s.actionName, s.deleteActionItemChild)}>{t('explore.sidebar.action.delete')}</span>
             </div>
           )}
diff --git a/web/app/components/explore/sidebar/app-nav-item/index.tsx b/web/app/components/explore/sidebar/app-nav-item/index.tsx
index 73bd93585b..12ee9254a8 100644
--- a/web/app/components/explore/sidebar/app-nav-item/index.tsx
+++ b/web/app/components/explore/sidebar/app-nav-item/index.tsx
@@ -49,7 +49,7 @@ export default function AppNavItem({
       className={cn(
         s.item,
         isSelected ? s.active : 'hover:bg-gray-200',
-        'flex h-8 items-center justify-between mobile:justify-center px-2 mobile:px-1 rounded-lg text-sm font-normal',
+        'mobile:justify-center mobile:px-1 flex h-8 items-center justify-between rounded-lg px-2 text-sm font-normal',
       )}
       onClick={() => {
         router.push(url) // use Link causes popup item always trigger jump. Can not be solved by e.stopPropagation().
@@ -58,11 +58,11 @@ export default function AppNavItem({
       {isMobile && <AppIcon size='tiny' iconType={icon_type} icon={icon} background={icon_background} imageUrl={icon_url} />}
       {!isMobile && (
         <>
-          <div className='flex items-center space-x-2 w-0 grow'>
+          <div className='flex w-0 grow items-center space-x-2'>
             <AppIcon size='tiny' iconType={icon_type} icon={icon} background={icon_background} imageUrl={icon_url} />
             <div className='overflow-hidden text-ellipsis whitespace-nowrap' title={name}>{name}</div>
           </div>
-          <div className='shrink-0 h-6' onClick={e => e.stopPropagation()}>
+          <div className='h-6 shrink-0' onClick={e => e.stopPropagation()}>
             <ItemOperation
               isPinned={isPinned}
               isItemHovering={isHovering}
diff --git a/web/app/components/explore/sidebar/index.tsx b/web/app/components/explore/sidebar/index.tsx
index 13d5a0ec8f..0e91ef548a 100644
--- a/web/app/components/explore/sidebar/index.tsx
+++ b/web/app/components/explore/sidebar/index.tsx
@@ -92,11 +92,11 @@ const SideBar: FC<IExploreSideBarProps> = ({
 
   const pinnedAppsCount = installedApps.filter(({ is_pinned }) => is_pinned).length
   return (
-    <div className='w-fit sm:w-[216px] shrink-0 pt-6 px-4 border-gray-200 cursor-pointer'>
+    <div className='w-fit shrink-0 cursor-pointer border-gray-200 px-4 pt-6 sm:w-[216px]'>
       <div>
         <Link
           href='/explore/apps'
-          className={cn(isDiscoverySelected ? 'text-primary-600  bg-white font-semibold' : 'text-gray-700 font-medium hover:bg-gray-200', 'flex items-center pc:justify-start pc:w-full mobile:justify-center mobile:w-fit h-9 px-3 mobile:px-2 gap-2 rounded-lg')}
+          className={cn(isDiscoverySelected ? 'text-primary-600  bg-white font-semibold' : 'font-medium text-gray-700 hover:bg-gray-200', 'pc:justify-start pc:w-full mobile:justify-center mobile:w-fit mobile:px-2 flex h-9 items-center gap-2 rounded-lg px-3')}
           style={isDiscoverySelected ? { boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)' } : {}}
         >
           {isDiscoverySelected ? <SelectedDiscoveryIcon /> : <DiscoveryIcon />}
@@ -105,7 +105,7 @@ const SideBar: FC<IExploreSideBarProps> = ({
       </div>
       {installedApps.length > 0 && (
         <div className='mt-10'>
-          <p className='pl-2 mobile:px-0 text-xs text-gray-500 break-all font-medium uppercase'>{t('explore.sidebar.workspace')}</p>
+          <p className='mobile:px-0 break-all pl-2 text-xs font-medium uppercase text-gray-500'>{t('explore.sidebar.workspace')}</p>
           <div className='mt-3 space-y-1 overflow-y-auto overflow-x-hidden'
             style={{
               height: 'calc(100vh - 250px)',
diff --git a/web/app/components/header/account-about/index.tsx b/web/app/components/header/account-about/index.tsx
index 6edd1b834b..837e76f3d0 100644
--- a/web/app/components/header/account-about/index.tsx
+++ b/web/app/components/header/account-about/index.tsx
@@ -32,8 +32,8 @@ export default function AccountAbout({
       className={s.modal}
     >
       <div className='relative pt-4'>
-        <div className='absolute -top-2 -right-4 flex justify-center items-center w-8 h-8 cursor-pointer' onClick={onCancel}>
-          <RiCloseLine className='w-4 h-4 text-gray-500' />
+        <div className='absolute -right-4 -top-2 flex h-8 w-8 cursor-pointer items-center justify-center' onClick={onCancel}>
+          <RiCloseLine className='h-4 w-4 text-gray-500' />
         </div>
         <div>
           <LogoSite className='mx-auto mb-2' />
@@ -52,8 +52,8 @@ export default function AccountAbout({
             </div>
           </div>
         </div>
-        <div className='mb-4 -mx-8 h-[0.5px] bg-gray-200' />
-        <div className='flex justify-between items-center'>
+        <div className='-mx-8 mb-4 h-[0.5px] bg-gray-200' />
+        <div className='flex items-center justify-between'>
           <div className='text-xs font-medium text-gray-800'>
             {
               isLatest
diff --git a/web/app/components/header/account-dropdown/index.tsx b/web/app/components/header/account-dropdown/index.tsx
index 8fa5c459eb..3b2e7ad314 100644
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@@ -60,17 +60,17 @@ export default function AppSelector({ isMobile }: IAppSelector) {
             <>
               <MenuButton
                 className={`
-                    inline-flex items-center
-                    rounded-[20px] py-1 pr-2.5 pl-1 text-sm
-                  text-gray-700 hover:bg-gray-200
-                    mobile:px-1
+                    mobile:px-1 inline-flex
+                    items-center rounded-[20px] py-1 pl-1 pr-2.5
+                  text-sm text-gray-700
+                    hover:bg-gray-200
                     ${open && 'bg-gray-200'}
                   `}
               >
-                <Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='sm:mr-2 mr-0' size={32} />
+                <Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='mr-0 sm:mr-2' size={32} />
                 {!isMobile && <>
                   {userProfile.name}
-                  <RiArrowDownSLine className="w-3 h-3 ml-1 text-gray-700" />
+                  <RiArrowDownSLine className="ml-1 h-3 w-3 text-gray-700" />
                 </>}
               </MenuButton>
               <Transition
@@ -84,8 +84,8 @@ export default function AppSelector({ isMobile }: IAppSelector) {
               >
                 <MenuItems
                   className="
-                    absolute right-0 mt-1.5 w-60 max-w-80
-                    divide-y divide-divider-subtle origin-top-right rounded-lg bg-components-panel-bg-blur
+                    divide-divider-subtle bg-components-panel-bg-blur absolute right-0 mt-1.5
+                    w-60 max-w-80 origin-top-right divide-y rounded-lg
                     shadow-lg focus:outline-none
                   "
                 >
@@ -107,7 +107,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                         href='/account'
                         target='_self' rel='noopener noreferrer'>
                         <div>{t('common.account.account')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        <ArrowUpRight className='text-text-tertiary hidden h-[14px] w-[14px] group-hover:flex' />
                       </Link>
                     </MenuItem>
                     <MenuItem>
@@ -125,7 +125,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                         href={mailToSupport(userProfile.email, plan.type, langeniusVersionInfo.current_version)}
                         target='_blank' rel='noopener noreferrer'>
                         <div>{t('common.userProfile.emailSupport')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        <ArrowUpRight className='text-text-tertiary hidden h-[14px] w-[14px] group-hover:flex' />
                       </a>
                     </MenuItem>}
                     <MenuItem>
@@ -136,7 +136,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                         href='https://github.com/langgenius/dify/discussions/categories/feedbacks'
                         target='_blank' rel='noopener noreferrer'>
                         <div>{t('common.userProfile.communityFeedback')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        <ArrowUpRight className='text-text-tertiary hidden h-[14px] w-[14px] group-hover:flex' />
                       </Link>
                     </MenuItem>
                     <MenuItem>
@@ -147,7 +147,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                         href='https://discord.gg/5AEfbxcd9k'
                         target='_blank' rel='noopener noreferrer'>
                         <div>{t('common.userProfile.community')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        <ArrowUpRight className='text-text-tertiary hidden h-[14px] w-[14px] group-hover:flex' />
                       </Link>
                     </MenuItem>
                     <MenuItem>
@@ -160,7 +160,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                         }
                         target='_blank' rel='noopener noreferrer'>
                         <div>{t('common.userProfile.helpCenter')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        <ArrowUpRight className='text-text-tertiary hidden h-[14px] w-[14px] group-hover:flex' />
                       </Link>
                     </MenuItem>
                     <MenuItem>
@@ -171,7 +171,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                         href='https://roadmap.dify.ai'
                         target='_blank' rel='noopener noreferrer'>
                         <div>{t('common.userProfile.roadmap')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        <ArrowUpRight className='text-text-tertiary hidden h-[14px] w-[14px] group-hover:flex' />
                       </Link>
                     </MenuItem>
                     {
@@ -182,7 +182,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                           )} onClick={() => setAboutVisible(true)}>
                             <div>{t('common.userProfile.about')}</div>
                             <div className='flex items-center'>
-                              <div className='mr-2 system-xs-regular text-text-tertiary'>{langeniusVersionInfo.current_version}</div>
+                              <div className='system-xs-regular text-text-tertiary mr-2'>{langeniusVersionInfo.current_version}</div>
                               <Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} />
                             </div>
                           </div>
@@ -198,7 +198,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                             'data-[active]:bg-state-base-hover')}
                       >
                         <div className='system-md-regular text-text-secondary'>{t('common.userProfile.logout')}</div>
-                        <RiLogoutBoxRLine className='hidden w-4 h-4 text-text-tertiary group-hover:flex' />
+                        <RiLogoutBoxRLine className='text-text-tertiary hidden h-4 w-4 group-hover:flex' />
                       </div>
                     </div>
                   </MenuItem>
diff --git a/web/app/components/header/account-dropdown/workplace-selector/index.tsx b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
index c0f86f7620..aa2ac29bb4 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
@@ -31,20 +31,20 @@ const WorkplaceSelector = () => {
   }
 
   return (
-    <Menu as="div" className="relative w-full h-full">
+    <Menu as="div" className="relative h-full w-full">
       {
         ({ open }) => (
           <>
             <MenuButton className={cn(
               `
-                flex items-center p-0.5 gap-1.5 w-full
-                group hover:bg-state-base-hover cursor-pointer ${open && 'bg-state-base-hover'} rounded-[10px]
+                hover:bg-state-base-hover group flex w-full cursor-pointer
+                items-center gap-1.5 p-0.5 ${open && 'bg-state-base-hover'} rounded-[10px]
               `,
             )}>
-              <div className='flex items-center justify-center w-7 h-7 bg-[#EFF4FF] rounded-lg text-xs font-medium text-primary-600'>{currentWorkspace?.name[0].toLocaleUpperCase()}</div>
+              <div className='text-primary-600 flex h-7 w-7 items-center justify-center rounded-lg bg-[#EFF4FF] text-xs font-medium'>{currentWorkspace?.name[0].toLocaleUpperCase()}</div>
               <div className='flex flex-row'>
-                <div className={'truncate max-w-[80px] text-text-secondary system-sm-medium'}>{currentWorkspace?.name}</div>
-                <RiArrowDownSLine className='w-4 h-4 text-text-secondary' />
+                <div className={'text-text-secondary system-sm-medium max-w-[80px] truncate'}>{currentWorkspace?.name}</div>
+                <RiArrowDownSLine className='text-text-secondary h-4 w-4' />
               </div>
             </MenuButton >
             <Transition
@@ -59,19 +59,19 @@ const WorkplaceSelector = () => {
               <MenuItems
                 className={cn(
                   `
-                    flex w-[280px] flex-col items-start absolute left-[-15px] mt-1 rounded-xl shadows-shadow-lg
+                    shadows-shadow-lg absolute left-[-15px] mt-1 flex w-[280px] flex-col items-start rounded-xl
                   `,
                 )}
               >
-                <div className="flex flex-col p-1 pb-2 items-start self-stretch w-full rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg ">
-                  <div className='flex px-3 pt-1 pb-0.5 items-start self-stretch'>
-                    <span className='flex-1 text-text-tertiary system-xs-medium-uppercase'>{t('common.userProfile.workspace')}</span>
+                <div className="border-components-panel-border bg-components-panel-bg-blur flex w-full flex-col items-start self-stretch rounded-xl border-[0.5px] p-1 pb-2 shadow-lg ">
+                  <div className='flex items-start self-stretch px-3 pb-0.5 pt-1'>
+                    <span className='text-text-tertiary system-xs-medium-uppercase flex-1'>{t('common.userProfile.workspace')}</span>
                   </div>
                   {
                     workspaces.map(workspace => (
-                      <div className='flex py-1 pl-3 pr-2 items-center gap-2 self-stretch hover:bg-state-base-hover rounded-lg' key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
-                        <div className='flex items-center justify-center w-6 h-6 bg-[#EFF4FF] rounded-md text-xs font-medium text-primary-600'>{workspace.name[0].toLocaleUpperCase()}</div>
-                        <div className='line-clamp-1 grow overflow-hidden text-text-secondary text-ellipsis system-md-regular cursor-pointer'>{workspace.name}</div>
+                      <div className='hover:bg-state-base-hover flex items-center gap-2 self-stretch rounded-lg py-1 pl-3 pr-2' key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
+                        <div className='text-primary-600 flex h-6 w-6 items-center justify-center rounded-md bg-[#EFF4FF] text-xs font-medium'>{workspace.name[0].toLocaleUpperCase()}</div>
+                        <div className='text-text-secondary system-md-regular line-clamp-1 grow cursor-pointer overflow-hidden text-ellipsis'>{workspace.name}</div>
                         {
                           <PremiumBadge size='s' color='gray' allowHover={false}>
                             <div className='system-2xs-medium'>
diff --git a/web/app/components/header/account-setting/Integrations-page/index.tsx b/web/app/components/header/account-setting/Integrations-page/index.tsx
index dc5e924c99..0d346e0f71 100644
--- a/web/app/components/header/account-setting/Integrations-page/index.tsx
+++ b/web/app/components/header/account-setting/Integrations-page/index.tsx
@@ -34,16 +34,16 @@ export default function IntegrationsPage() {
         <div className={titleClassName}>{t('common.integrations.connected')}</div>
         {
           integrates.map(integrate => (
-            <div key={integrate.provider} className='mb-2 flex items-center px-3 py-2 bg-gray-50 border-[0.5px] border-gray-200 rounded-lg'>
+            <div key={integrate.provider} className='mb-2 flex items-center rounded-lg border-[0.5px] border-gray-200 bg-gray-50 px-3 py-2'>
               <div className={classNames('w-8 h-8 mr-3 bg-white rounded-lg border border-gray-100', s[`${integrate.provider}-icon`])} />
               <div className='grow'>
-                <div className='leading-[21px] text-sm font-medium text-gray-800'>{integrateMap[integrate.provider].name}</div>
-                <div className='leading-[18px] text-xs font-normal text-gray-500'>{integrateMap[integrate.provider].description}</div>
+                <div className='text-sm font-medium leading-[21px] text-gray-800'>{integrateMap[integrate.provider].name}</div>
+                <div className='text-xs font-normal leading-[18px] text-gray-500'>{integrateMap[integrate.provider].description}</div>
               </div>
               {
                 !integrate.is_bound && (
                   <Link
-                    className='flex items-center h-8 px-[7px] bg-white rounded-lg border border-gray-200 text-xs font-medium text-gray-700 cursor-pointer'
+                    className='flex h-8 cursor-pointer items-center rounded-lg border border-gray-200 bg-white px-[7px] text-xs font-medium text-gray-700'
                     href={integrate.link}
                     target='_blank' rel='noopener noreferrer'>
                     {t('common.integrations.connect')}
diff --git a/web/app/components/header/account-setting/api-based-extension-page/empty.tsx b/web/app/components/header/account-setting/api-based-extension-page/empty.tsx
index ce53459502..9dad840466 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/empty.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/empty.tsx
@@ -6,17 +6,17 @@ const Empty = () => {
   const { t } = useTranslation()
 
   return (
-    <div className='mb-2 p-6 rounded-2xl bg-gray-50'>
-      <div className='flex items-center justify-center mb-3 w-12 h-12 rounded-[10px] border border-[#EAECF5]'>
-        <Webhooks className='w-6 h-6 text-gray-500' />
+    <div className='mb-2 rounded-2xl bg-gray-50 p-6'>
+      <div className='mb-3 flex h-12 w-12 items-center justify-center rounded-[10px] border border-[#EAECF5]'>
+        <Webhooks className='h-6 w-6 text-gray-500' />
       </div>
       <div className='mb-2 text-sm text-gray-600'>{t('common.apiBasedExtension.title')}</div>
       <a
-        className='flex items-center mb-2 h-[18px] text-xs text-primary-600'
+        className='text-primary-600 mb-2 flex h-[18px] items-center text-xs'
         href={t('common.apiBasedExtension.linkUrl') || '/'}
         target='_blank' rel='noopener noreferrer'
       >
-        <BookOpen01 className='mr-1 w-3 h-3' />
+        <BookOpen01 className='mr-1 h-3 w-3' />
         {t('common.apiBasedExtension.link')}
       </a>
     </div>
diff --git a/web/app/components/header/account-setting/api-based-extension-page/index.tsx b/web/app/components/header/account-setting/api-based-extension-page/index.tsx
index 4a0a54079b..22cc6274ad 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/index.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/index.tsx
@@ -42,10 +42,10 @@ const ApiBasedExtensionPage = () => {
         )
       }
       <div
-        className='flex items-center justify-center px-3 h-8 text-[13px] font-medium text-gray-700 rounded-lg bg-gray-50 cursor-pointer'
+        className='flex h-8 cursor-pointer items-center justify-center rounded-lg bg-gray-50 px-3 text-[13px] font-medium text-gray-700'
         onClick={handleOpenApiBasedExtensionModal}
       >
-        <RiAddLine className='mr-2 w-4 h-4' />
+        <RiAddLine className='mr-2 h-4 w-4' />
         {t('common.apiBasedExtension.add')}
       </div>
     </div>
diff --git a/web/app/components/header/account-setting/api-based-extension-page/item.tsx b/web/app/components/header/account-setting/api-based-extension-page/item.tsx
index 6d716c638e..c750fa0d35 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/item.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/item.tsx
@@ -36,24 +36,24 @@ const Item: FC<ItemProps> = ({
   }
 
   return (
-    <div className='group flex items-center mb-2 px-4 py-2 border-[0.5px] border-transparent rounded-xl bg-gray-50 hover:border-gray-200 hover:shadow-xs'>
+    <div className='hover:shadow-xs group mb-2 flex items-center rounded-xl border-[0.5px] border-transparent bg-gray-50 px-4 py-2 hover:border-gray-200'>
       <div className='grow'>
         <div className='mb-0.5 text-[13px] font-medium text-gray-700'>{data.name}</div>
         <div className='text-xs text-gray-500'>{data.api_endpoint}</div>
       </div>
-      <div className='hidden group-hover:flex items-center'>
+      <div className='hidden items-center group-hover:flex'>
         <div
-          className='flex items-center mr-1 px-3 h-7 bg-white text-xs font-medium text-gray-700 rounded-md border-[0.5px] border-gray-200 shadow-xs cursor-pointer'
+          className='shadow-xs mr-1 flex h-7 cursor-pointer items-center rounded-md border-[0.5px] border-gray-200 bg-white px-3 text-xs font-medium text-gray-700'
           onClick={handleOpenApiBasedExtensionModal}
         >
-          <Edit02 className='mr-[5px] w-3.5 h-3.5' />
+          <Edit02 className='mr-[5px] h-3.5 w-3.5' />
           {t('common.operation.edit')}
         </div>
         <div
-          className='flex items-center justify-center w-7 h-7 bg-white text-gray-700 rounded-md border-[0.5px] border-gray-200 shadow-xs cursor-pointer'
+          className='shadow-xs flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border-[0.5px] border-gray-200 bg-white text-gray-700'
           onClick={() => setShowDeleteConfirm(true)}
         >
-          <RiDeleteBinLine className='w-4 h-4' />
+          <RiDeleteBinLine className='h-4 w-4' />
         </div>
       </div>
       {
diff --git a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx b/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
index ebe5386388..d15474ea1d 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
@@ -75,9 +75,9 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
     <Modal
       isShow
       onClose={() => { }}
-      className='!p-8 !pb-6 !max-w-none !w-[640px]'
+      className='!w-[640px] !max-w-none !p-8 !pb-6'
     >
-      <div className='mb-2 text-xl font-semibold text-text-primary'>
+      <div className='text-text-primary mb-2 text-xl font-semibold'>
         {
           data.name
             ? t('common.apiBasedExtension.modal.editTitle')
@@ -85,49 +85,49 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
         }
       </div>
       <div className='py-2'>
-        <div className='leading-9 text-sm font-medium text-text-primary'>
+        <div className='text-text-primary text-sm font-medium leading-9'>
           {t('common.apiBasedExtension.modal.name.title')}
         </div>
         <input
           value={localeData.name || ''}
           onChange={e => handleDataChange('name', e.target.value)}
-          className='block px-3 w-full h-9 bg-components-input-bg-normal rounded-lg text-sm text-text-primary outline-none appearance-none'
+          className='bg-components-input-bg-normal text-text-primary block h-9 w-full appearance-none rounded-lg px-3 text-sm outline-none'
           placeholder={t('common.apiBasedExtension.modal.name.placeholder') || ''}
         />
       </div>
       <div className='py-2'>
-        <div className='flex justify-between items-center h-9 text-sm font-medium text-text-primary'>
+        <div className='text-text-primary flex h-9 items-center justify-between text-sm font-medium'>
           {t('common.apiBasedExtension.modal.apiEndpoint.title')}
           <a
             href={t('common.apiBasedExtension.linkUrl') || '/'}
             target='_blank' rel='noopener noreferrer'
-            className='group flex items-center text-xs text-text-tertiary font-normal hover:text-text-accent'
+            className='text-text-tertiary hover:text-text-accent group flex items-center text-xs font-normal'
           >
-            <BookOpen01 className='mr-1 w-3 h-3 text-text-tertiary group-hover:text-text-accent' />
+            <BookOpen01 className='text-text-tertiary group-hover:text-text-accent mr-1 h-3 w-3' />
             {t('common.apiBasedExtension.link')}
           </a>
         </div>
         <input
           value={localeData.api_endpoint || ''}
           onChange={e => handleDataChange('api_endpoint', e.target.value)}
-          className='block px-3 w-full h-9 bg-components-input-bg-normal rounded-lg text-sm text-text-primary outline-none appearance-none'
+          className='bg-components-input-bg-normal text-text-primary block h-9 w-full appearance-none rounded-lg px-3 text-sm outline-none'
           placeholder={t('common.apiBasedExtension.modal.apiEndpoint.placeholder') || ''}
         />
       </div>
       <div className='py-2'>
-        <div className='leading-9 text-sm font-medium text-text-primary'>
+        <div className='text-text-primary text-sm font-medium leading-9'>
           {t('common.apiBasedExtension.modal.apiKey.title')}
         </div>
         <div className='flex items-center'>
           <input
             value={localeData.api_key || ''}
             onChange={e => handleDataChange('api_key', e.target.value)}
-            className='block grow mr-2 px-3 h-9 bg-components-input-bg-normal rounded-lg text-sm text-text-primary outline-none appearance-none'
+            className='bg-components-input-bg-normal text-text-primary mr-2 block h-9 grow appearance-none rounded-lg px-3 text-sm outline-none'
             placeholder={t('common.apiBasedExtension.modal.apiKey.placeholder') || ''}
           />
         </div>
       </div>
-      <div className='flex items-center justify-end mt-6'>
+      <div className='mt-6 flex items-center justify-end'>
         <Button
           onClick={onCancel}
           className='mr-2'
diff --git a/web/app/components/header/account-setting/api-based-extension-page/selector.tsx b/web/app/components/header/account-setting/api-based-extension-page/selector.tsx
index 9c67f92a8d..98bfcc8f6e 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/selector.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/selector.tsx
@@ -54,40 +54,40 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
         {
           currentItem
             ? (
-              <div className='flex items-center justify-between pl-3 pr-2.5 h-9 bg-components-input-bg-normal rounded-lg cursor-pointer'>
-                <div className='text-sm text-text-primary'>{currentItem.name}</div>
+              <div className='bg-components-input-bg-normal flex h-9 cursor-pointer items-center justify-between rounded-lg pl-3 pr-2.5'>
+                <div className='text-text-primary text-sm'>{currentItem.name}</div>
                 <div className='flex items-center'>
-                  <div className='mr-1.5 w-[270px] text-xs text-text-quaternary truncate text-right'>
+                  <div className='text-text-quaternary mr-1.5 w-[270px] truncate text-right text-xs'>
                     {currentItem.api_endpoint}
                   </div>
-                  <RiArrowDownSLine className={`w-4 h-4 text-text-secondary ${!open && 'opacity-60'}`} />
+                  <RiArrowDownSLine className={`text-text-secondary h-4 w-4 ${!open && 'opacity-60'}`} />
                 </div>
               </div>
             )
             : (
-              <div className='flex items-center justify-between pl-3 pr-2.5 h-9 bg-components-input-bg-normal rounded-lg text-sm text-text-quaternary cursor-pointer'>
+              <div className='bg-components-input-bg-normal text-text-quaternary flex h-9 cursor-pointer items-center justify-between rounded-lg pl-3 pr-2.5 text-sm'>
                 {t('common.apiBasedExtension.selector.placeholder')}
-                <RiArrowDownSLine className={`w-4 h-4 text-text-secondary ${!open && 'opacity-60'}`} />
+                <RiArrowDownSLine className={`text-text-secondary h-4 w-4 ${!open && 'opacity-60'}`} />
               </div>
             )
         }
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='w-[calc(100%-32px)] max-w-[576px] z-[102]'>
-        <div className='w-full rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg z-10'>
+      <PortalToFollowElemContent className='z-[102] w-[calc(100%-32px)] max-w-[576px]'>
+        <div className='border-components-panel-border bg-components-panel-bg z-10 w-full rounded-lg border-[0.5px] shadow-lg'>
           <div className='p-1'>
-            <div className='flex items-center justify-between px-3 pt-2 pb-1'>
-              <div className='text-xs font-medium text-text-tertiary'>
+            <div className='flex items-center justify-between px-3 pb-1 pt-2'>
+              <div className='text-text-tertiary text-xs font-medium'>
                 {t('common.apiBasedExtension.selector.title')}
               </div>
               <div
-                className='flex items-center text-xs text-text-accent cursor-pointer'
+                className='text-text-accent flex cursor-pointer items-center text-xs'
                 onClick={() => {
                   setOpen(false)
                   setShowAccountSettingModal({ payload: 'api-based-extension' })
                 }}
               >
                 {t('common.apiBasedExtension.selector.manage')}
-                <ArrowUpRight className='ml-0.5 w-3 h-3' />
+                <ArrowUpRight className='ml-0.5 h-3 w-3' />
               </div>
             </div>
             <div className='max-h-[250px] overflow-y-auto'>
@@ -95,26 +95,26 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
                 data?.map(item => (
                   <div
                     key={item.id}
-                    className='px-3 py-1.5 w-full cursor-pointer hover:stroke-state-base-hover rounded-md text-left'
+                    className='hover:stroke-state-base-hover w-full cursor-pointer rounded-md px-3 py-1.5 text-left'
                     onClick={() => handleSelect(item.id!)}
                   >
-                    <div className='text-sm text-text-primary'>{item.name}</div>
-                    <div className='text-xs text-text-tertiary'>{item.api_endpoint}</div>
+                    <div className='text-text-primary text-sm'>{item.name}</div>
+                    <div className='text-text-tertiary text-xs'>{item.api_endpoint}</div>
                   </div>
                 ))
               }
             </div>
           </div>
-          <div className='h-[1px] bg-divider-regular' />
+          <div className='bg-divider-regular h-[1px]' />
           <div className='p-1'>
             <div
-              className='flex items-center px-3 h-8 text-sm text-text-accent cursor-pointer'
+              className='text-text-accent flex h-8 cursor-pointer items-center px-3 text-sm'
               onClick={() => {
                 setOpen(false)
                 setShowApiBasedExtensionModal({ payload: {}, onSaveCallback: () => mutate() })
               }}
             >
-              <RiAddLine className='mr-2 w-4 h-4' />
+              <RiAddLine className='mr-2 h-4 w-4' />
               {t('common.operation.add')}
             </div>
           </div>
diff --git a/web/app/components/header/account-setting/collapse/index.tsx b/web/app/components/header/account-setting/collapse/index.tsx
index d0068dabed..5dff4da573 100644
--- a/web/app/components/header/account-setting/collapse/index.tsx
+++ b/web/app/components/header/account-setting/collapse/index.tsx
@@ -26,17 +26,17 @@ const Collapse = ({
 
   return (
     <div className={classNames('bg-background-section-burn rounded-xl', wrapperClassName)}>
-      <div className='flex items-center justify-between leading-[18px] px-3 py-2 text-xs font-medium text-text-secondary cursor-pointer' onClick={toggle}>
+      <div className='text-text-secondary flex cursor-pointer items-center justify-between px-3 py-2 text-xs font-medium leading-[18px]' onClick={toggle}>
         {title}
         {
           open
-            ? <ChevronDownIcon className='w-3 h-3 text-components-button-tertiary-text' />
-            : <ChevronRightIcon className='w-3 h-3 text-components-button-tertiary-text' />
+            ? <ChevronDownIcon className='text-components-button-tertiary-text h-3 w-3' />
+            : <ChevronRightIcon className='text-components-button-tertiary-text h-3 w-3' />
         }
       </div>
       {
         open && (
-          <div className='py-1 mb-1 mx-1 border-t border-divider-subtle rounded-lg bg-components-panel-on-panel-item-bg'>
+          <div className='border-divider-subtle bg-components-panel-on-panel-item-bg mx-1 mb-1 rounded-lg border-t py-1'>
             {
               items.map(item => (
                 <div key={item.key} onClick={() => onSelect && onSelect(item)}>
diff --git a/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx b/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx
index f4790e52e2..617644b587 100644
--- a/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx
+++ b/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx
@@ -54,8 +54,8 @@ export default function Operate({
       {
         ({ open }) => (
           <>
-            <MenuButton className={`flex items-center justify-center w-8 h-8 rounded-lg hover:bg-gray-100 ${open && 'bg-gray-100'}`}>
-              <RiMoreFill className='w-4 h-4' />
+            <MenuButton className={`flex h-8 w-8 items-center justify-center rounded-lg hover:bg-gray-100 ${open && 'bg-gray-100'}`}>
+              <RiMoreFill className='h-4 w-4' />
             </MenuButton>
             <Transition
               as={Fragment}
@@ -69,7 +69,7 @@ export default function Operate({
               <MenuItems
                 className="
                   absolute right-0 top-9 w-60 max-w-80
-                  divide-y divide-gray-100 origin-top-right rounded-lg bg-white
+                  origin-top-right divide-y divide-gray-100 rounded-lg bg-white
                   shadow-lg
                 "
               >
@@ -82,7 +82,7 @@ export default function Operate({
                       <RiStickyNoteAddLine className={itemIconClassName} />
                       <div>
                         <div className='leading-5'>{t('common.dataSource.notion.changeAuthorizedPages')}</div>
-                        <div className='leading-5 text-xs text-gray-500'>
+                        <div className='text-xs leading-5 text-gray-500'>
                           {payload.total} {t('common.dataSource.notion.pagesAuthorized')}
                         </div>
                       </div>
diff --git a/web/app/components/header/account-setting/data-source-page/data-source-website/config-firecrawl-modal.tsx b/web/app/components/header/account-setting/data-source-page/data-source-website/config-firecrawl-modal.tsx
index a4a8b9b637..54caa5a459 100644
--- a/web/app/components/header/account-setting/data-source-page/data-source-website/config-firecrawl-modal.tsx
+++ b/web/app/components/header/account-setting/data-source-page/data-source-website/config-firecrawl-modal.tsx
@@ -88,11 +88,11 @@ const ConfigFirecrawlModal: FC<Props> = ({
 
   return (
     <PortalToFollowElem open>
-      <PortalToFollowElemContent className='w-full h-full z-[60]'>
+      <PortalToFollowElemContent className='z-[60] h-full w-full'>
         <div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'>
-          <div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-white shadow-xl rounded-2xl overflow-y-auto'>
+          <div className='mx-2 max-h-[calc(100vh-120px)] w-[640px] overflow-y-auto rounded-2xl bg-white shadow-xl'>
             <div className='px-8 pt-8'>
-              <div className='flex justify-between items-center mb-4'>
+              <div className='mb-4 flex items-center justify-between'>
                 <div className='text-xl font-semibold text-gray-900'>{t(`${I18N_PREFIX}.configFirecrawl`)}</div>
               </div>
 
@@ -113,10 +113,10 @@ const ConfigFirecrawlModal: FC<Props> = ({
                   placeholder={DEFAULT_BASE_URL}
                 />
               </div>
-              <div className='my-8 flex justify-between items-center h-8'>
-                <a className='flex items-center space-x-1 leading-[18px] text-xs font-normal text-[#155EEF]' target='_blank' href='https://www.firecrawl.dev/account'>
+              <div className='my-8 flex h-8 items-center justify-between'>
+                <a className='flex items-center space-x-1 text-xs font-normal leading-[18px] text-[#155EEF]' target='_blank' href='https://www.firecrawl.dev/account'>
                   <span>{t(`${I18N_PREFIX}.getApiKeyLinkText`)}</span>
-                  <LinkExternal02 className='w-3 h-3' />
+                  <LinkExternal02 className='h-3 w-3' />
                 </a>
                 <div className='flex'>
                   <Button
@@ -139,8 +139,8 @@ const ConfigFirecrawlModal: FC<Props> = ({
               </div>
             </div>
             <div className='border-t-[0.5px] border-t-black/5'>
-              <div className='flex justify-center items-center py-3 bg-gray-50 text-xs text-gray-500'>
-                <Lock01 className='mr-1 w-3 h-3 text-gray-500' />
+              <div className='flex items-center justify-center bg-gray-50 py-3 text-xs text-gray-500'>
+                <Lock01 className='mr-1 h-3 w-3 text-gray-500' />
                 {t('common.modelProvider.encrypted.front')}
                 <a
                   className='text-primary-600 mx-1'
diff --git a/web/app/components/header/account-setting/data-source-page/data-source-website/config-jina-reader-modal.tsx b/web/app/components/header/account-setting/data-source-page/data-source-website/config-jina-reader-modal.tsx
index c6d6ad0256..2eb2b99602 100644
--- a/web/app/components/header/account-setting/data-source-page/data-source-website/config-jina-reader-modal.tsx
+++ b/web/app/components/header/account-setting/data-source-page/data-source-website/config-jina-reader-modal.tsx
@@ -74,11 +74,11 @@ const ConfigJinaReaderModal: FC<Props> = ({
 
   return (
     <PortalToFollowElem open>
-      <PortalToFollowElemContent className='w-full h-full z-[60]'>
+      <PortalToFollowElemContent className='z-[60] h-full w-full'>
         <div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'>
-          <div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-white shadow-xl rounded-2xl overflow-y-auto'>
+          <div className='mx-2 max-h-[calc(100vh-120px)] w-[640px] overflow-y-auto rounded-2xl bg-white shadow-xl'>
             <div className='px-8 pt-8'>
-              <div className='flex justify-between items-center mb-4'>
+              <div className='mb-4 flex items-center justify-between'>
                 <div className='text-xl font-semibold text-gray-900'>{t(`${I18N_PREFIX}.configJinaReader`)}</div>
               </div>
 
@@ -92,10 +92,10 @@ const ConfigJinaReaderModal: FC<Props> = ({
                   placeholder={t(`${I18N_PREFIX}.apiKeyPlaceholder`)!}
                 />
               </div>
-              <div className='my-8 flex justify-between items-center h-8'>
-                <a className='flex items-center space-x-1 leading-[18px] text-xs font-normal text-[#155EEF]' target='_blank' href='https://jina.ai/reader/'>
+              <div className='my-8 flex h-8 items-center justify-between'>
+                <a className='flex items-center space-x-1 text-xs font-normal leading-[18px] text-[#155EEF]' target='_blank' href='https://jina.ai/reader/'>
                   <span>{t(`${I18N_PREFIX}.getApiKeyLinkText`)}</span>
-                  <LinkExternal02 className='w-3 h-3' />
+                  <LinkExternal02 className='h-3 w-3' />
                 </a>
                 <div className='flex'>
                   <Button
@@ -118,8 +118,8 @@ const ConfigJinaReaderModal: FC<Props> = ({
               </div>
             </div>
             <div className='border-t-[0.5px] border-t-black/5'>
-              <div className='flex justify-center items-center py-3 bg-gray-50 text-xs text-gray-500'>
-                <Lock01 className='mr-1 w-3 h-3 text-gray-500' />
+              <div className='flex items-center justify-center bg-gray-50 py-3 text-xs text-gray-500'>
+                <Lock01 className='mr-1 h-3 w-3 text-gray-500' />
                 {t('common.modelProvider.encrypted.front')}
                 <a
                   className='text-primary-600 mx-1'
diff --git a/web/app/components/header/account-setting/data-source-page/data-source-website/index.tsx b/web/app/components/header/account-setting/data-source-page/data-source-website/index.tsx
index 628510c5dd..08841475df 100644
--- a/web/app/components/header/account-setting/data-source-page/data-source-website/index.tsx
+++ b/web/app/components/header/account-setting/data-source-page/data-source-website/index.tsx
@@ -85,10 +85,10 @@ const DataSourceWebsite: FC<Props> = ({ provider }) => {
           logo: ({ className }: { className: string }) => (
             item.provider === DataSourceProvider.fireCrawl
               ? (
-                <div className={cn(className, 'flex items-center justify-center w-5 h-5 bg-white border border-gray-100 text-xs font-medium text-gray-500 rounded ml-3')}>🔥</div>
+                <div className={cn(className, 'ml-3 flex h-5 w-5 items-center justify-center rounded border border-gray-100 bg-white text-xs font-medium text-gray-500')}>🔥</div>
               )
               : (
-                <div className={cn(className, 'flex items-center justify-center w-5 h-5 bg-white border border-gray-100 text-xs font-medium text-gray-500 rounded ml-3')}>
+                <div className={cn(className, 'ml-3 flex h-5 w-5 items-center justify-center rounded border border-gray-100 bg-white text-xs font-medium text-gray-500')}>
                   <span className={s.jinaLogo} />
                 </div>
               )
diff --git a/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx b/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx
index b7fd8193e2..b7acb9a4de 100644
--- a/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx
+++ b/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx
@@ -44,22 +44,22 @@ const ConfigItem: FC<Props> = ({
   const onChangeAuthorizedPage = notionActions?.onChangeAuthorizedPage || function () { }
 
   return (
-    <div className={cn(s['workspace-item'], 'flex items-center mb-1 py-1 pr-1 bg-components-panel-on-panel-item-bg rounded-lg')} key={payload.id}>
+    <div className={cn(s['workspace-item'], 'bg-components-panel-on-panel-item-bg mb-1 flex items-center rounded-lg py-1 pr-1')} key={payload.id}>
       <payload.logo className='ml-3 mr-1.5' />
-      <div className='grow py-[7px] system-sm-medium text-text-secondary truncate' title={payload.name}>{payload.name}</div>
+      <div className='system-sm-medium text-text-secondary grow truncate py-[7px]' title={payload.name}>{payload.name}</div>
       {
         payload.isActive
-          ? <Indicator className='shrink-0 mr-[6px]' color='green' />
-          : <Indicator className='shrink-0 mr-[6px]' color='yellow' />
+          ? <Indicator className='mr-[6px] shrink-0' color='green' />
+          : <Indicator className='mr-[6px] shrink-0' color='yellow' />
       }
-      <div className={`shrink-0 mr-3 text-xs font-medium uppercase ${payload.isActive ? 'text-util-colors-green-green-600' : 'text-util-colors-warning-warning-600'}`}>
+      <div className={`mr-3 shrink-0 text-xs font-medium uppercase ${payload.isActive ? 'text-util-colors-green-green-600' : 'text-util-colors-warning-warning-600'}`}>
         {
           payload.isActive
             ? t(isNotion ? 'common.dataSource.notion.connected' : 'common.dataSource.website.active')
             : t(isNotion ? 'common.dataSource.notion.disconnected' : 'common.dataSource.website.inactive')
         }
       </div>
-      <div className='mr-2 w-[1px] h-3 bg-divider-regular' />
+      <div className='bg-divider-regular mr-2 h-3 w-[1px]' />
       {isNotion && (
         <Operate payload={{
           id: payload.id,
@@ -70,8 +70,8 @@ const ConfigItem: FC<Props> = ({
 
       {
         isWebsite && !readOnly && (
-          <div className='p-2 text-text-tertiary cursor-pointer rounded-md hover:bg-black/5' onClick={onRemove} >
-            <RiDeleteBinLine className='w-4 h-4' />
+          <div className='text-text-tertiary cursor-pointer rounded-md p-2 hover:bg-black/5' onClick={onRemove} >
+            <RiDeleteBinLine className='h-4 w-4' />
           </div>
         )
       }
diff --git a/web/app/components/header/account-setting/data-source-page/panel/index.tsx b/web/app/components/header/account-setting/data-source-page/panel/index.tsx
index 8d2ec0a8ca..77d72db0a8 100644
--- a/web/app/components/header/account-setting/data-source-page/panel/index.tsx
+++ b/web/app/components/header/account-setting/data-source-page/panel/index.tsx
@@ -41,14 +41,14 @@ const Panel: FC<Props> = ({
   const isWebsite = type === DataSourceType.website
 
   return (
-    <div className='mb-2 bg-background-section-burn rounded-xl'>
+    <div className='bg-background-section-burn mb-2 rounded-xl'>
       <div className='flex items-center px-3 py-[9px]'>
-        <div className={cn(s[`${type}-icon`], 'w-8 h-8 mr-3 border border-divider-subtle rounded-lg bg-background-default')} />
+        <div className={cn(s[`${type}-icon`], 'border-divider-subtle bg-background-default mr-3 h-8 w-8 rounded-lg border')} />
         <div className='grow'>
-          <div className='flex items-center h-5'>
-            <div className='text-sm font-medium text-text-primary'>{t(`common.dataSource.${type}.title`)}</div>
+          <div className='flex h-5 items-center'>
+            <div className='text-text-primary text-sm font-medium'>{t(`common.dataSource.${type}.title`)}</div>
             {isWebsite && (
-              <div className='ml-1 leading-[18px] px-1.5 rounded-md bg-white border border-gray-100 text-xs font-medium text-gray-700'>
+              <div className='ml-1 rounded-md border border-gray-100 bg-white px-1.5 text-xs font-medium leading-[18px] text-gray-700'>
                 <span className='text-gray-500'>{t('common.dataSource.website.with')}</span> { provider === DataSourceProvider.fireCrawl ? '🔥 Firecrawl' : 'Jina Reader'}
               </div>
             )}
@@ -68,9 +68,9 @@ const Panel: FC<Props> = ({
                 ? (
                   <div
                     className={
-                      `flex items-center ml-3 px-3 h-7 bg-white border border-gray-200
-                  rounded-md text-xs font-medium text-gray-700
-                  ${!readOnly ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}`
+                      `ml-3 flex h-7 items-center rounded-md border border-gray-200 bg-white
+                  px-3 text-xs font-medium text-gray-700
+                  ${!readOnly ? 'cursor-pointer' : 'cursor-default opacity-50 grayscale'}`
                     }
                     onClick={onConfigure}
                   >
@@ -81,12 +81,12 @@ const Panel: FC<Props> = ({
                   <>
                     {isSupportList && <div
                       className={
-                        `flex items-center px-3 py-1 min-h-7 bg-components-button-secondary-bg border-[0.5px] border-components-button-secondary-border system-sm-medium text-components-button-secondary-accent-text rounded-md
-                  ${!readOnly ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}`
+                        `bg-components-button-secondary-bg border-components-button-secondary-border system-sm-medium text-components-button-secondary-accent-text flex min-h-7 items-center rounded-md border-[0.5px] px-3 py-1
+                  ${!readOnly ? 'cursor-pointer' : 'cursor-default opacity-50 grayscale'}`
                       }
                       onClick={onConfigure}
                     >
-                      <RiAddLine className='w-4 h-4 text-components-button-secondary-accent-text mr-[5px]' />
+                      <RiAddLine className='text-components-button-secondary-accent-text mr-[5px] h-4 w-4' />
                       {t('common.dataSource.connect')}
                     </div>}
                   </>
@@ -98,9 +98,9 @@ const Panel: FC<Props> = ({
         {isWebsite && !isConfigured && (
           <div
             className={
-              `flex items-center ml-3 px-3 h-7 bg-components-button-secondary-bg border-[0.5px] border-components-button-secondary-border
-              rounded-md text-xs font-medium text-components-button-secondary-accent-text
-              ${!readOnly ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}`
+              `bg-components-button-secondary-bg border-components-button-secondary-border text-components-button-secondary-accent-text ml-3 flex h-7 items-center rounded-md
+              border-[0.5px] px-3 text-xs font-medium
+              ${!readOnly ? 'cursor-pointer' : 'cursor-default opacity-50 grayscale'}`
             }
             onClick={!readOnly ? onConfigure : undefined}
           >
@@ -112,13 +112,13 @@ const Panel: FC<Props> = ({
       {
         isConfigured && (
           <>
-            <div className='flex items-center px-3 h-[18px]'>
+            <div className='flex h-[18px] items-center px-3'>
               <div className='system-xs-medium text-text-tertiary'>
                 {isNotion ? t('common.dataSource.notion.connectedWorkspace') : t('common.dataSource.website.configuredCrawlers')}
               </div>
-              <div className='grow ml-3 border-t border-t-divider-subtle' />
+              <div className='border-t-divider-subtle ml-3 grow border-t' />
             </div>
-            <div className='px-3 pt-2 pb-3'>
+            <div className='px-3 pb-3 pt-2'>
               {
                 configuredList.map(item => (
                   <ConfigItem
diff --git a/web/app/components/header/account-setting/index.tsx b/web/app/components/header/account-setting/index.tsx
index ec4b06ccdd..1889fd3b0a 100644
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -148,15 +148,15 @@ export default function AccountSetting({
       show
       onClose={onCancel}
     >
-      <div className='mx-auto max-w-[1048px] h-[100vh] flex'>
-        <div className='w-[44px] sm:w-[224px] pl-4 pr-6 border-r border-divider-burn flex flex-col'>
-          <div className='mt-6 mb-8 px-3 py-2 text-text-primary title-2xl-semi-bold'>{t('common.userProfile.settings')}</div>
+      <div className='mx-auto flex h-[100vh] max-w-[1048px]'>
+        <div className='border-divider-burn flex w-[44px] flex-col border-r pl-4 pr-6 sm:w-[224px]'>
+          <div className='text-text-primary title-2xl-semi-bold mb-8 mt-6 px-3 py-2'>{t('common.userProfile.settings')}</div>
           <div className='w-full'>
             {
               menuItems.map(menuItem => (
                 <div key={menuItem.key} className='mb-2'>
                   {!isCurrentWorkspaceDatasetOperator && (
-                    <div className='py-2 pl-3 pb-1 mb-0.5 system-xs-medium-uppercase text-text-tertiary'>{menuItem.name}</div>
+                    <div className='system-xs-medium-uppercase text-text-tertiary mb-0.5 py-2 pb-1 pl-3'>{menuItem.name}</div>
                   )}
                   <div>
                     {
@@ -164,7 +164,7 @@ export default function AccountSetting({
                         <div
                           key={item.key}
                           className={cn(
-                            'flex items-center mb-0.5 p-1 pl-3 h-[37px] text-sm cursor-pointer rounded-lg',
+                            'mb-0.5 flex h-[37px] cursor-pointer items-center rounded-lg p-1 pl-3 text-sm',
                             activeMenu === item.key ? 'bg-state-base-active text-components-menu-item-text-active system-sm-semibold' : 'text-components-menu-item-text system-sm-medium')}
                           title={item.name}
                           onClick={() => setActiveMenu(item.key)}
@@ -181,27 +181,27 @@ export default function AccountSetting({
           </div>
         </div>
         <div className='relative flex w-[824px]'>
-          <div className='absolute top-6 -right-11 flex flex-col items-center z-[9999]'>
+          <div className='absolute -right-11 top-6 z-[9999] flex flex-col items-center'>
             <Button
               variant='tertiary'
               size='large'
               className='px-2'
               onClick={onCancel}
             >
-              <RiCloseLine className='w-5 h-5' />
+              <RiCloseLine className='h-5 w-5' />
             </Button>
-            <div className='mt-1 text-text-tertiary system-2xs-medium-uppercase'>ESC</div>
+            <div className='text-text-tertiary system-2xs-medium-uppercase mt-1'>ESC</div>
           </div>
-          <div ref={scrollRef} className='w-full pb-4 bg-components-panel-bg overflow-y-auto'>
-            <div className={cn('sticky top-0 mx-8 pt-[27px] pb-2 mb-[18px] flex items-center bg-components-panel-bg z-20', scrolled && 'border-b border-divider-regular')}>
-              <div className='shrink-0 text-text-primary title-2xl-semi-bold'>{activeItem?.name}</div>
+          <div ref={scrollRef} className='bg-components-panel-bg w-full overflow-y-auto pb-4'>
+            <div className={cn('bg-components-panel-bg sticky top-0 z-20 mx-8 mb-[18px] flex items-center pb-2 pt-[27px]', scrolled && 'border-divider-regular border-b')}>
+              <div className='text-text-primary title-2xl-semi-bold shrink-0'>{activeItem?.name}</div>
               {
                 activeItem?.description && (
-                  <div className='shrink-0 ml-2 text-xs text-text-tertiary'>{activeItem?.description}</div>
+                  <div className='text-text-tertiary ml-2 shrink-0 text-xs'>{activeItem?.description}</div>
                 )
               }
               {activeItem?.key === 'provider' && (
-                <div className='grow flex justify-end'>
+                <div className='flex grow justify-end'>
                   <Input
                     showLeftIcon
                     wrapperClassName='!w-[200px]'
@@ -212,7 +212,7 @@ export default function AccountSetting({
                 </div>
               )}
             </div>
-            <div className='px-4 sm:px-8 pt-2'>
+            <div className='px-4 pt-2 sm:px-8'>
               {activeMenu === 'provider' && <ModelProviderPage searchText={searchValue} />}
               {activeMenu === 'members' && <MembersPage />}
               {activeMenu === 'billing' && <BillingPage />}
diff --git a/web/app/components/header/account-setting/key-validator/KeyInput.tsx b/web/app/components/header/account-setting/key-validator/KeyInput.tsx
index e8551c4ef0..8930d3cbfd 100644
--- a/web/app/components/header/account-setting/key-validator/KeyInput.tsx
+++ b/web/app/components/header/account-setting/key-validator/KeyInput.tsx
@@ -53,14 +53,14 @@ const KeyInput = ({
     <div className={className}>
       <div className="mb-2 text-[13px] font-medium text-gray-800">{name}</div>
       <div className='
-        flex items-center px-3 bg-white rounded-lg
-        shadow-xs
+        shadow-xs flex items-center rounded-lg bg-white
+        px-3
       '>
         <input
           className='
-            w-full py-[9px] mr-2
-            text-xs font-medium text-gray-700 leading-[18px]
-            appearance-none outline-none bg-transparent
+            mr-2 w-full appearance-none
+            bg-transparent py-[9px] text-xs font-medium
+            leading-[18px] text-gray-700 outline-none
           '
           value={value}
           placeholder={placeholder}
diff --git a/web/app/components/header/account-setting/key-validator/Operate.tsx b/web/app/components/header/account-setting/key-validator/Operate.tsx
index 99863fc43c..00ce5293ae 100644
--- a/web/app/components/header/account-setting/key-validator/Operate.tsx
+++ b/web/app/components/header/account-setting/key-validator/Operate.tsx
@@ -27,15 +27,15 @@ const Operate = ({
     return (
       <div className='flex items-center'>
         <div className='
-          flex items-center
-          mr-[5px] px-3 h-7 rounded-md cursor-pointer
+          mr-[5px] flex
+          h-7 cursor-pointer items-center rounded-md px-3
           text-xs font-medium text-gray-700
         ' onClick={onCancel} >
           {t('common.operation.cancel')}
         </div>
         <div className='
-          flex items-center
-          px-3 h-7 rounded-md cursor-pointer bg-primary-700
+          bg-primary-700 flex
+          h-7 cursor-pointer items-center rounded-md px-3
           text-xs font-medium text-white
         ' onClick={onSave}>
           {t('common.operation.save')}
@@ -47,8 +47,8 @@ const Operate = ({
   if (status === 'add') {
     return (
       <div className={
-        `px-3 h-[28px] bg-white border border-gray-200 rounded-md cursor-pointer
-        text-xs font-medium text-gray-700 flex items-center ${disabled && 'opacity-50 cursor-default'}}`
+        `flex h-[28px] cursor-pointer items-center rounded-md border border-gray-200
+        bg-white px-3 text-xs font-medium text-gray-700 ${disabled && 'cursor-default opacity-50'}}`
       } onClick={() => !disabled && onAdd()}>
         {t('common.provider.addKey')}
       </div>
@@ -60,7 +60,7 @@ const Operate = ({
       <div className='flex items-center'>
         {
           status === 'fail' && (
-            <div className='flex items-center mr-4'>
+            <div className='mr-4 flex items-center'>
               <div className='text-xs text-[#D92D20]'>{t('common.provider.invalidApiKey')}</div>
               <Indicator color='red' className='ml-2' />
             </div>
@@ -72,8 +72,8 @@ const Operate = ({
           )
         }
         <div className={
-          `px-3 h-[28px] bg-white border border-gray-200 rounded-md cursor-pointer
-          text-xs font-medium text-gray-700 flex items-center ${disabled && 'opacity-50 cursor-default'}}`
+          `flex h-[28px] cursor-pointer items-center rounded-md border border-gray-200
+          bg-white px-3 text-xs font-medium text-gray-700 ${disabled && 'cursor-default opacity-50'}}`
         } onClick={() => !disabled && onEdit()}>
           {t('common.provider.editKey')}
         </div>
diff --git a/web/app/components/header/account-setting/key-validator/ValidateStatus.tsx b/web/app/components/header/account-setting/key-validator/ValidateStatus.tsx
index 94d2ff3f2f..4ee0e98760 100644
--- a/web/app/components/header/account-setting/key-validator/ValidateStatus.tsx
+++ b/web/app/components/header/account-setting/key-validator/ValidateStatus.tsx
@@ -5,17 +5,17 @@ import {
 import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
 
 export const ValidatedErrorIcon = () => {
-  return <RiErrorWarningFill className='w-4 h-4 text-[#D92D20]' />
+  return <RiErrorWarningFill className='h-4 w-4 text-[#D92D20]' />
 }
 
 export const ValidatedSuccessIcon = () => {
-  return <CheckCircle className='w-4 h-4 text-[#039855]' />
+  return <CheckCircle className='h-4 w-4 text-[#039855]' />
 }
 
 export const ValidatingTip = () => {
   const { t } = useTranslation()
   return (
-    <div className={'mt-2 text-primary-600 text-xs font-normal'}>
+    <div className={'text-primary-600 mt-2 text-xs font-normal'}>
       {t('common.provider.validating')}
     </div>
   )
@@ -25,7 +25,7 @@ export const ValidatedErrorMessage = ({ errorMessage }: { errorMessage: string }
   const { t } = useTranslation()
 
   return (
-    <div className={'mt-2 text-[#D92D20] text-xs font-normal'}>
+    <div className={'mt-2 text-xs font-normal text-[#D92D20]'}>
       {t('common.provider.validatedError')}{errorMessage}
     </div>
   )
diff --git a/web/app/components/header/account-setting/key-validator/index.tsx b/web/app/components/header/account-setting/key-validator/index.tsx
index f2abcc5253..06d3fcde98 100644
--- a/web/app/components/header/account-setting/key-validator/index.tsx
+++ b/web/app/components/header/account-setting/key-validator/index.tsx
@@ -75,9 +75,9 @@ const KeyValidator = ({
   }
 
   return (
-    <div className='mb-2 border-[0.5px] border-gray-200 bg-gray-50 rounded-md'>
+    <div className='mb-2 rounded-md border-[0.5px] border-gray-200 bg-gray-50'>
       <div className={
-        `flex items-center justify-between px-4 h-[52px] cursor-pointer ${isOpen && 'border-b-[0.5px] border-b-gray-200'}`
+        `flex h-[52px] cursor-pointer items-center justify-between px-4 ${isOpen && 'border-b-[0.5px] border-b-gray-200'}`
       }>
         {title}
         <Operate
@@ -108,9 +108,9 @@ const KeyValidator = ({
                 />
               ))
             }
-            <a className="flex items-center text-xs cursor-pointer text-primary-600" href={keyFrom.link} target='_blank' rel='noopener noreferrer'>
+            <a className="text-primary-600 flex cursor-pointer items-center text-xs" href={keyFrom.link} target='_blank' rel='noopener noreferrer'>
               {keyFrom.text}
-              <LinkExternal02 className='w-3 h-3 ml-1 text-primary-600' />
+              <LinkExternal02 className='text-primary-600 ml-1 h-3 w-3' />
             </a>
           </div>
         )
diff --git a/web/app/components/header/account-setting/members-page/index.tsx b/web/app/components/header/account-setting/members-page/index.tsx
index 366a8a92ba..ca9f912fcc 100644
--- a/web/app/components/header/account-setting/members-page/index.tsx
+++ b/web/app/components/header/account-setting/members-page/index.tsx
@@ -47,9 +47,9 @@ const MembersPage = () => {
   return (
     <>
       <div className='flex flex-col'>
-        <div className='flex items-center mb-4 p-3 gap-1 bg-gray-50 rounded-2xl'>
-          <LogoEmbeddedChatHeader className='!w-10 !h-10' />
-          <div className='grow mx-2'>
+        <div className='mb-4 flex items-center gap-1 rounded-2xl bg-gray-50 p-3'>
+          <LogoEmbeddedChatHeader className='!h-10 !w-10' />
+          <div className='mx-2 grow'>
             <div className='text-sm font-medium text-gray-900'>{currentWorkspace?.name}</div>
             {enableBilling && (
               <div className='text-xs text-gray-500'>
@@ -76,41 +76,41 @@ const MembersPage = () => {
             <UpgradeBtn className='mr-2' loc='member-invite' />
           )}
           <div className={
-            `shrink-0 flex items-center py-[7px] px-3 border-[0.5px] border-gray-200
-            text-[13px] font-medium text-primary-600 bg-white
-            shadow-xs rounded-lg ${(isCurrentWorkspaceManager && !isMemberFull) ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}`
+            `text-primary-600 shadow-xs flex shrink-0 items-center rounded-lg border-[0.5px]
+            border-gray-200 bg-white px-3 py-[7px]
+            text-[13px] font-medium ${(isCurrentWorkspaceManager && !isMemberFull) ? 'cursor-pointer' : 'cursor-default opacity-50 grayscale'}`
           } onClick={() => (isCurrentWorkspaceManager && !isMemberFull) && setInviteModalVisible(true)}>
-            <RiUserAddLine className='w-4 h-4 mr-2 ' />
+            <RiUserAddLine className='mr-2 h-4 w-4 ' />
             {t('common.members.invite')}
           </div>
         </div>
         <div className='overflow-visible lg:overflow-visible'>
-          <div className='flex items-center py-[7px] border-b border-divider-regular min-w-[480px]'>
-            <div className='grow px-3 system-xs-medium-uppercase text-text-tertiary'>{t('common.members.name')}</div>
-            <div className='shrink-0 w-[104px] system-xs-medium-uppercase text-text-tertiary'>{t('common.members.lastActive')}</div>
-            <div className='shrink-0 w-[96px] px-3 system-xs-medium-uppercase text-text-tertiary'>{t('common.members.role')}</div>
+          <div className='border-divider-regular flex min-w-[480px] items-center border-b py-[7px]'>
+            <div className='system-xs-medium-uppercase text-text-tertiary grow px-3'>{t('common.members.name')}</div>
+            <div className='system-xs-medium-uppercase text-text-tertiary w-[104px] shrink-0'>{t('common.members.lastActive')}</div>
+            <div className='system-xs-medium-uppercase text-text-tertiary w-[96px] shrink-0 px-3'>{t('common.members.role')}</div>
           </div>
-          <div className='min-w-[480px] relative'>
+          <div className='relative min-w-[480px]'>
             {
               accounts.map(account => (
-                <div key={account.id} className='flex border-b border-divider-subtle'>
-                  <div className='grow flex items-center py-2 px-3'>
+                <div key={account.id} className='border-divider-subtle flex border-b'>
+                  <div className='flex grow items-center px-3 py-2'>
                     <Avatar avatar={account.avatar_url} size={24} className='mr-2' name={account.name} />
                     <div className=''>
                       <div className='text-text-secondary system-sm-medium'>
                         {account.name}
-                        {account.status === 'pending' && <span className='ml-1 system-xs-regular text-[#DC6803]'>{t('common.members.pending')}</span>}
+                        {account.status === 'pending' && <span className='system-xs-regular ml-1 text-[#DC6803]'>{t('common.members.pending')}</span>}
                         {userProfile.email === account.email && <span className='system-xs-regular text-text-tertiary'>{t('common.members.you')}</span>}
                       </div>
                       <div className='text-text-tertiary system-xs-regular'>{account.email}</div>
                     </div>
                   </div>
-                  <div className='shrink-0 flex items-center w-[104px] py-2 system-xs-regular text-text-secondary'>{dayjs(Number((account.last_active_at || account.created_at)) * 1000).locale(locale === 'zh-Hans' ? 'zh-cn' : 'en').fromNow()}</div>
-                  <div className='shrink-0 w-[96px] flex items-center'>
+                  <div className='system-xs-regular text-text-secondary flex w-[104px] shrink-0 items-center py-2'>{dayjs(Number((account.last_active_at || account.created_at)) * 1000).locale(locale === 'zh-Hans' ? 'zh-cn' : 'en').fromNow()}</div>
+                  <div className='flex w-[96px] shrink-0 items-center'>
                     {
                       ((isCurrentWorkspaceOwner && account.role !== 'owner') || (isCurrentWorkspaceManager && !['owner', 'admin'].includes(account.role)))
                         ? <Operation member={account} operatorRole={currentWorkspace.role} onOperate={mutate} />
-                        : <div className='px-3 system-xs-regular text-text-secondary'>{RoleMap[account.role] || RoleMap.normal}</div>
+                        : <div className='system-xs-regular text-text-secondary px-3'>{RoleMap[account.role] || RoleMap.normal}</div>
                     }
                   </div>
                 </div>
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
index 197e3ee867..1eb44ce52e 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
@@ -58,18 +58,18 @@ const InviteModal = ({
   return (
     <div className={cn(s.wrap)}>
       <Modal overflowVisible isShow onClose={() => { }} className={cn(s.modal)}>
-        <div className='flex justify-between mb-2'>
+        <div className='mb-2 flex justify-between'>
           <div className='text-xl font-semibold text-gray-900'>{t('common.members.inviteTeamMember')}</div>
-          <XMarkIcon className='w-4 h-4 cursor-pointer' onClick={onCancel} />
+          <XMarkIcon className='h-4 w-4 cursor-pointer' onClick={onCancel} />
         </div>
         <div className='mb-3 text-[13px] text-gray-500'>{t('common.members.inviteTeamMemberTip')}</div>
         {!isEmailSetup && (
           <div className='grow basis-0 overflow-y-auto pb-4'>
-            <div className='relative mb-1 p-2 rounded-xl border border-components-panel-border shadow-xs'>
-              <div className='absolute top-0 left-0 w-full h-full rounded-xl opacity-40' style={{ background: 'linear-gradient(92deg, rgba(255, 171, 0, 0.25) 18.12%, rgba(255, 255, 255, 0.00) 167.31%)' }}></div>
-              <div className='relative flex items-start w-full h-full'>
-                <div className='shrink-0 mr-0.5 p-0.5'>
-                  <RiErrorWarningFill className='w-5 h-5 text-text-warning' />
+            <div className='border-components-panel-border shadow-xs relative mb-1 rounded-xl border p-2'>
+              <div className='absolute left-0 top-0 h-full w-full rounded-xl opacity-40' style={{ background: 'linear-gradient(92deg, rgba(255, 171, 0, 0.25) 18.12%, rgba(255, 255, 255, 0.00) 167.31%)' }}></div>
+              <div className='relative flex h-full w-full items-start'>
+                <div className='mr-0.5 shrink-0 p-0.5'>
+                  <RiErrorWarningFill className='text-text-warning h-5 w-5' />
                 </div>
                 <div className='text-text-primary system-xs-medium'>
                   <span>{t('common.members.emailNotSetup')}</span>
@@ -81,10 +81,10 @@ const InviteModal = ({
 
         <div>
           <div className='mb-2 text-sm font-medium text-gray-900'>{t('common.members.email')}</div>
-          <div className='mb-8 h-36 flex items-stretch'>
+          <div className='mb-8 flex h-36 items-stretch'>
             <ReactMultiEmail
-              className={cn('w-full pt-2 px-3 outline-none border-none',
-                'appearance-none text-sm text-gray-900 rounded-lg overflow-y-auto',
+              className={cn('w-full border-none px-3 pt-2 outline-none',
+                'appearance-none overflow-y-auto rounded-lg text-sm text-gray-900',
                 s.emailsInput,
               )}
               autoFocus
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx b/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
index d3bbc60cae..eccf87c3a5 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
@@ -34,53 +34,53 @@ const RoleSelector = ({ value, onChange }: RoleSelectorProps) => {
           onClick={() => setOpen(v => !v)}
           className='block'
         >
-          <div className={cn('flex items-center px-3 py-2 rounded-lg bg-gray-100 cursor-pointer hover:bg-gray-200', open && 'bg-gray-200')}>
-            <div className='grow mr-2 text-gray-900 text-sm leading-5'>{t('common.members.invitedAsRole', { role: t(`common.members.${toHump(value)}`) })}</div>
-            <RiArrowDownSLine className='shrink-0 w-4 h-4 text-gray-700' />
+          <div className={cn('flex cursor-pointer items-center rounded-lg bg-gray-100 px-3 py-2 hover:bg-gray-200', open && 'bg-gray-200')}>
+            <div className='mr-2 grow text-sm leading-5 text-gray-900'>{t('common.members.invitedAsRole', { role: t(`common.members.${toHump(value)}`) })}</div>
+            <RiArrowDownSLine className='h-4 w-4 shrink-0 text-gray-700' />
           </div>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1002]'>
-          <div className='relative w-[336px] bg-white rounded-lg border-[0.5px] bg-gray-200 shadow-lg'>
+          <div className='relative w-[336px] rounded-lg border-[0.5px] bg-gray-200 bg-white shadow-lg'>
             <div className='p-1'>
-              <div className='p-2 rounded-lg hover:bg-gray-50 cursor-pointer' onClick={() => {
+              <div className='cursor-pointer rounded-lg p-2 hover:bg-gray-50' onClick={() => {
                 onChange('normal')
                 setOpen(false)
               }}>
                 <div className='relative pl-5'>
-                  <div className='text-gray-700 text-sm leading-5'>{t('common.members.normal')}</div>
-                  <div className='text-gray-500 text-xs leading-[18px]'>{t('common.members.normalTip')}</div>
-                  {value === 'normal' && <Check className='absolute top-0.5 left-0 w-4 h-4 text-primary-600'/>}
+                  <div className='text-sm leading-5 text-gray-700'>{t('common.members.normal')}</div>
+                  <div className='text-xs leading-[18px] text-gray-500'>{t('common.members.normalTip')}</div>
+                  {value === 'normal' && <Check className='text-primary-600 absolute left-0 top-0.5 h-4 w-4'/>}
                 </div>
               </div>
-              <div className='p-2 rounded-lg hover:bg-gray-50 cursor-pointer' onClick={() => {
+              <div className='cursor-pointer rounded-lg p-2 hover:bg-gray-50' onClick={() => {
                 onChange('editor')
                 setOpen(false)
               }}>
                 <div className='relative pl-5'>
-                  <div className='text-gray-700 text-sm leading-5'>{t('common.members.editor')}</div>
-                  <div className='text-gray-500 text-xs leading-[18px]'>{t('common.members.editorTip')}</div>
-                  {value === 'editor' && <Check className='absolute top-0.5 left-0 w-4 h-4 text-primary-600'/>}
+                  <div className='text-sm leading-5 text-gray-700'>{t('common.members.editor')}</div>
+                  <div className='text-xs leading-[18px] text-gray-500'>{t('common.members.editorTip')}</div>
+                  {value === 'editor' && <Check className='text-primary-600 absolute left-0 top-0.5 h-4 w-4'/>}
                 </div>
               </div>
-              <div className='p-2 rounded-lg hover:bg-gray-50 cursor-pointer' onClick={() => {
+              <div className='cursor-pointer rounded-lg p-2 hover:bg-gray-50' onClick={() => {
                 onChange('admin')
                 setOpen(false)
               }}>
                 <div className='relative pl-5'>
-                  <div className='text-gray-700 text-sm leading-5'>{t('common.members.admin')}</div>
-                  <div className='text-gray-500 text-xs leading-[18px]'>{t('common.members.adminTip')}</div>
-                  {value === 'admin' && <Check className='absolute top-0.5 left-0 w-4 h-4 text-primary-600'/>}
+                  <div className='text-sm leading-5 text-gray-700'>{t('common.members.admin')}</div>
+                  <div className='text-xs leading-[18px] text-gray-500'>{t('common.members.adminTip')}</div>
+                  {value === 'admin' && <Check className='text-primary-600 absolute left-0 top-0.5 h-4 w-4'/>}
                 </div>
               </div>
               {datasetOperatorEnabled && (
-                <div className='p-2 rounded-lg hover:bg-gray-50 cursor-pointer' onClick={() => {
+                <div className='cursor-pointer rounded-lg p-2 hover:bg-gray-50' onClick={() => {
                   onChange('dataset_operator')
                   setOpen(false)
                 }}>
                   <div className='relative pl-5'>
-                    <div className='text-gray-700 text-sm leading-5'>{t('common.members.datasetOperator')}</div>
-                    <div className='text-gray-500 text-xs leading-[18px]'>{t('common.members.datasetOperatorTip')}</div>
-                    {value === 'dataset_operator' && <Check className='absolute top-0.5 left-0 w-4 h-4 text-primary-600'/>}
+                    <div className='text-sm leading-5 text-gray-700'>{t('common.members.datasetOperator')}</div>
+                    <div className='text-xs leading-[18px] text-gray-500'>{t('common.members.datasetOperatorTip')}</div>
+                    {value === 'dataset_operator' && <Check className='text-primary-600 absolute left-0 top-0.5 h-4 w-4'/>}
                   </div>
                 </div>
               )}
diff --git a/web/app/components/header/account-setting/members-page/invited-modal/index.tsx b/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
index fc64d46b06..e2f7727868 100644
--- a/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
@@ -30,15 +30,15 @@ const InvitedModal = ({
   return (
     <div className={s.wrap}>
       <Modal isShow onClose={() => {}} className={s.modal}>
-        <div className='flex justify-between mb-3'>
+        <div className='mb-3 flex justify-between'>
           <div className='
-            w-12 h-12 flex items-center justify-center rounded-xl
-            bg-white border-[0.5px] border-gray-100
+            flex h-12 w-12 items-center justify-center rounded-xl
+            border-[0.5px] border-gray-100 bg-white
             shadow-xl
           '>
-            <CheckCircleIcon className='w-[22px] h-[22px] text-[#039855]' />
+            <CheckCircleIcon className='h-[22px] w-[22px] text-[#039855]' />
           </div>
-          <XMarkIcon className='w-4 h-4 cursor-pointer' onClick={onCancel} />
+          <XMarkIcon className='h-4 w-4 cursor-pointer' onClick={onCancel} />
         </div>
         <div className='mb-1 text-xl font-semibold text-gray-900'>{t('common.members.invitationSent')}</div>
         {!IS_CE_EDITION && (
@@ -47,11 +47,11 @@ const InvitedModal = ({
         {IS_CE_EDITION && (
           <>
             <div className='mb-5 text-sm text-gray-500'>{t('common.members.invitationSentTip')}</div>
-            <div className='flex flex-col gap-2 mb-9'>
+            <div className='mb-9 flex flex-col gap-2'>
               {
                 !!successInvitationResults.length
                 && <>
-                  <div className='py-2 text-sm font-Medium text-gray-900'>{t('common.members.invitationLink')}</div>
+                  <div className='font-Medium py-2 text-sm text-gray-900'>{t('common.members.invitationLink')}</div>
                   {successInvitationResults.map(item =>
                     <InvitationLink key={item.email} value={item} />)}
                 </>
@@ -59,17 +59,17 @@ const InvitedModal = ({
               {
                 !!failedInvitationResults.length
                 && <>
-                  <div className='py-2 text-sm font-Medium text-gray-900'>{t('common.members.failedInvitationEmails')}</div>
+                  <div className='font-Medium py-2 text-sm text-gray-900'>{t('common.members.failedInvitationEmails')}</div>
                   <div className='flex flex-wrap justify-between gap-y-1'>
                     {
                       failedInvitationResults.map(item =>
-                        <div key={item.email} className='flex justify-center border border-red-300 rounded-md px-1 bg-orange-50'>
+                        <div key={item.email} className='flex justify-center rounded-md border border-red-300 bg-orange-50 px-1'>
                           <Tooltip
                             popupContent={item.message}
                           >
-                            <div className='flex justify-center items-center text-sm gap-1'>
+                            <div className='flex items-center justify-center gap-1 text-sm'>
                               {item.email}
-                              <RiQuestionLine className='w-4 h-4 text-red-300' />
+                              <RiQuestionLine className='h-4 w-4 text-red-300' />
                             </div>
                           </Tooltip>
                         </div>,
diff --git a/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx b/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx
index fc0ffdd740..c070383976 100644
--- a/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx
+++ b/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx
@@ -35,21 +35,21 @@ const InvitationLink = ({
   }, [isCopied])
 
   return (
-    <div className='flex rounded-lg bg-gray-100 hover:bg-gray-100 border border-gray-200 py-2 items-center'>
-      <div className="flex items-center flex-grow h-5">
-        <div className='flex-grow bg-gray-100 text-[13px] relative h-full'>
+    <div className='flex items-center rounded-lg border border-gray-200 bg-gray-100 py-2 hover:bg-gray-100'>
+      <div className="flex h-5 grow items-center">
+        <div className='relative h-full grow bg-gray-100 text-[13px]'>
           <Tooltip
             popupContent={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
           >
-            <div className='absolute top-0 left-0 w-full pl-2 pr-2 truncate cursor-pointer r-0' onClick={copyHandle}>{value.url}</div>
+            <div className='r-0 absolute left-0 top-0 w-full cursor-pointer truncate pl-2 pr-2' onClick={copyHandle}>{value.url}</div>
           </Tooltip>
         </div>
-        <div className="flex-shrink-0 h-4 bg-gray-200 border" />
+        <div className="h-4 shrink-0 border bg-gray-200" />
         <Tooltip
           popupContent={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
         >
-          <div className="px-0.5 flex-shrink-0">
-            <div className={`box-border w-[30px] h-[30px] flex items-center justify-center rounded-lg hover:bg-gray-100 cursor-pointer ${s.copyIcon} ${isCopied ? s.copied : ''}`} onClick={copyHandle}>
+          <div className="shrink-0 px-0.5">
+            <div className={`box-border flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-lg hover:bg-gray-100 ${s.copyIcon} ${isCopied ? s.copied : ''}`} onClick={copyHandle}>
             </div>
           </div>
         </Tooltip>
diff --git a/web/app/components/header/account-setting/members-page/operation/index.tsx b/web/app/components/header/account-setting/members-page/operation/index.tsx
index 232c30776d..73267fce0a 100644
--- a/web/app/components/header/account-setting/members-page/operation/index.tsx
+++ b/web/app/components/header/account-setting/members-page/operation/index.tsx
@@ -86,19 +86,19 @@ const Operation = ({
   }
 
   return (
-    <Menu as="div" className="relative w-full h-full">
+    <Menu as="div" className="relative h-full w-full">
       {
         ({ open }) => (
           <>
             <MenuButton className={cn(
               `
-                  group flex items-center justify-between w-full h-full
-                  hover:bg-gray-100 cursor-pointer ${open && 'bg-gray-100'}
-                  text-[13px] text-gray-700 px-3
+                  group flex h-full w-full cursor-pointer items-center
+                  justify-between hover:bg-gray-100 ${open && 'bg-gray-100'}
+                  px-3 text-[13px] text-gray-700
                 `,
             )}>
               {RoleMap[member.role] || RoleMap.normal}
-              <ChevronDownIcon className={`w-4 h-4 group-hover:block ${open ? 'block' : 'hidden'}`} />
+              <ChevronDownIcon className={`h-4 w-4 group-hover:block ${open ? 'block' : 'hidden'}`} />
             </MenuButton>
             <Transition
               as={Fragment}
@@ -112,8 +112,8 @@ const Operation = ({
               <MenuItems
                 className={cn(
                   `
-                      absolute right-0 top-[52px] z-10 bg-white border-[0.5px] border-gray-200
-                      divide-y divide-gray-100 origin-top-right rounded-lg
+                      absolute right-0 top-[52px] z-10 origin-top-right divide-y divide-gray-100
+                      rounded-lg border-[0.5px] border-gray-200 bg-white
                     `,
                   s.popup,
                 )}
diff --git a/web/app/components/header/account-setting/menu-dialog.tsx b/web/app/components/header/account-setting/menu-dialog.tsx
index c1d0c46d4d..aedd3928c1 100644
--- a/web/app/components/header/account-setting/menu-dialog.tsx
+++ b/web/app/components/header/account-setting/menu-dialog.tsx
@@ -34,15 +34,15 @@ const MenuDialog = ({
     <Transition appear show={show} as={Fragment}>
       <Dialog as="div" className="relative z-[60]" onClose={() => { }}>
         <div className="fixed inset-0">
-          <div className="flex flex-col items-center justify-center min-h-full">
+          <div className="flex min-h-full flex-col items-center justify-center">
             <DialogPanel className={cn(
-              'grow relative w-full h-full p-0 overflow-hidden text-left align-middle transition-all transform bg-background-sidenav-bg backdrop-blur-md',
-              'data-[closed]:opacity-0  data-[closed]:scale-95',
-              'data-[enter]:ease-out data-[enter]:duration-300 data-[enter]:opacity-100 data-[enter]:scale-100',
-              'data-[leave]:ease-in data-[leave]:duration-200 data-[leave]:opacity-0 data-[enter]:scale-95',
+              'bg-background-sidenav-bg relative h-full w-full grow overflow-hidden p-0 text-left align-middle backdrop-blur-md transition-all',
+              'data-[closed]:scale-95  data-[closed]:opacity-0',
+              'data-[enter]:scale-100 data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
+              'data-[enter]:scale-95 data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
               className,
             )}>
-              <div className='absolute top-0 right-0 h-full w-1/2 bg-components-panel-bg' />
+              <div className='bg-components-panel-bg absolute right-0 top-0 h-full w-1/2' />
               {children}
             </DialogPanel>
           </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/index.tsx b/web/app/components/header/account-setting/model-provider-page/index.tsx
index 949352a265..b9f6c31135 100644
--- a/web/app/components/header/account-setting/model-provider-page/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/index.tsx
@@ -97,17 +97,17 @@ const ModelProviderPage = ({ searchText }: Props) => {
   }, [])
 
   return (
-    <div className='relative pt-1 -mt-2'>
-      <div className={cn('flex items-center mb-2')}>
-        <div className='grow text-text-primary system-md-semibold'>{t('common.modelProvider.models')}</div>
+    <div className='relative -mt-2 pt-1'>
+      <div className={cn('mb-2 flex items-center')}>
+        <div className='text-text-primary system-md-semibold grow'>{t('common.modelProvider.models')}</div>
         <div className={cn(
-          'shrink-0 relative flex items-center justify-end gap-2 p-px rounded-lg border border-transparent',
-          defaultModelNotConfigured && 'pl-2 bg-components-panel-bg-blur border-components-panel-border shadow-xs',
+          'relative flex shrink-0 items-center justify-end gap-2 rounded-lg border border-transparent p-px',
+          defaultModelNotConfigured && 'bg-components-panel-bg-blur border-components-panel-border shadow-xs pl-2',
         )}>
-          {defaultModelNotConfigured && <div className='absolute top-0 bottom-0 right-0 left-0 opacity-40' style={{ background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)' }} />}
+          {defaultModelNotConfigured && <div className='absolute bottom-0 left-0 right-0 top-0 opacity-40' style={{ background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)' }} />}
           {defaultModelNotConfigured && (
-            <div className='flex items-center gap-1 text-text-primary system-xs-medium'>
-              <RiAlertFill className='w-4 h-4 text-text-warning-secondary' />
+            <div className='text-text-primary system-xs-medium flex items-center gap-1'>
+              <RiAlertFill className='text-text-warning-secondary h-4 w-4' />
               {t('common.modelProvider.notConfigured')}
             </div>
           )}
@@ -122,12 +122,12 @@ const ModelProviderPage = ({ searchText }: Props) => {
         </div>
       </div>
       {!filteredConfiguredProviders?.length && (
-        <div className='mb-2 p-4 rounded-[10px] bg-workflow-process-bg'>
-          <div className='w-10 h-10 flex items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur'>
-            <RiBrainLine className='w-5 h-5 text-text-primary' />
+        <div className='bg-workflow-process-bg mb-2 rounded-[10px] p-4'>
+          <div className='border-components-card-border bg-components-card-bg flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] shadow-lg backdrop-blur'>
+            <RiBrainLine className='text-text-primary h-5 w-5' />
           </div>
-          <div className='mt-2 text-text-secondary system-sm-medium'>{t('common.modelProvider.emptyProviderTitle')}</div>
-          <div className='mt-1 text-text-tertiary system-xs-regular'>{t('common.modelProvider.emptyProviderTip')}</div>
+          <div className='text-text-secondary system-sm-medium mt-2'>{t('common.modelProvider.emptyProviderTitle')}</div>
+          <div className='text-text-tertiary system-xs-regular mt-1'>{t('common.modelProvider.emptyProviderTip')}</div>
         </div>
       )}
       {!!filteredConfiguredProviders?.length && (
@@ -143,7 +143,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
       )}
       {!!filteredNotConfiguredProviders?.length && (
         <>
-          <div className='flex items-center mb-2 pt-2 text-text-primary system-md-semibold'>{t('common.modelProvider.toBeConfigured')}</div>
+          <div className='text-text-primary system-md-semibold mb-2 flex items-center pt-2'>{t('common.modelProvider.toBeConfigured')}</div>
           <div className='relative'>
             {filteredNotConfiguredProviders?.map(provider => (
               <ProviderAddedCard
@@ -159,15 +159,15 @@ const ModelProviderPage = ({ searchText }: Props) => {
       <div className='mb-2'>
         <Divider className='!mt-4 h-px' />
         <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-1 text-text-primary system-md-semibold cursor-pointer' onClick={() => setCollapse(!collapse)}>
-            <RiArrowDownSLine className={cn('w-4 h-4', collapse && '-rotate-90')} />
+          <div className='text-text-primary system-md-semibold flex cursor-pointer items-center gap-1' onClick={() => setCollapse(!collapse)}>
+            <RiArrowDownSLine className={cn('h-4 w-4', collapse && '-rotate-90')} />
             {t('common.modelProvider.installProvider')}
           </div>
-          <div className='flex items-center mb-2 pt-2'>
-            <span className='pr-1 text-text-tertiary system-sm-regular'>{t('common.modelProvider.discoverMore')}</span>
-            <Link target="_blank" href={`${MARKETPLACE_URL_PREFIX}`} className='inline-flex items-center system-sm-medium text-text-accent'>
+          <div className='mb-2 flex items-center pt-2'>
+            <span className='text-text-tertiary system-sm-regular pr-1'>{t('common.modelProvider.discoverMore')}</span>
+            <Link target="_blank" href={`${MARKETPLACE_URL_PREFIX}`} className='system-sm-medium text-text-accent inline-flex items-center'>
               {t('plugin.marketplace.difyMarketplace')}
-              <RiArrowRightUpLine className='w-4 h-4' />
+              <RiArrowRightUpLine className='h-4 w-4' />
             </Link>
           </div>
         </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
index 9d5a2980d2..9887a14c34 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
@@ -23,13 +23,13 @@ const ModelIcon: FC<ModelIconProps> = ({
 }) => {
   const language = useLanguage()
   if (provider?.provider.includes('openai') && modelName?.includes('gpt-4o'))
-    return <div className='flex items-center justify-center'><OpenaiBlue className={cn('w-5 h-5', className)} /></div>
+    return <div className='flex items-center justify-center'><OpenaiBlue className={cn('h-5 w-5', className)} /></div>
   if (provider?.provider.includes('openai') && modelName?.startsWith('gpt-4'))
-    return <div className='flex items-center justify-center'><OpenaiViolet className={cn('w-5 h-5', className)} /></div>
+    return <div className='flex items-center justify-center'><OpenaiViolet className={cn('h-5 w-5', className)} /></div>
 
   if (provider?.icon_small) {
     return (
-      <div className={cn('flex items-center justify-center w-5 h-5', isDeprecated && 'opacity-50', className)}>
+      <div className={cn('flex h-5 w-5 items-center justify-center', isDeprecated && 'opacity-50', className)}>
         <img alt='model-icon' src={renderI18nObject(provider.icon_small, language)} />
       </div>
     )
@@ -37,11 +37,11 @@ const ModelIcon: FC<ModelIconProps> = ({
 
   return (
     <div className={cn(
-      'flex items-center justify-center rounded-md border-[0.5px] w-5 h-5 border-components-panel-border-subtle bg-background-default-subtle',
+      'border-components-panel-border-subtle bg-background-default-subtle flex h-5 w-5 items-center justify-center rounded-md border-[0.5px]',
       className,
     )}>
-      <div className='flex w-5 h-5 items-center justify-center opacity-35'>
-        <Group className='text-text-tertiary w-3 h-3' />
+      <div className='flex h-5 w-5 items-center justify-center opacity-35'>
+        <Group className='text-text-tertiary h-3 w-3' />
       </div>
     </div>
   )
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
index 0da6b863a3..d59b638076 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
@@ -153,7 +153,7 @@ function Form<
       const disabled = readonly || (isEditMode && (variable === '__model_type' || variable === '__model_name'))
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
-          <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
+          <div className={cn(fieldLabelClassName, 'system-sm-semibold text-text-secondary flex items-center py-2')}>
             {label[language] || label.en_US}
             {required && (
               <span className='ml-1 text-red-500'>*</span>
@@ -187,14 +187,14 @@ function Form<
 
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
-          <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
+          <div className={cn(fieldLabelClassName, 'system-sm-semibold text-text-secondary flex items-center py-2')}>
             {label[language] || label.en_US}
             {required && (
               <span className='ml-1 text-red-500'>*</span>
             )}
             {tooltipContent}
           </div>
-          <div className={`grid grid-cols-${options?.length} gap-3`}>
+          <div className={`grid-cols- grid${options?.length} gap-3`}>
             {options.filter((option) => {
               if (option.show_on.length)
                 return option.show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value)
@@ -203,8 +203,8 @@ function Form<
             }).map(option => (
               <div
                 className={`
-                    flex items-center gap-2 px-3 py-2 rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg cursor-pointer
-                    ${value[variable] === option.value && 'bg-components-option-card-option-selected-bg border-[1.5px] border-components-option-card-option-selected-border shadow-sm'}
+                    border-components-option-card-option-border bg-components-option-card-option-bg flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2
+                    ${value[variable] === option.value && 'bg-components-option-card-option-selected-bg border-components-option-card-option-selected-border border-[1.5px] shadow-sm'}
                     ${disabled && '!cursor-not-allowed opacity-60'}
                   `}
                 onClick={() => handleFormChange(variable, option.value)}
@@ -232,7 +232,7 @@ function Form<
 
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
-          <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
+          <div className={cn(fieldLabelClassName, 'system-sm-semibold text-text-secondary flex items-center py-2')}>
             {label[language] || label.en_US}
 
             {required && (
@@ -269,9 +269,9 @@ function Form<
 
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
-          <div className='flex items-center justify-between py-2 system-sm-semibold text-text-secondary'>
+          <div className='system-sm-semibold text-text-secondary flex items-center justify-between py-2'>
             <div className='flex items-center space-x-2'>
-              <span className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-regular text-text-secondary')}>{label[language] || label.en_US}</span>
+              <span className={cn(fieldLabelClassName, 'system-sm-regular text-text-secondary flex items-center py-2')}>{label[language] || label.en_US}</span>
               {required && (
                 <span className='ml-1 text-red-500'>*</span>
               )}
@@ -297,7 +297,7 @@ function Form<
       } = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput)
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
-          <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
+          <div className={cn(fieldLabelClassName, 'system-sm-semibold text-text-secondary flex items-center py-2')}>
             {label[language] || label.en_US}
             {required && (
               <span className='ml-1 text-red-500'>*</span>
@@ -328,7 +328,7 @@ function Form<
       } = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput)
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
-          <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
+          <div className={cn(fieldLabelClassName, 'system-sm-semibold text-text-secondary flex items-center py-2')}>
             {label[language] || label.en_US}
             {required && (
               <span className='ml-1 text-red-500'>*</span>
@@ -388,7 +388,7 @@ function Form<
 
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
-          <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
+          <div className={cn(fieldLabelClassName, 'system-sm-semibold text-text-secondary flex items-center py-2')}>
             {label[language] || label.en_US}
             {required && (
               <span className='ml-1 text-red-500'>*</span>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
index f94b708bf3..47c10e77df 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
@@ -41,11 +41,11 @@ const Input: FC<InputProps> = ({
       <input
         tabIndex={0}
         className={`
-          block px-3 w-full h-8 bg-components-input-bg-normal text-sm text-components-input-text-filled rounded-lg border border-transparent
-          appearance-none outline-none caret-primary-600
-          hover:border-components-input-border-hover hover:bg-components-input-bg-hover
-          focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs
-          placeholder:text-sm placeholder:text-text-tertiary
+          bg-components-input-bg-normal text-components-input-text-filled caret-primary-600 hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:text-text-tertiary block
+          h-8 w-full appearance-none
+          rounded-lg border
+          border-transparent px-3 text-sm
+          outline-none placeholder:text-sm
           ${validated && 'pr-[30px]'}
           ${className}
         `}
@@ -61,8 +61,8 @@ const Input: FC<InputProps> = ({
       />
       {
         validated && (
-          <div className='absolute top-2.5 right-2.5'>
-            <CheckCircle className='w-4 h-4 text-[#039855]' />
+          <div className='absolute right-2.5 top-2.5'>
+            <CheckCircle className='h-4 w-4 text-[#039855]' />
           </div>
         )
       }
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
index c9f8e44c59..2bfc111ca8 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
@@ -277,12 +277,12 @@ const ModelModal: FC<ModelModalProps> = ({
 
   return (
     <PortalToFollowElem open>
-      <PortalToFollowElemContent className='w-full h-full z-[60]'>
+      <PortalToFollowElemContent className='z-[60] h-full w-full'>
         <div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'>
-          <div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-components-panel-bg shadow-xl rounded-2xl overflow-y-auto'>
+          <div className='bg-components-panel-bg mx-2 max-h-[calc(100vh-120px)] w-[640px] overflow-y-auto rounded-2xl shadow-xl'>
             <div className='px-8 pt-8'>
-              <div className='flex items-center mb-2'>
-                <div className='text-xl font-semibold text-text-primary'>{renderTitlePrefix()}</div>
+              <div className='mb-2 flex items-center'>
+                <div className='text-text-primary text-xl font-semibold'>{renderTitlePrefix()}</div>
               </div>
 
               <Form
@@ -295,7 +295,7 @@ const ModelModal: FC<ModelModalProps> = ({
                 isEditMode={isEditMode}
               />
 
-              <div className='mt-1 mb-4 border-t-[0.5px] border-t-divider-regular' />
+              <div className='border-t-divider-regular mb-4 mt-1 border-t-[0.5px]' />
               <ModelLoadBalancingConfigs withSwitch {...{
                 draftConfig,
                 setDraftConfig,
@@ -304,18 +304,18 @@ const ModelModal: FC<ModelModalProps> = ({
                 configurationMethod: configurateMethod,
               }} />
 
-              <div className='sticky bottom-0 flex justify-between items-center mt-2 -mx-2 pt-4 px-2 pb-6 flex-wrap gap-y-2 bg-components-panel-bg'>
+              <div className='bg-components-panel-bg sticky bottom-0 -mx-2 mt-2 flex flex-wrap items-center justify-between gap-y-2 px-2 pb-6 pt-4'>
                 {
                   (provider.help && (provider.help.title || provider.help.url))
                     ? (
                       <a
                         href={provider.help?.url[language] || provider.help?.url.en_US}
                         target='_blank' rel='noopener noreferrer'
-                        className='inline-flex items-center text-xs text-primary-600'
+                        className='text-primary-600 inline-flex items-center text-xs'
                         onClick={e => !provider.help.url && e.preventDefault()}
                       >
                         {provider.help.title?.[language] || provider.help.url[language] || provider.help.title?.en_US || provider.help.url.en_US}
-                        <LinkExternal02 className='ml-1 w-3 h-3' />
+                        <LinkExternal02 className='ml-1 h-3 w-3' />
                       </a>
                     )
                     : <div />
@@ -356,18 +356,18 @@ const ModelModal: FC<ModelModalProps> = ({
                 </div>
               </div>
             </div>
-            <div className='border-t-[0.5px] border-t-divider-regular'>
+            <div className='border-t-divider-regular border-t-[0.5px]'>
               {
                 (validatedStatusState.status === ValidatedStatus.Error && validatedStatusState.message)
                   ? (
-                    <div className='flex px-[10px] py-3 bg-background-section-burn text-xs text-[#D92D20]'>
-                      <RiErrorWarningFill className='mt-[1px] mr-2 w-[14px] h-[14px]' />
+                    <div className='bg-background-section-burn flex px-[10px] py-3 text-xs text-[#D92D20]'>
+                      <RiErrorWarningFill className='mr-2 mt-[1px] h-[14px] w-[14px]' />
                       {validatedStatusState.message}
                     </div>
                   )
                   : (
-                    <div className='flex justify-center items-center py-3 bg-background-section-burn text-xs text-text-tertiary'>
-                      <Lock01 className='mr-1 w-3 h-3 text-text-tertiary' />
+                    <div className='bg-background-section-burn text-text-tertiary flex items-center justify-center py-3 text-xs'>
+                      <Lock01 className='text-text-tertiary mr-1 h-3 w-3' />
                       {t('common.modelProvider.encrypted.front')}
                       <a
                         className='text-text-accent mx-1'
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/model-load-balancing-entry-modal.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/model-load-balancing-entry-modal.tsx
index 1c318b9baf..37aa3b7018 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/model-load-balancing-entry-modal.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/model-load-balancing-entry-modal.tsx
@@ -241,11 +241,11 @@ const ModelLoadBalancingEntryModal: FC<ModelModalProps> = ({
 
   return (
     <PortalToFollowElem open>
-      <PortalToFollowElemContent className='w-full h-full z-[60]'>
+      <PortalToFollowElemContent className='z-[60] h-full w-full'>
         <div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'>
-          <div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-white shadow-xl rounded-2xl overflow-y-auto'>
+          <div className='mx-2 max-h-[calc(100vh-120px)] w-[640px] overflow-y-auto rounded-2xl bg-white shadow-xl'>
             <div className='px-8 pt-8'>
-              <div className='flex justify-between items-center mb-2'>
+              <div className='mb-2 flex items-center justify-between'>
                 <div className='text-xl font-semibold text-gray-900'>{t(isEditMode ? 'common.modelProvider.editConfig' : 'common.modelProvider.addConfig')}</div>
               </div>
               <Form
@@ -257,18 +257,18 @@ const ModelLoadBalancingEntryModal: FC<ModelModalProps> = ({
                 showOnVariableMap={showOnVariableMap}
                 isEditMode={isEditMode}
               />
-              <div className='sticky bottom-0 flex justify-between items-center py-6 flex-wrap gap-y-2 bg-white'>
+              <div className='sticky bottom-0 flex flex-wrap items-center justify-between gap-y-2 bg-white py-6'>
                 {
                   (provider.help && (provider.help.title || provider.help.url))
                     ? (
                       <a
                         href={provider.help?.url[language] || provider.help?.url.en_US}
                         target='_blank' rel='noopener noreferrer'
-                        className='inline-flex items-center text-xs text-primary-600'
+                        className='text-primary-600 inline-flex items-center text-xs'
                         onClick={e => !provider.help.url && e.preventDefault()}
                       >
                         {provider.help.title?.[language] || provider.help.url[language] || provider.help.title?.en_US || provider.help.url.en_US}
-                        <LinkExternal02 className='ml-1 w-3 h-3' />
+                        <LinkExternal02 className='ml-1 h-3 w-3' />
                       </a>
                     )
                     : <div />
@@ -307,14 +307,14 @@ const ModelLoadBalancingEntryModal: FC<ModelModalProps> = ({
               {
                 (validatedStatusState.status === ValidatedStatus.Error && validatedStatusState.message)
                   ? (
-                    <div className='flex px-[10px] py-3 bg-[#FEF3F2] text-xs text-[#D92D20]'>
-                      <RiErrorWarningFill className='mt-[1px] mr-2 w-[14px] h-[14px]' />
+                    <div className='flex bg-[#FEF3F2] px-[10px] py-3 text-xs text-[#D92D20]'>
+                      <RiErrorWarningFill className='mr-2 mt-[1px] h-[14px] w-[14px]' />
                       {validatedStatusState.message}
                     </div>
                   )
                   : (
-                    <div className='flex justify-center items-center py-3 bg-gray-50 text-xs text-gray-500'>
-                      <Lock01 className='mr-1 w-3 h-3 text-gray-500' />
+                    <div className='flex items-center justify-center bg-gray-50 py-3 text-xs text-gray-500'>
+                      <Lock01 className='mr-1 h-3 w-3 text-gray-500' />
                       {t('common.modelProvider.encrypted.front')}
                       <a
                         className='text-primary-600 mx-1'
diff --git a/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
index a14a22bb35..7b52e4e648 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
@@ -37,7 +37,7 @@ const ModelName: FC<ModelNameProps> = ({
   if (!modelItem)
     return null
   return (
-    <div className={cn('flex gap-0.5 items-center overflow-hidden text-ellipsis truncate text-components-input-text-filled system-sm-regular', className)}>
+    <div className={cn('text-components-input-text-filled system-sm-regular flex items-center gap-0.5 overflow-hidden truncate text-ellipsis', className)}>
       <div
         className='truncate'
         title={modelItem.label[language] || modelItem.label.en_US}
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx
index 33a21e19f7..e28e5ab98b 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx
@@ -76,7 +76,7 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
   return (
     <div
       className={cn(
-        'relative group flex items-center p-1 gap-[2px] flex-grow rounded-lg bg-components-input-bg-normal cursor-pointer hover:bg-state-base-hover-alt',
+        'bg-components-input-bg-normal hover:bg-state-base-hover-alt group relative flex grow cursor-pointer items-center gap-[2px] rounded-lg p-1',
       )}
     >
       {modelId ? (
@@ -130,20 +130,20 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
             />
           )}
           {modelProvider && !disabled && !needsConfiguration && (
-            <div className="flex pr-1 items-center">
-              <RiEqualizer2Line className="w-4 h-4 text-text-tertiary group-hover:text-text-secondary" />
+            <div className="flex items-center pr-1">
+              <RiEqualizer2Line className="text-text-tertiary group-hover:text-text-secondary h-4 w-4" />
             </div>
           )}
         </>
       ) : (
         <>
-          <div className="flex p-1 pl-2 items-center gap-1 grow">
-            <span className="overflow-hidden text-ellipsis whitespace-nowrap system-sm-regular text-components-input-text-placeholder">
+          <div className="flex grow items-center gap-1 p-1 pl-2">
+            <span className="system-sm-regular text-components-input-text-placeholder overflow-hidden text-ellipsis whitespace-nowrap">
               {t('workflow.nodes.agent.configureModel')}
             </span>
           </div>
-          <div className="flex pr-1 items-center">
-            <RiEqualizer2Line className="w-4 h-4 text-text-tertiary group-hover:text-text-secondary" />
+          <div className="flex items-center pr-1">
+            <RiEqualizer2Line className="text-text-tertiary group-hover:text-text-secondary h-4 w-4" />
           </div>
         </>
       )}
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx
index 0cc0f1be8e..ff1dc9dc17 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx
@@ -18,12 +18,12 @@ const ConfigurationButton = ({ modelProvider, handleOpenModal }: ConfigurationBu
         handleOpenModal(modelProvider, ConfigurationMethodEnum.predefinedModel, undefined)
       }}
     >
-      <div className="flex px-[3px] justify-center items-center gap-1">
+      <div className="flex items-center justify-center gap-1 px-[3px]">
         {t('workflow.nodes.agent.notAuthorized')}
       </div>
-      <div className="flex w-[14px] h-[14px] justify-center items-center">
-        <div className="w-2 h-2 shrink-0 rounded-[3px] border border-components-badge-status-light-warning-border-inner
-          bg-components-badge-status-light-warning-bg shadow-components-badge-status-light-warning-halo" />
+      <div className="flex h-[14px] w-[14px] items-center justify-center">
+        <div className="border-components-badge-status-light-warning-border-inner bg-components-badge-status-light-warning-bg shadow-components-badge-status-light-warning-halo h-2 w-2 shrink-0
+          rounded-[3px] border" />
       </div>
     </Button>
   )
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
index 5457b0e677..6239d3e5ea 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
@@ -193,10 +193,10 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
           }
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className={cn('z-[60]', portalToFollowElemContentClassName)}>
-          <div className={cn(popupClassName, 'w-[389px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg')}>
-            <div className={cn('max-h-[420px] p-4 pt-3 overflow-y-auto')}>
+          <div className={cn(popupClassName, 'border-components-panel-border bg-components-panel-bg w-[389px] rounded-2xl border-[0.5px] shadow-lg')}>
+            <div className={cn('max-h-[420px] overflow-y-auto p-4 pt-3')}>
               <div className='relative'>
-                <div className={cn('mb-1 h-6 flex items-center text-text-secondary system-sm-semibold')}>
+                <div className={cn('text-text-secondary system-sm-semibold mb-1 flex h-6 items-center')}>
                   {t('common.modelProvider.model').toLocaleUpperCase()}
                 </div>
                 <ModelSelector
@@ -207,7 +207,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
               </div>
               {
                 !!parameterRules.length && (
-                  <div className='my-3 h-[1px] bg-divider-subtle' />
+                  <div className='bg-divider-subtle my-3 h-[1px]' />
                 )
               }
               {
@@ -217,8 +217,8 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
               }
               {
                 !isLoading && !!parameterRules.length && (
-                  <div className='flex items-center justify-between mb-2'>
-                    <div className={cn('h-6 flex items-center text-text-secondary system-sm-semibold')}>{t('common.modelProvider.parameters')}</div>
+                  <div className='mb-2 flex items-center justify-between'>
+                    <div className={cn('text-text-secondary system-sm-semibold flex h-6 items-center')}>{t('common.modelProvider.parameters')}</div>
                     {
                       PROVIDER_WITH_PRESET_TONE.includes(provider) && (
                         <PresetsParameter onSelect={handleSelectPresetParameter} />
@@ -247,7 +247,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
             </div>
             {!hideDebugWithMultipleModel && (
               <div
-                className='flex items-center justify-between px-4 h-[50px] bg-components-section-burn border-t border-t-divider-subtle system-sm-regular text-text-accent cursor-pointer rounded-b-xl'
+                className='bg-components-section-burn border-t-divider-subtle system-sm-regular text-text-accent flex h-[50px] cursor-pointer items-center justify-between rounded-b-xl border-t px-4'
                 onClick={() => onDebugWithMultipleModelChange?.()}
               >
                 {
@@ -255,7 +255,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
                     ? t('appDebug.debugAsSingleModel')
                     : t('appDebug.debugAsMultipleModel')
                 }
-                <ArrowNarrowLeft className='w-3 h-3 rotate-180' />
+                <ArrowNarrowLeft className='h-3 w-3 rotate-180' />
               </div>
             )}
           </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/model-display.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/model-display.tsx
index 6f586c1f6f..88fa77875a 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/model-display.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/model-display.tsx
@@ -8,14 +8,14 @@ type ModelDisplayProps = {
 const ModelDisplay = ({ currentModel, modelId }: ModelDisplayProps) => {
   return currentModel ? (
     <ModelName
-      className="flex px-1 py-[3px] items-center gap-1 grow"
+      className="flex grow items-center gap-1 px-1 py-[3px]"
       modelItem={currentModel}
       showMode
       showFeatures
     />
   ) : (
-    <div className="flex py-[3px] px-1 items-center gap-1 grow opacity-50 truncate">
-      <div className="text-components-input-text-filled text-ellipsis overflow-hidden system-sm-regular">
+    <div className="flex grow items-center gap-1 truncate px-1 py-[3px] opacity-50">
+      <div className="text-components-input-text-filled system-sm-regular overflow-hidden text-ellipsis">
         {modelId}
       </div>
     </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
index f43598fc38..e691ae2646 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
@@ -148,7 +148,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
           />}
           <input
             ref={numberInputRef}
-            className='shrink-0 block ml-4 pl-3 w-16 h-8 appearance-none outline-none rounded-lg bg-components-input-bg-normal text-components-input-text-filled system-sm-regular'
+            className='bg-components-input-bg-normal text-components-input-text-filled system-sm-regular ml-4 block h-8 w-16 shrink-0 appearance-none rounded-lg pl-3 outline-none'
             type='number'
             max={parameterRule.max}
             min={parameterRule.min}
@@ -173,7 +173,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
           />}
           <input
             ref={numberInputRef}
-            className='shrink-0 block ml-4 pl-3 w-16 h-8 appearance-none outline-none rounded-lg bg-components-input-bg-normal text-components-input-text-filled system-sm-regular'
+            className='bg-components-input-bg-normal text-components-input-text-filled system-sm-regular ml-4 block h-8 w-16 shrink-0 appearance-none rounded-lg pl-3 outline-none'
             type='number'
             max={parameterRule.max}
             min={parameterRule.min}
@@ -188,7 +188,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
     if (parameterRule.type === 'boolean') {
       return (
         <Radio.Group
-          className='w-[178px] flex items-center'
+          className='flex w-[178px] items-center'
           value={renderValue ? 1 : 0}
           onChange={handleRadioChange}
         >
@@ -201,7 +201,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
     if (parameterRule.type === 'string' && !parameterRule.options?.length) {
       return (
         <input
-          className={cn(isInWorkflow ? 'w-[178px]' : 'w-full', 'ml-4 flex items-center px-3 h-8 appearance-none outline-none rounded-lg bg-components-input-bg-normal text-components-input-text-filled system-sm-regular')}
+          className={cn(isInWorkflow ? 'w-[178px]' : 'w-full', 'bg-components-input-bg-normal text-components-input-text-filled system-sm-regular ml-4 flex h-8 appearance-none items-center rounded-lg px-3 outline-none')}
           value={renderValue as string}
           onChange={handleStringInputChange}
         />
@@ -211,7 +211,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
     if (parameterRule.type === 'text') {
       return (
         <textarea
-          className='w-full h-20 ml-4 px-1 rounded-lg bg-components-input-bg-normal text-components-input-text-filled system-sm-regular'
+          className='bg-components-input-bg-normal text-components-input-text-filled system-sm-regular ml-4 h-20 w-full rounded-lg px-1'
           value={renderValue as string}
           onChange={handleStringInputChange}
         />
@@ -222,7 +222,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
       return (
         <SimpleSelect
           className='!py-0'
-          wrapperClassName={cn('w-full !h-8')}
+          wrapperClassName={cn('!h-8 w-full')}
           defaultValue={renderValue as string}
           onSelect={handleSelect}
           items={parameterRule.options.map(option => ({ value: option, name: option }))}
@@ -232,7 +232,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
 
     if (parameterRule.type === 'tag') {
       return (
-        <div className={cn('w-full !h-8')}>
+        <div className={cn('!h-8 w-full')}>
           <TagInput
             items={renderValue as string[]}
             onChange={handleTagChange}
@@ -247,9 +247,9 @@ const ParameterItem: FC<ParameterItemProps> = ({
   }
 
   return (
-    <div className='flex items-center justify-between mb-2'>
+    <div className='mb-2 flex items-center justify-between'>
       <div className='shrink-0 basis-1/2'>
-        <div className={cn('shrink-0 w-full flex items-center')}>
+        <div className={cn('flex w-full shrink-0 items-center')}>
           {
             !parameterRule.required && parameterRule.name !== 'stop' && (
               <div className='mr-2 w-7'>
@@ -262,7 +262,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
             )
           }
           <div
-            className='mr-0.5 system-xs-regular text-text-secondary truncate'
+            className='system-xs-regular text-text-secondary mr-0.5 truncate'
             title={parameterRule.label[language] || parameterRule.label.en_US}
           >
             {parameterRule.label[language] || parameterRule.label.en_US}
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
index 0d9e90853e..20a9bdcc17 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
@@ -25,7 +25,7 @@ const PresetsParameter: FC<PresetsParameterProps> = ({
         className={cn(open && 'bg-state-base-hover')}
       >
         {t('common.modelProvider.loadPresets')}
-        <RiArrowDownSLine className='ml-0.5 w-3.5 h-3.5' />
+        <RiArrowDownSLine className='ml-0.5 h-3.5 w-3.5' />
       </Button>
     )
   }, [t])
@@ -42,7 +42,7 @@ const PresetsParameter: FC<PresetsParameterProps> = ({
     return {
       value: tone.id,
       text: (
-        <div className='flex items-center h-full'>
+        <div className='flex h-full items-center'>
           {getToneIcon(tone.id)}
           {t(`common.model.tone.${tone.name}`) as string}
         </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx
index 9f3543a475..3d568fdd25 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx
@@ -17,15 +17,15 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
   const { data: pluginList } = useInstalledPluginList()
   const renderTooltipContent = (title: string, description?: string, linkText?: string, linkHref?: string) => {
     return (
-      <div className='flex w-[240px] max-w-[240px] gap-1 flex-col px-1 py-1.5' onClick={e => e.stopPropagation()}>
+      <div className='flex w-[240px] max-w-[240px] flex-col gap-1 px-1 py-1.5' onClick={e => e.stopPropagation()}>
         <div className='text-text-primary title-xs-semi-bold'>{title}</div>
         {description && (
-          <div className='min-w-[200px] text-text-secondary body-xs-regular'>
+          <div className='text-text-secondary body-xs-regular min-w-[200px]'>
             {description}
           </div>
         )}
         {linkText && linkHref && (
-          <div className='text-text-accent body-xs-regular cursor-pointer z-[100]'>
+          <div className='text-text-accent body-xs-regular z-[100] cursor-pointer'>
             <Link
               href={linkHref}
               onClick={(e) => {
@@ -52,7 +52,7 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
               asChild={false}
               needsDelay={false}
             >
-              <RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
+              <RiErrorWarningFill className='text-text-destructive h-4 w-4' />
             </Tooltip>
           ) : !pluginInfo ? (
             <Tooltip
@@ -65,7 +65,7 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
               asChild={false}
               needsDelay={true}
             >
-              <RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
+              <RiErrorWarningFill className='text-text-destructive h-4 w-4' />
             </Tooltip>
           ) : (
             <SwitchPluginVersion
@@ -89,7 +89,7 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
           asChild={false}
           needsDelay
         >
-          <RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
+          <RiErrorWarningFill className='text-text-destructive h-4 w-4' />
         </Tooltip>
       )}
     </>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
index 44b774408f..934cbe672d 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
@@ -44,16 +44,16 @@ const Trigger: FC<TriggerProps> = ({
   return (
     <div
       className={cn(
-        'relative flex items-center px-2 h-8 rounded-lg  cursor-pointer',
+        'relative flex h-8 cursor-pointer items-center rounded-lg  px-2',
         !isInWorkflow && 'border ring-inset hover:ring-[0.5px]',
         !isInWorkflow && (disabled ? 'border-text-warning ring-text-warning bg-state-warning-hover' : 'border-util-colors-indigo-indigo-600 ring-util-colors-indigo-indigo-600 bg-state-accent-hover'),
-        isInWorkflow && 'pr-[30px] bg-workflow-block-parma-bg border border-workflow-block-parma-bg  hover:border-gray-200',
+        isInWorkflow && 'bg-workflow-block-parma-bg border-workflow-block-parma-bg border pr-[30px]  hover:border-gray-200',
       )}
     >
       {
         currentProvider && (
           <ModelIcon
-            className='mr-1.5 !w-5 !h-5'
+            className='mr-1.5 !h-5 !w-5'
             provider={currentProvider}
             modelName={currentModel?.model}
           />
@@ -62,7 +62,7 @@ const Trigger: FC<TriggerProps> = ({
       {
         !currentProvider && (
           <ModelIcon
-            className='mr-1.5 !w-5 !h-5'
+            className='mr-1.5 !h-5 !w-5'
             provider={modelProviders.find(item => item.provider === providerName)}
             modelName={modelId}
           />
@@ -71,7 +71,7 @@ const Trigger: FC<TriggerProps> = ({
       {
         currentModel && (
           <ModelName
-            className='mr-1.5 text-text-primary'
+            className='text-text-primary mr-1.5'
             modelItem={currentModel}
             showMode
             showFeatures
@@ -80,7 +80,7 @@ const Trigger: FC<TriggerProps> = ({
       }
       {
         !currentModel && (
-          <div className='mr-1 text-[13px] font-medium text-text-primary truncate'>
+          <div className='text-text-primary mr-1 truncate text-[13px] font-medium'>
             {modelId}
           </div>
         )
@@ -97,14 +97,14 @@ const Trigger: FC<TriggerProps> = ({
                     : ''
               }
             >
-              <AlertTriangle className='w-4 h-4 text-[#F79009]' />
+              <AlertTriangle className='h-4 w-4 text-[#F79009]' />
             </Tooltip>
           )
           : (
-            <SlidersH className={cn(!isInWorkflow ? 'text-indigo-600' : 'text-text-tertiary', 'shrink-0 w-4 h-4')} />
+            <SlidersH className={cn(!isInWorkflow ? 'text-indigo-600' : 'text-text-tertiary', 'h-4 w-4 shrink-0')} />
           )
       }
-      {isInWorkflow && (<RiArrowDownSLine className='absolute top-[9px] right-2 w-3.5 h-3.5 text-text-tertiary' />)}
+      {isInWorkflow && (<RiArrowDownSLine className='text-text-tertiary absolute right-2 top-[9px] h-3.5 w-3.5' />)}
     </div>
   )
 }
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx
index 069e026b64..ac140cf3d7 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx
@@ -26,12 +26,12 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
 
   return (
     <div
-      className={cn('group flex flex-grow box-content items-center p-[3px] pl-1 h-8 gap-1 rounded-lg bg-components-input-bg-disabled cursor-pointer', className)}
+      className={cn('bg-components-input-bg-disabled group box-content flex h-8 grow cursor-pointer items-center gap-1 rounded-lg p-[3px] pl-1', className)}
     >
-      <div className={cn('flex items-center w-full', contentClassName)}>
-        <div className='flex items-center py-[1px] gap-1 min-w-0 flex-1'>
+      <div className={cn('flex w-full items-center', contentClassName)}>
+        <div className='flex min-w-0 flex-1 items-center gap-1 py-[1px]'>
           <ModelIcon
-            className="w-4 h-4"
+            className="h-4 w-4"
             provider={currentProvider}
             modelName={modelName}
           />
@@ -39,10 +39,10 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
             {modelName}
           </div>
         </div>
-        <div className='shrink-0 flex items-center justify-center'>
+        <div className='flex shrink-0 items-center justify-center'>
           {showWarnIcon && (
             <Tooltip popupContent={t('common.modelProvider.deprecated')}>
-              <AlertTriangle className='w-4 h-4 text-text-warning-secondary' />
+              <AlertTriangle className='text-text-warning-secondary h-4 w-4' />
             </Tooltip>
           )}
         </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx
index b7c1b2dc59..9bce1337ce 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx
@@ -15,23 +15,23 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
   return (
     <div
       className={cn(
-        'flex items-center p-1 gap-0.5 rounded-lg bg-components-input-bg-normal hover:bg-components-input-bg-hover cursor-pointer', open && 'bg-components-input-bg-hover',
+        'bg-components-input-bg-normal hover:bg-components-input-bg-hover flex cursor-pointer items-center gap-0.5 rounded-lg p-1', open && 'bg-components-input-bg-hover',
         className,
       )}
     >
-      <div className='grow flex items-center'>
-        <div className='mr-1.5 flex items-center justify-center w-4 h-4 rounded-[5px] border border-dashed border-divider-regular'>
-          <CubeOutline className='w-3 h-3 text-text-quaternary' />
+      <div className='flex grow items-center'>
+        <div className='border-divider-regular mr-1.5 flex h-4 w-4 items-center justify-center rounded-[5px] border border-dashed'>
+          <CubeOutline className='text-text-quaternary h-3 w-3' />
         </div>
         <div
-          className='text-[13px] text-text-tertiary truncate'
+          className='text-text-tertiary truncate text-[13px]'
           title='Configure model'
         >
           {t('plugin.detailPanel.configureModel')}
         </div>
       </div>
-      <div className='shrink-0 flex items-center justify-center w-4 h-4'>
-        <RiEqualizer2Line className='w-3.5 h-3.5 text-text-tertiary' />
+      <div className='flex h-4 w-4 shrink-0 items-center justify-center'>
+        <RiEqualizer2Line className='text-text-tertiary h-3.5 w-3.5' />
       </div>
     </div>
   )
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx
index 9c7a9788ef..3a6f1e0037 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx
@@ -68,8 +68,8 @@ const FeatureIcon: FC<FeatureIconProps> = ({
         popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.vision })}
       >
         <div className='inline-block cursor-help'>
-          <ModelBadge className={`!px-0 w-[18px] justify-center text-text-tertiary ${className}`}>
-            <MagicEyes className='w-3 h-3' />
+          <ModelBadge className={`text-text-tertiary w-[18px] justify-center !px-0 ${className}`}>
+            <MagicEyes className='h-3 w-3' />
           </ModelBadge>
         </div>
       </Tooltip>
@@ -82,8 +82,8 @@ const FeatureIcon: FC<FeatureIconProps> = ({
         popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.document })}
       >
         <div className='inline-block cursor-help'>
-          <ModelBadge className={`!px-0 w-[18px] justify-center text-text-tertiary ${className}`}>
-            <DocumentSupportIcon className='w-3 h-3' />
+          <ModelBadge className={`text-text-tertiary w-[18px] justify-center !px-0 ${className}`}>
+            <DocumentSupportIcon className='h-3 w-3' />
           </ModelBadge>
         </div>
       </Tooltip>
@@ -96,8 +96,8 @@ const FeatureIcon: FC<FeatureIconProps> = ({
         popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.audio })}
       >
         <div className='inline-block cursor-help'>
-          <ModelBadge className={`!px-0 w-[18px] justify-center text-text-tertiary ${className}`}>
-            <AudioSupportIcon className='w-3 h-3' />
+          <ModelBadge className={`text-text-tertiary w-[18px] justify-center !px-0 ${className}`}>
+            <AudioSupportIcon className='h-3 w-3' />
           </ModelBadge>
         </div>
       </Tooltip>
@@ -110,8 +110,8 @@ const FeatureIcon: FC<FeatureIconProps> = ({
         popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.video })}
       >
         <div className='inline-block cursor-help'>
-          <ModelBadge className={`!px-0 w-[18px] justify-center text-text-tertiary ${className}`}>
-            <VideoSupportIcon className='w-3 h-3' />
+          <ModelBadge className={`text-text-tertiary w-[18px] justify-center !px-0 ${className}`}>
+            <VideoSupportIcon className='h-3 w-3' />
           </ModelBadge>
         </div>
       </Tooltip>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
index 009887acd7..06a71caf20 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
@@ -34,7 +34,7 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
   return (
     <div
       className={cn(
-        'group flex items-center p-1 h-8 gap-0.5 rounded-lg bg-components-input-bg-normal',
+        'bg-components-input-bg-normal group flex h-8 items-center gap-0.5 rounded-lg p-1',
         !readonly && 'hover:bg-components-input-bg-hover cursor-pointer',
         open && 'bg-components-input-bg-hover',
         model.status !== ModelStatusEnum.active && 'bg-components-input-bg-disabled hover:bg-components-input-bg-disabled',
@@ -46,7 +46,7 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
         provider={provider}
         modelName={model.model}
       />
-      <div className='flex px-1 py-[3px] items-center gap-1 grow truncate'>
+      <div className='flex grow items-center gap-1 truncate px-1 py-[3px]'>
         <ModelName
           className='grow'
           modelItem={model}
@@ -54,17 +54,17 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
           showFeatures
         />
         {!readonly && (
-          <div className='shrink-0 flex items-center justify-center w-4 h-4'>
+          <div className='flex h-4 w-4 shrink-0 items-center justify-center'>
             {
               model.status !== ModelStatusEnum.active
                 ? (
                   <Tooltip popupContent={MODEL_STATUS_TEXT[model.status][language]}>
-                    <AlertTriangle className='w-4 h-4 text-text-warning-secondary' />
+                    <AlertTriangle className='text-text-warning-secondary h-4 w-4' />
                   </Tooltip>
                 )
                 : (
                   <RiArrowDownSLine
-                    className='w-3.5 h-3.5 text-text-tertiary'
+                    className='text-text-tertiary h-3.5 w-3.5'
                   />
                 )
             }
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
index d9cdb26431..3f7b755c62 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
@@ -80,7 +80,7 @@ const PopupItem: FC<PopupItemProps> = ({
 
   return (
     <div className='mb-1'>
-      <div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>
+      <div className='text-text-tertiary flex h-[22px] items-center px-3 text-xs font-medium'>
         {model.label[language] || model.label.en_US}
       </div>
       {
@@ -93,11 +93,11 @@ const PopupItem: FC<PopupItemProps> = ({
               <div className='flex flex-col gap-1'>
                 <div className='flex flex-col items-start gap-2'>
                   <ModelIcon
-                    className={cn('shrink-0 w-5 h-5')}
+                    className={cn('h-5 w-5 shrink-0')}
                     provider={model}
                     modelName={modelItem.model}
                   />
-                  <div className='truncate text-text-primary system-md-medium'>{modelItem.label[language] || modelItem.label.en_US}</div>
+                  <div className='text-text-primary system-md-medium truncate'>{modelItem.label[language] || modelItem.label.en_US}</div>
                 </div>
                 {/* {currentProvider?.description && (
                   <div className='text-text-tertiary system-xs-regular'>{currentProvider?.description?.[language] || currentProvider?.description?.en_US}</div>
@@ -121,29 +121,29 @@ const PopupItem: FC<PopupItemProps> = ({
                 </div>
                 {modelItem.model_type === ModelTypeEnum.textGeneration && modelItem.features?.some(feature => [ModelFeatureEnum.vision, ModelFeatureEnum.audio, ModelFeatureEnum.video, ModelFeatureEnum.document].includes(feature)) && (
                   <div className='pt-2'>
-                    <div className='mb-1 text-text-tertiary system-2xs-medium-uppercase'>{t('common.model.capabilities')}</div>
+                    <div className='text-text-tertiary system-2xs-medium-uppercase mb-1'>{t('common.model.capabilities')}</div>
                     <div className='flex flex-wrap gap-1'>
                       {modelItem.features?.includes(ModelFeatureEnum.vision) && (
                         <ModelBadge>
-                          <RiImageCircleAiLine className='w-3.5 h-3.5 mr-0.5' />
+                          <RiImageCircleAiLine className='mr-0.5 h-3.5 w-3.5' />
                           <span>{ModelFeatureTextEnum.vision}</span>
                         </ModelBadge>
                       )}
                       {modelItem.features?.includes(ModelFeatureEnum.audio) && (
                         <ModelBadge>
-                          <RiVoiceAiFill className='w-3.5 h-3.5 mr-0.5' />
+                          <RiVoiceAiFill className='mr-0.5 h-3.5 w-3.5' />
                           <span>{ModelFeatureTextEnum.audio}</span>
                         </ModelBadge>
                       )}
                       {modelItem.features?.includes(ModelFeatureEnum.video) && (
                         <ModelBadge>
-                          <RiFilmAiLine className='w-3.5 h-3.5 mr-0.5' />
+                          <RiFilmAiLine className='mr-0.5 h-3.5 w-3.5' />
                           <span>{ModelFeatureTextEnum.video}</span>
                         </ModelBadge>
                       )}
                       {modelItem.features?.includes(ModelFeatureEnum.document) && (
                         <ModelBadge>
-                          <RiFileTextLine className='w-3.5 h-3.5 mr-0.5' />
+                          <RiFileTextLine className='mr-0.5 h-3.5 w-3.5' />
                           <span>{ModelFeatureTextEnum.document}</span>
                         </ModelBadge>
                       )}
@@ -155,12 +155,12 @@ const PopupItem: FC<PopupItemProps> = ({
           >
             <div
               key={modelItem.model}
-              className={cn('group relative flex items-center px-3 py-1.5 h-8 rounded-lg gap-1', modelItem.status === ModelStatusEnum.active ? 'cursor-pointer hover:bg-state-base-hover' : 'cursor-not-allowed hover:bg-state-base-hover-alt')}
+              className={cn('group relative flex h-8 items-center gap-1 rounded-lg px-3 py-1.5', modelItem.status === ModelStatusEnum.active ? 'hover:bg-state-base-hover cursor-pointer' : 'hover:bg-state-base-hover-alt cursor-not-allowed')}
               onClick={() => handleSelect(model.provider, modelItem)}
             >
               <div className='flex items-center gap-2'>
                 <ModelIcon
-                  className={cn('shrink-0 w-5 h-5')}
+                  className={cn('h-5 w-5 shrink-0')}
                   provider={model}
                   modelName={modelItem.model}
                 />
@@ -171,13 +171,13 @@ const PopupItem: FC<PopupItemProps> = ({
               </div>
               {
                 defaultModel?.model === modelItem.model && defaultModel.provider === currentProvider.provider && (
-                  <Check className='shrink-0 w-4 h-4 text-text-accent' />
+                  <Check className='text-text-accent h-4 w-4 shrink-0' />
                 )
               }
               {
                 modelItem.status === ModelStatusEnum.noConfigure && (
                   <div
-                    className='hidden group-hover:block text-xs font-medium text-text-accent cursor-pointer'
+                    className='text-text-accent hidden cursor-pointer text-xs font-medium group-hover:block'
                     onClick={handleOpenModelModal}
                   >
                     {t('common.operation.add').toLocaleUpperCase()}
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
index 8de3cbd720..8f82509773 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
@@ -59,20 +59,20 @@ const Popup: FC<PopupProps> = ({
   }, [language, modelList, scopeFeatures, searchText])
 
   return (
-    <div className='w-[320px] max-h-[480px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg overflow-y-auto'>
-      <div className='sticky top-0 pl-3 pt-3 pr-2 pb-1 bg-components-panel-bg z-10'>
+    <div className='border-components-panel-border bg-components-panel-bg max-h-[480px] w-[320px] overflow-y-auto rounded-lg border-[0.5px] shadow-lg'>
+      <div className='bg-components-panel-bg sticky top-0 z-10 pb-1 pl-3 pr-2 pt-3'>
         <div className={`
-          flex items-center pl-[9px] pr-[10px] h-8 rounded-lg border
+          flex h-8 items-center rounded-lg border pl-[9px] pr-[10px]
           ${searchText ? 'bg-components-input-bg-active border-components-input-border-active shadow-xs' : 'bg-components-input-bg-normal border-transparent'}
         `}>
           <RiSearchLine
             className={`
-              shrink-0 mr-[7px] w-[14px] h-[14px]
+              mr-[7px] h-[14px] w-[14px] shrink-0
               ${searchText ? 'text-text-tertiary' : 'text-text-quaternary'}
             `}
           />
           <input
-            className='block grow h-[18px] text-[13px] text-text-primary appearance-none outline-none bg-transparent'
+            className='text-text-primary block h-[18px] grow appearance-none bg-transparent text-[13px] outline-none'
             placeholder='Search model'
             value={searchText}
             onChange={e => setSearchText(e.target.value)}
@@ -80,7 +80,7 @@ const Popup: FC<PopupProps> = ({
           {
             searchText && (
               <XCircle
-                className='shrink-0 ml-1.5 w-[14px] h-[14px] text-text-quaternary cursor-pointer'
+                className='text-text-quaternary ml-1.5 h-[14px] w-[14px] shrink-0 cursor-pointer'
                 onClick={() => setSearchText('')}
               />
             )
@@ -100,18 +100,18 @@ const Popup: FC<PopupProps> = ({
         }
         {
           !filteredModelList.length && (
-            <div className='px-3 py-1.5 leading-[18px] text-center text-xs text-text-tertiary break-all'>
+            <div className='text-text-tertiary break-all px-3 py-1.5 text-center text-xs leading-[18px]'>
               {`No model found for “${searchText}”`}
             </div>
           )
         }
       </div>
-      <div className='sticky bottom-0 px-4 py-2 flex items-center border-t border-divider-subtle cursor-pointer text-text-accent-light-mode-only bg-components-panel-bg rounded-b-lg' onClick={() => {
+      <div className='border-divider-subtle text-text-accent-light-mode-only bg-components-panel-bg sticky bottom-0 flex cursor-pointer items-center rounded-b-lg border-t px-4 py-2' onClick={() => {
         onHide()
         setShowAccountSettingModal({ payload: 'provider' })
       }}>
         <span className='system-xs-medium'>{t('common.model.settingsLink')}</span>
-        <RiArrowRightUpLine className='ml-0.5 w-3 h-3' />
+        <RiArrowRightUpLine className='ml-0.5 h-3 w-3' />
       </div>
     </div>
   )
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx
index 410ab1c090..fcca158788 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx
@@ -15,10 +15,10 @@ const AddModelButton: FC<AddModelButtonProps> = ({
 
   return (
     <span
-      className={cn('shrink-0 flex items-center px-1.5 h-6 text-text-tertiary system-xs-medium cursor-pointer hover:bg-components-button-ghost-bg-hover hover:text-components-button-ghost-text rounded-md', className)}
+      className={cn('text-text-tertiary system-xs-medium hover:bg-components-button-ghost-bg-hover hover:text-components-button-ghost-text flex h-6 shrink-0 cursor-pointer items-center rounded-md px-1.5', className)}
       onClick={onClick}
     >
-      <PlusCircle className='mr-1 w-3 h-3' />
+      <PlusCircle className='mr-1 h-3 w-3' />
       {t('common.modelProvider.addModel')}
     </span>
   )
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/cooldown-timer.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/cooldown-timer.tsx
index a59e336664..c239881458 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/cooldown-timer.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/cooldown-timer.tsx
@@ -55,7 +55,7 @@ const CooldownTimer = ({ secondsRemaining, onFinish }: CooldownTimerProps) => {
   return displayTime
     ? (
       <Tooltip popupContent={t('common.modelProvider.apiKeyRateLimit', { seconds: displayTime })}>
-        <SimplePieChart percentage={Math.round(displayTime / 60 * 100)} className='w-3 h-3' />
+        <SimplePieChart percentage={Math.round(displayTime / 60 * 100)} className='h-3 w-3' />
       </Tooltip>
     )
     : null
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
index f43b5359ab..30e32aca95 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
@@ -66,8 +66,8 @@ const CredentialPanel: FC<CredentialPanelProps> = ({
     <>
       {
         provider.provider_credential_schema && (
-          <div className='shrink-0 relative ml-1 p-1 w-[112px] rounded-lg bg-white/[0.18] border-[0.5px] border-components-panel-border'>
-            <div className='flex items-center justify-between mb-1 pt-1 pl-2 pr-[7px] h-5 system-xs-medium-uppercase text-text-tertiary'>
+          <div className='border-components-panel-border relative ml-1 w-[112px] shrink-0 rounded-lg border-[0.5px] bg-white/[0.18] p-1'>
+            <div className='system-xs-medium-uppercase text-text-tertiary mb-1 flex h-5 items-center justify-between pl-2 pr-[7px] pt-1'>
               API-KEY
               <Indicator color={isCustomConfigured ? 'green' : 'red'} />
             </div>
@@ -77,7 +77,7 @@ const CredentialPanel: FC<CredentialPanelProps> = ({
                 size='small'
                 onClick={onSetup}
               >
-                <RiEqualizer2Line className='mr-1 w-3.5 h-3.5' />
+                <RiEqualizer2Line className='mr-1 h-3.5 w-3.5' />
                 {t('common.operation.setup')}
               </Button>
               {
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
index a3dddf9435..49ac231c2e 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
@@ -83,13 +83,13 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
   return (
     <div
       className={cn(
-        'mb-2 rounded-xl border-[0.5px] border-divider-regular shadow-xs bg-third-party-model-bg-default',
+        'border-divider-regular shadow-xs bg-third-party-model-bg-default mb-2 rounded-xl border-[0.5px]',
         provider.provider === 'langgenius/openai/openai' && 'bg-third-party-model-bg-openai',
         provider.provider === 'langgenius/anthropic/anthropic' && 'bg-third-party-model-bg-anthropic',
       )}
     >
-      <div className='flex pl-3 py-2 pr-2 rounded-t-xl'>
-        <div className='grow px-1 pt-1 pb-0.5'>
+      <div className='flex rounded-t-xl py-2 pl-3 pr-2'>
+        <div className='grow px-1 pb-0.5 pt-1'>
           <ProviderIcon
             className='mb-2'
             provider={provider}
@@ -122,19 +122,19 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
       </div>
       {
         collapsed && (
-          <div className='group flex items-center justify-between pl-2 py-1.5 pr-[11px] border-t border-t-divider-subtle text-text-tertiary system-xs-medium'>
+          <div className='border-t-divider-subtle text-text-tertiary system-xs-medium group flex items-center justify-between border-t py-1.5 pl-2 pr-[11px]'>
             {(showQuota || !notConfigured) && (
               <>
-                <div className='group-hover:hidden flex items-center pl-1 pr-1.5 h-6 leading-6'>
+                <div className='flex h-6 items-center pl-1 pr-1.5 leading-6 group-hover:hidden'>
                   {
                     hasModelList
                       ? t('common.modelProvider.modelsNum', { num: modelList.length })
                       : t('common.modelProvider.showModels')
                   }
-                  {!loading && <RiArrowRightSLine className='w-4 h-4' />}
+                  {!loading && <RiArrowRightSLine className='h-4 w-4' />}
                 </div>
                 <div
-                  className='hidden group-hover:flex items-center pl-1 pr-1.5 h-6 rounded-lg hover:bg-components-button-ghost-bg-hover cursor-pointer'
+                  className='hover:bg-components-button-ghost-bg-hover hidden h-6 cursor-pointer items-center rounded-lg pl-1 pr-1.5 group-hover:flex'
                   onClick={handleOpenModelList}
                 >
                   {
@@ -142,18 +142,18 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
                       ? t('common.modelProvider.showModelsNum', { num: modelList.length })
                       : t('common.modelProvider.showModels')
                   }
-                  {!loading && <RiArrowRightSLine className='w-4 h-4' />}
+                  {!loading && <RiArrowRightSLine className='h-4 w-4' />}
                   {
                     loading && (
-                      <RiLoader2Line className='ml-0.5 animate-spin w-3 h-3' />
+                      <RiLoader2Line className='ml-0.5 h-3 w-3 animate-spin' />
                     )
                   }
                 </div>
               </>
             )}
             {!showQuota && notConfigured && (
-              <div className='flex items-center pl-1 pr-1.5 h-6'>
-                <RiInformation2Fill className='mr-1 w-4 h-4 text-text-accent' />
+              <div className='flex h-6 items-center pl-1 pr-1.5'>
+                <RiInformation2Fill className='text-text-accent mr-1 h-4 w-4' />
                 <span className='text-text-secondary system-xs-medium'>{t('common.modelProvider.configureTip')}</span>
               </div>
             )}
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
index 6c4a3f575e..31a5128fa3 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
@@ -54,25 +54,25 @@ const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoad
       )}
     >
       <ModelIcon
-        className='shrink-0 mr-2'
+        className='mr-2 shrink-0'
         provider={provider}
         modelName={model.model}
       />
       <ModelName
-        className='grow system-md-regular text-text-secondary'
+        className='system-md-regular text-text-secondary grow'
         modelItem={model}
         showModelType
         showMode
         showContextSize
       >
         {modelLoadBalancingEnabled && !model.deprecated && model.load_balancing_enabled && (
-          <ModelBadge className='ml-1 uppercase text-text-accent-secondary border-text-accent-secondary'>
-            <Balance className='w-3 h-3 mr-0.5' />
+          <ModelBadge className='text-text-accent-secondary border-text-accent-secondary ml-1 uppercase'>
+            <Balance className='mr-0.5 h-3 w-3' />
             {t('common.modelProvider.loadBalancingHeadline')}
           </ModelBadge>
         )}
       </ModelName>
-      <div className='shrink-0 flex items-center'>
+      <div className='flex shrink-0 items-center'>
         {
           model.fetch_from === ConfigurationMethodEnum.customizableModel
             ? (isCurrentWorkspaceManager && (
@@ -81,7 +81,7 @@ const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoad
                 className='hidden group-hover:flex'
                 onClick={() => onConfig({ __model_name: model.model, __model_type: model.model_type })}
               >
-                <Settings01 className='mr-1 w-3.5 h-3.5' />
+                <Settings01 className='mr-1 h-3.5 w-3.5' />
                 {t('common.modelProvider.config')}
               </Button>
             ))
@@ -89,10 +89,10 @@ const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoad
               ? (
                 <Button
                   size='small'
-                  className='opacity-0 group-hover:opacity-100 transition-opacity'
+                  className='opacity-0 transition-opacity group-hover:opacity-100'
                   onClick={() => onModifyLoadBalancing?.(model)}
                 >
-                  <Balance className='mr-1 w-3.5 h-3.5' />
+                  <Balance className='mr-1 h-3.5 w-3.5' />
                   {t('common.modelProvider.configLoadBalancing')}
                 </Button>
               )
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx
index b4b331c4bc..f995ae69ff 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx
@@ -49,20 +49,20 @@ const ModelList: FC<ModelListProps> = ({
   }, [onChange, provider, setShowModelLoadBalancingModal])
 
   return (
-    <div className='px-2 pb-2 rounded-b-xl'>
-      <div className='py-1 bg-components-panel-bg rounded-lg'>
+    <div className='rounded-b-xl px-2 pb-2'>
+      <div className='bg-components-panel-bg rounded-lg py-1'>
         <div className='flex items-center pl-1 pr-[3px]'>
-          <span className='group shrink-0 flex items-center mr-2'>
-            <span className='group-hover:hidden inline-flex items-center pl-1 pr-1.5 h-6 system-xs-medium text-text-tertiary'>
+          <span className='group mr-2 flex shrink-0 items-center'>
+            <span className='system-xs-medium text-text-tertiary inline-flex h-6 items-center pl-1 pr-1.5 group-hover:hidden'>
               {t('common.modelProvider.modelsNum', { num: models.length })}
-              <RiArrowRightSLine className='mr-0.5 w-4 h-4 rotate-90' />
+              <RiArrowRightSLine className='mr-0.5 h-4 w-4 rotate-90' />
             </span>
             <span
-              className='hidden group-hover:inline-flex items-center pl-1 pr-1.5 h-6 system-xs-medium text-text-tertiary bg-state-base-hover cursor-pointer rounded-lg'
+              className='system-xs-medium text-text-tertiary bg-state-base-hover hidden h-6 cursor-pointer items-center rounded-lg pl-1 pr-1.5 group-hover:inline-flex'
               onClick={() => onCollapse()}
             >
               {t('common.modelProvider.modelsNum', { num: models.length })}
-              <RiArrowRightSLine className='mr-0.5 w-4 h-4 rotate-90' />
+              <RiArrowRightSLine className='mr-0.5 h-4 w-4 rotate-90' />
             </span>
           </span>
           {/* {
@@ -74,7 +74,7 @@ const ModelList: FC<ModelListProps> = ({
           } */}
           {
             isConfigurable && isCurrentWorkspaceManager && (
-              <div className='grow flex justify-end'>
+              <div className='flex grow justify-end'>
                 <AddModelButton onClick={() => onConfig()} />
               </div>
             )
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
index 2d5cf26257..b2a1e3166c 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
@@ -152,12 +152,12 @@ const ModelLoadBalancingConfigs = ({
         )}
         onClick={(!withSwitch && !draftConfig.enabled) ? () => toggleModalBalancing(true) : undefined}
       >
-        <div className='flex items-center px-[15px] py-3 gap-2 select-none'>
-          <div className='grow-0 shrink-0 flex items-center justify-center w-8 h-8 text-util-colors-blue-blue-600 bg-util-colors-indigo-indigo-50 border border-util-colors-indigo-indigo-100 rounded-lg'>
-            <Balance className='w-4 h-4' />
+        <div className='flex select-none items-center gap-2 px-[15px] py-3'>
+          <div className='text-util-colors-blue-blue-600 bg-util-colors-indigo-indigo-50 border-util-colors-indigo-indigo-100 flex h-8 w-8 shrink-0 grow-0 items-center justify-center rounded-lg border'>
+            <Balance className='h-4 w-4' />
           </div>
           <div className='grow'>
-            <div className='flex items-center gap-1 text-sm text-text-primary'>
+            <div className='text-text-primary flex items-center gap-1 text-sm'>
               {t('common.modelProvider.loadBalancing')}
               <Tooltip
                 popupContent={t('common.modelProvider.loadBalancingInfo')}
@@ -165,7 +165,7 @@ const ModelLoadBalancingConfigs = ({
                 triggerClassName='w-3 h-3'
               />
             </div>
-            <div className='text-xs text-text-tertiary'>{t('common.modelProvider.loadBalancingDescription')}</div>
+            <div className='text-text-tertiary text-xs'>{t('common.modelProvider.loadBalancingDescription')}</div>
           </div>
           {
             withSwitch && (
@@ -184,9 +184,9 @@ const ModelLoadBalancingConfigs = ({
             {draftConfig.configs.map((config, index) => {
               const isProviderManaged = config.name === '__inherit__'
               return (
-                <div key={config.id || index} className='group flex items-center px-3 h-10 bg-components-panel-on-panel-item-bg border border-components-panel-border rounded-lg shadow-xs'>
-                  <div className='grow flex items-center'>
-                    <div className='flex items-center justify-center mr-2 w-3 h-3'>
+                <div key={config.id || index} className='bg-components-panel-on-panel-item-bg border-components-panel-border shadow-xs group flex h-10 items-center rounded-lg border px-3'>
+                  <div className='flex grow items-center'>
+                    <div className='mr-2 flex h-3 w-3 items-center justify-center'>
                       {(config.in_cooldown && Boolean(config.ttl))
                         ? (
                           <CooldownTimer secondsRemaining={config.ttl} onFinish={() => clearCountdown(index)} />
@@ -197,11 +197,11 @@ const ModelLoadBalancingConfigs = ({
                           </Tooltip>
                         )}
                     </div>
-                    <div className='text-[13px] mr-1'>
+                    <div className='mr-1 text-[13px]'>
                       {isProviderManaged ? t('common.modelProvider.defaultConfig') : config.name}
                     </div>
                     {isProviderManaged && (
-                      <span className='px-1 text-2xs uppercase text-text-tertiary border border-divider-regular rounded-[5px]'>{t('common.modelProvider.providerManaged')}</span>
+                      <span className='text-2xs text-text-tertiary border-divider-regular rounded-[5px] border px-1 uppercase'>{t('common.modelProvider.providerManaged')}</span>
                     )}
                   </div>
                   <div className='flex items-center gap-1'>
@@ -209,18 +209,18 @@ const ModelLoadBalancingConfigs = ({
                       <>
                         <div className='flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100'>
                           <span
-                            className='flex items-center justify-center w-8 h-8 text-text-tertiary bg-components-button-secondary-bg rounded-lg transition-colors cursor-pointer hover:bg-components-button-secondary-bg-hover'
+                            className='text-text-tertiary bg-components-button-secondary-bg hover:bg-components-button-secondary-bg-hover flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg transition-colors'
                             onClick={() => toggleEntryModal(index, config)}
                           >
-                            <Edit02 className='w-4 h-4' />
+                            <Edit02 className='h-4 w-4' />
                           </span>
                           <span
-                            className='flex items-center justify-center w-8 h-8 text-text-tertiary bg-components-button-secondary-bg rounded-lg transition-colors cursor-pointer hover:bg-components-button-secondary-bg-hover'
+                            className='text-text-tertiary bg-components-button-secondary-bg hover:bg-components-button-secondary-bg-hover flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg transition-colors'
                             onClick={() => updateConfigEntry(index, () => undefined)}
                           >
-                            <RiDeleteBinLine className='w-4 h-4' />
+                            <RiDeleteBinLine className='h-4 w-4' />
                           </span>
-                          <span className='mr-2 h-3 border-r border-r-divider-subtle' />
+                          <span className='border-r-divider-subtle mr-2 h-3 border-r' />
                         </div>
                       </>
                     )}
@@ -236,19 +236,19 @@ const ModelLoadBalancingConfigs = ({
             })}
 
             <div
-              className='flex items-center px-3 mt-1 h-8 text-[13px] font-medium text-primary-600'
+              className='text-primary-600 mt-1 flex h-8 items-center px-3 text-[13px] font-medium'
               onClick={() => toggleEntryModal()}
             >
-              <div className='flex items-center cursor-pointer'>
-                <Plus02 className='mr-2 w-3 h-3' />{t('common.modelProvider.addConfig')}
+              <div className='flex cursor-pointer items-center'>
+                <Plus02 className='mr-2 h-3 w-3' />{t('common.modelProvider.addConfig')}
               </div>
             </div>
           </div>
         )}
         {
           draftConfig.enabled && draftConfig.configs.length < 2 && (
-            <div className='flex items-center px-6 h-[34px] text-xs text-text-secondary bg-components-panel-bg border-t border-t-divider-subtle'>
-              <AlertTriangle className='mr-1 w-3 h-3 text-[#f79009]' />
+            <div className='text-text-secondary bg-components-panel-bg border-t-divider-subtle flex h-[34px] items-center border-t px-6 text-xs'>
+              <AlertTriangle className='mr-1 h-3 w-3 text-[#f79009]' />
               {t('common.modelProvider.loadBalancingLeastKeyWarning')}
             </div>
           )
@@ -257,7 +257,7 @@ const ModelLoadBalancingConfigs = ({
 
       {!modelLoadBalancingEnabled && !IS_CE_EDITION && (
         <GridMask canvasClassName='!rounded-xl'>
-          <div className='flex items-center justify-between mt-2 px-4 h-14 border-[0.5px] border-components-panel-border rounded-xl shadow-md'>
+          <div className='border-components-panel-border mt-2 flex h-14 items-center justify-between rounded-xl border-[0.5px] px-4 shadow-md'>
             <div
               className={classNames('text-sm font-semibold leading-tight text-gradient', s.textGradient)}
             >
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
index bdc6b13c2c..00f543da17 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
@@ -107,19 +107,19 @@ const ModelLoadBalancingModal = ({ provider, model, open = false, onClose, onSav
     <Modal
       isShow={Boolean(model) && open}
       onClose={onClose}
-      className='max-w-none pt-8 px-8 w-[640px]'
+      className='w-[640px] max-w-none px-8 pt-8'
       title={
         <div className='pb-3 font-semibold'>
           <div className='h-[30px]'>{t('common.modelProvider.configLoadBalancing')}</div>
           {Boolean(model) && (
-            <div className='flex items-center h-5'>
+            <div className='flex h-5 items-center'>
               <ModelIcon
-                className='shrink-0 mr-2'
+                className='mr-2 shrink-0'
                 provider={provider}
                 modelName={model!.model}
               />
               <ModelName
-                className='grow system-md-regular text-text-secondary'
+                className='system-md-regular text-text-secondary grow'
                 modelItem={model!}
                 showModelType
                 showMode
@@ -142,15 +142,15 @@ const ModelLoadBalancingModal = ({ provider, model, open = false, onClose, onSav
                 )}
                 onClick={draftConfig.enabled ? () => toggleModalBalancing(false) : undefined}
               >
-                <div className='flex items-center px-[15px] py-3 gap-2 select-none'>
-                  <div className='grow-0 shrink-0 flex items-center justify-center w-8 h-8 bg-components-card-bg border border-components-card-border rounded-lg'>
+                <div className='flex select-none items-center gap-2 px-[15px] py-3'>
+                  <div className='bg-components-card-bg border-components-card-border flex h-8 w-8 shrink-0 grow-0 items-center justify-center rounded-lg border'>
                     {Boolean(model) && (
                       <ModelIcon className='shrink-0' provider={provider} modelName={model!.model} />
                     )}
                   </div>
                   <div className='grow'>
-                    <div className='text-sm text-text-secondary'>{t('common.modelProvider.providerManaged')}</div>
-                    <div className='text-xs text-text-tertiary'>{t('common.modelProvider.providerManagedDescription')}</div>
+                    <div className='text-text-secondary text-sm'>{t('common.modelProvider.providerManaged')}</div>
+                    <div className='text-text-tertiary text-xs'>{t('common.modelProvider.providerManagedDescription')}</div>
                   </div>
                 </div>
               </div>
@@ -168,7 +168,7 @@ const ModelLoadBalancingModal = ({ provider, model, open = false, onClose, onSav
               }} />
             </div>
 
-            <div className='flex items-center justify-end gap-2 mt-6'>
+            <div className='mt-6 flex items-center justify-end gap-2'>
               <Button onClick={onClose}>{t('common.operation.cancel')}</Button>
               <Button
                 variant='primary'
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
index e86b032bb0..7ad7f08968 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
@@ -36,10 +36,10 @@ const Selector: FC<SelectorProps> = ({
         {
           ({ open }) => (
             <Button className={cn(
-              'px-0 w-6 h-6 rounded-md',
+              'h-6 w-6 rounded-md px-0',
               open && 'bg-components-button-secondary-bg-hover',
             )}>
-              <RiMoreFill className='w-3 h-3' />
+              <RiMoreFill className='h-3 w-3' />
             </Button>
           )
         }
@@ -50,18 +50,18 @@ const Selector: FC<SelectorProps> = ({
         leaveFrom='opacity-100'
         leaveTo='opacity-0'
       >
-        <PopoverPanel className='absolute top-7 right-0 w-[144px] bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-lg shadow-lg z-10'>
+        <PopoverPanel className='bg-components-panel-bg border-components-panel-border absolute right-0 top-7 z-10 w-[144px] rounded-lg border-[0.5px] shadow-lg'>
           <div className='p-1'>
-            <div className='px-3 pt-2 pb-1 text-sm font-medium text-text-secondary'>{t('common.modelProvider.card.priorityUse')}</div>
+            <div className='text-text-secondary px-3 pb-1 pt-2 text-sm font-medium'>{t('common.modelProvider.card.priorityUse')}</div>
             {
               options.map(option => (
                 <PopoverButton as={Fragment} key={option.key}>
                   <div
-                    className='flex items-center justify-between px-3 h-9 text-sm text-text-secondary rounded-lg cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover'
+                    className='text-text-secondary hover:bg-components-panel-on-panel-item-bg-hover flex h-9 cursor-pointer items-center justify-between rounded-lg px-3 text-sm'
                     onClick={() => onSelect(option.key)}
                   >
                     <div className='grow'>{option.text}</div>
-                    {value === option.key && <RiCheckLine className='w-4 h-4 text-text-accent' />}
+                    {value === option.key && <RiCheckLine className='text-text-accent h-4 w-4' />}
                   </div>
                 </PopoverButton>
               ))
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.tsx
index 91e45ad1a3..6609792a66 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.tsx
@@ -9,8 +9,8 @@ const PriorityUseTip = () => {
     <Tooltip
       popupContent={t('common.modelProvider.priorityUsing') || ''}
     >
-      <div className='absolute -right-[5px] -top-[5px] bg-util-colors-indigo-indigo-50 rounded-[5px] border-[0.5px] border-components-panel-border-subtle shadow-xs cursor-pointer'>
-        <ChevronDownDouble className='rotate-180 w-3 h-3 text-util-colors-indigo-indigo-600' />
+      <div className='bg-util-colors-indigo-indigo-50 border-components-panel-border-subtle shadow-xs absolute -right-[5px] -top-[5px] cursor-pointer rounded-[5px] border-[0.5px]'>
+        <ChevronDownDouble className='text-util-colors-indigo-indigo-600 h-3 w-3 rotate-180' />
       </div>
     </Tooltip>
   )
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
index 8d0ea83d65..cc168b618e 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
@@ -28,8 +28,8 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
   const openaiOrAnthropic = MODEL_PROVIDER_QUOTA_GET_PAID.includes(provider.provider)
 
   return (
-    <div className='group relative shrink-0 min-w-[112px] px-3 py-2 rounded-lg bg-white/[0.18] border-[0.5px] border-components-panel-border shadow-xs'>
-      <div className='flex items-center mb-2 h-4 system-xs-medium-uppercase text-text-tertiary'>
+    <div className='border-components-panel-border shadow-xs group relative min-w-[112px] shrink-0 rounded-lg border-[0.5px] bg-white/[0.18] px-3 py-2'>
+      <div className='system-xs-medium-uppercase text-text-tertiary mb-2 flex h-4 items-center'>
         {t('common.modelProvider.quota')}
         <Tooltip popupContent={
           openaiOrAnthropic
@@ -40,8 +40,8 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
       </div>
       {
         currentQuota && (
-          <div className='flex items-center h-4 text-xs text-text-tertiary'>
-            <span className='mr-0.5 system-md-semibold-uppercase text-text-secondary'>{formatNumber((currentQuota?.quota_limit || 0) - (currentQuota?.quota_used || 0))}</span>
+          <div className='text-text-tertiary flex h-4 items-center text-xs'>
+            <span className='system-md-semibold-uppercase text-text-secondary mr-0.5'>{formatNumber((currentQuota?.quota_limit || 0) - (currentQuota?.quota_used || 0))}</span>
             {
               currentQuota?.quota_unit === QuotaUnitEnum.tokens && 'Tokens'
             }
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx b/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx
index e669b4a38b..bcbc3c74e4 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx
@@ -22,8 +22,8 @@ const ProviderIcon: FC<ProviderIconProps> = ({
   if (provider.provider === 'langgenius/anthropic/anthropic') {
     return (
       <div className='mb-2 py-[7px]'>
-        {theme === Theme.dark && <AnthropicLight className='w-[90px] h-2.5' />}
-        {theme === Theme.light && <AnthropicDark className='w-[90px] h-2.5' />}
+        {theme === Theme.dark && <AnthropicLight className='h-2.5 w-[90px]' />}
+        {theme === Theme.light && <AnthropicDark className='h-2.5 w-[90px]' />}
       </div>
     )
   }
@@ -31,7 +31,7 @@ const ProviderIcon: FC<ProviderIconProps> = ({
   if (provider.provider === 'langgenius/openai/openai') {
     return (
       <div className='mb-2'>
-        <Openai className='w-auto h-6 text-text-inverted-dimmed' />
+        <Openai className='text-text-inverted-dimmed h-6 w-auto' />
       </div>
     )
   }
@@ -41,7 +41,7 @@ const ProviderIcon: FC<ProviderIconProps> = ({
       <img
         alt='provider-icon'
         src={renderI18nObject(provider.icon_small, language)}
-        className='w-6 h-6'
+        className='h-6 w-6'
       />
       <div className='system-md-semibold text-text-primary'>
         {renderI18nObject(provider.label, language)}
diff --git a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
index ec2bdc265f..c1a4cbd83f 100644
--- a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
@@ -135,18 +135,18 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
           variant={notConfigured ? 'primary' : 'secondary'}
           size='small'
         >
-          <RiEqualizer2Line className='mr-1 w-3.5 h-3.5' />
+          <RiEqualizer2Line className='mr-1 h-3.5 w-3.5' />
           {t('common.modelProvider.systemModelSettings')}
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[60]'>
-        <div className='pt-4 w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'>
+        <div className='border-components-panel-border bg-components-panel-bg w-[360px] rounded-xl border-[0.5px] pt-4 shadow-xl'>
           <div className='px-6 py-1'>
-            <div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
+            <div className='text-text-primary flex h-8 items-center text-[13px] font-medium'>
               {t('common.modelProvider.systemReasoningModel.key')}
               <Tooltip
                 popupContent={
-                  <div className='w-[261px] text-text-tertiary'>
+                  <div className='text-text-tertiary w-[261px]'>
                     {t('common.modelProvider.systemReasoningModel.tip')}
                   </div>
                 }
@@ -162,11 +162,11 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
             </div>
           </div>
           <div className='px-6 py-1'>
-            <div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
+            <div className='text-text-primary flex h-8 items-center text-[13px] font-medium'>
               {t('common.modelProvider.embeddingModel.key')}
               <Tooltip
                 popupContent={
-                  <div className='w-[261px] text-text-tertiary'>
+                  <div className='text-text-tertiary w-[261px]'>
                     {t('common.modelProvider.embeddingModel.tip')}
                   </div>
                 }
@@ -182,11 +182,11 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
             </div>
           </div>
           <div className='px-6 py-1'>
-            <div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
+            <div className='text-text-primary flex h-8 items-center text-[13px] font-medium'>
               {t('common.modelProvider.rerankModel.key')}
               <Tooltip
                 popupContent={
-                  <div className='w-[261px] text-text-tertiary'>
+                  <div className='text-text-tertiary w-[261px]'>
                     {t('common.modelProvider.rerankModel.tip')}
                   </div>
                 }
@@ -202,11 +202,11 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
             </div>
           </div>
           <div className='px-6 py-1'>
-            <div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
+            <div className='text-text-primary flex h-8 items-center text-[13px] font-medium'>
               {t('common.modelProvider.speechToTextModel.key')}
               <Tooltip
                 popupContent={
-                  <div className='w-[261px] text-text-tertiary'>
+                  <div className='text-text-tertiary w-[261px]'>
                     {t('common.modelProvider.speechToTextModel.tip')}
                   </div>
                 }
@@ -222,11 +222,11 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
             </div>
           </div>
           <div className='px-6 py-1'>
-            <div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
+            <div className='text-text-primary flex h-8 items-center text-[13px] font-medium'>
               {t('common.modelProvider.ttsModel.key')}
               <Tooltip
                 popupContent={
-                  <div className='w-[261px] text-text-tertiary'>
+                  <div className='text-text-tertiary w-[261px]'>
                     {t('common.modelProvider.ttsModel.tip')}
                   </div>
                 }
diff --git a/web/app/components/header/account-setting/plugin-page/index.tsx b/web/app/components/header/account-setting/plugin-page/index.tsx
index c580173a05..3ded6422f1 100644
--- a/web/app/components/header/account-setting/plugin-page/index.tsx
+++ b/web/app/components/header/account-setting/plugin-page/index.tsx
@@ -19,8 +19,8 @@ const PluginPage = () => {
       <div>
         {plugins?.map(plugin => Plugin_MAP[plugin.tool_name](plugin))}
       </div>
-      <div className='fixed bottom-0 w-[472px] h-[42px] flex items-center bg-white text-xs text-gray-500'>
-        <LockClosedIcon className='w-3 h-3 mr-1' />
+      <div className='fixed bottom-0 flex h-[42px] w-[472px] items-center bg-white text-xs text-gray-500'>
+        <LockClosedIcon className='mr-1 h-3 w-3' />
         {t('common.provider.encrypted.front')}
         <Link
           className='text-primary-600 mx-1'
diff --git a/web/app/components/header/app-back/index.tsx b/web/app/components/header/app-back/index.tsx
index 7a0e3f2d8c..bfc1736ce8 100644
--- a/web/app/components/header/app-back/index.tsx
+++ b/web/app/components/header/app-back/index.tsx
@@ -27,8 +27,8 @@ export default function AppBack({ curApp }: IAppBackProps) {
     >
       {
         (hovered && curApp)
-          ? <ArrowLeftIcon className='mr-1 w-[18px] h-[18px]' />
-          : <Squares2X2Icon className='mr-1 w-[18px] h-[18px]' />
+          ? <ArrowLeftIcon className='mr-1 h-[18px] w-[18px]' />
+          : <Squares2X2Icon className='mr-1 h-[18px] w-[18px]' />
       }
       {t('common.menus.apps')}
     </div>
diff --git a/web/app/components/header/app-nav/index.tsx b/web/app/components/header/app-nav/index.tsx
index 3ac57926e9..3b902811fc 100644
--- a/web/app/components/header/app-nav/index.tsx
+++ b/web/app/components/header/app-nav/index.tsx
@@ -117,8 +117,8 @@ const AppNav = () => {
     <>
       <Nav
         isApp
-        icon={<RiRobot2Line className='w-4 h-4' />}
-        activeIcon={<RiRobot2Fill className='w-4 h-4' />}
+        icon={<RiRobot2Line className='h-4 w-4' />}
+        activeIcon={<RiRobot2Fill className='h-4 w-4' />}
         text={t('common.menus.apps')}
         activeSegment={['apps', 'app']}
         link='/apps'
diff --git a/web/app/components/header/app-selector/index.tsx b/web/app/components/header/app-selector/index.tsx
index 9e5e902cde..2c88668d5d 100644
--- a/web/app/components/header/app-selector/index.tsx
+++ b/web/app/components/header/app-selector/index.tsx
@@ -32,14 +32,14 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
         <div>
           <MenuButton
             className="
-              inline-flex items-center w-full h-7 justify-center
+              inline-flex h-7 w-full items-center justify-center
               rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold
               text-[#1C64F2] hover:bg-[#EBF5FF]
             "
           >
             {curApp?.name}
             <ChevronDownIcon
-              className="w-3 h-3 ml-1"
+              className="ml-1 h-3 w-3"
               aria-hidden="true"
             />
           </MenuButton>
@@ -56,20 +56,20 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
           <MenuItems
             className="
               absolute -left-11 right-0 mt-1.5 w-60 max-w-80
-              divide-y divide-gray-100 origin-top-right rounded-lg bg-white
+              origin-top-right divide-y divide-gray-100 rounded-lg bg-white
               shadow-lg
             "
           >
-            {!!appItems.length && (<div className="px-1 py-1 overflow-auto" style={{ maxHeight: '50vh' }}>
+            {!!appItems.length && (<div className="overflow-auto px-1 py-1" style={{ maxHeight: '50vh' }}>
               {
                 appItems.map((app: AppDetailResponse) => (
                   <MenuItem key={app.id}>
                     <div className={itemClassName} onClick={() =>
                       router.push(`/app/${app.id}/${isCurrentWorkspaceEditor ? 'configuration' : 'overview'}`)
                     }>
-                      <div className='relative w-6 h-6 mr-2 bg-[#D5F5F6] rounded-[6px]'>
+                      <div className='relative mr-2 h-6 w-6 rounded-[6px] bg-[#D5F5F6]'>
                         <AppIcon size='tiny' />
-                        <div className='flex justify-center items-center absolute -right-0.5 -bottom-0.5 w-2.5 h-2.5 bg-white rounded'>
+                        <div className='absolute -bottom-0.5 -right-0.5 flex h-2.5 w-2.5 items-center justify-center rounded bg-white'>
                           <Indicator />
                         </div>
                       </div>
@@ -82,18 +82,18 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
             {isCurrentWorkspaceEditor && <MenuItem>
               <div className='p-1' onClick={() => setShowNewAppDialog(true)}>
                 <div
-                  className='flex items-center h-12 rounded-lg cursor-pointer hover:bg-gray-100'
+                  className='flex h-12 cursor-pointer items-center rounded-lg hover:bg-gray-100'
                 >
                   <div
                     className='
-                      flex justify-center items-center
-                      ml-4 mr-2 w-6 h-6 bg-gray-100 rounded-[6px]
-                      border-[0.5px] border-gray-200 border-dashed
+                      ml-4 mr-2 flex
+                      h-6 w-6 items-center justify-center rounded-[6px] border-[0.5px]
+                      border-dashed border-gray-200 bg-gray-100
                     '
                   >
-                    <PlusIcon className='w-4 h-4 text-gray-500' />
+                    <PlusIcon className='h-4 w-4 text-gray-500' />
                   </div>
-                  <div className='font-normal text-[14px] text-gray-700'>{t('common.menus.newApp')}</div>
+                  <div className='text-[14px] font-normal text-gray-700'>{t('common.menus.newApp')}</div>
                 </div>
               </div>
             </MenuItem>
diff --git a/web/app/components/header/dataset-nav/index.tsx b/web/app/components/header/dataset-nav/index.tsx
index 6205468ce4..8c997f2115 100644
--- a/web/app/components/header/dataset-nav/index.tsx
+++ b/web/app/components/header/dataset-nav/index.tsx
@@ -42,8 +42,8 @@ const DatasetNav = () => {
 
   return (
     <Nav
-      icon={<RiBook2Line className='w-4 h-4' />}
-      activeIcon={<RiBook2Fill className='w-4 h-4' />}
+      icon={<RiBook2Line className='h-4 w-4' />}
+      activeIcon={<RiBook2Fill className='h-4 w-4' />}
       text={t('common.menus.datasets')}
       activeSegment='datasets'
       link='/datasets'
diff --git a/web/app/components/header/env-nav/index.tsx b/web/app/components/header/env-nav/index.tsx
index 8f2e205bad..cec933a4c5 100644
--- a/web/app/components/header/env-nav/index.tsx
+++ b/web/app/components/header/env-nav/index.tsx
@@ -20,13 +20,13 @@ const EnvNav = () => {
 
   return (
     <div className={`
-      flex items-center h-[22px] mr-4 rounded-md px-2 text-xs font-medium border
+      mr-4 flex h-[22px] items-center rounded-md border px-2 text-xs font-medium
       ${headerEnvClassName[langeniusVersionInfo.current_env]}
     `}>
       {
         langeniusVersionInfo.current_env === 'TESTING' && (
           <>
-            <Beaker02 className='w-3 h-3 mr-1' />
+            <Beaker02 className='mr-1 h-3 w-3' />
             {t('common.environment.testing')}
           </>
         )
@@ -34,7 +34,7 @@ const EnvNav = () => {
       {
         langeniusVersionInfo.current_env === 'DEVELOPMENT' && (
           <>
-            <TerminalSquare className='w-3 h-3 mr-1' />
+            <TerminalSquare className='mr-1 h-3 w-3' />
             {t('common.environment.development')}
           </>
         )
diff --git a/web/app/components/header/explore-nav/index.tsx b/web/app/components/header/explore-nav/index.tsx
index 0046fc293d..b6ebf5d1a9 100644
--- a/web/app/components/header/explore-nav/index.tsx
+++ b/web/app/components/header/explore-nav/index.tsx
@@ -27,8 +27,8 @@ const ExploreNav = ({
     )}>
       {
         activated
-          ? <RiPlanetFill className='mr-2 w-4 h-4' />
-          : <RiPlanetLine className='mr-2 w-4 h-4' />
+          ? <RiPlanetFill className='mr-2 h-4 w-4' />
+          : <RiPlanetLine className='mr-2 h-4 w-4' />
       }
       {t('common.menus.explore')}
     </Link>
diff --git a/web/app/components/header/github-star/index.tsx b/web/app/components/header/github-star/index.tsx
index 75af9907d6..b0f2325b0d 100644
--- a/web/app/components/header/github-star/index.tsx
+++ b/web/app/components/header/github-star/index.tsx
@@ -37,12 +37,12 @@ const GithubStar = () => {
     <a
       href='https://github.com/langgenius/dify'
       target='_blank' rel='noopener noreferrer'
-      className='flex items-center leading-[18px] border border-gray-200 rounded-md text-xs text-gray-700 font-semibold overflow-hidden'>
-      <div className='flex items-center px-2 py-1 bg-gray-100'>
-        <Github className='mr-1 w-[18px] h-[18px]' />
+      className='flex items-center overflow-hidden rounded-md border border-gray-200 text-xs font-semibold leading-[18px] text-gray-700'>
+      <div className='flex items-center bg-gray-100 px-2 py-1'>
+        <Github className='mr-1 h-[18px] w-[18px]' />
         Star
       </div>
-      <div className='px-2 py-1 bg-white border-l border-gray-200'>{`${githubRepo.stargazers_count}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}</div>
+      <div className='border-l border-gray-200 bg-white px-2 py-1'>{`${githubRepo.stargazers_count}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}</div>
     </a>
   )
 }
diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx
index d0807ff8ad..56d59d5c7c 100644
--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@@ -52,21 +52,21 @@ const Header = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedSegment])
   return (
-    <div className='flex flex-1 items-center justify-between px-4 bg-background-body'>
+    <div className='bg-background-body flex flex-1 items-center justify-between px-4'>
       <div className='flex items-center'>
         {isMobile && <div
-          className='flex items-center justify-center h-8 w-8 cursor-pointer'
+          className='flex h-8 w-8 cursor-pointer items-center justify-center'
           onClick={toggle}
         >
           <Bars3Icon className="h-4 w-4 text-gray-500" />
         </div>}
         {
           !isMobile
-          && <div className='flex w-64 p-2 pl-3 gap-1.5 items-center shrink-0 self-stretch'>
-            <Link href="/apps" className='flex w-8 h-8 items-center justify-center gap-2 shrink-0'>
+          && <div className='flex w-64 shrink-0 items-center gap-1.5 self-stretch p-2 pl-3'>
+            <Link href="/apps" className='flex h-8 w-8 shrink-0 items-center justify-center gap-2'>
               <LogoSite className='object-contain' />
             </Link>
-            <div className='font-light text-divider-deep'>/</div>
+            <div className='text-divider-deep font-light'>/</div>
             <div className='flex items-center gap-0.5'>
               <WorkspaceProvider>
                 <WorkplaceSelector />
@@ -74,7 +74,7 @@ const Header = () => {
               {enableBilling && (
                 <div className='select-none'>
                   <PremiumBadge color='blue' allowHover={true} onClick={handlePlanClick}>
-                    <SparklesSoft className='flex items-center py-[1px] pl-[3px] w-3.5 h-3.5 text-components-premium-badge-indigo-text-stop-0' />
+                    <SparklesSoft className='text-components-premium-badge-indigo-text-stop-0 flex h-3.5 w-3.5 items-center py-[1px] pl-[3px]' />
                     <div className='system-xs-medium'>
                       <span className='p-1'>
                         {t('billing.upgradeBtn.encourageShort')}
@@ -89,15 +89,15 @@ const Header = () => {
       </div >
       {isMobile && (
         <div className='flex'>
-          <Link href="/apps" className='flex items-center mr-4'>
+          <Link href="/apps" className='mr-4 flex items-center'>
             <LogoSite />
           </Link>
-          <div className='font-light text-divider-deep'>/</div>
+          <div className='text-divider-deep font-light'>/</div>
           {
             enableBilling && (
               <div className='select-none'>
                 <PremiumBadge color='blue' allowHover={true} onClick={handlePlanClick}>
-                  <SparklesSoft className='flex items-center py-[1px] pl-[3px] w-3.5 h-3.5 text-components-premium-badge-indigo-text-stop-0' />
+                  <SparklesSoft className='text-components-premium-badge-indigo-text-stop-0 flex h-3.5 w-3.5 items-center py-[1px] pl-[3px]' />
                   <div className='system-xs-medium'>
                     <span className='p-1'>
                       {t('billing.upgradeBtn.encourageShort')}
@@ -119,7 +119,7 @@ const Header = () => {
           </div>
         )
       }
-      <div className='flex items-center shrink-0'>
+      <div className='flex shrink-0 items-center'>
         <LicenseNav />
         <EnvNav />
         <div className='mr-3'>
@@ -129,7 +129,7 @@ const Header = () => {
       </div>
       {
         (isMobile && isShowNavMenu) && (
-          <div className='w-full flex flex-col p-2 gap-y-1'>
+          <div className='flex w-full flex-col gap-y-1 p-2'>
             {!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />}
             {!isCurrentWorkspaceDatasetOperator && <AppNav />}
             {(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
diff --git a/web/app/components/header/license-env/index.tsx b/web/app/components/header/license-env/index.tsx
index 800d86d2b8..9de5942cd2 100644
--- a/web/app/components/header/license-env/index.tsx
+++ b/web/app/components/header/license-env/index.tsx
@@ -13,13 +13,13 @@ const LicenseNav = () => {
   if (systemFeatures.license?.status === LicenseStatus.EXPIRING) {
     const expiredAt = systemFeatures.license?.expired_at
     const count = dayjs(expiredAt).diff(dayjs(), 'days')
-    return <div className='px-2 py-1 mr-4 rounded-full bg-util-colors-orange-orange-50 border-util-colors-orange-orange-100 system-xs-medium text-util-colors-orange-orange-600'>
+    return <div className='bg-util-colors-orange-orange-50 border-util-colors-orange-orange-100 system-xs-medium text-util-colors-orange-orange-600 mr-4 rounded-full px-2 py-1'>
       {count <= 1 && <span>{t('common.license.expiring', { count })}</span>}
       {count > 1 && <span>{t('common.license.expiring_plural', { count })}</span>}
     </div>
   }
   if (systemFeatures.license.status === LicenseStatus.ACTIVE) {
-    return <div className='px-2 py-1 mr-4 rounded-md bg-util-colors-indigo-indigo-50 border-util-colors-indigo-indigo-100 system-xs-medium text-util-colors-indigo-indigo-600'>
+    return <div className='bg-util-colors-indigo-indigo-50 border-util-colors-indigo-indigo-100 system-xs-medium text-util-colors-indigo-indigo-600 mr-4 rounded-md px-2 py-1'>
       Enterprise
     </div>
   }
diff --git a/web/app/components/header/maintenance-notice.tsx b/web/app/components/header/maintenance-notice.tsx
index a7f3faab8e..78715bb53e 100644
--- a/web/app/components/header/maintenance-notice.tsx
+++ b/web/app/components/header/maintenance-notice.tsx
@@ -24,14 +24,14 @@ const MaintenanceNotice = () => {
     return null
 
   return (
-    <div className='shrink-0 flex items-center px-4 h-[38px] bg-[#FFFAEB] border-b border-[0.5px] border-b-[#FEF0C7] z-20'>
-      <div className='shrink-0 flex items-center mr-2 px-2 h-[22px] bg-[#F79009] text-white text-[11px] font-medium rounded-xl'>{titleByLocale[locale]}</div>
+    <div className='z-20 flex h-[38px] shrink-0 items-center border-[0.5px] border-b border-b-[#FEF0C7] bg-[#FFFAEB] px-4'>
+      <div className='mr-2 flex h-[22px] shrink-0 items-center rounded-xl bg-[#F79009] px-2 text-[11px] font-medium text-white'>{titleByLocale[locale]}</div>
       {
         (NOTICE_I18N.href && NOTICE_I18N.href !== '#')
-          ? <div className='grow text-xs font-medium text-gray-700 cursor-pointer' onClick={handleJumpNotice}>{descByLocale[locale]}</div>
+          ? <div className='grow cursor-pointer text-xs font-medium text-gray-700' onClick={handleJumpNotice}>{descByLocale[locale]}</div>
           : <div className='grow text-xs font-medium text-gray-700'>{descByLocale[locale]}</div>
       }
-      <X className='shrink-0 w-4 h-4 text-gray-500 cursor-pointer' onClick={handleCloseNotice} />
+      <X className='h-4 w-4 shrink-0 cursor-pointer text-gray-500' onClick={handleCloseNotice} />
     </div>
   )
 }
diff --git a/web/app/components/header/nav/index.tsx b/web/app/components/header/nav/index.tsx
index de98593ddd..d0cc480619 100644
--- a/web/app/components/header/nav/index.tsx
+++ b/web/app/components/header/nav/index.tsx
@@ -38,8 +38,8 @@ const Nav = ({
 
   return (
     <div className={`
-      flex items-center h-8 mr-0 sm:mr-3 px-0.5 rounded-xl text-sm shrink-0 font-medium
-      ${isActivated && 'bg-components-main-nav-nav-button-bg-active shadow-md font-semibold'}
+      mr-0 flex h-8 shrink-0 items-center rounded-xl px-0.5 text-sm font-medium sm:mr-3
+      ${isActivated && 'bg-components-main-nav-nav-button-bg-active font-semibold shadow-md'}
       ${!curNav && !isActivated && 'hover:bg-components-main-nav-nav-button-bg-hover'}
     `}>
       <Link href={link}>
@@ -56,7 +56,7 @@ const Nav = ({
           <div className='mr-2'>
             {
               (hovered && curNav)
-                ? <ArrowNarrowLeft className='w-4 h-4' />
+                ? <ArrowNarrowLeft className='h-4 w-4' />
                 : isActivated
                   ? activeIcon
                   : icon
@@ -68,7 +68,7 @@ const Nav = ({
       {
         curNav && isActivated && (
           <>
-            <div className='font-light text-divider-deep'>/</div>
+            <div className='text-divider-deep font-light'>/</div>
             <NavSelector
               isApp={isApp}
               curNav={curNav}
diff --git a/web/app/components/header/nav/nav-selector/index.tsx b/web/app/components/header/nav/nav-selector/index.tsx
index a0b97da76b..5cec997934 100644
--- a/web/app/components/header/nav/nav-selector/index.tsx
+++ b/web/app/components/header/nav/nav-selector/index.tsx
@@ -58,52 +58,52 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
         {({ open }) => (
           <>
             <MenuButton className={cn(
-              'group inline-flex items-center w-full h-7 justify-center rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold text-components-main-nav-nav-button-text-active hover:hover:bg-components-main-nav-nav-button-bg-active-hover',
+              'text-components-main-nav-nav-button-text-active hover:hover:bg-components-main-nav-nav-button-bg-active-hover group inline-flex h-7 w-full items-center justify-center rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold',
               open && 'bg-components-main-nav-nav-button-bg-active',
             )}>
               <div className='max-w-[180px] truncate' title={curNav?.name}>{curNav?.name}</div>
               <RiArrowDownSLine
-                className={cn('shrink-0 w-3 h-3 ml-1 opacity-50 group-hover:opacity-100', open && '!opacity-100')}
+                className={cn('ml-1 h-3 w-3 shrink-0 opacity-50 group-hover:opacity-100', open && '!opacity-100')}
                 aria-hidden="true"
               />
             </MenuButton>
             <MenuItems
               className="
                 absolute -left-11 right-0 mt-1.5 w-60 max-w-80
-                divide-y divide-gray-100 origin-top-right rounded-lg bg-white
+                origin-top-right divide-y divide-gray-100 rounded-lg bg-white
                 shadow-lg
               "
             >
-              <div className="px-1 py-1 overflow-auto" style={{ maxHeight: '50vh' }} onScroll={handleScroll}>
+              <div className="overflow-auto px-1 py-1" style={{ maxHeight: '50vh' }} onScroll={handleScroll}>
                 {
                   navs.map(nav => (
                     <MenuItem key={nav.id}>
-                      <div className='flex items-center w-full px-3 py-[6px] text-gray-700 text-[14px] rounded-lg font-normal hover:bg-gray-100 cursor-pointer truncate' onClick={() => {
+                      <div className='flex w-full cursor-pointer items-center truncate rounded-lg px-3 py-[6px] text-[14px] font-normal text-gray-700 hover:bg-gray-100' onClick={() => {
                         if (curNav?.id === nav.id)
                           return
                         setAppDetail()
                         router.push(nav.link)
                       }} title={nav.name}>
-                        <div className='relative w-6 h-6 mr-2 rounded-md'>
+                        <div className='relative mr-2 h-6 w-6 rounded-md'>
                           <AppIcon size='tiny' iconType={nav.icon_type} icon={nav.icon} background={nav.icon_background} imageUrl={nav.icon_url} />
                           {!!nav.mode && (
                             <span className={cn(
-                              'absolute w-3.5 h-3.5 -bottom-0.5 -right-0.5 p-0.5 bg-white rounded border-[0.5px] border-[rgba(0,0,0,0.02)] shadow-sm',
+                              'absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 rounded border-[0.5px] border-[rgba(0,0,0,0.02)] bg-white p-0.5 shadow-sm',
                             )}>
                               {nav.mode === 'advanced-chat' && (
-                                <ChatBot className='w-2.5 h-2.5 text-[#1570EF]' />
+                                <ChatBot className='h-2.5 w-2.5 text-[#1570EF]' />
                               )}
                               {nav.mode === 'agent-chat' && (
-                                <CuteRobot className='w-2.5 h-2.5 text-indigo-600' />
+                                <CuteRobot className='h-2.5 w-2.5 text-indigo-600' />
                               )}
                               {nav.mode === 'chat' && (
-                                <ChatBot className='w-2.5 h-2.5 text-[#1570EF]' />
+                                <ChatBot className='h-2.5 w-2.5 text-[#1570EF]' />
                               )}
                               {nav.mode === 'completion' && (
-                                <AiText className='w-2.5 h-2.5 text-[#0E9384]' />
+                                <AiText className='h-2.5 w-2.5 text-[#0E9384]' />
                               )}
                               {nav.mode === 'workflow' && (
-                                <Route className='w-2.5 h-2.5 text-[#f79009]' />
+                                <Route className='h-2.5 w-2.5 text-[#f79009]' />
                               )}
                             </span>
                           )}
@@ -117,31 +117,31 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
                 }
               </div>
               {!isApp && isCurrentWorkspaceEditor && (
-                <MenuButton className='p-1 w-full'>
+                <MenuButton className='w-full p-1'>
                   <div onClick={() => onCreate('')} className={cn(
-                    'flex items-center gap-2 px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100',
+                    'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-gray-100',
                   )}>
-                    <div className='shrink-0 flex justify-center items-center w-6 h-6 bg-gray-50 rounded-[6px] border-[0.5px] border-gray-200 border'>
-                      <RiAddLine className='w-4 h-4 text-gray-500' />
+                    <div className='flex h-6 w-6 shrink-0 items-center justify-center rounded-[6px] border border-[0.5px] border-gray-200 bg-gray-50'>
+                      <RiAddLine className='h-4 w-4 text-gray-500' />
                     </div>
-                    <div className='grow text-left font-normal text-[14px] text-gray-700'>{createText}</div>
+                    <div className='grow text-left text-[14px] font-normal text-gray-700'>{createText}</div>
                   </div>
                 </MenuButton>
               )}
               {isApp && isCurrentWorkspaceEditor && (
-                <Menu as="div" className="relative w-full h-full">
+                <Menu as="div" className="relative h-full w-full">
                   {({ open }) => (
                     <>
-                      <MenuButton className='p-1 w-full'>
+                      <MenuButton className='w-full p-1'>
                         <div className={cn(
-                          'flex items-center gap-2 px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100',
+                          'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-gray-100',
                           open && '!bg-gray-100',
                         )}>
-                          <div className='shrink-0 flex justify-center items-center w-6 h-6 bg-gray-50 rounded-[6px] border-[0.5px] border-gray-200 border'>
-                            <RiAddLine className='w-4 h-4 text-gray-500' />
+                          <div className='flex h-6 w-6 shrink-0 items-center justify-center rounded-[6px] border border-[0.5px] border-gray-200 bg-gray-50'>
+                            <RiAddLine className='h-4 w-4 text-gray-500' />
                           </div>
-                          <div className='grow text-left font-normal text-[14px] text-gray-700'>{createText}</div>
-                          <RiArrowRightSLine className='shrink-0 w-3.5 h-3.5  text-gray-500' />
+                          <div className='grow text-left text-[14px] font-normal text-gray-700'>{createText}</div>
+                          <RiArrowRightSLine className='h-3.5 w-3.5 shrink-0  text-gray-500' />
                         </div>
                       </MenuButton>
                       <Transition
@@ -154,21 +154,21 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
                         leaveTo="transform opacity-0 scale-95"
                       >
                         <MenuItems className={cn(
-                          'absolute top-[3px] right-[-198px] min-w-[200px] z-10 bg-white border-[0.5px] border-gray-200 rounded-lg shadow-lg',
+                          'absolute right-[-198px] top-[3px] z-10 min-w-[200px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg',
                         )}>
                           <div className='p-1'>
-                            <div className={cn('flex items-center px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100 text-gray-700 font-normal')} onClick={() => onCreate('blank')}>
-                              <FilePlus01 className='shrink-0 mr-2 w-4 h-4 text-gray-600' />
+                            <div className={cn('flex cursor-pointer items-center rounded-lg px-3 py-[6px] font-normal text-gray-700 hover:bg-gray-100')} onClick={() => onCreate('blank')}>
+                              <FilePlus01 className='mr-2 h-4 w-4 shrink-0 text-gray-600' />
                               {t('app.newApp.startFromBlank')}
                             </div>
-                            <div className={cn('flex items-center px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100 text-gray-700 font-normal')} onClick={() => onCreate('template')}>
-                              <FilePlus02 className='shrink-0 mr-2 w-4 h-4 text-gray-600' />
+                            <div className={cn('flex cursor-pointer items-center rounded-lg px-3 py-[6px] font-normal text-gray-700 hover:bg-gray-100')} onClick={() => onCreate('template')}>
+                              <FilePlus02 className='mr-2 h-4 w-4 shrink-0 text-gray-600' />
                               {t('app.newApp.startFromTemplate')}
                             </div>
                           </div>
-                          <div className='p-1 border-t border-gray-100'>
-                            <div className={cn('flex items-center px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100 text-gray-700 font-normal')} onClick={() => onCreate('dsl')}>
-                              <FileArrow01 className='shrink-0 mr-2 w-4 h-4 text-gray-600' />
+                          <div className='border-t border-gray-100 p-1'>
+                            <div className={cn('flex cursor-pointer items-center rounded-lg px-3 py-[6px] font-normal text-gray-700 hover:bg-gray-100')} onClick={() => onCreate('dsl')}>
+                              <FileArrow01 className='mr-2 h-4 w-4 shrink-0 text-gray-600' />
                               {t('app.importDSL')}
                             </div>
                           </div>
diff --git a/web/app/components/header/plugins-nav/downloading-icon.tsx b/web/app/components/header/plugins-nav/downloading-icon.tsx
index d3fc486445..e893f8a438 100644
--- a/web/app/components/header/plugins-nav/downloading-icon.tsx
+++ b/web/app/components/header/plugins-nav/downloading-icon.tsx
@@ -2,7 +2,7 @@ import s from './downloading-icon.module.css'
 
 const DownloadingIcon = () => {
   return (
-    <div className="inline-flex text-components-button-secondary-text">
+    <div className="text-components-button-secondary-text inline-flex">
       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="install-icon">
         <g id="install-line">
           <path d="M8 2V4H5L4.999 14H18.999L19 4H16V2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H8ZM18.999 16H4.999L5 20H19L18.999 16Z" fill="currentColor"/>
diff --git a/web/app/components/header/plugins-nav/index.tsx b/web/app/components/header/plugins-nav/index.tsx
index ab742c98cf..b22e717c94 100644
--- a/web/app/components/header/plugins-nav/index.tsx
+++ b/web/app/components/header/plugins-nav/index.tsx
@@ -41,14 +41,14 @@ const PluginsNav = ({
           (isFailed || isInstallingWithError) && !activated && (
             <Indicator
               color='red'
-              className='absolute top-[-1px] left-[-1px]'
+              className='absolute left-[-1px] top-[-1px]'
             />
           )
         }
-        <div className='flex mr-0.5 w-5 h-5 justify-center items-center'>
+        <div className='mr-0.5 flex h-5 w-5 items-center justify-center'>
           {
             (!(isInstalling || isInstallingWithError) || activated) && (
-              <Group className='w-4 h-4' />
+              <Group className='h-4 w-4' />
             )
           }
           {
diff --git a/web/app/components/header/tools-nav/index.tsx b/web/app/components/header/tools-nav/index.tsx
index 81e2f48fa4..b87398708c 100644
--- a/web/app/components/header/tools-nav/index.tsx
+++ b/web/app/components/header/tools-nav/index.tsx
@@ -28,8 +28,8 @@ const ToolsNav = ({
     )}>
       {
         activated
-          ? <RiHammerFill className='mr-2 w-4 h-4' />
-          : <RiHammerLine className='mr-2 w-4 h-4' />
+          ? <RiHammerFill className='mr-2 h-4 w-4' />
+          : <RiHammerLine className='mr-2 h-4 w-4' />
       }
       {t('common.menus.tools')}
     </Link>
diff --git a/web/app/components/plugins/base/key-value-item.tsx b/web/app/components/plugins/base/key-value-item.tsx
index 9d6cda18d3..5a98012917 100644
--- a/web/app/components/plugins/base/key-value-item.tsx
+++ b/web/app/components/plugins/base/key-value-item.tsx
@@ -48,14 +48,14 @@ const KeyValueItem: FC<Props> = ({
 
   return (
     <div className='flex items-center gap-1'>
-      <span className={cn('flex flex-col justify-center items-start text-text-tertiary system-xs-medium', labelWidthClassName)}>{label}</span>
-      <div className='flex justify-center items-center gap-0.5'>
-        <span className={cn(valueMaxWidthClassName, ' truncate system-xs-medium text-text-secondary')}>
+      <span className={cn('text-text-tertiary system-xs-medium flex flex-col items-start justify-center', labelWidthClassName)}>{label}</span>
+      <div className='flex items-center justify-center gap-0.5'>
+        <span className={cn(valueMaxWidthClassName, ' system-xs-medium text-text-secondary truncate')}>
           {maskedValue || value}
         </span>
         <Tooltip popupContent={t(`common.operation.${isCopied ? 'copied' : 'copy'}`)} position='top'>
           <ActionButton onClick={handleCopy}>
-            <CopyIcon className='shrink-0 w-3.5 h-3.5 text-text-tertiary' />
+            <CopyIcon className='text-text-tertiary h-3.5 w-3.5 shrink-0' />
           </ActionButton>
         </Tooltip>
       </div>
diff --git a/web/app/components/plugins/card/base/card-icon.tsx b/web/app/components/plugins/card/base/card-icon.tsx
index 3587f3fd0d..1c54aeb63a 100644
--- a/web/app/components/plugins/card/base/card-icon.tsx
+++ b/web/app/components/plugins/card/base/card-icon.tsx
@@ -42,7 +42,7 @@ const Icon = ({
 
   return (
     <div
-      className={cn('shrink-0 relative rounded-md bg-center bg-no-repeat bg-contain', iconSizeMap[size], className)}
+      className={cn('relative shrink-0 rounded-md bg-contain bg-center bg-no-repeat', iconSizeMap[size], className)}
       style={{
         backgroundImage: `url(${src})`,
       }}
@@ -50,13 +50,13 @@ const Icon = ({
       {
         installed
         && <div className={cn(iconClassName, 'bg-state-success-solid')}>
-          <RiCheckLine className='w-3 h-3 text-text-primary-on-surface' />
+          <RiCheckLine className='text-text-primary-on-surface h-3 w-3' />
         </div>
       }
       {
         installFailed
         && <div className={cn(iconClassName, 'bg-state-destructive-solid')}>
-          <RiCloseLine className='w-3 h-3 text-text-primary-on-surface' />
+          <RiCloseLine className='text-text-primary-on-surface h-3 w-3' />
         </div>
       }
     </div>
diff --git a/web/app/components/plugins/card/base/corner-mark.tsx b/web/app/components/plugins/card/base/corner-mark.tsx
index cdb9eb5417..ff97568831 100644
--- a/web/app/components/plugins/card/base/corner-mark.tsx
+++ b/web/app/components/plugins/card/base/corner-mark.tsx
@@ -2,9 +2,9 @@ import { LeftCorner } from '../../../base/icons/src/vender/plugin'
 
 const CornerMark = ({ text }: { text: string }) => {
   return (
-    <div className='absolute top-0 right-0 flex pl-[13px] '>
+    <div className='absolute right-0 top-0 flex pl-[13px] '>
       <LeftCorner className="text-background-section" />
-      <div className="h-5 leading-5 rounded-tr-xl pr-2 bg-background-section text-text-tertiary system-2xs-medium-uppercase">{text}</div>
+      <div className="bg-background-section text-text-tertiary system-2xs-medium-uppercase h-5 rounded-tr-xl pr-2 leading-5">{text}</div>
     </div>
   )
 }
diff --git a/web/app/components/plugins/card/base/download-count.tsx b/web/app/components/plugins/card/base/download-count.tsx
index 0c28e6970e..ac85a37509 100644
--- a/web/app/components/plugins/card/base/download-count.tsx
+++ b/web/app/components/plugins/card/base/download-count.tsx
@@ -9,8 +9,8 @@ const DownloadCount = ({
   downloadCount,
 }: Props) => {
   return (
-    <div className="flex items-center space-x-1 text-text-tertiary">
-      <RiInstallLine className="shrink-0 w-3 h-3" />
+    <div className="text-text-tertiary flex items-center space-x-1">
+      <RiInstallLine className="h-3 w-3 shrink-0" />
       <div className="system-xs-regular">{formatNumber(downloadCount)}</div>
     </div>
   )
diff --git a/web/app/components/plugins/card/base/org-info.tsx b/web/app/components/plugins/card/base/org-info.tsx
index 3d549d6c5e..75c9a075eb 100644
--- a/web/app/components/plugins/card/base/org-info.tsx
+++ b/web/app/components/plugins/card/base/org-info.tsx
@@ -13,14 +13,14 @@ const OrgInfo = ({
   packageNameClassName,
 }: Props) => {
   return (
-    <div className={cn('flex items-center h-4 space-x-0.5', className)}>
+    <div className={cn('flex h-4 items-center space-x-0.5', className)}>
       {orgName && (
         <>
-          <span className='shrink-0 text-text-tertiary system-xs-regular'>{orgName}</span>
-          <span className='shrink-0 text-text-quaternary system-xs-regular'>/</span>
+          <span className='text-text-tertiary system-xs-regular shrink-0'>{orgName}</span>
+          <span className='text-text-quaternary system-xs-regular shrink-0'>/</span>
         </>
       )}
-      <span className={cn('shrink-0 w-0 grow truncate text-text-tertiary system-xs-regular', packageNameClassName)}>
+      <span className={cn('text-text-tertiary system-xs-regular w-0 shrink-0 grow truncate', packageNameClassName)}>
         {packageName}
       </span>
     </div>
diff --git a/web/app/components/plugins/card/base/placeholder.tsx b/web/app/components/plugins/card/base/placeholder.tsx
index 62f373f922..8da67c2766 100644
--- a/web/app/components/plugins/card/base/placeholder.tsx
+++ b/web/app/components/plugins/card/base/placeholder.tsx
@@ -9,7 +9,7 @@ type Props = {
 }
 
 export const LoadingPlaceholder = ({ className }: { className?: string }) => (
-  <div className={cn('h-2 rounded-sm opacity-20 bg-text-quaternary', className)} />
+  <div className={cn('bg-text-quaternary h-2 rounded-sm opacity-20', className)} />
 )
 
 const Placeholder = ({
@@ -20,15 +20,15 @@ const Placeholder = ({
     <div className={wrapClassName}>
       <SkeletonRow>
         <div
-          className='flex w-10 h-10 p-1 justify-center items-center gap-2 rounded-[10px]
-              border-[0.5px] border-components-panel-border bg-background-default backdrop-blur-sm'>
-          <div className='flex w-5 h-5 justify-center items-center'>
+          className='border-components-panel-border bg-background-default flex h-10 w-10 items-center justify-center gap-2
+              rounded-[10px] border-[0.5px] p-1 backdrop-blur-sm'>
+          <div className='flex h-5 w-5 items-center justify-center'>
             <Group className='text-text-tertiary' />
           </div>
         </div>
         <div className="grow">
           <SkeletonContainer>
-            <div className="flex items-center h-5">
+            <div className="flex h-5 items-center">
               {loadingFileName ? (
                 <Title title={loadingFileName} />
               ) : (
diff --git a/web/app/components/plugins/card/base/title.tsx b/web/app/components/plugins/card/base/title.tsx
index 383e7b31c1..e54f84a055 100644
--- a/web/app/components/plugins/card/base/title.tsx
+++ b/web/app/components/plugins/card/base/title.tsx
@@ -4,7 +4,7 @@ const Title = ({
   title: string
 }) => {
   return (
-    <div className='truncate text-text-secondary system-md-semibold'>
+    <div className='text-text-secondary system-md-semibold truncate'>
       {title}
     </div>
   )
diff --git a/web/app/components/plugins/card/card-more-info.tsx b/web/app/components/plugins/card/card-more-info.tsx
index b7ba8c1a53..7704b86f58 100644
--- a/web/app/components/plugins/card/card-more-info.tsx
+++ b/web/app/components/plugins/card/card-more-info.tsx
@@ -10,20 +10,20 @@ const CardMoreInfo = ({
   tags,
 }: Props) => {
   return (
-    <div className="flex items-center h-5">
+    <div className="flex h-5 items-center">
       {downloadCount !== undefined && <DownloadCount downloadCount={downloadCount} />}
-      {downloadCount !== undefined && tags && tags.length > 0 && <div className="mx-2 text-text-quaternary system-xs-regular">·</div>}
+      {downloadCount !== undefined && tags && tags.length > 0 && <div className="text-text-quaternary system-xs-regular mx-2">·</div>}
       {tags && tags.length > 0 && (
         <>
-          <div className="flex flex-wrap space-x-2 h-4 overflow-hidden">
+          <div className="flex h-4 flex-wrap space-x-2 overflow-hidden">
             {tags.map(tag => (
               <div
                 key={tag}
-                className="flex space-x-1 system-xs-regular max-w-[120px] overflow-hidden"
+                className="system-xs-regular flex max-w-[120px] space-x-1 overflow-hidden"
                 title={`# ${tag}`}
               >
                 <span className="text-text-quaternary">#</span>
-                <span className="truncate text-text-tertiary">{tag}</span>
+                <span className="text-text-tertiary truncate">{tag}</span>
               </div>
             ))}
           </div>
diff --git a/web/app/components/plugins/card/index.tsx b/web/app/components/plugins/card/index.tsx
index 871f5cb62f..9163dd4c5a 100644
--- a/web/app/components/plugins/card/index.tsx
+++ b/web/app/components/plugins/card/index.tsx
@@ -52,7 +52,7 @@ const Card = ({
   const getLocalizedText = (obj: Record<string, string> | undefined) =>
     obj ? renderI18nObject(obj, locale) : ''
 
-  const wrapClassName = cn('relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)
+  const wrapClassName = cn('border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg shadow-xs relative rounded-xl border-[0.5px] p-4 pb-3', className)
   if (isLoading) {
     return (
       <Placeholder
@@ -69,9 +69,9 @@ const Card = ({
       <div className="flex">
         <Icon src={icon} installed={installed} installFailed={installFailed} />
         <div className="ml-3 w-0 grow">
-          <div className="flex items-center h-5">
+          <div className="flex h-5 items-center">
             <Title title={getLocalizedText(label)} />
-            {verified && <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />}
+            {verified && <RiVerifiedBadgeLine className="text-text-accent ml-0.5 h-4 w-4 shrink-0" />}
             {titleLeft} {/* This can be version badge */}
           </div>
           <OrgInfo
diff --git a/web/app/components/plugins/install-plugin/base/installed.tsx b/web/app/components/plugins/install-plugin/base/installed.tsx
index efe8d4af76..841f6abd13 100644
--- a/web/app/components/plugins/install-plugin/base/installed.tsx
+++ b/web/app/components/plugins/install-plugin/base/installed.tsx
@@ -30,10 +30,10 @@ const Installed: FC<Props> = ({
   }
   return (
     <>
-      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
+      <div className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'>
         <p className='text-text-secondary system-md-regular'>{(isFailed && errMsg) ? errMsg : t(`plugin.installModal.${isFailed ? 'installFailedDesc' : 'installedSuccessfullyDesc'}`)}</p>
         {payload && (
-          <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
+          <div className='bg-background-section-burn flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl p-2'>
             <Card
               className='w-full'
               payload={isMarketPayload ? pluginManifestInMarketToPluginProps(payload as PluginManifestInMarket) : pluginManifestToCardPluginProps(payload as PluginDeclaration)}
@@ -45,7 +45,7 @@ const Installed: FC<Props> = ({
         )}
       </div>
       {/* Action Buttons */}
-      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+      <div className='flex items-center justify-end gap-2 self-stretch p-6 pt-5'>
         <Button
           variant='primary'
           className='min-w-[72px]'
diff --git a/web/app/components/plugins/install-plugin/base/loading-error.tsx b/web/app/components/plugins/install-plugin/base/loading-error.tsx
index eb698bb573..142bcd43ff 100644
--- a/web/app/components/plugins/install-plugin/base/loading-error.tsx
+++ b/web/app/components/plugins/install-plugin/base/loading-error.tsx
@@ -16,23 +16,23 @@ const LoadingError: FC = () => {
         checked={false}
         disabled
       />
-      <div className='grow relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs'>
+      <div className='border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg shadow-xs relative grow rounded-xl border-[0.5px] p-4 pb-3'>
         <div className="flex">
           <div
-            className='relative flex w-10 h-10 p-1 justify-center items-center gap-2 rounded-[10px]
-              border-[0.5px] border-state-destructive-border bg-state-destructive-hover backdrop-blur-sm'>
-            <div className='flex w-5 h-5 justify-center items-center'>
+            className='border-state-destructive-border bg-state-destructive-hover relative flex h-10 w-10 items-center justify-center gap-2
+              rounded-[10px] border-[0.5px] p-1 backdrop-blur-sm'>
+            <div className='flex h-5 w-5 items-center justify-center'>
               <Group className='text-text-quaternary' />
             </div>
-            <div className='absolute bottom-[-4px] right-[-4px] rounded-full border-[2px] border-components-panel-bg bg-state-destructive-solid'>
-              <RiCloseLine className='w-3 h-3 text-text-primary-on-surface' />
+            <div className='border-components-panel-bg bg-state-destructive-solid absolute bottom-[-4px] right-[-4px] rounded-full border-[2px]'>
+              <RiCloseLine className='text-text-primary-on-surface h-3 w-3' />
             </div>
           </div>
           <div className="ml-3 grow">
-            <div className="flex items-center h-5 system-md-semibold text-text-destructive">
+            <div className="system-md-semibold text-text-destructive flex h-5 items-center">
               {t('plugin.installModal.pluginLoadError')}
             </div>
-            <div className='mt-0.5 system-xs-regular text-text-tertiary'>
+            <div className='system-xs-regular text-text-tertiary mt-0.5'>
               {t('plugin.installModal.pluginLoadErrorDesc')}
             </div>
           </div>
diff --git a/web/app/components/plugins/install-plugin/base/loading.tsx b/web/app/components/plugins/install-plugin/base/loading.tsx
index 52cccc2cd0..7f68b29d62 100644
--- a/web/app/components/plugins/install-plugin/base/loading.tsx
+++ b/web/app/components/plugins/install-plugin/base/loading.tsx
@@ -11,7 +11,7 @@ const Loading = () => {
         checked={false}
         disabled
       />
-      <div className='grow relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs'>
+      <div className='border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg shadow-xs relative grow rounded-xl border-[0.5px] p-4 pb-3'>
         <Placeholder
           wrapClassName='w-full'
         />
diff --git a/web/app/components/plugins/install-plugin/install-bundle/index.tsx b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
index 84750d65ad..27a5a07d02 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
@@ -52,11 +52,11 @@ const InstallBundle: FC<Props> = ({
     <Modal
       isShow={true}
       onClose={foldAnimInto}
-      className={cn(modalClassName, 'flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl')}
+      className={cn(modalClassName, 'border-components-panel-border bg-components-panel-bg shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] p-0')}
       closable
     >
-      <div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
-        <div className='self-stretch text-text-primary title-2xl-semi-bold'>
+      <div className='flex items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6'>
+        <div className='text-text-primary title-2xl-semi-bold self-stretch'>
           {getTitle()}
         </div>
       </div>
diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
index c70e2759d0..d5189f9683 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
@@ -76,11 +76,11 @@ const Install: FC<Props> = ({
   }
   return (
     <>
-      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
+      <div className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'>
         <div className='text-text-secondary system-md-regular'>
           <p>{t(`${i18nPrefix}.${selectedPluginsNum > 1 ? 'readyToInstallPackages' : 'readyToInstallPackage'}`, { num: selectedPluginsNum })}</p>
         </div>
-        <div className='w-full p-2 rounded-2xl bg-background-section-burn space-y-1'>
+        <div className='bg-background-section-burn w-full space-y-1 rounded-2xl p-2'>
           <InstallMulti
             allPlugins={allPlugins}
             selectedPlugins={selectedPlugins}
@@ -92,7 +92,7 @@ const Install: FC<Props> = ({
       </div>
       {/* Action Buttons */}
       {!isHideButton && (
-        <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+        <div className='flex items-center justify-end gap-2 self-stretch p-6 pt-5'>
           {!canInstall && (
             <Button variant='secondary' className='min-w-[72px]' onClick={onCancel}>
               {t('common.operation.cancel')}
@@ -100,11 +100,11 @@ const Install: FC<Props> = ({
           )}
           <Button
             variant='primary'
-            className='min-w-[72px] flex space-x-0.5'
+            className='flex min-w-[72px] space-x-0.5'
             disabled={!canInstall || isInstalling || selectedPlugins.length === 0}
             onClick={handleInstall}
           >
-            {isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
+            {isInstalling && <RiLoader2Line className='animate-spin-slow h-4 w-4' />}
             <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
           </Button>
         </div>
diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
index 8f267cafcc..3df1b5f889 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
@@ -26,9 +26,9 @@ const Installed: FC<Props> = ({
   const { getIconUrl } = useGetIcon()
   return (
     <>
-      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
+      <div className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'>
         {/* <p className='text-text-secondary system-md-regular'>{(isFailed && errMsg) ? errMsg : t(`plugin.installModal.${isFailed ? 'installFailedDesc' : 'installedSuccessfullyDesc'}`)}</p> */}
-        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn space-y-1'>
+        <div className='bg-background-section-burn flex flex-wrap content-start items-start gap-1 space-y-1 self-stretch rounded-2xl p-2'>
           {list.map((plugin, index) => {
             return (
               <Card
@@ -48,7 +48,7 @@ const Installed: FC<Props> = ({
       </div>
       {/* Action Buttons */}
       {!isHideButton && (
-        <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+        <div className='flex items-center justify-end gap-2 self-stretch p-6 pt-5'>
           <Button
             variant='primary'
             className='min-w-[72px]'
diff --git a/web/app/components/plugins/install-plugin/install-from-github/index.tsx b/web/app/components/plugins/install-plugin/install-from-github/index.tsx
index 53466000cd..9bae7fd72a 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/index.tsx
@@ -168,16 +168,16 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
     <Modal
       isShow={true}
       onClose={foldAnimInto}
-      className={cn(modalClassName, `flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px]
-        border-components-panel-border bg-components-panel-bg shadows-shadow-xl`)}
+      className={cn(modalClassName, `border-components-panel-border bg-components-panel-bg shadows-shadow-xl flex min-w-[560px] flex-col items-start
+        rounded-2xl border-[0.5px] p-0`)}
       closable
     >
-      <div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
-        <div className='flex flex-col items-start gap-1 grow'>
-          <div className='self-stretch text-text-primary title-2xl-semi-bold'>
+      <div className='flex items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6'>
+        <div className='flex grow flex-col items-start gap-1'>
+          <div className='text-text-primary title-2xl-semi-bold self-stretch'>
             {getTitle()}
           </div>
-          <div className='self-stretch text-text-tertiary system-xs-regular'>
+          <div className='text-text-tertiary system-xs-regular self-stretch'>
             {!([InstallStepFromGitHub.uploadFailed, InstallStepFromGitHub.installed, InstallStepFromGitHub.installFailed].includes(state.step)) && t('plugin.installFromGitHub.installNote')}
           </div>
         </div>
@@ -189,7 +189,7 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
           errMsg={errorMsg}
           onCancel={onClose}
         />
-        : <div className={`flex px-6 py-3 flex-col justify-center items-start self-stretch ${state.step === InstallStepFromGitHub.installed ? 'gap-2' : 'gap-4'}`}>
+        : <div className={`flex flex-col items-start justify-center self-stretch px-6 py-3 ${state.step === InstallStepFromGitHub.installed ? 'gap-2' : 'gap-4'}`}>
           {state.step === InstallStepFromGitHub.setUrl && (
             <SetURL
               repoUrl={state.repoUrl}
diff --git a/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx b/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
index 6c3fa7a7bc..a46b617897 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
@@ -146,7 +146,7 @@ const Loaded: React.FC<LoadedProps> = ({
       <div className='text-text-secondary system-md-regular'>
         <p>{t(`${i18nPrefix}.readyToInstall`)}</p>
       </div>
-      <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
+      <div className='bg-background-section-burn flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl p-2'>
         <Card
           className='w-full'
           payload={pluginManifestToCardPluginProps(payload as PluginDeclaration)}
@@ -157,7 +157,7 @@ const Loaded: React.FC<LoadedProps> = ({
           />}
         />
       </div>
-      <div className='flex justify-end items-center gap-2 self-stretch mt-4'>
+      <div className='mt-4 flex items-center justify-end gap-2 self-stretch'>
         {!isInstalling && (
           <Button variant='secondary' className='min-w-[72px]' onClick={onBack}>
             {t('plugin.installModal.back')}
@@ -165,11 +165,11 @@ const Loaded: React.FC<LoadedProps> = ({
         )}
         <Button
           variant='primary'
-          className='min-w-[72px] flex space-x-0.5'
+          className='flex min-w-[72px] space-x-0.5'
           onClick={handleInstall}
           disabled={isInstalling || isLoading}
         >
-          {isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
+          {isInstalling && <RiLoader2Line className='animate-spin-slow h-4 w-4' />}
           <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
         </Button>
       </div>
diff --git a/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx b/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
index 47a5d86498..52e748e22b 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
@@ -72,7 +72,7 @@ const SelectPackage: React.FC<SelectPackageProps> = ({
     <>
       <label
         htmlFor='version'
-        className='flex flex-col justify-center items-start self-stretch text-text-secondary'
+        className='text-text-secondary flex flex-col items-start justify-center self-stretch'
       >
         <span className='system-sm-semibold'>{t(`${i18nPrefix}.selectVersion`)}</span>
       </label>
@@ -86,7 +86,7 @@ const SelectPackage: React.FC<SelectPackageProps> = ({
       />
       <label
         htmlFor='package'
-        className='flex flex-col justify-center items-start self-stretch text-text-secondary'
+        className='text-text-secondary flex flex-col items-start justify-center self-stretch'
       >
         <span className='system-sm-semibold'>{t(`${i18nPrefix}.selectPackage`)}</span>
       </label>
@@ -98,7 +98,7 @@ const SelectPackage: React.FC<SelectPackageProps> = ({
         placeholder={t(`${i18nPrefix}.selectPackagePlaceholder`) || ''}
         popupClassName='w-[512px] z-[1001]'
       />
-      <div className='flex justify-end items-center gap-2 self-stretch mt-4'>
+      <div className='mt-4 flex items-center justify-end gap-2 self-stretch'>
         {!isEdit
           && <Button
             variant='secondary'
diff --git a/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx b/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx
index c6ce006f37..364503bb34 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx
@@ -17,7 +17,7 @@ const SetURL: React.FC<SetURLProps> = ({ repoUrl, onChange, onNext, onCancel })
     <>
       <label
         htmlFor='repoUrl'
-        className='flex flex-col justify-center items-start self-stretch text-text-secondary'
+        className='text-text-secondary flex flex-col items-start justify-center self-stretch'
       >
         <span className='system-sm-semibold'>{t('plugin.installFromGitHub.gitHubRepo')}</span>
       </label>
@@ -27,12 +27,12 @@ const SetURL: React.FC<SetURLProps> = ({ repoUrl, onChange, onNext, onCancel })
         name='repoUrl'
         value={repoUrl}
         onChange={e => onChange(e.target.value)}
-        className='flex items-center self-stretch rounded-lg border border-components-input-border-active
-          bg-components-input-bg-active shadows-shadow-xs p-2 gap-[2px] flex-grow overflow-hidden
-          text-components-input-text-filled text-ellipsis system-sm-regular'
+        className='border-components-input-border-active bg-components-input-bg-active shadows-shadow-xs text-components-input-text-filled system-sm-regular flex
+          grow items-center gap-[2px] self-stretch overflow-hidden text-ellipsis
+          rounded-lg border p-2'
         placeholder='Please enter GitHub repo URL'
       />
-      <div className='flex justify-end items-center gap-2 self-stretch mt-4'>
+      <div className='mt-4 flex items-center justify-end gap-2 self-stretch'>
         <Button
           variant='secondary'
           className='min-w-[72px]'
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
index b37ab60079..6027abc41b 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
@@ -86,11 +86,11 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
     <Modal
       isShow={true}
       onClose={foldAnimInto}
-      className={cn(modalClassName, 'flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl')}
+      className={cn(modalClassName, 'border-components-panel-border bg-components-panel-bg shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] p-0')}
       closable
     >
-      <div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
-        <div className='self-stretch text-text-primary title-2xl-semi-bold'>
+      <div className='flex items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6'>
+        <div className='text-text-primary title-2xl-semi-bold self-stretch'>
           {getTitle()}
         </div>
       </div>
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
index f0d43e9418..91f31eb90d 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
@@ -105,7 +105,7 @@ const Installed: FC<Props> = ({
 
   return (
     <>
-      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
+      <div className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'>
         <div className='text-text-secondary system-md-regular'>
           <p>{t(`${i18nPrefix}.readyToInstall`)}</p>
           <p>
@@ -115,7 +115,7 @@ const Installed: FC<Props> = ({
             />
           </p>
         </div>
-        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
+        <div className='bg-background-section-burn flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl p-2'>
           <Card
             className='w-full'
             payload={pluginManifestToCardPluginProps(payload)}
@@ -128,7 +128,7 @@ const Installed: FC<Props> = ({
         </div>
       </div>
       {/* Action Buttons */}
-      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+      <div className='flex items-center justify-end gap-2 self-stretch p-6 pt-5'>
         {!isInstalling && (
           <Button variant='secondary' className='min-w-[72px]' onClick={handleCancel}>
             {t('common.operation.cancel')}
@@ -136,11 +136,11 @@ const Installed: FC<Props> = ({
         )}
         <Button
           variant='primary'
-          className='min-w-[72px] flex space-x-0.5'
+          className='flex min-w-[72px] space-x-0.5'
           disabled={isInstalling || isLoading}
           onClick={handleInstall}
         >
-          {isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
+          {isInstalling && <RiLoader2Line className='animate-spin-slow h-4 w-4' />}
           <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
         </Button>
       </div>
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
index 61e762ce60..c76714ac2c 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
@@ -59,16 +59,16 @@ const Uploading: FC<Props> = ({
   }, [])
   return (
     <>
-      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
+      <div className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'>
         <div className='flex items-center gap-1 self-stretch'>
-          <RiLoader2Line className='text-text-accent w-4 h-4 animate-spin-slow' />
+          <RiLoader2Line className='text-text-accent animate-spin-slow h-4 w-4' />
           <div className='text-text-secondary system-md-regular'>
             {t(`${i18nPrefix}.uploadingPackage`, {
               packageName: fileName,
             })}
           </div>
         </div>
-        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
+        <div className='bg-background-section-burn flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl p-2'>
           <Card
             className='w-full'
             payload={{ name: fileName } as any}
@@ -80,7 +80,7 @@ const Uploading: FC<Props> = ({
       </div>
 
       {/* Action Buttons */}
-      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+      <div className='flex items-center justify-end gap-2 self-stretch p-6 pt-5'>
         <Button variant='secondary' className='min-w-[72px]' onClick={onCancel}>
           {t('common.operation.cancel')}
         </Button>
diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
index 149efd4b40..185da269f3 100644
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
@@ -73,11 +73,11 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
       isShow={true}
       onClose={foldAnimInto}
       wrapperClassName='z-[9999]'
-      className={cn(modalClassName, 'flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl')}
+      className={cn(modalClassName, 'border-components-panel-border bg-components-panel-bg shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] p-0')}
       closable
     >
-      <div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
-        <div className='self-stretch text-text-primary title-2xl-semi-bold'>
+      <div className='flex items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6'>
+        <div className='text-text-primary title-2xl-semi-bold self-stretch'>
           {getTitle()}
         </div>
       </div>
diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
index f70cdc234d..c1e893a89b 100644
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
@@ -119,11 +119,11 @@ const Installed: FC<Props> = ({
 
   return (
     <>
-      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
+      <div className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'>
         <div className='text-text-secondary system-md-regular'>
           <p>{t(`${i18nPrefix}.readyToInstall`)}</p>
         </div>
-        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
+        <div className='bg-background-section-burn flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl p-2'>
           <Card
             className='w-full'
             payload={pluginManifestInMarketToPluginProps(payload as PluginManifestInMarket)}
@@ -136,7 +136,7 @@ const Installed: FC<Props> = ({
         </div>
       </div>
       {/* Action Buttons */}
-      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+      <div className='flex items-center justify-end gap-2 self-stretch p-6 pt-5'>
         {!isInstalling && (
           <Button variant='secondary' className='min-w-[72px]' onClick={handleCancel}>
             {t('common.operation.cancel')}
@@ -144,11 +144,11 @@ const Installed: FC<Props> = ({
         )}
         <Button
           variant='primary'
-          className='min-w-[72px] flex space-x-0.5'
+          className='flex min-w-[72px] space-x-0.5'
           disabled={isInstalling || isLoading}
           onClick={handleInstall}
         >
-          {isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
+          {isInstalling && <RiLoader2Line className='animate-spin-slow h-4 w-4' />}
           <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
         </Button>
       </div>
diff --git a/web/app/components/plugins/marketplace/description/index.tsx b/web/app/components/plugins/marketplace/description/index.tsx
index ada68e339e..2b7fa1f16f 100644
--- a/web/app/components/plugins/marketplace/description/index.tsx
+++ b/web/app/components/plugins/marketplace/description/index.tsx
@@ -16,10 +16,10 @@ const Description = async ({
 
   return (
     <>
-      <h1 className='shrink-0 mb-2 text-center title-4xl-semi-bold text-text-primary'>
+      <h1 className='title-4xl-semi-bold text-text-primary mb-2 shrink-0 text-center'>
         {t('marketplace.empower')}
       </h1>
-      <h2 className='shrink-0 flex justify-center items-center text-center body-md-regular text-text-tertiary'>
+      <h2 className='body-md-regular text-text-tertiary flex shrink-0 items-center justify-center text-center'>
         {
           isZhHans && (
             <>
@@ -36,23 +36,23 @@ const Description = async ({
             </>
           )
         }
-        <span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected z-[1]">
+        <span className="body-md-medium text-text-secondary after:bg-text-text-selected relative z-[1] ml-1 after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:content-['']">
           <span className='relative z-[2] lowercase'>{t('category.models')}</span>
         </span>
         ,
-        <span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected z-[1]">
+        <span className="body-md-medium text-text-secondary after:bg-text-text-selected relative z-[1] ml-1 after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:content-['']">
           <span className='relative z-[2] lowercase'>{t('category.tools')}</span>
         </span>
         ,
-        <span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected z-[1]">
+        <span className="body-md-medium text-text-secondary after:bg-text-text-selected relative z-[1] ml-1 after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:content-['']">
           <span className='relative z-[2] lowercase'>{t('category.agents')}</span>
         </span>
         ,
-        <span className="relative ml-1 mr-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected z-[1]">
+        <span className="body-md-medium text-text-secondary after:bg-text-text-selected relative z-[1] ml-1 mr-1 after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:content-['']">
           <span className='relative z-[2] lowercase'>{t('category.extensions')}</span>
         </span>
         {t('marketplace.and')}
-        <span className="relative ml-1 mr-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected z-[1]">
+        <span className="body-md-medium text-text-secondary after:bg-text-text-selected relative z-[1] ml-1 mr-1 after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:content-['']">
           <span className='relative z-[2] lowercase'>{t('category.bundles')}</span>
         </span>
         {
diff --git a/web/app/components/plugins/marketplace/empty/index.tsx b/web/app/components/plugins/marketplace/empty/index.tsx
index c190f0affe..7fd31e0cba 100644
--- a/web/app/components/plugins/marketplace/empty/index.tsx
+++ b/web/app/components/plugins/marketplace/empty/index.tsx
@@ -21,14 +21,14 @@ const Empty = ({
 
   return (
     <div
-      className={cn('grow relative h-0 flex flex-wrap p-2 overflow-hidden', className)}
+      className={cn('relative flex h-0 grow flex-wrap overflow-hidden p-2', className)}
     >
       {
         Array.from({ length: 16 }).map((_, index) => (
           <div
             key={index}
             className={cn(
-              'mr-3 mb-3  h-[144px] w-[calc((100%-36px)/4)] rounded-xl bg-background-section-burn',
+              'bg-background-section-burn mb-3  mr-3 h-[144px] w-[calc((100%-36px)/4)] rounded-xl',
               index % 4 === 3 && 'mr-0',
               index > 11 && 'mb-0',
               lightCard && 'bg-background-default-lighter opacity-75',
@@ -40,19 +40,19 @@ const Empty = ({
       {
         !lightCard && (
           <div
-            className='absolute inset-0 bg-marketplace-plugin-empty z-[1]'
+            className='bg-marketplace-plugin-empty absolute inset-0 z-[1]'
           ></div>
         )
       }
-      <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[2] flex flex-col items-center'>
-        <div className='relative flex items-center justify-center mb-3 w-14 h-14 rounded-xl border border-dashed border-divider-deep bg-components-card-bg shadow-lg'>
-          <Group className='w-5 h-5' />
+      <div className='absolute left-1/2 top-1/2 z-[2] flex -translate-x-1/2 -translate-y-1/2 flex-col items-center'>
+        <div className='border-divider-deep bg-components-card-bg relative mb-3 flex h-14 w-14 items-center justify-center rounded-xl border border-dashed shadow-lg'>
+          <Group className='h-5 w-5' />
           <Line className='absolute right-[-1px] top-1/2 -translate-y-1/2' />
           <Line className='absolute left-[-1px] top-1/2 -translate-y-1/2' />
-          <Line className='absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
-          <Line className='absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
+          <Line className='absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rotate-90' />
+          <Line className='absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 rotate-90' />
         </div>
-        <div className='text-center system-md-regular text-text-tertiary'>
+        <div className='system-md-regular text-text-tertiary text-center'>
           {text || t('plugin.marketplace.noPluginFound')}
         </div>
       </div>
diff --git a/web/app/components/plugins/marketplace/intersection-line/index.tsx b/web/app/components/plugins/marketplace/intersection-line/index.tsx
index 94f592410a..1a728e102c 100644
--- a/web/app/components/plugins/marketplace/intersection-line/index.tsx
+++ b/web/app/components/plugins/marketplace/intersection-line/index.tsx
@@ -14,7 +14,7 @@ const IntersectionLine = ({
   useScrollIntersection(ref, intersectionContainerId)
 
   return (
-    <div ref={ref} className='shrink-0 mb-4 h-[1px] bg-transparent'></div>
+    <div ref={ref} className='mb-4 h-[1px] shrink-0 bg-transparent'></div>
   )
 }
 
diff --git a/web/app/components/plugins/marketplace/list/card-wrapper.tsx b/web/app/components/plugins/marketplace/list/card-wrapper.tsx
index a379102efd..e6b8c6e30f 100644
--- a/web/app/components/plugins/marketplace/list/card-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/list/card-wrapper.tsx
@@ -32,7 +32,7 @@ const CardWrapper = ({
   if (showInstallButton) {
     return (
       <div
-        className='group relative rounded-xl cursor-pointer  hover:bg-components-panel-on-panel-item-bg-hover'
+        className='hover:bg-components-panel-on-panel-item-bg-hover group relative cursor-pointer  rounded-xl'
       >
         <Card
           key={plugin.name}
@@ -47,7 +47,7 @@ const CardWrapper = ({
         />
         {
           showInstallButton && (
-            <div className='hidden absolute bottom-0 group-hover:flex items-center space-x-2 px-4 pt-8 pb-4 w-full bg-gradient-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent rounded-b-xl'>
+            <div className='from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent absolute bottom-0 hidden w-full items-center space-x-2 rounded-b-xl bg-gradient-to-tr px-4 pb-4 pt-8 group-hover:flex'>
               <Button
                 variant='primary'
                 className='w-[calc(50%-4px)]'
@@ -55,12 +55,12 @@ const CardWrapper = ({
               >
                 {t('plugin.detailPanel.operation.install')}
               </Button>
-              <a href={`${getPluginLinkInMarketplace(plugin)}?language=${localeFromLocale}`} target='_blank' className='block flex-1 shrink-0 w-[calc(50%-4px)]'>
+              <a href={`${getPluginLinkInMarketplace(plugin)}?language=${localeFromLocale}`} target='_blank' className='block w-[calc(50%-4px)] flex-1 shrink-0'>
                 <Button
                   className='w-full gap-0.5'
                 >
                   {t('plugin.detailPanel.operation.detail')}
-                  <RiArrowRightUpLine className='ml-1 w-4 h-4' />
+                  <RiArrowRightUpLine className='ml-1 h-4 w-4' />
                 </Button>
               </a>
             </div>
@@ -82,7 +82,7 @@ const CardWrapper = ({
 
   return (
     <a
-      className='group inline-block relative rounded-xl cursor-pointer'
+      className='group relative inline-block cursor-pointer rounded-xl'
       href={getPluginLinkInMarketplace(plugin)}
     >
       <Card
diff --git a/web/app/components/plugins/marketplace/list/list-with-collection.tsx b/web/app/components/plugins/marketplace/list/list-with-collection.tsx
index 8dad4bdd6f..5322a1d7dd 100644
--- a/web/app/components/plugins/marketplace/list/list-with-collection.tsx
+++ b/web/app/components/plugins/marketplace/list/list-with-collection.tsx
@@ -37,7 +37,7 @@ const ListWithCollection = ({
             key={collection.name}
             className='py-3'
           >
-            <div className='flex justify-between items-end'>
+            <div className='flex items-end justify-between'>
               <div>
                 <div className='title-xl-semi-bold text-text-primary'>{collection.label[getLanguage(locale)]}</div>
                 <div className='system-xs-regular text-text-tertiary'>{collection.description[getLanguage(locale)]}</div>
@@ -45,17 +45,17 @@ const ListWithCollection = ({
               {
                 collection.searchable && onMoreClick && (
                   <div
-                    className='flex items-center system-xs-medium text-text-accent cursor-pointer '
+                    className='system-xs-medium text-text-accent flex cursor-pointer items-center '
                     onClick={() => onMoreClick?.(collection.search_params)}
                   >
                     {t('plugin.marketplace.viewMore')}
-                    <RiArrowRightSLine className='w-4 h-4' />
+                    <RiArrowRightSLine className='h-4 w-4' />
                   </div>
                 )
               }
             </div>
             <div className={cn(
-              'grid grid-cols-4 gap-3 mt-2',
+              'mt-2 grid grid-cols-4 gap-3',
               cardContainerClassName,
             )}>
               {
diff --git a/web/app/components/plugins/marketplace/list/list-wrapper.tsx b/web/app/components/plugins/marketplace/list/list-wrapper.tsx
index 761adee5f8..d5ddaad708 100644
--- a/web/app/components/plugins/marketplace/list/list-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/list/list-wrapper.tsx
@@ -37,19 +37,19 @@ const ListWrapper = ({
   }, [handleQueryPlugins, marketplaceCollections, marketplaceCollectionsFromClient, isSuccessCollections])
 
   return (
-    <div className='relative flex flex-col grow px-12 py-2 bg-background-default-subtle'>
+    <div className='bg-background-default-subtle relative flex grow flex-col px-12 py-2'>
       {
         plugins && (
-          <div className='flex items-center mb-4 pt-3'>
+          <div className='mb-4 flex items-center pt-3'>
             <div className='title-xl-semi-bold text-text-primary'>{t('plugin.marketplace.pluginsResult', { num: pluginsTotal })}</div>
-            <div className='mx-3 w-[1px] h-3.5 bg-divider-regular'></div>
+            <div className='bg-divider-regular mx-3 h-3.5 w-[1px]'></div>
             <SortDropdown locale={locale} />
           </div>
         )
       }
       {
         isLoading && page === 1 && (
-          <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
+          <div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
             <Loading />
           </div>
         )
diff --git a/web/app/components/plugins/marketplace/plugin-type-switch.tsx b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
index 0be1c9f535..c3ddc1fd2d 100644
--- a/web/app/components/plugins/marketplace/plugin-type-switch.tsx
+++ b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
@@ -46,33 +46,33 @@ const PluginTypeSwitch = ({
     {
       value: PLUGIN_TYPE_SEARCH_MAP.model,
       text: t('plugin.category.models'),
-      icon: <RiBrain2Line className='mr-1.5 w-4 h-4' />,
+      icon: <RiBrain2Line className='mr-1.5 h-4 w-4' />,
     },
     {
       value: PLUGIN_TYPE_SEARCH_MAP.tool,
       text: t('plugin.category.tools'),
-      icon: <RiHammerLine className='mr-1.5 w-4 h-4' />,
+      icon: <RiHammerLine className='mr-1.5 h-4 w-4' />,
     },
     {
       value: PLUGIN_TYPE_SEARCH_MAP.agent,
       text: t('plugin.category.agents'),
-      icon: <RiSpeakAiLine className='mr-1.5 w-4 h-4' />,
+      icon: <RiSpeakAiLine className='mr-1.5 h-4 w-4' />,
     },
     {
       value: PLUGIN_TYPE_SEARCH_MAP.extension,
       text: t('plugin.category.extensions'),
-      icon: <RiPuzzle2Line className='mr-1.5 w-4 h-4' />,
+      icon: <RiPuzzle2Line className='mr-1.5 h-4 w-4' />,
     },
     {
       value: PLUGIN_TYPE_SEARCH_MAP.bundle,
       text: t('plugin.category.bundles'),
-      icon: <RiArchive2Line className='mr-1.5 w-4 h-4' />,
+      icon: <RiArchive2Line className='mr-1.5 h-4 w-4' />,
     },
   ]
 
   return (
     <div className={cn(
-      'shrink-0 flex items-center justify-center py-3 bg-background-body space-x-2',
+      'bg-background-body flex shrink-0 items-center justify-center space-x-2 py-3',
       searchBoxCanAnimate && 'sticky top-[56px] z-10',
       className,
     )}>
@@ -81,7 +81,7 @@ const PluginTypeSwitch = ({
           <div
             key={option.value}
             className={cn(
-              'flex items-center px-3 h-8 border border-transparent rounded-xl cursor-pointer hover:bg-state-base-hover hover:text-text-secondary system-md-medium text-text-tertiary',
+              'hover:bg-state-base-hover hover:text-text-secondary system-md-medium text-text-tertiary flex h-8 cursor-pointer items-center rounded-xl border border-transparent px-3',
               activePluginType === option.value && 'border-components-main-nav-nav-button-border !bg-components-main-nav-nav-button-bg-active !text-components-main-nav-nav-button-text-active shadow-xs',
             )}
             onClick={() => {
diff --git a/web/app/components/plugins/marketplace/search-box/index.tsx b/web/app/components/plugins/marketplace/search-box/index.tsx
index 61fff2c7a9..f51b8dd92d 100644
--- a/web/app/components/plugins/marketplace/search-box/index.tsx
+++ b/web/app/components/plugins/marketplace/search-box/index.tsx
@@ -27,9 +27,9 @@ const SearchBox = ({
   return (
     <div
       className={cn(
-        'flex items-center z-[11]',
-        size === 'large' && 'p-1.5 bg-components-panel-bg-blur rounded-xl shadow-md border border-components-chat-input-border',
-        size === 'small' && 'p-0.5 bg-components-input-bg-normal rounded-lg',
+        'z-[11] flex items-center',
+        size === 'large' && 'bg-components-panel-bg-blur border-components-chat-input-border rounded-xl border p-1.5 shadow-md',
+        size === 'small' && 'bg-components-input-bg-normal rounded-lg p-0.5',
         inputClassName,
       )}
     >
@@ -39,12 +39,12 @@ const SearchBox = ({
         size={size}
         locale={locale}
       />
-      <div className='mx-1 w-[1px] h-3.5 bg-divider-regular'></div>
-      <div className='relative grow flex items-center p-1 pl-2'>
-        <div className='flex items-center mr-2 w-full'>
+      <div className='bg-divider-regular mx-1 h-3.5 w-[1px]'></div>
+      <div className='relative flex grow items-center p-1 pl-2'>
+        <div className='mr-2 flex w-full items-center'>
           <input
             className={cn(
-              'grow block outline-none appearance-none body-md-medium text-text-secondary bg-transparent',
+              'body-md-medium text-text-secondary block grow appearance-none bg-transparent outline-none',
             )}
             value={search}
             onChange={(e) => {
@@ -56,7 +56,7 @@ const SearchBox = ({
             search && (
               <div className='absolute right-2 top-1/2 -translate-y-1/2'>
                 <ActionButton onClick={() => onSearchChange('')}>
-                  <RiCloseLine className='w-4 h-4' />
+                  <RiCloseLine className='h-4 w-4' />
                 </ActionButton>
               </div>
             )
diff --git a/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx b/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx
index beb1c947fd..772bd4c2e6 100644
--- a/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx
@@ -27,7 +27,7 @@ const SearchBoxWrapper = ({
   return (
     <SearchBox
       inputClassName={cn(
-        'mx-auto w-[640px] shrink-0 z-[0]',
+        'z-[0] mx-auto w-[640px] shrink-0',
         searchBoxCanAnimate && 'sticky top-3 z-[11]',
         !intersected && searchBoxCanAnimate && 'w-[508px] transition-[width] duration-300',
       )}
diff --git a/web/app/components/plugins/marketplace/search-box/tags-filter.tsx b/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
index dec07d0319..7fbb9da6db 100644
--- a/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
+++ b/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
@@ -57,17 +57,17 @@ const TagsFilter = ({
         onClick={() => setOpen(v => !v)}
       >
         <div className={cn(
-          'flex items-center text-text-tertiary rounded-lg hover:bg-state-base-hover cursor-pointer',
-          size === 'large' && 'px-2 py-1 h-8',
-          size === 'small' && 'pr-1.5 py-0.5 h-7 pl-1 ',
+          'text-text-tertiary hover:bg-state-base-hover flex cursor-pointer items-center rounded-lg',
+          size === 'large' && 'h-8 px-2 py-1',
+          size === 'small' && 'h-7 py-0.5 pl-1 pr-1.5 ',
           selectedTagsLength && 'text-text-secondary',
           open && 'bg-state-base-hover',
         )}>
           <div className='p-0.5'>
-            <RiFilter3Line className='w-4 h-4' />
+            <RiFilter3Line className='h-4 w-4' />
           </div>
           <div className={cn(
-            'flex items-center p-1 system-sm-medium',
+            'system-sm-medium flex items-center p-1',
             size === 'large' && 'p-1',
             size === 'small' && 'px-0.5 py-1',
           )}>
@@ -79,7 +79,7 @@ const TagsFilter = ({
             }
             {
               selectedTagsLength > 2 && (
-                <div className='ml-1 system-xs-medium text-text-tertiary'>
+                <div className='system-xs-medium text-text-tertiary ml-1'>
                   +{selectedTagsLength - 2}
                 </div>
               )
@@ -88,20 +88,20 @@ const TagsFilter = ({
           {
             !!selectedTagsLength && (
               <RiCloseCircleFill
-                className='w-4 h-4 text-text-quaternary cursor-pointer'
+                className='text-text-quaternary h-4 w-4 cursor-pointer'
                 onClick={() => onTagsChange([])}
               />
             )
           }
           {
             !selectedTagsLength && (
-              <RiArrowDownSLine className='w-4 h-4' />
+              <RiArrowDownSLine className='h-4 w-4' />
             )
           }
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[1000]'>
-        <div className='w-[240px] border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-xl shadow-lg'>
+        <div className='border-components-panel-border bg-components-panel-bg-blur w-[240px] rounded-xl border-[0.5px] shadow-lg'>
           <div className='p-2 pb-1'>
             <Input
               showLeftIcon
@@ -110,19 +110,19 @@ const TagsFilter = ({
               placeholder={t('pluginTags.searchTags') || ''}
             />
           </div>
-          <div className='p-1 max-h-[448px] overflow-y-auto'>
+          <div className='max-h-[448px] overflow-y-auto p-1'>
             {
               filteredOptions.map(option => (
                 <div
                   key={option.name}
-                  className='flex items-center px-2 py-1.5 h-7 rounded-lg cursor-pointer hover:bg-state-base-hover'
+                  className='hover:bg-state-base-hover flex h-7 cursor-pointer items-center rounded-lg px-2 py-1.5'
                   onClick={() => handleCheck(option.name)}
                 >
                   <Checkbox
                     className='mr-1'
                     checked={tags.includes(option.name)}
                   />
-                  <div className='px-1 system-sm-medium text-text-secondary'>
+                  <div className='system-sm-medium text-text-secondary px-1'>
                     {option.label}
                   </div>
                 </div>
diff --git a/web/app/components/plugins/marketplace/sort-dropdown/index.tsx b/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
index b39cbe86ce..ac6e988e49 100644
--- a/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
+++ b/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
@@ -57,29 +57,29 @@ const SortDropdown = ({
       onOpenChange={setOpen}
     >
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
-        <div className='flex items-center px-2 pr-3 h-8 rounded-lg bg-state-base-hover-alt cursor-pointer'>
-          <span className='mr-1 system-sm-regular text-text-secondary'>
+        <div className='bg-state-base-hover-alt flex h-8 cursor-pointer items-center rounded-lg px-2 pr-3'>
+          <span className='system-sm-regular text-text-secondary mr-1'>
             {t('plugin.marketplace.sortBy')}
           </span>
-          <span className='mr-1 system-sm-medium text-text-primary'>
+          <span className='system-sm-medium text-text-primary mr-1'>
             {selectedOption.text}
           </span>
-          <RiArrowDownSLine className='w-4 h-4 text-text-tertiary' />
+          <RiArrowDownSLine className='text-text-tertiary h-4 w-4' />
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent>
-        <div className='p-1 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur backdrop-blur-sm shadow-lg'>
+        <div className='border-components-panel-border bg-components-panel-bg-blur rounded-xl border-[0.5px] p-1 shadow-lg backdrop-blur-sm'>
           {
             options.map(option => (
               <div
                 key={`${option.value}-${option.order}`}
-                className='flex items-center justify-between px-3 pr-2 h-8 cursor-pointer system-md-regular text-text-primary rounded-lg hover:bg-components-panel-on-panel-item-bg-hover'
+                className='system-md-regular text-text-primary hover:bg-components-panel-on-panel-item-bg-hover flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 pr-2'
                 onClick={() => handleSortChange({ sortBy: option.value, sortOrder: option.order })}
               >
                 {option.text}
                 {
                   sort.sortBy === option.value && sort.sortOrder === option.order && (
-                    <RiCheckLine className='ml-2 w-4 h-4 text-text-accent' />
+                    <RiCheckLine className='text-text-accent ml-2 h-4 w-4' />
                   )
                 }
               </div>
diff --git a/web/app/components/plugins/permission-setting-modal/modal.tsx b/web/app/components/plugins/permission-setting-modal/modal.tsx
index b5eaa4765c..9c6a22d844 100644
--- a/web/app/components/plugins/permission-setting-modal/modal.tsx
+++ b/web/app/components/plugins/permission-setting-modal/modal.tsx
@@ -41,13 +41,13 @@ const PluginSettingModal: FC<Props> = ({
       isShow
       onClose={onHide}
       closable
-      className='!p-0 w-[420px]'
+      className='w-[420px] !p-0'
     >
-      <div className='flex flex-col items-start w-[420px] rounded-2xl border border-components-panel-border bg-components-panel-bg shadows-shadow-xl'>
-        <div className='flex pt-6 pb-3 pl-6 pr-14 items-start gap-2 self-stretch'>
-          <span className='self-stretch text-text-primary title-2xl-semi-bold'>{t(`${i18nPrefix}.title`)}</span>
+      <div className='border-components-panel-border bg-components-panel-bg shadows-shadow-xl flex w-[420px] flex-col items-start rounded-2xl border'>
+        <div className='flex items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6'>
+          <span className='text-text-primary title-2xl-semi-bold self-stretch'>{t(`${i18nPrefix}.title`)}</span>
         </div>
-        <div className='flex px-6 py-3 flex-col justify-center items-start gap-4 self-stretch'>
+        <div className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'>
           {[
             { title: t(`${i18nPrefix}.whoCanInstall`), key: 'install_permission', value: tempPrivilege.install_permission },
             { title: t(`${i18nPrefix}.whoCanDebug`), key: 'debug_permission', value: tempPrivilege.debug_permission },
@@ -56,7 +56,7 @@ const PluginSettingModal: FC<Props> = ({
               <div className='flex h-6 items-center gap-0.5'>
                 <span className='text-text-secondary system-sm-semibold'>{title}</span>
               </div>
-              <div className='flex items-start gap-2 justify-between w-full'>
+              <div className='flex w-full items-start justify-between gap-2'>
                 {[PermissionType.everyone, PermissionType.admin, PermissionType.noOne].map(option => (
                   <OptionCard
                     key={option}
@@ -70,7 +70,7 @@ const PluginSettingModal: FC<Props> = ({
             </div>
           ))}
         </div>
-        <div className='flex h-[76px] p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+        <div className='flex h-[76px] items-center justify-end gap-2 self-stretch p-6 pt-5'>
           <Button
             className='min-w-[72px]'
             onClick={onHide}
diff --git a/web/app/components/plugins/plugin-detail-panel/action-list.tsx b/web/app/components/plugins/plugin-detail-panel/action-list.tsx
index 46818d40f5..518ccb297f 100644
--- a/web/app/components/plugins/plugin-detail-panel/action-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/action-list.tsx
@@ -56,9 +56,9 @@ const ActionList = ({
     return null
 
   return (
-    <div className='px-4 pt-2 pb-4'>
+    <div className='px-4 pb-4 pt-2'>
       <div className='mb-1 py-1'>
-        <div className='mb-1 h-6 flex items-center justify-between text-text-secondary system-sm-semibold-uppercase'>
+        <div className='text-text-secondary system-sm-semibold-uppercase mb-1 flex h-6 items-center justify-between'>
           {t('plugin.detailPanel.actionNum', { num: data.length, action: data.length > 1 ? 'actions' : 'action' })}
           {provider.is_team_authorization && provider.allow_delete && (
             <Button
diff --git a/web/app/components/plugins/plugin-detail-panel/agent-strategy-list.tsx b/web/app/components/plugins/plugin-detail-panel/agent-strategy-list.tsx
index fafcf1439c..e308d1958d 100644
--- a/web/app/components/plugins/plugin-detail-panel/agent-strategy-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/agent-strategy-list.tsx
@@ -36,9 +36,9 @@ const AgentStrategyList = ({
     return null
 
   return (
-    <div className='px-4 pt-2 pb-4'>
+    <div className='px-4 pb-4 pt-2'>
       <div className='mb-1 py-1'>
-        <div className='mb-1 h-6 flex items-center justify-between text-text-secondary system-sm-semibold-uppercase'>
+        <div className='text-text-secondary system-sm-semibold-uppercase mb-1 flex h-6 items-center justify-between'>
           {t('plugin.detailPanel.strategyNum', { num: strategyList.length, strategy: strategyList.length > 1 ? 'strategies' : 'strategy' })}
         </div>
       </div>
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx
index 6dd9926d35..099a826f3a 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx
@@ -108,10 +108,10 @@ const AppInputsForm = ({
     return null
 
   return (
-    <div className='px-4 py-2 flex flex-col gap-4'>
+    <div className='flex flex-col gap-4 px-4 py-2'>
       {inputsForms.map(form => (
         <div key={form.variable}>
-          <div className='h-6 mb-1 flex items-center gap-1 text-text-secondary system-sm-semibold'>
+          <div className='text-text-secondary system-sm-semibold mb-1 flex h-6 items-center gap-1'>
             <div className='truncate'>{form.label}</div>
             {!form.required && <span className='text-text-tertiary system-xs-regular'>{t('workflow.panel.optional')}</span>}
           </div>
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
index d293be3aad..158fb35e54 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
@@ -153,13 +153,13 @@ const AppInputsPanel = ({
   }
 
   return (
-    <div className={cn('max-h-[240px] flex flex-col pb-4 rounded-b-2xl border-t border-divider-subtle')}>
+    <div className={cn('border-divider-subtle flex max-h-[240px] flex-col rounded-b-2xl border-t pb-4')}>
       {isLoading && <div className='pt-3'><Loading type='app' /></div>}
       {!isLoading && (
-        <div className='shrink-0 mt-3 mb-2 px-4 h-6 flex items-center system-sm-semibold text-text-secondary'>{t('app.appSelector.params')}</div>
+        <div className='system-sm-semibold text-text-secondary mb-2 mt-3 flex h-6 shrink-0 items-center px-4'>{t('app.appSelector.params')}</div>
       )}
       {!isLoading && !inputFormSchema.length && (
-        <div className='h-16 flex flex-col justify-center items-center'>
+        <div className='flex h-16 flex-col items-center justify-center'>
           <div className='text-text-tertiary system-sm-regular'>{t('app.appSelector.noParams')}</div>
         </div>
       )}
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
index 841663a5b4..3d50ce18d7 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
@@ -84,7 +84,7 @@ const AppPicker: FC<Props> = ({
       </PortalToFollowElemTrigger>
 
       <PortalToFollowElemContent className='z-[1000]'>
-        <div className="relative w-[356px] min-h-20 rounded-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
+        <div className="bg-components-panel-bg-blur border-components-panel-border relative min-h-20 w-[356px] rounded-xl border-[0.5px] shadow-lg backdrop-blur-sm">
           <div className='p-2 pb-1'>
             <Input
               showLeftIcon
@@ -98,7 +98,7 @@ const AppPicker: FC<Props> = ({
             {filteredAppList.map(app => (
               <div
                 key={app.id}
-                className='flex items-center gap-3 py-1 pl-2 pr-3 rounded-lg hover:bg-state-base-hover cursor-pointer'
+                className='hover:bg-state-base-hover flex cursor-pointer items-center gap-3 rounded-lg py-1 pl-2 pr-3'
                 onClick={() => onSelect(app)}
               >
                 <AppIcon
@@ -109,8 +109,8 @@ const AppPicker: FC<Props> = ({
                   background={app.icon_background}
                   imageUrl={app.icon_url}
                 />
-                <div title={app.name} className='grow system-sm-medium text-components-input-text-filled'>{app.name}</div>
-                <div className='shrink-0 text-text-tertiary system-2xs-medium-uppercase'>{getAppType(app)}</div>
+                <div title={app.name} className='system-sm-medium text-components-input-text-filled grow'>{app.name}</div>
+                <div className='text-text-tertiary system-2xs-medium-uppercase shrink-0'>{getAppType(app)}</div>
               </div>
             ))}
           </div>
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx
index 2706597a86..98e0aed264 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx
@@ -20,9 +20,9 @@ const AppTrigger = ({
   const { t } = useTranslation()
   return (
     <div className={cn(
-      'group flex items-center p-2 pl-3 bg-components-input-bg-normal rounded-lg cursor-pointer hover:bg-state-base-hover-alt',
+      'bg-components-input-bg-normal hover:bg-state-base-hover-alt group flex cursor-pointer items-center rounded-lg p-2 pl-3',
       open && 'bg-state-base-hover-alt',
-      appDetail && 'pl-1.5 py-1.5',
+      appDetail && 'py-1.5 pl-1.5',
     )}>
       {appDetail && (
         <AppIcon
@@ -35,12 +35,12 @@ const AppTrigger = ({
         />
       )}
       {appDetail && (
-        <div title={appDetail.name} className='grow system-sm-medium text-components-input-text-filled'>{appDetail.name}</div>
+        <div title={appDetail.name} className='system-sm-medium text-components-input-text-filled grow'>{appDetail.name}</div>
       )}
       {!appDetail && (
-        <div className='grow text-components-input-text-placeholder system-sm-regular truncate'>{t('app.appSelector.placeholder')}</div>
+        <div className='text-components-input-text-placeholder system-sm-regular grow truncate'>{t('app.appSelector.placeholder')}</div>
       )}
-      <RiArrowDownSLine className={cn('shrink-0 ml-0.5 w-4 h-4 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
+      <RiArrowDownSLine className={cn('text-text-quaternary group-hover:text-text-secondary ml-0.5 h-4 w-4 shrink-0', open && 'text-text-secondary')} />
     </div>
   )
 }
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
index 5f5a0d7e3e..1a8364144e 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
@@ -106,9 +106,9 @@ const AppSelector: FC<Props> = ({
           />
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1000]'>
-          <div className="relative w-[389px] min-h-20 rounded-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
-            <div className='px-4 py-3 flex flex-col gap-1'>
-              <div className='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('app.appSelector.label')}</div>
+          <div className="bg-components-panel-bg-blur border-components-panel-border relative min-h-20 w-[389px] rounded-xl border-[0.5px] shadow-lg backdrop-blur-sm">
+            <div className='flex flex-col gap-1 px-4 py-3'>
+              <div className='system-sm-semibold text-text-secondary flex h-6 items-center'>{t('app.appSelector.label')}</div>
               <AppPicker
                 placement='bottom'
                 offset={offset}
diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
index 6edb68238f..f0677b9416 100644
--- a/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
@@ -166,15 +166,15 @@ const DetailHeader = ({
   // const usedInApps = 3
 
   return (
-    <div className={cn('shrink-0 p-4 pb-3 border-b border-divider-subtle bg-components-panel-bg')}>
+    <div className={cn('border-divider-subtle bg-components-panel-bg shrink-0 border-b p-4 pb-3')}>
       <div className="flex">
-        <div className='overflow-hidden border-components-panel-border-subtle border rounded-xl'>
+        <div className='border-components-panel-border-subtle overflow-hidden rounded-xl border'>
           <Icon src={`${API_PREFIX}/workspaces/current/plugin/icon?tenant_id=${tenant_id}&filename=${icon}`} />
         </div>
         <div className="ml-3 w-0 grow">
-          <div className="flex items-center h-5">
+          <div className="flex h-5 items-center">
             <Title title={label[locale]} />
-            {verified && <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />}
+            {verified && <RiVerifiedBadgeLine className="text-text-accent ml-0.5 h-4 w-4 shrink-0" />}
             <PluginVersionPicker
               disabled={!isFromMarketplace}
               isShow={isShow}
@@ -196,7 +196,7 @@ const DetailHeader = ({
                   text={
                     <>
                       <div>{isFromGitHub ? meta!.version : version}</div>
-                      {isFromMarketplace && <RiArrowLeftRightLine className='ml-1 w-3 h-3 text-text-tertiary' />}
+                      {isFromMarketplace && <RiArrowLeftRightLine className='text-text-tertiary ml-1 h-3 w-3' />}
                     </>
                   }
                   hasRedCornerMark={hasNewVersion}
@@ -215,32 +215,32 @@ const DetailHeader = ({
               }}>{t('plugin.detailPanel.operation.update')}</Button>
             )}
           </div>
-          <div className='mb-1 flex justify-between items-center h-4'>
+          <div className='mb-1 flex h-4 items-center justify-between'>
             <div className='mt-0.5 flex items-center'>
               <OrgInfo
                 packageNameClassName='w-auto'
                 orgName={author}
                 packageName={name}
               />
-              <div className='ml-1 mr-0.5 text-text-quaternary system-xs-regular'>·</div>
+              <div className='text-text-quaternary system-xs-regular ml-1 mr-0.5'>·</div>
               {detail.source === PluginSource.marketplace && (
                 <Tooltip popupContent={t('plugin.detailPanel.categoryTip.marketplace')} >
-                  <div><BoxSparkleFill className='w-3.5 h-3.5 text-text-tertiary hover:text-text-accent' /></div>
+                  <div><BoxSparkleFill className='text-text-tertiary hover:text-text-accent h-3.5 w-3.5' /></div>
                 </Tooltip>
               )}
               {detail.source === PluginSource.github && (
                 <Tooltip popupContent={t('plugin.detailPanel.categoryTip.github')} >
-                  <div><Github className='w-3.5 h-3.5 text-text-secondary hover:text-text-primary' /></div>
+                  <div><Github className='text-text-secondary hover:text-text-primary h-3.5 w-3.5' /></div>
                 </Tooltip>
               )}
               {detail.source === PluginSource.local && (
                 <Tooltip popupContent={t('plugin.detailPanel.categoryTip.local')} >
-                  <div><RiHardDrive3Line className='w-3.5 h-3.5 text-text-tertiary' /></div>
+                  <div><RiHardDrive3Line className='text-text-tertiary h-3.5 w-3.5' /></div>
                 </Tooltip>
               )}
               {detail.source === PluginSource.debugging && (
                 <Tooltip popupContent={t('plugin.detailPanel.categoryTip.debugging')} >
-                  <div><RiBugLine className='w-3.5 h-3.5 text-text-tertiary hover:text-text-warning' /></div>
+                  <div><RiBugLine className='text-text-tertiary hover:text-text-warning h-3.5 w-3.5' /></div>
                 </Tooltip>
               )}
             </div>
@@ -255,7 +255,7 @@ const DetailHeader = ({
             detailUrl={detailUrl}
           />
           <ActionButton onClick={onHide}>
-            <RiCloseLine className='w-4 h-4' />
+            <RiCloseLine className='h-4 w-4' />
           </ActionButton>
         </div>
       </div>
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
index b2b04a6f1e..80eaba419c 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
@@ -133,45 +133,45 @@ const EndpointCard = ({
   const CopyIcon = isCopied ? ClipboardCheck : RiClipboardLine
 
   return (
-    <div className='p-0.5 bg-background-section-burn rounded-xl'>
-      <div className='group p-2.5 pl-3 bg-components-panel-on-panel-item-bg rounded-[10px] border-[0.5px] border-components-panel-border'>
+    <div className='bg-background-section-burn rounded-xl p-0.5'>
+      <div className='bg-components-panel-on-panel-item-bg border-components-panel-border group rounded-[10px] border-[0.5px] p-2.5 pl-3'>
         <div className='flex items-center'>
-          <div className='grow mb-1 h-6 flex items-center gap-1 text-text-secondary system-md-semibold'>
-            <RiLoginCircleLine className='w-4 h-4' />
+          <div className='text-text-secondary system-md-semibold mb-1 flex h-6 grow items-center gap-1'>
+            <RiLoginCircleLine className='h-4 w-4' />
             <div>{data.name}</div>
           </div>
-          <div className='hidden group-hover:flex items-center'>
+          <div className='hidden items-center group-hover:flex'>
             <ActionButton onClick={showEndpointModalConfirm}>
-              <RiEditLine className='w-4 h-4' />
+              <RiEditLine className='h-4 w-4' />
             </ActionButton>
             <ActionButton onClick={showDeleteConfirm} className='hover:bg-state-destructive-hover text-text-tertiary hover:text-text-destructive'>
-              <RiDeleteBinLine className='w-4 h-4' />
+              <RiDeleteBinLine className='h-4 w-4' />
             </ActionButton>
           </div>
         </div>
         {data.declaration.endpoints.map((endpoint, index) => (
-          <div key={index} className='h-6 flex items-center'>
-            <div className='shrink-0 w-12 text-text-tertiary system-xs-regular'>{endpoint.method}</div>
-            <div className='group/item grow flex items-center text-text-secondary system-xs-regular truncate'>
+          <div key={index} className='flex h-6 items-center'>
+            <div className='text-text-tertiary system-xs-regular w-12 shrink-0'>{endpoint.method}</div>
+            <div className='group/item text-text-secondary system-xs-regular flex grow items-center truncate'>
               <div title={`${data.url}${endpoint.path}`} className='truncate'>{`${data.url}${endpoint.path}`}</div>
               <Tooltip popupContent={t(`common.operation.${isCopied ? 'copied' : 'copy'}`)} position='top'>
-                <ActionButton className='hidden shrink-0 ml-2 group-hover/item:flex' onClick={() => handleCopy(`${data.url}${endpoint.path}`)}>
-                  <CopyIcon className='w-3.5 h-3.5 text-text-tertiary' />
+                <ActionButton className='ml-2 hidden shrink-0 group-hover/item:flex' onClick={() => handleCopy(`${data.url}${endpoint.path}`)}>
+                  <CopyIcon className='text-text-tertiary h-3.5 w-3.5' />
                 </ActionButton>
               </Tooltip>
             </div>
           </div>
         ))}
       </div>
-      <div className='p-2 pl-3 flex items-center justify-between'>
+      <div className='flex items-center justify-between p-2 pl-3'>
         {active && (
-          <div className='flex items-center gap-1 system-xs-semibold-uppercase text-util-colors-green-green-600'>
+          <div className='system-xs-semibold-uppercase text-util-colors-green-green-600 flex items-center gap-1'>
             <Indicator color='green' />
             {t('plugin.detailPanel.serviceOk')}
           </div>
         )}
         {!active && (
-          <div className='flex items-center gap-1 system-xs-semibold-uppercase text-text-tertiary'>
+          <div className='system-xs-semibold-uppercase text-text-tertiary flex items-center gap-1'>
             <Indicator color='gray' />
             {t('plugin.detailPanel.disabled')}
           </div>
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
index 2116a5474a..5637064811 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
@@ -64,8 +64,8 @@ const EndpointList = ({ detail }: Props) => {
     return null
 
   return (
-    <div className={cn('px-4 py-2 border-divider-subtle', showTopBorder && 'border-t')}>
-      <div className='mb-1 h-6 flex items-center justify-between text-text-secondary system-sm-semibold-uppercase'>
+    <div className={cn('border-divider-subtle px-4 py-2', showTopBorder && 'border-t')}>
+      <div className='text-text-secondary system-sm-semibold-uppercase mb-1 flex h-6 items-center justify-between'>
         <div className='flex items-center gap-0.5'>
           {t('plugin.detailPanel.endpoints')}
           <Tooltip
@@ -74,8 +74,8 @@ const EndpointList = ({ detail }: Props) => {
             popupClassName='w-[240px] p-4 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border'
             popupContent={
               <div className='flex flex-col gap-2'>
-                <div className='w-8 h-8 flex items-center justify-center bg-background-default-subtle rounded-lg border-[0.5px] border-components-panel-border-subtle'>
-                  <RiApps2AddLine className='w-4 h-4 text-text-tertiary' />
+                <div className='bg-background-default-subtle border-components-panel-border-subtle flex h-8 w-8 items-center justify-center rounded-lg border-[0.5px]'>
+                  <RiApps2AddLine className='text-text-tertiary h-4 w-4' />
                 </div>
                 <div className='text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.endpointsTip')}</div>
                 <a
@@ -83,8 +83,8 @@ const EndpointList = ({ detail }: Props) => {
                   target='_blank'
                   rel='noopener noreferrer'
                 >
-                  <div className='inline-flex items-center gap-1 text-text-accent system-xs-regular cursor-pointer'>
-                    <RiBookOpenLine className='w-3 h-3' />
+                  <div className='text-text-accent system-xs-regular inline-flex cursor-pointer items-center gap-1'>
+                    <RiBookOpenLine className='h-3 w-3' />
                     {t('plugin.detailPanel.endpointsDocLink')}
                   </div>
                 </a>
@@ -93,11 +93,11 @@ const EndpointList = ({ detail }: Props) => {
           />
         </div>
         <ActionButton onClick={showEndpointModal}>
-          <RiAddLine className='w-4 h-4' />
+          <RiAddLine className='h-4 w-4' />
         </ActionButton>
       </div>
       {data.endpoints.length === 0 && (
-        <div className='mb-1 p-3 flex justify-center rounded-[10px] bg-background-section text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.endpointsEmpty')}</div>
+        <div className='bg-background-section text-text-tertiary system-xs-regular mb-1 flex justify-center rounded-[10px] p-3'>{t('plugin.detailPanel.endpointsEmpty')}</div>
       )}
       <div className='flex flex-col gap-2'>
         {data.endpoints.map((item, index) => (
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
index e150d72dc3..ede33cc6d2 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
@@ -46,17 +46,17 @@ const EndpointModal: FC<Props> = ({
       footer={null}
       mask
       positionCenter={false}
-      panelClassname={cn('justify-start mt-[64px] mr-2 mb-2 !w-[420px] !max-w-[420px] !p-0 !bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl')}
+      panelClassname={cn('!bg-components-panel-bg border-components-panel-border mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] !p-0 shadow-xl')}
     >
       <>
         <div className='p-4 pb-2'>
           <div className='flex items-center justify-between'>
             <div className='text-text-primary system-xl-semibold'>{t('plugin.detailPanel.endpointModalTitle')}</div>
             <ActionButton onClick={onCancel}>
-              <RiCloseLine className='w-4 h-4' />
+              <RiCloseLine className='h-4 w-4' />
             </ActionButton>
           </div>
-          <div className='mt-0.5 text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.endpointModalDesc')}</div>
+          <div className='text-text-tertiary system-xs-regular mt-0.5'>{t('plugin.detailPanel.endpointModalDesc')}</div>
         </div>
         <div className='grow overflow-y-auto'>
           <div className='px-4 py-2'>
@@ -74,15 +74,15 @@ const EndpointModal: FC<Props> = ({
                 ? (<a
                   href={item.url}
                   target='_blank' rel='noopener noreferrer'
-                  className='inline-flex items-center body-xs-regular text-text-accent-secondary'
+                  className='body-xs-regular text-text-accent-secondary inline-flex items-center'
                 >
                   {t('tools.howToGet')}
-                  <RiArrowRightUpLine className='ml-1 w-3 h-3' />
+                  <RiArrowRightUpLine className='ml-1 h-3 w-3' />
                 </a>)
                 : null}
             />
           </div>
-          <div className={cn('p-4 pt-0 flex justify-end')} >
+          <div className={cn('flex justify-end p-4 pt-0')} >
             <div className='flex gap-2'>
               <Button onClick={onCancel}>{t('common.operation.cancel')}</Button>
               <Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
diff --git a/web/app/components/plugins/plugin-detail-panel/index.tsx b/web/app/components/plugins/plugin-detail-panel/index.tsx
index 4d20c0877d..e6b61d9f58 100644
--- a/web/app/components/plugins/plugin-detail-panel/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/index.tsx
@@ -38,7 +38,7 @@ const PluginDetailPanel: FC<Props> = ({
       footer={null}
       mask={false}
       positionCenter={false}
-      panelClassname={cn('justify-start mt-[64px] mr-2 mb-2 !w-[420px] !max-w-[420px] !p-0 !bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl')}
+      panelClassname={cn('!bg-components-panel-bg border-components-panel-border mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] !p-0 shadow-xl')}
     >
       {detail && (
         <>
diff --git a/web/app/components/plugins/plugin-detail-panel/model-list.tsx b/web/app/components/plugins/plugin-detail-panel/model-list.tsx
index 5989a75945..2107cd19b0 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-list.tsx
@@ -20,17 +20,17 @@ const ModelList = ({
 
   return (
     <div className='px-4 py-2'>
-      <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold-uppercase'>{t('plugin.detailPanel.modelNum', { num: res.data.length })}</div>
+      <div className='text-text-secondary system-sm-semibold-uppercase mb-1 flex h-6 items-center'>{t('plugin.detailPanel.modelNum', { num: res.data.length })}</div>
       <div className='flex flex-col'>
         {res.data.map(model => (
-          <div key={model.model} className='h-6 py-1 flex items-center'>
+          <div key={model.model} className='flex h-6 items-center py-1'>
             <ModelIcon
-              className='shrink-0 mr-2'
+              className='mr-2 shrink-0'
               provider={(model as any).provider}
               modelName={model.model}
             />
             <ModelName
-              className='grow text-text-secondary system-md-regular'
+              className='text-text-secondary system-md-regular grow'
               modelItem={model}
               showModelType
               showMode
diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
index ac4ef3452b..ee78da2f89 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
@@ -207,10 +207,10 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
           }
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className={cn('z-50', portalToFollowElemContentClassName)}>
-          <div className={cn(popupClassName, 'w-[389px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg')}>
-            <div className={cn('max-h-[420px] p-4 pt-3 overflow-y-auto')}>
+          <div className={cn(popupClassName, 'border-components-panel-border bg-components-panel-bg w-[389px] rounded-2xl border-[0.5px] shadow-lg')}>
+            <div className={cn('max-h-[420px] overflow-y-auto p-4 pt-3')}>
               <div className='relative'>
-                <div className={cn('mb-1 h-6 flex items-center text-text-secondary system-sm-semibold')}>
+                <div className={cn('text-text-secondary system-sm-semibold mb-1 flex h-6 items-center')}>
                   {t('common.modelProvider.model').toLocaleUpperCase()}
                 </div>
                 <ModelSelector
@@ -221,7 +221,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
                 />
               </div>
               {(currentModel?.model_type === ModelTypeEnum.textGeneration || currentModel?.model_type === ModelTypeEnum.tts) && (
-                <div className='my-3 h-[1px] bg-divider-subtle' />
+                <div className='bg-divider-subtle my-3 h-[1px]' />
               )}
               {currentModel?.model_type === ModelTypeEnum.textGeneration && (
                 <LLMParamsPanel
diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx
index eb3c1102aa..8507ce31b8 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx
@@ -97,8 +97,8 @@ const LLMParamsPanel = ({
 
   return (
     <>
-      <div className='flex items-center justify-between mb-2'>
-        <div className={cn('h-6 flex items-center text-text-secondary system-sm-semibold')}>{t('common.modelProvider.parameters')}</div>
+      <div className='mb-2 flex items-center justify-between'>
+        <div className={cn('text-text-secondary system-sm-semibold flex h-6 items-center')}>{t('common.modelProvider.parameters')}</div>
         {
           PROVIDER_WITH_PRESET_TONE.includes(provider) && (
             <PresetsParameter onSelect={handleSelectPresetParameter} />
diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx
index a13b9905d3..18a17baa9e 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx
@@ -35,7 +35,7 @@ const TTSParamsPanel = ({
   return (
     <>
       <div className='mb-3'>
-        <div className='mb-1 py-1 flex items-center text-text-secondary system-sm-semibold'>
+        <div className='text-text-secondary system-sm-semibold mb-1 flex items-center py-1'>
           {t('appDebug.voice.voiceSettings.language')}
         </div>
         <PortalSelect
@@ -48,7 +48,7 @@ const TTSParamsPanel = ({
         />
       </div>
       <div className='mb-3'>
-        <div className='mb-1 py-1 flex items-center text-text-secondary system-sm-semibold'>
+        <div className='text-text-secondary system-sm-semibold mb-1 flex items-center py-1'>
           {t('appDebug.voice.voiceSettings.voice')}
         </div>
         <PortalSelect
diff --git a/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
index 13a48dbabe..1c86acf00a 100644
--- a/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
@@ -82,27 +82,27 @@ const MultipleToolSelector = ({
 
   return (
     <>
-      <div className='flex items-center mb-1'>
+      <div className='mb-1 flex items-center'>
         <div
-          className={cn('relative grow flex items-center gap-0.5', supportCollapse && 'cursor-pointer')}
+          className={cn('relative flex grow items-center gap-0.5', supportCollapse && 'cursor-pointer')}
           onClick={handleCollapse}
         >
-          <div className='h-6 flex items-center text-text-secondary system-sm-semibold-uppercase'>{label}</div>
+          <div className='text-text-secondary system-sm-semibold-uppercase flex h-6 items-center'>{label}</div>
           {required && <div className='text-red-500'>*</div>}
           {tooltip && (
             <Tooltip
               popupContent={tooltip}
               needsDelay
             >
-              <div><RiQuestionLine className='w-3.5 h-3.5 text-text-quaternary hover:text-text-tertiary' /></div>
+              <div><RiQuestionLine className='text-text-quaternary hover:text-text-tertiary h-3.5 w-3.5' /></div>
             </Tooltip>
           )}
           {supportCollapse && (
             <div className='absolute -left-4 top-1'>
               <RiArrowDropDownLine
                 className={cn(
-                  'w-4 h-4 text-text-tertiary',
-                  collapse && 'transform -rotate-90',
+                  'text-text-tertiary h-4 w-4',
+                  collapse && '-rotate-90',
                 )}
               />
             </div>
@@ -110,7 +110,7 @@ const MultipleToolSelector = ({
         </div>
         {value.length > 0 && (
           <>
-            <div className='flex items-center gap-1 text-text-tertiary system-xs-medium'>
+            <div className='text-text-tertiary system-xs-medium flex items-center gap-1'>
               <span>{`${enabledCount}/${value.length}`}</span>
               <span>{t('appDebug.agent.tools.enabled')}</span>
             </div>
@@ -122,7 +122,7 @@ const MultipleToolSelector = ({
             setOpen(!open)
             setPanelShowState(true)
           }}>
-            <RiAddLine className='w-4 h-4' />
+            <RiAddLine className='h-4 w-4' />
           </ActionButton>
         )}
       </div>
@@ -146,7 +146,7 @@ const MultipleToolSelector = ({
 
           />
           {value.length === 0 && (
-            <div className='p-3 flex justify-center rounded-[10px] bg-background-section text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.toolSelector.empty')}</div>
+            <div className='bg-background-section text-text-tertiary system-xs-regular flex justify-center rounded-[10px] p-3'>{t('plugin.detailPanel.toolSelector.empty')}</div>
           )}
           {value.length > 0 && value.map((item, index) => (
             <div className='mb-1' key={index}>
diff --git a/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx b/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
index 422ff447a4..0fd530d367 100644
--- a/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
@@ -53,19 +53,19 @@ const OperationDropdown: FC<Props> = ({
       <PortalToFollowElemTrigger onClick={handleTrigger}>
         <div>
           <ActionButton className={cn(open && 'bg-state-base-hover')}>
-            <RiMoreFill className='w-4 h-4' />
+            <RiMoreFill className='h-4 w-4' />
           </ActionButton>
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-50'>
-        <div className='w-[160px] p-1 bg-components-panel-bg-blur rounded-xl border-[0.5px] border-components-panel-border shadow-lg'>
+        <div className='bg-components-panel-bg-blur border-components-panel-border w-[160px] rounded-xl border-[0.5px] p-1 shadow-lg'>
           {source === PluginSource.github && (
             <div
               onClick={() => {
                 onInfo()
                 handleTrigger()
               }}
-              className='px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover'
+              className='text-text-secondary system-md-regular hover:bg-state-base-hover cursor-pointer rounded-lg px-3 py-1.5'
             >{t('plugin.detailPanel.operation.info')}</div>
           )}
           {source === PluginSource.github && (
@@ -74,24 +74,24 @@ const OperationDropdown: FC<Props> = ({
                 onCheckVersion()
                 handleTrigger()
               }}
-              className='px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover'
+              className='text-text-secondary system-md-regular hover:bg-state-base-hover cursor-pointer rounded-lg px-3 py-1.5'
             >{t('plugin.detailPanel.operation.checkUpdate')}</div>
           )}
           {(source === PluginSource.marketplace || source === PluginSource.github) && (
-            <a href={detailUrl} target='_blank' className='flex items-center px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover'>
+            <a href={detailUrl} target='_blank' className='text-text-secondary system-md-regular hover:bg-state-base-hover flex cursor-pointer items-center rounded-lg px-3 py-1.5'>
               <span className='grow'>{t('plugin.detailPanel.operation.viewDetail')}</span>
-              <RiArrowRightUpLine className='shrink-0 w-3.5 h-3.5 text-text-tertiary' />
+              <RiArrowRightUpLine className='text-text-tertiary h-3.5 w-3.5 shrink-0' />
             </a>
           )}
           {(source === PluginSource.marketplace || source === PluginSource.github) && (
-            <div className='my-1 h-px bg-divider-subtle'></div>
+            <div className='bg-divider-subtle my-1 h-px'></div>
           )}
           <div
             onClick={() => {
               onRemove()
               handleTrigger()
             }}
-            className='px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:text-text-destructive hover:bg-state-destructive-hover'
+            className='text-text-secondary system-md-regular hover:text-text-destructive hover:bg-state-destructive-hover cursor-pointer rounded-lg px-3 py-1.5'
           >{t('plugin.detailPanel.operation.remove')}</div>
         </div>
       </PortalToFollowElemContent>
diff --git a/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx b/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
index a7f1d84071..d43f11b0b0 100644
--- a/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
@@ -78,37 +78,37 @@ const StrategyDetail: FC<Props> = ({
       footer={null}
       mask={false}
       positionCenter={false}
-      panelClassname={cn('justify-start mt-[64px] mr-2 mb-2 !w-[420px] !max-w-[420px] !p-0 !bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl')}
+      panelClassname={cn('!bg-components-panel-bg border-components-panel-border mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] !p-0 shadow-xl')}
     >
       <>
         {/* header */}
-        <div className='relative p-4 pb-3 border-b border-divider-subtle'>
-          <div className='absolute top-3 right-3'>
+        <div className='border-divider-subtle relative border-b p-4 pb-3'>
+          <div className='absolute right-3 top-3'>
             <ActionButton onClick={onHide}>
-              <RiCloseLine className='w-4 h-4' />
+              <RiCloseLine className='h-4 w-4' />
             </ActionButton>
           </div>
           <div
-            className='mb-2 flex items-center gap-1 text-text-accent-secondary system-xs-semibold-uppercase cursor-pointer'
+            className='text-text-accent-secondary system-xs-semibold-uppercase mb-2 flex cursor-pointer items-center gap-1'
             onClick={onHide}
           >
-            <RiArrowLeftLine className='w-4 h-4' />
+            <RiArrowLeftLine className='h-4 w-4' />
             BACK
           </div>
           <div className='flex items-center gap-1'>
-            <Icon size='tiny' className='w-6 h-6' src={`${API_PREFIX}/workspaces/current/plugin/icon?tenant_id=${provider.tenant_id}&filename=${provider.icon}`} />
+            <Icon size='tiny' className='h-6 w-6' src={`${API_PREFIX}/workspaces/current/plugin/icon?tenant_id=${provider.tenant_id}&filename=${provider.icon}`} />
             <div className=''>{getValueFromI18nObject(provider.label)}</div>
           </div>
-          <div className='mt-1 text-text-primary system-md-semibold'>{getValueFromI18nObject(detail.identity.label)}</div>
+          <div className='text-text-primary system-md-semibold mt-1'>{getValueFromI18nObject(detail.identity.label)}</div>
           <Description className='mt-3' text={getValueFromI18nObject(detail.description)} descriptionLineRows={2}></Description>
         </div>
         {/* form */}
         <div className='h-full'>
-          <div className='flex flex-col h-full overflow-y-auto'>
-            <div className='p-4 pb-1 text-text-primary system-sm-semibold-uppercase'>{t('tools.setBuiltInTools.parameters')}</div>
+          <div className='flex h-full flex-col overflow-y-auto'>
+            <div className='text-text-primary system-sm-semibold-uppercase p-4 pb-1'>{t('tools.setBuiltInTools.parameters')}</div>
             <div className='px-4'>
               {detail.parameters.length > 0 && (
-                <div className='py-2 space-y-1'>
+                <div className='space-y-1 py-2'>
                   {detail.parameters.map((item: any, index) => (
                     <div key={index} className='py-1'>
                       <div className='flex items-center gap-2'>
@@ -121,7 +121,7 @@ const StrategyDetail: FC<Props> = ({
                         )}
                       </div>
                       {item.human_description && (
-                        <div className='mt-0.5 text-text-tertiary system-xs-regular'>
+                        <div className='text-text-tertiary system-xs-regular mt-0.5'>
                           {getValueFromI18nObject(item.human_description)}
                         </div>
                       )}
@@ -135,9 +135,9 @@ const StrategyDetail: FC<Props> = ({
                 <div className='px-4'>
                   <Divider className="!mt-2" />
                 </div>
-                <div className='p-4 pb-1 text-text-primary system-sm-semibold-uppercase'>OUTPUT</div>
+                <div className='text-text-primary system-sm-semibold-uppercase p-4 pb-1'>OUTPUT</div>
                 {outputSchema.length > 0 && (
-                  <div className='px-4 py-2 space-y-1'>
+                  <div className='space-y-1 px-4 py-2'>
                     {outputSchema.map((outputItem, index) => (
                       <div key={index} className='py-1'>
                         <div className='flex items-center gap-2'>
@@ -145,7 +145,7 @@ const StrategyDetail: FC<Props> = ({
                           <div className='text-text-tertiary system-xs-regular'>{outputItem.type}</div>
                         </div>
                         {outputItem.description && (
-                          <div className='mt-0.5 text-text-tertiary system-xs-regular'>
+                          <div className='text-text-tertiary system-xs-regular mt-0.5'>
                             {outputItem.description}
                           </div>
                         )}
diff --git a/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx b/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx
index fd2fea99e0..cc11c30f98 100644
--- a/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx
@@ -31,10 +31,10 @@ const StrategyItem = ({
   return (
     <>
       <div
-        className={cn('mb-2 px-4 py-3 bg-components-panel-item-bg rounded-xl border-[0.5px] border-components-panel-border-subtle shadow-xs cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover')}
+        className={cn('bg-components-panel-item-bg border-components-panel-border-subtle shadow-xs hover:bg-components-panel-on-panel-item-bg-hover mb-2 cursor-pointer rounded-xl border-[0.5px] px-4 py-3')}
         onClick={() => setShowDetail(true)}
       >
-        <div className='pb-0.5 text-text-secondary system-md-semibold'>{getValueFromI18nObject(detail.identity.label)}</div>
+        <div className='text-text-secondary system-md-semibold pb-0.5'>{getValueFromI18nObject(detail.identity.label)}</div>
         <div className='text-text-tertiary system-xs-regular line-clamp-2' title={getValueFromI18nObject(detail.description)}>{getValueFromI18nObject(detail.description)}</div>
       </div>
       {showDetail && (
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
index 4f6acd4477..17e66547cc 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@@ -262,10 +262,10 @@ const ToolSelector: FC<Props> = ({
               isError={(!currentProvider || !currentTool) && !inMarketPlace}
               errorTip={
                 <div className='max-w-[240px] space-y-1 text-xs'>
-                  <h3 className='font-semibold text-text-primary'>{currentTool ? t('plugin.detailPanel.toolSelector.uninstalledTitle') : t('plugin.detailPanel.toolSelector.unsupportedTitle')}</h3>
-                  <p className='tracking-tight text-text-secondary'>{currentTool ? t('plugin.detailPanel.toolSelector.uninstalledContent') : t('plugin.detailPanel.toolSelector.unsupportedContent')}</p>
+                  <h3 className='text-text-primary font-semibold'>{currentTool ? t('plugin.detailPanel.toolSelector.uninstalledTitle') : t('plugin.detailPanel.toolSelector.unsupportedTitle')}</h3>
+                  <p className='text-text-secondary tracking-tight'>{currentTool ? t('plugin.detailPanel.toolSelector.uninstalledContent') : t('plugin.detailPanel.toolSelector.unsupportedContent')}</p>
                   <p>
-                    <Link href={'/plugins'} className='tracking-tight text-text-accent'>{t('plugin.detailPanel.toolSelector.uninstalledLink')}</Link>
+                    <Link href={'/plugins'} className='text-text-accent tracking-tight'>{t('plugin.detailPanel.toolSelector.uninstalledLink')}</Link>
                   </p>
                 </div>
               }
@@ -273,14 +273,14 @@ const ToolSelector: FC<Props> = ({
           )}
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1000]'>
-          <div className={cn('relative max-h-[642px] min-h-20 w-[361px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pb-4 shadow-lg backdrop-blur-sm', !isShowSettingAuth && 'overflow-y-auto pb-2')}>
+          <div className={cn('border-components-panel-border bg-components-panel-bg-blur relative max-h-[642px] min-h-20 w-[361px] rounded-xl border-[0.5px] pb-4 shadow-lg backdrop-blur-sm', !isShowSettingAuth && 'overflow-y-auto pb-2')}>
             {!isShowSettingAuth && (
               <>
-                <div className='system-xl-semibold px-4 pb-1 pt-3.5 text-text-primary'>{t('plugin.detailPanel.toolSelector.title')}</div>
+                <div className='system-xl-semibold text-text-primary px-4 pb-1 pt-3.5'>{t('plugin.detailPanel.toolSelector.title')}</div>
                 {/* base form */}
                 <div className='flex flex-col gap-3 px-4 py-2'>
                   <div className='flex flex-col gap-1'>
-                    <div className='system-sm-semibold flex h-6 items-center text-text-secondary'>{t('plugin.detailPanel.toolSelector.toolLabel')}</div>
+                    <div className='system-sm-semibold text-text-secondary flex h-6 items-center'>{t('plugin.detailPanel.toolSelector.toolLabel')}</div>
                     <ToolPicker
                       panelClassName='w-[328px]'
                       placement='bottom'
@@ -302,7 +302,7 @@ const ToolSelector: FC<Props> = ({
                     />
                   </div>
                   <div className='flex flex-col gap-1'>
-                    <div className='system-sm-semibold flex h-6 items-center text-text-secondary'>{t('plugin.detailPanel.toolSelector.descriptionLabel')}</div>
+                    <div className='system-sm-semibold text-text-secondary flex h-6 items-center'>{t('plugin.detailPanel.toolSelector.descriptionLabel')}</div>
                     <Textarea
                       className='resize-none'
                       placeholder={t('plugin.detailPanel.toolSelector.descriptionPlaceholder')}
@@ -399,7 +399,7 @@ const ToolSelector: FC<Props> = ({
                             ? (<a
                               href={item.url}
                               target='_blank' rel='noopener noreferrer'
-                              className='inline-flex items-center text-xs text-text-accent'
+                              className='text-text-accent inline-flex items-center text-xs'
                             >
                               {t('tools.howToGet')}
                               <RiArrowRightUpLine className='ml-1 h-3 w-3' />
@@ -427,16 +427,16 @@ const ToolSelector: FC<Props> = ({
             {isShowSettingAuth && currentProvider && (
               <>
                 <div className='relative flex flex-col gap-1 pt-3.5'>
-                  <div className='absolute -top-2 left-2 w-[345px] rounded-t-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pt-2 backdrop-blur-sm'></div>
+                  <div className='border-components-panel-border bg-components-panel-bg-blur absolute -top-2 left-2 w-[345px] rounded-t-xl border-[0.5px] pt-2 backdrop-blur-sm'></div>
                   <div
-                    className='system-xs-semibold-uppercase flex h-6 cursor-pointer items-center gap-1 px-3 text-text-accent-secondary'
+                    className='system-xs-semibold-uppercase text-text-accent-secondary flex h-6 cursor-pointer items-center gap-1 px-3'
                     onClick={() => setShowSettingAuth(false)}
                   >
                     <RiArrowLeftLine className='h-4 w-4' />
                     BACK
                   </div>
-                  <div className='system-xl-semibold px-4 text-text-primary'>{t('tools.auth.setupModalTitle')}</div>
-                  <div className='system-xs-regular px-4 text-text-tertiary'>{t('tools.auth.setupModalTitleDescription')}</div>
+                  <div className='system-xl-semibold text-text-primary px-4'>{t('tools.auth.setupModalTitle')}</div>
+                  <div className='system-xs-regular text-text-tertiary px-4'>{t('tools.auth.setupModalTitleDescription')}</div>
                 </div>
                 <ToolCredentialForm
                   collection={currentProvider}
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx
index 6ba8207856..4283325b31 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx
@@ -162,7 +162,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
     const isString = !isNumber && !isSelect && !isFile && !isAppSelector && !isModelSelector
     return (
       <div key={variable} className='space-y-1'>
-        <div className='flex items-center justify-between py-2 system-sm-semibold text-text-secondary'>
+        <div className='system-sm-semibold text-text-secondary flex items-center justify-between py-2'>
           <div className='flex items-center space-x-2'>
             <span className={cn('text-text-secondary code-sm-semibold')}>{label[language] || label.en_US}</span>
             {required && (
@@ -170,7 +170,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
             )}
             {tooltipContent}
           </div>
-          <div className='flex items-center gap-1 px-2 py-1 rounded-[6px] border border-divider-subtle bg-background-default-lighter cursor-pointer hover:bg-state-base-hover' onClick={() => handleAutomatic(variable, !auto)}>
+          <div className='border-divider-subtle bg-background-default-lighter hover:bg-state-base-hover flex cursor-pointer items-center gap-1 rounded-[6px] border px-2 py-1' onClick={() => handleAutomatic(variable, !auto)}>
             <span className='text-text-secondary system-xs-medium'>{t('plugin.detailPanel.toolSelector.auto')}</span>
             <Switch
               size='xs'
@@ -183,7 +183,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
           <>
             {isString && (
               <Input
-                className={cn(inputsIsFocus[variable] ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'rounded-lg px-3 py-[6px] border')}
+                className={cn(inputsIsFocus[variable] ? 'shadow-xs border-gray-300 bg-gray-50' : 'border-gray-100 bg-gray-100', 'rounded-lg border px-3 py-[6px]')}
                 value={varInput?.value as string || ''}
                 onChange={handleMixedTypeChange(variable)}
                 nodesOutputVars={nodeOutputVars}
@@ -256,17 +256,17 @@ const ReasoningConfigForm: React.FC<Props> = ({
           <a
             href={url}
             target='_blank' rel='noopener noreferrer'
-            className='inline-flex items-center text-xs text-text-accent'
+            className='text-text-accent inline-flex items-center text-xs'
           >
             {t('tools.howToGet')}
-            <RiArrowRightUpLine className='ml-1 w-3 h-3' />
+            <RiArrowRightUpLine className='ml-1 h-3 w-3' />
           </a>
         )}
       </div>
     )
   }
   return (
-    <div className='px-4 py-2 space-y-3'>
+    <div className='space-y-3 px-4 py-2'>
       {schemas.map(schema => renderField(schema))}
     </div>
   )
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx
index 6334e792f9..2f8db17c76 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx
@@ -58,7 +58,7 @@ const ToolCredentialForm: FC<Props> = ({
         ? <div className='pt-3'><Loading type='app' /></div>
         : (
           <>
-            <div className='px-4 max-h-[464px] overflow-y-auto'>
+            <div className='max-h-[464px] overflow-y-auto px-4'>
               <Form
                 value={tempCredential}
                 onChange={(v) => {
@@ -73,10 +73,10 @@ const ToolCredentialForm: FC<Props> = ({
                   ? (<a
                     href={item.url}
                     target='_blank' rel='noopener noreferrer'
-                    className='inline-flex items-center text-xs text-text-accent'
+                    className='text-text-accent inline-flex items-center text-xs'
                   >
                     {t('tools.howToGet')}
-                    <RiArrowRightUpLine className='ml-1 w-3 h-3' />
+                    <RiArrowRightUpLine className='ml-1 h-3 w-3' />
                   </a>)
                   : null}
               />
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
index e99d06508d..bbc49ca45f 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
@@ -62,37 +62,37 @@ const ToolItem = ({
 
   return (
     <div className={cn(
-      'group p-1.5 pr-2 flex items-center gap-1 bg-components-panel-on-panel-item-bg border-[0.5px] border-components-panel-border-subtle rounded-lg shadow-xs cursor-default hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm',
+      'bg-components-panel-on-panel-item-bg border-components-panel-border-subtle shadow-xs hover:bg-components-panel-on-panel-item-bg-hover group flex cursor-default items-center gap-1 rounded-lg border-[0.5px] p-1.5 pr-2 hover:shadow-sm',
       open && 'bg-components-panel-on-panel-item-bg-hover shadow-sm',
       isDeleting && 'hover:bg-state-destructive-hover border-state-destructive-border shadow-xs',
     )}>
       {icon && (
         <div className={cn('shrink-0', isTransparent && 'opacity-50')}>
-          {typeof icon === 'string' && <div className='w-7 h-7 bg-cover bg-center border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge rounded-lg' style={{ backgroundImage: `url(${icon})` }} />}
-          {typeof icon !== 'string' && <AppIcon className='w-7 h-7 border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge rounded-lg' size='xs' icon={icon?.content} background={icon?.background} />}
+          {typeof icon === 'string' && <div className='border-components-panel-border-subtle bg-background-default-dodge h-7 w-7 rounded-lg border-[0.5px] bg-cover bg-center' style={{ backgroundImage: `url(${icon})` }} />}
+          {typeof icon !== 'string' && <AppIcon className='border-components-panel-border-subtle bg-background-default-dodge h-7 w-7 rounded-lg border-[0.5px]' size='xs' icon={icon?.content} background={icon?.background} />}
         </div>
       )}
       {!icon && (
         <div className={cn(
-          'flex items-center justify-center w-7 h-7 rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle',
+          'border-components-panel-border-subtle bg-background-default-subtle flex h-7 w-7 items-center justify-center rounded-md border-[0.5px]',
         )}>
-          <div className='flex w-5 h-5 items-center justify-center opacity-35'>
+          <div className='flex h-5 w-5 items-center justify-center opacity-35'>
             <Group className='text-text-tertiary' />
           </div>
         </div>
       )}
-      <div className={cn('pl-0.5 grow truncate', isTransparent && 'opacity-50')}>
+      <div className={cn('grow truncate pl-0.5', isTransparent && 'opacity-50')}>
         <div className='text-text-tertiary system-2xs-medium-uppercase'>{providerNameText}</div>
         <div className='text-text-secondary system-xs-medium'>{toolLabel}</div>
       </div>
-      <div className='hidden group-hover:flex items-center gap-1'>
+      <div className='hidden items-center gap-1 group-hover:flex'>
         {!noAuth && !isError && !uninstalled && !versionMismatch && (
           <ActionButton>
-            <RiEqualizer2Line className='w-4 h-4' />
+            <RiEqualizer2Line className='h-4 w-4' />
           </ActionButton>
         )}
         <div
-          className='p-1 rounded-md text-text-tertiary cursor-pointer hover:text-text-destructive'
+          className='text-text-tertiary hover:text-text-destructive cursor-pointer rounded-md p-1'
           onClick={(e) => {
             e.stopPropagation()
             onDelete?.()
@@ -100,7 +100,7 @@ const ToolItem = ({
           onMouseOver={() => setIsDeleting(true)}
           onMouseLeave={() => setIsDeleting(false)}
         >
-          <RiDeleteBinLine className='w-4 h-4' />
+          <RiDeleteBinLine className='h-4 w-4' />
         </div>
       </div>
       {!isError && !uninstalled && !noAuth && !versionMismatch && showSwitch && (
@@ -152,7 +152,7 @@ const ToolItem = ({
           needsDelay
         >
           <div>
-            <RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
+            <RiErrorWarningFill className='text-text-destructive h-4 w-4' />
           </div>
         </Tooltip>
       )}
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
index adea79adf5..de818c2513 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
@@ -29,32 +29,32 @@ const ToolTrigger = ({
   const { t } = useTranslation()
   return (
     <div className={cn(
-      'group flex items-center p-2 pl-3 bg-components-input-bg-normal rounded-lg cursor-pointer hover:bg-state-base-hover-alt',
+      'bg-components-input-bg-normal hover:bg-state-base-hover-alt group flex cursor-pointer items-center rounded-lg p-2 pl-3',
       open && 'bg-state-base-hover-alt',
-      value?.provider_name && 'pl-1.5 py-1.5',
+      value?.provider_name && 'py-1.5 pl-1.5',
     )}>
       {value?.provider_name && provider && (
-        <div className='shrink-0 mr-1 p-px rounded-lg bg-components-panel-bg border border-components-panel-border'>
+        <div className='bg-components-panel-bg border-components-panel-border mr-1 shrink-0 rounded-lg border p-px'>
           <BlockIcon
-            className='!w-4 !h-4'
+            className='!h-4 !w-4'
             type={BlockEnum.Tool}
             toolIcon={provider.icon}
           />
         </div>
       )}
       {value?.tool_name && (
-        <div className='grow system-sm-medium text-components-input-text-filled'>{value.tool_name}</div>
+        <div className='system-sm-medium text-components-input-text-filled grow'>{value.tool_name}</div>
       )}
       {!value?.provider_name && (
-        <div className='grow text-components-input-text-placeholder system-sm-regular'>
+        <div className='text-components-input-text-placeholder system-sm-regular grow'>
           {!isConfigure ? t('plugin.detailPanel.toolSelector.placeholder') : t('plugin.detailPanel.configureTool')}
         </div>
       )}
       {isConfigure && (
-        <RiEqualizer2Line className={cn('shrink-0 ml-0.5 w-4 h-4 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
+        <RiEqualizer2Line className={cn('text-text-quaternary group-hover:text-text-secondary ml-0.5 h-4 w-4 shrink-0', open && 'text-text-secondary')} />
       )}
       {!isConfigure && (
-        <RiArrowDownSLine className={cn('shrink-0 ml-0.5 w-4 h-4 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
+        <RiArrowDownSLine className={cn('text-text-quaternary group-hover:text-text-secondary ml-0.5 h-4 w-4 shrink-0', open && 'text-text-secondary')} />
       )}
     </div>
   )
diff --git a/web/app/components/plugins/plugin-item/action.tsx b/web/app/components/plugins/plugin-item/action.tsx
index 9a067c3fa7..7a40f0855e 100644
--- a/web/app/components/plugins/plugin-item/action.tsx
+++ b/web/app/components/plugins/plugin-item/action.tsx
@@ -107,7 +107,7 @@ const Action: FC<Props> = ({
         && (
           <Tooltip popupContent={t(`${i18nPrefix}.checkForUpdates`)}>
             <ActionButton onClick={handleFetchNewVersion}>
-              <RiLoopLeftLine className='w-4 h-4 text-text-tertiary' />
+              <RiLoopLeftLine className='text-text-tertiary h-4 w-4' />
             </ActionButton>
           </Tooltip>
         )
@@ -117,7 +117,7 @@ const Action: FC<Props> = ({
         && (
           <Tooltip popupContent={t(`${i18nPrefix}.pluginInfo`)}>
             <ActionButton onClick={showPluginInfo}>
-              <RiInformation2Line className='w-4 h-4 text-text-tertiary' />
+              <RiInformation2Line className='text-text-tertiary h-4 w-4' />
             </ActionButton>
           </Tooltip>
         )
@@ -130,7 +130,7 @@ const Action: FC<Props> = ({
               className='hover:bg-state-destructive-hover text-text-tertiary hover:text-text-destructive'
               onClick={showDeleteConfirm}
             >
-              <RiDeleteBinLine className='w-4 h-4' />
+              <RiDeleteBinLine className='h-4 w-4' />
             </ActionButton>
           </Tooltip>
         )
diff --git a/web/app/components/plugins/plugin-item/index.tsx b/web/app/components/plugins/plugin-item/index.tsx
index d06f406136..e4c87a961e 100644
--- a/web/app/components/plugins/plugin-item/index.tsx
+++ b/web/app/components/plugins/plugin-item/index.tsx
@@ -64,7 +64,7 @@ const PluginItem: FC<Props> = ({
   return (
     <div
       className={cn(
-        'p-1 rounded-xl border-[1.5px] border-background-section-burn',
+        'border-background-section-burn rounded-xl border-[1.5px] p-1',
         currentPluginID === plugin_id && 'border-components-option-card-option-selected-border',
         source === PluginSource.debugging
           ? 'bg-[repeating-linear-gradient(-45deg,rgba(16,24,40,0.04),rgba(16,24,40,0.04)_5px,rgba(0,0,0,0.02)_5px,rgba(0,0,0,0.02)_10px)]'
@@ -74,22 +74,22 @@ const PluginItem: FC<Props> = ({
         setCurrentPluginID(plugin.plugin_id)
       }}
     >
-      <div className={cn('relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)}>
+      <div className={cn('border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg shadow-xs relative rounded-xl border-[0.5px] p-4 pb-3', className)}>
         <CornerMark text={categoriesMap[category].label} />
         {/* Header */}
         <div className="flex">
-          <div className='flex items-center justify-center w-10 h-10 overflow-hidden border-components-panel-border-subtle border-[1px] rounded-xl'>
+          <div className='border-components-panel-border-subtle flex h-10 w-10 items-center justify-center overflow-hidden rounded-xl border-[1px]'>
             <img
-              className='w-full h-full'
+              className='h-full w-full'
               src={`${API_PREFIX}/workspaces/current/plugin/icon?tenant_id=${tenant_id}&filename=${icon}`}
               alt={`plugin-${plugin_unique_identifier}-logo`}
             />
           </div>
           <div className="ml-3 w-0 grow">
-            <div className="flex items-center h-5">
+            <div className="flex h-5 items-center">
               <Title title={title} />
-              {verified && <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />}
-              <Badge className='shrink-0 ml-1' text={source === PluginSource.github ? plugin.meta!.version : plugin.version} />
+              {verified && <RiVerifiedBadgeLine className="text-text-accent ml-0.5 h-4 w-4 shrink-0" />}
+              <Badge className='ml-1 shrink-0' text={source === PluginSource.github ? plugin.meta!.version : plugin.version} />
             </div>
             <div className='flex items-center justify-between'>
               <Description text={descriptionText} descriptionLineRows={1}></Description>
@@ -112,7 +112,7 @@ const PluginItem: FC<Props> = ({
           </div>
         </div>
       </div>
-      <div className='mt-1.5 mb-1 flex justify-between items-center h-4 px-4'>
+      <div className='mb-1 mt-1.5 flex h-4 items-center justify-between px-4'>
         <div className='flex items-center'>
           <OrgInfo
             className="mt-0.5"
@@ -122,9 +122,9 @@ const PluginItem: FC<Props> = ({
           />
           {category === PluginType.extension && (
             <>
-              <div className='mx-2 text-text-quaternary system-xs-regular'>·</div>
-              <div className='flex text-text-tertiary system-xs-regular space-x-1'>
-                <RiLoginCircleLine className='w-4 h-4' />
+              <div className='text-text-quaternary system-xs-regular mx-2'>·</div>
+              <div className='text-text-tertiary system-xs-regular flex space-x-1'>
+                <RiLoginCircleLine className='h-4 w-4' />
                 <span>{t('plugin.endpointsEnabled', { num: endpoints_active })}</span>
               </div>
             </>
@@ -136,10 +136,10 @@ const PluginItem: FC<Props> = ({
             && <>
               <a href={`https://github.com/${meta!.repo}`} target='_blank' className='flex items-center gap-1'>
                 <div className='text-text-tertiary system-2xs-medium-uppercase'>{t('plugin.from')}</div>
-                <div className='flex items-center space-x-0.5 text-text-secondary'>
-                  <Github className='w-3 h-3' />
+                <div className='text-text-secondary flex items-center space-x-0.5'>
+                  <Github className='h-3 w-3' />
                   <div className='system-2xs-semibold-uppercase'>GitHub</div>
-                  <RiArrowRightUpLine className='w-3 h-3' />
+                  <RiArrowRightUpLine className='h-3 w-3' />
                 </div>
               </a>
             </>
@@ -148,14 +148,14 @@ const PluginItem: FC<Props> = ({
             && <>
               <a href={`${MARKETPLACE_URL_PREFIX}/plugins/${author}/${name}`} target='_blank' className='flex items-center gap-0.5'>
                 <div className='text-text-tertiary system-2xs-medium-uppercase'>{t('plugin.from')} <span className='text-text-secondary'>marketplace</span></div>
-                <RiArrowRightUpLine className='w-3 h-3 text-text-tertiary' />
+                <RiArrowRightUpLine className='text-text-tertiary h-3 w-3' />
               </a>
             </>
           }
           {source === PluginSource.local
             && <>
               <div className='flex items-center gap-1'>
-                <RiHardDrive3Line className='text-text-tertiary w-3 h-3' />
+                <RiHardDrive3Line className='text-text-tertiary h-3 w-3' />
                 <div className='text-text-tertiary system-2xs-medium-uppercase'>Local Plugin</div>
               </div>
             </>
@@ -163,7 +163,7 @@ const PluginItem: FC<Props> = ({
           {source === PluginSource.debugging
             && <>
               <div className='flex items-center gap-1'>
-                <RiBugLine className='w-3 h-3 text-text-warning' />
+                <RiBugLine className='text-text-warning h-3 w-3' />
                 <div className='text-text-warning system-2xs-medium-uppercase'>Debugging Plugin</div>
               </div>
             </>
diff --git a/web/app/components/plugins/plugin-mutation-model/index.tsx b/web/app/components/plugins/plugin-mutation-model/index.tsx
index 36ab670ab3..c392e27ef4 100644
--- a/web/app/components/plugins/plugin-mutation-model/index.tsx
+++ b/web/app/components/plugins/plugin-mutation-model/index.tsx
@@ -39,10 +39,10 @@ const PluginMutationModal: FC<Props> = ({
       closable
       title={modelTitle}
     >
-      <div className='mt-3 mb-2 text-text-secondary system-md-regular'>
+      <div className='text-text-secondary system-md-regular mb-2 mt-3'>
         {description}
       </div>
-      <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
+      <div className='bg-background-section-burn flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl p-2'>
         <Card
           installed={mutation.isSuccess}
           payload={plugin}
@@ -50,7 +50,7 @@ const PluginMutationModal: FC<Props> = ({
           titleLeft={cardTitleLeft}
         />
       </div>
-      <div className='flex pt-5 items-center gap-2 self-stretch'>
+      <div className='flex items-center gap-2 self-stretch pt-5'>
         <div>
           {modalBottomLeft}
         </div>
diff --git a/web/app/components/plugins/plugin-page/debug-info.tsx b/web/app/components/plugins/plugin-page/debug-info.tsx
index 4361c5b37b..53e4695ece 100644
--- a/web/app/components/plugins/plugin-page/debug-info.tsx
+++ b/web/app/components/plugins/plugin-page/debug-info.tsx
@@ -29,10 +29,10 @@ const DebugInfo: FC = () => {
       popupContent={
         <>
           <div className='flex items-center gap-1 self-stretch'>
-            <span className='flex flex-col justify-center items-start grow shrink-0 basis-0 text-text-secondary system-sm-semibold'>{t(`${i18nPrefix}.title`)}</span>
-            <a href='https://docs.dify.ai/plugins/quick-start/develop-plugins/debug-plugin' target='_blank' className='flex items-center gap-0.5 text-text-accent-light-mode-only cursor-pointer'>
+            <span className='text-text-secondary system-sm-semibold flex shrink-0 grow basis-0 flex-col items-start justify-center'>{t(`${i18nPrefix}.title`)}</span>
+            <a href='https://docs.dify.ai/plugins/quick-start/develop-plugins/debug-plugin' target='_blank' className='text-text-accent-light-mode-only flex cursor-pointer items-center gap-0.5'>
               <span className='system-xs-medium'>{t(`${i18nPrefix}.viewDocs`)}</span>
-              <RiArrowRightUpLine className='w-3 h-3' />
+              <RiArrowRightUpLine className='h-3 w-3' />
             </a>
           </div>
           <div className='space-y-0.5'>
@@ -53,8 +53,8 @@ const DebugInfo: FC = () => {
       asChild={false}
       position='bottom'
     >
-      <Button className='w-full h-full p-2 text-components-button-secondary-text'>
-        <RiBugLine className='w-4 h-4' />
+      <Button className='text-components-button-secondary-text h-full w-full p-2'>
+        <RiBugLine className='h-4 w-4' />
       </Button>
     </Tooltip>
   )
diff --git a/web/app/components/plugins/plugin-page/empty/index.tsx b/web/app/components/plugins/plugin-page/empty/index.tsx
index 3263f6a0c3..aeb2563305 100644
--- a/web/app/components/plugins/plugin-page/empty/index.tsx
+++ b/web/app/components/plugins/plugin-page/empty/index.tsx
@@ -38,29 +38,29 @@ const Empty = () => {
   }, [pluginList?.plugins.length, t, filters.categories.length, filters.tags.length, filters.searchQuery])
 
   return (
-    <div className='grow w-full relative z-0'>
+    <div className='relative z-0 w-full grow'>
       {/* skeleton */}
-      <div className='h-full w-full px-12 absolute top-0 grid grid-cols-2 gap-2 overflow-hidden z-10'>
+      <div className='absolute top-0 z-10 grid h-full w-full grid-cols-2 gap-2 overflow-hidden px-12'>
         {Array.from({ length: 20 }).fill(0).map((_, i) => (
-          <div key={i} className='h-[100px] bg-components-card-bg rounded-xl' />
+          <div key={i} className='bg-components-card-bg h-[100px] rounded-xl' />
         ))}
       </div>
       {/* mask */}
-      <div className='h-full w-full absolute z-20 bg-gradient-to-b from-background-gradient-mask-transparent to-white' />
-      <div className='flex items-center justify-center h-full relative z-30'>
+      <div className='from-background-gradient-mask-transparent absolute z-20 h-full w-full bg-gradient-to-b to-white' />
+      <div className='relative z-30 flex h-full items-center justify-center'>
         <div className='flex flex-col items-center gap-y-3'>
-          <div className='relative -z-10 flex items-center justify-center w-[52px] h-[52px] rounded-xl
-          bg-components-card-bg border-[1px] border-dashed border-divider-deep shadow-xl shadow-shadow-shadow-5'>
-            <Group className='text-text-tertiary w-5 h-5' />
+          <div className='bg-components-card-bg border-divider-deep shadow-shadow-shadow-5 relative -z-10 flex h-[52px] w-[52px]
+          items-center justify-center rounded-xl border-[1px] border-dashed shadow-xl'>
+            <Group className='text-text-tertiary h-5 w-5' />
             <Line className='absolute -right-[1px] top-1/2 -translate-y-1/2' />
             <Line className='absolute -left-[1px] top-1/2 -translate-y-1/2' />
-            <Line className='absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
-            <Line className='absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
+            <Line className='absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rotate-90' />
+            <Line className='absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 rotate-90' />
           </div>
           <div className='text-text-tertiary text-sm font-normal'>
             {text}
           </div>
-          <div className='flex flex-col w-[240px]'>
+          <div className='flex w-[240px] flex-col'>
             <input
               type='file'
               ref={fileInputRef}
@@ -68,7 +68,7 @@ const Empty = () => {
               onChange={handleFileChange}
               accept={SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS}
             />
-            <div className='w-full flex flex-col gap-y-1'>
+            <div className='flex w-full flex-col gap-y-1'>
               {[
                 ...(
                   (enable_marketplace || true)
@@ -80,8 +80,8 @@ const Empty = () => {
               ].map(({ icon: Icon, text, action }) => (
                 <div
                   key={action}
-                  className='flex items-center px-3 py-2 gap-x-1 rounded-lg bg-components-button-secondary-bg
-                  hover:bg-state-base-hover cursor-pointer border-[0.5px] shadow-shadow-shadow-3 shadow-xs'
+                  className='bg-components-button-secondary-bg hover:bg-state-base-hover shadow-shadow-shadow-3 shadow-xs flex cursor-pointer items-center
+                  gap-x-1 rounded-lg border-[0.5px] px-3 py-2'
                   onClick={() => {
                     if (action === 'local')
                       fileInputRef.current?.click()
@@ -91,7 +91,7 @@ const Empty = () => {
                       setSelectedAction(action)
                   }}
                 >
-                  <Icon className="w-4 h-4 text-text-tertiary" />
+                  <Icon className="text-text-tertiary h-4 w-4" />
                   <span className='text-text-secondary system-md-regular'>{text}</span>
                 </div>
               ))}
diff --git a/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx b/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx
index 7c3417eec3..e6d8184f2c 100644
--- a/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx
+++ b/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx
@@ -48,12 +48,12 @@ const CategoriesFilter = ({
     >
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
         <div className={cn(
-          'flex items-center px-2 py-1 h-8 text-text-tertiary rounded-lg bg-components-input-bg-normal hover:bg-state-base-hover-alt cursor-pointer',
+          'text-text-tertiary bg-components-input-bg-normal hover:bg-state-base-hover-alt flex h-8 cursor-pointer items-center rounded-lg px-2 py-1',
           selectedTagsLength && 'text-text-secondary',
           open && 'bg-state-base-hover',
         )}>
           <div className={cn(
-            'flex items-center p-1 system-sm-medium',
+            'system-sm-medium flex items-center p-1',
           )}>
             {
               !selectedTagsLength && t('plugin.allCategories')
@@ -63,7 +63,7 @@ const CategoriesFilter = ({
             }
             {
               selectedTagsLength > 2 && (
-                <div className='ml-1 system-xs-medium text-text-tertiary'>
+                <div className='system-xs-medium text-text-tertiary ml-1'>
                   +{selectedTagsLength - 2}
                 </div>
               )
@@ -72,7 +72,7 @@ const CategoriesFilter = ({
           {
             !!selectedTagsLength && (
               <RiCloseCircleFill
-                className='w-4 h-4 text-text-quaternary cursor-pointer'
+                className='text-text-quaternary h-4 w-4 cursor-pointer'
                 onClick={
                   (e) => {
                     e.stopPropagation()
@@ -84,13 +84,13 @@ const CategoriesFilter = ({
           }
           {
             !selectedTagsLength && (
-              <RiArrowDownSLine className='w-4 h-4' />
+              <RiArrowDownSLine className='h-4 w-4' />
             )
           }
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-10'>
-        <div className='w-[240px] border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-xl shadow-lg'>
+        <div className='border-components-panel-border bg-components-panel-bg-blur w-[240px] rounded-xl border-[0.5px] shadow-lg'>
           <div className='p-2 pb-1'>
             <Input
               showLeftIcon
@@ -99,19 +99,19 @@ const CategoriesFilter = ({
               placeholder={t('plugin.searchCategories')}
             />
           </div>
-          <div className='p-1 max-h-[448px] overflow-y-auto'>
+          <div className='max-h-[448px] overflow-y-auto p-1'>
             {
               filteredOptions.map(option => (
                 <div
                   key={option.name}
-                  className='flex items-center px-2 py-1.5 h-7 rounded-lg cursor-pointer hover:bg-state-base-hover'
+                  className='hover:bg-state-base-hover flex h-7 cursor-pointer items-center rounded-lg px-2 py-1.5'
                   onClick={() => handleCheck(option.name)}
                 >
                   <Checkbox
                     className='mr-1'
                     checked={value.includes(option.name)}
                   />
-                  <div className='px-1 system-sm-medium text-text-secondary'>
+                  <div className='system-sm-medium text-text-secondary px-1'>
                     {option.label}
                   </div>
                 </div>
diff --git a/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx b/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
index dd1781d9f4..34588c424c 100644
--- a/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
+++ b/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
@@ -48,12 +48,12 @@ const TagsFilter = ({
     >
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
         <div className={cn(
-          'flex items-center px-2 py-1 h-8 text-text-tertiary rounded-lg bg-components-input-bg-normal hover:bg-state-base-hover-alt cursor-pointer',
+          'text-text-tertiary bg-components-input-bg-normal hover:bg-state-base-hover-alt flex h-8 cursor-pointer items-center rounded-lg px-2 py-1',
           selectedTagsLength && 'text-text-secondary',
           open && 'bg-state-base-hover',
         )}>
           <div className={cn(
-            'flex items-center p-1 system-sm-medium',
+            'system-sm-medium flex items-center p-1',
           )}>
             {
               !selectedTagsLength && t('pluginTags.allTags')
@@ -63,7 +63,7 @@ const TagsFilter = ({
             }
             {
               selectedTagsLength > 2 && (
-                <div className='ml-1 system-xs-medium text-text-tertiary'>
+                <div className='system-xs-medium text-text-tertiary ml-1'>
                   +{selectedTagsLength - 2}
                 </div>
               )
@@ -72,20 +72,20 @@ const TagsFilter = ({
           {
             !!selectedTagsLength && (
               <RiCloseCircleFill
-                className='w-4 h-4 text-text-quaternary cursor-pointer'
+                className='text-text-quaternary h-4 w-4 cursor-pointer'
                 onClick={() => onChange([])}
               />
             )
           }
           {
             !selectedTagsLength && (
-              <RiArrowDownSLine className='w-4 h-4' />
+              <RiArrowDownSLine className='h-4 w-4' />
             )
           }
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-10'>
-        <div className='w-[240px] border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-xl shadow-lg'>
+        <div className='border-components-panel-border bg-components-panel-bg-blur w-[240px] rounded-xl border-[0.5px] shadow-lg'>
           <div className='p-2 pb-1'>
             <Input
               showLeftIcon
@@ -94,19 +94,19 @@ const TagsFilter = ({
               placeholder={t('pluginTags.searchTags')}
             />
           </div>
-          <div className='p-1 max-h-[448px] overflow-y-auto'>
+          <div className='max-h-[448px] overflow-y-auto p-1'>
             {
               filteredOptions.map(option => (
                 <div
                   key={option.name}
-                  className='flex items-center px-2 py-1.5 h-7 rounded-lg cursor-pointer hover:bg-state-base-hover'
+                  className='hover:bg-state-base-hover flex h-7 cursor-pointer items-center rounded-lg px-2 py-1.5'
                   onClick={() => handleCheck(option.name)}
                 >
                   <Checkbox
                     className='mr-1'
                     checked={value.includes(option.name)}
                   />
-                  <div className='px-1 system-sm-medium text-text-secondary'>
+                  <div className='system-sm-medium text-text-secondary px-1'>
                     {option.label}
                   </div>
                 </div>
diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx
index 7eea8fea0f..04d7b31fbb 100644
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -141,17 +141,17 @@ const PluginPage = ({
     <div
       id='marketplace-container'
       ref={containerRef}
-      className={cn('grow relative flex flex-col overflow-y-auto border-t border-divider-subtle', activeTab === 'plugins'
-        ? 'rounded-t-xl bg-components-panel-bg'
+      className={cn('border-divider-subtle relative flex grow flex-col overflow-y-auto border-t', activeTab === 'plugins'
+        ? 'bg-components-panel-bg rounded-t-xl'
         : 'bg-background-body',
       )}
     >
       <div
         className={cn(
-          'sticky top-0 flex min-h-[60px] px-12 pt-4 pb-2 items-center self-stretch gap-1 z-10 bg-components-panel-bg', activeTab === 'discover' && 'bg-background-body',
+          'bg-components-panel-bg sticky top-0 z-10 flex min-h-[60px] items-center gap-1 self-stretch px-12 pb-2 pt-4', activeTab === 'discover' && 'bg-background-body',
         )}
       >
-        <div className='flex justify-between items-center w-full'>
+        <div className='flex w-full items-center justify-between'>
           <div className='flex-1'>
             <TabSlider
               value={activeTab}
@@ -171,11 +171,11 @@ const PluginPage = ({
                       className='px-3'
                       variant='secondary-accent'
                     >
-                      <RiBookOpenLine className='mr-1 w-4 h-4' />
+                      <RiBookOpenLine className='mr-1 h-4 w-4' />
                       {t('plugin.submitPlugin')}
                     </Button>
                   </Link>
-                  <div className='mx-2 w-[1px] h-3.5 bg-divider-regular'></div>
+                  <div className='bg-divider-regular mx-2 h-3.5 w-[1px]'></div>
                 </>
               )
             }
@@ -196,10 +196,10 @@ const PluginPage = ({
                   popupContent={t('plugin.privilege.title')}
                 >
                   <Button
-                    className='w-full h-full p-2 text-components-button-secondary-text group'
+                    className='text-components-button-secondary-text group h-full w-full p-2'
                     onClick={setShowPluginSettingModal}
                   >
-                    <RiEqualizer2Line className='w-4 h-4' />
+                    <RiEqualizer2Line className='h-4 w-4' />
                   </Button>
                 </Tooltip>
               )
@@ -212,12 +212,12 @@ const PluginPage = ({
           {plugins}
           {dragging && (
             <div
-              className="absolute inset-0 m-0.5 p-2 rounded-2xl bg-[rgba(21,90,239,0.14)] border-2
-                  border-dashed border-components-dropzone-border-accent">
+              className="border-components-dropzone-border-accent absolute inset-0 m-0.5 rounded-2xl border-2 border-dashed
+                  bg-[rgba(21,90,239,0.14)] p-2">
             </div>
           )}
-          <div className={`flex py-4 justify-center items-center gap-2 ${dragging ? 'text-text-accent' : 'text-text-quaternary'}`}>
-            <RiDragDropLine className="w-4 h-4" />
+          <div className={`flex items-center justify-center gap-2 py-4 ${dragging ? 'text-text-accent' : 'text-text-quaternary'}`}>
+            <RiDragDropLine className="h-4 w-4" />
             <span className="system-xs-regular">{t('plugin.installModal.dropPluginToInstall')}</span>
           </div>
           {currentFile && (
diff --git a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
index 4c2d543e14..cb43742c6b 100644
--- a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
+++ b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
@@ -63,16 +63,16 @@ const InstallPluginDropdown = ({
       <div className="relative">
         <PortalToFollowElemTrigger onClick={() => setIsMenuOpen(v => !v)}>
           <Button
-            className={cn('w-full h-full p-2 text-components-button-secondary-text', isMenuOpen && 'bg-state-base-hover')}
+            className={cn('text-components-button-secondary-text h-full w-full p-2', isMenuOpen && 'bg-state-base-hover')}
           >
-            <RiAddLine className='w-4 h-4' />
+            <RiAddLine className='h-4 w-4' />
             <span className='pl-1'>{t('plugin.installPlugin')}</span>
-            <RiArrowDownSLine className='w-4 h-4 ml-1' />
+            <RiArrowDownSLine className='ml-1 h-4 w-4' />
           </Button>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1002]'>
-          <div className='flex flex-col p-1 pb-2 items-start w-[200px] bg-components-panel-bg-blur border border-components-panel-border rounded-xl shadows-shadow-lg'>
-            <span className='flex pt-1 pb-0.5 pl-2 pr-3 items-start self-stretch text-text-tertiary system-xs-medium-uppercase'>
+          <div className='bg-components-panel-bg-blur border-components-panel-border shadows-shadow-lg flex w-[200px] flex-col items-start rounded-xl border p-1 pb-2'>
+            <span className='text-text-tertiary system-xs-medium-uppercase flex items-start self-stretch pb-0.5 pl-2 pr-3 pt-1'>
               {t('plugin.installFrom')}
             </span>
             <input
@@ -94,7 +94,7 @@ const InstallPluginDropdown = ({
               ].map(({ icon: Icon, text, action }) => (
                 <div
                   key={action}
-                  className='flex items-center w-full px-2 py-1.5 gap-1 rounded-lg hover:bg-state-base-hover !cursor-pointer'
+                  className='hover:bg-state-base-hover flex w-full !cursor-pointer items-center gap-1 rounded-lg px-2 py-1.5'
                   onClick={() => {
                     if (action === 'local') {
                       fileInputRef.current?.click()
@@ -109,8 +109,8 @@ const InstallPluginDropdown = ({
                     }
                   }}
                 >
-                  <Icon className="w-4 h-4 text-text-tertiary" />
-                  <span className='px-1 text-text-secondary system-md-regular'>{text}</span>
+                  <Icon className="text-text-tertiary h-4 w-4" />
+                  <span className='text-text-secondary system-md-regular px-1'>{text}</span>
                 </div>
               ))}
             </div>
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
index 997877e3a4..bb03f1d18b 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
@@ -84,7 +84,7 @@ const PluginTasks = () => {
           <Tooltip popupContent={tip}>
             <div
               className={cn(
-                'relative flex items-center justify-center w-8 h-8 rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs hover:bg-components-button-secondary-bg-hover',
+                'border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs hover:bg-components-button-secondary-bg-hover relative flex h-8 w-8 items-center justify-center rounded-lg border-[0.5px]',
                 (isInstallingWithError || isFailed) && 'border-components-button-destructive-secondary-border-hover bg-state-destructive-hover hover:bg-state-destructive-hover-alt cursor-pointer',
               )}
               id="plugin-task-trigger"
@@ -98,7 +98,7 @@ const PluginTasks = () => {
                 !(isInstalling || isInstallingWithError) && (
                   <RiInstallLine
                     className={cn(
-                      'w-4 h-4 text-components-button-secondary-text',
+                      'text-components-button-secondary-text h-4 w-4',
                       (isInstallingWithError || isFailed) && 'text-components-button-destructive-secondary-text',
                     )}
                   />
@@ -125,12 +125,12 @@ const PluginTasks = () => {
                 }
                 {
                   isSuccess && (
-                    <RiCheckboxCircleFill className='w-3.5 h-3.5 text-text-success' />
+                    <RiCheckboxCircleFill className='text-text-success h-3.5 w-3.5' />
                   )
                 }
                 {
                   isFailed && (
-                    <RiErrorWarningFill className='w-3.5 h-3.5 text-text-destructive' />
+                    <RiErrorWarningFill className='text-text-destructive h-3.5 w-3.5' />
                   )
                 }
               </div>
@@ -138,8 +138,8 @@ const PluginTasks = () => {
           </Tooltip>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[11]'>
-          <div className='p-1 pb-2 w-[320px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
-            <div className='sticky top-0 flex items-center justify-between px-2 pt-1 h-7 system-sm-semibold-uppercase'>
+          <div className='border-components-panel-border bg-components-panel-bg-blur w-[320px] rounded-xl border-[0.5px] p-1 pb-2 shadow-lg'>
+            <div className='system-sm-semibold-uppercase sticky top-0 flex h-7 items-center justify-between px-2 pt-1'>
               {t('plugin.task.installedError', { errorLength: errorPluginsLength })}
               <Button
                 className='shrink-0'
@@ -155,10 +155,10 @@ const PluginTasks = () => {
                 errorPlugins.map(errorPlugin => (
                   <div
                     key={errorPlugin.plugin_unique_identifier}
-                    className='flex p-2 rounded-lg hover:bg-state-base-hover'
+                    className='hover:bg-state-base-hover flex rounded-lg p-2'
                   >
-                    <div className='relative flex items-center justify-center mr-2 w-6 h-6 rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge'>
-                      <RiErrorWarningFill className='absolute -right-0.5 -bottom-0.5 z-10 w-3 h-3 text-text-destructive' />
+                    <div className='border-components-panel-border-subtle bg-background-default-dodge relative mr-2 flex h-6 w-6 items-center justify-center rounded-md border-[0.5px]'>
+                      <RiErrorWarningFill className='text-text-destructive absolute -bottom-0.5 -right-0.5 z-10 h-3 w-3' />
                       <CardIcon
                         size='tiny'
                         src={getIconUrl(errorPlugin.icon)}
diff --git a/web/app/components/plugins/plugin-page/plugins-panel.tsx b/web/app/components/plugins/plugin-page/plugins-panel.tsx
index f1a5fba1b9..5230776e3d 100644
--- a/web/app/components/plugins/plugin-page/plugins-panel.tsx
+++ b/web/app/components/plugins/plugin-page/plugins-panel.tsx
@@ -43,14 +43,14 @@ const PluginsPanel = () => {
 
   return (
     <>
-      <div className='flex flex-col pt-1 pb-3 px-12 justify-center items-start gap-3 self-stretch'>
-        <div className='h-px self-stretch bg-divider-subtle'></div>
+      <div className='flex flex-col items-start justify-center gap-3 self-stretch px-12 pb-3 pt-1'>
+        <div className='bg-divider-subtle h-px self-stretch'></div>
         <FilterManagement
           onFilterChange={handleFilterChange}
         />
       </div>
       {isPluginListLoading ? <Loading type='app' /> : (filteredList?.length ?? 0) > 0 ? (
-        <div className='flex px-12 items-start content-start gap-2 grow self-stretch flex-wrap'>
+        <div className='flex grow flex-wrap content-start items-start gap-2 self-stretch px-12'>
           <div className='w-full'>
             <List pluginList={filteredList || []} />
           </div>
diff --git a/web/app/components/plugins/provider-card.tsx b/web/app/components/plugins/provider-card.tsx
index ed9ad9769f..ae50d1a511 100644
--- a/web/app/components/plugins/provider-card.tsx
+++ b/web/app/components/plugins/provider-card.tsx
@@ -36,19 +36,19 @@ const ProviderCard: FC<Props> = ({
   const { locale } = useI18N()
 
   return (
-    <div className={cn('group relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover:bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)}>
+    <div className={cn('border-components-panel-border bg-components-panel-on-panel-item-bg hover:bg-components-panel-on-panel-item-bg shadow-xs group relative rounded-xl border-[0.5px] p-4 pb-3', className)}>
       {/* Header */}
       <div className="flex">
         <Icon src={payload.icon} />
         <div className="ml-3 w-0 grow">
-          <div className="flex items-center h-5">
+          <div className="flex h-5 items-center">
             <Title title={getValueFromI18nObject(label)} />
             {/* <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" /> */}
           </div>
-          <div className='mb-1 flex justify-between items-center h-4'>
+          <div className='mb-1 flex h-4 items-center justify-between'>
             <div className='flex items-center'>
               <div className='text-text-tertiary system-xs-regular'>{org}</div>
-              <div className='mx-2 text-text-quaternary system-xs-regular'>·</div>
+              <div className='text-text-quaternary system-xs-regular mx-2'>·</div>
               <DownloadCount downloadCount={payload.install_count || 0} />
             </div>
           </div>
@@ -61,7 +61,7 @@ const ProviderCard: FC<Props> = ({
         ))}
       </div>
       <div
-        className='hidden group-hover:flex items-center gap-2 absolute bottom-0 left-0 right-0 p-4 pt-8 rounded-xl bg-gradient-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent'
+        className='from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent absolute bottom-0 left-0 right-0 hidden items-center gap-2 rounded-xl bg-gradient-to-tr p-4 pt-8 group-hover:flex'
       >
         <Button
           className='grow'
@@ -76,7 +76,7 @@ const ProviderCard: FC<Props> = ({
         >
           <a href={`${getPluginLinkInMarketplace(payload)}?language=${locale}`} target='_blank' className='flex items-center gap-0.5'>
             {t('plugin.detailPanel.operation.detail')}
-            <RiArrowRightUpLine className='w-4 h-4' />
+            <RiArrowRightUpLine className='h-4 w-4' />
           </a>
         </Button>
       </div>
diff --git a/web/app/components/plugins/update-plugin/from-market-place.tsx b/web/app/components/plugins/update-plugin/from-market-place.tsx
index 916f61f478..00a7dea8c0 100644
--- a/web/app/components/plugins/update-plugin/from-market-place.tsx
+++ b/web/app/components/plugins/update-plugin/from-market-place.tsx
@@ -105,10 +105,10 @@ const UpdatePluginModal: FC<Props> = ({
   }, [onSave, uploadStep, check, originalPackageInfo.id, handleRefetch, targetPackageInfo.id])
   const usedInAppInfo = useMemo(() => {
     return (
-      <div className='flex px-0.5 justify-center items-center gap-0.5'>
+      <div className='flex items-center justify-center gap-0.5 px-0.5'>
         <div className='text-text-warning system-xs-medium'>{t(`${i18nPrefix}.usedInApps`, { num: 3 })}</div>
         {/* show the used apps */}
-        <RiInformation2Line className='w-4 h-4 text-text-tertiary' />
+        <RiInformation2Line className='text-text-tertiary h-4 w-4' />
       </div>
     )
   }, [t])
@@ -120,10 +120,10 @@ const UpdatePluginModal: FC<Props> = ({
       closable
       title={t(`${i18nPrefix}.${uploadStep === UploadStep.installed ? 'successfulTitle' : 'title'}`)}
     >
-      <div className='mt-3 mb-2 text-text-secondary system-md-regular'>
+      <div className='text-text-secondary system-md-regular mb-2 mt-3'>
         {t(`${i18nPrefix}.description`)}
       </div>
-      <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
+      <div className='bg-background-section-burn flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl p-2'>
         <Card
           installed={uploadStep === UploadStep.installed}
           payload={pluginManifestToCardPluginProps({
@@ -141,7 +141,7 @@ const UpdatePluginModal: FC<Props> = ({
           }
         />
       </div>
-      <div className='flex pt-5 justify-end items-center gap-2 self-stretch'>
+      <div className='flex items-center justify-end gap-2 self-stretch pt-5'>
         {uploadStep === UploadStep.notStarted && (
           <Button
             onClick={handleCancel}
diff --git a/web/app/components/plugins/update-plugin/plugin-version-picker.tsx b/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
index b05ddc0062..37e49f3c88 100644
--- a/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
+++ b/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
@@ -77,15 +77,15 @@ const PluginVersionPicker: FC<Props> = ({
       onOpenChange={onShowChange}
     >
       <PortalToFollowElemTrigger
-        className={cn('inline-flex items-center cursor-pointer', disabled && 'cursor-default')}
+        className={cn('inline-flex cursor-pointer items-center', disabled && 'cursor-default')}
         onClick={handleTriggerClick}
       >
         {trigger}
       </PortalToFollowElemTrigger>
 
       <PortalToFollowElemContent className='z-[1000]'>
-        <div className="relative w-[209px] p-1 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
-          <div className='px-3 pt-1 pb-0.5 text-text-tertiary system-xs-medium-uppercase'>
+        <div className="bg-components-panel-bg-blur border-components-panel-border relative w-[209px] rounded-xl border-[0.5px] p-1 shadow-lg">
+          <div className='text-text-tertiary system-xs-medium-uppercase px-3 pb-0.5 pt-1'>
             {t('plugin.detailPanel.switchVersion')}
           </div>
           <div className='relative'>
@@ -93,19 +93,19 @@ const PluginVersionPicker: FC<Props> = ({
               <div
                 key={version.unique_identifier}
                 className={cn(
-                  'h-7 px-3 py-1 flex items-center gap-1 rounded-lg hover:bg-state-base-hover cursor-pointer',
-                  currentVersion === version.version && 'opacity-30 cursor-default hover:bg-transparent',
+                  'hover:bg-state-base-hover flex h-7 cursor-pointer items-center gap-1 rounded-lg px-3 py-1',
+                  currentVersion === version.version && 'cursor-default opacity-30 hover:bg-transparent',
                 )}
                 onClick={() => handleSelect({
                   version: version.version,
                   unique_identifier: version.unique_identifier,
                 })}
               >
-                <div className='grow flex items-center'>
+                <div className='flex grow items-center'>
                   <div className='text-text-secondary system-sm-medium'>{version.version}</div>
                   {currentVersion === version.version && <Badge className='ml-1' text='CURRENT'/>}
                 </div>
-                <div className='shrink-0 text-text-tertiary system-xs-regular'>{formatDate(version.created_at, format)}</div>
+                <div className='text-text-tertiary system-xs-regular shrink-0'>{formatDate(version.created_at, format)}</div>
               </div>
             ))}
           </div>
diff --git a/web/app/components/share/text-generation/index.tsx b/web/app/components/share/text-generation/index.tsx
index 872e4414c1..84b04cd7da 100644
--- a/web/app/components/share/text-generation/index.tsx
+++ b/web/app/components/share/text-generation/index.tsx
@@ -479,7 +479,7 @@ const TextGeneration: FC<IMainProps> = ({
     if (!isShowResSidebar)
       return 'none'
 
-    return cn('fixed z-50 inset-0', isTablet ? 'pl-[128px]' : 'pl-6')
+    return cn('fixed inset-0 z-50', isTablet ? 'pl-[128px]' : 'pl-6')
   })()
 
   const renderResWrap = (
@@ -487,13 +487,13 @@ const TextGeneration: FC<IMainProps> = ({
       ref={resRef}
       className={
         cn(
-          'flex flex-col h-full shrink-0',
+          'flex h-full shrink-0 flex-col',
           isPC ? 'px-10 py-8' : 'bg-gray-50',
           isTablet && 'p-6', isMobile && 'p-4')
       }
     >
       <>
-        <div className='flex items-center justify-between shrink-0'>
+        <div className='flex shrink-0 items-center justify-between'>
           <div className='flex items-center space-x-3'>
             <div className={s.starIcon}></div>
             <div className='text-lg font-semibold text-gray-800'>{t('share.generation.title')}</div>
@@ -501,14 +501,14 @@ const TextGeneration: FC<IMainProps> = ({
           <div className='flex items-center space-x-2'>
             {allFailedTaskList.length > 0 && (
               <div className='flex items-center'>
-                <RiErrorWarningFill className='w-4 h-4 text-[#D92D20]' />
+                <RiErrorWarningFill className='h-4 w-4 text-[#D92D20]' />
                 <div className='ml-1 text-[#D92D20]'>{t('share.generation.batchFailed.info', { num: allFailedTaskList.length })}</div>
                 <Button
                   variant='primary'
                   className='ml-2'
                   onClick={handleRetryAllFailedTask}
                 >{t('share.generation.batchFailed.retry')}</Button>
-                <div className='mx-3 w-[1px] h-3.5 bg-gray-200'></div>
+                <div className='mx-3 h-3.5 w-[1px] bg-gray-200'></div>
               </div>
             )}
             {allSuccessTaskList.length > 0 && (
@@ -519,16 +519,16 @@ const TextGeneration: FC<IMainProps> = ({
             )}
             {!isPC && (
               <div
-                className='flex items-center justify-center cursor-pointer'
+                className='flex cursor-pointer items-center justify-center'
                 onClick={hideResSidebar}
               >
-                <XMarkIcon className='w-4 h-4 text-gray-800' />
+                <XMarkIcon className='h-4 w-4 text-gray-800' />
               </div>
             )}
           </div>
         </div>
 
-        <div className='overflow-y-auto grow'>
+        <div className='grow overflow-y-auto'>
           {!isCallBatchAPI ? renderRes() : renderBatchRes()}
           {!noPendingTask && (
             <div className='mt-4'>
@@ -542,7 +542,7 @@ const TextGeneration: FC<IMainProps> = ({
 
   if (!appId || !siteInfo || !promptConfig) {
     return (
-      <div className='flex items-center h-screen'>
+      <div className='flex h-screen items-center'>
         <Loading type='app' />
       </div>)
   }
@@ -558,7 +558,7 @@ const TextGeneration: FC<IMainProps> = ({
         <div className={cn(
           isPC ? 'w-[600px] max-w-[50%] p-8' : 'p-4',
           isInstalledApp && 'rounded-l-2xl',
-          'shrink-0 relative flex flex-col pb-10 h-full border-r border-gray-100 bg-white',
+          'relative flex h-full shrink-0 flex-col border-r border-gray-100 bg-white pb-10',
         )}>
           <div className='mb-6'>
             <div className='flex items-center justify-between'>
@@ -574,10 +574,10 @@ const TextGeneration: FC<IMainProps> = ({
               </div>
               {!isPC && (
                 <Button
-                  className='shrink-0 ml-2'
+                  className='ml-2 shrink-0'
                   onClick={showResSidebar}
                 >
-                  <div className='flex items-center space-x-2 text-primary-600 text-[13px] font-medium'>
+                  <div className='text-primary-600 flex items-center space-x-2 text-[13px] font-medium'>
                     <div className={s.starIcon}></div>
                     <span>{t('share.generation.title')}</span>
                   </div>
@@ -599,7 +599,7 @@ const TextGeneration: FC<IMainProps> = ({
                   isRight: true,
                   extra: savedMessages.length > 0
                     ? (
-                      <div className='ml-1 flex items-center h-5 px-1.5 rounded-md border border-gray-200 text-gray-500 text-xs font-medium'>
+                      <div className='ml-1 flex h-5 items-center rounded-md border border-gray-200 px-1.5 text-xs font-medium text-gray-500'>
                         {savedMessages.length}
                       </div>
                     )
@@ -610,7 +610,7 @@ const TextGeneration: FC<IMainProps> = ({
             value={currentTab}
             onChange={setCurrentTab}
           />
-          <div className='h-20 overflow-y-auto grow'>
+          <div className='h-20 grow overflow-y-auto'>
             <div className={cn(currentTab === 'create' ? 'block' : 'hidden')}>
               <RunOnce
                 siteInfo={siteInfo}
@@ -645,7 +645,7 @@ const TextGeneration: FC<IMainProps> = ({
           {/* copyright */}
           <div className={cn(
             isInstalledApp ? 'left-[248px]' : 'left-8',
-            'fixed  bottom-4  flex space-x-2 text-gray-400 font-normal text-xs',
+            'fixed  bottom-4  flex space-x-2 text-xs font-normal text-gray-400',
           )}>
             {siteInfo.copyright && (
               <div className="">© {(new Date()).getFullYear()} {siteInfo.copyright}</div>
@@ -655,7 +655,7 @@ const TextGeneration: FC<IMainProps> = ({
                 {siteInfo.copyright && <div>·</div>}
                 <div>{t('share.chat.privacyPolicyLeft')}
                   <a
-                    className='text-gray-500 px-1'
+                    className='px-1 text-gray-500'
                     href={siteInfo.privacy_policy}
                     target='_blank' rel='noopener noreferrer'>{t('share.chat.privacyPolicyMiddle')}</a>
                   {t('share.chat.privacyPolicyRight')}
diff --git a/web/app/components/share/text-generation/no-data/index.tsx b/web/app/components/share/text-generation/no-data/index.tsx
index 7492614131..b9154665eb 100644
--- a/web/app/components/share/text-generation/no-data/index.tsx
+++ b/web/app/components/share/text-generation/no-data/index.tsx
@@ -13,10 +13,10 @@ export type INoDataProps = {}
 const NoData: FC<INoDataProps> = () => {
   const { t } = useTranslation()
   return (
-    <div className='flex flex-col h-full w-full justify-center items-center'>
+    <div className='flex h-full w-full flex-col items-center justify-center'>
       {StarIcon}
       <div
-        className='mt-3 text-gray-300 text-xs leading-3'
+        className='mt-3 text-xs leading-3 text-gray-300'
       >
         {t('share.generation.noData')}
       </div>
diff --git a/web/app/components/share/text-generation/result/content.tsx b/web/app/components/share/text-generation/result/content.tsx
index 4e39db42c8..f294b1218e 100644
--- a/web/app/components/share/text-generation/result/content.tsx
+++ b/web/app/components/share/text-generation/result/content.tsx
@@ -17,10 +17,10 @@ const Result: FC<IResultProps> = ({
   onFeedback,
 }) => {
   return (
-    <div className='basis-3/4 h-max'>
+    <div className='h-max basis-3/4'>
       <Header result={content} showFeedback={showFeedback} feedback={feedback} onFeedback={onFeedback} />
       <div
-        className='mt-4 w-full flex text-sm leading-5 overflow-scroll font-normal text-gray-900'
+        className='mt-4 flex w-full overflow-scroll text-sm font-normal leading-5 text-gray-900'
         style={{
           maxHeight: '70vh',
         }}
diff --git a/web/app/components/share/text-generation/result/header.tsx b/web/app/components/share/text-generation/result/header.tsx
index 0233b098d0..5987a29eac 100644
--- a/web/app/components/share/text-generation/result/header.tsx
+++ b/web/app/components/share/text-generation/result/header.tsx
@@ -24,8 +24,8 @@ const Header: FC<IResultHeaderProps> = ({
 }) => {
   const { t } = useTranslation()
   return (
-    <div className='flex w-full justify-between items-center '>
-      <div className='text-gray-800 text-2xl leading-4 font-normal'>{t('share.generation.resultTitle')}</div>
+    <div className='flex w-full items-center justify-between '>
+      <div className='text-2xl font-normal leading-4 text-gray-800'>{t('share.generation.resultTitle')}</div>
       <div className='flex items-center space-x-2'>
         <Button
           className='h-7 p-[2px] pr-2'
@@ -35,8 +35,8 @@ const Header: FC<IResultHeaderProps> = ({
           }}
         >
           <>
-            <ClipboardDocumentIcon className='text-gray-500 w-4 h-3 mr-1' />
-            <span className='text-gray-500 text-xs leading-3'>{t('share.generation.copy')}</span>
+            <ClipboardDocumentIcon className='mr-1 h-3 w-4 text-gray-500' />
+            <span className='text-xs leading-3 text-gray-500'>{t('share.generation.copy')}</span>
           </>
         </Button>
 
@@ -50,7 +50,7 @@ const Header: FC<IResultHeaderProps> = ({
                   rating: null,
                 })
               }}
-              className='flex w-7 h-7 items-center justify-center rounded-md cursor-pointer  !text-primary-600 border border-primary-200 bg-primary-100 hover:border-primary-300 hover:bg-primary-200'>
+              className='!text-primary-600 border-primary-200 bg-primary-100 hover:border-primary-300 hover:bg-primary-200 flex h-7  w-7 cursor-pointer items-center justify-center rounded-md border'>
               <HandThumbUpIcon width={16} height={16} />
             </div>
           </Tooltip>
@@ -66,14 +66,14 @@ const Header: FC<IResultHeaderProps> = ({
                   rating: null,
                 })
               }}
-              className='flex w-7 h-7 items-center justify-center rounded-md cursor-pointer  !text-red-600 border border-red-200 bg-red-100 hover:border-red-300 hover:bg-red-200'>
+              className='flex h-7 w-7 cursor-pointer items-center justify-center rounded-md  border border-red-200 bg-red-100 !text-red-600 hover:border-red-300 hover:bg-red-200'>
               <HandThumbDownIcon width={16} height={16} />
             </div>
           </Tooltip>
         )}
 
         {showFeedback && !feedback.rating && (
-          <div className='flex rounded-lg border border-gray-200 p-[1px] space-x-1'>
+          <div className='flex space-x-1 rounded-lg border border-gray-200 p-[1px]'>
             <Tooltip
               popupContent="Great Rating"
               needsDelay={false}
@@ -84,7 +84,7 @@ const Header: FC<IResultHeaderProps> = ({
                     rating: 'like',
                   })
                 }}
-                className='flex w-6 h-6 items-center justify-center rounded-md cursor-pointer hover:bg-gray-100'>
+                className='flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-gray-100'>
                 <HandThumbUpIcon width={16} height={16} />
               </div>
             </Tooltip>
@@ -98,7 +98,7 @@ const Header: FC<IResultHeaderProps> = ({
                     rating: 'dislike',
                   })
                 }}
-                className='flex w-6 h-6 items-center justify-center rounded-md cursor-pointer hover:bg-gray-100'>
+                className='flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-gray-100'>
                 <HandThumbDownIcon width={16} height={16} />
               </div>
             </Tooltip>
diff --git a/web/app/components/share/text-generation/result/index.tsx b/web/app/components/share/text-generation/result/index.tsx
index 7d6c5942e7..600ba42cea 100644
--- a/web/app/components/share/text-generation/result/index.tsx
+++ b/web/app/components/share/text-generation/result/index.tsx
@@ -402,7 +402,7 @@ const Result: FC<IResultProps> = ({
       {!isCallBatchAPI && !isWorkflow && (
         (isResponding && !completionRes)
           ? (
-            <div className='flex h-full w-full justify-center items-center'>
+            <div className='flex h-full w-full items-center justify-center'>
               <Loading type='area' />
             </div>)
           : (
@@ -418,7 +418,7 @@ const Result: FC<IResultProps> = ({
         !isCallBatchAPI && isWorkflow && (
           (isResponding && !workflowProcessData)
             ? (
-              <div className='flex h-full w-full justify-center items-center'>
+              <div className='flex h-full w-full items-center justify-center'>
                 <Loading type='area' />
               </div>
             )
diff --git a/web/app/components/share/text-generation/run-batch/csv-download/index.tsx b/web/app/components/share/text-generation/run-batch/csv-download/index.tsx
index 2d50725b54..a88212e758 100644
--- a/web/app/components/share/text-generation/run-batch/csv-download/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/csv-download/index.tsx
@@ -27,13 +27,13 @@ const CSVDownload: FC<ICSVDownloadProps> = ({
 
   return (
     <div className='mt-6'>
-      <div className='text-sm text-gray-900 font-medium'>{t('share.generation.csvStructureTitle')}</div>
+      <div className='text-sm font-medium text-gray-900'>{t('share.generation.csvStructureTitle')}</div>
       <div className='mt-2 max-h-[500px] overflow-auto'>
-        <table className='w-full border-separate border-spacing-0 border border-gray-200 rounded-lg text-xs'>
+        <table className='w-full border-separate border-spacing-0 rounded-lg border border-gray-200 text-xs'>
           <thead className='text-gray-500'>
             <tr>
               {addQueryContentVars.map((item, i) => (
-                <td key={i} className='h-9 pl-4 border-b border-gray-200'>{item.name}</td>
+                <td key={i} className='h-9 border-b border-gray-200 pl-4'>{item.name}</td>
               ))}
             </tr>
           </thead>
@@ -47,7 +47,7 @@ const CSVDownload: FC<ICSVDownloadProps> = ({
         </table>
       </div>
       <CSVDownloader
-        className="block mt-2 cursor-pointer"
+        className="mt-2 block cursor-pointer"
         type={Type.Link}
         filename={'template'}
         bom={true}
@@ -58,8 +58,8 @@ const CSVDownload: FC<ICSVDownloadProps> = ({
           template,
         ]}
       >
-        <div className='flex items-center h-[18px] space-x-1 text-[#155EEF] text-xs font-medium'>
-          <DownloadIcon className='w-3 h-3' />
+        <div className='flex h-[18px] items-center space-x-1 text-xs font-medium text-[#155EEF]'>
+          <DownloadIcon className='h-3 w-3' />
           <span>{t('share.generation.downloadTemplate')}</span>
         </div>
       </CSVDownloader>
diff --git a/web/app/components/share/text-generation/run-batch/csv-reader/index.tsx b/web/app/components/share/text-generation/run-batch/csv-reader/index.tsx
index ac51bca6e6..10a6985ffc 100644
--- a/web/app/components/share/text-generation/run-batch/csv-reader/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/csv-reader/index.tsx
@@ -46,10 +46,10 @@ const CSVReader: FC<Props> = ({
             {
               acceptedFile
                 ? (
-                  <div className='w-full flex items-center space-x-2'>
+                  <div className='flex w-full items-center space-x-2'>
                     <CSVIcon className="shrink-0" />
                     <div className='flex w-0 grow'>
-                      <span className='max-w-[calc(100%_-_30px)] text-ellipsis whitespace-nowrap overflow-hidden text-gray-800'>{acceptedFile.name.replace(/.csv$/, '')}</span>
+                      <span className='max-w-[calc(100%_-_30px)] overflow-hidden text-ellipsis whitespace-nowrap text-gray-800'>{acceptedFile.name.replace(/.csv$/, '')}</span>
                       <span className='shrink-0 text-gray-500'>.csv</span>
                     </div>
                   </div>
diff --git a/web/app/components/share/text-generation/run-batch/index.tsx b/web/app/components/share/text-generation/run-batch/index.tsx
index 2a632f9cfc..4a7e6fd375 100644
--- a/web/app/components/share/text-generation/run-batch/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/index.tsx
@@ -49,8 +49,8 @@ const RunBatch: FC<IRunBatchProps> = ({
           onClick={handleSend}
           disabled={!isParsed || !isAllFinished}
         >
-          <Icon className={cn(!isAllFinished && 'animate-spin', 'shrink-0 w-4 h-4 mr-1')} aria-hidden="true" />
-          <span className='uppercase text-[13px]'>{t('share.generation.run')}</span>
+          <Icon className={cn(!isAllFinished && 'animate-spin', 'mr-1 h-4 w-4 shrink-0')} aria-hidden="true" />
+          <span className='text-[13px] uppercase'>{t('share.generation.run')}</span>
         </Button>
       </div>
     </div>
diff --git a/web/app/components/share/text-generation/run-batch/res-download/index.tsx b/web/app/components/share/text-generation/run-batch/res-download/index.tsx
index f835ff70b9..22677212ee 100644
--- a/web/app/components/share/text-generation/run-batch/res-download/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/res-download/index.tsx
@@ -31,8 +31,8 @@ const ResDownload: FC<IResDownloadProps> = ({
       }}
       data={values}
     >
-      <Button className={cn('space-x-2 bg-white', isMobile ? '!p-0 !w-8 justify-center' : '')}>
-        <DownloadIcon className='w-4 h-4 text-[#155EEF]' />
+      <Button className={cn('space-x-2 bg-white', isMobile ? '!w-8 justify-center !p-0' : '')}>
+        <DownloadIcon className='h-4 w-4 text-[#155EEF]' />
         {!isMobile && <span className='text-[#155EEF]'>{t('common.operation.download')}</span>}
       </Button>
     </CSVDownloader>
diff --git a/web/app/components/share/text-generation/run-once/index.tsx b/web/app/components/share/text-generation/run-once/index.tsx
index f46713a514..1eadded506 100644
--- a/web/app/components/share/text-generation/run-once/index.tsx
+++ b/web/app/components/share/text-generation/run-once/index.tsx
@@ -60,8 +60,8 @@ const RunOnce: FC<IRunOnceProps> = ({
         {/* input form */}
         <form onSubmit={onSubmit}>
           {promptConfig.prompt_variables.map(item => (
-            <div className='w-full mt-4' key={item.key}>
-              <label className='text-gray-900 text-sm font-medium'>{item.name}</label>
+            <div className='mt-4 w-full' key={item.key}>
+              <label className='text-sm font-medium text-gray-900'>{item.name}</label>
               <div className='mt-2'>
                 {item.type === 'select' && (
                   <Select
@@ -76,7 +76,7 @@ const RunOnce: FC<IRunOnceProps> = ({
                 {item.type === 'string' && (
                   <input
                     type="text"
-                    className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 "
+                    className="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2 text-gray-900 focus:border-blue-500 focus:ring-blue-500 sm:text-xs "
                     placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
                     value={inputs[item.key]}
                     onChange={(e) => { handleInputsChange({ ...inputsRef.current, [item.key]: e.target.value }) }}
@@ -94,7 +94,7 @@ const RunOnce: FC<IRunOnceProps> = ({
                 {item.type === 'number' && (
                   <input
                     type="number"
-                    className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 "
+                    className="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2 text-gray-900 focus:border-blue-500 focus:ring-blue-500 sm:text-xs "
                     placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
                     value={inputs[item.key]}
                     onChange={(e) => { handleInputsChange({ ...inputsRef.current, [item.key]: e.target.value }) }}
@@ -123,8 +123,8 @@ const RunOnce: FC<IRunOnceProps> = ({
           ))}
           {
             visionConfig?.enabled && (
-              <div className="w-full mt-4">
-                <div className="text-gray-900 text-sm font-medium">{t('common.imageUploader.imageUpload')}</div>
+              <div className="mt-4 w-full">
+                <div className="text-sm font-medium text-gray-900">{t('common.imageUploader.imageUpload')}</div>
                 <div className='mt-2'>
                   <TextGenerationImageUploader
                     settings={visionConfig}
@@ -142,7 +142,7 @@ const RunOnce: FC<IRunOnceProps> = ({
           {promptConfig.prompt_variables.length > 0 && (
             <div className='mt-4 h-[1px] bg-gray-100'></div>
           )}
-          <div className='w-full mt-4'>
+          <div className='mt-4 w-full'>
             <div className="flex items-center justify-between">
               <Button
                 onClick={onClear}
@@ -155,7 +155,7 @@ const RunOnce: FC<IRunOnceProps> = ({
                 variant="primary"
                 disabled={false}
               >
-                <PlayIcon className="shrink-0 w-4 h-4 mr-1" aria-hidden="true" />
+                <PlayIcon className="mr-1 h-4 w-4 shrink-0" aria-hidden="true" />
                 <span className='text-[13px]'>{t('share.generation.run')}</span>
               </Button>
             </div>
diff --git a/web/app/components/tools/add-tool-modal/category.tsx b/web/app/components/tools/add-tool-modal/category.tsx
index a18c30ad54..a626a3b11f 100644
--- a/web/app/components/tools/add-tool-modal/category.tsx
+++ b/web/app/components/tools/add-tool-modal/category.tsx
@@ -29,7 +29,7 @@ const Icon = ({ svgString, active }: { svgString: string; active: boolean }) =>
     if (svgRef.current && svgElement)
       svgRef.current.appendChild(svgElement)
   })
-  return <svg className={cn('w-4 h-4 text-gray-700', active && '!text-primary-600')} ref={svgRef} />
+  return <svg className={cn('h-4 w-4 text-gray-700', active && '!text-primary-600')} ref={svgRef} />
 }
 
 const Category = ({
@@ -50,14 +50,14 @@ const Category = ({
 
   return (
     <div className='mb-3'>
-      <div className='px-3 py-0.5 text-gray-500 text-xs leading-[18px] font-medium'>{t('tools.addToolModal.category').toLocaleUpperCase()}</div>
-      <div className={cn('mb-0.5 p-1 pl-3 flex items-center cursor-pointer text-gray-700 text-sm leading-5 rounded-lg hover:bg-white', value === '' && '!bg-white !text-primary-600 font-medium')} onClick={() => onSelect('')}>
-        <Apps02 className='shrink-0 w-4 h-4 mr-2' />
+      <div className='px-3 py-0.5 text-xs font-medium leading-[18px] text-gray-500'>{t('tools.addToolModal.category').toLocaleUpperCase()}</div>
+      <div className={cn('mb-0.5 flex cursor-pointer items-center rounded-lg p-1 pl-3 text-sm leading-5 text-gray-700 hover:bg-white', value === '' && '!text-primary-600 !bg-white font-medium')} onClick={() => onSelect('')}>
+        <Apps02 className='mr-2 h-4 w-4 shrink-0' />
         {t('tools.type.all')}
       </div>
       {labelList.map(label => (
-        <div key={label.name} title={label.label[language]} className={cn('mb-0.5 p-1 pl-3 flex items-center cursor-pointer text-gray-700 text-sm leading-5 rounded-lg hover:bg-white truncate overflow-hidden', value === label.name && '!bg-white !text-primary-600 font-medium')} onClick={() => onSelect(label.name)}>
-          <div className='shrink-0 w-4 h-4 mr-2'>
+        <div key={label.name} title={label.label[language]} className={cn('mb-0.5 flex cursor-pointer items-center overflow-hidden truncate rounded-lg p-1 pl-3 text-sm leading-5 text-gray-700 hover:bg-white', value === label.name && '!text-primary-600 !bg-white font-medium')} onClick={() => onSelect(label.name)}>
+          <div className='mr-2 h-4 w-4 shrink-0'>
             <Icon active={value === label.name} svgString={label.icon} />
           </div>
           {label.label[language]}
diff --git a/web/app/components/tools/add-tool-modal/empty.tsx b/web/app/components/tools/add-tool-modal/empty.tsx
index 794d2a585c..20c9aa9019 100644
--- a/web/app/components/tools/add-tool-modal/empty.tsx
+++ b/web/app/components/tools/add-tool-modal/empty.tsx
@@ -7,11 +7,11 @@ const Empty = () => {
 
   return (
     <div className='flex flex-col items-center'>
-      <div className="shrink-0 w-[163px] h-[149px] bg-cover bg-no-repeat bg-[url('~@/app/components/tools/add-tool-modal/empty.png')]"></div>
-      <div className='mb-1 text-[13px] font-medium text-text-primary leading-[18px]'>
+      <div className="h-[149px] w-[163px] shrink-0 bg-[url('~@/app/components/tools/add-tool-modal/empty.png')] bg-cover bg-no-repeat"></div>
+      <div className='text-text-primary mb-1 text-[13px] font-medium leading-[18px]'>
         {t(`tools.addToolModal.${searchParams.get('category') === 'workflow' ? 'emptyTitle' : 'emptyTitleCustom'}`)}
       </div>
-      <div className='text-[13px] text-text-tertiary leading-[18px]'>
+      <div className='text-text-tertiary text-[13px] leading-[18px]'>
         {t(`tools.addToolModal.${searchParams.get('category') === 'workflow' ? 'emptyTip' : 'emptyTipCustom'}`)}
       </div>
     </div>
diff --git a/web/app/components/tools/add-tool-modal/index.tsx b/web/app/components/tools/add-tool-modal/index.tsx
index f79201256f..d452cd7b47 100644
--- a/web/app/components/tools/add-tool-modal/index.tsx
+++ b/web/app/components/tools/add-tool-modal/index.tsx
@@ -171,20 +171,20 @@ const AddToolModal: FC<Props> = ({
         clickOutsideNotOpen
         onClose={onHide}
         footer={null}
-        panelClassname={cn('mt-16 mx-2 sm:mr-2 mb-3 !p-0 rounded-xl', 'mt-2 !w-[640px]', '!max-w-[640px]')}
+        panelClassname={cn('mx-2 mb-3 mt-16 rounded-xl !p-0 sm:mr-2', 'mt-2 !w-[640px]', '!max-w-[640px]')}
       >
         <div
-          className='w-full flex bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl'
+          className='flex w-full rounded-xl border-[0.5px] border-gray-200 bg-white shadow-xl'
           style={{
             height: 'calc(100vh - 16px)',
           }}
         >
-          <div className='relative shrink-0 w-[200px] pb-3 bg-gray-100 rounded-l-xl border-r-[0.5px] border-black/2 overflow-y-auto'>
-            <div className='sticky top-0 left-0 right-0'>
-              <div className='sticky top-0 left-0 right-0 px-5 py-3 text-md font-semibold text-gray-900'>{t('tools.addTool')}</div>
-              <div className='px-3 pt-2 pb-4'>
+          <div className='border-black/2 relative w-[200px] shrink-0 overflow-y-auto rounded-l-xl border-r-[0.5px] bg-gray-100 pb-3'>
+            <div className='sticky left-0 right-0 top-0'>
+              <div className='text-md sticky left-0 right-0 top-0 px-5 py-3 font-semibold text-gray-900'>{t('tools.addTool')}</div>
+              <div className='px-3 pb-4 pt-2'>
                 <Button variant='primary' className='w-[176px]' onClick={() => setIsShowEditCustomCollectionModal(true)}>
-                  <RiAddLine className='w-4 h-4 mr-1' />
+                  <RiAddLine className='mr-1 h-4 w-4' />
                   {t('tools.createCustomTool')}
                 </Button>
               </div>
@@ -194,8 +194,8 @@ const AddToolModal: FC<Props> = ({
               <Category value={currentCategory} onSelect={setCurrentCategory} />
             </div>
           </div>
-          <div className='relative grow bg-white rounded-r-xl overflow-y-auto'>
-            <div className='z-10 sticky top-0 left-0 right-0 p-2 flex items-center gap-1 bg-white'>
+          <div className='relative grow overflow-y-auto rounded-r-xl bg-white'>
+            <div className='sticky left-0 right-0 top-0 z-10 flex items-center gap-1 bg-white p-2'>
               <div className='grow'>
                 <Input
                   showLeftIcon
@@ -205,9 +205,9 @@ const AddToolModal: FC<Props> = ({
                   onClear={() => handleKeywordsChange('')}
                 />
               </div>
-              <div className='ml-2 mr-1 w-[1px] h-4 bg-gray-200'></div>
-              <div className='p-2 cursor-pointer' onClick={onHide}>
-                <RiCloseLine className='w-4 h-4 text-gray-500' />
+              <div className='ml-2 mr-1 h-4 w-[1px] bg-gray-200'></div>
+              <div className='cursor-pointer p-2' onClick={onHide}>
+                <RiCloseLine className='h-4 w-4 text-gray-500' />
               </div>
             </div>
             {listLoading && (
diff --git a/web/app/components/tools/add-tool-modal/tools.tsx b/web/app/components/tools/add-tool-modal/tools.tsx
index f6080a1c23..0def3baa9b 100644
--- a/web/app/components/tools/add-tool-modal/tools.tsx
+++ b/web/app/components/tools/add-tool-modal/tools.tsx
@@ -51,9 +51,9 @@ const Blocks = ({
         key={toolWithProvider.id}
         className='group mb-1 last-of-type:mb-0'
       >
-        <div className='flex items-center justify-between w-full pl-3 pr-1 h-[22px] text-xs font-medium text-gray-500'>
+        <div className='flex h-[22px] w-full items-center justify-between pl-3 pr-1 text-xs font-medium text-gray-500'>
           {toolWithProvider.label[language]}
-          <a className='hidden cursor-pointer items-center group-hover:flex' href={`/tools?category=${toolWithProvider.type}`} target='_blank'>{t('tools.addToolModal.manageInTools')}<ArrowUpRight className='ml-0.5 w-3 h-3' /></a>
+          <a className='hidden cursor-pointer items-center group-hover:flex' href={`/tools?category=${toolWithProvider.type}`} target='_blank'>{t('tools.addToolModal.manageInTools')}<ArrowUpRight className='ml-0.5 h-3 w-3' /></a>
         </div>
         {list.map((tool) => {
           const labelContent = (() => {
@@ -79,28 +79,28 @@ const Blocks = ({
                     toolIcon={toolWithProvider.icon}
                   />
                   <div className='mb-1 text-sm leading-5 text-gray-900'>{tool.label[language]}</div>
-                  <div className='text-xs text-gray-700 leading-[18px]'>{tool.description[language]}</div>
+                  <div className='text-xs leading-[18px] text-gray-700'>{tool.description[language]}</div>
                   {tool.labels?.length > 0 && (
-                    <div className='flex items-center shrink-0 mt-1'>
-                      <div className='relative w-full flex items-center gap-1 py-1 rounded-md text-gray-500' title={labelContent}>
-                        <Tag01 className='shrink-0 w-3 h-3 text-gray-500' />
-                        <div className='grow text-xs text-start leading-[18px] font-normal truncate'>{labelContent}</div>
+                    <div className='mt-1 flex shrink-0 items-center'>
+                      <div className='relative flex w-full items-center gap-1 rounded-md py-1 text-gray-500' title={labelContent}>
+                        <Tag01 className='h-3 w-3 shrink-0 text-gray-500' />
+                        <div className='grow truncate text-start text-xs font-normal leading-[18px]'>{labelContent}</div>
                       </div>
                     </div>
                   )}
                 </div>
               )}
             >
-              <div className='group/item flex items-center w-full pl-3 pr-1 h-8 rounded-lg hover:bg-gray-50 cursor-pointer'>
+              <div className='group/item flex h-8 w-full cursor-pointer items-center rounded-lg pl-3 pr-1 hover:bg-gray-50'>
                 <BlockIcon
                   className={cn('mr-2 shrink-0', needAuth && 'opacity-30')}
                   type={BlockEnum.Tool}
                   toolIcon={toolWithProvider.icon}
                 />
-                <div className={cn('grow text-sm text-gray-900 truncate', needAuth && 'opacity-30')}>{tool.label[language]}</div>
+                <div className={cn('grow truncate text-sm text-gray-900', needAuth && 'opacity-30')}>{tool.label[language]}</div>
                 {!needAuth && added && (
-                  <div className='flex items-center gap-1 rounded-[6px] border border-gray-100 px-2 py-[3px] bg-white text-gray-300 text-xs font-medium leading-[18px]'>
-                    <Check className='w-3 h-3' />
+                  <div className='flex items-center gap-1 rounded-[6px] border border-gray-100 bg-white px-2 py-[3px] text-xs font-medium leading-[18px] text-gray-300'>
+                    <Check className='h-3 w-3' />
                     {t('tools.addToolModal.added').toLocaleUpperCase()}
                   </div>
                 )}
@@ -111,7 +111,7 @@ const Blocks = ({
                     className={cn('hidden shrink-0 items-center group-hover/item:flex')}
                     onClick={() => onSelect(toolWithProvider, tool)}
                   >
-                    <RiAddLine className='w-3 h-3' />
+                    <RiAddLine className='h-3 w-3' />
                     {t('tools.addToolModal.add').toLocaleUpperCase()}
                   </Button>
                 )}
@@ -132,9 +132,9 @@ const Blocks = ({
   }, [addable, language, t, labelList, addedTools, onAuthSetup, onSelect])
 
   return (
-    <div className='p-1 pb-6 max-w-[440px]'>
+    <div className='max-w-[440px] p-1 pb-6'>
       {!tools.length && !showWorkflowEmpty && (
-        <div className='flex items-center px-3 h-[22px] text-xs font-medium text-gray-500'>{t('workflow.tabs.noResult')}</div>
+        <div className='flex h-[22px] items-center px-3 text-xs font-medium text-gray-500'>{t('workflow.tabs.noResult')}</div>
       )}
       {!tools.length && showWorkflowEmpty && (
         <div className='pt-[280px]'>
diff --git a/web/app/components/tools/add-tool-modal/type.tsx b/web/app/components/tools/add-tool-modal/type.tsx
index 370cef80fb..2b353da3b9 100644
--- a/web/app/components/tools/add-tool-modal/type.tsx
+++ b/web/app/components/tools/add-tool-modal/type.tsx
@@ -16,16 +16,16 @@ const Types = ({
 
   return (
     <div className='mb-3'>
-      <div className={cn('mb-0.5 p-1 pl-3 flex items-center cursor-pointer text-sm leading-5 rounded-lg hover:bg-white', value === 'builtin' && '!bg-white font-medium')} onClick={() => onSelect('builtin')}>
-        <div className="shrink-0 w-4 h-4 mr-2 bg-cover bg-no-repeat bg-[url('~@/app/components/tools/add-tool-modal/D.png')]" />
+      <div className={cn('mb-0.5 flex cursor-pointer items-center rounded-lg p-1 pl-3 text-sm leading-5 hover:bg-white', value === 'builtin' && '!bg-white font-medium')} onClick={() => onSelect('builtin')}>
+        <div className="mr-2 h-4 w-4 shrink-0 bg-[url('~@/app/components/tools/add-tool-modal/D.png')] bg-cover bg-no-repeat" />
         <span className={cn('text-gray-700', value === 'builtin' && '!text-primary-600')}>{t('tools.type.builtIn')}</span>
       </div>
-      <div className={cn('mb-0.5 p-1 pl-3 flex items-center cursor-pointer text-gray-700 text-sm leading-5 rounded-lg hover:bg-white', value === 'api' && '!bg-white !text-primary-600 font-medium')} onClick={() => onSelect('api')}>
-        <FileCode className='shrink-0 w-4 h-4 mr-2' />
+      <div className={cn('mb-0.5 flex cursor-pointer items-center rounded-lg p-1 pl-3 text-sm leading-5 text-gray-700 hover:bg-white', value === 'api' && '!text-primary-600 !bg-white font-medium')} onClick={() => onSelect('api')}>
+        <FileCode className='mr-2 h-4 w-4 shrink-0' />
         {t('tools.type.custom')}
       </div>
-      <div className={cn('mb-0.5 p-1 pl-3 flex items-center cursor-pointer text-gray-700 text-sm leading-5 rounded-lg hover:bg-white', value === 'workflow' && '!bg-white !text-primary-600 font-medium')} onClick={() => onSelect('workflow')}>
-        <Exchange02 className='shrink-0 w-4 h-4 mr-2' />
+      <div className={cn('mb-0.5 flex cursor-pointer items-center rounded-lg p-1 pl-3 text-sm leading-5 text-gray-700 hover:bg-white', value === 'workflow' && '!text-primary-600 !bg-white font-medium')} onClick={() => onSelect('workflow')}>
+        <Exchange02 className='mr-2 h-4 w-4 shrink-0' />
         {t('tools.type.workflow')}
       </div>
     </div>
diff --git a/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
index 4b5b0560f9..6eb6076003 100644
--- a/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
@@ -28,7 +28,7 @@ type ItemProps = {
 const SelectItem: FC<ItemProps> = ({ text, value, isChecked, onClick }) => {
   return (
     <div
-      className={cn(isChecked ? 'border-[2px] border-util-colors-indigo-indigo-600 shadow-sm bg-components-panel-on-panel-item-bg' : 'border border-components-card-border', 'mb-2 flex items-center h-9 pl-3 w-[150px] rounded-xl bg-components-panel-on-panel-item-bg hover:bg-components-panel-on-panel-item-bg-hover cursor-pointer space-x-2')}
+      className={cn(isChecked ? 'border-util-colors-indigo-indigo-600 bg-components-panel-on-panel-item-bg border-[2px] shadow-sm' : 'border-components-card-border border', 'bg-components-panel-on-panel-item-bg hover:bg-components-panel-on-panel-item-bg-hover mb-2 flex h-9 w-[150px] cursor-pointer items-center space-x-2 rounded-xl pl-3')}
       onClick={() => onClick(value)}
     >
       <Radio isChecked={isChecked} />
@@ -57,10 +57,10 @@ const ConfigCredential: FC<Props> = ({
       height={'fit-content'}
       headerClassName='!border-b-divider-regular'
       body={
-        <div className='pt-2 px-6'>
+        <div className='px-6 pt-2'>
           <div className='space-y-4'>
             <div>
-              <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.authMethod.type')}</div>
+              <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.authMethod.type')}</div>
               <div className='flex space-x-3'>
                 <SelectItem
                   text={t('tools.createTool.authMethod.types.none')}
@@ -85,7 +85,7 @@ const ConfigCredential: FC<Props> = ({
             {tempCredential.auth_type === AuthType.apiKey && (
               <>
                 <div>
-                  <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.authHeaderPrefix.title')}</div>
+                  <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.authHeaderPrefix.title')}</div>
                   <div className='flex space-x-3'>
                     <SelectItem
                       text={t('tools.createTool.authHeaderPrefix.types.basic')}
@@ -108,11 +108,11 @@ const ConfigCredential: FC<Props> = ({
                   </div>
                 </div>
                 <div>
-                  <div className='flex items-center py-2 system-sm-medium text-text-primary'>
+                  <div className='system-sm-medium text-text-primary flex items-center py-2'>
                     {t('tools.createTool.authMethod.key')}
                     <Tooltip
                       popupContent={
-                        <div className='w-[261px] text-text-tertiary'>
+                        <div className='text-text-tertiary w-[261px]'>
                           {t('tools.createTool.authMethod.keyTooltip')}
                         </div>
                       }
@@ -126,7 +126,7 @@ const ConfigCredential: FC<Props> = ({
                   />
                 </div>
                 <div>
-                  <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.authMethod.value')}</div>
+                  <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.authMethod.value')}</div>
                   <Input
                     value={tempCredential.api_key_value}
                     onChange={e => setTempCredential({ ...tempCredential, api_key_value: e.target.value })}
@@ -137,7 +137,7 @@ const ConfigCredential: FC<Props> = ({
 
           </div>
 
-          <div className='mt-4 shrink-0 flex justify-end space-x-2 py-4'>
+          <div className='mt-4 flex shrink-0 justify-end space-x-2 py-4'>
             <Button onClick={onHide}>{t('common.operation.cancel')}</Button>
             <Button variant='primary' onClick={() => {
               onChange(tempCredential)
diff --git a/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx b/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
index a43440bda4..b2013a72e1 100644
--- a/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
@@ -56,18 +56,18 @@ const GetSchema: FC<Props> = ({
   }, showExamplesRef)
 
   return (
-    <div className='flex space-x-1 justify-end relative w-[224px]'>
+    <div className='relative flex w-[224px] justify-end space-x-1'>
       <div ref={importURLRef}>
         <Button
           size='small'
           className='space-x-1 '
           onClick={() => { setShowImportFromUrl(!showImportFromUrl) }}
         >
-          <RiAddLine className='w-3 h-3' />
+          <RiAddLine className='h-3 w-3' />
           <div className='system-xs-medium text-text-secondary'>{t('tools.createTool.importFromUrl')}</div>
         </Button>
         {showImportFromUrl && (
-          <div className=' absolute left-[-35px] top-[26px] p-2 rounded-lg border border-components-panel-border bg-components-panel-bg shadow-lg'>
+          <div className=' border-components-panel-border bg-components-panel-bg absolute left-[-35px] top-[26px] rounded-lg border p-2 shadow-lg'>
             <div className='relative'>
               <Input
                 type='text'
@@ -77,7 +77,7 @@ const GetSchema: FC<Props> = ({
                 onChange={e => setImportUrl(e.target.value)}
               />
               <Button
-                className='absolute top-1 right-1'
+                className='absolute right-1 top-1'
                 size='small'
                 variant='primary'
                 disabled={!importUrl}
@@ -97,10 +97,10 @@ const GetSchema: FC<Props> = ({
           onClick={() => { setShowExamples(!showExamples) }}
         >
           <div className='system-xs-medium text-text-secondary'>{t('tools.createTool.examples')}</div>
-          <RiArrowDownSLine className='w-3 h-3' />
+          <RiArrowDownSLine className='h-3 w-3' />
         </Button>
         {showExamples && (
-          <div className='absolute top-7 right-0 p-1 rounded-lg bg-components-panel-bg shadow-sm'>
+          <div className='bg-components-panel-bg absolute right-0 top-7 rounded-lg p-1 shadow-sm'>
             {examples.map(item => (
               <div
                 key={item.key}
@@ -108,7 +108,7 @@ const GetSchema: FC<Props> = ({
                   onChange(item.content)
                   setShowExamples(false)
                 }}
-                className='px-3 py-1.5 rounded-lg hover:bg-components-panel-on-panel-item-bg-hover leading-5 system-sm-regular text-text-secondary cursor-pointer whitespace-nowrap'
+                className='hover:bg-components-panel-on-panel-item-bg-hover system-sm-regular text-text-secondary cursor-pointer whitespace-nowrap rounded-lg px-3 py-1.5 leading-5'
               >
                 {t(`tools.createTool.exampleOptions.${item.key}`)}
               </div>
diff --git a/web/app/components/tools/edit-custom-collection-modal/index.tsx b/web/app/components/tools/edit-custom-collection-modal/index.tsx
index 786d3a4625..9709a1fd38 100644
--- a/web/app/components/tools/edit-custom-collection-modal/index.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/index.tsx
@@ -191,10 +191,10 @@ const EditCustomCollectionModal: FC<Props> = ({
         height='calc(100vh - 16px)'
         headerClassName='!border-b-divider-regular'
         body={
-          <div className='flex flex-col h-full'>
-            <div className='grow h-0 overflow-y-auto px-6 py-3 space-y-4'>
+          <div className='flex h-full flex-col'>
+            <div className='h-0 grow space-y-4 overflow-y-auto px-6 py-3'>
               <div>
-                <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.name')} <span className='ml-1 text-red-500'>*</span></div>
+                <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.name')} <span className='ml-1 text-red-500'>*</span></div>
                 <div className='flex items-center justify-between gap-3'>
                   <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.content} background={emoji.background} />
                   <Input
@@ -212,17 +212,17 @@ const EditCustomCollectionModal: FC<Props> = ({
 
               {/* Schema */}
               <div className='select-none'>
-                <div className='flex justify-between items-center'>
+                <div className='flex items-center justify-between'>
                   <div className='flex items-center'>
-                    <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.schema')}<span className='ml-1 text-red-500'>*</span></div>
-                    <div className='mx-2 w-px h-3 bg-divider-regular'></div>
+                    <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.schema')}<span className='ml-1 text-red-500'>*</span></div>
+                    <div className='bg-divider-regular mx-2 h-3 w-px'></div>
                     <a
                       href="https://swagger.io/specification/"
                       target='_blank' rel='noopener noreferrer'
-                      className='flex items-center h-[18px] space-x-1  text-text-accent'
+                      className='text-text-accent flex h-[18px] items-center  space-x-1'
                     >
                       <div className='text-xs font-normal'>{t('tools.createTool.viewSchemaSpec')}</div>
-                      <LinkExternal02 className='w-3 h-3' />
+                      <LinkExternal02 className='h-3 w-3' />
                     </a>
                   </div>
                   <GetSchema onChange={setSchema} />
@@ -238,26 +238,26 @@ const EditCustomCollectionModal: FC<Props> = ({
 
               {/* Available Tools  */}
               <div>
-                <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.availableTools.title')}</div>
-                <div className='rounded-lg border border-divider-regular w-full overflow-x-auto'>
-                  <table className='w-full system-xs-regular text-text-secondary'>
+                <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.availableTools.title')}</div>
+                <div className='border-divider-regular w-full overflow-x-auto rounded-lg border'>
+                  <table className='system-xs-regular text-text-secondary w-full'>
                     <thead className='text-text-tertiary uppercase'>
                       <tr className={cn(paramsSchemas.length > 0 && 'border-b', 'border-divider-regular')}>
                         <th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.name')}</th>
-                        <th className="p-2 pl-3 font-medium w-[236px]">{t('tools.createTool.availableTools.description')}</th>
+                        <th className="w-[236px] p-2 pl-3 font-medium">{t('tools.createTool.availableTools.description')}</th>
                         <th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.method')}</th>
                         <th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.path')}</th>
-                        <th className="p-2 pl-3 font-medium w-[54px]">{t('tools.createTool.availableTools.action')}</th>
+                        <th className="w-[54px] p-2 pl-3 font-medium">{t('tools.createTool.availableTools.action')}</th>
                       </tr>
                     </thead>
                     <tbody>
                       {paramsSchemas.map((item, index) => (
-                        <tr key={index} className='border-b last:border-0 border-divider-regular'>
+                        <tr key={index} className='border-divider-regular border-b last:border-0'>
                           <td className="p-2 pl-3">{item.operation_id}</td>
-                          <td className="p-2 pl-3 w-[236px]">{item.summary}</td>
+                          <td className="w-[236px] p-2 pl-3">{item.summary}</td>
                           <td className="p-2 pl-3">{item.method}</td>
                           <td className="p-2 pl-3">{getPath(item.server_url)}</td>
-                          <td className="p-2 pl-3 w-[62px]">
+                          <td className="w-[62px] p-2 pl-3">
                             <Button
                               size='small'
                               onClick={() => {
@@ -277,22 +277,22 @@ const EditCustomCollectionModal: FC<Props> = ({
 
               {/* Authorization method */}
               <div>
-                <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.authMethod.title')}</div>
-                <div className='flex items-center h-9 justify-between px-2.5 bg-components-input-bg-normal rounded-lg cursor-pointer' onClick={() => setCredentialsModalShow(true)}>
+                <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.authMethod.title')}</div>
+                <div className='bg-components-input-bg-normal flex h-9 cursor-pointer items-center justify-between rounded-lg px-2.5' onClick={() => setCredentialsModalShow(true)}>
                   <div className='system-xs-regular text-text-primary'>{t(`tools.createTool.authMethod.types.${credential.auth_type}`)}</div>
-                  <RiSettings2Line className='w-4 h-4 text-text-secondary' />
+                  <RiSettings2Line className='text-text-secondary h-4 w-4' />
                 </div>
               </div>
 
               {/* Labels */}
               <div>
-                <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.toolInput.label')}</div>
+                <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.toolInput.label')}</div>
                 <LabelSelector value={labels} onChange={handleLabelSelect} />
               </div>
 
               {/* Privacy Policy */}
               <div>
-                <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.privacyPolicy')}</div>
+                <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.privacyPolicy')}</div>
                 <Input
                   value={customCollection.privacy_policy}
                   onChange={(e) => {
@@ -305,7 +305,7 @@ const EditCustomCollectionModal: FC<Props> = ({
               </div>
 
               <div>
-                <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.customDisclaimer')}</div>
+                <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.customDisclaimer')}</div>
                 <Input
                   value={customCollection.custom_disclaimer}
                   onChange={(e) => {
@@ -318,7 +318,7 @@ const EditCustomCollectionModal: FC<Props> = ({
               </div>
 
             </div>
-            <div className={cn(isEdit ? 'justify-between' : 'justify-end', 'mt-2 shrink-0 flex py-4 px-6 rounded-b-[10px] bg-background-section-burn border-t border-divider-regular')} >
+            <div className={cn(isEdit ? 'justify-between' : 'justify-end', 'bg-background-section-burn border-divider-regular mt-2 flex shrink-0 rounded-b-[10px] border-t px-6 py-4')} >
               {
                 isEdit && (
                   <Button variant='warning' onClick={onRemove}>{t('common.operation.delete')}</Button>
diff --git a/web/app/components/tools/edit-custom-collection-modal/modal.tsx b/web/app/components/tools/edit-custom-collection-modal/modal.tsx
index 0b4447850c..025b57c98b 100644
--- a/web/app/components/tools/edit-custom-collection-modal/modal.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/modal.tsx
@@ -183,15 +183,15 @@ const EditCustomCollectionModal: FC<Props> = ({
         isShow
         onClose={onHide}
         closable
-        className='!p-0 !max-w-[630px] !h-[calc(100vh-16px)]'
+        className='!h-[calc(100vh-16px)] !max-w-[630px] !p-0'
       >
-        <div className='flex flex-col h-full'>
-          <div className='ml-6 mt-6 text-base font-semibold text-text-primary'>
+        <div className='flex h-full flex-col'>
+          <div className='text-text-primary ml-6 mt-6 text-base font-semibold'>
             {t('tools.createTool.title')}
           </div>
-          <div className='grow h-0 overflow-y-auto px-6 py-3 space-y-4'>
+          <div className='h-0 grow space-y-4 overflow-y-auto px-6 py-3'>
             <div>
-              <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.name')} <span className='ml-1 text-red-500'>*</span></div>
+              <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.name')} <span className='ml-1 text-red-500'>*</span></div>
               <div className='flex items-center justify-between gap-3'>
                 <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.content} background={emoji.background} />
                 <Input
@@ -209,17 +209,17 @@ const EditCustomCollectionModal: FC<Props> = ({
 
             {/* Schema */}
             <div className='select-none'>
-              <div className='flex justify-between items-center'>
+              <div className='flex items-center justify-between'>
                 <div className='flex items-center'>
-                  <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.schema')}<span className='ml-1 text-red-500'>*</span></div>
-                  <div className='mx-2 w-px h-3 bg-divider-regular'></div>
+                  <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.schema')}<span className='ml-1 text-red-500'>*</span></div>
+                  <div className='bg-divider-regular mx-2 h-3 w-px'></div>
                   <a
                     href="https://swagger.io/specification/"
                     target='_blank' rel='noopener noreferrer'
-                    className='flex items-center h-[18px] space-x-1  text-text-accent'
+                    className='text-text-accent flex h-[18px] items-center  space-x-1'
                   >
                     <div className='text-xs font-normal'>{t('tools.createTool.viewSchemaSpec')}</div>
-                    <LinkExternal02 className='w-3 h-3' />
+                    <LinkExternal02 className='h-3 w-3' />
                   </a>
                 </div>
                 <GetSchema onChange={setSchema} />
@@ -235,26 +235,26 @@ const EditCustomCollectionModal: FC<Props> = ({
 
             {/* Available Tools  */}
             <div>
-              <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.availableTools.title')}</div>
-              <div className='rounded-lg border border-divider-regular w-full overflow-x-auto'>
-                <table className='w-full system-xs-regular text-text-secondary'>
+              <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.availableTools.title')}</div>
+              <div className='border-divider-regular w-full overflow-x-auto rounded-lg border'>
+                <table className='system-xs-regular text-text-secondary w-full'>
                   <thead className='text-text-tertiary uppercase'>
                     <tr className={cn(paramsSchemas.length > 0 && 'border-b', 'border-divider-regular')}>
                       <th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.name')}</th>
-                      <th className="p-2 pl-3 font-medium w-[236px]">{t('tools.createTool.availableTools.description')}</th>
+                      <th className="w-[236px] p-2 pl-3 font-medium">{t('tools.createTool.availableTools.description')}</th>
                       <th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.method')}</th>
                       <th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.path')}</th>
-                      <th className="p-2 pl-3 font-medium w-[54px]">{t('tools.createTool.availableTools.action')}</th>
+                      <th className="w-[54px] p-2 pl-3 font-medium">{t('tools.createTool.availableTools.action')}</th>
                     </tr>
                   </thead>
                   <tbody>
                     {paramsSchemas.map((item, index) => (
-                      <tr key={index} className='border-b last:border-0 border-divider-regular'>
+                      <tr key={index} className='border-divider-regular border-b last:border-0'>
                         <td className="p-2 pl-3">{item.operation_id}</td>
-                        <td className="p-2 pl-3 w-[236px]">{item.summary}</td>
+                        <td className="w-[236px] p-2 pl-3">{item.summary}</td>
                         <td className="p-2 pl-3">{item.method}</td>
                         <td className="p-2 pl-3">{getPath(item.server_url)}</td>
-                        <td className="p-2 pl-3 w-[62px]">
+                        <td className="w-[62px] p-2 pl-3">
                           <Button
                             size='small'
                             onClick={() => {
@@ -274,22 +274,22 @@ const EditCustomCollectionModal: FC<Props> = ({
 
             {/* Authorization method */}
             <div>
-              <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.authMethod.title')}</div>
-              <div className='flex items-center h-9 justify-between px-2.5 bg-components-input-bg-normal rounded-lg cursor-pointer' onClick={() => setCredentialsModalShow(true)}>
+              <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.authMethod.title')}</div>
+              <div className='bg-components-input-bg-normal flex h-9 cursor-pointer items-center justify-between rounded-lg px-2.5' onClick={() => setCredentialsModalShow(true)}>
                 <div className='system-xs-regular text-text-primary'>{t(`tools.createTool.authMethod.types.${credential.auth_type}`)}</div>
-                <Settings01 className='w-4 h-4 text-text-secondary' />
+                <Settings01 className='text-text-secondary h-4 w-4' />
               </div>
             </div>
 
             {/* Labels */}
             <div>
-              <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.toolInput.label')}</div>
+              <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.toolInput.label')}</div>
               <LabelSelector value={labels} onChange={handleLabelSelect} />
             </div>
 
             {/* Privacy Policy */}
             <div>
-              <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.privacyPolicy')}</div>
+              <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.privacyPolicy')}</div>
               <Input
                 value={customCollection.privacy_policy}
                 onChange={(e) => {
@@ -302,7 +302,7 @@ const EditCustomCollectionModal: FC<Props> = ({
             </div>
 
             <div>
-              <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.customDisclaimer')}</div>
+              <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.customDisclaimer')}</div>
               <Input
                 value={customCollection.custom_disclaimer}
                 onChange={(e) => {
@@ -315,7 +315,7 @@ const EditCustomCollectionModal: FC<Props> = ({
             </div>
 
           </div>
-          <div className={cn(isEdit ? 'justify-between' : 'justify-end', 'mt-2 shrink-0 flex py-4 px-6 rounded-b-[10px] bg-background-section-burn border-t border-divider-regular')} >
+          <div className={cn(isEdit ? 'justify-between' : 'justify-end', 'bg-background-section-burn border-divider-regular mt-2 flex shrink-0 rounded-b-[10px] border-t px-6 py-4')} >
             {
               isEdit && (
                 <Button variant='warning' onClick={onRemove}>{t('common.operation.delete')}</Button>
diff --git a/web/app/components/tools/edit-custom-collection-modal/test-api.tsx b/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
index 3172110bf6..e3399c3920 100644
--- a/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
@@ -66,29 +66,29 @@ const TestApi: FC<Props> = ({
         height='calc(100vh - 16px)'
         headerClassName='!border-b-divider-regular'
         body={
-          <div className='pt-2 px-6 overflow-y-auto'>
+          <div className='overflow-y-auto px-6 pt-2'>
             <div className='space-y-4'>
               <div>
-                <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.authMethod.title')}</div>
-                <div className='flex items-center h-9 justify-between px-2.5 bg-components-input-bg-normal rounded-lg cursor-pointer' onClick={() => setCredentialsModalShow(true)}>
+                <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.authMethod.title')}</div>
+                <div className='bg-components-input-bg-normal flex h-9 cursor-pointer items-center justify-between rounded-lg px-2.5' onClick={() => setCredentialsModalShow(true)}>
                   <div className='system-xs-regular text-text-primary'>{t(`tools.createTool.authMethod.types.${tempCredential.auth_type}`)}</div>
-                  <RiSettings2Line className='w-4 h-4 text-text-secondary' />
+                  <RiSettings2Line className='text-text-secondary h-4 w-4' />
                 </div>
               </div>
 
               <div>
-                <div className='py-2 system-sm-medium text-text-primary'>{t('tools.test.parametersValue')}</div>
-                <div className='rounded-lg border border-divider-regular'>
-                  <table className='w-full system-xs-regular text-text-secondary font-normal'>
+                <div className='system-sm-medium text-text-primary py-2'>{t('tools.test.parametersValue')}</div>
+                <div className='border-divider-regular rounded-lg border'>
+                  <table className='system-xs-regular text-text-secondary w-full font-normal'>
                     <thead className='text-text-tertiary uppercase'>
-                      <tr className='border-b border-divider-regular'>
+                      <tr className='border-divider-regular border-b'>
                         <th className="p-2 pl-3 font-medium">{t('tools.test.parameters')}</th>
                         <th className="p-2 pl-3 font-medium">{t('tools.test.value')}</th>
                       </tr>
                     </thead>
                     <tbody>
                       {parameters.map((item, index) => (
-                        <tr key={index} className='border-b last:border-0 border-divider-regular'>
+                        <tr key={index} className='border-divider-regular border-b last:border-0'>
                           <td className="py-2 pl-3 pr-2.5">
                             {item.label[language]}
                           </td>
@@ -97,7 +97,7 @@ const TestApi: FC<Props> = ({
                               value={parametersValue[item.name] || ''}
                               onChange={e => setParametersValue({ ...parametersValue, [item.name]: e.target.value })}
                               type='text'
-                              className='!bg-transparent !border-transparent !hover:border-transparent !hover:bg-transparent !focus:border-transparent !focus:bg-transparent' />
+                              className='!hover:border-transparent !hover:bg-transparent !focus:border-transparent !focus:bg-transparent !border-transparent !bg-transparent' />
                           </td>
                         </tr>
                       ))}
@@ -107,13 +107,13 @@ const TestApi: FC<Props> = ({
               </div>
 
             </div>
-            <Button variant='primary' className=' mt-4 w-full h-10' onClick={handleTest}>{t('tools.test.title')}</Button>
+            <Button variant='primary' className=' mt-4 h-10 w-full' onClick={handleTest}>{t('tools.test.title')}</Button>
             <div className='mt-6'>
               <div className='flex items-center space-x-3'>
                 <div className='system-xs-semibold text-text-tertiary'>{t('tools.test.testResult')}</div>
-                <div className='grow w-0 h-px bg-[rgb(243, 244, 246)]'></div>
+                <div className='bg-[rgb(243, 244, 246)] h-px w-0 grow'></div>
               </div>
-              <div className='mt-2 px-3 py-2 h-[200px] overflow-y-auto overflow-x-hidden rounded-lg bg-components-input-bg-normal system-xs-regular text-text-secondary'>
+              <div className='bg-components-input-bg-normal system-xs-regular text-text-secondary mt-2 h-[200px] overflow-y-auto overflow-x-hidden rounded-lg px-3 py-2'>
                 {result || <span className='text-text-quaternary'>{t('tools.test.testResultPlaceholder')}</span>}
               </div>
             </div>
diff --git a/web/app/components/tools/labels/filter.tsx b/web/app/components/tools/labels/filter.tsx
index 87e65b5b4e..0280bd1e05 100644
--- a/web/app/components/tools/labels/filter.tsx
+++ b/web/app/components/tools/labels/filter.tsx
@@ -67,37 +67,37 @@ const LabelFilter: FC<LabelFilterProps> = ({
           className='block'
         >
           <div className={cn(
-            'flex items-center gap-1 px-2 h-8 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal cursor-pointer hover:bg-components-input-bg-hover',
+            'bg-components-input-bg-normal hover:bg-components-input-bg-hover flex h-8 cursor-pointer items-center gap-1 rounded-lg border-[0.5px] border-transparent px-2',
             !open && !!value.length && 'shadow-xs',
             open && !!value.length && 'shadow-xs',
           )}>
             <div className='p-[1px]'>
-              <Tag01 className='h-3.5 w-3.5 text-text-tertiary' />
+              <Tag01 className='text-text-tertiary h-3.5 w-3.5' />
             </div>
-            <div className='text-[13px] leading-[18px] text-text-tertiary'>
+            <div className='text-text-tertiary text-[13px] leading-[18px]'>
               {!value.length && t('common.tag.placeholder')}
               {!!value.length && currentLabel?.label}
             </div>
             {value.length > 1 && (
-              <div className='text-xs font-medium leading-[18px] text-text-tertiary'>{`+${value.length - 1}`}</div>
+              <div className='text-text-tertiary text-xs font-medium leading-[18px]'>{`+${value.length - 1}`}</div>
             )}
             {!value.length && (
               <div className='p-[1px]'>
-                <RiArrowDownSLine className='h-3.5 w-3.5 text-text-tertiary' />
+                <RiArrowDownSLine className='text-text-tertiary h-3.5 w-3.5' />
               </div>
             )}
             {!!value.length && (
-              <div className='p-[1px] cursor-pointer group/clear' onClick={(e) => {
+              <div className='group/clear cursor-pointer p-[1px]' onClick={(e) => {
                 e.stopPropagation()
                 onChange([])
               }}>
-                <XCircle className='h-3.5 w-3.5 text-text-tertiary group-hover/clear:text-text-secondary' />
+                <XCircle className='text-text-tertiary group-hover/clear:text-text-secondary h-3.5 w-3.5' />
               </div>
             )}
           </div>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1002]'>
-          <div className='relative w-[240px] bg-components-panel-bg-blur rounded-lg border-[0.5px] backdrop-blur-[5px] border-components-panel-border  shadow-lg'>
+          <div className='bg-components-panel-bg-blur border-components-panel-border relative w-[240px] rounded-lg border-[0.5px] shadow-lg  backdrop-blur-[5px]'>
             <div className='p-2'>
               <Input
                 showLeftIcon
@@ -111,16 +111,16 @@ const LabelFilter: FC<LabelFilterProps> = ({
               {filteredLabelList.map(label => (
                 <div
                   key={label.name}
-                  className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-state-base-hover'
+                  className='hover:bg-state-base-hover flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pl-3 pr-2'
                   onClick={() => selectLabel(label)}
                 >
-                  <div title={label.label} className='grow text-sm text-text-secondary leading-5 truncate'>{label.label}</div>
-                  {value.includes(label.name) && <Check className='shrink-0 w-4 h-4 text-text-accent' />}
+                  <div title={label.label} className='text-text-secondary grow truncate text-sm leading-5'>{label.label}</div>
+                  {value.includes(label.name) && <Check className='text-text-accent h-4 w-4 shrink-0' />}
                 </div>
               ))}
               {!filteredLabelList.length && (
-                <div className='p-3 flex flex-col items-center gap-1'>
-                  <Tag03 className='h-6 w-6 text-text-quaternary' />
+                <div className='flex flex-col items-center gap-1 p-3'>
+                  <Tag03 className='text-text-quaternary h-6 w-6' />
                   <div className='text-text-tertiary text-xs leading-[14px]'>{t('common.tag.noTag')}</div>
                 </div>
               )}
diff --git a/web/app/components/tools/labels/selector.tsx b/web/app/components/tools/labels/selector.tsx
index 26cfc3ad9b..0b324192bf 100644
--- a/web/app/components/tools/labels/selector.tsx
+++ b/web/app/components/tools/labels/selector.tsx
@@ -66,21 +66,21 @@ const LabelSelector: FC<LabelSelectorProps> = ({
           className='block'
         >
           <div className={cn(
-            'flex items-center gap-1 px-3 h-10 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal cursor-pointer hover:bg-components-input-bg-hover',
+            'bg-components-input-bg-normal hover:bg-components-input-bg-hover flex h-10 cursor-pointer items-center gap-1 rounded-lg border-[0.5px] border-transparent px-3',
             open && '!hover:bg-components-input-bg-hover hover:bg-components-input-bg-hover',
           )}>
-            <div title={value.length > 0 ? selectedLabels : ''} className={cn('grow text-[13px] leading-[18px] text-text-secondary truncate', !value.length && '!text-text-quaternary')}>
+            <div title={value.length > 0 ? selectedLabels : ''} className={cn('text-text-secondary grow truncate text-[13px] leading-[18px]', !value.length && '!text-text-quaternary')}>
               {!value.length && t('tools.createTool.toolInput.labelPlaceholder')}
               {!!value.length && selectedLabels}
             </div>
-            <div className='shrink-0 ml-1 text-text-secondary opacity-60'>
+            <div className='text-text-secondary ml-1 shrink-0 opacity-60'>
               <RiArrowDownSLine className='h-4 w-4' />
             </div>
           </div>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1040]'>
-          <div className='relative w-[591px] bg-components-panel-bg-blur backdrop-blur-[5px] rounded-lg border-[0.5px] border-components-panel-border  shadow-lg'>
-            <div className='p-2 border-b-[0.5px] border-divider-regular'>
+          <div className='bg-components-panel-bg-blur border-components-panel-border relative w-[591px] rounded-lg border-[0.5px] shadow-lg  backdrop-blur-[5px]'>
+            <div className='border-divider-regular border-b-[0.5px] p-2'>
               <Input
                 showLeftIcon
                 showClearIcon
@@ -89,11 +89,11 @@ const LabelSelector: FC<LabelSelectorProps> = ({
                 onClear={() => handleKeywordsChange('')}
               />
             </div>
-            <div className='p-1 max-h-[264px] overflow-y-auto'>
+            <div className='max-h-[264px] overflow-y-auto p-1'>
               {filteredLabelList.map(label => (
                 <div
                   key={label.name}
-                  className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover'
+                  className='hover:bg-components-panel-on-panel-item-bg-hover flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pl-3 pr-2'
                   onClick={() => selectLabel(label)}
                 >
                   <Checkbox
@@ -101,12 +101,12 @@ const LabelSelector: FC<LabelSelectorProps> = ({
                     checked={value.includes(label.name)}
                     onCheck={() => { }}
                   />
-                  <div title={label.label} className='grow text-sm text-text-secondary leading-5 truncate'>{label.label}</div>
+                  <div title={label.label} className='text-text-secondary grow truncate text-sm leading-5'>{label.label}</div>
                 </div>
               ))}
               {!filteredLabelList.length && (
-                <div className='p-3 flex flex-col items-center gap-1'>
-                  <Tag03 className='h-6 w-6 text-text-quaternary' />
+                <div className='flex flex-col items-center gap-1 p-3'>
+                  <Tag03 className='text-text-quaternary h-6 w-6' />
                   <div className='text-text-tertiary text-xs leading-[14px]'>{t('common.tag.noTag')}</div>
                 </div>
               )}
diff --git a/web/app/components/tools/marketplace/index.tsx b/web/app/components/tools/marketplace/index.tsx
index 2b560b8a13..23dcc07ade 100644
--- a/web/app/components/tools/marketplace/index.tsx
+++ b/web/app/components/tools/marketplace/index.tsx
@@ -50,51 +50,51 @@ const Marketplace = ({
   return (
     <div
       ref={containerRef}
-      className='grow flex flex-col shrink-0 sticky bottom-[-442px] h-[530px] overflow-y-auto px-12 py-2 pt-0 bg-background-default-subtle'
+      className='bg-background-default-subtle sticky bottom-[-442px] flex h-[530px] shrink-0 grow flex-col overflow-y-auto px-12 py-2 pt-0'
     >
       <RiArrowUpDoubleLine
-        className='absolute top-2 left-1/2 -translate-x-1/2 w-4 h-4 text-text-quaternary cursor-pointer'
+        className='text-text-quaternary absolute left-1/2 top-2 h-4 w-4 -translate-x-1/2 cursor-pointer'
         onClick={() => onMarketplaceScroll()}
       />
-      <div className='sticky top-0 pt-5 pb-3 bg-background-default-subtle z-10'>
+      <div className='bg-background-default-subtle sticky top-0 z-10 pb-3 pt-5'>
         <div className='title-2xl-semi-bold bg-gradient-to-r from-[rgba(11,165,236,0.95)] to-[rgba(21,90,239,0.95)] bg-clip-text text-transparent'>
           {t('plugin.marketplace.moreFrom')}
         </div>
-        <div className='flex items-center text-center body-md-regular text-text-tertiary'>
+        <div className='body-md-regular text-text-tertiary flex items-center text-center'>
           {t('plugin.marketplace.discover')}
-          <span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected">
+          <span className="body-md-medium text-text-secondary after:bg-text-text-selected relative ml-1 after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:content-['']">
             {t('plugin.category.models')}
           </span>
           ,
-          <span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected">
+          <span className="body-md-medium text-text-secondary after:bg-text-text-selected relative ml-1 after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:content-['']">
             {t('plugin.category.tools')}
           </span>
           ,
-          <span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected">
+          <span className="body-md-medium text-text-secondary after:bg-text-text-selected relative ml-1 after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:content-['']">
             {t('plugin.category.agents')}
           </span>
           ,
-          <span className="relative ml-1 mr-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected">
+          <span className="body-md-medium text-text-secondary after:bg-text-text-selected relative ml-1 mr-1 after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:content-['']">
             {t('plugin.category.extensions')}
           </span>
           {t('plugin.marketplace.and')}
-          <span className="relative ml-1 mr-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected">
+          <span className="body-md-medium text-text-secondary after:bg-text-text-selected relative ml-1 mr-1 after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:content-['']">
             {t('plugin.category.bundles')}
           </span>
           {t('common.operation.in')}
           <a
             href={`${MARKETPLACE_URL_PREFIX}?language=${locale}&q=${searchPluginText}&tags=${filterPluginTags.join(',')}`}
-            className='flex items-center ml-1 system-sm-medium text-text-accent'
+            className='system-sm-medium text-text-accent ml-1 flex items-center'
             target='_blank'
           >
             {t('plugin.marketplace.difyMarketplace')}
-            <RiArrowRightUpLine className='w-4 h-4' />
+            <RiArrowRightUpLine className='h-4 w-4' />
           </a>
         </div>
       </div>
       {
         isLoading && page === 1 && (
-          <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
+          <div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
             <Loading />
           </div>
         )
diff --git a/web/app/components/tools/provider-list.tsx b/web/app/components/tools/provider-list.tsx
index ff21c74668..a780815a55 100644
--- a/web/app/components/tools/provider-list.tsx
+++ b/web/app/components/tools/provider-list.tsx
@@ -63,13 +63,13 @@ const ProviderList = () => {
 
   return (
     <>
-      <div className='relative flex overflow-hidden shrink-0 h-0 grow'>
+      <div className='relative flex h-0 shrink-0 grow overflow-hidden'>
         <div
           ref={containerRef}
-          className='relative flex flex-col overflow-y-auto bg-background-body grow'
+          className='bg-background-body relative flex grow flex-col overflow-y-auto'
         >
           <div className={cn(
-            'sticky top-0 flex justify-between items-center pt-4 px-12 pb-2 leading-[56px] bg-background-body z-20 flex-wrap gap-y-2',
+            'bg-background-body sticky top-0 z-20 flex flex-wrap items-center justify-between gap-y-2 px-12 pb-2 pt-4 leading-[56px]',
             currentProvider && 'pr-6',
           )}>
             <TabSliderNew
@@ -95,7 +95,7 @@ const ProviderList = () => {
           </div>
           {(filteredCollectionList.length > 0 || activeTab !== 'builtin') && (
             <div className={cn(
-              'relative grid content-start grid-cols-1 gap-4 px-12 pt-2 pb-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 shrink-0',
+              'relative grid shrink-0 grid-cols-1 content-start gap-4 px-12 pb-4 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
               !filteredCollectionList.length && activeTab === 'workflow' && 'grow',
             )}>
               {activeTab === 'api' && <CustomCreateCard onRefreshData={refetch} />}
@@ -106,7 +106,7 @@ const ProviderList = () => {
                 >
                   <Card
                     className={cn(
-                      'border-[1.5px] border-transparent cursor-pointer',
+                      'cursor-pointer border-[1.5px] border-transparent',
                       currentProvider?.id === collection.id && 'border-components-option-card-option-selected-border',
                     )}
                     hideCornerMark
@@ -124,11 +124,11 @@ const ProviderList = () => {
                   />
                 </div>
               ))}
-              {!filteredCollectionList.length && activeTab === 'workflow' && <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'><WorkflowToolEmpty /></div>}
+              {!filteredCollectionList.length && activeTab === 'workflow' && <div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'><WorkflowToolEmpty /></div>}
             </div>
           )}
           {!filteredCollectionList.length && activeTab === 'builtin' && (
-            <Empty lightCard text={t('tools.noTools')} className='px-12 h-[224px]' />
+            <Empty lightCard text={t('tools.noTools')} className='h-[224px] px-12' />
           )}
           {
             enable_marketplace && activeTab === 'builtin' && (
diff --git a/web/app/components/tools/provider/card.tsx b/web/app/components/tools/provider/card.tsx
index 6a688186cf..a3d93820d2 100644
--- a/web/app/components/tools/provider/card.tsx
+++ b/web/app/components/tools/provider/card.tsx
@@ -36,11 +36,11 @@ const ProviderCard = ({
   }, [collection.labels, labelList, language])
 
   return (
-    <div className={cn('group col-span-1 bg-white border-2 border-solid border-transparent rounded-xl shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg', active && '!border-primary-400')} onClick={onSelect}>
-      <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
+    <div className={cn('group col-span-1 flex min-h-[160px] cursor-pointer flex-col rounded-xl border-2 border-solid border-transparent bg-white shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg', active && '!border-primary-400')} onClick={onSelect}>
+      <div className='flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]'>
         <div className='relative shrink-0'>
           {typeof collection.icon === 'string' && (
-            <div className='w-10 h-10 bg-center bg-cover bg-no-repeat rounded-md' style={{ backgroundImage: `url(${collection.icon})` }} />
+            <div className='h-10 w-10 rounded-md bg-cover bg-center bg-no-repeat' style={{ backgroundImage: `url(${collection.icon})` }} />
           )}
           {typeof collection.icon !== 'string' && (
             <AppIcon
@@ -50,18 +50,18 @@ const ProviderCard = ({
             />
           )}
         </div>
-        <div className='grow w-0 py-[1px]'>
-          <div className='flex items-center text-sm leading-5 font-semibold text-gray-800'>
+        <div className='w-0 grow py-[1px]'>
+          <div className='flex items-center text-sm font-semibold leading-5 text-gray-800'>
             <div className='truncate' title={collection.label[language]}>{collection.label[language]}</div>
           </div>
-          <div className='flex items-center text-[10px] leading-[18px] text-gray-500 font-medium'>
+          <div className='flex items-center text-[10px] font-medium leading-[18px] text-gray-500'>
             <div className='truncate'>{t('tools.author')}&nbsp;{collection.author}</div>
           </div>
         </div>
       </div>
       <div
         className={cn(
-          'grow mb-2 px-[14px] max-h-[72px] text-xs leading-normal text-gray-500',
+          'mb-2 max-h-[72px] grow px-[14px] text-xs leading-normal text-gray-500',
           collection.labels?.length ? 'line-clamp-2' : 'line-clamp-4',
           collection.labels?.length > 0 && 'group-hover:line-clamp-2 group-hover:max-h-[36px]',
         )}
@@ -70,10 +70,10 @@ const ProviderCard = ({
         {collection.description[language]}
       </div>
       {collection.labels?.length > 0 && (
-        <div className='flex items-center shrink-0 mt-1 pt-1 pl-[14px] pr-[6px] pb-[6px] h-[42px]'>
-          <div className='relative w-full flex items-center gap-1 py-[7px] rounded-md text-gray-500' title={labelContent}>
-            <Tag01 className='shrink-0 w-3 h-3' />
-            <div className='grow text-xs text-start leading-[18px] font-normal truncate'>{labelContent}</div>
+        <div className='mt-1 flex h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1'>
+          <div className='relative flex w-full items-center gap-1 rounded-md py-[7px] text-gray-500' title={labelContent}>
+            <Tag01 className='h-3 w-3 shrink-0' />
+            <div className='grow truncate text-start text-xs font-normal leading-[18px]'>{labelContent}</div>
           </div>
         </div>
       )}
diff --git a/web/app/components/tools/provider/contribute.tsx b/web/app/components/tools/provider/contribute.tsx
index 8b6705c175..a27dae6a0b 100644
--- a/web/app/components/tools/provider/contribute.tsx
+++ b/web/app/components/tools/provider/contribute.tsx
@@ -17,22 +17,22 @@ const Contribute: FC = () => {
       href='https://github.com/langgenius/dify/blob/main/api/core/tools/README.md'
       target='_blank'
       rel='noopener noreferrer'
-      className="group flex col-span-1 bg-white bg-cover bg-no-repeat bg-[url('~@/app/components/tools/provider/grid_bg.svg')] border-2 border-solid border-transparent rounded-xl shadow-sm min-h-[160px] flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg"
+      className="group col-span-1 flex min-h-[160px] cursor-pointer flex-col rounded-xl border-2 border-solid border-transparent bg-white bg-[url('~@/app/components/tools/provider/grid_bg.svg')] bg-cover bg-no-repeat shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg"
     >
-      <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
-        <div className='relative shrink-0 flex items-center'>
-          <div className='z-10 flex p-3 rounded-[10px] bg-white border-[0.5px] border-primary-100 shadow-md'><RiHammerFill className='w-4 h-4 text-primary-600'/></div>
-          <div className='-translate-x-2 flex p-3 rounded-[10px] bg-[#FEF6FB] border-[0.5px] border-[#FCE7F6] shadow-md'><Heart02 className='w-4 h-4 text-[#EE46BC]'/></div>
+      <div className='flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]'>
+        <div className='relative flex shrink-0 items-center'>
+          <div className='border-primary-100 z-10 flex rounded-[10px] border-[0.5px] bg-white p-3 shadow-md'><RiHammerFill className='text-primary-600 h-4 w-4'/></div>
+          <div className='flex -translate-x-2 rounded-[10px] border-[0.5px] border-[#FCE7F6] bg-[#FEF6FB] p-3 shadow-md'><Heart02 className='h-4 w-4 text-[#EE46BC]'/></div>
         </div>
       </div>
-      <div className='mb-3 px-[14px] text-[15px] leading-5 font-semibold'>
+      <div className='mb-3 px-[14px] text-[15px] font-semibold leading-5'>
         <div className='text-gradient'>{t('tools.contribute.line1')}</div>
         <div className='text-gradient'>{t('tools.contribute.line2')}</div>
       </div>
-      <div className='px-4 py-3 border-t-[0.5px] border-black/5 flex items-center space-x-1 text-[#155EEF]'>
-        <BookOpen01 className='w-3 h-3' />
-        <div className='grow leading-[18px] text-xs font-normal'>{t('tools.contribute.viewGuide')}</div>
-        <ArrowUpRight className='w-3 h-3' />
+      <div className='flex items-center space-x-1 border-t-[0.5px] border-black/5 px-4 py-3 text-[#155EEF]'>
+        <BookOpen01 className='h-3 w-3' />
+        <div className='grow text-xs font-normal leading-[18px]'>{t('tools.contribute.viewGuide')}</div>
+        <ArrowUpRight className='h-3 w-3' />
       </div>
     </a>
   )
diff --git a/web/app/components/tools/provider/custom-create-card.tsx b/web/app/components/tools/provider/custom-create-card.tsx
index 9ae1714a27..860e53c995 100644
--- a/web/app/components/tools/provider/custom-create-card.tsx
+++ b/web/app/components/tools/provider/custom-create-card.tsx
@@ -45,20 +45,20 @@ const Contribute = ({ onRefreshData }: Props) => {
   return (
     <>
       {isCurrentWorkspaceManager && (
-        <div className='flex flex-col col-span-1 bg-components-panel-on-panel-item-bg border-[0.5px] border-divider-subtle rounded-xl min-h-[135px] transition-all duration-200 ease-in-out cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-lg'>
-          <div className='group grow rounded-t-xl hover:bg-background-body' onClick={() => setIsShowEditCustomCollectionModal(true)}>
-            <div className='shrink-0 flex items-center p-4 pb-3'>
-              <div className='w-10 h-10 flex items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg rounded-lg group-hover:border-components-option-card-option-border-hover group-hover:bg-components-option-card-option-bg-hover'>
-                <RiAddLine className='w-4 h-4 text-text-tertiary group-hover:text-text-accent'/>
+        <div className='bg-components-panel-on-panel-item-bg border-divider-subtle hover:bg-components-panel-on-panel-item-bg-hover col-span-1 flex min-h-[135px] cursor-pointer flex-col rounded-xl border-[0.5px] transition-all duration-200 ease-in-out hover:shadow-lg'>
+          <div className='hover:bg-background-body group grow rounded-t-xl' onClick={() => setIsShowEditCustomCollectionModal(true)}>
+            <div className='flex shrink-0 items-center p-4 pb-3'>
+              <div className='border-components-option-card-option-border bg-components-option-card-option-bg group-hover:border-components-option-card-option-border-hover group-hover:bg-components-option-card-option-bg-hover flex h-10 w-10 items-center justify-center rounded-lg border'>
+                <RiAddLine className='text-text-tertiary group-hover:text-text-accent h-4 w-4'/>
               </div>
-              <div className='ml-3 text-sm font-semibold leading-5 text-text-primary group-hover:text-text-accent'>{t('tools.createCustomTool')}</div>
+              <div className='text-text-primary group-hover:text-text-accent ml-3 text-sm font-semibold leading-5'>{t('tools.createCustomTool')}</div>
             </div>
           </div>
-          <div className='px-4 py-3 rounded-b-xl border-t-[0.5px] border-divider-regular text-text-tertiary hover:text-text-accent hover:bg-background-body'>
+          <div className='border-divider-regular text-text-tertiary hover:text-text-accent hover:bg-background-body rounded-b-xl border-t-[0.5px] px-4 py-3'>
             <a href={linkUrl} target='_blank' rel='noopener noreferrer' className='flex items-center space-x-1'>
-              <BookOpen01 className='shrink-0 w-3 h-3' />
-              <div className='grow leading-[18px] text-xs font-normal truncate' title={t('tools.customToolTip') || ''}>{t('tools.customToolTip')}</div>
-              <ArrowUpRight className='shrink-0 w-3 h-3' />
+              <BookOpen01 className='h-3 w-3 shrink-0' />
+              <div className='grow truncate text-xs font-normal leading-[18px]' title={t('tools.customToolTip') || ''}>{t('tools.customToolTip')}</div>
+              <ArrowUpRight className='h-3 w-3 shrink-0' />
             </a>
           </div>
         </div>
diff --git a/web/app/components/tools/provider/detail.tsx b/web/app/components/tools/provider/detail.tsx
index 2143ca0b39..875e1d1114 100644
--- a/web/app/components/tools/provider/detail.tsx
+++ b/web/app/components/tools/provider/detail.tsx
@@ -233,16 +233,16 @@ const ProviderDetail = ({
       footer={null}
       mask={false}
       positionCenter={false}
-      panelClassname={cn('justify-start mt-[64px] mr-2 mb-2 !w-[420px] !max-w-[420px] !p-0 !bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl')}
+      panelClassname={cn('!bg-components-panel-bg border-components-panel-border mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] !p-0 shadow-xl')}
     >
       <div className='p-4'>
         <div className='mb-3 flex'>
           <Icon src={collection.icon} />
           <div className="ml-3 w-0 grow">
-            <div className="flex items-center h-5">
+            <div className="flex h-5 items-center">
               <Title title={collection.label[language]} />
             </div>
-            <div className='mb-1 flex justify-between items-center h-4'>
+            <div className='mb-1 flex h-4 items-center justify-between'>
               <OrgInfo
                 className="mt-0.5"
                 packageNameClassName='w-auto'
@@ -253,20 +253,20 @@ const ProviderDetail = ({
           </div>
           <div className='flex gap-1'>
             <ActionButton onClick={onHide}>
-              <RiCloseLine className='w-4 h-4' />
+              <RiCloseLine className='h-4 w-4' />
             </ActionButton>
           </div>
         </div>
         {!!collection.description[language] && (
           <Description text={collection.description[language]} descriptionLineRows={2}></Description>
         )}
-        <div className='flex gap-1 border-b-[0.5px] border-divider-subtle'>
+        <div className='border-divider-subtle flex gap-1 border-b-[0.5px]'>
           {collection.type === CollectionType.custom && !isDetailLoading && (
             <Button
-              className={cn('shrink-0 my-3 w-full')}
+              className={cn('my-3 w-full shrink-0')}
               onClick={() => setIsShowEditCustomCollectionModal(true)}
             >
-              <Settings01 className='mr-1 w-4 h-4 text-text-tertiary' />
+              <Settings01 className='text-text-tertiary mr-1 h-4 w-4' />
               <div className='system-sm-medium text-text-secondary'>{t('tools.createTool.editAction')}</div>
             </Button>
           )}
@@ -274,15 +274,15 @@ const ProviderDetail = ({
             <>
               <Button
                 variant='primary'
-                className={cn('shrink-0 my-3 w-[183px]')}
+                className={cn('my-3 w-[183px] shrink-0')}
               >
-                <a className='flex items-center text-text-primary' href={`/app/${(customCollection as WorkflowToolProviderResponse).workflow_app_id}/workflow`} rel='noreferrer' target='_blank'>
+                <a className='text-text-primary flex items-center' href={`/app/${(customCollection as WorkflowToolProviderResponse).workflow_app_id}/workflow`} rel='noreferrer' target='_blank'>
                   <div className='system-sm-medium'>{t('tools.openInStudio')}</div>
-                  <LinkExternal02 className='ml-1 w-4 h-4' />
+                  <LinkExternal02 className='ml-1 h-4 w-4' />
                 </a>
               </Button>
               <Button
-                className={cn('shrink-0 my-3 w-[183px]')}
+                className={cn('my-3 w-[183px] shrink-0')}
                 onClick={() => setIsShowEditWorkflowToolModal(true)}
                 disabled={!isCurrentWorkspaceManager}
               >
@@ -296,7 +296,7 @@ const ProviderDetail = ({
           {isDetailLoading && <div className='flex h-[200px]'><Loading type='app' /></div>}
           {/* Builtin type */}
           {!isDetailLoading && (collection.type === CollectionType.builtIn) && isAuthed && (
-            <div className='mb-1 h-6 flex items-center justify-between text-text-secondary system-sm-semibold-uppercase'>
+            <div className='text-text-secondary system-sm-semibold-uppercase mb-1 flex h-6 items-center justify-between'>
               {t('plugin.detailPanel.actionNum', { num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' })}
               {needAuth && (
                 <Button
@@ -323,7 +323,7 @@ const ProviderDetail = ({
               </div>
               <Button
                 variant='primary'
-                className={cn('shrink-0 my-3 w-full')}
+                className={cn('my-3 w-full shrink-0')}
                 onClick={() => {
                   if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
                     showSettingAuthModal()
diff --git a/web/app/components/tools/provider/tool-item.tsx b/web/app/components/tools/provider/tool-item.tsx
index 89bb779f6a..7a8cea5957 100644
--- a/web/app/components/tools/provider/tool-item.tsx
+++ b/web/app/components/tools/provider/tool-item.tsx
@@ -29,10 +29,10 @@ const ToolItem = ({
   return (
     <>
       <div
-        className={cn('mb-2 px-4 py-3 bg-components-panel-item-bg rounded-xl border-[0.5px] border-components-panel-border-subtle shadow-xs cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover', disabled && 'opacity-50 !cursor-not-allowed')}
+        className={cn('bg-components-panel-item-bg border-components-panel-border-subtle shadow-xs hover:bg-components-panel-on-panel-item-bg-hover mb-2 cursor-pointer rounded-xl border-[0.5px] px-4 py-3', disabled && '!cursor-not-allowed opacity-50')}
         onClick={() => !disabled && setShowDetail(true)}
       >
-        <div className='pb-0.5 text-text-secondary system-md-semibold'>{tool.label[language]}</div>
+        <div className='text-text-secondary system-md-semibold pb-0.5'>{tool.label[language]}</div>
         <div className='text-text-tertiary system-xs-regular line-clamp-2' title={tool.description[language]}>{tool.description[language]}</div>
       </div>
       {showDetail && (
diff --git a/web/app/components/tools/setting/build-in/config-credentials.tsx b/web/app/components/tools/setting/build-in/config-credentials.tsx
index 3d083b8d58..fc9726563d 100644
--- a/web/app/components/tools/setting/build-in/config-credentials.tsx
+++ b/web/app/components/tools/setting/build-in/config-credentials.tsx
@@ -78,7 +78,7 @@ const ConfigCredential: FC<Props> = ({
       headerClassName='!border-b-divider-subtle'
       body={
 
-        <div className='px-6 py-3 h-full'>
+        <div className='h-full px-6 py-3'>
           {!credentialSchema
             ? <Loading type='app' />
             : (
@@ -97,10 +97,10 @@ const ConfigCredential: FC<Props> = ({
                     ? (<a
                       href={item.url}
                       target='_blank' rel='noopener noreferrer'
-                      className='inline-flex items-center text-xs text-text-accent'
+                      className='text-text-accent inline-flex items-center text-xs'
                     >
                       {t('tools.howToGet')}
-                      <LinkExternal02 className='ml-1 w-3 h-3' />
+                      <LinkExternal02 className='ml-1 h-3 w-3' />
                     </a>)
                     : null}
                 />
diff --git a/web/app/components/tools/workflow-tool/configure-button.tsx b/web/app/components/tools/workflow-tool/configure-button.tsx
index 0d97619e0d..5f5b065c74 100644
--- a/web/app/components/tools/workflow-tool/configure-button.tsx
+++ b/web/app/components/tools/workflow-tool/configure-button.tsx
@@ -174,35 +174,35 @@ const WorkflowToolConfigureButton = ({
 
   return (
     <>
-      <div className='mt-2 pt-2 border-t-[0.5px] border-divider-regular'>
+      <div className='border-divider-regular mt-2 border-t-[0.5px] pt-2'>
         {(!published || !isLoading) && (
           <div className={cn(
-            'group bg-background-section-burn rounded-lg transition-colors',
-            disabled ? 'shadow-xs opacity-30 cursor-not-allowed' : 'cursor-pointer',
+            'bg-background-section-burn group rounded-lg transition-colors',
+            disabled ? 'shadow-xs cursor-not-allowed opacity-30' : 'cursor-pointer',
             !published && 'hover:bg-primary-50',
           )}>
             {isCurrentWorkspaceManager
               ? (
                 <div
-                  className='flex justify-start items-center text-text-primary gap-2 px-2.5 py-2'
+                  className='text-text-primary flex items-center justify-start gap-2 px-2.5 py-2'
                   onClick={() => !published && setShowModal(true)}
                 >
-                  <Tools className={cn('relative w-4 h-4', !published && 'group-hover:text-primary-600')} />
-                  <div title={t('workflow.common.workflowAsTool') || ''} className={cn('grow shrink basis-0 text-[13px] font-medium leading-[18px] truncate', !published && 'group-hover:text-primary-600')}>{t('workflow.common.workflowAsTool')}</div>
+                  <Tools className={cn('relative h-4 w-4', !published && 'group-hover:text-primary-600')} />
+                  <div title={t('workflow.common.workflowAsTool') || ''} className={cn('shrink grow basis-0 truncate text-[13px] font-medium leading-[18px]', !published && 'group-hover:text-primary-600')}>{t('workflow.common.workflowAsTool')}</div>
                   {!published && (
-                    <span className='shrink-0 px-1 border border-divider-regular rounded-[5px] bg-background-default-subtle text-[10px] font-medium leading-[18px] text-text-tertiary'>{t('workflow.common.configureRequired').toLocaleUpperCase()}</span>
+                    <span className='border-divider-regular bg-background-default-subtle text-text-tertiary shrink-0 rounded-[5px] border px-1 text-[10px] font-medium leading-[18px]'>{t('workflow.common.configureRequired').toLocaleUpperCase()}</span>
                   )}
                 </div>)
               : (
                 <div
-                  className='flex justify-start items-center gap-2 px-2.5 py-2'
+                  className='flex items-center justify-start gap-2 px-2.5 py-2'
                 >
-                  <Tools className='w-4 h-4 text-text-tertiary' />
-                  <div title={t('workflow.common.workflowAsTool') || ''} className='grow shrink basis-0 text-[13px] font-medium leading-[18px] truncate text-text-tertiary'>{t('workflow.common.workflowAsTool')}</div>
+                  <Tools className='text-text-tertiary h-4 w-4' />
+                  <div title={t('workflow.common.workflowAsTool') || ''} className='text-text-tertiary shrink grow basis-0 truncate text-[13px] font-medium leading-[18px]'>{t('workflow.common.workflowAsTool')}</div>
                 </div>
               )}
             {published && (
-              <div className='px-2.5 py-2 border-t-[0.5px] border-divider-regular'>
+              <div className='border-divider-regular border-t-[0.5px] px-2.5 py-2'>
                 <div className='flex justify-between'>
                   <Button
                     size='small'
diff --git a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
index 21ebe8c119..20b596c991 100644
--- a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
+++ b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
@@ -18,21 +18,21 @@ const ConfirmModal = ({ show, onConfirm, onClose }: ConfirmModalProps) => {
 
   return (
     <Modal
-      className={cn('p-8 max-w-[600px] w-[600px]')}
+      className={cn('w-[600px] max-w-[600px] p-8')}
       isShow={show}
       onClose={() => { }}
     >
-      <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
-        <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+      <div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onClose}>
+        <RiCloseLine className='text-text-tertiary h-4 w-4' />
       </div>
-      <div className='w-12 h-12 p-3 bg-background-section rounded-xl border-[0.5px] border-divider-regular shadow-xl'>
-        <AlertTriangle className='w-6 h-6 text-[rgb(247,144,9)]' />
+      <div className='bg-background-section border-divider-regular h-12 w-12 rounded-xl border-[0.5px] p-3 shadow-xl'>
+        <AlertTriangle className='h-6 w-6 text-[rgb(247,144,9)]' />
       </div>
-      <div className='relative mt-3 text-xl font-semibold leading-[30px] text-text-primary'>{t('tools.createTool.confirmTitle')}</div>
-      <div className='my-1 text-text-tertiary text-sm leading-5'>
+      <div className='text-text-primary relative mt-3 text-xl font-semibold leading-[30px]'>{t('tools.createTool.confirmTitle')}</div>
+      <div className='text-text-tertiary my-1 text-sm leading-5'>
         {t('tools.createTool.confirmTip')}
       </div>
-      <div className='pt-6 flex justify-end items-center'>
+      <div className='flex items-center justify-end pt-6'>
         <div className='flex items-center'>
           <Button className='mr-2' onClick={onClose}>{t('common.operation.cancel')}</Button>
           <Button variant="warning" onClick={onConfirm}>{t('common.operation.confirm')}</Button>
diff --git a/web/app/components/tools/workflow-tool/index.tsx b/web/app/components/tools/workflow-tool/index.tsx
index c4eb07dfe6..ca158e4796 100644
--- a/web/app/components/tools/workflow-tool/index.tsx
+++ b/web/app/components/tools/workflow-tool/index.tsx
@@ -126,15 +126,15 @@ const WorkflowToolAsModal: FC<Props> = ({
         height='calc(100vh - 16px)'
         headerClassName='!border-b-divider'
         body={
-          <div className='flex flex-col h-full'>
-            <div className='grow h-0 overflow-y-auto px-6 py-3 space-y-4'>
+          <div className='flex h-full flex-col'>
+            <div className='h-0 grow space-y-4 overflow-y-auto px-6 py-3'>
               {/* name & icon */}
               <div>
-                <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.name')} <span className='ml-1 text-red-500'>*</span></div>
+                <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.name')} <span className='ml-1 text-red-500'>*</span></div>
                 <div className='flex items-center justify-between gap-3'>
                   <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' iconType='emoji' icon={emoji.content} background={emoji.background} />
                   <Input
-                    className='grow h-10'
+                    className='h-10 grow'
                     placeholder={t('tools.createTool.toolNamePlaceHolder')!}
                     value={label}
                     onChange={e => setLabel(e.target.value)}
@@ -143,7 +143,7 @@ const WorkflowToolAsModal: FC<Props> = ({
               </div>
               {/* name for tool call */}
               <div>
-                <div className='flex items-center py-2 system-sm-medium text-text-primary'>
+                <div className='system-sm-medium text-text-primary flex items-center py-2'>
                   {t('tools.createTool.nameForToolCall')} <span className='ml-1 text-red-500'>*</span>
                   <Tooltip
                     popupContent={
@@ -165,7 +165,7 @@ const WorkflowToolAsModal: FC<Props> = ({
               </div>
               {/* description */}
               <div>
-                <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.description')}</div>
+                <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.description')}</div>
                 <Textarea
                   placeholder={t('tools.createTool.descriptionPlaceholder') || ''}
                   value={description}
@@ -174,24 +174,24 @@ const WorkflowToolAsModal: FC<Props> = ({
               </div>
               {/* Tool Input  */}
               <div>
-                <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.toolInput.title')}</div>
-                <div className='rounded-lg border border-divider-regular w-full overflow-x-auto'>
-                  <table className='w-full leading-[18px] text-xs text-text-secondary font-normal'>
+                <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.toolInput.title')}</div>
+                <div className='border-divider-regular w-full overflow-x-auto rounded-lg border'>
+                  <table className='text-text-secondary w-full text-xs font-normal leading-[18px]'>
                     <thead className='text-text-tertiary uppercase'>
-                      <tr className='border-b border-divider-regular'>
-                        <th className="p-2 pl-3 font-medium w-[156px]">{t('tools.createTool.toolInput.name')}</th>
-                        <th className="p-2 pl-3 font-medium w-[102px]">{t('tools.createTool.toolInput.method')}</th>
+                      <tr className='border-divider-regular border-b'>
+                        <th className="w-[156px] p-2 pl-3 font-medium">{t('tools.createTool.toolInput.name')}</th>
+                        <th className="w-[102px] p-2 pl-3 font-medium">{t('tools.createTool.toolInput.method')}</th>
                         <th className="p-2 pl-3 font-medium">{t('tools.createTool.toolInput.description')}</th>
                       </tr>
                     </thead>
                     <tbody>
                       {parameters.map((item, index) => (
-                        <tr key={index} className='border-b last:border-0 border-divider-regular'>
-                          <td className="p-2 pl-3 max-w-[156px]">
+                        <tr key={index} className='border-divider-regular border-b last:border-0'>
+                          <td className="max-w-[156px] p-2 pl-3">
                             <div className='text-[13px] leading-[18px]'>
                               <div title={item.name} className='flex'>
-                                <span className='font-medium text-text-primary truncate'>{item.name}</span>
-                                <span className='shrink-0 pl-1 text-[#ec4a0a] text-xs leading-[18px]'>{item.required ? t('tools.createTool.toolInput.required') : ''}</span>
+                                <span className='text-text-primary truncate font-medium'>{item.name}</span>
+                                <span className='shrink-0 pl-1 text-xs leading-[18px] text-[#ec4a0a]'>{item.required ? t('tools.createTool.toolInput.required') : ''}</span>
                               </div>
                               <div className='text-text-tertiary'>{item.type}</div>
                             </div>
@@ -199,9 +199,9 @@ const WorkflowToolAsModal: FC<Props> = ({
                           <td>
                             {item.name === '__image' && (
                               <div className={cn(
-                                'flex items-center gap-1 min-h-[56px] px-3 py-2 h-9 bg-transparent cursor-default',
+                                'flex h-9 min-h-[56px] cursor-default items-center gap-1 bg-transparent px-3 py-2',
                               )}>
-                                <div className={cn('grow text-[13px] leading-[18px] text-text-secondary truncate')}>
+                                <div className={cn('text-text-secondary grow truncate text-[13px] leading-[18px]')}>
                                   {t('tools.createTool.toolInput.methodParameter')}
                                 </div>
                               </div>
@@ -210,10 +210,10 @@ const WorkflowToolAsModal: FC<Props> = ({
                               <MethodSelector value={item.form} onChange={value => handleParameterChange('form', value, index)} />
                             )}
                           </td>
-                          <td className="p-2 pl-3 text-text-tertiary w-[236px]">
+                          <td className="text-text-tertiary w-[236px] p-2 pl-3">
                             <input
                               type='text'
-                              className='w-full text-text-secondary text-[13px] leading-[18px] font-normal bg-transparent outline-none appearance-none caret-primary-600 placeholder:text-text-quaternary'
+                              className='text-text-secondary caret-primary-600 placeholder:text-text-quaternary w-full appearance-none bg-transparent text-[13px] font-normal leading-[18px] outline-none'
                               placeholder={t('tools.createTool.toolInput.descriptionPlaceholder')!}
                               value={item.description}
                               onChange={e => handleParameterChange('description', e.target.value, index)}
@@ -227,12 +227,12 @@ const WorkflowToolAsModal: FC<Props> = ({
               </div>
               {/* Tags */}
               <div>
-                <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.toolInput.label')}</div>
+                <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.toolInput.label')}</div>
                 <LabelSelector value={labels} onChange={handleLabelSelect} />
               </div>
               {/* Privacy Policy */}
               <div>
-                <div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.privacyPolicy')}</div>
+                <div className='system-sm-medium text-text-primary py-2'>{t('tools.createTool.privacyPolicy')}</div>
                 <Input
                   className='h-10'
                   value={privacyPolicy}
@@ -240,7 +240,7 @@ const WorkflowToolAsModal: FC<Props> = ({
                   placeholder={t('tools.createTool.privacyPolicyPlaceholder') || ''} />
               </div>
             </div>
-            <div className={cn((!isAdd && onRemove) ? 'justify-between' : 'justify-end', 'mt-2 shrink-0 flex py-4 px-6 rounded-b-[10px] bg-background-section-burn border-t border-divider-regular')} >
+            <div className={cn((!isAdd && onRemove) ? 'justify-between' : 'justify-end', 'bg-background-section-burn border-divider-regular mt-2 flex shrink-0 rounded-b-[10px] border-t px-6 py-4')} >
               {!isAdd && onRemove && (
                 <Button variant='warning' onClick={onRemove}>{t('common.operation.delete')}</Button>
               )}
diff --git a/web/app/components/tools/workflow-tool/method-selector.tsx b/web/app/components/tools/workflow-tool/method-selector.tsx
index 895fb18706..cd9c28fb31 100644
--- a/web/app/components/tools/workflow-tool/method-selector.tsx
+++ b/web/app/components/tools/workflow-tool/method-selector.tsx
@@ -34,37 +34,37 @@ const MethodSelector: FC<MethodSelectorProps> = ({
           className='block'
         >
           <div className={cn(
-            'flex items-center gap-1 min-h-[56px] px-3 py-2 h-9 bg-transparent cursor-pointer hover:bg-background-section-burn',
+            'hover:bg-background-section-burn flex h-9 min-h-[56px] cursor-pointer items-center gap-1 bg-transparent px-3 py-2',
             open && '!bg-background-section-burn hover:bg-background-section-burn',
           )}>
-            <div className={cn('grow text-[13px] leading-[18px] text-text-secondary truncate')}>
+            <div className={cn('text-text-secondary grow truncate text-[13px] leading-[18px]')}>
               {value === 'llm' ? t('tools.createTool.toolInput.methodParameter') : t('tools.createTool.toolInput.methodSetting')}
             </div>
-            <div className='shrink-0 ml-1 text-text-secondary opacity-60'>
+            <div className='text-text-secondary ml-1 shrink-0 opacity-60'>
               <RiArrowDownSLine className='h-4 w-4' />
             </div>
           </div>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1040]'>
-          <div className='relative w-[320px] bg-components-panel-bg-blur backdrop-blur-sm rounded-lg border-[0.5px] border-components-panel-border  shadow-lg'>
+          <div className='bg-components-panel-bg-blur border-components-panel-border relative w-[320px] rounded-lg border-[0.5px] shadow-lg  backdrop-blur-sm'>
             <div className='p-1'>
-              <div className='pl-3 pr-2 py-2.5 rounded-lg hover:bg-components-panel-on-panel-item-bg-hover cursor-pointer' onClick={() => onChange('llm')}>
-                <div className='flex item-center gap-1'>
-                  <div className='shrink-0 w-4 h-4'>
-                    {value === 'llm' && <Check className='shrink-0 w-4 h-4 text-text-accent' />}
+              <div className='hover:bg-components-panel-on-panel-item-bg-hover cursor-pointer rounded-lg py-2.5 pl-3 pr-2' onClick={() => onChange('llm')}>
+                <div className='item-center flex gap-1'>
+                  <div className='h-4 w-4 shrink-0'>
+                    {value === 'llm' && <Check className='text-text-accent h-4 w-4 shrink-0' />}
                   </div>
-                  <div className='text-[13px] text-text-secondary font-medium leading-[18px]'>{t('tools.createTool.toolInput.methodParameter')}</div>
+                  <div className='text-text-secondary text-[13px] font-medium leading-[18px]'>{t('tools.createTool.toolInput.methodParameter')}</div>
                 </div>
-                <div className='pl-5 text-text-tertiary text-[13px] leading-[18px]'>{t('tools.createTool.toolInput.methodParameterTip')}</div>
+                <div className='text-text-tertiary pl-5 text-[13px] leading-[18px]'>{t('tools.createTool.toolInput.methodParameterTip')}</div>
               </div>
-              <div className='pl-3 pr-2 py-2.5 rounded-lg hover:bg-components-panel-on-panel-item-bg-hover cursor-pointer' onClick={() => onChange('form')}>
-                <div className='flex item-center gap-1'>
-                  <div className='shrink-0 w-4 h-4'>
-                    {value === 'form' && <Check className='shrink-0 w-4 h-4 text-text-accent' />}
+              <div className='hover:bg-components-panel-on-panel-item-bg-hover cursor-pointer rounded-lg py-2.5 pl-3 pr-2' onClick={() => onChange('form')}>
+                <div className='item-center flex gap-1'>
+                  <div className='h-4 w-4 shrink-0'>
+                    {value === 'form' && <Check className='text-text-accent h-4 w-4 shrink-0' />}
                   </div>
-                  <div className='text-[13px] text-text-secondary font-medium leading-[18px]'>{t('tools.createTool.toolInput.methodSetting')}</div>
+                  <div className='text-text-secondary text-[13px] font-medium leading-[18px]'>{t('tools.createTool.toolInput.methodSetting')}</div>
                 </div>
-                <div className='pl-5 text-text-tertiary text-[13px] leading-[18px]'>{t('tools.createTool.toolInput.methodSettingTip')}</div>
+                <div className='text-text-tertiary pl-5 text-[13px] leading-[18px]'>{t('tools.createTool.toolInput.methodSettingTip')}</div>
               </div>
             </div>
           </div>
diff --git a/web/app/components/workflow/block-icon.tsx b/web/app/components/workflow/block-icon.tsx
index 7f7aeca092..7f4ef99d8f 100644
--- a/web/app/components/workflow/block-icon.tsx
+++ b/web/app/components/workflow/block-icon.tsx
@@ -85,7 +85,7 @@ const BlockIcon: FC<BlockIconProps> = ({
 }) => {
   return (
     <div className={`
-      flex items-center justify-center border-[0.5px] border-white/2 text-white
+      border-white/2 flex items-center justify-center border-[0.5px] text-white
       ${ICON_CONTAINER_CLASSNAME_SIZE_MAP[size]}
       ${ICON_CONTAINER_BG_COLOR_MAP[type]}
       ${toolIcon && '!shadow-none'}
@@ -104,7 +104,7 @@ const BlockIcon: FC<BlockIconProps> = ({
               typeof toolIcon === 'string'
                 ? (
                   <div
-                    className='shrink-0 w-full h-full bg-cover bg-center rounded-md'
+                    className='h-full w-full shrink-0 rounded-md bg-cover bg-center'
                     style={{
                       backgroundImage: `url(${toolIcon})`,
                     }}
@@ -112,7 +112,7 @@ const BlockIcon: FC<BlockIconProps> = ({
                 )
                 : (
                   <AppIcon
-                    className='shrink-0 !w-full !h-full'
+                    className='!h-full !w-full shrink-0'
                     size='tiny'
                     icon={toolIcon?.content}
                     background={toolIcon?.background}
diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx
index 6f287e2f4f..f4c000b2c3 100644
--- a/web/app/components/workflow/block-selector/all-tools.tsx
+++ b/web/app/components/workflow/block-selector/all-tools.tsx
@@ -98,14 +98,14 @@ const AllTools = ({
 
   return (
     <div className={cn(className)}>
-      <div className='flex items-center justify-between px-3 bg-background-default-hover border-b-[0.5px] border-divider-subtle shadow-xs'>
-        <div className='flex items-center h-8 space-x-1'>
+      <div className='bg-background-default-hover border-divider-subtle shadow-xs flex items-center justify-between border-b-[0.5px] px-3'>
+        <div className='flex h-8 items-center space-x-1'>
           {
             tabs.map(tab => (
               <div
                 className={cn(
-                  'flex items-center px-2 h-6 rounded-md hover:bg-state-base-hover cursor-pointer',
-                  'text-xs font-medium text-text-secondary',
+                  'hover:bg-state-base-hover flex h-6 cursor-pointer items-center rounded-md px-2',
+                  'text-text-secondary text-xs font-medium',
                   activeTab === tab.key && 'bg-state-base-hover-alt',
                 )}
                 key={tab.key}
@@ -119,12 +119,12 @@ const AllTools = ({
         <ViewTypeSelect viewType={activeView} onChange={setActiveView} />
         {supportAddCustomTool && (
           <div className='flex items-center'>
-            <div className='mr-1.5 w-px h-3.5  bg-divider-regular'></div>
+            <div className='bg-divider-regular mr-1.5 h-3.5  w-px'></div>
             <ActionButton
               className='bg-components-button-primary-bg hover:bg-components-button-primary-bg text-components-button-primary-text hover:text-components-button-primary-text'
               onClick={onShowAddCustomCollectionModal}
             >
-              <RiAddLine className='w-4 h-4' />
+              <RiAddLine className='h-4 w-4' />
             </ActionButton>
           </div>
         )}
diff --git a/web/app/components/workflow/block-selector/blocks.tsx b/web/app/components/workflow/block-selector/blocks.tsx
index eaaa473f3d..3b19c7e01b 100644
--- a/web/app/components/workflow/block-selector/blocks.tsx
+++ b/web/app/components/workflow/block-selector/blocks.tsx
@@ -58,7 +58,7 @@ const Blocks = ({
       >
         {
           classification !== '-' && !!list.length && (
-            <div className='flex items-start px-3 h-[22px] text-xs font-medium text-text-tertiary'>
+            <div className='text-text-tertiary flex h-[22px] items-start px-3 text-xs font-medium'>
               {t(`workflow.tabs.${classification}`)}
             </div>
           )
@@ -76,21 +76,21 @@ const Blocks = ({
                     className='mb-2'
                     type={block.type}
                   />
-                  <div className='mb-1 system-md-medium text-text-primary'>{block.title}</div>
+                  <div className='system-md-medium text-text-primary mb-1'>{block.title}</div>
                   <div className='text-text-tertiary system-xs-regular'>{nodesExtraData[block.type].about}</div>
                 </div>
               )}
             >
               <div
                 key={block.type}
-                className='flex items-center px-3 w-full h-8 rounded-lg hover:bg-state-base-hover cursor-pointer'
+                className='hover:bg-state-base-hover flex h-8 w-full cursor-pointer items-center rounded-lg px-3'
                 onClick={() => onSelect(block.type)}
               >
                 <BlockIcon
                   className='mr-2 shrink-0'
                   type={block.type}
                 />
-                <div className='text-sm text-text-secondary'>{block.title}</div>
+                <div className='text-text-secondary text-sm'>{block.title}</div>
               </div>
             </Tooltip>
           ))
@@ -103,7 +103,7 @@ const Blocks = ({
     <div className='p-1'>
       {
         isEmpty && (
-          <div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>{t('workflow.tabs.noResult')}</div>
+          <div className='text-text-tertiary flex h-[22px] items-center px-3 text-xs font-medium'>{t('workflow.tabs.noResult')}</div>
         )
       }
       {
diff --git a/web/app/components/workflow/block-selector/index.tsx b/web/app/components/workflow/block-selector/index.tsx
index 659a7694a8..a2392179b9 100644
--- a/web/app/components/workflow/block-selector/index.tsx
+++ b/web/app/components/workflow/block-selector/index.tsx
@@ -117,13 +117,13 @@ const NodeSelector: FC<NodeSelectorProps> = ({
             : (
               <div
                 className={`
-                  flex items-center justify-center 
-                  w-4 h-4 rounded-full bg-components-button-primary-bg text-text-primary-on-surface hover:bg-components-button-primary-bg-hover cursor-pointer z-10
+                  bg-components-button-primary-bg text-text-primary-on-surface hover:bg-components-button-primary-bg-hover 
+                  z-10 flex h-4 w-4 cursor-pointer items-center justify-center rounded-full
                   ${triggerClassName?.(open)}
                 `}
                 style={triggerStyle}
               >
-                <Plus02 className='w-2.5 h-2.5' />
+                <Plus02 className='h-2.5 w-2.5' />
               </div>
             )
         }
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
index f4a9668c3e..921f38817a 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
@@ -72,13 +72,13 @@ const OperationDropdown: FC<Props> = ({
     >
       <PortalToFollowElemTrigger onClick={handleTrigger}>
         <ActionButton className={cn(open && 'bg-state-base-hover')}>
-          <RiMoreFill className='w-4 h-4 text-components-button-secondary-accent-text' />
+          <RiMoreFill className='text-components-button-secondary-accent-text h-4 w-4' />
         </ActionButton>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[9999]'>
-        <div className='w-[112px] p-1 bg-components-panel-bg-blur rounded-xl border-[0.5px] border-components-panel-border shadow-lg'>
-          <div onClick={handleDownload} className='px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover'>{t('common.operation.download')}</div>
-          <a href={`${MARKETPLACE_URL_PREFIX}/plugins/${author}/${name}`} target='_blank' className='block px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover'>{t('common.operation.viewDetails')}</a>
+        <div className='bg-components-panel-bg-blur border-components-panel-border w-[112px] rounded-xl border-[0.5px] p-1 shadow-lg'>
+          <div onClick={handleDownload} className='text-text-secondary system-md-regular hover:bg-state-base-hover cursor-pointer rounded-lg px-3 py-1.5'>{t('common.operation.download')}</div>
+          <a href={`${MARKETPLACE_URL_PREFIX}/plugins/${author}/${name}`} target='_blank' className='text-text-secondary system-md-regular hover:bg-state-base-hover block cursor-pointer rounded-lg px-3 py-1.5'>{t('common.operation.viewDetails')}</a>
         </div>
       </PortalToFollowElemContent>
     </PortalToFollowElem>
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/item.tsx b/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
index ebe4da73f8..f69033abc9 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
@@ -36,24 +36,24 @@ const Item: FC<Props> = ({
   }] = useBoolean(false)
 
   return (
-    <div className='group/plugin flex rounded-lg py-1 pr-1 pl-3 hover:bg-state-base-hover'>
+    <div className='group/plugin hover:bg-state-base-hover flex rounded-lg py-1 pl-3 pr-1'>
       <div
-        className='shrink-0 relative w-6 h-6 border-[0.5px] border-components-panel-border-subtle rounded-md bg-center bg-no-repeat bg-contain'
+        className='border-components-panel-border-subtle relative h-6 w-6 shrink-0 rounded-md border-[0.5px] bg-contain bg-center bg-no-repeat'
         style={{ backgroundImage: `url(${payload.icon})` }}
       />
-      <div className='ml-2 w-0 grow flex'>
+      <div className='ml-2 flex w-0 grow'>
         <div className='w-0 grow'>
-          <div className='h-4 leading-4 text-text-primary system-sm-medium truncate '>{getLocalizedText(payload.label)}</div>
-          <div className='h-5 leading-5 text-text-tertiary system-xs-regular truncate'>{getLocalizedText(payload.brief)}</div>
-          <div className='flex text-text-tertiary system-xs-regular space-x-1'>
+          <div className='text-text-primary system-sm-medium h-4 truncate leading-4 '>{getLocalizedText(payload.label)}</div>
+          <div className='text-text-tertiary system-xs-regular h-5 truncate leading-5'>{getLocalizedText(payload.brief)}</div>
+          <div className='text-text-tertiary system-xs-regular flex space-x-1'>
             <div>{payload.org}</div>
             <div>·</div>
             <div>{t('plugin.install', { num: formatNumber(payload.install_count || 0) })}</div>
           </div>
         </div>
         {/* Action */}
-        <div className={cn(!open ? 'hidden' : 'flex', 'group-hover/plugin:flex  items-center space-x-1 h-4 text-components-button-secondary-accent-text system-xs-medium')}>
-          <div className='px-1.5 cursor-pointer' onClick={showInstallModal}>{t('plugin.installAction')}</div>
+        <div className={cn(!open ? 'hidden' : 'flex', 'text-components-button-secondary-accent-text  system-xs-medium h-4 items-center space-x-1 group-hover/plugin:flex')}>
+          <div className='cursor-pointer px-1.5' onClick={showInstallModal}>{t('plugin.installAction')}</div>
           <Action
             open={open}
             onOpenChange={setOpen}
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
index 0c381c2a39..a952d4c0a2 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
@@ -68,12 +68,12 @@ const List = forwardRef<{ handleScroll: () => void }, Props>(({
   if (hasFilter) {
     return (
       <Link
-        className='sticky bottom-0 z-10 flex h-8 px-4 py-1 system-sm-medium items-center border-t border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-b-lg shadow-lg text-text-accent-light-mode-only cursor-pointer'
+        className='system-sm-medium border-components-panel-border bg-components-panel-bg-blur text-text-accent-light-mode-only sticky bottom-0 z-10 flex h-8 cursor-pointer items-center rounded-b-lg border-[0.5px] border-t px-4 py-1 shadow-lg'
         href={`${marketplaceUrlPrefix}/`}
         target='_blank'
       >
         <span>{t('plugin.findMoreInMarketplace')}</span>
-        <RiArrowRightUpLine className='ml-0.5 w-3 h-3' />
+        <RiArrowRightUpLine className='ml-0.5 h-3 w-3' />
       </Link>
     )
   }
@@ -84,18 +84,18 @@ const List = forwardRef<{ handleScroll: () => void }, Props>(({
     <>
       {hasRes && (
         <div
-          className={cn('sticky z-10 flex justify-between h-8 px-4 py-1 text-text-primary system-sm-medium cursor-pointer', stickyClassName, !disableMaxWidth && maxWidthClassName)}
+          className={cn('text-text-primary system-sm-medium sticky z-10 flex h-8 cursor-pointer justify-between px-4 py-1', stickyClassName, !disableMaxWidth && maxWidthClassName)}
           onClick={handleHeadClick}
         >
           <span>{t('plugin.fromMarketplace')}</span>
           <Link
             href={urlWithSearchText}
             target='_blank'
-            className='flex items-center text-text-accent-light-mode-only'
+            className='text-text-accent-light-mode-only flex items-center'
             onClick={e => e.stopPropagation()}
           >
             <span>{t('plugin.searchInMarketplace')}</span>
-            <RiArrowRightUpLine className='ml-0.5 w-3 h-3' />
+            <RiArrowRightUpLine className='ml-0.5 h-3 w-3' />
           </Link>
         </div>
       )}
@@ -107,17 +107,17 @@ const List = forwardRef<{ handleScroll: () => void }, Props>(({
             onAction={() => { }}
           />
         ))}
-        <div className='mt-2 mb-3 flex items-center justify-center space-x-2'>
-          <div className="w-[90px] h-[2px] bg-gradient-to-l from-[rgba(16,24,40,0.08)] to-[rgba(255,255,255,0.01)]"></div>
+        <div className='mb-3 mt-2 flex items-center justify-center space-x-2'>
+          <div className="h-[2px] w-[90px] bg-gradient-to-l from-[rgba(16,24,40,0.08)] to-[rgba(255,255,255,0.01)]"></div>
           <Link
             href={urlWithSearchText}
             target='_blank'
-            className='shrink-0 flex items-center h-4 system-sm-medium text-text-accent-light-mode-only'
+            className='system-sm-medium text-text-accent-light-mode-only flex h-4 shrink-0 items-center'
           >
-            <RiSearchLine className='mr-0.5 w-3 h-3' />
+            <RiSearchLine className='mr-0.5 h-3 w-3' />
             <span>{t('plugin.searchInMarketplace')}</span>
           </Link>
-          <div className="w-[90px] h-[2px] bg-gradient-to-l from-[rgba(255,255,255,0.01)] to-[rgba(16,24,40,0.08)]"></div>
+          <div className="h-[2px] w-[90px] bg-gradient-to-l from-[rgba(255,255,255,0.01)] to-[rgba(16,24,40,0.08)]"></div>
         </div>
       </div>
     </>
diff --git a/web/app/components/workflow/block-selector/tabs.tsx b/web/app/components/workflow/block-selector/tabs.tsx
index d689773518..2eaa254f11 100644
--- a/web/app/components/workflow/block-selector/tabs.tsx
+++ b/web/app/components/workflow/block-selector/tabs.tsx
@@ -36,15 +36,15 @@ const Tabs: FC<TabsProps> = ({
     <div onClick={e => e.stopPropagation()}>
       {
         !noBlocks && (
-          <div className='flex items-center px-3 border-b-[0.5px] border-divider-subtle'>
+          <div className='border-divider-subtle flex items-center border-b-[0.5px] px-3'>
             {
               tabs.map(tab => (
                 <div
                   key={tab.key}
                   className={cn(
-                    'relative mr-4 pt-1 pb-2 system-sm-medium cursor-pointer',
+                    'system-sm-medium relative mr-4 cursor-pointer pb-2 pt-1',
                     activeTab === tab.key
-                      ? 'text-text-primary after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-util-colors-blue-brand-blue-brand-600'
+                      ? 'text-text-primary after:bg-util-colors-blue-brand-blue-brand-600 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full'
                       : 'text-text-tertiary',
                   )}
                   onClick={() => onActiveTabChange(tab.key)}
diff --git a/web/app/components/workflow/block-selector/tool-picker.tsx b/web/app/components/workflow/block-selector/tool-picker.tsx
index 4ba670cf0e..15a192c54b 100644
--- a/web/app/components/workflow/block-selector/tool-picker.tsx
+++ b/web/app/components/workflow/block-selector/tool-picker.tsx
@@ -142,7 +142,7 @@ const ToolPicker: FC<Props> = ({
       </PortalToFollowElemTrigger>
 
       <PortalToFollowElemContent className='z-[1000]'>
-        <div className={cn('relative w-[356px] min-h-20 rounded-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg', panelClassName)}>
+        <div className={cn('bg-components-panel-bg-blur border-components-panel-border relative min-h-20 w-[356px] rounded-xl border-[0.5px] shadow-lg backdrop-blur-sm', panelClassName)}>
           <div className='p-2 pb-1'>
             <SearchBox
               search={searchText}
diff --git a/web/app/components/workflow/block-selector/tool/action-item.tsx b/web/app/components/workflow/block-selector/tool/action-item.tsx
index 411faccb3a..507e6b30a7 100644
--- a/web/app/components/workflow/block-selector/tool/action-item.tsx
+++ b/web/app/components/workflow/block-selector/tool/action-item.tsx
@@ -43,14 +43,14 @@ const ToolItem: FC<Props> = ({
             type={BlockEnum.Tool}
             toolIcon={provider.icon}
           />
-          <div className='mb-1 text-sm leading-5 text-text-primary'>{payload.label[language]}</div>
-          <div className='text-xs text-text-secondary leading-[18px]'>{payload.description[language]}</div>
+          <div className='text-text-primary mb-1 text-sm leading-5'>{payload.label[language]}</div>
+          <div className='text-text-secondary text-xs leading-[18px]'>{payload.description[language]}</div>
         </div>
       )}
     >
       <div
         key={payload.name}
-        className='flex justify-between items-center pr-1 rounded-lg pl-[21px] hover:bg-state-base-hover cursor-pointer'
+        className='hover:bg-state-base-hover flex cursor-pointer items-center justify-between rounded-lg pl-[21px] pr-1'
         onClick={() => {
           if (disabled) return
           const params: Record<string, string> = {}
@@ -73,12 +73,12 @@ const ToolItem: FC<Props> = ({
           })
         }}
       >
-        <div className={cn('h-8 leading-8 border-l-2 border-divider-subtle pl-4 truncate text-text-secondary system-sm-medium', disabled && 'opacity-30')}>{payload.label[language]}</div>
+        <div className={cn('border-divider-subtle text-text-secondary system-sm-medium h-8 truncate border-l-2 pl-4 leading-8', disabled && 'opacity-30')}>{payload.label[language]}</div>
         {disabled && <Badge
-          className='flex items-center h-5 text-text-tertiary space-x-0.5'
+          className='text-text-tertiary flex h-5 items-center space-x-0.5'
           uppercase
         >
-          <RiCheckLine className='w-3 h-3 ' />
+          <RiCheckLine className='h-3 w-3 ' />
           <div>{t('tools.addToolModal.added')}</div>
         </Badge>
         }
diff --git a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx
index 65afef8ba9..2f7be1591e 100644
--- a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx
@@ -24,7 +24,7 @@ const Item: FC<Props> = ({
 }) => {
   return (
     <div>
-      <div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>
+      <div className='text-text-tertiary flex h-[22px] items-center px-3 text-xs font-medium'>
         {groupName}
       </div>
       <div>
diff --git a/web/app/components/workflow/block-selector/tool/tool.tsx b/web/app/components/workflow/block-selector/tool/tool.tsx
index 0711c0e1a4..d4d4995f5e 100644
--- a/web/app/components/workflow/block-selector/tool/tool.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool.tsx
@@ -75,7 +75,7 @@ const Tool: FC<Props> = ({
     >
       <div className={cn(className)}>
         <div
-          className='flex items-center justify-between pl-3 pr-1 w-full rounded-lg hover:bg-state-base-hover cursor-pointer select-none'
+          className='hover:bg-state-base-hover flex w-full cursor-pointer select-none items-center justify-between rounded-lg pl-3 pr-1'
           onClick={() => {
             if (hasAction)
               setFold(!isFold)
@@ -97,13 +97,13 @@ const Tool: FC<Props> = ({
             // })
           }}
         >
-          <div className='flex grow items-center h-8'>
+          <div className='flex h-8 grow items-center'>
             <BlockIcon
               className='shrink-0'
               type={BlockEnum.Tool}
               toolIcon={payload.icon}
             />
-            <div className='ml-2 text-sm text-text-primary flex-1 w-0 grow truncate'>{payload.label[language]}</div>
+            <div className='text-text-primary ml-2 w-0 flex-1 grow truncate text-sm'>{payload.label[language]}</div>
           </div>
 
           <div className='flex items-center'>
@@ -111,7 +111,7 @@ const Tool: FC<Props> = ({
               <div className='text-text-tertiary system-xs-regular'>{groupName}</div>
             )}
             {hasAction && (
-              <FoldIcon className={cn('w-4 h-4 text-text-quaternary shrink-0', isFold && 'text-text-tertiary')} />
+              <FoldIcon className={cn('text-text-quaternary h-4 w-4 shrink-0', isFold && 'text-text-tertiary')} />
             )}
           </div>
         </div>
diff --git a/web/app/components/workflow/block-selector/tools.tsx b/web/app/components/workflow/block-selector/tools.tsx
index 94374be9b8..a3db8d2dd4 100644
--- a/web/app/components/workflow/block-selector/tools.tsx
+++ b/web/app/components/workflow/block-selector/tools.tsx
@@ -90,7 +90,7 @@ const Blocks = ({
     <div className={classNames('p-1 max-w-[320px]', className)}>
       {
         !tools.length && !showWorkflowEmpty && (
-          <div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>{t('workflow.tabs.noResult')}</div>
+          <div className='text-text-tertiary flex h-[22px] items-center px-3 text-xs font-medium'>{t('workflow.tabs.noResult')}</div>
         )
       }
       {!tools.length && showWorkflowEmpty && (
diff --git a/web/app/components/workflow/block-selector/view-type-select.tsx b/web/app/components/workflow/block-selector/view-type-select.tsx
index d76926e619..1ec3b906d7 100644
--- a/web/app/components/workflow/block-selector/view-type-select.tsx
+++ b/web/app/components/workflow/block-selector/view-type-select.tsx
@@ -27,10 +27,10 @@ const ViewTypeSelect: FC<Props> = ({
   }, [viewType, onChange])
 
   return (
-    <div className='flex items-center rounded-lg bg-components-segmented-control-bg-normal p-px'>
+    <div className='bg-components-segmented-control-bg-normal flex items-center rounded-lg p-px'>
       <div
         className={
-          cn('p-[3px] rounded-lg',
+          cn('rounded-lg p-[3px]',
             viewType === ViewType.flat
               ? 'bg-components-segmented-control-item-active-bg shadow-xs text-text-accent-light-mode-only'
               : 'text-text-tertiary cursor-pointer',
@@ -38,11 +38,11 @@ const ViewTypeSelect: FC<Props> = ({
         }
         onClick={handleChange(ViewType.flat)}
       >
-        <RiSortAlphabetAsc className='w-4 h-4' />
+        <RiSortAlphabetAsc className='h-4 w-4' />
       </div>
       <div
         className={
-          cn('p-[3px] rounded-lg',
+          cn('rounded-lg p-[3px]',
             viewType === ViewType.tree
               ? 'bg-components-segmented-control-item-active-bg shadow-xs text-text-accent-light-mode-only'
               : 'text-text-tertiary cursor-pointer',
@@ -50,7 +50,7 @@ const ViewTypeSelect: FC<Props> = ({
         }
         onClick={handleChange(ViewType.tree)}
       >
-        <RiNodeTree className='w-4 h-4 ' />
+        <RiNodeTree className='h-4 w-4 ' />
       </div>
     </div>
   )
diff --git a/web/app/components/workflow/dsl-export-confirm-modal.tsx b/web/app/components/workflow/dsl-export-confirm-modal.tsx
index 69bf1abfe5..5850c29649 100644
--- a/web/app/components/workflow/dsl-export-confirm-modal.tsx
+++ b/web/app/components/workflow/dsl-export-confirm-modal.tsx
@@ -33,29 +33,29 @@ const DSLExportConfirmModal = ({
     <Modal
       isShow={true}
       onClose={() => { }}
-      className={cn('max-w-[480px] w-[480px]')}
+      className={cn('w-[480px] max-w-[480px]')}
     >
-      <div className='relative pb-6 title-2xl-semi-bold text-text-primary'>{t('workflow.env.export.title')}</div>
-      <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
-        <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+      <div className='title-2xl-semi-bold text-text-primary relative pb-6'>{t('workflow.env.export.title')}</div>
+      <div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onClose}>
+        <RiCloseLine className='text-text-tertiary h-4 w-4' />
       </div>
       <div className='relative'>
-        <table className='w-full border-separate border-spacing-0 border border-divider-regular radius-md shadow-xs'>
+        <table className='border-divider-regular radius-md shadow-xs w-full border-separate border-spacing-0 border'>
           <thead className='system-xs-medium-uppercase text-text-tertiary'>
             <tr>
-              <td width={220} className='h-7 pl-3 border-r border-b border-divider-regular'>NAME</td>
-              <td className='h-7 pl-3 border-b border-divider-regular'>VALUE</td>
+              <td width={220} className='border-divider-regular h-7 border-b border-r pl-3'>NAME</td>
+              <td className='border-divider-regular h-7 border-b pl-3'>VALUE</td>
             </tr>
           </thead>
           <tbody>
             {envList.map((env, index) => (
               <tr key={env.name}>
-                <td className={cn('h-7 pl-3 border-r system-xs-medium', index + 1 !== envList.length && 'border-b')}>
-                  <div className='flex gap-1 items-center w-[200px]'>
-                    <Env className='shrink-0 w-4 h-4 text-util-colors-violet-violet-600' />
+                <td className={cn('system-xs-medium h-7 border-r pl-3', index + 1 !== envList.length && 'border-b')}>
+                  <div className='flex w-[200px] items-center gap-1'>
+                    <Env className='text-util-colors-violet-violet-600 h-4 w-4 shrink-0' />
                     <div className='text-text-primary truncate'>{env.name}</div>
-                    <div className='shrink-0 text-text-tertiary'>Secret</div>
-                    <RiLock2Line className='shrink-0 w-3 h-3 text-text-tertiary' />
+                    <div className='text-text-tertiary shrink-0'>Secret</div>
+                    <RiLock2Line className='text-text-tertiary h-3 w-3 shrink-0' />
                   </div>
                 </td>
                 <td className={cn('h-7 pl-3', index + 1 !== envList.length && 'border-b')}>
diff --git a/web/app/components/workflow/header/chat-variable-button.tsx b/web/app/components/workflow/header/chat-variable-button.tsx
index 39745d4fb5..a2e12b9e94 100644
--- a/web/app/components/workflow/header/chat-variable-button.tsx
+++ b/web/app/components/workflow/header/chat-variable-button.tsx
@@ -16,7 +16,7 @@ const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
 
   return (
     <Button className='p-2' disabled={disabled} onClick={handleClick}>
-      <BubbleX className='w-4 h-4 text-components-button-secondary-text' />
+      <BubbleX className='text-components-button-secondary-text h-4 w-4' />
     </Button>
   )
 }
diff --git a/web/app/components/workflow/header/checklist.tsx b/web/app/components/workflow/header/checklist.tsx
index 6a9a6a6b9f..7465ed9c0a 100644
--- a/web/app/components/workflow/header/checklist.tsx
+++ b/web/app/components/workflow/header/checklist.tsx
@@ -57,20 +57,20 @@ const WorkflowChecklist = ({
       <PortalToFollowElemTrigger onClick={() => !disabled && setOpen(v => !v)}>
         <div
           className={cn(
-            'relative ml-0.5 flex items-center justify-center w-7 h-7 rounded-md',
-            disabled && 'opacity-50 cursor-not-allowed',
+            'relative ml-0.5 flex h-7 w-7 items-center justify-center rounded-md',
+            disabled && 'cursor-not-allowed opacity-50',
           )}
         >
           <div
-            className={cn('group flex items-center justify-center w-full h-full rounded-md cursor-pointer hover:bg-state-accent-hover', open && 'bg-state-accent-hover')}
+            className={cn('hover:bg-state-accent-hover group flex h-full w-full cursor-pointer items-center justify-center rounded-md', open && 'bg-state-accent-hover')}
           >
             <RiListCheck3
-              className={cn('w-4 h-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')}
+              className={cn('group-hover:text-components-button-secondary-accent-text h-4 w-4', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')}
             />
           </div>
           {
             !!needWarningNodes.length && (
-              <div className='absolute -right-1.5 -top-1.5 flex items-center justify-center min-w-[18px] h-[18px] rounded-full border border-gray-100 text-white text-[11px] font-semibold bg-[#F79009]'>
+              <div className='absolute -right-1.5 -top-1.5 flex h-[18px] min-w-[18px] items-center justify-center rounded-full border border-gray-100 bg-[#F79009] text-[11px] font-semibold text-white'>
                 {needWarningNodes.length}
               </div>
             )
@@ -79,18 +79,18 @@ const WorkflowChecklist = ({
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[12]'>
         <div
-          className='w-[420px] rounded-2xl bg-white border-[0.5px] border-black/5 shadow-lg overflow-y-auto'
+          className='w-[420px] overflow-y-auto rounded-2xl border-[0.5px] border-black/5 bg-white shadow-lg'
           style={{
             maxHeight: 'calc(2 / 3 * 100vh)',
           }}
         >
-          <div className='sticky top-0 bg-white flex items-center pl-4 pr-3 pt-3 h-[44px] text-md font-semibold text-gray-900 z-[1]'>
+          <div className='text-md sticky top-0 z-[1] flex h-[44px] items-center bg-white pl-4 pr-3 pt-3 font-semibold text-gray-900'>
             <div className='grow'>{t('workflow.panel.checklist')}{needWarningNodes.length ? `(${needWarningNodes.length})` : ''}</div>
             <div
-              className='shrink-0 flex items-center justify-center w-6 h-6 cursor-pointer'
+              className='flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center'
               onClick={() => setOpen(false)}
             >
-              <RiCloseLine className='w-4 h-4 text-gray-500' />
+              <RiCloseLine className='h-4 w-4 text-gray-500' />
             </div>
           </div>
           <div className='py-2'>
@@ -103,13 +103,13 @@ const WorkflowChecklist = ({
                       needWarningNodes.map(node => (
                         <div
                           key={node.id}
-                          className='mb-2 last-of-type:mb-0 border-[0.5px] border-gray-200 bg-white shadow-xs rounded-lg cursor-pointer'
+                          className='shadow-xs mb-2 cursor-pointer rounded-lg border-[0.5px] border-gray-200 bg-white last-of-type:mb-0'
                           onClick={() => {
                             handleNodeSelect(node.id)
                             setOpen(false)
                           }}
                         >
-                          <div className='flex items-center p-2 h-9 text-xs font-medium text-gray-700'>
+                          <div className='flex h-9 items-center p-2 text-xs font-medium text-gray-700'>
                             <BlockIcon
                               type={node.type}
                               className='mr-1.5'
@@ -119,12 +119,12 @@ const WorkflowChecklist = ({
                               {node.title}
                             </span>
                           </div>
-                          <div className='border-t-[0.5px] border-t-black/2'>
+                          <div className='border-t-black/2 border-t-[0.5px]'>
                             {
                               node.unConnected && (
-                                <div className='px-3 py-2 bg-gray-25 rounded-b-lg'>
+                                <div className='bg-gray-25 rounded-b-lg px-3 py-2'>
                                   <div className='flex text-xs leading-[18px] text-gray-500'>
-                                    <AlertTriangle className='mt-[3px] mr-2 w-3 h-3 text-[#F79009]' />
+                                    <AlertTriangle className='mr-2 mt-[3px] h-3 w-3 text-[#F79009]' />
                                     {t('workflow.common.needConnectTip')}
                                   </div>
                                 </div>
@@ -132,9 +132,9 @@ const WorkflowChecklist = ({
                             }
                             {
                               node.errorMessage && (
-                                <div className='px-3 py-2 bg-gray-25 rounded-b-lg'>
+                                <div className='bg-gray-25 rounded-b-lg px-3 py-2'>
                                   <div className='flex text-xs leading-[18px] text-gray-500'>
-                                    <AlertTriangle className='mt-[3px] mr-2 w-3 h-3 text-[#F79009]' />
+                                    <AlertTriangle className='mr-2 mt-[3px] h-3 w-3 text-[#F79009]' />
                                     {node.errorMessage}
                                   </div>
                                 </div>
@@ -150,8 +150,8 @@ const WorkflowChecklist = ({
             }
             {
               !needWarningNodes.length && (
-                <div className='mx-4 mb-3 py-4 rounded-lg bg-gray-50 text-gray-400 text-xs text-center'>
-                  <ChecklistSquare className='mx-auto mb-[5px] w-8 h-8 text-gray-300' />
+                <div className='mx-4 mb-3 rounded-lg bg-gray-50 py-4 text-center text-xs text-gray-400'>
+                  <ChecklistSquare className='mx-auto mb-[5px] h-8 w-8 text-gray-300' />
                   {t('workflow.panel.checklistResolved')}
                 </div>
               )
diff --git a/web/app/components/workflow/header/editing-title.tsx b/web/app/components/workflow/header/editing-title.tsx
index 9148420cbe..a7fec2278c 100644
--- a/web/app/components/workflow/header/editing-title.tsx
+++ b/web/app/components/workflow/header/editing-title.tsx
@@ -13,7 +13,7 @@ const EditingTitle = () => {
   const isSyncingWorkflowDraft = useStore(s => s.isSyncingWorkflowDraft)
 
   return (
-    <div className='flex items-center h-[18px] system-xs-regular text-text-tertiary'>
+    <div className='system-xs-regular text-text-tertiary flex h-[18px] items-center'>
       {
         !!draftUpdatedAt && (
           <>
@@ -21,7 +21,7 @@ const EditingTitle = () => {
           </>
         )
       }
-      <span className='flex items-center mx-1'>·</span>
+      <span className='mx-1 flex items-center'>·</span>
       {
         publishedAt
           ? `${t('workflow.common.published')} ${formatTimeFromNow(publishedAt)}`
@@ -30,7 +30,7 @@ const EditingTitle = () => {
       {
         isSyncingWorkflowDraft && (
           <>
-            <span className='flex items-center mx-1'>·</span>
+            <span className='mx-1 flex items-center'>·</span>
             {t('workflow.common.syncingData')}
           </>
         )
diff --git a/web/app/components/workflow/header/env-button.tsx b/web/app/components/workflow/header/env-button.tsx
index 71598776de..e7c56fe833 100644
--- a/web/app/components/workflow/header/env-button.tsx
+++ b/web/app/components/workflow/header/env-button.tsx
@@ -16,7 +16,7 @@ const EnvButton = ({ disabled }: { disabled: boolean }) => {
 
   return (
     <Button className='p-2' disabled={disabled} onClick={handleClick}>
-      <Env className='w-4 h-4 text-components-button-secondary-text' />
+      <Env className='text-components-button-secondary-text h-4 w-4' />
     </Button>
   )
 }
diff --git a/web/app/components/workflow/header/global-variable-button.tsx b/web/app/components/workflow/header/global-variable-button.tsx
index ff02604b26..cda79e07e0 100644
--- a/web/app/components/workflow/header/global-variable-button.tsx
+++ b/web/app/components/workflow/header/global-variable-button.tsx
@@ -12,7 +12,7 @@ const GlobalVariableButton = ({ disabled }: { disabled: boolean }) => {
 
   return (
     <Button className='p-2' disabled={disabled} onClick={handleClick}>
-      <GlobalVariable className='w-4 h-4 text-components-button-secondary-text' />
+      <GlobalVariable className='text-components-button-secondary-text h-4 w-4' />
     </Button>
   )
 }
diff --git a/web/app/components/workflow/header/index.tsx b/web/app/components/workflow/header/index.tsx
index d15cd92d06..46371b1e28 100644
--- a/web/app/components/workflow/header/index.tsx
+++ b/web/app/components/workflow/header/index.tsx
@@ -150,7 +150,7 @@ const Header: FC = () => {
 
   return (
     <div
-      className='absolute top-0 left-0 z-10 flex items-center justify-between w-full px-3 h-14 bg-mask-top2bottom-gray-50-to-transparent'
+      className='bg-mask-top2bottom-gray-50-to-transparent absolute left-0 top-0 z-10 flex h-14 w-full items-center justify-between px-3'
     >
       <div>
         {
@@ -174,10 +174,10 @@ const Header: FC = () => {
             {/* <GlobalVariableButton disabled={nodesReadOnly} /> */}
             {isChatMode && <ChatVariableButton disabled={nodesReadOnly} />}
             <EnvButton disabled={nodesReadOnly} />
-            <Divider type='vertical' className='h-3.5 mx-auto' />
+            <Divider type='vertical' className='mx-auto h-3.5' />
             <RunAndHistory />
             <Button className='text-components-button-secondary-text' onClick={handleShowFeatures}>
-              <RiApps2AddLine className='w-4 h-4 mr-1 text-components-button-secondary-text' />
+              <RiApps2AddLine className='text-components-button-secondary-text mr-1 h-4 w-4' />
               {t('workflow.common.features')}
             </Button>
             <AppPublisher
@@ -201,12 +201,12 @@ const Header: FC = () => {
         viewHistory && (
           <div className='flex items-center space-x-2'>
             <ViewHistory withText />
-            <Divider type='vertical' className='h-3.5 mx-auto' />
+            <Divider type='vertical' className='mx-auto h-3.5' />
             <Button
               variant='primary'
               onClick={handleGoBackToEdit}
             >
-              <ArrowNarrowLeft className='w-4 h-4 mr-1' />
+              <ArrowNarrowLeft className='mr-1 h-4 w-4' />
               {t('workflow.common.goBackToEdit')}
             </Button>
           </div>
@@ -214,13 +214,13 @@ const Header: FC = () => {
       }
       {
         restoring && (
-          <div className='flex flex-col mt-auto'>
-            <div className='flex items-center justify-end my-4'>
+          <div className='mt-auto flex flex-col'>
+            <div className='my-4 flex items-center justify-end'>
               <Button className='text-components-button-secondary-text' onClick={handleShowFeatures}>
-                <RiApps2AddLine className='w-4 h-4 mr-1 text-components-button-secondary-text' />
+                <RiApps2AddLine className='text-components-button-secondary-text mr-1 h-4 w-4' />
                 {t('workflow.common.features')}
               </Button>
-              <div className='mx-2 w-[1px] h-3.5 bg-gray-200'></div>
+              <div className='mx-2 h-3.5 w-[1px] bg-gray-200'></div>
               <Button
                 className='mr-2'
                 onClick={handleCancelRestore}
diff --git a/web/app/components/workflow/header/restoring-title.tsx b/web/app/components/workflow/header/restoring-title.tsx
index 344e5e2754..d2b623debb 100644
--- a/web/app/components/workflow/header/restoring-title.tsx
+++ b/web/app/components/workflow/header/restoring-title.tsx
@@ -10,8 +10,8 @@ const RestoringTitle = () => {
   const publishedAt = useStore(state => state.publishedAt)
 
   return (
-    <div className='flex items-center h-[18px] text-xs text-gray-500'>
-      <ClockRefresh className='mr-1 w-3 h-3 text-gray-500' />
+    <div className='flex h-[18px] items-center text-xs text-gray-500'>
+      <ClockRefresh className='mr-1 h-3 w-3 text-gray-500' />
       {t('workflow.common.latestPublished')}<span> </span>
       {formatTimeFromNow(publishedAt)}
     </div>
diff --git a/web/app/components/workflow/header/run-and-history.tsx b/web/app/components/workflow/header/run-and-history.tsx
index d3c5b99964..f9ad7a85fd 100644
--- a/web/app/components/workflow/header/run-and-history.tsx
+++ b/web/app/components/workflow/header/run-and-history.tsx
@@ -31,7 +31,7 @@ const RunMode = memo(() => {
     <>
       <div
         className={cn(
-          'flex items-center px-2.5 h-7 rounded-md text-[13px] font-medium text-components-button-secondary-accent-text',
+          'text-components-button-secondary-accent-text flex h-7 items-center rounded-md px-2.5 text-[13px] font-medium',
           'hover:bg-state-accent-hover cursor-pointer',
           isRunning && 'bg-state-accent-hover !cursor-not-allowed',
         )}
@@ -43,13 +43,13 @@ const RunMode = memo(() => {
           isRunning
             ? (
               <>
-                <RiLoader2Line className='mr-1 w-4 h-4 animate-spin' />
+                <RiLoader2Line className='mr-1 h-4 w-4 animate-spin' />
                 {t('workflow.common.running')}
               </>
             )
             : (
               <>
-                <RiPlayLargeLine className='mr-1 w-4 h-4' />
+                <RiPlayLargeLine className='mr-1 h-4 w-4' />
                 {t('workflow.common.run')}
               </>
             )
@@ -58,10 +58,10 @@ const RunMode = memo(() => {
       {
         isRunning && (
           <div
-            className='flex items-center justify-center ml-0.5 w-7 h-7 cursor-pointer hover:bg-black/5 rounded-md'
+            className='ml-0.5 flex h-7 w-7 cursor-pointer items-center justify-center rounded-md hover:bg-black/5'
             onClick={() => handleStopRun(workflowRunningData?.task_id || '')}
           >
-            <StopCircle className='w-4 h-4 text-components-button-ghost-text' />
+            <StopCircle className='text-components-button-ghost-text h-4 w-4' />
           </div>
         )
       }
@@ -77,12 +77,12 @@ const PreviewMode = memo(() => {
   return (
     <div
       className={cn(
-        'flex items-center px-2.5 h-7 rounded-md text-[13px] font-medium text-components-button-secondary-accent-text',
+        'text-components-button-secondary-accent-text flex h-7 items-center rounded-md px-2.5 text-[13px] font-medium',
         'hover:bg-state-accent-hover cursor-pointer',
       )}
       onClick={() => handleWorkflowStartRunInChatflow()}
     >
-      <RiPlayLargeLine className='mr-1 w-4 h-4' />
+      <RiPlayLargeLine className='mr-1 h-4 w-4' />
       {t('workflow.common.debugAndPreview')}
     </div>
   )
@@ -94,14 +94,14 @@ const RunAndHistory: FC = () => {
   const { nodesReadOnly } = useNodesReadOnly()
 
   return (
-    <div className='flex items-center px-0.5 h-8 rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs'>
+    <div className='border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs flex h-8 items-center rounded-lg border-[0.5px] px-0.5'>
       {
         !isChatMode && <RunMode />
       }
       {
         isChatMode && <PreviewMode />
       }
-      <div className='mx-0.5 w-[1px] h-3.5 bg-divider-regular'></div>
+      <div className='bg-divider-regular mx-0.5 h-3.5 w-[1px]'></div>
       <ViewHistory />
       <Checklist disabled={nodesReadOnly} />
     </div>
diff --git a/web/app/components/workflow/header/running-title.tsx b/web/app/components/workflow/header/running-title.tsx
index 2b635f9c21..0460a96c91 100644
--- a/web/app/components/workflow/header/running-title.tsx
+++ b/web/app/components/workflow/header/running-title.tsx
@@ -10,11 +10,11 @@ const RunningTitle = () => {
   const historyWorkflowData = useStore(s => s.historyWorkflowData)
 
   return (
-    <div className='flex items-center h-[18px] text-xs text-gray-500'>
-      <ClockPlay className='mr-1 w-3 h-3 text-gray-500' />
+    <div className='flex h-[18px] items-center text-xs text-gray-500'>
+      <ClockPlay className='mr-1 h-3 w-3 text-gray-500' />
       <span>{isChatMode ? `Test Chat#${historyWorkflowData?.sequence_number}` : `Test Run#${historyWorkflowData?.sequence_number}`}</span>
       <span className='mx-1'>·</span>
-      <span className='ml-1 uppercase flex items-center px-1 h-[18px] rounded-[5px] border border-indigo-300 bg-white/[0.48] text-[10px] font-semibold text-indigo-600'>
+      <span className='ml-1 flex h-[18px] items-center rounded-[5px] border border-indigo-300 bg-white/[0.48] px-1 text-[10px] font-semibold uppercase text-indigo-600'>
         {t('workflow.common.viewOnly')}
       </span>
     </div>
diff --git a/web/app/components/workflow/header/undo-redo.tsx b/web/app/components/workflow/header/undo-redo.tsx
index 289fb01dc7..b1d4750f19 100644
--- a/web/app/components/workflow/header/undo-redo.tsx
+++ b/web/app/components/workflow/header/undo-redo.tsx
@@ -31,7 +31,7 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
   const { nodesReadOnly } = useNodesReadOnly()
 
   return (
-    <div className='flex items-center space-x-0.5 p-0.5 backdrop-blur-[5px] rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-lg'>
+    <div className='border-components-actionbar-border bg-components-actionbar-bg flex items-center space-x-0.5 rounded-lg border-[0.5px] p-0.5 shadow-lg backdrop-blur-[5px]'>
       <TipPopup title={t('workflow.common.undo')!} shortcuts={['ctrl', 'z']}>
         <div
           data-tooltip-id='workflow.undo'
@@ -57,7 +57,7 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
           <RiArrowGoForwardFill className='h-4 w-4' />
         </div>
       </TipPopup>
-      <Divider type='vertical' className="h-3.5 mx-0.5" />
+      <Divider type='vertical' className="mx-0.5 h-3.5" />
       <ViewWorkflowHistory />
     </div >
   )
diff --git a/web/app/components/workflow/header/version-history-item.tsx b/web/app/components/workflow/header/version-history-item.tsx
index a1ec550ff6..b79992b1be 100644
--- a/web/app/components/workflow/header/version-history-item.tsx
+++ b/web/app/components/workflow/header/version-history-item.tsx
@@ -38,7 +38,7 @@ const VersionHistoryItem: React.FC<VersionHistoryItemProps> = ({ item, selectedV
   const renderVersionLabel = (version: string) => (
     (version === WorkflowVersion.Draft || version === WorkflowVersion.Latest)
       ? (
-        <div className="shrink-0 px-1 border bg-white border-[rgba(0,0,0,0.08)] rounded-[5px] truncate">
+        <div className="shrink-0 truncate rounded-[5px] border border-[rgba(0,0,0,0.08)] bg-white px-1">
           {version}
         </div>
       )
@@ -48,7 +48,7 @@ const VersionHistoryItem: React.FC<VersionHistoryItemProps> = ({ item, selectedV
   return (
     <div
       className={cn(
-        'flex items-center p-2 h-12 text-xs font-medium text-gray-700 justify-between',
+        'flex h-12 items-center justify-between p-2 text-xs font-medium text-gray-700',
         formattedVersion === selectedVersion ? '' : 'hover:bg-gray-100',
         formattedVersion === WorkflowVersion.Draft ? 'cursor-not-allowed' : 'cursor-pointer',
       )}
diff --git a/web/app/components/workflow/header/version-history-modal.tsx b/web/app/components/workflow/header/version-history-modal.tsx
index a2cd458cec..ba60814eb2 100644
--- a/web/app/components/workflow/header/version-history-modal.tsx
+++ b/web/app/components/workflow/header/version-history-modal.tsx
@@ -39,11 +39,11 @@ const VersionHistoryModal = () => {
   }
 
   return (
-    <div className='w-[336px] bg-white rounded-2xl border-[0.5px] border-gray-200 shadow-xl p-2'>
+    <div className='w-[336px] rounded-2xl border-[0.5px] border-gray-200 bg-white p-2 shadow-xl'>
       <div className="max-h-[400px] overflow-auto">
         {(isLoading && page) === 1
           ? (
-            <div className='flex items-center justify-center h-10'>
+            <div className='flex h-10 items-center justify-center'>
               <Loading/>
             </div>
           )
@@ -60,12 +60,12 @@ const VersionHistoryModal = () => {
                 />
               ))}
               {isLoading && page > 1 && (
-                <div className='flex items-center justify-center h-10'>
+                <div className='flex h-10 items-center justify-center'>
                   <Loading/>
                 </div>
               )}
               {!isLoading && versionHistory?.has_more && (
-                <div className='flex items-center justify-center h-10 mt-2'>
+                <div className='mt-2 flex h-10 items-center justify-center'>
                   <Button
                     className='text-sm'
                     onClick={handleNextPage}
@@ -75,7 +75,7 @@ const VersionHistoryModal = () => {
                 </div>
               )}
               {!isLoading && !versionHistory?.items?.length && (
-                <div className='flex items-center justify-center h-10 text-gray-500'>
+                <div className='flex h-10 items-center justify-center text-gray-500'>
                   {t('workflow.common.noHistory')}
                 </div>
               )}
diff --git a/web/app/components/workflow/header/view-history.tsx b/web/app/components/workflow/header/view-history.tsx
index 82d8a302c5..b3ab000f29 100644
--- a/web/app/components/workflow/header/view-history.tsx
+++ b/web/app/components/workflow/header/view-history.tsx
@@ -87,12 +87,12 @@ const ViewHistory = ({
           {
             withText && (
               <div className={cn(
-                'flex items-center px-3 h-8 rounded-lg border-[0.5px] border-gray-200 bg-white shadow-xs',
-                'text-[13px] font-medium text-primary-600 cursor-pointer',
+                'shadow-xs flex h-8 items-center rounded-lg border-[0.5px] border-gray-200 bg-white px-3',
+                'text-primary-600 cursor-pointer text-[13px] font-medium',
                 open && '!bg-primary-50',
               )}>
                 <ClockPlay
-                  className={'mr-1 w-4 h-4'}
+                  className={'mr-1 h-4 w-4'}
                 />
                 {t('workflow.common.showRunHistory')}
               </div>
@@ -104,13 +104,13 @@ const ViewHistory = ({
                 popupContent={t('workflow.common.viewRunHistory')}
               >
                 <div
-                  className={cn('group flex items-center justify-center w-7 h-7 rounded-md hover:bg-state-accent-hover cursor-pointer', open && 'bg-state-accent-hover')}
+                  className={cn('hover:bg-state-accent-hover group flex h-7 w-7 cursor-pointer items-center justify-center rounded-md', open && 'bg-state-accent-hover')}
                   onClick={() => {
                     setCurrentLogItem()
                     setShowMessageLogModal(false)
                   }}
                 >
-                  <ClockPlay className={cn('w-4 h-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')} />
+                  <ClockPlay className={cn('group-hover:text-components-button-secondary-accent-text h-4 w-4', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')} />
                 </div>
               </Tooltip>
             )
@@ -118,27 +118,27 @@ const ViewHistory = ({
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[12]'>
           <div
-            className='flex flex-col ml-2 w-[240px] bg-white border-[0.5px] border-gray-200 shadow-xl rounded-xl overflow-y-auto'
+            className='ml-2 flex w-[240px] flex-col overflow-y-auto rounded-xl border-[0.5px] border-gray-200 bg-white shadow-xl'
             style={{
               maxHeight: 'calc(2 / 3 * 100vh)',
             }}
           >
-            <div className='sticky top-0 bg-white flex items-center justify-between px-4 pt-3 text-base font-semibold text-gray-900'>
+            <div className='sticky top-0 flex items-center justify-between bg-white px-4 pt-3 text-base font-semibold text-gray-900'>
               <div className='grow'>{t('workflow.common.runHistory')}</div>
               <div
-                className='shrink-0 flex items-center justify-center w-6 h-6 cursor-pointer'
+                className='flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center'
                 onClick={() => {
                   setCurrentLogItem()
                   setShowMessageLogModal(false)
                   setOpen(false)
                 }}
               >
-                <RiCloseLine className='w-4 h-4 text-gray-500' />
+                <RiCloseLine className='h-4 w-4 text-gray-500' />
               </div>
             </div>
             {
               isLoading && (
-                <div className='flex items-center justify-center h-10'>
+                <div className='flex h-10 items-center justify-center'>
                   <Loading />
                 </div>
               )
@@ -149,7 +149,7 @@ const ViewHistory = ({
                   {
                     !data?.data.length && (
                       <div className='py-12'>
-                        <ClockPlaySlim className='mx-auto mb-2 w-8 h-8 text-gray-300' />
+                        <ClockPlaySlim className='mx-auto mb-2 h-8 w-8 text-gray-300' />
                         <div className='text-center text-[13px] text-gray-400'>
                           {t('workflow.common.notRunning')}
                         </div>
@@ -161,7 +161,7 @@ const ViewHistory = ({
                       <div
                         key={item.id}
                         className={cn(
-                          'flex mb-0.5 px-2 py-[7px] rounded-lg hover:bg-primary-50 cursor-pointer',
+                          'hover:bg-primary-50 mb-0.5 flex cursor-pointer rounded-lg px-2 py-[7px]',
                           item.id === historyWorkflowData?.id && 'bg-primary-50',
                         )}
                         onClick={() => {
@@ -179,17 +179,17 @@ const ViewHistory = ({
                       >
                         {
                           !isChatMode && item.status === WorkflowRunningStatus.Stopped && (
-                            <AlertTriangle className='mt-0.5 mr-1.5 w-3.5 h-3.5 text-[#F79009]' />
+                            <AlertTriangle className='mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#F79009]' />
                           )
                         }
                         {
                           !isChatMode && item.status === WorkflowRunningStatus.Failed && (
-                            <RiErrorWarningLine className='mt-0.5 mr-1.5 w-3.5 h-3.5 text-[#F04438]' />
+                            <RiErrorWarningLine className='mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#F04438]' />
                           )
                         }
                         {
                           !isChatMode && item.status === WorkflowRunningStatus.Succeeded && (
-                            <RiCheckboxCircleLine className='mt-0.5 mr-1.5 w-3.5 h-3.5 text-[#12B76A]' />
+                            <RiCheckboxCircleLine className='mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#12B76A]' />
                           )
                         }
                         <div>
@@ -201,7 +201,7 @@ const ViewHistory = ({
                           >
                             {`Test ${isChatMode ? 'Chat' : 'Run'}#${item.sequence_number}`}
                           </div>
-                          <div className='flex items-center text-xs text-gray-500 leading-[18px]'>
+                          <div className='flex items-center text-xs leading-[18px] text-gray-500'>
                             {item.created_by_account?.name} · {formatTimeFromNow((item.finished_at || item.created_at) * 1000)}
                           </div>
                         </div>
diff --git a/web/app/components/workflow/header/view-workflow-history.tsx b/web/app/components/workflow/header/view-workflow-history.tsx
index 5614dc8af8..8c4ba554df 100644
--- a/web/app/components/workflow/header/view-workflow-history.tsx
+++ b/web/app/components/workflow/header/view-workflow-history.tsx
@@ -138,31 +138,31 @@ const ViewWorkflowHistory = () => {
                 setShowMessageLogModal(false)
               }}
             >
-              <RiHistoryLine className='w-4 h-4' />
+              <RiHistoryLine className='h-4 w-4' />
             </div>
           </TipPopup>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[12]'>
           <div
-            className='flex flex-col ml-2 min-w-[240px] max-w-[360px] bg-components-panel-bg-blur backdrop-blur-[5px] border-[0.5px] border-components-panel-border shadow-xl rounded-xl overflow-y-auto'
+            className='bg-components-panel-bg-blur border-components-panel-border ml-2 flex min-w-[240px] max-w-[360px] flex-col overflow-y-auto rounded-xl border-[0.5px] shadow-xl backdrop-blur-[5px]'
           >
             <div className='sticky top-0 flex items-center justify-between px-4 pt-3'>
-              <div className='grow text-text-secondary system-mg-regular'>{t('workflow.changeHistory.title')}</div>
+              <div className='text-text-secondary system-mg-regular grow'>{t('workflow.changeHistory.title')}</div>
               <div
-                className='shrink-0 flex items-center justify-center w-6 h-6 cursor-pointer'
+                className='flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center'
                 onClick={() => {
                   setCurrentLogItem()
                   setShowMessageLogModal(false)
                   setOpen(false)
                 }}
               >
-                <RiCloseLine className='w-4 h-4 text-text-secondary' />
+                <RiCloseLine className='text-text-secondary h-4 w-4' />
               </div>
             </div>
             {
               (
                 <div
-                  className='p-2 overflow-y-auto'
+                  className='overflow-y-auto p-2'
                   style={{
                     maxHeight: 'calc(1 / 2 * 100vh)',
                   }}
@@ -170,8 +170,8 @@ const ViewWorkflowHistory = () => {
                   {
                     !calculateChangeList.statesCount && (
                       <div className='py-12'>
-                        <RiHistoryLine className='mx-auto mb-2 w-8 h-8 text-text-tertiary' />
-                        <div className='text-center text-[13px] text-text-tertiary'>
+                        <RiHistoryLine className='text-text-tertiary mx-auto mb-2 h-8 w-8' />
+                        <div className='text-text-tertiary text-center text-[13px]'>
                           {t('workflow.changeHistory.placeholder')}
                         </div>
                       </div>
@@ -183,7 +183,7 @@ const ViewWorkflowHistory = () => {
                         <div
                           key={item?.index}
                           className={cn(
-                            'flex mb-0.5 px-2 py-[7px] rounded-lg hover:bg-state-base-hover text-text-secondary cursor-pointer',
+                            'hover:bg-state-base-hover text-text-secondary mb-0.5 flex cursor-pointer rounded-lg px-2 py-[7px]',
                             item?.index === currentHistoryStateIndex && 'bg-state-base-hover',
                           )}
                           onClick={() => {
@@ -194,7 +194,7 @@ const ViewWorkflowHistory = () => {
                           <div>
                             <div
                               className={cn(
-                                'flex items-center text-[13px] font-medium leading-[18px] text-text-secondary',
+                                'text-text-secondary flex items-center text-[13px] font-medium leading-[18px]',
                               )}
                             >
                               {item?.label || t('workflow.changeHistory.sessionStart')} ({calculateStepLabel(item?.index)}{item?.index === currentHistoryStateIndex && t('workflow.changeHistory.currentState')})
@@ -208,7 +208,7 @@ const ViewWorkflowHistory = () => {
                         <div
                           key={item?.index}
                           className={cn(
-                            'flex mb-0.5 px-2 py-[7px] rounded-lg hover:bg-state-base-hover cursor-pointer',
+                            'hover:bg-state-base-hover mb-0.5 flex cursor-pointer rounded-lg px-2 py-[7px]',
                             item?.index === calculateChangeList.statesCount - 1 && 'bg-state-base-hover',
                           )}
                           onClick={() => {
@@ -219,7 +219,7 @@ const ViewWorkflowHistory = () => {
                           <div>
                             <div
                               className={cn(
-                                'flex items-center text-[13px] font-medium leading-[18px] text-text-secondary',
+                                'text-text-secondary flex items-center text-[13px] font-medium leading-[18px]',
                               )}
                             >
                               {item?.label || t('workflow.changeHistory.sessionStart')} ({calculateStepLabel(item?.index)})
@@ -238,7 +238,7 @@ const ViewWorkflowHistory = () => {
                   <Divider className='m-0' />
                   <div
                     className={cn(
-                      'flex my-0.5 px-2 py-[7px] rounded-lg text-text-secondary cursor-pointer',
+                      'text-text-secondary my-0.5 flex cursor-pointer rounded-lg px-2 py-[7px]',
                       'hover:bg-state-base-hover',
                     )}
                     onClick={() => {
@@ -259,9 +259,9 @@ const ViewWorkflowHistory = () => {
                 </div>
               )
             }
-            <div className="px-3 w-[240px] py-2 text-xs text-text-tertiary" >
-              <div className="flex items-center mb-1 h-[22px] font-medium uppercase">{t('workflow.changeHistory.hint')}</div>
-              <div className="mb-1 text-text-tertiary leading-[18px]">{t('workflow.changeHistory.hintText')}</div>
+            <div className="text-text-tertiary w-[240px] px-3 py-2 text-xs" >
+              <div className="mb-1 flex h-[22px] items-center font-medium uppercase">{t('workflow.changeHistory.hint')}</div>
+              <div className="text-text-tertiary mb-1 leading-[18px]">{t('workflow.changeHistory.hintText')}</div>
             </div>
           </div>
         </PortalToFollowElemContent>
diff --git a/web/app/components/workflow/help-line/index.tsx b/web/app/components/workflow/help-line/index.tsx
index 769f5489c2..1de117d41f 100644
--- a/web/app/components/workflow/help-line/index.tsx
+++ b/web/app/components/workflow/help-line/index.tsx
@@ -15,7 +15,7 @@ const HelpLineHorizontal = memo(({
 
   return (
     <div
-      className='absolute h-[1px] bg-primary-300 z-[9]'
+      className='bg-primary-300 absolute z-[9] h-[1px]'
       style={{
         top: top * zoom + y,
         left: left * zoom + x,
@@ -35,7 +35,7 @@ const HelpLineVertical = memo(({
 
   return (
     <div
-      className='absolute w-[1px] bg-primary-300 z-[9]'
+      className='bg-primary-300 absolute z-[9] w-[1px]'
       style={{
         top: top * zoom + y,
         left: left * zoom + x,
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 0510109b39..40dbaf0446 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -281,7 +281,7 @@ const Workflow: FC<WorkflowProps> = memo(({
     <div
       id='workflow-container'
       className={`
-        relative w-full min-w-[960px] h-full 
+        relative h-full w-full min-w-[960px] 
         ${workflowReadOnly && 'workflow-panel-animation'}
         ${nodeAnimation && 'workflow-node-animation'}
       `}
@@ -404,7 +404,7 @@ const WorkflowWrap = memo(() => {
 
   if (!data || isLoading) {
     return (
-      <div className='flex justify-center items-center relative w-full h-full'>
+      <div className='relative flex h-full w-full items-center justify-center'>
         <Loading />
       </div>
     )
diff --git a/web/app/components/workflow/limit-tips.tsx b/web/app/components/workflow/limit-tips.tsx
index 8e90ff280c..dc25a5692d 100644
--- a/web/app/components/workflow/limit-tips.tsx
+++ b/web/app/components/workflow/limit-tips.tsx
@@ -13,24 +13,24 @@ const LimitTips = () => {
     return null
 
   return (
-    <div className='absolute bottom-16 left-1/2 -translate-x-1/2 flex items-center rounded-xl p-2 h-10 border border-components-panel-border bg-components-panel-bg-blur shadow-md z-[9]'>
+    <div className='border-components-panel-border bg-components-panel-bg-blur absolute bottom-16 left-1/2 z-[9] flex h-10 -translate-x-1/2 items-center rounded-xl border p-2 shadow-md'>
       <div
-        className='absolute inset-0 opacity-[0.4] rounded-xl'
+        className='absolute inset-0 rounded-xl opacity-[0.4]'
         style={{
           background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)',
         }}
       ></div>
-      <div className='flex items-center justify-center w-5 h-5'>
-        <RiAlertFill className='w-4 h-4 text-text-warning-secondary' />
+      <div className='flex h-5 w-5 items-center justify-center'>
+        <RiAlertFill className='text-text-warning-secondary h-4 w-4' />
       </div>
-      <div className='mx-1 px-1 system-xs-medium text-text-primary'>
+      <div className='system-xs-medium text-text-primary mx-1 px-1'>
         {showTips}
       </div>
       <ActionButton
         className='z-[1]'
         onClick={() => setShowTips('')}
       >
-        <RiCloseLine className='w-4 h-4' />
+        <RiCloseLine className='h-4 w-4' />
       </ActionButton>
     </div>
   )
diff --git a/web/app/components/workflow/nodes/_base/components/add-button.tsx b/web/app/components/workflow/nodes/_base/components/add-button.tsx
index c7fdcaa009..b9a8df811f 100644
--- a/web/app/components/workflow/nodes/_base/components/add-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/add-button.tsx
@@ -25,7 +25,7 @@ const AddButton: FC<Props> = ({
       size='medium'
       onClick={onClick}
     >
-      <RiAddLine className='mr-1 w-3.5 h-3.5' />
+      <RiAddLine className='mr-1 h-3.5 w-3.5' />
       <div>{text}</div>
     </Button>
   )
diff --git a/web/app/components/workflow/nodes/_base/components/add-variable-popup.tsx b/web/app/components/workflow/nodes/_base/components/add-variable-popup.tsx
index d44a644864..b442cf64a4 100644
--- a/web/app/components/workflow/nodes/_base/components/add-variable-popup.tsx
+++ b/web/app/components/workflow/nodes/_base/components/add-variable-popup.tsx
@@ -18,8 +18,8 @@ export const AddVariablePopup = ({
   const { t } = useTranslation()
 
   return (
-    <div className='w-[240px] bg-white border-[0.5px] border-gray-200 rounded-lg shadow-lg'>
-      <div className='flex items-center px-4 h-[34px] text-[13px] font-semibold text-gray-700 border-b-[0.5px] border-b-gray-200'>
+    <div className='w-[240px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg'>
+      <div className='flex h-[34px] items-center border-b-[0.5px] border-b-gray-200 px-4 text-[13px] font-semibold text-gray-700'>
         {t('workflow.nodes.variableAssigner.setAssignVariable')}
       </div>
       <div className='p-1'>
diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
index a96654c4d9..5fb158e64d 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
@@ -143,15 +143,15 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
   return <PortalToFollowElem open={open} onOpenChange={setOpen} placement='bottom'>
     <PortalToFollowElemTrigger className='w-full'>
       <div
-        className='h-8 p-1 gap-0.5 flex items-center rounded-lg bg-components-input-bg-normal w-full hover:bg-state-base-hover-alt select-none'
+        className='bg-components-input-bg-normal hover:bg-state-base-hover-alt flex h-8 w-full select-none items-center gap-0.5 rounded-lg p-1'
         onClick={() => setOpen(o => !o)}
       >
         {/* eslint-disable-next-line @next/next/no-img-element */}
-        {icon && <div className='flex items-center justify-center w-6 h-6'><img
+        {icon && <div className='flex h-6 w-6 items-center justify-center'><img
           src={icon}
           width={20}
           height={20}
-          className='rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge'
+          className='border-components-panel-border-subtle bg-background-default-dodge rounded-md border-[0.5px]'
           alt='icon'
         /></div>}
         <p
@@ -175,7 +175,7 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
                 title={t('workflow.nodes.agent.unsupportedStrategy')}
                 description={t('workflow.nodes.agent.strategyNotFoundDesc')}
               />
-              : <RiArrowDownSLine className='size-4 text-text-tertiary' />
+              : <RiArrowDownSLine className='text-text-tertiary size-4' />
           }
           {showSwitchVersion && <SwitchPluginVersion
             uniqueIdentifier={value.plugin_unique_identifier}
@@ -191,12 +191,12 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
       </div>
     </PortalToFollowElemTrigger>
     <PortalToFollowElemContent className='z-10'>
-      <div className='bg-components-panel-bg-blur border-components-panel-border border-[0.5px] rounded-md shadow overflow-hidden w-[388px]'>
-        <header className='p-2 gap-1 flex'>
+      <div className='bg-components-panel-bg-blur border-components-panel-border w-[388px] overflow-hidden rounded-md border-[0.5px] shadow'>
+        <header className='flex gap-1 p-2'>
           <SearchInput placeholder={t('workflow.nodes.agent.strategy.searchPlaceholder')} value={query} onChange={setQuery} className={'w-full'} />
           <ViewTypeSelect viewType={viewType} onChange={setViewType} />
         </header>
-        <main className="md:max-h-[300px] xl:max-h-[400px] 2xl:max-h-[564px] relative overflow-hidden flex flex-col w-full" ref={wrapElemRef}>
+        <main className="relative flex w-full flex-col overflow-hidden md:max-h-[300px] xl:max-h-[400px] 2xl:max-h-[564px]" ref={wrapElemRef}>
           <Tools
             tools={filteredTools}
             viewType={viewType}
@@ -210,7 +210,7 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
               })
               setOpen(false)
             } }
-            className='max-w-none max-h-full h-full overflow-y-auto'
+            className='h-full max-h-full max-w-none overflow-y-auto'
             indexBarClassName='top-0 xl:top-36' showWorkflowEmpty={false} hasSearchText={false} />
           <PluginList
             wrapElemRef={wrapElemRef}
diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
index a07686a8f5..e54ffe3ace 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
@@ -212,7 +212,7 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
           />
         </div>
         : <ListEmpty
-          icon={<Agent className='w-5 h-5 shrink-0 text-text-accent' />}
+          icon={<Agent className='text-text-accent h-5 w-5 shrink-0' />}
           title={t('workflow.nodes.agent.strategy.configureTip')}
           description={<div className='text-text-tertiary text-xs'>
             {t('workflow.nodes.agent.strategy.configureTipDesc')} <br />
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
index a4885759c4..6dc191ddcc 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
@@ -66,22 +66,22 @@ const FormItem: FC<Props> = ({
     if (typeof payload.label === 'object') {
       const { nodeType, nodeName, variable, isChatVar } = payload.label
       return (
-        <div className='h-full flex items-center'>
+        <div className='flex h-full items-center'>
           {!isChatVar && (
             <div className='flex items-center'>
               <div className='p-[1px]'>
                 <VarBlockIcon type={nodeType || BlockEnum.Start} />
               </div>
-              <div className='mx-0.5 text-xs font-medium text-gray-700 max-w-[150px] truncate' title={nodeName}>
+              <div className='mx-0.5 max-w-[150px] truncate text-xs font-medium text-gray-700' title={nodeName}>
                 {nodeName}
               </div>
               <Line3 className='mr-0.5'></Line3>
             </div>
           )}
-          <div className='flex items-center text-primary-600'>
-            {!isChatVar && <Variable02 className='w-3.5 h-3.5' />}
-            {isChatVar && <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />}
-            <div className={cn('ml-0.5 text-xs font-medium max-w-[150px] truncate', isChatVar && 'text-text-secondary')} title={variable} >
+          <div className='text-primary-600 flex items-center'>
+            {!isChatVar && <Variable02 className='h-3.5 w-3.5' />}
+            {isChatVar && <BubbleX className='text-util-colors-teal-teal-700 h-3.5 w-3.5' />}
+            <div className={cn('ml-0.5 max-w-[150px] truncate text-xs font-medium', isChatVar && 'text-text-secondary')} title={variable} >
               {variable}
             </div>
           </div>
@@ -97,7 +97,7 @@ const FormItem: FC<Props> = ({
   return (
     <div className={cn(className)}>
       {!isArrayLikeType && (
-        <div className='h-6 mb-1 flex items-center gap-1 text-text-secondary system-sm-semibold'>
+        <div className='text-text-secondary system-sm-semibold mb-1 flex h-6 items-center gap-1'>
           <div className='truncate'>{typeof payload.label === 'object' ? nodeKey : payload.label}</div>
           {!payload.required && <span className='text-text-tertiary system-xs-regular'>{t('workflow.panel.optional')}</span>}
         </div>
@@ -248,7 +248,7 @@ const FormItem: FC<Props> = ({
                     (value as any).length > 1
                       ? (<RiDeleteBinLine
                         onClick={handleArrayItemRemove(index)}
-                        className='mr-1 w-3.5 h-3.5 text-text-tertiary cursor-pointer'
+                        className='text-text-tertiary mr-1 h-3.5 w-3.5 cursor-pointer'
                       />)
                       : undefined
                   }
@@ -274,7 +274,7 @@ const FormItem: FC<Props> = ({
                     (value as any).length > 1
                       ? (<RiDeleteBinLine
                         onClick={handleArrayItemRemove(index)}
-                        className='mr-1 w-3.5 h-3.5 text-text-tertiary cursor-pointer'
+                        className='text-text-tertiary mr-1 h-3.5 w-3.5 cursor-pointer'
                       />)
                       : undefined
                   }
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
index e9ac442680..311098f9d1 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
@@ -71,7 +71,7 @@ const Form: FC<Props> = ({
     <div className={cn(className, 'space-y-2')}>
       {label && (
         <div className='mb-1 flex items-center justify-between'>
-          <div className='flex items-center h-6 system-xs-medium-uppercase text-text-tertiary'>{label}</div>
+          <div className='system-xs-medium-uppercase text-text-tertiary flex h-6 items-center'>{label}</div>
           {isArrayLikeType && (
             <AddButton onClick={handleAddContext} />
           )}
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
index 5228e33434..4d192a98d8 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
@@ -128,15 +128,15 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
     <div className='absolute inset-0 z-10 rounded-2xl pt-10' style={{
       backgroundColor: 'rgba(16, 24, 40, 0.20)',
     }}>
-      <div className='h-full rounded-2xl bg-white flex flex-col'>
-        <div className='shrink-0 flex justify-between items-center h-8 pl-4 pr-3 pt-3'>
-          <div className='text-base font-semibold text-gray-900 truncate'>
+      <div className='flex h-full flex-col rounded-2xl bg-white'>
+        <div className='flex h-8 shrink-0 items-center justify-between pl-4 pr-3 pt-3'>
+          <div className='truncate text-base font-semibold text-gray-900'>
             {t(`${i18nPrefix}.testRun`)} {nodeName}
           </div>
-          <div className='ml-2 shrink-0 p-1 cursor-pointer' onClick={() => {
+          <div className='ml-2 shrink-0 cursor-pointer p-1' onClick={() => {
             onHide()
           }}>
-            <RiCloseLine className='w-4 h-4 text-gray-500 ' />
+            <RiCloseLine className='h-4 w-4 text-gray-500 ' />
           </div>
         </div>
         {
@@ -149,7 +149,7 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
         {
           !showSpecialResultPanel && (
             <div className='h-0 grow overflow-y-auto pb-4'>
-              <div className='mt-3 px-4 space-y-4'>
+              <div className='mt-3 space-y-4 px-4'>
                 {forms.map((form, index) => (
                   <div key={index}>
                     <Form
@@ -164,14 +164,14 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
               <div className='mt-4 flex justify-between space-x-2 px-4' >
                 {isRunning && (
                   <div
-                    className='p-2 rounded-lg border border-gray-200 bg-white shadow-xs cursor-pointer'
+                    className='shadow-xs cursor-pointer rounded-lg border border-gray-200 bg-white p-2'
                     onClick={onStop}
                   >
-                    <StopCircle className='w-4 h-4 text-gray-500' />
+                    <StopCircle className='h-4 w-4 text-gray-500' />
                   </div>
                 )}
                 <Button disabled={!isFileLoaded || isRunning} variant='primary' className='w-0 grow space-x-2' onClick={handleRun}>
-                  {isRunning && <RiLoader2Line className='animate-spin w-4 h-4 text-white' />}
+                  {isRunning && <RiLoader2Line className='h-4 w-4 animate-spin text-white' />}
                   <div>{t(`${i18nPrefix}.${isRunning ? 'running' : 'startRun'}`)}</div>
                 </Button>
               </div>
diff --git a/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx b/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
index 7f3a71dc09..88a523cea7 100644
--- a/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
@@ -31,7 +31,7 @@ const CodeGenerateBtn: FC<Props> = ({
       <ActionButton
         className='hover:bg-[#155EFF]/8'
         onClick={showAutomaticTrue}>
-        <Generator className='w-4 h-4 text-primary-600' />
+        <Generator className='text-primary-600 h-4 w-4' />
       </ActionButton>
       {showAutomatic && (
         <GetCodeGeneratorResModal
diff --git a/web/app/components/workflow/nodes/_base/components/collapse/field-collapse.tsx b/web/app/components/workflow/nodes/_base/components/collapse/field-collapse.tsx
index 71ca0d28ea..82bdcd036f 100644
--- a/web/app/components/workflow/nodes/_base/components/collapse/field-collapse.tsx
+++ b/web/app/components/workflow/nodes/_base/components/collapse/field-collapse.tsx
@@ -13,7 +13,7 @@ const FieldCollapse = ({
     <div className='py-4'>
       <Collapse
         trigger={
-          <div className='flex items-center h-6 system-sm-semibold-uppercase text-text-secondary cursor-pointer'>{title}</div>
+          <div className='system-sm-semibold-uppercase text-text-secondary flex h-6 cursor-pointer items-center'>{title}</div>
         }
       >
         <div className='px-4'>
diff --git a/web/app/components/workflow/nodes/_base/components/collapse/index.tsx b/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
index 6a6cae9aea..de86e82b3e 100644
--- a/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
@@ -32,13 +32,13 @@ const Collapse = ({
           }
         }}
       >
-        <div className='shrink-0 w-4 h-4'>
+        <div className='h-4 w-4 shrink-0'>
           {
             !disabled && (
               <RiArrowDropRightLine
                 className={cn(
-                  'w-4 h-4 text-text-tertiary',
-                  !collapsedMerged && 'transform rotate-90',
+                  'text-text-tertiary h-4 w-4',
+                  !collapsedMerged && 'rotate-90',
                 )}
               />
             )
diff --git a/web/app/components/workflow/nodes/_base/components/editor/base.tsx b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
index e100c56438..585e5218c5 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/base.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
@@ -76,7 +76,7 @@ const Base: FC<Props> = ({
   return (
     <Wrap className={cn(wrapClassName)} style={wrapStyle} isInNode={isInNode} isExpand={isExpand}>
       <div ref={ref} className={cn(className, isExpand && 'h-full', 'rounded-lg border', isFocus ? 'bg-components-input-bg-normal border-transparent' : 'bg-components-input-bg-hover border-components-input-border-hover overflow-hidden')}>
-        <div className='flex justify-between items-center h-7 pt-1 pl-3 pr-2'>
+        <div className='flex h-7 items-center justify-between pl-3 pr-2 pt-1'>
           <div className='system-xs-semibold-uppercase text-text-secondary'>{title}</div>
           <div className='flex items-center' onClick={(e) => {
             e.nativeEvent.stopImmediatePropagation()
@@ -90,10 +90,10 @@ const Base: FC<Props> = ({
             )}
             {!isCopied
               ? (
-                <Clipboard className='mx-1 w-3.5 h-3.5 text-text-tertiary cursor-pointer' onClick={handleCopy} />
+                <Clipboard className='text-text-tertiary mx-1 h-3.5 w-3.5 cursor-pointer' onClick={handleCopy} />
               )
               : (
-                <ClipboardCheck className='mx-1 w-3.5 h-3.5 text-text-tertiary' />
+                <ClipboardCheck className='text-text-tertiary mx-1 h-3.5 w-3.5' />
               )
             }
 
diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
index 3d667ac700..ba995ebf4e 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
@@ -148,7 +148,7 @@ const CodeEditor: FC<Props> = ({
       {isShowVarPicker && (
         <div
           ref={popupRef}
-          className='w-[228px] p-1 bg-white rounded-lg border border-gray-200 shadow-lg space-y-1'
+          className='w-[228px] space-y-1 rounded-lg border border-gray-200 bg-white p-1 shadow-lg'
           style={{
             position: 'fixed',
             top: popupPosition.y,
diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
index 480bf1c59f..1e6ef906dd 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
@@ -186,14 +186,14 @@ const CodeEditor: FC<Props> = ({
         }}
         onMount={handleEditorDidMount}
       />
-      {!outPutValue && !isFocus && <div className='pointer-events-none absolute left-[36px] top-0 leading-[18px] text-[13px] font-normal text-gray-300'>{placeholder}</div>}
+      {!outPutValue && !isFocus && <div className='pointer-events-none absolute left-[36px] top-0 text-[13px] font-normal leading-[18px] text-gray-300'>{placeholder}</div>}
     </>
   )
 
   return (
     <div className={cn(isExpand && 'h-full', className)}>
       {noWrapper
-        ? <div className='relative no-wrapper' style={{
+        ? <div className='no-wrapper relative' style={{
           height: isExpand ? '100%' : (editorContentHeight) / 2 + CODE_EDITOR_LINE_HEIGHT, // In IDE, the last line can always be in lop line. So there is some blank space in the bottom.
           minHeight: CODE_EDITOR_LINE_HEIGHT,
         }}>
diff --git a/web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx b/web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx
index 31cb3691f0..252f69c246 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx
@@ -52,7 +52,7 @@ const TextEditor: FC<Props> = ({
           onChange={e => onChange(e.target.value)}
           onFocus={setIsFocus}
           onBlur={handleBlur}
-          className='w-full h-full px-3 resize-none bg-transparent border-none focus:outline-none leading-[18px] text-[13px] font-normal text-gray-900 placeholder:text-gray-300'
+          className='h-full w-full resize-none border-none bg-transparent px-3 text-[13px] font-normal leading-[18px] text-gray-900 placeholder:text-gray-300 focus:outline-none'
           placeholder={placeholder}
           readOnly={readonly}
         />
diff --git a/web/app/components/workflow/nodes/_base/components/error-handle/default-value.tsx b/web/app/components/workflow/nodes/_base/components/error-handle/default-value.tsx
index 45c23fcc18..9b29b92cda 100644
--- a/web/app/components/workflow/nodes/_base/components/error-handle/default-value.tsx
+++ b/web/app/components/workflow/nodes/_base/components/error-handle/default-value.tsx
@@ -30,7 +30,7 @@ const DefaultValue = ({
 
   return (
     <div className='px-4 pt-2'>
-      <div className='mb-2 body-xs-regular text-text-tertiary'>
+      <div className='body-xs-regular text-text-tertiary mb-2'>
         {t('workflow.nodes.common.errorHandle.defaultValue.desc')}
         &nbsp;
         <a
@@ -49,8 +49,8 @@ const DefaultValue = ({
                 key={index}
                 className='py-1'
               >
-                <div className='flex items-center mb-1'>
-                  <div className='mr-1 system-sm-medium text-text-primary'>{form.key}</div>
+                <div className='mb-1 flex items-center'>
+                  <div className='system-sm-medium text-text-primary mr-1'>{form.key}</div>
                   <div className='system-xs-regular text-text-tertiary'>{form.type}</div>
                 </div>
                 {
diff --git a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-node.tsx b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-node.tsx
index 64ce9ec226..96c9f28660 100644
--- a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-node.tsx
+++ b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-node.tsx
@@ -25,10 +25,10 @@ const ErrorHandleOnNode = ({
     return null
 
   return (
-    <div className='relative pt-1 pb-2 px-3'>
+    <div className='relative px-3 pb-2 pt-1'>
       <div className={cn(
-        'relative flex items-center justify-between px-[5px] h-6 bg-workflow-block-parma-bg rounded-md',
-        data._runningStatus === NodeRunningStatus.Exception && 'border-[0.5px] border-components-badge-status-light-warning-halo bg-state-warning-hover',
+        'bg-workflow-block-parma-bg relative flex h-6 items-center justify-between rounded-md px-[5px]',
+        data._runningStatus === NodeRunningStatus.Exception && 'border-components-badge-status-light-warning-halo bg-state-warning-hover border-[0.5px]',
       )}>
         <div className='system-xs-medium-uppercase text-text-tertiary'>
           {t('workflow.common.onFailure')}
diff --git a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-panel.tsx b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-panel.tsx
index 89412cabb3..6c999fc000 100644
--- a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-panel.tsx
+++ b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-panel.tsx
@@ -50,9 +50,9 @@ const ErrorHandle = ({
           collapsed={collapsed}
           onCollapse={setCollapsed}
           trigger={
-            <div className='grow flex items-center justify-between pr-4'>
+            <div className='flex grow items-center justify-between pr-4'>
               <div className='flex items-center'>
-                <div className='mr-0.5 system-sm-semibold-uppercase text-text-secondary'>
+                <div className='system-sm-semibold-uppercase text-text-secondary mr-0.5'>
                   {t('workflow.nodes.common.errorHandle.title')}
                 </div>
                 <Tooltip popupContent={t('workflow.nodes.common.errorHandle.tip')} />
diff --git a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-tip.tsx b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-tip.tsx
index 3e60308ea7..917aeb1522 100644
--- a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-tip.tsx
+++ b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-tip.tsx
@@ -24,16 +24,16 @@ const ErrorHandleTip = ({
 
   return (
     <div
-      className='relative flex p-2 pr-[52px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xs'
+      className='border-components-panel-border bg-components-panel-bg-blur shadow-xs relative flex rounded-lg border-[0.5px] p-2 pr-[52px]'
     >
       <div
-        className='absolute inset-0 opacity-40 rounded-lg'
+        className='absolute inset-0 rounded-lg opacity-40'
         style={{
           background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)',
         }}
       ></div>
-      <RiAlertFill className='shrink-0 mr-1 w-4 h-4 text-text-warning-secondary' />
-      <div className='grow system-xs-medium text-text-primary'>
+      <RiAlertFill className='text-text-warning-secondary mr-1 h-4 w-4 shrink-0' />
+      <div className='system-xs-medium text-text-primary grow'>
         {text}
       </div>
     </div>
diff --git a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx
index dadfa8d0b0..187d32ca63 100644
--- a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx
@@ -56,16 +56,16 @@ const ErrorHandleTypeSelector = ({
           size='small'
         >
           {selectedOption?.label}
-          <RiArrowDownSLine className='w-3.5 h-3.5' />
+          <RiArrowDownSLine className='h-3.5 w-3.5' />
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[11]'>
-        <div className='p-1 w-[280px] border-[0.5px] border-components-panel-border rounded-xl bg-components-panel-bg-blur shadow-lg'>
+        <div className='border-components-panel-border bg-components-panel-bg-blur w-[280px] rounded-xl border-[0.5px] p-1 shadow-lg'>
           {
             options.map(option => (
               <div
                 key={option.value}
-                className='flex p-2 pr-3 rounded-lg hover:bg-state-base-hover cursor-pointer'
+                className='hover:bg-state-base-hover flex cursor-pointer rounded-lg p-2 pr-3'
                 onClick={(e) => {
                   e.stopPropagation()
                   onSelected(option.value)
@@ -75,12 +75,12 @@ const ErrorHandleTypeSelector = ({
                 <div className='mr-1 w-4 shrink-0'>
                   {
                     value === option.value && (
-                      <RiCheckLine className='w-4 h-4 text-text-accent' />
+                      <RiCheckLine className='text-text-accent h-4 w-4' />
                     )
                   }
                 </div>
                 <div className='grow'>
-                  <div className='mb-0.5 system-sm-semibold text-text-secondary'>{option.label}</div>
+                  <div className='system-sm-semibold text-text-secondary mb-0.5'>{option.label}</div>
                   <div className='system-xs-regular text-text-tertiary'>{option.description}</div>
                 </div>
               </div>
diff --git a/web/app/components/workflow/nodes/_base/components/error-handle/fail-branch-card.tsx b/web/app/components/workflow/nodes/_base/components/error-handle/fail-branch-card.tsx
index 5dbba10f6c..0121578c4e 100644
--- a/web/app/components/workflow/nodes/_base/components/error-handle/fail-branch-card.tsx
+++ b/web/app/components/workflow/nodes/_base/components/error-handle/fail-branch-card.tsx
@@ -5,12 +5,12 @@ const FailBranchCard = () => {
   const { t } = useTranslation()
 
   return (
-    <div className='pt-2 px-4'>
-      <div className='p-4 rounded-[10px] bg-workflow-process-bg'>
-        <div className='flex items-center justify-center mb-2 w-8 h-8 rounded-[10px] border-[0.5px] bg-components-card-bg shadow-lg'>
-          <RiMindMap className='w-5 h-5 text-text-tertiary' />
+    <div className='px-4 pt-2'>
+      <div className='bg-workflow-process-bg rounded-[10px] p-4'>
+        <div className='bg-components-card-bg mb-2 flex h-8 w-8 items-center justify-center rounded-[10px] border-[0.5px] shadow-lg'>
+          <RiMindMap className='text-text-tertiary h-5 w-5' />
         </div>
-        <div className='mb-1 system-sm-medium text-text-secondary'>
+        <div className='system-sm-medium text-text-secondary mb-1'>
           {t('workflow.nodes.common.errorHandle.failBranch.customize')}
         </div>
         <div className='system-xs-regular text-text-tertiary'>
diff --git a/web/app/components/workflow/nodes/_base/components/field.tsx b/web/app/components/workflow/nodes/_base/components/field.tsx
index 6988f4970b..184d8bddf2 100644
--- a/web/app/components/workflow/nodes/_base/components/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/field.tsx
@@ -33,11 +33,11 @@ const Field: FC<Props> = ({
     toggle: toggleFold,
   }] = useBoolean(true)
   return (
-    <div className={cn(className, inline && 'flex justify-between items-center w-full')}>
+    <div className={cn(className, inline && 'flex w-full items-center justify-between')}>
       <div
         onClick={() => supportFold && toggleFold()}
-        className={cn('flex justify-between items-center', supportFold && 'cursor-pointer')}>
-        <div className='flex items-center h-6'>
+        className={cn('flex items-center justify-between', supportFold && 'cursor-pointer')}>
+        <div className='flex h-6 items-center'>
           <div className={cn(isSubTitle ? 'system-xs-medium-uppercase text-text-tertiary' : 'system-sm-semibold-uppercase text-text-secondary')}>{title}</div>
           {tooltip && (
             <Tooltip
@@ -50,7 +50,7 @@ const Field: FC<Props> = ({
         <div className='flex'>
           {operations && <div>{operations}</div>}
           {supportFold && (
-            <RiArrowDownSLine className='w-4 h-4 text-text-tertiary cursor-pointer transition-transform' style={{ transform: fold ? 'rotate(-90deg)' : 'rotate(0deg)' }} />
+            <RiArrowDownSLine className='text-text-tertiary h-4 w-4 cursor-pointer transition-transform' style={{ transform: fold ? 'rotate(-90deg)' : 'rotate(0deg)' }} />
           )}
         </div>
       </div>
diff --git a/web/app/components/workflow/nodes/_base/components/file-type-item.tsx b/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
index c3d52f265b..6cd7d9e34f 100644
--- a/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
@@ -35,9 +35,9 @@ const FileTypeItem: FC<Props> = ({
   return (
     <div
       className={cn(
-        'rounded-lg bg-components-option-card-option-bg border border-components-option-card-option-border cursor-pointer select-none',
-        !isCustomSelected && 'py-2 px-3',
-        selected && 'border-[1.5px] bg-components-option-card-option-selected-bg border-components-option-card-option-selected-border',
+        'bg-components-option-card-option-bg border-components-option-card-option-border cursor-pointer select-none rounded-lg border',
+        !isCustomSelected && 'px-3 py-2',
+        selected && 'bg-components-option-card-option-selected-bg border-components-option-card-option-selected-border border-[1.5px]',
         !selected && 'hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover',
       )}
       onClick={handleOnSelect}
@@ -45,9 +45,9 @@ const FileTypeItem: FC<Props> = ({
       {isCustomSelected
         ? (
           <div>
-            <div className='flex items-center p-3 pb-2 border-b border-divider-subtle'>
+            <div className='border-divider-subtle flex items-center border-b p-3 pb-2'>
               <FileTypeIcon className='shrink-0' type={type} size='md' />
-              <div className='mx-2 grow text-text-primary system-sm-medium'>{t(`appDebug.variableConfig.file.${type}.name`)}</div>
+              <div className='text-text-primary system-sm-medium mx-2 grow'>{t(`appDebug.variableConfig.file.${type}.name`)}</div>
               <Checkbox className='shrink-0' checked={selected} />
             </div>
             <div className='p-3' onClick={e => e.stopPropagation()}>
@@ -64,7 +64,7 @@ const FileTypeItem: FC<Props> = ({
             <FileTypeIcon className='shrink-0' type={type} size='md' />
             <div className='mx-2 grow'>
               <div className='text-text-primary system-sm-medium'>{t(`appDebug.variableConfig.file.${type}.name`)}</div>
-              <div className='mt-1 text-text-tertiary system-2xs-regular-uppercase'>{type !== SupportUploadFileTypes.custom ? FILE_EXTS[type].join(', ') : t('appDebug.variableConfig.file.custom.description')}</div>
+              <div className='text-text-tertiary system-2xs-regular-uppercase mt-1'>{type !== SupportUploadFileTypes.custom ? FILE_EXTS[type].join(', ') : t('appDebug.variableConfig.file.custom.description')}</div>
             </div>
             <Checkbox className='shrink-0' checked={selected} />
           </div>
diff --git a/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx b/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
index 1974084424..a022381327 100644
--- a/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
+++ b/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
@@ -150,7 +150,7 @@ const FileUploadSetting: FC<Props> = ({
           title={t('appDebug.variableConfig.maxNumberOfUploads')!}
         >
           <div>
-            <div className='mb-1.5 text-text-tertiary body-xs-regular'>{t('appDebug.variableConfig.maxNumberTip', {
+            <div className='text-text-tertiary body-xs-regular mb-1.5'>{t('appDebug.variableConfig.maxNumberTip', {
               imgLimit: formatFileSize(imgSizeLimit),
               docLimit: formatFileSize(docSizeLimit),
               audioLimit: formatFileSize(audioSizeLimit),
diff --git a/web/app/components/workflow/nodes/_base/components/help-link.tsx b/web/app/components/workflow/nodes/_base/components/help-link.tsx
index a2b0837fbd..34520f633c 100644
--- a/web/app/components/workflow/nodes/_base/components/help-link.tsx
+++ b/web/app/components/workflow/nodes/_base/components/help-link.tsx
@@ -21,9 +21,9 @@ const HelpLink = ({
       <a
         href={link}
         target='_blank'
-        className='flex items-center justify-center mr-1 w-6 h-6'
+        className='mr-1 flex h-6 w-6 items-center justify-center'
       >
-        <RiBookOpenLine className='w-4 h-4 text-gray-500' />
+        <RiBookOpenLine className='h-4 w-4 text-gray-500' />
       </a>
     </TooltipPlus>
 
diff --git a/web/app/components/workflow/nodes/_base/components/info-panel.tsx b/web/app/components/workflow/nodes/_base/components/info-panel.tsx
index e960931d49..4b2bf51dfd 100644
--- a/web/app/components/workflow/nodes/_base/components/info-panel.tsx
+++ b/web/app/components/workflow/nodes/_base/components/info-panel.tsx
@@ -13,7 +13,7 @@ const InfoPanel: FC<Props> = ({
 }) => {
   return (
     <div>
-      <div className='px-[5px] py-[3px] bg-workflow-block-parma-bg rounded-md'>
+      <div className='bg-workflow-block-parma-bg rounded-md px-[5px] py-[3px]'>
         <div className='text-text-secondary system-2xs-semibold-uppercase uppercase'>
           {title}
         </div>
diff --git a/web/app/components/workflow/nodes/_base/components/input-number-with-slider.tsx b/web/app/components/workflow/nodes/_base/components/input-number-with-slider.tsx
index 0210db2f8e..5776ce7a51 100644
--- a/web/app/components/workflow/nodes/_base/components/input-number-with-slider.tsx
+++ b/web/app/components/workflow/nodes/_base/components/input-number-with-slider.tsx
@@ -38,10 +38,10 @@ const InputNumberWithSlider: FC<Props> = ({
   }, [onChange])
 
   return (
-    <div className='flex justify-between items-center h-8 space-x-2'>
+    <div className='flex h-8 items-center justify-between space-x-2'>
       <input
         value={value}
-        className='shrink-0 block pl-3 w-12 h-8 appearance-none outline-none rounded-lg bg-components-input-bg-normal text-[13px] text-components-input-text-filled'
+        className='bg-components-input-bg-normal text-components-input-text-filled block h-8 w-12 shrink-0 appearance-none rounded-lg pl-3 text-[13px] outline-none'
         type='number'
         min={min}
         max={max}
diff --git a/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx b/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
index 1d9f85c4d9..60ec83c959 100644
--- a/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
+++ b/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
@@ -108,12 +108,12 @@ const Editor: FC<Props> = ({
         {/* to patch Editor not support dynamic change editable status */}
         {readOnly && <div className='absolute inset-0 z-10'></div>}
         {isFocus && (
-          <div className={cn('absolute z-10', insertVarTipToLeft ? 'top-1.5 left-[-12px]' : ' top-[-9px] right-1')}>
+          <div className={cn('absolute z-10', insertVarTipToLeft ? 'left-[-12px] top-1.5' : ' right-1 top-[-9px]')}>
             <Tooltip
               popupContent={`${t('workflow.common.insertVarTip')}`}
             >
-              <div className='p-0.5 rounded-[5px] shadow-lg cursor-pointer bg-white hover:bg-gray-100 border-[0.5px] border-black/5'>
-                <Variable02 className='w-3.5 h-3.5 text-components-button-secondary-accent-text' />
+              <div className='cursor-pointer rounded-[5px] border-[0.5px] border-black/5 bg-white p-0.5 shadow-lg hover:bg-gray-100'>
+                <Variable02 className='text-components-button-secondary-accent-text h-3.5 w-3.5' />
               </div>
             </Tooltip>
           </div>
diff --git a/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx b/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx
index dc5930e15b..23119f0213 100644
--- a/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx
@@ -40,6 +40,6 @@ export const InstallPluginButton = (props: InstallPluginButtonProps) => {
     className={classNames('flex items-center', className)}
   >
     {!isLoading ? t('workflow.nodes.agent.pluginInstaller.install') : t('workflow.nodes.agent.pluginInstaller.installing')}
-    {!isLoading ? <RiInstallLine className='size-3.5 ml-1' /> : <RiLoader2Line className='size-3.5 ml-1 animate-spin' />}
+    {!isLoading ? <RiInstallLine className='ml-1 size-3.5' /> : <RiLoader2Line className='ml-1 size-3.5 animate-spin' />}
   </Button>
 }
diff --git a/web/app/components/workflow/nodes/_base/components/list-no-data-placeholder.tsx b/web/app/components/workflow/nodes/_base/components/list-no-data-placeholder.tsx
index bf592deaec..9a1e21cff2 100644
--- a/web/app/components/workflow/nodes/_base/components/list-no-data-placeholder.tsx
+++ b/web/app/components/workflow/nodes/_base/components/list-no-data-placeholder.tsx
@@ -10,7 +10,7 @@ const ListNoDataPlaceholder: FC<Props> = ({
   children,
 }) => {
   return (
-    <div className='flex w-full rounded-[10px] bg-background-section items-center min-h-[42px] justify-center system-xs-regular text-text-tertiary'>
+    <div className='bg-background-section system-xs-regular text-text-tertiary flex min-h-[42px] w-full items-center justify-center rounded-[10px]'>
       {children}
     </div>
   )
diff --git a/web/app/components/workflow/nodes/_base/components/memory-config.tsx b/web/app/components/workflow/nodes/_base/components/memory-config.tsx
index 1e436c28e7..03d2eed958 100644
--- a/web/app/components/workflow/nodes/_base/components/memory-config.tsx
+++ b/web/app/components/workflow/nodes/_base/components/memory-config.tsx
@@ -37,7 +37,7 @@ const RoleItem: FC<RoleItemProps> = ({
         readOnly={readonly}
         value={value}
         onChange={handleChange}
-        className='w-[200px] h-8 leading-8 px-2.5 rounded-lg border-0 bg-gray-100  text-gray-900 text-[13px]  placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
+        className='h-8 w-[200px] rounded-lg border-0 bg-gray-100 px-2.5 text-[13px]  leading-8 text-gray-900  placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
         type='text' />
     </div>
   )
@@ -145,7 +145,7 @@ const MemoryConfig: FC<Props> = ({
           <>
             {/* window size */}
             <div className='flex justify-between'>
-              <div className='flex items-center h-8 space-x-2'>
+              <div className='flex h-8 items-center space-x-2'>
                 <Switch
                   defaultValue={payload?.window?.enabled}
                   onChange={handleWindowEnabledChange}
@@ -154,7 +154,7 @@ const MemoryConfig: FC<Props> = ({
                 />
                 <div className='text-text-tertiary system-xs-medium-uppercase'>{t(`${i18nPrefix}.windowSize`)}</div>
               </div>
-              <div className='flex items-center h-8 space-x-2'>
+              <div className='flex h-8 items-center space-x-2'>
                 <Slider
                   className='w-[144px]'
                   value={(payload.window?.size || WINDOW_SIZE_DEFAULT) as number}
@@ -167,7 +167,7 @@ const MemoryConfig: FC<Props> = ({
                 <Input
                   value={(payload.window?.size || WINDOW_SIZE_DEFAULT) as number}
                   wrapperClassName='w-12'
-                  className='pr-0 appearance-none'
+                  className='appearance-none pr-0'
                   type='number'
                   min={WINDOW_SIZE_MIN}
                   max={WINDOW_SIZE_MAX}
@@ -180,7 +180,7 @@ const MemoryConfig: FC<Props> = ({
             </div>
             {canSetRoleName && (
               <div className='mt-4'>
-                <div className='leading-6 text-xs font-medium text-gray-500 uppercase'>{t(`${i18nPrefix}.conversationRoleName`)}</div>
+                <div className='text-xs font-medium uppercase leading-6 text-gray-500'>{t(`${i18nPrefix}.conversationRoleName`)}</div>
                 <div className='mt-1 space-y-2'>
                   <RoleItem
                     readonly={readonly}
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/add.tsx b/web/app/components/workflow/nodes/_base/components/next-step/add.tsx
index 54ab4b327f..31c1693a57 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/add.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/add.tsx
@@ -74,14 +74,14 @@ const Add = ({
     return (
       <div
         className={`
-          relative flex items-center px-2 h-9 rounded-lg border border-dashed border-divider-regular bg-dropzone-bg
-          hover:bg-dropzone-bg-hover text-xs text-text-placeholder cursor-pointer
+          border-divider-regular bg-dropzone-bg hover:bg-dropzone-bg-hover text-text-placeholder relative flex h-9 cursor-pointer items-center rounded-lg
+          border border-dashed px-2 text-xs
           ${open && '!bg-components-dropzone-bg-alt'}
           ${nodesReadOnly && '!cursor-not-allowed'}
         `}
       >
-        <div className='flex items-center justify-center mr-1.5 w-5 h-5 rounded-[5px] bg-background-default-dimm'>
-          <RiAddLine className='w-3 h-3' />
+        <div className='bg-background-default-dimm mr-1.5 flex h-5 w-5 items-center justify-center rounded-[5px]'>
+          <RiAddLine className='h-3 w-3' />
         </div>
         <div className='flex items-center uppercase'>
           {tip}
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/container.tsx b/web/app/components/workflow/nodes/_base/components/next-step/container.tsx
index 24df1d261e..5f745a2b8c 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/container.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/container.tsx
@@ -25,14 +25,14 @@ const Container = ({
 }: ContainerProps) => {
   return (
     <div className={cn(
-      'p-0.5 space-y-0.5 rounded-[10px] bg-background-section-burn',
-      isFailBranch && 'border-[0.5px] border-state-warning-hover-alt bg-state-warning-hover',
+      'bg-background-section-burn space-y-0.5 rounded-[10px] p-0.5',
+      isFailBranch && 'border-state-warning-hover-alt bg-state-warning-hover border-[0.5px]',
     )}>
       {
         branchName && (
           <div
             className={cn(
-              'flex items-center px-2 system-2xs-semibold-uppercase text-text-tertiary truncate',
+              'system-2xs-semibold-uppercase text-text-tertiary flex items-center truncate px-2',
               isFailBranch && 'text-text-warning',
             )}
             title={branchName}
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/index.tsx b/web/app/components/workflow/nodes/_base/components/next-step/index.tsx
index a60d8bb0ef..15474dedf5 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/index.tsx
@@ -81,7 +81,7 @@ const NextStep = ({
 
   return (
     <div className='flex py-1'>
-      <div className='shrink-0 relative flex items-center justify-center w-9 h-9 bg-background-default rounded-lg border-[0.5px] border-divider-regular shadow-xs'>
+      <div className='bg-background-default border-divider-regular shadow-xs relative flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border-[0.5px]'>
         <BlockIcon
           type={selectedNode!.data.type}
           toolIcon={toolIcon}
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/item.tsx b/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
index db3748abd9..78d453869a 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
@@ -39,15 +39,15 @@ const Item = ({
 
   return (
     <div
-      className='relative group flex items-center last-of-type:mb-0 px-2 h-9 rounded-lg border-[0.5px] border-divider-regular bg-background-default hover:bg-background-default-hover shadow-xs text-xs text-text-secondary cursor-pointer'
+      className='border-divider-regular bg-background-default hover:bg-background-default-hover shadow-xs text-text-secondary group relative flex h-9 cursor-pointer items-center rounded-lg border-[0.5px] px-2 text-xs last-of-type:mb-0'
     >
       <BlockIcon
         type={data.type}
         toolIcon={toolIcon}
-        className='shrink-0 mr-1.5'
+        className='mr-1.5 shrink-0'
       />
       <div
-        className='grow system-xs-medium text-text-secondary truncate'
+        className='system-xs-medium text-text-secondary grow truncate'
         title={data.title}
       >
         {data.title}
@@ -56,7 +56,7 @@ const Item = ({
         !nodesReadOnly && (
           <>
             <Button
-              className='hidden group-hover:flex shrink-0 mr-1'
+              className='mr-1 hidden shrink-0 group-hover:flex'
               size='small'
               onClick={() => handleNodeSelect(nodeId)}
             >
@@ -64,7 +64,7 @@ const Item = ({
             </Button>
             <div
               className={cn(
-                'hidden shrink-0 group-hover:flex items-center',
+                'hidden shrink-0 items-center group-hover:flex',
                 open && 'flex',
               )}
             >
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/line.tsx b/web/app/components/workflow/nodes/_base/components/next-step/line.tsx
index 3a4430cb5d..35b0a73ff2 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/line.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/line.tsx
@@ -19,7 +19,7 @@ const Line = ({
   const svgHeight = processedList[processedListLength - 1] + (processedListLength - 1) * 8
 
   return (
-    <svg className='shrink-0 w-6' style={{ height: svgHeight }}>
+    <svg className='w-6 shrink-0' style={{ height: svgHeight }}>
       {
         processedList.map((item, index) => {
           const prevItem = index > 0 ? processedList[index - 1] : 0
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx b/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
index ad6c7abd0c..193bfe2811 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
@@ -44,7 +44,7 @@ const ChangeItem = ({
 
   const renderTrigger = useCallback(() => {
     return (
-      <div className='flex items-center px-2 h-8 rounded-lg cursor-pointer hover:bg-state-base-hover'>
+      <div className='hover:bg-state-base-hover flex h-8 cursor-pointer items-center rounded-lg px-2'>
         {t('workflow.panel.change')}
       </div>
     )
@@ -93,12 +93,12 @@ const Operator = ({
       onOpenChange={onOpenChange}
     >
       <PortalToFollowElemTrigger onClick={() => onOpenChange(!open)}>
-        <Button className='p-0 w-6 h-6'>
-          <RiMoreFill className='w-4 h-4' />
+        <Button className='h-6 w-6 p-0'>
+          <RiMoreFill className='h-4 w-4' />
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-10'>
-        <div className='min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg system-md-regular text-text-secondary'>
+        <div className='border-components-panel-border bg-components-panel-bg-blur system-md-regular text-text-secondary min-w-[120px] rounded-xl border-[0.5px] shadow-lg'>
           <div className='p-1'>
             <ChangeItem
               data={data}
@@ -106,7 +106,7 @@ const Operator = ({
               sourceHandle={sourceHandle}
             />
             <div
-              className='flex items-center px-2 h-8 rounded-lg cursor-pointer hover:bg-state-base-hover'
+              className='hover:bg-state-base-hover flex h-8 cursor-pointer items-center rounded-lg px-2'
               onClick={() => handleNodeDisconnect(nodeId)}
             >
               {t('workflow.common.disconnect')}
@@ -114,7 +114,7 @@ const Operator = ({
           </div>
           <div className='p-1'>
             <div
-              className='flex items-center px-2 h-8 rounded-lg cursor-pointer hover:bg-state-base-hover'
+              className='hover:bg-state-base-hover flex h-8 cursor-pointer items-center rounded-lg px-2'
               onClick={() => handleNodeDelete(nodeId)}
             >
               {t('common.operation.delete')}
diff --git a/web/app/components/workflow/nodes/_base/components/node-control.tsx b/web/app/components/workflow/nodes/_base/components/node-control.tsx
index 781b66af6b..37c202766b 100644
--- a/web/app/components/workflow/nodes/_base/components/node-control.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-control.tsx
@@ -39,19 +39,19 @@ const NodeControl: FC<NodeControlProps> = ({
   return (
     <div
       className={`
-      hidden group-hover:flex pb-1 absolute right-0 -top-7 h-7
+      absolute -top-7 right-0 hidden h-7 pb-1 group-hover:flex
       ${data.selected && '!flex'}
       ${open && '!flex'}
       `}
     >
       <div
-        className='flex items-center px-0.5 h-6 bg-components-actionbar-bg rounded-lg border-[0.5px] border-components-actionbar-border backdrop-blur-[5px] shadow-md text-text-tertiary'
+        className='bg-components-actionbar-bg border-components-actionbar-border text-text-tertiary flex h-6 items-center rounded-lg border-[0.5px] px-0.5 shadow-md backdrop-blur-[5px]'
         onClick={e => e.stopPropagation()}
       >
         {
           canRunBySingle(data.type) && (
             <div
-              className='flex items-center justify-center w-5 h-5 rounded-md cursor-pointer hover:bg-state-base-hover'
+              className='hover:bg-state-base-hover flex h-5 w-5 cursor-pointer items-center justify-center rounded-md'
               onClick={() => {
                 handleNodeDataUpdate({
                   id,
@@ -66,13 +66,13 @@ const NodeControl: FC<NodeControlProps> = ({
             >
               {
                 data._isSingleRun
-                  ? <Stop className='w-3 h-3' />
+                  ? <Stop className='h-3 w-3' />
                   : (
                     <Tooltip
                       popupContent={t('workflow.panel.runThisStep')}
                       asChild={false}
                     >
-                      <RiPlayLargeLine className='w-3 h-3' />
+                      <RiPlayLargeLine className='h-3 w-3' />
                     </Tooltip>
                   )
               }
diff --git a/web/app/components/workflow/nodes/_base/components/node-handle.tsx b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
index 65798e4610..e19272f78a 100644
--- a/web/app/components/workflow/nodes/_base/components/node-handle.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
@@ -78,9 +78,9 @@ export const NodeTargetHandle = memo(({
         type='target'
         position={Position.Left}
         className={cn(
-          '!w-4 !h-4 !bg-transparent !rounded-none !outline-none !border-none z-[1]',
-          'after:absolute after:w-0.5 after:h-2 after:left-1.5 after:top-1 after:bg-workflow-link-line-handle',
-          'hover:scale-125 transition-all',
+          'z-[1] !h-4 !w-4 !rounded-none !border-none !bg-transparent !outline-none',
+          'after:bg-workflow-link-line-handle after:absolute after:left-1.5 after:top-1 after:h-2 after:w-0.5',
+          'transition-all hover:scale-125',
           data._runningStatus === NodeRunningStatus.Succeeded && 'after:bg-workflow-link-line-success-handle',
           data._runningStatus === NodeRunningStatus.Failed && 'after:bg-workflow-link-line-error-handle',
           data._runningStatus === NodeRunningStatus.Exception && 'after:bg-workflow-link-line-failure-handle',
@@ -167,9 +167,9 @@ export const NodeSourceHandle = memo(({
       type='source'
       position={Position.Right}
       className={cn(
-        'group/handle !w-4 !h-4 !bg-transparent !rounded-none !outline-none !border-none z-[1]',
-        'after:absolute after:w-0.5 after:h-2 after:right-1.5 after:top-1 after:bg-workflow-link-line-handle',
-        'hover:scale-125 transition-all',
+        'group/handle z-[1] !h-4 !w-4 !rounded-none !border-none !bg-transparent !outline-none',
+        'after:bg-workflow-link-line-handle after:absolute after:right-1.5 after:top-1 after:h-2 after:w-0.5',
+        'transition-all hover:scale-125',
         data._runningStatus === NodeRunningStatus.Succeeded && 'after:bg-workflow-link-line-success-handle',
         data._runningStatus === NodeRunningStatus.Failed && 'after:bg-workflow-link-line-error-handle',
         showExceptionStatus && data._runningStatus === NodeRunningStatus.Exception && 'after:bg-workflow-link-line-failure-handle',
@@ -179,7 +179,7 @@ export const NodeSourceHandle = memo(({
       isConnectable={isConnectable}
       onClick={handleHandleClick}
     >
-      <div className='hidden group-hover/handle:block absolute left-1/2 -top-1 -translate-y-full -translate-x-1/2 p-1.5 border-[0.5px] border-components-panel-border bg-components-tooltip-bg rounded-lg shadow-lg'>
+      <div className='border-components-panel-border bg-components-tooltip-bg absolute -top-1 left-1/2 hidden -translate-x-1/2 -translate-y-full rounded-lg border-[0.5px] p-1.5 shadow-lg group-hover/handle:block'>
         <div className='system-xs-regular text-text-tertiary'>
           <div className=' whitespace-nowrap'>
             <span className='system-xs-medium text-text-secondary'>{t('workflow.common.parallelTip.click.title')}</span>
diff --git a/web/app/components/workflow/nodes/_base/components/node-status-icon.tsx b/web/app/components/workflow/nodes/_base/components/node-status-icon.tsx
index 99d70f474f..1c06974f1a 100644
--- a/web/app/components/workflow/nodes/_base/components/node-status-icon.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-status-icon.tsx
@@ -18,22 +18,22 @@ const NodeStatusIcon = ({
     <>
       {
         status === 'succeeded' && (
-          <RiCheckboxCircleFill className={cn('shrink-0 w-4 h-4 text-text-success', className)} />
+          <RiCheckboxCircleFill className={cn('text-text-success h-4 w-4 shrink-0', className)} />
         )
       }
       {
         status === 'failed' && (
-          <RiErrorWarningLine className={cn('shrink-0 w-4 h-4 text-text-warning', className)} />
+          <RiErrorWarningLine className={cn('text-text-warning h-4 w-4 shrink-0', className)} />
         )
       }
       {
         (status === 'stopped' || status === 'exception') && (
-          <RiAlertFill className={cn('shrink-0 w-4 h-4 text-text-warning-secondary', className)} />
+          <RiAlertFill className={cn('text-text-warning-secondary h-4 w-4 shrink-0', className)} />
         )
       }
       {
         status === 'running' && (
-          <RiLoader2Line className={cn('shrink-0 w-4 h-4 text-text-accent animate-spin', className)} />
+          <RiLoader2Line className={cn('text-text-accent h-4 w-4 shrink-0 animate-spin', className)} />
         )
       }
     </>
diff --git a/web/app/components/workflow/nodes/_base/components/option-card.tsx b/web/app/components/workflow/nodes/_base/components/option-card.tsx
index f19338d1b7..3ca41493a4 100644
--- a/web/app/components/workflow/nodes/_base/components/option-card.tsx
+++ b/web/app/components/workflow/nodes/_base/components/option-card.tsx
@@ -48,9 +48,9 @@ const OptionCard: FC<Props> = ({
   return (
     <div
       className={cn(
-        'flex items-center px-2 h-8 rounded-md system-sm-regular bg-components-option-card-option-bg border border-components-option-card-option-border text-text-secondary cursor-default',
+        'system-sm-regular bg-components-option-card-option-bg border-components-option-card-option-border text-text-secondary flex h-8 cursor-default items-center rounded-md border px-2',
         (!selected && !disabled) && 'hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover hover:shadow-xs cursor-pointer',
-        selected && 'bg-components-option-card-option-selected-bg border-[1.5px] border-components-option-card-option-selected-border system-sm-medium shadow-xs',
+        selected && 'bg-components-option-card-option-selected-bg border-components-option-card-option-selected-border system-sm-medium shadow-xs border-[1.5px]',
         disabled && 'text-text-disabled',
         variants({ align }),
         className,
diff --git a/web/app/components/workflow/nodes/_base/components/output-vars.tsx b/web/app/components/workflow/nodes/_base/components/output-vars.tsx
index 4a265a5a5b..4ea574fa90 100644
--- a/web/app/components/workflow/nodes/_base/components/output-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/output-vars.tsx
@@ -40,11 +40,11 @@ export const VarItem: FC<VarItemProps> = ({
 }) => {
   return (
     <div className='py-1'>
-      <div className='flex leading-[18px] items-center'>
+      <div className='flex items-center leading-[18px]'>
         <div className='code-sm-semibold text-text-secondary'>{name}</div>
-        <div className='ml-2 system-xs-regular text-text-tertiary'>{type}</div>
+        <div className='system-xs-regular text-text-tertiary ml-2'>{type}</div>
       </div>
-      <div className='mt-0.5 system-xs-regular text-text-tertiary'>
+      <div className='system-xs-regular text-text-tertiary mt-0.5'>
         {description}
         {subItems && (
           <div className='ml-2 border-l border-gray-200 pl-2'>
diff --git a/web/app/components/workflow/nodes/_base/components/panel-operator/change-block.tsx b/web/app/components/workflow/nodes/_base/components/panel-operator/change-block.tsx
index debeb9a7ce..677a8550f3 100644
--- a/web/app/components/workflow/nodes/_base/components/panel-operator/change-block.tsx
+++ b/web/app/components/workflow/nodes/_base/components/panel-operator/change-block.tsx
@@ -47,7 +47,7 @@ const ChangeBlock = ({
 
   const renderTrigger = useCallback(() => {
     return (
-      <div className='flex items-center px-3 w-[232px] h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'>
+      <div className='flex h-8 w-[232px] cursor-pointer items-center rounded-lg px-3 text-sm text-gray-700 hover:bg-gray-50'>
         {t('workflow.panel.changeBlock')}
       </div>
     )
diff --git a/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx b/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
index 43d65d3439..4430c58afe 100644
--- a/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
@@ -53,13 +53,13 @@ const PanelOperator = ({
       <PortalToFollowElemTrigger onClick={() => handleOpenChange(!open)}>
         <div
           className={`
-            flex items-center justify-center w-6 h-6 rounded-md cursor-pointer
-            hover:bg-state-base-hover
+            hover:bg-state-base-hover flex h-6 w-6 cursor-pointer items-center justify-center
+            rounded-md
             ${open && 'bg-state-base-hover'}
             ${triggerClassName}
           `}
         >
-          <RiMoreFill className={'w-4 h-4 text-text-tertiary'} />
+          <RiMoreFill className={'text-text-tertiary h-4 w-4'} />
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[11]'>
diff --git a/web/app/components/workflow/nodes/_base/components/panel-operator/panel-operator-popup.tsx b/web/app/components/workflow/nodes/_base/components/panel-operator/panel-operator-popup.tsx
index cd44d15606..ea06c1955f 100644
--- a/web/app/components/workflow/nodes/_base/components/panel-operator/panel-operator-popup.tsx
+++ b/web/app/components/workflow/nodes/_base/components/panel-operator/panel-operator-popup.tsx
@@ -83,7 +83,7 @@ const PanelOperatorPopup = ({
   const link = useNodeHelpLink(data.type)
 
   return (
-    <div className='w-[240px] border-[0.5px] border-gray-200 rounded-lg shadow-xl bg-white'>
+    <div className='w-[240px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-xl'>
       {
         (showChangeBlock || canRunBySingle(data.type)) && (
           <>
@@ -92,7 +92,7 @@ const PanelOperatorPopup = ({
                 canRunBySingle(data.type) && (
                   <div
                     className={`
-                      flex items-center px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer
+                      flex h-8 cursor-pointer items-center rounded-lg px-3 text-sm text-gray-700
                       hover:bg-gray-50
                     `}
                     onClick={() => {
@@ -125,7 +125,7 @@ const PanelOperatorPopup = ({
           <>
             <div className='p-1'>
               <div
-                className='flex items-center justify-between px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
+                className='flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm text-gray-700 hover:bg-gray-50'
                 onClick={() => {
                   onClosePopup()
                   handleNodesCopy(id)
@@ -135,7 +135,7 @@ const PanelOperatorPopup = ({
                 <ShortcutsName keys={['ctrl', 'c']} />
               </div>
               <div
-                className='flex items-center justify-between px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
+                className='flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm text-gray-700 hover:bg-gray-50'
                 onClick={() => {
                   onClosePopup()
                   handleNodesDuplicate(id)
@@ -149,7 +149,7 @@ const PanelOperatorPopup = ({
             <div className='p-1'>
               <div
                 className={`
-                flex items-center justify-between px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer
+                flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm text-gray-700
                 hover:bg-rose-50 hover:text-red-500
                 `}
                 onClick={() => handleNodeDelete(id)}
@@ -169,7 +169,7 @@ const PanelOperatorPopup = ({
               <a
                 href={link}
                 target='_blank'
-                className='flex items-center px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
+                className='flex h-8 cursor-pointer items-center rounded-lg px-3 text-sm text-gray-700 hover:bg-gray-50'
               >
                 {t('workflow.panel.helpLink')}
               </a>
@@ -180,10 +180,10 @@ const PanelOperatorPopup = ({
       }
       <div className='p-1'>
         <div className='px-3 py-2 text-xs text-gray-500'>
-          <div className='flex items-center mb-1 h-[22px] font-medium'>
+          <div className='mb-1 flex h-[22px] items-center font-medium'>
             {t('workflow.panel.about').toLocaleUpperCase()}
           </div>
-          <div className='mb-1 text-gray-700 leading-[18px]'>{about}</div>
+          <div className='mb-1 leading-[18px] text-gray-700'>{about}</div>
           <div className='leading-[18px]'>
             {t('workflow.panel.createdBy')} {author}
           </div>
diff --git a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
index 26066c9c14..aba0683923 100644
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -146,19 +146,19 @@ const Editor: FC<Props> = ({
   return (
     <Wrap className={cn(className, wrapClassName)} style={wrapStyle} isInNode isExpand={isExpand}>
       <div ref={ref} className={cn(isFocus ? (gradientBorder && s.gradientBorder) : 'bg-gray-100', isExpand && 'h-full', '!rounded-[9px] p-0.5', containerClassName)}>
-        <div className={cn(isFocus ? 'bg-gray-50' : 'bg-gray-100', isExpand && 'h-full flex flex-col', 'rounded-lg', containerClassName)}>
-          <div className={cn('pt-1 pl-3 pr-2 flex justify-between items-center', headerClassName)}>
+        <div className={cn(isFocus ? 'bg-gray-50' : 'bg-gray-100', isExpand && 'flex h-full flex-col', 'rounded-lg', containerClassName)}>
+          <div className={cn('flex items-center justify-between pl-3 pr-2 pt-1', headerClassName)}>
             <div className='flex gap-2'>
-              <div className={cn('leading-4 text-xs font-semibold text-gray-700 uppercase', titleClassName)}>{title} {required && <span className='text-red-500'>*</span>}</div>
+              <div className={cn('text-xs font-semibold uppercase leading-4 text-gray-700', titleClassName)}>{title} {required && <span className='text-red-500'>*</span>}</div>
               {titleTooltip && <Tooltip popupContent={titleTooltip} />}
             </div>
             <div className='flex items-center'>
-              <div className='leading-[18px] text-xs font-medium text-gray-500'>{value?.length || 0}</div>
+              <div className='text-xs font-medium leading-[18px] text-gray-500'>{value?.length || 0}</div>
               {isSupportPromptGenerator && (
                 <PromptGeneratorBtn className='ml-[5px]' onGenerated={onGenerated} modelConfig={modelConfig} />
               )}
 
-              <div className='w-px h-3 ml-2 mr-2 bg-gray-200'></div>
+              <div className='ml-2 mr-2 h-3 w-px bg-gray-200'></div>
               {/* Operations */}
               <div className='flex items-center space-x-[2px]'>
                 {isSupportJinja && (
@@ -171,8 +171,8 @@ const Editor: FC<Props> = ({
                     }
                     needsDelay
                   >
-                    <div className={cn(editionType === EditionType.jinja2 && 'border-black/5 bg-white', 'flex h-[22px] items-center px-1.5 rounded-[5px] border border-transparent hover:border-black/5 space-x-0.5')}>
-                      <Jinja className='w-6 h-3 text-gray-300' />
+                    <div className={cn(editionType === EditionType.jinja2 && 'border-black/5 bg-white', 'flex h-[22px] items-center space-x-0.5 rounded-[5px] border border-transparent px-1.5 hover:border-black/5')}>
+                      <Jinja className='h-3 w-6 text-gray-300' />
                       <Switch
                         size='sm'
                         defaultValue={editionType === EditionType.jinja2}
@@ -189,24 +189,24 @@ const Editor: FC<Props> = ({
                     popupContent={`${t('workflow.common.insertVarTip')}`}
                   >
                     <ActionButton onClick={handleInsertVariable}>
-                      <Variable02 className='w-4 h-4' />
+                      <Variable02 className='h-4 w-4' />
                     </ActionButton>
                   </Tooltip>
                 )}
                 {showRemove && (
                   <ActionButton onClick={onRemove}>
-                    <RiDeleteBinLine className='w-4 h-4' />
+                    <RiDeleteBinLine className='h-4 w-4' />
                   </ActionButton>
                 )}
                 {!isCopied
                   ? (
                     <ActionButton onClick={handleCopy}>
-                      <Clipboard className='w-4 h-4' />
+                      <Clipboard className='h-4 w-4' />
                     </ActionButton>
                   )
                   : (
                     <ActionButton>
-                      <ClipboardCheck className='w-4 h-4' />
+                      <ClipboardCheck className='h-4 w-4' />
                     </ActionButton>
                   )
                 }
@@ -217,10 +217,10 @@ const Editor: FC<Props> = ({
           </div>
 
           {/* Min: 80 Max: 560. Header: 24 */}
-          <div className={cn('pb-2', isExpand && 'flex flex-col grow')}>
+          <div className={cn('pb-2', isExpand && 'flex grow flex-col')}>
             {!(isSupportJinja && editionType === EditionType.jinja2)
               ? (
-                <div className={cn(isExpand ? 'grow' : 'max-h-[536px]', 'relative px-3 min-h-[56px]  overflow-y-auto', editorContainerClassName)}>
+                <div className={cn(isExpand ? 'grow' : 'max-h-[536px]', 'relative min-h-[56px] overflow-y-auto  px-3', editorContainerClassName)}>
                   <PromptEditor
                     key={controlPromptEditorRerenderKey}
                     placeholderClassName={placeholderClassName}
@@ -274,7 +274,7 @@ const Editor: FC<Props> = ({
                 </div>
               )
               : (
-                <div className={cn(isExpand ? 'grow' : 'max-h-[536px]', 'relative px-3 min-h-[56px]  overflow-y-auto', editorContainerClassName)}>
+                <div className={cn(isExpand ? 'grow' : 'max-h-[536px]', 'relative min-h-[56px] overflow-y-auto  px-3', editorContainerClassName)}>
                   <CodeEditor
                     availableVars={nodesOutputVars || []}
                     varList={varList}
diff --git a/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx b/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
index 1183bf7327..f4b06281ad 100644
--- a/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
+++ b/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
@@ -48,7 +48,7 @@ const ReadonlyInputWithSelectVar: FC<Props> = ({
 
       return (<span key={index}>
         <span className='relative top-[-3px] leading-[16px]'>{str}</span>
-        <div className=' inline-flex h-[16px] items-center px-1.5 rounded-[5px] bg-white'>
+        <div className=' inline-flex h-[16px] items-center rounded-[5px] bg-white px-1.5'>
           {!isEnv && !isChatVar && (
             <div className='flex items-center'>
               <div className='p-[1px]'>
@@ -57,15 +57,15 @@ const ReadonlyInputWithSelectVar: FC<Props> = ({
                   type={node?.type || BlockEnum.Start}
                 />
               </div>
-              <div className='max-w-[60px] mx-0.5 text-xs font-medium text-gray-700 truncate' title={node?.title}>{node?.title}</div>
+              <div className='mx-0.5 max-w-[60px] truncate text-xs font-medium text-gray-700' title={node?.title}>{node?.title}</div>
               <Line3 className='mr-0.5'></Line3>
             </div>
           )}
-          <div className='flex items-center text-primary-600'>
-            {!isEnv && !isChatVar && <Variable02 className='shrink-0 w-3.5 h-3.5' />}
-            {isEnv && <Env className='shrink-0 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
-            {isChatVar && <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />}
-            <div className={cn('max-w-[50px] ml-0.5 text-xs font-medium truncate', (isEnv || isChatVar) && 'text-gray-900')} title={varName}>{varName}</div>
+          <div className='text-primary-600 flex items-center'>
+            {!isEnv && !isChatVar && <Variable02 className='h-3.5 w-3.5 shrink-0' />}
+            {isEnv && <Env className='text-util-colors-violet-violet-600 h-3.5 w-3.5 shrink-0' />}
+            {isChatVar && <BubbleX className='text-util-colors-teal-teal-700 h-3.5 w-3.5' />}
+            <div className={cn('ml-0.5 max-w-[50px] truncate text-xs font-medium', (isEnv || isChatVar) && 'text-gray-900')} title={varName}>{varName}</div>
           </div>
         </div>
       </span>)
diff --git a/web/app/components/workflow/nodes/_base/components/remove-button.tsx b/web/app/components/workflow/nodes/_base/components/remove-button.tsx
index 70b268e1d8..9fc9c166bb 100644
--- a/web/app/components/workflow/nodes/_base/components/remove-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/remove-button.tsx
@@ -15,10 +15,10 @@ const Remove: FC<Props> = ({
 }) => {
   return (
     <div
-      className={cn(className, 'p-1 cursor-pointer rounded-md hover:bg-black/5 text-gray-500 hover:text-gray-800')}
+      className={cn(className, 'cursor-pointer rounded-md p-1 text-gray-500 hover:bg-black/5 hover:text-gray-800')}
       onClick={onClick}
     >
-      <RiDeleteBinLine className='w-4 h-4' />
+      <RiDeleteBinLine className='h-4 w-4' />
     </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx b/web/app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx
index 34c3e28d2c..6b6b6eec1e 100644
--- a/web/app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx
+++ b/web/app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx
@@ -40,7 +40,7 @@ const RetryOnNode = ({
   return (
     <div className='px-3'>
       <div className={cn(
-        'flex items-center justify-between px-[5px] py-1 bg-workflow-block-parma-bg border-[0.5px] border-transparent rounded-md system-xs-medium-uppercase text-text-tertiary',
+        'bg-workflow-block-parma-bg system-xs-medium-uppercase text-text-tertiary flex items-center justify-between rounded-md border-[0.5px] border-transparent px-[5px] py-1',
         isRunning && 'bg-state-accent-hover border-state-accent-active text-text-accent',
         isSuccessful && 'bg-state-success-hover border-state-success-active text-text-success',
         (isException || isFailed) && 'bg-state-warning-hover border-state-warning-active text-text-warning',
@@ -54,7 +54,7 @@ const RetryOnNode = ({
           {
             isRunning && (
               <>
-                <RiLoader2Line className='animate-spin mr-1 w-3.5 h-3.5' />
+                <RiLoader2Line className='mr-1 h-3.5 w-3.5 animate-spin' />
                 {t('workflow.nodes.common.retry.retrying')}
               </>
             )
@@ -62,7 +62,7 @@ const RetryOnNode = ({
           {
             isSuccessful && (
               <>
-                <RiCheckboxCircleFill className='mr-1 w-3.5 h-3.5' />
+                <RiCheckboxCircleFill className='mr-1 h-3.5 w-3.5' />
                 {t('workflow.nodes.common.retry.retrySuccessful')}
               </>
             )
@@ -70,7 +70,7 @@ const RetryOnNode = ({
           {
             (isFailed || isException) && (
               <>
-                <RiAlertFill className='mr-1 w-3.5 h-3.5' />
+                <RiAlertFill className='mr-1 h-3.5 w-3.5' />
                 {t('workflow.nodes.common.retry.retryFailed')}
               </>
             )
diff --git a/web/app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx b/web/app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx
index dc877a632c..83557b97d6 100644
--- a/web/app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx
+++ b/web/app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx
@@ -53,9 +53,9 @@ const RetryOnPanel = ({
   return (
     <>
       <div className='pt-2'>
-        <div className='flex items-center justify-between px-4 py-2 h-10'>
+        <div className='flex h-10 items-center justify-between px-4 py-2'>
           <div className='flex items-center'>
-            <div className='mr-0.5 system-sm-semibold-uppercase text-text-secondary'>{t('workflow.nodes.common.retry.retryOnFailure')}</div>
+            <div className='system-sm-semibold-uppercase text-text-secondary mr-0.5'>{t('workflow.nodes.common.retry.retryOnFailure')}</div>
           </div>
           <Switch
             defaultValue={retry_config?.retry_enabled}
@@ -65,8 +65,8 @@ const RetryOnPanel = ({
         {
           retry_config?.retry_enabled && (
             <div className='px-4 pb-2'>
-              <div className='flex items-center mb-1 w-full'>
-                <div className='grow mr-2 system-xs-medium-uppercase'>{t('workflow.nodes.common.retry.maxRetries')}</div>
+              <div className='mb-1 flex w-full items-center'>
+                <div className='system-xs-medium-uppercase mr-2 grow'>{t('workflow.nodes.common.retry.maxRetries')}</div>
                 <Slider
                   className='mr-3 w-[108px]'
                   value={retry_config?.max_retries || 3}
@@ -86,7 +86,7 @@ const RetryOnPanel = ({
                 />
               </div>
               <div className='flex items-center'>
-                <div className='grow mr-2 system-xs-medium-uppercase'>{t('workflow.nodes.common.retry.retryInterval')}</div>
+                <div className='system-xs-medium-uppercase mr-2 grow'>{t('workflow.nodes.common.retry.retryInterval')}</div>
                 <Slider
                   className='mr-3 w-[108px]'
                   value={retry_config?.retry_interval || 1000}
diff --git a/web/app/components/workflow/nodes/_base/components/selector.tsx b/web/app/components/workflow/nodes/_base/components/selector.tsx
index 18b846ce18..460a6bf360 100644
--- a/web/app/components/workflow/nodes/_base/components/selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/selector.tsx
@@ -65,14 +65,14 @@ const TypeSelector: FC<Props> = ({
         : (
           <div
             onClick={toggleShow}
-            className={cn(showOption && 'bg-black/5', 'flex items-center h-5 pl-1 pr-0.5 rounded-md text-xs font-semibold text-gray-700 cursor-pointer hover:bg-black/5')}>
+            className={cn(showOption && 'bg-black/5', 'flex h-5 cursor-pointer items-center rounded-md pl-1 pr-0.5 text-xs font-semibold text-gray-700 hover:bg-black/5')}>
             <div className={cn('text-sm font-semibold', uppercase && 'uppercase', noValue && 'text-gray-400', triggerClassName)}>{!noValue ? item?.label : placeholder}</div>
-            {!readonly && <DropDownIcon className='w-3 h-3 ' />}
+            {!readonly && <DropDownIcon className='h-3 w-3 ' />}
           </div>
         )}
 
       {(showOption && !readonly) && (
-        <div className={cn('absolute z-10 top-[24px] w-[120px]  p-1 border border-gray-200 shadow-lg rounded-lg bg-white select-none', popupClassName)}>
+        <div className={cn('absolute top-[24px] z-10 w-[120px]  select-none rounded-lg border border-gray-200 bg-white p-1 shadow-lg', popupClassName)}>
           {list.map(item => (
             <div
               key={item.value}
@@ -80,10 +80,10 @@ const TypeSelector: FC<Props> = ({
                 setHide()
                 onChange(item.value)
               }}
-              className={cn(itemClassName, uppercase && 'uppercase', 'flex items-center h-[30px] justify-between min-w-[44px] px-3 rounded-lg cursor-pointer text-[13px] font-medium text-gray-700 hover:bg-gray-50')}
+              className={cn(itemClassName, uppercase && 'uppercase', 'flex h-[30px] min-w-[44px] cursor-pointer items-center justify-between rounded-lg px-3 text-[13px] font-medium text-gray-700 hover:bg-gray-50')}
             >
               <div>{item.label}</div>
-              {showChecked && item.value === value && <Check className='text-primary-600 w-4 h-4' />}
+              {showChecked && item.value === value && <Check className='text-primary-600 h-4 w-4' />}
             </div>
           ))
           }
diff --git a/web/app/components/workflow/nodes/_base/components/setting-item.tsx b/web/app/components/workflow/nodes/_base/components/setting-item.tsx
index ca074ffbb7..b416a47b24 100644
--- a/web/app/components/workflow/nodes/_base/components/setting-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/setting-item.tsx
@@ -12,12 +12,12 @@ export type SettingItemProps = PropsWithChildren<{
 export const SettingItem = memo(({ label, children, status, tooltip }: SettingItemProps) => {
   const indicator: ComponentProps<typeof Indicator>['color'] = status === 'error' ? 'red' : status === 'warning' ? 'yellow' : undefined
   const needTooltip = ['error', 'warning'].includes(status as any)
-  return <div className='flex items-center justify-between bg-workflow-block-parma-bg rounded-md py-1 px-1.5 space-x-1 text-xs font-normal relative'>
+  return <div className='bg-workflow-block-parma-bg relative flex items-center justify-between space-x-1 rounded-md px-1.5 py-1 text-xs font-normal'>
     <div className={classNames('shrink-0 truncate text-text-tertiary system-xs-medium-uppercase', !!children && 'max-w-[100px]')}>
       {label}
     </div>
     <Tooltip popupContent={tooltip} disabled={!needTooltip}>
-      <div className='truncate text-right system-xs-medium text-text-secondary'>
+      <div className='system-xs-medium text-text-secondary truncate text-right'>
         {children}
       </div>
     </Tooltip>
diff --git a/web/app/components/workflow/nodes/_base/components/split.tsx b/web/app/components/workflow/nodes/_base/components/split.tsx
index 9f773ba960..5509112464 100644
--- a/web/app/components/workflow/nodes/_base/components/split.tsx
+++ b/web/app/components/workflow/nodes/_base/components/split.tsx
@@ -11,7 +11,7 @@ const Split: FC<Props> = ({
   className,
 }) => {
   return (
-    <div className={cn(className, 'h-[0.5px] bg-divider-subtle')}>
+    <div className={cn(className, 'bg-divider-subtle h-[0.5px]')}>
     </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx b/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
index cf8cbbc2ca..6999a973f1 100644
--- a/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
@@ -31,7 +31,7 @@ const SupportVarInput: FC<Props> = ({
   return (
     <div
       className={
-        cn(wrapClassName, 'flex w-full h-full')
+        cn(wrapClassName, 'flex h-full w-full')
       } onClick={onFocus}
     >
       {(isFocus && !readonly && children)
@@ -40,7 +40,7 @@ const SupportVarInput: FC<Props> = ({
         )
         : (
           <div
-            className={cn(textClassName, 'w-0 grow h-full whitespace-nowrap truncate')}
+            className={cn(textClassName, 'h-full w-0 grow truncate whitespace-nowrap')}
             title={value}
             dangerouslySetInnerHTML={{
               __html: withHightContent,
diff --git a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
index ea35c8492f..7e2ebcc22f 100644
--- a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
+++ b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
@@ -61,7 +61,7 @@ export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
   }
   const { t } = useTranslation()
   return <Tooltip popupContent={!isShow && !isShowUpdateModal && tooltip} triggerMethod='hover'>
-    <div className={cn('w-fit flex items-center justify-center', className)} onClick={e => e.stopPropagation()}>
+    <div className={cn('flex w-fit items-center justify-center', className)} onClick={e => e.stopPropagation()}>
       {isShowUpdateModal && pluginDetail && <PluginMutationModel
         onCancel={hideUpdateModal}
         plugin={pluginManifestToCardPluginProps({
@@ -81,7 +81,7 @@ export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
         </>}
         modalBottomLeft={
           <Link
-            className='flex justify-center items-center gap-1'
+            className='flex items-center justify-center gap-1'
             href={`${marketplaceUrlPrefix}/plugins/${pluginDetail.declaration.author}/${pluginDetail.declaration.name}`}
             target='_blank'
           >
@@ -107,14 +107,14 @@ export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
         trigger={
           <Badge
             className={cn(
-              'mx-1 hover:bg-state-base-hover flex',
+              'hover:bg-state-base-hover mx-1 flex',
               isShow && 'bg-state-base-hover',
             )}
             uppercase={true}
             text={
               <>
                 <div>{pluginDetail.version}</div>
-                <RiArrowLeftRightLine className='ml-1 w-3 h-3 text-text-tertiary' />
+                <RiArrowLeftRightLine className='text-text-tertiary ml-1 h-3 w-3' />
               </>
             }
             hasRedCornerMark={true}
diff --git a/web/app/components/workflow/nodes/_base/components/title-description-input.tsx b/web/app/components/workflow/nodes/_base/components/title-description-input.tsx
index f17d34af8a..5364762b46 100644
--- a/web/app/components/workflow/nodes/_base/components/title-description-input.tsx
+++ b/web/app/components/workflow/nodes/_base/components/title-description-input.tsx
@@ -33,8 +33,8 @@ export const TitleInput = memo(({
       value={localValue}
       onChange={e => setLocalValue(e.target.value)}
       className={`
-        grow mr-2 px-1 h-7 text-text-primary system-xl-semibold rounded-md border border-transparent appearance-none outline-none
-        focus:shadow-xs min-w-0
+        text-text-primary system-xl-semibold focus:shadow-xs mr-2 h-7 min-w-0 grow appearance-none rounded-md border border-transparent
+        px-1 outline-none
       `}
       placeholder={t('workflow.common.addTitle') || ''}
       onBlur={handleBlur}
@@ -63,8 +63,8 @@ export const DescriptionInput = memo(({
   return (
     <div
       className={`
-        group flex px-2 py-[5px] max-h-[60px] rounded-lg overflow-y-auto
-        leading-0 bg-components-panel-bg
+        leading-0 bg-components-panel-bg group flex max-h-[60px] overflow-y-auto rounded-lg
+        px-2 py-[5px]
         ${focus && '!shadow-xs'}
       `}
     >
@@ -75,9 +75,9 @@ export const DescriptionInput = memo(({
         onFocus={handleFocus}
         onBlur={handleBlur}
         className={`
-          w-full text-xs text-gray-900 leading-[18px] bg-transparent
-          appearance-none outline-none resize-none
-          placeholder:text-gray-400 caret-[#295EFF]
+          w-full resize-none appearance-none bg-transparent text-xs
+          leading-[18px] text-gray-900 caret-[#295EFF]
+          outline-none placeholder:text-gray-400
         `}
         placeholder={t('workflow.common.addDescription') || ''}
         autoSize
diff --git a/web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx b/web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx
index 8f31fd15b9..f597b24b9f 100644
--- a/web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx
+++ b/web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx
@@ -23,7 +23,7 @@ const ExpandBtn: FC<Props> = ({
   const Icon = isExpand ? RiCollapseDiagonalLine : RiExpandDiagonalLine
   return (
     <ActionButton onClick={handleToggle}>
-      <Icon className='w-4 h-4' />
+      <Icon className='h-4 w-4' />
     </ActionButton>
   )
 }
diff --git a/web/app/components/workflow/nodes/_base/components/variable-tag.tsx b/web/app/components/workflow/nodes/_base/components/variable-tag.tsx
index 67c8bb57df..2b0f275ee4 100644
--- a/web/app/components/workflow/nodes/_base/components/variable-tag.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable-tag.tsx
@@ -51,7 +51,7 @@ const VariableTag = ({
   const { t } = useTranslation()
   return (
     <Tooltip popupContent={!isValid && t('workflow.errorMsg.invalidVariable')}>
-      <div className={cn('inline-flex items-center px-1.5 max-w-full h-6 text-xs rounded-md border-[0.5px] border-[rgba(16, 2440,0.08)] bg-white shadow-xs',
+      <div className={cn('border-[rgba(16, 2440,0.08)] shadow-xs inline-flex h-6 max-w-full items-center rounded-md border-[0.5px] bg-white px-1.5 text-xs',
         !isValid && 'border-red-400 !bg-[#FEF3F2]',
       )}>
         {(!isEnv && !isChatVar && <>
@@ -61,30 +61,30 @@ const VariableTag = ({
                 type={BlockEnum.Start}
               />
               <div
-                className='max-w-[60px] truncate text-text-secondary font-medium'
+                className='text-text-secondary max-w-[60px] truncate font-medium'
                 title={node?.data.title}
               >
                 {node?.data.title}
               </div>
             </>
           )}
-          <Line3 className='shrink-0 mx-0.5' />
-          <Variable02 className={cn('shrink-0 mr-0.5 w-3.5 h-3.5 text-text-accent', isException && 'text-text-warning')} />
+          <Line3 className='mx-0.5 shrink-0' />
+          <Variable02 className={cn('text-text-accent mr-0.5 h-3.5 w-3.5 shrink-0', isException && 'text-text-warning')} />
         </>)}
-        {isEnv && <Env className='shrink-0 mr-0.5 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
-        {isChatVar && <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />}
+        {isEnv && <Env className='text-util-colors-violet-violet-600 mr-0.5 h-3.5 w-3.5 shrink-0' />}
+        {isChatVar && <BubbleX className='text-util-colors-teal-teal-700 h-3.5 w-3.5' />}
         <div
-          className={cn('truncate ml-0.5 text-text-accent font-medium', (isEnv || isChatVar) && 'text-text-secondary', isException && 'text-text-warning')}
+          className={cn('text-text-accent ml-0.5 truncate font-medium', (isEnv || isChatVar) && 'text-text-secondary', isException && 'text-text-warning')}
           title={variableName}
         >
           {variableName}
         </div>
         {
           !isShort && varType && (
-            <div className='shrink-0 ml-0.5 text-text-tertiary'>{capitalize(varType)}</div>
+            <div className='text-text-tertiary ml-0.5 shrink-0'>{capitalize(varType)}</div>
           )
         }
-        {!isValid && <RiErrorWarningFill className='ml-0.5 w-3 h-3 text-[#D92D20]' />}
+        {!isValid && <RiErrorWarningFill className='ml-0.5 h-3 w-3 text-[#D92D20]' />}
       </div>
     </Tooltip>
   )
diff --git a/web/app/components/workflow/nodes/_base/components/variable/assigned-var-reference-popup.tsx b/web/app/components/workflow/nodes/_base/components/variable/assigned-var-reference-popup.tsx
index 9ad5ad4a5a..4c3e3cd5e4 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/assigned-var-reference-popup.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/assigned-var-reference-popup.tsx
@@ -19,7 +19,7 @@ const AssignedVarReferencePopup: FC<Props> = ({
   const { t } = useTranslation()
   // max-h-[300px] overflow-y-auto todo: use portal to handle long list
   return (
-    <div className='p-1 bg-components-panel-bg-bur rounded-lg border-[0.5px] border-components-panel-border shadow-lg w-[352px]' >
+    <div className='bg-components-panel-bg-bur border-components-panel-border w-[352px] rounded-lg border-[0.5px] p-1 shadow-lg' >
       {(!vars || vars.length === 0)
         ? <ListEmpty
           title={t('workflow.nodes.assigner.noAssignedVars') || ''}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/constant-field.tsx b/web/app/components/workflow/nodes/_base/components/variable/constant-field.tsx
index b2052053a3..45a1328c7b 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/constant-field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/constant-field.tsx
@@ -48,7 +48,7 @@ const ConstantField: FC<Props> = ({
       {schema.type === FormTypeEnum.textNumber && (
         <input
           type='number'
-          className='w-full h-8 leading-8 p-2 rounded-lg bg-gray-100 text-[13px] font-normal text-gray-900 placeholder:text-gray-400 focus:outline-none overflow-hidden'
+          className='h-8 w-full overflow-hidden rounded-lg bg-gray-100 p-2 text-[13px] font-normal leading-8 text-gray-900 placeholder:text-gray-400 focus:outline-none'
           value={value}
           onChange={handleStaticChange}
           readOnly={readonly}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx b/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
index 17c0061f0e..c9e770c4d7 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
@@ -98,7 +98,7 @@ const OutputVarList: FC<Props> = ({
             onChange={handleVarTypeChange(index)}
           />
           <RemoveButton
-            className='!p-2 !bg-gray-100 hover:!bg-gray-200'
+            className='!bg-gray-100 !p-2 hover:!bg-gray-200'
             onClick={handleVarRemove(index)}
           />
         </div>
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
index fe2bb20987..3f4ca943aa 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
@@ -100,7 +100,7 @@ const VarList: FC<Props> = ({
           />
           {!readonly && (
             <RemoveButton
-              className='!p-2 !bg-gray-100 hover:!bg-gray-200'
+              className='!bg-gray-100 !p-2 hover:!bg-gray-200'
               onClick={handleVarRemove(index)}
             />
           )}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
index c7ef4598f7..7b41a8b8c6 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
@@ -264,7 +264,7 @@ const VarReferencePicker: FC<Props> = ({
           if (readonly)
             return
           !isConstant ? setOpen(!open) : setControlFocus(Date.now())
-        }} className='!flex group/picker-trigger-wrap relative'>
+        }} className='group/picker-trigger-wrap relative !flex'>
           <>
             {isAddBtnTrigger
               ? (
@@ -272,19 +272,19 @@ const VarReferencePicker: FC<Props> = ({
                   <AddButton onClick={() => { }}></AddButton>
                 </div>
               )
-              : (<div ref={!isSupportConstantValue ? triggerRef : null} className={cn((open || isFocus) ? 'border-gray-300' : 'border-gray-100', 'relative group/wrap flex items-center w-full h-8', !isSupportConstantValue && 'p-1 rounded-lg bg-components-input-bg-normal', isInTable && 'bg-transparent border-none', readonly && 'bg-components-input-bg-disabled')}>
+              : (<div ref={!isSupportConstantValue ? triggerRef : null} className={cn((open || isFocus) ? 'border-gray-300' : 'border-gray-100', 'group/wrap relative flex h-8 w-full items-center', !isSupportConstantValue && 'bg-components-input-bg-normal rounded-lg p-1', isInTable && 'border-none bg-transparent', readonly && 'bg-components-input-bg-disabled')}>
                 {isSupportConstantValue
                   ? <div onClick={(e) => {
                     e.stopPropagation()
                     setOpen(false)
                     setControlFocus(Date.now())
-                  }} className='h-full mr-1 flex items-center space-x-1'>
+                  }} className='mr-1 flex h-full items-center space-x-1'>
                     <TypeSelector
                       noLeft
                       trigger={
-                        <div className='flex items-center h-8 px-2 radius-md bg-components-input-bg-normal'>
-                          <div className='mr-1 system-sm-regular text-components-input-text-filled'>{varKindTypes.find(item => item.value === varKindType)?.label}</div>
-                          <RiArrowDownSLine className='w-4 h-4 text-text-quaternary' />
+                        <div className='radius-md bg-components-input-bg-normal flex h-8 items-center px-2'>
+                          <div className='system-sm-regular text-components-input-text-filled mr-1'>{varKindTypes.find(item => item.value === varKindType)?.label}</div>
+                          <RiArrowDownSLine className='text-text-quaternary h-4 w-4' />
                         </div>
                       }
                       popupClassName='top-8'
@@ -296,7 +296,7 @@ const VarReferencePicker: FC<Props> = ({
                     />
                   </div>
                   : (!hasValue && <div className='ml-1.5 mr-1'>
-                    <Variable02 className={`w-4 h-4 ${readonly ? 'text-components-input-text-disabled' : 'text-components-input-text-placeholder'}`} />
+                    <Variable02 className={`h-4 w-4 ${readonly ? 'text-components-input-text-disabled' : 'text-components-input-text-placeholder'}`} />
                   </div>)}
                 {isConstant
                   ? (
@@ -314,43 +314,43 @@ const VarReferencePicker: FC<Props> = ({
                           return
                         !isConstant ? setOpen(!open) : setControlFocus(Date.now())
                       }}
-                      className='grow h-full'
+                      className='h-full grow'
                     >
-                      <div ref={isSupportConstantValue ? triggerRef : null} className={cn('h-full', isSupportConstantValue && 'flex items-center pl-1 py-1 rounded-lg bg-gray-100')}>
+                      <div ref={isSupportConstantValue ? triggerRef : null} className={cn('h-full', isSupportConstantValue && 'flex items-center rounded-lg bg-gray-100 py-1 pl-1')}>
                         <Tooltip popupContent={!isValidVar && hasValue && t('workflow.errorMsg.invalidVariable')}>
-                          <div className={cn('h-full items-center px-1.5 rounded-[5px]', hasValue ? 'bg-white inline-flex' : 'flex')}>
+                          <div className={cn('h-full items-center rounded-[5px] px-1.5', hasValue ? 'inline-flex bg-white' : 'flex')}>
                             {hasValue
                               ? (
                                 <>
                                   {isShowNodeName && !isEnv && !isChatVar && (
                                     <div className='flex items-center'>
-                                      <div className='px-[1px] h-3'>
+                                      <div className='h-3 px-[1px]'>
                                         {outputVarNode?.type && <VarBlockIcon
                                           className='!text-gray-900'
                                           type={outputVarNode.type}
                                         />}
                                       </div>
-                                      <div className='mx-0.5 text-xs font-medium text-gray-700 truncate' title={outputVarNode?.title} style={{
+                                      <div className='mx-0.5 truncate text-xs font-medium text-gray-700' title={outputVarNode?.title} style={{
                                         maxWidth: maxNodeNameWidth,
                                       }}>{outputVarNode?.title}</div>
                                       <Line3 className='mr-0.5'></Line3>
                                     </div>
                                   )}
-                                  <div className='flex items-center text-primary-600'>
-                                    {!hasValue && <Variable02 className='w-3.5 h-3.5' />}
-                                    {isEnv && <Env className='w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
-                                    {isChatVar && <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />}
-                                    <div className={cn('ml-0.5 text-xs font-medium truncate', isEnv && '!text-text-secondary', isChatVar && 'text-util-colors-teal-teal-700', isException && 'text-text-warning')} title={varName} style={{
+                                  <div className='text-primary-600 flex items-center'>
+                                    {!hasValue && <Variable02 className='h-3.5 w-3.5' />}
+                                    {isEnv && <Env className='text-util-colors-violet-violet-600 h-3.5 w-3.5' />}
+                                    {isChatVar && <BubbleX className='text-util-colors-teal-teal-700 h-3.5 w-3.5' />}
+                                    <div className={cn('ml-0.5 truncate text-xs font-medium', isEnv && '!text-text-secondary', isChatVar && 'text-util-colors-teal-teal-700', isException && 'text-text-warning')} title={varName} style={{
                                       maxWidth: maxVarNameWidth,
                                     }}>{varName}</div>
                                   </div>
-                                  <div className='ml-0.5 capitalize truncate text-text-tertiary text-center system-xs-regular' title={type} style={{
+                                  <div className='text-text-tertiary system-xs-regular ml-0.5 truncate text-center capitalize' title={type} style={{
                                     maxWidth: maxTypeWidth,
                                   }}>{type}</div>
-                                  {!isValidVar && <RiErrorWarningFill className='ml-0.5 w-3 h-3 text-[#D92D20]' />}
+                                  {!isValidVar && <RiErrorWarningFill className='ml-0.5 h-3 w-3 text-[#D92D20]' />}
                                 </>
                               )
-                              : <div className={`overflow-hidden ${readonly ? 'text-components-input-text-disabled' : 'text-components-input-text-placeholder'} text-ellipsis system-sm-regular`}>{placeholder ?? t('workflow.common.setVarValuePlaceholder')}</div>}
+                              : <div className={`overflow-hidden ${readonly ? 'text-components-input-text-disabled' : 'text-components-input-text-placeholder'} system-sm-regular text-ellipsis`}>{placeholder ?? t('workflow.common.setVarValuePlaceholder')}</div>}
                           </div>
                         </Tooltip>
                       </div>
@@ -358,10 +358,10 @@ const VarReferencePicker: FC<Props> = ({
                     </VarPickerWrap>
                   )}
                 {(hasValue && !readonly && !isInTable) && (<div
-                  className='invisible group-hover/wrap:visible absolute h-5 right-1 top-[50%] translate-y-[-50%] group p-1 rounded-md hover:bg-black/5 cursor-pointer'
+                  className='group invisible absolute right-1 top-[50%] h-5 translate-y-[-50%] cursor-pointer rounded-md p-1 hover:bg-black/5 group-hover/wrap:visible'
                   onClick={handleClearVar}
                 >
-                  <RiCloseLine className='w-3.5 h-3.5 text-gray-500 group-hover:text-gray-800' />
+                  <RiCloseLine className='h-3.5 w-3.5 text-gray-500 group-hover:text-gray-800' />
                 </div>)}
                 {!hasValue && valueTypePlaceHolder && (
                   <Badge
@@ -373,7 +373,7 @@ const VarReferencePicker: FC<Props> = ({
               </div>)}
             {!readonly && isInTable && (
               <RemoveButton
-                className='group-hover/picker-trigger-wrap:block hidden absolute right-1 top-0.5'
+                className='absolute right-1 top-0.5 hidden group-hover/picker-trigger-wrap:block'
                 onClick={() => onRemove?.()}
               />
             )}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
index d9a4d2c946..1de75936db 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
@@ -27,7 +27,7 @@ const VarReferencePopup: FC<Props> = ({
   const { locale } = useContext(I18n)
   // max-h-[300px] overflow-y-auto todo: use portal to handle long list
   return (
-    <div className='p-1 bg-white rounded-lg border border-gray-200 shadow-lg space-y-1' style={{
+    <div className='space-y-1 rounded-lg border border-gray-200 bg-white p-1 shadow-lg' style={{
       width: itemWidth || 228,
     }}>
       {((!vars || vars.length === 0) && popupFor)
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
index 3b7845003a..4093a123d0 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -106,27 +106,27 @@ const Item: FC<ItemProps> = ({
           className={cn(
             isObj ? ' pr-1' : 'pr-[18px]',
             isHovering && (isObj ? 'bg-primary-50' : 'bg-state-base-hover'),
-            'relative w-full flex items-center h-6 pl-3  rounded-md cursor-pointer')
+            'relative flex h-6 w-full cursor-pointer items-center  rounded-md pl-3')
           }
           onClick={handleChosen}
         >
-          <div className='flex items-center w-0 grow'>
-            {!isEnv && !isChatVar && <Variable02 className={cn('shrink-0 w-3.5 h-3.5 text-text-accent', isException && 'text-text-warning')} />}
-            {isEnv && <Env className='shrink-0 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
-            {isChatVar && <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />}
+          <div className='flex w-0 grow items-center'>
+            {!isEnv && !isChatVar && <Variable02 className={cn('text-text-accent h-3.5 w-3.5 shrink-0', isException && 'text-text-warning')} />}
+            {isEnv && <Env className='text-util-colors-violet-violet-600 h-3.5 w-3.5 shrink-0' />}
+            {isChatVar && <BubbleX className='text-util-colors-teal-teal-700 h-3.5 w-3.5' />}
             {!isEnv && !isChatVar && (
-              <div title={itemData.variable} className='ml-1 w-0 grow truncate text-text-secondary system-sm-medium'>{itemData.variable}</div>
+              <div title={itemData.variable} className='text-text-secondary system-sm-medium ml-1 w-0 grow truncate'>{itemData.variable}</div>
             )}
             {isEnv && (
-              <div title={itemData.variable} className='ml-1 w-0 grow truncate text-text-secondary system-sm-medium'>{itemData.variable.replace('env.', '')}</div>
+              <div title={itemData.variable} className='text-text-secondary system-sm-medium ml-1 w-0 grow truncate'>{itemData.variable.replace('env.', '')}</div>
             )}
             {isChatVar && (
-              <div title={itemData.des} className='ml-1 w-0 grow truncate text-text-secondary system-sm-medium'>{itemData.variable.replace('conversation.', '')}</div>
+              <div title={itemData.des} className='text-text-secondary system-sm-medium ml-1 w-0 grow truncate'>{itemData.variable.replace('conversation.', '')}</div>
             )}
           </div>
-          <div className='ml-1 shrink-0 text-xs font-normal text-text-tertiary capitalize'>{itemData.type}</div>
+          <div className='text-text-tertiary ml-1 shrink-0 text-xs font-normal capitalize'>{itemData.type}</div>
           {isObj && (
-            <ChevronRight className={cn('ml-0.5 w-3 h-3 text-text-quaternary', isHovering && 'text-text-tertiary')} />
+            <ChevronRight className={cn('text-text-quaternary ml-0.5 h-3 w-3', isHovering && 'text-text-tertiary')} />
           )}
         </div>
       </PortalToFollowElemTrigger>
@@ -201,11 +201,11 @@ const ObjectChildren: FC<ObjectChildrenProps> = ({
   }, [isItemHovering])
   // absolute top-[-2px]
   return (
-    <div ref={itemRef} className=' bg-white rounded-lg border border-gray-200 shadow-lg space-y-1' style={{
+    <div ref={itemRef} className=' space-y-1 rounded-lg border border-gray-200 bg-white shadow-lg' style={{
       right: itemWidth ? itemWidth - 10 : 215,
       minWidth: 252,
     }}>
-      <div className='flex items-center h-[22px] px-3 text-xs font-normal text-gray-700'><span className='text-gray-500'>{title}.</span>{currObjPath.join('.')}</div>
+      <div className='flex h-[22px] items-center px-3 text-xs font-normal text-gray-700'><span className='text-gray-500'>{title}.</span>{currObjPath.join('.')}</div>
       {
         (data && data.length > 0)
         && data.map((v, i) => (
@@ -277,7 +277,7 @@ const VarReferenceVars: FC<Props> = ({
       {
         !hideSearch && (
           <>
-            <div className={cn('mb-1 mx-2 mt-2', searchBoxClassName)} onClick={e => e.stopPropagation()}>
+            <div className={cn('mx-2 mb-1 mt-2', searchBoxClassName)} onClick={e => e.stopPropagation()}>
               <Input
                 showLeftIcon
                 showClearIcon
@@ -288,7 +288,7 @@ const VarReferenceVars: FC<Props> = ({
                 autoFocus
               />
             </div>
-            <div className='h-[0.5px] bg-black/5 relative left-[-4px]' style={{
+            <div className='relative left-[-4px] h-[0.5px] bg-black/5' style={{
               width: 'calc(100% + 8px)',
             }}></div>
           </>
@@ -302,7 +302,7 @@ const VarReferenceVars: FC<Props> = ({
             filteredVars.map((item, i) => (
               <div key={i}>
                 <div
-                  className='leading-[22px] px-3 text-text-tertiary system-xs-medium-uppercase truncate'
+                  className='text-text-tertiary system-xs-medium-uppercase truncate px-3 leading-[22px]'
                   title={item.title}
                 >{item.title}</div>
                 {item.vars.map((v, j) => (
@@ -321,7 +321,7 @@ const VarReferenceVars: FC<Props> = ({
               </div>))
           }
         </div>
-        : <div className='pl-3 leading-[18px] text-xs font-medium text-gray-500 uppercase'>{t('workflow.common.noVar')}</div>}
+        : <div className='pl-3 text-xs font-medium uppercase leading-[18px] text-gray-500'>{t('workflow.common.noVar')}</div>}
     </ >
   )
 }
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
index c976bdfbfb..45c392b22f 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
@@ -43,23 +43,23 @@ const VarReferencePicker: FC<Props> = ({
         offset={4}
       >
         <PortalToFollowElemTrigger onClick={() => setOpen(!open)} className='w-[120px] cursor-pointer'>
-          <div className='flex items-center h-8 justify-between px-2.5 rounded-lg border-0 bg-gray-100 text-gray-900 text-[13px]'>
-            <div className='capitalize grow w-0 truncate' title={value}>{value}</div>
-            <RiArrowDownSLine className='shrink-0 w-3.5 h-3.5 text-gray-700' />
+          <div className='flex h-8 items-center justify-between rounded-lg border-0 bg-gray-100 px-2.5 text-[13px] text-gray-900'>
+            <div className='w-0 grow truncate capitalize' title={value}>{value}</div>
+            <RiArrowDownSLine className='h-3.5 w-3.5 shrink-0 text-gray-700' />
           </div>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent style={{
           zIndex: 100,
         }}>
-          <div className='w-[120px] p-1 bg-white rounded-lg shadow-sm'>
+          <div className='w-[120px] rounded-lg bg-white p-1 shadow-sm'>
             {TYPES.map(type => (
               <div
                 key={type}
-                className='flex items-center h-[30px] justify-between pl-3 pr-2 rounded-lg hover:bg-gray-100 text-gray-900 text-[13px] cursor-pointer'
+                className='flex h-[30px] cursor-pointer items-center justify-between rounded-lg pl-3 pr-2 text-[13px] text-gray-900 hover:bg-gray-100'
                 onClick={handleChange(type)}
               >
-                <div className='w-0 grow capitalize truncate'>{type}</div>
-                {type === value && <Check className='shrink-0 w-4 h-4 text-primary-600' />}
+                <div className='w-0 grow truncate capitalize'>{type}</div>
+                {type === value && <Check className='text-primary-600 h-4 w-4 shrink-0' />}
               </div>
             ))}
           </div>
diff --git a/web/app/components/workflow/nodes/_base/node.tsx b/web/app/components/workflow/nodes/_base/node.tsx
index 321323a18c..4020fd15f9 100644
--- a/web/app/components/workflow/nodes/_base/node.tsx
+++ b/web/app/components/workflow/nodes/_base/node.tsx
@@ -91,7 +91,7 @@ const BaseNode: FC<BaseNodeProps> = ({
   return (
     <div
       className={cn(
-        'flex border-[2px] rounded-2xl',
+        'flex rounded-2xl border-[2px]',
         showSelectedBorder ? 'border-components-option-card-option-selected-border' : 'border-transparent',
         !showSelectedBorder && data._inParallelHovering && 'border-workflow-block-border-highlight',
         data._waitingRun && 'opacity-70',
@@ -104,10 +104,10 @@ const BaseNode: FC<BaseNodeProps> = ({
     >
       <div
         className={cn(
-          'group relative pb-1 shadow-xs',
-          'border border-transparent rounded-[15px]',
-          data.type !== BlockEnum.Iteration && 'w-[240px] bg-workflow-block-bg',
-          data.type === BlockEnum.Iteration && 'flex flex-col w-full h-full bg-workflow-block-bg-transparent border-workflow-block-border',
+          'shadow-xs group relative pb-1',
+          'rounded-[15px] border border-transparent',
+          data.type !== BlockEnum.Iteration && 'bg-workflow-block-bg w-[240px]',
+          data.type === BlockEnum.Iteration && 'bg-workflow-block-bg-transparent border-workflow-block-border flex h-full w-full flex-col',
           !data._runningStatus && 'hover:shadow-lg',
           showRunningBorder && '!border-state-accent-solid',
           showSuccessBorder && '!border-state-success-solid',
@@ -118,7 +118,7 @@ const BaseNode: FC<BaseNodeProps> = ({
       >
         {
           data._inParallelHovering && (
-            <div className='absolute left-2 -top-2.5 top system-2xs-medium-uppercase text-text-tertiary z-10'>
+            <div className='top system-2xs-medium-uppercase text-text-tertiary absolute -top-2.5 left-2 z-10'>
               {t('workflow.common.parallelRun')}
             </div>
           )
@@ -168,18 +168,18 @@ const BaseNode: FC<BaseNodeProps> = ({
           )
         }
         <div className={cn(
-          'flex items-center px-3 pt-3 pb-2 rounded-t-2xl',
+          'flex items-center rounded-t-2xl px-3 pb-2 pt-3',
           data.type === BlockEnum.Iteration && 'bg-transparent',
         )}>
           <BlockIcon
-            className='shrink-0 mr-2'
+            className='mr-2 shrink-0'
             type={data.type}
             size='md'
             toolIcon={toolIcon}
           />
           <div
             title={data.title}
-            className='grow mr-1 system-sm-semibold-uppercase text-text-primary truncate flex items-center'
+            className='system-sm-semibold-uppercase text-text-primary mr-1 flex grow items-center truncate'
           >
             <div>
               {data.title}
@@ -194,7 +194,7 @@ const BaseNode: FC<BaseNodeProps> = ({
                     {t('workflow.nodes.iteration.parallelModeEnableDesc')}
                   </div>}
                 >
-                  <div className='flex justify-center items-center px-[5px] py-[3px] ml-1 border-[1px] border-text-warning rounded-[5px] text-text-warning system-2xs-medium-uppercase '>
+                  <div className='border-text-warning text-text-warning system-2xs-medium-uppercase ml-1 flex items-center justify-center rounded-[5px] border-[1px] px-[5px] py-[3px] '>
                     {t('workflow.nodes.iteration.parallelModeUpper')}
                   </div>
                 </Tooltip>
@@ -203,29 +203,29 @@ const BaseNode: FC<BaseNodeProps> = ({
           </div>
           {
             data._iterationLength && data._iterationIndex && data._runningStatus === NodeRunningStatus.Running && (
-              <div className='mr-1.5 text-xs font-medium text-text-accent'>
+              <div className='text-text-accent mr-1.5 text-xs font-medium'>
                 {data._iterationIndex > data._iterationLength ? data._iterationLength : data._iterationIndex}/{data._iterationLength}
               </div>
             )
           }
           {
             (data._runningStatus === NodeRunningStatus.Running || data._singleRunningStatus === NodeRunningStatus.Running) && (
-              <RiLoader2Line className='w-3.5 h-3.5 text-text-accent animate-spin' />
+              <RiLoader2Line className='text-text-accent h-3.5 w-3.5 animate-spin' />
             )
           }
           {
             data._runningStatus === NodeRunningStatus.Succeeded && (
-              <RiCheckboxCircleFill className='w-3.5 h-3.5 text-text-success' />
+              <RiCheckboxCircleFill className='text-text-success h-3.5 w-3.5' />
             )
           }
           {
             data._runningStatus === NodeRunningStatus.Failed && (
-              <RiErrorWarningFill className='w-3.5 h-3.5 text-text-destructive' />
+              <RiErrorWarningFill className='text-text-destructive h-3.5 w-3.5' />
             )
           }
           {
             data._runningStatus === NodeRunningStatus.Exception && (
-              <RiAlertFill className='w-3.5 h-3.5 text-text-warning-secondary' />
+              <RiAlertFill className='text-text-warning-secondary h-3.5 w-3.5' />
             )
           }
         </div>
@@ -236,7 +236,7 @@ const BaseNode: FC<BaseNodeProps> = ({
         }
         {
           data.type === BlockEnum.Iteration && (
-            <div className='grow pl-1 pr-1 pb-1'>
+            <div className='grow pb-1 pl-1 pr-1'>
               {cloneElement(children, { id, data })}
             </div>
           )
@@ -259,7 +259,7 @@ const BaseNode: FC<BaseNodeProps> = ({
         }
         {
           data.desc && data.type !== BlockEnum.Iteration && (
-            <div className='px-3 pt-1 pb-2 system-xs-regular text-text-tertiary whitespace-pre-line break-words'>
+            <div className='system-xs-regular text-text-tertiary whitespace-pre-line break-words px-3 pb-2 pt-1'>
               {data.desc}
             </div>
           )
diff --git a/web/app/components/workflow/nodes/_base/panel.tsx b/web/app/components/workflow/nodes/_base/panel.tsx
index 9b9b71ea96..b9123e64b6 100644
--- a/web/app/components/workflow/nodes/_base/panel.tsx
+++ b/web/app/components/workflow/nodes/_base/panel.tsx
@@ -105,24 +105,24 @@ const BasePanel: FC<BasePanelProps> = ({
   return (
     <div className={cn(
       'relative mr-2 h-full',
-      showMessageLogModal && '!absolute !mr-0 w-[384px] overflow-hidden -top-[5px] right-[416px] z-0 shadow-lg border-[0.5px] border-components-panel-border rounded-2xl transition-all',
+      showMessageLogModal && 'border-components-panel-border !absolute -top-[5px] right-[416px] z-0 !mr-0 w-[384px] overflow-hidden rounded-2xl border-[0.5px] shadow-lg transition-all',
     )}>
       <div
         ref={triggerRef}
-        className='absolute top-1/2 -translate-y-1/2 -left-2 w-3 h-6 cursor-col-resize resize-x'>
-        <div className='w-1 h-6 bg-divider-regular rounded-sm'></div>
+        className='absolute -left-2 top-1/2 h-6 w-3 -translate-y-1/2 cursor-col-resize resize-x'>
+        <div className='bg-divider-regular h-6 w-1 rounded-sm'></div>
       </div>
       <div
         ref={containerRef}
-        className={cn('h-full bg-components-panel-bg shadow-lg border-[0.5px] border-components-panel-border rounded-2xl', showSingleRunPanel ? 'overflow-hidden' : 'overflow-y-auto')}
+        className={cn('bg-components-panel-bg border-components-panel-border h-full rounded-2xl border-[0.5px] shadow-lg', showSingleRunPanel ? 'overflow-hidden' : 'overflow-y-auto')}
         style={{
           width: `${panelWidth}px`,
         }}
       >
-        <div className='sticky top-0 bg-components-panel-bg border-b-[0.5px] border-black/5 z-10'>
-          <div className='flex items-center px-4 pt-4 pb-1'>
+        <div className='bg-components-panel-bg sticky top-0 z-10 border-b-[0.5px] border-black/5'>
+          <div className='flex items-center px-4 pb-1 pt-4'>
             <BlockIcon
-              className='shrink-0 mr-1'
+              className='mr-1 shrink-0'
               type={data.type}
               toolIcon={toolIcon}
               size='md'
@@ -131,7 +131,7 @@ const BasePanel: FC<BasePanelProps> = ({
               value={data.title || ''}
               onBlur={handleTitleBlur}
             />
-            <div className='shrink-0 flex items-center text-gray-500'>
+            <div className='flex shrink-0 items-center text-gray-500'>
               {
                 canRunBySingle(data.type) && !nodesReadOnly && (
                   <Tooltip
@@ -139,25 +139,25 @@ const BasePanel: FC<BasePanelProps> = ({
                     popupClassName='mr-1'
                   >
                     <div
-                      className='flex items-center justify-center mr-1 w-6 h-6 rounded-md hover:bg-black/5 cursor-pointer'
+                      className='mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-black/5'
                       onClick={() => {
                         handleNodeDataUpdate({ id, data: { _isSingleRun: true } })
                         handleSyncWorkflowDraft(true)
                       }}
                     >
-                      <RiPlayLargeLine className='w-4 h-4 text-text-tertiary' />
+                      <RiPlayLargeLine className='text-text-tertiary h-4 w-4' />
                     </div>
                   </Tooltip>
                 )
               }
               <HelpLink nodeType={data.type} />
               <PanelOperator id={id} data={data} showHelpLink={false} />
-              <div className='mx-3 w-[1px] h-3.5 bg-divider-regular' />
+              <div className='bg-divider-regular mx-3 h-3.5 w-[1px]' />
               <div
-                className='flex items-center justify-center w-6 h-6 cursor-pointer'
+                className='flex h-6 w-6 cursor-pointer items-center justify-center'
                 onClick={() => handleNodeSelect(id, true)}
               >
-                <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+                <RiCloseLine className='text-text-tertiary h-4 w-4' />
               </div>
             </div>
           </div>
@@ -190,11 +190,11 @@ const BasePanel: FC<BasePanelProps> = ({
         }
         {
           !!availableNextBlocks.length && (
-            <div className='p-4 border-t-[0.5px] border-t-black/5'>
-              <div className='flex items-center mb-1 system-sm-semibold-uppercase text-text-secondary'>
+            <div className='border-t-[0.5px] border-t-black/5 p-4'>
+              <div className='system-sm-semibold-uppercase text-text-secondary mb-1 flex items-center'>
                 {t('workflow.panel.nextStep').toLocaleUpperCase()}
               </div>
-              <div className='mb-2 system-xs-regular text-text-tertiary'>
+              <div className='system-xs-regular text-text-tertiary mb-2'>
                 {t('workflow.panel.addNextStep')}
               </div>
               <NextStep selectedNode={{ id, data } as Node} />
diff --git a/web/app/components/workflow/nodes/agent/components/tool-icon.tsx b/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
index 07c20e0f80..85f981372e 100644
--- a/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
+++ b/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
@@ -71,7 +71,7 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
           )}
           onError={() => setIconFetchError(true)}
         />
-        : <Group className="w-3 h-3 opacity-35" />
+        : <Group className="h-3 w-3 opacity-35" />
       }
       {indicator && <Indicator color={indicator} className="absolute right-[-1px] top-[-1px]" />}
     </div>
diff --git a/web/app/components/workflow/nodes/agent/node.tsx b/web/app/components/workflow/nodes/agent/node.tsx
index b3101c3d88..4fd337eff0 100644
--- a/web/app/components/workflow/nodes/agent/node.tsx
+++ b/web/app/components/workflow/nodes/agent/node.tsx
@@ -63,7 +63,7 @@ const AgentNode: FC<NodeProps<AgentNodeType>> = (props) => {
     })
     return tools
   }, [currentStrategy?.parameters, inputs.agent_parameters])
-  return <div className='mb-1 px-3 py-1 space-y-1'>
+  return <div className='mb-1 space-y-1 px-3 py-1'>
     {inputs.agent_strategy_name
       ? <SettingItem
         label={t('workflow.nodes.agent.strategy.shortLabel')}
diff --git a/web/app/components/workflow/nodes/answer/panel.tsx b/web/app/components/workflow/nodes/answer/panel.tsx
index b8fe5f5997..2a4b70ee32 100644
--- a/web/app/components/workflow/nodes/answer/panel.tsx
+++ b/web/app/components/workflow/nodes/answer/panel.tsx
@@ -29,7 +29,7 @@ const Panel: FC<NodePanelProps<AnswerNodeType>> = ({
   })
 
   return (
-    <div className='mt-2 mb-2 px-4 space-y-4'>
+    <div className='mb-2 mt-2 space-y-4 px-4'>
       <Editor
         readOnly={readOnly}
         justVar
diff --git a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
index b2f8e8cb5b..6982dedc4c 100644
--- a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
@@ -72,23 +72,23 @@ const OperationSelector: FC<OperationSelectorProps> = ({
             className,
           )}
         >
-          <div className='flex p-1 items-center'>
+          <div className='flex items-center p-1'>
             <span
-              className={`truncate overflow-hidden text-ellipsis system-sm-regular
+              className={`system-sm-regular overflow-hidden truncate text-ellipsis
                 ${selectedItem ? 'text-components-input-text-filled' : 'text-components-input-text-disabled'}`}
             >
               {selectedItem?.name ? t(`${i18nPrefix}.operations.${selectedItem?.name}`) : t(`${i18nPrefix}.operations.title`)}
             </span>
           </div>
-          <RiArrowDownSLine className={`h-4 w-4 text-text-quaternary ${disabled && 'text-components-input-text-placeholder'} ${open && 'text-text-secondary'}`} />
+          <RiArrowDownSLine className={`text-text-quaternary h-4 w-4 ${disabled && 'text-components-input-text-placeholder'} ${open && 'text-text-secondary'}`} />
         </div>
       </PortalToFollowElemTrigger>
 
       <PortalToFollowElemContent className={`z-20 ${popupClassName}`}>
-        <div className='flex w-[140px] flex-col items-start rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
-          <div className='flex p-1 flex-col items-start self-stretch'>
-            <div className='flex px-3 pt-1 pb-0.5 items-start self-stretch'>
-              <div className='flex grow text-text-tertiary system-xs-medium-uppercase'>{t(`${i18nPrefix}.operations.title`)}</div>
+        <div className='border-components-panel-border bg-components-panel-bg-blur flex w-[140px] flex-col items-start rounded-xl border-[0.5px] shadow-lg'>
+          <div className='flex flex-col items-start self-stretch p-1'>
+            <div className='flex items-start self-stretch px-3 pb-0.5 pt-1'>
+              <div className='text-text-tertiary system-xs-medium-uppercase flex grow'>{t(`${i18nPrefix}.operations.title`)}</div>
             </div>
             {items.map(item => (
               item.value === 'divider'
@@ -107,12 +107,12 @@ const OperationSelector: FC<OperationSelectorProps> = ({
                       setOpen(false)
                     }}
                   >
-                    <div className='flex min-h-5 px-1 items-center gap-1 grow'>
-                      <span className={'flex grow text-text-secondary system-sm-medium'}>{t(`${i18nPrefix}.operations.${item.name}`)}</span>
+                    <div className='flex min-h-5 grow items-center gap-1 px-1'>
+                      <span className={'text-text-secondary system-sm-medium flex grow'}>{t(`${i18nPrefix}.operations.${item.name}`)}</span>
                     </div>
                     {item.value === value && (
-                      <div className='flex justify-center items-center'>
-                        <RiCheckLine className='h-4 w-4 text-text-accent' />
+                      <div className='flex items-center justify-center'>
+                        <RiCheckLine className='text-text-accent h-4 w-4' />
                       </div>
                     )}
                   </div>
diff --git a/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx b/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx
index 52d076624d..5a134f1042 100644
--- a/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx
@@ -128,7 +128,7 @@ const VarList: FC<Props> = ({
 
         return (
           <div className='flex items-start gap-1 self-stretch' key={index}>
-            <div className='flex flex-col items-start gap-1 grow'>
+            <div className='flex grow flex-col items-start gap-1'>
               <div className='flex items-center gap-1 self-stretch'>
                 <VarReferencePicker
                   readonly={readonly}
@@ -212,10 +212,10 @@ const VarList: FC<Props> = ({
             </div>
             <ActionButton
               size='l'
-              className='shrink-0 group hover:!bg-state-destructive-hover'
+              className='hover:!bg-state-destructive-hover group shrink-0'
               onClick={handleVarRemove(index)}
             >
-              <RiDeleteBinLine className='text-text-tertiary w-4 h-4 group-hover:text-text-destructive' />
+              <RiDeleteBinLine className='text-text-tertiary group-hover:text-text-destructive h-4 w-4' />
             </ActionButton>
           </div>
         )
diff --git a/web/app/components/workflow/nodes/assigner/node.tsx b/web/app/components/workflow/nodes/assigner/node.tsx
index 23dcf04aae..9d12669860 100644
--- a/web/app/components/workflow/nodes/assigner/node.tsx
+++ b/web/app/components/workflow/nodes/assigner/node.tsx
@@ -23,17 +23,17 @@ const NodeComponent: FC<NodeProps<AssignerNodeType>> = ({
 
     if (validOperationItems.length === 0) {
       return (
-        <div className='relative flex flex-col px-3 py-1 gap-0.5 items-start self-stretch'>
+        <div className='relative flex flex-col items-start gap-0.5 self-stretch px-3 py-1'>
           <div className='flex flex-col items-start gap-1 self-stretch'>
-            <div className='flex px-[5px] py-1 items-center gap-1 self-stretch rounded-md bg-workflow-block-parma-bg'>
-              <div className='flex-1 text-text-tertiary system-xs-medium'>{t(`${i18nPrefix}.varNotSet`)}</div>
+            <div className='bg-workflow-block-parma-bg flex items-center gap-1 self-stretch rounded-md px-[5px] py-1'>
+              <div className='text-text-tertiary system-xs-medium flex-1'>{t(`${i18nPrefix}.varNotSet`)}</div>
             </div>
           </div>
         </div>
       )
     }
     return (
-      <div className='relative flex flex-col px-3 py-1 gap-0.5 items-start self-stretch'>
+      <div className='relative flex flex-col items-start gap-0.5 self-stretch px-3 py-1'>
         {operationItems.map((value, index) => {
           const variable = value.variable_selector
           if (!variable || variable.length === 0)
@@ -71,7 +71,7 @@ const NodeComponent: FC<NodeProps<AssignerNodeType>> = ({
   const varName = isSystem ? `sys.${variable[variable.length - 1]}` : variable.slice(1).join('.')
 
   return (
-    <div className='relative flex flex-col px-3 py-1 gap-0.5 items-start self-stretch'>
+    <div className='relative flex flex-col items-start gap-0.5 self-stretch px-3 py-1'>
       <NodeVariableItem
         node={node as Node}
         isEnv={isEnv}
diff --git a/web/app/components/workflow/nodes/assigner/panel.tsx b/web/app/components/workflow/nodes/assigner/panel.tsx
index 6b151a7cb0..47caaea520 100644
--- a/web/app/components/workflow/nodes/assigner/panel.tsx
+++ b/web/app/components/workflow/nodes/assigner/panel.tsx
@@ -37,12 +37,12 @@ const Panel: FC<NodePanelProps<AssignerNodeType>> = ({
   }
 
   return (
-    <div className='flex py-2 flex-col items-start self-stretch'>
-      <div className='flex flex-col justify-center items-start gap-1 px-4 py-2 w-full self-stretch'>
+    <div className='flex flex-col items-start self-stretch py-2'>
+      <div className='flex w-full flex-col items-start justify-center gap-1 self-stretch px-4 py-2'>
         <div className='flex items-start gap-2 self-stretch'>
-          <div className='flex flex-col justify-center items-start grow text-text-secondary system-sm-semibold-uppercase'>{t(`${i18nPrefix}.variables`)}</div>
+          <div className='text-text-secondary system-sm-semibold-uppercase flex grow flex-col items-start justify-center'>{t(`${i18nPrefix}.variables`)}</div>
           <ActionButton onClick={handleAddOperation}>
-            <RiAddLine className='w-4 h-4 shrink-0 text-text-tertiary' />
+            <RiAddLine className='text-text-tertiary h-4 w-4 shrink-0' />
           </ActionButton>
         </div>
         <VarList
diff --git a/web/app/components/workflow/nodes/code/dependency-picker.tsx b/web/app/components/workflow/nodes/code/dependency-picker.tsx
index 43e8523e17..58b40c8bc1 100644
--- a/web/app/components/workflow/nodes/code/dependency-picker.tsx
+++ b/web/app/components/workflow/nodes/code/dependency-picker.tsx
@@ -37,19 +37,19 @@ const DependencyPicker: FC<Props> = ({
       placement='bottom-start'
       offset={4}
     >
-      <PortalToFollowElemTrigger onClick={() => setOpen(!open)} className='flex-grow cursor-pointer'>
-        <div className='flex items-center h-8 justify-between px-2.5 rounded-lg border-0 bg-gray-100 text-gray-900 text-[13px]'>
-          <div className='grow w-0 truncate' title={value.name}>{value.name}</div>
-          <RiArrowDownSLine className='shrink-0 w-3.5 h-3.5 text-gray-700' />
+      <PortalToFollowElemTrigger onClick={() => setOpen(!open)} className='grow cursor-pointer'>
+        <div className='flex h-8 items-center justify-between rounded-lg border-0 bg-gray-100 px-2.5 text-[13px] text-gray-900'>
+          <div className='w-0 grow truncate' title={value.name}>{value.name}</div>
+          <RiArrowDownSLine className='h-3.5 w-3.5 shrink-0 text-gray-700' />
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{
         zIndex: 100,
       }}>
-        <div className='p-1 bg-white rounded-lg shadow-sm' style={{
+        <div className='rounded-lg bg-white p-1 shadow-sm' style={{
           width: 350,
         }}>
-          <div className='mb-2 mx-1'>
+          <div className='mx-1 mb-2'>
             <Input
               showLeftIcon
               showClearIcon
@@ -68,11 +68,11 @@ const DependencyPicker: FC<Props> = ({
             }).map(dependency => (
               <div
                 key={dependency.name}
-                className='flex items-center h-[30px] justify-between pl-3 pr-2 rounded-lg hover:bg-gray-100 text-gray-900 text-[13px] cursor-pointer'
+                className='flex h-[30px] cursor-pointer items-center justify-between rounded-lg pl-3 pr-2 text-[13px] text-gray-900 hover:bg-gray-100'
                 onClick={handleChange(dependency)}
               >
                 <div className='w-0 grow truncate'>{dependency.name}</div>
-                {dependency.name === value.name && <Check className='shrink-0 w-4 h-4 text-primary-600' />}
+                {dependency.name === value.name && <Check className='text-primary-600 h-4 w-4 shrink-0' />}
               </div>
             ))}
           </div>
diff --git a/web/app/components/workflow/nodes/code/panel.tsx b/web/app/components/workflow/nodes/code/panel.tsx
index f20a9c60d6..4fd7a1a11c 100644
--- a/web/app/components/workflow/nodes/code/panel.tsx
+++ b/web/app/components/workflow/nodes/code/panel.tsx
@@ -76,7 +76,7 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
 
   return (
     <div className='mt-2'>
-      <div className='px-4 pb-4 space-y-4'>
+      <div className='space-y-4 px-4 pb-4'>
         <Field
           title={t(`${i18nPrefix}.inputVars`)}
           operations={
@@ -111,7 +111,7 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
         />
       </div>
       <Split />
-      <div className='px-4 pt-4 pb-2'>
+      <div className='px-4 pb-2 pt-4'>
         <Field
           title={t(`${i18nPrefix}.outputVars`)}
           operations={
diff --git a/web/app/components/workflow/nodes/document-extractor/node.tsx b/web/app/components/workflow/nodes/document-extractor/node.tsx
index becf9fda95..fd095bf63b 100644
--- a/web/app/components/workflow/nodes/document-extractor/node.tsx
+++ b/web/app/components/workflow/nodes/document-extractor/node.tsx
@@ -27,7 +27,7 @@ const NodeComponent: FC<NodeProps<DocExtractorNodeType>> = ({
   const varName = isSystem ? `sys.${variable[variable.length - 1]}` : variable.slice(1).join('.')
   return (
     <div className='relative px-3'>
-      <div className='mb-1 system-2xs-medium-uppercase text-text-tertiary'>{t(`${i18nPrefix}.inputVar`)}</div>
+      <div className='system-2xs-medium-uppercase text-text-tertiary mb-1'>{t(`${i18nPrefix}.inputVar`)}</div>
       <NodeVariableItem
         node={node as Node}
         isEnv={isEnv}
diff --git a/web/app/components/workflow/nodes/document-extractor/panel.tsx b/web/app/components/workflow/nodes/document-extractor/panel.tsx
index 597f528582..484bb390de 100644
--- a/web/app/components/workflow/nodes/document-extractor/panel.tsx
+++ b/web/app/components/workflow/nodes/document-extractor/panel.tsx
@@ -61,7 +61,7 @@ const Panel: FC<NodePanelProps<DocExtractorNodeType>> = ({
 
   return (
     <div className='mt-2'>
-      <div className='px-4 pb-4 space-y-4'>
+      <div className='space-y-4 px-4 pb-4'>
         <Field
           title={t(`${i18nPrefix}.inputVar`)}
         >
@@ -75,7 +75,7 @@ const Panel: FC<NodePanelProps<DocExtractorNodeType>> = ({
               filterVar={filterVar}
               typePlaceHolder='File | Array[File]'
             />
-            <div className='mt-1 py-0.5 text-text-tertiary body-xs-regular'>
+            <div className='text-text-tertiary body-xs-regular mt-1 py-0.5'>
               {t(`${i18nPrefix}.supportFileTypes`, { types: supportTypesShowNames })}
               <a className='text-text-accent' href={link} target='_blank'>{t(`${i18nPrefix}.learnMore`)}</a>
             </div>
diff --git a/web/app/components/workflow/nodes/end/node.tsx b/web/app/components/workflow/nodes/end/node.tsx
index d5d2eaefd0..a9632591fe 100644
--- a/web/app/components/workflow/nodes/end/node.tsx
+++ b/web/app/components/workflow/nodes/end/node.tsx
@@ -39,7 +39,7 @@ const Node: FC<NodeProps<EndNodeType>> = ({
     return null
 
   return (
-    <div className='mb-1 px-3 py-1 space-y-0.5'>
+    <div className='mb-1 space-y-0.5 px-3 py-1'>
       {filteredOutputs.map(({ value_selector }, index) => {
         const node = getNode(value_selector[0])
         const isSystem = isSystemVar(value_selector)
@@ -52,7 +52,7 @@ const Node: FC<NodeProps<EndNodeType>> = ({
           isChatMode,
         })
         return (
-          <div key={index} className='flex items-center h-6 justify-between bg-gray-100 rounded-md  px-1 space-x-1 text-xs font-normal text-gray-700'>
+          <div key={index} className='flex h-6 items-center justify-between space-x-1 rounded-md  bg-gray-100 px-1 text-xs font-normal text-gray-700'>
             <div className='flex items-center text-xs font-medium text-gray-500'>
               {!isEnv && !isChatVar && (
                 <>
@@ -66,16 +66,16 @@ const Node: FC<NodeProps<EndNodeType>> = ({
                   <Line3 className='mr-0.5'></Line3>
                 </>
               )}
-              <div className='flex items-center text-primary-600'>
-                {!isEnv && !isChatVar && <Variable02 className='shrink-0 w-3.5 h-3.5 text-primary-500' />}
-                {isEnv && <Env className='shrink-0 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
-                {isChatVar && <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />}
+              <div className='text-primary-600 flex items-center'>
+                {!isEnv && !isChatVar && <Variable02 className='text-primary-500 h-3.5 w-3.5 shrink-0' />}
+                {isEnv && <Env className='text-util-colors-violet-violet-600 h-3.5 w-3.5 shrink-0' />}
+                {isChatVar && <BubbleX className='text-util-colors-teal-teal-700 h-3.5 w-3.5' />}
 
-                <div className={cn('max-w-[50px] ml-0.5 text-xs font-medium truncate', (isEnv || isChatVar) && '!max-w-[70px] text-gray-900')}>{varName}</div>
+                <div className={cn('ml-0.5 max-w-[50px] truncate text-xs font-medium', (isEnv || isChatVar) && '!max-w-[70px] text-gray-900')}>{varName}</div>
               </div>
             </div>
             <div className='text-xs font-normal text-gray-700'>
-              <div className='max-w-[42px] ml-0.5 text-xs font-normal text-gray-500 capitalize truncate' title={varType}>{varType}</div>
+              <div className='ml-0.5 max-w-[42px] truncate text-xs font-normal capitalize text-gray-500' title={varType}>{varType}</div>
             </div>
           </div>
         )
diff --git a/web/app/components/workflow/nodes/end/panel.tsx b/web/app/components/workflow/nodes/end/panel.tsx
index fc5e498d13..2ad90ff5ac 100644
--- a/web/app/components/workflow/nodes/end/panel.tsx
+++ b/web/app/components/workflow/nodes/end/panel.tsx
@@ -26,7 +26,7 @@ const Panel: FC<NodePanelProps<EndNodeType>> = ({
   const outputs = inputs.outputs
   return (
     <div className='mt-2'>
-      <div className='px-4 pb-4 space-y-4'>
+      <div className='space-y-4 px-4 pb-4'>
 
         <Field
           title={t(`${i18nPrefix}.output.variable`)}
diff --git a/web/app/components/workflow/nodes/http/components/api-input.tsx b/web/app/components/workflow/nodes/http/components/api-input.tsx
index 1f418ac21d..a39c1b1498 100644
--- a/web/app/components/workflow/nodes/http/components/api-input.tsx
+++ b/web/app/components/workflow/nodes/http/components/api-input.tsx
@@ -53,9 +53,9 @@ const ApiInput: FC<Props> = ({
         onChange={onMethodChange}
         options={MethodOptions}
         trigger={
-          <div className={cn(readonly && 'cursor-pointer', 'h-8 shrink-0 flex items-center px-2.5 bg-gray-100 border-black/5 rounded-lg')} >
-            <div className='w-12 pl-0.5 leading-[18px] text-xs font-medium text-gray-900 uppercase'>{method}</div>
-            {!readonly && <RiArrowDownSLine className='ml-1 w-3.5 h-3.5 text-gray-700' />}
+          <div className={cn(readonly && 'cursor-pointer', 'flex h-8 shrink-0 items-center rounded-lg border-black/5 bg-gray-100 px-2.5')} >
+            <div className='w-12 pl-0.5 text-xs font-medium uppercase leading-[18px] text-gray-900'>{method}</div>
+            {!readonly && <RiArrowDownSLine className='ml-1 h-3.5 w-3.5 text-gray-700' />}
           </div>
         }
         popupClassName='top-[34px] w-[108px]'
@@ -65,7 +65,7 @@ const ApiInput: FC<Props> = ({
 
       <Input
         instanceId='http-api-url'
-        className={cn(isFocus ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'w-0 grow rounded-lg px-3 py-[6px] border')}
+        className={cn(isFocus ? 'shadow-xs border-gray-300 bg-gray-50' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')}
         value={url}
         onChange={onUrlChange}
         readOnly={readonly}
diff --git a/web/app/components/workflow/nodes/http/components/authorization/index.tsx b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
index 30c80954a8..762a1ec3f7 100644
--- a/web/app/components/workflow/nodes/http/components/authorization/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
@@ -28,7 +28,7 @@ interface Props {
 const Field = ({ title, isRequired, children }: { title: string; isRequired?: boolean; children: React.JSX.Element }) => {
   return (
     <div>
-      <div className='leading-8 text-[13px] font-medium text-gray-700'>
+      <div className='text-[13px] font-medium leading-8 text-gray-700'>
         {title}
         {isRequired && <span className='ml-0.5 text-[#D92D20]'>*</span>}
       </div>
@@ -158,7 +158,7 @@ const Authorization: FC<Props> = ({
                 <div className='flex'>
                   <Input
                     instanceId='http-api-key'
-                    className={cn(isFocus ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'w-0 grow rounded-lg px-3 py-[6px] border')}
+                    className={cn(isFocus ? 'shadow-xs border-gray-300 bg-gray-50' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')}
                     value={tempPayload.config?.api_key || ''}
                     onChange={handleAPIKeyChange}
                     nodesOutputVars={availableVars}
diff --git a/web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx b/web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx
index 9cd51c1e1e..6322e0a1a6 100644
--- a/web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx
+++ b/web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx
@@ -21,8 +21,8 @@ const Item: FC<ItemProps> = ({
   return (
     <div
       className={cn(
-        isSelected ? 'border-[2px] border-primary-400 bg-white shadow-xs' : 'border border-gray-100 bg-gray-25',
-        'w-0 grow flex items-center justify-center h-8 cursor-pointer rounded-lg text-[13px] font-normal text-gray-900')
+        isSelected ? 'border-primary-400 shadow-xs border-[2px] bg-white' : 'bg-gray-25 border border-gray-100',
+        'flex h-8 w-0 grow cursor-pointer items-center justify-center rounded-lg text-[13px] font-normal text-gray-900')
       }
       onClick={onClick}
     >
diff --git a/web/app/components/workflow/nodes/http/components/curl-panel.tsx b/web/app/components/workflow/nodes/http/components/curl-panel.tsx
index 9c5dddedb7..847f12a9b9 100644
--- a/web/app/components/workflow/nodes/http/components/curl-panel.tsx
+++ b/web/app/components/workflow/nodes/http/components/curl-panel.tsx
@@ -138,7 +138,7 @@ const CurlPanel: FC<Props> = ({ nodeId, isShow, onHide, handleCurlImport }) => {
       <div>
         <textarea
           value={inputString}
-          className='w-full my-3 p-3 text-sm text-gray-900 border-0 rounded-lg grow bg-gray-100 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200 h-40'
+          className='my-3 h-40 w-full grow rounded-lg border-0 bg-gray-100 p-3 text-sm text-gray-900 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
           onChange={e => setInputString(e.target.value)}
           placeholder={t('workflow.nodes.http.curl.placeholder')!}
         />
diff --git a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
index 0297d3102e..97a3d5085c 100644
--- a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
@@ -135,7 +135,7 @@ const EditBody: FC<Props> = ({
       {/* body type */}
       <div className='flex flex-wrap'>
         {allTypes.map(t => (
-          <label key={t} htmlFor={`body-type-${t}`} className='mr-4 flex items-center h-7 space-x-2'>
+          <label key={t} htmlFor={`body-type-${t}`} className='mr-4 flex h-7 items-center space-x-2'>
             <input
               type="radio"
               id={`body-type-${t}`}
@@ -144,7 +144,7 @@ const EditBody: FC<Props> = ({
               onChange={handleTypeChange}
               disabled={readonly}
             />
-            <div className='leading-[18px] text-[13px] font-normal text-gray-700'>{bodyTextMap[t]}</div>
+            <div className='text-[13px] font-normal leading-[18px] text-gray-700'>{bodyTextMap[t]}</div>
           </label>
         ))}
       </div>
diff --git a/web/app/components/workflow/nodes/http/components/key-value/bulk-edit/index.tsx b/web/app/components/workflow/nodes/http/components/key-value/bulk-edit/index.tsx
index f67eb9d7be..43c766c878 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/bulk-edit/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/bulk-edit/index.tsx
@@ -43,15 +43,15 @@ const BulkEdit: FC<Props> = ({
         onChange={handleChange}
         onBlur={handleBlur}
         headerRight={
-          <div className='flex items-center h-[18px]'>
+          <div className='flex h-[18px] items-center'>
             <div
-              className='flex items-center space-x-1 cursor-pointer'
+              className='flex cursor-pointer items-center space-x-1'
               onClick={handleSwitchToKeyValueEdit}
             >
-              <LayoutGrid02 className='w-3 h-3 text-gray-500' />
-              <div className='leading-[18px] text-xs font-normal text-gray-500'>{t(`${i18nPrefix}.keyValueEdit`)}</div>
+              <LayoutGrid02 className='h-3 w-3 text-gray-500' />
+              <div className='text-xs font-normal leading-[18px] text-gray-500'>{t(`${i18nPrefix}.keyValueEdit`)}</div>
             </div>
-            <div className='ml-3 mr-1.5 w-px h-3 bg-gray-200'></div>
+            <div className='ml-3 mr-1.5 h-3 w-px bg-gray-200'></div>
           </div>
         }
         minHeight={150}
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
index dac2c1c17c..50bf6512f5 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
@@ -56,11 +56,11 @@ const KeyValueList: FC<Props> = ({
     return null
 
   return (
-    <div className='border border-divider-regular rounded-lg overflow-hidden'>
-      <div className={cn('flex items-center h-7 leading-7 text-text-tertiary system-xs-medium-uppercase')}>
-        <div className={cn('h-full pl-3 border-r border-divider-regular', isSupportFile ? 'w-[140px]' : 'w-1/2')}>{t(`${i18nPrefix}.key`)}</div>
-        {isSupportFile && <div className='shrink-0 w-[70px] h-full pl-3 border-r border-divider-regular'>{t(`${i18nPrefix}.type`)}</div>}
-        <div className={cn('h-full pl-3 pr-1 items-center justify-between', isSupportFile ? 'grow' : 'w-1/2')}>{t(`${i18nPrefix}.value`)}</div>
+    <div className='border-divider-regular overflow-hidden rounded-lg border'>
+      <div className={cn('text-text-tertiary system-xs-medium-uppercase flex h-7 items-center leading-7')}>
+        <div className={cn('border-divider-regular h-full border-r pl-3', isSupportFile ? 'w-[140px]' : 'w-1/2')}>{t(`${i18nPrefix}.key`)}</div>
+        {isSupportFile && <div className='border-divider-regular h-full w-[70px] shrink-0 border-r pl-3'>{t(`${i18nPrefix}.type`)}</div>}
+        <div className={cn('h-full items-center justify-between pl-3 pr-1', isSupportFile ? 'grow' : 'w-1/2')}>{t(`${i18nPrefix}.value`)}</div>
       </div>
       {
         list.map((item, index) => (
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
index fdaeefbc4a..823ee006ca 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
@@ -57,7 +57,7 @@ const InputItem: FC<Props> = ({
   }, [onRemove])
 
   return (
-    <div className={cn(className, 'hover:bg-gray-50 hover:cursor-text', 'relative flex h-full')}>
+    <div className={cn(className, 'hover:cursor-text hover:bg-gray-50', 'relative flex h-full')}>
       {(!readOnly)
         ? (
           <Input
@@ -76,13 +76,13 @@ const InputItem: FC<Props> = ({
           />
         )
         : <div
-          className="pl-0.5 w-full h-[18px] leading-[18px]"
+          className="h-[18px] w-full pl-0.5 leading-[18px]"
         >
-          {!hasValue && <div className='text-gray-300 text-xs font-normal'>{placeholder}</div>}
+          {!hasValue && <div className='text-xs font-normal text-gray-300'>{placeholder}</div>}
           {hasValue && (
             <Input
               instanceId={instanceId}
-              className={cn(isFocus ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'w-0 grow rounded-lg px-3 py-[6px] border')}
+              className={cn(isFocus ? 'shadow-xs border-gray-300 bg-gray-50' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')}
               value={value}
               onChange={onChange}
               readOnly={readOnly}
@@ -99,7 +99,7 @@ const InputItem: FC<Props> = ({
         </div>}
       {hasRemove && !isFocus && (
         <RemoveButton
-          className='group-hover:block hidden absolute right-1 top-0.5'
+          className='absolute right-1 top-0.5 hidden group-hover:block'
           onClick={handleRemove}
         />
       )}
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
index 9c64f9f764..a917f818a4 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
@@ -62,8 +62,8 @@ const KeyValueItem: FC<Props> = ({
 
   return (
     // group class name is for hover row show remove button
-    <div className={cn(className, 'group flex h-min-7 border-t border-gray-200')}>
-      <div className={cn('shrink-0 border-r border-divider-regular', isSupportFile ? 'w-[140px]' : 'w-1/2')}>
+    <div className={cn(className, 'h-min-7 group flex border-t border-gray-200')}>
+      <div className={cn('border-divider-regular shrink-0 border-r', isSupportFile ? 'w-[140px]' : 'w-1/2')}>
         {!keyNotSupportVar
           ? (
             <InputItem
@@ -79,14 +79,14 @@ const KeyValueItem: FC<Props> = ({
           )
           : (
             <input
-              className='appearance-none outline-none rounded-none bg-white border-none system-sm-regular focus:ring-0 focus:bg-gray-100! hover:bg-gray-50'
+              className='system-sm-regular focus:bg-gray-100! appearance-none rounded-none border-none bg-white outline-none hover:bg-gray-50 focus:ring-0'
               value={payload.key}
               onChange={e => handleChange('key')(e.target.value)}
             />
           )}
       </div>
       {isSupportFile && (
-        <div className='shrink-0 w-[70px] border-r border-divider-regular'>
+        <div className='border-divider-regular w-[70px] shrink-0 border-r'>
           <PortalSelect
             value={payload.type!}
             onSelect={item => handleChange('type')(item.value as string)}
diff --git a/web/app/components/workflow/nodes/http/components/timeout/index.tsx b/web/app/components/workflow/nodes/http/components/timeout/index.tsx
index 2de3bd443c..62847e02b6 100644
--- a/web/app/components/workflow/nodes/http/components/timeout/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/timeout/index.tsx
@@ -27,7 +27,7 @@ const InputField: FC<{
 }> = ({ title, description, placeholder, value, onChange, readOnly, min, max }) => {
   return (
     <div className="space-y-1">
-      <div className="flex items-center h-[18px] space-x-2">
+      <div className="flex h-[18px] items-center space-x-2">
         <span className="text-[13px] font-medium text-gray-900">{title}</span>
         <span className="text-xs font-normal text-gray-500">{description}</span>
       </div>
diff --git a/web/app/components/workflow/nodes/http/node.tsx b/web/app/components/workflow/nodes/http/node.tsx
index 4b7dbea257..ed8974fe4b 100644
--- a/web/app/components/workflow/nodes/http/node.tsx
+++ b/web/app/components/workflow/nodes/http/node.tsx
@@ -13,8 +13,8 @@ const Node: FC<NodeProps<HttpNodeType>> = ({
 
   return (
     <div className='mb-1 px-3 py-1'>
-      <div className='flex items-start p-1 rounded-md bg-gray-100'>
-        <div className='flex items-center h-4 shrink-0 px-1 rounded bg-gray-25 text-xs font-semibold text-gray-700 uppercase'>{method}</div>
+      <div className='flex items-start rounded-md bg-gray-100 p-1'>
+        <div className='bg-gray-25 flex h-4 shrink-0 items-center rounded px-1 text-xs font-semibold uppercase text-gray-700'>{method}</div>
         <div className='pl-1 pt-1'>
           <ReadonlyInputWithSelectVar
             value={url}
diff --git a/web/app/components/workflow/nodes/http/panel.tsx b/web/app/components/workflow/nodes/http/panel.tsx
index 8f2b901a84..e0ade7ade5 100644
--- a/web/app/components/workflow/nodes/http/panel.tsx
+++ b/web/app/components/workflow/nodes/http/panel.tsx
@@ -66,16 +66,16 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
 
   return (
     <div className='pt-2'>
-      <div className='px-4 pb-4 space-y-4'>
+      <div className='space-y-4 px-4 pb-4'>
         <Field
           title={t(`${i18nPrefix}.api`)}
           operations={
             <div className='flex'>
               <div
                 onClick={showAuthorization}
-                className={cn(!readOnly && 'cursor-pointer hover:bg-gray-50', 'flex items-center h-6 space-x-1 px-2 rounded-md ')}
+                className={cn(!readOnly && 'cursor-pointer hover:bg-gray-50', 'flex h-6 items-center space-x-1 rounded-md px-2 ')}
               >
-                {!readOnly && <Settings01 className='w-3 h-3 text-gray-500' />}
+                {!readOnly && <Settings01 className='h-3 w-3 text-gray-500' />}
                 <div className='text-xs font-medium text-gray-500'>
                   {t(`${i18nPrefix}.authorization.authorization`)}
                   <span className='ml-1 text-gray-700'>{t(`${i18nPrefix}.authorization.${inputs.authorization.type}`)}</span>
@@ -83,9 +83,9 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
               </div>
               <div
                 onClick={showCurlPanel}
-                className={cn(!readOnly && 'cursor-pointer hover:bg-gray-50', 'flex items-center h-6 space-x-1 px-2 rounded-md ')}
+                className={cn(!readOnly && 'cursor-pointer hover:bg-gray-50', 'flex h-6 items-center space-x-1 rounded-md px-2 ')}
               >
-                {!readOnly && <FileArrow01 className='w-3 h-3 text-gray-500' />}
+                {!readOnly && <FileArrow01 className='h-3 w-3 text-gray-500' />}
                 <div className='text-xs font-medium text-gray-500'>
                   {t(`${i18nPrefix}.curl.title`)}
                 </div>
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-add.tsx b/web/app/components/workflow/nodes/if-else/components/condition-add.tsx
index 8b14a59dcc..0cbc4d497f 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-add.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-add.tsx
@@ -56,12 +56,12 @@ const ConditionAdd = ({
           className={className}
           disabled={disabled}
         >
-          <RiAddLine className='mr-1 w-3.5 h-3.5' />
+          <RiAddLine className='mr-1 h-3.5 w-3.5' />
           {t('workflow.nodes.ifElse.addCondition')}
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[1000]'>
-        <div className='w-[296px] bg-components-panel-bg-blur rounded-lg border-[0.5px] border-components-panel-border shadow-lg'>
+        <div className='bg-components-panel-bg-blur border-components-panel-border w-[296px] rounded-lg border-[0.5px] shadow-lg'>
           <VarReferenceVars
             vars={variables}
             isSupportFileVar
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-files-list-value.tsx b/web/app/components/workflow/nodes/if-else/components/condition-files-list-value.tsx
index b0cfdeaf28..f168028d3f 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-files-list-value.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-files-list-value.tsx
@@ -74,15 +74,15 @@ const ConditionValue = ({
   }, [])
 
   return (
-    <div className='rounded-md bg-workflow-block-parma-bg'>
-      <div className='flex items-center px-1 h-6 '>
-        {!isEnvVar && !isChatVar && <Variable02 className='shrink-0 mr-1 w-3.5 h-3.5 text-text-accent' />}
-        {isEnvVar && <Env className='shrink-0 mr-1 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
-        {isChatVar && <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />}
+    <div className='bg-workflow-block-parma-bg rounded-md'>
+      <div className='flex h-6 items-center px-1 '>
+        {!isEnvVar && !isChatVar && <Variable02 className='text-text-accent mr-1 h-3.5 w-3.5 shrink-0' />}
+        {isEnvVar && <Env className='text-util-colors-violet-violet-600 mr-1 h-3.5 w-3.5 shrink-0' />}
+        {isChatVar && <BubbleX className='text-util-colors-teal-teal-700 h-3.5 w-3.5' />}
 
         <div
           className={cn(
-            'shrink-0  truncate text-xs font-medium text-text-accent',
+            'text-text-accent  shrink-0 truncate text-xs font-medium',
             !notHasValue && 'max-w-[70px]',
           )}
           title={variableName}
@@ -90,20 +90,20 @@ const ConditionValue = ({
           {variableName}
         </div>
         <div
-          className='shrink-0 mx-1 text-xs font-medium text-text-primary'
+          className='text-text-primary mx-1 shrink-0 text-xs font-medium'
           title={operatorName}
         >
           {operatorName}
         </div>
       </div>
-      <div className='ml-[10px] pl-[10px] border-l border-divider-regular'>
+      <div className='border-divider-regular ml-[10px] border-l pl-[10px]'>
         {
           sub_variable_condition?.conditions.map((c: Condition, index) => (
-            <div className='relative flex items-center h-6 space-x-1' key={c.id}>
+            <div className='relative flex h-6 items-center space-x-1' key={c.id}>
               <div className='text-text-accent system-xs-medium'>{c.key}</div>
               <div className='text-text-primary system-xs-medium'>{isComparisonOperatorNeedTranslate(c.comparison_operator) ? t(`workflow.nodes.ifElse.comparisonOperator.${c.comparison_operator}`) : c.comparison_operator}</div>
               {c.comparison_operator && !isEmptyRelatedOperator(c.comparison_operator) && <div className='text-text-secondary system-xs-regular'>{isSelect(c) ? selectName(c) : formatValue(c)}</div>}
-              {index !== sub_variable_condition.conditions.length - 1 && (<div className='absolute z-10 right-1 bottom-[-10px] leading-4 text-[10px] font-medium text-text-accent uppercase'>{t(`${i18nPrefix}.${sub_variable_condition.logical_operator}`)}</div>)}
+              {index !== sub_variable_condition.conditions.length - 1 && (<div className='text-text-accent absolute bottom-[-10px] right-1 z-10 text-[10px] font-medium uppercase leading-4'>{t(`${i18nPrefix}.${sub_variable_condition.logical_operator}`)}</div>)}
             </div>
           ))
         }
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
index bbc7654b3f..507229139c 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
@@ -207,7 +207,7 @@ const ConditionItem = ({
   return (
     <div className={cn('mb-1 flex last-of-type:mb-0', className)}>
       <div className={cn(
-        'grow rounded-lg bg-components-input-bg-normal',
+        'bg-components-input-bg-normal grow rounded-lg',
         isHovered && 'bg-state-destructive-hover',
       )}>
         <div className='flex items-center p-1'>
@@ -224,12 +224,12 @@ const ConditionItem = ({
                   renderTrigger={item => (
                     item
                       ? <div className='flex cursor-pointer justify-start'>
-                        <div className='inline-flex h-6 max-w-full items-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark px-1.5 text-text-accent shadow-xs'>
-                          <Variable02 className='h-3.5 w-3.5 shrink-0 text-text-accent' />
+                        <div className='border-components-panel-border-subtle bg-components-badge-white-to-dark text-text-accent shadow-xs inline-flex h-6 max-w-full items-center rounded-md border-[0.5px] px-1.5'>
+                          <Variable02 className='text-text-accent h-3.5 w-3.5 shrink-0' />
                           <div className='system-xs-medium ml-0.5 truncate'>{item?.name}</div>
                         </div>
                       </div>
-                      : <div className='system-sm-regular text-left text-components-input-text-placeholder'>{t('common.placeholder.select')}</div>
+                      : <div className='system-sm-regular text-components-input-text-placeholder text-left'>{t('common.placeholder.select')}</div>
                   )}
                   hideChecked
                 />
@@ -247,7 +247,7 @@ const ConditionItem = ({
               )}
 
           </div>
-          <div className='mx-1 h-3 w-[1px] bg-divider-regular'></div>
+          <div className='bg-divider-regular mx-1 h-3 w-[1px]'></div>
           <ConditionOperator
             disabled={!canChooseOperator}
             varType={condition.varType}
@@ -258,7 +258,7 @@ const ConditionItem = ({
         </div>
         {
           !comparisonOperatorNotRequireValue(condition.comparison_operator) && !isNotInput && condition.varType !== VarType.number && (
-            <div className='max-h-[100px] overflow-y-auto border-t border-t-divider-subtle px-2 py-1'>
+            <div className='border-t-divider-subtle max-h-[100px] overflow-y-auto border-t px-2 py-1'>
               <ConditionInput
                 disabled={disabled}
                 value={condition.value as string}
@@ -271,7 +271,7 @@ const ConditionItem = ({
         }
         {
           !comparisonOperatorNotRequireValue(condition.comparison_operator) && !isNotInput && condition.varType === VarType.number && (
-            <div className='border-t border-t-divider-subtle px-2 py-1 pt-[3px]'>
+            <div className='border-t-divider-subtle border-t px-2 py-1 pt-[3px]'>
               <ConditionNumberInput
                 numberVarType={condition.numberVarType}
                 onNumberVarTypeChange={handleUpdateConditionNumberVarType}
@@ -286,7 +286,7 @@ const ConditionItem = ({
         }
         {
           !comparisonOperatorNotRequireValue(condition.comparison_operator) && isSelect && (
-            <div className='border-t border-t-divider-subtle'>
+            <div className='border-t-divider-subtle border-t'>
               <Select
                 wrapperClassName='h-8'
                 className='rounded-t-none px-2 text-xs'
@@ -322,7 +322,7 @@ const ConditionItem = ({
         }
       </div>
       <div
-        className='ml-1 mt-1 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive'
+        className='text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive ml-1 mt-1 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg'
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         onClick={doRemoveCondition}
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
index afd9b1bccd..f2e9386a8f 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
@@ -66,16 +66,16 @@ const ConditionOperator = ({
               ? selectedOption.label
               : t(`${i18nPrefix}.select`)
           }
-          <RiArrowDownSLine className='ml-1 w-3.5 h-3.5' />
+          <RiArrowDownSLine className='ml-1 h-3.5 w-3.5' />
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-10'>
-        <div className='p-1 bg-components-panel-bg-blur rounded-xl border-[0.5px] border-components-panel-border shadow-lg'>
+        <div className='bg-components-panel-bg-blur border-components-panel-border rounded-xl border-[0.5px] p-1 shadow-lg'>
           {
             options.map(option => (
               <div
                 key={option.value}
-                className='flex items-center px-3 py-1.5 h-7 text-[13px] font-medium text-text-secondary rounded-lg cursor-pointer hover:bg-state-base-hover'
+                className='text-text-secondary hover:bg-state-base-hover flex h-7 cursor-pointer items-center rounded-lg px-3 py-1.5 text-[13px] font-medium'
                 onClick={() => {
                   onSelect(option.value)
                   setOpen(false)
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-var-selector.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-var-selector.tsx
index 68a012d1a0..4ced0e1770 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-var-selector.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-var-selector.tsx
@@ -43,7 +43,7 @@ const ConditionVarSelector = ({
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[1000]'>
-        <div className='w-[296px] bg-components-panel-bg-blur rounded-lg border-[0.5px] border-components-panel-border shadow-lg'>
+        <div className='bg-components-panel-bg-blur border-components-panel-border w-[296px] rounded-lg border-[0.5px] shadow-lg'>
           <VarReferenceVars
             vars={nodesOutputVars}
             isSupportFileVar
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
index 7417cd1077..484b0d0863 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
@@ -87,18 +87,18 @@ const ConditionList = ({
       {
         conditions.length > 1 && (
           <div className={cn(
-            'absolute top-0 bottom-0 left-0 w-[60px]',
+            'absolute bottom-0 left-0 top-0 w-[60px]',
             isSubVariable && logical_operator === LogicalOperator.and && 'left-[-10px]',
             isSubVariable && logical_operator === LogicalOperator.or && 'left-[-18px]',
           )}>
-            <div className='absolute top-4 bottom-4 left-[46px] w-2.5 border border-divider-deep rounded-l-[8px] border-r-0'></div>
-            <div className='absolute top-1/2 -translate-y-1/2 right-0 w-4 h-[29px] bg-components-panel-bg'></div>
+            <div className='border-divider-deep absolute bottom-4 left-[46px] top-4 w-2.5 rounded-l-[8px] border border-r-0'></div>
+            <div className='bg-components-panel-bg absolute right-0 top-1/2 h-[29px] w-4 -translate-y-1/2'></div>
             <div
-              className='absolute top-1/2 right-1 -translate-y-1/2 flex items-center px-1 h-[21px] rounded-md border-[0.5px] border-components-button-secondary-border shadow-xs bg-components-button-secondary-bg text-text-accent-secondary text-[10px] font-semibold cursor-pointer select-none'
+              className='border-components-button-secondary-border shadow-xs bg-components-button-secondary-bg text-text-accent-secondary absolute right-1 top-1/2 flex h-[21px] -translate-y-1/2 cursor-pointer select-none items-center rounded-md border-[0.5px] px-1 text-[10px] font-semibold'
               onClick={doToggleConditionLogicalOperator}
             >
               {logical_operator.toUpperCase()}
-              <RiLoopLeftLine className='ml-0.5 w-3 h-3' />
+              <RiLoopLeftLine className='ml-0.5 h-3 w-3' />
             </div>
           </div>
         )
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx b/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
index 95b0aa0c02..d10af3c5e1 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
@@ -62,7 +62,7 @@ const ConditionNumberInput = ({
   }, [onValueChange])
 
   return (
-    <div className='flex items-center cursor-pointer'>
+    <div className='flex cursor-pointer items-center'>
       <PortalToFollowElem
         open={numberVarTypeVisible}
         onOpenChange={setNumberVarTypeVisible}
@@ -76,18 +76,18 @@ const ConditionNumberInput = ({
             size='small'
           >
             {capitalize(numberVarType)}
-            <RiArrowDownSLine className='ml-[1px] w-3.5 h-3.5' />
+            <RiArrowDownSLine className='ml-[1px] h-3.5 w-3.5' />
           </Button>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1000]'>
-          <div className='p-1 w-[112px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
+          <div className='border-components-panel-border bg-components-panel-bg-blur w-[112px] rounded-xl border-[0.5px] p-1 shadow-lg'>
             {
               options.map(option => (
                 <div
                   key={option}
                   className={cn(
-                    'flex items-center px-3 h-7 rounded-md hover:bg-state-base-hover cursor-pointer',
-                    'text-[13px] font-medium text-text-secondary',
+                    'hover:bg-state-base-hover flex h-7 cursor-pointer items-center rounded-md px-3',
+                    'text-text-secondary text-[13px] font-medium',
                     numberVarType === option && 'bg-state-base-hover',
                   )}
                   onClick={() => {
@@ -102,8 +102,8 @@ const ConditionNumberInput = ({
           </div>
         </PortalToFollowElemContent>
       </PortalToFollowElem>
-      <div className='mx-1 w-[1px] h-4 bg-divider-regular'></div>
-      <div className='grow w-0 ml-0.5'>
+      <div className='bg-divider-regular mx-1 h-4 w-[1px]'></div>
+      <div className='ml-0.5 w-0 grow'>
         {
           numberVarType === NumberVarType.variable && (
             <PortalToFollowElem
@@ -126,15 +126,15 @@ const ConditionNumberInput = ({
                 }
                 {
                   !value && (
-                    <div className='flex items-center p-1 h-6 text-components-input-text-placeholder text-[13px]'>
-                      <Variable02 className='shrink-0 mr-1 w-4 h-4' />
+                    <div className='text-components-input-text-placeholder flex h-6 items-center p-1 text-[13px]'>
+                      <Variable02 className='mr-1 h-4 w-4 shrink-0' />
                       <div className='w-0 grow truncate'>{t('workflow.nodes.ifElse.selectVariable')}</div>
                     </div>
                   )
                 }
               </PortalToFollowElemTrigger>
               <PortalToFollowElemContent className='z-[1000]'>
-                <div className={cn('w-[296px] pt-1 bg-components-panel-bg-blur rounded-lg border-[0.5px] border-components-panel-border shadow-lg', isShort && 'w-[200px]')}>
+                <div className={cn('bg-components-panel-bg-blur border-components-panel-border w-[296px] rounded-lg border-[0.5px] pt-1 shadow-lg', isShort && 'w-[200px]')}>
                   <VarReferenceVars
                     vars={variables}
                     onChange={handleSelectVariable}
@@ -148,7 +148,7 @@ const ConditionNumberInput = ({
           numberVarType === NumberVarType.constant && (
             <div className=' relative'>
               <input
-                className={cn('block w-full px-2 text-[13px] text-components-input-text-filled placeholder:text-components-input-text-placeholder outline-none appearance-none bg-transparent', unit && 'pr-6')}
+                className={cn('text-components-input-text-filled placeholder:text-components-input-text-placeholder block w-full appearance-none bg-transparent px-2 text-[13px] outline-none', unit && 'pr-6')}
                 type='number'
                 value={value}
                 onChange={e => onValueChange(e.target.value)}
@@ -156,7 +156,7 @@ const ConditionNumberInput = ({
                 onFocus={setFocus}
                 onBlur={setBlur}
               />
-              {!isFocus && unit && <div className='absolute right-2 top-[50%] translate-y-[-50%] text-text-tertiary system-sm-regular'>{unit}</div>}
+              {!isFocus && unit && <div className='text-text-tertiary system-sm-regular absolute right-2 top-[50%] translate-y-[-50%]'>{unit}</div>}
             </div>
           )
         }
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-value.tsx b/web/app/components/workflow/nodes/if-else/components/condition-value.tsx
index ca448e9bf2..ea534e29c2 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-value.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-value.tsx
@@ -75,14 +75,14 @@ const ConditionValue = ({
   }, [isSelect, t, value])
 
   return (
-    <div className='flex h-6 items-center rounded-md bg-workflow-block-parma-bg px-1'>
-      {!isEnvVar && !isChatVar && <Variable02 className={cn('mr-1 h-3.5 w-3.5 shrink-0 text-text-accent', isException && 'text-text-warning')} />}
-      {isEnvVar && <Env className='mr-1 h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600' />}
-      {isChatVar && <BubbleX className='h-3.5 w-3.5 text-util-colors-teal-teal-700' />}
+    <div className='bg-workflow-block-parma-bg flex h-6 items-center rounded-md px-1'>
+      {!isEnvVar && !isChatVar && <Variable02 className={cn('text-text-accent mr-1 h-3.5 w-3.5 shrink-0', isException && 'text-text-warning')} />}
+      {isEnvVar && <Env className='text-util-colors-violet-violet-600 mr-1 h-3.5 w-3.5 shrink-0' />}
+      {isChatVar && <BubbleX className='text-util-colors-teal-teal-700 h-3.5 w-3.5' />}
 
       <div
         className={cn(
-          'ml-0.5 shrink-0 truncate text-xs font-medium text-text-accent',
+          'text-text-accent ml-0.5 shrink-0 truncate text-xs font-medium',
           !notHasValue && 'max-w-[70px]',
           isException && 'text-text-warning',
         )}
@@ -91,14 +91,14 @@ const ConditionValue = ({
         {variableName}
       </div>
       <div
-        className='mx-1 shrink-0 text-xs font-medium text-text-primary'
+        className='text-text-primary mx-1 shrink-0 text-xs font-medium'
         title={operatorName}
       >
         {operatorName}
       </div>
       {
         !notHasValue && (
-          <div className='truncate text-xs text-text-secondary' title={formatValue}>{isSelect ? selectName : formatValue}</div>
+          <div className='text-text-secondary truncate text-xs' title={formatValue}>{isSelect ? selectName : formatValue}</div>
         )
       }
     </div>
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
index a09cb5fa29..51f099c9e2 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
@@ -95,20 +95,20 @@ const ConditionWrap: FC<Props> = ({
             <div key={item.case_id}>
               <div
                 className={cn(
-                  'group relative rounded-[10px] bg-components-panel-bg',
+                  'bg-components-panel-bg group relative rounded-[10px]',
                   willDeleteCaseId === item.case_id && 'bg-state-destructive-hover',
-                  !isSubVariable && 'py-1 px-3 min-h-[40px] ',
+                  !isSubVariable && 'min-h-[40px] px-3 py-1 ',
                   isSubVariable && 'px-1 py-2',
                 )}
               >
                 {!isSubVariable && (
                   <>
                     <RiDraggable className={cn(
-                      'hidden handle absolute top-2 left-1 w-3 h-3 text-text-quaternary cursor-pointer',
+                      'handle text-text-quaternary absolute left-1 top-2 hidden h-3 w-3 cursor-pointer',
                       casesLength > 1 && 'group-hover:block',
                     )} />
                     <div className={cn(
-                      'absolute left-4 leading-4 text-[13px] font-semibold text-text-secondary',
+                      'text-text-secondary absolute left-4 text-[13px] font-semibold leading-4',
                       casesLength === 1 ? 'top-2.5' : 'top-1',
                     )}>
                       {
@@ -116,7 +116,7 @@ const ConditionWrap: FC<Props> = ({
                       }
                       {
                         casesLength > 1 && (
-                          <div className='text-[10px] text-text-tertiary font-medium'>CASE {index + 1}</div>
+                          <div className='text-text-tertiary text-[10px] font-medium'>CASE {index + 1}</div>
                         )
                       }
                     </div>
@@ -168,7 +168,7 @@ const ConditionWrap: FC<Props> = ({
                             size='small'
                             disabled={readOnly}
                           >
-                            <RiAddLine className='mr-1 w-3.5 h-3.5' />
+                            <RiAddLine className='mr-1 h-3.5 w-3.5' />
                             {t('workflow.nodes.ifElse.addSubVariable')}
                           </Button>
                         )}
@@ -195,7 +195,7 @@ const ConditionWrap: FC<Props> = ({
                         onMouseEnter={() => setWillDeleteCaseId(item.case_id)}
                         onMouseLeave={() => setWillDeleteCaseId('')}
                       >
-                        <RiDeleteBinLine className='mr-1 w-3.5 h-3.5' />
+                        <RiDeleteBinLine className='mr-1 h-3.5 w-3.5' />
                         {t('common.operation.remove')}
                       </Button>
                     )
@@ -203,7 +203,7 @@ const ConditionWrap: FC<Props> = ({
                 </div>
               </div>
               {!isSubVariable && (
-                <div className='my-2 mx-3 h-[1px] bg-divider-subtle'></div>
+                <div className='bg-divider-subtle mx-3 my-2 h-[1px]'></div>
               )}
             </div>
           ))
@@ -215,7 +215,7 @@ const ConditionWrap: FC<Props> = ({
           disabled={readOnly}
           onClick={() => handleAddSubVariableCondition?.(caseId!, conditionId!)}
         >
-          <RiAddLine className='mr-1 w-3.5 h-3.5' />
+          <RiAddLine className='mr-1 h-3.5 w-3.5' />
           {t('workflow.nodes.ifElse.addSubVariable')}
         </Button>
       )}
diff --git a/web/app/components/workflow/nodes/if-else/node.tsx b/web/app/components/workflow/nodes/if-else/node.tsx
index 10ed789d51..5d56edc1cc 100644
--- a/web/app/components/workflow/nodes/if-else/node.tsx
+++ b/web/app/components/workflow/nodes/if-else/node.tsx
@@ -37,7 +37,7 @@ const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
       return !!condition.value
     }
   }, [])
-  const conditionNotSet = (<div className='flex items-center h-6 px-1 space-x-1 text-xs font-normal text-text-secondary bg-workflow-block-parma-bg rounded-md'>
+  const conditionNotSet = (<div className='text-text-secondary bg-workflow-block-parma-bg flex h-6 items-center space-x-1 rounded-md px-1 text-xs font-normal'>
     {t(`${i18nPrefix}.conditionNotSetup`)}
   </div>)
 
@@ -46,12 +46,12 @@ const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
       {
         cases.map((caseItem, index) => (
           <div key={caseItem.case_id}>
-            <div className='relative flex items-center h-6 px-1'>
-              <div className='flex items-center justify-between w-full'>
-                <div className='text-[10px] font-semibold text-text-tertiary'>
+            <div className='relative flex h-6 items-center px-1'>
+              <div className='flex w-full items-center justify-between'>
+                <div className='text-text-tertiary text-[10px] font-semibold'>
                   {casesLength > 1 && `CASE ${index + 1}`}
                 </div>
-                <div className='text-[12px] font-semibold text-text-secondary'>{index === 0 ? 'IF' : 'ELIF'}</div>
+                <div className='text-text-secondary text-[12px] font-semibold'>{index === 0 ? 'IF' : 'ELIF'}</div>
               </div>
               <NodeSourceHandle
                 {...props}
@@ -80,7 +80,7 @@ const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
                       )
                       : conditionNotSet}
                   {i !== caseItem.conditions.length - 1 && (
-                    <div className='absolute z-10 right-1 bottom-[-10px] leading-4 text-[10px] font-medium text-text-accent uppercase'>{t(`${i18nPrefix}.${caseItem.logical_operator}`)}</div>
+                    <div className='text-text-accent absolute bottom-[-10px] right-1 z-10 text-[10px] font-medium uppercase leading-4'>{t(`${i18nPrefix}.${caseItem.logical_operator}`)}</div>
                   )}
                 </div>
               ))}
@@ -88,8 +88,8 @@ const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
           </div>
         ))
       }
-      <div className='relative flex items-center h-6 px-1'>
-        <div className='w-full text-xs font-semibold text-right text-text-secondary'>ELSE</div>
+      <div className='relative flex h-6 items-center px-1'>
+        <div className='text-text-secondary w-full text-right text-xs font-semibold'>ELSE</div>
         <NodeSourceHandle
           {...props}
           handleId='false'
diff --git a/web/app/components/workflow/nodes/if-else/panel.tsx b/web/app/components/workflow/nodes/if-else/panel.tsx
index 9de6ff05f6..dfcc5db7e5 100644
--- a/web/app/components/workflow/nodes/if-else/panel.tsx
+++ b/web/app/components/workflow/nodes/if-else/panel.tsx
@@ -69,16 +69,16 @@ const Panel: FC<NodePanelProps<IfElseNodeType>> = ({
           onClick={() => handleAddCase()}
           disabled={readOnly}
         >
-          <RiAddLine className='mr-1 w-4 h-4' />
+          <RiAddLine className='mr-1 h-4 w-4' />
           ELIF
         </Button>
       </div>
-      <div className='my-2 mx-3 h-[1px] bg-divider-subtle'></div>
+      <div className='bg-divider-subtle mx-3 my-2 h-[1px]'></div>
       <Field
         title={t(`${i18nPrefix}.else`)}
         className='px-4 py-2'
       >
-        <div className='leading-[18px] text-xs font-normal text-text-tertiary'>{t(`${i18nPrefix}.elseDescription`)}</div>
+        <div className='text-text-tertiary text-xs font-normal leading-[18px]'>{t(`${i18nPrefix}.elseDescription`)}</div>
       </Field>
     </div>
   )
diff --git a/web/app/components/workflow/nodes/iteration-start/index.tsx b/web/app/components/workflow/nodes/iteration-start/index.tsx
index 58174e1262..7f663d15f6 100644
--- a/web/app/components/workflow/nodes/iteration-start/index.tsx
+++ b/web/app/components/workflow/nodes/iteration-start/index.tsx
@@ -9,10 +9,10 @@ const IterationStartNode = ({ id, data }: NodeProps) => {
   const { t } = useTranslation()
 
   return (
-    <div className='group flex nodrag items-center justify-center w-11 h-11 mt-1 rounded-2xl border border-workflow-block-border bg-workflow-block-bg shadow-xs'>
+    <div className='nodrag border-workflow-block-border bg-workflow-block-bg shadow-xs group mt-1 flex h-11 w-11 items-center justify-center rounded-2xl border'>
       <Tooltip popupContent={t('workflow.blocks.iteration-start')} asChild={false}>
-        <div className='flex items-center justify-center w-6 h-6 rounded-full border-[0.5px] border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500'>
-          <RiHome5Fill className='w-3 h-3 text-text-primary-on-surface' />
+        <div className='border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500 flex h-6 w-6 items-center justify-center rounded-full border-[0.5px]'>
+          <RiHome5Fill className='text-text-primary-on-surface h-3 w-3' />
         </div>
       </Tooltip>
       <NodeSourceHandle
@@ -29,10 +29,10 @@ export const IterationStartNodeDumb = () => {
   const { t } = useTranslation()
 
   return (
-    <div className='relative left-[17px] top-[21px] flex nodrag items-center justify-center w-11 h-11 rounded-2xl border border-workflow-block-border bg-white z-[11]'>
+    <div className='nodrag border-workflow-block-border relative left-[17px] top-[21px] z-[11] flex h-11 w-11 items-center justify-center rounded-2xl border bg-white'>
       <Tooltip popupContent={t('workflow.blocks.iteration-start')} asChild={false}>
-        <div className='flex items-center justify-center w-6 h-6 rounded-full border-[0.5px] border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500'>
-          <RiHome5Fill className='w-3 h-3 text-text-primary-on-surface' />
+        <div className='border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500 flex h-6 w-6 items-center justify-center rounded-full border-[0.5px]'>
+          <RiHome5Fill className='text-text-primary-on-surface h-3 w-3' />
         </div>
       </Tooltip>
     </div>
diff --git a/web/app/components/workflow/nodes/iteration/add-block.tsx b/web/app/components/workflow/nodes/iteration/add-block.tsx
index 5328ed2732..cfc45ff314 100644
--- a/web/app/components/workflow/nodes/iteration/add-block.tsx
+++ b/web/app/components/workflow/nodes/iteration/add-block.tsx
@@ -49,20 +49,20 @@ const AddBlock = ({
   const renderTriggerElement = useCallback((open: boolean) => {
     return (
       <div className={cn(
-        'relative inline-flex items-center px-3 h-8 rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs cursor-pointer hover:bg-components-button-secondary-bg-hover system-sm-medium text-components-button-secondary-text backdrop-blur-[5px]',
-        `${nodesReadOnly && '!cursor-not-allowed bg-components-button-secondary-bg-disabled'}`,
+        'border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs hover:bg-components-button-secondary-bg-hover system-sm-medium text-components-button-secondary-text relative inline-flex h-8 cursor-pointer items-center rounded-lg border-[0.5px] px-3 backdrop-blur-[5px]',
+        `${nodesReadOnly && 'bg-components-button-secondary-bg-disabled !cursor-not-allowed'}`,
         open && 'bg-components-button-secondary-bg-hover',
       )}>
-        <RiAddLine className='mr-1 w-4 h-4' />
+        <RiAddLine className='mr-1 h-4 w-4' />
         {t('workflow.common.addBlock')}
       </div>
     )
   }, [nodesReadOnly, t])
 
   return (
-    <div className='absolute top-7 left-14 flex items-center h-8 z-10'>
-      <div className='group/insert relative w-16 h-0.5 bg-gray-300'>
-        <div className='absolute right-0 top-1/2 -translate-y-1/2 w-0.5 h-2 bg-primary-500'></div>
+    <div className='absolute left-14 top-7 z-10 flex h-8 items-center'>
+      <div className='group/insert relative h-0.5 w-16 bg-gray-300'>
+        <div className='bg-primary-500 absolute right-0 top-1/2 h-2 w-0.5 -translate-y-1/2'></div>
       </div>
       <BlockSelector
         disabled={nodesReadOnly}
diff --git a/web/app/components/workflow/nodes/iteration/node.tsx b/web/app/components/workflow/nodes/iteration/node.tsx
index 7fe4a87803..a16051ee95 100644
--- a/web/app/components/workflow/nodes/iteration/node.tsx
+++ b/web/app/components/workflow/nodes/iteration/node.tsx
@@ -43,11 +43,11 @@ const Node: FC<NodeProps<IterationNodeType>> = ({
 
   return (
     <div className={cn(
-      'relative min-w-[240px] min-h-[90px] w-full h-full rounded-2xl bg-workflow-canvas-workflow-bg',
+      'bg-workflow-canvas-workflow-bg relative h-full min-h-[90px] w-full min-w-[240px] rounded-2xl',
     )}>
       <Background
         id={`iteration-background-${id}`}
-        className='rounded-2xl !z-0'
+        className='!z-0 rounded-2xl'
         gap={[14 / zoom, 14 / zoom]}
         size={2 / zoom}
         color='var(--color-workflow-canvas-workflow-dot-color)'
diff --git a/web/app/components/workflow/nodes/iteration/panel.tsx b/web/app/components/workflow/nodes/iteration/panel.tsx
index 31aeaba637..2b6eae6389 100644
--- a/web/app/components/workflow/nodes/iteration/panel.tsx
+++ b/web/app/components/workflow/nodes/iteration/panel.tsx
@@ -69,12 +69,12 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
   const logsParams = useLogs()
 
   return (
-    <div className='pt-2 pb-2'>
-      <div className='px-4 pb-4 space-y-4'>
+    <div className='pb-2 pt-2'>
+      <div className='space-y-4 px-4 pb-4'>
         <Field
           title={t(`${i18nPrefix}.input`)}
           operations={(
-            <div className='flex items-center h-[18px] px-1 border border-divider-deep rounded-[5px] system-2xs-medium-uppercase text-text-tertiary capitalize'>Array</div>
+            <div className='border-divider-deep system-2xs-medium-uppercase text-text-tertiary flex h-[18px] items-center rounded-[5px] border px-1 capitalize'>Array</div>
           )}
         >
           <VarReferencePicker
@@ -88,11 +88,11 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
         </Field>
       </div>
       <Split />
-      <div className='mt-2 px-4 pb-4 space-y-4'>
+      <div className='mt-2 space-y-4 px-4 pb-4'>
         <Field
           title={t(`${i18nPrefix}.output`)}
           operations={(
-            <div className='flex items-center h-[18px] px-1 border border-divider-deep rounded-[5px] system-2xs-medium-uppercase text-text-tertiary capitalize'>Array</div>
+            <div className='border-divider-deep system-2xs-medium-uppercase text-text-tertiary flex h-[18px] items-center rounded-[5px] border px-1 capitalize'>Array</div>
           )}
         >
           <VarReferencePicker
@@ -114,14 +114,14 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
       {
         inputs.is_parallel && (<div className='px-4 pb-2'>
           <Field title={t(`${i18nPrefix}.MaxParallelismTitle`)} isSubTitle tooltip={<div className='w-[230px]'>{t(`${i18nPrefix}.MaxParallelismDesc`)}</div>}>
-            <div className='flex row'>
+            <div className='row flex'>
               <Input type='number' wrapperClassName='w-18 mr-4 ' max={MAX_ITERATION_PARALLEL_NUM} min={MIN_ITERATION_PARALLEL_NUM} value={inputs.parallel_nums} onChange={(e) => { changeParallelNums(Number(e.target.value)) }} />
               <Slider
                 value={inputs.parallel_nums}
                 onChange={changeParallelNums}
                 max={MAX_ITERATION_PARALLEL_NUM}
                 min={MIN_ITERATION_PARALLEL_NUM}
-                className=' shrink-0 flex-1 mt-4'
+                className=' mt-4 flex-1 shrink-0'
               />
             </div>
 
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
index 6f9ae65ee0..b7e4370b46 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
@@ -55,8 +55,8 @@ const DatasetItem: FC<Props> = ({
   }, [onRemove])
 
   return (
-    <div className={`group/dataset-item flex h-10 cursor-pointer items-center justify-between rounded-xl 
-      border-[0.5px] border-components-panel-border-subtle px-2 
+    <div className={`group/dataset-item border-components-panel-border-subtle flex h-10 cursor-pointer items-center justify-between 
+      rounded-xl border-[0.5px] px-2 
       ${isDeleteHovered
       ? 'border-state-destructive-border bg-state-destructive-hover'
       : 'bg-components-panel-on-panel-item-bg hover:bg-components-panel-on-panel-item-bg-hover'
@@ -73,7 +73,7 @@ const DatasetItem: FC<Props> = ({
               <Folder className='h-4 w-4 text-[#444CE7]' />
             </div>
         }
-        <div className='system-sm-medium w-0 grow truncate text-text-secondary'>{payload.name}</div>
+        <div className='system-sm-medium text-text-secondary w-0 grow truncate'>{payload.name}</div>
       </div>
       {!readonly && (
         <div className='ml-2 hidden shrink-0 items-center  space-x-1 group-hover/dataset-item:flex'>
@@ -84,7 +84,7 @@ const DatasetItem: FC<Props> = ({
                 showSettingsModal()
               }}
             >
-              <RiEditLine className='h-4 w-4 shrink-0 text-text-tertiary' />
+              <RiEditLine className='text-text-tertiary h-4 w-4 shrink-0' />
             </ActionButton>
           }
           <ActionButton
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-list.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-list.tsx
index a30de8b104..ad073eb1a3 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-list.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-list.tsx
@@ -70,7 +70,7 @@ const DatasetList: FC<Props> = ({
           )
         })
         : (
-          <div className='p-3 text-xs text-center text-gray-500 rounded-lg cursor-default select-none bg-gray-50'>
+          <div className='cursor-default select-none rounded-lg bg-gray-50 p-3 text-center text-xs text-gray-500'>
             {t('appDebug.datasetConfig.knowledgeTip')}
           </div>
         )
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
index d3e2079733..c9024fe87a 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
@@ -111,12 +111,12 @@ const RetrievalConfig: FC<Props> = ({
           disabled={readonly}
           className={cn(open && 'bg-components-button-ghost-bg-hover')}
         >
-          <RiEqualizer2Line className='mr-1 w-3.5 h-3.5' />
+          <RiEqualizer2Line className='mr-1 h-3.5 w-3.5' />
           {t('dataset.retrievalSettings')}
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 1001 }}>
-        <div className='w-[404px] pt-3 pb-4 px-4 shadow-xl  rounded-2xl border border-gray-200  bg-white'>
+        <div className='w-[404px] rounded-2xl border border-gray-200 bg-white  px-4 pb-4 pt-3  shadow-xl'>
           <ConfigRetrievalContent
             datasetConfigs={
               {
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx
index ee0e475d7e..17da4700ee 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx
@@ -36,11 +36,11 @@ const Node: FC<NodeProps<KnowledgeRetrievalNodeType>> = ({
     <div className='mb-1 px-3 py-1'>
       <div className='space-y-0.5'>
         {selectedDatasets.map(({ id, name }) => (
-          <div key={id} className='flex items-center h-[26px] bg-workflow-block-parma-bg rounded-md  px-1 text-xs font-normal text-gray-700'>
-            <div className='mr-1 shrink-0 p-1 bg-[#F5F8FF] rounded-md border-[0.5px] border-[#E0EAFF]'>
-              <Folder className='w-3 h-3 text-[#444CE7]' />
+          <div key={id} className='bg-workflow-block-parma-bg flex h-[26px] items-center rounded-md  px-1 text-xs font-normal text-gray-700'>
+            <div className='mr-1 shrink-0 rounded-md border-[0.5px] border-[#E0EAFF] bg-[#F5F8FF] p-1'>
+              <Folder className='h-3 w-3 text-[#444CE7]' />
             </div>
-            <div className='grow w-0 text-text-secondary system-xs-regular truncate'>
+            <div className='text-text-secondary system-xs-regular w-0 grow truncate'>
               {name}
             </div>
           </div>
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx
index bae4217d11..24d9f3becc 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx
@@ -54,7 +54,7 @@ const Panel: FC<NodePanelProps<KnowledgeRetrievalNodeType>> = ({
 
   return (
     <div className='pt-2'>
-      <div className='px-4 pb-4 space-y-4'>
+      <div className='space-y-4 px-4 pb-4'>
         {/* {JSON.stringify(inputs, null, 2)} */}
         <Field
           title={t(`${i18nPrefix}.queryVariable`)}
@@ -89,7 +89,7 @@ const Panel: FC<NodePanelProps<KnowledgeRetrievalNodeType>> = ({
                 onOpenFromPropsChange={handleOpenFromPropsChange}
                 selectedDatasets={selectedDatasets}
               />
-              {!readOnly && (<div className='w-px h-3 bg-gray-200'></div>)}
+              {!readOnly && (<div className='h-3 w-px bg-gray-200'></div>)}
               {!readOnly && (
                 <AddKnowledge
                   selectedIds={inputs.dataset_ids}
diff --git a/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx b/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx
index 2c5b8467fb..711803e4e5 100644
--- a/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx
@@ -35,7 +35,7 @@ const ExtractInput: FC<Props> = ({
     <div className='flex items-start  space-x-1'>
       <Input
         instanceId='http-extract-number'
-        className={cn(isFocus ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'w-0 grow rounded-lg px-3 py-[6px] border')}
+        className={cn(isFocus ? 'shadow-xs border-gray-300 bg-gray-50' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')}
         value={value}
         onChange={onChange}
         readOnly={readOnly}
diff --git a/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx b/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx
index 0c261a70d6..e889336719 100644
--- a/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx
@@ -77,7 +77,7 @@ const FilterCondition: FC<Props> = ({
       )}
       <div className='flex space-x-1'>
         <ConditionOperator
-          className='h-8 bg-components-input-bg-normal'
+          className='bg-components-input-bg-normal h-8'
           varType={varType}
           value={condition.comparison_operator}
           onSelect={handleChange('comparison_operator')}
diff --git a/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx b/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx
index c3a8708603..1a1d06ecff 100644
--- a/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx
@@ -27,9 +27,9 @@ const SubVariablePicker: FC<Props> = ({
 
   const renderOption = ({ item }: { item: Record<string, any> }) => {
     return (
-      <div className='flex items-center h-6 justify-between'>
-        <div className='flex items-center h-full'>
-          <Variable02 className='mr-[5px] w-3.5 h-3.5 text-text-accent' />
+      <div className='flex h-6 items-center justify-between'>
+        <div className='flex h-full items-center'>
+          <Variable02 className='text-text-accent mr-[5px] h-3.5 w-3.5' />
           <span className='text-text-secondary system-sm-medium'>{item.name}</span>
         </div>
         <span className='text-text-tertiary system-xs-regular'>{item.type}</span>
@@ -52,16 +52,16 @@ const SubVariablePicker: FC<Props> = ({
         optionClassName='pl-1 pr-5 py-0'
         renderOption={renderOption}
         renderTrigger={item => (
-          <div className='group/sub-variable-picker flex items-center h-8 pl-1 rounded-lg bg-components-input-bg-normal hover:bg-state-base-hover-alt'>
+          <div className='group/sub-variable-picker bg-components-input-bg-normal hover:bg-state-base-hover-alt flex h-8 items-center rounded-lg pl-1'>
             {item
-              ? <div className='flex justify-start cursor-pointer'>
-                <div className='inline-flex max-w-full px-1.5 items-center h-6 rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark shadow-xs text-text-accent'>
-                  <Variable02 className='shrink-0 w-3.5 h-3.5 text-text-accent' />
-                  <div className='ml-0.5 truncate system-xs-medium'>{item?.name}</div>
+              ? <div className='flex cursor-pointer justify-start'>
+                <div className='border-components-panel-border-subtle bg-components-badge-white-to-dark shadow-xs text-text-accent inline-flex h-6 max-w-full items-center rounded-md border-[0.5px] px-1.5'>
+                  <Variable02 className='text-text-accent h-3.5 w-3.5 shrink-0' />
+                  <div className='system-xs-medium ml-0.5 truncate'>{item?.name}</div>
                 </div>
               </div>
-              : <div className='pl-1 flex text-components-input-text-placeholder system-sm-regular  group-hover/sub-variable-picker:text-text-tertiary'>
-                <Variable02 className='mr-1 shrink-0 w-4 h-4' />
+              : <div className='text-components-input-text-placeholder system-sm-regular group-hover/sub-variable-picker:text-text-tertiary flex  pl-1'>
+                <Variable02 className='mr-1 h-4 w-4 shrink-0' />
                 <span>{t('common.placeholder.select')}</span>
               </div>}
           </div>
diff --git a/web/app/components/workflow/nodes/list-operator/node.tsx b/web/app/components/workflow/nodes/list-operator/node.tsx
index 5c498369c7..005ae6802d 100644
--- a/web/app/components/workflow/nodes/list-operator/node.tsx
+++ b/web/app/components/workflow/nodes/list-operator/node.tsx
@@ -27,7 +27,7 @@ const NodeComponent: FC<NodeProps<ListFilterNodeType>> = ({
   const varName = isSystem ? `sys.${variable[variable.length - 1]}` : variable.slice(1).join('.')
   return (
     <div className='relative px-3'>
-      <div className='mb-1 system-2xs-medium-uppercase text-text-tertiary'>{t(`${i18nPrefix}.inputVar`)}</div>
+      <div className='system-2xs-medium-uppercase text-text-tertiary mb-1'>{t(`${i18nPrefix}.inputVar`)}</div>
       <NodeVariableItem
         node={node as Node}
         isEnv={isEnv}
diff --git a/web/app/components/workflow/nodes/list-operator/panel.tsx b/web/app/components/workflow/nodes/list-operator/panel.tsx
index 4212305c8c..42d5ff3bf1 100644
--- a/web/app/components/workflow/nodes/list-operator/panel.tsx
+++ b/web/app/components/workflow/nodes/list-operator/panel.tsx
@@ -43,7 +43,7 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
 
   return (
     <div className='pt-2'>
-      <div className='px-4 space-y-4'>
+      <div className='space-y-4 px-4'>
         <Field
           title={t(`${i18nPrefix}.inputVar`)}
         >
@@ -97,7 +97,7 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
             ? (
               <div className='flex items-center justify-between'>
                 {hasSubVariable && (
-                  <div className='grow mr-2'>
+                  <div className='mr-2 grow'>
                     <ExtractInput
                       value={inputs.extract_by.serial as string}
                       onChange={handleExtractsChange}
@@ -132,14 +132,14 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
             ? (
               <div className='flex items-center justify-between'>
                 {hasSubVariable && (
-                  <div className='grow mr-2'>
+                  <div className='mr-2 grow'>
                     <SubVariablePicker
                       value={inputs.order_by.key as string}
                       onChange={handleOrderByKeyChange}
                     />
                   </div>
                 )}
-                <div className={!hasSubVariable ? 'w-full grid grid-cols-2 gap-1' : 'shrink-0 flex space-x-1'}>
+                <div className={!hasSubVariable ? 'grid w-full grid-cols-2 gap-1' : 'flex shrink-0 space-x-1'}>
                   <OptionCard
                     title={t(`${i18nPrefix}.asc`)}
                     onSelect={handleOrderByTypeChange(OrderBy.ASC)}
diff --git a/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx b/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx
index d8d47a157f..00252d05f2 100644
--- a/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx
+++ b/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx
@@ -103,7 +103,7 @@ const ConfigPromptItem: FC<Props> = ({
       title={
         <div className='relative left-1 flex items-center'>
           {payload.role === PromptRole.system
-            ? (<div className='relative left-[-4px] text-xs font-semibold text-gray-700 uppercase'>
+            ? (<div className='relative left-[-4px] text-xs font-semibold uppercase text-gray-700'>
               SYSTEM
             </div>)
             : (
diff --git a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
index 2c6d725c42..d2f02664c7 100644
--- a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
+++ b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
@@ -179,8 +179,8 @@ const ConfigPrompt: FC<Props> = ({
                       return true
                     })()
                     return (
-                      <div key={item.id || index} className='relative group'>
-                        {canDrag && <DragHandle className='group-hover:block hidden absolute left-[-14px] top-2 w-3.5 h-3.5 text-gray-400' />}
+                      <div key={item.id || index} className='group relative'>
+                        {canDrag && <DragHandle className='absolute left-[-14px] top-2 hidden h-3.5 w-3.5 text-gray-400 group-hover:block' />}
                         <ConfigPromptItem
                           className={cn(canDrag && 'handle')}
                           headerClassName={cn(canDrag && 'cursor-grab')}
diff --git a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
index 10fb4a1f4b..055bf10ce2 100644
--- a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
+++ b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
@@ -32,7 +32,7 @@ const PromptGeneratorBtn: FC<Props> = ({
       <ActionButton
         className='hover:bg-[#155EFF]/8'
         onClick={showAutomaticTrue}>
-        <Generator className='w-4 h-4 text-primary-600' />
+        <Generator className='text-primary-600 h-4 w-4' />
       </ActionButton>
       {showAutomatic && (
         <GetAutomaticResModal
diff --git a/web/app/components/workflow/nodes/llm/components/resolution-picker.tsx b/web/app/components/workflow/nodes/llm/components/resolution-picker.tsx
index 76763de520..438b76ca74 100644
--- a/web/app/components/workflow/nodes/llm/components/resolution-picker.tsx
+++ b/web/app/components/workflow/nodes/llm/components/resolution-picker.tsx
@@ -25,7 +25,7 @@ const ResolutionPicker: FC<Props> = ({
   }, [onChange])
   return (
     <div className='flex items-center justify-between'>
-      <div className='mr-2 text-xs font-medium text-gray-500 uppercase'>{t(`${i18nPrefix}.resolution.name`)}</div>
+      <div className='mr-2 text-xs font-medium uppercase text-gray-500'>{t(`${i18nPrefix}.resolution.name`)}</div>
       <div className='flex items-center space-x-1'>
         <OptionCard
           title={t(`${i18nPrefix}.resolution.high`)}
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index cc0f1c18f4..d5d4ff27b8 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -124,7 +124,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
 
   return (
     <div className='mt-2'>
-      <div className='px-4 pb-4 space-y-4'>
+      <div className='space-y-4 px-4 pb-4'>
         <Field
           title={t(`${i18nPrefix}.model`)}
         >
@@ -159,7 +159,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
               filterVar={filterVar}
             />
             {shouldShowContextTip && (
-              <div className='leading-[18px] text-xs font-normal text-[#DC6803]'>{t(`${i18nPrefix}.notSetContextInPromptTip`)}</div>
+              <div className='text-xs font-normal leading-[18px] text-[#DC6803]'>{t(`${i18nPrefix}.notSetContextInPromptTip`)}</div>
             )}
           </>
         </Field>
@@ -204,21 +204,21 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
         {/* Memory put place examples. */}
         {isChatMode && isChatModel && !!inputs.memory && (
           <div className='mt-4'>
-            <div className='flex justify-between items-center h-8 pl-3 pr-2 rounded-lg bg-gray-100'>
+            <div className='flex h-8 items-center justify-between rounded-lg bg-gray-100 pl-3 pr-2'>
               <div className='flex items-center space-x-1'>
-                <div className='text-xs font-semibold text-gray-700 uppercase'>{t('workflow.nodes.common.memories.title')}</div>
+                <div className='text-xs font-semibold uppercase text-gray-700'>{t('workflow.nodes.common.memories.title')}</div>
                 <Tooltip
                   popupContent={t('workflow.nodes.common.memories.tip')}
                   triggerClassName='w-4 h-4'
                 />
               </div>
-              <div className='flex items-center h-[18px] px-1 rounded-[5px] border border-black/8 text-xs font-semibold text-gray-500 uppercase'>{t('workflow.nodes.common.memories.builtIn')}</div>
+              <div className='border-black/8 flex h-[18px] items-center rounded-[5px] border px-1 text-xs font-semibold uppercase text-gray-500'>{t('workflow.nodes.common.memories.builtIn')}</div>
             </div>
             {/* Readonly User Query */}
             <div className='mt-4'>
               <Editor
                 title={<div className='flex items-center space-x-1'>
-                  <div className='text-xs font-semibold text-gray-700 uppercase'>user</div>
+                  <div className='text-xs font-semibold uppercase text-gray-700'>user</div>
                   <Tooltip
                     popupContent={
                       <div className='max-w-[180px]'>{t('workflow.nodes.llm.roleDescription.user')}</div>
@@ -239,7 +239,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
               />
 
               {inputs.memory.query_prompt_template && !inputs.memory.query_prompt_template.includes('{{#sys.query#}}') && (
-                <div className='leading-[18px] text-xs font-normal text-[#DC6803]'>{t(`${i18nPrefix}.sysQueryInUser`)}</div>
+                <div className='text-xs font-normal leading-[18px] text-[#DC6803]'>{t(`${i18nPrefix}.sysQueryInUser`)}</div>
               )}
             </div>
           </div>
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx
index 76432b70ae..93a807c76e 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx
@@ -67,7 +67,7 @@ const ImportFromTool: FC<Props> = ({
     return (
       <div>
         <div className={cn(
-          'flex items-center h-6 px-2 cursor-pointer rounded-md hover:bg-gray-100 text-xs font-medium text-gray-500',
+          'flex h-6 cursor-pointer items-center rounded-md px-2 text-xs font-medium text-gray-500 hover:bg-gray-100',
           open && 'bg-gray-100',
         )}>
           {t(`${i18nPrefix}.importFromTool`)}
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/item.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/item.tsx
index ae249424dc..da47b5405e 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/item.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/item.tsx
@@ -24,36 +24,36 @@ const Item: FC<Props> = ({
   const { t } = useTranslation()
 
   return (
-    <div className='relative px-2.5 py-2 rounded-lg bg-white border-[0.5px] border-gray-200 hover:shadow-xs group'>
+    <div className='hover:shadow-xs group relative rounded-lg border-[0.5px] border-gray-200 bg-white px-2.5 py-2'>
       <div className='flex justify-between'>
         <div className='flex items-center'>
-          <Variable02 className='w-3.5 h-3.5 text-primary-500' />
+          <Variable02 className='text-primary-500 h-3.5 w-3.5' />
           <div className='ml-1 text-[13px] font-medium text-gray-900'>{payload.name}</div>
-          <div className='ml-2 text-xs font-normal text-gray-500 capitalize'>{payload.type}</div>
+          <div className='ml-2 text-xs font-normal capitalize text-gray-500'>{payload.type}</div>
         </div>
         {payload.required && (
-          <div className='uppercase leading-4 text-xs font-normal text-gray-500'>{t(`${i18nPrefix}.addExtractParameterContent.required`)}</div>
+          <div className='text-xs font-normal uppercase leading-4 text-gray-500'>{t(`${i18nPrefix}.addExtractParameterContent.required`)}</div>
         )}
       </div>
-      <div className='mt-0.5 leading-[18px] text-xs font-normal text-gray-500'>{payload.description}</div>
+      <div className='mt-0.5 text-xs font-normal leading-[18px] text-gray-500'>{payload.description}</div>
       <div
-        className='group-hover:flex absolute top-0 right-1 hidden h-full items-center w-[119px] justify-end space-x-1 rounded-lg'
+        className='absolute right-1 top-0 hidden h-full w-[119px] items-center justify-end space-x-1 rounded-lg group-hover:flex'
         style={{
           background: 'linear-gradient(270deg, #FFF 49.99%, rgba(255, 255, 255, 0.00) 98.1%)',
         }}
       >
         <div
-          className='p-1 cursor-pointer rounded-md hover:bg-black/5'
+          className='cursor-pointer rounded-md p-1 hover:bg-black/5'
           onClick={onEdit}
         >
-          <RiEditLine className='w-4 h-4 text-gray-500' />
+          <RiEditLine className='h-4 w-4 text-gray-500' />
         </div>
 
         <div
-          className='p-1 cursor-pointer rounded-md hover:bg-black/5'
+          className='cursor-pointer rounded-md p-1 hover:bg-black/5'
           onClick={onDelete}
         >
-          <RiDeleteBinLine className='w-4 h-4 text-gray-500' />
+          <RiDeleteBinLine className='h-4 w-4 text-gray-500' />
         </div>
       </div>
     </div>
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
index dbf0839ebf..fe20b2e1ca 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
@@ -171,7 +171,7 @@ const AddExtractParameter: FC<Props> = ({
               </Field>
               <Field title={t(`${i18nPrefix}.addExtractParameterContent.required`)}>
                 <>
-                  <div className='mb-1.5 leading-[18px] text-xs font-normal text-gray-500'>{t(`${i18nPrefix}.addExtractParameterContent.requiredContent`)}</div>
+                  <div className='mb-1.5 text-xs font-normal leading-[18px] text-gray-500'>{t(`${i18nPrefix}.addExtractParameterContent.requiredContent`)}</div>
                   <Switch size='l' defaultValue={param.required} onChange={handleParamChange('required')} />
                 </>
               </Field>
diff --git a/web/app/components/workflow/nodes/parameter-extractor/panel.tsx b/web/app/components/workflow/nodes/parameter-extractor/panel.tsx
index 183c940c2d..7fd324ca6f 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/panel.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/panel.tsx
@@ -69,7 +69,7 @@ const Panel: FC<NodePanelProps<ParameterExtractorNodeType>> = ({
 
   return (
     <div className='pt-2'>
-      <div className='px-4 space-y-4'>
+      <div className='space-y-4 px-4'>
         <Field
           title={t(`${i18nCommonPrefix}.model`)}
         >
@@ -121,7 +121,7 @@ const Panel: FC<NodePanelProps<ParameterExtractorNodeType>> = ({
                   {!readOnly && (
                     <ImportFromTool onImport={handleImportFromTool} />
                   )}
-                  {!readOnly && (<div className='w-px h-3 bg-gray-200'></div>)}
+                  {!readOnly && (<div className='h-3 w-px bg-gray-200'></div>)}
                   <AddExtractParameter type='add' onSave={addExtractParameter} />
                 </div>
               )
diff --git a/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx b/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx
index 11131645c6..e1e8564eaf 100644
--- a/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx
@@ -37,7 +37,7 @@ const ClassItem: FC<Props> = ({
       title={<div>
         <div className='w-[200px]'>
           <div
-            className='leading-4 text-xs font-semibold text-gray-700'
+            className='text-xs font-semibold leading-4 text-gray-700'
           >
             {`${t(`${i18nPrefix}.class`)} ${index}`}
           </div>
@@ -47,12 +47,12 @@ const ClassItem: FC<Props> = ({
       onChange={handleNameChange}
       placeholder={t(`${i18nPrefix}.topicPlaceholder`)!}
       headerRight={(
-        <div className='flex items-center h-full'>
+        <div className='flex h-full items-center'>
           <div className='text-xs font-medium text-gray-500'>{payload.name.length}</div>
           <div className='mx-3 h-3 w-px bg-gray-200'></div>
           {!readonly && (
             <RiDeleteBinLine
-              className='mr-1 w-3.5 h-3.5 text-gray-500 cursor-pointer'
+              className='mr-1 h-3.5 w-3.5 cursor-pointer text-gray-500'
               onClick={onRemove}
             />
           )}
diff --git a/web/app/components/workflow/nodes/question-classifier/panel.tsx b/web/app/components/workflow/nodes/question-classifier/panel.tsx
index 7d27a89d29..c137f6b0e9 100644
--- a/web/app/components/workflow/nodes/question-classifier/panel.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/panel.tsx
@@ -57,7 +57,7 @@ const Panel: FC<NodePanelProps<QuestionClassifierNodeType>> = ({
 
   return (
     <div className='pt-2'>
-      <div className='px-4 space-y-4'>
+      <div className='space-y-4 px-4'>
         <Field
           title={t(`${i18nPrefix}.model`)}
         >
diff --git a/web/app/components/workflow/nodes/start/components/var-item.tsx b/web/app/components/workflow/nodes/start/components/var-item.tsx
index dd9ac0c39d..5ece8c8591 100644
--- a/web/app/components/workflow/nodes/start/components/var-item.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-item.tsx
@@ -46,21 +46,21 @@ const VarItem: FC<Props> = ({
     hideEditVarModal()
   }, [onChange, hideEditVarModal])
   return (
-    <div ref={ref} className='flex items-center h-8 justify-between px-2.5 bg-white rounded-lg border border-gray-200 shadow-xs cursor-pointer hover:shadow-md'>
-      <div className='flex items-center space-x-1 grow w-0'>
-        <Variable02 className='w-3.5 h-3.5 text-primary-500' />
-        <div title={payload.variable} className='shrink-0 max-w-[130px] truncate text-[13px] font-medium text-gray-700'>{payload.variable}</div>
+    <div ref={ref} className='shadow-xs flex h-8 cursor-pointer items-center justify-between rounded-lg border border-gray-200 bg-white px-2.5 hover:shadow-md'>
+      <div className='flex w-0 grow items-center space-x-1'>
+        <Variable02 className='text-primary-500 h-3.5 w-3.5' />
+        <div title={payload.variable} className='max-w-[130px] shrink-0 truncate text-[13px] font-medium text-gray-700'>{payload.variable}</div>
         {payload.label && (<><div className='shrink-0 text-xs font-medium text-gray-400'>·</div>
           <div title={payload.label as string} className='max-w-[130px] truncate text-[13px] font-medium text-gray-500'>{payload.label as string}</div>
         </>)}
         {showLegacyBadge && (
           <Badge
             text='LEGACY'
-            className='shrink-0 border-text-accent-secondary text-text-accent-secondary'
+            className='border-text-accent-secondary text-text-accent-secondary shrink-0'
           />
         )}
       </div>
-      <div className='shrink-0 ml-2 flex items-center'>
+      <div className='ml-2 flex shrink-0 items-center'>
         {rightContent || (<>
           {(!isHovering || readonly)
             ? (
@@ -68,16 +68,16 @@ const VarItem: FC<Props> = ({
                 {payload.required && (
                   <div className='mr-2 text-xs font-normal text-gray-500'>{t('workflow.nodes.start.required')}</div>
                 )}
-                <InputVarTypeIcon type={payload.type} className='w-3.5 h-3.5 text-gray-500' />
+                <InputVarTypeIcon type={payload.type} className='h-3.5 w-3.5 text-gray-500' />
               </>
             )
             : (!readonly && (
               <>
-                <div onClick={showEditVarModal} className='mr-1 p-1 rounded-md cursor-pointer hover:bg-black/5'>
-                  <Edit03 className='w-4 h-4 text-gray-500' />
+                <div onClick={showEditVarModal} className='mr-1 cursor-pointer rounded-md p-1 hover:bg-black/5'>
+                  <Edit03 className='h-4 w-4 text-gray-500' />
                 </div>
-                <div onClick={onRemove} className='p-1 rounded-md cursor-pointer hover:bg-black/5'>
-                  <RiDeleteBinLine className='w-4 h-4 text-gray-500' />
+                <div onClick={onRemove} className='cursor-pointer rounded-md p-1 hover:bg-black/5'>
+                  <RiDeleteBinLine className='h-4 w-4 text-gray-500' />
                 </div>
               </>
             ))}
diff --git a/web/app/components/workflow/nodes/start/components/var-list.tsx b/web/app/components/workflow/nodes/start/components/var-list.tsx
index 90a7809f01..27eaa89973 100644
--- a/web/app/components/workflow/nodes/start/components/var-list.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-list.tsx
@@ -46,7 +46,7 @@ const VarList: FC<Props> = ({
 
   if (list.length === 0) {
     return (
-      <div className='flex rounded-md bg-gray-50 items-center h-[42px] justify-center leading-[18px] text-xs font-normal text-gray-500'>
+      <div className='flex h-[42px] items-center justify-center rounded-md bg-gray-50 text-xs font-normal leading-[18px] text-gray-500'>
         {t('workflow.nodes.start.noVarTip')}
       </div>
     )
diff --git a/web/app/components/workflow/nodes/start/node.tsx b/web/app/components/workflow/nodes/start/node.tsx
index 8a259ce29d..cc7968648e 100644
--- a/web/app/components/workflow/nodes/start/node.tsx
+++ b/web/app/components/workflow/nodes/start/node.tsx
@@ -20,15 +20,15 @@ const Node: FC<NodeProps<StartNodeType>> = ({
     <div className='mb-1 px-3 py-1'>
       <div className='space-y-0.5'>
         {variables.map(variable => (
-          <div key={variable.variable} className='flex items-center h-6 justify-between bg-gray-100 rounded-md  px-1 space-x-1 text-xs font-normal text-gray-700'>
-            <div className='w-0 grow flex items-center space-x-1'>
-              <Variable02 className='shrink-0 w-3.5 h-3.5 text-primary-500' />
+          <div key={variable.variable} className='flex h-6 items-center justify-between space-x-1 rounded-md  bg-gray-100 px-1 text-xs font-normal text-gray-700'>
+            <div className='flex w-0 grow items-center space-x-1'>
+              <Variable02 className='text-primary-500 h-3.5 w-3.5 shrink-0' />
               <span className='w-0 grow truncate text-xs font-normal text-gray-700'>{variable.variable}</span>
             </div>
 
             <div className='ml-1 flex items-center space-x-1'>
-              {variable.required && <span className='text-xs font-normal text-gray-500 uppercase'>{t(`${i18nPrefix}.required`)}</span>}
-              <InputVarTypeIcon type={variable.type} className='w-3 h-3 text-gray-500' />
+              {variable.required && <span className='text-xs font-normal uppercase text-gray-500'>{t(`${i18nPrefix}.required`)}</span>}
+              <InputVarTypeIcon type={variable.type} className='h-3 w-3 text-gray-500' />
             </div>
           </div>
         ))}
diff --git a/web/app/components/workflow/nodes/start/panel.tsx b/web/app/components/workflow/nodes/start/panel.tsx
index 3070945302..7c2f346cef 100644
--- a/web/app/components/workflow/nodes/start/panel.tsx
+++ b/web/app/components/workflow/nodes/start/panel.tsx
@@ -40,7 +40,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
 
   return (
     <div className='mt-2'>
-      <div className='px-4 pb-2 space-y-4'>
+      <div className='space-y-4 px-4 pb-2'>
         <Field
           title={t(`${i18nPrefix}.inputField`)}
           operations={
diff --git a/web/app/components/workflow/nodes/template-transform/panel.tsx b/web/app/components/workflow/nodes/template-transform/panel.tsx
index 2038eea62b..4d3cd5e495 100644
--- a/web/app/components/workflow/nodes/template-transform/panel.tsx
+++ b/web/app/components/workflow/nodes/template-transform/panel.tsx
@@ -49,7 +49,7 @@ const Panel: FC<NodePanelProps<TemplateTransformNodeType>> = ({
 
   return (
     <div className='mt-2'>
-      <div className='px-4 pb-4 space-y-4'>
+      <div className='space-y-4 px-4 pb-4'>
 
         <Field
           title={t(`${i18nPrefix}.inputVars`)}
@@ -81,13 +81,13 @@ const Panel: FC<NodePanelProps<TemplateTransformNodeType>> = ({
           headerRight={
             <div className='flex items-center'>
               <a
-                className='flex items-center space-x-0.5 h-[18px] text-xs font-normal text-gray-500'
+                className='flex h-[18px] items-center space-x-0.5 text-xs font-normal text-gray-500'
                 href="https://jinja.palletsprojects.com/en/3.1.x/templates/"
                 target='_blank'>
                 <span>{t(`${i18nPrefix}.codeSupportTip`)}</span>
-                <RiQuestionLine className='w-3 h-3' />
+                <RiQuestionLine className='h-3 w-3' />
               </a>
-              <div className='mx-1.5 w-px h-3 bg-gray-200'></div>
+              <div className='mx-1.5 h-3 w-px bg-gray-200'></div>
             </div>
           }
           value={inputs.template}
diff --git a/web/app/components/workflow/nodes/tool/components/input-var-list.tsx b/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
index d4cef82c43..84c0a386b4 100644
--- a/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
+++ b/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
@@ -171,14 +171,14 @@ const InputVarList: FC<Props> = ({
 
           return (
             <div key={variable} className='space-y-1'>
-              <div className='flex items-center h-[18px] space-x-2'>
+              <div className='flex h-[18px] items-center space-x-2'>
                 <span className='text-text-secondary code-sm-semibold'>{label[language] || label.en_US}</span>
                 <span className='text-text-tertiary system-xs-regular'>{paramType(type)}</span>
                 {required && <span className='text-util-colors-orange-dark-orange-dark-600 system-xs-regular'>Required</span>}
               </div>
               {isString && (
                 <Input
-                  className={cn(inputsIsFocus[variable] ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'rounded-lg px-3 py-[6px] border')}
+                  className={cn(inputsIsFocus[variable] ? 'shadow-xs border-gray-300 bg-gray-50' : 'border-gray-100 bg-gray-100', 'rounded-lg border px-3 py-[6px]')}
                   value={varInput?.value as string || ''}
                   onChange={handleMixedTypeChange(variable)}
                   readOnly={readOnly}
diff --git a/web/app/components/workflow/nodes/tool/node.tsx b/web/app/components/workflow/nodes/tool/node.tsx
index d7ed993aab..4a3469cc52 100644
--- a/web/app/components/workflow/nodes/tool/node.tsx
+++ b/web/app/components/workflow/nodes/tool/node.tsx
@@ -17,17 +17,17 @@ const Node: FC<NodeProps<ToolNodeType>> = ({
     <div className='mb-1 px-3 py-1'>
       <div className='space-y-0.5'>
         {toolConfigs.map((key, index) => (
-          <div key={index} className='flex items-center h-6 justify-between bg-gray-100 rounded-md  px-1 space-x-1 text-xs font-normal text-gray-700'>
-            <div title={key} className='max-w-[100px] shrink-0 truncate text-xs font-medium text-gray-500 uppercase'>
+          <div key={index} className='flex h-6 items-center justify-between space-x-1 rounded-md  bg-gray-100 px-1 text-xs font-normal text-gray-700'>
+            <div title={key} className='max-w-[100px] shrink-0 truncate text-xs font-medium uppercase text-gray-500'>
               {key}
             </div>
             {typeof tool_configurations[key] === 'string' && (
-              <div title={tool_configurations[key]} className='grow w-0 shrink-0 truncate text-right text-xs font-normal text-gray-700'>
+              <div title={tool_configurations[key]} className='w-0 shrink-0 grow truncate text-right text-xs font-normal text-gray-700'>
                 {tool_configurations[key]}
               </div>
             )}
             {typeof tool_configurations[key] !== 'string' && tool_configurations[key]?.type === FormTypeEnum.modelSelector && (
-              <div title={tool_configurations[key].model} className='grow w-0 shrink-0 truncate text-right text-xs font-normal text-gray-700'>
+              <div title={tool_configurations[key].model} className='w-0 shrink-0 grow truncate text-right text-xs font-normal text-gray-700'>
                 {tool_configurations[key].model}
               </div>
             )}
diff --git a/web/app/components/workflow/nodes/tool/panel.tsx b/web/app/components/workflow/nodes/tool/panel.tsx
index 93e2e9130f..efdb60c20d 100644
--- a/web/app/components/workflow/nodes/tool/panel.tsx
+++ b/web/app/components/workflow/nodes/tool/panel.tsx
@@ -82,7 +82,7 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
         </>
       )}
       {!isShowAuthBtn && <>
-        <div className='px-4 space-y-4'>
+        <div className='space-y-4 px-4'>
           {toolInputVarSchema.length > 0 && (
             <Field
               title={t(`${i18nPrefix}.inputVars`)}
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx b/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx
index 79c50afae7..fdf44899d0 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx
@@ -61,14 +61,14 @@ const AddVariable = ({
           <div
             className={cn(
               'group/addvariable flex items-center justify-center',
-              'w-4 h-4 cursor-pointer',
-              'hover:rounded-full hover:bg-primary-600',
-              open && '!rounded-full !bg-primary-600',
+              'h-4 w-4 cursor-pointer',
+              'hover:bg-primary-600 hover:rounded-full',
+              open && '!bg-primary-600 !rounded-full',
             )}
           >
             <Plus02
               className={cn(
-                'w-2.5 h-2.5 text-gray-500',
+                'h-2.5 w-2.5 text-gray-500',
                 'group-hover/addvariable:text-white',
                 open && '!text-white',
               )}
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx b/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx
index a58acb5e92..de1dc635b6 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx
@@ -81,17 +81,17 @@ const NodeGroupItem = ({
   return (
     <div
       className={cn(
-        'relative pt-1 px-1.5 pb-1.5 rounded-lg border-[1.5px] border-transparent',
-        showSelectionBorder && '!border-gray-300 !border-dashed bg-black/[0.02]',
+        'relative rounded-lg border-[1.5px] border-transparent px-1.5 pb-1.5 pt-1',
+        showSelectionBorder && '!border-dashed !border-gray-300 bg-black/[0.02]',
         showSelectedBorder && '!border-primary-600 !bg-primary-50',
       )}
       onMouseEnter={() => groupEnabled && handleGroupItemMouseEnter(item.targetHandleId)}
       onMouseLeave={handleGroupItemMouseLeave}
     >
-      <div className='flex items-center justify-between h-4 text-[10px] font-medium text-gray-500'>
+      <div className='flex h-4 items-center justify-between text-[10px] font-medium text-gray-500'>
         <span
           className={cn(
-            'grow uppercase truncate',
+            'grow truncate uppercase',
             showSelectedBorder && 'text-primary-600',
           )}
           title={item.title}
@@ -99,8 +99,8 @@ const NodeGroupItem = ({
           {item.title}
         </span>
         <div className='flex items-center'>
-          <span className='shrink-0 ml-2'>{item.type}</span>
-          <div className='ml-2 mr-1 w-[1px] h-2.5 bg-gray-200'></div>
+          <span className='ml-2 shrink-0'>{item.type}</span>
+          <div className='ml-2 mr-1 h-2.5 w-[1px] bg-gray-200'></div>
           <AddVariable
             availableVars={availableVars}
             variableAssignerNodeId={item.variableAssignerNodeId}
@@ -113,7 +113,7 @@ const NodeGroupItem = ({
         !item.variables.length && (
           <div
             className={cn(
-              'relative flex items-center px-1 h-[22px] justify-between bg-gray-100 rounded-md space-x-1 text-[10px] font-normal text-gray-400 uppercase',
+              'relative flex h-[22px] items-center justify-between space-x-1 rounded-md bg-gray-100 px-1 text-[10px] font-normal uppercase text-gray-400',
               (showSelectedBorder || showSelectionBorder) && '!bg-black/[0.02]',
             )}
           >
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx b/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx
index 8ccd976de6..e877e21c0e 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx
@@ -35,7 +35,7 @@ const NodeVariableItem = ({
   const { t } = useTranslation()
   return (
     <div className={cn(
-      'relative flex items-center p-[3px] pl-[5px] gap-1 self-stretch rounded-md bg-workflow-block-parma-bg',
+      'bg-workflow-block-parma-bg relative flex items-center gap-1 self-stretch rounded-md p-[3px] pl-[5px]',
       showBorder && '!bg-black/[0.02]',
       className,
     )}>
@@ -47,19 +47,19 @@ const NodeVariableItem = ({
               type={node?.data.type || BlockEnum.Start}
             />
           </div>
-          <div className='max-w-[85px] truncate mx-0.5 text-xs font-medium text-gray-700' title={node?.data.title}>{node?.data.title}</div>
+          <div className='mx-0.5 max-w-[85px] truncate text-xs font-medium text-gray-700' title={node?.data.title}>{node?.data.title}</div>
           <Line3 className='mr-0.5'></Line3>
         </div>
       )}
-      <div className='flex items-center text-primary-600 w-full'>
-        {!isEnv && !isChatVar && <Variable02 className={cn('shrink-0 w-3.5 h-3.5 text-primary-500', isException && 'text-text-warning')} />}
-        {isEnv && <Env className='shrink-0 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
-        {!isChatVar && <div className={cn('max-w-[75px] truncate ml-0.5 system-xs-medium overflow-hidden text-ellipsis', isEnv && 'text-gray-900', isException && 'text-text-warning')} title={varName}>{varName}</div>}
+      <div className='text-primary-600 flex w-full items-center'>
+        {!isEnv && !isChatVar && <Variable02 className={cn('text-primary-500 h-3.5 w-3.5 shrink-0', isException && 'text-text-warning')} />}
+        {isEnv && <Env className='text-util-colors-violet-violet-600 h-3.5 w-3.5 shrink-0' />}
+        {!isChatVar && <div className={cn('system-xs-medium ml-0.5 max-w-[75px] overflow-hidden truncate text-ellipsis', isEnv && 'text-gray-900', isException && 'text-text-warning')} title={varName}>{varName}</div>}
         {isChatVar
-          && <div className='flex items-center w-full gap-1'>
-            <div className='flex h-[18px] min-w-[18px] items-center gap-0.5 flex-1'>
-              <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />
-              <div className={cn('max-w-[75px] truncate ml-0.5 system-xs-medium overflow-hidden text-ellipsis text-util-colors-teal-teal-700')}>{varName}</div>
+          && <div className='flex w-full items-center gap-1'>
+            <div className='flex h-[18px] min-w-[18px] flex-1 items-center gap-0.5'>
+              <BubbleX className='text-util-colors-teal-teal-700 h-3.5 w-3.5' />
+              <div className={cn('system-xs-medium text-util-colors-teal-teal-700 ml-0.5 max-w-[75px] overflow-hidden truncate text-ellipsis')}>{varName}</div>
             </div>
             {writeMode && <Badge className='shrink-0' text={t(`${i18nPrefix}.operations.${writeMode}`)} />}
           </div>
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx b/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx
index e18327a472..ab62822bb4 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx
@@ -107,17 +107,17 @@ const VarGroupItem: FC<Props> = ({
       title={groupEnabled
         ? <div className='flex items-center'>
           <div className='flex items-center !normal-case'>
-            <Folder className='mr-0.5 w-3.5 h-3.5' />
+            <Folder className='mr-0.5 h-3.5 w-3.5' />
             {(!isEditGroupName)
               ? (
-                <div className='flex items-center h-6 px-1 rounded-lg cursor-text text-text-secondary system-sm-semibold hover:bg-gray-100' onClick={setEditGroupName}>
+                <div className='text-text-secondary system-sm-semibold flex h-6 cursor-text items-center rounded-lg px-1 hover:bg-gray-100' onClick={setEditGroupName}>
                   {payload.group_name}
                 </div>
               )
               : (
                 <input
                   type='text'
-                  className='h-6 px-1 rounded-lg bg-white border border-gray-300 focus:outline-none'
+                  className='h-6 rounded-lg border border-gray-300 bg-white px-1 focus:outline-none'
                   // style={{
                   //   width: `${((payload.group_name?.length || 0) + 1) / 2}em`,
                   // }}
@@ -132,20 +132,20 @@ const VarGroupItem: FC<Props> = ({
           </div>
           {canRemove && (
             <div
-              className='group-hover:block hidden ml-0.5 p-1 rounded-md text-gray-500 cursor-pointer hover:bg-[#FEE4E2] hover:text-[#D92D20]'
+              className='ml-0.5 hidden cursor-pointer rounded-md p-1 text-gray-500 hover:bg-[#FEE4E2] hover:text-[#D92D20] group-hover:block'
               onClick={onRemove}
             >
               <RiDeleteBinLine
-                className='w-4 h-4'
+                className='h-4 w-4'
               />
             </div>
           )}
         </div>
         : t(`${i18nPrefix}.title`)!}
       operations={
-        <div className='flex items-center h-6  space-x-2'>
+        <div className='flex h-6 items-center  space-x-2'>
           {payload.variables.length > 0 && (
-            <div className='flex items-center h-[18px] px-1 border border-divider-deep rounded-[5px] text-text-tertiary system-2xs-medium-uppercase'>{payload.output_type}</div>
+            <div className='border-divider-deep text-text-tertiary system-2xs-medium-uppercase flex h-[18px] items-center rounded-[5px] border px-1'>{payload.output_type}</div>
           )}
           {
             !readOnly
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/var-list/index.tsx b/web/app/components/workflow/nodes/variable-assigner/components/var-list/index.tsx
index 9afc4a0333..a89215b7cc 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/var-list/index.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/var-list/index.tsx
@@ -74,7 +74,7 @@ const VarList: FC<Props> = ({
           />
           {!readonly && (
             <RemoveButton
-              className='!p-2 !bg-gray-100 hover:!bg-gray-200'
+              className='!bg-gray-100 !p-2 hover:!bg-gray-200'
               onClick={handleVarRemove(index)}
             />
           )}
diff --git a/web/app/components/workflow/nodes/variable-assigner/node.tsx b/web/app/components/workflow/nodes/variable-assigner/node.tsx
index 326bd07ded..5246ba2a8a 100644
--- a/web/app/components/workflow/nodes/variable-assigner/node.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/node.tsx
@@ -43,7 +43,7 @@ const Node: FC<NodeProps<VariableAssignerNodeType>> = (props) => {
   }, [t, advanced_settings, data, id])
 
   return (
-    <div className='relative mb-1 px-1 space-y-0.5' ref={ref}>
+    <div className='relative mb-1 space-y-0.5 px-1' ref={ref}>
       {
         groups.map((item) => {
           return (
diff --git a/web/app/components/workflow/nodes/variable-assigner/panel.tsx b/web/app/components/workflow/nodes/variable-assigner/panel.tsx
index b25e2656ed..57ecfbb1ce 100644
--- a/web/app/components/workflow/nodes/variable-assigner/panel.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/panel.tsx
@@ -39,7 +39,7 @@ const Panel: FC<NodePanelProps<VariableAssignerNodeType>> = ({
 
   return (
     <div className='mt-2'>
-      <div className='px-4 pb-4 space-y-4'>
+      <div className='space-y-4 px-4 pb-4'>
         {!isEnableGroup
           ? (
             <VarGroupItem
@@ -99,7 +99,7 @@ const Panel: FC<NodePanelProps<VariableAssignerNodeType>> = ({
       {isEnableGroup && (
         <>
           <Split />
-          <div className='px-4 pt-4 pb-2'>
+          <div className='px-4 pb-2 pt-4'>
             <OutputVars>
               <>
                 {inputs.advanced_settings?.groups.map((item, index) => (
diff --git a/web/app/components/workflow/note-node/index.tsx b/web/app/components/workflow/note-node/index.tsx
index e1691bd08c..a8a366c357 100644
--- a/web/app/components/workflow/note-node/index.tsx
+++ b/web/app/components/workflow/note-node/index.tsx
@@ -61,7 +61,7 @@ const NoteNode = ({
   return (
     <div
       className={cn(
-        'flex flex-col relative rounded-md shadow-xs border hover:shadow-md',
+        'shadow-xs relative flex flex-col rounded-md border hover:shadow-md',
         THEME_MAP[theme].bg,
         data.selected ? THEME_MAP[theme].border : 'border-black/5',
       )}
@@ -85,7 +85,7 @@ const NoteNode = ({
           />
           <div
             className={cn(
-              'shrink-0 h-2 opacity-50 rounded-t-md',
+              'h-2 shrink-0 rounded-t-md opacity-50',
               THEME_MAP[theme].title,
             )}></div>
           {
@@ -103,7 +103,7 @@ const NoteNode = ({
               </div>
             )
           }
-          <div className='grow px-3 py-2.5 overflow-y-auto'>
+          <div className='grow overflow-y-auto px-3 py-2.5'>
             <div className={cn(
               data.selected && 'nodrag nopan nowheel cursor-text',
             )}>
@@ -116,7 +116,7 @@ const NoteNode = ({
           </div>
           {
             data.showAuthor && (
-              <div className='p-3 pt-0 text-xs text-text-tertiary'>
+              <div className='text-text-tertiary p-3 pt-0 text-xs'>
                 {data.author}
               </div>
             )
diff --git a/web/app/components/workflow/note-node/note-editor/editor.tsx b/web/app/components/workflow/note-node/note-editor/editor.tsx
index 2ab133557e..85a2353892 100644
--- a/web/app/components/workflow/note-node/note-editor/editor.tsx
+++ b/web/app/components/workflow/note-node/note-editor/editor.tsx
@@ -44,7 +44,7 @@ const Editor = ({
               onFocus={() => setShortcutsEnabled(false)}
               onBlur={() => setShortcutsEnabled(true)}
               spellCheck={false}
-              className='w-full h-full outline-none text-text-secondary caret-primary-600'
+              className='text-text-secondary caret-primary-600 h-full w-full outline-none'
               placeholder={placeholder}
             />
           </div>
diff --git a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
index 1bc8885933..e24661aaca 100644
--- a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
+++ b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
@@ -69,9 +69,9 @@ const LinkEditorComponent = ({
           <FloatingPortal root={containerElement}>
             <div
               className={cn(
-                'nodrag nopan inline-flex items-center w-max rounded-md border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg z-10',
+                'nodrag nopan border-components-actionbar-border bg-components-actionbar-bg z-10 inline-flex w-max items-center rounded-md border-[0.5px]',
                 !linkOperatorShow && 'p-1 shadow-md',
-                linkOperatorShow && 'p-0.5 shadow-sm system-xs-medium text-text-tertiary',
+                linkOperatorShow && 'system-xs-medium text-text-tertiary p-0.5 shadow-sm',
               )}
               style={floatingStyles}
               ref={refs.setFloating}
@@ -80,7 +80,7 @@ const LinkEditorComponent = ({
                 !linkOperatorShow && (
                   <>
                     <input
-                      className='mr-0.5 p-1 w-[196px] h-6 rounded-sm text-[13px] appearance-none outline-none bg-transparent text-components-input-text-filled'
+                      className='text-components-input-text-filled mr-0.5 h-6 w-[196px] appearance-none rounded-sm bg-transparent p-1 text-[13px] outline-none'
                       value={url}
                       onChange={e => setUrl(e.target.value)}
                       placeholder={t('workflow.nodes.note.editor.enterUrl') || ''}
@@ -101,12 +101,12 @@ const LinkEditorComponent = ({
                 linkOperatorShow && (
                   <>
                     <a
-                      className='flex items-center px-2 h-6 rounded-md hover:bg-state-base-hover'
+                      className='hover:bg-state-base-hover flex h-6 items-center rounded-md px-2'
                       href={escape(url)}
                       target='_blank'
                       rel='noreferrer'
                     >
-                      <RiExternalLinkLine className='mr-1 w-3 h-3' />
+                      <RiExternalLinkLine className='mr-1 h-3 w-3' />
                       <div className='mr-1'>
                         {t('workflow.nodes.note.editor.openLink')}
                       </div>
@@ -117,22 +117,22 @@ const LinkEditorComponent = ({
                         {escape(url)}
                       </div>
                     </a>
-                    <div className='mx-1 w-[1px] h-3.5 bg-divider-regular'></div>
+                    <div className='bg-divider-regular mx-1 h-3.5 w-[1px]'></div>
                     <div
-                      className='flex items-center mr-0.5 px-2 h-6 rounded-md cursor-pointer hover:bg-state-base-hover'
+                      className='hover:bg-state-base-hover mr-0.5 flex h-6 cursor-pointer items-center rounded-md px-2'
                       onClick={(e) => {
                         e.stopPropagation()
                         setLinkOperatorShow(false)
                       }}
                     >
-                      <RiEditLine className='mr-1 w-3 h-3' />
+                      <RiEditLine className='mr-1 h-3 w-3' />
                       {t('common.operation.edit')}
                     </div>
                     <div
-                      className='flex items-center px-2 h-6 rounded-md cursor-pointer hover:bg-state-base-hover'
+                      className='hover:bg-state-base-hover flex h-6 cursor-pointer items-center rounded-md px-2'
                       onClick={handleUnlink}
                     >
-                      <RiLinkUnlinkM className='mr-1 w-3 h-3' />
+                      <RiLinkUnlinkM className='mr-1 h-3 w-3' />
                       {t('workflow.nodes.note.editor.unlink')}
                     </div>
                   </>
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx
index 8da85ae548..ae46a6e67a 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx
@@ -63,24 +63,24 @@ const ColorPicker = ({
     >
       <PortalToFollowElemTrigger onClick={() => setOpen(!open)}>
         <div className={cn(
-          'flex items-center justify-center w-8 h-8 rounded-md cursor-pointer hover:bg-black/5',
+          'flex h-8 w-8 cursor-pointer items-center justify-center rounded-md hover:bg-black/5',
           open && 'bg-black/5',
         )}>
           <div
             className={cn(
-              'w-4 h-4 rounded-full border border-black/5',
+              'h-4 w-4 rounded-full border border-black/5',
               THEME_MAP[theme].title,
             )}
           ></div>
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent>
-        <div className='grid grid-cols-3 grid-rows-2 gap-0.5 p-0.5 rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-lg'>
+        <div className='border-components-actionbar-border bg-components-actionbar-bg grid grid-cols-3 grid-rows-2 gap-0.5 rounded-lg border-[0.5px] p-0.5 shadow-lg'>
           {
             COLOR_LIST.map(color => (
               <div
                 key={color.key}
-                className='group relative flex items-center justify-center w-8 h-8 rounded-md cursor-pointer'
+                className='group relative flex h-8 w-8 cursor-pointer items-center justify-center rounded-md'
                 onClick={(e) => {
                   e.stopPropagation()
                   onThemeChange(color.key)
@@ -89,13 +89,13 @@ const ColorPicker = ({
               >
                 <div
                   className={cn(
-                    'hidden group-hover:block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-5 h-5 rounded-full border-[1.5px]',
+                    'absolute left-1/2 top-1/2 hidden h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-[1.5px] group-hover:block',
                     color.outer,
                   )}
                 ></div>
                 <div
                   className={cn(
-                    'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full border border-black/5',
+                    'absolute left-1/2 top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border border-black/5',
                     color.inner,
                   )}
                 ></div>
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/command.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/command.tsx
index 43953cfe95..19cdc167f6 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/command.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/command.tsx
@@ -32,15 +32,15 @@ const Command = ({
   const icon = useMemo(() => {
     switch (type) {
       case 'bold':
-        return <RiBold className={cn('w-4 h-4', selectedIsBold && 'text-primary-600')} />
+        return <RiBold className={cn('h-4 w-4', selectedIsBold && 'text-primary-600')} />
       case 'italic':
-        return <RiItalic className={cn('w-4 h-4', selectedIsItalic && 'text-primary-600')} />
+        return <RiItalic className={cn('h-4 w-4', selectedIsItalic && 'text-primary-600')} />
       case 'strikethrough':
-        return <RiStrikethrough className={cn('w-4 h-4', selectedIsStrikeThrough && 'text-primary-600')} />
+        return <RiStrikethrough className={cn('h-4 w-4', selectedIsStrikeThrough && 'text-primary-600')} />
       case 'link':
-        return <RiLink className={cn('w-4 h-4', selectedIsLink && 'text-primary-600')} />
+        return <RiLink className={cn('h-4 w-4', selectedIsLink && 'text-primary-600')} />
       case 'bullet':
-        return <RiListUnordered className={cn('w-4 h-4', selectedIsBullet && 'text-primary-600')} />
+        return <RiListUnordered className={cn('h-4 w-4', selectedIsBullet && 'text-primary-600')} />
     }
   }, [type, selectedIsBold, selectedIsItalic, selectedIsStrikeThrough, selectedIsLink, selectedIsBullet])
 
@@ -65,7 +65,7 @@ const Command = ({
     >
       <div
         className={cn(
-          'flex items-center justify-center w-8 h-8 cursor-pointer rounded-md text-text-tertiary hover:text-text-accent hover:bg-state-accent-active',
+          'text-text-tertiary hover:text-text-accent hover:bg-state-accent-active flex h-8 w-8 cursor-pointer items-center justify-center rounded-md',
           type === 'bold' && selectedIsBold && 'bg-state-accent-active',
           type === 'italic' && selectedIsItalic && 'bg-state-accent-active',
           type === 'strikethrough' && selectedIsStrikeThrough && 'bg-state-accent-active',
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/divider.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/divider.tsx
index 740aa63c48..0db331336e 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/divider.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/divider.tsx
@@ -1,6 +1,6 @@
 const Divider = () => {
   return (
-    <div className='mx-1 w-[1px] h-3.5 bg-divider-regular'></div>
+    <div className='bg-divider-regular mx-1 h-3.5 w-[1px]'></div>
   )
 }
 
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx
index 6ceccdebbe..a42d8d09f4 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx
@@ -42,20 +42,20 @@ const FontSizeSelector = () => {
     >
       <PortalToFollowElemTrigger onClick={() => handleOpenFontSizeSelector(!fontSizeSelectorShow)}>
         <div className={cn(
-          'flex items-center pl-2 pr-1.5 h-8 rounded-md text-[13px] font-medium text-text-tertiary hover:text-text-secondary cursor-pointer hover:bg-state-base-hover',
+          'text-text-tertiary hover:text-text-secondary hover:bg-state-base-hover flex h-8 cursor-pointer items-center rounded-md pl-2 pr-1.5 text-[13px] font-medium',
           fontSizeSelectorShow && 'bg-state-base-hover text-text-secondary',
         )}>
-          <RiFontSize className='mr-1 w-4 h-4' />
+          <RiFontSize className='mr-1 h-4 w-4' />
           {FONT_SIZE_LIST.find(font => font.key === fontSize)?.value || t('workflow.nodes.note.editor.small')}
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent>
-        <div className='p-1 w-[120px] bg-components-panel-bg-blur border-[0.5px] border-components-panel-border rounded-md shadow-xl text-text-secondary'>
+        <div className='bg-components-panel-bg-blur border-components-panel-border text-text-secondary w-[120px] rounded-md border-[0.5px] p-1 shadow-xl'>
           {
             FONT_SIZE_LIST.map(font => (
               <div
                 key={font.key}
-                className='flex items-center justify-between pl-3 pr-2 h-8 rounded-md cursor-pointer hover:bg-state-base-hover'
+                className='hover:bg-state-base-hover flex h-8 cursor-pointer items-center justify-between rounded-md pl-3 pr-2'
                 onClick={(e) => {
                   e.stopPropagation()
                   handleFontSize(font.key)
@@ -69,7 +69,7 @@ const FontSizeSelector = () => {
                 </div>
                 {
                   fontSize === font.key && (
-                    <Check className='w-4 h-4 text-text-accent' />
+                    <Check className='text-text-accent h-4 w-4' />
                   )
                 }
               </div>
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/index.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/index.tsx
index d9e327ae0c..42bf20030e 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/index.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/index.tsx
@@ -18,7 +18,7 @@ const Toolbar = ({
   onShowAuthorChange,
 }: ToolbarProps) => {
   return (
-    <div className='inline-flex items-center p-0.5 bg-components-actionbar-bg rounded-lg border-[0.5px] border-components-actionbar-border shadow-sm'>
+    <div className='bg-components-actionbar-bg border-components-actionbar-border inline-flex items-center rounded-lg border-[0.5px] p-0.5 shadow-sm'>
       <ColorPicker
         theme={theme}
         onThemeChange={onThemeChange}
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
index 4439b006cd..c8eb98216a 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
@@ -40,18 +40,18 @@ const Operator = ({
       <PortalToFollowElemTrigger onClick={() => setOpen(!open)}>
         <div
           className={cn(
-            'flex items-center justify-center w-8 h-8 cursor-pointer rounded-lg text-text-tertiary hover:text-text-secondary hover:bg-state-base-hover',
+            'text-text-tertiary hover:text-text-secondary hover:bg-state-base-hover flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg',
             open && 'bg-state-base-hover text-text-secondary',
           )}
         >
-          <RiMoreFill className='w-4 h-4' />
+          <RiMoreFill className='h-4 w-4' />
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent>
-        <div className='min-w-[192px] bg-components-panel-bg-blur rounded-md border-[0.5px] border-components-panel-border shadow-xl'>
+        <div className='bg-components-panel-bg-blur border-components-panel-border min-w-[192px] rounded-md border-[0.5px] shadow-xl'>
           <div className='p-1'>
             <div
-              className='flex items-center justify-between px-3 h-8 cursor-pointer rounded-md text-sm text-text-secondary hover:bg-state-base-hover'
+              className='text-text-secondary hover:bg-state-base-hover flex h-8 cursor-pointer items-center justify-between rounded-md px-3 text-sm'
               onClick={() => {
                 onCopy()
                 setOpen(false)
@@ -61,7 +61,7 @@ const Operator = ({
               <ShortcutsName keys={['ctrl', 'c']} />
             </div>
             <div
-              className='flex items-center justify-between px-3 h-8 cursor-pointer rounded-md text-sm text-text-secondary hover:bg-state-base-hover'
+              className='text-text-secondary hover:bg-state-base-hover flex h-8 cursor-pointer items-center justify-between rounded-md px-3 text-sm'
               onClick={() => {
                 onDuplicate()
                 setOpen(false)
@@ -71,10 +71,10 @@ const Operator = ({
               <ShortcutsName keys={['ctrl', 'd']} />
             </div>
           </div>
-          <div className='h-[1px] bg-divider-subtle'></div>
+          <div className='bg-divider-subtle h-[1px]'></div>
           <div className='p-1'>
             <div
-              className='flex items-center justify-between px-3 h-8 cursor-pointer rounded-md text-sm text-text-secondary hover:bg-state-base-hover'
+              className='text-text-secondary hover:bg-state-base-hover flex h-8 cursor-pointer items-center justify-between rounded-md px-3 text-sm'
               onClick={e => e.stopPropagation()}
             >
               <div>{t('workflow.nodes.note.editor.showAuthor')}</div>
@@ -85,10 +85,10 @@ const Operator = ({
               />
             </div>
           </div>
-          <div className='h-[1px] bg-divider-subtle'></div>
+          <div className='bg-divider-subtle h-[1px]'></div>
           <div className='p-1'>
             <div
-              className='flex items-center justify-between px-3 h-8 cursor-pointer rounded-md text-sm text-text-secondary hover:text-text-destructive hover:bg-state-destructive-hover'
+              className='text-text-secondary hover:text-text-destructive hover:bg-state-destructive-hover flex h-8 cursor-pointer items-center justify-between rounded-md px-3 text-sm'
               onClick={() => {
                 onDelete()
                 setOpen(false)
diff --git a/web/app/components/workflow/operator/add-block.tsx b/web/app/components/workflow/operator/add-block.tsx
index 32f0007293..57b16d6e06 100644
--- a/web/app/components/workflow/operator/add-block.tsx
+++ b/web/app/components/workflow/operator/add-block.tsx
@@ -78,11 +78,11 @@ const AddBlock = ({
         title={t('workflow.common.addBlock')}
       >
         <div className={cn(
-          'flex items-center justify-center w-8 h-8 rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary cursor-pointer',
-          `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
+          'text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg',
+          `${nodesReadOnly && 'text-text-disabled hover:text-text-disabled cursor-not-allowed hover:bg-transparent'}`,
           open && 'bg-state-accent-active text-text-accent',
         )}>
-          <RiAddCircleFill className='w-4 h-4' />
+          <RiAddCircleFill className='h-4 w-4' />
         </div>
       </TipPopup>
     )
diff --git a/web/app/components/workflow/operator/control.tsx b/web/app/components/workflow/operator/control.tsx
index cd18def056..37d3ff9d98 100644
--- a/web/app/components/workflow/operator/control.tsx
+++ b/web/app/components/workflow/operator/control.tsx
@@ -44,54 +44,54 @@ const Control = () => {
   }
 
   return (
-    <div className='flex items-center p-0.5 rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-lg text-text-tertiary'>
+    <div className='border-components-actionbar-border bg-components-actionbar-bg text-text-tertiary flex items-center rounded-lg border-[0.5px] p-0.5 shadow-lg'>
       <AddBlock />
       <TipPopup title={t('workflow.nodes.note.addNote')}>
         <div
           className={cn(
-            'flex items-center justify-center ml-[1px] w-8 h-8 rounded-lg hover:bg-state-base-hover hover:text-text-secondary cursor-pointer',
-            `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
+            'hover:bg-state-base-hover hover:text-text-secondary ml-[1px] flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg',
+            `${nodesReadOnly && 'text-text-disabled hover:text-text-disabled cursor-not-allowed hover:bg-transparent'}`,
           )}
           onClick={addNote}
         >
-          <RiStickyNoteAddLine className='w-4 h-4' />
+          <RiStickyNoteAddLine className='h-4 w-4' />
         </div>
       </TipPopup>
-      <Divider type='vertical' className='h-3.5 mx-0.5' />
+      <Divider type='vertical' className='mx-0.5 h-3.5' />
       <TipPopup title={t('workflow.common.pointerMode')} shortcuts={['v']}>
         <div
           className={cn(
-            'flex items-center justify-center mr-[1px] w-8 h-8 rounded-lg cursor-pointer',
+            'mr-[1px] flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg',
             controlMode === ControlMode.Pointer ? 'bg-state-accent-active text-text-accent' : 'hover:bg-state-base-hover hover:text-text-secondary',
-            `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
+            `${nodesReadOnly && 'text-text-disabled hover:text-text-disabled cursor-not-allowed hover:bg-transparent'}`,
           )}
           onClick={handleModePointer}
         >
-          <RiCursorLine className='w-4 h-4' />
+          <RiCursorLine className='h-4 w-4' />
         </div>
       </TipPopup>
       <TipPopup title={t('workflow.common.handMode')} shortcuts={['h']}>
         <div
           className={cn(
-            'flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer',
+            'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg',
             controlMode === ControlMode.Hand ? 'bg-state-accent-active text-text-accent' : 'hover:bg-state-base-hover hover:text-text-secondary',
-            `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
+            `${nodesReadOnly && 'text-text-disabled hover:text-text-disabled cursor-not-allowed hover:bg-transparent'}`,
           )}
           onClick={handleModeHand}
         >
-          <RiHand className='w-4 h-4' />
+          <RiHand className='h-4 w-4' />
         </div>
       </TipPopup>
-      <Divider type='vertical' className='h-3.5 mx-0.5' />
+      <Divider type='vertical' className='mx-0.5 h-3.5' />
       <TipPopup title={t('workflow.panel.organizeBlocks')} shortcuts={['ctrl', 'o']}>
         <div
           className={cn(
-            'flex items-center justify-center w-8 h-8 rounded-lg hover:bg-state-base-hover hover:text-text-secondary cursor-pointer',
-            `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
+            'hover:bg-state-base-hover hover:text-text-secondary flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg',
+            `${nodesReadOnly && 'text-text-disabled hover:text-text-disabled cursor-not-allowed hover:bg-transparent'}`,
           )}
           onClick={handleLayout}
         >
-          <RiFunctionAddLine className='w-4 h-4' />
+          <RiFunctionAddLine className='h-4 w-4' />
         </div>
       </TipPopup>
     </div>
diff --git a/web/app/components/workflow/operator/index.tsx b/web/app/components/workflow/operator/index.tsx
index 39b39f8cc6..a87c8061f0 100644
--- a/web/app/components/workflow/operator/index.tsx
+++ b/web/app/components/workflow/operator/index.tsx
@@ -20,10 +20,10 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
           height: 72,
         }}
         maskColor='var(--color-workflow-minimap-bg)'
-        className='!absolute !left-4 !bottom-14 z-[9] !m-0 !w-[102px] !h-[72px] !border-[0.5px] !border-divider-subtle
-        !rounded-lg !shadow-md !shadow-shadow-shadow-5 !bg-background-default-subtle'
+        className='!border-divider-subtle !shadow-shadow-shadow-5 !bg-background-default-subtle !absolute !bottom-14 !left-4 z-[9] !m-0 !h-[72px]
+        !w-[102px] !rounded-lg !border-[0.5px] !shadow-md'
       />
-      <div className='flex items-center mt-1 gap-2 absolute left-4 bottom-4 z-[9]'>
+      <div className='absolute bottom-4 left-4 z-[9] mt-1 flex items-center gap-2'>
         <ZoomInOut />
         <UndoRedo handleUndo={handleUndo} handleRedo={handleRedo} />
         <Control />
diff --git a/web/app/components/workflow/operator/tip-popup.tsx b/web/app/components/workflow/operator/tip-popup.tsx
index 85e9a50a51..867a206d4f 100644
--- a/web/app/components/workflow/operator/tip-popup.tsx
+++ b/web/app/components/workflow/operator/tip-popup.tsx
@@ -17,7 +17,7 @@ const TipPopup = ({
       offset={4}
       popupClassName='p-0 bg-transparent'
       popupContent={
-        <div className='flex items-center gap-1 p-1.5 backdrop-blur-[5px] shadow-lg rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg'>
+        <div className='border-components-panel-border bg-components-tooltip-bg flex items-center gap-1 rounded-lg border-[0.5px] p-1.5 shadow-lg backdrop-blur-[5px]'>
           <span className='system-xs-medium text-text-secondary'>{title}</span>
           {
             shortcuts && <ShortcutsName keys={shortcuts} />
diff --git a/web/app/components/workflow/operator/zoom-in-out.tsx b/web/app/components/workflow/operator/zoom-in-out.tsx
index 90b5b46256..6967aa6e2f 100644
--- a/web/app/components/workflow/operator/zoom-in-out.tsx
+++ b/web/app/components/workflow/operator/zoom-in-out.tsx
@@ -131,20 +131,20 @@ const ZoomInOut: FC = () => {
     >
       <PortalToFollowElemTrigger asChild>
         <div className={`
-          p-0.5 h-9 cursor-pointer text-[13px] backdrop-blur-[5px] rounded-lg
-          bg-components-actionbar-bg shadow-lg border-[0.5px] border-components-actionbar-border 
-          hover:bg-state-base-hover
+          bg-components-actionbar-bg border-components-actionbar-border hover:bg-state-base-hover h-9 cursor-pointer rounded-lg
+          border-[0.5px] p-0.5 text-[13px] shadow-lg 
+          backdrop-blur-[5px]
           ${workflowReadOnly && '!cursor-not-allowed opacity-50'}
         `}>
           <div className={cn(
-            'flex items-center justify-between w-[98px] h-8 rounded-lg',
+            'flex h-8 w-[98px] items-center justify-between rounded-lg',
           )}>
             <TipPopup
               title={t('workflow.operator.zoomOut')}
               shortcuts={['ctrl', '-']}
             >
               <div
-                className={`flex items-center justify-center w-8 h-8 rounded-lg ${zoom <= 0.25 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
+                className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom <= 0.25 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
                 onClick={(e) => {
                   if (zoom <= 0.25)
                     return
@@ -153,16 +153,16 @@ const ZoomInOut: FC = () => {
                   zoomOut()
                 }}
               >
-                <RiZoomOutLine className='w-4 h-4 text-text-tertiary hover:text-text-secondary' />
+                <RiZoomOutLine className='text-text-tertiary hover:text-text-secondary h-4 w-4' />
               </div>
             </TipPopup>
-            <div onClick={handleTrigger} className={cn('w-[34px] system-sm-medium text-text-tertiary hover:text-text-secondary')}>{parseFloat(`${zoom * 100}`).toFixed(0)}%</div>
+            <div onClick={handleTrigger} className={cn('system-sm-medium text-text-tertiary hover:text-text-secondary w-[34px]')}>{parseFloat(`${zoom * 100}`).toFixed(0)}%</div>
             <TipPopup
               title={t('workflow.operator.zoomIn')}
               shortcuts={['ctrl', '+']}
             >
               <div
-                className={`flex items-center justify-center w-8 h-8 rounded-lg ${zoom >= 2 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
+                className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom >= 2 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
                 onClick={(e) => {
                   if (zoom >= 2)
                     return
@@ -171,14 +171,14 @@ const ZoomInOut: FC = () => {
                   zoomIn()
                 }}
               >
-                <RiZoomInLine className='w-4 h-4 text-text-tertiary hover:text-text-secondary' />
+                <RiZoomInLine className='text-text-tertiary hover:text-text-secondary h-4 w-4' />
               </div>
             </TipPopup>
           </div>
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-10'>
-        <div className='w-[145px] backdrop-blur-[5px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
+        <div className='border-components-panel-border bg-components-panel-bg-blur w-[145px] rounded-xl border-[0.5px] shadow-lg backdrop-blur-[5px]'>
           {
             ZOOM_IN_OUT_OPTIONS.map((options, i) => (
               <Fragment key={i}>
@@ -192,7 +192,7 @@ const ZoomInOut: FC = () => {
                     options.map(option => (
                       <div
                         key={option.key}
-                        className='flex items-center justify-between space-x-1 py-1.5 pl-3 pr-2 h-8 rounded-lg hover:bg-state-base-hover cursor-pointer system-md-regular text-text-secondary'
+                        className='hover:bg-state-base-hover system-md-regular text-text-secondary flex h-8 cursor-pointer items-center justify-between space-x-1 rounded-lg py-1.5 pl-3 pr-2'
                         onClick={() => handleZoom(option.key)}
                       >
                         <span>{option.text}</span>
diff --git a/web/app/components/workflow/panel-contextmenu.tsx b/web/app/components/workflow/panel-contextmenu.tsx
index 8ed0e10dca..abee153aed 100644
--- a/web/app/components/workflow/panel-contextmenu.tsx
+++ b/web/app/components/workflow/panel-contextmenu.tsx
@@ -42,7 +42,7 @@ const PanelContextmenu = () => {
   const renderTrigger = () => {
     return (
       <div
-        className='flex items-center justify-between px-3 h-8 text-sm text-text-secondary rounded-lg cursor-pointer hover:bg-state-base-hover'
+        className='text-text-secondary hover:bg-state-base-hover flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm'
       >
         {t('workflow.common.addBlock')}
       </div>
@@ -54,7 +54,7 @@ const PanelContextmenu = () => {
 
   return (
     <div
-      className='absolute w-[200px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg z-[9]'
+      className='border-components-panel-border bg-components-panel-bg-blur absolute z-[9] w-[200px] rounded-lg border-[0.5px] shadow-lg'
       style={{
         left: panelMenu.left,
         top: panelMenu.top,
@@ -70,7 +70,7 @@ const PanelContextmenu = () => {
           }}
         />
         <div
-          className='flex items-center justify-between px-3 h-8 text-sm text-text-secondary rounded-lg cursor-pointer hover:bg-state-base-hover'
+          className='text-text-secondary hover:bg-state-base-hover flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm'
           onClick={(e) => {
             e.stopPropagation()
             handleAddNote()
@@ -80,7 +80,7 @@ const PanelContextmenu = () => {
           {t('workflow.nodes.note.addNote')}
         </div>
         <div
-          className='flex items-center justify-between px-3 h-8 text-sm text-text-secondary rounded-lg cursor-pointer hover:bg-state-base-hover'
+          className='text-text-secondary hover:bg-state-base-hover flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm'
           onClick={() => {
             handleStartWorkflowRun()
             handlePaneContextmenuCancel()
@@ -94,8 +94,8 @@ const PanelContextmenu = () => {
       <div className='p-1'>
         <div
           className={cn(
-            'flex items-center justify-between px-3 h-8 text-sm text-text-secondary rounded-lg cursor-pointer',
-            !clipboardElements.length ? 'opacity-50 cursor-not-allowed' : 'hover:bg-state-base-hover',
+            'text-text-secondary flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm',
+            !clipboardElements.length ? 'cursor-not-allowed opacity-50' : 'hover:bg-state-base-hover',
           )}
           onClick={() => {
             if (clipboardElements.length) {
@@ -111,13 +111,13 @@ const PanelContextmenu = () => {
       <Divider className='m-0' />
       <div className='p-1'>
         <div
-          className='flex items-center justify-between px-3 h-8 text-sm text-text-secondary rounded-lg cursor-pointer hover:bg-state-base-hover'
+          className='text-text-secondary hover:bg-state-base-hover flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm'
           onClick={() => exportCheck()}
         >
           {t('app.export')}
         </div>
         <div
-          className='flex items-center justify-between px-3 h-8 text-sm text-text-secondary rounded-lg cursor-pointer hover:bg-state-base-hover'
+          className='text-text-secondary hover:bg-state-base-hover flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm'
           onClick={() => setShowImportDSLModal(true)}
         >
           {t('workflow.common.importDSL')}
diff --git a/web/app/components/workflow/panel/chat-record/index.tsx b/web/app/components/workflow/panel/chat-record/index.tsx
index 2c76e89b0c..9527e1a60b 100644
--- a/web/app/components/workflow/panel/chat-record/index.tsx
+++ b/web/app/components/workflow/panel/chat-record/index.tsx
@@ -87,32 +87,32 @@ const ChatRecord = () => {
   return (
     <div
       className={`
-        flex flex-col w-[420px] rounded-l-2xl h-full border border-black/2 shadow-xl
+        border-black/2 flex h-full w-[420px] flex-col rounded-l-2xl border shadow-xl
       `}
       style={{
         background: 'linear-gradient(156deg, rgba(242, 244, 247, 0.80) 0%, rgba(242, 244, 247, 0.00) 99.43%), var(--white, #FFF)',
       }}
     >
       {!fetched && (
-        <div className='flex items-center justify-center h-full'>
+        <div className='flex h-full items-center justify-center'>
           <Loading />
         </div>
       )}
       {fetched && (
         <>
-          <div className='shrink-0 flex items-center justify-between p-4 pb-1 text-base font-semibold text-gray-900'>
+          <div className='flex shrink-0 items-center justify-between p-4 pb-1 text-base font-semibold text-gray-900'>
             {`TEST CHAT#${historyWorkflowData?.sequence_number}`}
             <div
-              className='flex justify-center items-center w-6 h-6 cursor-pointer'
+              className='flex h-6 w-6 cursor-pointer items-center justify-center'
               onClick={() => {
                 handleLoadBackupDraft()
                 workflowStore.setState({ historyWorkflowData: undefined })
               }}
             >
-              <RiCloseLine className='w-4 h-4 text-gray-500' />
+              <RiCloseLine className='h-4 w-4 text-gray-500' />
             </div>
           </div>
-          <div className='grow h-0'>
+          <div className='h-0 grow'>
             <Chat
               config={{
                 supportCitationHitInfo: true,
diff --git a/web/app/components/workflow/panel/chat-record/user-input.tsx b/web/app/components/workflow/panel/chat-record/user-input.tsx
index 077f2acb67..6559e60c0d 100644
--- a/web/app/components/workflow/panel/chat-record/user-input.tsx
+++ b/web/app/components/workflow/panel/chat-record/user-input.tsx
@@ -17,22 +17,22 @@ const UserInput = () => {
     <div
       className={`
         rounded-xl border
-        ${!expanded ? 'bg-indigo-25 border-indigo-100 shadow-none' : 'bg-white shadow-xs border-transparent'}
+        ${!expanded ? 'bg-indigo-25 border-indigo-100 shadow-none' : 'shadow-xs border-transparent bg-white'}
       `}
     >
       <div
         className={`
-          flex items-center px-2 pt-4 h-[18px] text-[13px] font-semibold cursor-pointer
+          flex h-[18px] cursor-pointer items-center px-2 pt-4 text-[13px] font-semibold
           ${!expanded ? 'text-indigo-800' : 'text-gray-800'}
         `}
         onClick={() => setExpanded(!expanded)}
       >
         <RiArrowDownSLine
-          className={`mr-1 w-3 h-3 ${!expanded ? '-rotate-90 text-indigo-600' : 'text-gray-300'}`}
+          className={`mr-1 h-3 w-3 ${!expanded ? '-rotate-90 text-indigo-600' : 'text-gray-300'}`}
         />
         {t('workflow.panel.userInputField').toLocaleUpperCase()}
       </div>
-      <div className='px-2 pt-1 pb-3'>
+      <div className='px-2 pb-3 pt-1'>
         {
           expanded && (
             <div className='py-2 text-[13px] text-gray-900'>
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx
index b2bfd2a218..74b41c6f7c 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx
@@ -57,13 +57,13 @@ const ArrayValueList: FC<Props> = ({
             type={isString ? 'text' : 'number'}
           />
           <RemoveButton
-            className='!p-2 !bg-gray-100 hover:!bg-gray-200'
+            className='!bg-gray-100 !p-2 hover:!bg-gray-200'
             onClick={handleItemRemove(index)}
           />
         </div>
       ))}
       <Button variant='tertiary' className='w-full' onClick={handleItemAdd}>
-        <RiAddLine className='mr-1 w-4 h-4' />
+        <RiAddLine className='mr-1 h-4 w-4' />
         <span>{t('workflow.chatVariable.modal.addArrayValue')}</span>
       </Button>
     </div>
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx
index 6bbdeae08b..bc3f7e2f52 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx
@@ -95,7 +95,7 @@ const ObjectValueItem: FC<Props> = ({
       {/* Key */}
       <div className='w-[120px] border-r border-gray-200'>
         <input
-          className='block px-2 w-full h-7 text-text-secondary system-xs-regular appearance-none outline-none caret-primary-600 hover:bg-state-base-hover focus:bg-components-input-bg-active  placeholder:system-xs-regular placeholder:text-components-input-text-placeholder'
+          className='text-text-secondary system-xs-regular caret-primary-600 hover:bg-state-base-hover focus:bg-components-input-bg-active placeholder:system-xs-regular placeholder:text-components-input-text-placeholder block h-7 w-full appearance-none  px-2 outline-none'
           placeholder={t('workflow.chatVariable.modal.objectKey') || ''}
           value={list[index].key}
           onChange={handleKeyChange(index)}
@@ -114,7 +114,7 @@ const ObjectValueItem: FC<Props> = ({
       {/* Value */}
       <div className='relative w-[230px]'>
         <input
-          className='block px-2 w-full h-7 text-text-secondary system-xs-regular appearance-none outline-none caret-primary-600 hover:bg-state-base-hover focus:bg-components-input-bg-active  placeholder:system-xs-regular placeholder:text-components-input-text-placeholder'
+          className='text-text-secondary system-xs-regular caret-primary-600 hover:bg-state-base-hover focus:bg-components-input-bg-active placeholder:system-xs-regular placeholder:text-components-input-text-placeholder block h-7 w-full appearance-none  px-2 outline-none'
           placeholder={t('workflow.chatVariable.modal.objectValue') || ''}
           value={list[index].value}
           onChange={handleValueChange(index)}
@@ -124,7 +124,7 @@ const ObjectValueItem: FC<Props> = ({
         />
         {list.length > 1 && !isFocus && (
           <RemoveButton
-            className='z-10 group-hover:block hidden absolute right-1 top-0.5'
+            className='absolute right-1 top-0.5 z-10 hidden group-hover:block'
             onClick={handleItemRemove(index)}
           />
         )}
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/object-value-list.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/object-value-list.tsx
index ec287accba..79a959362c 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/object-value-list.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/object-value-list.tsx
@@ -16,11 +16,11 @@ const ObjectValueList: FC<Props> = ({
   const { t } = useTranslation()
 
   return (
-    <div className='w-full border border-gray-200 rounded-lg overflow-hidden'>
-      <div className='flex items-center h-7 system-xs-medium text-text-tertiary uppercase'>
-        <div className='w-[120px] flex items-center h-full pl-2 border-r border-gray-200'>{t('workflow.chatVariable.modal.objectKey')}</div>
-        <div className='w-[96px] flex items-center h-full pl-2 border-r border-gray-200'>{t('workflow.chatVariable.modal.objectType')}</div>
-        <div className='w-[230px] flex items-center h-full pl-2 pr-1'>{t('workflow.chatVariable.modal.objectValue')}</div>
+    <div className='w-full overflow-hidden rounded-lg border border-gray-200'>
+      <div className='system-xs-medium text-text-tertiary flex h-7 items-center uppercase'>
+        <div className='flex h-full w-[120px] items-center border-r border-gray-200 pl-2'>{t('workflow.chatVariable.modal.objectKey')}</div>
+        <div className='flex h-full w-[96px] items-center border-r border-gray-200 pl-2'>{t('workflow.chatVariable.modal.objectType')}</div>
+        <div className='flex h-full w-[230px] items-center pl-2 pr-1'>{t('workflow.chatVariable.modal.objectValue')}</div>
       </div>
       {list.map((item, index) => (
         <ObjectValueItem
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx
index a1a7c9dc3d..299161ff21 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx
@@ -19,25 +19,25 @@ const VariableItem = ({
   const [destructive, setDestructive] = useState(false)
   return (
     <div className={cn(
-      'mb-1 px-2.5 py-2 bg-components-panel-on-panel-item-bg radius-md border border-components-panel-border-subtle shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
+      'bg-components-panel-on-panel-item-bg radius-md border-components-panel-border-subtle shadow-xs hover:bg-components-panel-on-panel-item-bg-hover mb-1 border px-2.5 py-2',
       destructive && 'border-state-destructive-border hover:bg-state-destructive-hover',
     )}>
       <div className='flex items-center justify-between'>
-        <div className='grow flex gap-1 items-center'>
-          <BubbleX className='w-4 h-4 text-util-colors-teal-teal-700' />
+        <div className='flex grow items-center gap-1'>
+          <BubbleX className='text-util-colors-teal-teal-700 h-4 w-4' />
           <div className='text-text-primary system-sm-medium'>{item.name}</div>
           <div className='text-text-tertiary system-xs-medium'>{capitalize(item.value_type)}</div>
         </div>
-        <div className='shrink-0 flex gap-1 items-center text-text-tertiary'>
-          <div className='p-1 radius-md cursor-pointer hover:bg-state-base-hover hover:text-text-secondary'>
-            <RiEditLine className='w-4 h-4' onClick={() => onEdit(item)}/>
+        <div className='text-text-tertiary flex shrink-0 items-center gap-1'>
+          <div className='radius-md hover:bg-state-base-hover hover:text-text-secondary cursor-pointer p-1'>
+            <RiEditLine className='h-4 w-4' onClick={() => onEdit(item)}/>
           </div>
           <div
-            className='p-1 radius-md cursor-pointer hover:bg-state-destructive-hover hover:text-text-destructive'
+            className='radius-md hover:bg-state-destructive-hover hover:text-text-destructive cursor-pointer p-1'
             onMouseOver={() => setDestructive(true)}
             onMouseOut={() => setDestructive(false)}
           >
-            <RiDeleteBinLine className='w-4 h-4' onClick={() => onDelete(item)}/>
+            <RiDeleteBinLine className='h-4 w-4' onClick={() => onDelete(item)}/>
           </div>
         </div>
       </div>
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx
index 35d5254327..07eb79a269 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx
@@ -48,7 +48,7 @@ const VariableModalTrigger = ({
         open && onClose()
       }}>
         <Button variant='primary'>
-          <RiAddLine className='mr-1 w-4 h-4' />
+          <RiAddLine className='mr-1 h-4 w-4' />
           <span className='system-sm-medium'>{t('workflow.chatVariable.button')}</span>
         </Button>
       </PortalToFollowElemTrigger>
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
index 3c983cd364..003d034c6b 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
@@ -254,23 +254,23 @@ const ChatVariableModal = ({
 
   return (
     <div
-      className={cn('flex flex-col w-[360px] bg-components-panel-bg rounded-2xl h-full border-[0.5px] border-components-panel-border shadow-2xl', type === ChatVarType.Object && 'w-[480px]')}
+      className={cn('bg-components-panel-bg border-components-panel-border flex h-full w-[360px] flex-col rounded-2xl border-[0.5px] shadow-2xl', type === ChatVarType.Object && 'w-[480px]')}
     >
-      <div className='shrink-0 flex items-center justify-between mb-3 p-4 pb-0 text-text-primary system-xl-semibold'>
+      <div className='text-text-primary system-xl-semibold mb-3 flex shrink-0 items-center justify-between p-4 pb-0'>
         {!chatVar ? t('workflow.chatVariable.modal.title') : t('workflow.chatVariable.modal.editTitle')}
         <div className='flex items-center'>
           <div
-            className='flex items-center justify-center w-6 h-6 cursor-pointer'
+            className='flex h-6 w-6 cursor-pointer items-center justify-center'
             onClick={onClose}
           >
-            <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+            <RiCloseLine className='text-text-tertiary h-4 w-4' />
           </div>
         </div>
       </div>
-      <div className='px-4 py-2 max-h-[480px] overflow-y-auto'>
+      <div className='max-h-[480px] overflow-y-auto px-4 py-2'>
         {/* name */}
         <div className='mb-4'>
-          <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.chatVariable.modal.name')}</div>
+          <div className='text-text-secondary system-sm-semibold mb-1 flex h-6 items-center'>{t('workflow.chatVariable.modal.name')}</div>
           <div className='flex'>
             <Input
               placeholder={t('workflow.chatVariable.modal.namePlaceholder') || ''}
@@ -283,7 +283,7 @@ const ChatVariableModal = ({
         </div>
         {/* type */}
         <div className='mb-4'>
-          <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.chatVariable.modal.type')}</div>
+          <div className='text-text-secondary system-sm-semibold mb-1 flex h-6 items-center'>{t('workflow.chatVariable.modal.type')}</div>
           <div className='flex'>
             <VariableTypeSelector
               value={type}
@@ -295,7 +295,7 @@ const ChatVariableModal = ({
         </div>
         {/* default value */}
         <div className='mb-4'>
-          <div className='mb-1 h-6 flex items-center justify-between text-text-secondary system-sm-semibold'>
+          <div className='text-text-secondary system-sm-semibold mb-1 flex h-6 items-center justify-between'>
             <div>{t('workflow.chatVariable.modal.value')}</div>
             {(type === ChatVarType.ArrayString || type === ChatVarType.ArrayNumber) && (
               <Button
@@ -304,7 +304,7 @@ const ChatVariableModal = ({
                 className='text-text-tertiary'
                 onClick={() => handleEditorChange(!editInJSON)}
               >
-                {editInJSON ? <RiInputField className='mr-1 w-3.5 h-3.5' /> : <RiDraftLine className='mr-1 w-3.5 h-3.5' />}
+                {editInJSON ? <RiInputField className='mr-1 h-3.5 w-3.5' /> : <RiDraftLine className='mr-1 h-3.5 w-3.5' />}
                 {editInJSON ? t('workflow.chatVariable.modal.oneByOne') : t('workflow.chatVariable.modal.editInJSON')}
               </Button>
             )}
@@ -315,7 +315,7 @@ const ChatVariableModal = ({
                 className='text-text-tertiary'
                 onClick={() => handleEditorChange(!editInJSON)}
               >
-                {editInJSON ? <RiInputField className='mr-1 w-3.5 h-3.5' /> : <RiDraftLine className='mr-1 w-3.5 h-3.5' />}
+                {editInJSON ? <RiInputField className='mr-1 h-3.5 w-3.5' /> : <RiDraftLine className='mr-1 h-3.5 w-3.5' />}
                 {editInJSON ? t('workflow.chatVariable.modal.editInForm') : t('workflow.chatVariable.modal.editInJSON')}
               </Button>
             )}
@@ -357,7 +357,7 @@ const ChatVariableModal = ({
               />
             )}
             {editInJSON && (
-              <div className='w-full py-2 pl-3 pr-1 rounded-[10px] bg-components-input-bg-normal' style={{ height: editorMinHeight }}>
+              <div className='bg-components-input-bg-normal w-full rounded-[10px] py-2 pl-3 pr-1' style={{ height: editorMinHeight }}>
                 <CodeEditor
                   isExpand
                   noWrapper
@@ -372,10 +372,10 @@ const ChatVariableModal = ({
         </div>
         {/* description */}
         <div className=''>
-          <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.chatVariable.modal.description')}</div>
+          <div className='text-text-secondary system-sm-semibold mb-1 flex h-6 items-center'>{t('workflow.chatVariable.modal.description')}</div>
           <div className='flex'>
             <textarea
-              className='block p-2 w-full h-20 rounded-lg bg-components-input-bg-normal border border-transparent system-sm-regular outline-none appearance-none caret-primary-600 resize-none hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:system-sm-regular placeholder:text-components-input-text-placeholder'
+              className='bg-components-input-bg-normal system-sm-regular caret-primary-600 hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:system-sm-regular placeholder:text-components-input-text-placeholder block h-20 w-full resize-none appearance-none rounded-lg border border-transparent p-2 outline-none'
               value={des}
               placeholder={t('workflow.chatVariable.modal.descriptionPlaceholder') || ''}
               onChange={e => setDes(e.target.value)}
@@ -383,7 +383,7 @@ const ChatVariableModal = ({
           </div>
         </div>
       </div>
-      <div className='p-4 pt-2 flex flex-row-reverse rounded-b-2xl'>
+      <div className='flex flex-row-reverse rounded-b-2xl p-4 pt-2'>
         <div className='flex gap-2'>
           <Button onClick={onClose}>{t('common.operation.cancel')}</Button>
           <Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx
index 94a319514a..a6960a5d05 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx
@@ -33,28 +33,28 @@ const VariableTypeSelector = ({
     >
       <PortalToFollowElemTrigger className='w-full' onClick={() => setOpen(v => !v)}>
         <div className={cn(
-          'flex items-center w-full px-2 cursor-pointer',
-          !inCell && 'py-1 bg-components-input-bg-normal hover:bg-state-base-hover-alt radius-md',
-          inCell && 'py-0.5 hover:bg-state-base-hover',
+          'flex w-full cursor-pointer items-center px-2',
+          !inCell && 'bg-components-input-bg-normal hover:bg-state-base-hover-alt radius-md py-1',
+          inCell && 'hover:bg-state-base-hover py-0.5',
           open && !inCell && 'bg-state-base-hover-alt hover:bg-state-base-hover-alt',
           open && inCell && 'bg-state-base-hover hover:bg-state-base-hover',
         )}>
           <div className={cn(
-            'grow p-1 system-sm-regular text-components-input-text-filled truncate',
+            'system-sm-regular text-components-input-text-filled grow truncate p-1',
             inCell && 'system-xs-regular text-text-secondary',
           )}>{value}</div>
-          <RiArrowDownSLine className='ml-0.5 w-4 h-4 text-text-quaternary' />
+          <RiArrowDownSLine className='text-text-quaternary ml-0.5 h-4 w-4' />
         </div>
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className={cn('w-full z-[11]', popupClassName)}>
-        <div className='p-1 bg-components-panel-bg-blur border-[0.5px] border-components-panel-border radius-xl shadow-lg'>
+      <PortalToFollowElemContent className={cn('z-[11] w-full', popupClassName)}>
+        <div className='bg-components-panel-bg-blur border-components-panel-border radius-xl border-[0.5px] p-1 shadow-lg'>
           {list.map((item: any) => (
-            <div key={item} className='flex items-center gap-2 pl-3 pr-2 py-[6px] radius-md cursor-pointer hover:bg-state-base-hover' onClick={() => {
+            <div key={item} className='radius-md hover:bg-state-base-hover flex cursor-pointer items-center gap-2 py-[6px] pl-3 pr-2' onClick={() => {
               onSelect(item)
               setOpen(false)
             }}>
-              <div className='grow system-md-regular text-text-secondary truncate'>{item}</div>
-              {value === item && <RiCheckLine className='w-4 h-4 text-text-accent' />}
+              <div className='system-md-regular text-text-secondary grow truncate'>{item}</div>
+              {value === item && <RiCheckLine className='text-text-accent h-4 w-4' />}
             </div>
           ))}
         </div>
diff --git a/web/app/components/workflow/panel/chat-variable-panel/index.tsx b/web/app/components/workflow/panel/chat-variable-panel/index.tsx
index 2e03f501d3..24d99cd233 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/index.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/index.tsx
@@ -116,61 +116,61 @@ const ChatVariablePanel = () => {
   return (
     <div
       className={cn(
-        'relative flex flex-col w-[420px] bg-components-panel-bg-alt rounded-l-2xl h-full border border-components-panel-border',
+        'bg-components-panel-bg-alt border-components-panel-border relative flex h-full w-[420px] flex-col rounded-l-2xl border',
       )}
     >
-      <div className='shrink-0 flex items-center justify-between p-4 pb-0 text-text-primary system-xl-semibold'>
+      <div className='text-text-primary system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0'>
         {t('workflow.chatVariable.panelTitle')}
         <div className='flex items-center gap-1'>
           <ActionButton state={showTip ? ActionButtonState.Active : undefined} onClick={() => setShowTip(!showTip)}>
-            <RiBookOpenLine className='w-4 h-4' />
+            <RiBookOpenLine className='h-4 w-4' />
           </ActionButton>
           <div
-            className='flex items-center justify-center w-6 h-6 cursor-pointer'
+            className='flex h-6 w-6 cursor-pointer items-center justify-center'
             onClick={() => setShowChatVariablePanel(false)}
           >
-            <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+            <RiCloseLine className='text-text-tertiary h-4 w-4' />
           </div>
         </div>
       </div>
       {showTip && (
-        <div className='shrink-0 px-3 pt-2.5 pb-2'>
-          <div className='relative p-3 radius-2xl bg-background-section-burn'>
-            <div className='inline-block py-[3px] px-[5px] rounded-[5px] border border-divider-deep text-text-tertiary system-2xs-medium-uppercase'>TIPS</div>
-            <div className='mt-1 mb-4 system-sm-regular text-text-secondary'>
+        <div className='shrink-0 px-3 pb-2 pt-2.5'>
+          <div className='radius-2xl bg-background-section-burn relative p-3'>
+            <div className='border-divider-deep text-text-tertiary system-2xs-medium-uppercase inline-block rounded-[5px] border px-[5px] py-[3px]'>TIPS</div>
+            <div className='system-sm-regular text-text-secondary mb-4 mt-1'>
               {t('workflow.chatVariable.panelDescription')}
               <a target='_blank' rel='noopener noreferrer' className='text-text-accent' href={locale !== LanguagesSupported[1] ? 'https://docs.dify.ai/guides/workflow/variables#conversation-variables' : `https://docs.dify.ai/${locale.toLowerCase()}/guides/workflow/variables#hui-hua-bian-liang`}>{t('workflow.chatVariable.docLink')}</a>
             </div>
             <div className='flex items-center gap-2'>
-              <div className='flex flex-col p-3 pb-4 bg-workflow-block-bg radius-lg border border-workflow-block-border shadow-md'>
-                <BubbleX className='shrink-0 mb-1 w-4 h-4 text-util-colors-teal-teal-700' />
+              <div className='bg-workflow-block-bg radius-lg border-workflow-block-border flex flex-col border p-3 pb-4 shadow-md'>
+                <BubbleX className='text-util-colors-teal-teal-700 mb-1 h-4 w-4 shrink-0' />
                 <div className='text-text-secondary system-xs-semibold'>conversation_var</div>
                 <div className='text-text-tertiary system-2xs-regular'>String</div>
               </div>
               <div className='grow'>
                 <div className='mb-2 flex items-center gap-2 py-1'>
-                  <div className='shrink-0 flex items-center gap-1 w-16 h-3 px-1'>
-                    <LongArrowLeft className='grow h-2 text-text-quaternary' />
-                    <div className='shrink-0 text-text-tertiary system-2xs-medium'>WRITE</div>
+                  <div className='flex h-3 w-16 shrink-0 items-center gap-1 px-1'>
+                    <LongArrowLeft className='text-text-quaternary h-2 grow' />
+                    <div className='text-text-tertiary system-2xs-medium shrink-0'>WRITE</div>
                   </div>
                   <BlockIcon className='shrink-0' type={BlockEnum.Assigner} />
-                  <div className='grow text-text-secondary system-xs-semibold truncate'>{t('workflow.blocks.assigner')}</div>
+                  <div className='text-text-secondary system-xs-semibold grow truncate'>{t('workflow.blocks.assigner')}</div>
                 </div>
                 <div className='flex items-center gap-2 py-1'>
-                  <div className='shrink-0 flex items-center gap-1 w-16 h-3 px-1'>
-                    <div className='shrink-0 text-text-tertiary system-2xs-medium'>READ</div>
-                    <LongArrowRight className='grow h-2 text-text-quaternary' />
+                  <div className='flex h-3 w-16 shrink-0 items-center gap-1 px-1'>
+                    <div className='text-text-tertiary system-2xs-medium shrink-0'>READ</div>
+                    <LongArrowRight className='text-text-quaternary h-2 grow' />
                   </div>
                   <BlockIcon className='shrink-0' type={BlockEnum.LLM} />
-                  <div className='grow text-text-secondary system-xs-semibold truncate'>{t('workflow.blocks.llm')}</div>
+                  <div className='text-text-secondary system-xs-semibold grow truncate'>{t('workflow.blocks.llm')}</div>
                 </div>
               </div>
             </div>
-            <div className='absolute z-10 top-[-4px] right-[38px] w-3 h-3 bg-background-section-burn rotate-45'/>
+            <div className='bg-background-section-burn absolute right-[38px] top-[-4px] z-10 h-3 w-3 rotate-45'/>
           </div>
         </div>
       )}
-      <div className='shrink-0 px-4 pt-2 pb-3'>
+      <div className='shrink-0 px-4 pb-3 pt-2'>
         <VariableModalTrigger
           open={showVariableModal}
           setOpen={setShowVariableModal}
@@ -180,7 +180,7 @@ const ChatVariablePanel = () => {
           onClose={() => setCurrentVar(undefined)}
         />
       </div>
-      <div className='grow px-4 rounded-b-2xl overflow-y-auto'>
+      <div className='grow overflow-y-auto rounded-b-2xl px-4'>
         {varList.map(chatVar => (
           <VariableItem
             key={chatVar.id}
diff --git a/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx b/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
index e60c8afac9..25bbc52fab 100644
--- a/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
@@ -77,54 +77,54 @@ const ConversationVariableModal = ({
     <Modal
       isShow
       onClose={() => { }}
-      className={cn('w-[920px] max-w-[920px] h-[640px] p-0')}
+      className={cn('h-[640px] w-[920px] max-w-[920px] p-0')}
     >
-      <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onHide}>
-        <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+      <div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onHide}>
+        <RiCloseLine className='text-text-tertiary h-4 w-4' />
       </div>
-      <div className='w-full h-full flex'>
+      <div className='flex h-full w-full'>
         {/* LEFT */}
-        <div className='shrink-0 flex flex-col w-[224px] h-full bg-background-sidenav-bg border-r border-divider-burn'>
-          <div className='shrink-0 pt-5 pl-5 pr-4 pb-3 text-text-primary system-xl-semibold'>{t('workflow.chatVariable.panelTitle')}</div>
+        <div className='bg-background-sidenav-bg border-divider-burn flex h-full w-[224px] shrink-0 flex-col border-r'>
+          <div className='text-text-primary system-xl-semibold shrink-0 pb-3 pl-5 pr-4 pt-5'>{t('workflow.chatVariable.panelTitle')}</div>
           <div className='grow overflow-y-auto px-3 py-2'>
             {varList.map(chatVar => (
-              <div key={chatVar.id} className={cn('group mb-0.5 p-2 flex items-center radius-md hover:bg-state-base-hover cursor-pointer', currentVar.id === chatVar.id && 'bg-state-base-hover')} onClick={() => setCurrentVar(chatVar)}>
-                <BubbleX className={cn('shrink-0 mr-1 w-4 h-4 text-text-tertiary group-hover:text-util-colors-teal-teal-700', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')} />
-                <div title={chatVar.name} className={cn('text-text-tertiary system-sm-medium truncate group-hover:text-util-colors-teal-teal-700', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')}>{chatVar.name}</div>
+              <div key={chatVar.id} className={cn('radius-md hover:bg-state-base-hover group mb-0.5 flex cursor-pointer items-center p-2', currentVar.id === chatVar.id && 'bg-state-base-hover')} onClick={() => setCurrentVar(chatVar)}>
+                <BubbleX className={cn('text-text-tertiary group-hover:text-util-colors-teal-teal-700 mr-1 h-4 w-4 shrink-0', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')} />
+                <div title={chatVar.name} className={cn('text-text-tertiary system-sm-medium group-hover:text-util-colors-teal-teal-700 truncate', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')}>{chatVar.name}</div>
               </div>
             ))}
           </div>
         </div>
         {/* RIGHT */}
-        <div className='grow flex flex-col w-0 h-full bg-components-panel-bg'>
+        <div className='bg-components-panel-bg flex h-full w-0 grow flex-col'>
           <div className='shrink-0 p-4 pb-2'>
             <div className='flex items-center gap-1 py-1'>
               <div className='text-text-primary system-xl-semibold'>{currentVar.name}</div>
               <div className='text-text-tertiary system-xs-medium'>{capitalize(currentVar.value_type)}</div>
             </div>
           </div>
-          <div className='grow p-4 pt-2 flex flex-col h-0'>
-            <div className='shrink-0 mb-2 flex items-center gap-2'>
-              <div className='shrink-0 text-text-tertiary system-xs-medium-uppercase'>{t('workflow.chatVariable.storedContent').toLocaleUpperCase()}</div>
-              <div className='grow h-[1px]' style={{
+          <div className='flex h-0 grow flex-col p-4 pt-2'>
+            <div className='mb-2 flex shrink-0 items-center gap-2'>
+              <div className='text-text-tertiary system-xs-medium-uppercase shrink-0'>{t('workflow.chatVariable.storedContent').toLocaleUpperCase()}</div>
+              <div className='h-[1px] grow' style={{
                 background: 'linear-gradient(to right, rgba(16, 24, 40, 0.08) 0%, rgba(255, 255, 255) 100%)',
               }}></div>
               {latestValueTimestampMap[currentVar.id] && (
-                <div className='shrink-0 text-text-tertiary system-xs-regular'>{t('workflow.chatVariable.updatedAt')}{formatTime(latestValueTimestampMap[currentVar.id], t('appLog.dateTimeFormat') as string)}</div>
+                <div className='text-text-tertiary system-xs-regular shrink-0'>{t('workflow.chatVariable.updatedAt')}{formatTime(latestValueTimestampMap[currentVar.id], t('appLog.dateTimeFormat') as string)}</div>
               )}
             </div>
             <div className='grow overflow-y-auto'>
               {currentVar.value_type !== ChatVarType.Number && currentVar.value_type !== ChatVarType.String && (
-                <div className='h-full flex flex-col bg-components-input-bg-normal rounded-lg px-2 pb-2'>
-                  <div className='shrink-0 flex justify-between items-center h-7 pt-1 pl-3 pr-2'>
+                <div className='bg-components-input-bg-normal flex h-full flex-col rounded-lg px-2 pb-2'>
+                  <div className='flex h-7 shrink-0 items-center justify-between pl-3 pr-2 pt-1'>
                     <div className='text-text-secondary system-xs-semibold'>JSON</div>
                     <div className='flex items-center p-1'>
                       {!isCopied
                         ? (
-                          <Clipboard className='w-4 h-4 text-text-tertiary cursor-pointer' onClick={handleCopy} />
+                          <Clipboard className='text-text-tertiary h-4 w-4 cursor-pointer' onClick={handleCopy} />
                         )
                         : (
-                          <ClipboardCheck className='w-4 h-4 text-text-tertiary' />
+                          <ClipboardCheck className='text-text-tertiary h-4 w-4' />
                         )
                       }
                     </div>
@@ -142,7 +142,7 @@ const ConversationVariableModal = ({
                 </div>
               )}
               {(currentVar.value_type === ChatVarType.Number || currentVar.value_type === ChatVarType.String) && (
-                <div className='h-full px-4 py-3 rounded-lg bg-components-input-bg-normal text-components-input-text-filled system-md-regular overflow-y-auto overflow-x-hidden'>{latestValueMap[currentVar.id] || ''}</div>
+                <div className='bg-components-input-bg-normal text-components-input-text-filled system-md-regular h-full overflow-y-auto overflow-x-hidden rounded-lg px-4 py-3'>{latestValueMap[currentVar.id] || ''}</div>
               )}
             </div>
           </div>
diff --git a/web/app/components/workflow/panel/debug-and-preview/empty.tsx b/web/app/components/workflow/panel/debug-and-preview/empty.tsx
index 61c7c6f3a1..7f120c3536 100644
--- a/web/app/components/workflow/panel/debug-and-preview/empty.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/empty.tsx
@@ -6,8 +6,8 @@ const Empty = () => {
 
   return (
     <div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
-      <div className='flex justify-center mb-2'>
-        <ChatBotSlim className='w-12 h-12 text-gray-300' />
+      <div className='mb-2 flex justify-center'>
+        <ChatBotSlim className='h-12 w-12 text-gray-300' />
       </div>
       <div className='w-[256px] text-center text-[13px] text-gray-400'>
         {t('workflow.common.previewPlaceholder')}
diff --git a/web/app/components/workflow/panel/debug-and-preview/index.tsx b/web/app/components/workflow/panel/debug-and-preview/index.tsx
index ae4eca6bb3..89b557c412 100644
--- a/web/app/components/workflow/panel/debug-and-preview/index.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/index.tsx
@@ -54,17 +54,17 @@ const DebugAndPreview = () => {
   return (
     <div
       className={cn(
-        'flex flex-col w-[420px] bg-chatbot-bg rounded-l-2xl h-full border border-components-panel-border border-r-0 shadow-xl',
+        'bg-chatbot-bg border-components-panel-border flex h-full w-[420px] flex-col rounded-l-2xl border border-r-0 shadow-xl',
       )}
     >
-      <div className='shrink-0 flex items-center justify-between px-4 pt-3 pb-2 text-text-primary system-xl-semibold'>
+      <div className='text-text-primary system-xl-semibold flex shrink-0 items-center justify-between px-4 pb-2 pt-3'>
         <div className='h-8'>{t('workflow.common.debugAndPreview').toLocaleUpperCase()}</div>
         <div className='flex items-center gap-1'>
           <Tooltip
             popupContent={t('common.operation.refresh')}
           >
             <ActionButton onClick={() => handleRestartChat()}>
-              <RefreshCcw01 className='w-4 h-4' />
+              <RefreshCcw01 className='h-4 w-4' />
             </ActionButton>
           </Tooltip>
           {varList.length > 0 && (
@@ -72,7 +72,7 @@ const DebugAndPreview = () => {
               popupContent={t('workflow.chatVariable.panelTitle')}
             >
               <ActionButton onClick={() => setShowConversationVariableModal(true)}>
-                <BubbleX className='w-4 h-4' />
+                <BubbleX className='h-4 w-4' />
               </ActionButton>
             </Tooltip>
           )}
@@ -82,22 +82,22 @@ const DebugAndPreview = () => {
                 popupContent={t('workflow.panel.userInputField')}
               >
                 <ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => setExpanded(!expanded)}>
-                  <RiEqualizer2Line className='w-4 h-4' />
+                  <RiEqualizer2Line className='h-4 w-4' />
                 </ActionButton>
               </Tooltip>
-              {expanded && <div className='absolute z-10 bottom-[-17px] right-[5px] w-3 h-3 bg-components-panel-on-panel-item-bg border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle rotate-45' />}
+              {expanded && <div className='bg-components-panel-on-panel-item-bg border-components-panel-border-subtle absolute bottom-[-17px] right-[5px] z-10 h-3 w-3 rotate-45 border-l-[0.5px] border-t-[0.5px]' />}
             </div>
           )}
-          <div className='mx-3 w-[1px] h-3.5 bg-gray-200'></div>
+          <div className='mx-3 h-3.5 w-[1px] bg-gray-200'></div>
           <div
-            className='flex items-center justify-center w-6 h-6 cursor-pointer'
+            className='flex h-6 w-6 cursor-pointer items-center justify-center'
             onClick={handleCancelDebugAndPreviewPanel}
           >
-            <RiCloseLine className='w-4 h-4 text-gray-500' />
+            <RiCloseLine className='h-4 w-4 text-gray-500' />
           </div>
         </div>
       </div>
-      <div className='grow rounded-b-2xl overflow-y-auto'>
+      <div className='grow overflow-y-auto rounded-b-2xl'>
         <ChatWrapper
           ref={chatRef}
           showConversationVariableModal={showConversationVariableModal}
diff --git a/web/app/components/workflow/panel/debug-and-preview/user-input.tsx b/web/app/components/workflow/panel/debug-and-preview/user-input.tsx
index 5383fb6f0c..f256e6860a 100644
--- a/web/app/components/workflow/panel/debug-and-preview/user-input.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/user-input.tsx
@@ -33,8 +33,8 @@ const UserInput = () => {
     return null
 
   return (
-    <div className={cn('sticky top-0 bg-components-panel-on-panel-item-bg rounded-xl border-[0.5px] border-components-panel-border-subtle shadow-xs z-[1]')}>
-      <div className='px-4 pt-3 pb-4'>
+    <div className={cn('bg-components-panel-on-panel-item-bg border-components-panel-border-subtle shadow-xs sticky top-0 z-[1] rounded-xl border-[0.5px]')}>
+      <div className='px-4 pb-4 pt-3'>
         {variables.map((variable, index) => (
           <div
             key={variable.variable}
diff --git a/web/app/components/workflow/panel/env-panel/env-item.tsx b/web/app/components/workflow/panel/env-panel/env-item.tsx
index f7c028389e..d20e1ec784 100644
--- a/web/app/components/workflow/panel/env-panel/env-item.tsx
+++ b/web/app/components/workflow/panel/env-panel/env-item.tsx
@@ -22,26 +22,26 @@ const EnvItem = ({
 
   return (
     <div className={cn(
-      'mb-1 px-2.5 py-2 bg-components-panel-on-panel-item-bg radius-md border border-components-panel-border-subtle shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
+      'bg-components-panel-on-panel-item-bg radius-md border-components-panel-border-subtle shadow-xs hover:bg-components-panel-on-panel-item-bg-hover mb-1 border px-2.5 py-2',
       destructive && 'border-state-destructive-border hover:bg-state-destructive-hover',
     )}>
       <div className='flex items-center justify-between'>
-        <div className='grow flex gap-1 items-center'>
-          <Env className='w-4 h-4 text-util-colors-violet-violet-600' />
+        <div className='flex grow items-center gap-1'>
+          <Env className='text-util-colors-violet-violet-600 h-4 w-4' />
           <div className='text-text-primary system-sm-medium'>{env.name}</div>
           <div className='text-text-tertiary system-xs-medium'>{capitalize(env.value_type)}</div>
-          {env.value_type === 'secret' && <RiLock2Line className='w-3 h-3 text-text-tertiary' />}
+          {env.value_type === 'secret' && <RiLock2Line className='text-text-tertiary h-3 w-3' />}
         </div>
-        <div className='shrink-0 flex gap-1 items-center text-text-tertiary'>
-          <div className='p-1 radius-md cursor-pointer hover:bg-state-base-hover hover:text-text-secondary'>
-            <RiEditLine className='w-4 h-4' onClick={() => onEdit(env)}/>
+        <div className='text-text-tertiary flex shrink-0 items-center gap-1'>
+          <div className='radius-md hover:bg-state-base-hover hover:text-text-secondary cursor-pointer p-1'>
+            <RiEditLine className='h-4 w-4' onClick={() => onEdit(env)}/>
           </div>
           <div
-            className='p-1 radius-md cursor-pointer hover:bg-state-destructive-hover hover:text-text-destructive'
+            className='radius-md hover:bg-state-destructive-hover hover:text-text-destructive cursor-pointer p-1'
             onMouseOver={() => setDestructive(true)}
             onMouseOut={() => setDestructive(false)}
           >
-            <RiDeleteBinLine className='w-4 h-4' onClick={() => onDelete(env)} />
+            <RiDeleteBinLine className='h-4 w-4' onClick={() => onDelete(env)} />
           </div>
         </div>
       </div>
diff --git a/web/app/components/workflow/panel/env-panel/index.tsx b/web/app/components/workflow/panel/env-panel/index.tsx
index 756aa17ac4..f071a82d9f 100644
--- a/web/app/components/workflow/panel/env-panel/index.tsx
+++ b/web/app/components/workflow/panel/env-panel/index.tsx
@@ -149,22 +149,22 @@ const EnvPanel = () => {
   return (
     <div
       className={cn(
-        'relative flex flex-col w-[420px] bg-components-panel-bg-alt rounded-l-2xl h-full border border-components-panel-border',
+        'bg-components-panel-bg-alt border-components-panel-border relative flex h-full w-[420px] flex-col rounded-l-2xl border',
       )}
     >
-      <div className='shrink-0 flex items-center justify-between p-4 pb-0 text-text-primary system-xl-semibold'>
+      <div className='text-text-primary system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0'>
         {t('workflow.env.envPanelTitle')}
         <div className='flex items-center'>
           <div
-            className='flex items-center justify-center w-6 h-6 cursor-pointer'
+            className='flex h-6 w-6 cursor-pointer items-center justify-center'
             onClick={() => setShowEnvPanel(false)}
           >
-            <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+            <RiCloseLine className='text-text-tertiary h-4 w-4' />
           </div>
         </div>
       </div>
-      <div className='shrink-0 py-1 px-4 system-sm-regular text-text-tertiary'>{t('workflow.env.envDescription')}</div>
-      <div className='shrink-0 px-4 pt-2 pb-3'>
+      <div className='system-sm-regular text-text-tertiary shrink-0 px-4 py-1'>{t('workflow.env.envDescription')}</div>
+      <div className='shrink-0 px-4 pb-3 pt-2'>
         <VariableTrigger
           open={showVariableModal}
           setOpen={setShowVariableModal}
@@ -173,7 +173,7 @@ const EnvPanel = () => {
           onClose={() => setCurrentVar(undefined)}
         />
       </div>
-      <div className='grow px-4 rounded-b-2xl overflow-y-auto'>
+      <div className='grow overflow-y-auto rounded-b-2xl px-4'>
         {envList.map(env => (
           <EnvItem
             key={env.id}
diff --git a/web/app/components/workflow/panel/env-panel/variable-modal.tsx b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
index da59670a5b..206675311c 100644
--- a/web/app/components/workflow/panel/env-panel/variable-modal.tsx
+++ b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
@@ -68,39 +68,39 @@ const VariableModal = ({
 
   return (
     <div
-      className={cn('flex flex-col w-[360px] bg-components-panel-bg rounded-2xl h-full border-[0.5px] border-components-panel-border shadow-2xl')}
+      className={cn('bg-components-panel-bg border-components-panel-border flex h-full w-[360px] flex-col rounded-2xl border-[0.5px] shadow-2xl')}
     >
-      <div className='shrink-0 flex items-center justify-between mb-3 p-4 pb-0 text-text-primary system-xl-semibold'>
+      <div className='text-text-primary system-xl-semibold mb-3 flex shrink-0 items-center justify-between p-4 pb-0'>
         {!env ? t('workflow.env.modal.title') : t('workflow.env.modal.editTitle')}
         <div className='flex items-center'>
           <div
-            className='flex items-center justify-center w-6 h-6 cursor-pointer'
+            className='flex h-6 w-6 cursor-pointer items-center justify-center'
             onClick={onClose}
           >
-            <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+            <RiCloseLine className='text-text-tertiary h-4 w-4' />
           </div>
         </div>
       </div>
       <div className='px-4 py-2'>
         {/* type */}
         <div className='mb-4'>
-          <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.env.modal.type')}</div>
+          <div className='text-text-secondary system-sm-semibold mb-1 flex h-6 items-center'>{t('workflow.env.modal.type')}</div>
           <div className='flex gap-2'>
             <div className={cn(
-              'w-[106px] flex items-center justify-center p-2 radius-md bg-components-option-card-option-bg border border-components-option-card-option-border text-text-secondary system-sm-regular cursor-pointer hover:shadow-xs hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover',
-              type === 'string' && 'text-text-primary system-sm-medium border-[1.5px] shadow-xs bg-components-option-card-option-selected-bg border-components-option-card-option-selected-border hover:border-components-option-card-option-selected-border',
+              'radius-md bg-components-option-card-option-bg border-components-option-card-option-border text-text-secondary system-sm-regular hover:shadow-xs hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover flex w-[106px] cursor-pointer items-center justify-center border p-2',
+              type === 'string' && 'text-text-primary system-sm-medium shadow-xs bg-components-option-card-option-selected-bg border-components-option-card-option-selected-border hover:border-components-option-card-option-selected-border border-[1.5px]',
             )} onClick={() => setType('string')}>String</div>
             <div className={cn(
-              'w-[106px] flex items-center justify-center p-2 radius-md bg-components-option-card-option-bg border border-components-option-card-option-border text-text-secondary system-sm-regular cursor-pointer hover:shadow-xs hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover',
-              type === 'number' && 'text-text-primary font-medium border-[1.5px] shadow-xs bg-components-option-card-option-selected-bg border-components-option-card-option-selected-border hover:border-components-option-card-option-selected-border',
+              'radius-md bg-components-option-card-option-bg border-components-option-card-option-border text-text-secondary system-sm-regular hover:shadow-xs hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover flex w-[106px] cursor-pointer items-center justify-center border p-2',
+              type === 'number' && 'text-text-primary shadow-xs bg-components-option-card-option-selected-bg border-components-option-card-option-selected-border hover:border-components-option-card-option-selected-border border-[1.5px] font-medium',
             )} onClick={() => {
               setType('number')
               if (!(/^[0-9]$/).test(value))
                 setValue('')
             }}>Number</div>
             <div className={cn(
-              'w-[106px] flex items-center justify-center p-2 radius-md bg-components-option-card-option-bg border border-components-option-card-option-border text-text-secondary system-sm-regular cursor-pointer hover:shadow-xs hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover',
-              type === 'secret' && 'text-text-primary font-medium border-[1.5px] shadow-xs bg-components-option-card-option-selected-bg border-components-option-card-option-selected-border hover:border-components-option-card-option-selected-border',
+              'radius-md bg-components-option-card-option-bg border-components-option-card-option-border text-text-secondary system-sm-regular hover:shadow-xs hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover flex w-[106px] cursor-pointer items-center justify-center border p-2',
+              type === 'secret' && 'text-text-primary shadow-xs bg-components-option-card-option-selected-bg border-components-option-card-option-selected-border hover:border-components-option-card-option-selected-border border-[1.5px] font-medium',
             )} onClick={() => setType('secret')}>
               <span>Secret</span>
               <Tooltip
@@ -116,7 +116,7 @@ const VariableModal = ({
         </div>
         {/* name */}
         <div className='mb-4'>
-          <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.env.modal.name')}</div>
+          <div className='text-text-secondary system-sm-semibold mb-1 flex h-6 items-center'>{t('workflow.env.modal.name')}</div>
           <div className='flex'>
             <Input
               placeholder={t('workflow.env.modal.namePlaceholder') || ''}
@@ -129,7 +129,7 @@ const VariableModal = ({
         </div>
         {/* value */}
         <div className=''>
-          <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.env.modal.value')}</div>
+          <div className='text-text-secondary system-sm-semibold mb-1 flex h-6 items-center'>{t('workflow.env.modal.value')}</div>
           <div className='flex'>
             <Input
               placeholder={t('workflow.env.modal.valuePlaceholder') || ''}
@@ -140,7 +140,7 @@ const VariableModal = ({
           </div>
         </div>
       </div>
-      <div className='p-4 pt-2 flex flex-row-reverse rounded-b-2xl'>
+      <div className='flex flex-row-reverse rounded-b-2xl p-4 pt-2'>
         <div className='flex gap-2'>
           <Button onClick={onClose}>{t('common.operation.cancel')}</Button>
           <Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
diff --git a/web/app/components/workflow/panel/env-panel/variable-trigger.tsx b/web/app/components/workflow/panel/env-panel/variable-trigger.tsx
index 467f612cdb..52474860b1 100644
--- a/web/app/components/workflow/panel/env-panel/variable-trigger.tsx
+++ b/web/app/components/workflow/panel/env-panel/variable-trigger.tsx
@@ -46,7 +46,7 @@ const VariableTrigger = ({
         open && onClose()
       }}>
         <Button variant='primary'>
-          <RiAddLine className='mr-1 w-4 h-4' />
+          <RiAddLine className='mr-1 h-4 w-4' />
           <span className='system-sm-medium'>{t('workflow.env.envPanelButton')}</span>
         </Button>
       </PortalToFollowElemTrigger>
diff --git a/web/app/components/workflow/panel/global-variable-panel/index.tsx b/web/app/components/workflow/panel/global-variable-panel/index.tsx
index 46dad716dd..36535d8277 100644
--- a/web/app/components/workflow/panel/global-variable-panel/index.tsx
+++ b/web/app/components/workflow/panel/global-variable-panel/index.tsx
@@ -25,23 +25,23 @@ const Panel = () => {
   return (
     <div
       className={cn(
-        'relative flex flex-col w-[420px] bg-components-panel-bg-alt rounded-l-2xl h-full border border-components-panel-border',
+        'bg-components-panel-bg-alt border-components-panel-border relative flex h-full w-[420px] flex-col rounded-l-2xl border',
       )}
     >
-      <div className='shrink-0 flex items-center justify-between p-4 pb-0 text-text-primary system-xl-semibold'>
+      <div className='text-text-primary system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0'>
         Global Variables(Current not show)
         <div className='flex items-center'>
           <div
-            className='flex items-center justify-center w-6 h-6 cursor-pointer'
+            className='flex h-6 w-6 cursor-pointer items-center justify-center'
             onClick={() => setShowPanel(false)}
           >
-            <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+            <RiCloseLine className='text-text-tertiary h-4 w-4' />
           </div>
         </div>
       </div>
-      <div className='shrink-0 py-1 px-4 system-sm-regular text-text-tertiary'>...</div>
+      <div className='system-sm-regular text-text-tertiary shrink-0 px-4 py-1'>...</div>
 
-      <div className='grow px-4 rounded-b-2xl overflow-y-auto'>
+      <div className='grow overflow-y-auto rounded-b-2xl px-4'>
         {globalVariableList.map(item => (
           <Item
             key={item.name}
diff --git a/web/app/components/workflow/panel/global-variable-panel/item.tsx b/web/app/components/workflow/panel/global-variable-panel/item.tsx
index e7cdf166f9..a8b8a6c03b 100644
--- a/web/app/components/workflow/panel/global-variable-panel/item.tsx
+++ b/web/app/components/workflow/panel/global-variable-panel/item.tsx
@@ -13,11 +13,11 @@ const Item = ({
 }: Props) => {
   return (
     <div className={cn(
-      'mb-1 px-2.5 py-2 bg-components-panel-on-panel-item-bg radius-md border border-components-panel-border-subtle shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
+      'bg-components-panel-on-panel-item-bg radius-md border-components-panel-border-subtle shadow-xs hover:bg-components-panel-on-panel-item-bg-hover mb-1 border px-2.5 py-2',
     )}>
       <div className='flex items-center justify-between'>
-        <div className='grow flex gap-1 items-center'>
-          <Env className='w-4 h-4 text-util-colors-violet-violet-600' />
+        <div className='flex grow items-center gap-1'>
+          <Env className='text-util-colors-violet-violet-600 h-4 w-4' />
           <div className='text-text-primary system-sm-medium'>{payload.name}</div>
           <div className='text-text-tertiary system-xs-medium'>{capitalize(payload.value_type)}</div>
         </div>
diff --git a/web/app/components/workflow/panel/index.tsx b/web/app/components/workflow/panel/index.tsx
index 51cb1704ca..0e651d736b 100644
--- a/web/app/components/workflow/panel/index.tsx
+++ b/web/app/components/workflow/panel/index.tsx
@@ -40,7 +40,7 @@ const Panel: FC = () => {
   return (
     <div
       tabIndex={-1}
-      className={cn('absolute top-14 right-0 bottom-2 flex z-10 outline-none')}
+      className={cn('absolute bottom-2 right-0 top-14 z-10 flex outline-none')}
       key={`${isRestoring}`}
     >
       {
diff --git a/web/app/components/workflow/panel/inputs-panel.tsx b/web/app/components/workflow/panel/inputs-panel.tsx
index d7d7f7c5cc..5da606d7f6 100644
--- a/web/app/components/workflow/panel/inputs-panel.tsx
+++ b/web/app/components/workflow/panel/inputs-panel.tsx
@@ -95,7 +95,7 @@ const InputsPanel = ({ onRun }: Props) => {
 
   return (
     <>
-      <div className='pt-3 px-4 pb-2'>
+      <div className='px-4 pb-2 pt-3'>
         {
           variables.map((variable, index) => (
             <div
diff --git a/web/app/components/workflow/panel/record.tsx b/web/app/components/workflow/panel/record.tsx
index f60f6f7d96..5773623840 100644
--- a/web/app/components/workflow/panel/record.tsx
+++ b/web/app/components/workflow/panel/record.tsx
@@ -18,8 +18,8 @@ const Record = () => {
   }, [handleUpdateWorkflowCanvas])
 
   return (
-    <div className='flex flex-col w-[400px] h-full rounded-l-2xl border-[0.5px] border-components-panel-border shadow-xl bg-components-panel-bg'>
-      <div className='flex items-center justify-between p-4 pb-0 text-text-primary system-xl-semibold'>
+    <div className='border-components-panel-border bg-components-panel-bg flex h-full w-[400px] flex-col rounded-l-2xl border-[0.5px] shadow-xl'>
+      <div className='text-text-primary system-xl-semibold flex items-center justify-between p-4 pb-0'>
         {`Test Run#${historyWorkflowData?.sequence_number}`}
       </div>
       <Run
diff --git a/web/app/components/workflow/panel/workflow-preview.tsx b/web/app/components/workflow/panel/workflow-preview.tsx
index b4e4d4c5d1..82e01ce69c 100644
--- a/web/app/components/workflow/panel/workflow-preview.tsx
+++ b/web/app/components/workflow/panel/workflow-preview.tsx
@@ -49,20 +49,20 @@ const WorkflowPreview = () => {
 
   return (
     <div className={`
-      flex flex-col w-[420px] h-full rounded-l-2xl border-[0.5px] border-gray-200 shadow-xl bg-white
+      flex h-full w-[420px] flex-col rounded-l-2xl border-[0.5px] border-gray-200 bg-white shadow-xl
     `}>
       <div className='flex items-center justify-between p-4 pb-1 text-base font-semibold text-gray-900'>
         {`Test Run${!workflowRunningData?.result.sequence_number ? '' : `#${workflowRunningData?.result.sequence_number}`}`}
-        <div className='p-1 cursor-pointer' onClick={() => handleCancelDebugAndPreviewPanel()}>
-          <RiCloseLine className='w-4 h-4 text-gray-500' />
+        <div className='cursor-pointer p-1' onClick={() => handleCancelDebugAndPreviewPanel()}>
+          <RiCloseLine className='h-4 w-4 text-gray-500' />
         </div>
       </div>
-      <div className='grow relative flex flex-col'>
-        <div className='shrink-0 flex items-center px-4 border-b-[0.5px] border-[rgba(0,0,0,0.05)]'>
+      <div className='relative flex grow flex-col'>
+        <div className='flex shrink-0 items-center border-b-[0.5px] border-[rgba(0,0,0,0.05)] px-4'>
           {showInputsPanel && (
             <div
               className={cn(
-                'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
+                'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-gray-400',
                 currentTab === 'INPUT' && '!border-[rgb(21,94,239)] text-gray-700',
               )}
               onClick={() => switchTab('INPUT')}
@@ -70,9 +70,9 @@ const WorkflowPreview = () => {
           )}
           <div
             className={cn(
-              'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
+              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-gray-400',
               currentTab === 'RESULT' && '!border-[rgb(21,94,239)] text-gray-700',
-              !workflowRunningData && 'opacity-30 !cursor-not-allowed',
+              !workflowRunningData && '!cursor-not-allowed opacity-30',
             )}
             onClick={() => {
               if (!workflowRunningData)
@@ -82,9 +82,9 @@ const WorkflowPreview = () => {
           >{t('runLog.result')}</div>
           <div
             className={cn(
-              'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
+              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-gray-400',
               currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-gray-700',
-              !workflowRunningData && 'opacity-30 !cursor-not-allowed',
+              !workflowRunningData && '!cursor-not-allowed opacity-30',
             )}
             onClick={() => {
               if (!workflowRunningData)
@@ -94,9 +94,9 @@ const WorkflowPreview = () => {
           >{t('runLog.detail')}</div>
           <div
             className={cn(
-              'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
+              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-gray-400',
               currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-gray-700',
-              !workflowRunningData && 'opacity-30 !cursor-not-allowed',
+              !workflowRunningData && '!cursor-not-allowed opacity-30',
             )}
             onClick={() => {
               if (!workflowRunningData)
@@ -106,7 +106,7 @@ const WorkflowPreview = () => {
           >{t('runLog.tracing')}</div>
         </div>
         <div className={cn(
-          'grow bg-components-panel-bg h-0 overflow-y-auto rounded-b-2xl',
+          'bg-components-panel-bg h-0 grow overflow-y-auto rounded-b-2xl',
           (currentTab === 'RESULT' || currentTab === 'TRACING') && '!bg-background-section-burn',
         )}>
           {currentTab === 'INPUT' && showInputsPanel && (
@@ -123,7 +123,7 @@ const WorkflowPreview = () => {
               />
               {(workflowRunningData?.result.status === WorkflowRunningStatus.Succeeded && workflowRunningData?.resultText && typeof workflowRunningData?.resultText === 'string') && (
                 <SimpleBtn
-                  className={cn('ml-4 mb-4 inline-flex space-x-1')}
+                  className={cn('mb-4 ml-4 inline-flex space-x-1')}
                   onClick={() => {
                     const content = workflowRunningData?.resultText
                     if (typeof content === 'string')
@@ -132,7 +132,7 @@ const WorkflowPreview = () => {
                       copy(JSON.stringify(content))
                     Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
                   }}>
-                  <RiClipboardLine className='w-3.5 h-3.5' />
+                  <RiClipboardLine className='h-3.5 w-3.5' />
                   <div>{t('common.operation.copy')}</div>
                 </SimpleBtn>
               )}
@@ -153,7 +153,7 @@ const WorkflowPreview = () => {
             />
           )}
           {currentTab === 'DETAIL' && !workflowRunningData?.result && (
-            <div className='flex h-full items-center justify-center bg-components-panel-bg'>
+            <div className='bg-components-panel-bg flex h-full items-center justify-center'>
               <Loading />
             </div>
           )}
@@ -164,7 +164,7 @@ const WorkflowPreview = () => {
             />
           )}
           {currentTab === 'TRACING' && !workflowRunningData?.tracing?.length && (
-            <div className='flex h-full items-center justify-center !bg-background-section-burn'>
+            <div className='!bg-background-section-burn flex h-full items-center justify-center'>
               <Loading />
             </div>
           )}
diff --git a/web/app/components/workflow/run/agent-log/agent-log-item.tsx b/web/app/components/workflow/run/agent-log/agent-log-item.tsx
index 0b84827500..7d06dd1acb 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-item.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-item.tsx
@@ -54,33 +54,33 @@ const AgentLogItem = ({
   }, [status])
 
   return (
-    <div className='bg-background-default border-[0.5px] border-components-panel-border rounded-[10px]'>
+    <div className='bg-background-default border-components-panel-border rounded-[10px] border-[0.5px]'>
       <div
         className={cn(
-          'flex items-center pl-1.5 pt-2 pr-3 pb-2 cursor-pointer',
+          'flex cursor-pointer items-center pb-2 pl-1.5 pr-3 pt-2',
           expanded && 'pb-1',
         )}
         onClick={() => setExpanded(!expanded)}
       >
         {
           expanded
-            ? <RiArrowRightSLine className='shrink-0 w-4 h-4 rotate-90 text-text-quaternary' />
-            : <RiArrowRightSLine className='shrink-0 w-4 h-4 text-text-quaternary' />
+            ? <RiArrowRightSLine className='text-text-quaternary h-4 w-4 shrink-0 rotate-90' />
+            : <RiArrowRightSLine className='text-text-quaternary h-4 w-4 shrink-0' />
         }
         <BlockIcon
-          className='shrink-0 mr-1.5'
+          className='mr-1.5 shrink-0'
           type={toolIcon ? BlockEnum.Tool : BlockEnum.Agent}
           toolIcon={toolIcon}
         />
         <div
-          className='grow system-sm-semibold-uppercase text-text-secondary truncate'
+          className='system-sm-semibold-uppercase text-text-secondary grow truncate'
           title={label}
         >
           {label}
         </div>
         {
           metadata?.elapsed_time && (
-            <div className='shrink-0 mr-2 system-xs-regular text-text-tertiary'>{metadata?.elapsed_time?.toFixed(3)}s</div>
+            <div className='system-xs-regular text-text-tertiary mr-2 shrink-0'>{metadata?.elapsed_time?.toFixed(3)}s</div>
           )
         }
         <NodeStatusIcon status={mergeStatus} />
@@ -91,16 +91,16 @@ const AgentLogItem = ({
             {
               !!children?.length && (
                 <Button
-                  className='flex items-center justify-between mb-1 w-full'
+                  className='mb-1 flex w-full items-center justify-between'
                   variant='tertiary'
                   onClick={() => onShowAgentOrToolLog(item)}
                 >
                   <div className='flex items-center'>
-                    <RiListView className='mr-1 w-4 h-4 text-components-button-tertiary-text shrink-0' />
+                    <RiListView className='text-components-button-tertiary-text mr-1 h-4 w-4 shrink-0' />
                     {`${children.length} Action Logs`}
                   </div>
                   <div className='flex'>
-                    <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
+                    <RiArrowRightSLine className='text-components-button-tertiary-text h-4 w-4 shrink-0' />
                   </div>
                 </Button>
               )
diff --git a/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx b/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
index f965a86f31..90123aa60d 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
@@ -30,19 +30,19 @@ const AgentLogNavMore = ({
     >
       <PortalToFollowElemTrigger>
         <Button
-          className='w-6 h-6'
+          className='h-6 w-6'
           variant='ghost-accent'
         >
-          <RiMoreLine className='w-4 h-4' />
+          <RiMoreLine className='h-4 w-4' />
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent>
-        <div className='p-1 w-[136px] bg-components-panel-bg-blur border-[0.5px] border-components-panel-border rounded-xl shadow-lg'>
+        <div className='bg-components-panel-bg-blur border-components-panel-border w-[136px] rounded-xl border-[0.5px] p-1 shadow-lg'>
           {
             options.map(option => (
               <div
                 key={option.id}
-                className='flex items-center px-2 h-8 rounded-lg system-md-regular text-text-secondary hover:bg-state-base-hover cursor-pointer'
+                className='system-md-regular text-text-secondary hover:bg-state-base-hover flex h-8 cursor-pointer items-center rounded-lg px-2'
                 onClick={() => {
                   onShowAgentOrToolLog(option as AgentLogItemWithChildren)
                   setOpen(false)
diff --git a/web/app/components/workflow/run/agent-log/agent-log-nav.tsx b/web/app/components/workflow/run/agent-log/agent-log-nav.tsx
index ccfc6da8cf..c3bf77fab5 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-nav.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-nav.tsx
@@ -19,7 +19,7 @@ const AgentLogNav = ({
   const end = agentOrToolLogItemStack.at(-1)
 
   return (
-    <div className='flex items-center p-1 pr-3 h-8 bg-components-panel-bg'>
+    <div className='bg-components-panel-bg flex h-8 items-center p-1 pr-3'>
       <Button
         className='shrink-0 px-[5px]'
         size='small'
@@ -28,10 +28,10 @@ const AgentLogNav = ({
           onShowAgentOrToolLog()
         }}
       >
-        <RiArrowLeftLine className='mr-1 w-3.5 h-3.5' />
+        <RiArrowLeftLine className='mr-1 h-3.5 w-3.5' />
         AGENT
       </Button>
-      <div className='shrink-0 mx-0.5 system-xs-regular text-divider-deep'>/</div>
+      <div className='system-xs-regular text-divider-deep mx-0.5 shrink-0'>/</div>
       {
         agentOrToolLogItemStackLength > 1
           ? (
@@ -45,7 +45,7 @@ const AgentLogNav = ({
             </Button>
           )
           : (
-            <div className='flex items-center px-[5px] system-xs-medium-uppercase text-text-tertiary'>
+            <div className='system-xs-medium-uppercase text-text-tertiary flex items-center px-[5px]'>
               {t('workflow.nodes.agent.strategy.label')}
             </div>
           )
@@ -53,7 +53,7 @@ const AgentLogNav = ({
       {
         !!mid.length && (
           <>
-            <div className='shrink-0 mx-0.5 system-xs-regular text-divider-deep'>/</div>
+            <div className='system-xs-regular text-divider-deep mx-0.5 shrink-0'>/</div>
             <AgentLogNavMore
               options={mid}
               onShowAgentOrToolLog={onShowAgentOrToolLog}
@@ -64,8 +64,8 @@ const AgentLogNav = ({
       {
         !!end && agentOrToolLogItemStackLength > 1 && (
           <>
-            <div className='shrink-0 mx-0.5 system-xs-regular text-divider-deep'>/</div>
-            <div className='flex items-center px-[5px] system-xs-medium-uppercase text-text-tertiary'>
+            <div className='system-xs-regular text-divider-deep mx-0.5 shrink-0'>/</div>
+            <div className='system-xs-medium-uppercase text-text-tertiary flex items-center px-[5px]'>
               {end.label}
             </div>
           </>
diff --git a/web/app/components/workflow/run/agent-log/agent-log-trigger.tsx b/web/app/components/workflow/run/agent-log/agent-log-trigger.tsx
index 86418a1c69..dc0d3aa00d 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-trigger.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-trigger.tsx
@@ -19,27 +19,27 @@ const AgentLogTrigger = ({
 
   return (
     <div
-      className='bg-components-button-tertiary-bg rounded-[10px] cursor-pointer'
+      className='bg-components-button-tertiary-bg cursor-pointer rounded-[10px]'
       onClick={() => {
         onShowAgentOrToolLog({ id: nodeInfo.id, children: agentLog || [] } as AgentLogItemWithChildren)
       }}
     >
-      <div className='flex items-center px-3 pt-2 system-2xs-medium-uppercase text-text-tertiary'>
+      <div className='system-2xs-medium-uppercase text-text-tertiary flex items-center px-3 pt-2'>
         {t('workflow.nodes.agent.strategy.label')}
       </div>
-      <div className='flex items-center pl-3 pt-1 pr-2 pb-1.5'>
+      <div className='flex items-center pb-1.5 pl-3 pr-2 pt-1'>
         {
           agentStrategy && (
-            <div className='grow system-xs-medium text-text-secondary'>
+            <div className='system-xs-medium text-text-secondary grow'>
               {agentStrategy}
             </div>
           )
         }
         <div
-          className='shrink-0 flex items-center px-[1px] system-xs-regular-uppercase text-text-tertiary cursor-pointer'
+          className='system-xs-regular-uppercase text-text-tertiary flex shrink-0 cursor-pointer items-center px-[1px]'
         >
           {t('runLog.detail')}
-          <RiArrowRightLine className='ml-0.5 w-3.5 h-3.5' />
+          <RiArrowRightLine className='ml-0.5 h-3.5 w-3.5' />
         </div>
       </div>
     </div>
diff --git a/web/app/components/workflow/run/agent-log/agent-result-panel.tsx b/web/app/components/workflow/run/agent-log/agent-result-panel.tsx
index e2d2b24966..a5ed45ce77 100644
--- a/web/app/components/workflow/run/agent-log/agent-result-panel.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-result-panel.tsx
@@ -25,7 +25,7 @@ const AgentResultPanel = ({
         onShowAgentOrToolLog={onShowAgentOrToolLog}
       />
       {
-        <div className='p-2 space-y-1'>
+        <div className='space-y-1 p-2'>
           {
             list.map(item => (
               <AgentLogItem
@@ -39,14 +39,14 @@ const AgentResultPanel = ({
       }
       {
         top.hasCircle && (
-          <div className='flex items-center mt-1 rounded-xl px-3 pr-2 border border-components-panel-border bg-components-panel-bg-blur shadow-md'>
+          <div className='border-components-panel-border bg-components-panel-bg-blur mt-1 flex items-center rounded-xl border px-3 pr-2 shadow-md'>
             <div
-              className='absolute inset-0 opacity-[0.4] rounded-xl'
+              className='absolute inset-0 rounded-xl opacity-[0.4]'
               style={{
                 background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)',
               }}
             ></div>
-            <RiAlertFill className='mr-1.5 w-4 h-4 text-text-warning-secondary' />
+            <RiAlertFill className='text-text-warning-secondary mr-1.5 h-4 w-4' />
             <div className='system-xs-medium text-text-primary'>
               {t('runLog.circularInvocationTip')}
             </div>
diff --git a/web/app/components/workflow/run/index.tsx b/web/app/components/workflow/run/index.tsx
index eaa88d2df8..928e32a07b 100644
--- a/web/app/components/workflow/run/index.tsx
+++ b/web/app/components/workflow/run/index.tsx
@@ -103,13 +103,13 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
   }, [loading])
 
   return (
-    <div className='grow relative flex flex-col'>
+    <div className='relative flex grow flex-col'>
       {/* tab */}
-      <div className='shrink-0 flex items-center px-4 border-b-[0.5px] border-divider-subtle'>
+      <div className='border-divider-subtle flex shrink-0 items-center border-b-[0.5px] px-4'>
         {!hideResult && (
           <div
             className={cn(
-              'mr-6 py-3 border-b-2 border-transparent system-sm-semibold-uppercase text-text-tertiary cursor-pointer',
+              'system-sm-semibold-uppercase text-text-tertiary mr-6 cursor-pointer border-b-2 border-transparent py-3',
               currentTab === 'RESULT' && '!border-util-colors-blue-brand-blue-brand-600 text-text-primary',
             )}
             onClick={() => switchTab('RESULT')}
@@ -117,23 +117,23 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
         )}
         <div
           className={cn(
-            'mr-6 py-3 border-b-2 border-transparent system-sm-semibold-uppercase text-text-tertiary cursor-pointer',
+            'system-sm-semibold-uppercase text-text-tertiary mr-6 cursor-pointer border-b-2 border-transparent py-3',
             currentTab === 'DETAIL' && '!border-util-colors-blue-brand-blue-brand-600 text-text-primary',
           )}
           onClick={() => switchTab('DETAIL')}
         >{t('runLog.detail')}</div>
         <div
           className={cn(
-            'mr-6 py-3 border-b-2 border-transparent system-sm-semibold-uppercase text-text-tertiary cursor-pointer',
+            'system-sm-semibold-uppercase text-text-tertiary mr-6 cursor-pointer border-b-2 border-transparent py-3',
             currentTab === 'TRACING' && '!border-util-colors-blue-brand-blue-brand-600 text-text-primary',
           )}
           onClick={() => switchTab('TRACING')}
         >{t('runLog.tracing')}</div>
       </div>
       {/* panel detail */}
-      <div ref={ref} className={cn('relative grow bg-components-panel-bg h-0 overflow-y-auto rounded-b-2xl')}>
+      <div ref={ref} className={cn('bg-components-panel-bg relative h-0 grow overflow-y-auto rounded-b-2xl')}>
         {loading && (
-          <div className='flex h-full items-center justify-center bg-components-panel-bg'>
+          <div className='bg-components-panel-bg flex h-full items-center justify-center'>
             <Loading />
           </div>
         )}
diff --git a/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx b/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
index 93c6495216..55dd3a0f7c 100644
--- a/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
+++ b/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
@@ -39,17 +39,17 @@ const IterationLogTrigger = ({
   }
   return (
     <Button
-      className='flex items-center w-full self-stretch gap-2 px-3 py-2 bg-components-button-tertiary-bg-hover hover:bg-components-button-tertiary-bg-hover rounded-lg cursor-pointer border-none'
+      className='bg-components-button-tertiary-bg-hover hover:bg-components-button-tertiary-bg-hover flex w-full cursor-pointer items-center gap-2 self-stretch rounded-lg border-none px-3 py-2'
       onClick={handleOnShowIterationDetail}
     >
-      <Iteration className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
-      <div className='flex-1 text-left system-sm-medium text-components-button-tertiary-text'>{t('workflow.nodes.iteration.iteration', { count: getCount(nodeInfo.details?.length, nodeInfo.metadata?.iterator_length) })}{getErrorCount(nodeInfo.details) > 0 && (
+      <Iteration className='text-components-button-tertiary-text h-4 w-4 shrink-0' />
+      <div className='system-sm-medium text-components-button-tertiary-text flex-1 text-left'>{t('workflow.nodes.iteration.iteration', { count: getCount(nodeInfo.details?.length, nodeInfo.metadata?.iterator_length) })}{getErrorCount(nodeInfo.details) > 0 && (
         <>
           {t('workflow.nodes.iteration.comma')}
           {t('workflow.nodes.iteration.error', { count: getErrorCount(nodeInfo.details) })}
         </>
       )}</div>
-      <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
+      <RiArrowRightSLine className='text-components-button-tertiary-text h-4 w-4 shrink-0' />
     </Button>
   )
 }
diff --git a/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx b/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
index 19f79feb13..89b737d6f6 100644
--- a/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
+++ b/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
@@ -48,10 +48,10 @@ const IterationResultPanel: FC<Props> = ({
     const hasDurationMap = iterDurationMap && Object.keys(iterDurationMap).length !== 0
 
     if (hasFailed)
-      return <RiErrorWarningLine className='w-4 h-4 text-text-destructive' />
+      return <RiErrorWarningLine className='text-text-destructive h-4 w-4' />
 
     if (isRunning)
-      return <RiLoader2Line className='w-3.5 h-3.5 text-primary-600 animate-spin' />
+      return <RiLoader2Line className='text-primary-600 h-3.5 w-3.5 animate-spin' />
 
     return (
       <>
@@ -62,8 +62,8 @@ const IterationResultPanel: FC<Props> = ({
         )}
         <RiArrowRightSLine
           className={cn(
-            'w-4 h-4 text-text-tertiary transition-transform duration-200 flex-shrink-0',
-            expandedIterations[index] && 'transform rotate-90',
+            'text-text-tertiary h-4 w-4 shrink-0 transition-transform duration-200',
+            expandedIterations[index] && 'rotate-90',
           )}
         />
       </>
@@ -73,31 +73,31 @@ const IterationResultPanel: FC<Props> = ({
   return (
     <div className='bg-components-panel-bg'>
       <div
-        className='flex items-center px-4 h-8 text-text-accent-secondary cursor-pointer border-b-[0.5px] border-b-divider-regular'
+        className='text-text-accent-secondary border-b-divider-regular flex h-8 cursor-pointer items-center border-b-[0.5px] px-4'
         onClick={(e) => {
           e.stopPropagation()
           e.nativeEvent.stopImmediatePropagation()
           onBack()
         }}
       >
-        <RiArrowLeftLine className='mr-1 w-4 h-4' />
+        <RiArrowLeftLine className='mr-1 h-4 w-4' />
         <div className='system-sm-medium'>{t(`${i18nPrefix}.back`)}</div>
       </div>
       {/* List */}
-      <div className='p-2 bg-components-panel-bg'>
+      <div className='bg-components-panel-bg p-2'>
         {list.map((iteration, index) => (
-          <div key={index} className={cn('mb-1 overflow-hidden rounded-xl bg-background-section-burn border-none')}>
+          <div key={index} className={cn('bg-background-section-burn mb-1 overflow-hidden rounded-xl border-none')}>
             <div
               className={cn(
-                'flex items-center justify-between w-full px-3 cursor-pointer',
-                expandedIterations[index] ? 'pt-3 pb-2' : 'py-3',
+                'flex w-full cursor-pointer items-center justify-between px-3',
+                expandedIterations[index] ? 'pb-2 pt-3' : 'py-3',
                 'rounded-xl text-left',
               )}
               onClick={() => toggleIteration(index)}
             >
-              <div className={cn('flex items-center gap-2 flex-grow')}>
-                <div className='flex items-center justify-center w-4 h-4 rounded-[5px] border-divider-subtle bg-util-colors-cyan-cyan-500 shrink-0'>
-                  <Iteration className='w-3 h-3 text-text-primary-on-surface' />
+              <div className={cn('flex grow items-center gap-2')}>
+                <div className='border-divider-subtle bg-util-colors-cyan-cyan-500 flex h-4 w-4 shrink-0 items-center justify-center rounded-[5px]'>
+                  <Iteration className='text-text-primary-on-surface h-3 w-3' />
                 </div>
                 <span className='system-sm-semibold-uppercase text-text-primary grow'>
                   {t(`${i18nPrefix}.iteration`)} {index + 1}
@@ -106,7 +106,7 @@ const IterationResultPanel: FC<Props> = ({
               </div>
             </div>
             {expandedIterations[index] && <div
-              className="grow h-px bg-divider-subtle"
+              className="bg-divider-subtle h-px grow"
             ></div>}
             <div className={cn(
               'overflow-hidden transition-all duration-200',
diff --git a/web/app/components/workflow/run/meta.tsx b/web/app/components/workflow/run/meta.tsx
index d99261bb9d..c03121a371 100644
--- a/web/app/components/workflow/run/meta.tsx
+++ b/web/app/components/workflow/run/meta.tsx
@@ -27,13 +27,13 @@ const MetaData: FC<Props> = ({
 
   return (
     <div className='relative'>
-      <div className='h-6 py-1 text-text-tertiary system-xs-medium-uppercase'>{t('runLog.meta.title')}</div>
+      <div className='text-text-tertiary system-xs-medium-uppercase h-6 py-1'>{t('runLog.meta.title')}</div>
       <div className='py-1'>
         <div className='flex'>
-          <div className='shrink-0 w-[104px] px-2 py-1.5 text-text-tertiary system-xs-regular truncate'>{t('runLog.meta.status')}</div>
-          <div className='grow px-2 py-1.5 text-text-secondary system-xs-regular'>
+          <div className='text-text-tertiary system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5'>{t('runLog.meta.status')}</div>
+          <div className='text-text-secondary system-xs-regular grow px-2 py-1.5'>
             {status === 'running' && (
-              <div className='my-1 w-16 h-2 rounded-sm bg-text-quaternary'/>
+              <div className='bg-text-quaternary my-1 h-2 w-16 rounded-sm'/>
             )}
             {status === 'succeeded' && (
               <span>SUCCESS</span>
@@ -53,10 +53,10 @@ const MetaData: FC<Props> = ({
           </div>
         </div>
         <div className='flex'>
-          <div className='shrink-0 w-[104px] px-2 py-1.5 text-text-tertiary system-xs-regular truncate'>{t('runLog.meta.executor')}</div>
-          <div className='grow px-2 py-1.5 text-text-secondary system-xs-regular'>
+          <div className='text-text-tertiary system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5'>{t('runLog.meta.executor')}</div>
+          <div className='text-text-secondary system-xs-regular grow px-2 py-1.5'>
             {status === 'running' && (
-              <div className='my-1 w-[88px] h-2 rounded-sm bg-text-quaternary'/>
+              <div className='bg-text-quaternary my-1 h-2 w-[88px] rounded-sm'/>
             )}
             {status !== 'running' && (
               <span>{executor || 'N/A'}</span>
@@ -64,10 +64,10 @@ const MetaData: FC<Props> = ({
           </div>
         </div>
         <div className='flex'>
-          <div className='shrink-0 w-[104px] px-2 py-1.5 text-text-tertiary system-xs-regular truncate'>{t('runLog.meta.startTime')}</div>
-          <div className='grow px-2 py-1.5 text-text-secondary system-xs-regular'>
+          <div className='text-text-tertiary system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5'>{t('runLog.meta.startTime')}</div>
+          <div className='text-text-secondary system-xs-regular grow px-2 py-1.5'>
             {status === 'running' && (
-              <div className='my-1 w-[72px] h-2 rounded-sm bg-text-quaternary'/>
+              <div className='bg-text-quaternary my-1 h-2 w-[72px] rounded-sm'/>
             )}
             {status !== 'running' && (
               <span>{startTime ? formatTime(startTime, t('appLog.dateTimeFormat') as string) : '-'}</span>
@@ -75,10 +75,10 @@ const MetaData: FC<Props> = ({
           </div>
         </div>
         <div className='flex'>
-          <div className='shrink-0 w-[104px] px-2 py-1.5 text-text-tertiary system-xs-regular truncate'>{t('runLog.meta.time')}</div>
-          <div className='grow px-2 py-1.5 text-text-secondary system-xs-regular'>
+          <div className='text-text-tertiary system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5'>{t('runLog.meta.time')}</div>
+          <div className='text-text-secondary system-xs-regular grow px-2 py-1.5'>
             {status === 'running' && (
-              <div className='my-1 w-[72px] h-2 rounded-sm bg-text-quaternary'/>
+              <div className='bg-text-quaternary my-1 h-2 w-[72px] rounded-sm'/>
             )}
             {status !== 'running' && (
               <span>{time ? `${time.toFixed(3)}s` : '-'}</span>
@@ -86,10 +86,10 @@ const MetaData: FC<Props> = ({
           </div>
         </div>
         <div className='flex'>
-          <div className='shrink-0 w-[104px] px-2 py-1.5 text-text-tertiary system-xs-regular truncate'>{t('runLog.meta.tokens')}</div>
-          <div className='grow px-2 py-1.5 text-text-secondary system-xs-regular'>
+          <div className='text-text-tertiary system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5'>{t('runLog.meta.tokens')}</div>
+          <div className='text-text-secondary system-xs-regular grow px-2 py-1.5'>
             {status === 'running' && (
-              <div className='my-1 w-[48px] h-2 rounded-sm bg-text-quaternary'/>
+              <div className='bg-text-quaternary my-1 h-2 w-[48px] rounded-sm'/>
             )}
             {status !== 'running' && (
               <span>{`${tokens || 0} Tokens`}</span>
@@ -98,10 +98,10 @@ const MetaData: FC<Props> = ({
         </div>
         {showSteps && (
           <div className='flex'>
-            <div className='shrink-0 w-[104px] px-2 py-1.5 text-text-tertiary system-xs-regular truncate'>{t('runLog.meta.steps')}</div>
-            <div className='grow px-2 py-1.5 text-text-secondary system-xs-regular'>
+            <div className='text-text-tertiary system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5'>{t('runLog.meta.steps')}</div>
+            <div className='text-text-secondary system-xs-regular grow px-2 py-1.5'>
               {status === 'running' && (
-                <div className='my-1 w-[24px] h-2 rounded-sm bg-text-quaternary'/>
+                <div className='bg-text-quaternary my-1 h-2 w-[24px] rounded-sm'/>
               )}
               {status !== 'running' && (
                 <span>{steps}</span>
diff --git a/web/app/components/workflow/run/node.tsx b/web/app/components/workflow/run/node.tsx
index 33ed05e891..4ecc6f5c26 100644
--- a/web/app/components/workflow/run/node.tsx
+++ b/web/app/components/workflow/run/node.tsx
@@ -85,10 +85,10 @@ const NodePanel: FC<Props> = ({
 
   return (
     <div className={cn('px-2 py-1', className)}>
-      <div className='group transition-all bg-background-default border border-components-panel-border rounded-[10px] shadow-xs hover:shadow-md'>
+      <div className='bg-background-default border-components-panel-border shadow-xs group rounded-[10px] border transition-all hover:shadow-md'>
         <div
           className={cn(
-            'flex items-center pl-1 pr-3 cursor-pointer',
+            'flex cursor-pointer items-center pl-1 pr-3',
             hideInfo ? 'py-2' : 'py-1.5',
             !collapseState && (hideInfo ? '!pb-1' : '!pb-1.5'),
           )}
@@ -97,35 +97,35 @@ const NodePanel: FC<Props> = ({
           {!hideProcessDetail && (
             <RiArrowRightSLine
               className={cn(
-                'shrink-0 w-4 h-4 mr-1 text-text-quaternary transition-all group-hover:text-text-tertiary',
+                'text-text-quaternary group-hover:text-text-tertiary mr-1 h-4 w-4 shrink-0 transition-all',
                 !collapseState && 'rotate-90',
               )}
             />
           )}
-          <BlockIcon size={inMessage ? 'xs' : 'sm'} className={cn('shrink-0 mr-2', inMessage && '!mr-1')} type={nodeInfo.node_type} toolIcon={nodeInfo.extras?.icon || nodeInfo.extras} />
+          <BlockIcon size={inMessage ? 'xs' : 'sm'} className={cn('mr-2 shrink-0', inMessage && '!mr-1')} type={nodeInfo.node_type} toolIcon={nodeInfo.extras?.icon || nodeInfo.extras} />
           <div className={cn(
-            'grow text-text-secondary system-xs-semibold-uppercase truncate',
+            'text-text-secondary system-xs-semibold-uppercase grow truncate',
             hideInfo && '!text-xs',
           )} title={nodeInfo.title}>{nodeInfo.title}</div>
           {nodeInfo.status !== 'running' && !hideInfo && (
-            <div className='shrink-0 text-text-tertiary system-xs-regular'>{nodeInfo.execution_metadata?.total_tokens ? `${getTokenCount(nodeInfo.execution_metadata?.total_tokens || 0)} tokens · ` : ''}{`${getTime(nodeInfo.elapsed_time || 0)}`}</div>
+            <div className='text-text-tertiary system-xs-regular shrink-0'>{nodeInfo.execution_metadata?.total_tokens ? `${getTokenCount(nodeInfo.execution_metadata?.total_tokens || 0)} tokens · ` : ''}{`${getTime(nodeInfo.elapsed_time || 0)}`}</div>
           )}
           {nodeInfo.status === 'succeeded' && (
-            <RiCheckboxCircleFill className='shrink-0 ml-2 w-3.5 h-3.5 text-text-success' />
+            <RiCheckboxCircleFill className='text-text-success ml-2 h-3.5 w-3.5 shrink-0' />
           )}
           {nodeInfo.status === 'failed' && (
-            <RiErrorWarningLine className='shrink-0 ml-2 w-3.5 h-3.5 text-text-warning' />
+            <RiErrorWarningLine className='text-text-warning ml-2 h-3.5 w-3.5 shrink-0' />
           )}
           {nodeInfo.status === 'stopped' && (
-            <RiAlertFill className={cn('shrink-0 ml-2 w-4 h-4 text-text-warning-secondary', inMessage && 'w-3.5 h-3.5')} />
+            <RiAlertFill className={cn('text-text-warning-secondary ml-2 h-4 w-4 shrink-0', inMessage && 'h-3.5 w-3.5')} />
           )}
           {nodeInfo.status === 'exception' && (
-            <RiAlertFill className={cn('shrink-0 ml-2 w-4 h-4 text-text-warning-secondary', inMessage && 'w-3.5 h-3.5')} />
+            <RiAlertFill className={cn('text-text-warning-secondary ml-2 h-4 w-4 shrink-0', inMessage && 'h-3.5 w-3.5')} />
           )}
           {nodeInfo.status === 'running' && (
-            <div className='shrink-0 flex items-center text-text-accent text-[13px] leading-[16px] font-medium'>
+            <div className='text-text-accent flex shrink-0 items-center text-[13px] font-medium leading-[16px]'>
               <span className='mr-2 text-xs font-normal'>Running</span>
-              <RiLoader2Line className='w-3.5 h-3.5 animate-spin' />
+              <RiLoader2Line className='h-3.5 w-3.5 animate-spin' />
             </div>
           )}
         </div>
diff --git a/web/app/components/workflow/run/output-panel.tsx b/web/app/components/workflow/run/output-panel.tsx
index 8056b0672c..ad776a1651 100644
--- a/web/app/components/workflow/run/output-panel.tsx
+++ b/web/app/components/workflow/run/output-panel.tsx
@@ -56,7 +56,7 @@ const OutputPanel: FC<OutputPanelProps> = ({
   return (
     <div className='p-2'>
       {isRunning && (
-        <div className='pt-4 pl-[26px]'>
+        <div className='pl-[26px] pt-4'>
           <LoadingAnim type='text' />
         </div>
       )}
diff --git a/web/app/components/workflow/run/result-panel.tsx b/web/app/components/workflow/run/result-panel.tsx
index b05e5cb888..0720c4cbc0 100644
--- a/web/app/components/workflow/run/result-panel.tsx
+++ b/web/app/components/workflow/run/result-panel.tsx
@@ -99,7 +99,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
           )
         }
       </div>
-      <div className='px-4 py-2 flex flex-col gap-2'>
+      <div className='flex flex-col gap-2 px-4 py-2'>
         <CodeEditor
           readOnly
           title={<div>{t('workflow.common.input').toLocaleUpperCase()}</div>}
@@ -128,7 +128,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
         )}
       </div>
       <div className='px-4 py-2'>
-        <div className='h-[0.5px] divider-subtle' />
+        <div className='divider-subtle h-[0.5px]' />
       </div>
       <div className='px-4 py-2'>
         <MetaData
diff --git a/web/app/components/workflow/run/result-text.tsx b/web/app/components/workflow/run/result-text.tsx
index 9183226b60..be5e318724 100644
--- a/web/app/components/workflow/run/result-text.tsx
+++ b/web/app/components/workflow/run/result-text.tsx
@@ -26,7 +26,7 @@ const ResultText: FC<ResultTextProps> = ({
   return (
     <div className='bg-background-section-burn'>
       {isRunning && !outputs && (
-        <div className='pt-4 pl-[26px]'>
+        <div className='pl-[26px] pt-4'>
           <LoadingAnim type='text' />
         </div>
       )}
@@ -38,12 +38,12 @@ const ResultText: FC<ResultTextProps> = ({
         </div>
       )}
       {!isRunning && !outputs && !error && !allFiles?.length && (
-        <div className='mt-[120px] px-4 py-2 flex flex-col items-center text-[13px] leading-[18px] text-gray-500'>
-          <ImageIndentLeft className='w-6 h-6 text-gray-400' />
+        <div className='mt-[120px] flex flex-col items-center px-4 py-2 text-[13px] leading-[18px] text-gray-500'>
+          <ImageIndentLeft className='h-6 w-6 text-gray-400' />
           <div className='mr-2'>{t('runLog.resultEmpty.title')}</div>
           <div>
             {t('runLog.resultEmpty.tipLeft')}
-            <span onClick={onClick} className='cursor-pointer text-primary-600'>{t('runLog.resultEmpty.link')}</span>
+            <span onClick={onClick} className='text-primary-600 cursor-pointer'>{t('runLog.resultEmpty.link')}</span>
             {t('runLog.resultEmpty.tipRight')}
           </div>
         </div>
@@ -56,8 +56,8 @@ const ResultText: FC<ResultTextProps> = ({
             </div>
           )}
           {!!allFiles?.length && allFiles.map(item => (
-            <div key={item.varName} className='px-4 py-2 flex flex-col gap-1 system-xs-regular'>
-              <div className='py-1 text-text-tertiary '>{item.varName}</div>
+            <div key={item.varName} className='system-xs-regular flex flex-col gap-1 px-4 py-2'>
+              <div className='text-text-tertiary py-1 '>{item.varName}</div>
               <FileList
                 files={item.list}
                 showDeleteAction={false}
diff --git a/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx b/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx
index 9c4a987c42..708fd39180 100644
--- a/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx
+++ b/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx
@@ -25,15 +25,15 @@ const RetryLogTrigger = ({
 
   return (
     <Button
-      className='flex items-center justify-between mb-1 w-full'
+      className='mb-1 flex w-full items-center justify-between'
       variant='tertiary'
       onClick={handleShowRetryResultList}
     >
       <div className='flex items-center'>
-        <RiRestartFill className='mr-0.5 w-4 h-4 text-components-button-tertiary-text shrink-0' />
+        <RiRestartFill className='text-components-button-tertiary-text mr-0.5 h-4 w-4 shrink-0' />
         {t('workflow.nodes.common.retry.retries', { num: retryDetail?.length })}
       </div>
-      <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
+      <RiArrowRightSLine className='text-components-button-tertiary-text h-4 w-4 shrink-0' />
     </Button>
   )
 }
diff --git a/web/app/components/workflow/run/retry-log/retry-result-panel.tsx b/web/app/components/workflow/run/retry-log/retry-result-panel.tsx
index a8d171a4fc..3aca3cea12 100644
--- a/web/app/components/workflow/run/retry-log/retry-result-panel.tsx
+++ b/web/app/components/workflow/run/retry-log/retry-result-panel.tsx
@@ -23,14 +23,14 @@ const RetryResultPanel: FC<Props> = ({
   return (
     <div>
       <div
-        className='flex items-center px-4 h-8 text-text-accent-secondary bg-components-panel-bg system-sm-medium cursor-pointer'
+        className='text-text-accent-secondary bg-components-panel-bg system-sm-medium flex h-8 cursor-pointer items-center px-4'
         onClick={(e) => {
           e.stopPropagation()
           e.nativeEvent.stopImmediatePropagation()
           onBack()
         }}
       >
-        <RiArrowLeftLine className='mr-1 w-4 h-4' />
+        <RiArrowLeftLine className='mr-1 h-4 w-4' />
         {t('workflow.singleRun.back')}
       </div>
       <TracingPanel
diff --git a/web/app/components/workflow/run/status-container.tsx b/web/app/components/workflow/run/status-container.tsx
index 296845ca4f..0ef0f27a16 100644
--- a/web/app/components/workflow/run/status-container.tsx
+++ b/web/app/components/workflow/run/status-container.tsx
@@ -17,29 +17,29 @@ const StatusContainer: FC<Props> = ({
   return (
     <div
       className={cn(
-        'relative px-3 py-2.5 rounded-lg border system-xs-regular break-all',
-        status === 'succeeded' && 'border-[rgba(23,178,106,0.8)] bg-workflow-display-success-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-success.svg)] text-text-success',
+        'system-xs-regular relative break-all rounded-lg border px-3 py-2.5',
+        status === 'succeeded' && 'bg-workflow-display-success-bg text-text-success border-[rgba(23,178,106,0.8)] bg-[url(~@/app/components/workflow/run/assets/bg-line-success.svg)]',
         status === 'succeeded' && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(23,178,106,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
         status === 'succeeded' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(23,178,106,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
-        status === 'partial-succeeded' && 'border-[rgba(23,178,106,0.8)] bg-workflow-display-success-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-success.svg)] text-text-success',
+        status === 'partial-succeeded' && 'bg-workflow-display-success-bg text-text-success border-[rgba(23,178,106,0.8)] bg-[url(~@/app/components/workflow/run/assets/bg-line-success.svg)]',
         status === 'partial-succeeded' && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(23,178,106,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
         status === 'partial-succeeded' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(23,178,106,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
-        status === 'failed' && 'border-[rgba(240,68,56,0.8)] bg-workflow-display-error-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-error.svg)] text-text-warning',
+        status === 'failed' && 'bg-workflow-display-error-bg text-text-warning border-[rgba(240,68,56,0.8)] bg-[url(~@/app/components/workflow/run/assets/bg-line-error.svg)]',
         status === 'failed' && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(240,68,56,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
         status === 'failed' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(240,68,56,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
-        status === 'stopped' && 'border-[rgba(247,144,9,0.8)] bg-workflow-display-warning-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-warning.svg)] text-text-destructive',
+        status === 'stopped' && 'bg-workflow-display-warning-bg text-text-destructive border-[rgba(247,144,9,0.8)] bg-[url(~@/app/components/workflow/run/assets/bg-line-warning.svg)]',
         status === 'stopped' && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(247,144,9,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
         status === 'stopped' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(247,144,9,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
-        status === 'exception' && 'border-[rgba(247,144,9,0.8)] bg-workflow-display-warning-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-warning.svg)] text-text-destructive',
+        status === 'exception' && 'bg-workflow-display-warning-bg text-text-destructive border-[rgba(247,144,9,0.8)] bg-[url(~@/app/components/workflow/run/assets/bg-line-warning.svg)]',
         status === 'exception' && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(247,144,9,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
         status === 'exception' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(247,144,9,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
-        status === 'running' && 'border-[rgba(11,165,236,0.8)] bg-workflow-display-normal-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-running.svg)] text-util-colors-blue-light-blue-light-600',
+        status === 'running' && 'bg-workflow-display-normal-bg text-util-colors-blue-light-blue-light-600 border-[rgba(11,165,236,0.8)] bg-[url(~@/app/components/workflow/run/assets/bg-line-running.svg)]',
         status === 'running' && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(11,165,236,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
         status === 'running' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(11,165,236,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
       )}
     >
       <div className={cn(
-        'absolute top-0 left-0 w-[65%] h-[50px] bg-no-repeat',
+        'absolute left-0 top-0 h-[50px] w-[65%] bg-no-repeat',
         theme === Theme.light && 'bg-[url(~@/app/components/workflow/run/assets/highlight.svg)]',
         theme === Theme.dark && 'bg-[url(~@/app/components/workflow/run/assets/highlight-dark.svg)]',
       )}></div>
diff --git a/web/app/components/workflow/run/status.tsx b/web/app/components/workflow/run/status.tsx
index ef67cb5467..b504b580ca 100644
--- a/web/app/components/workflow/run/status.tsx
+++ b/web/app/components/workflow/run/status.tsx
@@ -26,13 +26,13 @@ const StatusPanel: FC<ResultProps> = ({
     <StatusContainer status={status}>
       <div className='flex'>
         <div className={cn(
-          'flex-[33%] max-w-[120px]',
+          'max-w-[120px] flex-[33%]',
           status === 'partial-succeeded' && 'min-w-[140px]',
         )}>
-          <div className='mb-1 text-text-tertiary system-2xs-medium-uppercase'>{t('runLog.resultPanel.status')}</div>
+          <div className='text-text-tertiary system-2xs-medium-uppercase mb-1'>{t('runLog.resultPanel.status')}</div>
           <div
             className={cn(
-              'flex items-center gap-1 system-xs-semibold-uppercase',
+              'system-xs-semibold-uppercase flex items-center gap-1',
               status === 'succeeded' && 'text-util-colors-green-green-600',
               status === 'partial-succeeded' && 'text-util-colors-green-green-600',
               status === 'failed' && 'text-util-colors-red-red-600',
@@ -78,11 +78,11 @@ const StatusPanel: FC<ResultProps> = ({
             )}
           </div>
         </div>
-        <div className='flex-[33%] max-w-[152px]'>
-          <div className='mb-1 text-text-tertiary system-2xs-medium-uppercase'>{t('runLog.resultPanel.time')}</div>
-          <div className='flex items-center gap-1 system-sm-medium text-text-secondary'>
+        <div className='max-w-[152px] flex-[33%]'>
+          <div className='text-text-tertiary system-2xs-medium-uppercase mb-1'>{t('runLog.resultPanel.time')}</div>
+          <div className='system-sm-medium text-text-secondary flex items-center gap-1'>
             {status === 'running' && (
-              <div className='w-16 h-2 rounded-sm bg-text-quaternary' />
+              <div className='bg-text-quaternary h-2 w-16 rounded-sm' />
             )}
             {status !== 'running' && (
               <span>{time ? `${time?.toFixed(3)}s` : '-'}</span>
@@ -90,10 +90,10 @@ const StatusPanel: FC<ResultProps> = ({
           </div>
         </div>
         <div className='flex-[33%]'>
-          <div className='mb-1 text-text-tertiary system-2xs-medium-uppercase'>{t('runLog.resultPanel.tokens')}</div>
-          <div className='flex items-center gap-1 system-sm-medium text-text-secondary'>
+          <div className='text-text-tertiary system-2xs-medium-uppercase mb-1'>{t('runLog.resultPanel.tokens')}</div>
+          <div className='system-sm-medium text-text-secondary flex items-center gap-1'>
             {status === 'running' && (
-              <div className='w-20 h-2 rounded-sm bg-text-quaternary' />
+              <div className='bg-text-quaternary h-2 w-20 rounded-sm' />
             )}
             {status !== 'running' && (
               <span>{`${tokens || 0} Tokens`}</span>
@@ -103,12 +103,12 @@ const StatusPanel: FC<ResultProps> = ({
       </div>
       {status === 'failed' && error && (
         <>
-          <div className='my-2 h-[0.5px] bg-divider-subtle'/>
+          <div className='bg-divider-subtle my-2 h-[0.5px]'/>
           <div className='system-xs-regular text-text-destructive'>{error}</div>
           {
             !!exceptionCounts && (
               <>
-                <div className='my-2 h-[0.5px] bg-divider-subtle'/>
+                <div className='bg-divider-subtle my-2 h-[0.5px]'/>
                 <div className='system-xs-regular text-text-destructive'>
                   {t('workflow.nodes.common.errorHandle.partialSucceeded.tip', { num: exceptionCounts })}
                 </div>
@@ -120,7 +120,7 @@ const StatusPanel: FC<ResultProps> = ({
       {
         status === 'partial-succeeded' && !!exceptionCounts && (
           <>
-            <div className='my-2 h-[0.5px] bg-divider-deep'/>
+            <div className='bg-divider-deep my-2 h-[0.5px]'/>
             <div className='system-xs-medium text-text-warning'>
               {t('workflow.nodes.common.errorHandle.partialSucceeded.tip', { num: exceptionCounts })}
             </div>
@@ -130,7 +130,7 @@ const StatusPanel: FC<ResultProps> = ({
       {
         status === 'exception' && (
           <>
-            <div className='my-2 h-[0.5px] bg-divider-deep'/>
+            <div className='bg-divider-deep my-2 h-[0.5px]'/>
             <div className='system-xs-medium text-text-warning'>
               {error}
               <a
diff --git a/web/app/components/workflow/run/tracing-panel.tsx b/web/app/components/workflow/run/tracing-panel.tsx
index 7739c8f836..714fe24c09 100644
--- a/web/app/components/workflow/run/tracing-panel.tsx
+++ b/web/app/components/workflow/run/tracing-panel.tsx
@@ -96,32 +96,32 @@ const TracingPanel: FC<TracingPanelProps> = ({
       return (
         <div
           key={node.id}
-          className="ml-4 mb-2 relative"
+          className="relative mb-2 ml-4"
           data-parallel-id={node.id}
           onMouseEnter={() => handleParallelMouseEnter(node.id)}
           onMouseLeave={handleParallelMouseLeave}
         >
-          <div className="flex items-center mb-1">
+          <div className="mb-1 flex items-center">
             <button
               onClick={() => toggleCollapse(node.id)}
               className={cn(
                 'mr-2 transition-colors',
-                isHovered ? 'rounded border-components-button-primary-border bg-components-button-primary-bg text-text-primary-on-surface' : 'text-text-secondary hover:text-text-primary',
+                isHovered ? 'border-components-button-primary-border bg-components-button-primary-bg text-text-primary-on-surface rounded' : 'text-text-secondary hover:text-text-primary',
               )}
             >
-              {isHovered ? <RiArrowDownSLine className="w-3 h-3" /> : <RiMenu4Line className="w-3 h-3 text-text-tertiary" />}
+              {isHovered ? <RiArrowDownSLine className="h-3 w-3" /> : <RiMenu4Line className="text-text-tertiary h-3 w-3" />}
             </button>
             <div className="system-xs-semibold-uppercase text-text-secondary flex items-center">
               <span>{parallelDetail.parallelTitle}</span>
             </div>
             <div
-              className="mx-2 grow h-px bg-divider-subtle"
+              className="bg-divider-subtle mx-2 h-px grow"
               style={{ background: 'linear-gradient(to right, rgba(16, 24, 40, 0.08), rgba(255, 255, 255, 0)' }}
             ></div>
           </div>
-          <div className={`pl-2 relative ${isCollapsed ? 'hidden' : ''}`}>
+          <div className={`relative pl-2 ${isCollapsed ? 'hidden' : ''}`}>
             <div className={cn(
-              'absolute top-0 bottom-0 left-[5px] w-[2px]',
+              'absolute bottom-0 left-[5px] top-0 w-[2px]',
               isHovered ? 'bg-text-accent-secondary' : 'bg-divider-subtle',
             )}></div>
             {parallelDetail.children!.map(renderNode)}
@@ -133,7 +133,7 @@ const TracingPanel: FC<TracingPanelProps> = ({
       const isHovered = hoveredParallel === node.id
       return (
         <div key={node.id}>
-          <div className={cn('pl-4 -mb-1.5 system-2xs-medium-uppercase', isHovered ? 'text-text-tertiary' : 'text-text-quaternary')}>
+          <div className={cn('system-2xs-medium-uppercase -mb-1.5 pl-4', isHovered ? 'text-text-tertiary' : 'text-text-quaternary')}>
             {node?.parallelDetail?.branchTitle}
           </div>
           <NodePanel
diff --git a/web/app/components/workflow/shortcuts-name.tsx b/web/app/components/workflow/shortcuts-name.tsx
index cfb5c33daf..7822f1ca75 100644
--- a/web/app/components/workflow/shortcuts-name.tsx
+++ b/web/app/components/workflow/shortcuts-name.tsx
@@ -19,7 +19,7 @@ const ShortcutsName = ({
         keys.map(key => (
           <div
             key={key}
-            className='w-4 h-4 flex items-center justify-center bg-components-kbd-bg-gray rounded-[4px] system-kbd capitalize'
+            className='bg-components-kbd-bg-gray system-kbd flex h-4 w-4 items-center justify-center rounded-[4px] capitalize'
           >
             {getKeyboardKeyNameBySystem(key)}
           </div>
diff --git a/web/app/components/workflow/update-dsl-modal.tsx b/web/app/components/workflow/update-dsl-modal.tsx
index fc65806487..7b85bb7fa3 100644
--- a/web/app/components/workflow/update-dsl-modal.tsx
+++ b/web/app/components/workflow/update-dsl-modal.tsx
@@ -219,32 +219,32 @@ const UpdateDSLModal = ({
   return (
     <>
       <Modal
-        className='p-6 w-[520px] rounded-2xl'
+        className='w-[520px] rounded-2xl p-6'
         isShow={show}
         onClose={onCancel}
       >
-        <div className='flex items-center justify-between mb-3'>
+        <div className='mb-3 flex items-center justify-between'>
           <div className='title-2xl-semi-bold text-text-primary'>{t('workflow.common.importDSL')}</div>
-          <div className='flex items-center justify-center w-[22px] h-[22px] cursor-pointer' onClick={onCancel}>
-            <RiCloseLine className='w-[18px] h-[18px] text-text-tertiary' />
+          <div className='flex h-[22px] w-[22px] cursor-pointer items-center justify-center' onClick={onCancel}>
+            <RiCloseLine className='text-text-tertiary h-[18px] w-[18px]' />
           </div>
         </div>
-        <div className='flex relative p-2 mb-2 gap-0.5 grow rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xs overflow-hidden'>
-          <div className='absolute top-0 left-0 w-full h-full opacity-40 bg-toast-warning-bg' />
-          <div className='flex p-1 justify-center items-start'>
-            <RiAlertFill className='w-4 h-4 shrink-0 text-text-warning-secondary' />
+        <div className='border-components-panel-border bg-components-panel-bg-blur shadow-xs relative mb-2 flex grow gap-0.5 overflow-hidden rounded-xl border-[0.5px] p-2'>
+          <div className='bg-toast-warning-bg absolute left-0 top-0 h-full w-full opacity-40' />
+          <div className='flex items-start justify-center p-1'>
+            <RiAlertFill className='text-text-warning-secondary h-4 w-4 shrink-0' />
           </div>
-          <div className='flex py-1 flex-col items-start gap-0.5 grow'>
+          <div className='flex grow flex-col items-start gap-0.5 py-1'>
             <div className='text-text-primary system-xs-medium whitespace-pre-line'>{t('workflow.common.importDSLTip')}</div>
-            <div className='flex pt-1 pb-0.5 items-start gap-1 self-stretch'>
+            <div className='flex items-start gap-1 self-stretch pb-0.5 pt-1'>
               <Button
                 size='small'
                 variant='secondary'
                 className='z-[1000]'
                 onClick={onBackup}
               >
-                <RiFileDownloadLine className='w-3.5 h-3.5 text-components-button-secondary-text' />
-                <div className='flex px-[3px] justify-center items-center gap-1'>
+                <RiFileDownloadLine className='text-components-button-secondary-text h-3.5 w-3.5' />
+                <div className='flex items-center justify-center gap-1 px-[3px]'>
                   {t('workflow.common.backupCurrentDraft')}
                 </div>
               </Button>
@@ -252,10 +252,10 @@ const UpdateDSLModal = ({
           </div>
         </div>
         <div>
-          <div className='pt-2 text-text-primary system-md-semibold'>
+          <div className='text-text-primary system-md-semibold pt-2'>
             {t('workflow.common.chooseDSL')}
           </div>
-          <div className='flex w-full py-4 flex-col justify-center items-start gap-4 self-stretch'>
+          <div className='flex w-full flex-col items-start justify-center gap-4 self-stretch py-4'>
             <Uploader
               file={currentFile}
               updateFile={handleFile}
@@ -263,7 +263,7 @@ const UpdateDSLModal = ({
             />
           </div>
         </div>
-        <div className='flex pt-5 gap-2 items-center justify-end self-stretch'>
+        <div className='flex items-center justify-end gap-2 self-stretch pt-5'>
           <Button onClick={onCancel}>{t('app.newApp.Cancel')}</Button>
           <Button
             disabled={!currentFile || loading}
@@ -280,9 +280,9 @@ const UpdateDSLModal = ({
         onClose={() => setShowErrorModal(false)}
         className='w-[480px]'
       >
-        <div className='flex pb-4 flex-col items-start gap-2 self-stretch'>
+        <div className='flex flex-col items-start gap-2 self-stretch pb-4'>
           <div className='text-text-primary title-2xl-semi-bold'>{t('app.newApp.appCreateDSLErrorTitle')}</div>
-          <div className='flex grow flex-col text-text-secondary system-md-regular'>
+          <div className='text-text-secondary system-md-regular flex grow flex-col'>
             <div>{t('app.newApp.appCreateDSLErrorPart1')}</div>
             <div>{t('app.newApp.appCreateDSLErrorPart2')}</div>
             <br />
@@ -290,7 +290,7 @@ const UpdateDSLModal = ({
             <div>{t('app.newApp.appCreateDSLErrorPart4')}<span className='system-md-medium'>{versions?.systemVersion}</span></div>
           </div>
         </div>
-        <div className='flex pt-6 justify-end items-start gap-2 self-stretch'>
+        <div className='flex items-start justify-end gap-2 self-stretch pt-6'>
           <Button variant='secondary' onClick={() => setShowErrorModal(false)}>{t('app.newApp.Cancel')}</Button>
           <Button variant='primary' destructive onClick={onUpdateDSLConfirm}>{t('app.newApp.Confirm')}</Button>
         </div>
diff --git a/web/app/forgot-password/ChangePasswordForm.tsx b/web/app/forgot-password/ChangePasswordForm.tsx
index 2f64cd83ac..81c51ad90d 100644
--- a/web/app/forgot-password/ChangePasswordForm.tsx
+++ b/web/app/forgot-password/ChangePasswordForm.tsx
@@ -77,7 +77,7 @@ const ChangePasswordForm = () => {
   return (
     <div className={
       cn(
-        'flex flex-col items-center w-full grow justify-center',
+        'flex w-full grow flex-col items-center justify-center',
         'px-6',
         'md:px-[108px]',
       )
@@ -85,11 +85,11 @@ const ChangePasswordForm = () => {
       {!verifyTokenRes && <Loading />}
       {verifyTokenRes && !verifyTokenRes.is_valid && (
         <div className="flex flex-col md:w-[400px]">
-          <div className="w-full mx-auto">
-            <div className="mb-3 flex justify-center items-center w-20 h-20 p-5 rounded-[20px] border border-gray-100 shadow-lg text-[40px] font-bold">🤷‍♂️</div>
+          <div className="mx-auto w-full">
+            <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-gray-100 p-5 text-[40px] font-bold shadow-lg">🤷‍♂️</div>
             <h2 className="text-[32px] font-bold text-gray-900">{t('login.invalid')}</h2>
           </div>
-          <div className="w-full mx-auto mt-6">
+          <div className="mx-auto mt-6 w-full">
             <Button variant='primary' className='w-full !text-sm'>
               <a href="https://dify.ai">{t('login.explore')}</a>
             </Button>
@@ -98,7 +98,7 @@ const ChangePasswordForm = () => {
       )}
       {verifyTokenRes && verifyTokenRes.is_valid && !showSuccess && (
         <div className='flex flex-col md:w-[400px]'>
-          <div className="w-full mx-auto">
+          <div className="mx-auto w-full">
             <h2 className="text-[32px] font-bold text-gray-900">
               {t('login.changePassword')}
             </h2>
@@ -107,7 +107,7 @@ const ChangePasswordForm = () => {
             </p>
           </div>
 
-          <div className="w-full mx-auto mt-6">
+          <div className="mx-auto mt-6 w-full">
             <div className="bg-white">
               {/* Password */}
               <div className='mb-5'>
@@ -122,7 +122,7 @@ const ChangePasswordForm = () => {
                   placeholder={t('login.passwordPlaceholder') || ''}
                   className='mt-1'
                 />
-                <div className='mt-1 text-xs text-text-secondary'>{t('login.error.passwordInvalid')}</div>
+                <div className='text-text-secondary mt-1 text-xs'>{t('login.error.passwordInvalid')}</div>
               </div>
               {/* Confirm Password */}
               <div className='mb-5'>
@@ -153,15 +153,15 @@ const ChangePasswordForm = () => {
       )}
       {verifyTokenRes && verifyTokenRes.is_valid && showSuccess && (
         <div className="flex flex-col md:w-[400px]">
-          <div className="w-full mx-auto">
-            <div className="mb-3 flex justify-center items-center w-20 h-20 p-5 rounded-[20px] border border-gray-100 shadow-lg text-[40px] font-bold">
-              <CheckCircleIcon className='w-10 h-10 text-[#039855]' />
+          <div className="mx-auto w-full">
+            <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-gray-100 p-5 text-[40px] font-bold shadow-lg">
+              <CheckCircleIcon className='h-10 w-10 text-[#039855]' />
             </div>
             <h2 className="text-[32px] font-bold text-gray-900">
               {t('login.passwordChangedTip')}
             </h2>
           </div>
-          <div className="w-full mx-auto mt-6">
+          <div className="mx-auto mt-6 w-full">
             <Button variant='primary' className='w-full'>
               <a href="/signin">{t('login.passwordChanged')}</a>
             </Button>
diff --git a/web/app/forgot-password/ForgotPasswordForm.tsx b/web/app/forgot-password/ForgotPasswordForm.tsx
index df744924da..e9ff7291f0 100644
--- a/web/app/forgot-password/ForgotPasswordForm.tsx
+++ b/web/app/forgot-password/ForgotPasswordForm.tsx
@@ -89,7 +89,7 @@ const ForgotPasswordForm = () => {
             {isEmailSent ? t('login.checkEmailForResetLink') : t('login.forgotPasswordDesc')}
           </p>
         </div>
-        <div className="grow mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="mt-8 grow sm:mx-auto sm:w-full sm:max-w-md">
           <div className="bg-white ">
             <form>
               {!isEmailSent && (
@@ -103,7 +103,7 @@ const ForgotPasswordForm = () => {
                       {...register('email')}
                       placeholder={t('login.emailPlaceholder') || ''}
                     />
-                    {errors.email && <span className='text-red-400 text-sm'>{t(`${errors.email?.message}`)}</span>}
+                    {errors.email && <span className='text-sm text-red-400'>{t(`${errors.email?.message}`)}</span>}
                   </div>
                 </div>
               )}
diff --git a/web/app/init/InitPasswordPopup.tsx b/web/app/init/InitPasswordPopup.tsx
index cbf25f43b2..16c3e2440d 100644
--- a/web/app/init/InitPasswordPopup.tsx
+++ b/web/app/init/InitPasswordPopup.tsx
@@ -52,24 +52,24 @@ const InitPasswordPopup = () => {
       ? <Loading />
       : <div>
         {!validated && (
-          <div className="block mx-12 min-w-28">
+          <div className="mx-12 block min-w-28">
             <div className="mb-4">
               <label htmlFor="password" className="block text-sm font-medium text-gray-700">
                 {t('login.adminInitPassword')}
 
               </label>
-              <div className="mt-1 relative rounded-md shadow-sm">
+              <div className="relative mt-1 rounded-md shadow-sm">
                 <input
                   id="password"
                   type="password"
                   value={password}
                   onChange={e => setPassword(e.target.value)}
-                  className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                  className="block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 shadow-sm placeholder:text-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
                 />
               </div>
             </div>
             <div className="flex flex-row flex-wrap justify-stretch p-0">
-              <Button variant="primary" onClick={handleValidation} className="basis-full min-w-28">
+              <Button variant="primary" onClick={handleValidation} className="min-w-28 basis-full">
                 {t('login.validate')}
               </Button>
             </div>
diff --git a/web/app/init/page.tsx b/web/app/init/page.tsx
index 37ac180505..aea25a41ed 100644
--- a/web/app/init/page.tsx
+++ b/web/app/init/page.tsx
@@ -12,7 +12,7 @@ const Install = () => {
       'gap-x-20',
       'justify-center lg:justify-start',
     )}>
-      <div className="block m-auto w-96">
+      <div className="m-auto block w-96">
         <InitPasswordPopup />
       </div>
     </div>
diff --git a/web/app/install/installForm.tsx b/web/app/install/installForm.tsx
index abf377e389..9e75041786 100644
--- a/web/app/install/installForm.tsx
+++ b/web/app/install/installForm.tsx
@@ -88,7 +88,7 @@ const InstallForm = () => {
           mt-1 text-sm text-gray-600
         '>{t('login.setAdminAccountDesc')}</p>
         </div>
-        <div className="grow mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="mt-8 grow sm:mx-auto sm:w-full sm:max-w-md">
           <div className="bg-white ">
             <form onSubmit={handleSubmit(onSubmit)}>
               <div className='mb-5'>
@@ -99,9 +99,9 @@ const InstallForm = () => {
                   <input
                     {...register('email')}
                     placeholder={t('login.emailPlaceholder') || ''}
-                    className={'appearance-none block w-full rounded-lg pl-[14px] px-3 py-2 border border-gray-200 hover:border-gray-300 hover:shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 placeholder-gray-400 caret-primary-600 sm:text-sm'}
+                    className={'focus:ring-primary-500 focus:border-primary-500 caret-primary-600 block w-full appearance-none rounded-lg border border-gray-200 px-3 py-2 pl-[14px] placeholder:text-gray-400 hover:border-gray-300 hover:shadow-sm focus:outline-none sm:text-sm'}
                   />
-                  {errors.email && <span className='text-red-400 text-sm'>{t(`${errors.email?.message}`)}</span>}
+                  {errors.email && <span className='text-sm text-red-400'>{t(`${errors.email?.message}`)}</span>}
                 </div>
 
               </div>
@@ -110,33 +110,33 @@ const InstallForm = () => {
                 <label htmlFor="name" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
                   {t('login.name')}
                 </label>
-                <div className="mt-1 relative rounded-md shadow-sm">
+                <div className="relative mt-1 rounded-md shadow-sm">
                   <input
                     {...register('name')}
                     placeholder={t('login.namePlaceholder') || ''}
-                    className={'appearance-none block w-full rounded-lg pl-[14px] px-3 py-2 border border-gray-200 hover:border-gray-300 hover:shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 placeholder-gray-400 caret-primary-600 sm:text-sm pr-10'}
+                    className={'focus:ring-primary-500 focus:border-primary-500 caret-primary-600 block w-full appearance-none rounded-lg border border-gray-200 px-3 py-2 pl-[14px] pr-10 placeholder:text-gray-400 hover:border-gray-300 hover:shadow-sm focus:outline-none sm:text-sm'}
                   />
                 </div>
-                {errors.name && <span className='text-red-400 text-sm'>{t(`${errors.name.message}`)}</span>}
+                {errors.name && <span className='text-sm text-red-400'>{t(`${errors.name.message}`)}</span>}
               </div>
 
               <div className='mb-5'>
                 <label htmlFor="password" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
                   {t('login.password')}
                 </label>
-                <div className="mt-1 relative rounded-md shadow-sm">
+                <div className="relative mt-1 rounded-md shadow-sm">
                   <input
                     {...register('password')}
                     type={showPassword ? 'text' : 'password'}
                     placeholder={t('login.passwordPlaceholder') || ''}
-                    className={'appearance-none block w-full rounded-lg pl-[14px] px-3 py-2 border border-gray-200 hover:border-gray-300 hover:shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 placeholder-gray-400 caret-primary-600 sm:text-sm pr-10'}
+                    className={'focus:ring-primary-500 focus:border-primary-500 caret-primary-600 block w-full appearance-none rounded-lg border border-gray-200 px-3 py-2 pl-[14px] pr-10 placeholder:text-gray-400 hover:border-gray-300 hover:shadow-sm focus:outline-none sm:text-sm'}
                   />
 
                   <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                     <button
                       type="button"
                       onClick={() => setShowPassword(!showPassword)}
-                      className="text-gray-400 hover:text-gray-500 focus:outline-none focus:text-gray-500"
+                      className="text-gray-400 hover:text-gray-500 focus:text-gray-500 focus:outline-none"
                     >
                       {showPassword ? '👀' : '😝'}
                     </button>
@@ -154,7 +154,7 @@ const InstallForm = () => {
                 </Button>
               </div>
             </form>
-            <div className="block w-full mt-2 text-xs text-gray-600">
+            <div className="mt-2 block w-full text-xs text-gray-600">
               {t('login.license.tip')}
               &nbsp;
               <Link
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 02fb13388a..1af436bd6a 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -35,7 +35,7 @@ const LocaleLayout = async ({
         <meta name="apple-mobile-web-app-status-bar-style" content="default" />
       </head>
       <body
-        className="h-full select-auto color-scheme"
+        className="color-scheme h-full select-auto"
         data-api-prefix={process.env.NEXT_PUBLIC_API_PREFIX}
         data-pubic-api-prefix={process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX}
         data-marketplace-api-prefix={process.env.NEXT_PUBLIC_MARKETPLACE_API_PREFIX}
diff --git a/web/app/page.tsx b/web/app/page.tsx
index c63d9d1234..c5f5a9580b 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -3,7 +3,7 @@ import Loading from '@/app/components/base/loading'
 
 const Home = async () => {
   return (
-    <div className="flex flex-col justify-center min-h-screen py-12 sm:px-6 lg:px-8">
+    <div className="flex min-h-screen flex-col justify-center py-12 sm:px-6 lg:px-8">
 
       <div className="sm:mx-auto sm:w-full sm:max-w-md">
         <Loading type='area' />
diff --git a/web/app/reset-password/check-code/page.tsx b/web/app/reset-password/check-code/page.tsx
index ca53b68750..fcee36c101 100644
--- a/web/app/reset-password/check-code/page.tsx
+++ b/web/app/reset-password/check-code/page.tsx
@@ -60,12 +60,12 @@ export default function CheckCode() {
   }
 
   return <div className='flex flex-col gap-3'>
-    <div className='bg-background-default-dodge text-text-accent-light-mode-only border border-components-panel-border-subtle shadow-lg inline-flex w-14 h-14 justify-center items-center rounded-2xl'>
-      <RiMailSendFill className='w-6 h-6 text-2xl' />
+    <div className='bg-background-default-dodge text-text-accent-light-mode-only border-components-panel-border-subtle inline-flex h-14 w-14 items-center justify-center rounded-2xl border shadow-lg'>
+      <RiMailSendFill className='h-6 w-6 text-2xl' />
     </div>
-    <div className='pt-2 pb-4'>
+    <div className='pb-4 pt-2'>
       <h2 className='title-4xl-semi-bold text-text-primary'>{t('login.checkCode.checkYourEmail')}</h2>
-      <p className='mt-2 body-md-regular text-text-secondary'>
+      <p className='body-md-regular text-text-secondary mt-2'>
         <span dangerouslySetInnerHTML={{ __html: t('login.checkCode.tips', { email }) as string }}></span>
         <br />
         {t('login.checkCode.validTime')}
@@ -80,13 +80,13 @@ export default function CheckCode() {
       <Countdown onResend={resendCode} />
     </form>
     <div className='py-2'>
-      <div className='bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent h-px'></div>
+      <div className='from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent h-px bg-gradient-to-r'></div>
     </div>
-    <div onClick={() => router.back()} className='flex items-center justify-center h-9 text-text-tertiary cursor-pointer'>
-      <div className='inline-block p-1 rounded-full bg-background-default-dimm'>
+    <div onClick={() => router.back()} className='text-text-tertiary flex h-9 cursor-pointer items-center justify-center'>
+      <div className='bg-background-default-dimm inline-block rounded-full p-1'>
         <RiArrowLeftLine size={12} />
       </div>
-      <span className='ml-2 system-xs-regular'>{t('login.back')}</span>
+      <span className='system-xs-regular ml-2'>{t('login.back')}</span>
     </div>
   </div>
 }
diff --git a/web/app/reset-password/layout.tsx b/web/app/reset-password/layout.tsx
index 16d8642ed2..3e3a902e52 100644
--- a/web/app/reset-password/layout.tsx
+++ b/web/app/reset-password/layout.tsx
@@ -7,21 +7,21 @@ export default async function SignInLayout({ children }: any) {
   return <>
     <div className={cn(
       style.background,
-      'flex w-full min-h-screen',
+      'flex min-h-screen w-full',
       'sm:p-4 lg:p-8',
       'gap-x-20',
       'justify-center lg:justify-start',
     )}>
       <div className={
         cn(
-          'flex w-full flex-col bg-white shadow rounded-2xl shrink-0',
+          'flex w-full shrink-0 flex-col rounded-2xl bg-white shadow',
           'space-between',
         )
       }>
         <Header />
         <div className={
           cn(
-            'flex flex-col items-center w-full grow justify-center',
+            'flex w-full grow flex-col items-center justify-center',
             'px-6',
             'md:px-[108px]',
           )
@@ -30,7 +30,7 @@ export default async function SignInLayout({ children }: any) {
             {children}
           </div>
         </div>
-        <div className='px-8 py-6 system-xs-regular text-text-tertiary'>
+        <div className='system-xs-regular text-text-tertiary px-8 py-6'>
           © {new Date().getFullYear()} LangGenius, Inc. All rights reserved.
         </div>
       </div>
diff --git a/web/app/reset-password/page.tsx b/web/app/reset-password/page.tsx
index 65f1db3fb5..9f7a8975b6 100644
--- a/web/app/reset-password/page.tsx
+++ b/web/app/reset-password/page.tsx
@@ -66,12 +66,12 @@ export default function CheckCode() {
   }
 
   return <div className='flex flex-col gap-3'>
-    <div className='bg-background-default-dodge border border-components-panel-border-subtle shadow-lg inline-flex w-14 h-14 justify-center items-center rounded-2xl'>
-      <RiLockPasswordLine className='w-6 h-6 text-2xl text-text-accent-light-mode-only' />
+    <div className='bg-background-default-dodge border-components-panel-border-subtle inline-flex h-14 w-14 items-center justify-center rounded-2xl border shadow-lg'>
+      <RiLockPasswordLine className='text-text-accent-light-mode-only h-6 w-6 text-2xl' />
     </div>
-    <div className='pt-2 pb-4'>
+    <div className='pb-4 pt-2'>
       <h2 className='title-4xl-semi-bold text-text-primary'>{t('login.resetPassword')}</h2>
-      <p className='body-md-regular mt-2 text-text-secondary'>
+      <p className='body-md-regular text-text-secondary mt-2'>
         {t('login.resetPasswordDesc')}
       </p>
     </div>
@@ -79,7 +79,7 @@ export default function CheckCode() {
     <form onSubmit={() => { }}>
       <input type='text' className='hidden' />
       <div className='mb-2'>
-        <label htmlFor="email" className='my-2 system-md-semibold text-text-secondary'>{t('login.email')}</label>
+        <label htmlFor="email" className='system-md-semibold text-text-secondary my-2'>{t('login.email')}</label>
         <div className='mt-1'>
           <Input id='email' type="email" disabled={loading} value={email} placeholder={t('login.emailPlaceholder') as string} onChange={e => setEmail(e.target.value)} />
         </div>
@@ -89,13 +89,13 @@ export default function CheckCode() {
       </div>
     </form>
     <div className='py-2'>
-      <div className='bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent h-px'></div>
+      <div className='from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent h-px bg-gradient-to-r'></div>
     </div>
-    <Link href={`/signin?${searchParams.toString()}`} className='flex items-center justify-center h-9 text-text-tertiary'>
-      <div className='inline-block p-1 rounded-full bg-background-default-dimm'>
+    <Link href={`/signin?${searchParams.toString()}`} className='text-text-tertiary flex h-9 items-center justify-center'>
+      <div className='bg-background-default-dimm inline-block rounded-full p-1'>
         <RiArrowLeftLine size={12} />
       </div>
-      <span className='ml-2 system-xs-regular'>{t('login.backToLogin')}</span>
+      <span className='system-xs-regular ml-2'>{t('login.backToLogin')}</span>
     </Link>
   </div>
 }
diff --git a/web/app/reset-password/set-password/page.tsx b/web/app/reset-password/set-password/page.tsx
index 7948c59a9a..dc3ae079a1 100644
--- a/web/app/reset-password/set-password/page.tsx
+++ b/web/app/reset-password/set-password/page.tsx
@@ -88,27 +88,27 @@ const ChangePasswordForm = () => {
   return (
     <div className={
       cn(
-        'flex flex-col items-center w-full grow justify-center',
+        'flex w-full grow flex-col items-center justify-center',
         'px-6',
         'md:px-[108px]',
       )
     }>
       {!showSuccess && (
         <div className='flex flex-col md:w-[400px]'>
-          <div className="w-full mx-auto">
+          <div className="mx-auto w-full">
             <h2 className="title-4xl-semi-bold text-text-primary">
               {t('login.changePassword')}
             </h2>
-            <p className='mt-2 body-md-regular text-text-secondary'>
+            <p className='body-md-regular text-text-secondary mt-2'>
               {t('login.changePasswordTip')}
             </p>
           </div>
 
-          <div className="w-full mx-auto mt-6">
+          <div className="mx-auto mt-6 w-full">
             <div className="bg-white">
               {/* Password */}
               <div className='mb-5'>
-                <label htmlFor="password" className="my-2 system-md-semibold text-text-secondary">
+                <label htmlFor="password" className="system-md-semibold text-text-secondary my-2">
                   {t('common.account.newPassword')}
                 </label>
                 <div className='relative mt-1'>
@@ -129,11 +129,11 @@ const ChangePasswordForm = () => {
                     </Button>
                   </div>
                 </div>
-                <div className='mt-1 body-xs-regular text-text-secondary'>{t('login.error.passwordInvalid')}</div>
+                <div className='body-xs-regular text-text-secondary mt-1'>{t('login.error.passwordInvalid')}</div>
               </div>
               {/* Confirm Password */}
               <div className='mb-5'>
-                <label htmlFor="confirmPassword" className="my-2 system-md-semibold text-text-secondary">
+                <label htmlFor="confirmPassword" className="system-md-semibold text-text-secondary my-2">
                   {t('common.account.confirmPassword')}
                 </label>
                 <div className='relative mt-1'>
@@ -170,15 +170,15 @@ const ChangePasswordForm = () => {
       )}
       {showSuccess && (
         <div className="flex flex-col md:w-[400px]">
-          <div className="w-full mx-auto">
-            <div className="mb-3 flex justify-center items-center w-14 h-14 rounded-2xl border border-components-panel-border-subtle shadow-lg font-bold">
-              <RiCheckboxCircleFill className='w-6 h-6 text-text-success' />
+          <div className="mx-auto w-full">
+            <div className="border-components-panel-border-subtle mb-3 flex h-14 w-14 items-center justify-center rounded-2xl border font-bold shadow-lg">
+              <RiCheckboxCircleFill className='text-text-success h-6 w-6' />
             </div>
             <h2 className="title-4xl-semi-bold text-text-primary">
               {t('login.passwordChangedTip')}
             </h2>
           </div>
-          <div className="w-full mx-auto mt-6">
+          <div className="mx-auto mt-6 w-full">
             <Button variant='primary' className='w-full' onClick={() => {
               setLeftTime(undefined)
               router.replace(getSignInUrl())
diff --git a/web/app/signin/_header.tsx b/web/app/signin/_header.tsx
index 9d03f18ac4..c7b1e67092 100644
--- a/web/app/signin/_header.tsx
+++ b/web/app/signin/_header.tsx
@@ -10,7 +10,7 @@ import LogoSite from '@/app/components/base/logo/logo-site'
 const Header = () => {
   const { locale, setLocaleOnClient } = useContext(I18n)
 
-  return <div className='flex items-center justify-between p-6 w-full'>
+  return <div className='flex w-full items-center justify-between p-6'>
     <LogoSite />
     <Select
       value={locale}
diff --git a/web/app/signin/check-code/page.tsx b/web/app/signin/check-code/page.tsx
index 4767308f72..66bbade921 100644
--- a/web/app/signin/check-code/page.tsx
+++ b/web/app/signin/check-code/page.tsx
@@ -65,12 +65,12 @@ export default function CheckCode() {
   }
 
   return <div className='flex flex-col gap-3'>
-    <div className='bg-background-default-dodge border border-components-panel-border-subtle shadow-lg inline-flex w-14 h-14 justify-center items-center rounded-2xl'>
-      <RiMailSendFill className='w-6 h-6 text-2xl text-text-accent-light-mode-only' />
+    <div className='bg-background-default-dodge border-components-panel-border-subtle inline-flex h-14 w-14 items-center justify-center rounded-2xl border shadow-lg'>
+      <RiMailSendFill className='text-text-accent-light-mode-only h-6 w-6 text-2xl' />
     </div>
-    <div className='pt-2 pb-4'>
+    <div className='pb-4 pt-2'>
       <h2 className='title-4xl-semi-bold text-text-primary'>{t('login.checkCode.checkYourEmail')}</h2>
-      <p className='body-md-regular mt-2 text-text-secondary'>
+      <p className='body-md-regular text-text-secondary mt-2'>
         <span dangerouslySetInnerHTML={{ __html: t('login.checkCode.tips', { email }) as string }}></span>
         <br />
         {t('login.checkCode.validTime')}
@@ -78,19 +78,19 @@ export default function CheckCode() {
     </div>
 
     <form action="">
-      <label htmlFor="code" className='system-md-semibold mb-1 text-text-secondary'>{t('login.checkCode.verificationCode')}</label>
+      <label htmlFor="code" className='system-md-semibold text-text-secondary mb-1'>{t('login.checkCode.verificationCode')}</label>
       <Input value={code} onChange={e => setVerifyCode(e.target.value)} max-length={6} className='mt-1' placeholder={t('login.checkCode.verificationCodePlaceholder') as string} />
       <Button loading={loading} disabled={loading} className='my-3 w-full' variant='primary' onClick={verify}>{t('login.checkCode.verify')}</Button>
       <Countdown onResend={resendCode} />
     </form>
     <div className='py-2'>
-      <div className='bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent h-px'></div>
+      <div className='from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent h-px bg-gradient-to-r'></div>
     </div>
-    <div onClick={() => router.back()} className='flex items-center justify-center h-9 text-text-tertiary cursor-pointer'>
-      <div className='inline-block p-1 rounded-full bg-background-default-dimm'>
+    <div onClick={() => router.back()} className='text-text-tertiary flex h-9 cursor-pointer items-center justify-center'>
+      <div className='bg-background-default-dimm inline-block rounded-full p-1'>
         <RiArrowLeftLine size={12} />
       </div>
-      <span className='ml-2 system-xs-regular'>{t('login.back')}</span>
+      <span className='system-xs-regular ml-2'>{t('login.back')}</span>
     </div>
   </div>
 }
diff --git a/web/app/signin/components/mail-and-code-auth.tsx b/web/app/signin/components/mail-and-code-auth.tsx
index 7225b094d4..c3ebc7025a 100644
--- a/web/app/signin/components/mail-and-code-auth.tsx
+++ b/web/app/signin/components/mail-and-code-auth.tsx
@@ -58,7 +58,7 @@ export default function MailAndCodeAuth({ isInvite }: MailAndCodeAuthProps) {
   return (<form onSubmit={() => { }}>
     <input type='text' className='hidden' />
     <div className='mb-2'>
-      <label htmlFor="email" className='my-2 system-md-semibold text-text-secondary'>{t('login.email')}</label>
+      <label htmlFor="email" className='system-md-semibold text-text-secondary my-2'>{t('login.email')}</label>
       <div className='mt-1'>
         <Input id='email' type="email" disabled={isInvite} value={email} placeholder={t('login.emailPlaceholder') as string} onChange={e => setEmail(e.target.value)} />
       </div>
diff --git a/web/app/signin/components/mail-and-password-auth.tsx b/web/app/signin/components/mail-and-password-auth.tsx
index 97f8bd1bec..a61b14e60d 100644
--- a/web/app/signin/components/mail-and-password-auth.tsx
+++ b/web/app/signin/components/mail-and-password-auth.tsx
@@ -105,7 +105,7 @@ export default function MailAndPasswordAuth({ isInvite, isEmailSetup, allowRegis
 
   return <form onSubmit={() => { }}>
     <div className='mb-3'>
-      <label htmlFor="email" className="my-2 system-md-semibold text-text-secondary">
+      <label htmlFor="email" className="system-md-semibold text-text-secondary my-2">
         {t('login.email')}
       </label>
       <div className="mt-1">
diff --git a/web/app/signin/components/sso-auth.tsx b/web/app/signin/components/sso-auth.tsx
index fb303b93e2..d23c2d2fed 100644
--- a/web/app/signin/components/sso-auth.tsx
+++ b/web/app/signin/components/sso-auth.tsx
@@ -64,7 +64,7 @@ const SSOAuth: FC<SSOAuthProps> = ({
       disabled={isLoading}
       className="w-full"
     >
-      <Lock01 className='mr-2 w-5 h-5 text-text-accent-light-mode-only' />
+      <Lock01 className='text-text-accent-light-mode-only mr-2 h-5 w-5' />
       <span className="truncate">{t('login.withSSO')}</span>
     </Button>
   )
diff --git a/web/app/signin/invite-settings/page.tsx b/web/app/signin/invite-settings/page.tsx
index 2138399ec3..553b5e65f6 100644
--- a/web/app/signin/invite-settings/page.tsx
+++ b/web/app/signin/invite-settings/page.tsx
@@ -67,11 +67,11 @@ export default function InviteSettingsPage() {
     return <Loading />
   if (!checkRes.is_valid) {
     return <div className="flex flex-col md:w-[400px]">
-      <div className="w-full mx-auto">
-        <div className="mb-3 flex justify-center items-center w-14 h-14 rounded-2xl border border-components-panel-border-subtle shadow-lg text-2xl font-bold">🤷‍♂️</div>
+      <div className="mx-auto w-full">
+        <div className="border-components-panel-border-subtle mb-3 flex h-14 w-14 items-center justify-center rounded-2xl border text-2xl font-bold shadow-lg">🤷‍♂️</div>
         <h2 className="title-4xl-semi-bold">{t('login.invalid')}</h2>
       </div>
-      <div className="w-full mx-auto mt-6">
+      <div className="mx-auto mt-6 w-full">
         <Button variant='primary' className='w-full !text-sm'>
           <a href="https://dify.ai">{t('login.explore')}</a>
         </Button>
@@ -80,16 +80,16 @@ export default function InviteSettingsPage() {
   }
 
   return <div className='flex flex-col gap-3'>
-    <div className='bg-background-default-dodge border border-components-panel-border-subtle shadow-lg inline-flex w-14 h-14 justify-center items-center rounded-2xl'>
-      <RiAccountCircleLine className='w-6 h-6 text-2xl text-text-accent-light-mode-only' />
+    <div className='bg-background-default-dodge border-components-panel-border-subtle inline-flex h-14 w-14 items-center justify-center rounded-2xl border shadow-lg'>
+      <RiAccountCircleLine className='text-text-accent-light-mode-only h-6 w-6 text-2xl' />
     </div>
-    <div className='pt-2 pb-4'>
+    <div className='pb-4 pt-2'>
       <h2 className='title-4xl-semi-bold'>{t('login.setYourAccount')}</h2>
     </div>
     <form action=''>
 
       <div className='mb-5'>
-        <label htmlFor="name" className="my-2 system-md-semibold">
+        <label htmlFor="name" className="system-md-semibold my-2">
           {t('login.name')}
         </label>
         <div className="mt-1">
@@ -103,7 +103,7 @@ export default function InviteSettingsPage() {
         </div>
       </div>
       <div className='mb-5'>
-        <label htmlFor="name" className="my-2 system-md-semibold">
+        <label htmlFor="name" className="system-md-semibold my-2">
           {t('login.interfaceLanguage')}
         </label>
         <div className="mt-1">
@@ -141,7 +141,7 @@ export default function InviteSettingsPage() {
         </Button>
       </div>
     </form>
-    <div className="block w-full mt-2 system-xs-regular">
+    <div className="system-xs-regular mt-2 block w-full">
       {t('login.license.tip')}
       &nbsp;
       <Link
diff --git a/web/app/signin/layout.tsx b/web/app/signin/layout.tsx
index b404c5c4de..578058abb9 100644
--- a/web/app/signin/layout.tsx
+++ b/web/app/signin/layout.tsx
@@ -7,21 +7,21 @@ export default async function SignInLayout({ children }: any) {
   return <>
     <div className={cn(
       style.background,
-      'flex w-full min-h-screen',
+      'flex min-h-screen w-full',
       'sm:p-4 lg:p-8',
       'gap-x-20',
       'justify-center lg:justify-start',
     )}>
       <div className={
         cn(
-          'flex w-full flex-col bg-white shadow rounded-2xl shrink-0',
+          'flex w-full shrink-0 flex-col rounded-2xl bg-white shadow',
           'space-between',
         )
       }>
         <Header />
         <div className={
           cn(
-            'flex flex-col items-center w-full grow justify-center',
+            'flex w-full grow flex-col items-center justify-center',
             'px-6',
             'md:px-[108px]',
           )
@@ -30,7 +30,7 @@ export default async function SignInLayout({ children }: any) {
             {children}
           </div>
         </div>
-        <div className='px-8 py-6 system-xs-regular text-text-tertiary'>
+        <div className='system-xs-regular text-text-tertiary px-8 py-6'>
           © {new Date().getFullYear()} LangGenius, Inc. All rights reserved.
         </div>
       </div>
diff --git a/web/app/signin/normalForm.tsx b/web/app/signin/normalForm.tsx
index 1911fa35c6..cd35edd2a9 100644
--- a/web/app/signin/normalForm.tsx
+++ b/web/app/signin/normalForm.tsx
@@ -75,7 +75,7 @@ const NormalForm = () => {
   if (isLoading || consoleToken) {
     return <div className={
       cn(
-        'flex flex-col items-center w-full grow justify-center',
+        'flex w-full grow flex-col items-center justify-center',
         'px-6',
         'md:px-[108px]',
       )
@@ -84,12 +84,12 @@ const NormalForm = () => {
     </div>
   }
   if (systemFeatures.license?.status === LicenseStatus.LOST) {
-    return <div className='w-full mx-auto mt-8'>
+    return <div className='mx-auto mt-8 w-full'>
       <div className='bg-white'>
-        <div className="p-4 rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2">
-          <div className='flex items-center justify-center w-10 h-10 rounded-xl bg-components-card-bg shadow shadows-shadow-lg mb-2 relative'>
-            <RiContractLine className='w-5 h-5' />
-            <RiErrorWarningFill className='absolute w-4 h-4 text-text-warning-secondary -top-1 -right-1' />
+        <div className="from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 rounded-lg bg-gradient-to-r p-4">
+          <div className='bg-components-card-bg shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl shadow'>
+            <RiContractLine className='h-5 w-5' />
+            <RiErrorWarningFill className='text-text-warning-secondary absolute -right-1 -top-1 h-4 w-4' />
           </div>
           <p className='system-sm-medium text-text-primary'>{t('login.licenseLost')}</p>
           <p className='system-xs-regular text-text-tertiary mt-1'>{t('login.licenseLostTip')}</p>
@@ -98,12 +98,12 @@ const NormalForm = () => {
     </div>
   }
   if (systemFeatures.license?.status === LicenseStatus.EXPIRED) {
-    return <div className='w-full mx-auto mt-8'>
+    return <div className='mx-auto mt-8 w-full'>
       <div className='bg-white'>
-        <div className="p-4 rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2">
-          <div className='flex items-center justify-center w-10 h-10 rounded-xl bg-components-card-bg shadow shadows-shadow-lg mb-2 relative'>
-            <RiContractLine className='w-5 h-5' />
-            <RiErrorWarningFill className='absolute w-4 h-4 text-text-warning-secondary -top-1 -right-1' />
+        <div className="from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 rounded-lg bg-gradient-to-r p-4">
+          <div className='bg-components-card-bg shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl shadow'>
+            <RiContractLine className='h-5 w-5' />
+            <RiErrorWarningFill className='text-text-warning-secondary absolute -right-1 -top-1 h-4 w-4' />
           </div>
           <p className='system-sm-medium text-text-primary'>{t('login.licenseExpired')}</p>
           <p className='system-xs-regular text-text-tertiary mt-1'>{t('login.licenseExpiredTip')}</p>
@@ -112,12 +112,12 @@ const NormalForm = () => {
     </div>
   }
   if (systemFeatures.license?.status === LicenseStatus.INACTIVE) {
-    return <div className='w-full mx-auto mt-8'>
+    return <div className='mx-auto mt-8 w-full'>
       <div className='bg-white'>
-        <div className="p-4 rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2">
-          <div className='flex items-center justify-center w-10 h-10 rounded-xl bg-components-card-bg shadow shadows-shadow-lg mb-2 relative'>
-            <RiContractLine className='w-5 h-5' />
-            <RiErrorWarningFill className='absolute w-4 h-4 text-text-warning-secondary -top-1 -right-1' />
+        <div className="from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 rounded-lg bg-gradient-to-r p-4">
+          <div className='bg-components-card-bg shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl shadow'>
+            <RiContractLine className='h-5 w-5' />
+            <RiErrorWarningFill className='text-text-warning-secondary absolute -right-1 -top-1 h-4 w-4' />
           </div>
           <p className='system-sm-medium text-text-primary'>{t('login.licenseInactive')}</p>
           <p className='system-xs-regular text-text-tertiary mt-1'>{t('login.licenseInactiveTip')}</p>
@@ -128,18 +128,18 @@ const NormalForm = () => {
 
   return (
     <>
-      <div className="w-full mx-auto mt-8">
+      <div className="mx-auto mt-8 w-full">
         {isInviteLink
-          ? <div className="w-full mx-auto">
+          ? <div className="mx-auto w-full">
             <h2 className="title-4xl-semi-bold text-text-primary">{t('login.join')}{workspaceName}</h2>
-            <p className='mt-2 body-md-regular text-text-tertiary'>{t('login.joinTipStart')}{workspaceName}{t('login.joinTipEnd')}</p>
+            <p className='body-md-regular text-text-tertiary mt-2'>{t('login.joinTipStart')}{workspaceName}{t('login.joinTipEnd')}</p>
           </div>
-          : <div className="w-full mx-auto">
+          : <div className="mx-auto w-full">
             <h2 className="title-4xl-semi-bold text-text-primary">{t('login.pageTitle')}</h2>
-            <p className='mt-2 body-md-regular text-text-tertiary'>{t('login.welcome')}</p>
+            <p className='body-md-regular text-text-tertiary mt-2'>{t('login.welcome')}</p>
           </div>}
         <div className="bg-white">
-          <div className="flex flex-col gap-3 mt-6">
+          <div className="mt-6 flex flex-col gap-3">
             {systemFeatures.enable_social_oauth_login && <SocialAuth />}
             {systemFeatures.sso_enforced_for_signin && <div className='w-full'>
               <SSOAuth protocol={systemFeatures.sso_enforced_for_signin_protocol} />
@@ -148,10 +148,10 @@ const NormalForm = () => {
 
           {showORLine && <div className="relative mt-6">
             <div className="absolute inset-0 flex items-center" aria-hidden="true">
-              <div className='bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent h-px w-full'></div>
+              <div className='from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent h-px w-full bg-gradient-to-r'></div>
             </div>
             <div className="relative flex justify-center">
-              <span className="px-2 text-text-tertiary system-xs-medium-uppercase bg-white">{t('login.or')}</span>
+              <span className="text-text-tertiary system-xs-medium-uppercase bg-white px-2">{t('login.or')}</span>
             </div>
           </div>}
           {
@@ -171,20 +171,20 @@ const NormalForm = () => {
             </>
           }
           {allMethodsAreDisabled && <>
-            <div className="p-4 rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2">
-              <div className='flex items-center justify-center w-10 h-10 rounded-xl bg-components-card-bg shadow shadows-shadow-lg mb-2'>
-                <RiDoorLockLine className='w-5 h-5' />
+            <div className="from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 rounded-lg bg-gradient-to-r p-4">
+              <div className='bg-components-card-bg shadows-shadow-lg mb-2 flex h-10 w-10 items-center justify-center rounded-xl shadow'>
+                <RiDoorLockLine className='h-5 w-5' />
               </div>
               <p className='system-sm-medium text-text-primary'>{t('login.noLoginMethod')}</p>
               <p className='system-xs-regular text-text-tertiary mt-1'>{t('login.noLoginMethodTip')}</p>
             </div>
             <div className="relative my-2 py-2">
               <div className="absolute inset-0 flex items-center" aria-hidden="true">
-                <div className='bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent h-px w-full'></div>
+                <div className='from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent h-px w-full bg-gradient-to-r'></div>
               </div>
             </div>
           </>}
-          <div className="w-full block mt-2 system-xs-regular text-text-tertiary">
+          <div className="system-xs-regular text-text-tertiary mt-2 block w-full">
             {t('login.tosDesc')}
             &nbsp;
             <Link
@@ -199,7 +199,7 @@ const NormalForm = () => {
               href='https://dify.ai/privacy'
             >{t('login.pp')}</Link>
           </div>
-          {IS_CE_EDITION && <div className="w-hull block mt-2 system-xs-regular text-text-tertiary">
+          {IS_CE_EDITION && <div className="w-hull system-xs-regular text-text-tertiary mt-2 block">
             {t('login.goToInit')}
             &nbsp;
             <Link
diff --git a/web/app/signin/oneMoreStep.tsx b/web/app/signin/oneMoreStep.tsx
index dfb8a04781..6137cb6c89 100644
--- a/web/app/signin/oneMoreStep.tsx
+++ b/web/app/signin/oneMoreStep.tsx
@@ -75,28 +75,28 @@ const OneMoreStep = () => {
 
   return (
     <>
-      <div className="w-full mx-auto">
+      <div className="mx-auto w-full">
         <h2 className="title-4xl-semi-bold text-text-secondary">{t('login.oneMoreStep')}</h2>
-        <p className='mt-1 body-md-regular text-text-tertiary'>{t('login.createSample')}</p>
+        <p className='body-md-regular text-text-tertiary mt-1'>{t('login.createSample')}</p>
       </div>
 
-      <div className="w-full mx-auto mt-6">
+      <div className="mx-auto mt-6 w-full">
         <div className="bg-white">
           <div className="mb-5">
-            <label className="my-2 flex items-center justify-between system-md-semibold text-text-secondary">
+            <label className="system-md-semibold text-text-secondary my-2 flex items-center justify-between">
               {t('login.invitationCode')}
               <Tooltip
                 popupContent={
                   <div className='w-[256px] text-xs font-medium'>
                     <div className='font-medium'>{t('login.sendUsMail')}</div>
-                    <div className='text-xs font-medium cursor-pointer text-text-accent-secondary'>
+                    <div className='text-text-accent-secondary cursor-pointer text-xs font-medium'>
                       <a href="mailto:request-invitation@langgenius.ai">request-invitation@langgenius.ai</a>
                     </div>
                   </div>
                 }
                 needsDelay
               >
-                <span className='cursor-pointer text-text-accent-secondary'>{t('login.dontHave')}</span>
+                <span className='text-text-accent-secondary cursor-pointer'>{t('login.dontHave')}</span>
               </Tooltip>
             </label>
             <div className="mt-1">
@@ -112,7 +112,7 @@ const OneMoreStep = () => {
             </div>
           </div>
           <div className='mb-5'>
-            <label htmlFor="name" className="my-2 system-md-semibold text-text-secondary">
+            <label htmlFor="name" className="system-md-semibold text-text-secondary my-2">
               {t('login.interfaceLanguage')}
             </label>
             <div className="mt-1">
@@ -151,7 +151,7 @@ const OneMoreStep = () => {
               {t('login.go')}
             </Button>
           </div>
-          <div className="block w-full mt-2 system-xs-regular text-text-tertiary">
+          <div className="system-xs-regular text-text-tertiary mt-2 block w-full">
             {t('login.license.tip')}
             &nbsp;
             <Link
diff --git a/web/context/app-context.tsx b/web/context/app-context.tsx
index 3d6acc55a3..69fb8e8ed0 100644
--- a/web/context/app-context.tsx
+++ b/web/context/app-context.tsx
@@ -162,9 +162,9 @@ export const AppContextProvider: FC<AppContextProviderProps> = ({ children }) =>
       mutateCurrentWorkspace,
       isLoadingCurrentWorkspace,
     }}>
-      <div className='flex flex-col h-full overflow-y-auto'>
+      <div className='flex h-full flex-col overflow-y-auto'>
         {globalThis.document?.body?.getAttribute('data-public-maintenance-notice') && <MaintenanceNotice />}
-        <div ref={pageContainerRef} className='grow relative flex flex-col overflow-y-auto overflow-x-hidden bg-background-body'>
+        <div ref={pageContainerRef} className='bg-background-body relative flex grow flex-col overflow-y-auto overflow-x-hidden'>
           {children}
         </div>
       </div>
diff --git a/web/i18n/hi-IN/share-app.ts b/web/i18n/hi-IN/share-app.ts
index 74c23f8fda..45e5dbd68e 100644
--- a/web/i18n/hi-IN/share-app.ts
+++ b/web/i18n/hi-IN/share-app.ts
@@ -4,7 +4,7 @@ const translation = {
     appUnavailable: 'ऐप उपलब्ध नहीं है',
     appUnknownError: 'अज्ञात त्रुटि, कृपया पुनः प्रयास करें',
     // @ts-expect-error TODO: fix this
-    // eslint-disable-next-line no-dupe-keys
+     
     appUnknownError: 'ऐप अनुपलब्ध है',
   },
   chat: {
diff --git a/web/utils/classnames.spec.ts b/web/utils/classnames.spec.ts
index 268981d78c..d873edffa9 100644
--- a/web/utils/classnames.spec.ts
+++ b/web/utils/classnames.spec.ts
@@ -19,11 +19,11 @@ describe('classnames', () => {
 
   test('tailwind-merge', () => {
     expect(cn('p-0')).toBe('p-0')
-    expect(cn('text-right text-center text-left')).toBe('text-left')
-    expect(cn('pl-4 p-8')).toBe('p-8')
+    expect(cn('text-left text-center text-right')).toBe('text-left')
+    expect(cn('p-8 pl-4')).toBe('p-8')
     expect(cn('m-[2px] m-[4px]')).toBe('m-[4px]')
     expect(cn('m-1 m-[4px]')).toBe('m-[4px]')
-    expect(cn('overflow-x-auto hover:overflow-x-hidden overflow-x-scroll')).toBe(
+    expect(cn('overflow-x-auto overflow-x-scroll hover:overflow-x-hidden')).toBe(
       'hover:overflow-x-hidden overflow-x-scroll',
     )
     expect(cn('h-10 h-min')).toBe('h-min')
@@ -31,10 +31,10 @@ describe('classnames', () => {
 
     expect(cn('hover:block hover:inline')).toBe('hover:inline')
 
-    expect(cn('font-medium !font-bold')).toBe('font-medium !font-bold')
-    expect(cn('!font-medium !font-bold')).toBe('!font-bold')
+    expect(cn('!font-bold font-medium')).toBe('font-medium !font-bold')
+    expect(cn('!font-bold !font-medium')).toBe('!font-bold')
 
-    expect(cn('text-gray-100 text-primary-200')).toBe('text-primary-200')
+    expect(cn('text-primary-200 text-gray-100')).toBe('text-primary-200')
     expect(cn('text-some-unknown-color text-components-input-bg-disabled text-primary-200')).toBe('text-primary-200')
     expect(cn('bg-some-unknown-color bg-components-input-bg-disabled bg-primary-200')).toBe('bg-primary-200')