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, colorGradientCustomMerge} from '@/utils'
+import { isPreview } from '@/utils'
 
 const props = defineProps({
   themeSetting: {
@@ -45,9 +45,7 @@ watch(
   (newColor: keyof typeof chartColorsSearch) => {
     try {
       if (!isPreview()) {
-        const themeColor =
-          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
-          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
+        const themeColor = chartColorsSearch[newColor] || chartColorsSearch[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, colorGradientCustomMerge} from '@/utils'
+import { isPreview } from '@/utils'
 
 const props = defineProps({
   themeSetting: {
@@ -44,9 +44,7 @@ watch(
   (newColor: keyof typeof chartColorsSearch) => {
     try {
       if (!isPreview()) {
-        const themeColor =
-          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
-          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
+        const themeColor = chartColorsSearch[newColor] || chartColorsSearch[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, colorGradientCustomMerge } from '@/utils'
+import { isPreview } from '@/utils'
 
 const props = defineProps({
   themeSetting: {
@@ -45,9 +45,7 @@ watch(
   (newColor: keyof typeof chartColorsSearch) => {
     try {
       if (!isPreview()) {
-        const themeColor =
-          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
-          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
+        const themeColor = chartColorsSearch[newColor] || chartColorsSearch[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, colorGradientCustomMerge } from '@/utils'
+import { isPreview, isString, isNumber } from '@/utils'
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartDataFetch } from '@/hooks'
@@ -44,9 +44,7 @@ watch(
   (newColor: keyof typeof chartColorsSearch) => {
     try {
       if (!isPreview()) {
-        const themeColor =
-          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
-          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
+        const themeColor = chartColorsSearch[newColor] || chartColorsSearch[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, chartColorsSearch, CustomColorsType } from '@/settings/chartThemes/index'
+import { chartColors, 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 customColor
- * @returns
+ * @param chartDefaultColors 
+ * @param customColor 
+ * @returns 
  */
 export const colorCustomMerge = (customColor?: CustomColorsType[]) => {
   type FormateCustomColorType = {
@@ -138,26 +138,4 @@ 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

@@ -183,7 +183,6 @@ const createColor = () => {
     colorList.push(newData)
     selectHandle(newData)
     updateColor.value = newData
-    saveHandle(false)
   }
   if (updateColor.value !== undefined) {
     goDialog({
@@ -200,34 +199,21 @@ const createColor = () => {
 
 // 删除
 const deleteHandle = (index: number) => {
-  const positiveHandle = () => {
-    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
-      }
-    })
-  }
-  if (updateColor.value !== undefined) {
-    goDialog({
-      message: '当前有变动未保存，是否直接放弃修改？',
-      onPositiveCallback: () => {
-        updateColor.value = undefined
-        positiveHandle()
-      }
-    })
-  } else {
-    goDialog({
-      message: `是否删除此颜色？`,
-      onPositiveCallback: () => {
-        positiveHandle()
-      }
-    })
-  }
+  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
+        }
+      })
+    }
+  })
 }
 
 // 存储更新数据的值
@@ -236,24 +222,20 @@ const updateColorHandle = (newColor: ColorType) => {
 }
 
 // 保存数据
-const saveHandle = (onMessage = true) => {
+const saveHandle = () => {
   if (!updateColor.value) return
   const index = colorList.findIndex(item => item.id === updateColor.value?.id)
   if (index !== -1) {
-    onMessage && 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('数据应用失败！')
+    window.$message.error('颜色应用失败！')
   }
 }
 

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

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