feat: 完成event事件面板组件开发

@@ -6,6 +6,7 @@ import { RuleChainType } from '/@/views/rule/designer/types/ruleNode';
 enum Api {
 enum Api {
   SAVE = '/ruleChain/metadata',
   SAVE = '/ruleChain/metadata',
   GET_RULE_CHAINES = '/ruleChains',
   GET_RULE_CHAINES = '/ruleChains',
+  GET_RULE_NODE_EVENTS = '/events/RULE_NODE',
 }
 }
 
 
 export const getRuleChainData = (id: string) => {
 export const getRuleChainData = (id: string) => {
@@ -38,3 +39,18 @@ export const getRuleChains = (params: Recordable) => {
     }
     }
   );
   );
 };
 };
+
+export const getRuleNodeEventList = (
+  ruleNodeId: string,
+  params: Recordable,
+  data: Recordable & Record<'eventType', string>
+) => {
+  return defHttp.post<TBPaginationResult>(
+    {
+      url: `${Api.GET_RULE_NODE_EVENTS}/${ruleNodeId}`,
+      params,
+      data,
+    },
+    { joinPrefix: false }
+  );
+};

@@ -10,6 +10,11 @@ interface OptionsType {
   type: ElementsTypeEnum;
   type: ElementsTypeEnum;
 }
 }
 
 
