Merge branch 'feat/rule-chain' into 'main_dev'

Feat/rule chain

See merge request yunteng/thingskit-front!851

-import { DeviceInfoItemType, DeviceTypeItem, PageParams } from './model';
+import { DeviceInfoItemType, DeviceTypeItem, PageParams, ScriptTestParams } from './model';
 import { TBPaginationResult } from '/#/axios';
 import { defHttp } from '/@/utils/http/axios';
 
@@ -6,6 +6,7 @@ enum Api {
   GET_DEVICE_INFOS = '/tenant/deviceInfos',
   GET_DEVICE_TYPE = '/device/types',
   TENANT_QUEUE = '/tenant/queues',
+  TEST_SCRIPT = '/ruleChain/testScript',
 }
 
 enum Entity {
@@ -142,3 +143,13 @@ export const getEntityEdge = (params: PageParams) => {
     }
   );
 };
+
+export const testScript = (data: ScriptTestParams) => {
+  return defHttp.post<Record<'error' | 'output', string>>(
+    {
+      url: Api.TEST_SCRIPT,
+      data,
+    },
+    { joinPrefix: false }
+  );
+};

@@ -52,3 +52,12 @@ export interface PageParams {
   sortProperty?: string;
   sortOrder?: string;
 }
+
+export interface ScriptTestParams {
+  argNames?: string[];
+  metadata?: Recordable;
+  msg?: string;
+  msgType?: string;
+  script?: string;
+  scriptType?: string;
+}

@@ -4,12 +4,23 @@ import { defHttp } from '/@/utils/http/axios';
 import { RuleChainDetail, RuleChainType } from '/@/views/rule/designer/types/ruleNode';
 
 enum Api {
+  SAVE_RULE_CHAINS = '/ruleChain',
   GET_RULE_CHAINS_DETAIL = '/ruleChain',
   SAVE = '/ruleChain/metadata',
   GET_RULE_CHAINES = '/ruleChains',
   GET_RULE_NODE_EVENTS = '/events/RULE_NODE',
 }
 
