From 87386e69a3429845c5049424af74555074abf561 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Sun, 26 Feb 2023 18:36:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=B9=E6=8E=A5=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E5=92=8C=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Charts/Lines/LineCommon/config.ts         |  1 -
 src/settings/chartThemes/index.ts             | 24 ++++-------
 src/settings/chartThemes/themes/chalk.json    |  3 +-
 src/settings/chartThemes/themes/customed.json |  3 +-
 src/settings/chartThemes/themes/dark.json     |  3 +-
 src/settings/chartThemes/themes/essos.json    |  3 +-
 src/settings/chartThemes/themes/macarons.json |  3 +-
 .../chartThemes/themes/purple-passion.json    |  3 +-
 src/settings/chartThemes/themes/roma.json     |  3 +-
 src/settings/chartThemes/themes/shine.json    |  3 +-
 src/settings/chartThemes/themes/vintage.json  |  3 +-
 src/settings/chartThemes/themes/walden.json   |  3 +-
 src/settings/chartThemes/themes/westeros.json |  3 +-
 .../chartThemes/themes/wonderland.json        |  3 +-
 .../chartEditStore/chartEditStore.d.ts        |  6 ++-
 .../modules/chartEditStore/chartEditStore.ts  |  2 +
 src/utils/style.ts                            | 26 ++++++++++-
 .../components/ChartThemeColor/index.vue      | 28 ++++++++----
 .../components/CreateColor/index.vue          | 43 ++++++++++++++++---
 .../components/CreateColorRender/index.vue    |  5 ++-
 .../CreateColorRenderChart/index.vue          |  4 +-
 .../components/EditGroup/index.vue            |  6 +--
 src/views/chart/ContentEdit/index.vue         |  6 +--
 23 files changed, 132 insertions(+), 55 deletions(-)

diff --git a/src/packages/components/Charts/Lines/LineCommon/config.ts b/src/packages/components/Charts/Lines/LineCommon/config.ts
index 917a5064..c6c07610 100644
--- a/src/packages/components/Charts/Lines/LineCommon/config.ts
+++ b/src/packages/components/Charts/Lines/LineCommon/config.ts
@@ -1,7 +1,6 @@
 import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
 import { LineCommonConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
-import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 
diff --git a/src/settings/chartThemes/index.ts b/src/settings/chartThemes/index.ts
index 7a205c1c..75e79e5c 100644
--- a/src/settings/chartThemes/index.ts
+++ b/src/settings/chartThemes/index.ts
@@ -34,23 +34,17 @@ export const defaultTheme = 'dark'
 // 默认展示的选择器颜色列表
 export const swatchesColors = ['#232324', '#2a2a2b', '#313132', '#373739', '#757575', '#e0e0e0', '#eeeeee', '#fafafa']
 
-// 主题色列表
-export type ChartColorsNameType = keyof typeof chartColorsName
-export const chartColorsName = {
-  dark: '明亮',
-  customed: '暗淡',
-  macarons: '马卡龙',
-  walden: '蓝绿',
-  purplePassion: '深紫',
-  vintage: '复古',
-  chalk: '粉青',
-  westeros: '灰粉',
-  wonderland: '青草',
-  essos: '橘红',
-  shine: '深色',
-  roma: '罗马红'
+// 自定义颜色
+export type CustomColorsType = {
+  id: string,
+  name: string,
+  color: string[]
 }
 
+// 主题色列表, 自定义的颜色使用的是 UUID 作为标识，因为两者数据结构不一致
+export type ChartColorsNameType = keyof typeof chartColors
+
+
 // 渐变主题色列表（主色1、主色2、阴影、渐变1、渐变2）
 export const chartColorsSearch = {
   dark: ['#4992ff', '#7cffb2', 'rgba(68, 181, 226, 0.3)', 'rgba(73, 146, 255, 0.5)', 'rgba(124, 255, 178, 0.5)'],
diff --git a/src/settings/chartThemes/themes/chalk.json b/src/settings/chartThemes/themes/chalk.json
index 09ac9268..62f4b9ea 100644
--- a/src/settings/chartThemes/themes/chalk.json
+++ b/src/settings/chartThemes/themes/chalk.json
@@ -8,5 +8,6 @@
     "#d4a4eb",
     "#d2f5a6",
     "#76f2f2"
-  ]
+  ],
+  "name": "粉青"
 }
