diff --git a/web/app/(commonLayout)/datasets/Datasets.tsx b/web/app/(commonLayout)/datasets/Datasets.tsx
index f4d2156a81..0b34341e1f 100644
--- a/web/app/(commonLayout)/datasets/Datasets.tsx
+++ b/web/app/(commonLayout)/datasets/Datasets.tsx
@@ -66,9 +66,9 @@ const Datasets = ({
 
   useEffect(() => {
     const onScroll = debounce(() => {
-      if (!loadingStateRef.current && containerRef.current && anchorRef.current) {
+      if (!loadingStateRef.current) {
         const { scrollTop, clientHeight } = containerRef.current!
-        const anchorOffset = anchorRef.current.offsetTop
+        const anchorOffset = anchorRef.current!.offsetTop
         if (anchorOffset - scrollTop - clientHeight < 100)
           setSize(size => size + 1)
       }
@@ -79,7 +79,7 @@ const Datasets = ({
   }, [])
 
   return (
-    <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0'>
+    <nav className='grid shrink-0 grow grid-cols-1 content-start gap-4 px-12 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
       {isCurrentWorkspaceEditor && <NewDatasetCard ref={anchorRef} />}
       {data?.map(({ data: datasets }) => datasets.map(dataset => (
         <DatasetCard key={dataset.id} dataset={dataset} onSuccess={mutate} />),
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 9ce2971a6a..4f6acd4477 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
@@ -261,11 +261,11 @@ const ToolSelector: FC<Props> = ({
               onInstall={() => handleInstall()}
               isError={(!currentProvider || !currentTool) && !inMarketPlace}
               errorTip={
-                <div className='space-y-1 max-w-[240px] text-xs'>
-                  <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>
+                <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>
                   <p>
-                    <Link href={'/plugins'} className='text-text-accent tracking-tight'>{t('plugin.detailPanel.toolSelector.uninstalledLink')}</Link>
+                    <Link href={'/plugins'} className='tracking-tight text-text-accent'>{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 w-[361px] min-h-20 max-h-[642px] pb-4 rounded-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg', !isShowSettingAuth && 'overflow-y-auto pb-2')}>
+          <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')}>
             {!isShowSettingAuth && (
               <>
-                <div className='px-4 pt-3.5 pb-1 text-text-primary system-xl-semibold'>{t('plugin.detailPanel.toolSelector.title')}</div>
+                <div className='system-xl-semibold px-4 pb-1 pt-3.5 text-text-primary'>{t('plugin.detailPanel.toolSelector.title')}</div>
                 {/* base form */}
-                <div className='px-4 py-2 flex flex-col gap-3'>
+                <div className='flex flex-col gap-3 px-4 py-2'>
                   <div className='flex flex-col gap-1'>
-                    <div className='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('plugin.detailPanel.toolSelector.toolLabel')}</div>
+                    <div className='system-sm-semibold flex h-6 items-center text-text-secondary'>{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='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('plugin.detailPanel.toolSelector.descriptionLabel')}</div>
+                    <div className='system-sm-semibold flex h-6 items-center text-text-secondary'>{t('plugin.detailPanel.toolSelector.descriptionLabel')}</div>
                     <Textarea
                       className='resize-none'
                       placeholder={t('plugin.detailPanel.toolSelector.descriptionPlaceholder')}
@@ -320,7 +320,7 @@ const ToolSelector: FC<Props> = ({
                       {!currentProvider.is_team_authorization && (
                         <Button
                           variant='primary'
-                          className={cn('shrink-0 w-full')}
+                          className={cn('w-full shrink-0')}
                           onClick={() => setShowSettingAuth(true)}
                           disabled={!isCurrentWorkspaceManager}
                         >
@@ -330,7 +330,7 @@ const ToolSelector: FC<Props> = ({
                       {currentProvider.is_team_authorization && (
                         <Button
                           variant='secondary'
-                          className={cn('shrink-0 w-full')}
+                          className={cn('w-full shrink-0')}
                           onClick={() => setShowSettingAuth(true)}
                           disabled={!isCurrentWorkspaceManager}
                         >
@@ -348,7 +348,7 @@ const ToolSelector: FC<Props> = ({
                     {/* tabs */}
                     {nodeId && showTabSlider && (
                       <TabSlider
-                        className='shrink-0 mt-1 px-4'
+                        className='mt-1 shrink-0 px-4'
                         itemClassName='py-3'
                         noBorderBottom
                         smallItem
@@ -364,23 +364,23 @@ const ToolSelector: FC<Props> = ({
                     )}
                     {nodeId && showTabSlider && currType === 'params' && (
                       <div className='px-4 py-2'>
-                        <div className='text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.toolSelector.paramsTip1')}</div>
-                        <div className='text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.toolSelector.paramsTip2')}</div>
+                        <div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip1')}</div>
+                        <div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip2')}</div>
                       </div>
                     )}
                     {/* user settings only */}
                     {userSettingsOnly && (
                       <div className='p-4 pb-1'>
-                        <div className='text-text-primary system-sm-semibold-uppercase'>{t('plugin.detailPanel.toolSelector.settings')}</div>
+                        <div className='system-sm-semibold-uppercase text-text-primary'>{t('plugin.detailPanel.toolSelector.settings')}</div>
                       </div>
                     )}
                     {/* reasoning config only */}
                     {nodeId && reasoningConfigOnly && (
                       <div className='mb-1 p-4 pb-1'>
-                        <div className='text-text-primary system-sm-semibold-uppercase'>{t('plugin.detailPanel.toolSelector.params')}</div>
+                        <div className='system-sm-semibold-uppercase text-text-primary'>{t('plugin.detailPanel.toolSelector.params')}</div>
                         <div className='pb-1'>
-                          <div className='text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.toolSelector.paramsTip1')}</div>
-                          <div className='text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.toolSelector.paramsTip2')}</div>
+                          <div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip1')}</div>
+                          <div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip2')}</div>
                         </div>
                       </div>
                     )}
@@ -402,7 +402,7 @@ const ToolSelector: FC<Props> = ({
                               className='inline-flex items-center text-xs text-text-accent'
                             >
                               {t('tools.howToGet')}
-                              <RiArrowRightUpLine className='ml-1 w-3 h-3' />
+                              <RiArrowRightUpLine className='ml-1 h-3 w-3' />
                             </a>)
                             : null}
                         />
@@ -420,40 +420,37 @@ const ToolSelector: FC<Props> = ({
                       />
                     )}
                   </>
-                )
-                }
+                )}
               </>
             )}
             {/* authorization panel */}
-            {
-              isShowSettingAuth && currentProvider && (
-                <>
-                  <div className='relative pt-3.5 flex flex-col gap-1'>
-                    <div className='absolute -top-2 left-2 w-[345px] pt-2 rounded-t-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border'></div>
-                    <div
-                      className='px-3 h-6 flex items-center gap-1 text-text-accent-secondary system-xs-semibold-uppercase cursor-pointer'
-                      onClick={() => setShowSettingAuth(false)}
-                    >
-                      <RiArrowLeftLine className='w-4 h-4' />
-                      BACK
-                    </div>
-                    <div className='px-4 text-text-primary system-xl-semibold'>{t('tools.auth.setupModalTitle')}</div>
-                    <div className='px-4 text-text-tertiary system-xs-regular'>{t('tools.auth.setupModalTitleDescription')}</div>
+            {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='system-xs-semibold-uppercase flex h-6 cursor-pointer items-center gap-1 px-3 text-text-accent-secondary'
+                    onClick={() => setShowSettingAuth(false)}
+                  >
+                    <RiArrowLeftLine className='h-4 w-4' />
+                    BACK
                   </div>
-                  <ToolCredentialForm
-                    collection={currentProvider}
-                    onCancel={() => setShowSettingAuth(false)}
-                    onSaved={async value => updatePermission({
-                      providerName: currentProvider.name,
-                      credentials: value,
-                    })}
-                  />
-                </>
-              )
-            }
-          </div >
-        </PortalToFollowElemContent >
-      </PortalToFollowElem >
+                  <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>
+                <ToolCredentialForm
+                  collection={currentProvider}
+                  onCancel={() => setShowSettingAuth(false)}
+                  onSaved={async value => updatePermission({
+                    providerName: currentProvider.name,
+                    credentials: value,
+                  })}
+                />
+              </>
+            )}
+          </div>
+        </PortalToFollowElemContent>
+      </PortalToFollowElem>
     </>
   )
 }
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 d5a7101032..bbc7654b3f 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
@@ -39,7 +39,7 @@ import { SimpleSelect as Select } from '@/app/components/base/select'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 const optionNameI18NPrefix = 'workflow.nodes.ifElse.optionName'
 
-interface ConditionItemProps {
+type ConditionItemProps = {
   className?: string
   disabled?: boolean
   caseId: string
@@ -205,13 +205,13 @@ const ConditionItem = ({
   }, [condition, doUpdateCondition])
 
   return (
-    <div className={cn('flex mb-1 last-of-type:mb-0', className)}>
+    <div className={cn('mb-1 flex last-of-type:mb-0', className)}>
       <div className={cn(
-        'grow bg-components-input-bg-normal rounded-lg',
+        'grow rounded-lg bg-components-input-bg-normal',
         isHovered && 'bg-state-destructive-hover',
       )}>
         <div className='flex items-center p-1'>
-          <div className='grow w-0'>
+          <div className='w-0 grow'>
             {isSubVarSelect
               ? (
                 <Select
@@ -223,13 +223,13 @@ const ConditionItem = ({
                   onSelect={item => handleSubVarKeyChange(item.value as string)}
                   renderTrigger={item => (
                     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='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='system-xs-medium ml-0.5 truncate'>{item?.name}</div>
                         </div>
                       </div>
-                      : <div className='text-left text-components-input-text-placeholder system-sm-regular'>{t('common.placeholder.select')}</div>
+                      : <div className='system-sm-regular text-left text-components-input-text-placeholder'>{t('common.placeholder.select')}</div>
                   )}
                   hideChecked
                 />
@@ -247,7 +247,7 @@ const ConditionItem = ({
               )}
 
           </div>
-          <div className='mx-1 w-[1px] h-3 bg-divider-regular'></div>
+          <div className='mx-1 h-3 w-[1px] bg-divider-regular'></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='px-2 py-1 max-h-[100px] border-t border-t-divider-subtle overflow-y-auto'>
+            <div className='max-h-[100px] overflow-y-auto border-t border-t-divider-subtle 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='px-2 py-1 pt-[3px] border-t border-t-divider-subtle'>
+            <div className='border-t border-t-divider-subtle px-2 py-1 pt-[3px]'>
               <ConditionNumberInput
                 numberVarType={condition.numberVarType}
                 onNumberVarTypeChange={handleUpdateConditionNumberVarType}
@@ -289,7 +289,7 @@ const ConditionItem = ({
             <div className='border-t border-t-divider-subtle'>
               <Select
                 wrapperClassName='h-8'
-                className='px-2 text-xs rounded-t-none'
+                className='rounded-t-none px-2 text-xs'
                 defaultValue={isArrayValue ? (condition.value as string[])?.[0] : (condition.value as string)}
                 items={selectOptions}
                 onSelect={item => handleUpdateConditionValue(item.value as string)}
@@ -322,12 +322,12 @@ const ConditionItem = ({
         }
       </div>
       <div
-        className='shrink-0 flex items-center justify-center ml-1 mt-1 w-6 h-6 rounded-lg cursor-pointer hover:bg-state-destructive-hover text-text-tertiary hover:text-text-destructive'
+        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'
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         onClick={doRemoveCondition}
       >
-        <RiDeleteBinLine className='w-4 h-4' />
+        <RiDeleteBinLine className='h-4 w-4' />
       </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 795f5e3bcc..ca448e9bf2 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
@@ -20,7 +20,7 @@ import type {
   Node,
 } from '@/app/components/workflow/types'
 
-interface ConditionValueProps {
+type ConditionValueProps = {
   variableSelector: string[]
   labelName?: string
   operator: ComparisonOperator
@@ -75,14 +75,14 @@ const ConditionValue = ({
   }, [isSelect, t, value])
 
   return (
-    <div className='flex items-center px-1 h-6 rounded-md bg-workflow-block-parma-bg'>
-      {!isEnvVar && !isChatVar && <Variable02 className={cn('shrink-0 mr-1 w-3.5 h-3.5 text-text-accent', isException && 'text-text-warning')} />}
-      {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='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={cn(
-          'shrink-0 ml-0.5 truncate text-xs font-medium text-text-accent',
+          'ml-0.5 shrink-0 truncate text-xs font-medium text-text-accent',
           !notHasValue && 'max-w-[70px]',
           isException && 'text-text-warning',
         )}
@@ -91,7 +91,7 @@ const ConditionValue = ({
         {variableName}
       </div>
       <div
-        className='shrink-0 mx-1 text-xs font-medium text-text-primary'
+        className='mx-1 shrink-0 text-xs font-medium text-text-primary'
         title={operatorName}
       >
         {operatorName}
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 cf5bf2929a..6f9ae65ee0 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
@@ -18,7 +18,7 @@ import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import Badge from '@/app/components/base/badge'
 import { useKnowledge } from '@/hooks/use-knowledge'
 
-interface Props {
+type Props = {
   payload: DataSet
   onRemove: () => void
   onChange: (dataSet: DataSet) => void
@@ -55,28 +55,28 @@ const DatasetItem: FC<Props> = ({
   }, [onRemove])
 
   return (
-    <div className={`flex items-center h-10 justify-between rounded-xl px-2 border-[0.5px] 
-      border-components-panel-border-subtle cursor-pointer group/dataset-item 
+    <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 
       ${isDeleteHovered
-      ? 'bg-state-destructive-hover border-state-destructive-border'
+      ? 'border-state-destructive-border bg-state-destructive-hover'
       : 'bg-components-panel-on-panel-item-bg hover:bg-components-panel-on-panel-item-bg-hover'
     }`}>
-      <div className='w-0 grow flex items-center space-x-1.5'>
+      <div className='flex w-0 grow items-center space-x-1.5'>
         {
           payload.data_source_type === DataSourceType.NOTION
             ? (
-              <div className='shrink-0 flex items-center justify-center w-6 h-6 rounded-md border-[0.5px] border-[#EAECF5]'>
-                <FileIcon type='notion' className='w-4 h-4' />
+              <div className='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>
             )
-            : <div className='shrink-0 flex items-center justify-center w-6 h-6 bg-[#F5F8FF] rounded-md border-[0.5px] border-[#E0EAFF]'>
-              <Folder className='w-4 h-4 text-[#444CE7]' />
+            : <div className='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>
         }
-        <div className='w-0 grow text-text-secondary system-sm-medium truncate'>{payload.name}</div>
+        <div className='system-sm-medium w-0 grow truncate text-text-secondary'>{payload.name}</div>
       </div>
       {!readonly && (
-        <div className='hidden group-hover/dataset-item:flex shrink-0 ml-2  items-center space-x-1'>
+        <div className='ml-2 hidden shrink-0 items-center  space-x-1 group-hover/dataset-item:flex'>
           {
             editable && <ActionButton
               onClick={(e) => {
@@ -84,7 +84,7 @@ const DatasetItem: FC<Props> = ({
                 showSettingsModal()
               }}
             >
-              <RiEditLine className='w-4 h-4 shrink-0 text-text-tertiary' />
+              <RiEditLine className='h-4 w-4 shrink-0 text-text-tertiary' />
             </ActionButton>
           }
           <ActionButton
@@ -93,19 +93,19 @@ const DatasetItem: FC<Props> = ({
             onMouseEnter={() => setIsDeleteHovered(true)}
             onMouseLeave={() => setIsDeleteHovered(false)}
           >
-            <RiDeleteBinLine className={`w-4 h-4 shrink-0 ${isDeleteHovered ? 'text-text-destructive' : 'text-text-tertiary'}`} />
+            <RiDeleteBinLine className={`h-4 w-4 shrink-0 ${isDeleteHovered ? 'text-text-destructive' : 'text-text-tertiary'}`} />
           </ActionButton>
         </div>
       )}
       {
         payload.indexing_technique && <Badge
-          className='group-hover/dataset-item:hidden shrink-0'
+          className='shrink-0 group-hover/dataset-item:hidden'
           text={formatIndexingTechniqueAndMethod(payload.indexing_technique, payload.retrieval_model_dict?.search_method)}
         />
       }
       {
         payload.provider === 'external' && <Badge
-          className='group-hover/dataset-item:hidden shrink-0'
+          className='shrink-0 group-hover/dataset-item:hidden'
           text={t('dataset.externalTag') as string}
         />
       }
diff --git a/web/eslint.config.mjs b/web/eslint.config.mjs
index 4b2323810e..17d5f17628 100644
--- a/web/eslint.config.mjs
+++ b/web/eslint.config.mjs
@@ -8,22 +8,6 @@ import storybook from 'eslint-plugin-storybook'
 import tailwind from 'eslint-plugin-tailwindcss'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import js from '@eslint/js'
-import { FlatCompat } from '@eslint/eslintrc'
-import globals from 'globals'
-import storybook from 'eslint-plugin-storybook'
-import { fixupConfigRules } from '@eslint/compat'
-import tailwind from 'eslint-plugin-tailwindcss'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
-})
 
 export default combine(
   stylistic({
@@ -79,10 +63,10 @@ export default combine(
   node(),
   // use nextjs config will break @eslint/config-inspector
   // use `ESLINT_CONFIG_INSPECTOR=true pnpx @eslint/config-inspector` to check the config
-  ...process.env.ESLINT_CONFIG_INSPECTOR
-    ? []
-    // TODO: remove this when upgrade to nextjs 15
-    : fixupConfigRules(compat.extends('next')),
+  // ...process.env.ESLINT_CONFIG_INSPECTOR
+  //   ? []
+  // TODO: remove this when upgrade to nextjs 15
+  // : fixupConfigRules(compat.extends('next')),
   {
     rules: {
       // performance issue, and not used.
@@ -92,7 +76,6 @@ export default combine(
   {
     ignores: [
       '**/node_modules/*',
-      '**/node_modules/',
       '**/dist/',
       '**/build/',
       '**/out/',
diff --git a/web/package.json b/web/package.json
index 966b16c141..f220fa987b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -166,7 +166,7 @@
         "cross-env": "^7.0.3",
         "eslint": "^9.13.0",
         "eslint-plugin-react-hooks": "^5.0.0",
-        "eslint-plugin-react-refresh": "^0.4.13",
+        "eslint-plugin-react-refresh": "^0.4.19",
         "eslint-plugin-storybook": "^0.10.1",
         "eslint-plugin-tailwindcss": "^3.17.5",
         "husky": "^9.1.6",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 6f54601f4b..ea1a5a1ced 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -307,7 +307,7 @@ importers:
     devDependencies:
       '@antfu/eslint-config':
         specifier: ^4.2.0
-        version: 4.2.1(@eslint-react/eslint-plugin@1.15.0(eslint@9.13.0(jiti@1.21.6))(typescript@5.7.3))(@typescript-eslint/utils@8.24.1(eslint@9.13.0(jiti@1.21.6))(typescript@5.7.3))(@vue/compiler-sfc@3.5.12)(eslint-plugin-react-hooks@5.0.0(eslint@9.13.0(jiti@1.21.6)))(eslint-plugin-react-refresh@0.4.13(eslint@9.13.0(jiti@1.21.6)))(eslint@9.13.0(jiti@1.21.6))(typescript@5.7.3)
+        version: 4.2.1(@eslint-react/eslint-plugin@1.15.0(eslint@9.13.0(jiti@1.21.6))(typescript@5.7.3))(@typescript-eslint/utils@8.24.1(eslint@9.13.0(jiti@1.21.6))(typescript@5.7.3))(@vue/compiler-sfc@3.5.12)(eslint-plugin-react-hooks@5.0.0(eslint@9.13.0(jiti@1.21.6)))(eslint-plugin-react-refresh@0.4.19(eslint@9.13.0(jiti@1.21.6)))(eslint@9.13.0(jiti@1.21.6))(typescript@5.7.3)
       '@chromatic-com/storybook':
         specifier: ^3.1.0
         version: 3.1.0(react@19.0.0)(storybook@8.5.0)
@@ -435,8 +435,8 @@ importers:
         specifier: ^5.0.0
         version: 5.0.0(eslint@9.13.0(jiti@1.21.6))
       eslint-plugin-react-refresh:
-        specifier: ^0.4.13
-        version: 0.4.13(eslint@9.13.0(jiti@1.21.6))
+        specifier: ^0.4.19
+        version: 0.4.19(eslint@9.13.0(jiti@1.21.6))
       eslint-plugin-storybook:
         specifier: ^0.10.1
         version: 0.10.1(eslint@9.13.0(jiti@1.21.6))(typescript@5.7.3)
@@ -4338,10 +4338,10 @@ packages:
       typescript:
         optional: true
 
-  eslint-plugin-react-refresh@0.4.13:
-    resolution: {integrity: sha512-f1EppwrpJRWmqDTyvAyomFVDYRtrS7iTEqv3nokETnMiMzs2SSTmKRTACce4O2p4jYyowiSMvpdwC/RLcMFhuQ==}
+  eslint-plugin-react-refresh@0.4.19:
+    resolution: {integrity: sha512-eyy8pcr/YxSYjBoqIFSrlbn9i/xvxUFa8CjzAYo9cFjgGXqq1hyjihcpZvxRLalpaWmueWR81xn7vuKmAFijDQ==}
     peerDependencies:
-      eslint: '>=7'
+      eslint: '>=8.40'
 
   eslint-plugin-react-web-api@1.15.0:
     resolution: {integrity: sha512-LUwzKumBApdKzUgl+9F5/TyJbYGQIOy450s6kr3rLPrc9tk8GQrBmSQKmWh2g7C1x7DIoMNFXeUuAD1q/1AKnw==}
@@ -7855,7 +7855,7 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@antfu/eslint-config@4.2.1(@eslint-react/eslint-plugin@1.15.0(eslint@9.13.0(jiti@1.21.6))(typescript@5.7.3))(@typescript-eslint/utils@8.24.1(eslint@9.13.0(jiti@1.21.6))(typescript@5.7.3))(@vue/compiler-sfc@3.5.12)(eslint-plugin-react-hooks@5.0.0(eslint@9.13.0(jiti@1.21.6)))(eslint-plugin-react-refresh@0.4.13(eslint@9.13.0(jiti@1.21.6)))(eslint@9.13.0(jiti@1.21.6))(typescript@5.7.3)':
+  '@antfu/eslint-config@4.2.1(@eslint-react/eslint-plugin@1.15.0(eslint@9.13.0(jiti@1.21.6))(typescript@5.7.3))(@typescript-eslint/utils@8.24.1(eslint@9.13.0(jiti@1.21.6))(typescript@5.7.3))(@vue/compiler-sfc@3.5.12)(eslint-plugin-react-hooks@5.0.0(eslint@9.13.0(jiti@1.21.6)))(eslint-plugin-react-refresh@0.4.19(eslint@9.13.0(jiti@1.21.6)))(eslint@9.13.0(jiti@1.21.6))(typescript@5.7.3)':
     dependencies:
       '@antfu/install-pkg': 1.0.0
       '@clack/prompts': 0.10.0
@@ -7896,7 +7896,7 @@ snapshots:
     optionalDependencies:
       '@eslint-react/eslint-plugin': 1.15.0(eslint@9.13.0(jiti@1.21.6))(typescript@5.7.3)
       eslint-plugin-react-hooks: 5.0.0(eslint@9.13.0(jiti@1.21.6))
-      eslint-plugin-react-refresh: 0.4.13(eslint@9.13.0(jiti@1.21.6))
+      eslint-plugin-react-refresh: 0.4.19(eslint@9.13.0(jiti@1.21.6))
     transitivePeerDependencies:
       - '@eslint/json'
       - '@typescript-eslint/utils'
@@ -12603,7 +12603,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-react-refresh@0.4.13(eslint@9.13.0(jiti@1.21.6)):
+  eslint-plugin-react-refresh@0.4.19(eslint@9.13.0(jiti@1.21.6)):
     dependencies:
       eslint: 9.13.0(jiti@1.21.6)