From c071cb5a4905e2cb28d3306e4a26d4a4ff248427 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Tue, 22 Feb 2022 15:50:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E9=80=9A=E7=94=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ConfigItemCom/GlobalSetting.vue           | 53 +++++++++++++++++++
 src/components/ConfigItemCom/index.ts         |  5 +-
 .../components/ChartThemSetting/index.vue     | 37 ++-----------
 .../components/ChartThemeColor/index.vue      |  4 +-
 4 files changed, 62 insertions(+), 37 deletions(-)
 create mode 100644 src/components/ConfigItemCom/GlobalSetting.vue

diff --git a/src/components/ConfigItemCom/GlobalSetting.vue b/src/components/ConfigItemCom/GlobalSetting.vue
new file mode 100644
index 00000000..4013c208
--- /dev/null
+++ b/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>
diff --git a/src/components/ConfigItemCom/index.ts b/src/components/ConfigItemCom/index.ts
index 7484e1e1..ec9aab93 100644
--- a/src/components/ConfigItemCom/index.ts
+++ b/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 }
diff --git a/src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemSetting/index.vue b/src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemSetting/index.vue
index f65c762f..fe9bf8e2 100644
--- a/src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemSetting/index.vue
+++ b/src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemSetting/index.vue
@@ -1,42 +1,11 @@
 <template>
-  <div class="go-canvas-chart-color">
-    <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>
+  <GlobalSetting :data="chartThemeSetting" />
 </template>
 
 <script setup lang="ts">
-import { toRefs } from 'vue'
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
-import {
-  CollapseItem,
-  ConfigItemBox,
-  ConfigItem
-} from '@/components/ConfigItemCom/index'
+import { GlobalSetting } from '@/components/ConfigItemCom/index'
 
 const chartEditStoreStore = useChartEditStoreStore()
 const { chartThemeSetting } = chartEditStoreStore.getEditCanvasConfig
-</script>
-
-<style lang="scss" scoped>
-@include go(canvas-chart-color) {
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemeColor/index.vue b/src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemeColor/index.vue
index ddd6f01f..1742a382 100644
--- a/src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemeColor/index.vue
+++ b/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;