From caa403a8dce657cc5ac6298a4f1c6036e5ecb83a Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Sat, 26 Mar 2022 15:36:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20border=20=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BF=AE=E6=94=B9=EF=BC=8C=E4=BF=AE=E6=94=B9=E5=85=A8?=
 =?UTF-8?q?=E9=83=A8=E8=AE=BE=E7=BD=AE=E5=BC=95=E5=85=A5=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Charts/Bars/BarCommon/config.ts           |  1 +
 .../Charts/Bars/BarCommon/config.vue          |  7 +++--
 .../Charts/Bars/BarCrossrange/config.vue      |  7 +++--
 .../Charts/Lines/LineCommon/config.vue        |  7 +++--
 .../Charts/Pies/PieCommon/config.vue          | 12 +++++++++
 .../Decorates/Borders/borderCommon/config.ts  |  8 +++---
 .../Decorates/Borders/borderCommon/config.vue | 26 ++++++++++++-------
 .../Decorates/Borders/borderCommon/index.vue  | 13 +++++-----
 src/packages/index.d.ts                       |  3 +--
 src/settings/chartThemes/index.ts             |  5 +++-
 .../components/ChartSetting/index.vue         |  4 +--
 11 files changed, 63 insertions(+), 30 deletions(-)

diff --git a/src/packages/components/Charts/Bars/BarCommon/config.ts b/src/packages/components/Charts/Bars/BarCommon/config.ts
index 187ff852..fc544a1c 100644
--- a/src/packages/components/Charts/Bars/BarCommon/config.ts
+++ b/src/packages/components/Charts/Bars/BarCommon/config.ts
@@ -3,6 +3,7 @@ import { BarCommonConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 
 export const includes = ['legend', 'xAxis', 'yAxis']
 
diff --git a/src/packages/components/Charts/Bars/BarCommon/config.vue b/src/packages/components/Charts/Bars/BarCommon/config.vue
index 5313c97b..30a7d43c 100644
--- a/src/packages/components/Charts/Bars/BarCommon/config.vue
+++ b/src/packages/components/Charts/Bars/BarCommon/config.vue
@@ -36,20 +36,23 @@
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
+  <!-- Echarts 全局设置 --> 
+  <global-setting :optionData="optionData" :in-chart="true"></global-setting>
 </template>
 
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
 import {
+  GlobalSetting,
   CollapseItem,
   SettingItemBox,
   SettingItem
 } from '@/components/ChartItemSetting/index'
-import { option } from './config'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 
 const props = defineProps({
   optionData: {
-    type: Object as PropType<typeof option>,
+    type: Object as PropType<GlobalThemeJsonType>,
     required: true
   }
 })
diff --git a/src/packages/components/Charts/Bars/BarCrossrange/config.vue b/src/packages/components/Charts/Bars/BarCrossrange/config.vue
index 9fe6a6df..e8351a41 100644
--- a/src/packages/components/Charts/Bars/BarCrossrange/config.vue
+++ b/src/packages/components/Charts/Bars/BarCrossrange/config.vue
@@ -25,16 +25,19 @@
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
+  <!-- Echarts 全局设置 --> 
+  <global-setting :optionData="optionData" :in-chart="true"></global-setting>
 </template>
 
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
-import { CollapseItem, SettingItemBox, SettingItem } from '@/components/ChartItemSetting/index'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/ChartItemSetting/index'
 import { option } from './config'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 
 const props = defineProps({
   optionData: {
-    type: Object as PropType<typeof option>,
+    type: Object as PropType<GlobalThemeJsonType>,
     required: true
   }
 })
diff --git a/src/packages/components/Charts/Lines/LineCommon/config.vue b/src/packages/components/Charts/Lines/LineCommon/config.vue
index cecf1921..aac65820 100644
--- a/src/packages/components/Charts/Lines/LineCommon/config.vue
+++ b/src/packages/components/Charts/Lines/LineCommon/config.vue
@@ -65,21 +65,24 @@
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData" :in-chart="true"></global-setting>
 </template>
 
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
 import { lineConf } from '@/packages/chartConfiguration/echarts/index'
 import {
+  GlobalSetting,
   CollapseItem,
   SettingItemBox,
   SettingItem
 } from '@/components/ChartItemSetting/index'
-import { option } from './config'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 
 const props = defineProps({
   optionData: {
-    type: Object as PropType<typeof option>,
+    type: Object as PropType<GlobalThemeJsonType>,
     required: true
   }
 })
diff --git a/src/packages/components/Charts/Pies/PieCommon/config.vue b/src/packages/components/Charts/Pies/PieCommon/config.vue
index 44a7bc22..f2b39fe8 100644
--- a/src/packages/components/Charts/Pies/PieCommon/config.vue
+++ b/src/packages/components/Charts/Pies/PieCommon/config.vue
@@ -1,6 +1,18 @@
 <template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData" :in-chart="true"></global-setting>
 </template>
 
 <script setup lang="ts">
+import { PropType } from 'vue'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { GlobalSetting } from '@/components/ChartItemSetting/index'
 
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+console.log(props.optionData)
 </script>
diff --git a/src/packages/components/Decorates/Borders/borderCommon/config.ts b/src/packages/components/Decorates/Borders/borderCommon/config.ts
index 97afb142..6c4277de 100644
--- a/src/packages/components/Decorates/Borders/borderCommon/config.ts
+++ b/src/packages/components/Decorates/Borders/borderCommon/config.ts
@@ -3,10 +3,12 @@ import { CreateComponentType } from '@/packages/index.d'
 import {BorderCommonConfig} from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
+export const option = {
+  colors: ['#6586ec', '#2cf7fe']
+} 
+
 export default class Config extends publicConfig implements CreateComponentType {
   public key = BorderCommonConfig.key
   public chartConfig = cloneDeep(BorderCommonConfig)
-  public borderOptions = {
-    colors: ['#6586ec', '#2cf7fe']
-  }
+  public option = option
 }
diff --git a/src/packages/components/Decorates/Borders/borderCommon/config.vue b/src/packages/components/Decorates/Borders/borderCommon/config.vue
index 158b48ab..2b2b8bf9 100644
--- a/src/packages/components/Decorates/Borders/borderCommon/config.vue
+++ b/src/packages/components/Decorates/Borders/borderCommon/config.vue
@@ -1,18 +1,26 @@
 <template>
-  <CollapseItem name="颜色" :expanded="true">
-    <!-- <SettingItemBox
-      name="图形"
-      v-for="(item, index) in optionData.borderOptions.colors"
+  <CollapseItem name="边框" :expanded="true">
+    <SettingItemBox
+      :name="`颜色-${index + 1}`"
+      v-for="(item, index) in optionData.colors"
       :key="index"
     >
-      <SettingItem :name="`颜色-${index + 1}`">
+      <SettingItem name="颜色">
         <n-color-picker
           size="small"
           :modes="['hex']"
-          v-model:value="optionData.borderOptions.colors[index]"
+          v-model:value="optionData.colors[index]"
         ></n-color-picker>
       </SettingItem>
-    </SettingItemBox> -->
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.colors[index] = option.colors[index]"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
   </CollapseItem>
 </template>
 
@@ -23,11 +31,11 @@ import {
   SettingItemBox,
   SettingItem
 } from '@/components/ChartItemSetting/index'
-import Config from './config'
+import { option } from './config'
 
 const props = defineProps({
   optionData: {
-    type: Object as PropType<Config>,
+    type: Object as PropType<typeof option>,
     required: true
   }
 })
diff --git a/src/packages/components/Decorates/Borders/borderCommon/index.vue b/src/packages/components/Decorates/Borders/borderCommon/index.vue
index eb506393..06d88355 100644
--- a/src/packages/components/Decorates/Borders/borderCommon/index.vue
+++ b/src/packages/components/Decorates/Borders/borderCommon/index.vue
@@ -30,9 +30,7 @@
       <path
         fill="transparent"
         :stroke="colors[1]"
-        :d="`M ${w - 5} ${h - 30} L ${w - 5} ${h - 5} L ${
-          w - 30
-        } ${h - 5}`"
+        :d="`M ${w - 5} ${h - 30} L ${w - 5} ${h - 5} L ${w - 30} ${h - 5}`"
       />
     </svg>
 
@@ -43,18 +41,21 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs } from 'vue'
+import { PropType, toRefs, computed } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<CreateComponentType>,
     required: true
-  },
+  }
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
-const { colors } = toRefs(props.chartConfig.borderOptions)
+
+const colors = computed(() => {
+  return props.chartConfig.option?.colors
+})
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts
index d9c1c775..543fde95 100644
--- a/src/packages/index.d.ts
+++ b/src/packages/index.d.ts
@@ -36,8 +36,7 @@ export interface PublicConfigType extends requestConfig {
 export interface CreateComponentType extends PublicConfigType {
   key: string
   chartConfig: ConfigType
-  option?: GlobalThemeJsonType
-  [T: string]: any
+  option: GlobalThemeJsonType
 }
 
 // 获取组件实例类中某个key对应value类型的方法
diff --git a/src/settings/chartThemes/index.ts b/src/settings/chartThemes/index.ts
index f33aaec4..306ffef2 100644
--- a/src/settings/chartThemes/index.ts
+++ b/src/settings/chartThemes/index.ts
@@ -83,5 +83,8 @@ export const chartColorsSearch = {
 }
 
 // 默认主题详细配置
-export type GlobalThemeJsonType = typeof themeJson
+type ThemeJsonType = typeof themeJson
+export interface GlobalThemeJsonType extends Partial<ThemeJsonType> {
+  [T:string]: any
+}
 export const globalThemeJson = themeJson
diff --git a/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue b/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
index a660bb5a..bc839dc9 100644
--- a/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
@@ -10,13 +10,11 @@
     <styles-setting :chartStyles="targetData.styles"></styles-setting>
     <!-- 自定义配置项 -->
     <component :is="targetData.chartConfig.conKey" :optionData="targetData.option"></component>
-    <!-- Echarts 全局设置 --> 
-    <global-setting v-if="targetData.option" :optionData="targetData.option" :in-chart="true"></global-setting>
   </div>
 </template>
 
 <script setup lang="ts">
-import { GlobalSetting, NameSetting, PositionSetting, SizeSetting, StylesSetting } from '@/components/ChartItemSetting/index'
+import { NameSetting, PositionSetting, SizeSetting, StylesSetting } from '@/components/ChartItemSetting/index'
 import { useTargetData } from '../hooks/useTargetData.hook'
 const { targetData, chartEditStore } = useTargetData()