模版解析正确

frontend/src/pages/Workflow/Definition/Designer/index.tsx

@@ -221,12 +221,7 @@ const FlowDesigner: React.FC = () => {
 
         // 加载流程图数据
         if (detail) {
-            try {
+            loadGraphData(graph, detail);
-                const graphData = JSON.parse(detail.graphDefinition);
-                graph.fromJSON(graphData);
-            } catch (error) {
-                message.error('加载流程图数据失败');
-            }
         }
 
         // 监听画布拖拽事件
@@ -422,15 +417,34 @@ const FlowDesigner: React.FC = () => {
         if (!id || !detail || !graphRef.current || detail.status !== WorkflowStatus.DRAFT) return;
 
         try {
+            // 获取图形数据
             const graphData = graphRef.current.toJSON();
+            
+            // 收集节点配置数据
+            const nodes = graphRef.current.getNodes().map(node => {
+                const data = node.getData() as NodeData;
+                return {
+                    id: node.id,
+                    type: data.type,
+                    name: data.name || '',
+                    description: data.description,
+                    config: data.config || {}
+                };
+            });
+
+            // 构建更新数据
             const data = {
                 ...detail,
-                graphDefinition: JSON.stringify(graphData)
+                graphDefinition: JSON.stringify(graphData),
+                nodeConfig: JSON.stringify({ nodes })
             };
+
+            // 调用更新接口
             await updateDefinition(parseInt(id), data);
             message.success('保存成功');
         } catch (error) {
-            // 错误已在请求拦截器中处理
+            message.error('保存失败');
+            console.error('保存失败:', error);
         }
     };
 
@@ -466,6 +480,41 @@ const FlowDesigner: React.FC = () => {
         draggedNodeRef.current = nodeType;
     };
 
+    // 加载流程图数据
+    const loadGraphData = (graph: Graph, detail: WorkflowDefinition) => {
+        try {
+            // 加载图形数据
+            const graphData = JSON.parse(detail.graphDefinition);
+            graph.fromJSON(graphData);
+
+            // 加载节点配置数据
+            if (detail.nodeConfig) {
+                const nodeConfigData = JSON.parse(detail.nodeConfig);
+                const nodeConfigs = nodeConfigData.nodes.reduce((acc: Record<string, any>, node: any) => {
+                    acc[node.id] = node;
+                    return acc;
+                }, {});
+
+                // 更新节点数据和显示
+                graph.getNodes().forEach(node => {
+                    const nodeConfig = nodeConfigs[node.id];
+                    if (nodeConfig) {
+                        node.setData({
+                            type: nodeConfig.type,
+                            name: nodeConfig.name,
+                            description: nodeConfig.description,
+                            config: nodeConfig.config || {}
+                        });
+                        node.setAttrByPath('label/text', nodeConfig.name);
+                    }
+                });
+            }
+        } catch (error) {
+            message.error('加载流程图数据失败');
+            console.error('加载流程图数据失败:', error);
+        }
+    };
+
     if (loading) {
         return (
             <div style={{textAlign: 'center', padding: 100}}>