feat: 新增事件面板

+<script lang="ts" setup>
+  import { ref, computed, Ref, unref } from 'vue';
+  import { Select, Switch, InputNumber } from 'ant-design-vue';
+  import { latestOptions, LatestOptionsEnum } from './config';
+  import { dateUtil } from '/@/utils/dateUtil';
+
+  type DateUnit = 'days' | 'hours' | 'minutes' | 'seconds';
+
+  type RangeObject = Record<DateUnit, number>;
+
+  const emit = defineEmits(['update:value']);
+
+  const props = withDefaults(
+    defineProps<{
+      value?: number;
+    }>(),
+    {
+      value: 1000 * 60 * 60 * 24 * 30,
+    }
+  );
+
+  const advancedMode = ref(false);
+
+  const getRangeObject = (milliseconds: number) => {
+    const methods: { method: string; key: moment.unitOfTime.Base }[] = [
+      { method: 'asDays', key: 'days' },
+      { method: 'asHours', key: 'hours' },
+      { method: 'asMinutes', key: 'minutes' },
+      { method: 'asSeconds', key: 'seconds' },
+    ];
+
+    return methods.reduce((prev, next) => {
+      const { method, key } = next;
+      const value = dateUtil.duration(milliseconds, 'millisecond')[method]?.();
+
+      if (value >= 1) {
+        milliseconds -= dateUtil.duration(parseInt(value), key).asMilliseconds();
+      }
+
+      return { ...prev, [key]: value >= 1 ? parseInt(value) : 0 };
+    }, {} as Record<DateUnit, number>);
+  };
+
+  const getMillisecondsByObject = (value: RangeObject | Ref<RangeObject>) => {
+    value = unref(value);
+    return Object.keys(unref(value)).reduce((prev, next) => {
+      return (
+        prev +
+        dateUtil
+          .duration(value[next], next as moment.unitOfTime.DurationConstructor)
+          .asMilliseconds()
+      );
+    }, 0);
+  };
+
+  const getValue = computed(() => {
+    const { value } = props;
+    const dateRange = getRangeObject(value);
+    const { days, hours, minutes, seconds } = dateRange;
+
+    const filterList = latestOptions.filter((item) => value >= item.value);
+    return {
+      days,
+      hours,
+      minutes,
+      seconds,
+      selectValue: filterList[filterList.length - 1].value,
+    };
+  });
+
+  const handleSyncValue = (value: LatestOptionsEnum) => {
+    emit('update:value', value);
+  };
+
+  const handleChange = (value: number, unit: DateUnit) => {
+    if (isNaN(value)) return;
+    let { days, hours, minutes, seconds } = unref(getValue);
+    const dateRangeObject: RangeObject = {
+      days,
+      hours,
+      minutes,
+      seconds,
+      [unit]: value,
+    };
+
+    const milliseconds = getMillisecondsByObject(dateRangeObject);
+    emit('update:value', milliseconds);
+  };
+</script>
+
+<template>
+  <section class="flex justify-center items-end gap-4 h-14 latest-date-picker">
+    <section v-if="advancedMode" class="flex flex-auto custom-date-range">
+      <div>
+        <div>天</div>
+        <InputNumber
+          :value="getValue.days"
+          @change="(event) => handleChange(event, 'days')"
+          :step="1"
+          :max="7300"
+          :min="0"
+        />
+      </div>
+      <div>
+        <div>小时</div>
+        <InputNumber
+          :value="getValue.hours"
+          @change="(event) => handleChange(event, 'hours')"
+          :step="1"
+          :max="23"
+          :min="0"
+        />
+      </div>
+      <div>
+        <div>分钟</div>
+        <InputNumber
+          :value="getValue.minutes"
+          @change="(event) => handleChange(event, 'minutes')"
+          :step="1"
+          :max="59"
+          :min="0"
+        />
+      </div>
+      <div>
+        <div>秒</div>
+        <InputNumber
+          :value="getValue.seconds"
+          @change="(event) => handleChange(event, 'seconds')"
+          :step="1"
+          :max="59"
+          :min="0"
+        />
+      </div>
+    </section>
+    <Select
+      v-if="!advancedMode"
+      class="!flex-auto"
+      v-model:value="getValue.selectValue"
+      :options="latestOptions"
+      placeholder="请选择最后时间段"
+      @change="handleSyncValue"
+      allow-clear
+    />
+    <div class="w-14 flex flex-col justify-between h-full text-center">
+      <div>高级</div>
+      <Switch class="w-14" v-model:checked="advancedMode" />
+    </div>
+  </section>
+</template>
+
+<style scoped lang="less">
+  .latest-date-picker {
+    :deep(.ant-input-number) {
+      min-width: 0;
+      width: 100%;
+    }
+
+    :deep(.ant-select-selection-item) {
+      pointer-events: none;
+    }
+  }
+</style>

