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

feat: 选择创建规则链

See merge request yunteng/thingskit-front!855

 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 { BasicNodeBindData, EdgeData, NodeData } from '../types/node';
+import { Elements, GraphEdge, GraphNode } from '@vue-flow/core';
+import { ConnectionItemType, RuleChainType } from '../types/ruleNode';
 import { allComponents } from '../packages';
 import { RuleNodeTypeEnum } from '../packages/index.type';
 import { buildUUID } from '/@/utils/uuid';
@@ -9,6 +9,9 @@ import { isNullOrUnDef } from '/@/utils/is';
 import { useAddNodes } from './useAddNodes';
 import { useAddEdges } from './useAddEdges';
 import { RuleChainEntityType } from '../enum/entity';
+import { EntryCategoryComponentEnum } from '../enum/category';
+
+const ignoreNodeKeys: string[] = [EntryCategoryComponentEnum.INPUT];
 
 export function useBasicDataTransform() {
   const nodeConfigMap = new Map<string, NodeData>();
@@ -24,7 +27,7 @@ export function useBasicDataTransform() {
   }
 
   function mergeData(data: NodeData['data'], nodeData: NodeData, node: GraphNode) {
-    const { x: layoutX, y: layoutY } = node.computedPosition;
+    const { x: layoutX, y: layoutY } = node.position;
 
     return {
       debugMode: !!data?.debugMode,
@@ -172,8 +175,126 @@ export function useBasicDataTransform() {
 
   initNodeConfigMap();
 
+  /**
+   * @description 保存连接信息
+   */
+  function getConnections(
+    nodesRef: Ref<GraphNode[]> | GraphNode[],
+    edges: Ref<GraphEdge[]> | GraphEdge[]
+  ) {
+    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: Ref<GraphNode[]> | GraphNode[], removeId: boolean) {
+    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(
+        Object.assign(
+          mergeData(data, nodeData, node),
+          nodeData.created && !removeId
+            ? ({
+                id: { id: node.id, entityType: RuleChainEntityType.RULE_NODE },
+              } as BasicNodeBindData)
+            : {}
+        )
+      );
+    }
+
+    return nodes;
+  }
+
+  function getFirsetNodeIndex(
+    nodesRef: Ref<GraphNode[]> | GraphNode[],
+    edges: Ref<GraphEdge[]> | GraphEdge[]
+  ) {
+    const inputNode = unref(edges).find(
+      (item) => (item.sourceNode.data as NodeData).config?.key === EntryCategoryComponentEnum.INPUT
+    );
+
+    if (inputNode) {
+      const targetId = inputNode.target;
+      const index = unref(nodesRef).findIndex((item) => item.id === targetId);
+      return index;
+    }
+  }
+
+  function combineData(
+    nodesRef: Ref<GraphNode[]> | GraphNode[] = [],
+    edgesRef: Ref<GraphEdge[]> | GraphEdge[] = [],
+    removeId = false
+  ) {
+    const extraIgnoreNodeRef = unref(nodesRef).filter(
+      (item) => !ignoreNodeKeys.includes((item.data as NodeData).config?.key as string)
+    );
+
+    const connections = getConnections(extraIgnoreNodeRef, edgesRef);
+
+    const nodes = getNodes(extraIgnoreNodeRef, removeId);
+
+    const firstNodeIndex = getFirsetNodeIndex(extraIgnoreNodeRef, edgesRef);
+
+    return { connections, nodes, firstNodeIndex };
+  }
+
+  function validateCanCreateRuleChain(
+    nodes: Ref<GraphNode[]> | GraphNode[] = [],
+    edges: Ref<GraphEdge[]> | GraphEdge[] = []
+  ) {
+    const rootNode: GraphNode[] = [];
+
+    let flag = true;
+    for (const node of unref(nodes)) {
+      const list = unref(edges).filter(
+        (edge) => edge.source === node.id || edge.target === node.id
+      );
+
+      if (!list.length) {
+        flag = false;
+        break;
+      }
+
+      if (!list.filter((edge) => edge.target === node.id).length) {
+        if (!rootNode.length) rootNode.push(node);
+        else {
+          flag = false;
+          break;
+        }
+      }
+    }
+
+    return { flag, firstNode: rootNode[0] || null };
+  }
+
   return {
     mergeData,
+    combineData,
     deconstructionData,
+    validateCanCreateRuleChain,
   };
 }

@@ -3,11 +3,19 @@ import { getRuleNodeCache, setRuleNodeCache } from './useRuleChainCache';
 import { RuleContextMenuEnum } from './useRuleChainContextMenu';
 import { useAddNodes } from './useAddNodes';
 import { buildUUID } from '/@/utils/uuid';
-import { toRaw, unref } from 'vue';
+import { Ref, toRaw, unref } from 'vue';
 import { useSaveAndRedo } from './useSaveAndRedo';
 import { isUnDef } from '/@/utils/is';
 import { useAddEdges } from './useAddEdges';
 import { EdgeData } from '../types/node';
+import { CreateNodeModal } from '../src/components/CreateNodeModal';
+import { CreateEdgeModal } from '../src/components/CreateEdgeModal';
+import { UpdateNodeDrawer } from '../src/components/UpdateNodeDrawer';
+import { UpdateEdgeDrawer } from '../src/components/UpdateEdgeDrawer';
+import { CreateRuleChainModal } from '../src/components/CreateRuleChainModal';
+import { useBasicDataTransform } from './useBasicDataTransform';
+import { cloneDeep } from 'lodash-es';
+import { useNewNode } from './useNewNode';
 
 interface HandleContextMenuActionParamsType {
   menuType: RuleContextMenuEnum;
@@ -16,18 +24,58 @@ interface HandleContextMenuActionParamsType {
   node?: GraphNode;
   edge?: GraphEdge;
   useSaveAndRedoActionType?: ReturnType<typeof useSaveAndRedo>;
+  modalActionType: {
+    createNodeModalActionType: Ref<Nullable<InstanceType<typeof CreateNodeModal>>>;
+    createEdgeModalActionType: Ref<Nullable<InstanceType<typeof CreateEdgeModal>>>;
+    updateNodeDrawerActionType: Ref<Nullable<InstanceType<typeof UpdateNodeDrawer>>>;
+    updateEdgeDrawerActionType: Ref<Nullable<InstanceType<typeof UpdateEdgeDrawer>>>;
+    createRuleChainModalActionType: Ref<Nullable<InstanceType<typeof CreateRuleChainModal>>>;
+  };
+}
+
+export function transformToRuleChain(
+  nodesRef: Ref<GraphNode[]> | GraphNode[] = [],
+  edgesRef: Ref<GraphEdge[]> | GraphEdge[] = []
+) {
+  const nodeMap = new Map<string, GraphNode>();
+  const { combineData, validateCanCreateRuleChain } = useBasicDataTransform();
+
+  nodesRef = cloneDeep(unref(nodesRef));
+  edgesRef = cloneDeep(unref(edgesRef));
+
+  unref(nodesRef).forEach((node) => nodeMap.set(node.id, node));
+  const outputEdges = unref(edgesRef).filter((edge) => !nodeMap.has(edge.target));
+  const outputEdgesId = outputEdges.map((edge) => edge.id);
+
+  const { getOutputNodeConfig } = useNewNode();
+  const outputNode = outputEdges.map((edge) => {
+    const id = buildUUID();
+    const name = (edge.data as EdgeData).data?.type?.join(' / ') || '';
+    edge.target = id;
+    return getOutputNodeConfig(name, edge.targetNode.position, id);
+  });
+
+  nodesRef = [...nodesRef, ...(outputNode as GraphNode[])];
+
+  const { connections, nodes } = combineData(nodesRef, edgesRef, true);
+
+  const { firstNode } = validateCanCreateRuleChain(nodesRef, edgesRef);
+
+  const firstNodeIndex = nodesRef.findIndex((node) => node.id === firstNode.id);
+
+  return { connections, nodes, firstNodeIndex, outputEdgesId };
 }
 
 export const NODE_WIDTH = 176;
 export const NODE_HEIGHT = 48;
 
-function getElementsCenter(nodes: GraphNode[]) {
+function getElementsCenter(nodes: Ref<GraphNode[]> | GraphNode[] = []) {
   let leftTopX: number | undefined;
   let leftTopY: number | undefined;
   let rightBottomX: number | undefined;
   let rightBottomY: number | undefined;
 
-  for (const node of nodes) {
+  for (const node of unref(nodes)) {
     const { position } = node;
     const { x, y } = position;
     if (isUnDef(leftTopX)) {
@@ -200,6 +248,37 @@ export function useContextMenuAction() {
     useSaveAndRedoActionType?.handleRedoChange(flowActionType!);
   };
 
+  const createRuleChain = async (_params: HandleContextMenuActionParamsType) => {
+    // const { useSaveAndRedoActionType, modalActionType, flowActionType } = params;
+    // const { createRuleChainModalActionType } = modalActionType;
+    // const result = (await unref(createRuleChainModalActionType)?.openCreateRuleChainModal()) as {
+    //   name: string;
+    //   additionalInfo: { description: string };
+    // };
+    // const ruleChainDetail = await saveRuleChainDetail(
+    //   Object.assign(result, { debugger: false, type: 'CORE' }) as Partial<RuleChainDetail>
+    // );
+    // const selectedNodes = unref(flowActionType?.getSelectedNodes);
+    // const selectedEdges = unref(flowActionType?.getSelectedEdges);
+    // const { firstNodeIndex, connections, nodes, outputEdgesId } = transformToRuleChain(
+    //   selectedNodes,
+    //   selectedEdges
+    // );
+    // await saveRuleChainData({
+    //   firstNodeIndex,
+    //   connections,
+    //   nodes,
+    //   ruleChainId: ruleChainDetail.id,
+    // });
+    // const outputEdges = outputEdgesId.map((id) => flowActionType?.findEdge(id));
+    // console.log(getElementsCenter(unref(selectedNodes)));
+    // const { originX, originY } = getElementsCenter(unref(selectedNodes));
+    // const {} = useNewNode();
+    // flowActionType?.removeNodes(selectedNodes || []);
+    // flowActionType?.removeEdges(selectedEdges || []);
+    // useSaveAndRedoActionType?.triggerChange();
+  };
+
   const handleContextMenuAction = (params: HandleContextMenuActionParamsType) => {
     const { menuType } = params;
 
@@ -213,6 +292,7 @@ export function useContextMenuAction() {
       [RuleContextMenuEnum.SELECT_COPY]: selectCopy,
       [RuleContextMenuEnum.APPLY_CHANGE]: applyChange,
       [RuleContextMenuEnum.UNDO_CHANGE]: undoChange,
+      [RuleContextMenuEnum.CREATE_RULE_CHAIN]: createRuleChain,
     };
 
     if (handlerMapping[menuType]) {

@@ -5,6 +5,7 @@ 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';
+import { CreateRuleChainModal } from '../src/components/CreateRuleChainModal';
 
 const SYMBOL = Symbol('flow-context');
 
@@ -30,6 +31,11 @@ interface FlowContextOptionsType {
   updateEdgeDrawerActionType: Ref<Nullable<InstanceType<typeof UpdateEdgeDrawer>>>;
 
   /**
+   * @description 创建规则链 actions
+   */
+  createRuleChainModalActionType: Ref<Nullable<InstanceType<typeof CreateRuleChainModal>>>;
+
+  /**
    * @description vue flow store
    */
   flowActionType: VueFlowStore;

+import { XYPosition } from '@vue-flow/core';
 import { Config as InputConfig } from '../packages/Entry/Input/config';
+import { Config as OutputConfig } from '../packages/Flow/Output/config';
+import { Config as RuleChainConfig } from '../packages/Flow/RuleChain/config';
 import { useAddNodes } from './useAddNodes';
 
-export function useInputNode() {
+export function useNewNode() {
   const getInputNodeConfig = (id?: string) => {
     const { getAddNodesParams } = useAddNodes();
 
@@ -20,5 +23,38 @@ export function useInputNode() {
     return newNode;
   };
 
-  return { getInputNodeConfig };
+  const getOutputNodeConfig = (name: string, position: XYPosition, id?: string) => {
+    const { getAddNodesParams } = useAddNodes();
+
+    const newNode = getAddNodesParams(
+      position,
+      {
+        ...new OutputConfig(),
+        data: {
+          name,
+        },
+      },
+      { id, draggable: false, selectable: false }
+    );
+
+    return newNode;
+  };
+
+  const getRuleChainNodeConfig = (name: string, position: XYPosition, id?: string) => {
+    const { getAddNodesParams } = useAddNodes();
+    const newNode = getAddNodesParams(
+      position,
+      {
+        ...new RuleChainConfig(),
+        data: { name },
+      },
+      {
+        id,
+      }
+    );
+
+    return newNode;
+  };
+
+  return { getInputNodeConfig, getOutputNodeConfig, getRuleChainNodeConfig };
 }

@@ -27,14 +27,19 @@ import { RuleChainDetail } from '../types/ruleNode';
 import { useContextMenuAction } from './useContextMenuAction';
 import { useSaveAndRedo } from './useSaveAndRedo';
 import { EntryCategoryComponentEnum } from '../enum/category';
+import { CreateRuleChainModal } from '../src/components/CreateRuleChainModal';
+import { useBasicDataTransform } from './useBasicDataTransform';
 
 interface UseRuleFlowOptionsType {
   id: string;
   ruleChainDetail: Ref<RuleChainDetail | undefined>;
-  createNodeModalActionType: Ref<Nullable<InstanceType<typeof CreateNodeModal>>>;
-  createEdgeModalActionType: Ref<Nullable<InstanceType<typeof CreateEdgeModal>>>;
-  updateNodeDrawerActionType: Ref<Nullable<InstanceType<typeof UpdateNodeDrawer>>>;
-  updateEdgeDrawerActionType: Ref<Nullable<InstanceType<typeof UpdateEdgeDrawer>>>;
+  modalActionType: {
+    createNodeModalActionType: Ref<Nullable<InstanceType<typeof CreateNodeModal>>>;
+    createEdgeModalActionType: Ref<Nullable<InstanceType<typeof CreateEdgeModal>>>;
+    updateNodeDrawerActionType: Ref<Nullable<InstanceType<typeof UpdateNodeDrawer>>>;
+    updateEdgeDrawerActionType: Ref<Nullable<InstanceType<typeof UpdateEdgeDrawer>>>;
+    createRuleChainModalActionType: Ref<Nullable<InstanceType<typeof CreateRuleChainModal>>>;
+  };
   useSaveAndRedoActionType: ReturnType<typeof useSaveAndRedo>;
 }
 
@@ -47,14 +52,10 @@ const validateInputAndOutput: ValidConnectionFunc = (connection: Connection) =>
 };
 
 export function useRuleFlow(options: UseRuleFlowOptionsType) {
-  const {
-    id,
-    ruleChainDetail,
-    createEdgeModalActionType,
-    updateEdgeDrawerActionType,
-    updateNodeDrawerActionType,
-    useSaveAndRedoActionType,
-  } = options;
+  const { id, ruleChainDetail, modalActionType, useSaveAndRedoActionType } = options;
+
+  const { createEdgeModalActionType, updateEdgeDrawerActionType, updateNodeDrawerActionType } =
+    modalActionType;
 
   const { triggerChange } = useSaveAndRedoActionType;
 
@@ -162,29 +163,35 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
 
   const { handleContextMenuAction } = useContextMenuAction();
 
+  const { validateCanCreateRuleChain } = useBasicDataTransform();
+
   onNodeContextMenu(async (params) => {
     const menuType = params.node.selected
       ? await createElementsSelectedContextMenu(
           params,
           unref(useSaveAndRedoActionType.changeMarker),
-          validateSelectionElementsCanCreateRuleChain()
+          validateCanCreateRuleChain(
+            flowActionType.getSelectedNodes,
+            flowActionType.getSelectedEdges
+          ).flag
         )
       : await createNodeContextMenu(params);
 
-    if (menuType) {
-      if (menuType === RuleContextMenuEnum.DETAIL) {
-        handleUpdateNode(params.node);
-        return;
-      }
+    if (!menuType) return;
 
-      handleContextMenuAction({
-        menuType,
-        flowActionType,
-        event: params.event,
-        node: params.node,
-        useSaveAndRedoActionType,
-      });
+    if (menuType === RuleContextMenuEnum.DETAIL) {
+      handleUpdateNode(params.node);
+      return;
     }
+
+    handleContextMenuAction({
+      menuType,
+      flowActionType,
+      event: params.event,
+      node: params.node,
+      useSaveAndRedoActionType,
+      modalActionType,
+    });
   });
 
   onEdgeContextMenu(async (params) => {
@@ -207,6 +214,7 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
         event: params.event,
         useSaveAndRedoActionType,
         edge: params.edge,
+        modalActionType,
       });
     }
   });
@@ -216,21 +224,25 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
       ? await createElementsSelectedContextMenu(
           getCreatePanelContextMenuParams(params),
           unref(useSaveAndRedoActionType.changeMarker),
-          validateSelectionElementsCanCreateRuleChain()
+          validateCanCreateRuleChain(
+            flowActionType.getSelectedNodes,
+            flowActionType.getSelectedEdges
+          ).flag
         )
       : await createPanelContextMenu(
           getCreatePanelContextMenuParams(params),
           unref(useSaveAndRedoActionType.changeMarker)
         );
 
-    if (menuType) {
-      handleContextMenuAction({
-        menuType,
-        flowActionType,
-        event: params,
-        useSaveAndRedoActionType,
-      });
-    }
+    if (!menuType) return;
+
+    handleContextMenuAction({
+      menuType,
+      flowActionType,
+      event: params,
+      useSaveAndRedoActionType,
+      modalActionType,
+    });
   });
 
   /**
@@ -382,17 +394,5 @@ 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 };
 }

-import type { VueFlowStore, Getters, Elements } from '@vue-flow/core';
-import { ComputedRef, computed, ref, unref } from 'vue';
-import { BasicNodeBindData, EdgeData, NodeData } from '../types/node';
-import { EntryCategoryComponentEnum } from '../enum/category';
+import type { VueFlowStore, Elements } from '@vue-flow/core';
+import { computed, ref, unref } from 'vue';
+import { BasicNodeBindData, NodeData } from '../types/node';
 import { useBasicDataTransform } from './useBasicDataTransform';
 import {
   getRuleChainData,
@@ -10,15 +9,13 @@ import {
   saveRuleChainDetail,
 } from '/@/api/ruleDesigner';
 import { ConnectionItemType, RuleChainDetail, RuleChainType } from '../types/ruleNode';
-import { useInputNode } from './useInputNode';
+import { useNewNode } from './useNewNode';
 import { buildUUID } from '/@/utils/uuid';
 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];
-
 export function useSaveAndRedo() {
   const changeMarker = ref(false);
 
@@ -38,7 +35,7 @@ export function useSaveAndRedo() {
 
   const ruleChainDetail = ref<RuleChainDetail>();
 
-  const { mergeData, deconstructionData } = useBasicDataTransform();
+  const { combineData, deconstructionData } = useBasicDataTransform();
 
   const triggerChange = () => {
     changeMarker.value = true;
@@ -48,90 +45,14 @@ export function useSaveAndRedo() {
     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(
-        Object.assign(
-          mergeData(data, nodeData, node),
-          nodeData.created
-            ? ({
-                id: { id: node.id, entityType: RuleChainEntityType.RULE_NODE },
-              } as BasicNodeBindData)
-            : {}
-        )
-      );
-    }
-
-    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 === EntryCategoryComponentEnum.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, nodes, firstNodeIndex } = combineData(
+      flowActionType.getNodes,
+      flowActionType.getEdges
     );
 
-    const connections = getConnections(extraIgnoreNodeRef, edgesRef);
-
-    const nodes = getNodes(extraIgnoreNodeRef);
-
-    const firstNodeIndex = getFirsetNodeIndex(extraIgnoreNodeRef, edgesRef);
-
     handleSaveRuleChain(connections, nodes, firstNodeIndex);
   };
 
@@ -211,7 +132,7 @@ export function useSaveAndRedo() {
   function parseRuleChain(ruleChain: RuleChainType) {
     const inputId = buildUUID();
 
-    const { getInputNodeConfig } = useInputNode();
+    const { getInputNodeConfig } = useNewNode();
 
     const value = deconstructionData(ruleChain, inputId);
 

@@ -19,10 +19,11 @@
   import { CreateEdgeModal } from './src/components/CreateEdgeModal';
   import { useFullScreen } from './hook/useFullScreen';
   import { useSaveAndRedo } from './hook/useSaveAndRedo';
+  import { NodeData } from './types/node';
   import { Icon } from '/@/components/Icon';
   import { UpdateNodeDrawer } from './src/components/UpdateNodeDrawer';
   import { UpdateEdgeDrawer } from './src/components/UpdateEdgeDrawer';
-  import { NodeData } from './types/node';
+  import { CreateRuleChainModal } from './src/components/CreateRuleChainModal';
 
   const getId = Number(Math.random().toString().substring(2)).toString(16);
 
@@ -36,6 +37,9 @@
 
   const updateEdgeDrawerActionType = ref<Nullable<InstanceType<typeof UpdateEdgeDrawer>>>(null);
 
+  const createRuleChainModalActionType =
+    ref<Nullable<InstanceType<typeof CreateRuleChainModal>>>(null);
+
   const flowElRef = ref<Nullable<FlowElRef>>(null);
 
   const elements = ref([]);
@@ -57,11 +61,14 @@
   const { flowActionType } = useRuleFlow({
     id: getId,
     ruleChainDetail,
-    createNodeModalActionType,
-    createEdgeModalActionType,
-    updateEdgeDrawerActionType,
-    updateNodeDrawerActionType,
     useSaveAndRedoActionType,
+    modalActionType: {
+      createNodeModalActionType,
+      createEdgeModalActionType,
+      updateEdgeDrawerActionType,
+      updateNodeDrawerActionType,
+      createRuleChainModalActionType,
+    },
   });
 
   const { handleOnDragOver, handleOnDrop } = useDragCreate({
@@ -85,6 +92,8 @@
 
   const handleDeleteSelectionElements = () => {
     flowActionType.removeNodes(unref(flowActionType.getSelectedNodes));
+    flowActionType.removeEdges(unref(flowActionType.getSelectedEdges));
+    useSaveAndRedoActionType.triggerChange?.();
   };
 
   onMounted(() => {
@@ -97,6 +106,7 @@
     createNodeModalActionType,
     updateEdgeDrawerActionType,
     updateNodeDrawerActionType,
+    createRuleChainModalActionType,
     flowActionType,
     triggerChange,
   });
@@ -177,6 +187,8 @@
 
     <UpdateEdgeDrawer ref="updateEdgeDrawerActionType" />
     <UpdateNodeDrawer ref="updateNodeDrawerActionType" />
+
+    <CreateRuleChainModal ref="createRuleChainModalActionType" />
   </main>
 </template>
 

+import { FormSchema } from '/@/components/Form';
+
+export enum FormFieldsEnum {
+  NAME = 'name',
+  DESCRIPTION = 'description',
+  ADDITIONAL_INFO = 'additionalInfo',
+}
+
+export enum FormFieldsNameEnum {
+  NAME = '名称',
+  DESCRIPTION = '说明',
+}
+
+export const formSchemas: FormSchema[] = [
+  {
+    field: FormFieldsEnum.NAME,
+    label: FormFieldsNameEnum.NAME,
+    component: 'Input',
+    required: true,
+    componentProps: {
+      placeholder: `请输入${FormFieldsNameEnum.NAME}`,
+    },
+  },
+  {
+    field: FormFieldsEnum.DESCRIPTION,
+    label: FormFieldsNameEnum.DESCRIPTION,
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: `请输入${FormFieldsNameEnum.DESCRIPTION}`,
+    },
+  },
+];

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

+<script setup lang="ts">
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchemas, FormFieldsEnum } from './config';
+  import { ref } from 'vue';
+
+  interface SaveParamsType {
+    name: string;
+    additional: { description: string };
+  }
+
+  const visible = ref(false);
+
+  const [register, { closeModal }] = useModalInner();
+
+  const [registerForm, { getFieldsValue, validate }] = useForm({
+    schemas: formSchemas,
+    showActionButtonGroup: false,
+    layout: 'vertical',
+  });
+
+  let resolveFn: undefined | ((value: SaveParamsType) => any);
+
+  const openCreateRuleChainModal = async (): Promise<{
+    name: string;
+    additionalInfo: { description: string };
+  }> => {
+    visible.value = true;
+    return new Promise((resolve) => {
+      resolveFn = resolve;
+    });
+  };
+
+  const handleSave = async () => {
+    await validate();
+    const value = getFieldsValue();
+    resolveFn?.({
+      name: value[FormFieldsEnum.NAME],
+      additional: { description: value[FormFieldsEnum.DESCRIPTION] || '' },
+    });
+    closeModal();
+  };
+
+  defineExpose({ openCreateRuleChainModal });
+</script>
+
+<template>
+  <BasicModal
+    v-model:visible="visible"
+    @register="register"
+    @ok="handleSave"
+    title="Create nested rule chain"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>

@@ -24,7 +24,7 @@ export interface RuleChainDetail {
   createdTime: number;
   additionalInfo: AdditionalInfo;
   tenantId: Id;
-  name: Id;
+  name: string;
   type: string;
   firstRuleNodeId: Id;
   root: boolean;