简柏林 / thingskit-view · Commits

Commit 215fd4ce4b5c03b698ba2193907878e962f1229f

Authored by fengwotao
1 parent f69248f7

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

Inline Side-by-side
Showing 11 changed files with 668 additions and 1 deletions
  1 +import dayjs from 'dayjs'
  2 +import cloneDeep from 'lodash/cloneDeep'
  3 +import { PublicConfigClass } from '@/packages/public'
  4 +import { CreateComponentType } from '@/packages/index.d'
  5 +import { chartInitConfig } from '@/settings/designSetting'
  6 +import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
  7 +import { interactActions, ComponentInteractEventEnum } from './interact'
  8 +import { OverrideInputsDateConfig } from './index'
  9 +
  10 +export const option = {
  11 + // 时间组件展示类型，必须和 interactActions 中定义的数据一致
  12 + [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATE,
  13 + // 下拉展示
  14 + isPanel: 0,
  15 + dataset: dayjs().valueOf(),
  16 + selectStyleOptions: {
  17 + textColor: 'black',
  18 + textBackgroundColor: 'white',
  19 + textBackgroundColorAlpha: 1,
  20 + iconColor:'black',
  21 + //弹出下拉框
  22 + textSelectModalBackgroundColor: 'white',
  23 + textSelectModalTextColor: 'black'
  24 + }
  25 +}
  26 +
  27 +export default class Config extends PublicConfigClass implements CreateComponentType {
  28 + public key = OverrideInputsDateConfig.key
  29 + public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
  30 + public chartConfig = cloneDeep(OverrideInputsDateConfig)
  31 + public interactActions = interactActions
  32 + public option = cloneDeep(option)
  33 +}
  1 +<template>
  2 + <collapse-item name="展示方式" :expanded="true">
  3 + <setting-item-box name="选择方式">
  4 + <n-select v-model:value="optionData.isPanel" size="small" :options="panelOptions" />
  5 + </setting-item-box>
  6 + </collapse-item>
  7 +
  8 + <collapse-item name="时间配置" :expanded="true">
  9 + <setting-item-box name="基础">
  10 + <setting-item name="类型">
  11 + <n-select v-model:value="optionData.componentInteractEventKey" size="small" :options="datePickerTypeOptions" />
  12 + </setting-item>
  13 + </setting-item-box>
  14 +
  15 + <setting-item-box name="默认值" :alone="true">
  16 + <n-date-picker size="small" v-model:value="optionData.dataset" :type="optionData.componentInteractEventKey" />
  17 + </setting-item-box>
  18 + <setting-item-box name="文字颜色" :alone="true">
  19 + <SettingItem name="颜色">
  20 + <n-color-picker
  21 + size="small"
  22 + :modes="['hex']"
  23 + v-model:value="optionData.selectStyleOptions.textColor"
  24 + ></n-color-picker>
  25 + </SettingItem>
  26 + <SettingItem>
  27 + <n-button size="small" @click="optionData.selectStyleOptions.textColor = 'black'"> 恢复默认 </n-button>
  28 + </SettingItem>
  29 + </setting-item-box>
  30 + <setting-item-box name="背景颜色" :alone="true">
  31 + <SettingItem name="颜色">
  32 + <n-color-picker
  33 + size="small"
  34 + :modes="['hex']"
  35 + v-model:value="optionData.selectStyleOptions.textBackgroundColor"
  36 + ></n-color-picker>
  37 + </SettingItem>
  38 + <SettingItem>
  39 + <n-button size="small" @click="optionData.selectStyleOptions.textBackgroundColor = 'white'">
  40 + 恢复默认
  41 + </n-button>
  42 + </SettingItem>
  43 + </setting-item-box>
  44 + <setting-item-box name="透明度" :alone="true">
  45 + <SettingItem name="透明度">
  46 + <n-input-number
  47 + :min="0"
  48 + :max="1"
  49 + v-model:value="optionData.selectStyleOptions.textBackgroundColorAlpha"
  50 + clearable
  51 + />
  52 + </SettingItem>
  53 + </setting-item-box>
  54 + <setting-item-box name="弹出框背景色" :alone="true">
  55 + <SettingItem name="背景色">
  56 + <n-color-picker
  57 + size="small"
  58 + :modes="['hex']"
  59 + v-model:value="optionData.selectStyleOptions.textSelectModalBackgroundColor"
  60 + ></n-color-picker>
  61 + </SettingItem>
  62 + <SettingItem>
  63 + <n-button size="small" @click="optionData.selectStyleOptions.textSelectModalBackgroundColor = 'white'">
  64 + 恢复默认
  65 + </n-button>
  66 + </SettingItem>
  67 + </setting-item-box>
  68 + <setting-item-box name="弹出框文字颜色" :alone="true">
  69 + <SettingItem name="颜色">
  70 + <n-color-picker
  71 + size="small"
  72 + :modes="['hex']"
  73 + v-model:value="optionData.selectStyleOptions.textSelectModalTextColor"
  74 + ></n-color-picker>
  75 + </SettingItem>
  76 + <SettingItem>
  77 + <n-button size="small" @click="optionData.selectStyleOptions.textSelectModalTextColor = 'black'">
  78 + 恢复默认
  79 + </n-button>
  80 + </SettingItem>
  81 + </setting-item-box>
  82 + <setting-item-box name="图标颜色" :alone="true">
  83 + <SettingItem name="颜色">
  84 + <n-color-picker
  85 + size="small"
  86 + :modes="['hex']"
  87 + v-model:value="optionData.selectStyleOptions.iconColor"
  88 + ></n-color-picker>
  89 + </SettingItem>
  90 + <SettingItem>
  91 + <n-button size="small" @click="optionData.selectStyleOptions.iconColor = 'black'"> 恢复默认 </n-button>
  92 + </SettingItem>
  93 + </setting-item-box>
  94 + </collapse-item>
  95 +</template>
  96 +
  97 +<script lang="ts" setup>
  98 +import { PropType } from 'vue'
  99 +import { icon } from '@/plugins'
  100 +import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
  101 +import { option } from './config'
  102 +import { ComponentInteractEventEnum } from './interact'
  103 +
  104 +const { HelpOutlineIcon } = icon.ionicons5
  105 +
  106 +const props = defineProps({
  107 + optionData: {
  108 + type: Object as PropType<typeof option>,
  109 + required: true
  110 + }
  111 +})
  112 +
  113 +const panelOptions = [
  114 + {
  115 + label: '下拉展示',
  116 + value: 0
  117 + },
  118 + {
  119 + label: '面板展示',
  120 + value: 1
  121 + }
  122 +]
  123 +
  124 +const datePickerTypeOptions = [
  125 + {
  126 + label: '日期',
  127 + value: ComponentInteractEventEnum.DATE
  128 + },
  129 + {
  130 + label: '日期时间',
  131 + value: ComponentInteractEventEnum.DATE_TIME
  132 + },
  133 + {
  134 + label: '日期范围',
  135 + value: ComponentInteractEventEnum.DATE_RANGE
  136 + },
  137 + {
  138 + label: '月份',
  139 + value: ComponentInteractEventEnum.MONTH
  140 + },
  141 + {
  142 + label: '月份范围',
  143 + value: ComponentInteractEventEnum.MONTH_RANGE
  144 + },
  145 + {
  146 + label: '年份',
  147 + value: ComponentInteractEventEnum.YEAR
  148 + },
  149 + {
  150 + label: '年份范围',
  151 + value: ComponentInteractEventEnum.YEAR_RANGE
  152 + },
  153 + {
  154 + label: '季度',
  155 + value: ComponentInteractEventEnum.QUARTER
  156 + },
  157 + {
  158 + label: '季度范围',
  159 + value: ComponentInteractEventEnum.QUARTER_RANGE
  160 + }
  161 +]
  162 +</script>
  1 +
  2 +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
  3 +import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
  4 +import { useWidgetKey } from '@/packages/external/useWidgetKey'
  5 +
  6 +const { key, conKey, chartKey } = useWidgetKey('OverrideInputsDate', true)
  7 +
  8 +export const OverrideInputsDateConfig: ConfigType = {
  9 + key,
  10 + chartKey,
  11 + conKey,
  12 + title: '自定义时间选择器',
  13 + category: ChatCategoryEnum.MORE,
  14 + categoryName: ChatCategoryEnumName.MORE,
  15 + package: PackagesCategoryEnum.INFORMATIONS,
  16 + chartFrame: ChartFrameEnum.STATIC,
  17 + image: 'inputs_date.png'
  18 +}
  1 +<template>
  2 + <n-date-picker
  3 + v-model:value="option.dataset"
  4 + :panel="!!chartConfig.option.isPanel"
  5 + :type="chartConfig.option.componentInteractEventKey"
  6 + :style="`width:${w}px;`"
  7 + :to="false"
  8 + @update:value="onChange"
  9 + />
  10 +</template>
  11 +
  12 +<script setup lang="ts">
  13 +import { PropType, toRefs, ref, shallowReactive, watch } from 'vue'
  14 +import dayjs from 'dayjs'
  15 +import { CreateComponentType } from '@/packages/index.d'
  16 +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
  17 +import { useChartInteract } from '@/hooks'
  18 +import { InteractEventOn } from '@/enums/eventEnum'
  19 +import { ComponentInteractParamsEnum } from './interact'
  20 +
  21 +const props = defineProps({
  22 + chartConfig: {
  23 + type: Object as PropType<CreateComponentType>,
  24 + required: true
  25 + }
  26 +})
  27 +
  28 +const { w, h } = toRefs(props.chartConfig.attr)
  29 +
  30 +const {
  31 + textColor,
  32 + textBackgroundColor,
  33 + iconColor,
  34 + textBackgroundColorAlpha,
  35 + textSelectModalBackgroundColor,
  36 + textSelectModalTextColor
  37 +} = toRefs(props.chartConfig.option.selectStyleOptions) as any
  38 +
  39 +const rangeDate = ref<number | number[]>()
  40 +
  41 +const option = shallowReactive({
  42 + dataset: props.chartConfig.option.dataset
  43 +})
  44 +
  45 +// 监听事件改变
  46 +const onChange = (v: number | number[]) => {
  47 + if (v instanceof Array) {
  48 + // 存储到联动数据
  49 + useChartInteract(
  50 + props.chartConfig,
  51 + useChartEditStore,
  52 + {
  53 + [ComponentInteractParamsEnum.DATE_START]: v[0],
  54 + [ComponentInteractParamsEnum.DATE_END]: v[1],
  55 + [ComponentInteractParamsEnum.DATE_RANGE]: `${v[0]}-${v[1]}`
  56 + },
  57 + InteractEventOn.CHANGE
  58 + )
  59 + } else {
  60 + // 存储到联动数据
  61 + useChartInteract(
  62 + props.chartConfig,
  63 + useChartEditStore,
  64 + { [ComponentInteractParamsEnum.DATE]: v },
  65 + InteractEventOn.CHANGE
  66 + )
  67 + }
  68 +}
  69 +
  70 +// 手动更新
  71 +watch(
  72 + () => props.chartConfig.option.dataset,
  73 + (newData: number | number[]) => {
  74 + option.dataset = newData
  75 + // 关联目标组件首次请求带上默认内容
  76 + onChange(newData)
  77 + },
  78 + {
  79 + immediate: true
  80 + }
  81 +)
  82 +</script>
  83 +
  84 +<style lang="scss" scoped>
  85 +@include deep() {
  86 + .n-input {
  87 + height: v-bind('h + "px"');
  88 + display: flex;
  89 + align-items: center;
  90 + background: v-bind('textBackgroundColor') !important;
  91 + }
  92 + .n-input__input-el {
  93 + color: v-bind('textColor') !important;
  94 + }
  95 + .n-input__placeholder {
  96 + color: v-bind('textColor') !important;
  97 + }
  98 + .n-base-icon {
  99 + color: v-bind('iconColor') !important;
  100 + }
  101 + .n-date-panel{
  102 + background: v-bind('textSelectModalBackgroundColor') !important;;
  103 + }
  104 +}
  105 +</style>
  1 +import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
  2 +
  3 +// 时间组件类型
  4 +export enum ComponentInteractEventEnum {
  5 + DATE = 'date',
  6 + DATE_TIME = 'datetime',
  7 + DATE_RANGE = 'daterange',
  8 + DATE_TIME_RANGE = 'datetimerange',
  9 + MONTH = 'month',
  10 + MONTH_RANGE = 'monthrange',
  11 + YEAR = 'year',
  12 + YEAR_RANGE = 'yearrange',
  13 + QUARTER = 'quarter',
  14 + QUARTER_RANGE = 'quarterrange'
  15 +}
  16 +
  17 +// 联动参数
  18 +export enum ComponentInteractParamsEnum {
  19 + DATE = 'date',
  20 + DATE_START = 'dateStart',
  21 + DATE_END = 'dateEnd',
  22 + DATE_RANGE = 'daterange'
  23 +}
  24 +
  25 +const time = [
  26 + {
  27 + value: ComponentInteractParamsEnum.DATE,
  28 + label: '日期'
  29 + }
  30 +]
  31 +
  32 +const timeRange = [
  33 + {
  34 + value: ComponentInteractParamsEnum.DATE_START,
  35 + label: '开始时间'
  36 + },
  37 + {
  38 + value: ComponentInteractParamsEnum.DATE_END,
  39 + label: '结束时间'
  40 + },
  41 + {
  42 + value: ComponentInteractParamsEnum.DATE_RANGE,
  43 + label: '日期范围'
  44 + }
  45 +]
  46 +
  47 +// 定义组件触发回调事件
  48 +export const interactActions: InteractActionsType[] = [
  49 + {
  50 + interactType: InteractEventOn.CHANGE,
  51 + interactName: '选择完成',
  52 + componentEmitEvents: {
  53 + [ComponentInteractEventEnum.DATE]: time,
  54 + [ComponentInteractEventEnum.DATE_TIME]: time,
  55 + [ComponentInteractEventEnum.DATE_RANGE]: timeRange,
  56 + [ComponentInteractEventEnum.MONTH]: time,
  57 + [ComponentInteractEventEnum.MONTH_RANGE]: timeRange,
  58 + [ComponentInteractEventEnum.QUARTER]: time,
  59 + [ComponentInteractEventEnum.QUARTER_RANGE]: timeRange,
  60 + [ComponentInteractEventEnum.YEAR]: time,
  61 + [ComponentInteractEventEnum.YEAR_RANGE]: timeRange,
  62 + }
  63 + }
  64 +]
  1 +import cloneDeep from 'lodash/cloneDeep'
  2 +import { PublicConfigClass } from '@/packages/public'
  3 +import { CreateComponentType } from '@/packages/index.d'
  4 +import { chartInitConfig } from '@/settings/designSetting'
  5 +import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
  6 +import { interactActions, ComponentInteractEventEnum } from './interact'
  7 +import { OverrideSelectConfig } from './index'
  8 +
  9 +export const option = {
  10 + // 时间组件展示类型，必须和 interactActions 中定义的数据一致
  11 + [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
  12 + // 默认值
  13 + selectValue: '1',
  14 + // 暴露配置内容给用户
  15 + dataset: [
  16 + {
  17 + label: '选项1',
  18 + value: '1'
  19 + },
  20 + {
  21 + label: '选项2',
  22 + value: '2'
  23 + },
  24 + {
  25 + label: '选项3',
  26 + value: '3'
  27 + }
  28 + ],
  29 + selectStyleOptions: {
  30 + textColor: 'black',
  31 + textBackgroundColor: 'white',
  32 + textBackgroundColorAlpha: 1,
  33 + iconColor:'grey',
  34 + //弹出下拉框
  35 + textSelectModalBackgroundColor: 'white',
  36 + textSelectModalTextColor: 'black'
  37 + }
  38 +}
  39 +
  40 +export default class Config extends PublicConfigClass implements CreateComponentType {
  41 + public key = OverrideSelectConfig.key
  42 + public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
  43 + public chartConfig = cloneDeep(OverrideSelectConfig)
  44 + public interactActions = interactActions
  45 + public option = cloneDeep(option)
  46 +}
  1 +<template>
  2 + <collapse-item name="下拉配置" :expanded="true">
  3 + <setting-item-box name="选择项" :alone="true">
  4 + <SettingItem name="选择项">
  5 + <n-select size="small" v-model:value="optionData.selectValue" :options="optionData.dataset" />
  6 + </SettingItem>
  7 + </setting-item-box>
  8 + <setting-item-box name="文字颜色" :alone="true">
  9 + <SettingItem name="颜色">
  10 + <n-color-picker
  11 + size="small"
  12 + :modes="['hex']"
  13 + v-model:value="optionData.selectStyleOptions.textColor"
  14 + ></n-color-picker>
  15 + </SettingItem>
  16 + <SettingItem>
  17 + <n-button size="small" @click="optionData.selectStyleOptions.textColor = 'black'"> 恢复默认 </n-button>
  18 + </SettingItem>
  19 + </setting-item-box>
  20 + <setting-item-box name="背景颜色" :alone="true">
  21 + <SettingItem name="颜色">
  22 + <n-color-picker
  23 + size="small"
  24 + :modes="['hex']"
  25 + v-model:value="optionData.selectStyleOptions.textBackgroundColor"
  26 + ></n-color-picker>
  27 + </SettingItem>
  28 + <SettingItem>
  29 + <n-button size="small" @click="optionData.selectStyleOptions.textBackgroundColor = 'white'">
  30 + 恢复默认
  31 + </n-button>
  32 + </SettingItem>
  33 + </setting-item-box>
  34 + <setting-item-box name="透明度" :alone="true">
  35 + <SettingItem name="透明度">
  36 + <n-input-number
  37 + :min="0"
  38 + :max="1"
  39 + v-model:value="optionData.selectStyleOptions.textBackgroundColorAlpha"
  40 + clearable
  41 + />
  42 + </SettingItem>
  43 + </setting-item-box>
  44 + <setting-item-box name="弹出框背景色" :alone="true">
  45 + <SettingItem name="背景色">
  46 + <n-color-picker
  47 + size="small"
  48 + :modes="['hex']"
  49 + v-model:value="optionData.selectStyleOptions.textSelectModalBackgroundColor"
  50 + ></n-color-picker>
  51 + </SettingItem>
  52 + <SettingItem>
  53 + <n-button size="small" @click="optionData.selectStyleOptions.textSelectModalBackgroundColor = 'white'">
  54 + 恢复默认
  55 + </n-button>
  56 + </SettingItem>
  57 + </setting-item-box>
  58 + <setting-item-box name="弹出框文字颜色" :alone="true">
  59 + <SettingItem name="颜色">
  60 + <n-color-picker
  61 + size="small"
  62 + :modes="['hex']"
  63 + v-model:value="optionData.selectStyleOptions.textSelectModalTextColor"
  64 + ></n-color-picker>
  65 + </SettingItem>
  66 + <SettingItem>
  67 + <n-button size="small" @click="optionData.selectStyleOptions.textSelectModalTextColor = 'black'">
  68 + 恢复默认
  69 + </n-button>
  70 + </SettingItem>
  71 + </setting-item-box>
  72 + <setting-item-box name="图标颜色" :alone="true">
  73 + <SettingItem name="颜色">
  74 + <n-color-picker
  75 + size="small"
  76 + :modes="['hex']"
  77 + v-model:value="optionData.selectStyleOptions.iconColor"
  78 + ></n-color-picker>
  79 + </SettingItem>
  80 + <SettingItem>
  81 + <n-button size="small" @click="optionData.selectStyleOptions.iconColor = 'black'"> 恢复默认 </n-button>
  82 + </SettingItem>
  83 + </setting-item-box>
  84 + </collapse-item>
  85 +</template>
  86 +
  87 +<script lang="ts" setup>
  88 +import { PropType } from 'vue'
  89 +import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
  90 +import { option } from './config'
  91 +
  92 +defineProps({
  93 + optionData: {
  94 + type: Object as PropType<typeof option>,
  95 + required: true
  96 + }
  97 +})
  98 +</script>
  1 +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
  2 +import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
  3 +import { useWidgetKey } from '@/packages/external/useWidgetKey'
  4 +
  5 +const { key, conKey, chartKey } = useWidgetKey('OverrideSelect', true)
  6 +
  7 +export const OverrideSelectConfig: ConfigType = {
  8 + key,
  9 + chartKey,
  10 + conKey,
  11 + title: '自定义下拉选择器',
  12 + category: ChatCategoryEnum.MORE,
  13 + categoryName: ChatCategoryEnumName.MORE,
  14 + package: PackagesCategoryEnum.INFORMATIONS,
  15 + chartFrame: ChartFrameEnum.COMMON,
  16 + image: 'inputs_select.png'
  17 +}
  1 +<template>
  2 + <n-select
  3 + v-model:value="option.value.selectValue"
  4 + :options="option.value.dataset"
  5 + :style="`width:${w}px;`"
  6 + :to="false"
  7 + @update:value="onChange"
  8 + />
  9 +</template>
  10 +
  11 +<script setup lang="ts">
  12 +import { PropType, toRefs, shallowReactive, watch } from 'vue'
  13 +import { CreateComponentType } from '@/packages/index.d'
  14 +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
  15 +import { useChartInteract } from '@/hooks'
  16 +import { InteractEventOn } from '@/enums/eventEnum'
  17 +import { ComponentInteractParamsEnum } from './interact'
  18 +
  19 +const props = defineProps({
  20 + chartConfig: {
  21 + type: Object as PropType<CreateComponentType>,
  22 + required: true
  23 + }
  24 +})
  25 +
  26 +const { w, h } = toRefs(props.chartConfig.attr)
  27 +
  28 +const {
  29 + textColor,
  30 + textBackgroundColor,
  31 + iconColor,
  32 + textBackgroundColorAlpha,
  33 + textSelectModalBackgroundColor,
  34 + textSelectModalTextColor
  35 +} = toRefs(props.chartConfig.option.selectStyleOptions) as any
  36 +
  37 +const option = shallowReactive({
  38 + value: {
  39 + selectValue: props.chartConfig.option.selectValue,
  40 + dataset: props.chartConfig.option.dataset
  41 + }
  42 +})
  43 +
  44 +// 监听事件改变
  45 +const onChange = (v: string) => {
  46 + // 存储到联动数据
  47 + useChartInteract(
  48 + props.chartConfig,
  49 + useChartEditStore,
  50 + { [ComponentInteractParamsEnum.DATA]: v },
  51 + InteractEventOn.CHANGE
  52 + )
  53 +}
  54 +
  55 +// 手动更新
  56 +watch(
  57 + () => props.chartConfig.option,
  58 + (newData: any) => {
  59 + option.value = newData
  60 + onChange(newData.selectValue)
  61 + },
  62 + {
  63 + immediate: true,
  64 + deep: true
  65 + }
  66 +)
  67 +</script>
  68 +
  69 +<style lang="css"></style>
  70 +
  71 +<style lang="scss" scoped>
  72 +@include deep() {
  73 + .n-base-selection-label {
  74 + height: v-bind('h + "px"');
  75 + display: flex;
  76 + align-items: center;
  77 + background: v-bind('textBackgroundColor') !important;
  78 + opacity: v-bind('textBackgroundColorAlpha') !important;
  79 + }
  80 + .n-base-selection-input__content {
  81 + color: v-bind('textColor');
  82 + }
  83 + .n-base-icon {
  84 + color: v-bind('iconColor') !important;
  85 + }
  86 + .n-select-menu {
  87 + background: v-bind('textSelectModalBackgroundColor') !important;
  88 + }
  89 + .n-base-select-option__content {
  90 + color: v-bind('textSelectModalTextColor') !important;
  91 + }
  92 +}
  93 +</style>
  1 +import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
  2 +
  3 +// 时间组件类型
  4 +export enum ComponentInteractEventEnum {
  5 + DATA = 'data'
  6 +}
  7 +
  8 +// 联动参数
  9 +export enum ComponentInteractParamsEnum {
  10 + DATA = 'data'
  11 +}
  12 +
  13 +// 定义组件触发回调事件
  14 +export const interactActions: InteractActionsType[] = [
  15 + {
  16 + interactType: InteractEventOn.CHANGE,
  17 + interactName: '选择完成',
  18 + componentEmitEvents: {
  19 + [ComponentInteractEventEnum.DATA]: [
  20 + {
  21 + value: ComponentInteractParamsEnum.DATA,
  22 + label: '选择项'
  23 + }
  24 + ]
  25 + }
  26 + }
  27 +]
@@ -3,7 +3,9 @@ import { ComposesList } from '@/packages/components/external/Composes' @@ -3,7 +3,9 @@ import { ComposesList } from '@/packages/components/external/Composes'
3 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d' 3 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
4 import { ClockConfig } from '@/packages/components/external/Decorates/Mores/Icon' 4 import { ClockConfig } from '@/packages/components/external/Decorates/Mores/Icon'
5 import { OverrideImageConfig } from '@/packages/components/external/Informations/Mores/OverrideImage' 5 import { OverrideImageConfig } from '@/packages/components/external/Informations/Mores/OverrideImage'
6 -import {OverrideCarouselConfig } from '@/packages/components/external/Informations/Mores/OverrideCarousel' 6 +import { OverrideCarouselConfig } from '@/packages/components/external/Informations/Mores/OverrideCarousel'
  7 +import { OverrideSelectConfig } from '@/packages/components/external/Informations/Mores/OverrideSelect'
  8 +import { OverrideInputsDateConfig } from '@/packages/components/external/Informations/Mores/OverrideInputsDate'
7 9
8 export function useInjectLib(packagesList: EPackagesType) { 10 export function useInjectLib(packagesList: EPackagesType) {
9 11
@@ -12,6 +14,8 @@ export function useInjectLib(packagesList: EPackagesType) { @@ -12,6 +14,8 @@ export function useInjectLib(packagesList: EPackagesType) {
12 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, ClockConfig) 14 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, ClockConfig)
13 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideImageConfig) 15 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideImageConfig)
14 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideCarouselConfig) 16 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideCarouselConfig)
  17 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideSelectConfig)
  18 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsDateConfig)
15 } 19 }
16 20
17 /** 21 /**