1

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

@@ -19,6 +19,7 @@ import '@antv/x6-plugin-clipboard';
 import '@antv/x6-plugin-history';
 import { Selection } from '@antv/x6-plugin-selection';
 import { MiniMap } from '@antv/x6-plugin-minimap';
+import { Clipboard } from '@antv/x6-plugin-clipboard';
 import {getDefinitionDetail, saveDefinition} from '../service';
 import {getNodeDefinitionList} from './service';
 import NodePanel from './components/NodePanel';
@@ -139,6 +140,43 @@ const WorkflowDesign: React.FC = () => {
         });
     };
 
+    // 处理复制操作
+    const handleCopy = () => {
+        if (!graph) return;
+        const cells = graph.getSelectedCells();
+        if (cells.length === 0) {
+            message.info('请先选择要复制的节点');
+            return;
+        }
+        graph.copy(cells);
+        message.success('已复制');
+    };
+
+    // 处理剪切操作
+    const handleCut = () => {
+        if (!graph) return;
+        const cells = graph.getSelectedCells();
+        if (cells.length === 0) {
+            message.info('请先选择要剪切的节点');
+            return;
+        }
+        graph.cut(cells);
+        message.success('已剪切');
+    };
+
+    // 处理粘贴操作
+    const handlePaste = () => {
+        if (!graph) return;
+        if (graph.isClipboardEmpty()) {
+            message.info('剪贴板为空');
+            return;
+        }
+        const cells = graph.paste({ offset: 32 });
+        graph.cleanSelection();
+        graph.select(cells);
+        message.success('已粘贴');
+    };
+
     // 首先加载节点定义列表
     useEffect(() => {
         const loadNodeDefinitions = async () => {
@@ -217,6 +255,11 @@ const WorkflowDesign: React.FC = () => {
             );
         }
 
+        // 注册剪贴板插件
+        graph.use(new Clipboard({
+            enabled: true,
+        }));
+
         registerEventHandlers(graph);
 
         setGraph(graph);
@@ -434,19 +477,19 @@ const WorkflowDesign: React.FC = () => {
                             <Tooltip title="剪切">
                                 <Button
                                     icon={<ScissorOutlined />}
-                                    onClick={() => graph?.cut()}
+                                    onClick={handleCut}
                                 />
                             </Tooltip>
                             <Tooltip title="复制">
                                 <Button
                                     icon={<CopyOutlined />}
-                                    onClick={() => graph?.copy()}
+                                    onClick={handleCopy}
                                 />
                             </Tooltip>
                             <Tooltip title="粘贴">
                                 <Button
                                     icon={<SnippetsOutlined />}
-                                    onClick={() => graph?.paste()}
+                                    onClick={handlePaste}
                                 />
                             </Tooltip>
                         </Space.Compact>