perf(external/Composes): 联动组件新增自定义样式

+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 { OverrideInputsDateConfig } from './index'
+
+export const option = {
+  // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+  [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATE,
+  // 下拉展示
+  isPanel: 0,
+  dataset: dayjs().valueOf(),
+  selectStyleOptions: {
+    textColor: 'black',
+    textBackgroundColor: 'white',
+    textBackgroundColorAlpha: 1,
+    iconColor:'black',
+    //弹出下拉框
+    textSelectModalBackgroundColor: 'white',
+    textSelectModalTextColor: 'black'
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideInputsDateConfig.key
+  public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
+  public chartConfig = cloneDeep(OverrideInputsDateConfig)
+  public interactActions = interactActions
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="展示方式" :expanded="true">
+    <setting-item-box name="选择方式">
+      <n-select v-model:value="optionData.isPanel" size="small" :options="panelOptions" />
+    </setting-item-box>
+  </collapse-item>
+
+  <collapse-item name="时间配置" :expanded="true">
+    <setting-item-box name="基础">
+      <setting-item name="类型">
+        <n-select v-model:value="optionData.componentInteractEventKey" size="small" :options="datePickerTypeOptions" />
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="默认值" :alone="true">
+      <n-date-picker size="small" v-model:value="optionData.dataset" :type="optionData.componentInteractEventKey" />
+    </setting-item-box>
+    <setting-item-box name="文字颜色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.selectStyleOptions.textColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.selectStyleOptions.textColor = 'black'"> 恢复默认 </n-button>
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box name="背景颜色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.selectStyleOptions.textBackgroundColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.selectStyleOptions.textBackgroundColor = 'white'">
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box name="透明度" :alone="true">
+      <SettingItem name="透明度">
+        <n-input-number
+          :min="0"
+          :max="1"
+          v-model:value="optionData.selectStyleOptions.textBackgroundColorAlpha"
+          clearable
+        />
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box name="弹出框背景色" :alone="true">
+      <SettingItem name="背景色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.selectStyleOptions.textSelectModalBackgroundColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.selectStyleOptions.textSelectModalBackgroundColor = 'white'">
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box name="弹出框文字颜色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.selectStyleOptions.textSelectModalTextColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.selectStyleOptions.textSelectModalTextColor = 'black'">
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box name="图标颜色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.selectStyleOptions.iconColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.selectStyleOptions.iconColor = 'black'"> 恢复默认 </n-button>
+      </SettingItem>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script lang="ts" setup>
+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
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const panelOptions = [
+  {
+    label: '下拉展示',
+    value: 0
+  },
+  {
+    label: '面板展示',
+    value: 1
+  }
+]
+
+const datePickerTypeOptions = [
+  {
+    label: '日期',
+    value: ComponentInteractEventEnum.DATE
+  },
+  {
+    label: '日期时间',
+    value: ComponentInteractEventEnum.DATE_TIME
+  },
+  {
+    label: '日期范围',
+    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>

+
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideInputsDate', true)
+
+export const OverrideInputsDateConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义时间选择器',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'inputs_date.png'
+}

+<template>
+  <n-date-picker
+    v-model:value="option.dataset"
+    :panel="!!chartConfig.option.isPanel"
+    :type="chartConfig.option.componentInteractEventKey"
+    :style="`width:${w}px;`"
+    :to="false"
+    @update:value="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, ref, shallowReactive, watch } from 'vue'
+import dayjs from 'dayjs'
+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 {
+  textColor,
+  textBackgroundColor,
+  iconColor,
+  textBackgroundColorAlpha,
+  textSelectModalBackgroundColor,
+  textSelectModalTextColor
+} = toRefs(props.chartConfig.option.selectStyleOptions) as any
+
+const rangeDate = ref<number | number[]>()
+
+const option = shallowReactive({
+  dataset: props.chartConfig.option.dataset
+})
+
+// 监听事件改变
+const onChange = (v: number | number[]) => {
+  if (v instanceof Array) {
+    // 存储到联动数据
+    useChartInteract(
+      props.chartConfig,
+      useChartEditStore,
+      {
+        [ComponentInteractParamsEnum.DATE_START]: v[0],
+        [ComponentInteractParamsEnum.DATE_END]: v[1],
+        [ComponentInteractParamsEnum.DATE_RANGE]: `${v[0]}-${v[1]}`
+      },
+      InteractEventOn.CHANGE
+    )
+  } else {
+    // 存储到联动数据
+    useChartInteract(
+      props.chartConfig,
+      useChartEditStore,
+      { [ComponentInteractParamsEnum.DATE]: v },
+      InteractEventOn.CHANGE
+    )
+  }
+}
+
+// 手动更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: number | number[]) => {
+    option.dataset = newData
+    // 关联目标组件首次请求带上默认内容
+    onChange(newData)
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+@include deep() {
+  .n-input {
+    height: v-bind('h + "px"');
+    display: flex;
+    align-items: center;
+    background: v-bind('textBackgroundColor') !important;
+  }
+  .n-input__input-el {
+    color: v-bind('textColor') !important;
+  }
+  .n-input__placeholder {
+    color: v-bind('textColor') !important;
+  }
+  .n-base-icon {
+    color: v-bind('iconColor') !important;
+  }
+  .n-date-panel{
+    background: v-bind('textSelectModalBackgroundColor') !important;;
+  }
+}
+</style>

+import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
+
+// 时间组件类型
+export enum ComponentInteractEventEnum {
+  DATE = 'date',
+  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'
+}
+
+// 联动参数
+export enum ComponentInteractParamsEnum {
+  DATE = 'date',
+  DATE_START = 'dateStart',
+  DATE_END = 'dateEnd',
+  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]: 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,
+    }
+  }
+]