+import { dateUtil } from '/@/utils/dateUtil';
+
+export enum ModeEnum {
+  LATEST = 'LATEST',
+  RANGE = 'RANGE',
+  INTERVAL = 'INTERVAL',
+}
+
+export enum ModeNameEnum {
+  LATEST = '最后',
+  RANGE = '时间段',
+  INTERVAL = '时间间隔',
+}
+
+export enum UnitEnum {
+  SECONDS = '秒',
+  MINUTES = '分',
+  HOURS = '时',
+  DAYS = '天',
+}
+
+export enum LatestOptionsEnum {
+  '1_SECONDS' = '1_SECONDS',
+  '5_SECONDS' = '5_SECONDS',
+  '10_SECONDS' = '10_SECONDS',
+  '15_SECONDS' = '15_SECONDS',
+  '30_SECONDS' = '30_SECONDS',
+
+  '1_MINUTES' = '1_MINUTES',
+  '2_MINUTES' = '2_MINUTES',
+  '5_MINUTES' = '5_MINUTES',
+  '10_MINUTES' = '10_MINUTES',
+  '15_MINUTES' = '15_MINUTES',
+  '30_MINUTES' = '30_MINUTES',
+
+  '1_HOURS' = '1_HOURS',
+  '2_HOURS' = '2_HOURS',
+  '5_HOURS' = '5_HOURS',
+  '10_HOURS' = '10_HOURS',
+  '12_HOURS' = '12_HOURS',
+
+  '1_DAYS' = '1_DAYS',
+  '7_DAYS' = '7_DAYS',
+  '30_DAYS' = '30_DAYS',
+}
+
+const getLatesetOptionLabel = (string: string) => {
+  const [value, unit] = string.split('_');
+  return `${value} ${UnitEnum[unit]}`;
+};
+
+const getLatesetOptionValue = (string: string) => {
+  const [value, unit] = string.split('_');
+  return dateUtil
+    .duration(Number(value), unit.toLowerCase() as moment.unitOfTime.DurationConstructor)
+    .asMilliseconds();
+};
+
+export const latestOptions: { label: string; value: number }[] = Object.keys(LatestOptionsEnum).map(
+  (key) => ({ label: getLatesetOptionLabel(key), value: getLatesetOptionValue(key) })
+);
+
+[
+  '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',
+];

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

+<script lang="ts" setup>
+  import { Popconfirm, Button, Radio, RadioGroup, RangePicker } from 'ant-design-vue';
+  import { ref } from 'vue';
+  import { Icon } from '/@/components/Icon';
+  import { ModeEnum, ModeNameEnum } from './config';
+  import LatestDate from './LatestDate.vue';
+
+  const mode = ref(ModeEnum.LATEST);
+
+  const visible = ref(true);
+
+  const latestValue = ref<number>(1000 * 60 * 60 * 24 * 30);
+</script>
+
+<template>
+  <Popconfirm :visible="visible">
+    <template #icon>
+      <span></span>
+    </template>
+    <template #title>
+      <RadioGroup v-model:value="mode" class="!flex flex-col gap-2 w-96">
+        <Radio :value="ModeEnum.LATEST">
+          <span>{{ ModeNameEnum.LATEST }}</span>
+          <LatestDate v-model:value="latestValue" v-if="mode === ModeEnum.LATEST" />
+        </Radio>
+        <Radio :value="ModeEnum.RANGE">
+          <span>{{ ModeNameEnum.RANGE }}</span>
+          <section v-if="mode === ModeEnum.RANGE" class="mt-2 flex flex-col justify-end">
+            <RangePicker :showTime="true" />
+          </section>
+        </Radio>
+        <Radio :value="ModeEnum.INTERVAL">
+          <span>{{ ModeNameEnum.INTERVAL }}</span>
+          <section class="mt-2 flex flex-col justify-end">
+            <!--  -->
+          </section>
+        </Radio>
+      </RadioGroup>
+    </template>
+    <Button type="primary" @click="visible = true">
+      <Icon icon="mdi:clock-outline" />
+    </Button>
+  </Popconfirm>
+</template>

+<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',
+  },
+];

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

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