1

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

@@ -3,7 +3,7 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { Button, Space, Card, Row, Col, message } from 'antd';
 import { ArrowLeftOutlined, SaveOutlined, PlayCircleOutlined } from '@ant-design/icons';
 import { Graph, Cell } from '@antv/x6';
-import { DagreLayout } from '@antv/layout';
+import dagre from 'dagre';
 import { getDefinitionDetail, saveDefinition } from '../service';
 import NodePanel from './components/NodePanel';
 import NodeConfigDrawer from './components/NodeConfigModal';
@@ -158,17 +158,44 @@ const WorkflowDesign: React.FC = () => {
             });
 
             // 自动布局
-            const layout = new DagreLayout({
-                type: 'dagre',
+            const g = new dagre.graphlib.Graph();
+            g.setGraph({
                 rankdir: 'LR',
                 align: 'UL',
                 ranksep: 80,
                 nodesep: 50,
+                marginx: 20,
+                marginy: 20,
+            });
+            g.setDefaultEdgeLabel(() => ({}));
+
+            // 添加节点
+            const nodes = graphInstance.getNodes();
+            nodes.forEach(node => {
+                g.setNode(node.id, {
+                    width: node.getSize().width,
+                    height: node.getSize().height,
+                });
+            });
+
+            // 添加边
+            const edges = graphInstance.getEdges();
+            edges.forEach(edge => {
+                g.setEdge(edge.getSourceCellId(), edge.getTargetCellId());
+            });
+
+            // 执行布局
+            dagre.layout(g);
+
+            // 应用布局结果
+            nodes.forEach(node => {
+                const nodeWithPosition = g.node(node.id);
+                node.position(
+                    nodeWithPosition.x - nodeWithPosition.width / 2,
+                    nodeWithPosition.y - nodeWithPosition.height / 2
+                );
             });
 
-            const cells = graphInstance.getCells();
-            layout.layout(cells);
-            graphInstance.resetCells(cells);
             graphInstance.centerContent();
         } catch (error) {
             console.error('加载工作流定义失败:', error);