1

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

@@ -1,6 +1,7 @@
 import React, {useEffect, useState, useRef} from 'react';
+import {createRoot} from 'react-dom/client';
 import {useParams, useNavigate} from 'react-router-dom';
-import {Button, Space, Card, Row, Col, message, Modal, Collapse, Tooltip} from 'antd';
+import {Button, Space, Card, Row, Col, message, Modal, Collapse, Tooltip, Dropdown} from 'antd';
 import {
     ArrowLeftOutlined,
     SaveOutlined,
@@ -86,57 +87,69 @@ const WorkflowDesign: React.FC = () => {
             graph.cleanSelection();
             graph.select(cell);
 
-            const menuItems = [
+            const dropdownContainer = document.createElement('div');
+            dropdownContainer.style.position = 'absolute';
+            dropdownContainer.style.left = `${e.clientX}px`;
+            dropdownContainer.style.top = `${e.clientY}px`;
+            document.body.appendChild(dropdownContainer);
+
+            const root = createRoot(dropdownContainer);
+            let isOpen = true;
+            
+            const closeMenu = () => {
+                isOpen = false;
+                root.render(
+                    <Dropdown menu={{ items }} open={false} onOpenChange={(open) => {
+                        if (!open) {
+                            setTimeout(() => {
+                                root.unmount();
+                                document.body.removeChild(dropdownContainer);
+                            }, 100);
+                        }
+                    }}>
+                        <div />
+                    </Dropdown>
+                );
+            };
+
+            const items = [
                 {
+                    key: '1',
                     label: '编辑',
                     onClick: () => {
+                        closeMenu();
                         setSelectedNode(cell);
                         setSelectedNodeDefinition(nodeDefinitions.find(def => def.type === cell.getProp('type')));
                         setConfigModalVisible(true);
                     }
                 },
                 {
+                    key: '2',
                     label: '删除',
                     onClick: () => {
+                        closeMenu();
                         Modal.confirm({
                             title: '确认删除',
                             content: '确定要删除该节点吗？',
-                            onOk: () => {
+                            onOk: () => cell.remove()
-                                graph.removeCell(cell);
-                            }
                         });
                     }
                 }
             ];
 
-            const menu = document.createElement('div');
+            root.render(
-            menu.className = 'x6-context-menu';
+                <Dropdown menu={{ items }} open={isOpen}>
-            menu.style.position = 'fixed';
+                    <div />
-            menu.style.left = `${e.clientX}px`;
+                </Dropdown>
-            menu.style.top = `${e.clientY}px`;
+            );
-            menu.style.zIndex = '1000';
 
-            menuItems.forEach(item => {
+            const handleClickOutside = (e: MouseEvent) => {
-                const menuItem = document.createElement('div');
+                if (!dropdownContainer.contains(e.target as Node)) {
-                menuItem.className = 'x6-context-menu-item';
+                    closeMenu();
-                menuItem.innerText = item.label;
+                    document.removeEventListener('click', handleClickOutside);
-                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', handleClickOutside);
-            document.addEventListener('click', removeMenu);
         });
     };