feat: 新增全局设置通用组件

src/components/ConfigItemCom/GlobalSetting.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="go-global-setting">
+    <CollapseItem name="标题">
+      <ConfigItemBox name="标题颜色">
+        <ConfigItem :width="200">
+          <n-color-picker
+            v-model:value="title.textStyle.color"
+          />
+        </ConfigItem>
+      </ConfigItemBox>
+      <ConfigItemBox name="副标题颜色">
+        <ConfigItem :width="200">
+          <n-color-picker
+            v-model:value="title.subtextStyle.color"
+          />
+        </ConfigItem>
+      </ConfigItemBox>
+    </CollapseItem>
+    <CollapseItem name="图例">
+      <ConfigItemBox name="图例文字颜色">
+        <ConfigItem :width="200">
+          <n-color-picker
+            v-model:value="legend.textStyle.color"
+          />
+        </ConfigItem>
+      </ConfigItemBox>
+    </CollapseItem>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toRefs, PropType } from 'vue'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import {
+  CollapseItem,
+  ConfigItemBox,
+  ConfigItem
+} from '@/components/ConfigItemCom/index'
+
+const props = defineProps({
+  data: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const { title, legend } = toRefs(props.data)
+</script>
+
+<style lang="scss" scoped>
+@include go(global-setting) {
+}
+</style>

src/components/ConfigItemCom/index.ts

@@ -3,4 +3,7 @@ import ConfigItem from './ConfigItem.vue'
 import ConfigItemBox from './ConfigItemBox.vue'
 import CollapseItem from './CollapseItem.vue'
 
-export { CollapseItem, ConfigItemBox, ConfigItem }
+// 全局配置属性通用模板
+import GlobalSetting from './GlobalSetting.vue'
+
+export { CollapseItem, ConfigItemBox, ConfigItem, GlobalSetting }

src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemSetting/index.vue

@@ -1,42 +1,11 @@
 <template>
-  <div class="go-canvas-chart-color">
+  <GlobalSetting :data="chartThemeSetting" />
-    <CollapseItem name="标题">
-      <ConfigItemBox name="标题颜色">
-        <ConfigItem :width="200">
-          <n-color-picker v-model:value="chartThemeSetting.title.textStyle.color" />
-        </ConfigItem>
-        
-      </ConfigItemBox>
-      <ConfigItemBox name="副标题颜色">
-        <ConfigItem :width="200">
-          <n-color-picker v-model:value="chartThemeSetting.title.subtextStyle.color" />
-        </ConfigItem>
-      </ConfigItemBox>
-    </CollapseItem>
-    <CollapseItem name="图例">
-      <ConfigItemBox name="图例文字颜色">
-        <ConfigItem :width="200">
-          <n-color-picker v-model:value="chartThemeSetting.legend.textStyle.color" />
-        </ConfigItem>
-      </ConfigItemBox>
-    </CollapseItem>
-  </div>
 </template>
 
 <script setup lang="ts">
-import { toRefs } from 'vue'
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
-import {
+import { GlobalSetting } from '@/components/ConfigItemCom/index'
-  CollapseItem,
-  ConfigItemBox,
-  ConfigItem
-} from '@/components/ConfigItemCom/index'
 
 const chartEditStoreStore = useChartEditStoreStore()
 const { chartThemeSetting } = chartEditStoreStore.getEditCanvasConfig
-</script>
+</script>
-
-<style lang="scss" scoped>
-@include go(canvas-chart-color) {
-}
-</style>

src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemeColor/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="go-canvas-chart-color">
+  <div class="go-chart-theme-color">
     <n-card
       v-for="(value, key) in chartColors"
       :key="key"
@@ -64,7 +64,7 @@ const selectTheme = (theme: ChartColorsNameType) => {
 </script>
 
 <style lang="scss" scoped>
-@include go(canvas-chart-color) {
+@include go(chart-theme-color) {
   padding-top: 20px;
   .card-box {
     cursor: pointer;