1

frontend/package-lock.json

@@ -34,6 +34,7 @@
         "@radix-ui/react-tooltip": "^1.2.8",
         "@reduxjs/toolkit": "^2.0.1",
         "@types/recharts": "^1.8.29",
+        "@types/uuid": "^10.0.0",
         "@xyflow/react": "^12.8.6",
         "ajv": "^8.17.1",
         "ajv-formats": "^3.0.1",
@@ -52,6 +53,7 @@
         "react-redux": "^9.0.4",
         "react-router-dom": "^6.21.0",
         "recharts": "^2.15.0",
+        "uuid": "^13.0.0",
         "zod": "^3.24.1"
       },
       "devDependencies": {
@@ -5113,6 +5115,12 @@
       "resolved": "https://registry.npmmirror.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
       "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
     },
+    "node_modules/@types/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmmirror.com/@types/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "6.21.0",
       "resolved": "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz",
@@ -10206,6 +10214,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/uuid": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmmirror.com/uuid/-/uuid-13.0.0.tgz",
+      "integrity": "sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist-node/bin/uuid"
+      }
+    },
     "node_modules/victory-vendor": {
       "version": "36.9.2",
       "resolved": "https://registry.npmmirror.com/victory-vendor/-/victory-vendor-36.9.2.tgz",

frontend/package.json

@@ -36,6 +36,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@reduxjs/toolkit": "^2.0.1",
     "@types/recharts": "^1.8.29",
+    "@types/uuid": "^10.0.0",
     "@xyflow/react": "^12.8.6",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
@@ -54,6 +55,7 @@
     "react-redux": "^9.0.4",
     "react-router-dom": "^6.21.0",
     "recharts": "^2.15.0",
+    "uuid": "^13.0.0",
     "zod": "^3.24.1"
   },
   "devDependencies": {

frontend/src/pages/Workflow/Design/components/FlowCanvas.tsx

@@ -13,6 +13,7 @@ import {
     Panel
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
+import { v4 as uuidv4 } from 'uuid';
 
 import type { FlowNode, FlowEdge } from '../types';
 import { nodeTypes } from '../nodes';
@@ -49,8 +50,10 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({
     // 处理连接
     const onConnect = useCallback(
         (params: Connection | Edge) => {
-            const newEdge = {
+            const newEdge: FlowEdge = {
-                ...params,
+                id: uuidv4(), // 使用 UUID 生成唯一 ID
+                source: params.source!,
+                target: params.target!,
                 type: 'smoothstep',
                 animated: true,
                 style: {

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

@@ -2,6 +2,7 @@ import React, { useState, useCallback, useRef, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { message } from 'antd';
 import { ReactFlowProvider, useReactFlow } from '@xyflow/react';
+import { v4 as uuidv4 } from 'uuid';
 
 import WorkflowToolbar from './components/WorkflowToolbar';
 import NodePanel from './components/NodePanel';
@@ -10,7 +11,6 @@ import NodeConfigModal from './components/NodeConfigModal';
 import EdgeConfigModal, { type EdgeCondition } from './components/EdgeConfigModal';
 import type { FlowNode, FlowEdge, FlowNodeData } from './types';
 import type { WorkflowNodeDefinition } from './nodes/types';
-import { NodeType } from './types';
 import { useWorkflowSave } from './hooks/useWorkflowSave';
 import { useWorkflowLoad } from './hooks/useWorkflowLoad';
 import { useHistory } from './hooks/useHistory';
@@ -97,76 +97,9 @@ const WorkflowDesignInner: React.FC = () => {
         return () => clearTimeout(timer);
     }, [fitView, getZoom]);
 
-    // 初始化示例节点 - 优化位置和布局
+    // 初始化空白画布
-    const initialNodes: FlowNode[] = [
+    const initialNodes: FlowNode[] = [];
-        {
+    const initialEdges: FlowEdge[] = [];
-            id: '1',
-            type: 'START_EVENT',
-            position: { x: 250, y: 50 },
-            data: {
-                label: '开始',
-                nodeType: NodeType.START_EVENT,
-                category: 'EVENT' as any,
-                icon: '▶️',
-                color: '#10b981'
-            }
-        },
-        {
-            id: '2',
-            type: 'USER_TASK', 
-            position: { x: 200, y: 150 },
-            data: {
-                label: '用户审批',
-                nodeType: NodeType.USER_TASK,
-                category: 'TASK' as any,
-                icon: '👤',
-                color: '#6366f1'
-            }
-        },
-        {
-            id: '3',
-            type: 'END_EVENT',
-            position: { x: 250, y: 250 },
-            data: {
-                label: '结束',
-                nodeType: NodeType.END_EVENT,
-                category: 'EVENT' as any,
-                icon: '⏹️',
-                color: '#ef4444'
-            }
-        }
-    ];
-
-    const initialEdges: FlowEdge[] = [
-        {
-            id: 'e1-2',
-            source: '1',
-            target: '2',
-            type: 'default',
-            animated: true,
-            data: {
-                label: '提交',
-                condition: {
-                    type: 'DEFAULT',
-                    priority: 0
-                }
-            }
-        },
-        {
-            id: 'e2-3',
-            source: '2',
-            target: '3',
-            type: 'default',
-            animated: true,
-            data: {
-                label: '通过',
-                condition: {
-                    type: 'DEFAULT',
-                    priority: 0
-                }
-            }
-        }
-    ];
 
     // 工具栏事件处理
     const handleSave = useCallback(async () => {
@@ -351,7 +284,7 @@ const WorkflowDesignInner: React.FC = () => {
             });
 
             const newNode: FlowNode = {
-                id: `${nodeType}-${Date.now()}`,
+                id: uuidv4(), // 使用 UUID 生成唯一 ID
                 type: nodeType,
                 position,
                 data: {
@@ -362,10 +295,10 @@ const WorkflowDesignInner: React.FC = () => {
                     color: nodeDefinition.renderConfig.theme.primary,
                     // 保存原始节点定义引用，用于配置
                     nodeDefinition,
-                    // 初始化配置数据
+                    // 初始化配置数据（nodeCode 使用预定义的常量值）
                     configs: {
                         nodeName: nodeDefinition.nodeName,
-                        nodeCode: nodeDefinition.nodeCode,
+                        nodeCode: nodeDefinition.nodeCode, // 使用预定义的 CODE（如 "END_EVENT"）
                         description: nodeDefinition.description
                     },
                     inputMapping: {},