From 0ef01ce4d45bdc5d677072bab9717f8c4bf4e333 Mon Sep 17 00:00:00 2001
From: asp_ly <dengqichen@iscmtech.com>
Date: Sat, 14 Dec 2024 13:03:26 +0800
Subject: [PATCH] 1

---
 .../Workflow/Definition/Design/index.tsx      | 79 ++++++++++++++++++-
 1 file changed, 78 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/Workflow/Definition/Design/index.tsx b/frontend/src/pages/Workflow/Definition/Design/index.tsx
index 30e6701a..62eab614 100644
--- a/frontend/src/pages/Workflow/Definition/Design/index.tsx
+++ b/frontend/src/pages/Workflow/Definition/Design/index.tsx
@@ -93,7 +93,66 @@ const WorkflowDesign: React.FC = () => {
             })
         );
 
-        // 添加选择样式
+        // 添加右键菜单
+        graph.on('node:contextmenu', ({cell, view, e}) => {
+            e.preventDefault();
+            graph.cleanSelection();
+            graph.select(cell);
+
+            const menuItems = [
+                {
+                    label: '编辑',
+                    onClick: () => {
+                        setSelectedNode(cell);
+                        setSelectedNodeDefinition(nodeDefinitions.find(def => def.type === cell.getProp('type')));
+                        setConfigModalVisible(true);
+                    }
+                },
+                {
+                    label: '删除',
+                    onClick: () => {
+                        Modal.confirm({
+                            title: '确认删除',
+                            content: '确定要删除该节点吗？',
+                            onOk: () => {
+                                graph.removeCell(cell);
+                            }
+                        });
+                    }
+                }
+            ];
+
+            const menu = document.createElement('div');
+            menu.className = 'x6-context-menu';
+            menu.style.position = 'fixed';
+            menu.style.left = `${e.clientX}px`;
+            menu.style.top = `${e.clientY}px`;
+            menu.style.zIndex = '1000';
+
+            menuItems.forEach(item => {
+                const menuItem = document.createElement('div');
+                menuItem.className = 'x6-context-menu-item';
+                menuItem.innerText = item.label;
+                menuItem.onclick = () => {
+                    item.onClick();
+                    menu.remove();
+                };
+                menu.appendChild(menuItem);
+            });
+
+            document.body.appendChild(menu);
+
+            const removeMenu = (e: MouseEvent) => {
+                if (!menu.contains(e.target as Node)) {
+                    menu.remove();
+                    document.removeEventListener('click', removeMenu);
+                }
+            };
+
+            document.addEventListener('click', removeMenu);
+        });
+
+        // 添加样式
         const style = document.createElement('style');
         style.textContent = `
             .node-selected > rect {
@@ -112,6 +171,24 @@ const WorkflowDesign: React.FC = () => {
                 stroke: #1890ff;
                 stroke-width: 2px !important;
             }
+            .x6-context-menu {
+                background: #fff;
+                border-radius: 4px;
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+                padding: 4px 0;
+                min-width: 120px;
+            }
+            .x6-context-menu-item {
+                padding: 5px 16px;
+                cursor: pointer;
+                user-select: none;
+                transition: all 0.3s;
+                color: rgba(0, 0, 0, 0.85);
+                font-size: 14px;
+            }
+            .x6-context-menu-item:hover {
+                background: #f5f5f5;
+            }
         `;
         document.head.appendChild(style);