feat: 新增事件面板

@@ -140,10 +140,10 @@
 
       <Panel position="top-right">
         <button
-          class="w-10 h-10 bg-gray-300 flex justify-center items-center rounded-full"
+          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" :icon="getFullScreenIcon" />
+          <Icon class="!text-2xl dark:text-light-50" :icon="getFullScreenIcon" />
         </button>
       </Panel>
     </VueFlow>

@@ -51,6 +51,7 @@
     v-bind="props"
     :path="path[0]"
     :marker-end="getMarkerEnd"
+    class="dark:stroke-light-500"
     :label="getLabel"
     :label-x="path[1]"
     :label-y="path[2]"

@@ -62,16 +62,16 @@
       </section>
     </template>
     <main
-      class="basic-node-hover flex items-center w-44 h-12 rounded border px-4 py-2 border-gray-700"
+      class="basic-node-hover flex items-center w-44 h-12 rounded border px-4 py-2 border-gray-700 dark:text-light-50"
       :style="{ backgroundColor: getBackgroundColor }"
     >
       <div>
-        <Icon class="text-2xl" :icon="getIcon" />
+        <Icon class="text-2xl dark:text-light-50" :icon="getIcon" />
       </div>
       <BasicToolbar v-bind="$props" />
       <div class="flex text-xs flex-col ml-2 text-left truncate">
-        <span class="text-gray-700 w-full truncate">{{ getLabel }}</span>
-        <span class="w-full truncate">{{ getName }}</span>
+        <span class="text-gray-700 w-full truncate dark:text-light-50">{{ getLabel }}</span>
+        <span class="w-full truncate dark:text-neutral-50">{{ getName }}</span>
       </div>
       <Handle v-if="getHasInEnabled" type="source" :position="Position.Left" />
       <Handle v-if="getHasOutEnabled" type="source" :position="Position.Right" />

@@ -24,6 +24,8 @@
 
 <style scoped>
   .rule-designer-collapse-container::after {
+    @apply dark:bg-dark-500;
+
     position: absolute;
     content: '';
     width: 100%;

@@ -55,7 +55,7 @@
   >
     <template #title>
       <section class="text-dark-900">
-        <h1 class="font-bold">
+        <h1 class="font-bold dark:text-dark-50">
           {{ config?.name }}
         </h1>
         <p class="italic text-gray-600">
@@ -71,10 +71,10 @@
       @dragstart="handleDragStart"
     >
       <div>
-        <Icon class="text-2xl" :icon="getIcon" />
+        <Icon class="text-2xl dark:text-light-50" :icon="getIcon" />
       </div>
       <div class="flex text-xs flex-col ml-2 text-left">
-        <span class="text-gray-700 w-full truncate">{{ config?.name }}</span>
+        <span class="text-gray-700 w-full truncate dark:text-light-50">{{ config?.name }}</span>
         <!-- <span class="w-full truncate">name</span> -->
       </div>
       <div class="w-4 h-4 bg-dark-50 rounded-1 border absolute -left-2 border-light-50"></div>

@@ -26,7 +26,7 @@
     class="rule-designer-sidebar z-50 shadow shadow-lg shadow-dark-600 transition-all overflow-hidden relative"
     :style="getSidebarStyle"
   >
-    <section class="bg-sky-900 text-light-50 px-2 h-12 flex items-center">
+    <section class="bg-sky-900 dark:bg-dark-500 text-light-50 px-2 h-12 flex items-center">
       <Tooltip title="查找节点">
         <div
           class="w-8 h-8 cursor-pointer flex justify-center items-center rounded-1 hover:bg-opacity-90"
@@ -62,12 +62,20 @@
   </Tooltip>
 </template>
 
-<style scoped>
+<style scoped lang="less">
   .rule-designer-sidebar::after {
+    @apply dark: bg-dark-500;
+
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     background: #fff;
   }
+
+  .rule-designer-sidebar {
+    :deep(.ant-collapse-header) {
+      @apply !dark:bg-dark-500;
+    }
+  }
 </style>

-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import { BasicEvents } from '../BasicEvents';
+</script>
 
 <template>
-  <div>事件统计</div>
+  <BasicEvents />
 </template>

@@ -4,12 +4,12 @@
   import { TabsPanelEnum, TabsPanelNameEnum } from './config';
   import { useAwaitPopupWindowBindData } from '../../../hook/useAwaitPopupWindowBindData';
   import HelpMessage from './HelpMessage.vue';
-  import EventTotal from './EventTotal.vue';
   import { DataActionModeEnum } from '/@/enums/toolEnum';
   import { ElementsTypeEnum } from '../../../enum';
   import { useForm, BasicForm } from '/@/components/Form';
   import { BottomFormSchemas, TopFormSchemas } from '../CreateNodeModal/config';
-  import { toRaw, unref } from 'vue-demi';
+  import { toRaw, unref } from 'vue';
+  import { BasicEvents } from '../BasicEvents';
 
   const [topFormRegister, topFormActionType] = useForm({
     schemas: TopFormSchemas,
@@ -111,7 +111,7 @@
         </Spin>
       </Tabs.TabPane>
       <Tabs.TabPane :tab="TabsPanelNameEnum[TabsPanelEnum.EVENT]" :key="TabsPanelEnum.EVENT">
-        <EventTotal />
+        <BasicEvents />
       </Tabs.TabPane>
       <Tabs.TabPane :tab="TabsPanelNameEnum[TabsPanelEnum.HELP]" :key="TabsPanelEnum.HELP">
         <HelpMessage :nodeData="nodeData" />

@@ -12,9 +12,15 @@
 }
 
 .vue-flow__background.vue-flow__container {
+  @apply dark:bg-dark-500;
+
   background-color: #e9e9e9;
 }
 
+.vue-flow__background.vue-flow__container path {
+  @apply !dark:stroke-gray-600;
+}
+
 .vue-flow__edge-path {
   stroke-width: 4;
   stroke: gray;