perf: 优化交互结构，优化时间选择器组件

src/enums/eventEnum.ts

@@ -17,17 +17,20 @@ export enum InteractEvents {
   INTERACT_FN = 'interactFn'
 }
 
-// 组件交互回调事件触发的类型
+// 全局组件交互回调事件触发的类型（当然可以自定义名称）
 export enum InteractEventOn {
   CLICK = 'click',
   CHANGE = 'change'
 }
 
+// 确定交互组件触发类型 key名称
+export const COMPONENT_INTERACT_EVENT_KET = 'componentInteractEventKey'
+
 // 交互式组件的触发配置
-export type InteractActionType = {
+export type InteractActionsType = {
   interactType: InteractEventOn
   interactName: string
-  componentEmitEvents: { [T: string]: any[] }
+  componentEmitEvents: { [T: string]: { value: any; label: string }[] }
 }
 
 // vue3 生命周期事件

src/hooks/useChartDataFetch.hook.ts

@@ -87,16 +87,14 @@ export const useChartDataFetch = (
           }
         }
 
-        // 立即调用
-        fetchFn()
-
-        // 组件交互处理监听
+        // 普通初始化与组件交互处理监听
         watch(
           () => targetComponent.request,
           () => {
             fetchFn()
           },
           {
+            immediate: true,
             deep: true
           }
         )

src/hooks/useChartInteract.hook.ts

@@ -9,14 +9,13 @@ type ChartEditStoreType = typeof useChartEditStore
 export const useChartInteract = (
   chartConfig: CreateComponentType,
   useChartEditStore: ChartEditStoreType,
-  param: { [name: string]: string },
-  onEvent: string
+  param: { [T: string]: any },
+  interactEventOn: string
 ) => {
   const chartEditStore = useChartEditStore()
   const { interactEvents } = chartConfig.events
-
   const fnOnEvent = interactEvents.filter(item => {
-    return item.interactOn === onEvent
+    return item.interactOn === interactEventOn
   })
 
   if (fnOnEvent.length === 0) return
@@ -34,3 +33,8 @@ export const useChartInteract = (
     })
   })
 }
+
+// 联动事件触发的 type 变更时，清除当前绑定内容
+export const clearInteractEvent = (chartConfig: CreateComponentType) => {
+
+}

src/packages/components/Informations/Inputs/InputsDate/config.ts

@@ -1,52 +1,18 @@
-import { NDatePicker } from 'naive-ui'
+import dayjs from 'dayjs'
+import cloneDeep from 'lodash/cloneDeep'
 import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
-import { InputsDateConfig } from './index'
-import cloneDeep from 'lodash/cloneDeep'
 import { chartInitConfig } from '@/settings/designSetting'
-import { InteractEventOn, InteractActionType } from '@/enums/eventEnum'
-
-// 时间组件类型
-enum ComponentInteractEvent {
-  DATE = 'date',
-  DATERANGE = 'daterange'
-}
+import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
+import { interactActions, ComponentInteractEventEnum } from './interact'
+import { InputsDateConfig } from './index'
 
 export const option = {
-  dataset: {
-    count: 0,
-    // 时间组件展示类型 daterange & date
-    type: ComponentInteractEvent.DATE,
-    range: undefined
-  }
+  // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+  [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATE,
+  dataset: dayjs().valueOf()
 }
 
-// 定义组件触发回调事件
-const interactActions: InteractActionType[] = [
-  {
-    interactType: InteractEventOn.CHANGE,
-    interactName: '完成后的回调',
-    componentEmitEvents: {
-      [ComponentInteractEvent.DATE]: [
-        {
-          value: 'date',
-          label: '日期'
-        }
-      ],
-      [ComponentInteractEvent.DATERANGE]: [
-        {
-          value: 'dateStart',
-          label: '开始时间'
-        },
-        {
-          value: 'dateEnd',
-          label: '结束时间'
-        }
-      ]
-    }
-  }
-]
-
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = InputsDateConfig.key
   public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }

src/packages/components/Informations/Inputs/InputsDate/config.vue

@@ -1,42 +1,23 @@
 <template>
-  <CollapseItem name="通用的Props" :expanded="true">
-    <SettingItemBox name="基础">
+  <collapse-item name="时间配置" :expanded="true">
+    <setting-item-box name="基础">
       <setting-item name="类型">
