feat: 新增选择器

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

@@ -2,7 +2,7 @@
   <collapse-item name="展示方式" :expanded="true">
     <setting-item-box name="选择方式">
       <n-select
-        v-model:value="props.optionData.isPanel"
+        v-model:value="optionData.isPanel"
         size="small"
         :options="panelOptions"
       />
@@ -13,7 +13,7 @@
     <setting-item-box name="基础">
       <setting-item name="类型">
         <n-select
-          v-model:value="props.optionData.componentInteractEventKey"
+          v-model:value="optionData.componentInteractEventKey"
           size="small"
           :options="datePickerTypeOptions"
         />
@@ -23,8 +23,8 @@
     <setting-item-box name="默认值" :alone="true">
       <n-date-picker
         size="small"
-        v-model:value="props.optionData.dataset"
-        :type="props.optionData.componentInteractEventKey"
+        v-model:value="optionData.dataset"
+        :type="optionData.componentInteractEventKey"
       />
     </setting-item-box>
   </collapse-item>

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

@@ -1,21 +1,17 @@
 <template>
-  <div class="mill-date-box">
-    <div :style="`width:${w}px; height:${h}px;`">
   <n-date-picker
     v-model:value="option.dataset"
     :panel="!!chartConfig.option.isPanel"
     :type="chartConfig.option.componentInteractEventKey"
+    :style="`width:${w}px;`"
     @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 { useChartInteract } from '@/hooks'
 import { InteractEventOn } from '@/enums/eventEnum'
@@ -75,12 +71,11 @@ watch(
 </script>
 
 <style lang="scss" scoped>
-.mill-text-box {
-  display: flex;
-}
-:deep(.n-input) {
+@include deep() {
+  .n-input {
     height: v-bind('h + "px"');
     display: flex;
     align-items: center;
   }
+}
 </style>

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

@@ -48,7 +48,7 @@ const timeRange = [
 export const interactActions: InteractActionsType[] = [
   {
     interactType: InteractEventOn.CHANGE,
-    interactName: '完成后的回调',
+    interactName: '选择完成',
     componentEmitEvents: {
       [ComponentInteractEventEnum.DATE]: time,
       [ComponentInteractEventEnum.DATE_TIME]: time,

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

@@ -0,0 +1,38 @@
+import dayjs from 'dayjs'
+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
+import { interactActions, ComponentInteractEventEnum } from './interact'
+import { InputsSelectConfig } from './index'
+
+export const option = {
+  // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+  [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
+  // 默认值
+  selectValue: '1',
+  // 暴露配置内容给用户
+  dataset: [
+    {
+      label: '选项1',
+      value: '1'
+    },
+    {
+      label: '选项2',
+      value: '2'
+    },
+    {
+      label: '选项3',
+      value: '3'
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = InputsSelectConfig.key
+  public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
+  public chartConfig = cloneDeep(InputsSelectConfig)
+  public interactActions = interactActions
+  public option = cloneDeep(option)
+}

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

@@ -0,0 +1,20 @@
+<template>
+  <collapse-item name="下拉配置" :expanded="true">
+    <setting-item-box name="默认值" :alone="true">
+      <n-select size="small" v-model:value="optionData.selectValue" :options="optionData.dataset" />
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Informations/Inputs/InputsSelect/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const InputsSelectConfig: ConfigType = {
+  key: 'InputsSelect',
+  chartKey: 'VInputsSelect',
+  conKey: 'VCInputsSelect',
+  title: '下拉选择器',
+  category: ChatCategoryEnum.INPUTS,
+  categoryName: ChatCategoryEnumName.INPUTS,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'inputs_select.png'
+}

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

@@ -0,0 +1,68 @@
+<template>
+  <n-select
+    v-model:value="option.value.selectValue"
+    :options="option.value.dataset"
+    :style="`width:${w}px;`"
+    @update:value="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, ref, shallowReactive, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartInteract } from '@/hooks'
+import { InteractEventOn } from '@/enums/eventEnum'
+import { ComponentInteractParamsEnum } from './interact'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const rangeDate = ref<number | number[]>()
+
+const option = shallowReactive({
+  value: {
+    selectValue: props.chartConfig.option.selectValue,
+    dataset: props.chartConfig.option.dataset
+  }
+})
+
+// 监听事件改变
+const onChange = (v: string) => {
+  // 存储到联动数据
+  useChartInteract(
+    props.chartConfig,
+    useChartEditStore,
+    { [ComponentInteractParamsEnum.DATA]: v },
+    InteractEventOn.CHANGE
+  )
+}
+
+// 手动更新
+watch(
+  () => props.chartConfig.option,
+  (newData: any) => {
+    option.value = newData
+    onChange(newData.selectValue)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+@include deep() {
+  .n-base-selection-label {
+    height: v-bind('h + "px"');
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

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

@@ -0,0 +1,27 @@
+import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
+
+// 时间组件类型
+export enum ComponentInteractEventEnum {
+  DATA = 'data'
+}
+
+// 联动参数
+export enum ComponentInteractParamsEnum {
+  DATA = 'data'
+}
+
+// 定义组件触发回调事件
+export const interactActions: InteractActionsType[] = [
+  {
+    interactType: InteractEventOn.CHANGE,
+    interactName: '选择完成',
+    componentEmitEvents: {
+      [ComponentInteractEventEnum.DATA]: [
+        {
+          value: ComponentInteractParamsEnum.DATA,
+          label: '选择项'
+        }
+      ]
+    }
+  }
+]

src/packages/components/Informations/Inputs/index.ts

@@ -1,3 +1,4 @@
 import { InputsDateConfig } from './InputsDate/index'
+import { InputsSelectConfig } from './InputsSelect/index'
 
-export default [InputsDateConfig]
+export default [InputsDateConfig, InputsSelectConfig]

src/views/chart/ContentBox/index.vue

@@ -10,7 +10,7 @@
           <slot name="icon"></slot>
         </div>
       </n-space>
-      <n-space align="center" style="gap: 4px">
+      <n-space class="go-flex-no-wrap" align="center" style="gap: 4px">
         <slot name="top-right"></slot>
         <n-icon v-show="backIcon" size="20" class="go-cursor-pointer go-d-block" @click="backHandle">
           <chevron-back-outline-icon></chevron-back-outline-icon>

src/views/chart/ContentLayers/index.vue

@@ -199,9 +199,8 @@ const changeLayerType = (value: LayerModeEnum) => {
 
 <style lang="scss" scoped>
 $wight: 200px;
-@include go(content-layers) {
+@include go('content-layers') {
   width: $wight;
-  flex-shrink: 0;
   overflow: hidden;
   @extend .go-transition;
   .not-layer-text {