\ No newline at end of file
diff --git a/src/settings/chartThemes/themes/customed.json b/src/settings/chartThemes/themes/customed.json
index d29733a6..2a0ffa2c 100644
--- a/src/settings/chartThemes/themes/customed.json
+++ b/src/settings/chartThemes/themes/customed.json
@@ -9,5 +9,6 @@
     "#fc8452",
     "#9a60b4",
     "#ea7ccc"
-  ]
+  ],
+  "name": "暗淡"
 }
\ No newline at end of file
diff --git a/src/settings/chartThemes/themes/dark.json b/src/settings/chartThemes/themes/dark.json
index 59126d9b..887a6469 100644
--- a/src/settings/chartThemes/themes/dark.json
+++ b/src/settings/chartThemes/themes/dark.json
@@ -9,5 +9,6 @@
     "#ff8a45",
     "#8d48e3",
     "#dd79ff"
-  ]
+  ],
+  "name": "明亮"
 }
\ No newline at end of file
diff --git a/src/settings/chartThemes/themes/essos.json b/src/settings/chartThemes/themes/essos.json
index 18823d46..27d57201 100644
--- a/src/settings/chartThemes/themes/essos.json
+++ b/src/settings/chartThemes/themes/essos.json
@@ -6,5 +6,6 @@
     "#ffb248",
     "#f2d643",
     "#ebdba4"
-  ]
+  ],
+  "name": "橘红"
 }
\ No newline at end of file
diff --git a/src/settings/chartThemes/themes/macarons.json b/src/settings/chartThemes/themes/macarons.json
index a800789a..14a4aa0f 100644
--- a/src/settings/chartThemes/themes/macarons.json
+++ b/src/settings/chartThemes/themes/macarons.json
@@ -20,5 +20,6 @@
     "#7eb00a",
     "#6f5553",
     "#c14089"
-  ]
+  ],
+  "name": "马卡龙"
 }
\ No newline at end of file
diff --git a/src/settings/chartThemes/themes/purple-passion.json b/src/settings/chartThemes/themes/purple-passion.json
index d96e4104..91550499 100644
--- a/src/settings/chartThemes/themes/purple-passion.json
+++ b/src/settings/chartThemes/themes/purple-passion.json
@@ -6,5 +6,6 @@
     "#71669e",
     "#cc70af",
     "#7cb4cc"
-  ]
+  ],
+  "name": "深紫"
 }
\ No newline at end of file
diff --git a/src/settings/chartThemes/themes/roma.json b/src/settings/chartThemes/themes/roma.json
index 2b527f53..be5af4df 100644
--- a/src/settings/chartThemes/themes/roma.json
+++ b/src/settings/chartThemes/themes/roma.json
@@ -20,5 +20,6 @@
     "#3cb371",
     "#d5b158",
     "#38b6b6"
-  ]
+  ],
+  "name": "罗马红"
 }
\ No newline at end of file
diff --git a/src/settings/chartThemes/themes/shine.json b/src/settings/chartThemes/themes/shine.json
index 4c4e0f88..1b2d8529 100644
--- a/src/settings/chartThemes/themes/shine.json
+++ b/src/settings/chartThemes/themes/shine.json
@@ -8,5 +8,6 @@
     "#339ca8",
     "#cda819",
     "#32a487"
-  ]
+  ],
+  "name": "深色"
 }
\ No newline at end of file
diff --git a/src/settings/chartThemes/themes/vintage.json b/src/settings/chartThemes/themes/vintage.json
index 28190dd7..72957825 100644
--- a/src/settings/chartThemes/themes/vintage.json
+++ b/src/settings/chartThemes/themes/vintage.json
@@ -10,5 +10,6 @@
     "#cc7e63",
     "#724e58",
     "#4b565b"
-  ]
+  ],
+  "name": "复古"
 }
\ No newline at end of file
diff --git a/src/settings/chartThemes/themes/walden.json b/src/settings/chartThemes/themes/walden.json
index 2cf15ab9..37127fba 100644
--- a/src/settings/chartThemes/themes/walden.json
+++ b/src/settings/chartThemes/themes/walden.json
@@ -6,5 +6,6 @@
     "#a0a7e6",
     "#c4ebad",
     "#96dee8"
-  ]
+  ],
+  "name": "蓝绿"
 }
\ No newline at end of file
diff --git a/src/settings/chartThemes/themes/westeros.json b/src/settings/chartThemes/themes/westeros.json
index 257891de..6dc5d0b6 100644
--- a/src/settings/chartThemes/themes/westeros.json
+++ b/src/settings/chartThemes/themes/westeros.json
@@ -6,5 +6,6 @@
     "#93b7e3",
     "#a5e7f0",
     "#cbb0e3"
