Merge branch 'ft' into 'main_dev'

feat(packages/external): 新增自定义按钮,点击跳转

See merge request yunteng/thingskit-view!67

+import { toRefs, ref } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+// 获取类型
+type ChartEditStoreType = typeof useChartEditStore
+
+// Params 参数修改触发 api 更新图表请求
+export const useChartInteract = (
+  chartConfig: CreateComponentType,
+  useChartEditStore: ChartEditStoreType,
+  param: { [T: string]: any },
+  interactEventOn: string,
+  target: string,
+  status: boolean
+) => {
+  const chartEditStore = useChartEditStore()
+  const { interactEvents } = chartConfig.events
+  const fnOnEvent = interactEvents.filter(item => {
+    return item.interactOn === interactEventOn
+  })
+  if (fnOnEvent.length === 0) return
+  fnOnEvent.forEach(item => {
+    const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
+    if (index === -1) return
+    const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams)
+    Object.keys(item.interactFn).forEach(key => {
+      if (Params.value[key]) {
+        Params.value[key] = param[item.interactFn[key]]
+      }
+      if (Header.value[key]) {
+        Header.value[key] = param[item.interactFn[key]]
+      }
+    })
+    updateIndex(chartConfig)
+  })
+
+  function updateIndex(chart: any) {
+    try {
+      const targetId = chart.option.dataset[0].target
+      const currentId = chart.option.dataset[0].current
+      const currentButtonId = chart.option.dataset[0].currentButton
+      const targetButtonId = chart.option.dataset[0].targetButton
+      const targetIndex = chartEditStore.fetchTargetIndex(targetId)
+      const currentIndex = chartEditStore.fetchTargetIndex(currentId)
+      const currentButtonIndex = chartEditStore.fetchTargetIndex(currentButtonId)
+      const targetButtonIndex = chartEditStore.fetchTargetIndex(targetButtonId)
+      chartEditStore.componentList[targetIndex].status.hide = false
+      chartEditStore.componentList[currentIndex].status.hide = true
+      chartEditStore.componentList[currentButtonIndex].status.hide = true
+      chartEditStore.componentList[targetButtonIndex].status.hide = false
+    } catch (e) {
+      console.error(e)
+    }
+  }
+}
+
+// 联动事件触发的 type 变更时，清除当前绑定内容
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export const clearInteractEvent = (chartConfig: CreateComponentType) => {}

@@ -19,11 +19,9 @@ export const useChartInteract = (
   interactEventOn: string
   interactEventOn: string
 ) => {
 ) => {
   /**新增代码 */
   /**新增代码 */
-  let combineData: any = null
   const {
   const {
     option: { dataset }
     option: { dataset }
   } = chartConfig
   } = chartConfig
-  combineData = dataset
   const { data } = param
   const { data } = param
   /**新增代码 */
   /**新增代码 */
   const chartEditStore = useChartEditStore()
   const chartEditStore = useChartEditStore()
@@ -46,7 +44,8 @@ export const useChartInteract = (
       }
       }
     })
     })
     /**新增代码 */
     /**新增代码 */
