fix: 修改全局配置展示

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'

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'

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'

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'

src/packages/public/index.ts

@@ -0,0 +1,2 @@
+export * from '@/packages/public/chart'
+export * from '@/packages/public/publicConfig'

src/packages/utils/index.ts

@@ -1,2 +0,0 @@
-export * from '@/packages/utils/chart'
-export * from '@/packages/utils/publicConfig'

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/#/ 还有很多

src/views/chart/ContentDetails/components/CanvasPage/components/ChartSysSetting/index.ts

@@ -0,0 +1,3 @@
+import ChartSysSetting from './index.vue'
+
+export { ChartSysSetting }

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>

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-card
-      <n-collapse-item title="主题选择" name="1">
+      v-for="(value, key) in chartColors"
-        <n-card
+      :key="key"
-          v-for="(value, key) in chartColors"
+      class="card-box"
-          :key="key"
+      :class="{ selected: key === selectName }"
-          class="card-box"
+      size="small"
-          :class="{ selected: key === selectName }"
+      hoverable
-          size="small"
+      embedded
-          hoverable
+      @click="selectTheme(key)"
-          embedded
+    >
-          @click="selectTheme(key)"
+      <div class="go-flex-items-center">
-        >
+        <n-text>{{ chartColorsName[key] }}</n-text>
-          <div class="go-flex-items-center">
+        <span
-            <n-text>{{ chartColorsName[key] }}</n-text>
+          class="theme-color-item"
-            <span
+          v-for="colorItem in fetchShowColors(value.color)"
-              class="theme-color-item"
+          :key="colorItem"
-              v-for="colorItem in fetchShowColors(value.color)"
+          :style="{ backgroundColor: colorItem }"
-              :key="colorItem"
+        />
-              :style="{ backgroundColor: colorItem }"
+      </div>
-            />
+      <div
-          </div>
+        class="theme-bottom"
-          <div
+        :style="{ backgroundImage: chartColorsshow[key] }"
-            class="theme-bottom"
+      ></div>
-            :style="{ backgroundImage: chartColorsshow[key] }"
+    </n-card>
-          ></div>
-        </n-card>
-      </n-collapse-item>
-    </n-collapse>
   </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;

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>

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>

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[]
   // 前置处理函数