fix(web): update add node

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

@@ -13,11 +13,12 @@ const AddNode: ReactShapeConfig['component'] = ({ node, graph }) => {
   const handleNodeSelect = (selectedNodeType: any) => {
     const parentBBox = node.getBBox();
     const cycleId = data.cycle;
+    const horizontalSpacing = 20;
 
     const id = `${selectedNodeType.type.replace(/-/g, '_') }_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
     const newNode = graph.addNode({
       ...(graphNodeLibrary[selectedNodeType.type] || graphNodeLibrary.default),
-      x: parentBBox.x,
+      x: parentBBox.x + horizontalSpacing,
       y: parentBBox.y,
       id,
       data: {
@@ -35,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.addChild(newNode);
+        parentNode.insertChild(newNode);
       }
     }
 
@@ -47,7 +48,7 @@ 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: 3
+        zIndex: 1,
       });
     });
 
@@ -58,7 +59,7 @@ 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: 3
+        zIndex: 1,
       });
     });
 

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

@@ -11,9 +11,13 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
   const { t } = useTranslation()
 
   useEffect(() => {
-    initNodes()
-    // 检查是否需要添加add-node
-    checkAndAddAddNode()
+    // 使用setTimeout确保在所有节点都添加完成后再创建连线
+    const timer = setTimeout(() => {
+      initNodes()
+      checkAndAddAddNode()
+    }, 50)
+    
+    return () => clearTimeout(timer)
   }, [])
 
   const checkAndAddAddNode = () => {
@@ -29,7 +33,7 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
       
       const addNode = graph.addNode({
         ...graphNodeLibrary.addStart,
-        x: cycleStartBBox.x + 64,
+        x: cycleStartBBox.x + 84,
         y: cycleStartBBox.y,
         data: {
           type: 'add-node',
@@ -40,7 +44,7 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
         },
       });
       
-      node.addChild(addNode);
+      node.insertChild(addNode);
       
       // 连接cycle-start和add-node
       const sourcePorts = cycleStartNode.getPorts();
@@ -48,6 +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 },
@@ -61,7 +66,6 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
             },
           },
         },
-        zIndex: 10
       });
     }
   }
@@ -93,7 +97,7 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
     });
     const addNode = graph.addNode({
       ...graphNodeLibrary.addStart,
-      x: centerX + 64,
+      x: centerX + 84,
       y: centerY,
       data: {
         type: 'add-node',
@@ -103,8 +107,8 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
         cycle: data.id,
       },
     });
-    node.addChild(cycleStartNode)
-    node.addChild(addNode)
+    node.insertChild(cycleStartNode)
+    node.insertChild(addNode)
     const sourcePorts = cycleStartNode.getPorts()
     const targetPorts = addNode.getPorts()
     let sourcePort = sourcePorts.find((port: any) => port.group === 'right')?.id || 'right';
@@ -124,11 +128,10 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
           strokeWidth: 1,
           targetMarker: {
             name: 'block',
-            size: 8,
+            size: 2,
           },
         },
       },
-      zIndex: 10
     }
 
     graph.addEdge(edgeConfig)