增加工具栏提示。

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

@@ -29,13 +29,15 @@ const WorkflowDesign: React.FC = () => {
     const [configModalVisible, setConfigModalVisible] = useState(false);
     const [definitionData, setDefinitionData] = useState<any>(null);
     const [nodeDefinitions, setNodeDefinitions] = useState<NodeDefinition[]>([]);
+    const [isNodeDefinitionsLoaded, setIsNodeDefinitionsLoaded] = useState(false);
 
-    // 加载节点定义列表
+    // 首先加载节点定义列表
     useEffect(() => {
         const loadNodeDefinitions = async () => {
             try {
                 const data = await getNodeDefinitionList();
                 setNodeDefinitions(data);
+                setIsNodeDefinitionsLoaded(true);
             } catch (error) {
                 console.error('加载节点定义失败:', error);
                 message.error('加载节点定义失败');
@@ -44,8 +46,12 @@ const WorkflowDesign: React.FC = () => {
         loadNodeDefinitions();
     }, []);
 
+    // 等待节点定义加载完成后再初始化图形
     useEffect(() => {
-        if (graphContainerRef.current) {
+        if (!isNodeDefinitionsLoaded || !graphContainerRef.current) {
+            return;
+        }
+
         const graph = new Graph({
             container: graphContainerRef.current,
             grid: GRID_CONFIG,
@@ -110,8 +116,7 @@ const WorkflowDesign: React.FC = () => {
         return () => {
             graph.dispose();
         };
-        }
+    }, [graphContainerRef, id, nodeDefinitions, isNodeDefinitionsLoaded]);
-    }, [graphContainerRef, id, nodeDefinitions]);
 
     const loadDefinitionDetail = async (graphInstance: Graph, definitionId: number) => {
         try {
@@ -124,12 +129,13 @@ const WorkflowDesign: React.FC = () => {
             const nodeMap = new Map();
 
             // 创建节点
-            response.graph.nodes.forEach((nodeData: any) => {
+            response.graph.nodes.forEach((workflowDefinitionNode: any) => {
-                console.log('Creating node with data:', nodeData);  // 添加日志
+                console.log('Creating node with data:', workflowDefinitionNode);  // 添加日志
-                const node = addNodeToGraph(graphInstance, nodeData);
+
+                const node = addNodeToGraph(false, graphInstance, workflowDefinitionNode, nodeDefinitions);
                 // 保存节点配置
-                node.setProp('config', nodeData.config);
+                node.setProp('config', workflowDefinitionNode.config);
-                nodeMap.set(nodeData.id, node);
+                nodeMap.set(workflowDefinitionNode.id, node);
             });
 
             // 创建边
@@ -171,8 +177,7 @@ const WorkflowDesign: React.FC = () => {
             const node = JSON.parse(nodeData);
             const { clientX, clientY } = e;
             const point = graph.clientToLocal({ x: clientX, y: clientY });
-            
+            addNodeToGraph(true, graph, node, nodeDefinitions, point);
-            addNodeToGraph(graph, node, point);
         } catch (error) {
             console.error('创建节点失败:', error);
             message.error('创建节点失败');

frontend/src/pages/Workflow/Definition/Design/utils/nodeUtils.ts

@@ -1,65 +1,15 @@
 import {Graph} from '@antv/x6';
 import {convertPortConfig} from '../constants';
 
-interface NodeStyle {
-    shape: string;
-    style: any;
-    size: {
-        width: number;
-        height: number;
-    };
-    ports: any;
-}
-
-/**
- * 统一获取节点样式配置
- * @param node 节点数据
- * @returns 统一的节点样式配置
- */
-const getNodeStyle = (node: any): NodeStyle => {
-    // 如果是从已保存的定义加载的节点
-    if (node.graph) {
-        return {
-            shape: node.graph.shape,
-            style: node.graph.style,
-            size: node.graph.size,
-            ports: node.graph.ports
-        };
-    }
-    // 如果是从面板拖拽创建的新节点
-    return {
-        shape: node.graphConfig.uiSchema.shape,
-        style: node.graphConfig.uiSchema.style,
-        size: node.graphConfig.uiSchema.size,
-        ports: node.graphConfig.uiSchema.ports
-    };
-};
 
 /**
  * 创建节点配置
  */
-const createNodeConfig = (node: any) => {
+const createNodeConfig = (uiGraph: any) => {
-    const style = getNodeStyle(node);
-    
     return {
         inherit: 'rect',  // 默认使用矩形
-        width: style.size.width,
+
-        height: style.size.height,
+
-        attrs: {
-            body: {
-                ...style.style,
-                // 如果是菱形，添加多边形的点
-                ...(style.shape === 'diamond' ? {
-                    refPoints: '0,10 10,0 20,10 10,20',
-                } : {})
-            },
-            label: {
-                text: node.name,
-                fill: '#000000',
-                fontSize: 12,
-            }
-        },
-        ports: convertPortConfig(style.ports)
     };
 };
 
@@ -71,33 +21,50 @@ const createNodeConfig = (node: any) => {
  * @returns 创建的节点实例
  */
 export const addNodeToGraph = (
+    isNew: Boolean,
     graph: Graph,
-    node: any, 
+    workflowDefinitionNode: any,
+    workflowNodeDefinitionList: any,
     position?: { x: number, y: number }
 ) => {
-    const style = getNodeStyle(node);
+    let nodeDefinition = workflowNodeDefinitionList.find(def => def.type === workflowDefinitionNode.type);
-    const nodeConfig = createNodeConfig(node);
+    console.log(nodeDefinition.graphConfig.uiSchema, workflowDefinitionNode.graph)
-    
+    let uiGraph = isNew ? nodeDefinition.graphConfig.uiSchema : workflowDefinitionNode.graph;
     // 根据形状类型设置正确的 shape
     let shape = 'rect';  // 默认使用矩形
-    if (style.shape === 'circle') {
+    if (uiGraph.shape === 'circle') {
         shape = 'circle';
-    } else if (style.shape === 'diamond') {
+    } else if (uiGraph.shape === 'diamond') {
         shape = 'polygon';
     }
-    
+    const nodeConfig = createNodeConfig(uiGraph);
     // 创建节点
-    const newNode = graph.addNode({
+    return graph.addNode({
         ...nodeConfig,
+        width: uiGraph.size.width,
+        height: uiGraph.size.height,
+        label: {
+            text: isNew ? workflowDefinitionNode.name : nodeDefinition.name,
+            fill: '#000000',
+            fontSize: 12,
+        },
+        attrs: {
+            body: {
+                ...uiGraph.style,
+                // 如果是菱形，添加多边形的点
+                ...(uiGraph.shape === 'diamond' ? {
+                    refPoints: '0,10 10,0 20,10 10,20',
+                } : {})
+            }
+        },
         shape,  // 使用映射后的形状
         ...(position && {x: position.x, y: position.y}),
         // 如果是已保存的节点，使用其ID和位置
-        ...(node.id && { id: node.id }),
+        ...(uiGraph.id && {id: uiGraph.id}),
-        ...(node.graph?.position && { position: node.graph.position }),
+        ...(uiGraph.graph?.position && {position: uiGraph.graph.position}),
-        type: node.type,
+        type: uiGraph.type,
-        code: node.code,
+        code: uiGraph.code,
-        nodeDefinition: node,
+        ports: convertPortConfig(uiGraph.ports),
+        nodeDefinition: nodeDefinition,
     });
-
-    return newNode;
 };