-        <n-select v-model:value="props.optionData.dataset.type" size="small" :options="datePickerTypeOptions" />
+        <n-select
+          v-model:value="props.optionData.componentInteractEventKey"
+          size="small"
+          :options="datePickerTypeOptions"
+        />
       </setting-item>
-    </SettingItemBox>
+    </setting-item-box>
 
-    <SettingItemBox name="默认值">
+    <setting-item-box name="默认值" :alone="true">
       <n-date-picker
         size="small"
-        :style="{ width: ['date'].includes(props.optionData.dataset.type) ? 'auto' : '250px' }"
-        v-model:value="props.optionData.dataset.range"
-        :type="props.optionData.dataset.type"
-        clearable
+        v-model:value="props.optionData.dataset"
+        :type="props.optionData.componentInteractEventKey"
       />
-    </SettingItemBox>
-    <SettingItemBox>
-      <template #name>
-        <n-text>动态</n-text>
-        <n-tooltip trigger="hover">
-          <template #trigger>
-            <n-icon size="21" :depth="3">
-              <help-outline-icon></help-outline-icon>
-            </n-icon>
-          </template>
-          <n-text>动态日期以默认值进行计算</n-text>
-        </n-tooltip>
-      </template>
-
-      <setting-item name="计算值">
-        <n-input-number v-model:value="props.optionData.dataset.count" size="small" placeholder="0">
-          <template #prefix>
-            <n-text depth="3">天</n-text>
-          </template>
-        </n-input-number>
-      </setting-item>
-    </SettingItemBox>
-  </CollapseItem>
+    </setting-item-box>
+  </collapse-item>
 </template>
 
 <script lang="ts" setup>
