From 9707e4af0faa38e3eac47d4150a87065c5ae1d8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Sat, 1 Oct 2022 21:10:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=9B=BE=E5=B1=82?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E7=B1=BB=E5=9E=8B=E6=8C=81=E4=B9=85=E5=8C=96?=
 =?UTF-8?q?=E5=AD=98=E5=82=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/index.d.ts                       | 11 +++++---
 .../chartLayoutStore/chartLayoutStore.d.ts    |  8 ++++++
 .../chartLayoutStore/chartLayoutStore.ts      |  9 +++++--
 .../components/LayersGroupListItem/index.vue  |  2 +-
 .../components/LayersListItem/index.vue       |  2 +-
 .../components/LayersStatus/index.vue         |  5 ++--
 src/views/chart/ContentLayers/index.d.ts      |  4 ---
 src/views/chart/ContentLayers/index.vue       | 26 ++++++++++++-------
 8 files changed, 43 insertions(+), 24 deletions(-)
 delete mode 100644 src/views/chart/ContentLayers/index.d.ts

diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts
index e7d8cdf4..a565b12b 100644
--- a/src/packages/index.d.ts
+++ b/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
 }
 
diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts
index fecae02b..135f155a 100644
--- a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts
+++ b/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
 }
diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.ts
index e2c4ac9b..6a8bcc1a 100644
--- a/src/store/modules/chartLayoutStore/chartLayoutStore.ts
+++ b/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: {
diff --git a/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue b/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue
index d9156753..587eb85b 100644
--- a/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue
+++ b/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({
diff --git a/src/views/chart/ContentLayers/components/LayersListItem/index.vue b/src/views/chart/ContentLayers/components/LayersListItem/index.vue
index 8562b55f..2e72cff0 100644
--- a/src/views/chart/ContentLayers/components/LayersListItem/index.vue
+++ b/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: {
diff --git a/src/views/chart/ContentLayers/components/LayersStatus/index.vue b/src/views/chart/ContentLayers/components/LayersStatus/index.vue
index e0cc2547..a43d8aa0 100644
--- a/src/views/chart/ContentLayers/components/LayersStatus/index.vue
+++ b/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
diff --git a/src/views/chart/ContentLayers/index.d.ts b/src/views/chart/ContentLayers/index.d.ts
deleted file mode 100644
index 06596dee..00000000
--- a/src/views/chart/ContentLayers/index.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export enum LayerModeEnum {
-  THUMBNAIL = 'thumbnail',
-  TEXT = 'text'
-}
diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue
index c3323410..d1a89269 100644
--- a/src/views/chart/ContentLayers/index.vue
+++ b/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>