feat: 完成规则链设计器右键菜单功能

 import { RuleChainPaginationItemType } from './model/type';
 import { RuleChainPaginationItemType } from './model/type';
 import { TBPaginationResult } from '/#/axios';
 import { TBPaginationResult } from '/#/axios';
 import { defHttp } from '/@/utils/http/axios';
 import { defHttp } from '/@/utils/http/axios';
-import { RuleChainType } from '/@/views/rule/designer/types/ruleNode';
+import { RuleChainDetail, RuleChainType } from '/@/views/rule/designer/types/ruleNode';
 
 
 enum Api {
 enum Api {
+  GET_RULE_CHAINS_DETAIL = '/ruleChain',
   SAVE = '/ruleChain/metadata',
   SAVE = '/ruleChain/metadata',
   GET_RULE_CHAINES = '/ruleChains',
   GET_RULE_CHAINES = '/ruleChains',
   GET_RULE_NODE_EVENTS = '/events/RULE_NODE',
   GET_RULE_NODE_EVENTS = '/events/RULE_NODE',
 }
 }
 
 
+export const getRuleChainDetail = (id: string) => {
+  return defHttp.get<RuleChainDetail>(
+    {
+      url: `${Api.GET_RULE_CHAINS_DETAIL}/${id}`,
+    },
+    { joinPrefix: false }
+  );
+};
+
 export const getRuleChainData = (id: string) => {
 export const getRuleChainData = (id: string) => {
   return defHttp.get<RuleChainType>(
   return defHttp.get<RuleChainType>(
     {
     {

@@ -38,6 +38,11 @@ export const PLATFORM = 'PLATFORM';
 export const PLATFORM_INFO_CACHE_KEY = 'PLATFORM_INFO';
 export const PLATFORM_INFO_CACHE_KEY = 'PLATFORM_INFO';
 
 
 export const MENU_LIST = 'MENU_LIST';
 export const MENU_LIST = 'MENU_LIST';
+
+export const RULE_NODE_LOCAL_CACHE_KEY = 'RULE__NODE__KEY__';
+
+export const RULE_NODE_KEY = 'RULE_NODE';
+
 export enum CacheTypeEnum {
 export enum CacheTypeEnum {
   SESSION,
   SESSION,
   LOCAL,
   LOCAL,

+export enum RuleChainEntityType {
+  RULE_NODE = 'RULE_NODE',
+  RULE_CHAIN = 'RULE_CHAIN',
+}

 import { Node } from '@vue-flow/core';
 import { Node } from '@vue-flow/core';
 import { NodeTypeEnum } from '../enum';
 import { NodeTypeEnum } from '../enum';
 import { buildUUID } from '/@/utils/uuid';
 import { buildUUID } from '/@/utils/uuid';
+import { NodeData } from '../types/node';
 
 
 export const useAddNodes = () => {
 export const useAddNodes = () => {
   const getAddNodesParams = (
   const getAddNodesParams = (
     position: Node['position'],
     position: Node['position'],
-    data: object,
+    data: NodeData,
     options?: Partial<Node>
     options?: Partial<Node>
   ): Node => {
   ): Node => {
     return {
     return {

@@ -122,6 +122,7 @@ export function useBasicDataTransform() {
           description,
           description,
           name,
           name,
         },
         },
+        created: !!id?.id,
       },
       },
       {
       {
         id: id?.id || buildUUID(),
         id: id?.id || buildUUID(),

+import { GraphEdge, GraphNode, VueFlowStore } from '@vue-flow/core';
+import { getRuleNodeCache, setRuleNodeCache } from './useRuleCopyPaste';
+import { RuleContextMenuEnum } from './useRuleChainContextMenu';
+import { useAddNodes } from './useAddNodes';
+import { buildUUID } from '/@/utils/uuid';
+import { toRaw, unref } from 'vue';
+import { useSaveAndRedo } from './useSaveAndRedo';
+import { isUnDef } from '/@/utils/is';
+import { useAddEdges } from './useAddEdges';
+import { EdgeData } from '../types/node';
+
+interface HandleContextMenuActionParamsType {
+  menuType: RuleContextMenuEnum;
+  event?: Event;
+  flowActionType?: VueFlowStore;
+  node?: GraphNode;
+  edge?: GraphEdge;
+  useSaveAndRedoActionType?: ReturnType<typeof useSaveAndRedo>;
+}
+
+export const NODE_WIDTH = 176;
+export const NODE_HEIGHT = 48;
+
+function getElementsCenter(nodes: GraphNode[]) {
+  let leftTopX: number | undefined;
+  let leftTopY: number | undefined;
+  let rightBottomX: number | undefined;
+  let rightBottomY: number | undefined;
+
+  for (const node of nodes) {
+    const { position } = node;
+    const { x, y } = position;
+    if (isUnDef(leftTopX)) {
+      leftTopX = x;
+      leftTopY = y;
+      rightBottomX = x + NODE_WIDTH;
+      rightBottomY = y + NODE_HEIGHT;
+
+      continue;
+    }
+
+    if (x < leftTopX!) {
+      leftTopX = x;
+      if (y < leftTopY!) {
+        leftTopY = y;
+      }
+      continue;
+    }
+
+    if (x + NODE_WIDTH > rightBottomX!) {
+      rightBottomX = x + NODE_WIDTH;
+      if (y + NODE_HEIGHT > rightBottomY!) {
+        rightBottomY = y + NODE_HEIGHT;
+      }
+    }
+  }
+
+  return {
+    originX: (rightBottomX! - leftTopX!) / 2 + leftTopX!,
+    originY: (rightBottomY! - leftTopY!) / 2 + leftTopY!,
+  };
+}
+
+export function useContextMenuAction() {
+  const copy = (params: HandleContextMenuActionParamsType) => {
+    const { node } = params;
+    if (!node) return;
+    const { position, data } = node;
+    const { getAddNodesParams } = useAddNodes();
+    const { x, y } = position;
+
+    const value = getAddNodesParams(position, data, { id: buildUUID() });
+
+    setRuleNodeCache({
+      nodes: [value],
+      originX: x + NODE_WIDTH / 2 + x,
+      originY: y + NODE_HEIGHT / 2,
+    });
+  };
+
+  const paste = (params: HandleContextMenuActionParamsType) => {
+    const { event, flowActionType, useSaveAndRedoActionType } = params;
+    const { triggerChange } = useSaveAndRedoActionType || {};
+    const { getAddNodesParams } = useAddNodes();
+    const { getAddedgesParams } = useAddEdges();
+    const clientX = (event as MouseEvent).offsetX;
+    const clientY = (event as MouseEvent).offsetY;
+
+    const { edges = [], nodes = [], originX, originY } = getRuleNodeCache();
+
+    const newNode = nodes.map((node) => {
+      const { position, data, id } = node;
+      const { x, y } = position;
+
+      const newX = clientX - originX! + x + NODE_WIDTH / 2;
+      const newY = clientY - originY! + y + NODE_HEIGHT / 2;
+
+      return getAddNodesParams({ x: newX, y: newY }, { ...data, created: false }, { id });
+    });
+
+    const newEdges = edges.map((edge) => getAddedgesParams(edge, edge.data));
+
+    flowActionType?.addNodes(newNode);
+    flowActionType?.addEdges(newEdges);
+
+    triggerChange?.();
+
+    flowActionType?.removeSelectedElements();
+  };
+
+  const selectAll = (params: HandleContextMenuActionParamsType) => {
+    const { flowActionType } = params;
+    flowActionType?.addSelectedElements(unref(flowActionType.getElements));
+  };
+
+  const unselect = (params: HandleContextMenuActionParamsType) => {
+    const { flowActionType } = params;
+    flowActionType?.removeSelectedElements();
+  };
+
+  const deleteElement = (parmas: HandleContextMenuActionParamsType) => {
+    const { useSaveAndRedoActionType, flowActionType, node, edge } = parmas;
+    const { triggerChange } = useSaveAndRedoActionType || {};
+
+    node && flowActionType?.removeNodes(node);
+    edge && flowActionType?.removeEdges(edge);
+
+    triggerChange?.();
+  };
+
+  const deleteElements = (params: HandleContextMenuActionParamsType) => {
+    const { flowActionType, useSaveAndRedoActionType } = params;
+    flowActionType?.removeNodes(unref(flowActionType.getSelectedNodes));
+
+    useSaveAndRedoActionType?.triggerChange?.();
+  };
+
+  const selectCopy = (params: HandleContextMenuActionParamsType) => {
+    const { flowActionType } = params;
+    const { getAddNodesParams } = useAddNodes();
+    const { getAddedgesParams } = useAddEdges();
+
+    const edges = unref(flowActionType?.getSelectedEdges)?.map((edge) =>
+      getAddedgesParams(
+        {
+          source: edge.source,
+          target: edge.target,
+          sourceHandle: edge.sourceHandle,
+          targetHandle: edge.targetHandle,
+        },
+        toRaw(unref(edge.data as EdgeData)?.data)
+      )
+    );
+
+    const nodes = unref(flowActionType?.getSelectedNodes)?.map((node) => {
+      const { id: oldId } = node;
+      const newId = buildUUID();
+
+      for (const connection of edges || []) {
+        if (connection.source.includes(oldId)) {
+          connection.source = newId;
+          connection.sourceHandle = connection.sourceHandle?.replaceAll(oldId, newId);
+          continue;
+        }
+
+        if (connection.target.includes(oldId)) {
+          connection.target = newId;
+          connection.targetHandle = connection.targetHandle?.replaceAll(oldId, newId);
+        }
+      }
+
+      return getAddNodesParams(node.position, toRaw(unref(node.data)), { id: newId });
+    });
+
+    const originRect = getElementsCenter(unref(flowActionType?.getSelectedNodes) || []);
+
+    setRuleNodeCache({ nodes, edges, ...originRect });
+  };
+
+  const applyChange = (params: HandleContextMenuActionParamsType) => {
+    const { useSaveAndRedoActionType, flowActionType } = params;
+
+    useSaveAndRedoActionType?.handleApplyChange(flowActionType!);
+  };
+
+  const undoChange = (params: HandleContextMenuActionParamsType) => {
+    const { useSaveAndRedoActionType, flowActionType } = params;
+
+    useSaveAndRedoActionType?.handleRedoChange(flowActionType!);
+  };
+
+  const handleContextMenuAction = (params: HandleContextMenuActionParamsType) => {
+    const { menuType } = params;
+
+    const handlerMapping = {
+      [RuleContextMenuEnum.COPY]: copy,
+      [RuleContextMenuEnum.PASTE]: paste,
+      [RuleContextMenuEnum.SELECT_ALL]: selectAll,
+      [RuleContextMenuEnum.UNSELECTED]: unselect,
+      [RuleContextMenuEnum.DELETE]: deleteElement,
+      [RuleContextMenuEnum.DELETE_SELECT]: deleteElements,
+      [RuleContextMenuEnum.SELECT_COPY]: selectCopy,
+      [RuleContextMenuEnum.APPLY_CHANGE]: applyChange,
+      [RuleContextMenuEnum.UNDO_CHANGE]: undoChange,
+    };
+
+    if (handlerMapping[menuType]) {
+      handlerMapping[menuType]?.(params);
+    }
+  };
+
+  return {
+    handleContextMenuAction,
+  };
+}

+import { NodeMouseEvent } from '@vue-flow/core';
+import { useContextMenu } from '../src/components/RuleChainContextMenu';
+import { RuleChainContextMenuItemType } from '../src/components/RuleChainContextMenu/index.type';
+import { ElementsTypeEnum } from '../enum';
+import { checkHasCacheRuleNode } from './useRuleCopyPaste';
+
+export enum RuleContextMenuEnum {
+  DETAIL = 'DETAIL',
+  COPY = 'COPY',
+  DELETE = 'DELETE',
+
+  SELECT_COPY = 'SELECT_COPY',
+  PASTE = 'PASTE',
+  UNSELECTED = 'UNSELECTED',
+  DELETE_SELECT = 'DELETE_SELECT',
+  APPLY_CHANGE = 'APPLY_CHANGE',
+  UNDO_CHANGE = 'UNDO_CHANGE',
+
+  SELECT_ALL = 'SELECT_ALL',
+}
+
+export enum RuleContextMenuNameEnum {
+  DETAIL = '详情',
+  COPY = '复制',
+  DELETE = '删除',
+
+  SELECT_COPY = '选择副本',
+  PASTE = '粘贴',
+  UNSELECTED = '取消选择',
+  DELETE_SELECT = '删除选定',
+  APPLY_CHANGE = '应用更改',
+  UNDO_CHANGE = '撤销更改',
+
+  SELECT_ALL = '选择全部',
+}
+
+export enum RuleChainContextMenuIconEnum {
+  DETAIL = 'material-symbols:menu',
+  COPY = 'material-symbols:content-copy',
+  DELETE = 'material-symbols:delete',
+
+  SELECT_COPY = 'material-symbols:content-copy',
+  PASTE = 'material-symbols:content-paste',
+  UNSELECTED = 'material-symbols:tab-unselected',
+  DELETE_SELECT = 'material-symbols:close',
+  APPLY_CHANGE = 'material-symbols:done',
+  UNDO_CHANGE = 'material-symbols:close',
+
+  SELECT_ALL = 'material-symbols:select-all',
+
+  // LINK = 'material-symbols:trending-flat',
+}
+
+export enum RuleChainContextMenuShortcutKeyEnum {
+  DELETE = 'Ctrl(⌘) X',
+
+  SELECT_COPY = 'Ctrl(⌘) C',
+  PASTE = 'Ctrl(⌘) V',
+  UNSELECTED = 'Esc',
+  DELETE_SELECT = 'Del',
+  APPLY_CHANGE = 'Ctrl(⌘) S',
+  UNDO_CHANGE = 'Ctrl(⌘) Z',
+
+  SELECT_ALL = 'Ctrl(⌘) A',
+}
+
+const getMenuItem = (key: RuleContextMenuEnum, handler: Fn, disabled = false) => {
+  return {
+    key,
+    label: RuleContextMenuNameEnum[key],
+    icon: RuleChainContextMenuIconEnum[key],
+    shortcutKey: RuleChainContextMenuShortcutKeyEnum[key],
+    handler: () => handler?.(key),
+    disabled,
+  } as RuleChainContextMenuItemType;
+};
+
+const getDivider = (): RuleChainContextMenuItemType => ({ divider: true });
+
+export function useCreateRuleChainContextMenu() {
+  const [createContextMenu] = useContextMenu();
+
+  const createNodeContextMenu = (params: NodeMouseEvent): Promise<RuleContextMenuEnum | ''> => {
+    return new Promise(async (resolve) => {
+      await createContextMenu(params, {
+        items: [
+          getMenuItem(RuleContextMenuEnum.DETAIL, resolve),
+          getMenuItem(RuleContextMenuEnum.COPY, resolve),
+          getMenuItem(RuleContextMenuEnum.DELETE, resolve),
+        ],
+      });
+      resolve('');
+    });
+  };
+
+  const createElementsSelectedContextMenu = (
+    params: NodeMouseEvent,
+    changeMarker: boolean,
+    elementsType: ElementsTypeEnum.NODE = ElementsTypeEnum.NODE
+  ): Promise<RuleContextMenuEnum | ''> => {
+    return new Promise(async (resolve) => {
+      await createContextMenu(params, {
+        items: [
+          ...(elementsType === ElementsTypeEnum.NODE
+            ? [getMenuItem(RuleContextMenuEnum.SELECT_COPY, resolve)]
+            : []),
+          getMenuItem(RuleContextMenuEnum.PASTE, resolve, !checkHasCacheRuleNode()),
+          getDivider(),
+          getMenuItem(RuleContextMenuEnum.UNSELECTED, resolve),
+          getMenuItem(RuleContextMenuEnum.DELETE_SELECT, resolve),
+          getDivider(),
+          getMenuItem(RuleContextMenuEnum.APPLY_CHANGE, resolve, !changeMarker),
+          getMenuItem(RuleContextMenuEnum.UNDO_CHANGE, resolve, !changeMarker),
+        ],
+      });
+      resolve('');
+    });
+  };
+
+  const createPanelContextMenu = (
+    params: NodeMouseEvent,
+    changeMarker: boolean
+  ): Promise<RuleContextMenuEnum | ''> => {
+    return new Promise(async (resolve) => {
+      await createContextMenu(params, {
+        items: [
+          getMenuItem(RuleContextMenuEnum.PASTE, resolve, !checkHasCacheRuleNode()),
+          getMenuItem(RuleContextMenuEnum.SELECT_ALL, resolve),
+          getMenuItem(RuleContextMenuEnum.APPLY_CHANGE, resolve, !changeMarker),
+          getMenuItem(RuleContextMenuEnum.UNDO_CHANGE, resolve, !changeMarker),
+        ],
+      });
+      resolve('');
+    });
+  };
+
+  const createEdgeContextMenu = (
+    params: NodeMouseEvent,
+    isInput = false
+  ): Promise<RuleContextMenuEnum | ''> => {
+    return new Promise(async (resolve) => {
+      await createContextMenu(params, {
+        items: [
+          ...(isInput ? [] : [getMenuItem(RuleContextMenuEnum.DETAIL, resolve)]),
+          getMenuItem(RuleContextMenuEnum.DELETE, resolve),
+        ],
+      });
+      resolve('');
+    });
+  };
+  return {
+    createNodeContextMenu,
+    createElementsSelectedContextMenu,
+    createPanelContextMenu,
+    createEdgeContextMenu,
+  };
+}

+import { Edge, Node } from '@vue-flow/core';
+import { RULE_NODE_KEY, RULE_NODE_LOCAL_CACHE_KEY } from '/@/enums/cacheEnum';
+import { createLocalStorage } from '/@/utils/cache';
+
+const ruleNodeStorage = createLocalStorage({ prefixKey: RULE_NODE_LOCAL_CACHE_KEY });
+
+interface RuleNodeCacheType {
+  nodes?: Node[];
+  edges?: Edge[];
+  originX?: number;
+  originY?: number;
+}
+
+export const setRuleNodeCache = ({
+  nodes = [],
+  edges = [],
+  originX,
+  originY,
+}: RuleNodeCacheType) => {
+  ruleNodeStorage.set(RULE_NODE_KEY, {
+    nodes,
+    edges,
+    originX,
+    originY,
+  });
+};
+
+export const getRuleNodeCache = (): RuleNodeCacheType => ruleNodeStorage.get(RULE_NODE_KEY);
+
+export const checkHasCacheRuleNode = () => !!getRuleNodeCache();
+
+function initRuleNodeStorage() {
+  const value = ruleNodeStorage.get(RULE_NODE_KEY);
+  value && ruleNodeStorage.set(RULE_NODE_KEY, value);
+}
+
+initRuleNodeStorage();

@@ -4,29 +4,38 @@ import type {
   NodeComponent,
   NodeComponent,
   ValidConnectionFunc,
   ValidConnectionFunc,
   GraphNode,
   GraphNode,
+  NodeMouseEvent,
+  GraphEdge,
+  EdgeMouseEvent,
 } from '@vue-flow/core';
 } from '@vue-flow/core';
-import { ConnectionLineType, SelectionMode, useVueFlow } from '@vue-flow/core';
 import type { Ref } from 'vue';
 import type { Ref } from 'vue';
-import { markRaw, toRaw, unref } from 'vue';
-import { isFunction } from 'lodash-es';
 import type { CreateNodeModal } from '../src/components/CreateNodeModal';
 import type { CreateNodeModal } from '../src/components/CreateNodeModal';
-import { EdgeTypeEnum, ElementsTypeEnum, NodeTypeEnum } from '../enum';
-import { BasicEdge, BasicNode } from '../src/components';
 import type { EdgeData, NodeData } from '../types/node';
 import type { EdgeData, NodeData } from '../types/node';
 import type { CreateEdgeModal } from '../src/components/CreateEdgeModal';
 import type { CreateEdgeModal } from '../src/components/CreateEdgeModal';
+import { BasicEdge, BasicNode } from '../src/components';
+import { EdgeTypeEnum, ElementsTypeEnum, NodeTypeEnum } from '../enum';
+import { markRaw, toRaw, unref } from 'vue';
+import { isFunction } from 'lodash-es';
+import { ConnectionLineType, SelectionMode, useVueFlow } from '@vue-flow/core';
 import { isInputHandle, isOutputHandle } from '../utils';
 import { isInputHandle, isOutputHandle } from '../utils';
 import { useAddEdges } from './useAddEdges';
 import { useAddEdges } from './useAddEdges';
 import { UpdateNodeDrawer } from '../src/components/UpdateNodeDrawer';
 import { UpdateNodeDrawer } from '../src/components/UpdateNodeDrawer';
 import { UpdateEdgeDrawer } from '../src/components/UpdateEdgeDrawer';
 import { UpdateEdgeDrawer } from '../src/components/UpdateEdgeDrawer';
 import { isNumber } from '/@/utils/is';
 import { isNumber } from '/@/utils/is';
+import { RuleContextMenuEnum, useCreateRuleChainContextMenu } from './useRuleChainContextMenu';
+import { RuleChainDetail } from '../types/ruleNode';
+import { useContextMenuAction } from './useContextMenuAction';
+import { useSaveAndRedo } from './useSaveAndRedo';
+import { EntryCategoryComponentEnum } from '../enum/category';
 
 
 interface UseRuleFlowOptionsType {
 interface UseRuleFlowOptionsType {
   id: string;
   id: string;
+  ruleChainDetail: Ref<RuleChainDetail | undefined>;
   createNodeModalActionType: Ref<Nullable<InstanceType<typeof CreateNodeModal>>>;
   createNodeModalActionType: Ref<Nullable<InstanceType<typeof CreateNodeModal>>>;
   createEdgeModalActionType: Ref<Nullable<InstanceType<typeof CreateEdgeModal>>>;
   createEdgeModalActionType: Ref<Nullable<InstanceType<typeof CreateEdgeModal>>>;
   updateNodeDrawerActionType: Ref<Nullable<InstanceType<typeof UpdateNodeDrawer>>>;
   updateNodeDrawerActionType: Ref<Nullable<InstanceType<typeof UpdateNodeDrawer>>>;
   updateEdgeDrawerActionType: Ref<Nullable<InstanceType<typeof UpdateEdgeDrawer>>>;
   updateEdgeDrawerActionType: Ref<Nullable<InstanceType<typeof UpdateEdgeDrawer>>>;
-  triggerChange: () => void;
+  useSaveAndRedoActionType: ReturnType<typeof useSaveAndRedo>;
 }
 }
 
 
 const validateInputAndOutput: ValidConnectionFunc = (connection: Connection) => {
 const validateInputAndOutput: ValidConnectionFunc = (connection: Connection) => {
@@ -40,12 +49,15 @@ const validateInputAndOutput: ValidConnectionFunc = (connection: Connection) =>
 export function useRuleFlow(options: UseRuleFlowOptionsType) {
 export function useRuleFlow(options: UseRuleFlowOptionsType) {
   const {
   const {
     id,
     id,
+    ruleChainDetail,
     createEdgeModalActionType,
     createEdgeModalActionType,
     updateEdgeDrawerActionType,
     updateEdgeDrawerActionType,
     updateNodeDrawerActionType,
     updateNodeDrawerActionType,
-    triggerChange,
+    useSaveAndRedoActionType,
   } = options;
   } = options;
 
 
+  const { triggerChange } = useSaveAndRedoActionType;
+
   const flowActionType = useVueFlow({
   const flowActionType = useVueFlow({
     id,
     id,
     maxZoom: 1,
     maxZoom: 1,
@@ -96,6 +108,9 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
     onNodeDoubleClick,
     onNodeDoubleClick,
     onEdgeDoubleClick,
     onEdgeDoubleClick,
     onNodeDragStop,
     onNodeDragStop,
+    onNodeContextMenu,
+    onEdgeContextMenu,
+    onPaneContextMenu,
   } = flowActionType;
   } = flowActionType;
 
 
   const { getAddedgesParams } = useAddEdges();
   const { getAddedgesParams } = useAddEdges();
@@ -125,6 +140,119 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
   });
   });
 
 
   onNodeDoubleClick(async ({ node }) => {
   onNodeDoubleClick(async ({ node }) => {
+    handleUpdateNode(node);
+  });
+
+  onEdgeDoubleClick(async ({ edge }) => {
+    handleUpdateEdge(edge);
+  });
+
+  onNodeDragStop(() => {
+    triggerChange();
+  });
+
+  const {
+    createNodeContextMenu,
+    createElementsSelectedContextMenu,
+    createEdgeContextMenu,
+    createPanelContextMenu,
+  } = useCreateRuleChainContextMenu();
+
+  const { handleContextMenuAction } = useContextMenuAction();
+
+  onNodeContextMenu(async (params) => {
+    const menuType = params.node.selected
+      ? await createElementsSelectedContextMenu(
+          params,
+          unref(useSaveAndRedoActionType.changeMarker)
+        )
+      : await createNodeContextMenu(params);
+
+    if (menuType) {
+      if (menuType === RuleContextMenuEnum.DETAIL) {
+        handleUpdateNode(params.node);
+        return;
+      }
+
+      handleContextMenuAction({
+        menuType,
+        flowActionType,
+        event: params.event,
+        node: params.node,
+        useSaveAndRedoActionType,
+      });
+    }
+  });
+
+  onEdgeContextMenu(async (params) => {
+    const isInputNode =
+      (params.edge.sourceNode.data as NodeData).config?.key === EntryCategoryComponentEnum.INPUT;
+    const menuType = await createEdgeContextMenu(
+      getCreateEdgeContextMenuParams(params),
+      isInputNode
+    );
+
+    if (menuType) {
+      if (menuType === RuleContextMenuEnum.DETAIL) {
+        handleUpdateEdge(params.edge);
+        return;
+      }
+
+      handleContextMenuAction({
+        menuType,
+        flowActionType,
+        event: params.event,
+        useSaveAndRedoActionType,
+        edge: params.edge,
+      });
+    }
+  });
+
+  onPaneContextMenu(async (params) => {
+    const menuType = unref(flowActionType.getSelectedElements).length
+      ? await createElementsSelectedContextMenu(
+          getCreatePanelContextMenuParams(params),
+          unref(useSaveAndRedoActionType.changeMarker)
+        )
+      : await createPanelContextMenu(
+          getCreatePanelContextMenuParams(params),
+          unref(useSaveAndRedoActionType.changeMarker)
+        );
+
+    if (menuType) {
+      handleContextMenuAction({
+        menuType,
+        flowActionType,
+        event: params,
+        useSaveAndRedoActionType,
+      });
+    }
+  });
+
+  /**
+   * @description 验证是否有连接label
+   * @param sourceData
+   * @returns
+   */
+  function validateHasLabelConnection(sourceData: NodeData) {
+    return !!sourceData?.config?.configurationDescriptor.nodeDefinition?.relationTypes?.length;
+  }
+
+  function handleMaxConnectionPoint(sourceNode?: GraphNode) {
+    if (!sourceNode) return;
+
+    const maxConnectionPoint = unref(sourceNode).data?.config?.maxConnectionPoint;
+
+    if (!maxConnectionPoint || !isNumber(maxConnectionPoint)) return;
+
+    const sourceId = sourceNode.id;
+    const connectionPool = unref(getEdges).filter((item) => item.source === sourceId);
+    if (connectionPool.length >= maxConnectionPoint && connectionPool[0]) {
+      removeEdges(connectionPool[0].id);
+    }
+  }
+
+  async function handleUpdateNode(node: GraphNode) {
     if ((node.data as NodeData).config?.disableAction) return;
     if ((node.data as NodeData).config?.disableAction) return;
     const { flag, data } =
     const { flag, data } =
       (await unref(updateNodeDrawerActionType)?.open(
       (await unref(updateNodeDrawerActionType)?.open(
@@ -137,9 +265,10 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
 
 
     const currentNode = findNode(node.id);
     const currentNode = findNode(node.id);
     (currentNode!.data as NodeData).data = data;
     (currentNode!.data as NodeData).data = data;
-  });
+    triggerChange();
+  }
 
 
-  onEdgeDoubleClick(async ({ edge }) => {
+  async function handleUpdateEdge(edge: GraphEdge) {
     if (!validateHasLabelConnection(edge.sourceNode.data)) return;
     if (!validateHasLabelConnection(edge.sourceNode.data)) return;
 
 
     if ((edge.sourceNode.data as NodeData).config?.disableAction) return;
     if ((edge.sourceNode.data as NodeData).config?.disableAction) return;
@@ -156,33 +285,48 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
     const currentEdge = findEdge(edge.id);
     const currentEdge = findEdge(edge.id);
 
 
     (currentEdge!.data as EdgeData).data = toRaw(unref(data));
     (currentEdge!.data as EdgeData).data = toRaw(unref(data));
-  });
-
-  onNodeDragStop(() => {
-    triggerChange();
-  });
 
 
-  /**
-   * @description 验证是否有连接label
-   * @param sourceData
-   * @returns
-   */
-  function validateHasLabelConnection(sourceData: NodeData) {
-    return !!sourceData?.config?.configurationDescriptor.nodeDefinition?.relationTypes?.length;
+    triggerChange?.();
   }
   }
 
 
-  function handleMaxConnectionPoint(sourceNode?: GraphNode) {
-    if (!sourceNode) return;
-
-    const maxConnectionPoint = unref(sourceNode).data?.config?.maxConnectionPoint;
-
-    if (!maxConnectionPoint || !isNumber(maxConnectionPoint)) return;
+  function getCreatePanelContextMenuParams(params: Event) {
+    return {
+      event: params as MouseEvent,
+      node: {
+        data: {
+          data: { name: '规则链' },
+          config: {
+            name: unref(ruleChainDetail)?.name,
+            backgroundColor: '#aac7e4',
+            configurationDescriptor: {
+              nodeDefinition: {
+                icon: 'material-symbols:settings-ethernet',
+              },
+            },
+          },
+        },
+      },
+    } as NodeMouseEvent;
+  }
 
 
-    const sourceId = sourceNode.id;
-    const connectionPool = unref(getEdges).filter((item) => item.source === sourceId);
-    if (connectionPool.length >= maxConnectionPoint && connectionPool[0]) {
-      removeEdges(connectionPool[0].id);
-    }
+  function getCreateEdgeContextMenuParams(params: EdgeMouseEvent) {
+    return {
+      event: params.event as MouseEvent,
+      node: {
+        data: {
+          data: { name: '链接' },
+          config: {
+            name: unref(params.edge.data as EdgeData)?.data?.type?.join(' / '),
+            backgroundColor: '#aac7e4',
+            configurationDescriptor: {
+              nodeDefinition: {
+                icon: 'material-symbols:trending-flat',
+              },
+            },
+          },
+        },
+      },
+    } as NodeMouseEvent;
   }
   }
 
 
   return { flowActionType };
   return { flowActionType };

@@ -3,11 +3,12 @@ import { ComputedRef, computed, ref, unref } from 'vue';
 import { BasicNodeBindData, EdgeData, NodeData } from '../types/node';
 import { BasicNodeBindData, EdgeData, NodeData } from '../types/node';
 import { EntryCategoryComponentEnum } from '../enum/category';
 import { EntryCategoryComponentEnum } from '../enum/category';
 import { useBasicDataTransform } from './useBasicDataTransform';
 import { useBasicDataTransform } from './useBasicDataTransform';
-import { getRuleChainData, saveRuleChainData } from '/@/api/ruleDesigner';
-import { ConnectionItemType, RuleChainType } from '../types/ruleNode';
+import { getRuleChainData, getRuleChainDetail, saveRuleChainData } from '/@/api/ruleDesigner';
+import { ConnectionItemType, RuleChainDetail, RuleChainType } from '../types/ruleNode';
 import { useInputNode } from './useInputNode';
 import { useInputNode } from './useInputNode';
 import { buildUUID } from '/@/utils/uuid';
 import { buildUUID } from '/@/utils/uuid';
 import { useRoute } from 'vue-router';
 import { useRoute } from 'vue-router';
+import { RuleChainEntityType } from '../enum/entity';
 
 
 const ignoreNodeKeys: string[] = [EntryCategoryComponentEnum.INPUT];
 const ignoreNodeKeys: string[] = [EntryCategoryComponentEnum.INPUT];
 
 
@@ -24,6 +25,8 @@ export function useSaveAndRedo() {
 
 
   const getRuleChainId = computed(() => (route.params as Record<'id', string>).id);
   const getRuleChainId = computed(() => (route.params as Record<'id', string>).id);
 
 
+  const ruleChainDetail = ref<RuleChainDetail>();
+
   const { mergeData, deconstructionData } = useBasicDataTransform();
   const { mergeData, deconstructionData } = useBasicDataTransform();
 
 
   const triggerChange = () => {
   const triggerChange = () => {
@@ -73,7 +76,16 @@ export function useSaveAndRedo() {
 
 
       const data = nodeData.data;
       const data = nodeData.data;
 
 
-      nodes.push(mergeData(data, nodeData, node));
+      nodes.push(
+        Object.assign(
+          mergeData(data, nodeData, node),
+          nodeData.created
+            ? ({
+                id: { id: node.id, entityType: RuleChainEntityType.RULE_NODE },
+              } as BasicNodeBindData)
+            : {}
+        )
+      );
     }
     }
 
 
     return nodes;
     return nodes;
@@ -118,6 +130,10 @@ export function useSaveAndRedo() {
     resetChange();
     resetChange();
   };
   };
 
 
+  async function getCurrentRuleChainDetail() {
+    ruleChainDetail.value = await getRuleChainDetail(unref(getRuleChainId));
+  }
+
   async function handleSaveRuleChain(
   async function handleSaveRuleChain(
     connections: ConnectionItemType[],
     connections: ConnectionItemType[],
     nodes: BasicNodeBindData[],
     nodes: BasicNodeBindData[],
@@ -125,12 +141,13 @@ export function useSaveAndRedo() {
   ) {
   ) {
     try {
     try {
       loading.value = true;
       loading.value = true;
+
       const data = await saveRuleChainData({
       const data = await saveRuleChainData({
         connections,
         connections,
         nodes,
         nodes,
         firstNodeIndex,
         firstNodeIndex,
         ruleChainId: {
         ruleChainId: {
-          entityType: 'RULE_CHAIN',
+          entityType: RuleChainEntityType.RULE_CHAIN,
           id: unref(getRuleChainId),
           id: unref(getRuleChainId),
         },
         },
       });
       });
@@ -188,10 +205,12 @@ export function useSaveAndRedo() {
     loading,
     loading,
     debugMarker,
     debugMarker,
     changeMarker,
     changeMarker,
+    ruleChainDetail,
     triggerChange,
     triggerChange,
     handleApplyChange,
     handleApplyChange,
     handleRedoChange,
     handleRedoChange,
     handleRemoveDebug,
     handleRemoveDebug,
     getCurrentPageMetaData,
     getCurrentPageMetaData,
+    getCurrentRuleChainDetail,
   };
   };
 }
 }

@@ -40,23 +40,28 @@
 
 
   const elements = ref([]);
   const elements = ref([]);
 
 
+  const useSaveAndRedoActionType = useSaveAndRedo();
+
   const {
   const {
     loading,
     loading,
     changeMarker,
     changeMarker,
+    ruleChainDetail,
     getCurrentPageMetaData,
     getCurrentPageMetaData,
     triggerChange,
     triggerChange,
     handleApplyChange,
     handleApplyChange,
     handleRedoChange,
     handleRedoChange,
     handleRemoveDebug,
     handleRemoveDebug,
-  } = useSaveAndRedo();
+    getCurrentRuleChainDetail,
+  } = useSaveAndRedoActionType;
 
 
   const { flowActionType } = useRuleFlow({
   const { flowActionType } = useRuleFlow({
     id: getId,
     id: getId,
+    ruleChainDetail,
     createNodeModalActionType,
     createNodeModalActionType,
     createEdgeModalActionType,
     createEdgeModalActionType,
     updateEdgeDrawerActionType,
     updateEdgeDrawerActionType,
     updateNodeDrawerActionType,
     updateNodeDrawerActionType,
-    triggerChange,
+    useSaveAndRedoActionType,
   });
   });
 
 
   const { handleOnDragOver, handleOnDrop } = useDragCreate({
   const { handleOnDragOver, handleOnDrop } = useDragCreate({
@@ -79,12 +84,12 @@
   );
   );
 
 
   const handleDeleteSelectionElements = () => {
   const handleDeleteSelectionElements = () => {
-    flowActionType.removeEdges(unref(flowActionType.getSelectedEdges));
     flowActionType.removeNodes(unref(flowActionType.getSelectedNodes));
     flowActionType.removeNodes(unref(flowActionType.getSelectedNodes));
   };
   };
 
 
   onMounted(() => {
   onMounted(() => {
     getCurrentPageMetaData(flowActionType);
     getCurrentPageMetaData(flowActionType);
+    getCurrentRuleChainDetail();
   });
   });
 
 
   createFlowContext({
   createFlowContext({

@@ -12,7 +12,6 @@
   const ROUTER = useRouter();
   const ROUTER = useRouter();
 
 
   const handleClick = () => {
   const handleClick = () => {
-    console.log(props);
     const { data } = props.nodeProps?.data || ({} as NodeData);
     const { data } = props.nodeProps?.data || ({} as NodeData);
     const { configuration } = (data || {}) as { configuration: Record<'ruleChainId', string> };
     const { configuration } = (data || {}) as { configuration: Record<'ruleChainId', string> };
     if (configuration.ruleChainId) {
     if (configuration.ruleChainId) {
@@ -22,12 +21,13 @@
 </script>
 </script>
 
 
 <template>
 <template>
-  <div class="w-full h-6 flex justify-end" @click="handleClick">
+  <div class="w-full h-6 flex justify-end">
     <Tooltip color="#fff">
     <Tooltip color="#fff">
       <template #title>
       <template #title>
         <span class="text-slate-500 italic">打开规则链</span>
         <span class="text-slate-500 italic">打开规则链</span>
       </template>
       </template>
       <Icon
       <Icon
+        @click="handleClick"
         icon="material-symbols:login"
         icon="material-symbols:login"
         class="cursor-pointer svg:text-lg svg:text-light-50 border-1 border-light-50 bg-purple-400 hover:bg-purple-500 rounded"
         class="cursor-pointer svg:text-lg svg:text-light-50 border-1 border-light-50 bg-purple-400 hover:bg-purple-500 rounded"
       />
       />

@@ -29,6 +29,11 @@
     return config?.name;
     return config?.name;
   });
   });
 
 
+  const getIconUrl = computed(() => {
+    const { iconUrl } = unref(getNodeDefinition);
+    return iconUrl;
+  });
+
   const getIcon = computed(() => {
   const getIcon = computed(() => {
     const { icon } = unref(getNodeDefinition);
     const { icon } = unref(getNodeDefinition);
     const { category } = unref(getData);
     const { category } = unref(getData);
@@ -64,10 +69,11 @@
     </template>
     </template>
     <main
     <main
       class="basic-node-hover flex items-center w-44 h-12 rounded border px-4 py-2 border-gray-700 dark:text-light-50"
       class="basic-node-hover flex items-center w-44 h-12 rounded border px-4 py-2 border-gray-700 dark:text-light-50"
-      :style="{ backgroundColor: getBackgroundColor }"
+      :style="{ backgroundColor: getBackgroundColor, outline: selected ? '3px solid red' : 'none' }"
     >
     >
       <div>
       <div>
-        <Icon class="text-2xl dark:text-light-50" :icon="getIcon" />
+        <Icon v-if="!getIconUrl" class="text-2xl dark:text-light-50" :icon="getIcon" />
+        <img v-if="getIconUrl" :src="getIconUrl" class="w-4 h-4" />
       </div>
       </div>
       <BasicToolbar v-if="!getData.config?.disableAction" v-bind="$props" />
       <BasicToolbar v-if="!getData.config?.disableAction" v-bind="$props" />
       <div class="flex text-xs flex-col ml-2 text-left truncate">
       <div class="flex text-xs flex-col ml-2 text-left truncate">

+import { NodeMouseEvent } from '@vue-flow/core';
+import ContextMenuVue from './index.vue';
+import { isClient } from '/@/utils/is';
+import { createVNode, render, getCurrentInstance, onUnmounted, toRaw, unref } from 'vue';
+
+const menuManager: {
+  domList: Element[];
+  resolve: Fn;
+} = {
+  domList: [],
+  resolve: () => {},
+};
+
+const createContextMenu = function (
+  options: NodeMouseEvent,
+  params?: InstanceType<typeof ContextMenuVue>['$props']
+) {
+  const { event } = options || {};
+
+  if (!(params?.items && params?.items.length)) return;
+
+  event && event?.preventDefault();
+
+  if (!isClient) {
+    return;
+  }
+
+  return new Promise((resolve) => {
+    const body = document.body;
+
+    const container = document.createElement('div');
+    const propsData: Partial<InstanceType<typeof ContextMenuVue>['$props']> = {
+      ...params,
+    };
+
+    if (options.event) {
+      const { clientX, clientY } = options.event as MouseEvent;
+      propsData.axis = { x: clientX, y: clientY };
+    }
+
+    if (options.node) {
+      propsData.nodeData = toRaw(unref(options.node.data));
+    }
+
+    const vm = createVNode(ContextMenuVue, propsData);
+    render(vm, container);
+
+    const handleClick = function () {
+      menuManager.resolve('');
+    };
+
+    menuManager.domList.push(container);
+
+    const remove = function () {
+      menuManager.domList.forEach((dom: Element) => {
+        try {
+          dom && body.removeChild(dom);
+        } catch (error) {}
+      });
+      body.removeEventListener('click', handleClick);
+      body.removeEventListener('scroll', handleClick);
+    };
+
+    menuManager.resolve = function (arg) {
+      remove();
+      resolve(arg);
+    };
+    remove();
+    body.appendChild(container);
+    body.addEventListener('click', handleClick);
+    body.addEventListener('scroll', handleClick);
+  });
+};
+
+const destroyContextMenu = function () {
+  if (menuManager) {
+    menuManager.resolve('');
+    menuManager.domList = [];
+  }
+};
+
+export function useContextMenu(authRemove = true) {
+  if (getCurrentInstance() && authRemove) {
+    onUnmounted(() => {
+      destroyContextMenu();
+    });
+  }
+  return [createContextMenu, destroyContextMenu];
+}

+export { default as RuleChainContextMenu } from './index.vue';
+export { useContextMenu } from './createContextMenu';

+export interface RuleChainContextMenuItemType {
+  icon?: string;
+  key?: string;
+  label?: string;
+  shortcutKey?: string;
+  divider?: boolean;
+  disabled?: boolean;
+  handler?: Fn;
+}

+<script setup lang="ts">
+  import { computed, CSSProperties, unref } from 'vue';
+  import { NodeData } from '../../../types/node';
+  import { RuleChainContextMenuItemType } from './index.type';
+  import { Icon } from '/@/components/Icon';
+  import { Divider } from 'ant-design-vue';
+
+  const props = withDefaults(
+    defineProps<{
+      width?: number;
+      itemHeight?: number;
+      styles?: CSSProperties;
+      axis?: Record<'x' | 'y', number>;
+      items?: RuleChainContextMenuItemType[];
+      nodeData?: NodeData;
+    }>(),
+    {
+      width: 320,
+      itemHeight: 48,
+      axis: () => ({ x: 0, y: 0 }),
+      items: () => [],
+      nodeData: () => ({}),
+    }
+  );
+
+  const getMenuHeight = computed(() => {
+    const { items, itemHeight } = props;
+    let dividerNumber = 0;
+    let menuNumber = 1;
+    for (const item of items) {
+      if (item.divider) dividerNumber++;
+      else menuNumber++;
+    }
+
+    return itemHeight * menuNumber + dividerNumber + 8;
+  });
+
+  const getStyle = computed((): CSSProperties => {
+    const { axis, styles, width } = props;
+    const { x, y } = axis;
+    const menuHeight = unref(getMenuHeight);
+    const menuWidth = width;
+    const body = document.body;
+
+    const left = body.clientWidth < x + menuWidth ? x - menuWidth : x;
+    const top = body.clientHeight < y + menuHeight ? y - menuHeight : y;
+
+    return {
+      ...styles,
+      position: 'absolute',
+      width: `${width}px`,
+      left: `${left + 1}px`,
+      top: `${top + 1}px`,
+    };
+  });
+
+  const getNodeIconUrl = computed(() => {
+    const { config } = props.nodeData;
+    const { configurationDescriptor } = config || {};
+    const { nodeDefinition } = configurationDescriptor || {};
+    const { iconUrl } = nodeDefinition || {};
+    return iconUrl;
+  });
+
+  const getNodeIcon = computed(() => {
+    const { nodeData } = props;
+    const { category, config } = nodeData;
+    const { icon: categoryIcon } = category || {};
+    const { configurationDescriptor } = config || {};
+    const { nodeDefinition } = configurationDescriptor || {};
+    const { icon } = nodeDefinition || {};
+
+    return categoryIcon || icon;
+  });
+
+  const getTitleBackgroundColor = computed(() => {
+    const { category, config } = props.nodeData;
+    const { backgroundColor: categoryBackgroundColor } = category || {};
+    const { backgroundColor } = config || {};
+    return categoryBackgroundColor || backgroundColor;
+  });
+</script>
+
+<template>
+  <div
+    :style="getStyle"
+    class="bg-light-50 shadow-lg shadow-dark-50 z-50 rounded-md overflow-hidden pb-2"
+  >
+    <div
+      v-if="nodeData"
+      :style="{ backgroundColor: getTitleBackgroundColor, height: `${itemHeight}px` }"
+      class="flex items-center p-2"
+    >
+      <Icon v-if="!getNodeIconUrl" :icon="getNodeIcon" class="svg:text-2xl" />
+      <img v-if="getNodeIconUrl" :src="getNodeIconUrl" class="w-6 h-6" />
+      <div class="ml-4">
+        <div class="font-medium">{{ nodeData.config?.name }}</div>
+        <div class="text-xs">{{ nodeData.data?.name }}</div>
+      </div>
+    </div>
+    <div>
+      <template v-for="item in items" :key="item.key">
+        <div
+          v-if="!item.divider"
+          :style="{ height: `${itemHeight}px` }"
+          class="px-4 flex items-center cursor-pointer hover:bg-neutral-100"
+          :class="item.disabled && 'disables'"
+          @click="(event) => !item.disabled && item?.handler?.(event)"
+        >
+          <Icon :icon="item.icon" class="svg:text-2xl" />
+          <div class="flex-auto px-4">{{ item.label }}</div>
+          <div class="flex items-center"> {{ item.shortcutKey }} </div>
+        </div>
+        <Divider v-if="item.divider" class="!m-0" />
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+  .disables {
+    @apply pointer-events-none text-gray-300;
+  }
+</style>

@@ -113,7 +113,11 @@
           <Empty v-if="!shadowComponent" description="未找到链接组件" />
           <Empty v-if="!shadowComponent" description="未找到链接组件" />
         </Spin>
         </Spin>
       </Tabs.TabPane>
       </Tabs.TabPane>
-      <Tabs.TabPane :tab="TabsPanelNameEnum[TabsPanelEnum.EVENT]" :key="TabsPanelEnum.EVENT">
+      <Tabs.TabPane
+        v-if="nodeData?.created"
+        :tab="TabsPanelNameEnum[TabsPanelEnum.EVENT]"
+        :key="TabsPanelEnum.EVENT"
+      >
         <BasicEvents :elementInfo="elementInfo" />
         <BasicEvents :elementInfo="elementInfo" />
       </Tabs.TabPane>
       </Tabs.TabPane>
       <Tabs.TabPane :tab="TabsPanelNameEnum[TabsPanelEnum.HELP]" :key="TabsPanelEnum.HELP">
       <Tabs.TabPane :tab="TabsPanelNameEnum[TabsPanelEnum.HELP]" :key="TabsPanelEnum.HELP">

@@ -58,3 +58,7 @@
 .vue-flow__nodesselection-rect, .vue-flow__selection{
 .vue-flow__nodesselection-rect, .vue-flow__selection{
   border-width: 3px;
   border-width: 3px;
 }
 }
+
+.vue-flow__nodesselection-rect { 
+  pointer-events: none;
+}

@@ -137,6 +137,7 @@ export interface NodeData<T = BasicNodeFormData> {
   category?: CategoryConfigType;
   category?: CategoryConfigType;
   config?: NodeItemConfigType;
   config?: NodeItemConfigType;
   data?: T;
   data?: T;
+  created?: boolean;
 }
 }
 
 
 export interface EdgeData {
 export interface EdgeData {

@@ -18,3 +18,20 @@ export interface ConnectionItemType {
   toIndex: number;
   toIndex: number;
   type: string;
   type: string;
 }
 }
+
+export interface RuleChainDetail {
+  id: Id;
+  createdTime: number;
+  additionalInfo: AdditionalInfo;
+  tenantId: Id;
+  name: Id;
+  type: string;
+  firstRuleNodeId: Id;
+  root: boolean;
+  debugMode: boolean;
+  configuration: any;
+}
+
+export interface AdditionalInfo {
+  description: string;
+}