1

frontend/package-lock.json

@@ -176,6 +176,7 @@
       "version": "1.2.14-beta.8",
       "resolved": "https://registry.npmmirror.com/@antv/layout/-/layout-1.2.14-beta.8.tgz",
       "integrity": "sha512-/zP8pRz28ahYSVk4fsfhl3T1X3FvCAi7Q3YQ8H2LZEvTojYYrJtO2AXFsojehU6HGVnIAq+QIjd3He6ot8+gvA==",
+      "license": "MIT",
       "dependencies": {
         "@antv/event-emitter": "^0.1.3",
         "@antv/graphlib": "^2.0.0",
@@ -1854,7 +1855,8 @@
       "version": "0.7.52",
       "resolved": "https://registry.npmmirror.com/@types/dagre/-/dagre-0.7.52.tgz",
       "integrity": "sha512-XKJdy+OClLk3hketHi9Qg6gTfe1F3y+UFnHxKA2rn9Dw+oXa4Gb378Ztz9HlMgZKSxpPmn4BNVh9wgkpvrK1uw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/eslint": {
       "version": "9.6.1",
@@ -2919,6 +2921,7 @@
       "version": "0.8.5",
       "resolved": "https://registry.npmmirror.com/dagre/-/dagre-0.8.5.tgz",
       "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
+      "license": "MIT",
       "dependencies": {
         "graphlib": "^2.1.8",
         "lodash": "^4.17.15"

frontend/src/pages/Workflow/Definition/Design/constants.ts

@@ -1,6 +1,36 @@
 // 节点端口配置
 export const PORT_GROUPS = ['top', 'right', 'bottom', 'left'] as const;
 
+// 转换后端端口配置为X6格式
+export const convertPortConfig = (ports: any = {}) => {
+    const { groups = {}, types = [] } = ports;
+    
+    // 转换groups配置
+    const processedGroups: any = {};
+    Object.entries(groups).forEach(([key, group]: [string, any]) => {
+        processedGroups[key] = {
+            ...group,
+            attrs: {
+                circle: {
+                    ...group.attrs?.circle,
+                    magnet: true,
+                }
+            },
+            position: group.position
+        };
+    });
+
+    // 转换items配置
+    const items = types.map(type => ({
+        group: type
+    }));
+
+    return {
+        groups: processedGroups,
+        items
+    };
+};
+
 // 默认样式配置
 export const DEFAULT_STYLES = {
     node: {
@@ -51,17 +81,26 @@ export const GRID_CONFIG = {
 
 // 连接配置
 export const CONNECTING_CONFIG = {
-    router: 'manhattan',
-    connector: {
-        name: 'rounded',
-        args: {
-            radius: 8,
-        },
-    },
-    anchor: 'center',
-    connectionPoint: 'anchor',
-    allowBlank: false,
     snap: true,
+    allowBlank: false,
+    allowLoop: false,
+    highlight: true,
+    connector: 'rounded',
+    connectionPoint: 'boundary',
+    router: {
+        name: 'manhattan'
+    },
+    validateConnection({
+        sourceView,
+        targetView,
+        sourceMagnet,
+        targetMagnet
+    }: any) {
+        if (!sourceMagnet || !targetMagnet) {
+            return false;
+        }
+        return true;
+    }
 } as const;
 
 // 高亮配置

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

@@ -13,7 +13,8 @@ import {
     GRID_CONFIG,
     CONNECTING_CONFIG,
     HIGHLIGHTING_CONFIG,
-    DEFAULT_STYLES
+    DEFAULT_STYLES,
+    convertPortConfig
 } from './constants';
 
 const WorkflowDesign: React.FC = () => {
@@ -108,7 +109,7 @@ const WorkflowDesign: React.FC = () => {
                             fontSize: 12,
                         }
                     },
-                    ports: nodeData.graph.ports
+                    ports: convertPortConfig(nodeData.graph.ports)
                 };
 
                 // 注册节点类型