perf(external/Composes): 信息下新增自定义标签器

+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 { OverrideInputsTabConfig } from './index'
+
+export const option = {
+  // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+  [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
+  // 默认值
+  tabLabel: '选项1',
+  // 样式
+  tabType: 'segment',
+  // 暴露配置内容给用户
+  dataset: [
+    {
+      label: '选项1',
+      value: '1'
+    },
+    {
+      label: '选项2',
+      value: '2'
+    },
+    {
+      label: '选项3',
+      value: '3'
+    }
+  ],
+  customTabCss: {
+    labelTextSize: '16',
+    labelDefaultColor: 'black',
+    labelActiveColor: 'green',
+    tabBottomBarColor: 'green',
+    segmentationBgColor: 'white',
+    segmentationActiveBgColor: '#C0C0C0'
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideInputsTabConfig.key
+  public attr = { ...chartInitConfig, w: 460, h: 32, zIndex: -1 }
+  public chartConfig = cloneDeep(OverrideInputsTabConfig)
+  public interactActions = interactActions
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="标签页配置" :expanded="true">
+    <setting-item-box name="默认值" :alone="true">
+      <n-select size="small" v-model:value="optionData.tabType" :options="tabTypeOptions" @change="onHandleSelect" />
+    </setting-item-box>
+    <setting-item-box name="默认文字" :alone="true">
+      <SettingItem name="大小">
+        <n-input v-model:value="optionData.customTabCss.labelTextSize" />
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.customTabCss.labelDefaultColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.customTabCss.labelDefaultColor = '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.customTabCss.labelActiveColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.customTabCss.labelActiveColor = 'green'"> 恢复默认 </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.customTabCss.tabBottomBarColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.customTabCss.tabBottomBarColor = 'green'"> 恢复默认 </n-button>
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box v-if="optionData.tabType === 'segment'" name="分段背景色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.customTabCss.segmentationBgColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.customTabCss.segmentationBgColor = 'white'"> 恢复默认 </n-button>
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box v-if="optionData.tabType === 'segment'" name="分段激活色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.customTabCss.segmentationActiveBgColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.customTabCss.segmentationActiveBgColor = '#C0C0C0'">
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const tabTypeOptions = [
+  {
+    label: '线条',
+    value: 'bar'
+  },
+  {
+    label: '分段',
+    value: 'segment'
+  }
+]
+const onHandleSelect = (value: string) => {
+  if (value === 'bar') {
+    props.optionData.customTabCss.segmentationBgColor = ''
+    props.optionData.customTabCss.segmentationActiveBgColor = ''
+
+  }
+}
+</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('OverrideInputsTab', true)
+
+export const OverrideInputsTabConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义标签选择器',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,        
+  image: 'inputs_tab.png'
+}

+<template>
+  <n-tabs class="override-n-tabs" :type="option.value.tabType" @update:value="onChange">
+    <n-tab v-for="(item, index) in option.value.dataset" :name="item.label" :key="index"> {{ item.label }} </n-tab>
+  </n-tabs>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import cloneDeep from 'lodash/cloneDeep'
+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 {
+  labelTextSize,
+  labelDefaultColor,
+  labelActiveColor,
+  tabBottomBarColor,
+  segmentationBgColor,
+  segmentationActiveBgColor
+} = toRefs(props.chartConfig.option.customTabCss)
+
+const option = shallowReactive({
+  value: cloneDeep(props.chartConfig.option)
+})
+
+// 监听事件改变
+const onChange = (v: string) => {
+  if (v === undefined) return
+  const selectItem = option.value.dataset.find((item: { label: string; value: any }) => item.label === v)
+  // 存储到联动数据
+  useChartInteract(
+    props.chartConfig,
+    useChartEditStore,
+    { [ComponentInteractParamsEnum.DATA]: selectItem.value },
+    InteractEventOn.CHANGE
+  )
+}
+
+// 手动更新
+watch(
+  () => props.chartConfig.option,
+  (newData: any) => {
+    option.value = newData
+    onChange(newData.tabValue)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+@include deep() {
+  .n-tabs-tab {
+    font-size: v-bind('labelTextSize+"px"') !important;
+    color: v-bind('labelDefaultColor') !important;
+  }
+  .n-tabs-tab--active {
+    color: v-bind('labelActiveColor') !important;
+    background-color: v-bind('segmentationActiveBgColor') !important;
+  }
+  .n-tabs-bar {
+    background-color: v-bind('tabBottomBarColor') !important;
+  }
+  .n-tabs-rail {
+    background-color: v-bind('segmentationBgColor') !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: '选择项'
+        }
+      ]
+    }
+  }
+]

@@ -7,6 +7,7 @@ import { OverrideImageConfig } from '@/packages/components/external/Informations
 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'
+import { OverrideInputsTabConfig } from '@/packages/components/external/Informations/Mores/OverrideInputsTab'
 
 export function useInjectLib(packagesList: EPackagesType) {
 
@@ -18,6 +19,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideCarouselConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideSelectConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsDateConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsTabConfig)
 }
 
 /**