perf: 处理渐变色和自定义色的交互

src/packages/components/Charts/Lines/LineGradientSingle/index.vue

@@ -15,7 +15,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { useChartDataFetch } from '@/hooks'
-import { isPreview } from '@/utils'
+import { isPreview, colorGradientCustomMerge} from '@/utils'
 
 const props = defineProps({
   themeSetting: {
@@ -45,7 +45,9 @@ watch(
   (newColor: keyof typeof chartColorsSearch) => {
     try {
       if (!isPreview()) {
-        const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+        const themeColor =
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
         props.chartConfig.option.series.forEach((value: any, index: number) => {
           value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
             {

src/packages/components/Charts/Lines/LineGradients/index.vue

@@ -14,7 +14,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { useChartDataFetch } from '@/hooks'
-import { isPreview } from '@/utils'
+import { isPreview, colorGradientCustomMerge} from '@/utils'
 
 const props = defineProps({
   themeSetting: {
@@ -44,7 +44,9 @@ watch(
   (newColor: keyof typeof chartColorsSearch) => {
     try {
       if (!isPreview()) {
-        const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+        const themeColor =
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
         props.chartConfig.option.series.forEach((value: any, index: number) => {
           value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
             {

src/packages/components/Charts/Lines/LineLinearSingle/index.vue

@@ -15,7 +15,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { useChartDataFetch } from '@/hooks'
-import { isPreview } from '@/utils'
+import { isPreview, colorGradientCustomMerge } from '@/utils'
 
 const props = defineProps({
   themeSetting: {
@@ -45,7 +45,9 @@ watch(
   (newColor: keyof typeof chartColorsSearch) => {
     try {
       if (!isPreview()) {
-        const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+        const themeColor =
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
         props.chartConfig.option.series.forEach((value: any) => {
           value.lineStyle.shadowColor = themeColor[2]
           value.lineStyle.color.colorStops.forEach((v: { color: string }, i: number) => {

src/packages/components/Charts/Mores/WaterPolo/index.vue

@@ -10,7 +10,7 @@ import 'echarts-liquidfill/src/liquidFill.js'
 import { CanvasRenderer } from 'echarts/renderers'
 import { GridComponent } from 'echarts/components'
 import config from './config'
-import { isPreview, isString, isNumber } from '@/utils'
+import { isPreview, isString, isNumber, colorGradientCustomMerge } from '@/utils'
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartDataFetch } from '@/hooks'
@@ -44,7 +44,9 @@ watch(
   (newColor: keyof typeof chartColorsSearch) => {
     try {
       if (!isPreview()) {
-        const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+        const themeColor =
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
         // 背景颜色
         props.chartConfig.option.series[0].backgroundStyle.color = themeColor[2]
         // 水球颜色

src/utils/style.ts

@@ -2,7 +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'
+import { chartColors, chartColorsSearch, CustomColorsType } from '@/settings/chartThemes/index'
 
 type AttrType = PickCreateComponentType<'attr'>
 type StylesType = PickCreateComponentType<'styles'>
@@ -93,12 +93,12 @@ export function darken(color: string, concentration: number) {
  * @returns
  */
 export function hslToHexa(hslString: string): string {
-  const color = Color(hslString);
+  const color = Color(hslString)
   return color.hexa()
 }
 
 export function hslToHex(hslString: string): string {
-  const color = Color(hslString);
+  const color = Color(hslString)
   return color.hex()
 }
 
@@ -119,9 +119,9 @@ export const setHtmlTheme = (themeName?: string) => {
 
 /**
  * * 合并基础颜色和自定义颜色
- * @param chartDefaultColors 
+ * @param chartDefaultColors
- * @param customColor 
+ * @param customColor
- * @returns 
+ * @returns
  */
 export const colorCustomMerge = (customColor?: CustomColorsType[]) => {
   type FormateCustomColorType = {
@@ -138,4 +138,26 @@ export const colorCustomMerge = (customColor?: CustomColorsType[]) => {
     }
   })
   return { ...formateCustomColor, ...chartColors }
-}
+}
+
+/**
+ * * 合并基础渐变颜色和自定义渐变颜色
+ * @param customColor
+ */
+export const colorGradientCustomMerge = (customColor?: CustomColorsType[]) => {
+  type FormateGradientCustomColorType = {
+    [T: string]: string[]
+  }
+  const formateGradientCustomColor: FormateGradientCustomColorType = {}
+  customColor?.forEach(item => {
+    formateGradientCustomColor[item.id] = [
+      item.color[0],
+      item.color[1],
+      fade(item.color[0], 0.3),
+      fade(item.color[0], 0.5),
+      fade(item.color[1], 0.5)
+    ]
+  })
+
+  return { ...formateGradientCustomColor, ...chartColorsSearch }
+}

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

@@ -199,21 +199,34 @@ const createColor = () => {
 
 // 删除
 const deleteHandle = (index: number) => {
-  goDialog({
+  const positiveHandle = () => {
-    message: `是否删除此颜色？`,
+    colorList.splice(index, 1)
-    onPositiveCallback: () => {
+    chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO, cloneDeep(colorList))
-      colorList.splice(index, 1)
+    nextTick(() => {
-      chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO, cloneDeep(colorList))
+      if (index) {
-      nextTick(() => {
+        selectHandle(colorList[index - 1])
-        if (index) {
+      } else {
-          selectHandle(colorList[index - 1])
+        // 已清空
-        } else {
+        selectColor.selectInfo = undefined
-          // 已清空
+      }
-          selectColor.selectInfo = undefined
+    })
-        }
+  }
-      })
+  if (updateColor.value !== undefined) {
-    }
+    goDialog({
-  })
+      message: '当前有变动未保存，是否直接放弃修改？',
+      onPositiveCallback: () => {
+        updateColor.value = undefined
+        positiveHandle()
+      }
+    })
+  } else {
+    goDialog({
+      message: `是否删除此颜色？`,
+      onPositiveCallback: () => {
+        positiveHandle()
+      }
+    })
+  }
 }
 
 // 存储更新数据的值
@@ -226,13 +239,17 @@ const saveHandle = () => {
   if (!updateColor.value) return
   const index = colorList.findIndex(item => item.id === updateColor.value?.id)
   if (index !== -1) {
+    window.$message.success('颜色应用成功！')
     const updateColorPrefix = cloneDeep({ ...updateColor.value, name: updateColor.value.name || '未定义' })
     colorList.splice(index, 1, updateColorPrefix)
-    window.$message.success('颜色应用成功！')
     updateColor.value = undefined
+    const selectTheme = chartEditStore.getEditCanvasConfig.chartThemeColor
+    // 变换主题强制渐变色更新
+    chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR, 'dark')
     // 存储到全局数据中
     nextTick(() => {
       chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO, cloneDeep(colorList))
+      chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR, selectTheme)
     })
   } else {
     window.$message.error('颜色应用失败！')

src/views/preview/components/PreviewRenderList/index.vue

@@ -43,12 +43,14 @@ import { ChartEditStorageType } from '../../index.d'
 import { PreviewRenderGroup } from '../PreviewRenderGroup/index'
 import { CreateComponentGroupType } from '@/packages/index.d'
 import { chartColors } from '@/settings/chartThemes/index'
-import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle, colorCustomMerge } from '@/utils'
 import { getSizeStyle, getComponentAttrStyle, getStatusStyle, getPreviewConfigStyle } from '../../utils'
 import { useLifeHandler } from '@/hooks'
 
 // 初始化数据池
 const { initDataPond, clearMittDataPondMap } = useChartDataPondFetch()
+const chartEditStore = useChartEditStore()
 
 const props = defineProps({
   localStorageInfo: {
@@ -63,10 +65,11 @@ const themeSetting = computed(() => {
   return chartThemeSetting
 })
 
+
 // 配置项
 const themeColor = computed(() => {
-  const chartThemeColor = props.localStorageInfo.editCanvasConfig.chartThemeColor
+  const colorCustomMergeData = colorCustomMerge(props.localStorageInfo.editCanvasConfig.chartCustomThemeColorInfo)
-  return chartColors[chartThemeColor]
+  return colorCustomMergeData[props.localStorageInfo.editCanvasConfig.chartThemeColor]
 })
 
 // 组件渲染结束初始化数据池