feat: 规则链设计器节点目录

 import type { VueFlowStore, Getters, Elements } from '@vue-flow/core';
-import { ComputedRef, ref, unref } from 'vue';
+import { ComputedRef, computed, ref, unref } from 'vue';
 import { BasicNodeBindData, EdgeData, NodeData } from '../types/node';
 import { EntryCategoryComponentEnum } from '../enum/category';
 import { useBasicDataTransform } from './useBasicDataTransform';
@@ -7,6 +7,7 @@ import { getRuleChainData, saveRuleChainData } from '/@/api/ruleDesigner';
 import { ConnectionItemType, RuleChainType } from '../types/ruleNode';
 import { useInputNode } from './useInputNode';
 import { buildUUID } from '/@/utils/uuid';
+import { useRoute } from 'vue-router';
 
 const ignoreNodeKeys: string[] = [EntryCategoryComponentEnum.INPUT];
 
@@ -17,6 +18,10 @@ export function useSaveAndRedo() {
 
   const redoDataRef = ref<Elements>([]);
 
+  const route = useRoute();
+
+  const getRuleChainId = computed(() => (route.params as Record<'id', string>).id);
+
   const { mergeData, deconstructionData } = useBasicDataTransform();
 
   const triggerChange = () => {
@@ -124,7 +129,7 @@ export function useSaveAndRedo() {
         firstNodeIndex,
         ruleChainId: {
           entityType: 'RULE_CHAIN',
-          id: '992ddda0-3d97-11ee-8b46-0dfb0900ab17',
+          id: unref(getRuleChainId),
         },
       });
 
@@ -140,9 +145,7 @@ export function useSaveAndRedo() {
     try {
       loading.value = true;
 
-      const id = '992ddda0-3d97-11ee-8b46-0dfb0900ab17';
-
-      const data = await getRuleChainData(id);
+      const data = await getRuleChainData(unref(getRuleChainId));
 
       const elements = parseRuleChain(data);
 

@@ -5,7 +5,12 @@
   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 {
+    BasicConnectionArrow,
+    BasicConnectionLine,
+    BasicEdge,
+    MenuSidebar,
+  } from './src/components';
   import type { FlowElRef } from './types/flow';
   import { useDragCreate } from './hook/useDragCreate';
   import { createFlowContext } from './hook/useFlowContext';
@@ -88,7 +93,8 @@
 
 <template>
   <main ref="rootElRef" class="w-full h-full flex relative" @drop="handleOnDrop">
-    <Sidebar />
+    <!-- <Sidebar /> -->
+    <MenuSidebar />
 
     <Spin :spinning="loading" wrapperClassName="w-full h-ful rule-chain-designer-loading-container">
       <VueFlow

 import { BasicConnectionModalEnum } from '../enum';
 import { FetchNodeComFlagTypeENum } from '../enum/node';
-import type { CategoryConfigType, NodeItemConfigType } from '../types/node';
+import type { NodeItemConfigType } from '../types/node';
 import { ActionCategoryConfig, ActionComponents } from './Action';
 import { EnrichmentCategoryConfig, EnrichmentComponents } from './Enrichment';
 import { ExternalCategoryConfig, ExternalComponents } from './External';
 import { FilterCategoryConfig, FilterComponents } from './Filter';
 import { FlowCategoryConfig, FlowComponents } from './Flow';
 import { TransformationCategoryConfig, TransformationComponents } from './Transformation';
-import { RuleNodeTypeEnum } from './index.type';
+import { CategoryItemType, RuleNodeTypeEnum } from './index.type';
 
 const createModules = import.meta.glob('../packages/**/create.vue');
 const connectionModules = import.meta.glob('../packages/**/connection.vue');
@@ -63,7 +63,7 @@ export const fetchNodeExtraContent = async (config: NodeItemConfigType) => {
 
 export const allComponents: Record<
   Exclude<RuleNodeTypeEnum, RuleNodeTypeEnum.ENTRY>,
-  { category: CategoryConfigType; components: NodeItemConfigType[] }
+  CategoryItemType
 > = {
   [RuleNodeTypeEnum.FILTER]: {
     category: FilterCategoryConfig,

+import { CategoryConfigType, NodeItemConfigType } from '../types/node';
+
 export enum RuleNodeTypeEnum {
   ENTRY = 'ENTRY',
   FLOW = 'FLOW',
@@ -7,3 +9,8 @@ export enum RuleNodeTypeEnum {
   FILTER = 'FILTER',
   TRANSFORMATION = 'TRANSFORMATION',
 }
+
+export interface CategoryItemType {
+  category: CategoryConfigType;
+  components: NodeItemConfigType[];
+}

+<script lang="ts" setup>
+  import { CategoryItemType, RuleNodeTypeEnum } from '../../../packages/index.type';
+  import Icon from '/@/components/Icon';
+  import { Tooltip } from 'ant-design-vue';
+
+  const emit = defineEmits<{
+    (eventName: 'update:activeKey', activeKey?: RuleNodeTypeEnum);
+  }>();
+
+  defineProps<{
+    activeKey?: RuleNodeTypeEnum;
+    category?: CategoryItemType;
+  }>();
+
+  const handleClick = (category?: RuleNodeTypeEnum) => {
+    emit('update:activeKey', category);
+  };
+</script>
+
+<template>
+  <Tooltip color="#fff" placement="right">
+    <template #title>
+      <p class="text-dark-900 font-bold text-xs m-0 py-1">
+        {{ category?.category.title }}
+      </p>
+      <p class="text-gray-500 text-xs m-0 py-1">
+        {{ category?.category.description }}
+      </p>
+    </template>
+    <div
+      class="h-16 mt-2 flex justify-center items-center flex-col cursor-pointer rounded"
+      :class="activeKey === category?.category.category ? 'bg-blue-100 text-blue-400' : ''"
+      @click="handleClick(category?.category.category)"
+    >
+      <Icon :icon="category?.category.icon" class="svg:text-3xl" />
+      <div class="select-none">{{ category?.category.title }}</div>
+    </div>
+  </Tooltip>
+</template>

+<script lang="ts" setup>
+  import { cloneDeep } from 'lodash';
+  import { computed, ref, unref } from 'vue';
+  import { allComponents } from '../../../packages';
+  import { CategoryItemType, RuleNodeTypeEnum } from '../../../packages/index.type';
+  import CategoryItem from './CategoryItem.vue';
+  import NodeItem from './NodeItem.vue';
+
+  const props = defineProps<{
+    searchText?: string;
+  }>();
+
+  const activeKey = ref<RuleNodeTypeEnum | undefined>(RuleNodeTypeEnum.FILTER);
+
+  const getCurrentCategoryNode = computed<CategoryItemType>(() => {
+    const category = cloneDeep(allComponents[unref(activeKey)!]) as CategoryItemType;
+    const { searchText } = props;
+    if (searchText) {
+      category.components = category.components.filter((item) =>
+        item.name.toUpperCase().includes(searchText.toUpperCase())
+      );
+    }
+    return category;
+  });
+</script>
+
+<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
+        v-for="category in allComponents"
+        :key="category.category.category"
+        v-model:activeKey="activeKey"
+        :category="category"
+      />
+    </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"
+        :key="config.clazz"
+        :config="config"
+        :category="getCurrentCategoryNode.category"
+      />
+    </body>
+  </section>
+</template>

+<script setup lang="ts">
+  import { Input, Tooltip } from 'ant-design-vue';
+  import { Icon } from '/@/components/Icon';
+
+  const emit = defineEmits(['fold', 'search']);
+
+  const handleOnFold = () => emit('fold');
+
+  const handleInputChange = (event: Event) => {
+    const value = (event.target as HTMLInputElement).value;
+    emit('search', value);
+  };
+</script>
+
+<template>
+  <head class="h-11 w-full flex justify-between items-center bg-neutral-100">
+    <Input
+      placeholder="搜索节点"
+      class="!mx-2 flex-auto"
+      @change="handleInputChange"
+      :allowClear="true"
+    >
+      <template #suffix>
+        <Icon icon="material-symbols:search" />
+      </template>
+    </Input>
+    <div class="w-14 min-w-14 flex justify-center">
+      <Tooltip title="折叠">
+        <Icon
+          icon="ant-design:menu-fold-outlined"
+          class="cursor-pointer svg:text-xl"
+          @click="handleOnFold"
+        />
+      </Tooltip>
+    </div>
+  </head>
+</template>

+<script lang="ts" setup>
+  import { Tooltip } from 'ant-design-vue';
+  import { computed, ref, toRaw, unref } from 'vue';
+  import { EFFECT_SYMBOL, TRANSFER_DATA_KEY } from '../../../hook/useDragCreate';
+  import { CategoryConfigType, NodeItemConfigType } from '../../../types/node';
+
+  const props = defineProps<{
+    category?: CategoryConfigType;
+    config?: NodeItemConfigType;
+  }>();
+
+  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 getIconUrl = computed(() => {
+    const { iconUrl } = unref(getNodeDefinition);
+    return iconUrl;
+  });
+
+  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="right"
+    color="#fff"
+    trigger="hover"
+    :mouse-enter-delay="0.5"
+    overlay-class-name="!max-w-90"
+  >
+    <template #title>
+      <section class="text-dark-900">
+        <h1 class="font-bold dark:text-dark-50">
+          {{ config?.name }}
+        </h1>
+        <p class="italic text-gray-600">
+          {{ getNodeDefinition.description }}
+        </p>
+        <p v-html="getNodeDefinition.details"></p>
+      </section>
+    </template>
+    <main
+      class="node flex items-center cursor-pointer w-44 h-12 min-h-12 rounded border relative px-4 py-2 border-gray-700 z-10"
+      :style="{ backgroundColor: getBackgroundColor }"
+      :draggable="true"
+      @dragstart="handleDragStart"
+    >
+      <div>
+        <img v-if="getIconUrl" class="w-4 h-4" :src="getIconUrl" alt="" />
+        <Icon v-if="!getIconUrl" class="text-2xl dark:text-light-50" :icon="getIcon" />
+      </div>
+      <div class="flex flex-1 text-xs flex-col ml-2 text-left truncate">
+        <span class="text-gray-700 w-full truncate text-xs dark:text-light-50">
+          {{ config?.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>
+  .node::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    display: none;
+    background-color: #00000027;
+  }
+
+  .node:hover::before {
+    display: block;
+  }
+</style>

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

+<script setup lang="ts">
+  import NodeFilter from './NodeFilter.vue';
+  import CategoryPanel from './CategoryPanel.vue';
+  import { computed, CSSProperties, ref, unref } from 'vue';
+  import { Icon } from '/@/components/Icon';
+  import { Tooltip } from 'ant-design-vue';
+
+  const expand = ref(true);
+
+  const searchText = ref();
+
+  const handleOnFold = () => {
+    expand.value = false;
+  };
+
+  const getSidebarStyle = computed<CSSProperties>(() => {
+    return {
+      flex: `0 0 ${unref(expand) ? '320px' : 0}`,
+      width: unref(expand) ? '320px' : 0,
+      minWidth: unref(expand) ? '320px' : 0,
+    };
+  });
+
+  const handleSearch = (value: string) => {
+    searchText.value = value;
+  };
+</script>
+
+<template>
+  <section
+    :style="getSidebarStyle"
+    class="h-full shadow shadow-lg relative z-50 shadow-dark-600 overflow-hidden transition-all"
+  >
+    <NodeFilter @fold="handleOnFold" @search="handleSearch" />
+    <CategoryPanel :searchText="searchText" />
+  </section>
+  <Tooltip title="展开">
+    <Icon
+      icon="ant-design:menu-unfold-outlined"
+      class="cursor-pointer svg:text-2xl absolute top-5 left-5 z-40 !flex justify-center items-center w-10 h-10 rounded-1 bg-blue-200 svg:text-light-50 shadow-lg"
+      @click="expand = true"
+    />
+  </Tooltip>
+</template>

+import { h } from 'vue';
 import { BasicColumn } from '/@/components/Table';
+import { dateUtil } from '/@/utils/dateUtil';
+import Icon from '/@/components/Icon';
+import { Modal } from 'ant-design-vue';
+import { JsonPreview } from '/@/components/CodeEditor';
+
+const handleOpenJsonPreviewModal = (title: string, content: string) => {
+  Modal.info({
+    title,
+    width: 600,
+    content: h(JsonPreview, { data: JSON.parse(content) }),
+  });
+};
 
 export const columns: BasicColumn[] = [
   {
     title: '事件时间',
     dataIndex: 'createdTime',
+    width: 200,
+    format(text) {
+      return dateUtil(text).format('YYYY-MM-DD HH:mm:ss');
+    },
   },
   {
     title: '服务器',
     dataIndex: 'body.server',
+    ellipsis: true,
   },
   {
     title: '类型',
-    dataIndex: 'type',
+    dataIndex: 'body.type',
+    ellipsis: true,
   },
   {
     title: '实体类型',
-    dataIndex: 'entityId.entityType',
+    dataIndex: 'body.entityName',
+    ellipsis: true,
   },
   {
     title: '消息ID',
-    dataIndex: 'id.id',
+    dataIndex: 'body.entityId',
+    ellipsis: true,
   },
   {
     title: '消息类型',
-    dataIndex: 'msgtype',
+    dataIndex: 'body.msgType',
+    ellipsis: true,
   },
   {
     title: '关联类型',
-    dataIndex: 'relatedType',
+    dataIndex: 'body.relationType',
+    ellipsis: true,
   },
   {
     title: '数据',
-    dataIndex: 'data',
+    dataIndex: 'body.data',
+    ellipsis: true,
+    width: 80,
+    customRender({ text }) {
+      return (
+        text &&
+        h(Icon, {
+          icon: 'material-symbols:more-horiz',
+          class: 'cursor-pointer svg:text-2xl',
+          onClick: () => handleOpenJsonPreviewModal('数据', text),
+        })
+      );
+    },
   },
   {
     title: '元数据',
-    dataIndex: 'metadaeta',
+    dataIndex: 'body.metadata',
+    ellipsis: true,
+    width: 80,
+    customRender({ text }) {
+      return (
+        text &&
+        h(Icon, {
+          icon: 'material-symbols:more-horiz',
+          class: 'cursor-pointer svg:text-2xl',
+          onClick: () => handleOpenJsonPreviewModal('元数据', text),
+        })
+      );
+    },
   },
   {
     title: '错误',
     dataIndex: 'error',
+    width: 80,
+    slots: {
+      customRender: 'error',
+    },
   },
 ];

@@ -46,6 +46,8 @@
       const result = await getRuleNodeEventList(
         unref(getNodeId)!,
         {
+          sortProperty: 'createdTime',
+          sortOrder: 'DESC',
           page: params.page - 1,
           pageSize: params.pageSize,
           tenantId: unref(getTenantId),
@@ -130,6 +132,7 @@
       </template>
       <template #error="{ text }">
         <Icon
+          v-if="text"
           icon="material-symbols:more-horiz"
           class="cursor-pointer svg:text-2xl"
           @click="handleOpenDetailModal(text)"

@@ -18,12 +18,14 @@ export const columns: BasicColumn[] = [
   },
   {
     title: '消息处理',
-    dataIndex: 'body.event',
+    dataIndex: 'body.messagesProcessed',
     ellipsis: true,
+    width: 100,
   },
   {
     title: '错误发生',
-    dataIndex: 'body.event',
+    dataIndex: 'body.errorsOccurred',
     ellipsis: true,
+    width: 100,
   },
 ];

 export * from './Basic';
 export * from './Sidebar';
+export { MenuSidebar } from './MenuSidebar';