From f1583c8b7bae846694ba72472c466f13987506b5 Mon Sep 17 00:00:00 2001
From: asp_ly <dengqichen@iscmtech.com>
Date: Sat, 14 Dec 2024 14:35:41 +0800
Subject: [PATCH] 1

---
 .../Workflow/Definition/Design/index.tsx      | 73 +++++++++++--------
 1 file changed, 43 insertions(+), 30 deletions(-)

diff --git a/frontend/src/pages/Workflow/Definition/Design/index.tsx b/frontend/src/pages/Workflow/Definition/Design/index.tsx
index a1bf9495..e2c3b327 100644
--- a/frontend/src/pages/Workflow/Definition/Design/index.tsx
+++ b/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: () => {
-                                graph.removeCell(cell);
-                            }
+                            onOk: () => cell.remove()
                         });
                     }
                 }
             ];
 
-            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';
+            root.render(
+                <Dropdown menu={{ items }} open={isOpen}>
+                    <div />
+                </Dropdown>
+            );
 
-            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);
+            const handleClickOutside = (e: MouseEvent) => {
+                if (!dropdownContainer.contains(e.target as Node)) {
+                    closeMenu();
+                    document.removeEventListener('click', handleClickOutside);
                 }
             };
-
-            document.addEventListener('click', removeMenu);
+            document.addEventListener('click', handleClickOutside);
         });
     };