From 9d541d5ac3d780f478814a129fe949a3a25b3413 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Tue, 8 Feb 2022 19:39:57 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Charts/Bars/BarCommon/config.ts           |  2 +-
 .../Charts/Bars/BarCrossrange/config.ts       |  2 +-
 .../Charts/Lines/LineCommon/config.ts         |  2 +-
 .../Charts/Pies/PieCommon/config.ts           |  2 +-
 src/packages/{utils => public}/chart.ts       |  0
 src/packages/public/index.ts                  |  2 +
 .../{utils => public}/publicConfig.ts         |  0
 src/packages/utils/index.ts                   |  2 -
 src/plugins/icon.ts                           | 11 +++-
 .../components/ChartSysSetting/index.ts       |  3 ++
 .../components/ChartSysSetting/index.vue      | 15 ++++++
 .../components/ChartTheme/index.vue           | 53 +++++++++----------
 .../components/CanvasPage/index.vue           | 48 +++++++++++++++--
 src/views/chart/ContentDetails/index.vue      |  8 +--
 src/views/chart/hooks/useContextMenu.hook.ts  |  2 +-
 15 files changed, 108 insertions(+), 44 deletions(-)
 rename src/packages/{utils => public}/chart.ts (100%)
 create mode 100644 src/packages/public/index.ts
 rename src/packages/{utils => public}/publicConfig.ts (100%)
 delete mode 100644 src/packages/utils/index.ts
 create mode 100644 src/views/chart/ContentDetails/components/CanvasPage/components/ChartSysSetting/index.ts
 create mode 100644 src/views/chart/ContentDetails/components/CanvasPage/components/ChartSysSetting/index.vue

diff --git a/src/packages/components/Charts/Bars/BarCommon/config.ts b/src/packages/components/Charts/Bars/BarCommon/config.ts
index d1eec9f9..58abf30e 100644
--- a/src/packages/components/Charts/Bars/BarCommon/config.ts
+++ b/src/packages/components/Charts/Bars/BarCommon/config.ts
@@ -1,4 +1,4 @@
-import { echartOptionProfixHandle, publicConfig } from '@/packages/utils'
+import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
 import { BarCommonConfig } from './index'
 import { ConfigType, CreateComponentType } from '@/packages/index.d'
 import omit from 'lodash/omit'
diff --git a/src/packages/components/Charts/Bars/BarCrossrange/config.ts b/src/packages/components/Charts/Bars/BarCrossrange/config.ts
index b3ea2cda..317a209b 100644
--- a/src/packages/components/Charts/Bars/BarCrossrange/config.ts
+++ b/src/packages/components/Charts/Bars/BarCrossrange/config.ts
@@ -1,4 +1,4 @@
-import { echartOptionProfixHandle, publicConfig } from '@/packages/utils'
+import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
 import { BarCrossrangefig } from './index'
 import { ConfigType, CreateComponentType } from '@/packages/index.d'
 import omit from 'lodash/omit'
diff --git a/src/packages/components/Charts/Lines/LineCommon/config.ts b/src/packages/components/Charts/Lines/LineCommon/config.ts
index 430c607e..33877106 100644
--- a/src/packages/components/Charts/Lines/LineCommon/config.ts
+++ b/src/packages/components/Charts/Lines/LineCommon/config.ts
@@ -1,4 +1,4 @@
-import { echartOptionProfixHandle, publicConfig } from '@/packages/utils'
+import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
 import { LineCommonConfig } from './index'
 import { ConfigType, CreateComponentType } from '@/packages/index.d'
 import omit from 'lodash/omit'
diff --git a/src/packages/components/Charts/Pies/PieCommon/config.ts b/src/packages/components/Charts/Pies/PieCommon/config.ts
index 32dae1d4..c3edac24 100644
--- a/src/packages/components/Charts/Pies/PieCommon/config.ts
+++ b/src/packages/components/Charts/Pies/PieCommon/config.ts
@@ -1,4 +1,4 @@
-import { echartOptionProfixHandle, publicConfig } from '@/packages/utils'
+import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
 import { PieCommonConfig } from './index'
 import { ConfigType, CreateComponentType } from '@/packages/index.d'
 import omit from 'lodash/omit'
