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

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%)`

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

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

@@ -64,6 +64,4 @@ watch(
     deep: true
   }
 )
-</script>
-
-<style lang="scss" scoped></style>
+</script>

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]
 })
 
 // 主题色

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]
 })
 
 // 是否展示渲染