perf: 优化时间选择器

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

@@ -10,6 +10,8 @@ import { InputsDateConfig } from './index'
 export const option = {
   // 时间组件展示类型，必须和 interactActions 中定义的数据一致
   [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATE,
+  // 下拉展示
+  isPanel: 0,
   dataset: dayjs().valueOf()
 }
 

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

@@ -1,4 +1,14 @@
 <template>
+  <collapse-item name="展示方式" :expanded="true">
+    <setting-item-box name="选择方式">
+      <n-select
+        v-model:value="props.optionData.isPanel"
+        size="small"
+        :options="panelOptions"
+      />
+    </setting-item-box>
+  </collapse-item>
+
   <collapse-item name="时间配置" :expanded="true">
     <setting-item-box name="基础">
       <setting-item name="类型">
@@ -25,6 +35,7 @@ import { PropType } from 'vue'
 import { icon } from '@/plugins'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { option } from './config'
+import { ComponentInteractEventEnum } from './interact'
 
 const { HelpOutlineIcon } = icon.ionicons5
 
@@ -35,14 +46,53 @@ const props = defineProps({
   }
 })
 
+const panelOptions = [
+  {
+    label: '下拉展示',
+    value: 0
+  },
+  {
+    label: '面板展示',
+    value: 1
+  }
+]
+
 const datePickerTypeOptions = [
   {
-    label: '具体日期',
-    value: 'date'
+    label: '日期',
+    value: ComponentInteractEventEnum.DATE
+  },
+  {
+    label: '日期时间',
+    value: ComponentInteractEventEnum.DATE_TIME
   },
   {
     label: '日期范围',
-    value: 'daterange'
+    value: ComponentInteractEventEnum.DATE_RANGE
+  },
+  {
+    label: '月份',
+    value: ComponentInteractEventEnum.MONTH
+  },
+  {
+    label: '月份范围',
+    value: ComponentInteractEventEnum.MONTH_RANGE
+  },
+  {
+    label: '年份',
+    value: ComponentInteractEventEnum.YEAR
+  },
+  {
+    label: '年份范围',
+    value: ComponentInteractEventEnum.YEAR_RANGE
+  },
+  {
+    label: '季度',
+    value: ComponentInteractEventEnum.QUARTER
+  },
+  {
+    label: '季度范围',
+    value: ComponentInteractEventEnum.QUARTER_RANGE
   }
 ]
 </script>

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

@@ -3,6 +3,7 @@
     <div :style="`width:${w}px; height:${h}px;`">
       <n-date-picker
         v-model:value="option.dataset"
+        :panel="!!chartConfig.option.isPanel"
         :type="chartConfig.option.componentInteractEventKey"
         @update:value="onChange"
       />

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

@@ -3,7 +3,15 @@ import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
 // 时间组件类型
 export enum ComponentInteractEventEnum {
   DATE = 'date',
-  DATE_RANGE = 'daterange'
+  DATE_TIME = 'datetime',
+  DATE_RANGE = 'daterange',
+  DATE_TIME_RANGE = 'datetimerange',
+  MONTH = 'month',
+  MONTH_RANGE = 'monthrange',
+  YEAR = 'year',
+  YEAR_RANGE = 'yearrange',
+  QUARTER = 'quarter',
+  QUARTER_RANGE = 'quarterrange'
 }
 
 // 联动参数
@@ -14,32 +22,43 @@ export enum ComponentInteractParamsEnum {
   DATE_RANGE = 'daterange'
 }
 
+const time = [
+  {
+    value: ComponentInteractParamsEnum.DATE,
+    label: '日期'
+  }
+]
+
+const timeRange = [
+  {
+    value: ComponentInteractParamsEnum.DATE_START,
+    label: '开始时间'
+  },
+  {
+    value: ComponentInteractParamsEnum.DATE_END,
+    label: '结束时间'
+  },
+  {
+    value: ComponentInteractParamsEnum.DATE_RANGE,
+    label: '日期范围'
+  }
+]
+
 // 定义组件触发回调事件
 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: '日期范围'
-        }
-      ]
+      [ComponentInteractEventEnum.DATE]: time,
+      [ComponentInteractEventEnum.DATE_TIME]: time,
+      [ComponentInteractEventEnum.DATE_RANGE]: timeRange,
+      [ComponentInteractEventEnum.MONTH]: time,
+      [ComponentInteractEventEnum.MONTH_RANGE]: timeRange,
+      [ComponentInteractEventEnum.QUARTER]: time,
+      [ComponentInteractEventEnum.QUARTER_RANGE]: timeRange,
+      [ComponentInteractEventEnum.YEAR]: time,
+      [ComponentInteractEventEnum.YEAR_RANGE]: timeRange,
     }
   }
 ]

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

@@ -105,6 +105,7 @@
             size="tiny"
             v-model:value="item.interactFn[ovlKey]"
             :options="fnDimensionsAndSource(item.interactOn)"
+            clearable
           ></n-select>
         </setting-item>
         <n-text