feat: 新增图层展示类型持久化存储

src/packages/index.d.ts

@@ -36,6 +36,12 @@ interface EchartsDataType {
   source: any[]
 }
 
+// 组件状态
+export interface StatusType {
+  lock: boolean,
+  hide: boolean,
+}
+
 // 滤镜/变换枚举
 export enum FilterEnum {
   // 是否启用
@@ -84,11 +90,8 @@ export interface PublicConfigType {
     // 动画
     animations: string[]
   },
-  status: {
-    lock: boolean,
-    hide: boolean,
-  },
   filter?: string
+  status: StatusType,
   setPosition: Function
 }
 

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

@@ -1,7 +1,13 @@
+export enum LayerModeEnum {
+  THUMBNAIL = 'thumbnail',
+  TEXT = 'text'
+}
+
 export enum ChartLayoutStoreEnum {
   LAYERS = 'layers',
   CHARTS = 'charts',
   DETAILS = 'details',
+  LAYER_TYPE = 'layerType'
 }
 
 export interface ChartLayoutType {
@@ -11,4 +17,6 @@ export interface ChartLayoutType {
   [ChartLayoutStoreEnum.CHARTS]: boolean
   // 详情设置
   [ChartLayoutStoreEnum.DETAILS]: boolean
+  // 层级展示方式
+  [ChartLayoutStoreEnum.LAYER_TYPE]: LayerModeEnum
 }

src/store/modules/chartLayoutStore/chartLayoutStore.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { ChartLayoutType } from './chartLayoutStore.d'
+import { ChartLayoutType, LayerModeEnum } from './chartLayoutStore.d'
 import { setLocalStorage, getLocalStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -20,7 +20,9 @@ export const useChartLayoutStore = defineStore({
       // 图表组件
       charts: true,
       // 详情设置（收缩为true）
-      details: false
+      details: false,
+      // 图层类型（默认图片）
+      layerType: LayerModeEnum.THUMBNAIL
     },
   getters: {
     getLayers(): boolean {
@@ -31,6 +33,9 @@ export const useChartLayoutStore = defineStore({
     },
     getDetails(): boolean {
       return this.details
+    },
+    getLayerType(): LayerModeEnum {
+      return this.layerType
     }
   },
   actions: {

src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue

@@ -51,10 +51,10 @@ import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook'
 import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
+import { LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { LayersListItem } from '../LayersListItem'
 import { LayersStatus } from '../LayersStatus/index'
-import { LayerModeEnum } from '../../index.d'
 import { icon } from '@/plugins'
 
 const props = defineProps({

src/views/chart/ContentLayers/components/LayersListItem/index.vue

@@ -24,8 +24,8 @@ import { computed, PropType } from 'vue'
 import { requireErrorImg } from '@/utils'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { LayersStatus } from '../LayersStatus/index'
-import { LayerModeEnum } from '../../index.d'
 
 const props = defineProps({
   componentData: {

src/views/chart/ContentLayers/components/LayersStatus/index.vue

@@ -20,9 +20,8 @@
 <script setup lang="ts">
 import { computed, PropType } from 'vue'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
-import { PublicConfigType } from '@/packages/index.d'
+import { StatusType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { LayerModeEnum } from '../../index.d'
 import { icon } from '@/plugins'
 
 const props = defineProps({
@@ -35,7 +34,7 @@ const props = defineProps({
     default: false
   },
   status: {
-    type: Object as PropType<Pick<PublicConfigType, 'status'>>,
+    type: Object as PropType<StatusType>,
     default: () => ({
       lock: false,
       hide: false

src/views/chart/ContentLayers/index.d.ts

@@ -1,4 +0,0 @@
-export enum LayerModeEnum {
-  THUMBNAIL = 'thumbnail',
-  TEXT = 'text'
-}

src/views/chart/ContentLayers/index.vue

@@ -14,12 +14,12 @@
     <template #top-right>
       <n-button-group style="display: flex">
         <n-button
-          v-for="(item, index) in layerModeEnumList"
+          v-for="(item, index) in layerModeList"
           :key="index"
           ghost
           size="small"
           :type="layerMode === item.value ? 'primary' : 'tertiary'"
-          @click="layerMode = item.value as LayerModeEnum"
+          @click="changeLayerType(item.value)"
         >
           <n-tooltip :show-arrow="false" trigger="hover">
             <template #trigger>
@@ -68,7 +68,7 @@ import Draggable from 'vuedraggable'
 import cloneDeep from 'lodash/cloneDeep'
 import { ContentBox } from '../ContentBox/index'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
-import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import { ChartLayoutStoreEnum, LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
@@ -77,7 +77,6 @@ import { MenuEnum, MouseEventButton, WinKeyboard, MacKeyboard } from '@/enums/ed
 
 import { LayersListItem } from './components/LayersListItem/index'
 import { LayersGroupListItem } from './components/LayersGroupListItem/index'
-import { LayerModeEnum } from './index.d'
 
 import { icon } from '@/plugins'
 
@@ -86,12 +85,13 @@ const chartLayoutStore = useChartLayoutStore()
 const chartEditStore = useChartEditStore()
 const { handleContextMenu, onClickOutSide } = useContextMenu()
 
-const layerList = ref<any>([])
-const layerModeEnumList = [
-  { label: '缩略图', icon: ImagesIcon, value: 'thumbnail' },
-  { label: '文本列表', icon: ListIcon, value: 'text' }
+const layerModeList = [
+  { label: '缩略图', icon: ImagesIcon, value: LayerModeEnum.THUMBNAIL },
+  { label: '文本列表', icon: ListIcon, value: LayerModeEnum.TEXT }
 ]
-const layerMode = ref<LayerModeEnum>('thumbnail')
+
+const layerList = ref<any>([])
+const layerMode = ref<LayerModeEnum>(chartLayoutStore.getLayerType)
 
 // 逆序展示
 const reverseList = computed(() => {
@@ -117,6 +117,7 @@ const optionsHandle = (
     return targetList.filter(i => i.key === MenuEnum.GROUP)
   }
   const statusMenuEnums: MenuEnum[] = []
+  // 处理锁定与隐藏
   if (targetInstance.status.lock) {
     statusMenuEnums.push(MenuEnum.LOCK)
   } else {
@@ -191,6 +192,13 @@ const mouseenterHandle = (item: CreateComponentType) => {
 const mouseleaveHandle = (item: CreateComponentType) => {
   chartEditStore.setTargetHoverChart(undefined)
 }
+
+// 修改图层展示方式
+const changeLayerType = (value: LayerModeEnum) => {
+  layerMode.value = value
+  chartLayoutStore.setItem(ChartLayoutStoreEnum.LAYER_TYPE, value)
+}
+
 </script>
 
 <style lang="scss" scoped>