Chore: frontend infrastructure upgrade (#16420)

Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: jZonG <jzongcode@gmail.com>

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
+        flex h-full w-[420px] flex-col rounded-l-2xl border border-black/2 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,

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 ? 'border-indigo-100 bg-indigo-25 shadow-none' : 'border-transparent bg-white shadow-xs'}
       `}
     >
       <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'>

web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx

@@ -8,7 +8,7 @@ import RemoveButton from '@/app/components/workflow/nodes/_base/components/remov
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 
-interface Props {
+type Props = {
   isString: boolean
   list: any[]
   onChange: (list: any[]) => void
@@ -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>

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='system-xs-regular placeholder:system-xs-regular block h-7 w-full appearance-none px-2 text-text-secondary caret-primary-600 outline-none placeholder:text-components-input-text-placeholder  hover:bg-state-base-hover focus:bg-components-input-bg-active'
           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='system-xs-regular placeholder:system-xs-regular block h-7 w-full appearance-none px-2 text-text-secondary caret-primary-600 outline-none placeholder:text-components-input-text-placeholder  hover:bg-state-base-hover focus:bg-components-input-bg-active'
           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)}
           />
         )}

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 flex h-7 items-center uppercase text-text-tertiary'>
+        <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

web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx

@@ -19,29 +19,29 @@ 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',
+      'radius-md mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 py-2 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
       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='text-text-primary system-sm-medium'>{item.name}</div>
-          <div className='text-text-tertiary system-xs-medium'>{capitalize(item.value_type)}</div>
+        <div className='flex grow items-center gap-1'>
+          <BubbleX className='h-4 w-4 text-util-colors-teal-teal-700' />
+          <div className='system-sm-medium text-text-primary'>{item.name}</div>
+          <div className='system-xs-medium text-text-tertiary'>{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='flex shrink-0 items-center gap-1 text-text-tertiary'>
+          <div className='radius-md cursor-pointer p-1 hover:bg-state-base-hover hover:text-text-secondary'>
+            <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 cursor-pointer p-1 hover:bg-state-destructive-hover hover:text-text-destructive'
             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>
-      <div className='text-text-tertiary system-xs-regular truncate'>{item.description}</div>
+      <div className='system-xs-regular truncate text-text-tertiary'>{item.description}</div>
     </div>
   )
 }

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>

web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx

@@ -18,13 +18,13 @@ import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel
 import cn from '@/utils/classnames'
 import { checkKeys } from '@/utils/var'
 
-export interface ModalPropsType {
+export type ModalPropsType = {
   chatVar?: ConversationVariable
   onClose: () => void
   onSave: (chatVar: ConversationVariable) => void
 }
 
-interface ObjectValueItem {
+type ObjectValueItem = {
   key: string
   type: ChatVarType
   value: string | number | undefined
@@ -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('flex h-full w-[360px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg 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='system-xl-semibold mb-3 flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'>
         {!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='h-4 w-4 text-text-tertiary' />
           </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='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{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='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{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='system-sm-semibold mb-1 flex h-6 items-center justify-between text-text-secondary'>
             <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='w-full rounded-[10px] bg-components-input-bg-normal 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='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{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='system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs'
               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>

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',
+          'flex w-full cursor-pointer items-center px-2',
+          !inCell && 'radius-md bg-components-input-bg-normal py-1 hover:bg-state-base-hover-alt',
           inCell && 'py-0.5 hover:bg-state-base-hover',
           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 grow truncate p-1 text-components-input-text-filled',
             inCell && 'system-xs-regular text-text-secondary',
           )}>{value}</div>
-          <RiArrowDownSLine className='ml-0.5 w-4 h-4 text-text-quaternary' />
+          <RiArrowDownSLine className='ml-0.5 h-4 w-4 text-text-quaternary' />
         </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='radius-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur 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 flex cursor-pointer items-center gap-2 py-[6px] pl-3 pr-2 hover:bg-state-base-hover' 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 grow truncate text-text-secondary'>{item}</div>
+              {value === item && <RiCheckLine className='h-4 w-4 text-text-accent' />}
             </div>
           ))}
         </div>

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',
+        'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
       )}
     >
-      <div className='shrink-0 flex items-center justify-between p-4 pb-0 text-text-primary system-xl-semibold'>
+      <div className='system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'>
         {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='h-4 w-4 text-text-tertiary' />
           </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 relative bg-background-section-burn p-3'>
+            <div className='system-2xs-medium-uppercase inline-block rounded-[5px] border border-divider-deep px-[5px] py-[3px] text-text-tertiary'>TIPS</div>
+            <div className='system-sm-regular mb-4 mt-1 text-text-secondary'>
               {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='text-text-secondary system-xs-semibold'>conversation_var</div>
-                <div className='text-text-tertiary system-2xs-regular'>String</div>
+              <div className='radius-lg flex flex-col border border-workflow-block-border bg-workflow-block-bg p-3 pb-4 shadow-md'>
+                <BubbleX className='mb-1 h-4 w-4 shrink-0 text-util-colors-teal-teal-700' />
+                <div className='system-xs-semibold text-text-secondary'>conversation_var</div>
+                <div className='system-2xs-regular text-text-tertiary'>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='h-2 grow text-text-quaternary' />
+                    <div className='system-2xs-medium shrink-0 text-text-tertiary'>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='system-xs-semibold grow truncate text-text-secondary'>{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='system-2xs-medium shrink-0 text-text-tertiary'>READ</div>
+                    <LongArrowRight className='h-2 grow text-text-quaternary' />
                   </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='system-xs-semibold grow truncate text-text-secondary'>{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='absolute right-[38px] top-[-4px] z-10 h-3 w-3 rotate-45 bg-background-section-burn'/>
           </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}

web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx

@@ -1,11 +1,4 @@
-import {
-  forwardRef,
-  memo,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-} from 'react'
+import { memo, useCallback, useEffect, useImperativeHandle, useMemo } from 'react'
 import { useNodes } from 'reactflow'
 import { BlockEnum } from '../../types'
 import {
@@ -35,12 +28,17 @@ type ChatWrapperProps = {
   onHide: () => void
 }
 
-const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({
-  showConversationVariableModal,
-  onConversationModalHide,
-  showInputsFieldsPanel,
-  onHide,
-}, ref) => {
+const ChatWrapper = (
+  {
+    ref,
+    showConversationVariableModal,
+    onConversationModalHide,
+    showInputsFieldsPanel,
+    onHide,
+  }: ChatWrapperProps & {
+    ref: React.RefObject<ChatWrapperRefType>;
+  },
+) => {
   const nodes = useNodes<StartNodeType>()
   const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
   const startVariables = startNode?.data.variables
@@ -158,7 +156,7 @@ const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({
       )}
     </>
   )
-})
+}
 
 ChatWrapper.displayName = 'ChatWrapper'
 

web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx

@@ -22,7 +22,7 @@ import useTimestamp from '@/hooks/use-timestamp'
 import { fetchCurrentValueOfConversationVariable } from '@/service/workflow'
 import cn from '@/utils/classnames'
 
-export interface Props {
+export type Props = {
   conversationID: string
   onHide: () => void
 }
@@ -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='h-4 w-4 text-text-tertiary' />
       </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='flex h-full w-[224px] shrink-0 flex-col border-r border-divider-burn bg-background-sidenav-bg'>
+          <div className='system-xl-semibold shrink-0 pb-3 pl-5 pr-4 pt-5 text-text-primary'>{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 group mb-0.5 flex cursor-pointer items-center p-2 hover:bg-state-base-hover', currentVar.id === chatVar.id && 'bg-state-base-hover')} onClick={() => setCurrentVar(chatVar)}>
+                <BubbleX className={cn('mr-1 h-4 w-4 shrink-0 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('system-sm-medium truncate text-text-tertiary group-hover:text-util-colors-teal-teal-700', 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='flex h-full w-0 grow flex-col bg-components-panel-bg'>
           <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 className='system-xl-semibold text-text-primary'>{currentVar.name}</div>
+              <div className='system-xs-medium text-text-tertiary'>{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='system-xs-medium-uppercase shrink-0 text-text-tertiary'>{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='system-xs-regular shrink-0 text-text-tertiary'>{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='text-text-secondary system-xs-semibold'>JSON</div>
+                <div className='flex h-full flex-col rounded-lg bg-components-input-bg-normal px-2 pb-2'>
+                  <div className='flex h-7 shrink-0 items-center justify-between pl-3 pr-2 pt-1'>
+                    <div className='system-xs-semibold text-text-secondary'>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='h-4 w-4 cursor-pointer text-text-tertiary' onClick={handleCopy} />
                         )
                         : (
-                          <ClipboardCheck className='w-4 h-4 text-text-tertiary' />
+                          <ClipboardCheck className='h-4 w-4 text-text-tertiary' />
                         )
                       }
                     </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='system-md-regular h-full overflow-y-auto overflow-x-hidden rounded-lg bg-components-input-bg-normal px-4 py-3 text-components-input-text-filled'>{latestValueMap[currentVar.id] || ''}</div>
               )}
             </div>
           </div>

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')}

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',
+        'flex h-full w-[420px] flex-col rounded-l-2xl border border-r-0 border-components-panel-border bg-chatbot-bg 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='system-xl-semibold flex shrink-0 items-center justify-between px-4 pb-2 pt-3 text-text-primary'>
         <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='absolute bottom-[-17px] right-[5px] z-10 h-3 w-3 rotate-45 border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg'/>}
             </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}

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('sticky top-0 z-[1] rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-xs')}>
+      <div className='px-4 pb-4 pt-3'>
         {variables.map((variable, index) => (
           <div
             key={variable.variable}

web/app/components/workflow/panel/env-panel/env-item.tsx

@@ -22,30 +22,30 @@ 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',
+      'radius-md mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 py-2 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
       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='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' />}
+        <div className='flex grow items-center gap-1'>
+          <Env className='h-4 w-4 text-util-colors-violet-violet-600' />
+          <div className='system-sm-medium text-text-primary'>{env.name}</div>
+          <div className='system-xs-medium text-text-tertiary'>{capitalize(env.value_type)}</div>
+          {env.value_type === 'secret' && <RiLock2Line className='h-3 w-3 text-text-tertiary' />}
         </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='flex shrink-0 items-center gap-1 text-text-tertiary'>
+          <div className='radius-md cursor-pointer p-1 hover:bg-state-base-hover hover:text-text-secondary'>
+            <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 cursor-pointer p-1 hover:bg-state-destructive-hover hover:text-text-destructive'
             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>
-      <div className='text-text-tertiary system-xs-regular truncate'>{env.value_type === 'secret' ? envSecrets[env.id] : env.value}</div>
+      <div className='system-xs-regular truncate text-text-tertiary'>{env.value_type === 'secret' ? envSecrets[env.id] : env.value}</div>
     </div>
   )
 }

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',
+        'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
       )}
     >
-      <div className='shrink-0 flex items-center justify-between p-4 pb-0 text-text-primary system-xl-semibold'>
+      <div className='system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'>
         {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='h-4 w-4 text-text-tertiary' />
           </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 shrink-0 px-4 py-1 text-text-tertiary'>{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}

web/app/components/workflow/panel/env-panel/variable-modal.tsx

@@ -12,7 +12,7 @@ import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
 import { checkKeys } from '@/utils/var'
 
-export interface ModalPropsType {
+export type ModalPropsType = {
   env?: EnvironmentVariable
   onClose: () => void
   onSave: (env: EnvironmentVariable) => void
@@ -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('flex h-full w-[360px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg 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='system-xl-semibold mb-3 flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'>
         {!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='h-4 w-4 text-text-tertiary' />
           </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='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{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 system-sm-regular flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+              type === 'string' && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
             )} 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 system-sm-regular flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+              type === 'number' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg font-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
             )} 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 system-sm-regular flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+              type === 'secret' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg font-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
             )} 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='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{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='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{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>

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>

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',
+        'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
       )}
     >
-      <div className='shrink-0 flex items-center justify-between p-4 pb-0 text-text-primary system-xl-semibold'>
+      <div className='system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'>
         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='h-4 w-4 text-text-tertiary' />
           </div>
         </div>
       </div>
-      <div className='shrink-0 py-1 px-4 system-sm-regular text-text-tertiary'>...</div>
+      <div className='system-sm-regular shrink-0 px-4 py-1 text-text-tertiary'>...</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}

web/app/components/workflow/panel/global-variable-panel/item.tsx

@@ -13,16 +13,16 @@ 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',
+      'radius-md mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 py-2 shadow-xs hover:bg-components-panel-on-panel-item-bg-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='text-text-primary system-sm-medium'>{payload.name}</div>
-          <div className='text-text-tertiary system-xs-medium'>{capitalize(payload.value_type)}</div>
+        <div className='flex grow items-center gap-1'>
+          <Env className='h-4 w-4 text-util-colors-violet-violet-600' />
+          <div className='system-sm-medium text-text-primary'>{payload.name}</div>
+          <div className='system-xs-medium text-text-tertiary'>{capitalize(payload.value_type)}</div>
         </div>
       </div>
-      <div className='text-text-tertiary system-xs-regular truncate'>{payload.description}</div>
+      <div className='system-xs-regular truncate text-text-tertiary'>{payload.description}</div>
     </div>
   )
 }

web/app/components/workflow/panel/index.tsx

@@ -42,7 +42,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}`}
     >
       {

web/app/components/workflow/panel/inputs-panel.tsx

@@ -25,7 +25,7 @@ import {
 } from '@/app/components/base/chat/chat/utils'
 import { useCheckInputsForms } from '@/app/components/base/chat/chat/check-input-forms-hooks'
 
-interface Props {
+type Props = {
   onRun: () => void
 }
 
@@ -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

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='flex h-full w-[400px] flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'>
+      <div className='system-xl-semibold flex items-center justify-between p-4 pb-0 text-text-primary'>
         {`Test Run#${historyWorkflowData?.sequence_number}`}
       </div>
       <Run

web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx

@@ -43,11 +43,11 @@ const ContextMenu: FC<ContextMenuProps> = (props: ContextMenuProps) => {
     >
       <PortalToFollowElemTrigger>
         <Button size='small' className='px-1' onClick={handleClickTrigger}>
-          <RiMoreFill className='w-4 h-4' />
+          <RiMoreFill className='h-4 w-4' />
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-10'>
-        <div className='flex flex-col w-[184px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
+        <div className='flex w-[184px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
           <div className='flex flex-col p-1'>
             {
               options.map((option) => {
@@ -64,7 +64,7 @@ const ContextMenu: FC<ContextMenuProps> = (props: ContextMenuProps) => {
           {
             isShowDelete && (
               <>
-                <Divider type='horizontal' className='h-[1px] bg-divider-subtle my-0' />
+                <Divider type='horizontal' className='my-0 h-[1px] bg-divider-subtle' />
                 <div className='p-1'>
                   <MenuItem
                     item={deleteOperation}

web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx

@@ -19,7 +19,7 @@ const MenuItem: FC<MenuItemProps> = ({
   return (
     <div
       className={cn(
-        'flex items-center justify-between px-2 py-1.5 cursor-pointer rounded-lg ',
+        'flex cursor-pointer items-center justify-between rounded-lg px-2 py-1.5 ',
         isDestructive ? 'hover:bg-state-destructive-hover' : 'hover:bg-state-base-hover',
       )}
       onClick={() => {
@@ -27,7 +27,7 @@ const MenuItem: FC<MenuItemProps> = ({
       }}
     >
       <div className={cn(
-        'flex-1 text-text-primary system-md-regular',
+        'system-md-regular flex-1 text-text-primary',
         isDestructive && 'hover:text-text-destructive',
       )}>
         {item.name}

web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx

@@ -21,10 +21,10 @@ const DeleteConfirmModal: FC<DeleteConfirmModalProps> = ({
 
   return <Modal className='p-0' isShow={isOpen} onClose={onClose}>
     <div className='flex flex-col gap-y-2 p-6 pb-4 '>
-      <div className='text-text-primary title-2xl-semi-bold'>
+      <div className='title-2xl-semi-bold text-text-primary'>
         {`${t('common.operation.delete')} ${versionInfo.marked_name || t('workflow.versionHistory.defaultName')}`}
       </div>
-      <p className='text-text-secondary system-md-regular'>
+      <p className='system-md-regular text-text-secondary'>
         {t('workflow.versionHistory.deletionTip')}
       </p>
     </div>

web/app/components/workflow/panel/version-history-panel/empty.tsx

@@ -12,11 +12,11 @@ const Empty: FC<EmptyProps> = ({
 }) => {
   const { t } = useTranslation()
 
-  return <div className='h-5/6 w-full flex flex-col justify-center gap-y-2'>
+  return <div className='flex h-5/6 w-full flex-col justify-center gap-y-2'>
     <div className='flex justify-center'>
-      <RiHistoryLine className='w-10 h-10 text-text-empty-state-icon' />
+      <RiHistoryLine className='h-10 w-10 text-text-empty-state-icon' />
     </div>
-    <div className='flex justify-center text-text-tertiary system-xs-regular'>
+    <div className='system-xs-regular flex justify-center text-text-tertiary'>
       {t('workflow.versionHistory.filter.empty')}
     </div>
     <div className='flex justify-center'>

web/app/components/workflow/panel/version-history-panel/filter/filter-item.tsx

@@ -18,13 +18,13 @@ const FilterItem: FC<FilterItemProps> = ({
 }) => {
   return (
     <div
-      className='flex items-center justify-between gap-x-1 px-2 py-1.5 cursor-pointer rounded-lg hover:bg-state-base-hover'
+      className='flex cursor-pointer items-center justify-between gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
       onClick={() => {
         onClick(item.key)
       }}
     >
-      <div className='flex-1 text-text-primary system-md-regular'>{item.name}</div>
-      {isSelected && <RiCheckLine className='w-4 h-4 text-text-accent shrink-0' />}
+      <div className='system-md-regular flex-1 text-text-primary'>{item.name}</div>
+      {isSelected && <RiCheckLine className='h-4 w-4 shrink-0 text-text-accent' />}
     </div>
   )
 }

web/app/components/workflow/panel/version-history-panel/filter/filter-switch.tsx

@@ -15,8 +15,8 @@ const FilterSwitch: FC<FilterSwitchProps> = ({
 
   return (
     <div className='flex items-center p-1'>
-      <div className='flex items-center gap-x-1 w-full px-2 py-1.5'>
-        <div className='flex-1 px-1 text-text-secondary system-md-regular'>
+      <div className='flex w-full items-center gap-x-1 px-2 py-1.5'>
+        <div className='system-md-regular flex-1 px-1 text-text-secondary'>
           {t('workflow.versionHistory.filter.onlyShowNamedVersions')}
         </div>
         <Switch

web/app/components/workflow/panel/version-history-panel/filter/index.tsx

@@ -47,15 +47,15 @@ const Filter: FC<FilterProps> = ({
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
         <div
           className={cn(
-            'flex items-center justify-center w-6 h-6 p-0.5 cursor-pointer rounded-md',
+            'flex h-6 w-6 cursor-pointer items-center justify-center rounded-md p-0.5',
             isFiltering ? 'bg-state-accent-active-alt' : 'hover:bg-state-base-hover',
           )}
         >
-          <RiFilter3Line className={cn('w-4 h-4', isFiltering ? 'text-text-accent' : ' text-text-tertiary')} />
+          <RiFilter3Line className={cn('h-4 w-4', isFiltering ? 'text-text-accent' : ' text-text-tertiary')} />
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[12]'>
-        <div className='flex flex-col w-[248px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
+        <div className='flex w-[248px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
           <div className='flex flex-col p-1'>
             {
               options.map((option) => {
@@ -70,7 +70,7 @@ const Filter: FC<FilterProps> = ({
               })
             }
           </div>
-          <Divider type='horizontal' className='h-[1px] bg-divider-subtle my-0' />
+          <Divider type='horizontal' className='my-0 h-[1px] bg-divider-subtle' />
           <FilterSwitch enabled={isOnlyShowNamedVersions} handleSwitch={handleSwitch} />
         </div>
       </PortalToFollowElemContent>

web/app/components/workflow/panel/version-history-panel/index.tsx

@@ -191,24 +191,24 @@ const VersionHistoryPanel = () => {
   }, [t, updateWorkflow, resetWorkflowVersionHistory])
 
   return (
-    <div className='flex flex-col w-[268px] bg-components-panel-bg rounded-l-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border shadow-xl shadow-shadow-shadow-5'>
+    <div className='flex w-[268px] flex-col rounded-l-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5'>
       <div className='flex items-center gap-x-2 px-4 pt-3'>
-        <div className='flex-1 py-1 text-text-primary system-xl-semibold'>{t('workflow.versionHistory.title')}</div>
+        <div className='system-xl-semibold flex-1 py-1 text-text-primary'>{t('workflow.versionHistory.title')}</div>
         <Filter
           filterValue={filterValue}
           isOnlyShowNamedVersions={isOnlyShowNamedVersions}
           onClickFilterItem={handleClickFilterItem}
           handleSwitch={handleSwitch}
         />
-        <Divider type='vertical' className='h-3.5 mx-1' />
+        <Divider type='vertical' className='mx-1 h-3.5' />
         <div
-          className='flex items-center justify-center w-6 h-6 p-0.5 cursor-pointer'
+          className='flex h-6 w-6 cursor-pointer items-center justify-center p-0.5'
           onClick={handleClose}
         >
-          <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+          <RiCloseLine className='h-4 w-4 text-text-tertiary' />
         </div>
       </div>
-      <div className="flex-1 relative px-3 py-2 overflow-y-auto">
+      <div className="relative flex-1 overflow-y-auto px-3 py-2">
         {(isFetching && !versionHistory?.pages?.length)
           ? (
             <Loading />
@@ -230,18 +230,18 @@ const VersionHistoryPanel = () => {
                 })
               ))}
               {hasNextPage && (
-                <div className='flex absolute bottom-2 left-2 p-2'>
+                <div className='absolute bottom-2 left-2 flex p-2'>
                   <div
-                    className='flex items-center gap-x-1 cursor-pointer'
+                    className='flex cursor-pointer items-center gap-x-1'
                     onClick={handleNextPage}
                   >
-                    <div className='flex item-center justify-center p-0.5'>
+                    <div className='item-center flex justify-center p-0.5'>
                       {
                         isFetching
-                          ? <RiLoader2Line className='w-3.5 h-3.5 text-text-accent animate-spin' />
-                          : <RiArrowDownDoubleLine className='w-3.5 h-3.5 text-text-accent' />}
+                          ? <RiLoader2Line className='h-3.5 w-3.5 animate-spin text-text-accent' />
+                          : <RiArrowDownDoubleLine className='h-3.5 w-3.5 text-text-accent' />}
                     </div>
-                    <div className='py-[1px] text-text-accent system-xs-medium-uppercase'>
+                    <div className='system-xs-medium-uppercase py-[1px] text-text-accent'>
                       {t('workflow.common.loadMore')}
                     </div>
                   </div>

web/app/components/workflow/panel/version-history-panel/loading/index.tsx

@@ -11,7 +11,7 @@ const itemConfig = Array.from({ length: 8 }).map((_, index) => {
 
 const Loading = () => {
   return <div className='relative w-full overflow-y-hidden'>
-    <div className='absolute z-10 top-0 left-0 w-full h-full bg-dataset-chunk-list-mask-bg' />
+    <div className='absolute left-0 top-0 z-10 h-full w-full bg-dataset-chunk-list-mask-bg' />
     {itemConfig.map((config, index) => <Item key={index} {...config} />)}
   </div>
 }

web/app/components/workflow/panel/version-history-panel/loading/item.tsx

@@ -15,19 +15,19 @@ const Item: FC<ItemProps> = ({
   isLast,
 }) => {
   return (
-    <div className='flex gap-x-1 relative p-2' >
-      {!isLast && <div className='absolute w-0.5 h-[calc(100%-0.75rem)] left-4 top-6 bg-divider-subtle' />}
-      <div className=' flex items-center justify-center shrink-0 w-[18px] h-5'>
-        <div className='w-2 h-2 border-[2px] rounded-lg border-text-quaternary' />
+    <div className='relative flex gap-x-1 p-2' >
+      {!isLast && <div className='absolute left-4 top-6 h-[calc(100%-0.75rem)] w-0.5 bg-divider-subtle' />}
+      <div className=' flex h-5 w-[18px] shrink-0 items-center justify-center'>
+        <div className='h-2 w-2 rounded-lg border-[2px] border-text-quaternary' />
       </div>
-      <div className='flex flex-col grow gap-y-0.5'>
-        <div className='flex items-center h-3.5'>
-          <div className={cn('h-2 w-full bg-text-quaternary rounded-sm opacity-20', titleWidth)} />
+      <div className='flex grow flex-col gap-y-0.5'>
+        <div className='flex h-3.5 items-center'>
+          <div className={cn('h-2 w-full rounded-sm bg-text-quaternary opacity-20', titleWidth)} />
         </div>
         {
           !isFirst && (
-            <div className='flex items-center h-3'>
-              <div className={cn('h-1.5 w-full bg-text-quaternary rounded-sm opacity-20', releaseNotesWidth)} />
+            <div className='flex h-3 items-center'>
+              <div className={cn('h-1.5 w-full rounded-sm bg-text-quaternary opacity-20', releaseNotesWidth)} />
             </div>
           )
         }

web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx

@@ -21,10 +21,10 @@ const RestoreConfirmModal: FC<RestoreConfirmModalProps> = ({
 
   return <Modal className='p-0' isShow={isOpen} onClose={onClose}>
     <div className='flex flex-col gap-y-2 p-6 pb-4 '>
-      <div className='text-text-primary title-2xl-semi-bold'>
+      <div className='title-2xl-semi-bold text-text-primary'>
         {`${t('workflow.common.restore')} ${versionInfo.marked_name || t('workflow.versionHistory.defaultName')}`}
       </div>
-      <p className='text-text-secondary system-md-regular'>
+      <p className='system-md-regular text-text-secondary'>
         {t('workflow.versionHistory.restorationTip')}
       </p>
     </div>

web/app/components/workflow/panel/version-history-panel/version-history-item.tsx

@@ -67,8 +67,8 @@ const VersionHistoryItem: React.FC<VersionHistoryItemProps> = ({
   return (
     <div
       className={cn(
-        'flex gap-x-1 relative p-2 rounded-lg group',
-        isSelected ? 'bg-state-accent-active cursor-not-allowed' : 'hover:bg-state-base-hover cursor-pointer',
+        'group relative flex gap-x-1 rounded-lg p-2',
+        isSelected ? 'cursor-not-allowed bg-state-accent-active' : 'cursor-pointer hover:bg-state-base-hover',
       )}
       onClick={handleClickItem}
       onMouseEnter={() => setIsHovering(true)}
@@ -81,38 +81,38 @@ const VersionHistoryItem: React.FC<VersionHistoryItemProps> = ({
         setOpen(true)
       }}
     >
-      {!isLast && <div className='absolute w-0.5 h-[calc(100%-0.75rem)] left-4 top-6 bg-divider-subtle' />}
-      <div className=' flex items-center justify-center shrink-0 w-[18px] h-5'>
+      {!isLast && <div className='absolute left-4 top-6 h-[calc(100%-0.75rem)] w-0.5 bg-divider-subtle' />}
+      <div className=' flex h-5 w-[18px] shrink-0 items-center justify-center'>
         <div className={cn(
-          'w-2 h-2 border-[2px] rounded-lg',
+          'h-2 w-2 rounded-lg border-[2px]',
           isSelected ? 'border-text-accent' : 'border-text-quaternary',
         )}/>
       </div>
-      <div className='flex flex-col gap-y-0.5 grow overflow-hidden'>
-        <div className='flex items-center gap-x-1 h-5 mr-6'>
+      <div className='flex grow flex-col gap-y-0.5 overflow-hidden'>
+        <div className='mr-6 flex h-5 items-center gap-x-1'>
           <div className={cn(
-            'py-[1px] system-sm-semibold truncate',
+            'system-sm-semibold truncate py-[1px]',
             isSelected ? 'text-text-accent' : 'text-text-secondary',
           )}>
             {isDraft ? t('workflow.versionHistory.currentDraft') : item.marked_name || t('workflow.versionHistory.defaultName')}
           </div>
           {isLatest && (
-            <div className='flex items-center shrink-0 h-5 px-[5px] rounded-md border border-text-accent-secondary
-            bg-components-badge-bg-dimm text-text-accent-secondary system-2xs-medium-uppercase'>
+            <div className='system-2xs-medium-uppercase flex h-5 shrink-0 items-center rounded-md border border-text-accent-secondary
+            bg-components-badge-bg-dimm px-[5px] text-text-accent-secondary'>
               {t('workflow.versionHistory.latest')}
             </div>
           )}
         </div>
         {
           !isDraft && (
-            <div className='text-text-secondary system-xs-regular break-words'>
+            <div className='system-xs-regular break-words text-text-secondary'>
               {item.marked_comment || ''}
             </div>
           )
         }
         {
           !isDraft && (
-            <div className='text-text-tertiary system-xs-regular truncate'>
+            <div className='system-xs-regular truncate text-text-tertiary'>
               {`${formatTime(item.created_at)} · ${item.created_by.name}`}
             </div>
           )

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',
+          'h-0 grow overflow-y-auto rounded-b-2xl bg-components-panel-bg',
           (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') && (
                 <Button
-                  className={cn('ml-4 mb-4 space-x-1')}
+                  className={cn('mb-4 ml-4 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>
                 </Button>
               )}