diff --git a/src/packages/utils/chart.ts b/src/packages/public/chart.ts
similarity index 100%
rename from src/packages/utils/chart.ts
rename to src/packages/public/chart.ts
diff --git a/src/packages/public/index.ts b/src/packages/public/index.ts
new file mode 100644
index 00000000..f6810cf5
--- /dev/null
+++ b/src/packages/public/index.ts
@@ -0,0 +1,2 @@
+export * from '@/packages/public/chart'
+export * from '@/packages/public/publicConfig'
diff --git a/src/packages/utils/publicConfig.ts b/src/packages/public/publicConfig.ts
similarity index 100%
rename from src/packages/utils/publicConfig.ts
rename to src/packages/public/publicConfig.ts
diff --git a/src/packages/utils/index.ts b/src/packages/utils/index.ts
deleted file mode 100644
index d32ad0d3..00000000
--- a/src/packages/utils/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from '@/packages/utils/chart'
-export * from '@/packages/utils/publicConfig'
diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts
index 51ded250..e9add1eb 100644
--- a/src/plugins/icon.ts
+++ b/src/plugins/icon.ts
@@ -43,7 +43,8 @@ import {
   ClipboardOutline as ClipboardOutlineIcon,
   BrowsersOutline as BrowsersOutlineIcon,
   Cut as CutIcon,
-  Square as SquareIcon
+  Square as SquareIcon,
+  ColorPalette as ColorPaletteIcon,
 } from '@vicons/ionicons5'
 
 import {
@@ -59,6 +60,7 @@ import {
   DownToBottom as DownToBottomIcon,
   StackedMove as StackedMoveIcon,
   PaintBrush as PaintBrushIcon,
+  ComposerEdit as ZAxisIcon,
 } from '@vicons/carbon'
 
 const ionicons5 = {
@@ -150,7 +152,10 @@ const ionicons5 = {
   // 剪贴
   CutIcon,
   // 正方形
-  SquareIcon
+  SquareIcon,
+  // 色彩选择
+  ColorPaletteIcon,
+  ZAxisIcon
 }
 
 const carbon = {
@@ -178,6 +183,8 @@ const carbon = {
   StackedMoveIcon,
   // 清空剪切板（刷子）
   PaintBrushIcon,
+  // 坐标轴
+  ZAxisIcon
 }
 
 // https://www.xicons.org/#/ 还有很多
diff --git a/src/views/chart/ContentDetails/components/CanvasPage/components/ChartSysSetting/index.ts b/src/views/chart/ContentDetails/components/CanvasPage/components/ChartSysSetting/index.ts
new file mode 100644
index 00000000..2c3c996e
--- /dev/null
+++ b/src/views/chart/ContentDetails/components/CanvasPage/components/ChartSysSetting/index.ts
@@ -0,0 +1,3 @@
+import ChartSysSetting from './index.vue'
+
+export { ChartSysSetting }
diff --git a/src/views/chart/ContentDetails/components/CanvasPage/components/ChartSysSetting/index.vue b/src/views/chart/ContentDetails/components/CanvasPage/components/ChartSysSetting/index.vue
new file mode 100644
index 00000000..1330d6df
--- /dev/null
+++ b/src/views/chart/ContentDetails/components/CanvasPage/components/ChartSysSetting/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="go-canvas-chart-color">
+    图表全局设置
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+@include go(canvas-chart-color) {
+
+}
+</style>
diff --git a/src/views/chart/ContentDetails/components/CanvasPage/components/ChartTheme/index.vue b/src/views/chart/ContentDetails/components/CanvasPage/components/ChartTheme/index.vue
index d02d1c1d..be282e08 100644
--- a/src/views/chart/ContentDetails/components/CanvasPage/components/ChartTheme/index.vue
+++ b/src/views/chart/ContentDetails/components/CanvasPage/components/ChartTheme/index.vue
@@ -1,33 +1,29 @@
 <template>
   <div class="go-canvas-chart-color">
-    <n-collapse :default-expanded-names="['1']">
-      <n-collapse-item title="主题选择" name="1">
-        <n-card
-          v-for="(value, key) in chartColors"
-          :key="key"
-          class="card-box"
-          :class="{ selected: key === selectName }"
-          size="small"
-          hoverable
-          embedded
-          @click="selectTheme(key)"
-        >
-          <div class="go-flex-items-center">
-            <n-text>{{ chartColorsName[key] }}</n-text>
-            <span
-              class="theme-color-item"
-              v-for="colorItem in fetchShowColors(value.color)"
-              :key="colorItem"
-              :style="{ backgroundColor: colorItem }"
-            />
-          </div>
-          <div
-            class="theme-bottom"
-            :style="{ backgroundImage: chartColorsshow[key] }"
-          ></div>
-        </n-card>
-      </n-collapse-item>
-    </n-collapse>
+    <n-card
+      v-for="(value, key) in chartColors"
+      :key="key"
+      class="card-box"
+      :class="{ selected: key === selectName }"
+      size="small"
+      hoverable
+      embedded
+      @click="selectTheme(key)"
+    >
+      <div class="go-flex-items-center">
+        <n-text>{{ chartColorsName[key] }}</n-text>
+        <span
+          class="theme-color-item"
+          v-for="colorItem in fetchShowColors(value.color)"
+          :key="colorItem"
+          :style="{ backgroundColor: colorItem }"
+        />
+      </div>
+      <div
+        class="theme-bottom"
+        :style="{ backgroundImage: chartColorsshow[key] }"
+      ></div>
+    </n-card>
   </div>
 </template>
 
@@ -67,6 +63,7 @@ const selectTheme = (theme: string) => {
 
 <style lang="scss" scoped>
 @include go(canvas-chart-color) {
+  padding-top: 20px;
   .card-box {
     cursor: pointer;
     margin-top: 15px;
diff --git a/src/views/chart/ContentDetails/components/CanvasPage/index.vue b/src/views/chart/ContentDetails/components/CanvasPage/index.vue
index 2d6076f2..3a6c51e8 100644
--- a/src/views/chart/ContentDetails/components/CanvasPage/index.vue
+++ b/src/views/chart/ContentDetails/components/CanvasPage/index.vue
@@ -94,8 +94,26 @@
 
     <n-divider />
 
-    <!-- 主题选择 -->
-    <ChartTheme />
+    <!-- 主题选择和全局配置 -->
+    <n-tabs v-show="!selectTarget" class="tabs-box" size="small" type="segment">
+      <n-tab-pane
+        v-for="item in globalTabList"
+        :key="item.key"
+        :name="item.key"
+        size="small"
+        display-directive="show:lazy"
+      >
+        <template #tab>
+          <n-space>
+            <span>{{ item.title }}</span>
+            <n-icon size="16" class="icon-position">
+              <component :is="item.icon"></component>
+            </n-icon>
+          </n-space>
+        </template>
+        <component :is="item.render"></component>
+      </n-tab-pane>
+    </n-tabs>
   </div>
 </template>
 
@@ -103,9 +121,14 @@
 import { ref, nextTick, onMounted } from 'vue'
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { UploadCustomRequestOptions, UploadFileInfo } from 'naive-ui'
+import { UploadCustomRequestOptions } from 'naive-ui'
 import { ChartTheme } from './components/ChartTheme/index'
+import { ChartSysSetting } from './components/ChartSysSetting/index'
 import { fileTobase64 } from '@/utils'
+import { icon } from '@/plugins'
+
+const { ColorPaletteIcon } = icon.ionicons5
+const { ZAxisIcon } = icon.carbon
 
 const chartEditStoreStore = useChartEditStoreStore()
 const canvasConfig = chartEditStoreStore.getEditCanvasConfig
@@ -113,6 +136,22 @@ const canvasConfig = chartEditStoreStore.getEditCanvasConfig
 const uploadFileListRef = ref()
 const switchSelectColorLoading = ref(false)
 
+// 页面设置
+const globalTabList = [
+  {
+    key: 'ChartTheme',
+    title: '主题',
+    icon: ColorPaletteIcon,
+    render: ChartTheme
+  },
+  {
+    key: 'ChartSysSetting',
+    title: '轴线',
+    icon: ZAxisIcon,
+    render: ChartSysSetting
+  },
+]
+
 // 规则
 const validator = (x: number) => x > 50
 
@@ -214,5 +253,8 @@ const customRequest = (options: UploadCustomRequestOptions) => {
       }
     }
   }
+  .icon-position {
+    padding-top: 2px;
+  }
 }
 </style>
diff --git a/src/views/chart/ContentDetails/index.vue b/src/views/chart/ContentDetails/index.vue
index 1c46f31c..e82d9945 100644
--- a/src/views/chart/ContentDetails/index.vue
+++ b/src/views/chart/ContentDetails/index.vue
@@ -124,16 +124,16 @@ watch(getDetails, newData => {
 })
 
 // 页面设置
-const globalTabList = reactive([
+const globalTabList = [
   {
     key: 'pageSetting',
     title: '页面配置',
     icon: DesktopOutlineIcon,
     render: CanvasPage
   }
-])
+]
 
-const canvasTabList = shallowRef([
+const canvasTabList = [
   {
     key: 'ChartSetting',
     title: '定制',
@@ -146,7 +146,7 @@ const canvasTabList = shallowRef([
     icon: FlashIcon,
     render: ChartBehind
   }
-])
+]
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/chart/hooks/useContextMenu.hook.ts b/src/views/chart/hooks/useContextMenu.hook.ts
index 94464b72..6934bb35 100644
--- a/src/views/chart/hooks/useContextMenu.hook.ts
+++ b/src/views/chart/hooks/useContextMenu.hook.ts
@@ -132,7 +132,7 @@ const handleContextMenu = (e: MouseEvent, item: CreateComponentType) => {
  * @param menuConfig
  * @returns
  */
-export const useContextMenu = (menuConfig: {
+export const useContextMenu = (menuConfig?: {
   // 自定义右键配置
   selfOptions?: MenuOptionsItemType[]
   // 前置处理函数