fix(web): Calculation logic adjustment of variableList

web/src/i18n/en.ts

@@ -1960,6 +1960,9 @@ Memory Bear: After the rebellion, regional warlordism intensified for several re
       addMessage: 'Add Message',
       answerDesc: 'Reply',
       addNode: 'Add Node',
+      arrange: 'Arrange',
+      redo: 'Redo',
+      undo: 'Undo',
     },
     emotionEngine: {
       emotionEngineConfig: 'Emotion Engine Configuration',

web/src/i18n/zh.ts

@@ -2057,6 +2057,9 @@ export const zh = {
       addMessage: '添加消息',
       answerDesc: '回复',
       addNode: '添加节点',
+      arrange: '整理',
+      redo: '重做',
+      undo: '撤销',
     },
     emotionEngine: {
       emotionEngineConfig: '情感引擎配置',

web/src/views/Workflow/components/Nodes/AddNode.tsx

@@ -36,7 +36,7 @@ const AddNode: ReactShapeConfig['component'] = ({ node, graph }) => {
     if (cycleId) {
       const parentNode = graph.getNodes().find((n: any) => n.getData()?.id === cycleId);
       if (parentNode) {
-        parentNode.insertChild(newNode);
+        parentNode.addChild(newNode);
       }
     }
 
@@ -48,7 +48,6 @@ const AddNode: ReactShapeConfig['component'] = ({ node, graph }) => {
         source: { cell: edge.getSourceCellId(), port: edge.getSourcePortId() },
         target: { cell: newNode.id, port: newNode.getPorts().find((port: any) => port.group === 'left')?.id || 'left' },
         attrs: edge.getAttrs(),
-        zIndex: 1,
       });
     });
 
@@ -59,7 +58,6 @@ const AddNode: ReactShapeConfig['component'] = ({ node, graph }) => {
         source: { cell: newNode.id, port: newNode.getPorts().find((port: any) => port.group === 'right')?.id || 'right' },
         target: { cell: edge.getTargetCellId(), port: targetPortId },
         attrs: edge.getAttrs(),
-        zIndex: 1,
       });
     });
 

web/src/views/Workflow/components/Nodes/LoopNode.tsx

@@ -18,7 +18,7 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
     }, 50)
     
     return () => clearTimeout(timer)
-  }, [])
+  }, [graph])
 
   const checkAndAddAddNode = () => {
     if (!graph) return;
@@ -44,7 +44,7 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
         },
       });
       
-      node.insertChild(addNode);
+      node.addChild(addNode);
       
       // 连接cycle-start和add-node
       const sourcePorts = cycleStartNode.getPorts();
@@ -52,7 +52,7 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
       const sourcePort = sourcePorts.find((port: any) => port.group === 'right')?.id || 'right';
       const targetPort = targetPorts.find((port: any) => port.group === 'left')?.id || 'left';
 
-      // 直接创建连线，不使用异步
+      // 然后创建连线
       graph.addEdge({
         source: { cell: cycleStartNode.id, port: sourcePort },
         target: { cell: addNode.id, port: targetPort },
@@ -107,8 +107,8 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
         cycle: data.id,
       },
     });
-    node.insertChild(cycleStartNode)
+    node.addChild(cycleStartNode)
-    node.insertChild(addNode)
+    node.addChild(addNode)
     const sourcePorts = cycleStartNode.getPorts()
     const targetPorts = addNode.getPorts()
     let sourcePort = sourcePorts.find((port: any) => port.group === 'right')?.id || 'right';
@@ -133,7 +133,6 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
         },
       },
     }
-
     graph.addEdge(edgeConfig)
   }
 

web/src/views/Workflow/components/PortClickHandler.tsx

@@ -129,7 +129,7 @@ const PortClickHandler: React.FC<PortClickHandlerProps> = ({ graph }) => {
     if (sourceNodeData.cycle) {
       const parentNode = graph.getNodes().find((n: any) => n.getData()?.id === sourceNodeData.cycle);
       if (parentNode) {
-        parentNode.insertChild(newNode);
+        parentNode.addChild(newNode);
       }
     }
 
@@ -159,7 +159,7 @@ const PortClickHandler: React.FC<PortClickHandlerProps> = ({ graph }) => {
             },
           },
         },
-        zIndex: sourceNodeData.cycle && sourceNodeType == 'cycle-start' ? 1 : sourceNodeData.cycle ? 2 : 0
+        // zIndex: sourceNodeData.cycle && sourceNodeType == 'cycle-start' ? 1 : sourceNodeData.cycle ? 2 : 0
       });
       
       // 循环节点内子节点通过连接桩添加时，调整循环节点大小

web/src/views/Workflow/components/Properties/index.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { Graph, Node } from '@antv/x6';
 import { Form, Input, Button, Select, InputNumber, Slider, Space, Divider, App, Switch } from 'antd'
 
