feat: 新增工作区域内容模块

src/store/modules/chartLayoutStore/chartLayoutStore.d.ts

@@ -1,35 +1,43 @@
 import { ThemeEnum } from '@/enums/styleEnum'
 
+export enum ChartLayoutFilterEnum {
+  HUEROTATE = 'hueRotate',
+  SATURATE = 'saturate',
+  BRIGHTNESS = 'brightness',
+  CONTRAST = 'contrast',
+  UNOPACITY = 'unOpacity',
+}
+
 export interface ChartLayoutFilterType {
   // 色相
-  hueRotate: number
+  [ChartLayoutFilterEnum.HUEROTATE]: number
   // 饱和度
-  saturate: number
+  [ChartLayoutFilterEnum.SATURATE]: number
   // 亮度
-  brightness: number
+  [ChartLayoutFilterEnum.BRIGHTNESS]: number
   // 对比度
-  contrast: number
+  [ChartLayoutFilterEnum.CONTRAST]: number
   // 不透明度
-  unOpacity: number
+  [ChartLayoutFilterEnum.UNOPACITY]: number
 }
 
-export interface ChartLayoutType {
-  // 图层控制
-  layers: boolean
-  // 图表组件
-  charts: boolean
-  // 详情设置
-  details: boolean
-  // 对齐线
-  alignLine: boolean
-  // 滤镜
-  filter: ChartLayoutFilterType
-}
-
-export enum ChartLayoutStoreEnums {
+export enum ChartLayoutStoreEnum {
   LAYERS = 'layers',
   CHARTS = 'charts',
   DETAILS = 'details',
   ALIGNLINE = 'alignLine',
   FILTER = 'filter',
-}
+}
+
+export interface ChartLayoutType {
+  // 图层控制
+  [ChartLayoutStoreEnum.LAYERS]: boolean
+  // 图表组件
+  [ChartLayoutStoreEnum.CHARTS]: boolean
+  // 详情设置
+  [ChartLayoutStoreEnum.DETAILS]: boolean
+  // 对齐线
+  [ChartLayoutStoreEnum.ALIGNLINE]: boolean
+  // 滤镜
+  [ChartLayoutStoreEnum.FILTER]: ChartLayoutFilterType
+}

src/store/modules/chartLayoutStore/chartLayoutStore.ts

@@ -2,6 +2,9 @@ import { defineStore } from 'pinia'
 import { ChartLayoutType, ChartLayoutFilterType } from './chartLayoutStore.d'
 import { setLocalStorage, getLocalStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
+import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+const chartEditStore = useChartEditStoreStore()
 
 const { GO_CHART_LAYOUT_STORE } = StorageEnum
 
@@ -9,6 +12,7 @@ const storageChartLayout: ChartLayoutType = getLocalStorage(
   GO_CHART_LAYOUT_STORE
 )
 
+// 编辑区域布局和静态设置
 export const useChartLayoutStore = defineStore({
   id: 'useChartLayoutStore',
   state: (): ChartLayoutType =>
@@ -32,8 +36,8 @@ export const useChartLayoutStore = defineStore({
         // 对比度
         contrast: 100,
         // 不透明度
-        unOpacity: 100,
-      },
+        unOpacity: 100
+      }
     },
   getters: {
     getLayers(): boolean {
@@ -50,16 +54,23 @@ export const useChartLayoutStore = defineStore({
     },
     getFilter(): ChartLayoutFilterType {
       return this.filter
-    },
+    }
   },
   actions: {
     setItem(key: string, value: boolean): void {
       ;(this as any)[key] = value
       setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
+      // 重新计算拖拽区域缩放比例
+      setTimeout(() => {
+        chartEditStore.computedScale()
+      }, 500)
     },
-    setFilter<T extends keyof ChartLayoutFilterType>(key: T, value: boolean): void {
+    setFilter<T extends keyof ChartLayoutFilterType>(
+      key: T,
+      value: boolean
+    ): void {
       ;(this.filter as any)[key] = value
       setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
-    },
-  },
+    }
+  }
 })