+export const saveRuleChainDetail = (params: Partial<RuleChainDetail>) => {
+  return defHttp.post<RuleChainDetail>(
+    {
+      url: Api.SAVE_RULE_CHAINS,
+      data: params,
+    },
+    { joinPrefix: false }
+  );
+};
+
 export const getRuleChainDetail = (id: string) => {
   return defHttp.get<RuleChainDetail>(
     {

@@ -41,8 +41,12 @@ export const MENU_LIST = 'MENU_LIST';
 
 export const RULE_NODE_LOCAL_CACHE_KEY = 'RULE__NODE__KEY__';
 
+export const RULE_CHAIN_IMPORT_LOCAL_CACHE_KEY = 'RULE__CHAIN__IMPORT__KEY__';
+
 export const RULE_NODE_KEY = 'RULE_NODE';
 
+export const RULE_CHAIN_KEY = 'RULE_CHAIN';
+
 export enum CacheTypeEnum {
   SESSION,
   LOCAL,

@@ -18,4 +18,6 @@ export const PageEnum = {
   SHARE_PAGE: '/share/:viewType/:id/:publicId',
 
   RULE_CHAIN_DETAIL: '/rule/chain/:id',
+
+  RULE_CHAIN_DETAIL_IMPORT: '/rule/chain/import',
 };

-import type { Connection } from '@vue-flow/core';
+import type { Connection, Edge } 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) => {
+  const getAddedgesParams = (params: Connection | Edge, data: string | string[] | any) => {
     return { type: EdgeTypeEnum.CUSTOM, data: { data } as EdgeData, id: buildUUID(), ...params };
   };
 

@@ -8,6 +8,7 @@ import { buildUUID } from '/@/utils/uuid';
 import { isNullOrUnDef } from '/@/utils/is';
 import { useAddNodes } from './useAddNodes';
 import { useAddEdges } from './useAddEdges';
+import { RuleChainEntityType } from '../enum/entity';
 
 export function useBasicDataTransform() {
   const nodeConfigMap = new Map<string, NodeData>();
@@ -67,8 +68,8 @@ export function useBasicDataTransform() {
 
       const sourceNode = indexMap.get(Number(fromIndex));
       const targetNode = indexMap.get(Number(toIndex));
-      const source = sourceNode!.id!.id;
-      const target = targetNode!.id!.id;
+      const source = sourceNode?.id?.id || buildUUID();
+      const target = targetNode?.id?.id || buildUUID();
       const sourceHandle = `${source}${SOURCE_HANDLE}`;
       const targetHandle = `${target}${TARGET_HANDLE}`;
 
@@ -88,7 +89,7 @@ export function useBasicDataTransform() {
     if (!isNullOrUnDef(firstNodeIndex)) {
       const targetNode = indexMap.get(firstNodeIndex);
       const source = inputNodeId;
-      const target = targetNode!.id!.id;
+      const target = targetNode?.id?.id || buildUUID();
       const sourceHandle = `${source}$${SOURCE_HANDLE}`;
       const targetHandle = `${target}${TARGET_HANDLE}`;
       edges.push(
@@ -112,7 +113,7 @@ export function useBasicDataTransform() {
     const { layoutX, layoutY, description } = additionalInfo || {};
     const { getAddNodesParams } = useAddNodes();
 
-    return getAddNodesParams(
+    const value = getAddNodesParams(
       { x: layoutX!, y: layoutY! },
       {
         ...config,
@@ -128,6 +129,10 @@ export function useBasicDataTransform() {
         id: id?.id || buildUUID(),
       }
     );
+
+    if (!id?.id) node.id = { id: value.id, entityType: RuleChainEntityType.RULE_NODE };
+
+    return value;
   }
 
   function deconstructionNode(nodes: RuleChainType['nodes']) {

-import { GraphEdge, GraphNode, VueFlowStore } from '@vue-flow/core';
-import { getRuleNodeCache, setRuleNodeCache } from './useRuleCopyPaste';
+import { GraphEdge, GraphNode, VueFlowStore, pointToRendererPoint } from '@vue-flow/core';
+import { getRuleNodeCache, setRuleNodeCache } from './useRuleChainCache';
 import { RuleContextMenuEnum } from './useRuleChainContextMenu';
 import { useAddNodes } from './useAddNodes';
 import { buildUUID } from '/@/utils/uuid';
@@ -65,15 +65,15 @@ export function useContextMenuAction() {
   const copy = (params: HandleContextMenuActionParamsType) => {
     const { node } = params;
     if (!node) return;
-    const { position, data } = node;
+    const { position, data, id } = node;
     const { getAddNodesParams } = useAddNodes();
     const { x, y } = position;
 
-    const value = getAddNodesParams(position, data, { id: buildUUID() });
+    const value = getAddNodesParams(position, data, { id });
 
     setRuleNodeCache({
       nodes: [value],
-      originX: x + NODE_WIDTH / 2 + x,
+      originX: x + NODE_WIDTH / 2,
       originY: y + NODE_HEIGHT / 2,
     });
   };
@@ -81,24 +81,49 @@ export function useContextMenuAction() {
   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 { x: clientX, y: clientY } = pointToRendererPoint(
+      { x: (event as MouseEvent).offsetX, y: (event as MouseEvent).offsetY },
+      flowActionType!.getViewport(),
+      false,
+      [25, 25]
+    );
+
+    const xAxisMoveDistance = clientX - originX!;
+    const yAxisMoveDistance = clientY - originY!;
+
+    const newEdges = edges.map((edge) =>
+      getAddedgesParams({ ...edge, id: buildUUID() }, edge.data)
+    );
+
     const newNode = nodes.map((node) => {
-      const { position, data, id } = node;
+      const { position, data, id: oldId } = node;
       const { x, y } = position;
+      const newId = buildUUID();
 
-      const newX = clientX - originX! + x + NODE_WIDTH / 2;
-      const newY = clientY - originY! + y + NODE_HEIGHT / 2;
+      const newX = xAxisMoveDistance + x;
+      const newY = yAxisMoveDistance + y;
 
-      return getAddNodesParams({ x: newX, y: newY }, { ...data, created: false }, { id });
-    });
+      for (const connection of newEdges || []) {
+        if (connection.source.includes(oldId)) {
+          connection.source = newId;
+          connection.sourceHandle = connection.sourceHandle?.replaceAll(oldId, newId);
+          continue;
+        }
 
-    const newEdges = edges.map((edge) => getAddedgesParams(edge, edge.data));
+        if (connection.target.includes(oldId)) {
+          connection.target = newId;
+          connection.targetHandle = connection.targetHandle?.replaceAll(oldId, newId);
+        }
+      }
+
+      return getAddNodesParams({ x: newX, y: newY }, { ...data, created: false }, { id: newId });
+    });
 
     flowActionType?.addNodes(newNode);
     flowActionType?.addEdges(newEdges);
@@ -153,23 +178,9 @@ export function useContextMenuAction() {
     );
 
     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);
-        }
-      }
+      const { id } = node;
 
-      return getAddNodesParams(node.position, toRaw(unref(node.data)), { id: newId });
+      return getAddNodesParams(node.position, toRaw(unref(node.data)), { id });
     });
 
     const originRect = getElementsCenter(unref(flowActionType?.getSelectedNodes) || []);

@@ -6,7 +6,7 @@ export function useInputNode() {
     const { getAddNodesParams } = useAddNodes();
 
     const newNode = getAddNodesParams(
-      { x: 80, y: 50 },
+      { x: 75, y: 50 },
       {
         ...new InputConfig(),
         data: {

 import { Edge, Node } from '@vue-flow/core';
-import { RULE_NODE_KEY, RULE_NODE_LOCAL_CACHE_KEY } from '/@/enums/cacheEnum';
+import {
+  RULE_NODE_KEY,
+  RULE_CHAIN_KEY,
+  RULE_NODE_LOCAL_CACHE_KEY,
+  RULE_CHAIN_IMPORT_LOCAL_CACHE_KEY,
+} from '/@/enums/cacheEnum';
 import { createLocalStorage } from '/@/utils/cache';
+import { RuleChainDetail, RuleChainType } from '../types/ruleNode';
 
 const ruleNodeStorage = createLocalStorage({ prefixKey: RULE_NODE_LOCAL_CACHE_KEY });
+const ruleChainStorage = createLocalStorage({ prefixKey: RULE_CHAIN_IMPORT_LOCAL_CACHE_KEY });
 
 interface RuleNodeCacheType {
   nodes?: Node[];
@@ -11,6 +18,11 @@ interface RuleNodeCacheType {
   originY?: number;
 }
 
+export interface RuleChainCacheType {
+  ruleChain: Partial<RuleChainDetail>;
+  metadata: RuleChainType;
+}
+
 export const setRuleNodeCache = ({
   nodes = [],
   edges = [],
@@ -29,6 +41,14 @@ export const getRuleNodeCache = (): RuleNodeCacheType => ruleNodeStorage.get(RUL
 
 export const checkHasCacheRuleNode = () => !!getRuleNodeCache();
 
+export const getRuleChainImportCache = (): RuleChainCacheType =>
+  ruleChainStorage.get(RULE_CHAIN_KEY) || {};
+
+export const setRuleChainImportCache = (value: RuleChainCacheType) =>
+  ruleChainStorage.set(RULE_CHAIN_KEY, value);
+
+export const clearRuleChainImportCache = () => ruleChainStorage.remove(RULE_CHAIN_KEY);
+
 function initRuleNodeStorage() {
   const value = ruleNodeStorage.get(RULE_NODE_KEY);
   value && ruleNodeStorage.set(RULE_NODE_KEY, value);

@@ -2,7 +2,7 @@ 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';
+import { checkHasCacheRuleNode } from './useRuleChainCache';
 
 export enum RuleContextMenuEnum {
   DETAIL = 'DETAIL',
@@ -17,6 +17,8 @@ export enum RuleContextMenuEnum {
   UNDO_CHANGE = 'UNDO_CHANGE',
 
   SELECT_ALL = 'SELECT_ALL',
+
+  CREATE_RULE_CHAIN = 'CREATE_RULE_CHAIN',
 }
 
 export enum RuleContextMenuNameEnum {
@@ -32,6 +34,8 @@ export enum RuleContextMenuNameEnum {
   UNDO_CHANGE = '撤销更改',
 
   SELECT_ALL = '选择全部',
+
+  CREATE_RULE_CHAIN = '创建规则链',
 }
 
 export enum RuleChainContextMenuIconEnum {
@@ -48,21 +52,22 @@ export enum RuleChainContextMenuIconEnum {
 
   SELECT_ALL = 'material-symbols:select-all',
 
+  CREATE_RULE_CHAIN = 'material-symbols:settings-ethernet',
+
   // LINK = 'material-symbols:trending-flat',
 }
 
-export enum RuleChainContextMenuShortcutKeyEnum {
-  DELETE = 'Ctrl(⌘) X',
+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_COPY = 'Ctrl(⌘) C',
+// PASTE = 'Ctrl(⌘) V',
+// UNSELECTED = 'Esc',
+// DELETE_SELECT = 'Del',
+// APPLY_CHANGE = 'Ctrl(⌘) S',
+// UNDO_CHANGE = 'Ctrl(⌘) Z',
 
-  SELECT_ALL = 'Ctrl(⌘) A',
-}
+// SELECT_ALL = 'Ctrl(⌘) A',
 
 const getMenuItem = (key: RuleContextMenuEnum, handler: Fn, disabled = false) => {
   return {
@@ -96,6 +101,7 @@ export function useCreateRuleChainContextMenu() {
   const createElementsSelectedContextMenu = (
     params: NodeMouseEvent,
     changeMarker: boolean,
+    hasCreateChainMenuItem = false,
     elementsType: ElementsTypeEnum.NODE = ElementsTypeEnum.NODE
   ): Promise<RuleContextMenuEnum | ''> => {
     return new Promise(async (resolve) => {
@@ -107,6 +113,9 @@ export function useCreateRuleChainContextMenu() {
           getMenuItem(RuleContextMenuEnum.PASTE, resolve, !checkHasCacheRuleNode()),
           getDivider(),
           getMenuItem(RuleContextMenuEnum.UNSELECTED, resolve),
+          ...(hasCreateChainMenuItem
+            ? [getMenuItem(RuleContextMenuEnum.CREATE_RULE_CHAIN, resolve)]
+            : []),
           getMenuItem(RuleContextMenuEnum.DELETE_SELECT, resolve),
           getDivider(),
           getMenuItem(RuleContextMenuEnum.APPLY_CHANGE, resolve, !changeMarker),

@@ -92,6 +92,9 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
 
       if (!validateList.every((item) => item(connection, elements))) return false;
 
+      if (validateCircularreference(elements.sourceNode!, elements.targetNode, elements.edges))
+        return false;
+
       return true;
     },
   });
@@ -134,7 +137,6 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
 
     triggerChange();
   });
-
   onPaneReady(async () => {
     setViewport({ x: 0, y: 0, zoom: 1 });
   });
@@ -164,7 +166,8 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
     const menuType = params.node.selected
       ? await createElementsSelectedContextMenu(
           params,
-          unref(useSaveAndRedoActionType.changeMarker)
+          unref(useSaveAndRedoActionType.changeMarker),
+          validateSelectionElementsCanCreateRuleChain()
         )
       : await createNodeContextMenu(params);
 
@@ -212,7 +215,8 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
     const menuType = unref(flowActionType.getSelectedElements).length
       ? await createElementsSelectedContextMenu(
           getCreatePanelContextMenuParams(params),
-          unref(useSaveAndRedoActionType.changeMarker)
+          unref(useSaveAndRedoActionType.changeMarker),
+          validateSelectionElementsCanCreateRuleChain()
         )
       : await createPanelContextMenu(
           getCreatePanelContextMenuParams(params),
@@ -238,6 +242,55 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
     return !!sourceData?.config?.configurationDescriptor.nodeDefinition?.relationTypes?.length;
   }
 
+  /**
+   * @description 验证是否循环引用
+   */
+  function validateCircularreference(
+    sourceNode: GraphNode,
+    targetNode: GraphNode,
+    edges: GraphEdge[]
+  ) {
+    const sourceId = sourceNode.id;
+    const targetId = targetNode.id;
+
+    const getAllIndex = (
+      edges: GraphEdge[],
+      validate: (item: GraphEdge, index: number) => boolean
+    ) => {
+      const indexList: number[] = [];
+
+      for (let i = 0; i < edges.length; i++) {
+        const item = edges[i];
+        if (validate(item, i)) {
+          indexList.push(i);
+        }
+      }
+
+      return indexList;
+    };
+
+    const validate = (source: string, startSource: string) => {
+      const nextNodesIndex = getAllIndex(edges, (item) => item.source === source);
+
+      if (!nextNodesIndex.length) return false;
+
+      for (const nextNodeIndex of nextNodesIndex) {
+        const nextNode = edges[nextNodeIndex];
+        if (nextNode && nextNode.target === startSource) {
+          return true;
+        }
+        return validate(nextNode.target, startSource);
+      }
+    };
+
+    return validate(targetId, sourceId);
+  }
+
+  /**
+   * @description 处理最大链接点
+   * @param sourceNode
+   * @returns
+   */
   function handleMaxConnectionPoint(sourceNode?: GraphNode) {
     if (!sourceNode) return;
 
@@ -329,5 +382,17 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
     } as NodeMouseEvent;
   }
 
+  function validateSelectionElementsCanCreateRuleChain() {
+    const nodes = unref(flowActionType.getSelectedNodes);
+    const edges = unref(flowActionType.getSelectedEdges);
+
+    for (const node of nodes) {
+      const index = edges.findIndex((edge) => edge.target === node.id || edge.source === node.id);
+      if (!~index) return false;
+    }
+
+    return true;
+  }
+
   return { flowActionType };
 }

@@ -3,12 +3,19 @@ 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, getRuleChainDetail, saveRuleChainData } from '/@/api/ruleDesigner';
+import {
+  getRuleChainData,
+  getRuleChainDetail,
+  saveRuleChainData,
+  saveRuleChainDetail,
+} 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 { useRoute, useRouter } from 'vue-router';
 import { RuleChainEntityType } from '../enum/entity';
+import { PageEnum } from '/@/enums/pageEnum';
+import { clearRuleChainImportCache, getRuleChainImportCache } from './useRuleChainCache';
 
 const ignoreNodeKeys: string[] = [EntryCategoryComponentEnum.INPUT];
 
@@ -19,11 +26,15 @@ export function useSaveAndRedo() {
 
   const redoDataRef = ref<Elements>([]);
 
-  const route = useRoute();
+  const ROUTE = useRoute();
+
+  const ROUTER = useRouter();
 
   const debugMarker = ref(false);
 
-  const getRuleChainId = computed(() => (route.params as Record<'id', string>).id);
+  const getRuleChainId = computed(() => (ROUTE.params as Record<'id', string>).id);
+
+  const getIsImportFlag = computed(() => ROUTE.fullPath === PageEnum.RULE_CHAIN_DETAIL_IMPORT);
 
   const ruleChainDetail = ref<RuleChainDetail>();
 
@@ -131,7 +142,9 @@ export function useSaveAndRedo() {
   };
 
   async function getCurrentRuleChainDetail() {
-    ruleChainDetail.value = await getRuleChainDetail(unref(getRuleChainId));
+    ruleChainDetail.value = unref(getIsImportFlag)
+      ? (getImportChainDetail() as RuleChainDetail)
+      : await getRuleChainDetail(unref(getRuleChainId));
   }
 
   async function handleSaveRuleChain(
@@ -142,19 +155,35 @@ export function useSaveAndRedo() {
     try {
       loading.value = true;
 
+      let ruleChainId = unref(getRuleChainId);
+      if (unref(getIsImportFlag)) {
+        const detail = await saveRuleChainDetail(unref(ruleChainDetail)!);
+        ruleChainDetail.value = detail;
+        ruleChainId = detail.id.id;
+      }
+
       const data = await saveRuleChainData({
         connections,
         nodes,
         firstNodeIndex,
         ruleChainId: {
           entityType: RuleChainEntityType.RULE_CHAIN,
-          id: unref(getRuleChainId),
+          id: ruleChainId,
         },
       });
 
       parseRuleChain(data);
 
       resetChange();
+
+      if (unref(getIsImportFlag)) {
+        clearRuleChainImportCache();
+
+        ROUTER.replace({
+          path: `/rule/chain/${ruleChainId}`,
+          replace: true,
+        });
+      }
     } finally {
       loading.value = false;
     }
@@ -164,13 +193,16 @@ export function useSaveAndRedo() {
     try {
       loading.value = true;
 
-      const data = await getRuleChainData(unref(getRuleChainId));
+      const data = unref(getIsImportFlag)
+        ? await getImportMetadata()
+        : await getRuleChainData(unref(getRuleChainId));
+      if (!data) return;
 
       const elements = parseRuleChain(data);
 
       flowActionType.setElements(elements);
 
-      resetChange();
+      unref(getIsImportFlag) ? triggerChange() : resetChange();
     } finally {
       loading.value = false;
     }
@@ -201,6 +233,12 @@ export function useSaveAndRedo() {
     triggerChange();
   };
 
+  const getImportMetadata = () => {
+    return getRuleChainImportCache().metadata;
+  };
+
+  const getImportChainDetail = () => getRuleChainImportCache().ruleChain;
+
   return {
     loading,
     debugMarker,

@@ -77,13 +77,33 @@
     return { msg, msgType, metadata: toRaw(unref(metadata)), javascriptFunction };
   };
 
+  function executeTestScript() {
+    try {
+      const { javaScriptEditorProps } = props;
+      const { paramsName } = javaScriptEditorProps;
+      const fn = new Function(...(paramsName || [])!, unref(scriptContent));
+      const value = getValue();
+      const executeParams = paramsName!.map((key) => value[key]);
+
+      return fn(...executeParams);
+    } catch (error) {
+      return error;
+    }
+  }
+
   const handleTestScript = async () => {
     const flag = await handleValidate();
+
     flag && emit('test', getValue());
+
+    const result = executeTestScript();
+
+    outputContent.value = result;
   };
 
   const handleSave = async () => {
     const flag = await handleValidate();
+
     flag && emit('save', getValue());
   };
 

 <script lang="ts" setup>
+  import { Badge } from 'ant-design-vue';
   import { cloneDeep } from 'lodash';
   import { computed, ref, unref } from 'vue';
   import { allComponents } from '../../../packages';
@@ -27,13 +28,21 @@
 <template>
   <section class="absolute top-11 w-full flex flex-auto h-[calc(100%-2.75rem)] bg-neutral-100">
     <nav class="w-20 min-w-20 p-2 border-t border-light-50">
-      <CategoryItem
+      <Badge
         v-for="category in allComponents"
         :key="category.category.category"
-        v-model:activeKey="activeKey"
-        :category="category"
-      />
+        :dot="!!searchText &&
+        category.components.some((item) =>
+          item.name.toUpperCase().includes(searchText!.toUpperCase())
+        )
+        "
+        :offset="[-10, 10]"
+        class="!block"
+      >
+        <CategoryItem v-model:activeKey="activeKey" :category="category" />
+      </Badge>
     </nav>
+
     <body class="p-4 w-full flex flex-col gap-2 items-center overflow-x-hidden overflow-y-auto">
       <NodeItem
         v-for="config in getCurrentCategoryNode.components"

@@ -26,7 +26,7 @@
 <template>
   <BasicDrawer
     v-model:visible="visible"
-    width="700px"
+    width="40%"
     showFooter
     showOkBtn
     showCancelBtn

@@ -79,7 +79,7 @@
 <template>
   <BasicDrawer
     v-model:visible="visible"
-    width="700px"
+    width="40%"
     showFooter
     showCancelBtn
     showOkBtn