feat(variable-list): add drag-and-drop functionality for variables

Implement drag-and-drop reordering of variables in the workflow editor using react-sortablejs. Added draggable handle icon that appears on hover when there are multiple variables. Each variable now has a unique ID to maintain state during reordering.

web/app/components/workflow/nodes/_base/components/variable/var-list.tsx

@@ -10,6 +10,10 @@ import type { ValueSelector, Var, Variable } from '@/app/components/workflow/typ
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
 import { checkKeys, replaceSpaceWithUnderscreInVarNameInput } from '@/utils/var'
 import Toast from '@/app/components/base/toast'
+import { ReactSortable } from 'react-sortablejs'
+import { v4 as uuid4 } from 'uuid'
+import { RiDraggable } from '@remixicon/react'
+import cn from '@/utils/classnames'
 
 type Props = {
   nodeId: string
@@ -36,6 +40,14 @@ const VarList: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
 
+  const payloadWithIds = list.map((item) => {
+    const id = uuid4()
+    return {
+      id,
+      p: { ...item },
+    }
+  })
+
   const handleVarNameChange = useCallback((index: number) => {
     return (e: React.ChangeEvent<HTMLInputElement>) => {
       replaceSpaceWithUnderscreInVarNameInput(e.target)
@@ -105,36 +117,56 @@ const VarList: FC<Props> = ({
     }
   }, [list, onChange])
 
+  const varCount = list.length
+
   return (
-    <div className='space-y-2'>
+    <ReactSortable
-      {list.map((item, index) => (
+      className='space-y-2'
-        <div className='flex items-center space-x-1' key={index}>
+      list={payloadWithIds}
-          <Input
+      setList={(list) => { onChange(list.map(item => item.p)) }}
-            wrapperClassName='w-[120px]'
+      handle='.handle'
-            disabled={readonly}
+      ghostClass='opacity-50'
-            value={list[index].variable}
+      animation={150}
-            onChange={handleVarNameChange(index)}
+    >
-            placeholder={t('workflow.common.variableNamePlaceholder')!}
+      {list.map((item, index) => {
-          />
+        const canDrag = (() => {
-          <VarReferencePicker
+          if (readonly)
-            nodeId={nodeId}
+            return false
-            readonly={readonly}
+          return varCount > 1
-            isShowNodeName
+        })()
-            className='grow'
+        return (
-            value={item.variable_type === VarKindType.constant ? (item.value || '') : (item.value_selector || [])}
+          <div className={cn('flex items-center space-x-1', 'group relative')} key={index}>
-            isSupportConstantValue={isSupportConstantValue}
+            <Input
-            onChange={handleVarReferenceChange(index)}
+              wrapperClassName='w-[120px]'
-            defaultVarKindType={item.variable_type}
+              disabled={readonly}
-            onlyLeafNodeVar={onlyLeafNodeVar}
+              value={list[index].variable}
-            filterVar={filterVar}
+              onChange={handleVarNameChange(index)}
-            isSupportFileVar={isSupportFileVar}
+              placeholder={t('workflow.common.variableNamePlaceholder')!}
-          />
+            />
-          {!readonly && (
+            <VarReferencePicker
-            <RemoveButton onClick={handleVarRemove(index)}/>
+              nodeId={nodeId}
-          )}
+              readonly={readonly}
-        </div>
+              isShowNodeName
-      ))}
+              className='grow'
-    </div>
+              value={item.variable_type === VarKindType.constant ? (item.value || '') : (item.value_selector || [])}
+              isSupportConstantValue={isSupportConstantValue}
+              onChange={handleVarReferenceChange(index)}
+              defaultVarKindType={item.variable_type}
+              onlyLeafNodeVar={onlyLeafNodeVar}
+              filterVar={filterVar}
+              isSupportFileVar={isSupportFileVar}
+            />
+            {!readonly && (
+              <RemoveButton onClick={handleVarRemove(index)}/>
+            )}
+            {canDrag && <RiDraggable className={cn(
+              'handle absolute -left-4 top-3 hidden h-3 w-3 cursor-pointer text-text-quaternary',
+              'group-hover:block',
+            )} />}
+          </div>
+        )
+      })}
+    </ReactSortable>
   )
 }
 export default React.memo(VarList)