feat(flowEditor): 优化节点添加功能和界面

- 新增分组标签页，优化节点分类展示
- 改进边添加节点功能，支持在特定位置添加- 调整节点添加按钮样式和布局
- 优化画布点击事件处理，清除节点添加状态

src/pages/flowEditor/components/addNodeMenu.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
-import { Menu } from '@arco-design/web-react';
+import { Menu, Tabs } from '@arco-design/web-react';
 import { localNodeData } from '@/pages/flowEditor/sideBar/config/localNodeData';
 
+const TabPane = Tabs.TabPane;
+
 interface AddNodeMenuProps {
   onAddNode: (nodeType: string) => void;
   position?: { x: number; y: number }; // 用于画布上下文菜单
@@ -10,7 +12,7 @@ interface AddNodeMenuProps {
 
 const AddNodeMenu: React.FC<AddNodeMenuProps> = ({
                                                    onAddNode
-}) => {
+                                                 }) => {
   // 按分组组织节点数据
   const groupedNodes = localNodeData.reduce((acc, node) => {
     if (!acc[node.nodeGroup]) {
@@ -26,13 +28,26 @@ const AddNodeMenu: React.FC<AddNodeMenuProps> = ({
 
   // 分组名称映射
   const groupNames: Record<string, string> = {
-    'common': '系统组件'
+    'common': '系统组件',
-    // 可以根据需要添加更多分组
+    'application': '应用组件',
-    // 'application': '应用组件',
+    'composite': '复合组件'
-    // 'composite': '复合组件'
   };
 
   return (
+    <div
+      style={{
+        backgroundColor: '#ffffff',
+        padding: '10px',
+        borderRadius: '10px',
+        maxHeight: '400px',
+        display: 'flex',
+        flexDirection: 'column'
+      }}
+    >
+      <Tabs defaultActiveTab="common" style={{ flex: '0 0 auto' }}>
+        {Object.entries(groupedNodes).map(([group, nodes]) => (
+          <TabPane key={group} title={groupNames[group] || group}>
+            <div style={{ maxHeight: '300px', overflowY: 'auto' }}>
               <Menu
                 style={{
                   width: 200,
@@ -42,13 +57,6 @@ const AddNodeMenu: React.FC<AddNodeMenuProps> = ({
                 }}
                 mode="vertical"
                 hasCollapseButton={false}
-    >
-      {Object.entries(groupedNodes).map(([group, nodes]) => (
-        <Menu.SubMenu 
-          key={group} 
-          title={groupNames[group] || group}
-          popup
-          trigger="hover"
               >
                 {nodes.map((node) => (
                   <Menu.Item
@@ -63,9 +71,12 @@ const AddNodeMenu: React.FC<AddNodeMenuProps> = ({
                     {node.nodeName}
                   </Menu.Item>
                 ))}
-        </Menu.SubMenu>
-      ))}
               </Menu>
+            </div>
+          </TabPane>
+        ))}
+      </Tabs>
+    </div>
   );
 };
 

src/pages/flowEditor/components/customEdge.tsx

@@ -15,7 +15,7 @@ const CustomEdge: React.FC<EdgeProps> = ({
                                            selected,
                                            data
                                          }) => {
-  const [edgePath, labelX, labelY] = getBezierPath({
+  const [edgePath, labelX, labelY, offsetX, offsetY] = getBezierPath({
     sourceX,
     sourceY,
     sourcePosition,
@@ -31,8 +31,7 @@ const CustomEdge: React.FC<EdgeProps> = ({
   const { setEdges } = useReactFlow();
 
   // 边点击处理函数
-  const handleEdgeAddNode = () => {
+  const handleEdgeAddNode = (e) => {
-    console.log('handleEdgeAddNode called for edge:', id);
     // 更新边的数据，触发边上添加节点的流程
     setEdges(eds => eds.map(edge => {
       if (edge.id === id) {
@@ -40,7 +39,9 @@ const CustomEdge: React.FC<EdgeProps> = ({
           ...edge,
           data: {
             ...edge.data,
-            addNodeTrigger: true
+            addNodeTrigger: true,
+            clientX: e.clientX,
+            clientY: e.clientY
           }
         };
       }
@@ -71,20 +72,11 @@ const CustomEdge: React.FC<EdgeProps> = ({
         >
           {hovered && (
             <EdgeAddNodeButton
-              onClick={handleEdgeAddNode}
+              onClick={(e) => handleEdgeAddNode(e)}
             />
           )}
         </div>
       </EdgeLabelRenderer>
-      {/* 悬停时显示的高亮线条 */}
-      {hovered && (
-        <path
-          d={edgePath}
-          fill="none"
-          stroke="#1890ff"
-          strokeWidth={2}
-        />
-      )}
     </>
   );
 };

src/pages/flowEditor/components/edgeAddNodeButton.tsx

@@ -3,14 +3,14 @@ import { Button } from '@arco-design/web-react';
 import { IconPlus } from '@arco-design/web-react/icon';
 
 interface EdgeAddNodeButtonProps {
-  onClick: () => void;
+  onClick: (e) => void;
   style?: React.CSSProperties;
 }
 
 const EdgeAddNodeButton: React.FC<EdgeAddNodeButtonProps> = ({
                                                                onClick,
                                                                style
-}) => {
+                                                             }) => {
   return (
     <div
       style={{
@@ -26,12 +26,12 @@ const EdgeAddNodeButton: React.FC<EdgeAddNodeButtonProps> = ({
         icon={<IconPlus />}
         onClick={(e) => {
           e.stopPropagation();
-          onClick();
+          onClick(e);
         }}
         style={{
-          width: 20,
+          width: 12,
-          height: 20,
+          height: 12,
-          minWidth: 20,
+          minWidth: 12,
           padding: 0,
           borderRadius: '50%',
           display: 'flex',

src/pages/flowEditor/components/paneContextMenu.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { Menu } from '@arco-design/web-react';
 import AddNodeMenu from './addNodeMenu';
 
+const SubMenu = Menu.SubMenu;
+
 interface PaneContextMenuProps {
   onAddNode: (nodeType: string, position: { x: number; y: number }) => void;
   position: { x: number; y: number };
@@ -18,7 +20,6 @@ const PaneContextMenu: React.FC<PaneContextMenuProps> = ({
 
   return (
     <Menu
-      mode="pop"
       style={{
         minWidth: 200,
         border: '1px solid #e4e7ed',
@@ -26,17 +27,16 @@ const PaneContextMenu: React.FC<PaneContextMenuProps> = ({
         boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'
       }}
     >
-      <Menu.SubMenu
+      <SubMenu
         key="add-node"
         title="添加节点"
         popup
+        triggerProps={{
+          popupStyle: { height: 'auto', maxHeight: 'none' }
+        }}
       >
-        <div style={{
-          padding: '4px 0'
-        }}>
         <AddNodeMenu onAddNode={handleAddNode} />
-        </div>
+      </SubMenu>
-      </Menu.SubMenu>
     </Menu>
   );
 };

src/pages/flowEditor/index.tsx

@@ -289,8 +289,10 @@ const FlowEditor: React.FC = () => {
   // 监听边的变化，处理添加节点的触发
   useEffect(() => {
     const edgeToAddNode = edges.find(edge => edge.data?.addNodeTrigger);
+    const pane = reactFlowWrapper.current?.getBoundingClientRect();
     if (edgeToAddNode) {
-      console.log('Triggering add node for edge:', edgeToAddNode.id);
+      edgeToAddNode.data.y = (edgeToAddNode.data.clientY as number) - pane.top;
+      edgeToAddNode.data.x = (edgeToAddNode.data.clientX as number) - pane.left;
       setEdgeForNodeAdd(edgeToAddNode);
 
       // 清除触发标志
@@ -380,7 +382,12 @@ const FlowEditor: React.FC = () => {
   );
 
   // 点击画布其他区域关闭菜单
-  const onPaneClick = useCallback(() => setMenu(null), [setMenu]);
+  const onPaneClick = useCallback(() => {
+    setMenu(null);
+    // 关闭添加节点菜单
+    setEdgeForNodeAdd(null);
+    setPositionForNodeAdd(null);
+  }, [setMenu]);
 
   // 关闭编辑弹窗
   const closeEditModal = useCallback(() => {
@@ -711,14 +718,19 @@ const FlowEditor: React.FC = () => {
         <div
           style={{
             position: 'absolute',
-            top: edgeForNodeAdd ? '50%' : (positionForNodeAdd?.y || 0),
+            top: edgeForNodeAdd ? (edgeForNodeAdd.data?.y as number || 0) : (positionForNodeAdd?.y || 0),
-            left: edgeForNodeAdd ? '50%' : (positionForNodeAdd?.x || 0),
+            left: edgeForNodeAdd ? ((edgeForNodeAdd.data?.x as number || 0) + 20) : (positionForNodeAdd?.x || 0),
             zIndex: 1000,
-            transform: edgeForNodeAdd ? 'translate(-50%, -50%)' : 'none'
+            transform: 'none'
           }}
         >
           <AddNodeMenu
-            onAddNode={handleAddNode}
+            onAddNode={(nodeType) => {
+              handleAddNode(nodeType);
+              // 关闭菜单
+              setEdgeForNodeAdd(null);
+              setPositionForNodeAdd(null);
+            }}
             position={positionForNodeAdd || undefined}
             edgeId={edgeForNodeAdd?.id}
           />