feat: 新增规则链设计器

@@ -5,14 +5,14 @@
     "public/resource/tinymce/langs"
   ],
   "cSpell.words": [
+    "clazz",
     "Cmds",
     "COAP",
     "echarts",
     "edrx",
-    "EFENTO", 
+    "EFENTO",
     "fingerprintjs",
     "flvjs",
-    "flvjs",
     "inited",
     "liveui",
     "MQTT",
@@ -21,6 +21,7 @@
     "rtsp",
     "SCADA",
     "SNMP",
+    "UNACK",
     "unref",
     "vben",
     "videojs",

@@ -39,6 +39,10 @@
     "@iconify/iconify": "^2.0.3",
     "@logicflow/core": "^0.6.9",
     "@logicflow/extension": "^0.6.9",
+    "@vue-flow/background": "^1.2.0",
+    "@vue-flow/controls": "^1.1.0",
+    "@vue-flow/core": "^1.22.1",
+    "@vue-flow/node-toolbar": "^1.1.0",
     "@vueuse/core": "^10.1.0",
     "@zxcvbn-ts/core": "^1.0.0-beta.0",
     "ace-builds": "^1.4.14",
@@ -68,7 +72,7 @@
     "vditor": "^3.8.6",
     "video.js": "^7.20.3",
     "videojs-flvjs-es6": "^1.0.1",
-    "vue": "3.2.31",
+    "vue": "3.3.4",
     "vue-i18n": "9.1.7",
     "vue-json-pretty": "^2.0.4",
     "vue-router": "^4.0.11",

+import { defHttp } from '/@/utils/http/axios';
+import { RuleChainType } from '/@/views/rule/designer/types/ruleNode';
+
+enum Api {
+  SAVE = '/ruleChain/metadata',
+}
+
+export const getRuleChainData = (id: string) => {
+  return defHttp.get<RuleChainType>(
+    {
+      url: `/ruleChain/${id}/metadata`,
+    },
+    { joinPrefix: false }
+  );
+};
+
+export const saveRuleChainData = (data: RuleChainType) => {
+  return defHttp.post(
+    {
+      url: Api.SAVE,
+      data,
+    },
+    { joinPrefix: false }
+  );
+};

+export enum AlarmStatus {
+  CLEARED_UN_ACK = 'CLEARED_UNACK',
+  ACTIVE_UN_ACK = 'ACTIVE_UNACK',
+  CLEARED_ACK = 'CLEARED_ACK',
+  ACTIVE_ACK = 'ACTIVE_ACK',
+}
+
+export enum AlarmStatusMean {
+  CLEARED_UNACK = '清除未确认',
+  ACTIVE_UNACK = '激活未确认',
+  CLEARED_ACK = '清除已确认',
+  ACTIVE_ACK = '激活已确认',
+}

@@ -3,20 +3,7 @@ import { FormSchema } from '/@/components/Form';
 import { BasicColumn } from '/@/components/Table';
 import moment from 'moment';
 import { findDictItemByCode } from '/@/api/system/dict';
-
-export enum AlarmStatus {
-  CLEARED_UN_ACK = 'CLEARED_UNACK',
-  ACTIVE_UN_ACK = 'ACTIVE_UNACK',
-  CLEARED_ACK = 'CLEARED_ACK',
-  ACTIVE_ACK = 'ACTIVE_ACK',
-}
-
-export enum AlarmStatusMean {
-  CLEARED_UNACK = '清除未确认',
-  ACTIVE_UNACK = '激活未确认',
-  CLEARED_ACK = '清除已确认',
-  ACTIVE_ACK = '激活已确认',
-}
+import { AlarmStatus, AlarmStatusMean } from '/@/enums/alarmEnum';
 
 export const alarmSearchSchemas: FormSchema[] = [
   {

-import { AlarmStatus, AlarmStatusMean } from '../config/detail.config';
 import { clearOrAckAlarm, getDeviceAlarm } from '/@/api/device/deviceManager';
 import { notification, Button, Tag } from 'ant-design-vue';
 import { h, onMounted, onUnmounted } from 'vue';
@@ -8,6 +7,7 @@ import { RoleEnum } from '/@/enums/roleEnum';
 import { usePermission } from '/@/hooks/web/usePermission';
 import { useUserStore } from '/@/store/modules/user';
 import { useGlobSetting } from '/@/hooks/setting';
+import { AlarmStatus, AlarmStatusMean } from '/@/enums/alarmEnum';
 
 interface UseAlarmNotifyParams {
   alarmNotifyStatus?: AlarmStatus;

+export enum FilterCategoryComponentEnum {
+  CHECK_ALARM_STATUS = 'CheckAlarmStatus',
+}
+
+export enum EntryComponentEnum {
+  INPUT = 'Input',
+}

+export enum HandleTypeEnum {
+  SOURCE = 'source',
+  TARGET = 'target',
+}
+
+export enum NodeTypeEnum {
+  CUSTOM = 'custom',
+}
+
+export enum EdgeTypeEnum {
+  CUSTOM = 'custom',
+}
+
+export enum BasicConnectionModalEnum {
+  BASIC = 'BASIC',
+  CUSTOM = 'CUSTOM',
+}
+
+export enum MarkerArrowEnum {
+  BASIC_ARROW = 'basicArrow',
+  BASIC_ARROW_SELECTED = 'basicArrowSelected',
+}
+
+export enum ElementsTypeEnum {
+  NODE = 'NODE',
+  EDGE = 'EDGE',
+}

+export enum FetchNodeComFlagTypeENum {
+  CONNECTION_MODAL = 'CONNECTION_MODAL',
+  CREATE_MODAL = 'CREATE_MODAL',
+}
+
+export enum NodeBindDataFieldEnum {
+  NAME = 'name',
+  ALARM_STATUS_LIST = 'alarmStatusList',
+  DESCRIPTION = 'description',
+  DEBUG_MODE = 'debugMode',
+}
+
+export enum NodeBindDataFieldNameEnum {
+  NAME = '名称',
+  ALARM_STATUS_LIST = 'Alarm status filter',
+  DESCRIPTION = '说明',
+  DEBUG_MODE = '调试模式',
+}
+
+export enum EdgeBindDataFieldEnum {
+  TYPE = 'type',
+}
+
+export enum EdgeBindDataFieldNameEnum {
+  TYPE = '链接标签',
+}

+import type { Connection } from '@vue-flow/core';
+import { EdgeTypeEnum } from '../enum';
+import type { EdgeData } from '../types/node';
+import { buildUUID } from '/@/utils/uuid';
+
+export function useAddEdges() {
+  const getAddedgesParams = (params: Connection, data: string | string[] | any) => {
+    return { type: EdgeTypeEnum.CUSTOM, data: { data } as EdgeData, id: buildUUID(), ...params };
+  };
+
+  return { getAddedgesParams };
+}

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

+import { Component, computed, ref, shallowRef, toRaw, unref } from 'vue';
+import { fetchConnectionComponent, fetchCreateComponent } from '../packages';
+import { CreateModalDefineExposeType, AwaitPopupWindowReturnDataType } from '../types';
+import { EdgeData, NodeData } from '../types/node';
+import { DataActionModeEnum } from '/@/enums/toolEnum';
+import { ElementsTypeEnum } from '../enum';
+
+interface OptionsType {
+  mode: DataActionModeEnum;
+  type: ElementsTypeEnum;
+}
+
+export function useAwaitPopupWindowBindData(
+  options: OptionsType = { mode: DataActionModeEnum.CREATE, type: ElementsTypeEnum.NODE }
+) {
+  const { type, mode } = options;
+
+  const visible = ref(false);
+
+  const nodeData = ref<NodeData>();
+
+  const edgeData = ref<EdgeData>();
+
+  const spinning = ref(false);
+
+  const resolveFn = ref<(options: AwaitPopupWindowReturnDataType) => void>();
+
+  const createComponentEl = ref<Nullable<CreateModalDefineExposeType>>();
+
+  const shadowComponent = shallowRef<Nullable<Component>>();
+
+  const getNodeSetValue = computed(() => {
+    return unref(mode) === DataActionModeEnum.CREATE
+      ? unref(nodeData)?.config?.configurationDescriptor.nodeDefinition.defaultConfiguration
+      : unref(nodeData)?.data?.configuration;
+  });
+
+  const getEdgeSetValue = computed(() => {
+    return {
+      type:
+        unref(mode) === DataActionModeEnum.CREATE
+          ? unref(nodeData)?.config?.configurationDescriptor?.nodeDefinition.relationTypes
+          : unref(edgeData)?.data,
+    };
+  });
+
+  const getSetValue = computed(() =>
+    unref(type) === ElementsTypeEnum.EDGE ? unref(getEdgeSetValue) : unref(getNodeSetValue)
+  );
+
+  const getComponentKey = computed(() => unref(nodeData)?.config?.key);
+
+  const handleFetchComponent = async (nodeOptions: NodeData, edgeOptions?: EdgeData) => {
+    nodeData.value = nodeOptions;
+    edgeData.value = edgeOptions;
+
+    spinning.value = true;
+    shadowComponent.value = null;
+    const modules =
+      ElementsTypeEnum.NODE === type
+        ? await fetchCreateComponent(nodeOptions.config!)
+        : await fetchConnectionComponent(nodeOptions.config!);
+
+    const component = (await modules?.()) as Record<'default', Component>;
+    shadowComponent.value = component?.default;
+    spinning.value = false;
+  };
+
+  const open = async (
+    nodeData: NodeData,
+    edgeData?: EdgeData
+  ): Promise<AwaitPopupWindowReturnDataType> => {
+    await handleFetchComponent(nodeData, edgeData);
+    return new Promise((_resolve) => {
+      visible.value = true;
+      resolveFn.value = _resolve;
+    });
+  };
+
+  const handleOnMounted = () => {
+    unref(createComponentEl)?.setFieldsValue?.(toRaw(unref(getSetValue)), toRaw(unref(nodeData)));
+  };
+
+  const validate = async () => {
+    return (await unref(createComponentEl)?.validate?.()) || { flag: true };
+  };
+
+  const handleSubmitData = (extraData: Recordable = {}, value: Recordable = {}) => {
+    return Object.assign(
+      {},
+      extraData,
+      unref(type) === ElementsTypeEnum.NODE ? { configuration: toRaw(unref(value)) } : value
+    );
+  };
+
+  const handleSubmit = async (extraData: Recordable = {}) => {
+    const { flag } = await validate();
+    if (!flag) return;
+    const value = await unref(createComponentEl)?.getFieldsValue?.();
+    unref(resolveFn)?.({
+      flag: true,
+      data: handleSubmitData(extraData, value),
+    } as AwaitPopupWindowReturnDataType);
+    visible.value = false;
+  };
+
+  const handleCancel = () => {
+    unref(resolveFn)?.({ flag: false, data: null } as AwaitPopupWindowReturnDataType);
+    visible.value = false;
+  };
+
+  return {
+    visible,
+    nodeData,
+    spinning,
+    shadowComponent,
+    createComponentEl,
+    getComponentKey,
+    open,
+    handleOnMounted,
+    handleSubmit,
+    handleCancel,
+  };
+}

+import { Ref, toRaw, unref } from 'vue';
+import { BasicNodeBindData, NodeData } from '../types/node';
+import { Elements, GraphNode } from '@vue-flow/core';
+import { RuleChainType } from '../types/ruleNode';
+import { allComponents } from '../packages';
+import { RuleNodeTypeEnum } from '../packages/index.type';
+import { buildUUID } from '/@/utils/uuid';
+import { isNullOrUnDef } from '/@/utils/is';
+import { useAddNodes } from './useAddNodes';
+import { useAddEdges } from './useAddEdges';
+
+export function useBasicDataTransform() {
+  const nodeConfigMap = new Map<string, NodeData>();
+
+  function initNodeConfigMap() {
+    for (const key of Object.keys(allComponents)) {
+      const category = allComponents[key as RuleNodeTypeEnum];
+      for (const nodeConfig of category.components) {
+        const { clazz } = nodeConfig;
+        nodeConfigMap.set(clazz, { config: nodeConfig, category: category.category });
+      }
+    }
+  }
+
+  function mergeData(data: NodeData['data'], nodeData: NodeData, node: GraphNode) {
+    const { x: layoutX, y: layoutY } = node.computedPosition;
+
+    return {
+      debugMode: !!data?.debugMode,
+      name: data?.name,
+      type: nodeData.config?.clazz,
+      configuration: toRaw(unref(data?.configuration)),
+      additionalInfo: {
+        description: data?.description,
+        layoutX,
+        layoutY,
+      },
+    };
+  }
+
+  function deconstructionConnection(
+    ruleChain: Ref<RuleChainType> | RuleChainType,
+    inputNodeId: string
+  ) {
+    const { connections, nodes, firstNodeIndex } = unref(ruleChain);
+    const indexMap = new Map<number, BasicNodeBindData>();
+    const groupByConnections = new Map<string, string[]>();
+    const SOURCE_HANDLE = '__handle-right';
+    const TARGET_HANDLE = '__handle-left';
+    const SEPARATOR = ',';
+    const edges: Elements = [];
+    const { getAddedgesParams } = useAddEdges();
+
+    nodes.forEach((item, index) => indexMap.set(index, item));
+
+    connections.forEach((item) => {
+      const { fromIndex, toIndex, type } = item;
+      const key = `${fromIndex}${SEPARATOR}${toIndex}`;
+      if (!groupByConnections.has(key)) groupByConnections.set(key, []);
+
+      const types = groupByConnections.get(key)!;
+      types.push(type);
+    });
+
+    for (const [key, types] of Array.from(groupByConnections.entries())) {
+      const [fromIndex, toIndex] = key.split(SEPARATOR);
+
+      const sourceNode = indexMap.get(Number(fromIndex));
+      const targetNode = indexMap.get(Number(toIndex));
+      const source = sourceNode!.id!.id;
+      const target = targetNode!.id!.id;
+      const sourceHandle = `${source}${SOURCE_HANDLE}`;
+      const targetHandle = `${target}${TARGET_HANDLE}`;
+
+      edges.push(
+        getAddedgesParams(
+          {
+            source,
+            target,
+            sourceHandle,
+            targetHandle,
+          },
+          { type: types }
+        )
+      );
+    }
+
+    if (!isNullOrUnDef(firstNodeIndex)) {
+      const targetNode = indexMap.get(firstNodeIndex);
+      const source = inputNodeId;
+      const target = targetNode!.id!.id;
+      const sourceHandle = `${source}$${SOURCE_HANDLE}`;
+      const targetHandle = `${target}${TARGET_HANDLE}`;
+      edges.push(
+        getAddedgesParams(
+          {
+            source,
+            target,
+            sourceHandle,
+            targetHandle,
+          },
+          {}
+        )
+      );
+    }
+
+    return edges;
+  }
+
+  function genNewNodeByData(node: BasicNodeBindData, config: NodeData) {
+    const { additionalInfo, configuration, debugMode, name, id } = node;
+    const { layoutX, layoutY, description } = additionalInfo || {};
+    const { getAddNodesParams } = useAddNodes();
+
+    return getAddNodesParams(
+      { x: layoutX!, y: layoutY! },
+      {
+        ...config,
+        data: {
+          configuration,
+          debugMode,
+          description,
+          name,
+        },
+      },
+      {
+        id: id?.id || buildUUID(),
+      }
+    );
+  }
+
+  function deconstructionNode(nodes: RuleChainType['nodes']) {
+    const addNodes: Elements = [];
+    for (const node of unref(nodes)) {
+      const { type } = node;
+      if (!type) continue;
+      const nodeConfig = nodeConfigMap.get(type);
+
+      if (!nodeConfig) {
+        throw `No component configuration of type '${type}' was found`;
+      }
+
+      const newNode = genNewNodeByData(node, nodeConfig);
+
+      addNodes.push(newNode);
+    }
+    return addNodes;
+  }
+
+  function deconstructionData(
+    ruleChain: RuleChainType | Ref<RuleChainType | undefined>,
+    inputNodeId: string
+  ) {
+    if (!ruleChain || !unref(ruleChain)) return;
+    ruleChain = toRaw(unref(ruleChain))!;
+
+    const nodes = deconstructionNode(ruleChain?.nodes || []);
+
+    const edges = deconstructionConnection(ruleChain!, inputNodeId);
+
+    return {
+      nodes,
+      edges,
+    };
+  }
+
+  initNodeConfigMap();
+
+  return {
+    mergeData,
+    deconstructionData,
+  };
+}

+import { EdgeProps, useEdge } from '@vue-flow/core';
+import { computed, unref } from 'vue';
+import { MarkerArrowEnum } from '../enum';
+
+export const useConnectionFocus = (props: EdgeProps) => {
+  const { edge } = useEdge(props.id);
+
+  const getSelected = computed(() => unref(edge)?.selected);
+
+  const getMarkerEnd = computed(
+    () =>
+      `url(#${
+        unref(getSelected) ? MarkerArrowEnum.BASIC_ARROW_SELECTED : MarkerArrowEnum.BASIC_ARROW
+      })`
+  );
+
+  return {
+    getMarkerEnd,
+    getSelected,
+  };
+};

+import type { NodeItemConfigType } from '../types/node';
+
+export function useCreateNodeKey(scope: string) {
+  return {
+    key: scope,
+    createComponentKey: `VC_CREATE_${scope}`,
+    connectionComponentKey: `VCC_CONNECTION_${scope}`,
+  } as NodeItemConfigType;
+}

+import { Ref, toRaw, unref } from 'vue';
+import { NodeData } from '../types/node';
+
+export function useDataTool() {
+  /**
+   * @description 通过NodeData获取默认配置信息
+   * @param nodeData
+   * @returns
+   */
+  function getDefaultConfigurationByNodeData<T = any>(nodeData: Ref<NodeData> | NodeData) {
+    nodeData = toRaw(unref(nodeData));
+
+    const { nodeDefinition } = nodeData.config?.configurationDescriptor || {};
+    const { defaultConfiguration } = nodeDefinition || {};
+
+    return { defaultConfiguration: defaultConfiguration as T };
+  }
+
+  /**
+   * @description 通过NodeData获取节点绑定信息
+   * @param nodeData
+   * @returns
+   */
+  function getBindDataByNodeData<T = any>(nodeData: Ref<NodeData> | NodeData) {
+    nodeData = toRaw(unref(nodeData));
+
+    const data = nodeData.data as T;
+
+    return { data };
+  }
+
+  return { getDefaultConfigurationByNodeData, getBindDataByNodeData };
+}

+import { Ref, toRaw, unref } from 'vue';
+import type { VueFlowStore } from '@vue-flow/core';
+import type { FlowElRef } from '../types/flow';
+import type { CreateNodeModal } from '../src/components/CreateNodeModal';
+import type { DragTransferData } from '../types/node';
+import { useAddNodes } from './useAddNodes';
+
+type EffectSymbol = DataTransfer['dropEffect'];
+
+export const TRANSFER_DATA_KEY = 'NODE_INFO';
+export const EFFECT_SYMBOL: EffectSymbol = 'move';
+
+interface UseDragCreateOptionsType {
+  el: Ref<Nullable<FlowElRef>>;
+  createNodeModalActionType: Ref<Nullable<InstanceType<typeof CreateNodeModal>>>;
+  flowActionType: VueFlowStore;
+  triggerChange: () => void;
+}
+
+export function useDragCreate(options: UseDragCreateOptionsType) {
+  const { el, createNodeModalActionType, flowActionType, triggerChange } = options;
+  const { project, addNodes } = flowActionType;
+  const { getAddNodesParams } = useAddNodes();
+
+  const handleOnDrop = async (event: DragEvent) => {
+    const value = event.dataTransfer?.getData(TRANSFER_DATA_KEY);
+    const transferData: DragTransferData = JSON.parse(value || '');
+    const { options: nodeData, offsetX, offsetY } = transferData;
+    const { flag, data } = (await unref(createNodeModalActionType)?.open(nodeData)) || {};
+    if (!flag) return;
+
+    const flowBounds = unref(el)?.$el.getBoundingClientRect() as DOMRect;
+
+    const position = project({
+      x: event.clientX - flowBounds.left - offsetX,
+      y: event.clientY - flowBounds.top - offsetY,
+    });
+
+    const newNode = getAddNodesParams(position, { ...toRaw(unref(nodeData)), data });
+    addNodes(newNode);
+
+    triggerChange();
+  };
+
+  const handleOnDragOver = (event: DragEvent) => {
+    event.preventDefault();
+
+    if (event.dataTransfer) event.dataTransfer.dropEffect = EFFECT_SYMBOL;
+  };
+
+  const handleOnDragStart = (event: DragEvent, options: object) => {
+    if (event.dataTransfer) {
+      event.dataTransfer.setData(TRANSFER_DATA_KEY, JSON.stringify(options));
+      event.dataTransfer.effectAllowed = EFFECT_SYMBOL;
+    }
+  };
+
+  return {
+    handleOnDrop,
+    handleOnDragOver,
+    handleOnDragStart,
+  };
+}

+import type { Ref } from 'vue';
+import { inject, provide } from 'vue';
+import type { VueFlowStore } from '@vue-flow/core';
+import type { CreateNodeModal } from '../src/components/CreateNodeModal';
+import type { CreateEdgeModal } from '../src/components/CreateEdgeModal';
+import { UpdateNodeDrawer } from '../src/components/UpdateNodeDrawer';
+import { UpdateEdgeDrawer } from '../src/components/UpdateEdgeDrawer';
+
+const SYMBOL = Symbol('flow-context');
+
+interface FlowContextOptionsType {
+  /**
+   * @description 节点 actions
+   */
+  createNodeModalActionType: Ref<Nullable<InstanceType<typeof CreateNodeModal>>>;
+
+  /**
+   * @description 连接线 actions
+   */
+  createEdgeModalActionType: Ref<Nullable<InstanceType<typeof CreateEdgeModal>>>;
+
+  /**
+   * @description 节点更新 actions
+   */
+  updateNodeDrawerActionType: Ref<Nullable<InstanceType<typeof UpdateNodeDrawer>>>;
+
+  /**
+   * @description 连接线更新 actions
+   */
+  updateEdgeDrawerActionType: Ref<Nullable<InstanceType<typeof UpdateEdgeDrawer>>>;
+
+  /**
+   * @description vue flow store
+   */
+  flowActionType: VueFlowStore;
+
+  /**
+   * @description 更新变化
+   */
+  triggerChange: () => void;
+}
+
+export const createFlowContext = (options: FlowContextOptionsType) => {
+  provide(SYMBOL, options);
+};
+
+export const useFlowContext = () => {
+  return inject(SYMBOL) as FlowContextOptionsType;
+};

+import { useFullscreen } from '@vueuse/core';
+import type { Ref } from 'vue';
+import { computed, unref } from 'vue';
+
+export function useFullScreen(el: Ref<Nullable<HTMLDivElement>>) {
+  const { toggle, isFullscreen } = useFullscreen(el);
+
+  const getFullScreenIcon = computed(() =>
+    unref(isFullscreen) ? 'bx:exit-fullscreen' : 'mdi:fullscreen'
+  );
+
+  return {
+    getFullScreenIcon,
+    handleFullScreen: toggle,
+  };
+}

+import { Config as InputConfig } from '../packages/Entry/Input/config';
+import { useAddNodes } from './useAddNodes';
+
+export function useInputNode() {
+  const getInputNodeConfig = (id?: string) => {
+    const { getAddNodesParams } = useAddNodes();
+
+    const newNode = getAddNodesParams(
+      { x: 80, y: 50 },
+      {
+        ...new InputConfig(),
+        data: {
+          name: '输入',
+          description: '规则链的逻辑输入,将传入消息转发到下一个相关规则节点。',
+        },
+      },
+      { id, draggable: false }
+    );
+
+    return newNode;
+  };
+
+  return { getInputNodeConfig };
+}

+import type {
+  Connection,
+  EdgeComponent,
+  NodeComponent,
+  ValidConnectionFunc,
+  GraphNode,
+} 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, NodeTypeEnum } from '../enum';
+import { BasicEdge, BasicNode } from '../src/components';
+import type { EdgeData, NodeData } from '../types/node';
+import type { CreateEdgeModal } from '../src/components/CreateEdgeModal';
+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';
+
+interface UseRuleFlowOptionsType {
+  id: string;
+  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;
+}
+
+const validateInputAndOutput: ValidConnectionFunc = (connection: Connection) => {
+  const { sourceHandle, targetHandle, source, target } = connection;
+
+  return (
+    isOutputHandle(sourceHandle || '') && isInputHandle(targetHandle || '') && source !== target
+  );
+};
+
+export function useRuleFlow(options: UseRuleFlowOptionsType) {
+  const {
+    id,
+    createEdgeModalActionType,
+    updateEdgeDrawerActionType,
+    updateNodeDrawerActionType,
+    triggerChange,
+  } = options;
+
+  const flowActionType = useVueFlow({
+    id,
+    maxZoom: 1,
+    minZoom: 1,
+    panOnScroll: true,
+    selectionMode: SelectionMode.Partial,
+    nodeTypes: {
+      [NodeTypeEnum.CUSTOM]: markRaw(BasicNode) as NodeComponent,
+    },
+    edgeTypes: {
+      [EdgeTypeEnum.CUSTOM]: markRaw(BasicEdge) as EdgeComponent,
+    },
+    connectionLineOptions: {
+      type: ConnectionLineType.Bezier,
+    },
+    defaultViewport: {
+      x: 0,
+      y: 0,
+    },
+    isValidConnection(connection, elements) {
+      const validateList = [validateInputAndOutput];
+      const targetData = elements.targetNode.data as NodeData;
+
+      if (
+        targetData.category?.validateConnection &&
+        isFunction(targetData.category.validateConnection)
+      )
+        validateList.push(targetData.category?.validateConnection);
+
+      if (targetData.config?.validateConnection && isFunction(targetData.config.validateConnection))
+        validateList.push(targetData.config.validateConnection);
+
+      if (!validateList.every((item) => item(connection, elements))) return false;
+
+      return true;
+    },
+  });
+
+  const {
+    getEdges,
+    addEdges,
+    findEdge,
+    findNode,
+    setViewport,
+    removeEdges,
+    onConnect,
+    onPaneReady,
+    onNodeDoubleClick,
+    onEdgeDoubleClick,
+    onNodeDragStop,
+  } = flowActionType;
+
+  const { getAddedgesParams } = useAddEdges();
+
+  onConnect(async (params) => {
+    const { source } = params;
+    const sourceNode = findNode(source);
+    const sourceData = sourceNode?.data as NodeData;
+
+    let types: string[] = [];
+
+    if (sourceData && validateHasLabelConnection(sourceData)) {
+      const { flag, data } = (await unref(createEdgeModalActionType)?.open(sourceData)) || {};
+      if (!flag) return;
+      types = toRaw(unref(data));
+    }
+
+    handleMaxConnectionPoint(sourceNode);
+
+    addEdges(getAddedgesParams(params, types));
+
+    triggerChange();
+  });
+
+  onPaneReady(async () => {
+    setViewport({ x: 0, y: 0, zoom: 1 });
+  });
+
+  onNodeDoubleClick(async ({ node }) => {
+    const { flag, data } =
+      (await unref(updateNodeDrawerActionType)?.open(
+        toRaw((node as NodeData)?.data as unknown as NodeData)
+      )) || {};
+
+    if (!flag) return;
+
+    const currentNode = findNode(node.id);
+
+    (currentNode!.data as NodeData).data = data;
+  });
+
+  onEdgeDoubleClick(async ({ edge }) => {
+    if (!validateHasLabelConnection(edge.sourceNode.data)) return;
+
+    const { flag, data } =
+      (await unref(updateEdgeDrawerActionType)?.open(
+        toRaw(unref(edge.sourceNode?.data as unknown as NodeData)),
+        toRaw(unref(edge.data as EdgeData))
+      )) || {};
+
+    if (!flag) return;
+
+    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;
+  }
+
+  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);
+    }
+  }
+
+  return { flowActionType };
+}

+import type { VueFlowStore, Getters, Elements } from '@vue-flow/core';
+import { ComputedRef, ref, unref } from 'vue';
+import { BasicNodeBindData, EdgeData, NodeData } from '../types/node';
+import { EntryComponentEnum } from '../enum/category';
+import { useBasicDataTransform } from './useBasicDataTransform';
+import { getRuleChainData, saveRuleChainData } from '/@/api/ruleDesigner';
+import { ConnectionItemType, RuleChainType } from '../types/ruleNode';
+import { useInputNode } from './useInputNode';
+import { buildUUID } from '/@/utils/uuid';
+
+const ignoreNodeKeys: string[] = [EntryComponentEnum.INPUT];
+
+export function useSaveAndRedo() {
+  const changeMarker = ref(false);
+
+  const loading = ref(false);
+
+  const redoDataRef = ref<Elements>([]);
+
+  const { mergeData, deconstructionData } = useBasicDataTransform();
+
+  const triggerChange = () => {
+    changeMarker.value = true;
+  };
+
+  const resetChange = () => {
+    changeMarker.value = false;
+  };
+
+  /**
+   * @description 保存连接信息
+   */
+  function getConnections(
+    nodesRef: ComputedRef<Getters['getNodes']> | Getters['getNodes'],
+    edges: ComputedRef<Getters['getEdges']>
+  ) {
+    const nodeIndexMap = new Map();
+
+    const connections: ConnectionItemType[] = [];
+
+    unref(nodesRef).forEach((item, index) => {
+      nodeIndexMap.set(item.id, index);
+    });
+
+    for (const item of unref(edges)) {
+      const { data, target, source } = item;
+      const { data: bindData } = data as EdgeData;
+      const { type } = bindData || {};
+      const fromIndex = nodeIndexMap.get(source);
+      const toIndex = nodeIndexMap.get(target);
+      type?.forEach((key) => {
+        connections.push({ fromIndex, toIndex, type: key });
+      });
+    }
+
+    return connections;
+  }
+
+  function getNodes(nodesRef: ComputedRef<Getters['getNodes']> | Getters['getNodes']) {
+    const nodes: BasicNodeBindData[] = [];
+
+    for (const node of unref(nodesRef)) {
+      const nodeData = node.data as NodeData;
+
+      if (ignoreNodeKeys.includes(nodeData.config?.key as string)) continue;
+
+      const data = nodeData.data;
+
+      nodes.push(mergeData(data, nodeData, node));
+    }
+
+    return nodes;
+  }
+
+  function getFirsetNodeIndex(
+    nodesRef: ComputedRef<Getters['getNodes']> | Getters['getNodes'],
+    edges: ComputedRef<Getters['getEdges']>
+  ) {
+    const inputNode = unref(edges).find(
+      (item) => (item.sourceNode.data as NodeData).config?.key === EntryComponentEnum.INPUT
+    );
+
+    if (inputNode) {
+      const targetId = inputNode.target;
+      const index = unref(nodesRef).findIndex((item) => item.id === targetId);
+      return index;
+    }
+  }
+
+  const handleApplyChange = (flowActionType: VueFlowStore) => {
+    if (!unref(changeMarker)) return;
+
+    const edgesRef = flowActionType.getEdges;
+
+    const extraIgnoreNodeRef = unref(flowActionType.getNodes).filter(
+      (item) => !ignoreNodeKeys.includes((item.data as NodeData).config?.key as string)
+    );
+
+    const connections = getConnections(extraIgnoreNodeRef, edgesRef);
+
+    const nodes = getNodes(extraIgnoreNodeRef);
+
+    const firstNodeIndex = getFirsetNodeIndex(extraIgnoreNodeRef, edgesRef);
+
+    handleSaveRuleChain(connections, nodes, firstNodeIndex);
+  };
+
+  const handleRedoChange = (flowActionType: VueFlowStore) => {
+    if (!unref(changeMarker)) return;
+    flowActionType.setElements(unref(redoDataRef));
+    resetChange();
+  };
+
+  async function handleSaveRuleChain(
+    connections: ConnectionItemType[],
+    nodes: BasicNodeBindData[],
+    firstNodeIndex?: number
+  ) {
+    try {
+      loading.value = true;
+      const data = await saveRuleChainData({
+        connections,
+        nodes,
+        firstNodeIndex,
+        ruleChainId: {
+          entityType: 'RULE_CHAIN',
+          id: 'd6ddea70-25da-11ee-bc6b-47e715464e68',
+        },
+      });
+
+      parseRuleChain(data);
+
+      resetChange();
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function getCurrentPageMetaData(flowActionType: VueFlowStore) {
+    try {
+      loading.value = true;
+
+      const id = 'd6ddea70-25da-11ee-bc6b-47e715464e68';
+
+      const data = await getRuleChainData(id);
+
+      const elements = parseRuleChain(data);
+
+      flowActionType.setElements(elements);
+
+      resetChange();
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function parseRuleChain(ruleChain: RuleChainType) {
+    const inputId = buildUUID();
+
+    const { getInputNodeConfig } = useInputNode();
+
+    const value = deconstructionData(ruleChain, inputId);
+
+    const { nodes = [], edges = [] } = value || {};
+
+    const inputNode = getInputNodeConfig(inputId);
+
+    const elements = [inputNode, ...nodes, ...edges];
+
+    redoDataRef.value = elements;
+
+    return elements;
+  }
+
+  return {
+    loading,
+    changeMarker,
+    triggerChange,
+    handleApplyChange,
+    handleRedoChange,
+    getCurrentPageMetaData,
+  };
+}

+export function useTextWidth(text: string, fontSize: number) {
+  const LetterMap = {
+    ' ': 0.3329986572265625,
+    a: 0.5589996337890625,
+    A: 0.6569992065429687,
+    b: 0.58599853515625,
+    B: 0.6769989013671875,
+    c: 0.5469985961914062,
+    C: 0.7279998779296875,
+    d: 0.58599853515625,
+    D: 0.705999755859375,
+    e: 0.554998779296875,
+    E: 0.63699951171875,
+    f: 0.37299957275390627,
+    F: 0.5769989013671875,
+    g: 0.5909988403320312,
+    G: 0.7479995727539063,
+    h: 0.555999755859375,
+    H: 0.7199996948242188,
+    i: 0.255999755859375,
+    I: 0.23699951171875,
+    j: 0.26699981689453123,
+    J: 0.5169998168945312,
+    k: 0.5289993286132812,
+    K: 0.6899993896484375,
+    l: 0.23499908447265624,
+    L: 0.5879989624023437,
+    m: 0.854998779296875,
+    M: 0.8819992065429687,
+    n: 0.5589996337890625,
+    N: 0.7189987182617188,
+    o: 0.58599853515625,
+    O: 0.7669998168945312,
+    p: 0.58599853515625,
+    P: 0.6419998168945312,
+    q: 0.58599853515625,
+    Q: 0.7669998168945312,
+    r: 0.3649993896484375,
+    R: 0.6759994506835938,
+    s: 0.504998779296875,
+    S: 0.6319992065429687,
+    t: 0.354998779296875,
+    T: 0.6189987182617187,
+    u: 0.5599990844726562,
+    U: 0.7139999389648437,
+    v: 0.48199920654296874,
+    V: 0.6389999389648438,
+    w: 0.754998779296875,
+    W: 0.929998779296875,
+    x: 0.5089996337890625,
+    X: 0.63699951171875,
+    y: 0.4959991455078125,
+    Y: 0.66199951171875,
+    z: 0.48699951171875,
+    Z: 0.6239990234375,
+    0: 0.6,
+    1: 0.40099945068359377,
+    2: 0.6,
+    3: 0.6,
+    4: 0.6,
+    5: 0.6,
+    6: 0.6,
+    7: 0.5469985961914062,
+    8: 0.6,
+    9: 0.6,
+    '[': 0.3329986572265625,
+    ']': 0.3329986572265625,
+    ',': 0.26399993896484375,
+    '.': 0.26399993896484375,
+    ';': 0.26399993896484375,
+    ':': 0.26399993896484375,
+    '{': 0.3329986572265625,
+    '}': 0.3329986572265625,
+    '\\': 0.5,
+    '|': 0.19499969482421875,
+    '=': 0.604998779296875,
+    '+': 0.604998779296875,
+    '-': 0.604998779296875,
+    _: 0.5,
+    '`': 0.3329986572265625,
+    ' ~': 0.8329986572265625,
+    '!': 0.3329986572265625,
+    '@': 0.8579986572265625,
+    '#': 0.6,
+    $: 0.6,
+    '%': 0.9699996948242188,
+    '^': 0.517999267578125,
+    '&': 0.7259994506835937,
+    '*': 0.505999755859375,
+    '(': 0.3329986572265625,
+    ')': 0.3329986572265625,
+    '<': 0.604998779296875,
+    '>': 0.604998779296875,
+    '/': 0.5,
+    '?': 0.53699951171875,
+    '"': 0.33699951171875,
+  };
+
+  // 计算非中文字符宽度
+  const getLetterWidth = (letter: string, fontSize: number) => fontSize * (LetterMap[letter] || 1);
+
+  // 计算文本宽度
+  const getTextWidth = (text: string, fontSize: number) => {
+    // 中文匹配正则
+    const pattern = new RegExp('[\u4E00-\u9FA5]+');
+    // 文本宽度
+    const textWidth = text.split('').reduce((pre, curLetter) => {
+      // 单个字符宽度
+      const letterWidth = pattern.test(curLetter) ? fontSize : getLetterWidth(curLetter, fontSize);
+      return pre + letterWidth;
+    }, 0);
+    return textWidth;
+  };
+
+  return getTextWidth(text, fontSize);
+}

+export { default as RuleChainsDesigner } from './index.vue';

+<script setup lang="ts">
+  import { Background, BackgroundVariant } from '@vue-flow/background';
+  import { Controls } from '@vue-flow/controls';
+  import { Panel, PanelPosition, VueFlow } from '@vue-flow/core';
+  import { computed, onMounted, Ref, ref, unref } from 'vue';
+  import './style';
+  import { BasicConnectionArrow, BasicConnectionLine, BasicEdge, Sidebar } from './src/components';
+  import type { FlowElRef } from './types/flow';
+  import { useDragCreate } from './hook/useDragCreate';
+  import { createFlowContext } from './hook/useFlowContext';
+  import { CreateNodeModal } from './src/components/CreateNodeModal';
+  import { useRuleFlow } from './hook/useRuleFlow';
+  import { CreateEdgeModal } from './src/components/CreateEdgeModal';
+  import { useFullScreen } from './hook/useFullScreen';
+  import { useSaveAndRedo } from './hook/useSaveAndRedo';
+  import { Icon } from '/@/components/Icon';
+  import { UpdateNodeDrawer } from './src/components/UpdateNodeDrawer';
+  import { UpdateEdgeDrawer } from './src/components/UpdateEdgeDrawer';
+
+  const getId = Number(Math.random().toString().substring(2)).toString(16);
+
+  const rootElRef = ref<Nullable<HTMLDivElement>>(null);
+
+  const createNodeModalActionType = ref<Nullable<InstanceType<typeof CreateNodeModal>>>(null);
+
+  const createEdgeModalActionType = ref<Nullable<InstanceType<typeof CreateEdgeModal>>>(null);
+
+  const updateNodeDrawerActionType = ref<Nullable<InstanceType<typeof UpdateNodeDrawer>>>(null);
+
+  const updateEdgeDrawerActionType = ref<Nullable<InstanceType<typeof UpdateEdgeDrawer>>>(null);
+
+  const flowElRef = ref<Nullable<FlowElRef>>(null);
+
+  const elements = ref([]);
+
+  const {
+    changeMarker,
+    getCurrentPageMetaData,
+    triggerChange,
+    handleApplyChange,
+    handleRedoChange,
+  } = useSaveAndRedo();
+
+  const { flowActionType } = useRuleFlow({
+    id: getId,
+    createNodeModalActionType,
+    createEdgeModalActionType,
+    updateEdgeDrawerActionType,
+    updateNodeDrawerActionType,
+    triggerChange,
+  });
+
+  const { handleOnDragOver, handleOnDrop } = useDragCreate({
+    el: flowElRef,
+    createNodeModalActionType,
+    flowActionType,
+    triggerChange,
+  });
+
+  const { handleFullScreen, getFullScreenIcon } = useFullScreen(
+    rootElRef as unknown as Ref<Nullable<HTMLDivElement>>
+  );
+
+  const handleGetContainer = () => unref(rootElRef)!;
+
+  const getDeleteDisplayState = computed(() => unref(flowActionType.getSelectedElements).length);
+
+  const handleDeleteSelectionElements = () => {
+    flowActionType.removeSelectedElements();
+  };
+
+  onMounted(() => {
+    getCurrentPageMetaData(flowActionType);
+  });
+
+  createFlowContext({
+    createEdgeModalActionType,
+    createNodeModalActionType,
+    updateEdgeDrawerActionType,
+    updateNodeDrawerActionType,
+    flowActionType,
+    triggerChange,
+  });
+</script>
+
+<template>
+  <main ref="rootElRef" class="w-full h-full flex relative" @drop="handleOnDrop">
+    <Sidebar />
+
+    <VueFlow
+      :id="getId"
+      ref="flowElRef"
+      v-model="elements"
+      class="w-full h-full"
+      @dragover="handleOnDragOver"
+    >
+      <template #connection-line="props">
+        <BasicConnectionLine v-bind="props" />
+      </template>
+      <template #edge-custom="props">
+        <BasicEdge v-bind="props" />
+      </template>
+
+      <BasicConnectionArrow />
+
+      <Background :variant="BackgroundVariant.Lines" :gap="25" pattern-color="#cfcfcf" />
+
+      <Controls :position="PanelPosition.BottomLeft" />
+
+      <Panel position="bottom-right" class="controls">
+        <section class="flex gap-4">
+          <button
+            :style="{ transform: `translateY(${getDeleteDisplayState ? 0 : '72px'})` }"
+            class="button-box-shadow w-14 h-14 flex justify-center items-center bg-orange-600 rounded-full transition-transform transform"
+            @click="handleDeleteSelectionElements"
+          >
+            <Icon class="!text-3xl !text-light-50" icon="mdi:delete" />
+          </button>
+          <button
+            class="button-box-shadow w-14 h-14 flex justify-center items-center bg-gray-400 rounded-full opacity-50"
+          >
+            <Icon class="!text-3xl !text-light-50" icon="carbon:debug" />
+          </button>
+          <button
+            :class="changeMarker ? '!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"
+            @click="handleApplyChange(flowActionType)"
+          >
+            <Icon class="!text-3xl !text-light-50" icon="mdi:tick" />
+          </button>
+          <button
+            :class="changeMarker ? '!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"
+            @click="handleRedoChange(flowActionType)"
+          >
+            <Icon class="!text-3xl !text-light-50" icon="ic:baseline-close" />
+          </button>
+        </section>
+      </Panel>
+
+      <Panel position="top-right">
+        <button
+          class="w-10 h-10 bg-gray-300 flex justify-center items-center rounded-full"
+          @click="handleFullScreen"
+        >
+          <Icon class="!text-2xl" :icon="getFullScreenIcon" />
+        </button>
+      </Panel>
+    </VueFlow>
+
+    <CreateNodeModal ref="createNodeModalActionType" :get-container="handleGetContainer" />
+    <CreateEdgeModal ref="createEdgeModalActionType" :get-container="handleGetContainer" />
+
+    <UpdateEdgeDrawer ref="updateEdgeDrawerActionType" />
+    <UpdateNodeDrawer ref="updateNodeDrawerActionType" />
+  </main>
+</template>
+
+<style scoped>
+  .button-box-shadow {
+    box-shadow: 0 3px 5px -1px #0003, 0 6px 10px 0 #00000024, 0 1px 18px 0 #0000001f;
+  }
+</style>

+import { cloneDeep } from 'lodash-es';
+import { PublicNodeItemClass } from '../../../types/node';
+import type {
+  CategoryConfigType,
+  CreateComponentType,
+  NodeItemConfigType,
+} from '../../../types/node';
+import { InputConfig } from '.';
+import { EntryCategoryConfig } from '..';
+
+export class Config extends PublicNodeItemClass implements CreateComponentType {
+  public config: NodeItemConfigType = cloneDeep(InputConfig);
+
+  public categoryConfig: CategoryConfigType = cloneDeep(EntryCategoryConfig);
+
+  constructor() {
+    super();
+  }
+}

+import { EntryComponentEnum } from '../../../enum/category';
+import { useCreateNodeKey } from '../../../hook/useCreateNodeKey';
+import type { NodeItemConfigType } from '../../../types/node';
+import { RuleNodeTypeEnum } from '../../index.type';
+
+const keys = useCreateNodeKey(EntryComponentEnum.INPUT);
+
+export const InputConfig: NodeItemConfigType = {
+  ...keys,
+  categoryType: RuleNodeTypeEnum.ENTRY,
+  clazz: EntryComponentEnum.INPUT,
+  maxConnectionPoint: 1,
+  backgroundColor: '#95E898',
+  configurationDescriptor: {
+    nodeDefinition: {
+      icon: 'material-symbols:input-sharp',
+      outEnabled: true,
+    },
+  },
+};

+import type { CategoryConfigType } from '../../types/node';
+import { RuleNodeTypeEnum } from '../index.type';
+
+export const EntryCategoryConfig: CategoryConfigType = {
+  category: RuleNodeTypeEnum.ENTRY,
+  backgroundColor: '#95E898',
+  title: '入口',
+  icon: 'material-symbols:input-sharp',
+  description: '使用配置条件筛选传入消息',
+};

+import { cloneDeep } from 'lodash-es';
+import { PublicNodeItemClass } from '../../../types/node';
+import type {
+  CategoryConfigType,
+  CreateComponentType,
+  NodeItemConfigType,
+} from '../../../types/node';
+import { FilterCategoryConfig } from '..';
+import { CheckAlarmStatusConfig } from '.';
+
+export class Config extends PublicNodeItemClass implements CreateComponentType {
+  public config: NodeItemConfigType = cloneDeep(CheckAlarmStatusConfig);
+
+  public categoryConfig: CategoryConfigType = cloneDeep(FilterCategoryConfig);
+
+  constructor() {
+    super();
+  }
+}

+import { NodeBindDataFieldEnum, NodeBindDataFieldNameEnum } from '../../../enum/node';
+import { FormSchema } from '/@/components/Form';
+import { AlarmStatus, AlarmStatusMean } from '/@/enums/alarmEnum';
+
+export const formSchemas: FormSchema[] = [
+  {
+    field: NodeBindDataFieldEnum.ALARM_STATUS_LIST,
+    component: 'Select',
+    label: NodeBindDataFieldNameEnum.ALARM_STATUS_LIST,
+    required: true,
+    componentProps: {
+      mode: 'multiple',
+      getPopupContainer: () => document.body,
+      placeholder: `请选择${NodeBindDataFieldNameEnum.ALARM_STATUS_LIST}`,
+      options: [
+        {
+          label: AlarmStatusMean[AlarmStatus.CLEARED_UN_ACK],
+          value: AlarmStatus.CLEARED_UN_ACK,
+        },
+        {
+          label: AlarmStatusMean[AlarmStatus.ACTIVE_UN_ACK],
+          value: AlarmStatus.ACTIVE_UN_ACK,
+        },
+        {
+          label: AlarmStatusMean[AlarmStatus.CLEARED_ACK],
+          value: AlarmStatus.CLEARED_ACK,
+        },
+        {
+          label: AlarmStatusMean[AlarmStatus.ACTIVE_ACK],
+          value: AlarmStatus.ACTIVE_ACK,
+        },
+      ],
+    },
+  },
+];

+<script lang="ts" setup>
+  import type { CreateModalDefineExposeType } from '../../../types';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchemas } from './create.config';
+  import { NodeData } from '../../../types/node';
+
+  defineProps<{
+    config: NodeData;
+  }>();
+
+  const [register, { validate, getFieldsValue, setFieldsValue, resetFields }] = useForm({
+    schemas: formSchemas,
+    showActionButtonGroup: false,
+  });
+
+  const getValue: CreateModalDefineExposeType['getFieldsValue'] = async () => {
+    await validate();
+    const value = getFieldsValue() || {};
+    return value;
+  };
+
+  const setValue: CreateModalDefineExposeType['setFieldsValue'] = (value) => {
+    resetFields();
+    setFieldsValue(value);
+  };
+
+  defineExpose({
+    setFieldsValue: setValue,
+    getFieldsValue: getValue,
+  } as CreateModalDefineExposeType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+import { FilterCategoryComponentEnum } from '../../../enum/category';
+import { useCreateNodeKey } from '../../../hook/useCreateNodeKey';
+import type { NodeItemConfigType } from '../../../types/node';
+import { RuleNodeTypeEnum } from '../../index.type';
+import { AlarmStatus } from '/@/enums/alarmEnum';
+
+const keys = useCreateNodeKey(FilterCategoryComponentEnum.CHECK_ALARM_STATUS);
+
+export interface CheckAlarmStatusDataType {
+  alarmStatusList: AlarmStatus[];
+}
+
+export const CheckAlarmStatusConfig: NodeItemConfigType = {
+  ...keys,
+  clazz: 'org.thingsboard.rule.engine.filter.TbCheckAlarmStatusNode',
+  categoryType: RuleNodeTypeEnum.FILTER,
+  name: 'check alarm status',
+  backgroundColor: '#ede550',
+  configurationDescriptor: {
+    nodeDefinition: {
+      icon: 'tabler:circuit-ground',
+      details:
+        'If the alarm status matches the specified one - msg is success if does not match - msg is failure.',
+      description: 'Checks alarm status.',
+      inEnabled: true,
+      outEnabled: true,
+      relationTypes: ['True', 'False', 'Failure'],
+      customRelations: false,
+      ruleChainNode: false,
+      defaultConfiguration: {
+        alarmStatusList: [AlarmStatus.ACTIVE_ACK, AlarmStatus.ACTIVE_UN_ACK],
+      },
+    },
+  },
+};

+import type { CategoryConfigType, NodeItemConfigType } from '../../types/node';
+import { RuleNodeTypeEnum } from '../index.type';
+import { CheckAlarmStatusConfig } from './CheckAlarmStatus';
+
+export const FilterCategoryConfig: CategoryConfigType = {
+  category: RuleNodeTypeEnum.FILTER,
+  backgroundColor: '#ede550',
+  title: '筛选器',
+  icon: 'tabler:circuit-ground',
+  description: '使用配置条件筛选传入消息',
+};
+
+export const FilterComponents: NodeItemConfigType[] = [CheckAlarmStatusConfig];

+import { BasicConnectionModalEnum } from '../enum';
+import { FetchNodeComFlagTypeENum } from '../enum/node';
+import type { CategoryConfigType, NodeItemConfigType } from '../types/node';
+import { FilterCategoryConfig, FilterComponents } from './Filter';
+import { RuleNodeTypeEnum } from './index.type';
+
+const createModules = import.meta.glob('../packages/**/create.vue');
+const connectionModules = import.meta.glob('../packages/**/connection.vue');
+
+const BasicConnectionComponent = {
+  [BasicConnectionModalEnum.BASIC]: () =>
+    import('../src/components/CreateEdgeModal/BasicRelations.vue'),
+  [BasicConnectionModalEnum.CUSTOM]: () =>
+    import('../src/components/CreateEdgeModal/CustomRelations.vue'),
+};
+
+export const fetchNodeComponent = (key: string, flag: FetchNodeComFlagTypeENum) => {
+  const modules =
+    flag === FetchNodeComFlagTypeENum.CONNECTION_MODAL ? connectionModules : createModules;
+  const modulesName = Object.keys(modules);
+  const path = modulesName.find((item) => {
+    const temp = item.split('/');
+    return temp[temp.length - 2] === key;
+  });
+  return path ? modules[path] : null;
+};
+
+export const fetchConnectionComponent = async (config: NodeItemConfigType) => {
+  const { configurationDescriptor } = config;
+  const { nodeDefinition } = configurationDescriptor;
+  const { customRelations } = nodeDefinition;
+  return customRelations
+    ? BasicConnectionComponent[BasicConnectionModalEnum.CUSTOM]
+    : BasicConnectionComponent[BasicConnectionModalEnum.BASIC];
+};
+
+export const fetchCreateComponent = async (config: NodeItemConfigType) => {
+  const { key } = config;
+  return fetchNodeComponent(key, FetchNodeComFlagTypeENum.CREATE_MODAL);
+};
+
+export const allComponents: Record<
+  RuleNodeTypeEnum,
+  { category: CategoryConfigType; components: NodeItemConfigType[] }
+> = {
+  [RuleNodeTypeEnum.FILTER]: {
+    category: FilterCategoryConfig,
+    components: FilterComponents,
+  },
+};

+export enum RuleNodeTypeEnum {
+  FILTER = 'FILTER',
+  ENTRY = 'ENTRY',
+}

+<script lang="ts" setup>
+  import { MarkerArrowEnum } from '../../../enum';
+</script>
+
+<template>
+  <svg>
+    <defs>
+      <marker
+        :id="MarkerArrowEnum.BASIC_ARROW"
+        markerWidth="5"
+        markerHeight="5"
+        viewBox="-6 -6 12 12"
+        refX="5"
+        refY="0"
+        markerUnits="strokeWidth"
+        orient="auto"
+      >
+        <polygon points="-2,0 -5,5 5,0 -5,-5" stroke="gray" fill="gray" stroke-width="1px" />
+      </marker>
+      <marker
+        :id="MarkerArrowEnum.BASIC_ARROW_SELECTED"
+        markerWidth="5"
+        markerHeight="5"
+        viewBox="-6 -6 12 12"
+        refX="5"
+        refY="0"
+        markerUnits="strokeWidth"
+        orient="auto"
+      >
+        <polygon points="-2,0 -5,5 5,0 -5,-5" stroke="red" fill="red" stroke-width="1px" />
+      </marker>
+    </defs>
+  </svg>
+</template>

+<script setup lang="ts">
+  import { BaseEdge, ConnectionLineProps, getBezierPath } from '@vue-flow/core';
+  import { computed } from 'vue';
+
+  type CustomConnectionLineProps = Partial<ConnectionLineProps>;
+
+  const props = defineProps<CustomConnectionLineProps>();
+
+  const path = computed(() => getBezierPath(props as unknown as Required<ConnectionLineProps>));
+</script>
+
+<template>
+  <BaseEdge v-bind="props" :path="path[0]" :marker-end="markerEnd" />
+</template>

+<script setup lang="ts">
+  import { BaseEdge, EdgeLabelRenderer, getBezierPath } from '@vue-flow/core';
+  import type { EdgeProps } from '@vue-flow/core';
+  import { computed, toRaw, unref } from 'vue';
+  import type { EdgeData, NodeData } from '../../../types/node';
+  import { useConnectionFocus } from '../../../hook/useConnectionFocus';
+  import { useFlowContext } from '../../../hook/useFlowContext';
+  import { useTextWidth } from '../../../hook/useTextWidth';
+
+  const props = defineProps<EdgeProps>();
+
+  const { flowActionType, updateEdgeDrawerActionType } = useFlowContext();
+
+  const { getMarkerEnd, getSelected } = useConnectionFocus(props);
+
+  const getData = computed(() => props.data as EdgeData);
+
+  const getLabel = computed(() => {
+    let { data } = unref(getData);
+    const type = data?.type || [];
+    return type.join(' / ');
+  });
+
+  const getLabelWidth = computed(() => useTextWidth(unref(getLabel), 14) + 10);
+
+  const path = computed(() => getBezierPath(props));
+
+  const handleOpenEdit = async () => {
+    const { flag, data } =
+      (await unref(updateEdgeDrawerActionType)?.open(
+        toRaw(unref(props.sourceNode?.data as unknown as NodeData)),
+        toRaw(unref(props.data as EdgeData))
+      )) || {};
+
+    if (!flag) return;
+
+    const currentEdge = flowActionType.findEdge(props.id);
+
+    (currentEdge!.data as EdgeData).data = data;
+
+    console.log(props);
+  };
+
+  const handleDelete = () => {
+    flowActionType?.removeEdges(props.id);
+  };
+</script>
+
+<template>
+  <BaseEdge
+    v-bind="props"
+    :path="path[0]"
+    :marker-end="getMarkerEnd"
+    :label="getLabel"
+    :label-x="path[1]"
+    :label-y="path[2]"
+    :label-style="{ fill: '#003a79', fontWeight: 700, fontSize: 14 }"
+    :label-show-bg="true"
+    :label-bg-style="{ fill: '#fff', stroke: '#003a79', strokeWidth: 2, width: getLabelWidth }"
+    :label-bg-padding="[5, 5]"
+    :label-bg-border-radius="10"
+  />
+  <EdgeLabelRenderer>
+    <section
+      :style="{
+        pointerEvents: 'all',
+        position: 'absolute',
+        transform: `translate(0, -3rem) translate(${path[1]}px,${path[2]}px)`,
+      }"
+      class="nodrag nopan label-container relative"
+    >
+      <div
+        v-if="getSelected"
+        class="actions flex absolute gap-1 -top-full transform translate-y-1 right w-16 h-7 justify-center"
+      >
+        <div
+          class="border-2 rounded-1 border-light-50 bg-red-500 w-7 h-7 flex justify-center items-center cursor-pointer"
+          @click="handleOpenEdit"
+        >
+          <Icon icon="mdi:lead-pencil" color="#fff" />
+        </div>
+        <div
+          class="border-2 rounded-1 border-light-50 bg-red-500 w-7 h-7 flex justify-center items-center cursor-pointer"
+          @click="handleDelete"
+        >
+          <Icon icon="mdi:close" color="#fff" />
+        </div>
+      </div>
+    </section>
+  </EdgeLabelRenderer>
+</template>

+<script lang="ts" setup>
+  import type { NodeProps } from '@vue-flow/core';
+  import { Handle, Position } from '@vue-flow/core';
+  import { computed, unref } from 'vue';
+  import { Tooltip } from 'ant-design-vue';
+  import { Icon } from '/@/components/Icon';
+  import type { NodeData, NodeDefinition } from '../../../types/node';
+  import BasicToolbar from './BasicToolbar.vue';
+
+  const props = defineProps<NodeProps>();
+
+  const getData = computed(() => props.data as NodeData);
+
+  const getNodeDefinition = computed<NodeDefinition>(() => {
+    const { config } = unref(getData);
+    const { configurationDescriptor } = config || {};
+    const { nodeDefinition } = configurationDescriptor || {};
+    return nodeDefinition || {};
+  });
+
+  const getHasInEnabled = computed(() => unref(getNodeDefinition).inEnabled);
+
+  const getHasOutEnabled = computed(() => unref(getNodeDefinition).outEnabled);
+
+  const getLabel = computed(() => {
+    const { config } = unref(getData);
+
+    return config?.name;
+  });
+
+  const getIcon = computed(() => {
+    const { icon } = unref(getNodeDefinition);
+    const { category } = unref(getData);
+    const { icon: categoryIcon } = category || {};
+    return icon || categoryIcon || 'tabler:circuit-ground';
+  });
+
+  const getName = computed(() => {
+    const { data } = unref(getData);
+    return data?.name;
+  });
+
+  const getBackgroundColor = computed(() => {
+    const { config, category } = unref(getData);
+    const { backgroundColor: categoryBackgroundColor } = category || {};
+    const { backgroundColor } = config || {};
+    return backgroundColor || categoryBackgroundColor;
+  });
+</script>
+
+<template>
+  <Tooltip color="#fff" :mouse-enter-delay="0.5" placement="right">
+    <template #title>
+      <section class="text-dark-900 text-xs">
+        <p class="mb-0 font-bold"> {{ getData?.data?.name }} </p>
+        <p class="mb-0 mt-2 text-gray-500 italic">
+          {{ getData.category?.title }}
+          {{ getData?.category?.title && getData.config?.name ? '-' : '' }}
+          {{ getData.config?.name }}
+        </p>
+        <p class="mt-1 mb-0 text-gray-500">{{ getData.data?.description }}</p>
+      </section>
+    </template>
+    <main
+      class="basic-node-hover flex items-center w-44 h-12 rounded border px-4 py-2 border-gray-700"
+      :style="{ backgroundColor: getBackgroundColor }"
+    >
+      <div>
+        <Icon class="text-2xl" :icon="getIcon" />
+      </div>
+      <BasicToolbar v-bind="$props" />
+      <div class="flex text-xs flex-col ml-2 text-left truncate">
+        <span class="text-gray-700 w-full truncate">{{ getLabel }}</span>
+        <span class="w-full truncate">{{ getName }}</span>
+      </div>
+      <Handle v-if="getHasInEnabled" type="source" :position="Position.Left" />
+      <Handle v-if="getHasOutEnabled" type="source" :position="Position.Right" />
+    </main>
+  </Tooltip>
+</template>
+
+<style lang="css" scoped>
+  .basic-node-hover::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    display: none;
+    background-color: #00000027;
+  }
+
+  .basic-node-hover:hover::before {
+    display: block;
+  }
+</style>

+<script lang="ts" setup>
+  import { Icon } from '/@/components/Icon';
+  import { NodeProps, Position } from '@vue-flow/core';
+  import { NodeToolbar } from '@vue-flow/node-toolbar';
+  import { computed, toRaw, unref } from 'vue';
+  import { useFlowContext } from '../../../hook/useFlowContext';
+  import type { NodeData } from '../../../types/node';
+
+  const props = defineProps<NodeProps>();
+
+  const getData = computed(() => props.data as NodeData);
+
+  const { updateNodeDrawerActionType, flowActionType } = useFlowContext();
+
+  const handleOpenEdit = async () => {
+    const { flag, data } =
+      (await unref(updateNodeDrawerActionType)?.open(toRaw(unref(getData)))) || {};
+
+    if (!flag) return;
+
+    const currentNode = flowActionType?.findNode(props.id);
+
+    (currentNode!.data as NodeData).data = data;
+  };
+
+  const handleDelete = () => {
+    flowActionType?.removeNodes(props.id);
+  };
+</script>
+
+<template>
+  <NodeToolbar :is-visible="data.toolbarVisible" :position="Position.Top" align="end" :offset="2">
+    <section class="flex gap-1 transform translate-y-1">
+      <div
+        class="border-2 rounded-1 border-light-50 bg-red-500 w-7 h-7 flex justify-center items-center cursor-pointer"
+        @click="handleOpenEdit"
+      >
+        <Icon icon="mdi:lead-pencil" color="#fff" />
+      </div>
+      <div
+        class="border-2 rounded-1 border-light-50 bg-red-500 w-7 h-7 flex justify-center items-center cursor-pointer"
+        @click="handleDelete"
+      >
+        <Icon icon="mdi:close" color="#fff" />
+      </div>
+    </section>
+  </NodeToolbar>
+</template>

+export { default as BasicEdge } from './BasicEdge.vue';
+export { default as BasicNode } from './BasicNode.vue';
+export { default as BasicConnectionLine } from './BasicConnectionLine.vue';
+export { default as BasicConnectionArrow } from './BasicConnectionArrow.vue';

+<script lang="ts" setup>
+  import { unref } from 'vue';
+  import { EdgeBindDataFieldEnum, EdgeBindDataFieldNameEnum } from '../../../enum/node';
+  import { ConnectionModalDefineExposeType } from '../../../types';
+  import { NodeData } from '../../../types/node';
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
+
+  defineProps<{
+    config: NodeData;
+  }>();
+
+  const getSchemas = (options: string[] = []): FormSchema[] => {
+    return [
+      {
+        field: EdgeBindDataFieldEnum.TYPE,
+        component: 'Select',
+        label: EdgeBindDataFieldNameEnum.TYPE,
+        componentProps: {
+          getPopupContainer: () => document.body,
+          options: unref(options).map((item) => ({ label: item, value: item })),
+          mode: 'multiple',
+          placeholder: '请选择链接标签',
+        },
+      },
+    ];
+  };
+
+  const [register, { updateSchema, setFieldsValue, getFieldsValue }] = useForm({
+    showActionButtonGroup: false,
+    schemas: getSchemas(),
+  });
+
+  const getValue: ConnectionModalDefineExposeType['getFieldsValue'] = async () => {
+    return getFieldsValue();
+  };
+
+  const setValue: ConnectionModalDefineExposeType['setFieldsValue'] = async (value, nodeData) => {
+    const { type } = value || {};
+    const relationTypes =
+      unref(nodeData)?.config?.configurationDescriptor.nodeDefinition.relationTypes;
+    await updateSchema(getSchemas(relationTypes));
+    setFieldsValue(type);
+  };
+
+  defineExpose({
+    getFieldsValue: getValue,
+    setFieldsValue: setValue,
+  } as ConnectionModalDefineExposeType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+<script lang="ts" setup></script>
+
+<template>
+  <div>自定义</div>
+</template>

+export { default as CreateEdgeModal } from './index.vue';
+export { default as BasicRelations } from './BasicRelations.vue';
+export { default as CustomRelations } from './CustomRelations.vue';

+<script lang="ts" setup>
+  import { Spin, Empty } from 'ant-design-vue';
+  import { DataActionModeEnum } from '/@/enums/toolEnum';
+  import { BasicModal } from '/@/components/Modal';
+  import { useAwaitPopupWindowBindData } from '../../../hook/useAwaitPopupWindowBindData';
+  import { ElementsTypeEnum } from '../../../enum';
+
+  defineProps<{
+    getContainer: () => any;
+  }>();
+
+  const {
+    visible,
+    nodeData,
+    spinning,
+    shadowComponent,
+    getComponentKey,
+    createComponentEl,
+    open,
+    handleSubmit,
+    handleCancel,
+    handleOnMounted,
+  } = useAwaitPopupWindowBindData({ type: ElementsTypeEnum.EDGE, mode: DataActionModeEnum.CREATE });
+
+  defineExpose({ open });
+</script>
+
+<template>
+  <BasicModal
+    v-model:visible="visible"
+    title="添加链接"
+    :get-container="getContainer"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <Spin :spinning="spinning">
+      <component
+        :is="shadowComponent"
+        v-if="shadowComponent"
+        ref="createComponentEl"
+        :config="nodeData"
+        :key="getComponentKey"
+        @vue:mounted="handleOnMounted"
+      />
+      <Empty v-if="!shadowComponent" description="未找到链接组件" />
+    </Spin>
+  </BasicModal>
+</template>

+import { NodeBindDataFieldEnum, NodeBindDataFieldNameEnum } from '../../../enum/node';
+import { FormSchema } from '/@/components/Form';
+
+export const TopFormSchemas: FormSchema[] = [
+  {
+    field: NodeBindDataFieldEnum.NAME,
+    component: 'Input',
+    label: NodeBindDataFieldNameEnum.NAME,
+    required: true,
+    colProps: {
+      span: 16,
+    },
+    componentProps: {
+      placeholder: `请输入${NodeBindDataFieldNameEnum.NAME}`,
+    },
+  },
+  {
+    field: NodeBindDataFieldEnum.DEBUG_MODE,
+    component: 'Checkbox',
+    label: NodeBindDataFieldNameEnum.DEBUG_MODE,
+    colProps: {
+      offset: 2,
+      span: 6,
+    },
+    itemProps: {
+      labelCol: { span: 14 },
+      wrapperCol: { span: 10 },
+    },
+    componentProps: {
+      placeholder: `请输入${NodeBindDataFieldNameEnum.NAME}`,
+    },
+  },
+];
+
+export const BottomFormSchemas: FormSchema[] = [
+  {
+    field: NodeBindDataFieldEnum.DESCRIPTION,
+    component: 'InputTextArea',
+    label: NodeBindDataFieldNameEnum.DESCRIPTION,
+    componentProps: {
+      placeholder: `请输入${NodeBindDataFieldNameEnum.DESCRIPTION}`,
+      autoSize: true,
+    },
+  },
+];

+export { default as CreateNodeModal } from './index.vue';

+<script lang="ts" setup>
+  import { Empty, Spin } from 'ant-design-vue';
+  import { BasicModal } from '/@/components/Modal';
+  import { useAwaitPopupWindowBindData } from '../../../hook/useAwaitPopupWindowBindData';
+  import { ElementsTypeEnum } from '../../../enum';
+  import { DataActionModeEnum } from '/@/enums/toolEnum';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { BottomFormSchemas, TopFormSchemas } from './config';
+
+  defineProps<{
+    getContainer: () => any;
+  }>();
+
+  const [topFormRegister, topFormActionType] = useForm({
+    schemas: TopFormSchemas,
+    showActionButtonGroup: false,
+  });
+
+  const [bottomFormRegister, bottomFormActionType] = useForm({
+    schemas: BottomFormSchemas,
+    showActionButtonGroup: false,
+  });
+
+  const {
+    visible,
+    spinning,
+    nodeData,
+    shadowComponent,
+    getComponentKey,
+    createComponentEl,
+    open,
+    handleSubmit,
+    handleCancel,
+    handleOnMounted,
+  } = useAwaitPopupWindowBindData({ type: ElementsTypeEnum.NODE, mode: DataActionModeEnum.CREATE });
+
+  const validate = async () => {
+    await topFormActionType.validate();
+    await bottomFormActionType.validate();
+  };
+
+  const getFieldsValue = () => {
+    const topValue = topFormActionType.getFieldsValue() || {};
+    const bottomValue = bottomFormActionType.getFieldsValue() || {};
+    return {
+      ...topValue,
+      ...bottomValue,
+    };
+  };
+
+  const resetFieldsValue = () => {
+    topFormActionType.resetFields();
+    bottomFormActionType.resetFields();
+  };
+
+  const handleModalOk = async () => {
+    await validate();
+    const data = getFieldsValue();
+    await handleSubmit(data);
+    resetFieldsValue();
+  };
+
+  defineExpose({ open });
+</script>
+
+<template>
+  <BasicModal
+    v-model:visible="visible"
+    :title="`添加规则节点: ${nodeData?.config?.name}`"
+    :get-container="getContainer"
+    @ok="handleModalOk"
+    @cancel="handleCancel"
+  >
+    <Spin :spinning="spinning">
+      <section v-if="shadowComponent" class="w-full h-full">
+        <BasicForm @register="topFormRegister" />
+        <component
+          :is="shadowComponent"
+          ref="createComponentEl"
+          :key="getComponentKey"
+          :config="nodeData"
+          @vue:mounted="handleOnMounted"
+        />
+        <BasicForm @register="bottomFormRegister" />
+      </section>
+      <Empty v-if="!shadowComponent" description="未找到创建组件" />
+    </Spin>
+  </BasicModal>
+</template>

+<script lang="ts" setup>
+  import { Collapse, Tooltip } from 'ant-design-vue';
+  import { computed, ref } from 'vue';
+  import { allComponents } from '../../../packages';
+  import { RuleNodeTypeEnum } from '../../../packages/index.type';
+  import ItemPanel from './ItemPanel.vue';
+  import { Icon } from '/@/components/Icon';
+
+  const props = defineProps<{
+    searchText?: string;
+  }>();
+
+  const activeKey = ref(Object.values(RuleNodeTypeEnum));
+
+  const getCategory = computed(() => {
+    const { searchText } = props;
+    let components = Object.values(allComponents);
+    searchText &&
+      (components = components.map((item) => ({
+        ...item,
+        components: item.components.filter((temp) => temp.name.includes(searchText)),
+      })));
+    return components;
+  });
+</script>
+
+<template>
+  <Collapse v-model:activeKey="activeKey" class="rule-chain-sidebar">
+    <Collapse.Panel v-for="item in getCategory" :key="item.category.category" :show-arrow="false">
+      <template #header>
+        <Tooltip placement="right" color="#fff">
+          <template #title>
+            <p class="text-dark-900 font-bold text-xs m-0 py-1">
+              {{ item.category.title }}
+            </p>
+            <p class="text-gray-500 text-xs m-0 py-1">
+              {{ item.category.description }}
+            </p>
+          </template>
+          <div class="flex items-center">
+            <Icon class="text-2xl" icon="tabler:circuit-ground" />
+            <div class="flex-1 ml-2 select-none">
+              {{ item.category.title }}
+            </div>
+            <Icon
+              class="text-2xl transform transition-transform"
+              icon="ep:arrow-down"
+              :class="activeKey.includes(item.category.category!) ? '' : 'rotate-180'"
+            />
+          </div>
+        </Tooltip>
+      </template>
+      <ItemPanel :components="item.components" :category="item.category" />
+    </Collapse.Panel>
+  </Collapse>
+</template>
+
+<style scoped>
+  .rule-chain-sidebar {
+    background-color: transparent !important;
+  }
+
+  .rule-chain-sidebar:deep(.ant-collapse-content-box) {
+    padding: 0;
+  }
+
+  .rule-chain-sidebar:deep(.ant-collapse-header) {
+    background-color: #e6e6e6 !important;
+  }
+
+  .rule-chain-sidebar:deep(.ant-collapse-content) {
+    background-color: transparent;
+  }
+</style>

+<script lang="ts" setup>
+  import type { CategoryConfigType, NodeItemConfigType } from '../../../types/node';
+  import SidebarNodeItem from './SidebarNodeItem.vue';
+
+  defineProps<{
+    category?: CategoryConfigType;
+    components?: NodeItemConfigType[];
+  }>();
+</script>
+
+<template>
+  <section
+    class="rule-designer-collapse-container w-full flex items-center flex-col gap-2 relative"
+    :class="components?.length ? 'p-4' : 'p-0'"
+  >
+    <SidebarNodeItem
+      v-for="item in components"
+      :key="item.key"
+      :config="item"
+      :category="category"
+    />
+  </section>
+</template>
+
+<style scoped>
+  .rule-designer-collapse-container::after {
+    position: absolute;
+    content: '';
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    top: 0;
+    background-color: #fff;
+  }
+</style>

+<script lang="ts" setup>
+  import { Icon } from '/@/components/Icon';
+  import { computed, ref, toRaw, unref } from 'vue';
+  import { Tooltip } from 'ant-design-vue';
+  import type { NodeData } from '../../../types/node';
+  import { EFFECT_SYMBOL, TRANSFER_DATA_KEY } from '../../../hook/useDragCreate';
+
+  const props = defineProps<NodeData>();
+
+  const visible = ref(false);
+
+  const getNodeDefinition = computed(() => {
+    const { config } = props;
+    const { configurationDescriptor } = config || {};
+    const { nodeDefinition } = configurationDescriptor || {};
+    return nodeDefinition || {};
+  });
+
+  const getIcon = computed(() => {
+    const { icon } = unref(getNodeDefinition);
+    const { icon: categoryIcon } = props.category || {};
+    return icon || categoryIcon || 'tabler:circuit-ground';
+  });
+
+  const getBackgroundColor = computed(() => {
+    const { config, category } = props;
+    const { backgroundColor } = config || {};
+    const { backgroundColor: categoryBackgroundColor } = category || {};
+    return backgroundColor || categoryBackgroundColor;
+  });
+
+  const handleOnDragStart = (event: DragEvent, options: object) => {
+    if (event.dataTransfer) {
+      event.dataTransfer.setData(
+        TRANSFER_DATA_KEY,
+        JSON.stringify({ offsetX: event.offsetX, offsetY: event.offsetY, options })
+      );
+      event.dataTransfer.effectAllowed = EFFECT_SYMBOL;
+    }
+  };
+
+  const handleDragStart = (event: DragEvent) => {
+    visible.value = false;
+    handleOnDragStart(event, toRaw(unref(props)));
+  };
+</script>
+
+<template>
+  <Tooltip
+    v-model:visible="visible"
+    placement="left"
+    color="#fff"
+    trigger="hover"
+    :mouse-enter-delay="0.3"
+  >
+    <template #title>
+      <section class="text-dark-900">
+        <h1 class="font-bold">
+          {{ config?.name }}
+        </h1>
+        <p class="italic text-gray-600">
+          {{ getNodeDefinition.description }}
+        </p>
+        <p>{{ getNodeDefinition.details }}</p>
+      </section>
+    </template>
+    <main
+      :draggable="true"
+      class="sidebar-basic-node flex items-center cursor-pointer w-44 h-12 rounded border relative px-4 py-2 border-gray-700 z-10"
+      :style="{ backgroundColor: getBackgroundColor }"
+      @dragstart="handleDragStart"
+    >
+      <div>
+        <Icon class="text-2xl" :icon="getIcon" />
+      </div>
+      <div class="flex text-xs flex-col ml-2 text-left">
+        <span class="text-gray-700 w-full truncate">{{ config?.name }}</span>
+        <!-- <span class="w-full truncate">name</span> -->
+      </div>
+      <div class="w-4 h-4 bg-dark-50 rounded-1 border absolute -left-2 border-light-50"></div>
+      <div class="w-4 h-4 bg-dark-50 rounded-1 border absolute -right-2 border-light-50"></div>
+    </main>
+  </Tooltip>
+</template>
+
+<style lang="css" scoped>
+  .sidebar-basic-node::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    display: none;
+    background-color: #00000027;
+  }
+
+  .sidebar-basic-node:hover::before {
+    display: block;
+  }
+</style>

+export { default as Sidebar } from './index.vue';

+<script lang="ts" setup>
+  import { Icon } from '/@/components/Icon';
+  import type { CSSProperties } from 'vue';
+  import { computed, ref, unref } from 'vue';
+  import { Tooltip, Input } from 'ant-design-vue';
+  import CategoryPanel from './CategoryPanel.vue';
+
+  const expand = ref(true);
+
+  const searchText = ref('');
+
+  const getSidebarStyle = computed<CSSProperties>(() => {
+    return {
+      flex: `0 0 ${unref(expand) ? '250px' : 0}`,
+      width: unref(expand) ? '250px' : 0,
+    };
+  });
+
+  const handleExpandMenu = () => {
+    expand.value = !unref(expand);
+  };
+</script>
+
+<template>
+  <main
+    class="rule-designer-sidebar z-50 shadow shadow-lg shadow-dark-600 transition-all overflow-hidden relative"
+    :style="getSidebarStyle"
+  >
+    <section class="bg-sky-900 text-light-50 px-2 h-12 flex items-center">
+      <Tooltip title="查找节点">
+        <div
+          class="w-8 h-8 cursor-pointer flex justify-center items-center rounded-1 hover:bg-opacity-90"
+        >
+          <Icon icon="ion:search" class="text-xl" />
+        </div>
+      </Tooltip>
+      <div>
+        <Input
+          v-model:value="searchText"
+          placeholder="查找节点"
+          style="border-bottom: 1px solid #fff !important"
+          class="!border-none !border-light-50 !outline-none !bg-transparent !focus:border-none !focus:shadow-none !text-light-50"
+        />
+      </div>
+      <Tooltip title="关闭">
+        <div
+          class="w-8 h-8 cursor-pointer flex justify-center items-center rounded-1 hover:bg-opacity-90"
+        >
+          <Icon icon="uiw:left" class="text-2xl" @click="handleExpandMenu" />
+        </div>
+      </Tooltip>
+    </section>
+    <CategoryPanel :search-text="searchText" />
+  </main>
+  <Tooltip title="打开节点库">
+    <div
+      class="absolute top-2 left-2 z-20 bg-sky-800 w-10 h-10 cursor-pointer flex justify-center items-center rounded-1 opacity-50"
+      @click="handleExpandMenu"
+    >
+      <Icon icon="ion:menu-sharp" class="!text-2xl !text-light-50" />
+    </div>
+  </Tooltip>
+</template>
+
+<style scoped>
+  .rule-designer-sidebar::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: #fff;
+  }
+</style>

+export { default as UpdateEdgeDrawer } from './index.vue';

+<script lang="ts" setup>
+  import { BasicDrawer } from '/@/components/Drawer';
+  import { Spin, Empty } from 'ant-design-vue';
+  import { useAwaitPopupWindowBindData } from '../../../hook/useAwaitPopupWindowBindData';
+  import { ElementsTypeEnum } from '../../../enum';
+  import { DataActionModeEnum } from '/@/enums/toolEnum';
+
+  const {
+    visible,
+    spinning,
+    nodeData,
+    createComponentEl,
+    shadowComponent,
+    getComponentKey,
+    open,
+    handleCancel,
+    handleSubmit,
+    handleOnMounted,
+  } = useAwaitPopupWindowBindData({ mode: DataActionModeEnum.UPDATE, type: ElementsTypeEnum.EDGE });
+
+  defineExpose({
+    open,
+  });
+</script>
+
+<template>
+  <BasicDrawer
+    v-model:visible="visible"
+    width="700px"
+    showFooter
+    showOkBtn
+    showCancelBtn
+    @ok="handleSubmit"
+    @close="handleCancel"
+  >
+    <template #title>
+      <h2 class="font-bold text-2xl truncate">{{ nodeData?.data?.name }}</h2>
+      <p class="mb-0 text-gray-700">规则节点详情</p>
+    </template>
+    <Spin :spinning="spinning">
+      <component
+        :is="shadowComponent"
+        v-if="shadowComponent"
+        ref="createComponentEl"
+        :config="nodeData"
+        :key="getComponentKey"
+        @vue:mounted="handleOnMounted"
+      />
+      <Empty v-if="!shadowComponent" description="未找到链接组件" />
+    </Spin>
+  </BasicDrawer>
+</template>

+<script lang="ts" setup></script>
+
+<template>
+  <div>事件统计</div>
+</template>

+<script lang="ts" setup>
+  import { NodeData } from '../../../types/node';
+
+  defineProps<{ nodeData?: NodeData }>();
+</script>
+
+<template>
+  <section>
+    <h1 class="font-bold text-lg">{{ nodeData?.config?.name }}</h1>
+    <p class="text-gray-600 italic">
+      {{ nodeData?.config?.configurationDescriptor.nodeDefinition.description }}</p
+    >
+    <p>{{ nodeData?.config?.configurationDescriptor.nodeDefinition.details }}</p>
+  </section>
+</template>

+export enum TabsPanelEnum {
+  DETAIL = 'DETAIL',
+  EVENT = 'EVENT',
+  HELP = 'HELP',
+}
+
+export enum TabsPanelNameEnum {
+  DETAIL = '详情',
+  EVENT = '事件',
+  HELP = '帮助',
+}

+export { default as UpdateNodeDrawer } from './index.vue';

+<script lang="ts" setup>
+  import { BasicDrawer } from '/@/components/Drawer';
+  import { Tabs, Spin, Empty } from 'ant-design-vue';
+  import { TabsPanelEnum, TabsPanelNameEnum } from './config';
+  import { useAwaitPopupWindowBindData } from '../../../hook/useAwaitPopupWindowBindData';
+  import HelpMessage from './HelpMessage.vue';
+  import EventTotal from './EventTotal.vue';
+  import { DataActionModeEnum } from '/@/enums/toolEnum';
+  import { ElementsTypeEnum } from '../../../enum';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { BottomFormSchemas, TopFormSchemas } from '../CreateNodeModal/config';
+  import { toRaw, unref } from 'vue-demi';
+
+  const [topFormRegister, topFormActionType] = useForm({
+    schemas: TopFormSchemas,
+    showActionButtonGroup: false,
+  });
+
+  const [bottomFormRegister, bottomFormActionType] = useForm({
+    schemas: BottomFormSchemas,
+    showActionButtonGroup: false,
+  });
+
+  const {
+    visible,
+    spinning,
+    nodeData,
+    getComponentKey,
+    shadowComponent,
+    createComponentEl,
+    open,
+    handleCancel,
+    handleSubmit,
+    handleOnMounted,
+  } = useAwaitPopupWindowBindData({ mode: DataActionModeEnum.UPDATE, type: ElementsTypeEnum.NODE });
+
+  const handleTopFormMounted = () => {
+    const data = unref(nodeData)?.data || {};
+    topFormActionType.setFieldsValue(toRaw(unref(data)));
+  };
+
+  const handleBottomFormMounted = () => {
+    const data = unref(nodeData)?.data || {};
+    bottomFormActionType.setFieldsValue(toRaw(unref(data)));
+  };
+
+  const validate = async () => {
+    await topFormActionType.validate();
+    await bottomFormActionType.validate();
+  };
+
+  const getFieldsValue = () => {
+    const topValue = topFormActionType.getFieldsValue() || {};
+    const bottomValue = bottomFormActionType.getFieldsValue() || {};
+    return {
+      ...topValue,
+      ...bottomValue,
+    };
+  };
+
+  const resetFieldsValue = () => {
+    topFormActionType.resetFields();
+    bottomFormActionType.resetFields();
+  };
+
+  const handleModalOk = async () => {
+    await validate();
+    const data = getFieldsValue();
+    await handleSubmit(data);
+    resetFieldsValue();
+  };
+
+  defineExpose({
+    open,
+  });
+</script>
+
+<template>
+  <BasicDrawer
+    v-model:visible="visible"
+    width="700px"
+    showFooter
+    showCancelBtn
+    showOkBtn
+    @ok="handleModalOk"
+    @close="handleCancel"
+  >
+    <template #title>
+      <h2 class="font-bold text-2xl truncate">{{ nodeData?.data?.name }}</h2>
+      <p class="mb-0 text-gray-700">
+        <span> {{ nodeData?.category?.title }}</span>
+        <span class="mx-1">-</span>
+        <span>{{ nodeData?.config?.name }}</span>
+      </p>
+    </template>
+    <Tabs>
+      <Tabs.TabPane :tab="TabsPanelNameEnum[TabsPanelEnum.DETAIL]" :key="TabsPanelEnum.DETAIL">
+        <Spin :spinning="spinning">
+          <section v-if="shadowComponent" class="w-full h-full">
+            <BasicForm @register="topFormRegister" @vue:mounted="handleTopFormMounted" />
+            <component
+              :is="shadowComponent"
+              ref="createComponentEl"
+              :config="nodeData"
+              :key="getComponentKey"
+              @vue:mounted="handleOnMounted"
+            />
+            <BasicForm @register="bottomFormRegister" @vue:mounted="handleBottomFormMounted" />
+          </section>
+          <Empty v-if="!shadowComponent" description="未找到链接组件" />
+        </Spin>
+      </Tabs.TabPane>
+      <Tabs.TabPane :tab="TabsPanelNameEnum[TabsPanelEnum.EVENT]" :key="TabsPanelEnum.EVENT">
+        <EventTotal />
+      </Tabs.TabPane>
+      <Tabs.TabPane :tab="TabsPanelNameEnum[TabsPanelEnum.HELP]" :key="TabsPanelEnum.HELP">
+        <HelpMessage :nodeData="nodeData" />
+      </Tabs.TabPane>
+    </Tabs>
+  </BasicDrawer>
+</template>

+export * from './Basic';
+export * from './Sidebar';

+import '@vue-flow/core/dist/style.css';
+import '@vue-flow/core/dist/theme-default.css';
+import '@vue-flow/controls/dist/style.css';
+import './override.css';

+.vue-flow__handle {
+  width: 16px;
+  height: 16px;
+}
+
+.vue-flow__handle-right {
+  right: -8px;
+}
+
+.vue-flow__handle-left {
+  left: -8px; 
+}
+
+.vue-flow__background.vue-flow__container {
+  background-color: #e9e9e9;
+}
+
+.vue-flow__edge-path {
+  stroke-width: 4;
+  stroke: gray;
+  transition: stroke-width 0.3s;
+} 
+
+.connection-focus {
+  stroke-width: 6;
+}
+
+/* 连接线选中时 颜色改变 */
+.vue-flow__edge.selected > .vue-flow__edge-path {
+  stroke: red !important;
+}
+
+/* 连接线移入放大效果 */
+.vue-flow__edge:hover >  .vue-flow__edge-path {
+  stroke-width: 6 !important;
+}
+
+.vue-flow__edge-textbg,
+.vue-flow__edge-text {
+  transition: transform 0.2s;
+}
+
+.vue-flow__edge:hover .vue-flow__edge-textbg {
+  transform: scale(1.1)
+}
+
+.vue-flow__edge:hover .vue-flow__edge-text{
+  transform: scale(1.1)
+}
+
+/* selection 选择框 */
+.vue-flow__nodesselection-rect, .vue-flow__selection{
+  border-width: 3px;
+}

+import type { VueFlow } from '@vue-flow/core';
+
+export type FlowElRef = InstanceType<typeof VueFlow>;

+import type { RuleError } from 'ant-design-vue/lib/form/interface';
+import { DefaultEdgeConfig, DefaultNodeConfig, NodeData } from './node';
+
+export interface AwaitPopupWindowReturnDataType<T = any> {
+  flag: boolean;
+  data: Nullable<T>;
+}
+
+export interface BasicSetFieldValueType<D = DefaultNodeConfig, C = Recordable> {
+  defaultConfig: D;
+  config: C;
+}
+
+export interface CreateModalDefineExposeType {
+  validate?: () => Promise<{ flag: boolean; error?: RuleError }>;
+  getFieldsValue?: () => Promise<Recordable>;
+  setFieldsValue?: (value?: DefaultNodeConfig, nodeData?: NodeData) => void;
+}
+
+export interface CreateModalDefineEmitType {
+  (eventName: 'mounted'): void;
+}
+
+export interface ConnectionModalReturnDataType<T = string | string[]> {
+  flag: boolean;
+  data: Nullable<T>;
+}
+
+export interface ConnectionModalDefineExposeType {
+  validate?: () => Promise<{ flag: boolean; error?: RuleError }>;
+  getFieldsValue?: () => Promise<Recordable>;
+  setFieldsValue?: (value: DefaultEdgeConfig, nodeData?: NodeData) => void;
+}

+import type { ValidConnectionFunc } from '@vue-flow/core';
+import type { RuleNodeTypeEnum } from '../packages/index.type';
+
+export interface NodeItemConfigType {
+  /**
+   * @description 组件key
+   */
+  key: string;
+
+  /**
+   * @description 创建组件
+   */
+  createComponentKey?: string;
+
+  /**
+   * @description 连接组件
+   */
+  connectionComponentKey?: string;
+
+  /**
+   * @description 背景颜色
+   */
+  backgroundColor?: string;
+
+  /**
+   * @description 连接校验
+   */
+  validateConnection?: ValidConnectionFunc;
+
+  /**
+   * @description 类别
+   */
+  categoryType: string;
+
+  type: string;
+
+  /**
+   * @description 归属
+   */
+  scope?: string;
+
+  /**
+   * @description 节点名称
+   */
+  name: string;
+
+  clazz: string;
+
+  /**
+   * @description 最大连接点
+   */
+  maxConnectionPoint?: number;
+
+  /**
+   * @description 配置描述
+   */
+  configurationDescriptor: ConfigurationDescriptor;
+}
+
+export interface CategoryConfigType {
+  /**
+   * @description 类别
+   */
+  category?: RuleNodeTypeEnum;
+
+  /**
+   * @description 背景颜色
+   */
+  backgroundColor?: string;
+
+  /**
+   * @description icon
+   */
+  icon?: string;
+
+  /**
+   * @description 标题
+   */
+  title?: string;
+
+  /**
+   * @description 连接校验
+   */
+  validateConnection?: ValidConnectionFunc;
+
+  /**
+   * @description 描述
+   */
+  description?: string;
+}
+
+export interface PublicNodeItemType {
+  id?: string;
+}
+
+export class PublicNodeItemClass implements PublicNodeItemType {
+  constructor() {}
+}
+
+export interface CreateComponentType {
+  config: NodeItemConfigType;
+  categoryConfig: CategoryConfigType;
+}
+
+export interface ConfigurationDescriptor {
+  nodeDefinition: NodeDefinition;
+}
+
+export interface NodeDefinition<T = object> {
+  details?: string;
+  description?: string;
+  inEnabled?: boolean;
+  outEnabled?: boolean;
+  relationTypes?: string[];
+  customRelations?: boolean;
+  ruleChainNode?: boolean;
+  defaultConfiguration?: T;
+  uiResources?: string[];
+  configDirective?: string;
+  icon?: string;
+  iconUrl?: string;
+  docUrl?: string;
+}
+
+export interface DragTransferData {
+  options: NodeData;
+  offsetX: number;
+  offsetY: number;
+}
+
+export interface NodeData<T = BasicNodeFormData> {
+  category?: CategoryConfigType;
+  config?: NodeItemConfigType;
+  data?: T;
+}
+
+export interface EdgeData {
+  config: DefaultEdgeConfig;
+  data?: BasicEdgeBindData;
+}
+
+export interface BasicNodeBindData {
+  id?: { entityType: string; id: string };
+  ruleChainId?: { entityType: string; id: string };
+  additionalInfo?: AdditionalInfo;
+  type?: string;
+  name?: string;
+  debugMode?: boolean;
+  configuration?: Configuration;
+}
+
+export interface AdditionalInfo {
+  description?: string;
+  layoutX: number;
+  layoutY: number;
+}
+
+export interface Configuration {
+  alarmStatusList?: string[];
+  checkForSingleEntity?: boolean;
+  direction?: string;
+  entityId?: string;
+  entityType?: string;
+  relationType?: string;
+}
+
+export interface DefaultNodeConfig {
+  alarmStatusList?: string[];
+}
+
+export interface DefaultEdgeConfig {
+  type?: string[];
+}
+
+export interface BasicEdgeBindData {
+  type?: string[];
+}
+
+export interface BasicNodeFormData {
+  configuration?: Recordable;
+  description?: string;
+  name?: string;
+  debugMode?: boolean;
+}

+import { BasicNodeBindData } from './node';
+
+export interface RuleChainType {
+  ruleChainId: Id;
+  firstNodeIndex?: number;
+  nodes: BasicNodeBindData[];
+  connections: ConnectionItemType[];
+  ruleChainConnections?: any;
+}
+
+export interface Id {
+  entityType: string;
+  id: string;
+}
+
+export interface ConnectionItemType {
+  fromIndex: number;
+  toIndex: number;
+  type: string;
+}

+import { FormProps } from '/@/components/Form';
+
+export const isOutputHandle = (string: string) => {
+  const reg = /.*handle-right/;
+  return reg.test(string);
+};
+
+export const isInputHandle = (string: string) => {
+  const reg = /.*handle-left/;
+  return reg.test(string);
+};
+
+export const basicNodeFormConfiguration = (): FormProps => {
+  return {
+    layout: 'vertical',
+    showActionButtonGroup: false,
+  };
+};