-    combineData.forEach((combinItem: any, combinIndex: number) => {
+    if (!Array.isArray(dataset)) return
+    dataset.forEach((combinItem: any, combinIndex: number) => {
       if (itemIndex === combinIndex) {
       if (itemIndex === combinIndex) {
         combinItem.targetItem = chartEditStore.componentList[index]
         combinItem.targetItem = chartEditStore.componentList[index]
       }
       }
@@ -54,14 +53,15 @@ export const useChartInteract = (
     /**新增代码 */
     /**新增代码 */
   })
   })
   /**新增代码 */
   /**新增代码 */
-  combineData.forEach((item: any) => {
+  if (!Array.isArray(dataset)) return
+  dataset.forEach((item: any) => {
     try {
     try {
       if (item.value === data) item.targetItem.status.hide = false
       if (item.value === data) item.targetItem.status.hide = false
       else {
       else {
         item.targetItem.status.hide = true
         item.targetItem.status.hide = true
       }
       }
     } catch (e) {
     } catch (e) {
-      console.log(`useChartInteract.hook.ts:${e}`)
+      console.log(`Error: useChartInteract.hook.ts:${e}`)
     }
     }
   })
   })
   /**新增代码 */
   /**新增代码 */

@@ -31,7 +31,7 @@ import { isPreview } from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
 import isObject from 'lodash/isObject'
 import dataJson from './data.json'
 import dataJson from './data.json'
-import { isFullScreen } from '../../utls/isFullScreen'
+import { useFullScreen } from '../../utls/fullScreen'
 
 
 const props = defineProps({
 const props = defineProps({
   themeSetting: {
   themeSetting: {
@@ -68,9 +68,9 @@ const toolBoxOption = {
       icon: 'path://M733.549304 0l116.434359 116.23452-226.402521 226.40252 57.053835 57.068109 226.459617-226.445342 120.616689 120.41685V0H733.549304zM689.513507 619.855586l-57.068108 57.068109 224.232847 224.232847-122.64362 122.843458h293.676657V729.838022l-114.007751 114.207588-224.190025-224.190024zM338.197775 404.144414l57.068109-57.068109L171.033037 122.843458 293.676657 0H0v294.161978l114.022025-114.207588 224.17575 224.190024zM347.076305 624.294851L120.616689 850.754468 0 730.323343v293.676657h294.161978l-116.420084-116.23452 226.40252-226.40252-57.068109-57.068109z',
       icon: 'path://M733.549304 0l116.434359 116.23452-226.402521 226.40252 57.053835 57.068109 226.459617-226.445342 120.616689 120.41685V0H733.549304zM689.513507 619.855586l-57.068108 57.068109 224.232847 224.232847-122.64362 122.843458h293.676657V729.838022l-114.007751 114.207588-224.190025-224.190024zM338.197775 404.144414l57.068109-57.068109L171.033037 122.843458 293.676657 0H0v294.161978l114.022025-114.207588 224.17575 224.190024zM347.076305 624.294851L120.616689 850.754468 0 730.323343v293.676657h294.161978l-116.420084-116.23452 226.40252-226.40252-57.068109-57.068109z',
       onclick: () => {
       onclick: () => {
         const getEchartDom = vChartRef.value?.getDom()
         const getEchartDom = vChartRef.value?.getDom()
-        const domName = document.getElementById(getEchartDom.id) as any
-        const htmlName = document.querySelector('html') as any
-        isFullScreen(domName, htmlName)
+        const domName = document.getElementById(getEchartDom.id) as HTMLElement
+        const htmlName = document.querySelector('html') as HTMLHtmlElement 
+        useFullScreen(domName, htmlName)
       }
       }
     }
     }
   }
   }

@@ -30,7 +30,7 @@ import { isPreview } from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
 import isObject from 'lodash/isObject'
 import dataJson from './data.json'
 import dataJson from './data.json'
-import { isFullScreen } from '../../utls/isFullScreen'
+import { useFullScreen } from '../../utls/fullScreen'
 
 
 const props = defineProps({
 const props = defineProps({
   themeSetting: {
   themeSetting: {
@@ -67,9 +67,9 @@ const toolBoxOption = {
       icon: 'path://M733.549304 0l116.434359 116.23452-226.402521 226.40252 57.053835 57.068109 226.459617-226.445342 120.616689 120.41685V0H733.549304zM689.513507 619.855586l-57.068108 57.068109 224.232847 224.232847-122.64362 122.843458h293.676657V729.838022l-114.007751 114.207588-224.190025-224.190024zM338.197775 404.144414l57.068109-57.068109L171.033037 122.843458 293.676657 0H0v294.161978l114.022025-114.207588 224.17575 224.190024zM347.076305 624.294851L120.616689 850.754468 0 730.323343v293.676657h294.161978l-116.420084-116.23452 226.40252-226.40252-57.068109-57.068109z',
       icon: 'path://M733.549304 0l116.434359 116.23452-226.402521 226.40252 57.053835 57.068109 226.459617-226.445342 120.616689 120.41685V0H733.549304zM689.513507 619.855586l-57.068108 57.068109 224.232847 224.232847-122.64362 122.843458h293.676657V729.838022l-114.007751 114.207588-224.190025-224.190024zM338.197775 404.144414l57.068109-57.068109L171.033037 122.843458 293.676657 0H0v294.161978l114.022025-114.207588 224.17575 224.190024zM347.076305 624.294851L120.616689 850.754468 0 730.323343v293.676657h294.161978l-116.420084-116.23452 226.40252-226.40252-57.068109-57.068109z',
       onclick: () => {
       onclick: () => {
         const getEchartDom = vChartRef.value?.getDom()
         const getEchartDom = vChartRef.value?.getDom()
-        const domName = document.getElementById(getEchartDom.id) as any
-        const htmlName = document.querySelector('html') as any
-        isFullScreen(domName, htmlName)
+        const domName = document.getElementById(getEchartDom.id) as HTMLElement
+        const htmlName = document.querySelector('html') as HTMLHtmlElement 
+        useFullScreen(domName, htmlName)
       }
       }
     }
     }
   }
   }

@@ -26,7 +26,7 @@ import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } fr
 import { useChartDataFetch } from '@/hooks'
 import { useChartDataFetch } from '@/hooks'
 import { isPreview, colorGradientCustomMerge } from '@/utils'
 import { isPreview, colorGradientCustomMerge } from '@/utils'
 import dataJson from './data.json'
 import dataJson from './data.json'
-import { isFullScreen } from '../../utls/isFullScreen'
+import { useFullScreen } from '../../utls/fullScreen'
 
 
 const props = defineProps({
 const props = defineProps({
   themeSetting: {
   themeSetting: {
@@ -61,9 +61,9 @@ const toolBoxOption = {
       icon: 'path://M733.549304 0l116.434359 116.23452-226.402521 226.40252 57.053835 57.068109 226.459617-226.445342 120.616689 120.41685V0H733.549304zM689.513507 619.855586l-57.068108 57.068109 224.232847 224.232847-122.64362 122.843458h293.676657V729.838022l-114.007751 114.207588-224.190025-224.190024zM338.197775 404.144414l57.068109-57.068109L171.033037 122.843458 293.676657 0H0v294.161978l114.022025-114.207588 224.17575 224.190024zM347.076305 624.294851L120.616689 850.754468 0 730.323343v293.676657h294.161978l-116.420084-116.23452 226.40252-226.40252-57.068109-57.068109z',
       icon: 'path://M733.549304 0l116.434359 116.23452-226.402521 226.40252 57.053835 57.068109 226.459617-226.445342 120.616689 120.41685V0H733.549304zM689.513507 619.855586l-57.068108 57.068109 224.232847 224.232847-122.64362 122.843458h293.676657V729.838022l-114.007751 114.207588-224.190025-224.190024zM338.197775 404.144414l57.068109-57.068109L171.033037 122.843458 293.676657 0H0v294.161978l114.022025-114.207588 224.17575 224.190024zM347.076305 624.294851L120.616689 850.754468 0 730.323343v293.676657h294.161978l-116.420084-116.23452 226.40252-226.40252-57.068109-57.068109z',
       onclick: () => {
       onclick: () => {
         const getEchartDom = vChartRef.value?.getDom()
         const getEchartDom = vChartRef.value?.getDom()
-        const domName = document.getElementById(getEchartDom.id) as any
-        const htmlName = document.querySelector('html') as any
-        isFullScreen(domName, htmlName)
+        const domName = document.getElementById(getEchartDom.id) as HTMLElement
+        const htmlName = document.querySelector('html') as HTMLHtmlElement 
+        useFullScreen(domName, htmlName)
       }
       }
     }
     }
   }
   }

-export const isFullScreen = (domName: any, htmlName: any) => {
+export const useFullScreen = (domName: any, htmlName: HTMLHtmlElement) => {
   const isFullScreen = document.fullscreenElement
   const isFullScreen = document.fullscreenElement
   const currentDatkTheme = htmlName.getAttribute('data-theme')
   const currentDatkTheme = htmlName.getAttribute('data-theme')
 
 
   if (isFullScreen) {
   if (isFullScreen) {
-    console.log('退出全屏')
     if (document.exitFullscreen) {
     if (document.exitFullscreen) {
       document.exitFullscreen()
       document.exitFullscreen()
-      domName.style.background = ''
     }
     }
   } else {
   } else {
-    console.log('进入全屏')
     if (domName.requestFullscreen) {
     if (domName.requestFullscreen) {
       domName.requestFullscreen()
       domName.requestFullscreen()
       domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
       domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'

@@ -2,6 +2,7 @@
 import { toRefs } from 'vue'
 import { toRefs } from 'vue'
 import SelectCity from './SelectCity.vue'
 import SelectCity from './SelectCity.vue'
 import { useUtils } from '../hooks/useUtils'
 import { useUtils } from '../hooks/useUtils'
+import weatherBg from '@/assets/external/weather/bg.png'
 
 
 const props = defineProps({
 const props = defineProps({
   data: {
   data: {
@@ -27,7 +28,7 @@ const onHandleSelectValues = (values: any) => {
         content: true,
         content: true,
         footer: 'soft'
         footer: 'soft'
       }"
       }"
-      :style="{ backgroundImage: `url('src/assets/external/weather/bg.png')` }"
+      :style="{ backgroundImage: `url('${weatherBg}')` }"
       class="n-card"
       class="n-card"
     >
     >
       <template #header>
       <template #header>

@@ -3,6 +3,10 @@ import { CreateComponentType } from '@/packages/index.d'
 import { WeatherConfig } from './index'
 import { WeatherConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 import cloneDeep from 'lodash/cloneDeep'
 import { chartInitConfig } from '@/settings/designSetting'
 import { chartInitConfig } from '@/settings/designSetting'
+import clearDay from '@/assets/external/weather/clearDay.png'
+import cloudy from '@/assets/external/weather/cloudy.png'
+import cloudyDay from '@/assets/external/weather/cloudyDay.png'
+import lightRain from '@/assets/external/weather/lightRain.png'
 
 
 //第三方 天气接口key值和api配置(高德)
 //第三方 天气接口key值和api配置(高德)
 export class ThirdPartyWeatherConnfig {
 export class ThirdPartyWeatherConnfig {
@@ -23,22 +27,23 @@ export const enum areaEnum {
 export const weatherTextMapImg = [
 export const weatherTextMapImg = [
   {
   {
     text: '晴',
     text: '晴',
-    img: 'src/assets/external/weather/clearDay.png'
+    img: clearDay
   },
   },
   {
   {
     text: '多云',
     text: '多云',
-    img: 'src/assets/external/weather/cloudy.png'
+    img: cloudy
   },
   },
   {
   {
     text: '阴',
     text: '阴',
-    img: 'src/assets/external/weather/cloudyDay.png'
+    img: cloudyDay
   },
   },
   {
   {
     text: '小雨',
     text: '小雨',
-    img: 'src/assets/external/weather/lightRain.png'
+    img: lightRain
   }
   }
 ]
 ]
 
 
+console.log(clearDay, cloudy)
 //风力等级文字映射
 //风力等级文字映射
 export const weatherSpeedMapText = [
 export const weatherSpeedMapText = [
   {
   {

 import { weatherSpeedMapText, weatherTextMapImg } from '../config'
 import { weatherSpeedMapText, weatherTextMapImg } from '../config'
+import clearDay from '@/assets/external/weather/clearDay.png'
 
 
 export const useUtils = () => {
 export const useUtils = () => {
   const loadWeatherImg = (text: string) => {
   const loadWeatherImg = (text: string) => {
-    return (
-      weatherTextMapImg.find((item: any) => item.text === text)?.img ||
-      '/src/assets/external/weather/clearDay.png'
-    )
+    return weatherTextMapImg.find((item: any) => item.text === text)?.img || clearDay
   }
   }
 
 
   //风力等级 ≤3 3
   //风力等级 ≤3 3

+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 { ButtonConfig } from './index'
+
+export const option = {
+  // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+  [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
+  // 暴露配置内容给用户
+  dataset: [
+    {
+      label: '',
+      current: '',
+      target: '',
+      currentButton: '',
+      targetButton: ''
+    }
+  ],
+  buttonType:'primary'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = ButtonConfig.key
+  public attr = { ...chartInitConfig, w: 460, h: 32, zIndex: -1 }
+  public chartConfig = cloneDeep(ButtonConfig)
+  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.buttonType" :options="buttonTypeOptions" />
+    </setting-item-box>
+    <setting-item-box name="跳转配置项" :alone="true">
+      <setting-item v-for="(item, index) in optionData.dataset" :key="index">
+        <n-input v-model:value="item.label" size="small" placeholder="按钮文字"></n-input>
+        <div style="height: 5px"></div>
+        <n-input v-model:value="item.currentButton" size="small" placeholder="当前按钮"></n-input>
+        <div style="height: 5px"></div>
+        <n-input v-model:value="item.targetButton" size="small" placeholder="目标按钮"></n-input>
+        <div style="height: 5px"></div>
+        <n-input v-model:value="item.current" size="small" placeholder="当前页面"></n-input>
+        <div style="height: 5px"></div>
+        <n-input v-model:value="item.target" size="small" placeholder="目标页面"></n-input>
+        <div style="height: 5px"></div>
+      </setting-item>
+    </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
+  }
+})
+
+const buttonTypeOptions = [
+  {
+    label: 'default',
+    value: 'default'
+  },
+  {
+    label: 'primary',
+    value: 'primary'
+  },
+  {
+    label: 'tertiary',
+    value: 'tertiary'
+  },
+  {
+    label: 'info',
+    value: 'info'
+  },
+  {
+    label: 'success',
+    value: 'success'
+  },
+  {
+    label: 'warning',
+    value: 'warning'
+  },
+  {
+    label: 'error',
+    value: 'error'
+  }
+]
+</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('Button', true)
+
+export const ButtonConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义按钮',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'inputs_tab.png'
+}

+<template>
+  <n-button
+    :style="{ width: `${w}px`, height: `${h}px` }"
+    :type="buttonType"
+    @click="onClick(option.value.dataset[0],true)"
+    >{{ option.value.dataset[0].label }}</n-button
+  >
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch, onMounted } from 'vue'
+import cloneDeep from 'lodash/cloneDeep'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartInteract } from '@/hooks/external/useButtonInteract.hook'
+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 { buttonType } = toRefs(props.chartConfig.option)
+const option = shallowReactive({
+  value: cloneDeep(props.chartConfig.option)
+})
+
+const onClick = (v: any, s: boolean) => {
+  useChartInteract(
+    props.chartConfig,
+    useChartEditStore,
+    { [ComponentInteractParamsEnum.DATA]: v?.current },
+    InteractEventOn.CHANGE,
+    v?.target,
+    s
+  )
+}
+
+onMounted(() => {
+  onClick(option.value.dataset[0], false)
+})
+
+// 手动更新
+watch(
+  () => props.chartConfig.option,
+  (newData: any) => {
+    option.value = newData
+    // onClick(newData.tabValue, true)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>

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

@@ -27,7 +27,16 @@ export const option = {
       label: '选项3',
       label: '选项3',
       value: '3'
       value: '3'
     }
     }
-  ]
+  ],
+  //自定义样式
+  tabStyleOptions: {
+    textColor: 'green',
+    textActiveColor: 'black',
+    textBackgroundColor: '#ffffff',
+    tabBarColor: 'green',
+    segmentBackgroundColor: 'grey',
+    segmentActiveColor: 'white'
+  }
 }
 }
 
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
 export default class Config extends PublicConfigClass implements CreateComponentType {

 <template>
 <template>
   <collapse-item name="标签页配置" :expanded="true">
   <collapse-item name="标签页配置" :expanded="true">
     <setting-item-box name="默认值" :alone="true">
     <setting-item-box name="默认值" :alone="true">
-      <n-select size="small" v-model:value="optionData.tabType" :options="tabTypeOptions" />
+      <n-select @change="handleSelect" size="small" v-model:value="optionData.tabType" :options="tabTypeOptions" />
+    </setting-item-box>
+    <setting-item-box name="未激活文字颜色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.tabStyleOptions.textColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.tabStyleOptions.textColor = '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.tabStyleOptions.textActiveColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.tabStyleOptions.textActiveColor = 'black'"> 恢复默认 </n-button>
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box v-if="optionData.tabType === 'bar'" name="导航条颜色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.tabStyleOptions.tabBarColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.tabStyleOptions.tabBarColor = '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.tabStyleOptions.segmentBackgroundColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.tabStyleOptions.segmentBackgroundColor = 'grey'"> 恢复默认 </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.tabStyleOptions.segmentActiveColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.tabStyleOptions.segmentActiveColor = 'white'"> 恢复默认 </n-button>
+      </SettingItem>
     </setting-item-box>
     </setting-item-box>
   </collapse-item>
   </collapse-item>
 </template>
 </template>
@@ -11,7 +71,7 @@ import { PropType } from 'vue'
 import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
 import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
 import { option } from './config'
 import { option } from './config'
 
 
-defineProps({
+const props = defineProps({
   optionData: {
   optionData: {
     type: Object as PropType<typeof option>,
     type: Object as PropType<typeof option>,
     required: true
     required: true
@@ -28,4 +88,11 @@ const tabTypeOptions = [
     value: 'segment'
     value: 'segment'
   }
   }
 ]
 ]
+
+const handleSelect = (e: string) => {
+  if (e === 'bar') {
+    props.optionData.tabStyleOptions.segmentActiveColor = ''
+    props.optionData.tabStyleOptions.segmentBackgroundColor = ''
+  }
+}
 </script>
 </script>

@@ -21,6 +21,9 @@ const props = defineProps({
 })
 })
 
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const { w, h } = toRefs(props.chartConfig.attr)
+
+const { tabStyleOptions } = toRefs(props.chartConfig.option)
+
 const option = shallowReactive({
 const option = shallowReactive({
   value: cloneDeep(props.chartConfig.option)
   value: cloneDeep(props.chartConfig.option)
 })
 })
@@ -57,3 +60,22 @@ watch(
   }
   }
 )
 )
 </script>
 </script>
+
+<style lang="scss" scoped>
+@include deep() {
+  .n-tabs-tab {
+    color: v-bind('tabStyleOptions.textColor') !important;
+    background: v-bind('tabStyleOptions.segmentBackgroundColor') !important;
+  }
+  .n-tabs-tab--active {
+    color: v-bind('tabStyleOptions.textActiveColor') !important;
+    background: v-bind('tabStyleOptions.segmentActiveColor') !important;
+  }
+  .n-tabs-bar {
+    background-color: v-bind('tabStyleOptions.tabBarColor') !important;
+  }
+  .n-tabs-tab-wrapper {
+    background-color: v-bind('tabStyleOptions.segmentBackgroundColor') !important;
+  }
+}
+</style>

@@ -9,6 +9,7 @@ import { OverrideSelectConfig } from '@/packages/components/external/Information
 import { OverrideInputsDateConfig } from '@/packages/components/external/Informations/Mores/OverrideInputsDate'
 import { OverrideInputsDateConfig } from '@/packages/components/external/Informations/Mores/OverrideInputsDate'
 import { OverrideInputsTabConfig } from '@/packages/components/external/Informations/Mores/OverrideInputsTab'
 import { OverrideInputsTabConfig } from '@/packages/components/external/Informations/Mores/OverrideInputsTab'
 import { OverrideTextCommonConfig } from '@/packages/components/external/Informations/Mores/OverrideTextCommon'
 import { OverrideTextCommonConfig } from '@/packages/components/external/Informations/Mores/OverrideTextCommon'
+import { ButtonConfig } from '@/packages/components/external/Informations/Mores/Button'
 import { OverrideBarCommonConfig } from '@/packages/components/external/Charts/Bars/OverrideBarCommon'
 import { OverrideBarCommonConfig } from '@/packages/components/external/Charts/Bars/OverrideBarCommon'
 import { OverrideLineCommonConfig } from '@/packages/components/external/Charts/Lines/OverrideLineCommon'
 import { OverrideLineCommonConfig } from '@/packages/components/external/Charts/Lines/OverrideLineCommon'
 import { OverrideLineGradientsConfig } from '@/packages/components/external/Charts/Lines/OverrideLineGradients'
 import { OverrideLineGradientsConfig } from '@/packages/components/external/Charts/Lines/OverrideLineGradients'
@@ -25,6 +26,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsDateConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsDateConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsTabConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsTabConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideTextCommonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideTextCommonConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, ButtonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideBarCommonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideBarCommonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineCommonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineCommonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineGradientsConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineGradientsConfig)