feat: 新增全局样式修改

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>

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>

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>

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 }

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>

src/views/chart/ContentDetails/components/CanvasPage/index.vue

@@ -50,16 +50,7 @@
         <n-color-picker
           style="width: 326px;"
           :showPreview="true"
-          :swatches="[
+          :swatches="swatchesColors"
-            '#232324',
-            '#2a2a2b',
-            '#313132',
-            '#373739',
-            '#757575',
-            '#e0e0e0',
-            '#eeeeee',
-            '#fafafa'
-          ]"
           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 ChartThemeColor = loadAsyncComponent(() =>
-const ChartThemSetting = loadAsyncComponent(() => import('./components/ChartThemSetting/index.vue'))
+  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>

src/views/chart/ContentDetails/components/ChartBehind/index.ts

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

src/views/chart/ContentDetails/components/ChartSetting/index.ts

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

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>