-import type { NodeConfig, NodeProperties, StartVariableItem, VariableEditModalRef } from '../../types'
+import type { NodeConfig, NodeProperties, StartVariableItem, VariableEditModalRef, ChatVariable } from '../../types'
 import Empty from '@/components/Empty';
 import emptyIcon from '@/assets/images/workflow/empty.png'
 import CustomSelect from "@/components/CustomSelect";
@@ -34,11 +34,12 @@ interface PropertiesProps {
   copyEvent: () => void;
   parseEvent: () => void;
   config?: any;
+  chatVariables: ChatVariable[];
 }
 const Properties: FC<PropertiesProps> = ({
   selectedNode,
   graphRef,
-  config: workflowConfig,
+  chatVariables
 }) => {
   const { t } = useTranslation()
   const { modal } = App.useApp()
@@ -47,6 +48,7 @@ const Properties: FC<PropertiesProps> = ({
   const values = Form.useWatch([], form);
   const variableModalRef = useRef<VariableEditModalRef>(null)
   const [editIndex, setEditIndex] = useState<number | null>(null)
+  const [graphUpdateTrigger, setGraphUpdateTrigger] = useState(0)
   const prevMappingNamesRef = useRef<string[]>([])
   const prevTemplateVarsRef = useRef<string[]>([])
   const syncTimeoutRef = useRef<number | null>(null)
@@ -350,10 +352,8 @@ const Properties: FC<PropertiesProps> = ({
       allRelevantNodeIds.push(...parentPreviousNodeIds);
     }
 
-
-
     // Add conversation variables from global config
-    const conversationVariables = workflowConfig?.variables || [];
+    const conversationVariables = chatVariables || [];
 
     conversationVariables.forEach((variable: any) => {
       const key = `CONVERSATION_${variable.name}`;
@@ -763,7 +763,36 @@ const Properties: FC<PropertiesProps> = ({
     }
 
     return variableList;
-  }, [selectedNode, graphRef, workflowConfig?.variables]);
+  }, [selectedNode, graphRef, graphUpdateTrigger, chatVariables]);
+
+  // Trigger variableList update when graph edges or nodes change
+  useEffect(() => {
+    if (!graphRef?.current) return;
+    
+    const graph = graphRef.current;
+    const handleGraphChange = () => {
+      console.log('handleGraphChange')
+      // Force variableList recalculation by updating trigger
+      setGraphUpdateTrigger(prev => prev + 1);
+    };
+    
+    // Listen to graph changes
+    graph.on('edge:added', handleGraphChange);
+    graph.on('edge:removed', handleGraphChange);
+    graph.on('edge:changed', handleGraphChange);
+    graph.on('node:added', handleGraphChange);
+    graph.on('node:removed', handleGraphChange);
+    graph.on('node:change:data', handleGraphChange);
+    
+    return () => {
+      graph.off('edge:added', handleGraphChange);
+      graph.off('edge:removed', handleGraphChange);
+      graph.off('edge:changed', handleGraphChange);
+      graph.off('node:added', handleGraphChange);
+      graph.off('node:removed', handleGraphChange);
+      graph.off('node:change:data', handleGraphChange);
+    };
+  }, [graphRef]);
 
   // Filter out boolean type variables for loop and llm nodes
   const getFilteredVariableList = (nodeType?: string, key?: string) => {

web/src/views/Workflow/hooks/useWorkflowGraph.ts

@@ -54,7 +54,7 @@ export const useWorkflowGraph = ({
   const historyRef = useRef<{ undoStack: string[], redoStack: string[] }>({ undoStack: [], redoStack: [] });
   const [canUndo, setCanUndo] = useState(false);
   const [canRedo, setCanRedo] = useState(false);
-  const [isHandMode, setIsHandMode] = useState(false);
+  const [isHandMode, setIsHandMode] = useState(true);
   const [config, setConfig] = useState<WorkflowConfig | null>(null);
   const [chatVariables, setChatVariables] = useState<ChatVariable[]>([])
 
@@ -235,7 +235,7 @@ export const useWorkflowGraph = ({
           if (parentNode) {
             const addedChild = graphRef.current?.addNode(childNode)
             if (addedChild) {
-              parentNode.insertChild(addedChild)
+              parentNode.addChild(addedChild)
             }
           }
         }
@@ -354,7 +354,7 @@ export const useWorkflowGraph = ({
                 },
               },
             },
-            zIndex: loopIterationCount
+            // zIndex: loopIterationCount
           }
 
           return edgeConfig
@@ -694,10 +694,9 @@ export const useWorkflowGraph = ({
           thickness: 1, // 网点大小
         }
       },
-      panning: false,
+      panning: isHandMode,
       mousewheel: {
         enabled: true,
-        modifiers: ['ctrl', 'meta'],
       },
       connecting: {
         // router: 'orth',

web/src/views/Workflow/index.tsx

@@ -107,6 +107,7 @@ const Workflow = forwardRef<WorkflowRef>((_props, ref) => {
         copyEvent={copyEvent}
         parseEvent={parseEvent}
         config={config}
+        chatVariables={chatVariables}
       />
       <Chat
         ref={chatRef}