From bc8b0a5226b619d96a264a9a309bad1441edeed3 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Tue, 22 Feb 2022 15:32:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ConfigItemCom/CollapseItem.vue | 22 ++++++++++
 src/components/ConfigItemCom/ConfigItem.vue   | 26 ++++++++++++
 .../ConfigItemCom/ConfigItemBox.vue           | 33 +++++++++++++++
 src/components/ConfigItemCom/index.ts         |  6 +++
 .../components/ChartThemSetting/index.vue     | 31 +++++++++++++-
 .../components/CanvasPage/index.vue           | 40 ++++++++++++-------
 .../components/ChartBehind/index.ts           |  3 --
 .../{ChartBehind => ChartData}/index.vue      |  0
 .../components/ChartSetting/index.ts          |  3 --
 src/views/chart/ContentDetails/index.vue      |  6 +--
 10 files changed, 144 insertions(+), 26 deletions(-)
 create mode 100644 src/components/ConfigItemCom/CollapseItem.vue
 create mode 100644 src/components/ConfigItemCom/ConfigItem.vue
 create mode 100644 src/components/ConfigItemCom/ConfigItemBox.vue
 create mode 100644 src/components/ConfigItemCom/index.ts
 delete mode 100644 src/views/chart/ContentDetails/components/ChartBehind/index.ts
 rename src/views/chart/ContentDetails/components/{ChartBehind => ChartData}/index.vue (100%)
 delete mode 100644 src/views/chart/ContentDetails/components/ChartSetting/index.ts

diff --git a/src/components/ConfigItemCom/CollapseItem.vue b/src/components/ConfigItemCom/CollapseItem.vue
new file mode 100644
index 00000000..08036b4d
--- /dev/null
+++ b/src/components/ConfigItemCom/CollapseItem.vue
@@ -0,0 +1,22 @@
+<template>
+  <n-divider />
+  <n-collapse arrow-placement="right" default-expanded-names="1">
+    <!-- 右侧 -->
+    <template #header-extra>
+      <slot name="header" />
+    </template>
+
+    <n-collapse-item :title="name" name="1">
+      <slot />
+    </n-collapse-item>
+  </n-collapse>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  name: {
+    type: String,
+    required: true
+  }
+})
+</script>
diff --git a/src/components/ConfigItemCom/ConfigItem.vue b/src/components/ConfigItemCom/ConfigItem.vue
new file mode 100644
index 00000000..b5c44b72
--- /dev/null
+++ b/src/components/ConfigItemCom/ConfigItem.vue
@@ -0,0 +1,26 @@
+<template>
+  <div
+    v-if="type === 'number'"
+    :style="{ width: width ? width + 'px' : '100%' }"
+  >
+    <slot />
+  </div>
+  <div v-else :style="{ width: `${width}px` }">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  width: {
+    type: Number,
+    required: false
+  },
+  type: {
+    type: String,
+    required: false
+  }
+})
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/ConfigItemCom/ConfigItemBox.vue b/src/components/ConfigItemCom/ConfigItemBox.vue
new file mode 100644
index 00000000..4a3acfa0
--- /dev/null
+++ b/src/components/ConfigItemCom/ConfigItemBox.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="go-config-item-box go-flex-items-center">
+    <n-text class="item-left">{{ name }}</n-text>
+    <n-space class="item-right" justify="space-between">
+      <slot />
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  name: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+$leftWidth: 100px;
+@include go('config-item-box') {
+  position: relative;
+  justify-content: flex-start;
+  .item-left {
+    width: $leftWidth;
+    text-align: left;
+    margin-left: 10px;
+  }
+  .item-right {
+    margin-left: 10px;
+  }
+}
+</style>
diff --git a/src/components/ConfigItemCom/index.ts b/src/components/ConfigItemCom/index.ts
new file mode 100644
index 00000000..7484e1e1
--- /dev/null
+++ b/src/components/ConfigItemCom/index.ts
@@ -0,0 +1,6 @@
+// 设置项布局
+import ConfigItem from './ConfigItem.vue'
+import ConfigItemBox from './ConfigItemBox.vue'
+import CollapseItem from './CollapseItem.vue'
+
+export { CollapseItem, ConfigItemBox, ConfigItem }
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 1330d6df..f65c762f 100644
--- a/src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemSetting/index.vue
+++ b/src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemSetting/index.vue
@@ -1,15 +1,42 @@
 <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>
 </template>
 
 <script setup lang="ts">
+import { toRefs } from 'vue'
+import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import {
+  CollapseItem,
+  ConfigItemBox,
+  ConfigItem
+} from '@/components/ConfigItemCom/index'
 
+const chartEditStoreStore = useChartEditStoreStore()
+const { chartThemeSetting } = chartEditStoreStore.getEditCanvasConfig
 </script>
 
 <style lang="scss" scoped>
 @include go(canvas-chart-color) {
-
 }
 </style>