+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 { OverrideSelectConfig } 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'
+    }
+  ],
+  selectStyleOptions: {
+    textColor: 'black',
+    textBackgroundColor: 'white',
+    textBackgroundColorAlpha: 1,
+    iconColor:'grey',
+    //弹出下拉框
+    textSelectModalBackgroundColor: 'white',
+    textSelectModalTextColor: 'black'
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideSelectConfig.key
+  public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
+  public chartConfig = cloneDeep(OverrideSelectConfig)
+  public interactActions = interactActions
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="下拉配置" :expanded="true">
+    <setting-item-box name="选择项" :alone="true">
+      <SettingItem name="选择项">
+        <n-select size="small" v-model:value="optionData.selectValue" :options="optionData.dataset" />
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box name="文字颜色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.selectStyleOptions.textColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.selectStyleOptions.textColor = 'black'"> 恢复默认 </n-button>
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box name="背景颜色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.selectStyleOptions.textBackgroundColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.selectStyleOptions.textBackgroundColor = 'white'">
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box name="透明度" :alone="true">
+      <SettingItem name="透明度">
+        <n-input-number
+          :min="0"
+          :max="1"
+          v-model:value="optionData.selectStyleOptions.textBackgroundColorAlpha"
+          clearable
+        />
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box name="弹出框背景色" :alone="true">
+      <SettingItem name="背景色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.selectStyleOptions.textSelectModalBackgroundColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.selectStyleOptions.textSelectModalBackgroundColor = 'white'">
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box name="弹出框文字颜色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.selectStyleOptions.textSelectModalTextColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.selectStyleOptions.textSelectModalTextColor = 'black'">
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box name="图标颜色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.selectStyleOptions.iconColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.selectStyleOptions.iconColor = 'black'"> 恢复默认 </n-button>
+      </SettingItem>
+    </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>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideSelect', true)
+
+export const OverrideSelectConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义下拉选择器',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,        
+  image: 'inputs_select.png'
+}

+<template>
+  <n-select
+    v-model:value="option.value.selectValue"
+    :options="option.value.dataset"
+    :style="`width:${w}px;`"
+    :to="false"
+    @update:value="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, 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 {
+  textColor,
+  textBackgroundColor,
+  iconColor,
+  textBackgroundColorAlpha,
+  textSelectModalBackgroundColor,
+  textSelectModalTextColor
+} = toRefs(props.chartConfig.option.selectStyleOptions) as any
+
+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="css"></style>
+
+<style lang="scss" scoped>
+@include deep() {
+  .n-base-selection-label {
+    height: v-bind('h + "px"');
+    display: flex;
+    align-items: center;
+    background: v-bind('textBackgroundColor') !important;
+    opacity: v-bind('textBackgroundColorAlpha') !important;
+  }
+  .n-base-selection-input__content {
+    color: v-bind('textColor');
+  }
+  .n-base-icon {
+    color: v-bind('iconColor') !important;
+  }
+  .n-select-menu {
+    background: v-bind('textSelectModalBackgroundColor') !important;
+  }
+  .n-base-select-option__content {
+    color: v-bind('textSelectModalTextColor') !important;
+  }
+}
+</style>

+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: '选择项'
+        }
+      ]
+    }
+  }
+]

@@ -3,7 +3,9 @@ import { ComposesList } from '@/packages/components/external/Composes'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ClockConfig } from '@/packages/components/external/Decorates/Mores/Icon'
 import { OverrideImageConfig } from '@/packages/components/external/Informations/Mores/OverrideImage'
-import {OverrideCarouselConfig } from '@/packages/components/external/Informations/Mores/OverrideCarousel'
+import { OverrideCarouselConfig } from '@/packages/components/external/Informations/Mores/OverrideCarousel'
+import { OverrideSelectConfig } from '@/packages/components/external/Informations/Mores/OverrideSelect'
+import { OverrideInputsDateConfig } from '@/packages/components/external/Informations/Mores/OverrideInputsDate'
 
 export function useInjectLib(packagesList: EPackagesType) {
 
@@ -12,6 +14,8 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, ClockConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideImageConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideCarouselConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideSelectConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsDateConfig)
 }
 
 /**