Merge branch 'main_dev' of http://git.yunteng.com/yunteng/thingskit-front into feat/add-rule-chain

 import { RuleChainPaginationItemType } from './model/type';
 import { TBPaginationResult } from '/#/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 {
+  GET_RULE_CHAINS_DETAIL = '/ruleChain',
   SAVE = '/ruleChain/metadata',
   GET_RULE_CHAINES = '/ruleChains',
   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) => {
   return defHttp.get<RuleChainType>(
     {

@@ -66,7 +66,7 @@ export interface RoleReqDTO {
   name?: string;
   remark?: string;
   status: number;
-  menu: Array<string>;
+  menu: Array<string | number>;
 }
 
 export interface ChangeAccountParams {

@@ -34,6 +34,7 @@ enum Api {
   GetAllRoleList = '/role/find/list',
   BaseUserUrl = '/user',
   BaseOrganization = '/organization',
+  RESET_USER_PASSWORD = '/user/reset_password/',
 }
 
 export const getAccountInfo = (userId: string) =>
@@ -172,3 +173,12 @@ export const resetPassword = (params: ChangeAccountParams) =>
     url: Api.BaseUserUrl + '/reset',
     params: params,
   });
+
+/**
+ * 清除密码
+ * @param params
+ */
+export const clearUserPassword = (userId: string) =>
+  defHttp.post({
+    url: Api.RESET_USER_PASSWORD + userId,
+  });

@@ -38,6 +38,11 @@ export const PLATFORM = 'PLATFORM';
 export const PLATFORM_INFO_CACHE_KEY = 'PLATFORM_INFO';
 
 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 {
   SESSION,
   LOCAL,

@@ -16,4 +16,6 @@ export const PageEnum = {
   DEVICE_LIST: '/device/list',
 
   SHARE_PAGE: '/share/:viewType/:id/:publicId',
+
+  RULE_CHAIN_DETAIL: '/rule/chain/:id',
 };

@@ -102,7 +102,12 @@
 <template>
   <StepContainer>
     <div class="">设备文件</div>
-    <Upload.Dragger :fileList="fileList" :customRequest="handleParseFile" accept=".csv" name="file">
+    <Upload.Dragger
+      v-model:fileList="fileList"
+      :customRequest="handleParseFile"
+      accept=".csv"
+      name="file"
+    >
       <section class="cursor-pointer flex flex-col justify-center items-center">
         <InboxOutlined class="text-[4rem] !text-blue-400" />
         <div class="text-gray-500">点击上传或拖拽上传</div>

@@ -68,7 +68,7 @@ export const formSchemas: FormSchema[] = [
     componentProps: {
       placeholder: '请输入标识符',
     },
-    colProps: { span: 6 },
+    colProps: { span: 7 },
   },
   {
     field: 'eventType',
@@ -83,7 +83,7 @@ export const formSchemas: FormSchema[] = [
       labelField: 'itemText',
       valueField: 'itemValue',
     },
-    colProps: { span: 6 },
+    colProps: { span: 7 },
   },
   {
     field: 'dateRange',
@@ -94,6 +94,6 @@ export const formSchemas: FormSchema[] = [
         defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
       },
     },
-    colProps: { span: 6 },
+    colProps: { span: 7 },
   },
 ];

@@ -39,6 +39,7 @@
     type?: string;
     boolClose?: string;
     boolOpen?: string;
+    name?: string;
     detail: DeviceModelOfMatterAttrs;
   }
 
@@ -61,23 +62,27 @@
     showQuickJumper: true,
     hideOnSinglePage: false,
     showTotal: (total: number) => `共${total}条数据`,