diff --git a/src/views/chart/ContentDetails/components/CanvasPage/index.vue b/src/views/chart/ContentDetails/components/CanvasPage/index.vue
index 83282ad3..40077fe0 100644
--- a/src/views/chart/ContentDetails/components/CanvasPage/index.vue
+++ b/src/views/chart/ContentDetails/components/CanvasPage/index.vue
@@ -50,16 +50,7 @@
         <n-color-picker
           style="width: 326px;"
           :showPreview="true"
-          :swatches="[
-            '#232324',
-            '#2a2a2b',
-            '#313132',
-            '#373739',
-            '#757575',
-            '#e0e0e0',
-            '#eeeeee',
-            '#fafafa'
-          ]"
+          :swatches="swatchesColors"
           v-model:value="canvasConfig.background"
         />
       </n-space>
@@ -93,8 +84,6 @@
       </n-space>
     </n-space>
 
-    <n-divider />
-
     <!-- 主题选择和全局配置 -->
     <n-tabs class="tabs-box" size="small" type="segment">
       <n-tab-pane
@@ -136,10 +125,25 @@ const canvasConfig = chartEditStoreStore.getEditCanvasConfig
 const uploadFileListRef = ref()
 const switchSelectColorLoading = ref(false)
 
-const ChartThemeColor = loadAsyncComponent(() => import('./components/ChartThemeColor/index.vue'))
-const ChartThemSetting = loadAsyncComponent(() => import('./components/ChartThemSetting/index.vue'))
+const ChartThemeColor = loadAsyncComponent(() =>
+  import('./components/ChartThemeColor/index.vue')
+)
+const ChartThemSetting = loadAsyncComponent(() =>
+  import('./components/ChartThemSetting/index.vue')
+)
 
 // 页面设置
+const swatchesColors = [
+  '#232324',
+  '#2a2a2b',
+  '#313132',
+  '#373739',
+  '#757575',
+  '#e0e0e0',
+  '#eeeeee',
+  '#fafafa'
+]
+
 const globalTabList = [
   {
     key: 'ChartTheme',
@@ -184,7 +188,10 @@ const clearImage = () => {
     EditCanvasConfigEnum.BACKGROUND_IAMGE,
     undefined
   )
-  chartEditStoreStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, true)
+  chartEditStoreStore.setEditCanvasConfig(
+    EditCanvasConfigEnum.SELECT_COLOR,
+    true
+  )
 }
 
 // 清除颜色
@@ -278,5 +285,8 @@ $updloadHeight: 193px;
   .icon-position {
     padding-top: 2px;
   }
+  .tabs-box {
+    margin-top: 30px;
+  }
 }
 </style>
diff --git a/src/views/chart/ContentDetails/components/ChartBehind/index.ts b/src/views/chart/ContentDetails/components/ChartBehind/index.ts
deleted file mode 100644
index 45dcf4d8..00000000
--- a/src/views/chart/ContentDetails/components/ChartBehind/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Behind from './index.vue'
-
-export { Behind }
diff --git a/src/views/chart/ContentDetails/components/ChartBehind/index.vue b/src/views/chart/ContentDetails/components/ChartData/index.vue
similarity index 100%
rename from src/views/chart/ContentDetails/components/ChartBehind/index.vue
rename to src/views/chart/ContentDetails/components/ChartData/index.vue
diff --git a/src/views/chart/ContentDetails/components/ChartSetting/index.ts b/src/views/chart/ContentDetails/components/ChartSetting/index.ts
deleted file mode 100644
index d18bd673..00000000
--- a/src/views/chart/ContentDetails/components/ChartSetting/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import ChartSetting from './index.vue'
-
-export { ChartSetting }
diff --git a/src/views/chart/ContentDetails/index.vue b/src/views/chart/ContentDetails/index.vue
index 3bf7d02d..c3870d9b 100644
--- a/src/views/chart/ContentDetails/index.vue
+++ b/src/views/chart/ContentDetails/index.vue
@@ -93,7 +93,7 @@ const { ConstructIcon, FlashIcon, DesktopOutlineIcon } = icon.ionicons5
 const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'))
 const CanvasPage = loadAsyncComponent(() =>import('./components/CanvasPage/index.vue'))
 const ChartSetting = loadAsyncComponent(() =>import('./components/ChartSetting/index.vue'))
-const ChartBehind = loadAsyncComponent(() => import('./components/ChartBehind/index.vue'))
+const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue'))
 
 const collapsed = ref<boolean>(getDetails.value)
 
@@ -141,10 +141,10 @@ const canvasTabList = [
     render: ChartSetting
   },
   {
-    key: 'ChartBehind',
+    key: 'ChartData',
     title: '数据',
     icon: FlashIcon,
-    render: ChartBehind
+    render: ChartData
   }
 ]
 </script>