feat: 新增主题色选项

2026-04-23 00:00:12 +08:00 · 2022-02-06 01:04:05 +08:00
parent 27f416a46e
commit 483d1eb5e8
51 changed files with 698 additions and 174 deletions
@@ -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
@@ -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(
@@ -1,32 +1,10 @@
 import { ThemeEnum } from '@/enums/styleEnum'

-export enum ChartLayoutFilterEnum {
-  HUEROTATE = 'hueRotate',
-  SATURATE = 'saturate',
-  BRIGHTNESS = 'brightness',
-  CONTRAST = 'contrast',
-  UNOPACITY = 'unOpacity',
-}
-
-export interface ChartLayoutFilterType {
-  // 色相
-  [ChartLayoutFilterEnum.HUEROTATE]: number
-  // 饱和度
-  [ChartLayoutFilterEnum.SATURATE]: number
-  // 亮度
-  [ChartLayoutFilterEnum.BRIGHTNESS]: number
-  // 对比度
-  [ChartLayoutFilterEnum.CONTRAST]: number
-  // 不透明度
-  [ChartLayoutFilterEnum.UNOPACITY]: number
-}
-
 export enum ChartLayoutStoreEnum {
  LAYERS = 'layers',
  CHARTS = 'charts',
  DETAILS = 'details',
  ALIGNLINE = 'alignLine',
-  FILTER = 'filter',
 }

 export interface ChartLayoutType {
@@ -38,6 +16,4 @@ export interface ChartLayoutType {
  [ChartLayoutStoreEnum.DETAILS]: boolean
  // 对齐线
  [ChartLayoutStoreEnum.ALIGNLINE]: boolean
-  // 滤镜
-  [ChartLayoutStoreEnum.FILTER]: ChartLayoutFilterType
 }
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { ChartLayoutType, ChartLayoutFilterType } from './chartLayoutStore.d'
+import { ChartLayoutType } from './chartLayoutStore.d'
 import { setLocalStorage, getLocalStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -23,19 +23,6 @@ export const useChartLayoutStore = defineStore({
      details: true,
      // 对齐线
      alignLine: true,
-      // 滤镜
-      filter: {
-        // 色相
-        hueRotate: 0,
-        // 饱和度
-        saturate: 0,
-        // 亮度
-        brightness: 100,
-        // 对比度
-        contrast: 100,
-        // 不透明度
-        unOpacity: 100
-      }
    },
  getters: {
    getLayers(): boolean {
@@ -49,9 +36,6 @@ export const useChartLayoutStore = defineStore({
    },
    getAlignLine(): boolean {
      return this.alignLine
-    },
-    getFilter(): ChartLayoutFilterType {
-      return this.filter
    }
  },
  actions: {
@@ -62,13 +46,6 @@ export const useChartLayoutStore = defineStore({
      setTimeout(() => {
        chartEditStore.computedScale()
      }, 500)
-    },
-    setFilter<T extends keyof ChartLayoutFilterType>(
-      key: T,
-      value: boolean
-    ): void {
-      ;(this.filter as any)[key] = value
-      setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
    }
  }
 })