+export interface ElementInfo {
+  id: string;
+  type: ElementsTypeEnum;
+}
+
 export function useAwaitPopupWindowBindData(
 export function useAwaitPopupWindowBindData(
   options: OptionsType = { mode: DataActionModeEnum.CREATE, type: ElementsTypeEnum.NODE }
   options: OptionsType = { mode: DataActionModeEnum.CREATE, type: ElementsTypeEnum.NODE }
 ) {
 ) {
@@ -29,6 +34,8 @@ export function useAwaitPopupWindowBindData(
 
 
   const shadowComponent = shallowRef<Nullable<Component>>();
   const shadowComponent = shallowRef<Nullable<Component>>();
 
 
+  const elementInfo = ref<ElementInfo>();
+
   const getNodeSetValue = computed(() => {
   const getNodeSetValue = computed(() => {
     return unref(mode) === DataActionModeEnum.CREATE
     return unref(mode) === DataActionModeEnum.CREATE
       ? unref(nodeData)?.config?.configurationDescriptor.nodeDefinition.defaultConfiguration
       ? unref(nodeData)?.config?.configurationDescriptor.nodeDefinition.defaultConfiguration
@@ -68,8 +75,10 @@ export function useAwaitPopupWindowBindData(
 
 
   const open = async (
   const open = async (
     nodeData: NodeData,
     nodeData: NodeData,
-    edgeData?: EdgeData
+    edgeData?: EdgeData,
+    _elementInfo?: ElementInfo
   ): Promise<AwaitPopupWindowReturnDataType> => {
   ): Promise<AwaitPopupWindowReturnDataType> => {
+    elementInfo.value = _elementInfo;
     await handleFetchComponent(nodeData, edgeData);
     await handleFetchComponent(nodeData, edgeData);
     return new Promise((_resolve) => {
     return new Promise((_resolve) => {
       visible.value = true;
       visible.value = true;
@@ -113,6 +122,7 @@ export function useAwaitPopupWindowBindData(
     visible,
     visible,
     nodeData,
     nodeData,
     spinning,
     spinning,
+    elementInfo,
     shadowComponent,
     shadowComponent,
     createComponentEl,
     createComponentEl,
     getComponentKey,
     getComponentKey,

@@ -10,7 +10,7 @@ import type { Ref } from 'vue';
 import { markRaw, toRaw, unref } from 'vue';
 import { markRaw, toRaw, unref } from 'vue';
 import { isFunction } from 'lodash-es';
 import { isFunction } from 'lodash-es';
 import type { CreateNodeModal } from '../src/components/CreateNodeModal';
 import type { CreateNodeModal } from '../src/components/CreateNodeModal';
-import { EdgeTypeEnum, NodeTypeEnum } from '../enum';
+import { EdgeTypeEnum, ElementsTypeEnum, NodeTypeEnum } from '../enum';
 import { BasicEdge, BasicNode } from '../src/components';
 import { BasicEdge, BasicNode } from '../src/components';
 import type { EdgeData, NodeData } from '../types/node';
 import type { EdgeData, NodeData } from '../types/node';
 import type { CreateEdgeModal } from '../src/components/CreateEdgeModal';
 import type { CreateEdgeModal } from '../src/components/CreateEdgeModal';
@@ -126,10 +126,11 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
 
 
   onNodeDoubleClick(async ({ node }) => {
   onNodeDoubleClick(async ({ node }) => {
     if ((node.data as NodeData).config?.disableAction) return;
     if ((node.data as NodeData).config?.disableAction) return;
-
     const { flag, data } =
     const { flag, data } =
       (await unref(updateNodeDrawerActionType)?.open(
       (await unref(updateNodeDrawerActionType)?.open(
-        toRaw((node as NodeData)?.data as unknown as NodeData)
+        toRaw((node as NodeData)?.data as unknown as NodeData),
+        void 0,
+        { id: node.id, type: ElementsTypeEnum.NODE }
       )) || {};
       )) || {};
 
 
     if (!flag) return;
     if (!flag) return;
@@ -146,7 +147,8 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
     const { flag, data } =
     const { flag, data } =
       (await unref(updateEdgeDrawerActionType)?.open(
       (await unref(updateEdgeDrawerActionType)?.open(
         toRaw(unref(edge.sourceNode?.data as unknown as NodeData)),
         toRaw(unref(edge.sourceNode?.data as unknown as NodeData)),
-        toRaw(unref(edge.data as EdgeData))
+        toRaw(unref(edge.data as EdgeData)),
+        { id: edge.id, type: ElementsTypeEnum.EDGE }
       )) || {};
       )) || {};
 
 
     if (!flag) return;
     if (!flag) return;

 <script setup lang="ts">
 <script setup lang="ts">
+  import { Spin } from 'ant-design-vue';
   import { Background, BackgroundVariant } from '@vue-flow/background';
   import { Background, BackgroundVariant } from '@vue-flow/background';
   import { Controls } from '@vue-flow/controls';
   import { Controls } from '@vue-flow/controls';
   import { Panel, PanelPosition, VueFlow } from '@vue-flow/core';
   import { Panel, PanelPosition, VueFlow } from '@vue-flow/core';
@@ -34,6 +35,7 @@
   const elements = ref([]);
   const elements = ref([]);
 
 
   const {
   const {
+    loading,
     changeMarker,
     changeMarker,
     getCurrentPageMetaData,
     getCurrentPageMetaData,
     triggerChange,
     triggerChange,
@@ -88,66 +90,68 @@
   <main ref="rootElRef" class="w-full h-full flex relative" @drop="handleOnDrop">
   <main ref="rootElRef" class="w-full h-full flex relative" @drop="handleOnDrop">
     <Sidebar />
     <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>
+    <Spin :spinning="loading" wrapperClassName="w-full h-ful rule-chain-designer-loading-container">
+      <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
           <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)"
+            class="w-10 h-10 bg-gray-300 flex justify-center items-center rounded-full dark:bg-dark-50"
+            @click="handleFullScreen"
           >
           >
-            <Icon class="!text-3xl !text-light-50" icon="ic:baseline-close" />
+            <Icon class="!text-2xl dark:text-light-50" :icon="getFullScreenIcon" />
           </button>
           </button>
-        </section>
-      </Panel>
-
-      <Panel position="top-right">
-        <button
-          class="w-10 h-10 bg-gray-300 flex justify-center items-center rounded-full dark:bg-dark-50"
-          @click="handleFullScreen"
-        >
-          <Icon class="!text-2xl dark:text-light-50" :icon="getFullScreenIcon" />
-        </button>
-      </Panel>
-    </VueFlow>
+        </Panel>
+      </VueFlow>
+    </Spin>
 
 
     <CreateNodeModal ref="createNodeModalActionType" :get-container="handleGetContainer" />
     <CreateNodeModal ref="createNodeModalActionType" :get-container="handleGetContainer" />
     <CreateEdgeModal ref="createEdgeModalActionType" :get-container="handleGetContainer" />
     <CreateEdgeModal ref="createEdgeModalActionType" :get-container="handleGetContainer" />
@@ -162,3 +166,11 @@
     box-shadow: 0 3px 5px -1px #0003, 0 6px 10px 0 #00000024, 0 1px 18px 0 #0000001f;
     box-shadow: 0 3px 5px -1px #0003, 0 6px 10px 0 #00000024, 0 1px 18px 0 #0000001f;
   }
   }
 </style>
 </style>
+
+<style lang="less">
+  .rule-chain-designer-loading-container {
+    .ant-spin-container {
+      @apply w-full h-full;
+    }
+  }
+</style>

@@ -6,6 +6,7 @@
   import { useConnectionFocus } from '../../../hook/useConnectionFocus';
   import { useConnectionFocus } from '../../../hook/useConnectionFocus';
   import { useFlowContext } from '../../../hook/useFlowContext';
   import { useFlowContext } from '../../../hook/useFlowContext';
   import { useTextWidth } from '../../../hook/useTextWidth';
   import { useTextWidth } from '../../../hook/useTextWidth';
+  import { ElementsTypeEnum } from '../../../enum';
 
 
   const props = defineProps<EdgeProps>();
   const props = defineProps<EdgeProps>();
 
 
@@ -31,7 +32,8 @@
     const { flag, data } =
     const { flag, data } =
       (await unref(updateEdgeDrawerActionType)?.open(
       (await unref(updateEdgeDrawerActionType)?.open(
         toRaw(unref(props.sourceNode?.data as unknown as NodeData)),
         toRaw(unref(props.sourceNode?.data as unknown as NodeData)),
-        toRaw(unref(props.data as EdgeData))
+        toRaw(unref(props.data as EdgeData)),
+        { id: props.id, type: ElementsTypeEnum.EDGE }
       )) || {};
       )) || {};
 
 
     if (!flag) return;
     if (!flag) return;

@@ -5,6 +5,7 @@
   import { computed, toRaw, unref } from 'vue';
   import { computed, toRaw, unref } from 'vue';
   import { useFlowContext } from '../../../hook/useFlowContext';
   import { useFlowContext } from '../../../hook/useFlowContext';
   import type { NodeData } from '../../../types/node';
   import type { NodeData } from '../../../types/node';
+  import { ElementsTypeEnum } from '../../../enum';
 
 
   const props = defineProps<NodeProps>();
   const props = defineProps<NodeProps>();
 
 
@@ -14,7 +15,10 @@
 
 
   const handleOpenEdit = async () => {
   const handleOpenEdit = async () => {
     const { flag, data } =
     const { flag, data } =
-      (await unref(updateNodeDrawerActionType)?.open(toRaw(unref(getData)))) || {};
+      (await unref(updateNodeDrawerActionType)?.open(toRaw(unref(getData)), void 0, {
+        id: props.id,
+        type: ElementsTypeEnum.NODE,
+      })) || {};
 
 
     if (!flag) return;
     if (!flag) return;
 
 

-<script lang="ts" setup>
-  import { useTable, BasicTable } from '/@/components/Table';
-  import { columns, formSchemas } from './debugEvent.config';
-
-  const [register] = useTable({
-    columns,
-    showIndexColumn: false,
-    useSearchForm: true,
-    formConfig: {
-      layout: 'inline',
-      baseColProps: {
-        span: 12,
-      },
-      labelWidth: 80,
-      schemas: formSchemas,
-    },
-  });
-</script>
-
-<template>
-  <BasicTable @register="register" />
-</template>

-import { BasicColumn, FormSchema } from '/@/components/Table';
-
-export const columns: BasicColumn[] = [
-  {
-    title: '事件时间',
-    dataIndex: '',
-  },
-  {
-    title: '服务器',
-    dataIndex: '',
-  },
-  {
-    title: '类型',
-    dataIndex: '',
-  },
-  {
-    title: '实体类型',
-    dataIndex: '',
-  },
-  {
-    title: '消息ID',
-    dataIndex: '',
-  },
-  {
-    title: '消息类型',
-    dataIndex: '',
-  },
-  {
-    title: '关联类型',
-    dataIndex: '',
-  },
-  {
-    title: '数据',
-    dataIndex: '',
-  },
-  {
-    title: '原数据',
-    dataIndex: '',
-  },
-  {
-    title: '错误',
-    dataIndex: '',
-  },
-];
-
-export const formSchemas: FormSchema[] = [
-  {
-    field: '',
-    label: '服务器',
-    component: 'Input',
-  },
-  {
-    field: '',
-    label: '类型',
-    component: 'Select',
-  },
-  {
-    field: '',
-    label: '实体ID',
-    component: 'Input',
-  },
-  {
-    field: '',
-    label: '实体类型',
-    component: 'Select',
-  },
-  {
-    field: '',
-    label: '消息类型',
-    component: 'Input',
-  },
-  {
-    field: '',
-    label: '关联类型',
-    component: 'Input',
-  },
-  {
-    field: '',
-    label: '数据',
-    component: 'Input',
-  },
-  {
-    field: '',
-    label: '元数据',
-    component: 'Input',
-  },
-  {
-    field: '',
-    label: '有错误',
-    component: 'Checkbox',
-  },
-];

-<script lang="ts" setup>
-  import DebugEvent from './DebugEvent.vue';
-</script>
-
-<template>
-  <section class="bg-gray-100 dark:bg-dark-200">
-    <DebugEvent />
-  </section>
-</template>

+<script setup lang="ts">
+  import AceEditor, { Ace } from 'ace-builds';
+  import githubTheme from 'ace-builds/src-noconflict/theme-github?url';
+  import 'ace-builds/src-noconflict/mode-java';
+  import { ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+
+  withDefaults(
+    defineProps<{
+      content?: string;
+    }>(),
+    {}
+  );
+
+  defineEmits(['register']);
+
+  const content = ref();
+
+  const [register] = useModalInner((params: ModalParamsType<string>) => {
+    content.value = params.record;
+    initEditor();
+    unref(aceEditorRef)?.setValue(params.record, -1);
+  });
+
+  const javaEditorElRef = ref();
+
+  const aceEditorRef = ref<Ace.Editor>();
+
+  const initEditor = () => {
+    AceEditor.config.setModuleUrl('ace/theme/github', githubTheme);
+    const editor = AceEditor.edit(unref(javaEditorElRef)!, {
+      mode: 'ace/mode/java',
+    });
+    editor.setTheme('ace/theme/github');
+    editor.setOptions({
+      fontSize: 14,
+      showLineNumbers: false,
+      showGutter: false,
+    });
+    editor.setReadOnly(true);
+    aceEditorRef.value = editor;
+  };
+</script>
+
+<template>
+  <BasicModal @register="register" title="错误" :showOkBtn="false" cancelText="关闭" width="80%">
+    <div ref="javaEditorElRef" class="w-full h-full min-h-96"></div>
+  </BasicModal>
+</template>

+import { EventTypeEnum } from '../EventSelect/config';
+import { columns as debugColumns } from './debug.config';
+import { columns as errorColumns } from './error.config';
+import { columns as liveColumns } from './live.config';
+import { columns as statsColumns } from './stats.config';
+
+export function getColumns(type: EventTypeEnum) {
+  const mapping = {
+    [EventTypeEnum.ERROR]: errorColumns,
+    [EventTypeEnum.LC_EVENT]: liveColumns,
+    [EventTypeEnum.STATS]: statsColumns,
+    [EventTypeEnum.DEBUG_RULE_NODE]: debugColumns,
+  };
+  return mapping?.[type] || [];
+}

+import { BasicColumn } from '/@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '事件时间',
+    dataIndex: 'createdTime',
+  },
+  {
+    title: '服务器',
+    dataIndex: 'body.server',
+  },
+  {
+    title: '类型',
+    dataIndex: 'type',
+  },
+  {
+    title: '实体类型',
+    dataIndex: 'entityId.entityType',
+  },
+  {
+    title: '消息ID',
+    dataIndex: 'id.id',
+  },
+  {
+    title: '消息类型',
+    dataIndex: 'msgtype',
+  },
+  {
+    title: '关联类型',
+    dataIndex: 'relatedType',
+  },
+  {
+    title: '数据',
+    dataIndex: 'data',
+  },
+  {
+    title: '元数据',
+    dataIndex: 'metadaeta',
+  },
+  {
+    title: '错误',
+    dataIndex: 'error',
+  },
+];

+import { BasicColumn } from '/@/components/Table';
+import { dateUtil } from '/@/utils/dateUtil';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '事件时间',
+    dataIndex: 'createdTime',
+    ellipsis: true,
+    width: 200,
+    format(text) {
+      return dateUtil(text).format('YYYY-MM-DD HH:mm:ss');
+    },
+  },
+  {
+    title: '服务器',
+    dataIndex: 'body.server',
+    ellipsis: true,
+  },
+  {
+    title: '方法',
+    dataIndex: 'body.method',
+    ellipsis: true,
+  },
+  {
+    title: '错误',
+    dataIndex: 'body.error',
+    ellipsis: true,
+    width: 100,
+    slots: {
+      customRender: 'error',
+    },
+  },
+];

+<script lang="ts" setup>
+  import { useTable, BasicTable } from '/@/components/Table';
+  import { getColumns } from './config';
+  import { getRuleNodeEventList } from '/@/api/ruleDesigner';
+  import { BasicNodeFormData, NodeData } from '../../../../types/node';
+  import { computed, reactive, ref, unref, watch } from 'vue';
+  import { useUserStore } from '/@/store/modules/user';
+  import { EventSelect } from '../EventSelect';
+  import { Icon } from '/@/components/Icon';
+  import { Tooltip } from 'ant-design-vue';
+  import { EventTypeEnum } from '../EventSelect/config';
+  import { FilterForm } from '../FilterForm';
+  import { useModal } from '/@/components/Modal';
+  import { DataActionModeEnum } from '/@/enums/toolEnum';
+  import { ElementInfo } from '../../../../hook/useAwaitPopupWindowBindData';
+  import ShowDetailModal from './ShowDetailModal.vue';
+
+  const props = defineProps<{
+    nodeData?: NodeData<BasicNodeFormData>;
+    elementInfo?: ElementInfo;
+  }>();
+
+  const userStore = useUserStore();
+  const getNodeId = computed(() => props.elementInfo?.id);
+  const getTenantId = computed(() => unref(userStore.getUserInfo).tenantId);
+  const eventType = ref(EventTypeEnum.DEBUG_RULE_NODE);
+  const filterFormElRef = ref<Nullable<InstanceType<typeof FilterForm>>>(null);
+
+  const searchParams = reactive({
+    params: {} as Recordable,
+    data: {} as Recordable,
+  });
+
+  const [register, { reload, setColumns, setPagination }] = useTable({
+    columns: getColumns(EventTypeEnum.DEBUG_RULE_NODE),
+    showIndexColumn: false,
+    useSearchForm: false,
+    canResize: true,
+    resizeHeightOffset: 76,
+    fetchSetting: {
+      totalField: 'totalElements',
+      listField: 'data',
+    },
+    showTableSetting: true,
+    api: async (params: Record<'page' | 'pageSize', number>) => {
+      const result = await getRuleNodeEventList(
+        unref(getNodeId)!,
+        {
+          page: params.page - 1,
+          pageSize: params.pageSize,
+          tenantId: unref(getTenantId),
+          ...searchParams.params,
+        },
+        { ...searchParams.data, eventType: unref(eventType) }
+      );
+
+      return result;
+    },
+  });
+
+  const [registerModal, { openModal }] = useModal();
+
+  const handleOpenFilterForm = () => {
+    openModal(true, {
+      mode: DataActionModeEnum.READ,
+      record: { type: unref(eventType) },
+    } as ModalParamsType<{ type: EventTypeEnum }>);
+  };
+
+  const handleRemoveFilterQueue = () => {
+    unref(filterFormElRef)?.resetFields();
+    handleReset();
+  };
+
+  const handleFilterChange = (searchValue: Record<'data' | 'params', Recordable>) => {
+    const { data, params } = searchValue;
+    handleReset(data, params);
+  };
+
+  const handleReset = (data: Recordable = {}, params: Recordable = {}) => {
+    searchParams.data = data;
+    searchParams.params = params;
+    setPagination({ current: 1 });
+    reload();
+  };
+
+  const handleEventTypeChange = () => {
+    setColumns(getColumns(unref(eventType)));
+    handleReset();
+  };
+
+  const [registerDetailModal, { openModal: openDetailModal }] = useModal();
+
+  const handleOpenDetailModal = (text: string) => {
+    openDetailModal(true, {
+      mode: DataActionModeEnum.READ,
+      record: text,
+    } as ModalParamsType<string>);
+  };
+
+  watch(
+    () => props.elementInfo?.id,
+    () => {
+      reload();
+    }
+  );
+</script>
+
+<template>
+  <section class="bg-gray-100 dark:bg-dark-200 p-4 h-full">
+    <BasicTable @register="register" class="debug-table h-full">
+      <template #tableTitle>
+        <EventSelect v-model:type="eventType" @change="handleEventTypeChange" />
+      </template>
+      <template #toolbar>
+        <Tooltip title="过滤器">
+          <Icon
+            icon="material-symbols:filter-list"
+            class="cursor-pointer svg:text-2xl"
+            @click="handleOpenFilterForm"
+          />
+        </Tooltip>
+        <Tooltip title="重置">
+          <Icon
+            icon="mdi:filter-variant-remove"
+            class="cursor-pointer svg:text-2xl"
+            @click="handleRemoveFilterQueue"
+          />
+        </Tooltip>
+      </template>
+      <template #error="{ text }">
+        <Icon
+          icon="material-symbols:more-horiz"
+          class="cursor-pointer svg:text-2xl"
+          @click="handleOpenDetailModal(text)"
+        />
+      </template>
+    </BasicTable>
+
+    <FilterForm
+      ref="filterFormElRef"
+      @register="registerModal"
+      @filterChange="handleFilterChange"
+    />
+
+    <ShowDetailModal @register="registerDetailModal" />
+  </section>
+</template>
+
+<style lang="less" scoped></style>

+import { BasicColumn } from '/@/components/Table';
+import { dateUtil } from '/@/utils/dateUtil';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '事件时间',
+    dataIndex: 'createdTime',
+    ellipsis: true,
+    width: 200,
+    format(text) {
+      return dateUtil(text).format('YYYY-MM-DD HH:mm:ss');
+    },
+  },
+  {
+    title: '服务器',
+    dataIndex: 'body.server',
+    ellipsis: true,
+  },
+  {
+    title: '事件',
+    dataIndex: 'body.event',
+    ellipsis: true,
+  },
+  {
+    title: '状态',
+    dataIndex: 'body.success',
+    ellipsis: true,
+    format(text) {
+      return text ? '成功' : '失败';
+    },
+  },
+  {
+    title: '错误',
+    dataIndex: 'body.error',
+    ellipsis: true,
+    width: 100,
+    slots: {
+      customRender: 'error',
+    },
+  },
+];

+import { BasicColumn } from '/@/components/Table';
+import { dateUtil } from '/@/utils/dateUtil';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '事件时间',
+    dataIndex: 'createdTime',
+    ellipsis: true,
+    width: 200,
+    format(text) {
+      return dateUtil(text).format('YYYY-MM-DD HH:mm:ss');
+    },
+  },
+  {
+    title: '服务器',
+    dataIndex: 'body.server',
+    ellipsis: true,
+  },
+  {
+    title: '消息处理',
+    dataIndex: 'body.event',
+    ellipsis: true,
+  },
+  {
+    title: '错误发生',
+    dataIndex: 'body.event',
+    ellipsis: true,
+  },
+];

+export enum EventTypeEnum {
+  ERROR = 'ERROR',
+  LC_EVENT = 'LC_EVENT',
+  STATS = 'STATS',
+  DEBUG_RULE_NODE = 'DEBUG_RULE_NODE',
+}
+
+export enum EventTypeNameEnum {
+  ERROR = '错误',
+  LC_EVENT = '生命周期事件',
+  STATS = '类型统计',
+  DEBUG_RULE_NODE = '调试',
+}
+
+export const eventTypeOptions = Object.keys(EventTypeEnum).map((value) => ({
+  label: EventTypeNameEnum[value],
+  value,
+}));

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

+<script setup lang="ts">
+  import { Select } from 'ant-design-vue';
+  import { eventTypeOptions, EventTypeEnum } from './config';
+  import { unref } from 'vue';
+
+  withDefaults(
+    defineProps<{
+      type?: EventTypeEnum;
+    }>(),
+    {
+      type: EventTypeEnum.DEBUG_RULE_NODE,
+    }
+  );
+
+  const emit = defineEmits<{
+    (eventName: 'update:type', value: EventTypeEnum): void;
+    (eventName: 'change', value: EventTypeEnum): void;
+  }>();
+
+  const handleChange = (value: EventTypeEnum) => {
+    emit('update:type', unref(value));
+    emit('change', unref(value));
+  };
+</script>
+
+<template>
+  <Select
+    :value="type"
+    :options="eventTypeOptions"
+    :bordered="false"
+    class="border-b w-40"
+    @change="handleChange"
+  />
+</template>

+import { EventTypeEnum } from '../EventSelect/config';
+import {
+  formSchemas as debugFormSchemas,
+  generateSearchParams as transformDebugSearchParams,
+} from './debug.config';
+import {
+  formSchemas as errorFormSchemas,
+  generateSearchParams as transformErrorSearchParams,
+} from './error.config';
+import {
+  formSchemas as liveFormSchemas,
+  generateSearchParams as transformLiveSearchParams,
+} from './live.config';
+import {
+  formSchemas as statsFormSchemas,
+  generateSearchParams as transformStatsSearchParams,
+} from './stats.config';
+import { FormSchema } from '/@/components/Form';
+
+export function getFormSchemas(type: EventTypeEnum): FormSchema[] {
+  const mapping = {
+    [EventTypeEnum.ERROR]: errorFormSchemas,
+    [EventTypeEnum.LC_EVENT]: liveFormSchemas,
+    [EventTypeEnum.STATS]: statsFormSchemas,
+    [EventTypeEnum.DEBUG_RULE_NODE]: debugFormSchemas,
+  };
+
+  return mapping?.[type] || [];
+}
+
+export function transformFilterValue(
+  type: EventTypeEnum,
+  value: Recordable
+): Record<'data' | 'params', Recordable> {
+  const mapping = {
+    [EventTypeEnum.ERROR]: transformErrorSearchParams,
+    [EventTypeEnum.LC_EVENT]: transformLiveSearchParams,
+    [EventTypeEnum.STATS]: transformStatsSearchParams,
+    [EventTypeEnum.DEBUG_RULE_NODE]: transformDebugSearchParams,
+  };
+  return mapping?.[type]?.(value as any) || { data: {}, params: {} };
+}

+import { h } from 'vue';
+import { RangePickerExtra } from '../RangePickerExtra';
+import { FormSchema } from '/@/components/Form';
+
+export enum FormFieldsEnum {
+  SERVER = 'server',
+  MSG_DIRECTION_TYPE = 'msgDirectionType',
+  ENTITY_ID = 'entityId',
+  ENTITY_NAME = 'entityName',
+  MSG_TYPE = 'msgType',
+  RELATION_TYPE = 'relationType',
+  DATA_SEARCH = 'dataSearch',
+  METADATA_SEARCH = 'metadataSearch',
+  IS_ERROR = 'isError',
+  ERROR_STR = 'errorStr',
+  EVENT_TYPE = 'eventType',
+  START_TIME = 'startTime',
+  END_TIME = 'endTime',
+
+  TIME_INTERVAL = 'timeInterval',
+}
+
+export enum MessageDirectionTypeEnum {
+  IN = 'IN',
+  OUT = 'OUT',
+}
+
+export enum EntityNameEnum {
+  TENANT = 'TENANT',
+  TENANT_PROFILE = 'TENANT_PROFILE',
+  CUSTOMER = 'CUSTOMER',
+  USER = 'USER',
+  DASHBOARD = 'DASHBOARD',
+  ASSET = 'ASSET',
+  DEVICE = 'DEVICE',
+  DEVICE_PROFILE = 'DEVICE_PROFILE',
+  ALARM = 'ALARM',
+  RULE_CHAIN = 'RULE_CHAIN',
+  RULE_NODE = 'RULE_NODE',
+  EDGE = 'EDGE',
+  ENTITY_VIEW = 'ENTITY_VIEW',
+  WIDGETS_BUNDLE = 'WIDGETS_BUNDLE',
+  WIDGET_TYPE = 'WIDGET_TYPE',
+  API_USAGE_STATE = 'API_USAGE_STATE',
+  TB_RESOURCE = 'TB_RESOURCE',
+  OTA_PACKAGE = 'OTA_PACKAGE',
+  RPC = 'RPC',
+}
+
+export const formSchemas: FormSchema[] = [
+  {
+    field: FormFieldsEnum.TIME_INTERVAL,
+    label: '时间段',
+    component: 'RangePicker',
+    colProps: { span: 24 },
+    componentProps: {
+      showTime: true,
+    },
+    renderComponentContent: ({ model }) => {
+      return {
+        renderExtraFooter: () =>
+          h(RangePickerExtra, {
+            onChange: (date: moment.Moment[]) => {
+              model[FormFieldsEnum.TIME_INTERVAL] = date;
+            },
+          }),
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.SERVER,
+    label: '服务器',
+    component: 'Input',
+    componentProps: {
+      placeholder: `请输入服务器`,
+    },
+  },
+  {
+    field: FormFieldsEnum.MSG_DIRECTION_TYPE,
+    label: '类型',
+    component: 'Select',
+    componentProps: {
+      options: Object.keys(MessageDirectionTypeEnum).map((value) => ({ label: value, value })),
+      allowClear: true,
+      placeholder: `请选择类型`,
+      getPopupContainer: () => document.body,
+    },
+  },
+  {
+    field: FormFieldsEnum.ENTITY_ID,
+    label: '实体ID',
+    component: 'Input',
+    componentProps: {
+      placeholder: `请输入实体ID`,
+    },
+  },
+  {
+    field: FormFieldsEnum.ENTITY_NAME,
+    label: '实体类型',
+    component: 'Select',
+    componentProps: {
+      options: Object.keys(EntityNameEnum).map((value) => ({ label: value, value })),
+      allowClear: true,
+      placeholder: `请选择实体类型`,
+      getPopupContainer: () => document.body,
+    },
+  },
+  {
+    field: FormFieldsEnum.MSG_TYPE,
+    label: '消息类型',
+    component: 'Input',
+    componentProps: {
+      placeholder: `请输入消息类型`,
+    },
+  },
+  {
+    field: FormFieldsEnum.RELATION_TYPE,
+    label: '关联类型',
+    component: 'Input',
+    componentProps: {
+      placeholder: `请输入关联类型`,
+    },
+  },
+  {
+    field: FormFieldsEnum.DATA_SEARCH,
+    label: '数据',
+    component: 'Input',
+    componentProps: {
+      placeholder: `请输入数据`,
+    },
+  },
+  {
+    field: FormFieldsEnum.METADATA_SEARCH,
+    label: '元数据',
+    component: 'Input',
+    componentProps: {
+      placeholder: `请输入元数据`,
+    },
+  },
+  {
+    field: FormFieldsEnum.IS_ERROR,
+    label: '有错误',
+    component: 'Checkbox',
+  },
+  {
+    field: FormFieldsEnum.ERROR_STR,
+    label: '错误',
+    component: 'Input',
+    show: ({ model }) => model[FormFieldsEnum.IS_ERROR],
+    componentProps: {
+      placeholder: `请输入错误`,
+    },
+  },
+];
+
+export function generateSearchParams(
+  value: Record<FormFieldsEnum, any>
+): Record<'data' | 'params', Recordable> {
+  const {
+    startTime,
+    endTime,
+    dataSearch,
+    entityId,
+    entityName,
+    errorStr,
+    eventType,
+    isError,
+    metadataSearch,
+    msgDirectionType,
+    msgType,
+    relationType,
+    server,
+  } = value;
+
+  return {
+    params: { startTime, endTime },
+    data: {
+      dataSearch,
+      entityId,
+      entityName,
+      errorStr,
+      eventType,
+      isError,
+      metadataSearch,
+      msgDirectionType,
+      msgType,
+      relationType,
+      server,
+    },
+  };
+}

+import { h } from 'vue';
+import { RangePickerExtra } from '../RangePickerExtra';
+import { FormSchema } from '/@/components/Form';
+
+export enum FormFieldsEnum {
+  ERROR_STR = 'errorStr',
+  METHOD = 'method',
+  SERVER = 'server',
+
+  START_TIME = 'startTime',
+  END_TIME = 'endTime',
+  TIME_INTERVAL = 'timeInterval',
+}
+
+export const formSchemas: FormSchema[] = [
+  {
+    field: FormFieldsEnum.TIME_INTERVAL,
+    label: '时间段',
+    component: 'RangePicker',
+    colProps: { span: 24 },
+    componentProps: {
+      showTime: true,
+    },
+    renderComponentContent: ({ model }) => {
+      return {
+        renderExtraFooter: () =>
+          h(RangePickerExtra, {
+            onChange: (date: moment.Moment[]) => {
+              model[FormFieldsEnum.TIME_INTERVAL] = date;
+            },
+          }),
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.SERVER,
+    label: '服务器',
+    component: 'Input',
+    componentProps: {
+      placeholder: `请输入服务器`,
+    },
+  },
+  {
+    field: FormFieldsEnum.METHOD,
+    label: '方法',
+    component: 'Input',
+    componentProps: {
+      placeholder: `请输入方法`,
+    },
+  },
+  {
+    field: FormFieldsEnum.ERROR_STR,
+    label: '错误',
+    component: 'Input',
+    componentProps: {
+      placeholder: `请输入错误`,
+    },
+  },
+];
+
+export function generateSearchParams(
+  value: Record<FormFieldsEnum, any>
+): Record<'data' | 'params', Recordable> {
+  const { startTime, endTime, errorStr, method, server } = value;
+  return {
+    data: { errorStr, method, server },
+    params: { startTime, endTime },
+  };
+}

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

+<script setup lang="ts">
+  import { ref, unref } from 'vue';
+  import { EventTypeEnum } from '../EventSelect/config';
+  import { getFormSchemas, transformFilterValue } from './config';
+  import { FormFieldsEnum } from './debug.config';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+
+  interface FilterChangeValueType {
+    data: Recordable;
+    params: Recordable;
+  }
+
+  const emit = defineEmits<{
+    (eventName: 'register', value: any): any;
+    (eventName: 'filterChange', value: FilterChangeValueType): void;
+  }>();
+
+  const [registerForm, { resetSchema, getFieldsValue, resetFields }] = useForm({
+    layout: 'inline',
+    showActionButtonGroup: false,
+    labelWidth: 80,
+    fieldMapToTime: [
+      [FormFieldsEnum.TIME_INTERVAL, [FormFieldsEnum.START_TIME, FormFieldsEnum.END_TIME], 'x'],
+    ],
+  });
+
+  const eventType = ref();
+
+  const [register, { closeModal }] = useModalInner(
+    (params: ModalParamsType<{ type: EventTypeEnum }>) => {
+      const { record } = params;
+      const { type } = record;
+      if (unref(eventType) !== type) {
+        resetFields();
+      }
+      eventType.value = type;
+      resetSchema(getFormSchemas(unref(eventType)));
+    }
+  );
+
+  const handleOk = () => {
+    emit('filterChange', transformFilterValue(unref(eventType), getFieldsValue()));
+    closeModal();
+  };
+
+  defineExpose({
+    resetFields,
+  });
+</script>
+
+<template>
+  <BasicModal
+    @register="register"
+    title="过滤器"
+    wrapClassName="rule-node-filter-form"
+    @cancel="closeModal()"
+    @ok="handleOk"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+
+<style lang="less">
+  .rule-node-filter-form {
+    .ant-form-item-label {
+      label {
+        @apply w-full truncate block leading-8;
+      }
+    }
+
+    .ant-calendar-picker.ant-calendar-picker-default {
+      @apply !w-full;
+    }
+
+    .ant-input-number {
+      @apply w-full;
+    }
+  }
+</style>

+import { h } from 'vue';
+import { RangePickerExtra } from '../RangePickerExtra';
+import { FormSchema } from '/@/components/Form';
+
+export enum FormFieldsEnum {
+  ERROR_STR = 'errorStr',
+  EVENT = 'event',
+  SERVER = 'server',
+  STATUS = 'status',
+
+  START_TIME = 'startTime',
+  END_TIME = 'endTime',
+  TIME_INTERVAL = 'timeInterval',
+}
+
+enum StatusEnum {
+  SUCCESS = 'SUCCESS',
+  FAILURE = 'FAILURE',
+}
+
+enum StatusNameEnum {
+  SUCCESS = 'Success',
+  FAILURE = 'Failure',
+}
+
+export const formSchemas: FormSchema[] = [
+  {
+    field: FormFieldsEnum.TIME_INTERVAL,
+    label: '时间段',
+    component: 'RangePicker',
+    colProps: { span: 24 },
+    componentProps: {
+      showTime: true,
+    },
+    renderComponentContent: ({ model }) => {
+      return {
+        renderExtraFooter: () =>
+          h(RangePickerExtra, {
+            onChange: (date: moment.Moment[]) => {
+              model[FormFieldsEnum.TIME_INTERVAL] = date;
+            },
+          }),
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.SERVER,
+    label: '服务器',
+    component: 'Input',
+    componentProps: {
+      placeholder: `请输入服务器`,
+    },
+  },
+  {
+    field: FormFieldsEnum.EVENT,
+    label: '事件',
+    component: 'Input',
+    componentProps: {
+      placeholder: `请输入事件`,
+    },
+  },
+  {
+    field: FormFieldsEnum.STATUS,
+    label: '状态',
+    component: 'Input',
+    componentProps: {
+      options: Object.keys(StatusEnum).map((value) => ({ label: StatusNameEnum[value], value })),
+      allowClear: true,
+      placeholder: `请选择状态`,
+      getPopupContainer: () => document.body,
+    },
+  },
+  {
+    field: FormFieldsEnum.ERROR_STR,
+    label: '错误',
+    component: 'Input',
+    componentProps: {
+      placeholder: `请输入错误`,
+    },
+  },
+];
+
+export function generateSearchParams(
+  value: Record<FormFieldsEnum, any>
+): Record<'data' | 'params', Recordable> {
+  const { startTime, endTime, errorStr, event, status, server } = value;
+  return {
+    data: { errorStr, event, status, server },
+    params: { startTime, endTime },
+  };
+}

+import { h } from 'vue';
+import { RangePickerExtra } from '../RangePickerExtra';
+import { FormSchema } from '/@/components/Form';
+
+export enum FormFieldsEnum {
+  SERVER = 'server',
+  MESSAGE_PROCESSED = 'messageProcessed',
+  ERRORS_OCCURRED = 'errorsOccured',
+
+  START_TIME = 'startTime',
+  END_TIME = 'endTime',
+  TIME_INTERVAL = 'timeInterval',
+}
+
+export const formSchemas: FormSchema[] = [
+  {
+    field: FormFieldsEnum.TIME_INTERVAL,
+    label: '时间段',
+    component: 'RangePicker',
+    colProps: { span: 24 },
+    componentProps: {
+      showTime: true,
+    },
+    renderComponentContent: ({ model }) => {
+      return {
+        renderExtraFooter: () =>
+          h(RangePickerExtra, {
+            onChange: (date: moment.Moment[]) => {
+              model[FormFieldsEnum.TIME_INTERVAL] = date;
+            },
+          }),
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.SERVER,
+    label: '服务器',
+    component: 'Input',
+    componentProps: {
+      placeholder: `请输入服务器`,
+    },
+  },
+  {
+    field: FormFieldsEnum.MESSAGE_PROCESSED,
+    label: 'Minimum messages processed',
+    component: 'InputNumber',
+    componentProps: {
+      min: 0,
+      placeholder: `请输入Minimum messages processed`,
+    },
+  },
+  {
+    field: FormFieldsEnum.ERRORS_OCCURRED,
+    label: 'Minimum errors occurred',
+    component: 'InputNumber',
+    componentProps: {
+      min: 0,
+      placeholder: `请输入Minimum errors occurred`,
+    },
+  },
+];
+
+export function generateSearchParams(
+  value: Record<FormFieldsEnum, any>
+): Record<'data' | 'params', Recordable> {
+  const { startTime, endTime, messageProcessed, errorsOccured, server } = value;
+  return {
+    data: { messageProcessed, errorsOccured, server },
+    params: { startTime, endTime },
+  };
+}

+import { dateUtil } from '/@/utils/dateUtil';
+
+export enum TimeUnitEnum {
+  day = 'day',
+  hour = 'hour',
+  minute = 'minute',
+  second = 'second',
+}
+export enum TimeUnitNameEnum {
+  day = '天',
+  hour = '小时',
+  minute = '分',
+  second = '秒',
+}
+
+export enum DateShortcutOptionEnum {
+  YESTERDAY = 'YESTERDAY',
+  DAY_BEFORE_YESTERDAY = 'DAY_BEFORE_YESTERDAY',
+  THIS_DAY_LAST_WEEK = 'THIS_DAY_LAST_WEEK',
+  PREVIOUS_WEEK_SUN_SAT = 'PREVIOUS_WEEK_SUN_SAT',
+  PREVIOUS_WEEK_MON_SUN = 'PREVIOUS_WEEK_MON_SUN',
+  PREVIOUS_MONTH = 'PREVIOUS_MONTH',
+  PREVIOUS_YEAR = 'PREVIOUS_YEAR',
+  CURRENT_HOUR = 'CURRENT_HOUR',
+  CURRENT_DAY = 'CURRENT_DAY',
+  CURRENT_DAY_SO_FAR = 'CURRENT_DAY_SO_FAR',
+  CURRENT_WEEK_SUN_SAT = 'CURRENT_WEEK_SUN_SAT',
+  CURRENT_WEEK_MON_SUN = 'CURRENT_WEEK_MON_SUN',
+  CURRENT_WEEK_SO_FAR_SUN_SAT = 'CURRENT_WEEK_SO_FAR_SUN_SAT',
+  CURRENT_WEEK_SO_FAR_MON_SUN = 'CURRENT_WEEK_SO_FAR_MON_SUN',
+  CURRENT_MONTH = 'CURRENT_MONTH',
+  CURRENT_MONTH_SO_FAR = 'CURRENT_MONTH_SO_FAR',
+  CURRENT_YEAR = 'CURRENT_YEAR',
+  CURRENT_YEAR_SO_FAR = 'CURRENT_YEAR_SO_FAR',
+}
+export enum DateShortcutOptionNameEnum {
+  YESTERDAY = '昨天',
+  DAY_BEFORE_YESTERDAY = '前天',
+  THIS_DAY_LAST_WEEK = '前一周的这一天',
+  PREVIOUS_WEEK_SUN_SAT = '前一周 (周日至周六)',
+  PREVIOUS_WEEK_MON_SUN = '前一周 (周一至周日)',
+  PREVIOUS_MONTH = '前一个月',
+  PREVIOUS_YEAR = '前一年',
+  CURRENT_HOUR = '当前小时',
+  CURRENT_DAY = '当前天',
+  CURRENT_DAY_SO_FAR = '当天到目前为止',
+  CURRENT_WEEK_SUN_SAT = '本周 (周日至周六)',
+  CURRENT_WEEK_MON_SUN = '本周 (周一至周日)',
+  CURRENT_WEEK_SO_FAR_SUN_SAT = '本周到目前为止 (周日至周六)',
+  CURRENT_WEEK_SO_FAR_MON_SUN = '本周到目前为止 (周一至周日)',
+  CURRENT_MONTH = '本月',
+  CURRENT_MONTH_SO_FAR = '本月到目前为止',
+  CURRENT_YEAR = '本年',
+  CURRENT_YEAR_SO_FAR = '本年到目前为止',
+}
+
+const options = [
+  { value: 1, unit: TimeUnitEnum.second },
+  { value: 5, unit: TimeUnitEnum.second },
+  { value: 10, unit: TimeUnitEnum.second },
+  { value: 15, unit: TimeUnitEnum.second },
+  { value: 30, unit: TimeUnitEnum.second },
+
+  { value: 1, unit: TimeUnitEnum.minute },
+  { value: 5, unit: TimeUnitEnum.minute },
+  { value: 10, unit: TimeUnitEnum.minute },
+  { value: 15, unit: TimeUnitEnum.minute },
+  { value: 30, unit: TimeUnitEnum.minute },
+
+  { value: 1, unit: TimeUnitEnum.hour },
+  { value: 2, unit: TimeUnitEnum.hour },
+  { value: 5, unit: TimeUnitEnum.hour },
+  { value: 10, unit: TimeUnitEnum.hour },
+  { value: 12, unit: TimeUnitEnum.hour },
+
+  { value: 1, unit: TimeUnitEnum.day },
+  { value: 7, unit: TimeUnitEnum.day },
+  { value: 30, unit: TimeUnitEnum.day },
+];
+
+export const latestOptions = options.map((item) => ({
+  ...item,
+  value: `${item.value}${item.unit}`,
+  label: `${item.value} ${TimeUnitNameEnum[item.unit]}`,
+  unitValue: item.value,
+}));
+
+export const shortcutOptions = Object.keys(DateShortcutOptionEnum).map((value) => ({
+  label: DateShortcutOptionNameEnum[value],
+  value,
+}));
+
+export const getShortcutOptionValue = (value: DateShortcutOptionEnum) => {
+  const mapping = {
+    YESTERDAY: () => {
+      const startDate = dateUtil().subtract(1, 'day').startOf('day');
+      const endDate = dateUtil().subtract(1, 'day').endOf('day');
+      return [startDate, endDate];
+    },
+    DAY_BEFORE_YESTERDAY: () => {
+      const startDate = dateUtil().subtract(2, 'day').startOf('day');
+      const endDate = dateUtil().subtract(2, 'day').endOf('day');
+      return [startDate, endDate];
+    },
+    THIS_DAY_LAST_WEEK: () => {
+      const startDate = dateUtil().subtract(7, 'day').startOf('day');
+      const endDate = dateUtil().subtract(7, 'day').endOf('day');
+      return [startDate, endDate];
+    },
+    PREVIOUS_WEEK_SUN_SAT: () => {
+      const startDate = dateUtil()
+        .subtract(1, 'week')
+        .startOf('week')
+        .subtract(1, 'day')
+        .startOf('day');
+      const endDate = dateUtil().subtract(1, 'week').endOf('week').subtract(1, 'day').endOf('day');
+      return [startDate, endDate];
+    },
+    PREVIOUS_WEEK_MON_SUN: () => {
+      const startDate = dateUtil().subtract(1, 'week').startOf('week');
+      const endDate = dateUtil().subtract(1, 'week').endOf('week');
+      return [startDate, endDate];
+    },
+    PREVIOUS_MONTH: () => {
+      const startDate = dateUtil().subtract(1, 'month').startOf('month');
+      const endDate = dateUtil().subtract(1, 'month').endOf('month');
+      return [startDate, endDate];
+    },
+    PREVIOUS_YEAR: () => {
+      const startDate = dateUtil().subtract(1, 'year').startOf('year');
+      const endDate = dateUtil().subtract(1, 'year').endOf('year');
+      return [startDate, endDate];
+    },
+    CURRENT_HOUR: () => {
+      const startDate = dateUtil().startOf('hour');
+      const endDate = dateUtil().endOf('hour');
+      return [startDate, endDate];
+    },
+    CURRENT_DAY: () => {
+      const startDate = dateUtil().startOf('day');
+      const endDate = dateUtil().endOf('day');
+      return [startDate, endDate];
+    },
+    CURRENT_DAY_SO_FAR: () => {
+      const startDate = dateUtil().startOf('day');
+      const endDate = dateUtil();
+      return [startDate, endDate];
+    },
+    CURRENT_WEEK_SUN_SAT: () => {
+      const startDate = dateUtil().startOf('week').subtract(1, 'day').startOf('day');
+      const endDate = dateUtil().endOf('week').subtract(1, 'day').endOf('day');
+      return [startDate, endDate];
+    },
+    CURRENT_WEEK_MON_SUN: () => {
+      const startDate = dateUtil().startOf('week');
+      const endDate = dateUtil().endOf('week');
+      return [startDate, endDate];
+    },
+    CURRENT_WEEK_SO_FAR_SUN_SAT: () => {
+      const startDate = dateUtil().startOf('week').subtract(1, 'day').startOf('day');
+      const endDate = dateUtil();
+      return [startDate, endDate];
+    },
+    CURRENT_WEEK_SO_FAR_MON_SUN: () => {
+      const startDate = dateUtil().startOf('week');
+      const endDate = dateUtil();
+      return [startDate, endDate];
+    },
+    CURRENT_MONTH: () => {
+      const startDate = dateUtil().startOf('month');
+      const endDate = dateUtil().endOf('month');
+      return [startDate, endDate];
+    },
+    CURRENT_MONTH_SO_FAR: () => {
+      const startDate = dateUtil().startOf('month');
+      const endDate = dateUtil();
+      return [startDate, endDate];
+    },
+    CURRENT_YEAR: () => {
+      const startDate = dateUtil().startOf('year');
+      const endDate = dateUtil().endOf('year');
+      return [startDate, endDate];
+    },
+    CURRENT_YEAR_SO_FAR: () => {
+      const startDate = dateUtil().startOf('year');
+      const endDate = dateUtil();
+      return [startDate, endDate];
+    },
+  };
+  return mapping?.[value]?.() || [];
+};

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

+<script setup lang="ts">
+  import { Button, Popover, Select, Switch, InputNumber } from 'ant-design-vue';
+  import { reactive, ref, unref } from 'vue';
+  import {
+    DateShortcutOptionEnum,
+    getShortcutOptionValue,
+    latestOptions,
+    shortcutOptions,
+  } from './config';
+  import { getPopupContainer } from '/@/utils';
+  import { dateUtil } from '/@/utils/dateUtil';
+
+  const emit = defineEmits<{
+    (eventName: 'change', date: moment.Moment[]): void;
+  }>();
+
+  const mode = ref(false);
+
+  const latestPopoverVisible = ref(false);
+
+  const latestSelect = ref();
+
+  const advancedLatest = reactive({
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  });
+
+  const getAdvancedLatest = () => {
+    const startDate = Object.keys(advancedLatest).reduce((prev, next) => {
+      return prev.subtract(advancedLatest[next], next);
+    }, dateUtil());
+    return [startDate, dateUtil()];
+  };
+
+  const getLatestSelect = () => {
+    const selected = latestOptions.find((item) => item.value === unref(latestSelect))!;
+    if (!selected) return [];
+    const startDate = dateUtil().subtract(selected.unitValue, selected.unit);
+    return [startDate, dateUtil()];
+  };
+
+  const handleUpdateDate = () => {
+    emit('change', unref(mode) ? getAdvancedLatest() : getLatestSelect());
+    latestPopoverVisible.value = false;
+  };
+
+  const shortcutOptionPopoverVisible = ref(false);
+
+  const shortcutOptionSelect = ref<DateShortcutOptionEnum>();
+
+  const handleShortcutOptionUpdate = () => {
+    unref(shortcutOptionSelect) &&
+      emit('change', getShortcutOptionValue(unref(shortcutOptionSelect)!));
+    shortcutOptionPopoverVisible.value = false;
+  };
+</script>
+
+<template>
+  <section class="h-full items-center flex gap-2 h-9">
+    <Popover
+      v-model:visible="latestPopoverVisible"
+      trigger="click"
+      :overlayStyle="{ zIndex: 9999 }"
+      overlayClassName="range-picker-extra-latest-popover"
+    >
+      <template #content>
+        <main class="w-90 p-4">
+          <div class="flex gap-3 items-end">
+            <div v-if="!mode" class="w-full">
+              <Select
+                v-model:value="latestSelect"
+                class="w-full border-b"
+                :getPopupContainer="getPopupContainer"
+                placeholder="请选择区间"
+                :bordered="false"
+                :options="latestOptions"
+              />
+            </div>
+
+            <div v-if="mode" class="w-full flex gap-1">
+              <div class="w-1/4">
+                <div>天</div>
+                <InputNumber v-model:value="advancedLatest.days" :min="0" :precision="0" />
+              </div>
+              <div class="w-1/4">
+                <div>小时</div>
+                <InputNumber v-model:value="advancedLatest.hours" :min="0" :precision="0" />
+              </div>
+              <div class="w-1/4">
+                <div>分钟</div>
+                <InputNumber v-model:value="advancedLatest.minutes" :min="0" :precision="0" />
+              </div>
+              <div class="w-1/4">
+                <div>秒</div>
+                <InputNumber v-model:value="advancedLatest.seconds" :min="0" :precision="0" />
+              </div>
+            </div>
+
+            <div>
+              <div class="h-6 text-center">高级</div>
+              <Switch v-model:checked="mode" />
+            </div>
+          </div>
+          <div class="w-full flex mt-4 gap-4 justify-end">
+            <Button size="small" @click="latestPopoverVisible = false"> 取消</Button>
+            <Button size="small" type="primary" @click="handleUpdateDate"> 更新</Button>
+          </div>
+        </main>
+      </template>
+      <Button type="primary" size="small" @click="latestPopoverVisible = true">最后</Button>
+    </Popover>
+
+    <Popover
+      v-model:visible="shortcutOptionPopoverVisible"
+      trigger="click"
+      :overlayStyle="{ zIndex: 9999 }"
+      overlayClassName="range-picker-extra-shortcut-popover"
+    >
+      <template #content>
+        <main class="w-90 p-4">
+          <div>
+            <Select
+              v-model:value="shortcutOptionSelect"
+              class="w-full border-b"
+              :getPopupContainer="getPopupContainer"
+              placeholder="请选择区间"
+              :bordered="false"
+              :options="shortcutOptions"
+            />
+          </div>
+          <div class="w-full flex mt-4 gap-4 justify-end">
+            <Button size="small" @click="shortcutOptionPopoverVisible = false"> 取消</Button>
+            <Button size="small" type="primary" @click="handleShortcutOptionUpdate"> 更新</Button>
+          </div>
+        </main>
+      </template>
+      <Button type="primary" size="small" @click="shortcutOptionPopoverVisible = true">
+        快捷选择
+      </Button>
+    </Popover>
+  </section>
+</template>
+
+<style lang="less">
+  .range-picker-extra-latest-popover {
+    .ant-input-number {
+      min-width: fit-content;
+      width: 100%;
+    }
+  }
+</style>

@@ -9,7 +9,7 @@
   import { useForm, BasicForm } from '/@/components/Form';
   import { useForm, BasicForm } from '/@/components/Form';
   import { BottomFormSchemas, TopFormSchemas } from '../CreateNodeModal/config';
   import { BottomFormSchemas, TopFormSchemas } from '../CreateNodeModal/config';
   import { toRaw, unref } from 'vue';
   import { toRaw, unref } from 'vue';
-  import { BasicEvents } from '../BasicEvents';
+  import { BasicEvents } from './BasicEvents';
 
 
   const [topFormRegister, topFormActionType] = useForm({
   const [topFormRegister, topFormActionType] = useForm({
     schemas: TopFormSchemas,
     schemas: TopFormSchemas,
@@ -25,6 +25,7 @@
     visible,
     visible,
     spinning,
     spinning,
     nodeData,
     nodeData,
+    elementInfo,
     getComponentKey,
     getComponentKey,
     shadowComponent,
     shadowComponent,
     createComponentEl,
     createComponentEl,
@@ -113,7 +114,7 @@
         </Spin>
         </Spin>
       </Tabs.TabPane>
       </Tabs.TabPane>
       <Tabs.TabPane :tab="TabsPanelNameEnum[TabsPanelEnum.EVENT]" :key="TabsPanelEnum.EVENT">
       <Tabs.TabPane :tab="TabsPanelNameEnum[TabsPanelEnum.EVENT]" :key="TabsPanelEnum.EVENT">
-        <BasicEvents />
+        <BasicEvents :elementInfo="elementInfo" />
       </Tabs.TabPane>
       </Tabs.TabPane>
       <Tabs.TabPane :tab="TabsPanelNameEnum[TabsPanelEnum.HELP]" :key="TabsPanelEnum.HELP">
       <Tabs.TabPane :tab="TabsPanelNameEnum[TabsPanelEnum.HELP]" :key="TabsPanelEnum.HELP">
         <HelpMessage :nodeData="nodeData" />
         <HelpMessage :nodeData="nodeData" />