-    onChange: handleChange,
-    onShowSizeChange: handleChange,
+    onChange: handleFilterChange,
+    onShowSizeChange: handleFilterChange,
   });
 
   const socketInfo = reactive({
     cmdId: 0,
     origin: `${socketUrl}${token}`,
     attr: undefined as string | undefined,
-    originData: [] as DataSource[],
     dataSource: [] as DataSource[],
     message: {} as ReceiveMessage['data'],
     attrKeys: [] as DeviceModelOfMatterAttrs[],
+    filterAttrKeys: [] as DeviceModelOfMatterAttrs[],
   });
 
   const getPaginationAttrkey = computed<DeviceModelOfMatterAttrs[]>(() => {
     const { current = 1, pageSize = 10 } = pagination;
-    return socketInfo.attrKeys.slice(current * pageSize - pageSize, current * pageSize);
+    return (
+      socketInfo.filterAttrKeys && socketInfo.filterAttrKeys.length
+        ? socketInfo.filterAttrKeys
+        : socketInfo.attrKeys
+    ).slice(current * pageSize - pageSize, current * pageSize);
   });
 
   function createUnsubscribeMessage(cmdId: number) {
@@ -107,6 +112,22 @@
     };
   });
 
+  const getFilterSendValue = computed(() => {
+    return {
+      tsSubCmds: [
+        {
+          entityType: 'DEVICE',
+          entityId: props.deviceDetail!.tbDeviceId,
+          scope: 'LATEST_TELEMETRY',
+          cmdId: socketInfo.cmdId,
+          keys: unref(getPaginationAttrkey)
+            .map((item) => item.identifier)
+            .join(','),
+        },
+      ],
+    };
+  });
+
   const [registerForm, { getFieldsValue }] = useForm({
     schemas: [
       {
@@ -125,20 +146,29 @@
     submitFunc: async () => {
       try {
         const { value } = getFieldsValue() || {};
-        if (!value) setTableData(socketInfo.originData);
-        const data = unref(socketInfo.originData).filter(
-          (item) => item.key?.includes(value) || item.value?.includes(value)
-        );
+
+        pagination.current = 1;
+
+        socketInfo.filterAttrKeys = value
+          ? unref(socketInfo.attrKeys).filter(
+              (item) =>
+                item.identifier?.toUpperCase().includes(value.toUpperCase()) ||
+                item.name?.toUpperCase().includes(value.toUpperCase())
+            )
+          : socketInfo.attrKeys;
+
         await nextTick();
-        socketInfo.dataSource = data;
 
-        setTableData(data);
+        handleFilterChange();
+
+        unref(mode) === EnumTableCardMode.TABLE && setTableData(socketInfo.dataSource);
       } catch (error) {}
     },
     resetFunc: async () => {
       try {
-        socketInfo.dataSource = socketInfo.originData;
-        setTableData(socketInfo.originData);
+        socketInfo.filterAttrKeys = [];
+        handleFilterChange();
+        unref(mode) === EnumTableCardMode.TABLE && setTableData(socketInfo.dataSource);
       } catch (error) {}
     },
   });
@@ -148,15 +178,19 @@
     showTableSetting: true,
     pagination: pagination as any,
     bordered: true,
+    resizeHeightOffset: 16,
     showIndexColumn: false,
   });
 
