feat: 新增全局样式设置

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

@@ -34,7 +34,8 @@ import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditSt
 import {
   chartColors,
   chartColorsName,
-  chartColorsshow
+  chartColorsshow,
+  ChartColorsNameType
 } from '@/settings/chartThemes/index'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import cloneDeep from 'lodash/cloneDeep'
@@ -48,7 +49,7 @@ const designStore = useDesignStore()
 const themeColor = ref(designStore.getAppTheme)
 
 const selectName = computed(() => {
-  return chartEditStoreStore.getEditCanvasConfig.chartTheme
+  return chartEditStoreStore.getEditCanvasConfig.chartThemeColor
 })
 
 // 获取用来展示的色号
@@ -56,8 +57,9 @@ const fetchShowColors = (colors: Array<string>) => {
   return cloneDeep(colors).splice(0, 6)
 }
 
-const selectTheme = (theme: string) => {
-  chartEditStoreStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME, theme)
+// 设置主体色（在 ContentEdit > List 中进行注入）
+const selectTheme = (theme: ChartColorsNameType) => {
+  chartEditStoreStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR, theme)
 }
 </script>
 

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

@@ -142,7 +142,7 @@ const switchSelectColorLoading = ref(false)
 const globalTabList = [
   {
     key: 'ChartTheme',
-    title: '主题',
+    title: '主题颜色',
     icon: ColorPaletteIcon,
     render: ChartTheme
   },

src/views/chart/ContentEdit/index.vue

@@ -30,7 +30,8 @@
             class="edit-content-chart"
             :is="item.key"
             :chartData="item"
-            :themeData="themeData"
+            :themeSetting="themeSetting"
+            :themeColor="themeColor"
             :style="useSizeStyle(item.attr)"
           />
         </EditShapeBox>
@@ -69,12 +70,16 @@ useLayout()
 const editRangeRef = ref<HTMLElement | null>(null)
 const { mouseenterHandle, mouseleaveHandle, mousedownHandle } = useMouseHandle()
 
-// 主题色注入
-const themeData = computed(() => {
-  const theme = chartEditStore.getEditCanvasConfig.chartTheme
-  if(theme === 'dark') return 'dark'
-  //  @ts-ignore
-  return chartColors[theme]
+// 主题色
+const themeSetting = computed(() => {
+  const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
+  return chartThemeSetting
+})
+
+// 配置项
+const themeColor = computed(() => {
+  const chartThemeColor = chartEditStore.getEditCanvasConfig.chartThemeColor
+  return chartColors[chartThemeColor]
 })
 
 // 键盘事件