From 9a96075c30aaa27942e0fbf07ed5e37d438bc5a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=88=9A=E8=BE=B0=E5=85=88=E7=94=9F?= <qichen111@126.com>
Date: Thu, 5 Dec 2024 14:09:27 +0800
Subject: [PATCH] 1111

---
 .../Edit/components/FlowDesigner/index.tsx    | 123 +++++++++++-------
 1 file changed, 76 insertions(+), 47 deletions(-)

diff --git a/frontend/src/pages/Workflow/Definition/Edit/components/FlowDesigner/index.tsx b/frontend/src/pages/Workflow/Definition/Edit/components/FlowDesigner/index.tsx
index 835d0c94..5dcd82a2 100644
--- a/frontend/src/pages/Workflow/Definition/Edit/components/FlowDesigner/index.tsx
+++ b/frontend/src/pages/Workflow/Definition/Edit/components/FlowDesigner/index.tsx
@@ -219,6 +219,50 @@ const FlowDesigner: React.FC<FlowDesignerProps> = ({
             },
         });
 
+        // 监听事件
+        if (!readOnly) {
+            let updateTimer: number | null = null;
+
+            const updateGraph = () => {
+                if (updateTimer) {
+                    window.clearTimeout(updateTimer);
+                }
+
+                updateTimer = window.setTimeout(() => {
+                    const nodes = graph.getNodes().map(node => ({
+                        id: node.id,
+                        type: node.data?.type || node.shape,
+                        x: node.position().x,
+                        y: node.position().y,
+                        name: node.attr('label/text'),
+                    }));
+
+                    const edges = graph.getEdges().map(edge => ({
+                        source: edge.getSourceCellId(),
+                        target: edge.getTargetCellId(),
+                    }));
+
+                    const data = {
+                        nodes,
+                        edges,
+                        transitionConfig: JSON.stringify({
+                            transitions: edges.map(edge => ({
+                                from: edge.source,
+                                to: edge.target
+                            }))
+                        })
+                    };
+
+                    onChange?.(JSON.stringify(data));
+                }, 300);
+            };
+
+            // 监听节点变化
+            graph.on('node:moved', updateGraph);
+            graph.on('edge:connected', updateGraph);
+            graph.on('cell:removed', updateGraph);
+        }
+
         // 加载流程数据
         if (value) {
             try {
@@ -234,22 +278,43 @@ const FlowDesigner: React.FC<FlowDesignerProps> = ({
                         // 将 TASK 类型映射到 SHELL
                         const nodeShape = NODE_TYPE_MAP[node.type] || node.type;
                         const cell = graph.createNode({
-                            id: node.id,  // 使用 id 而不是 nodeId
+                            id: node.id,  // 保持原始 ID
                             shape: nodeShape,
                             x: node.x || 100,
                             y: node.y || 100,
                             label: node.name || node.type,
-                            data: node,
+                            data: {
+                                ...node,
+                                type: node.type  // 保存原始类型
+                            },
                         });
                         cells.push(cell);
-                        nodesMap.set(node.id, cell);  // 使用 id 作为 key
+                        nodesMap.set(node.id, cell);
                     });
                 }
 
-                // 添加边
+                // 处理边数据
+                let edges: any[] = [];
                 if (graphData.edges) {
-                    console.log('处理边数据:', graphData.edges);
-                    graphData.edges.forEach((edge: any) => {
+                    edges = graphData.edges;
+                } else if (graphData.transitionConfig) {
+                    try {
+                        const transitionConfig = typeof graphData.transitionConfig === 'string'
+                            ? JSON.parse(graphData.transitionConfig)
+                            : graphData.transitionConfig;
+                        edges = transitionConfig.transitions.map((t: any) => ({
+                            source: t.from,
+                            target: t.to
+                        }));
+                    } catch (error) {
+                        console.error('解析 transitionConfig 失败:', error);
+                    }
+                }
+
+                // 添加边
+                if (edges.length > 0) {
+                    console.log('处理边数据:', edges);
+                    edges.forEach((edge: any) => {
                         const sourceNode = nodesMap.get(edge.source);
                         const targetNode = nodesMap.get(edge.target);
                         console.log('连线:', edge.source, '->', edge.target, '节点:', sourceNode?.id, targetNode?.id);
@@ -298,7 +363,11 @@ const FlowDesigner: React.FC<FlowDesignerProps> = ({
                 })));
                 
                 graph.resetCells(cells);
-                console.log('重置后的节点:', graph.getNodes().map(node => node.id));
+                console.log('重置后的节点:', graph.getNodes().map(node => ({
+                    id: node.id,
+                    type: node.data?.type,
+                    shape: node.shape
+                })));
                 console.log('重置后的边:', graph.getEdges().map(edge => ({
                     source: edge.getSourceCellId(),
                     target: edge.getTargetCellId()
@@ -309,46 +378,6 @@ const FlowDesigner: React.FC<FlowDesignerProps> = ({
             }
         }
 
-        // 监听事件
-        if (!readOnly) {
-            let updateTimer: number | null = null;
-
-            const updateGraph = () => {
-                if (updateTimer) {
-                    window.clearTimeout(updateTimer);
-                }
-
-                updateTimer = window.setTimeout(() => {
-                    const nodes = graph.getNodes().map(node => ({
-                        nodeId: node.id,
-                        name: node.attr('label/text'),
-                        type: node.data?.type || node.shape,
-                        x: node.position().x,
-                        y: node.position().y,
-                        config: JSON.stringify(node.data?.config || {}),
-                    }));
-
-                    const edges = graph.getEdges().map(edge => ({
-                        from: edge.getSourceCellId(),
-                        to: edge.getTargetCellId(),
-                    }));
-
-                    const data = {
-                        nodes,
-                        transitionConfig: JSON.stringify({
-                            transitions: edges
-                        })
-                    };
-
-                    onChange?.(JSON.stringify(data));
-                }, 300);
-            };
-
-            graph.on('node:moved', updateGraph);
-            graph.on('edge:connected', updateGraph);
-            graph.on('cell:removed', updateGraph);
-        }
-
         graphRef.current = graph;
 
         return () => {