-  function handleChange(page: number, pageSize: number) {
+  function handleFilterChange(
+    page: number = pagination.current || 1,
+    pageSize: number = pagination.pageSize || 10
+  ) {
     pagination.current = page;
     pagination.pageSize = pageSize;
     send(JSON.stringify(createUnsubscribeMessage(socketInfo.cmdId)));
     socketInfo.cmdId = socketInfo.cmdId + 1;
-    send(JSON.stringify(unref(getSendValue)));
+    send(JSON.stringify(unref(getFilterSendValue)));
   }
 
   const [registerModal, { openModal }] = useModal();
@@ -166,8 +200,8 @@
   const switchMode = async (value: EnumTableCardMode) => {
     mode.value = value;
     await nextTick();
-    setTableData(socketInfo.originData);
-    socketInfo.dataSource = socketInfo.originData;
+    unref(mode) === EnumTableCardMode.TABLE && setTableData(socketInfo.dataSource);
+    socketInfo.filterAttrKeys = [];
   };
 
   const { createMessage } = useMessage();
@@ -190,10 +224,15 @@
   };
 
   const setDataSource = () => {
-    socketInfo.originData = socketInfo.dataSource = socketInfo.attrKeys.map((item) => {
+    socketInfo.dataSource = (
+      socketInfo.filterAttrKeys && socketInfo.filterAttrKeys.length
+        ? socketInfo.filterAttrKeys
+        : socketInfo.attrKeys
+    ).map((item) => {
       const { identifier: key, name, detail, accessMode } = item;
       const { unit, boolClose, boolOpen, type } = getUnit(detail);
-      const dataInfo = socketInfo.attrKeys.find((item) => item.identifier === key);
+      const dataInfo = socketInfo.filterAttrKeys.find((item) => item.identifier === key);
+
       let time: number | undefined;
       let value: any | undefined;
       const message = socketInfo.message[key];
@@ -240,7 +279,8 @@
           setDataSource();
 
           await nextTick();
-          setTableData(socketInfo.dataSource);
+
+          unref(mode) === EnumTableCardMode.TABLE && setTableData(socketInfo.dataSource);
         }
       } catch (error) {}
     },

@@ -273,6 +273,7 @@
                       event: DropMenuEvent.SET_DEFAULT,
                       icon: 'ant-design:unordered-list-outlined',
                       onClick: handleSetDefault.bind(null, item),
+                      disabled: item.default,
                     },
                     {
                       text: '删除',
@@ -283,6 +284,7 @@
                         title: '是否确认删除操作?',
                         onConfirm: handleDelete.bind(null, [item.id]),
                       },
+                      disabled: item.default,
                     },
                   ]"
                 />

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

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

@@ -122,6 +122,7 @@ export function useBasicDataTransform() {
           description,
           name,
         },
+        created: !!id?.id,
       },
       {
         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,
   ValidConnectionFunc,
   GraphNode,
+  NodeMouseEvent,
+  GraphEdge,
+  EdgeMouseEvent,
 } from '@vue-flow/core';
-import { ConnectionLineType, SelectionMode, useVueFlow } from '@vue-flow/core';
 import type { Ref } from 'vue';
