pref(flowEditor): 优化节点添加弹窗的交互

src/pages/flowEditor/FlowEditorMain.tsx

@@ -146,7 +146,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
   useEffect(() => {
     const handleToggleNodeVisibility = (event: CustomEvent) => {
       const { appId, isVisible } = event.detail;
-      
+
       if (isVisible) {
         // 显示节点 - 从隐藏节点集合中移除
         setHiddenNodes(prev => {
@@ -154,14 +154,15 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
           newSet.delete(appId);
           return newSet;
         });
-      } else {
+      }
+      else {
         // 隐藏节点 - 添加到隐藏节点集合
         setHiddenNodes(prev => new Set(prev).add(appId));
       }
     };
 
     document.addEventListener('toggleNodeVisibility', handleToggleNodeVisibility as EventListener);
-    
+
     return () => {
       document.removeEventListener('toggleNodeVisibility', handleToggleNodeVisibility as EventListener);
     };
@@ -180,7 +181,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
   useEffect(() => {
     const handleToggleNodeVisibility = (event: CustomEvent) => {
       const { appId, isVisible } = event.detail;
-      
+
       if (isVisible) {
         // 显示节点 - 从隐藏节点集合中移除
         setHiddenNodes(prev => {
@@ -188,14 +189,15 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
           newSet.delete(appId);
           return newSet;
         });
-      } else {
+      }
+      else {
         // 隐藏节点 - 添加到隐藏节点集合
         setHiddenNodes(prev => new Set(prev).add(appId));
       }
     };
 
     document.addEventListener('toggleNodeVisibility', handleToggleNodeVisibility as EventListener);
-    
+
     return () => {
       document.removeEventListener('toggleNodeVisibility', handleToggleNodeVisibility as EventListener);
     };
@@ -238,7 +240,14 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
 
   return (
     <div ref={reactFlowWrapper} style={{ width: '100%', height: '100%', position: 'relative' }}
-         onContextMenu={(e) => e.preventDefault()}>
+         onContextMenu={(e) => e.preventDefault()}
+      // 添加点击事件处理器，用于关闭添加节点菜单
+         onClick={() => {
+           if (edgeForNodeAdd || positionForNodeAdd) {
+             setEdgeForNodeAdd(null);
+             setPositionForNodeAdd(null);
+           }
+         }}>
       <ReactFlow
         id={reactFlowId}
         nodes={nodes.map(node => {
@@ -246,7 +255,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
           const isHidden = hiddenNodes.has(node.id);
           // 应用透明度样式
           const style = isHidden ? { opacity: 0.3 } : {};
-          
+
           return {
             ...node,
             draggable: !currentAppIsRunning,
@@ -262,7 +271,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
           const isTargetHidden = hiddenNodes.has(edge.target);
           // 如果源节点或目标节点被隐藏，则边也应用透明度
           const style = (isSourceHidden || isTargetHidden) ? { opacity: 0.3 } : {};
-          
+
           // 更新边的数据，确保选择框也应用透明度
           return {
             ...edge,
@@ -291,7 +300,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
             console.warn('在应用编排模式下不允许删除节点');
             return false; // 阻止删除节点操作
           }
-          
+
           // 检查是否有开始或结束节点
           const hasStartOrEndNode = nodes.some(node => node.type === 'start' || node.type === 'end');
           if (hasStartOrEndNode) {
@@ -313,7 +322,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
             console.warn('在应用编排模式下不允许删除节点');
             return;
           }
-          
+
           // 如果在运行时，禁止删除
           if (currentAppIsRunning) {
             return;
@@ -367,10 +376,10 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
 
             // 删除所有相关节点和边
             setNodes((nds) => nds.filter((n) => !nodesToRemove.find((d) => d.id === n.id)));
-            
+
             // 删除与这些节点相关的所有边
             const nodeIdsToRemove = nodesToRemove.map(node => node.id);
-            setEdges((eds) => eds.filter((e) => 
+            setEdges((eds) => eds.filter((e) =>
               !nodeIdsToRemove.includes(e.source) && !nodeIdsToRemove.includes(e.target)
             ));
           }
@@ -517,6 +526,8 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
             zIndex: 1000,
             transform: 'none'
           }}
+          // 点击事件冒泡到父级处理，这里阻止默认行为
+          onClick={(e) => e.stopPropagation()}
         >
           <AddNodeMenu
             onAddNode={(nodeType, node) => {