feat: 对接全局颜色和自定义组件交互

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'
 

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 type CustomColorsType = {
-export const chartColorsName = {
+  id: string,
-  dark: '明亮',
+  name: string,
-  customed: '暗淡',
+  color: string[]
-  macarons: '马卡龙',
-  walden: '蓝绿',
-  purplePassion: '深紫',
-  vintage: '复古',
-  chalk: '粉青',
-  westeros: '灰粉',
-  wonderland: '青草',
-  essos: '橘红',
-  shine: '深色',
-  roma: '罗马红'
 }
 
+// 主题色列表, 自定义的颜色使用的是 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)'],

src/settings/chartThemes/themes/chalk.json

@@ -8,5 +8,6 @@
     "#d4a4eb",
     "#d2f5a6",
     "#76f2f2"
-  ]
+  ],
+  "name": "粉青"
 }

src/settings/chartThemes/themes/customed.json

@@ -9,5 +9,6 @@
     "#fc8452",
     "#9a60b4",
     "#ea7ccc"
-  ]
+  ],
+  "name": "暗淡"
 }

src/settings/chartThemes/themes/dark.json

@@ -9,5 +9,6 @@
     "#ff8a45",
     "#8d48e3",
     "#dd79ff"
-  ]
+  ],
+  "name": "明亮"
 }

src/settings/chartThemes/themes/essos.json

@@ -6,5 +6,6 @@
     "#ffb248",
     "#f2d643",
     "#ebdba4"
-  ]
+  ],
+  "name": "橘红"
 }

src/settings/chartThemes/themes/macarons.json

@@ -20,5 +20,6 @@
     "#7eb00a",
     "#6f5553",
     "#c14089"
-  ]
+  ],
+  "name": "马卡龙"
 }

src/settings/chartThemes/themes/purple-passion.json

@@ -6,5 +6,6 @@
     "#71669e",
     "#cc70af",
     "#7cb4cc"
-  ]
+  ],
+  "name": "深紫"
 }

src/settings/chartThemes/themes/roma.json

@@ -20,5 +20,6 @@
     "#3cb371",
     "#d5b158",
     "#38b6b6"
-  ]
+  ],
+  "name": "罗马红"
 }

src/settings/chartThemes/themes/shine.json

@@ -8,5 +8,6 @@
     "#339ca8",
     "#cda819",
     "#32a487"
-  ]
+  ],
+  "name": "深色"
 }

src/settings/chartThemes/themes/vintage.json

@@ -10,5 +10,6 @@
     "#cc7e63",
     "#724e58",
     "#4b565b"
-  ]
+  ],
+  "name": "复古"
 }

src/settings/chartThemes/themes/walden.json

@@ -6,5 +6,6 @@
     "#a0a7e6",
     "#c4ebad",
     "#96dee8"
-  ]
+  ],
+  "name": "蓝绿"
 }

src/settings/chartThemes/themes/westeros.json

@@ -6,5 +6,6 @@
     "#93b7e3",
     "#a5e7f0",
     "#cbb0e3"
-  ]
+  ],
+  "name": "灰粉"
 }

src/settings/chartThemes/themes/wonderland.json

@@ -6,5 +6,6 @@
     "#d0648a",
     "#f58db2",
     "#f2b3c9"
-  ]
+  ],
+  "name": "青草"
 }

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
   // 图表主题颜色

src/store/modules/chartEditStore/chartEditStore.ts

@@ -108,6 +108,8 @@ export const useChartEditStore = defineStore({
       selectColor: true,
       // chart 主题色
       chartThemeColor: defaultTheme || 'dark',
+      // 自定义颜色列表
+      chartCustomThemeColorInfo: undefined,
       // 全局配置
       chartThemeSetting: globalThemeJson,
       // 适配方式

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 }
+}

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 = () => {
+const comChartColors = computed(() => {
-  createColorModelShow.value = true
+  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%)`

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) => {
+  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)
   }

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)
   }
 }

src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/index.vue

@@ -65,5 +65,3 @@ watch(
   }
 )
 </script>
-
-<style lang="scss" scoped></style>

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
+  const colorCustomMergeData = colorCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)
-  return chartColors[chartThemeColor]
+  return colorCustomMergeData[chartEditStore.getEditCanvasConfig.chartThemeColor]
 })
 
 // 主题色

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
+  const colorCustomMergeData = colorCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)
-  return chartColors[chartThemeColor]
+  return colorCustomMergeData[chartEditStore.getEditCanvasConfig.chartThemeColor]
 })
 
 // 是否展示渲染