-import { markRaw, toRaw, unref } from 'vue';
-import { isFunction } from 'lodash-es';
 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 { 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 { useAddEdges } from './useAddEdges';
 import { UpdateNodeDrawer } from '../src/components/UpdateNodeDrawer';
 import { UpdateEdgeDrawer } from '../src/components/UpdateEdgeDrawer';
 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 {
   id: string;
+  ruleChainDetail: Ref<RuleChainDetail | undefined>;
   createNodeModalActionType: Ref<Nullable<InstanceType<typeof CreateNodeModal>>>;
   createEdgeModalActionType: Ref<Nullable<InstanceType<typeof CreateEdgeModal>>>;
   updateNodeDrawerActionType: Ref<Nullable<InstanceType<typeof UpdateNodeDrawer>>>;
   updateEdgeDrawerActionType: Ref<Nullable<InstanceType<typeof UpdateEdgeDrawer>>>;
-  triggerChange: () => void;
+  useSaveAndRedoActionType: ReturnType<typeof useSaveAndRedo>;
 }
 
 const validateInputAndOutput: ValidConnectionFunc = (connection: Connection) => {
@@ -40,12 +49,15 @@ const validateInputAndOutput: ValidConnectionFunc = (connection: Connection) =>
 export function useRuleFlow(options: UseRuleFlowOptionsType) {
   const {
     id,
+    ruleChainDetail,
     createEdgeModalActionType,
     updateEdgeDrawerActionType,
     updateNodeDrawerActionType,
-    triggerChange,
+    useSaveAndRedoActionType,
   } = options;
 
+  const { triggerChange } = useSaveAndRedoActionType;
+
   const flowActionType = useVueFlow({
     id,
     maxZoom: 1,
@@ -96,6 +108,9 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
     onNodeDoubleClick,
     onEdgeDoubleClick,
     onNodeDragStop,
+    onNodeContextMenu,
+    onEdgeContextMenu,
+    onPaneContextMenu,
   } = flowActionType;
 
   const { getAddedgesParams } = useAddEdges();
@@ -125,6 +140,119 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
   });
 
   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;
     const { flag, data } =
       (await unref(updateNodeDrawerActionType)?.open(
@@ -137,9 +265,10 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
 
     const currentNode = findNode(node.id);
     (currentNode!.data as NodeData).data = data;
-  });
+    triggerChange();
+  }
 
-  onEdgeDoubleClick(async ({ edge }) => {
+  async function handleUpdateEdge(edge: GraphEdge) {
     if (!validateHasLabelConnection(edge.sourceNode.data)) return;
 
     if ((edge.sourceNode.data as NodeData).config?.disableAction) return;
@@ -156,33 +285,48 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
     const currentEdge = findEdge(edge.id);
 
     (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 };

@@ -3,11 +3,12 @@ import { ComputedRef, computed, ref, unref } from 'vue';
 import { BasicNodeBindData, EdgeData, NodeData } from '../types/node';
 import { EntryCategoryComponentEnum } from '../enum/category';
 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 { buildUUID } from '/@/utils/uuid';
 import { useRoute } from 'vue-router';
+import { RuleChainEntityType } from '../enum/entity';
 
 const ignoreNodeKeys: string[] = [EntryCategoryComponentEnum.INPUT];
 
@@ -20,8 +21,12 @@ export function useSaveAndRedo() {
 
   const route = useRoute();
 
+  const debugMarker = ref(false);
+
   const getRuleChainId = computed(() => (route.params as Record<'id', string>).id);
 
+  const ruleChainDetail = ref<RuleChainDetail>();
+
   const { mergeData, deconstructionData } = useBasicDataTransform();
 
   const triggerChange = () => {
@@ -71,7 +76,16 @@ export function useSaveAndRedo() {
 
       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;
@@ -116,6 +130,10 @@ export function useSaveAndRedo() {
     resetChange();
   };
 
+  async function getCurrentRuleChainDetail() {
+    ruleChainDetail.value = await getRuleChainDetail(unref(getRuleChainId));
+  }
+
   async function handleSaveRuleChain(
     connections: ConnectionItemType[],
     nodes: BasicNodeBindData[],
@@ -123,12 +141,13 @@ export function useSaveAndRedo() {
   ) {
     try {
       loading.value = true;
+
       const data = await saveRuleChainData({
         connections,
         nodes,
         firstNodeIndex,
         ruleChainId: {
-          entityType: 'RULE_CHAIN',
+          entityType: RuleChainEntityType.RULE_CHAIN,
           id: unref(getRuleChainId),
         },
       });
@@ -175,12 +194,23 @@ export function useSaveAndRedo() {
     return elements;
   }
 
+  const handleRemoveDebug = (flowActionType: VueFlowStore) => {
+    for (const item of unref(flowActionType.getNodes)) {
+      (item.data as NodeData)!.data!.debugMode = false;
+    }
+    triggerChange();
+  };
+
   return {
     loading,
+    debugMarker,
     changeMarker,
+    ruleChainDetail,
     triggerChange,
     handleApplyChange,
     handleRedoChange,
+    handleRemoveDebug,
     getCurrentPageMetaData,
+    getCurrentRuleChainDetail,
   };
 }

@@ -22,6 +22,7 @@
   import { Icon } from '/@/components/Icon';
   import { UpdateNodeDrawer } from './src/components/UpdateNodeDrawer';
   import { UpdateEdgeDrawer } from './src/components/UpdateEdgeDrawer';
+  import { NodeData } from './types/node';
 
   const getId = Number(Math.random().toString().substring(2)).toString(16);
 
@@ -39,22 +40,28 @@
 
   const elements = ref([]);
 
+  const useSaveAndRedoActionType = useSaveAndRedo();
+
   const {
     loading,
     changeMarker,
+    ruleChainDetail,
     getCurrentPageMetaData,
     triggerChange,
     handleApplyChange,
     handleRedoChange,
-  } = useSaveAndRedo();
+    handleRemoveDebug,
+    getCurrentRuleChainDetail,
+  } = useSaveAndRedoActionType;
 
   const { flowActionType } = useRuleFlow({
     id: getId,
+    ruleChainDetail,
     createNodeModalActionType,
     createEdgeModalActionType,
     updateEdgeDrawerActionType,
     updateNodeDrawerActionType,
-    triggerChange,
+    useSaveAndRedoActionType,
   });
 
   const { handleOnDragOver, handleOnDrop } = useDragCreate({
@@ -72,13 +79,17 @@
 
   const getDeleteDisplayState = computed(() => unref(flowActionType.getSelectedElements).length);
 
+  const getDebugMarker = computed(() =>
+    flowActionType.getNodes.value.some((item) => (item.data as NodeData).data?.debugMode)
+  );
+
   const handleDeleteSelectionElements = () => {
-    flowActionType.removeEdges(unref(flowActionType.getSelectedEdges));
     flowActionType.removeNodes(unref(flowActionType.getSelectedNodes));
   };
 
   onMounted(() => {
     getCurrentPageMetaData(flowActionType);
+    getCurrentRuleChainDetail();
   });
 
   createFlowContext({
@@ -127,7 +138,9 @@
               <Icon class="!text-3xl !text-light-50" icon="mdi:delete" />
             </button>
             <button
+              :class="getDebugMarker ? '!bg-orange-600 !opacity-100' : 'opacity-50'"
               class="button-box-shadow w-14 h-14 flex justify-center items-center bg-gray-400 rounded-full opacity-50"
+              @click="handleRemoveDebug(flowActionType)"
             >
               <Icon class="!text-3xl !text-light-50" icon="carbon:debug" />
             </button>

+import { RouteLocationNormalizedLoaded } from 'vue-router';
 import { RuleChainFieldsEnum, RuleChainFieldsNameEnum } from '../../../enum/formField/flow';
 import { getRuleChains } from '/@/api/ruleDesigner';
 import { FormSchema } from '/@/components/Form';
 
-const fetch = async (params: Recordable) => {
+const fetch = async (params: Recordable, ruleChainId: string) => {
   try {
     const result = await getRuleChains(params);
-    const data = result.data.map((item) => ({ label: item.name, value: item.id.id }));
+    const data = result.data
+      .map((item) => ({ label: item.name, value: item.id.id }))
+      .filter((item) => item.value !== ruleChainId);
     return data;
   } catch (err) {
     console.error(err);
@@ -13,24 +16,27 @@ const fetch = async (params: Recordable) => {
   }
 };
 
-export const formSchemas: FormSchema[] = [
-  {
-    field: RuleChainFieldsEnum.RULE_CHAIN_ID,
-    label: RuleChainFieldsNameEnum.RULE_CHAIN_ID,
-    component: 'ApiSearchSelect',
-    componentProps: () => {
-      return {
-        placeholder: '请选择所属产品',
-        showSearch: true,
-        params: {
-          pageSize: 50,
-          page: 0,
-          type: 'CORE',
-        },
-        api: fetch,
-        searchApi: fetch,
-        getPopupContainer: () => document.body,
-      };
+export const getFormSchemas = (route: RouteLocationNormalizedLoaded): FormSchema[] => {
+  const ruleChainId = (route.params as Record<'id', string>).id;
+  return [
+    {
+      field: RuleChainFieldsEnum.RULE_CHAIN_ID,
+      label: RuleChainFieldsNameEnum.RULE_CHAIN_ID,
+      component: 'ApiSearchSelect',
+      componentProps: () => {
+        return {
+          placeholder: '请选择所属产品',
+          showSearch: true,
+          params: {
+            pageSize: 50,
+            page: 0,
+            type: 'CORE',
+          },
+          api: (params: Recordable) => fetch(params, ruleChainId),
+          searchApi: (params: Recordable) => fetch(params, ruleChainId),
+          getPopupContainer: () => document.body,
+        };
+      },
     },
-  },
-];
+  ];
+};

 <script lang="ts" setup>
   import type { CreateModalDefineExposeType } from '../../../types';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { formSchemas } from './create.config';
+  import { getFormSchemas } from './create.config';
   import { NodeData } from '../../../types/node';
+  import { useRoute } from 'vue-router';
 
   defineProps<{
     config: NodeData;
   }>();
 
+  const ROUTE = useRoute();
+
   const [register, { validate, getFieldsValue, setFieldsValue, resetFields }] = useForm({
-    schemas: formSchemas,
+    schemas: getFormSchemas(ROUTE),
     showActionButtonGroup: false,
   });
 

@@ -2,25 +2,32 @@
   import { NodeProps } from '@vue-flow/core';
   import { Icon } from '/@/components/Icon';
   import { Tooltip } from 'ant-design-vue';
+  import { useRouter } from 'vue-router';
+  import { NodeData } from '../../../types/node';
 
-  defineProps<{
-    nodeProps?: NodeProps;
+  const props = defineProps<{
+    nodeProps?: NodeProps<NodeData>;
   }>();
 
+  const ROUTER = useRouter();
+
   const handleClick = () => {
-    // event.stopPropagation();
-    // event.preventDefault();
-    // console.log(props);
+    const { data } = props.nodeProps?.data || ({} as NodeData);
+    const { configuration } = (data || {}) as { configuration: Record<'ruleChainId', string> };
+    if (configuration.ruleChainId) {
+      ROUTER.push(`/rule/chain/${configuration.ruleChainId}`);
+    }
   };
 </script>
 
 <template>
-  <div class="w-full h-6 flex justify-end" @click="handleClick">
+  <div class="w-full h-6 flex justify-end">
     <Tooltip color="#fff">
       <template #title>
         <span class="text-slate-500 italic">打开规则链</span>
       </template>
       <Icon
+        @click="handleClick"
         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"
       />

@@ -29,6 +29,11 @@
     return config?.name;
   });
 
+  const getIconUrl = computed(() => {
+    const { iconUrl } = unref(getNodeDefinition);
+    return iconUrl;
+  });
+
   const getIcon = computed(() => {
     const { icon } = unref(getNodeDefinition);
     const { category } = unref(getData);
@@ -64,10 +69,11 @@
     </template>
     <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"
-      :style="{ backgroundColor: getBackgroundColor }"
+      :style="{ backgroundColor: getBackgroundColor, outline: selected ? '3px solid red' : 'none' }"
     >
       <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>
       <BasicToolbar v-if="!getData.config?.disableAction" v-bind="$props" />
       <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="未找到链接组件" />
         </Spin>
       </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" />
       </Tabs.TabPane>
       <Tabs.TabPane :tab="TabsPanelNameEnum[TabsPanelEnum.HELP]" :key="TabsPanelEnum.HELP">

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

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

@@ -18,3 +18,20 @@ export interface ConnectionItemType {
   toIndex: number;
   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;
+}

@@ -47,12 +47,12 @@
         {{ t('sys.login.loginButton') }}
       </Button>
     </FormItem>
-    <ARow class="enter-x flex justify-between">
-      <ACol :md="11" :xs="24">
+    <ARow class="enter-x flex justify-center">
+      <!-- <ACol :md="11" :xs="24">
         <Button block @click="setLoginState(LoginStateEnum.LOGIN)">
           {{ t('sys.login.userNameInFormTitle') }}
         </Button>
-      </ACol>
+      </ACol> -->
       <ACol :md="11" :xs="24">
         <Button block @click="setLoginState(LoginStateEnum.MOBILE)">
           {{ t('sys.login.mobileSignInFormTitle') }}

@@ -81,6 +81,17 @@
                   confirm: handleDeleteOrBatchDelete.bind(null, record),
                 },
               },
+              {
+                label: '清除密码',
+                auth: 'api:yt:user:resetPassword',
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                tooltip: '清除密码',
+                popConfirm: {
+                  title: '是否确认清除密码',
+                  confirm: handleClearPassword.bind(null, record),
+                },
+              },
             ]"
           />
         </template>
@@ -107,6 +118,8 @@
   import { isAdmin } from '/@/enums/roleEnum';
   import { TenantListItemRecord } from '/@/api/tenant/tenantInfo';
   import { useFastEnter } from '/@/hooks/business/useFastEnter';
+  import { clearUserPassword } from '/@/api/system/system';
+  import { useMessage } from '/@/hooks/web/useMessage';
 
   export default defineComponent({
     name: 'AccountManagement',
@@ -121,6 +134,7 @@
       Popconfirm,
     },
     setup() {
+      const { createMessage } = useMessage();
       const userInfo: any = getAuthCache(USER_INFO_KEY);
       const role: string = userInfo?.roles[0];
 
@@ -192,6 +206,13 @@
         }
       }
 
+      const handleClearPassword = async (record: Recordable) => {
+        const { id } = record;
+        if (!id) return;
+        const { message } = await clearUserPassword(id);
+        createMessage.success(message);
+      };
+
       return {
         handleLoginCustomAdmin,
         registerTable,
@@ -206,6 +227,7 @@
         handleDeleteOrBatchDelete,
         isAdmin,
         role,
+        handleClearPassword,
       };
     },
   });

@@ -5,14 +5,26 @@ export const formSchema: FormSchema[] = [
     field: 'passwordOld',
     label: '当前密码',
     component: 'InputPassword',
+    componentProps: {
+      placeholder: '请输入当前密码',
+    },
     required: true,
   },
   {
     field: 'passwordNew',
     label: '新密码',
-    component: 'StrengthMeter',
-    componentProps: {
-      placeholder: '新密码',
+    component: 'InputPassword',
+    componentProps({ formModel, formActionType }) {
+      return {
+        placeholder: '请输入新密码',
+        onInput({ target }) {
+          const { value } = target;
+          const { confirmPassword } = formModel;
+          if (value === confirmPassword) {
+            formActionType.clearValidate('confirmPassword');
+          }
+        },
+      };
     },
     rules: [
       {
@@ -25,7 +37,9 @@ export const formSchema: FormSchema[] = [
     field: 'confirmPassword',
     label: '确认密码',
     component: 'InputPassword',
-
+    componentProps: {
+      placeholder: '请输入确认密码',
+    },
     dynamicRules: ({ values }) => {
       return [
         {
@@ -37,7 +51,6 @@ export const formSchema: FormSchema[] = [
             if (value !== values.passwordNew) {
               return Promise.reject('两次输入的密码不一致!');
             }
-
             const pwdRegex = new RegExp(InputRegExp.PASSWORD_INPUT);
             if (!pwdRegex.test(value)) {
               return Promise.reject(

@@ -175,7 +175,7 @@ export const formSchema: FormSchema[] = [
     required: true,
     defaultValue: '0',
 
-    label: '默认存储天数（0-无限制）',
+    label: '默认存储TTL天数（0-无限制）',
     colProps: { span: 12 },
     component: 'InputNumber',
     componentProps: {

@@ -124,6 +124,8 @@
           let ids = record?.id?.id;
           await deleteTenantProfileApi(ids);
           createMessage.success('删除成功');
+          selectedRowKeys.length = 0;
+          disabled.value = true;
           reload();
         } else {
           createMessage.warning(message);
@@ -148,9 +150,6 @@
           createMessage.success('删除成功');
           reload();
           selectedRowKeys.length = 0;
-          setTimeout(() => {
-            disabled.value = false;
-          }, 3000);
         });
       };
 

@@ -46,7 +46,7 @@
           label: '账号',
           component: 'Input',
           componentProps: {
-            maxLength: 255,
+            maxLength: 64,
             placeholder: '请输入账号',
           },
           dynamicRules: ({ values }) => {
@@ -87,7 +87,7 @@
           required: true,
           component: 'Input',
           componentProps: {
-            maxLength: 255,
+            maxLength: 64,
             placeholder: '请输入真实名字',
           },
           rules: chineseAndEnlishRule,
@@ -97,12 +97,20 @@
           label: '电话号码',
           required: true,
           component: 'Input',
+          componentProps: {
+            maxLength: 11,
+            placeholder: '请输入电话号码',
+          },
           rules: phoneRule,
         },
         {
           field: 'email',
           label: '邮件',
           component: 'Input',
+          componentProps: {
+            maxLength: 64,
+            placeholder: '请输入邮件',
+          },
           rules: emailRule,
         },
         {

@@ -44,6 +44,7 @@
               icon: 'ant-design:usergroup-add-outlined',
               label: '租户管理员',
               onClick: handleTenantAdminDrawer.bind(null, record),
+              disabled: record.enabled === false,
             },
             {
               icon: 'clarity:note-edit-line',

@@ -110,14 +110,20 @@ export const tenantFormSchema: FormSchema[] = [
     label: '租户角色',
     component: 'ApiSelect',
     required: true,
-    componentProps: {
-      mode: 'multiple',
-      api: getAllRoleList,
-      params: {
-        roleType: RoleEnum.TENANT_ADMIN,
-      },
-      labelField: 'name',
-      valueField: 'id',
+    componentProps: () => {
+      return {
+        api: async () => {
+          const res = await getAllRoleList({ roleType: RoleEnum.TENANT_ADMIN });
+          return res;
+        },
+        mode: 'multiple',
+        showSearch: true,
+        labelField: 'name',
+        valueField: 'id',
+        filterOption: (inputValue: string, options: Record<'label' | 'value', string>) => {
+          return options.label.toLowerCase().includes(inputValue.toLowerCase());
+        },
+      };
     },
   },
   {

@@ -32,7 +32,7 @@
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { formSchema } from './role.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-  import { BasicTree, CheckEvent, TreeActionType, TreeItem } from '/@/components/Tree';
+  import { BasicTree, CheckEvent, TreeActionType, TreeItem, CheckKeys } from '/@/components/Tree';
   const { t } = useI18n(); //加载国际化
   // 加载菜单数据
   import { getAdminMenuList, getMenuList, getMenusIdsByRoleId } from '/@/api/sys/menu';
@@ -60,7 +60,7 @@
       const treeRef = ref<Nullable<TreeActionType>>(null);
       const checked = ref<string[]>([]); //需要选中的节点
       const spinning = ref(false);
-      const checkedKeysWithHalfChecked = ref<string[]>([]);
+      const checkedKeysWithHalfChecked = ref<(string | number)[]>([]);
 
       const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
         labelWidth: 90,
@@ -137,7 +137,12 @@
       async function handleSubmit() {
         setDrawerProps({ loading: true, confirmLoading: true });
         const { createMessage } = useMessage();
-        const treeCheckedKeys: string[] = (unref(treeRef)?.getCheckedKeys() as string[]) || [];
+        let treeCheckedKeys: string[] | CheckKeys =
+          (unref(treeRef)?.getCheckedKeys() as string[] | CheckKeys) || [];
+        //fix 取消层级独立后(unref(treeRef)?.getCheckedKeys() as string[])的数据不是数组，是{checked:[],halfChecked:[]}对象，迭代报错
+        if (!Array.isArray(treeCheckedKeys)) {
+          treeCheckedKeys = treeCheckedKeys?.checked;
+        }
         const menu = [...new Set([...unref(checkedKeysWithHalfChecked), ...treeCheckedKeys])];
         try {
           const values = await validate();
@@ -237,7 +242,12 @@
         return needExcludeKeys;
       };
 
-      const handleCheckClick = (selectedKeys: string[], event: CheckEvent) => {
+      const handleCheckClick = (selectedKeys: CheckKeys, event: CheckEvent) => {
+        //fix 取消层级独立后selectedKeys不是数组，是{checked:[],halfChecked:[]}对象 迭代报错
+        if (!Array.isArray(selectedKeys)) {
+          selectedKeys = selectedKeys?.checked;
+          event.halfCheckedKeys = [];
+        }
         checkedKeysWithHalfChecked.value = [
           ...selectedKeys,
           ...(event.halfCheckedKeys as string[]),