chore(web): new lint setup (#30020)

Co-authored-by: yyh <yuanyouhuilyz@gmail.com>

web/app/components/workflow/nodes/start/components/var-item.tsx

@@ -1,19 +1,19 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback, useRef } from 'react'
-import { useBoolean, useHover } from 'ahooks'
-import { useTranslation } from 'react-i18next'
+import type { InputVar, MoreInfo } from '@/app/components/workflow/types'
 import {
   RiDeleteBinLine,
 } from '@remixicon/react'
-import InputVarTypeIcon from '../../_base/components/input-var-type-icon'
-import type { InputVar, MoreInfo } from '@/app/components/workflow/types'
+import { useBoolean, useHover } from 'ahooks'
+import { noop } from 'lodash-es'
+import React, { useCallback, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
+import Badge from '@/app/components/base/badge'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import { Edit03 } from '@/app/components/base/icons/src/vender/solid/general'
-import Badge from '@/app/components/base/badge'
-import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
-import { noop } from 'lodash-es'
 import { cn } from '@/utils/classnames'
+import InputVarTypeIcon from '../../_base/components/input-var-type-icon'
 
 type Props = {
   className?: string
@@ -23,8 +23,8 @@ type Props = {
   onRemove?: () => void
   rightContent?: React.JSX.Element
   varKeys?: string[]
-  showLegacyBadge?: boolean,
-  canDrag?: boolean,
+  showLegacyBadge?: boolean
+  canDrag?: boolean
 }
 
 const VarItem: FC<Props> = ({
@@ -49,47 +49,52 @@ const VarItem: FC<Props> = ({
 
   const handlePayloadChange = useCallback((payload: InputVar, moreInfo?: MoreInfo) => {
     const isValid = onChange(payload, moreInfo)
-    if(!isValid)
+    if (!isValid)
       return
     hideEditVarModal()
   }, [onChange, hideEditVarModal])
   return (
     <div ref={ref} className={cn('flex h-8 cursor-pointer items-center justify-between rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 shadow-xs hover:shadow-md', className)}>
-      <div className='flex w-0 grow items-center space-x-1'>
+      <div className="flex w-0 grow items-center space-x-1">
         <Variable02 className={cn('h-3.5 w-3.5 text-text-accent', canDrag && 'group-hover:opacity-0')} />
-        <div title={payload.variable} className='max-w-[130px] shrink-0 truncate text-[13px] font-medium text-text-secondary'>{payload.variable}</div>
-        {payload.label && (<><div className='shrink-0 text-xs font-medium text-text-quaternary'>·</div>
-          <div title={payload.label as string} className='max-w-[130px] truncate text-[13px] font-medium text-text-tertiary'>{payload.label as string}</div>
-        </>)}
+        <div title={payload.variable} className="max-w-[130px] shrink-0 truncate text-[13px] font-medium text-text-secondary">{payload.variable}</div>
+        {payload.label && (
+          <>
+            <div className="shrink-0 text-xs font-medium text-text-quaternary">·</div>
+            <div title={payload.label as string} className="max-w-[130px] truncate text-[13px] font-medium text-text-tertiary">{payload.label as string}</div>
+          </>
+        )}
         {showLegacyBadge && (
           <Badge
-            text='LEGACY'
-            className='shrink-0 border-text-accent-secondary text-text-accent-secondary'
+            text="LEGACY"
+            className="shrink-0 border-text-accent-secondary text-text-accent-secondary"
           />
         )}
       </div>
-      <div className='ml-2 flex shrink-0 items-center'>
-        {rightContent || (<>
-          {(!isHovering || readonly)
-            ? (
-              <>
-                {payload.required && (
-                  <div className='mr-2 text-xs font-normal text-text-tertiary'>{t('workflow.nodes.start.required')}</div>
-                )}
-                <InputVarTypeIcon type={payload.type} className='h-3.5 w-3.5 text-text-tertiary' />
-              </>
-            )
-            : (!readonly && (
-              <>
-                <div onClick={showEditVarModal} className='mr-1 cursor-pointer rounded-md p-1 hover:bg-state-base-hover'>
-                  <Edit03 className='h-4 w-4 text-text-tertiary' />
-                </div>
-                <div onClick={onRemove} className='group cursor-pointer rounded-md p-1 hover:bg-state-destructive-hover'>
-                  <RiDeleteBinLine className='h-4 w-4 text-text-tertiary group-hover:text-text-destructive' />
-                </div>
-              </>
-            ))}
-        </>)}
+      <div className="ml-2 flex shrink-0 items-center">
+        {rightContent || (
+          <>
+            {(!isHovering || readonly)
+              ? (
+                  <>
+                    {payload.required && (
+                      <div className="mr-2 text-xs font-normal text-text-tertiary">{t('workflow.nodes.start.required')}</div>
+                    )}
+                    <InputVarTypeIcon type={payload.type} className="h-3.5 w-3.5 text-text-tertiary" />
+                  </>
+                )
+              : (!readonly && (
+                  <>
+                    <div onClick={showEditVarModal} className="mr-1 cursor-pointer rounded-md p-1 hover:bg-state-base-hover">
+                      <Edit03 className="h-4 w-4 text-text-tertiary" />
+                    </div>
+                    <div onClick={onRemove} className="group cursor-pointer rounded-md p-1 hover:bg-state-destructive-hover">
+                      <RiDeleteBinLine className="h-4 w-4 text-text-tertiary group-hover:text-text-destructive" />
+                    </div>
+                  </>
+                ))}
+          </>
+        )}
 
       </div>
       {

web/app/components/workflow/nodes/start/components/var-list.tsx

@@ -1,20 +1,21 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback, useMemo } from 'react'
-import { produce } from 'immer'
-import { useTranslation } from 'react-i18next'
-import VarItem from './var-item'
-import { ChangeType, type InputVar, type MoreInfo } from '@/app/components/workflow/types'
-import { ReactSortable } from 'react-sortablejs'
+import type { InputVar, MoreInfo } from '@/app/components/workflow/types'
 import { RiDraggable } from '@remixicon/react'
+import { produce } from 'immer'
+import React, { useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ReactSortable } from 'react-sortablejs'
+import Toast from '@/app/components/base/toast'
+import { ChangeType } from '@/app/components/workflow/types'
 import { cn } from '@/utils/classnames'
 import { hasDuplicateStr } from '@/utils/var'
-import Toast from '@/app/components/base/toast'
+import VarItem from './var-item'
 
 type Props = {
   readonly: boolean
   list: InputVar[]
-  onChange: (list: InputVar[], moreInfo?: { index: number; payload: MoreInfo }) => void
+  onChange: (list: InputVar[], moreInfo?: { index: number, payload: MoreInfo }) => void
 }
 
 const VarList: FC<Props> = ({
@@ -80,7 +81,7 @@ const VarList: FC<Props> = ({
 
   if (list.length === 0) {
     return (
-      <div className='flex h-[42px] items-center justify-center rounded-md bg-components-panel-bg text-xs font-normal leading-[18px] text-text-tertiary'>
+      <div className="flex h-[42px] items-center justify-center rounded-md bg-components-panel-bg text-xs font-normal leading-[18px] text-text-tertiary">
         {t('workflow.nodes.start.noVarTip')}
       </div>
     )
@@ -90,15 +91,15 @@ const VarList: FC<Props> = ({
 
   return (
     <ReactSortable
-      className='space-y-1'
+      className="space-y-1"
       list={listWithIds}
       setList={(list) => { onChange(list.map(item => item.variable)) }}
-      handle='.handle'
-      ghostClass='opacity-50'
+      handle=".handle"
+      ghostClass="opacity-50"
       animation={150}
     >
       {listWithIds.map((itemWithId, index) => (
-        <div key={itemWithId.id} className='group relative'>
+        <div key={itemWithId.id} className="group relative">
           <VarItem
             className={cn(canDrag && 'handle')}
             readonly={readonly}
@@ -108,10 +109,13 @@ const VarList: FC<Props> = ({
             varKeys={list.map(item => item.variable)}
             canDrag={canDrag}
           />
-          {canDrag && <RiDraggable className={cn(
-            'handle absolute left-3 top-2.5 hidden h-3 w-3 cursor-pointer text-text-tertiary',
-            'group-hover:block',
-          )} />}
+          {canDrag && (
+            <RiDraggable className={cn(
+              'handle absolute left-3 top-2.5 hidden h-3 w-3 cursor-pointer text-text-tertiary',
+              'group-hover:block',
+            )}
+            />
+          )}
         </div>
       ))}
     </ReactSortable>

web/app/components/workflow/nodes/start/default.ts

@@ -1,7 +1,7 @@
 import type { NodeDefault } from '../../types'
 import type { StartNodeType } from './types'
-import { genNodeMetaData } from '@/app/components/workflow/utils'
 import { BlockEnum } from '@/app/components/workflow/types'
+import { genNodeMetaData } from '@/app/components/workflow/utils'
 
 const metaData = genNodeMetaData({
   sort: 0.1,

web/app/components/workflow/nodes/start/node.tsx

@@ -1,10 +1,11 @@
 import type { FC } from 'react'
+import type { StartNodeType } from './types'
+import type { NodeProps } from '@/app/components/workflow/types'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import InputVarTypeIcon from '../_base/components/input-var-type-icon'
-import type { StartNodeType } from './types'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
-import type { NodeProps } from '@/app/components/workflow/types'
+import InputVarTypeIcon from '../_base/components/input-var-type-icon'
+
 const i18nPrefix = 'workflow.nodes.start'
 
 const Node: FC<NodeProps<StartNodeType>> = ({
@@ -17,18 +18,18 @@ const Node: FC<NodeProps<StartNodeType>> = ({
     return null
 
   return (
-    <div className='mb-1 px-3 py-1'>
-      <div className='space-y-0.5'>
+    <div className="mb-1 px-3 py-1">
+      <div className="space-y-0.5">
         {variables.map(variable => (
-          <div key={variable.variable} className='flex h-6 items-center justify-between space-x-1 rounded-md  bg-workflow-block-parma-bg px-1'>
-            <div className='flex w-0 grow items-center space-x-1'>
-              <Variable02 className='h-3.5 w-3.5 shrink-0 text-text-accent' />
-              <span className='system-xs-regular w-0 grow truncate text-text-secondary'>{variable.variable}</span>
+          <div key={variable.variable} className="flex h-6 items-center justify-between space-x-1 rounded-md  bg-workflow-block-parma-bg px-1">
+            <div className="flex w-0 grow items-center space-x-1">
+              <Variable02 className="h-3.5 w-3.5 shrink-0 text-text-accent" />
+              <span className="system-xs-regular w-0 grow truncate text-text-secondary">{variable.variable}</span>
             </div>
 
-            <div className='ml-1 flex items-center space-x-1'>
-              {variable.required && <span className='system-2xs-regular-uppercase text-text-tertiary'>{t(`${i18nPrefix}.required`)}</span>}
-              <InputVarTypeIcon type={variable.type} className='h-3 w-3 text-text-tertiary' />
+            <div className="ml-1 flex items-center space-x-1">
+              {variable.required && <span className="system-2xs-regular-uppercase text-text-tertiary">{t(`${i18nPrefix}.required`)}</span>}
+              <InputVarTypeIcon type={variable.type} className="h-3 w-3 text-text-tertiary" />
             </div>
           </div>
         ))}

web/app/components/workflow/nodes/start/panel.tsx

@@ -1,16 +1,16 @@
 import type { FC } from 'react'
+import type { StartNodeType } from './types'
+import type { InputVar, NodePanelProps } from '@/app/components/workflow/types'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import RemoveEffectVarConfirm from '../_base/components/remove-effect-var-confirm'
-import VarList from './components/var-list'
-import VarItem from './components/var-item'
-import useConfig from './use-config'
-import type { StartNodeType } from './types'
-import Split from '@/app/components/workflow/nodes/_base/components/split'
-import Field from '@/app/components/workflow/nodes/_base/components/field'
-import AddButton from '@/app/components/base/button/add-button'
 import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
-import type { InputVar, NodePanelProps } from '@/app/components/workflow/types'
+import AddButton from '@/app/components/base/button/add-button'
+import Field from '@/app/components/workflow/nodes/_base/components/field'
+import Split from '@/app/components/workflow/nodes/_base/components/split'
+import RemoveEffectVarConfirm from '../_base/components/remove-effect-var-confirm'
+import VarItem from './components/var-item'
+import VarList from './components/var-list'
+import useConfig from './use-config'
 
 const i18nPrefix = 'workflow.nodes.start'
 
@@ -35,13 +35,14 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
 
   const handleAddVarConfirm = (payload: InputVar) => {
     const isValid = handleAddVariable(payload)
-    if (!isValid) return
+    if (!isValid)
+      return
     hideAddVarModal()
   }
 
   return (
-    <div className='mt-2'>
-      <div className='space-y-4 px-4 pb-2'>
+    <div className="mt-2">
+      <div className="space-y-4 px-4 pb-2">
         <Field
           title={t(`${i18nPrefix}.inputField`)}
           operations={
@@ -55,8 +56,8 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
               onChange={handleVarListChange}
             />
 
-            <div className='mt-1 space-y-1'>
-              <Split className='my-2' />
+            <div className="mt-1 space-y-1">
+              <Split className="my-2" />
               {
                 isChatMode && (
                   <VarItem
@@ -64,12 +65,13 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
                     payload={{
                       variable: 'userinput.query',
                     } as any}
-                    rightContent={
-                      <div className='text-xs font-normal text-text-tertiary'>
+                    rightContent={(
+                      <div className="text-xs font-normal text-text-tertiary">
                         String
                       </div>
-                    }
-                  />)
+                    )}
+                  />
+                )
               }
 
               <VarItem
@@ -78,11 +80,11 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
                 payload={{
                   variable: 'userinput.files',
                 } as any}
-                rightContent={
-                  <div className='text-xs font-normal text-text-tertiary'>
+                rightContent={(
+                  <div className="text-xs font-normal text-text-tertiary">
                     Array[File]
                   </div>
-                }
+                )}
               />
             </div>
           </>

web/app/components/workflow/nodes/start/use-config.ts

@@ -1,19 +1,19 @@
-import { useCallback, useState } from 'react'
-import { produce } from 'immer'
-import { useBoolean } from 'ahooks'
 import type { StartNodeType } from './types'
-import { ChangeType } from '@/app/components/workflow/types'
 import type { InputVar, MoreInfo, ValueSelector } from '@/app/components/workflow/types'
-import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
+import { useBoolean } from 'ahooks'
+import { produce } from 'immer'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Toast from '@/app/components/base/toast'
 import {
   useIsChatMode,
   useNodesReadOnly,
   useWorkflow,
 } from '@/app/components/workflow/hooks'
-import useInspectVarsCrud from '../../hooks/use-inspect-vars-crud'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
+import { ChangeType } from '@/app/components/workflow/types'
 import { hasDuplicateStr } from '@/utils/var'
-import Toast from '@/app/components/base/toast'
-import { useTranslation } from 'react-i18next'
+import useInspectVarsCrud from '../../hooks/use-inspect-vars-crud'
 
 const useConfig = (id: string, payload: StartNodeType) => {
   const { t } = useTranslation()
@@ -41,12 +41,12 @@ const useConfig = (id: string, payload: StartNodeType) => {
   }] = useBoolean(false)
   const [removedVar, setRemovedVar] = useState<ValueSelector>([])
   const [removedIndex, setRemoveIndex] = useState(0)
-  const handleVarListChange = useCallback((newList: InputVar[], moreInfo?: { index: number; payload: MoreInfo }) => {
+  const handleVarListChange = useCallback((newList: InputVar[], moreInfo?: { index: number, payload: MoreInfo }) => {
     if (moreInfo?.payload?.type === ChangeType.remove) {
       const varId = nodesWithInspectVars.find(node => node.nodeId === id)?.vars.find((varItem) => {
         return varItem.name === moreInfo?.payload?.payload?.beforeKey
       })?.id
-      if(varId)
+      if (varId)
         deleteInspectVar(id, varId)
 
       if (isVarUsedInNodes([id, moreInfo?.payload?.payload?.beforeKey || ''])) {
@@ -66,7 +66,7 @@ const useConfig = (id: string, payload: StartNodeType) => {
       handleOutVarRenameChange(id, [id, inputs.variables[moreInfo.index].variable], [id, changedVar.variable])
       renameInspectVarName(id, inputs.variables[moreInfo.index].variable, changedVar.variable)
     }
-    else if(moreInfo?.payload?.type !== ChangeType.remove) { // edit var type
+    else if (moreInfo?.payload?.type !== ChangeType.remove) { // edit var type
       deleteNodeInspectorVars(id)
     }
   }, [deleteInspectVar, deleteNodeInspectorVars, handleOutVarRenameChange, id, inputs, isVarUsedInNodes, nodesWithInspectVars, renameInspectVarName, setInputs, showRemoveVarConfirm])
@@ -87,11 +87,11 @@ const useConfig = (id: string, payload: StartNodeType) => {
     const newList = newInputs.variables
     let errorMsgKey = ''
     let typeName = ''
-    if(hasDuplicateStr(newList.map(item => item.variable))) {
+    if (hasDuplicateStr(newList.map(item => item.variable))) {
       errorMsgKey = 'appDebug.varKeyError.keyAlreadyExists'
       typeName = 'appDebug.variableConfig.varName'
     }
-    else if(hasDuplicateStr(newList.map(item => item.label as string))) {
+    else if (hasDuplicateStr(newList.map(item => item.label as string))) {
       errorMsgKey = 'appDebug.varKeyError.keyAlreadyExists'
       typeName = 'appDebug.variableConfig.labelName'
     }

web/app/components/workflow/nodes/start/use-single-run-form-params.ts

@@ -1,14 +1,14 @@
 import type { RefObject } from 'react'
-import { useTranslation } from 'react-i18next'
-import type { Props as FormProps } from '@/app/components/workflow/nodes/_base/components/before-run-form/form'
-import type { ValueSelector } from '@/app/components/workflow/types'
-import { type InputVar, InputVarType, type Variable } from '@/app/components/workflow/types'
 import type { StartNodeType } from './types'
+import type { Props as FormProps } from '@/app/components/workflow/nodes/_base/components/before-run-form/form'
+import type { InputVar, ValueSelector, Variable } from '@/app/components/workflow/types'
+import { useTranslation } from 'react-i18next'
+import { InputVarType } from '@/app/components/workflow/types'
 import { useIsChatMode } from '../../hooks'
 
 type Params = {
-  id: string,
-  payload: StartNodeType,
+  id: string
+  payload: StartNodeType
   runInputData: Record<string, any>
   runInputDataRef: RefObject<Record<string, any>>
   getInputVars: (textList: string[]) => InputVar[]