feat(packages/external): 自定义标签选择器

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

 <template>
   <collapse-item name="标签页配置" :expanded="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>
   </collapse-item>
 </template>
@@ -11,7 +71,7 @@ import { PropType } from 'vue'
 import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
 import { option } from './config'
 
-defineProps({
+const props = defineProps({
   optionData: {
     type: Object as PropType<typeof option>,
     required: true
@@ -28,4 +88,11 @@ const tabTypeOptions = [
     value: 'segment'
   }
 ]
+
+const handleSelect = (e: string) => {
+  if (e === 'bar') {
+    props.optionData.tabStyleOptions.segmentActiveColor = ''
+    props.optionData.tabStyleOptions.segmentBackgroundColor = ''
+  }
+}
 </script>

@@ -21,6 +21,9 @@ const props = defineProps({
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
+
+const { tabStyleOptions } = toRefs(props.chartConfig.option)
+
 const option = shallowReactive({
   value: cloneDeep(props.chartConfig.option)
 })
@@ -57,3 +60,22 @@ watch(
   }
 )
 </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>