@ysjdemo/umi-create-cli 0.0.2 → 0.0.4

package/lib/templates/qiankun/cf-workbench-function/src/components/Flow/hooks/useFlowHooks.ts

@@ -0,0 +1,813 @@
+import {
+  CustomBezierEdge,
+  GroupNode,
+  groupNodeDefaultStyle,
+  RectNode,
+  rectNodeDefaultStyle,
+  TextNode,
+  textNodeDefaultStyle,
+} from '@/components/Flow';
+import { ContextMenuProps } from '@/components/Flow/ContextMenu';
+import { BaseNodeDataType } from '@/components/Flow/CustomNode/types';
+import { DragEnum, EdgeEnum, useDnD } from '@/constants';
+import { useIntl, useMemoizedFn } from '@umijs/max';
+import {
+  addEdge,
+  EdgeTypes,
+  isNode,
+  IsValidConnection,
+  MarkerType,
+  NodeMouseHandler,
+  NodeTypes,
+  OnConnect,
+  OnNodeDrag,
+  OnSelectionChangeFunc,
+  Position,
+  useReactFlow,
+  XYPosition,
+  type Edge,
+  type Node,
+} from '@xyflow/react';
+import { MenuProps } from 'antd';
+import React, { useEffect, useMemo, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+
+type DeepGetPositionFn = (parentId: string | undefined, position: XYPosition) => XYPosition;
+
+export enum NodeMenuEnum {
+  VIEW = 'view',
+  DETAILS = 'details',
+  EDIT = 'edit',
+  SETTING = 'setting',
+  COPY = 'copy',
+  DELETE = 'delete',
+}
+
+// 菜单项配置类型
+interface MenuItemConfig<NodeData extends Record<string, unknown> = any> {
+  key: NodeMenuEnum;
+  label: string;
+  danger?: boolean;
+  action: (node: Node<NodeData>) => void;
+}
+
+export interface FlowHooksReturnType<
+  NodeType extends Node<Record<string, unknown>, string | undefined>,
+  EdgeType extends Edge<Record<string, unknown>, string | undefined>,
+> {
+  /** 注册节点 */
+  nodeTypes?: NodeTypes;
+  /** 注册线 */
+  edgeTypes: EdgeTypes;
+  /** 连线方法 */
+  onConnect: OnConnect;
+  /** 连线校验 */
+  isValidConnection: IsValidConnection;
+  /** 节点点击 */
+  onNodeClick: NodeMouseHandler<NodeType>;
+  /** 拖动面板中的节点 */
+  onDrop: (event: React.DragEvent<HTMLDivElement>) => void;
+  /** 拖动面板中的节点结束 */
+  onDragOver: (event: React.DragEvent<HTMLDivElement>) => void;
+  /** 拖动画布中的节点 */
+  onNodeDrag: OnNodeDrag;
+  /** 拖动画布中的节点结束 */
+  onNodeDragStop: OnNodeDrag;
+  /** 复制节点 */
+  copyNode: (originNode: NodeType) => void;
+  /** 右键上下文菜单 */
+  onContextMenu: (event: Parameters<NodeMouseHandler>['0'], data: Node | Edge) => void;
+  /** 右键上下文菜单 */
+  contextMenu: ContextMenuProps | null;
+
+  /** 查看节点 */
+  viewNode: NodeType | null;
+  /** 设置查看的节点 */
+  setViewNode: React.Dispatch<React.SetStateAction<NodeType | null>>;
+  /** 修改节点 */
+  editNode: NodeType | null;
+  /** 修改内容的线 */
+  editEdge: EdgeType | null;
+  /** 设置修改内容的节点 */
+  setEditNode: React.Dispatch<React.SetStateAction<NodeType | null>>;
+  /** 设置修改内容的线 */
+  setEditEdge: React.Dispatch<React.SetStateAction<EdgeType | null>>;
+
+  /** 配置的节点 */
+  nodeSetting: NodeType | null;
+  /** 设置配置的节点 */
+  setNodeSetting: React.Dispatch<React.SetStateAction<NodeType | null>>;
+  /** 配置的线 */
+  edgeSetting: EdgeType | null;
+  /** 设置配置的线 */
+  setEdgeSetting: React.Dispatch<React.SetStateAction<EdgeType | null>>;
+
+  /** 选区中的线 */
+  selectedEdges: Edge[];
+  /** 选区中的节点 */
+  selectedNodes: Node[];
+  /** 选区变化 */
+  onSelectionChange: OnSelectionChangeFunc;
+
+  /** 递归获取父元素相对于画布的位置 */
+  deepGetPosition: DeepGetPositionFn;
+  /** 获取可以拖动进去的节点 */
+  getCanDragInNodes: (node: Node) => Node[];
+}
+
+// 节点右键菜单配置
+const nodeMenuMap: Record<DragEnum, NodeMenuEnum[]> = {
+  [DragEnum.BASE_NODE]: [
+    NodeMenuEnum.VIEW,
+    NodeMenuEnum.EDIT,
+    NodeMenuEnum.SETTING,
+    NodeMenuEnum.COPY,
+    NodeMenuEnum.DELETE,
+  ],
+  [DragEnum.BENDING_NODE]: [
+    NodeMenuEnum.VIEW,
+    NodeMenuEnum.EDIT,
+    NodeMenuEnum.SETTING,
+    NodeMenuEnum.COPY,
+    NodeMenuEnum.DELETE,
+  ],
+  [DragEnum.LASER_NODE]: [
+    NodeMenuEnum.VIEW,
+    NodeMenuEnum.EDIT,
+    NodeMenuEnum.SETTING,
+    NodeMenuEnum.COPY,
+    NodeMenuEnum.DELETE,
+  ],
+  [DragEnum.STAMPING_NODE]: [
+    NodeMenuEnum.VIEW,
+    NodeMenuEnum.EDIT,
+    NodeMenuEnum.SETTING,
+    NodeMenuEnum.COPY,
+    NodeMenuEnum.DELETE,
+  ],
+  [DragEnum.NCT_NODE]: [
+    NodeMenuEnum.VIEW,
+    NodeMenuEnum.EDIT,
+    NodeMenuEnum.SETTING,
+    NodeMenuEnum.COPY,
+    NodeMenuEnum.DELETE,
+  ],
+  [DragEnum.RIVET_NODE]: [
+    NodeMenuEnum.VIEW,
+    NodeMenuEnum.EDIT,
+    NodeMenuEnum.SETTING,
+    NodeMenuEnum.COPY,
+    NodeMenuEnum.DELETE,
+  ],
+  [DragEnum.GROUP_NODE]: [NodeMenuEnum.SETTING, NodeMenuEnum.COPY, NodeMenuEnum.DELETE],
+  [DragEnum.TEXT_NODE]: [NodeMenuEnum.SETTING, NodeMenuEnum.COPY, NodeMenuEnum.DELETE],
+  [DragEnum.default]: [],
+};
+
+// 工具函数：安全执行菜单操作
+const safeExecuteMenuAction = async <T>(action: () => Promise<T> | T, errorMessage: string, fallback?: T) => {
+  try {
+    return await action();
+  } catch (error) {
+    console.error(errorMessage, error);
+    return fallback;
+  }
+};
+
+const nodeStyleMap: Record<DragEnum, any> = {
+  [DragEnum.BASE_NODE]: rectNodeDefaultStyle,
+  [DragEnum.BENDING_NODE]: rectNodeDefaultStyle,
+  [DragEnum.LASER_NODE]: rectNodeDefaultStyle,
+  [DragEnum.STAMPING_NODE]: rectNodeDefaultStyle,
+  [DragEnum.NCT_NODE]: rectNodeDefaultStyle,
+  [DragEnum.RIVET_NODE]: rectNodeDefaultStyle,
+  [DragEnum.GROUP_NODE]: groupNodeDefaultStyle,
+  [DragEnum.TEXT_NODE]: textNodeDefaultStyle,
+  default: {
+    width: 120,
+    height: 90,
+  },
+};
+
+// 注册自定义通用线
+const edgeTypes = {
+  [EdgeEnum.BEZIER_EDGE]: CustomBezierEdge,
+};
+
+// 注册自定义通用节点
+const nodeTypes: NodeTypes = {
+  [DragEnum.BASE_NODE]: RectNode,
+  [DragEnum.BENDING_NODE]: RectNode,
+  [DragEnum.LASER_NODE]: RectNode,
+  [DragEnum.STAMPING_NODE]: RectNode,
+  [DragEnum.NCT_NODE]: RectNode,
+  [DragEnum.RIVET_NODE]: RectNode,
+  [DragEnum.TEXT_NODE]: TextNode,
+  [DragEnum.GROUP_NODE]: GroupNode,
+};
+
+interface IProps<
+  NodeType extends Node<Record<string, unknown>, string | undefined>,
+  EdgeType extends Edge<Record<string, unknown>, string | undefined>,
+> {
+  reactFlowRef: React.RefObject<HTMLDivElement>;
+  isViewPage?: boolean;
+
+  /** 菜单点击操作拦截 */
+  menuInterceptors?: {
+    node?: {
+      [key in NodeMenuEnum]?: {
+        /** 操作前拦截， 返回true可以继续默认操作，否则不操作 */
+        before?: (node: NodeType) => Promise<boolean | void> | boolean | void;
+        /** 操作后回调 */
+        after?: (node: NodeType) => void;
+        /** 操作前回调 */
+        callback?: (node: NodeType) => void;
+      };
+    };
+    edge?: {
+      [key in NodeMenuEnum]?: {
+        /** 操作前拦截， 返回true可以继续默认操作，否则不操作 */
+        before?: (edge: EdgeType) => Promise<boolean | void> | boolean | void;
+        /** 操作后回调 */
+        after?: (edge: EdgeType) => void;
+        /** 操作前回调 */
+        callback?: (edge: EdgeType) => void;
+      };
+    };
+  };
+}
+
+// 生成拖拽节点的id
+const getId = () => uuidv4();
+
+/**
+ * 管理ReactFlow方法的hooks
+ * @param reactFlowRef flow 容器ref
+ * @returns {FlowHooksReturnType}
+ */
+const useFlowHooks = <NodeData extends Record<string, unknown> = any, EdgeType extends Record<string, unknown> = any>(
+  props: IProps<Node<NodeData>, Edge<EdgeType>>,
+): FlowHooksReturnType<Node<NodeData>, Edge<EdgeType>> => {
+  const { menuInterceptors, reactFlowRef, isViewPage } = props;
+
+  const { formatMessage } = useIntl();
+
+  const {
+    // 可以平移屏幕像素位置到点击位置
+    screenToFlowPosition,
+    // 增加节点
+    addNodes,
+    // 保存更新节点
+    setNodes,
+    // 保存更新线
+    setEdges,
+    // 删除元素
+    deleteElements,
+    // 找到移动到上方的节点
+    getIntersectingNodes,
+    getNode,
+  } = useReactFlow();
+
+  // 存储拖拽出来的节点
+  const [node] = useDnD();
+
+  // 右键菜单定位和节点id的信息
+  const [contextMenu, setContextMenu] = useState<ContextMenuProps | null>(null);
+  const [viewNode, setViewNode] = useState<Node<NodeData> | null>(null);
+
+  // 编辑
+  const [nodeSetting, setNodeSetting] = useState<Node<NodeData> | null>(null);
+  const [editNode, setEditNode] = useState<Node<NodeData> | null>(null);
+  const [editEdge, setEditEdge] = useState<Edge<EdgeType> | null>(null);
+  const [edgeSetting, setEdgeSetting] = useState<Edge<EdgeType> | null>(null);
+
+  // 选区状态
+  const [selectedNodes, setSelectedNodes] = useState<Node[]>([]);
+  const [selectedEdges, setSelectedEdges] = useState<Edge[]>([]);
+
+  // 获取可以拖动进去的节点
+  const getCanDragInNodes = useMemoizedFn((node: Node) => {
+    // 如果拖动的节点是分组节点，不允许拖到其他节点上
+    if (node.type === DragEnum.GROUP_NODE) return [];
+
+    // 找到节点下面的所有node
+    let intersectionsNodes = getIntersectingNodes(node);
+
+    // 如果拖动的节点是文本节点，则都可以拖进去，否则只能拖进分组节点
+    if (node.type !== DragEnum.TEXT_NODE) {
+      intersectionsNodes = intersectionsNodes.filter((n) => n.type === DragEnum.GROUP_NODE);
+    } else {
+      // 不能拖进文本节点
+      intersectionsNodes = intersectionsNodes.filter((n) => n.type !== DragEnum.TEXT_NODE);
+    }
+    return intersectionsNodes;
+  });
+
+  // 连线方法
+  const onConnect: OnConnect = useMemoizedFn((params) =>
+    // 更新线条数据
+    setEdges((eds) =>
+      // 配置线条、添加线到画布
+      addEdge(
+        {
+          ...params,
+          // type: EdgeEnum.BEZIER_EDGE,
+          markerEnd: { type: MarkerType.ArrowClosed, strokeWidth: 3 },
+          style: { strokeWidth: 2, strokeDasharray: '5,5' },
+        },
+        eds,
+      ),
+    ),
+  );
+
+  // 线连接校验
+  const isValidConnection: IsValidConnection = useMemoizedFn((connection) => {
+    return true;
+  });
+
+  // 节点点击
+  const onNodeClick = useMemoizedFn<NodeMouseHandler<Node<NodeData>>>(async (event, node) => {
+    const canProceed = await menuInterceptors?.node?.[NodeMenuEnum.VIEW]?.before?.(node);
+    if (canProceed === false) return;
+
+    setViewNode(node);
+  });
+
+  // 递归获取父元素相对于画布的位置
+  const deepGetPosition: DeepGetPositionFn = useMemoizedFn((parentId, position) => {
+    const parentNode = getNode(parentId ?? '');
+
+    if (!parentNode) return position;
+
+    position.x = parentNode.position.x + position.x;
+    position.y = parentNode.position.y + position.y;
+    return deepGetPosition(parentNode.parentId, position);
+  });
+
+  // 拖拽面板节点
+  const onDrop = useMemoizedFn((event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+
+    if (!node?.type) {
+      return;
+    }
+
+    // 生成节点在画布的位置
+    const position = screenToFlowPosition({
+      x: event.clientX,
+      y: event.clientY,
+    });
+
+    // 新节点信息
+    const newNode: Node<BaseNodeDataType> = {
+      id: getId(),
+      type: node.type,
+      position,
+      data: {
+        name: node.name,
+        label: node.label ?? node.name,
+        ...node.data,
+        setting: {
+          sourceHandles: [{ id: 'source_1' }],
+          targetHandles: [{ id: 'target_1' }],
+          sourcePosition: Position.Right,
+          targetPosition: Position.Left,
+          ...(node.data?.setting || {}),
+        },
+        style: {
+          borderColor: node.style?.borderColor,
+          ...(node.data?.style || {}),
+        },
+      },
+    };
+
+    // data中定义的样式
+    const dataStyle = newNode.data?.setting?.style || ({} as React.CSSProperties);
+    // 自定义节点中定义的样式
+    const nodeStyle = nodeStyleMap[newNode.type as DragEnum] || nodeStyleMap.default;
+
+    // 节点最左边和最右边的位置
+    const x1 = position.x;
+    const x2 = position.x + (dataStyle.width || nodeStyle.width || nodeStyle.minWidth);
+
+    // 节点最上面和最下面的位置
+    const y1 = position.y;
+    const y2 = position.y + (dataStyle.height || nodeStyle.height || nodeStyle.minHeight);
+
+    let intersectionsNodes = getCanDragInNodes(newNode);
+    // 找到移动位置底部的所有节点
+    const filterIntersectionsNode = intersectionsNodes.filter((pNode) => {
+      // 目标父节点相对画布的定位
+      const targetParentPosition = deepGetPosition(pNode.parentId, {
+        ...pNode.position,
+      });
+      // 父节点最左边和最右边的位置
+      const px1 = targetParentPosition.x;
+      const px2 = targetParentPosition.x + (pNode.measured?.width || 0);
+      // 父节点最上面和最下面的位置
+      const py1 = targetParentPosition.y;
+      const py2 = targetParentPosition.y + (pNode.measured?.height || 0);
+
+      // 如果节点最后边或者最右边 以及 最上面或者最下面 则是拖动元素的父节点（可能是多个）
+      return ((x1 > px1 && x1 < px2) || (x2 > px1 && x2 < px2)) && ((y1 > py1 && y1 < py2) || (y2 > py1 && y2 < py2));
+    });
+    // 取出最后一个作为父节点
+    const intersectionsNode = filterIntersectionsNode.at(-1);
+    // 如果有父节点，更新节点位置信息
+    if (intersectionsNode) {
+      newNode.parentId = intersectionsNode.id;
+      // 目标父节点相对画布的定位
+      const targetParentPosition = deepGetPosition(intersectionsNode.parentId, { ...intersectionsNode.position });
+      newNode.position = {
+        x: x1 - targetParentPosition.x,
+        y: y1 - targetParentPosition.y,
+      };
+    }
+
+    // 更新节点数据
+    // 将分组节点放在最前面，否则新生成的节点拖不进去
+    setNodes((nds) => {
+      return newNode.type === DragEnum.GROUP_NODE ? [newNode, ...nds] : nds.concat(newNode);
+    });
+  });
+
+  // 拖拽面板节点结束
+  const onDragOver = useMemoizedFn((event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  });
+
+  // 这些放进hooks中拖拽时节点不跟着移动
+  /** 节点拖动（拖到其他节点上时，底部节点高亮）*/
+  const onNodeDrag: OnNodeDrag = useMemoizedFn((event, node) => {
+    let intersectionsNode = getCanDragInNodes(node);
+
+    // 设置节点高亮和更新位置
+    setNodes((ns) =>
+      ns.map((n) => {
+        // 更新被拖拽节点的位置
+        if (n.id === node.id) {
+          return {
+            ...n,
+            position: node.position, // 关键：更新位置
+            className: '',
+          };
+        }
+
+        // 更新其他节点的高亮状态
+        return {
+          ...n,
+          className: intersectionsNode.map((node) => node.id).includes(n.id) ? 'highlight' : '',
+        };
+      }),
+    );
+  });
+
+  /** 节点拖动结束（去除节点高亮）*/
+  const onNodeDragStop: OnNodeDrag = useMemoizedFn((event, node) => {
+    let canIntersectionNode = getCanDragInNodes(node).at(-1);
+
+    setNodes((ns) =>
+      ns.map((n) => {
+        // 如果不是拖动的节点，不做操作
+        if (node.id !== n.id) {
+          return {
+            ...n,
+            className: '',
+          };
+        }
+
+        // 如果拖动到不能拖进去的节点或者画布空白位置，去除parentId，设置position相对于画布
+        if (!canIntersectionNode) {
+          const parentNode = getNode(n.parentId as string);
+          if (!parentNode) return n;
+
+          // 父节点位置
+          let parentPosition = {
+            x: parentNode.position.x,
+            y: parentNode.position.y,
+          };
+          // 如果父节点也是其他节点的子节点，位置需要加上祖父节点的位置
+          parentPosition = deepGetPosition(parentNode.parentId, {
+            ...parentPosition,
+          });
+
+          return {
+            ...n,
+            position: {
+              x: parentPosition.x + node.position.x,
+              y: parentPosition.y + node.position.y,
+            },
+            parentId: undefined,
+            className: '',
+          };
+        }
+
+        // 如果拖动到了其他可以拖进去的节点上
+        // 原本不是其他节点的子节点，则设置parentId和position，这里的position是相对父节点的，所以要计算
+        if (!n.parentId) {
+          // 父节点相对画布的定位
+          let parentPosition = {
+            x: canIntersectionNode.position.x,
+            y: canIntersectionNode.position.y,
+          };
+          // 如果父节点也是其他节点的子节点，位置需要加上祖父节点的位置
+          parentPosition = deepGetPosition(canIntersectionNode.parentId, {
+            ...parentPosition,
+          });
+
+          return {
+            ...n,
+            position: {
+              x: node.position.x - parentPosition.x,
+              y: node.position.y - parentPosition.y,
+            },
+            parentId: canIntersectionNode?.id,
+            className: '',
+          };
+        } else {
+          // 从其他父节点拖出来到其他节点上
+          const parentNode = getNode(n.parentId as string);
+
+          if (!parentNode) return n;
+          // 原来的父节点相对画布的定位
+          const originParentPosition = deepGetPosition(parentNode.parentId, {
+            ...parentNode.position,
+          });
+
+          // 自身节点相对画布的定位
+          let selfPosition = {
+            x: originParentPosition.x + n.position.x,
+            y: originParentPosition.y + n.position.y,
+          };
+          // 目标父节点相对画布的定位
+          const targetParentPosition = deepGetPosition(canIntersectionNode.parentId, {
+            ...canIntersectionNode.position,
+          });
+          return {
+            ...n,
+            position: {
+              x: selfPosition.x - targetParentPosition.x,
+              y: selfPosition.y - targetParentPosition.y,
+            },
+            parentId: canIntersectionNode?.id,
+            className: '',
+          };
+        }
+      }),
+    );
+  });
+
+  // 处理选区变化
+  const onSelectionChange: OnSelectionChangeFunc = useMemoizedFn(({ nodes, edges }) => {
+    setSelectedNodes(nodes);
+    setSelectedEdges(edges);
+  });
+
+  // 节点创建菜单处理函数
+  const createNodeMenuHandler = useMemoizedFn(
+    async (menuKey: NodeMenuEnum, node: Node<NodeData>, action: (node: Node<NodeData>) => void) => {
+      // 执行前置回调
+      safeExecuteMenuAction(() => menuInterceptors?.node?.[menuKey]?.callback?.(node), `前置回调执行失败: ${menuKey}`);
+
+      // 执行前置拦截器
+      const canProceed = await safeExecuteMenuAction(
+        () => menuInterceptors?.node?.[menuKey]?.before?.(node),
+        `前置拦截器执行失败: ${menuKey}`,
+        false,
+      );
+
+      // 如果允许继续，执行默认操作
+      if (canProceed !== false) {
+        safeExecuteMenuAction(() => action(node), `默认操作执行失败: ${menuKey}`);
+      }
+
+      // 执行后置回调
+      safeExecuteMenuAction(() => menuInterceptors?.node?.[menuKey]?.after?.(node), `后置回调执行失败: ${menuKey}`);
+    },
+  );
+
+  // 边创建菜单处理函数
+  const createEdgeMenuHandler = useMemoizedFn(
+    async (menuKey: NodeMenuEnum, edge: Edge<EdgeType>, action: (edge: Edge<EdgeType>) => void) => {
+      // 执行前置回调
+      safeExecuteMenuAction(() => menuInterceptors?.edge?.[menuKey]?.callback?.(edge), `前置回调执行失败: ${menuKey}`);
+
+      // 执行前置拦截器
+      const canProceed = await safeExecuteMenuAction(
+        () => menuInterceptors?.edge?.[menuKey]?.before?.(edge),
+        `前置拦截器执行失败: ${menuKey}`,
+        false,
+      );
+
+      // 如果允许继续，执行默认操作
+      if (canProceed !== false) {
+        safeExecuteMenuAction(() => action(edge), `默认操作执行失败: ${menuKey}`);
+      }
+
+      // 执行后置回调
+      safeExecuteMenuAction(() => menuInterceptors?.edge?.[menuKey]?.after?.(edge), `后置回调执行失败: ${menuKey}`);
+    },
+  );
+
+  // 复制节点
+  const copyNode = useMemoizedFn((originNode: Node<NodeData>) => {
+    const position = {
+      x: originNode.position.x + 50,
+      y: originNode.position.y + 50,
+    };
+
+    addNodes({
+      ...originNode,
+      selected: false,
+      dragging: false,
+      id: `${originNode.id}-copy-${uuidv4()}`,
+      position,
+    });
+  });
+
+  // 菜单项配置
+  const menuConfigs: MenuItemConfig<NodeData>[] = useMemo(
+    () => [
+      {
+        key: NodeMenuEnum.VIEW,
+        label: formatMessage({ id: 'lib.Flow.menu.view', defaultMessage: '查看' }),
+        action: setViewNode,
+      },
+      {
+        key: NodeMenuEnum.EDIT,
+        label: formatMessage({ id: 'lib.Flow.menu.edit', defaultMessage: '修改' }),
+        action: setEditNode,
+      },
+      {
+        key: NodeMenuEnum.SETTING,
+        label: formatMessage({ id: 'lib.Flow.menu.settings', defaultMessage: '配置' }),
+        action: setNodeSetting,
+      },
+      {
+        key: NodeMenuEnum.COPY,
+        label: formatMessage({ id: 'lib.Flow.menu.copy', defaultMessage: '复制' }),
+        action: copyNode,
+      },
+      {
+        key: NodeMenuEnum.DELETE,
+        label: formatMessage({ id: 'lib.Flow.menu.delete', defaultMessage: '删除' }),
+        danger: true,
+        action: (node) => deleteElements({ nodes: [node] }),
+      },
+    ],
+    [setViewNode, setEditNode, setNodeSetting, copyNode, deleteElements],
+  );
+
+  // 节点右键菜单 - 优化版本
+  const getNodeContextMenuItems = useMemoizedFn((node: Node<NodeData>): MenuProps['items'] => {
+    if (!node?.type) return [];
+
+    // 根据节点类型过滤菜单项
+    const allowedMenus = nodeMenuMap[node.type as DragEnum] || [];
+
+    return menuConfigs
+      .filter((config) => allowedMenus.includes(config.key))
+      .filter((config) => {
+        if (isViewPage) {
+          return config.key === NodeMenuEnum.VIEW;
+        }
+        return true;
+      })
+      .map((config) => ({
+        label: config.label,
+        key: config.key,
+        danger: config.danger,
+        onClick: () => createNodeMenuHandler(config.key, node, config.action),
+      }));
+  });
+
+  // 线右键菜单
+  const getEdgeContextMenuItems = useMemoizedFn((edge: Edge<EdgeType>): MenuProps['items'] => {
+    return [
+      // {
+      //   label: '修改',
+      //   key: 'edit',
+      //   onClick: () => {
+      //     setEditEdge(edge);
+      //   },
+      // },
+      {
+        label: formatMessage({ id: 'lib.Flow.menu.settings', defaultMessage: '配置' }),
+        key: 'setting',
+        onClick: () => createEdgeMenuHandler(NodeMenuEnum.SETTING, edge, setEdgeSetting),
+      },
+      {
+        label: formatMessage({ id: 'lib.Flow.menu.delete', defaultMessage: '删除' }),
+        key: 'delete',
+        danger: true,
+        onClick: () => createEdgeMenuHandler(NodeMenuEnum.DELETE, edge, (edge) => deleteElements({ edges: [edge] })),
+      },
+    ];
+  });
+
+  // 监听节点鼠标右键信息
+  const onContextMenu = useMemoizedFn((event: Parameters<NodeMouseHandler>['0'], data: Node | Edge) => {
+    event.preventDefault();
+
+    const flowDom = reactFlowRef.current;
+
+    if (!flowDom) return;
+
+    // 获取画布的边界矩形信息
+    const pane = flowDom.getBoundingClientRect();
+
+    // 计算鼠标相对于画布的位置
+    const relativeX = event.clientX - pane.left;
+    const relativeY = event.clientY - pane.top;
+
+    // 菜单的预估宽高（可以根据实际调整）
+    const menuWidth = 120;
+    const menuHeight = 100;
+
+    // 计算菜单位置，确保不超出画布边界
+    let menuLeft: number | false = false;
+    let menuRight: number | false = false;
+    let menuTop: number | false = false;
+    let menuBottom: number | false = false;
+
+    // 水平位置计算
+    if (relativeX + menuWidth <= pane.width) {
+      // 右侧有足够空间，菜单显示在鼠标右侧
+      menuLeft = relativeX;
+    } else {
+      // 右侧空间不足，菜单显示在鼠标左侧
+      menuRight = pane.width - relativeX;
+    }
+
+    // 垂直位置计算
+    if (relativeY + menuHeight <= pane.height) {
+      // 下方有足够空间，菜单显示在鼠标下方
+      menuTop = relativeY;
+    } else {
+      // 下方空间不足，菜单显示在鼠标上方
+      menuBottom = pane.height - relativeY;
+    }
+
+    setContextMenu({
+      id: data.id,
+      items: isNode(data)
+        ? getNodeContextMenuItems(data as Node<NodeData>)
+        : getEdgeContextMenuItems(data as Edge<EdgeType>),
+      top: menuTop,
+      left: menuLeft,
+      right: menuRight,
+      bottom: menuBottom,
+    });
+  });
+
+  // 点击页面或拖动节点收起右键菜单
+  const bodyClick = useMemoizedFn(() => {
+    setContextMenu(null);
+  });
+
+  useEffect(() => {
+    const body = document.body;
+    body.addEventListener('click', bodyClick);
+    body.addEventListener('drag', bodyClick);
+    return () => {
+      body.removeEventListener('click', bodyClick);
+      body.removeEventListener('drag', bodyClick);
+    };
+  }, []);
+
+  return {
+    viewNode,
+    setViewNode,
+    editNode,
+    editEdge,
+    setEditNode,
+    setEditEdge,
+    nodeSetting,
+    setNodeSetting,
+    edgeSetting,
+    setEdgeSetting,
+
+    deepGetPosition,
+    getCanDragInNodes,
+
+    selectedEdges,
+    selectedNodes,
+    onSelectionChange,
+    onConnect,
+    isValidConnection,
+    onNodeClick,
+    onDrop,
+    onDragOver,
+    onNodeDrag,
+    onNodeDragStop,
+    copyNode,
+    nodeTypes,
+    edgeTypes,
+    onContextMenu,
+    contextMenu,
+  };
+};
+
+export default useFlowHooks;