@@ -56,7 +37,7 @@ const props = defineProps({
 
 const datePickerTypeOptions = [
   {
-    label: '日期',
+    label: '具体日期',
     value: 'date'
   },
   {

src/packages/components/Informations/Inputs/InputsDate/index.vue

@@ -1,71 +1,81 @@
 <template>
   <div class="mill-date-box">
     <div :style="`width:${w}px; height:${h}px;`">
-      <n-date-picker v-model:value="rangeDate" :type="option.dataset.type" @update:value="onChange" />
+      <n-date-picker
+        v-model:value="option.dataset"
+        :type="chartConfig.option.componentInteractEventKey"
+        @update:value="onChange"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { PropType, toRefs, ref, shallowReactive, watch } from 'vue'
+import dayjs from 'dayjs'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { option as configOption } from './config'
 import { useChartInteract } from '@/hooks'
-import dayjs from 'dayjs'
+import { InteractEventOn } from '@/enums/eventEnum'
+import { ComponentInteractParamsEnum } from './interact'
 
 const props = defineProps({
   chartConfig: {
-    type: Object as PropType<CreateComponentType & typeof option>,
+    type: Object as PropType<CreateComponentType>,
     required: true
   }
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
-const rangeDate = ref()
+const rangeDate = ref<number | number[]>()
 
 const option = shallowReactive({
-  dataset: configOption.dataset
+  dataset: props.chartConfig.option.dataset
 })
 
+// 监听事件改变
 const onChange = (v: number | number[]) => {
   if (v instanceof Array) {
-    const dateStart = dayjs(v[0]).format('YYYY-MM-DD')
-    const dateEnd = dayjs(v[1]).format('YYYY-MM-DD')
-    useChartInteract(props.chartConfig, useChartEditStore, { dateStart, dateEnd }, 'change')
+    // 存储到联动数据
+    useChartInteract(
+      props.chartConfig,
+      useChartEditStore,
+      {
+        [ComponentInteractParamsEnum.DATE_START]: v[0] | dayjs().valueOf(),
+        [ComponentInteractParamsEnum.DATE_END]: v[1] | dayjs().valueOf(),
+        [ComponentInteractParamsEnum.DATE_RANGE]: `${v[0]}-${v[1]}`
+      },
+      InteractEventOn.CHANGE
+    )
   } else {
-    const date = dayjs(v).format('YYYY-MM-DD')
-    useChartInteract(props.chartConfig, useChartEditStore, { date }, 'change')
+    // 存储到联动数据
+    useChartInteract(
+      props.chartConfig,
+      useChartEditStore,
+      { [ComponentInteractParamsEnum.DATE]: v },
+      InteractEventOn.CHANGE
+    )
   }
 }
 
 // 手动更新
 watch(
   () => props.chartConfig.option.dataset,
-  (newData: any) => {
+  (newData: number | number[]) => {
     option.dataset = newData
-    const { range, count } = newData
-    if (!range) return
-    if (newData.range instanceof Array) {
-      const countDate: number[] = [
-        dayjs(range[0]).add(count, 'day').valueOf(),
-        dayjs(range[1]).add(count, 'day').valueOf()
-      ]
-      rangeDate.value = countDate
-    } else {
-      const countDate: number = dayjs(range).add(count, 'day').valueOf()
-      rangeDate.value = countDate
-    }
+    // 关联目标组件首次请求带上默认内容
+    onChange(newData)
   },
   {
-    immediate: true,
-    deep: true
+    immediate: true
   }
 )
 
 // 预览更新
-useChartDataFetch(props.chartConfig, useChartEditStore)
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number | number[]) => {
+  option.dataset = newData
+})
 </script>
 
 <style lang="scss" scoped>

src/packages/components/Informations/Inputs/InputsDate/interact.ts

@@ -0,0 +1,45 @@
+import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
+
+// 时间组件类型
+export enum ComponentInteractEventEnum {
+  DATE = 'date',
+  DATE_RANGE = 'daterange'
+}
+
+// 联动参数
+export enum ComponentInteractParamsEnum {
+  DATE = 'date',
+  DATE_START = 'dateStart',
+  DATE_END = 'dateEnd',
+  DATE_RANGE = 'daterange'
+}
+
+// 定义组件触发回调事件
+export const interactActions: InteractActionsType[] = [
+  {
+    interactType: InteractEventOn.CHANGE,
+    interactName: '完成后的回调',
+    componentEmitEvents: {
+      [ComponentInteractEventEnum.DATE]: [
+        {
+          value: ComponentInteractParamsEnum.DATE,
+          label: '日期'
+        }
+      ],
+      [ComponentInteractEventEnum.DATE_RANGE]: [
+        {
+          value: ComponentInteractParamsEnum.DATE_START,
+          label: '开始时间'
+        },
+        {
+          value: ComponentInteractParamsEnum.DATE_END,
+          label: '结束时间'
+        },
+        {
+          value: ComponentInteractParamsEnum.DATE_RANGE,
+          label: '日期范围'
+        }
+      ]
+    }
+  }
+]

src/packages/index.d.ts

@@ -1,4 +1,4 @@
-import { BaseEvent, EventLife, InteractEvents, InteractEventOn, InteractActionType } from '@/enums/eventEnum'
+import { BaseEvent, EventLife, InteractEvents, InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
 import type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
@@ -120,7 +120,7 @@ export interface PublicConfigType {
   }
   filter?: string
   status: StatusType
-  interactActions?: InteractActionType[],
+  interactActions?: InteractActionsType[],
   events: {
     baseEvent: {
       [K in BaseEvent]?: string
@@ -129,7 +129,7 @@ export interface PublicConfigType {
       [K in EventLife]?: string
     }
     interactEvents: {
-      [InteractEvents.INTERACT_ON]: InteractEventOn.CHANGE | InteractEventOn.CLICK | undefined
+      [InteractEvents.INTERACT_ON]: InteractEventOn | undefined
       [InteractEvents.INTERACT_COMPONENT_ID]: string | undefined
       [InteractEvents.INTERACT_FN]: { [name: string]: string }
     }[]

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteraction/index.vue

@@ -125,7 +125,7 @@ import { SelectOption, SelectGroupOption } from 'naive-ui'
 import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting'
 import { CreateComponentType, CreateComponentGroupType, ChartFrameEnum } from '@/packages/index.d'
 import { RequestParamsTypeEnum } from '@/enums/httpEnum'
-import { InteractEventOn } from '@/enums/eventEnum'
+import { InteractEventOn, COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
 import { icon } from '@/plugins'
 import noData from '@/assets/images/canvas/noData.png'
 import { goDialog } from '@/utils'
@@ -163,7 +163,7 @@ const fnDimensionsAndSource = (interactOn: InteractEventOn | undefined) => {
     return item.interactType === interactOn
   })
 
-  return tableData?.componentEmitEvents[option.value.dataset.type] || []
+  return tableData?.componentEmitEvents[option.value[COMPONENT_INTERACT_EVENT_KET]] || []
 }
 
 // 绑定组件列表