-  ]
+  ],
+  "name": "灰粉"
 }
\ No newline at end of file
diff --git a/src/settings/chartThemes/themes/wonderland.json b/src/settings/chartThemes/themes/wonderland.json
index 06c33113..c3739021 100644
--- a/src/settings/chartThemes/themes/wonderland.json
+++ b/src/settings/chartThemes/themes/wonderland.json
@@ -6,5 +6,6 @@
     "#d0648a",
     "#f58db2",
     "#f2b3c9"
-  ]
+  ],
+  "name": "青草"
 }
\ No newline at end of file
diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts
index 0084f673..f06bccbc 100644
--- a/src/store/modules/chartEditStore/chartEditStore.d.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.d.ts
@@ -10,7 +10,7 @@ import {
   RequestParamsObjType
 } from '@/enums/httpEnum'
 import { PreviewScaleEnum } from '@/enums/styleEnum'
-import type { ChartColorsNameType, GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import type { ChartColorsNameType, CustomColorsType, GlobalThemeJsonType } from '@/settings/chartThemes/index'
 
 // 编辑画布属性
 export enum EditCanvasTypeEnum {
@@ -52,6 +52,7 @@ export enum EditCanvasConfigEnum {
   WIDTH = 'width',
   HEIGHT = 'height',
   CHART_THEME_COLOR = 'chartThemeColor',
+  CHART_CUSTOM_THEME_COLOR_INFO = 'chartCustomThemeColorInfo',
   CHART_THEME_SETTING = 'chartThemeSetting',
   BACKGROUND = 'background',
   BACKGROUND_IMAGE = 'backgroundImage',
@@ -87,9 +88,12 @@ export interface EditCanvasConfigType {
   [EditCanvasConfigEnum.HEIGHT]: number
   // 背景色
   [EditCanvasConfigEnum.BACKGROUND]?: string
+  // 背景图片
   [EditCanvasConfigEnum.BACKGROUND_IMAGE]?: string | null
   // 图表主题颜色
   [EditCanvasConfigEnum.CHART_THEME_COLOR]: ChartColorsNameType
+  // 自定义图表主题颜色
+  [EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO]?: CustomColorsType[] 
   // 图表全局配置
   [EditCanvasConfigEnum.CHART_THEME_SETTING]: GlobalThemeJsonType
   // 图表主题颜色
diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index 81d7a3b5..4469369e 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -108,6 +108,8 @@ export const useChartEditStore = defineStore({
       selectColor: true,
       // chart 主题色
       chartThemeColor: defaultTheme || 'dark',
+      // 自定义颜色列表
+      chartCustomThemeColorInfo: undefined,
       // 全局配置
       chartThemeSetting: globalThemeJson,
       // 适配方式
diff --git a/src/utils/style.ts b/src/utils/style.ts
index 212cb33e..d4a9d30d 100644
--- a/src/utils/style.ts
+++ b/src/utils/style.ts
@@ -2,6 +2,7 @@ import Color from 'color'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { PickCreateComponentType } from '@/packages/index.d'
 import { EditCanvasConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { chartColors, CustomColorsType } from '@/settings/chartThemes/index'
 
 type AttrType = PickCreateComponentType<'attr'>
 type StylesType = PickCreateComponentType<'styles'>
@@ -87,7 +88,7 @@ export function darken(color: string, concentration: number) {
 }
 
 /**
- * hsl 转成16进制
+ * * hsl 转成16进制
  * @param hsl
  * @returns
  */
@@ -115,3 +116,26 @@ export const setHtmlTheme = (themeName?: string) => {
   const designStore = useDesignStore()
   e.setAttribute('data-theme', designStore.themeName)
 }
+
+/**
+ * * 合并基础颜色和自定义颜色
+ * @param chartDefaultColors 
+ * @param customColor 
+ * @returns 
+ */
+export const colorCustomMerge = (customColor?: CustomColorsType[]) => {
+  type FormateCustomColorType = {
+    [T: string]: {
+      color: string[]
+      name: string
+    }
+  }
+  const formateCustomColor: FormateCustomColorType = {}
+  customColor?.forEach(item => {
+    formateCustomColor[item.id] = {
+      color: item.color,
+      name: item.name
+    }
+  })
+  return { ...formateCustomColor, ...chartColors }
+}
\ No newline at end of file
diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue
index 9dd2e32b..9891ad88 100644
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue
@@ -10,7 +10,7 @@
     </n-card>
 
     <n-card
-      v-for="(value, key) in chartColors"
+      v-for="(value, key) in comChartColors"
       :key="key"
       class="card-box"
       :class="{ selected: key === selectName }"
@@ -20,7 +20,7 @@
       @click="selectTheme(key)"
     >
       <div class="go-flex-items-center">
-        <n-text>{{ chartColorsName[key] }}</n-text>
+        <n-ellipsis style="text-align: left; width: 60px">{{ value.name }} </n-ellipsis>
         <span
           class="theme-color-item"
           v-for="colorItem in fetchShowColors(value.color)"
@@ -40,11 +40,18 @@ import { ref, computed } from 'vue'
 import cloneDeep from 'lodash/cloneDeep'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { chartColors, chartColorsName, ChartColorsNameType } from '@/settings/chartThemes/index'
+import { chartColors, ChartColorsNameType } from '@/settings/chartThemes/index'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
-import { loadAsyncComponent } from '@/utils'
+import { loadAsyncComponent, colorCustomMerge } from '@/utils'
 import { icon } from '@/plugins'
 
+type FormateCustomColorType = {
+  [T: string]: {
+    color: string[]
+    name: string
+  }
+}
+
 const CreateColor = loadAsyncComponent(() => import('../CreateColor/index.vue'))
 
 const { SquareIcon, AddIcon } = icon.ionicons5
@@ -54,10 +61,10 @@ const chartEditStore = useChartEditStore()
 const designStore = useDesignStore()
 const createColorModelShow = ref(false)
 
-// 创建颜色
-const createColorHandle = () => {
-  createColorModelShow.value = true
-}
+// 合并默认颜色和自定义颜色
+const comChartColors = computed(() => {
+  return colorCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)
+})
 
 // 颜色
 const themeColor = computed(() => {
@@ -69,6 +76,11 @@ const selectName = computed(() => {
   return chartEditStore.getEditCanvasConfig.chartThemeColor
 })
 
+// 创建颜色
+const createColorHandle = () => {
+  createColorModelShow.value = true
+}
+
 // 底色
 const colorBackgroundImage = (item: { color: string[] }) => {
   return `linear-gradient(to right, ${item.color[0]} 0%, ${item.color[5]} 100%)`
diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue
index 9f1a578e..35964b5e 100644
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue
@@ -78,7 +78,7 @@
               </n-card>
               <n-tooltip trigger="hover">
                 <template #trigger>
-                  <n-button text :disabled="item.id === selectColorId" @click="deleteHandle(index)">
+                  <n-button text :disabled="item.id === selectThemeColor" @click="deleteHandle(index)">
                     <n-icon class="go-ml-1 go-cursor-pointer" size="16" :depth="3">
                       <trash-icon></trash-icon>
                     </n-icon>
@@ -101,13 +101,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed, reactive } from 'vue'
+import { ref, watch, computed, reactive, nextTick, onMounted } from 'vue'
 import cloneDeep from 'lodash/cloneDeep'
-import { CreateColorRender } from '../CreateColorRender/index'
 import noData from '@/assets/images/canvas/noData.png'
 import { getUUID, goDialog } from '@/utils'
 import { icon } from '@/plugins'
 import { UvIndex } from '@vicons/carbon'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { CreateColorRender } from '../CreateColorRender/index'
 
 const props = defineProps({
   modelShow: Boolean
@@ -127,9 +129,10 @@ const defaultColor: ColorType = {
   name: '未命名',
   color: ['#6ae5bb', '#69e3de', '#5ac4ee', '#5ac4ee', '#4498ec', '#3c7ddf']
 }
+const chartEditStore = useChartEditStore()
 const modelShowRef = ref(false)
 // 颜色列表
-let colorList = reactive<Array<ColorType>>([])
+let colorList = reactive<Array<ColorType>>(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo || [])
 // 子组件更新过的数据
 const updateColor = ref<ColorType | undefined>(undefined)
 // 所选颜色
@@ -143,11 +146,19 @@ watch(
   () => props.modelShow,
   newValue => {
     modelShowRef.value = newValue
+    if (newValue) {
+      // 默认选中
+      if (colorList.length) selectColor.selectInfo = colorList[0]
+    }
   }
 )
 
+// 当前选中的 ID
 const selectColorId = computed(() => selectColor?.selectInfo?.id)
 
+// 全局选择的主题
+const selectThemeColor = computed(() => chartEditStore.getEditCanvasConfig.chartThemeColor)
+
 // 选择
 const selectHandle = (item: ColorType) => {
   if (item.id === selectColorId.value) return
@@ -171,6 +182,7 @@ const createColor = () => {
     selectColor.selectInfo = newData
     colorList.push(newData)
     selectHandle(newData)
+    updateColor.value = newData
   }
   if (updateColor.value !== undefined) {
     goDialog({
@@ -187,7 +199,21 @@ const createColor = () => {
 
 // 删除
 const deleteHandle = (index: number) => {
-  colorList.splice(index, 1)
+  goDialog({
+    message: `是否删除此颜色？`,
+    onPositiveCallback: () => {
+      colorList.splice(index, 1)
+      chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO, cloneDeep(colorList))
+      nextTick(() => {
+        if (index) {
+          selectHandle(colorList[index - 1])
+        } else {
+          // 已清空
+          selectColor.selectInfo = undefined
+        }
+      })
+    }
+  })
 }
 
 // 存储更新数据的值
@@ -204,16 +230,19 @@ const saveHandle = () => {
     colorList.splice(index, 1, updateColorPrefix)
     window.$message.success('颜色应用成功！')
     updateColor.value = undefined
+    // 存储到全局数据中
+    nextTick(() => {
+      chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO, cloneDeep(colorList))
+    })
   } else {
     window.$message.error('颜色应用失败！')
   }
 }
 
-// 取消
+// 关闭
 const closeHandle = () => {
   const positiveHandle = () => {
     updateColor.value = undefined
-    colorList.splice(0, colorList.length)
     selectColor.selectInfo = undefined
     emit('update:modelShow', false)
   }
diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue
index d601ac34..7a842200 100644
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue
@@ -168,7 +168,10 @@ const computedColorList = (color?: string) => {
   })
 
   return {
-    default: [...comLightenArr.reverse().splice(0, parseInt(`${num / 2}`) - 9), ...comDarkenArr.splice(0, parseInt(`${num / 2}`))],
+    default: [
+      ...comLightenArr.reverse().splice(0, parseInt(`${num / 2}`) - 9),
+      ...comDarkenArr.splice(0, parseInt(`${num / 2}`))
+    ],
     fade: comDarkenFadeArr.reverse().splice(0, 27)
   }
 }
diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/index.vue
index 2733e982..fba33a6d 100644
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/index.vue
@@ -64,6 +64,4 @@ watch(
     deep: true
   }
 )
-</script>
-
-<style lang="scss" scoped></style>
+</script>
\ No newline at end of file
diff --git a/src/views/chart/ContentEdit/components/EditGroup/index.vue b/src/views/chart/ContentEdit/components/EditGroup/index.vue
index 5d7f1462..03cced49 100644
--- a/src/views/chart/ContentEdit/components/EditGroup/index.vue
+++ b/src/views/chart/ContentEdit/components/EditGroup/index.vue
@@ -56,7 +56,7 @@ import { MenuEnum } from '@/enums/editPageEnum'
 import { chartColors } from '@/settings/chartThemes/index'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
-import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
+import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle, colorCustomMerge } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook'
 import { useMouseHandle } from '../../hooks/useDrag.hook'
@@ -117,8 +117,8 @@ const optionsHandle = (
 
 // 配置项
 const themeColor = computed(() => {
-  const chartThemeColor = chartEditStore.getEditCanvasConfig.chartThemeColor
-  return chartColors[chartThemeColor]
+  const colorCustomMergeData = colorCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)
+  return colorCustomMergeData[chartEditStore.getEditCanvasConfig.chartThemeColor]
 })
 
 // 主题色
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index 2598f65f..1ea44997 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -87,7 +87,7 @@ import { onMounted, computed } from 'vue'
 import { chartColors } from '@/settings/chartThemes/index'
 import { MenuEnum } from '@/enums/editPageEnum'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
-import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
+import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle, colorCustomMerge } from '@/utils'
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -146,8 +146,8 @@ const themeSetting = computed(() => {
 
 // 配置项
 const themeColor = computed(() => {
-  const chartThemeColor = chartEditStore.getEditCanvasConfig.chartThemeColor
-  return chartColors[chartThemeColor]
+  const colorCustomMergeData = colorCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)
+  return colorCustomMergeData[chartEditStore.getEditCanvasConfig.chartThemeColor]
 })
 
 // 是否展示渲染