feat: 新增页面预览方式

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

@@ -1,6 +1,7 @@
 import { CreateComponentType, FilterEnum} from '@/packages/index.d'
 import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
 import { RequestHttpEnum, RequestDataTypeEnum } from '@/enums/httpEnum'
+import { PreviewScaleEnum } from '@/enums/styleEnum'
 import type {
   ChartColorsNameType,
   GlobalThemeJsonType,
@@ -46,6 +47,7 @@ export enum EditCanvasConfigEnum {
   BACKGROUND = 'background',
   BACKGROUND_IAMGE = 'backgroundImage',
   SELECT_COLOR = 'selectColor',
+  PREVIEW_SCALE_TYPE = 'previewScaleType',
 }
 
 export interface EditCanvasConfigType {
@@ -72,6 +74,8 @@ export interface EditCanvasConfigType {
   [EditCanvasConfigEnum.CHART_THEME_SETTING]: GlobalThemeJsonType
   // 图表主题颜色
   [EditCanvasConfigEnum.SELECT_COLOR]: boolean
+  // 预览展示方式
+  [EditCanvasConfigEnum.PREVIEW_SCALE_TYPE]: PreviewScaleEnum
 }
 
 // 坐标轴信息

src/store/modules/chartEditStore/chartEditStore.ts

@@ -4,13 +4,14 @@ import { CreateComponentType } from '@/packages/index.d'
 import debounce from 'lodash/debounce'
 import cloneDeep from 'lodash/cloneDeep'
 import { defaultTheme, globalThemeJson } from '@/settings/chartThemes/index'
-import { requestInterval } from '@/settings/designSetting'
+import { requestInterval, previewScaleType } from '@/settings/designSetting'
 // 记录记录
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 // 全局设置
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
 import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
 import { MenuEnum } from '@/enums/editPageEnum'
+import { PreviewScaleEnum } from '@/enums/styleEnum'
 import {
   ChartEditStoreEnum,
   ChartEditStorage,
@@ -89,7 +90,9 @@ export const useChartEditStore = defineStore({
       // chart 主题色
       chartThemeColor: defaultTheme || 'dark',
       // 全局配置
-      chartThemeSetting: globalThemeJson
+      chartThemeSetting: globalThemeJson,
+      // 预览方式
+      previewScaleType: previewScaleType
     },
     // 数据请求处理（需存储给后端）
     requestGlobalConfig: {

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

@@ -1,5 +1,3 @@
-import { ThemeEnum } from '@/enums/styleEnum'
-
 export enum ChartLayoutStoreEnum {
   LAYERS = 'layers',
   CHARTS = 'charts',

src/store/modules/designStore/designStore.ts

@@ -18,7 +18,7 @@ export const useDesignStore = defineStore({
       // 是否暗黑
       darkTheme,
       // 主题名称
-      themeName: (darkTheme && ThemeEnum.dark) || ThemeEnum.light,
+      themeName: (darkTheme && ThemeEnum.DARK) || ThemeEnum.LIGHT,
       // 颜色色号
       appTheme,
       appThemeDetail,
@@ -38,7 +38,7 @@ export const useDesignStore = defineStore({
     // 切换主题
     changeTheme(): void {
       this.darkTheme = !this.darkTheme
-      this.themeName = this.darkTheme ? ThemeEnum.dark : ThemeEnum.light
+      this.themeName = this.darkTheme ? ThemeEnum.DARK : ThemeEnum.LIGHT
       setLocalStorage(GO_DESIGN_STORE, this.$state)
     },
     // 设置颜色