feat: 新增主题色选项

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -19,10 +19,6 @@ export type EditCanvasType = {
   // 编辑区域 DOM
   [EditCanvasTypeEnum.EDIT_LAYOUT_DOM]: HTMLElement | null
   [EditCanvasTypeEnum.EDIT_CONTENT_DOM]: HTMLElement | null
-  // 大屏宽度
-  [EditCanvasTypeEnum.WIDTH]: number
-  // 大屏高度
-  [EditCanvasTypeEnum.HEIGHT]: number
   // 偏移大小
   [EditCanvasTypeEnum.OFFSET]: number
   // 缩放
@@ -31,8 +27,36 @@ export type EditCanvasType = {
   [EditCanvasTypeEnum.USER_SCALE]: number
   // 锁定缩放
   [EditCanvasTypeEnum.LOCK_SCALE]: boolean
+}
+
+// 滤镜
+export enum EditCanvasFilterEnum {
+  HUE_ROTATE = 'hueRotate',
+  SATURATE = 'saturate',
+  BRIGHTNESS = 'brightness',
+  CONTRAST = 'contrast',
+  UN_OPACITY = 'unOpacity',
+  CHART_THEME = 'chartTheme',
+}
+export interface EditCanvasConfigType {
+  // 大屏宽度
+  [EditCanvasTypeEnum.WIDTH]: number
+  // 大屏高度
+  [EditCanvasTypeEnum.HEIGHT]: number
+  // 色相
+  [EditCanvasFilterEnum.HUE_ROTATE]: number
+  // 饱和度
+  [EditCanvasFilterEnum.SATURATE]: number
+  // 亮度
+  [EditCanvasFilterEnum.BRIGHTNESS]: number
+  // 对比度
+  [EditCanvasFilterEnum.CONTRAST]: number
+  // 不透明度
+  [EditCanvasFilterEnum.UN_OPACITY]: number
   // 背景色
   [EditCanvasTypeEnum.BACKGROUND]?: string
+  // 图表主题颜色
+  [EditCanvasFilterEnum.CHART_THEME]: string
 }
 
 // 坐标轴信息
@@ -65,6 +89,7 @@ export type RecordChartType = {
 export enum ChartEditStoreEnum {
   EDIT_RANGE = 'editRange',
   EDIT_CANVAS = 'editCanvas',
+  EDIT_CANVAS_CONFIG = 'editCanvasConfig',
   RIGHT_MENU_SHOW = 'rightMenuShow',
   MOUSE_POSITION = 'mousePosition',
   TARGET_CHART = 'targetChart',
@@ -75,6 +100,7 @@ export enum ChartEditStoreEnum {
 // Store 类型
 export interface chartEditStoreType {
   [ChartEditStoreEnum.EDIT_CANVAS]: EditCanvasType
+  [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
   [ChartEditStoreEnum.RIGHT_MENU_SHOW]: boolean
   [ChartEditStoreEnum.MOUSE_POSITION]: MousePositionType
   [ChartEditStoreEnum.TARGET_CHART]: TargetChartType

src/store/modules/chartEditStore/chartEditStore.ts

@@ -3,33 +3,30 @@ import { getUUID, loadingStart, loadingFinish, loadingError } from '@/utils'
 import { CreateComponentType } from '@/packages/index.d'
 import debounce from 'lodash/debounce'
 import cloneDeep from 'lodash/cloneDeep'
+import { defaultTheme } from '@/settings/chartThemes/index'
+// 记录记录
+import { useChartHistoryStoreStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
+import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
 import {
   chartEditStoreType,
   EditCanvasType,
   MousePositionType,
   TargetChartType,
-  RecordChartType
+  RecordChartType,
+  EditCanvasConfigType
 } from './chartEditStore.d'
 
-// 记录记录
-import { useChartHistoryStoreStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
-import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
-
 const chartHistoryStoreStore = useChartHistoryStoreStore()
 
 // 编辑区域内容
 export const useChartEditStoreStore = defineStore({
   id: 'useChartEditStoreStore',
   state: (): chartEditStoreType => ({
-    // 编辑画布属性
+    // 画布属性
     editCanvas: {
       // 编辑区域 Dom
       editLayoutDom: null,
       editContentDom: null,
-      // 默认宽度
-      width: 1920,
-      // 默认高度
-      height: 1080,
       // 偏移量
       offset: 20,
       // 系统控制缩放
@@ -38,8 +35,27 @@ export const useChartEditStoreStore = defineStore({
       userScale: 1,
       // 锁定缩放
       lockScale: false,
+    },
+    // 画布属性（需存储给后端）
+    editCanvasConfig: {
+      // 默认宽度
+      width: 1920,
+      // 默认高度
+      height: 1080,
+      // 色相
+      hueRotate: 0,
+      // 饱和度
+      saturate: 0,
+      // 亮度
+      brightness: 100,
+      // 对比度
+      contrast: 100,
+      // 不透明度
+      unOpacity: 100,
       // 默认背景色
-      background: undefined
+      background: undefined,
+      // chart 主题色
+      chartTheme: defaultTheme || 'dark'
     },
     // 右键菜单
     rightMenuShow: false,
@@ -55,7 +71,7 @@ export const useChartEditStoreStore = defineStore({
     },
     // 记录临时数据（复制等）
     recordChart: undefined,
-    // 图表数组
+    // 图表数组（需存储给后端）
     componentList: []
   }),
   getters: {
@@ -68,6 +84,9 @@ export const useChartEditStoreStore = defineStore({
     getEditCanvas(): EditCanvasType {
       return this.editCanvas
     },
+    getEditCanvasConfig(): EditCanvasConfigType {
+      return this.editCanvasConfig
+    },
     getTargetChart():TargetChartType {
       return this.targetChart
     },
@@ -80,9 +99,12 @@ export const useChartEditStoreStore = defineStore({
   },
   actions: {
     // * 设置 editCanvas 数据项
-    setEditCanvasItem< T extends keyof EditCanvasType,  K extends EditCanvasType[T] >(key: T, value: K) {
+    setEditCanvasItem<T extends keyof EditCanvasType,  K extends EditCanvasType[T]>(key: T, value: K) {
       this.editCanvas[key] = value
     },
+    setCanvasConfig<T extends keyof EditCanvasConfigType,  K extends EditCanvasConfigType[T]>(key: T, value: K) {
+      this.editCanvasConfig[key] = value
+    },
     // * 设置右键菜单
     setRightMenuShow(value: boolean) {
       this.rightMenuShow = value
@@ -435,8 +457,8 @@ export const useChartEditStoreStore = defineStore({
     },
     // * 设置页面大小
     setPageSize(): void {
-      this.setPageStyle('height', `${this.getEditCanvas.height}px`)
-      this.setPageStyle('width', `${this.getEditCanvas.width}px`)
+      this.setPageStyle('height', `${this.editCanvasConfig.height}px`)
+      this.setPageStyle('width', `${this.editCanvasConfig.width}px`)
     },
     // * 计算缩放
     computedScale() {
@@ -448,8 +470,8 @@ export const useChartEditStoreStore = defineStore({
           this.getEditCanvas.editLayoutDom.clientHeight - this.getEditCanvas.offset * 4
 
         // 用户设定大小
-        const editCanvasWidth = this.getEditCanvas.width
-        const editCanvasHeight = this.getEditCanvas.height
+        const editCanvasWidth = this.editCanvasConfig.width
+        const editCanvasHeight = this.editCanvasConfig.height
 
         // 需保持的比例
         const baseProportion = parseFloat(