From 04539d605dc9b92773f658c3b35901c0c817e61e Mon Sep 17 00:00:00 2001
From: tnt group <dodu@live.cn>
Date: Tue, 27 Sep 2022 20:14:00 +0800
Subject: [PATCH 1/8] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=9B=BE?=
 =?UTF-8?q?=E5=B1=82=E6=A8=A1=E5=BC=8F=E6=8E=A7=E5=88=B6=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.js                            |  1 +
 src/plugins/icon.ts                     | 13 ++++++--
 src/styles/common/style.scss            | 23 +++++++++-----
 src/views/chart/ContentBox/index.vue    | 15 +++------
 src/views/chart/ContentLayers/index.vue | 41 ++++++++++++++++++++++---
 5 files changed, 67 insertions(+), 26 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index d01f44ae..25f7f0d1 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -22,6 +22,7 @@ module.exports = {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-unused-vars': 'off',
+    'vue/no-unused-vars': 'off',
     'vue/multi-word-component-names': 'off',
     'vue/valid-template-root': 'off',
     'vue/no-mutating-props': 'off'
diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts
index 90bf057c..bcc2496a 100644
--- a/src/plugins/icon.ts
+++ b/src/plugins/icon.ts
@@ -57,7 +57,10 @@ import {
   ChevronDownOutline as ChevronDownOutlineIcon,
   Pulse as PulseIcon,
   Folder as FolderIcon,
-  FolderOpen as FolderOpenIcon
+  FolderOpen as FolderOpenIcon,
+  Image as ImageIcon,
+  Images as ImagesIcon,
+  List as ListIcon
 } from '@vicons/ionicons5'
 
 import {
@@ -211,7 +214,13 @@ const ionicons5 = {
   // 文件夹
   FolderIcon,
   // 文件夹打开
-  FolderOpenIcon
+  FolderOpenIcon,
+  // 图片
+  ImageIcon,
+  // 多个图片
+  ImagesIcon,
+  // 列表
+  ListIcon
 }
 
 const carbon = {
diff --git a/src/styles/common/style.scss b/src/styles/common/style.scss
index 9fde7bf4..13dee27b 100644
--- a/src/styles/common/style.scss
+++ b/src/styles/common/style.scss
@@ -1,7 +1,7 @@
-@import './var.scss';
-@import './format.scss';
-@import './animation.scss';
-@import './mixins/mixins.scss';
+@import "./var.scss";
+@import "./format.scss";
+@import "./animation.scss";
+@import "./mixins/mixins.scss";
 
 // 过度
 .go-transition {
@@ -49,14 +49,14 @@
 // 毛玻璃
 .go-background-filter {
   backdrop-filter: $--filter-blur-base;
-  @include fetch-bg-color('filter-color');
+  @include fetch-bg-color("filter-color");
   box-shadow: $--border-shadow;
 }
 
 // 毛玻璃
 .go-background-filter-shallow {
   backdrop-filter: $--filter-blur-base;
-  @include fetch-bg-color('filter-color-shallow');
+  @include fetch-bg-color("filter-color-shallow");
   box-shadow: $--border-shadow;
 }
 
@@ -68,7 +68,7 @@
 
 // 背景斑点需配合 @mixin background-image 使用
 .go-point-bg {
-  @include fetch-theme-custom('background-color', 'background-color1');
+  @include fetch-theme-custom("background-color", "background-color1");
   background-size: 15px 15px, 15px 15px;
 }
 
@@ -117,4 +117,11 @@
   .go-#{$typekey} {
     #{$type}: 0 !important;
   }
-}
\ No newline at end of file
+}
+
+.go-d-inline-block {
+  display: inline-block;
+}
+.go-d-block {
+  display: block;
+}
diff --git a/src/views/chart/ContentBox/index.vue b/src/views/chart/ContentBox/index.vue
index 8c10edcf..826bbb85 100644
--- a/src/views/chart/ContentBox/index.vue
+++ b/src/views/chart/ContentBox/index.vue
@@ -10,14 +10,9 @@
           <slot name="icon"></slot>
         </div>
       </n-space>
-      <n-space>
+      <n-space align="center" style="gap: 4px">
         <slot name="top-right"></slot>
-        <n-icon
-          v-show="backIcon"
-          size="20"
-          class="go-cursor-pointer"
-          @click="backHandle"
-        >
+        <n-icon v-show="backIcon" size="20" class="go-cursor-pointer go-d-block" @click="backHandle">
           <chevron-back-outline-icon></chevron-back-outline-icon>
         </n-icon>
       </n-space>
@@ -151,7 +146,7 @@ $topOrBottomHeight: 40px;
     border-bottom: 1px solid;
     @include fetch-border-color('background-color1');
   }
-  
+
   .content {
     height: calc(100vh - #{$--header-height});
     overflow: hidden;
@@ -165,9 +160,7 @@ $topOrBottomHeight: 40px;
     height: calc(100vh - #{$--header-height} - #{$topOrBottomHeight});
   }
   .content-height-show-both {
-    height: calc(
-      100vh - #{$--header-height} - #{$topOrBottomHeight} - #{$topOrBottomHeight}
-    );
+    height: calc(100vh - #{$--header-height} - #{$topOrBottomHeight} - #{$topOrBottomHeight});
   }
 }
 </style>
diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue
index 1c34c7b3..1211316f 100644
--- a/src/views/chart/ContentLayers/index.vue
+++ b/src/views/chart/ContentLayers/index.vue
@@ -8,14 +8,41 @@
     @mousedown="boxMousedownHandle($event)"
   >
     <template #icon>
-      <n-icon size="16" :depth="2">
-        <component :is="LayersIcon"></component>
-      </n-icon>
+      <n-icon size="16" :depth="2" :component="LayersIcon" />
     </template>
+
+    <template #top-right>
+      <n-radio-group v-model:value="layerMode" name="radiobuttongroup1" size="small" class="go-flex-center">
+        <n-radio-button value="thumbnail">
+          <n-icon size="16" class="go-d-block" title="缩略图" :depth="2" :component="ImageIcon" />
+        </n-radio-button>
+        <n-radio-button value="text">
+          <n-icon size="16" class="go-d-block" title="文字列表" :depth="2" :component="ListIcon" />
+        </n-radio-button>
+      </n-radio-group>
+      <!-- <n-icon
+        size="16"
+        class="go-cursor-pointer go-d-block"
+        title="缩略图"
+        :depth="2"
+        :component="ImageIcon"
+        :class="{ 'go-layer-mode-active': layerMode === 'thumbnail' }"
+      />
+      <n-icon
+        size="16"
+        class="go-cursor-pointer go-d-block"
+        title="文字列表"
+        :depth="2"
+        :component="ListIcon"
+        :class="{ 'go-layer-mode-active': layerMode === 'text' }"
+      /> -->
+    </template>
+
     <!-- 图层内容 -->
     <n-space v-if="reverseList.length === 0" justify="center">
       <n-text class="not-layer-text">暂无图层~</n-text>
     </n-space>
+
     <!-- https://github.com/SortableJS/vue.draggable.next -->
     <draggable item-key="id" v-model="layerList" ghostClass="ghost" @change="onMoveCallback">
       <template #item="{ element }">
@@ -55,12 +82,13 @@ import { LayersGroupListItem } from './components/LayersGroupListItem/index'
 
 import { icon } from '@/plugins'
 
-const { LayersIcon } = icon.ionicons5
+const { LayersIcon, ImageIcon, ListIcon } = icon.ionicons5
 const chartLayoutStore = useChartLayoutStore()
 const chartEditStore = useChartEditStore()
 const { handleContextMenu, onClickOutSide } = useContextMenu()
 
 const layerList = ref<any>([])
+const layerMode = ref<'thumbnail' | 'text'>('thumbnail')
 
 // 逆序展示
 const reverseList = computed(() => {
@@ -159,7 +187,7 @@ const mouseleaveHandle = (item: CreateComponentType) => {
 </script>
 
 <style lang="scss" scoped>
-$wight: 170px;
+$wight: 180px;
 @include go(content-layers) {
   width: $wight;
   flex-shrink: 0;
@@ -177,5 +205,8 @@ $wight: 170px;
   .ghost {
     opacity: 0;
   }
+  .go-layer-mode-active {
+    color: #51d6a9;
+  }
 }
 </style>

From e559ca928ad540ccf80c274c6cdd18bd79eede1c Mon Sep 17 00:00:00 2001
From: tnt group <dodu@live.cn>
Date: Wed, 28 Sep 2022 11:21:29 +0800
Subject: [PATCH 2/8] =?UTF-8?q?chore:=20=E5=AE=8C=E6=88=90=E9=94=81?=
 =?UTF-8?q?=E5=AE=9A=E5=8F=8A=E9=9A=90=E8=97=8F=EF=BC=8C=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E6=96=B9=E5=BC=8F=E5=8A=9F=E8=83=BD=E5=8D=A0=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plugins/icon.ts                           |  9 ++-
 .../components/LayersGroupListItem/index.vue  | 44 ++++++++++++--
 .../components/LayersListItem/index.vue       | 53 +++++++++++++----
 src/views/chart/ContentLayers/enums.ts        |  1 +
 src/views/chart/ContentLayers/index.vue       | 59 ++++++++++---------
 5 files changed, 119 insertions(+), 47 deletions(-)
 create mode 100644 src/views/chart/ContentLayers/enums.ts

diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts
index bcc2496a..48d6a0a0 100644
--- a/src/plugins/icon.ts
+++ b/src/plugins/icon.ts
@@ -60,7 +60,9 @@ import {
   FolderOpen as FolderOpenIcon,
   Image as ImageIcon,
   Images as ImagesIcon,
-  List as ListIcon
+  List as ListIcon,
+  EyeOutline as EyeOutlineIcon,
+  EyeOffOutline as EyeOffOutlineIcon
 } from '@vicons/ionicons5'
 
 import {
@@ -220,7 +222,10 @@ const ionicons5 = {
   // 多个图片
   ImagesIcon,
   // 列表
-  ListIcon
+  ListIcon,
+  // 眼睛
+  EyeOutlineIcon,
+  EyeOffOutlineIcon
 }
 
 const carbon = {
diff --git a/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue b/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue
index 9c4fb019..ae6d0418 100644
--- a/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue
+++ b/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue
@@ -2,7 +2,7 @@
   <div class="go-content-layers-group-list-item">
     <div
       class="root-item-content"
-      :class="{ hover: hover, select: select }"
+      :class="{ hover: hover, select: select, 'list-mini': layerMode === 'text' }"
       @click="clickHandle($event)"
       @mousedown="groupMousedownHandle($event)"
       @mouseenter="mouseenterHandle(componentGroupData)"
@@ -18,11 +18,13 @@
             <folder-icon></folder-icon>
           </template>
         </n-icon>
-        <n-ellipsis>
+        <n-ellipsis style="margin-right: auto">
           <n-text class="go-ml-2 list-text" :depth="2">
             {{ componentGroupData.chartConfig.title }}
           </n-text>
         </n-ellipsis>
+        <n-icon size="12" class="list-status-icon" :component="LockClosedOutlineIcon" />
+        <n-icon size="12" class="list-status-icon" :component="EyeOffOutlineIcon" />
       </div>
       <div :class="{ 'select-modal': select }"></div>
     </div>
@@ -31,6 +33,7 @@
         v-for="element in componentGroupData.groupList"
         :key="element.id"
         :componentData="element"
+        :layer-mode="layerMode"
         @mousedown="mousedownHandle($event, element, componentGroupData.id)"
         @mouseenter="mouseenterHandle(element)"
         @mouseleave="mouseleaveHandle(element)"
@@ -50,13 +53,21 @@ import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook
 import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { LayersListItem } from '../LayersListItem'
-import throttle from 'lodash/throttle'
 import { icon } from '@/plugins'
+import { LayerModeEnum } from '../../enums'
+
+const { LockClosedOutlineIcon, EyeOffOutlineIcon } = icon.ionicons5
 
 const props = defineProps({
   componentGroupData: {
     type: Object as PropType<CreateComponentGroupType>,
     required: true
+  },
+  layerMode: {
+    type: Object as PropType<LayerModeEnum>,
+    default(): LayerModeEnum {
+      return 'thumbnail'
+    }
   }
 })
 
@@ -148,7 +159,11 @@ const groupMousedownHandle = (e: MouseEvent) => {
 }
 
 // 公共点击事件
-const mousedownHandle = (e: MouseEvent, componentInstance: CreateComponentType | CreateComponentGroupType, id?: string) => {
+const mousedownHandle = (
+  e: MouseEvent,
+  componentInstance: CreateComponentType | CreateComponentGroupType,
+  id?: string
+) => {
   e.preventDefault()
   e.stopPropagation()
 
@@ -169,6 +184,7 @@ const mouseleaveHandle = (componentInstance: CreateComponentType | CreateCompone
 
 <style lang="scss" scoped>
 $centerHeight: 52px;
+$centerMiniHeight: 28px;
 $textSize: 10px;
 
 @include go(content-layers-group-list-item) {
@@ -178,6 +194,11 @@ $textSize: 10px;
   margin-bottom: 5px;
   @extend .go-transition-quick;
 
+  :deep(.go-content-layers-list-item) {
+    margin-right: 0 !important;
+    width: 95% !important;
+  }
+
   .root-item-content {
     height: $centerHeight;
     cursor: pointer;
@@ -196,6 +217,17 @@ $textSize: 10px;
         border: 1px solid v-bind('themeColor') !important;
       }
     }
+
+    // mini样式
+    &.list-mini {
+      height: $centerMiniHeight;
+      .item-content {
+        height: calc(#{$centerMiniHeight} - 10px) !important;
+      }
+      .select-modal {
+        height: calc(#{$centerMiniHeight} + 2px) !important;
+      }
+    }
   }
   .select-modal,
   .item-content {
@@ -220,5 +252,9 @@ $textSize: 10px;
     padding-left: 6px;
     font-size: $textSize;
   }
+
+  .list-status-icon {
+    margin-left: 3px;
+  }
 }
 </style>
diff --git a/src/views/chart/ContentLayers/components/LayersListItem/index.vue b/src/views/chart/ContentLayers/components/LayersListItem/index.vue
index 5ef4cdb2..e113e9bc 100644
--- a/src/views/chart/ContentLayers/components/LayersListItem/index.vue
+++ b/src/views/chart/ContentLayers/components/LayersListItem/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="go-content-layers-list-item" :class="{ hover: hover, select: select }">
+  <div class="go-content-layers-list-item" :class="{ hover: hover, select: select, 'list-mini': layerMode === 'text' }">
     <div class="go-flex-center item-content">
       <n-image
         class="list-img"
@@ -8,21 +8,27 @@
         :src="image"
         :fallback-src="requireErrorImg()"
       ></n-image>
-      <n-ellipsis>
+      <n-ellipsis style="margin-right: auto">
         <n-text class="list-text" :depth="2">
           {{ props.componentData.chartConfig.title }}
         </n-text>
       </n-ellipsis>
+      <n-icon size="12" class="list-status-icon" :component="LockClosedOutlineIcon" />
+      <n-icon size="12" class="list-status-icon" :component="EyeOffOutlineIcon" />
     </div>
     <div :class="{ 'select-modal': select }"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { toRefs, computed } from 'vue'
+import { toRefs, 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 '../../enums'
+
+import { icon } from '@/plugins'
+const { LockClosedOutlineIcon, EyeOffOutlineIcon } = icon.ionicons5
 
 // 全局颜色
 const designStore = useDesignStore()
@@ -37,6 +43,12 @@ const props = defineProps({
   componentData: {
     type: Object,
     required: true
+  },
+  layerMode: {
+    type: Object as PropType<LayerModeEnum>,
+    default(): LayerModeEnum {
+      return 'thumbnail'
+    }
   }
 })
 
@@ -56,6 +68,7 @@ const hover = computed(() => {
 
 <style lang="scss" scoped>
 $centerHeight: 52px;
+$centerMiniHeight: 28px;
 $textSize: 10px;
 
 @include go(content-layers-list-item) {
@@ -72,15 +85,7 @@ $textSize: 10px;
   &:hover {
     @include fetch-bg-color('background-color4');
   }
-  /* 选中 */
-  &.select {
-    border: 1px solid v-bind('themeColor');
-    /* 需要设置最高级，覆盖 hover 的颜色 */
-    background-color: rgba(0, 0, 0, 0);
-    .list-img {
-      border: 1px solid v-bind('themeColor') !important;
-    }
-  }
+
   .select-modal,
   .item-content {
     position: absolute;
@@ -94,24 +99,46 @@ $textSize: 10px;
     width: calc(100% - 10px);
     height: calc(100% - 10px);
   }
+
   .select-modal {
     width: 100%;
     height: 100%;
     opacity: 0.3;
     background-color: v-bind('themeColor');
   }
+
   .list-img {
     flex-shrink: 0;
     height: $centerHeight;
     border-radius: 5px;
     overflow: hidden;
-    border: 1px solid;
+    border: none !important;
     padding: 2px;
     @include hover-border-color('hover-border-color');
   }
+
   .list-text {
     padding-left: 6px;
     font-size: $textSize;
   }
+
+  .list-status-icon {
+    margin-left: 3px;
+  }
+
+  /* 选中样式 */
+  &.select {
+    border: 1px solid v-bind('themeColor');
+    /* 需要设置最高级，覆盖 hover 的颜色 */
+    background-color: rgba(0, 0, 0, 0);
+    // .list-img {
+    //   border: 1px solid v-bind('themeColor') !important;
+    // }
+  }
+
+  // mini样式
+  &.list-mini {
+    height: $centerMiniHeight;
+  }
 }
 </style>
diff --git a/src/views/chart/ContentLayers/enums.ts b/src/views/chart/ContentLayers/enums.ts
new file mode 100644
index 00000000..0cb26ab2
--- /dev/null
+++ b/src/views/chart/ContentLayers/enums.ts
@@ -0,0 +1 @@
+export type LayerModeEnum = 'thumbnail' | 'text'
diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue
index 1211316f..6e32111b 100644
--- a/src/views/chart/ContentLayers/index.vue
+++ b/src/views/chart/ContentLayers/index.vue
@@ -12,30 +12,23 @@
     </template>
 
     <template #top-right>
-      <n-radio-group v-model:value="layerMode" name="radiobuttongroup1" size="small" class="go-flex-center">
-        <n-radio-button value="thumbnail">
-          <n-icon size="16" class="go-d-block" title="缩略图" :depth="2" :component="ImageIcon" />
-        </n-radio-button>
-        <n-radio-button value="text">
-          <n-icon size="16" class="go-d-block" title="文字列表" :depth="2" :component="ListIcon" />
-        </n-radio-button>
-      </n-radio-group>
-      <!-- <n-icon
-        size="16"
-        class="go-cursor-pointer go-d-block"
-        title="缩略图"
-        :depth="2"
-        :component="ImageIcon"
-        :class="{ 'go-layer-mode-active': layerMode === 'thumbnail' }"
-      />
-      <n-icon
-        size="16"
-        class="go-cursor-pointer go-d-block"
-        title="文字列表"
-        :depth="2"
-        :component="ListIcon"
-        :class="{ 'go-layer-mode-active': layerMode === 'text' }"
-      /> -->
+      <n-button-group style="display: flex">
+        <n-button
+          v-for="(item, index) in layerModeEnumList"
+          :key="index"
+          ghost
+          size="tiny"
+          :type="layerMode === item.value ? 'primary' : 'tertiary'"
+          @click="layerMode = item.value as LayerModeEnum"
+        >
+          <n-tooltip :show-arrow="false" trigger="hover">
+            <template #trigger>
+              <n-icon size="14" :component="item.icon" />
+            </template>
+            {{ item.label }}
+          </n-tooltip>
+        </n-button>
+      </n-button-group>
     </template>
 
     <!-- 图层内容 -->
@@ -48,11 +41,16 @@
       <template #item="{ element }">
         <div class="go-content-layer-box">
           <!-- 组合 -->
-          <layers-group-list-item v-if="element.isGroup" :componentGroupData="element"></layers-group-list-item>
+          <layers-group-list-item
+            v-if="element.isGroup"
+            :componentGroupData="element"
+            :layer-mode="layerMode"
+          ></layers-group-list-item>
           <!-- 单组件 -->
           <layers-list-item
             v-else
             :componentData="element"
+            :layer-mode="layerMode"
             @mousedown="mousedownHandle($event, element)"
             @mouseenter="mouseenterHandle(element)"
             @mouseleave="mouseleaveHandle(element)"
@@ -79,16 +77,21 @@ import { MenuEnum, MouseEventButton, WinKeyboard, MacKeyboard } from '@/enums/ed
 
 import { LayersListItem } from './components/LayersListItem/index'
 import { LayersGroupListItem } from './components/LayersGroupListItem/index'
+import { LayerModeEnum } from './enums'
 
 import { icon } from '@/plugins'
 
-const { LayersIcon, ImageIcon, ListIcon } = icon.ionicons5
+const { LayersIcon, ImageIcon, ImagesIcon, ListIcon } = icon.ionicons5
 const chartLayoutStore = useChartLayoutStore()
 const chartEditStore = useChartEditStore()
 const { handleContextMenu, onClickOutSide } = useContextMenu()
 
 const layerList = ref<any>([])
-const layerMode = ref<'thumbnail' | 'text'>('thumbnail')
+const layerModeEnumList = [
+  { label: '缩略图', icon: ImagesIcon, value: 'thumbnail' },
+  { label: '文本列表', icon: ListIcon, value: 'text' }
+]
+const layerMode = ref<LayerModeEnum>('thumbnail')
 
 // 逆序展示
 const reverseList = computed(() => {
@@ -187,7 +190,7 @@ const mouseleaveHandle = (item: CreateComponentType) => {
 </script>
 
 <style lang="scss" scoped>
-$wight: 180px;
+$wight: 200px;
 @include go(content-layers) {
   width: $wight;
   flex-shrink: 0;

From 634b5c2beaba6ae32efe3c4d0d9b205f0a921eda Mon Sep 17 00:00:00 2001
From: tnt group <dodu@live.cn>
Date: Wed, 28 Sep 2022 16:47:12 +0800
Subject: [PATCH 3/8] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=8F=B3?=
 =?UTF-8?q?=E9=94=AE=E8=8F=9C=E5=8D=95=E5=8A=9F=E8=83=BD=E5=8F=8A=E5=A4=84?=
 =?UTF-8?q?=E7=90=86=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/enums/editPageEnum.ts                     | 24 ++++---
 .../modules/chartEditStore/chartEditStore.ts  | 67 ++++++++++++++++++-
 .../chartHistoryStore/chartHistoryStore.d.ts  | 11 ++-
 .../chartHistoryStore/chartHistoryStore.ts    |  4 ++
 .../components/EditGroup/index.vue            | 34 ++++++----
 src/views/chart/ContentEdit/index.vue         | 28 ++++----
 .../components/LayersGroupListItem/index.vue  | 33 ++++++---
 .../components/LayersListItem/index.vue       |  8 ++-
 src/views/chart/ContentLayers/index.vue       | 22 +++---
 src/views/chart/hooks/useContextMenu.hook.ts  | 43 +++++++++++-
 10 files changed, 212 insertions(+), 62 deletions(-)

diff --git a/src/enums/editPageEnum.ts b/src/enums/editPageEnum.ts
index e2044bd8..df395653 100644
--- a/src/enums/editPageEnum.ts
+++ b/src/enums/editPageEnum.ts
@@ -1,7 +1,7 @@
 // 鼠标点击左右键
 export enum MouseEventButton {
   LEFT = 1,
-  RIGHT = 2,
+  RIGHT = 2
 }
 
 // 页面拖拽键名
@@ -41,7 +41,15 @@ export enum MenuEnum {
   // 后退
   BACK = 'back',
   // 前进
-  FORWORD = 'forward'
+  FORWORD = 'forward',
+  // 锁定
+  LOCK = 'lock',
+  // 解除锁定
+  UNLOCK = 'unLock',
+  // 隐藏
+  HIDE = 'hide',
+  // 显示
+  SHOW = 'show'
 }
 
 // Win 键盘枚举
@@ -49,9 +57,9 @@ export enum WinKeyboard {
   CTRL = 'ctrl',
   SHIFT = 'shift',
   ALT = ' alt',
-  CTRL_SOURCE_KEY = "control",
-  SHIFT_SOURCE_KEY = "shift",
-  ALT_SOURCE_KEY = "alt"
+  CTRL_SOURCE_KEY = 'control',
+  SHIFT_SOURCE_KEY = 'shift',
+  ALT_SOURCE_KEY = 'alt'
 }
 
 // Mac 键盘枚举
@@ -60,7 +68,7 @@ export enum MacKeyboard {
   CTRL = '⌘',
   SHIFT = '⇧',
   ALT = '⌥',
-  CTRL_SOURCE_KEY = "⌘",
-  SHIFT_SOURCE_KEY = "⇧",
-  ALT_SOURCE_KEY = "⌥"
+  CTRL_SOURCE_KEY = '⌘',
+  SHIFT_SOURCE_KEY = '⇧',
+  ALT_SOURCE_KEY = '⌥'
 }
diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index 32c55a94..455d6339 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -602,7 +602,8 @@ export const useChartEditStore = defineStore({
               ids.push(item.id)
             })
           } else {
-            (historyData[0] as CreateComponentGroupType).groupList.forEach(item => {
+            const group = historyData[0] as CreateComponentGroupType
+            group.groupList.forEach(item => {
               ids.push(item.id)
             })
           }
@@ -795,6 +796,70 @@ export const useChartEditStore = defineStore({
         loadingFinish()
       }
     },
+    // * 锁定
+    setLock(status: boolean = true, isHistory: boolean = true) {
+      try {
+        // 暂不支持多选
+        if (this.getTargetChart.selectId.length > 1) return
+
+        loadingStart()
+        const index: number = this.fetchTargetIndex()
+        if (index !== -1) {
+          // 更新状态
+          const targetItem = this.getComponentList[index]
+          targetItem.status.lock = status
+
+          // 历史记录
+          if (isHistory) {
+            chartHistoryStore.createLayerHistory(
+              [targetItem],
+              status ? HistoryActionTypeEnum.LOCK : HistoryActionTypeEnum.UNLOCK
+            )
+          }
+          this.updateComponentList(index, targetItem)
+          loadingFinish()
+          return
+        }
+      } catch (value) {
+        loadingError()
+      }
+    },
+    // * 解除锁定
+    setUnLock(isHistory: boolean = true) {
+      this.setLock(false, isHistory)
+    },
+    // * 隐藏
+    setHide(status: boolean = true, isHistory: boolean = true) {
+      try {
+        // 暂不支持多选
+        if (this.getTargetChart.selectId.length > 1) return
+
+        loadingStart()
+        const index: number = this.fetchTargetIndex()
+        if (index !== -1) {
+          // 更新状态
+          const targetItem = this.getComponentList[index]
+          targetItem.status.hide = status
+
+          // 历史记录
+          if (isHistory) {
+            chartHistoryStore.createLayerHistory(
+              [targetItem],
+              status ? HistoryActionTypeEnum.HIDE : HistoryActionTypeEnum.SHOW
+            )
+          }
+          this.updateComponentList(index, targetItem)
+          loadingFinish()
+          return
+        }
+      } catch (value) {
+        loadingError()
+      }
+    },
+    // * 显示
+    setShow(isHistory: boolean = true) {
+      this.setHide(false, isHistory)
+    },
     // ----------------
     // * 设置页面大小
     setPageSize(scale: number): void {
diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts b/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts
index 0ea7be39..e27240bb 100644
--- a/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts
+++ b/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts
@@ -2,6 +2,7 @@ import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.
 import { EditCanvasType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
 // 操作类型枚举
+
 export enum HistoryActionTypeEnum {
   // 新增
   ADD = 'add',
@@ -30,7 +31,15 @@ export enum HistoryActionTypeEnum {
   // 解组
   UN_GROUP = 'unGroup',
   // 选择历史记录
-  SELECT_HISTORY = 'selectHistory'
+  SELECT_HISTORY = 'selectHistory',
+  // 锁定
+  LOCK = 'lock',
+  // 解除锁定
+  UNLOCK = 'unLock',
+  // 隐藏
+  HIDE = 'hide',
+  // 显示
+  SHOW = 'show'
 }
 
 // 对象类型
diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore.ts b/src/store/modules/chartHistoryStore/chartHistoryStore.ts
index b8627ca6..63da3ff8 100644
--- a/src/store/modules/chartHistoryStore/chartHistoryStore.ts
+++ b/src/store/modules/chartHistoryStore/chartHistoryStore.ts
@@ -153,6 +153,10 @@ export const useChartHistoryStore = defineStore({
         | HistoryActionTypeEnum.DOWN
         | HistoryActionTypeEnum.UP
         | HistoryActionTypeEnum.BOTTOM
+        | HistoryActionTypeEnum.LOCK
+        | HistoryActionTypeEnum.UNLOCK
+        | HistoryActionTypeEnum.HIDE
+        | HistoryActionTypeEnum.SHOW
     ) {
       this.createStackItem(item, type, HistoryTargetTypeEnum.CHART)
     },
diff --git a/src/views/chart/ContentEdit/components/EditGroup/index.vue b/src/views/chart/ContentEdit/components/EditGroup/index.vue
index c78b0b27..3a217c45 100644
--- a/src/views/chart/ContentEdit/components/EditGroup/index.vue
+++ b/src/views/chart/ContentEdit/components/EditGroup/index.vue
@@ -85,26 +85,32 @@ const optionsHandle = (
   allList: MenuOptionsItemType[],
   targetInstance: CreateComponentType
 ) => {
-  // 多选
-  const moreMenuEnums = [MenuEnum.GROUP, MenuEnum.DELETE]
-  // 单选
-  const singleMenuEnums = [MenuEnum.UN_GROUP]
-
   const filter = (menulist: MenuEnum[]) => {
-    const list: MenuOptionsItemType[] = []
-    allList.forEach(item => {
-      if (menulist.includes(item.key as MenuEnum)) {
-        list.push(item)
-      }
-    })
-    return list
+    return allList.filter(i => menulist.includes(i.key as MenuEnum))
   }
 
   // 多选处理
   if (chartEditStore.getTargetChart.selectId.length > 1) {
-    return filter(moreMenuEnums)
+    return filter([MenuEnum.GROUP, MenuEnum.DELETE])
   } else {
-    return [...filter(singleMenuEnums), divider(), ...targetList]
+    const statusMenuEnums: MenuEnum[] = []
+    if (targetInstance.status.lock) {
+      statusMenuEnums.push(MenuEnum.LOCK)
+    } else {
+      statusMenuEnums.push(MenuEnum.UNLOCK)
+    }
+    if (targetInstance.status.hide) {
+      statusMenuEnums.push(MenuEnum.HIDE)
+    } else {
+      statusMenuEnums.push(MenuEnum.SHOW)
+    }
+    // 单选
+    const singleMenuEnums = [MenuEnum.UN_GROUP]
+    return [
+      ...filter(singleMenuEnums),
+      divider(),
+      ...targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum))
+    ]
   }
 }
 
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index 2f6d9cc3..02242ab5 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -114,24 +114,22 @@ const optionsHandle = (
   allList: MenuOptionsItemType[],
   targetInstance: CreateComponentType
 ) => {
-  // 多选
-  const moreMenuEnums = [MenuEnum.GROUP, MenuEnum.DELETE]
-  // 单选
-  const singleMenuEnums = targetList
-
   // 多选处理
   if (chartEditStore.getTargetChart.selectId.length > 1) {
-    const list: MenuOptionsItemType[] = []
-
-    allList.forEach(item => {
-      // 成组
-      if (moreMenuEnums.includes(item.key as MenuEnum)) {
-        list.push(item)
-      }
-    })
-    return list
+    return allList.filter(i => [MenuEnum.GROUP, MenuEnum.DELETE].includes(i.key as MenuEnum))
   }
-  return singleMenuEnums
+  const statusMenuEnums: MenuEnum[] = []
+  if (targetInstance.status.lock) {
+    statusMenuEnums.push(MenuEnum.LOCK)
+  } else {
+    statusMenuEnums.push(MenuEnum.UNLOCK)
+  }
+  if (targetInstance.status.hide) {
+    statusMenuEnums.push(MenuEnum.HIDE)
+  } else {
+    statusMenuEnums.push(MenuEnum.SHOW)
+  }
+  return targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum))
 }
 
 // 主题色
diff --git a/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue b/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue
index ae6d0418..c971276b 100644
--- a/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue
+++ b/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue
@@ -23,8 +23,8 @@
             {{ componentGroupData.chartConfig.title }}
           </n-text>
         </n-ellipsis>
-        <n-icon size="12" class="list-status-icon" :component="LockClosedOutlineIcon" />
-        <n-icon size="12" class="list-status-icon" :component="EyeOffOutlineIcon" />
+        <n-icon size="12" class="list-status-icon" :component="LockClosedOutlineIcon" v-if="status.lock" />
+        <n-icon size="12" class="list-status-icon" :component="EyeOffOutlineIcon" v-if="status.hide" />
       </div>
       <div :class="{ 'select-modal': select }"></div>
     </div>
@@ -95,20 +95,29 @@ const optionsHandle = (
   targetInstance: CreateComponentType
 ) => {
   const filter = (menulist: MenuEnum[]) => {
-    const list: MenuOptionsItemType[] = []
-    allList.forEach(item => {
-      if (menulist.includes(item.key as MenuEnum)) {
-        list.push(item)
-      }
-    })
-    return list
+    return allList.filter(i => menulist.includes(i.key as MenuEnum))
   }
 
   // 多选处理
   if (chartEditStore.getTargetChart.selectId.length > 1) {
     return filter([MenuEnum.GROUP])
   } else {
-    return [...filter([MenuEnum.UN_GROUP]), divider(), ...targetList]
+    const statusMenuEnums: MenuEnum[] = []
+    if (targetInstance.status.lock) {
+      statusMenuEnums.push(MenuEnum.LOCK)
+    } else {
+      statusMenuEnums.push(MenuEnum.UNLOCK)
+    }
+    if (targetInstance.status.hide) {
+      statusMenuEnums.push(MenuEnum.HIDE)
+    } else {
+      statusMenuEnums.push(MenuEnum.SHOW)
+    }
+    return [
+      ...filter([MenuEnum.UN_GROUP]),
+      divider(),
+      ...targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum))
+    ]
   }
 }
 
@@ -136,6 +145,10 @@ const hover = computed(() => {
   return props.componentGroupData.id === chartEditStore.getTargetChart.hoverId
 })
 
+const status = computed(() => {
+  return props.componentGroupData.status
+})
+
 // 组点击事件
 const groupMousedownHandle = (e: MouseEvent) => {
   onClickOutSide()
diff --git a/src/views/chart/ContentLayers/components/LayersListItem/index.vue b/src/views/chart/ContentLayers/components/LayersListItem/index.vue
index e113e9bc..d37d8c63 100644
--- a/src/views/chart/ContentLayers/components/LayersListItem/index.vue
+++ b/src/views/chart/ContentLayers/components/LayersListItem/index.vue
@@ -13,8 +13,8 @@
           {{ props.componentData.chartConfig.title }}
         </n-text>
       </n-ellipsis>
-      <n-icon size="12" class="list-status-icon" :component="LockClosedOutlineIcon" />
-      <n-icon size="12" class="list-status-icon" :component="EyeOffOutlineIcon" />
+      <n-icon size="12" class="list-status-icon" :component="LockClosedOutlineIcon" v-if="status.lock" />
+      <n-icon size="12" class="list-status-icon" :component="EyeOffOutlineIcon" v-if="status.hide" />
     </div>
     <div :class="{ 'select-modal': select }"></div>
   </div>
@@ -64,6 +64,10 @@ const select = computed(() => {
 const hover = computed(() => {
   return props.componentData.id === chartEditStore.getTargetChart.hoverId
 })
+
+const status = computed(() => {
+  return props.componentData.status
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue
index 6e32111b..54efde08 100644
--- a/src/views/chart/ContentLayers/index.vue
+++ b/src/views/chart/ContentLayers/index.vue
@@ -114,16 +114,20 @@ const optionsHandle = (
 ) => {
   // 多选处理
   if (chartEditStore.getTargetChart.selectId.length > 1) {
-    const list: MenuOptionsItemType[] = []
-    targetList.forEach(item => {
-      // 成组
-      if (item.key === MenuEnum.GROUP) {
-        list.push(item)
-      }
-    })
-    return list
+    return targetList.filter(i => i.key === MenuEnum.GROUP)
   }
-  return targetList
+  const statusMenuEnums: MenuEnum[] = []
+  if (targetInstance.status.lock) {
+    statusMenuEnums.push(MenuEnum.LOCK)
+  } else {
+    statusMenuEnums.push(MenuEnum.UNLOCK)
+  }
+  if (targetInstance.status.hide) {
+    statusMenuEnums.push(MenuEnum.HIDE)
+  } else {
+    statusMenuEnums.push(MenuEnum.SHOW)
+  }
+  return targetList.filter(item => !statusMenuEnums.includes(item.key as MenuEnum))
 }
 
 // 缩小
diff --git a/src/views/chart/hooks/useContextMenu.hook.ts b/src/views/chart/hooks/useContextMenu.hook.ts
index d6e0adb2..f79447cc 100644
--- a/src/views/chart/hooks/useContextMenu.hook.ts
+++ b/src/views/chart/hooks/useContextMenu.hook.ts
@@ -7,7 +7,18 @@ import { MenuOptionsItemType } from './useContextMenu.hook.d'
 import { MenuEnum } from '@/enums/editPageEnum'
 import cloneDeep from 'lodash/cloneDeep'
 
-const { CopyIcon, CutIcon, ClipboardOutlineIcon, TrashIcon, ChevronDownIcon, ChevronUpIcon } = icon.ionicons5
+const {
+  CopyIcon,
+  CutIcon,
+  ClipboardOutlineIcon,
+  TrashIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  LockOpenOutlineIcon,
+  LockClosedOutlineIcon,
+  EyeOutlineIcon,
+  EyeOffOutlineIcon
+} = icon.ionicons5
 const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon, Carbon3DSoftwareIcon, Carbon3DCursorIcon } = icon.carbon
 
 const chartEditStore = useChartEditStore()
@@ -17,7 +28,7 @@ const chartEditStore = useChartEditStore()
  * @param {number} n > 2
  * @returns
  */
-export const divider = (n:number = 3) => {
+export const divider = (n: number = 3) => {
   return {
     type: 'divider',
     key: `d${n}`
@@ -26,6 +37,34 @@ export const divider = (n:number = 3) => {
 
 // * 默认单组件选项
 export const defaultOptions: MenuOptionsItemType[] = [
+  {
+    label: '锁定',
+    key: MenuEnum.LOCK,
+    icon: renderIcon(LockClosedOutlineIcon),
+    fnHandle: chartEditStore.setLock
+  },
+  {
+    label: '解除锁定',
+    key: MenuEnum.UNLOCK,
+    icon: renderIcon(LockOpenOutlineIcon),
+    fnHandle: chartEditStore.setUnLock
+  },
+  {
+    label: '隐藏',
+    key: MenuEnum.HIDE,
+    icon: renderIcon(EyeOffOutlineIcon),
+    fnHandle: chartEditStore.setHide
+  },
+  {
+    label: '显示',
+    key: MenuEnum.SHOW,
+    icon: renderIcon(EyeOutlineIcon),
+    fnHandle: chartEditStore.setShow
+  },
+  {
+    type: 'divider',
+    key: 'd0'
+  },
   {
     label: '复制',
     key: MenuEnum.COPY,

From abbf678e89d8fbb92319dbe92100c0b713cb77ab Mon Sep 17 00:00:00 2001
From: tnt group <dodu@live.cn>
Date: Wed, 28 Sep 2022 17:34:11 +0800
Subject: [PATCH 4/8] =?UTF-8?q?fix:=20=E9=9A=90=E8=97=8F=E5=90=8E=EF=BC=8C?=
 =?UTF-8?q?=E7=AB=8B=E5=8D=B3=E5=8F=96=E6=B6=88=E9=80=89=E4=B8=AD=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/modules/chartEditStore/chartEditStore.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index 455d6339..f3fc4356 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -850,6 +850,12 @@ export const useChartEditStore = defineStore({
           }
           this.updateComponentList(index, targetItem)
           loadingFinish()
+
+          // 取消选择隐藏
+          if (status) {
+            const chartEditStore = useChartEditStore()
+            chartEditStore.setTargetSelectChart(undefined)
+          }
           return
         }
       } catch (value) {

From e49cf3dea2eb3584c7ab2f5f6013390a90358fa6 Mon Sep 17 00:00:00 2001
From: tnt group <dodu@live.cn>
Date: Wed, 28 Sep 2022 17:37:09 +0800
Subject: [PATCH 5/8] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20=E9=94=81?=
 =?UTF-8?q?=E5=AE=9A=E7=BB=84=E4=BB=B6=20hover=20=E5=92=8C=20select=20?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=8E=A7=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ContentEdit/components/EditShapeBox/index.vue    | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
index b7b3bd65..a1d162df 100644
--- a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
+++ b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="go-shape-box">
+  <div class="go-shape-box" :class="{ lock: item.status.lock, hide: item.status.hide }">
     <slot></slot>
     <!-- 锚点 -->
     <template v-if="!hiddenPoint">
@@ -55,12 +55,14 @@ const themeColor = computed(() => {
 
 // 计算当前选中目标
 const hover = computed(() => {
+  if (props.item.status.lock) return false
   return props.item.id === chartEditStore.getTargetChart.hoverId
 })
 
 // 兼容多值场景
 const select = computed(() => {
   const id = props.item.id
+  if (props.item.status.lock) return false
   return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
 })
 </script>
@@ -70,6 +72,14 @@ const select = computed(() => {
   position: absolute;
   cursor: move;
 
+  &.lock {
+    cursor: default !important;
+  }
+
+  &.hide {
+    display: none;
+  }
+
   /* 锚点 */
   .shape-point {
     z-index: 1;

From cc97672fcc0a876c3942bdf8002b7dfe9694b8b6 Mon Sep 17 00:00:00 2001
From: tnt group <dodu@live.cn>
Date: Wed, 28 Sep 2022 17:38:15 +0800
Subject: [PATCH 6/8] =?UTF-8?q?feat:=20=E9=94=81=E5=AE=9A=E5=92=8C?=
 =?UTF-8?q?=E9=9A=90=E8=97=8F=E7=BB=84=E4=BB=B6=E4=B8=8D=E8=83=BD=E8=A2=AB?=
 =?UTF-8?q?=E6=A1=86=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/chart/ContentEdit/hooks/useDrag.hook.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
index 2e2218b6..9c412bc3 100644
--- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
+++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
@@ -140,7 +140,9 @@ export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | C
           targetAttr.x1 - selectAttr.x1 >= 0 &&
           targetAttr.y1 - selectAttr.y1 >= 0 &&
           targetAttr.x2 - selectAttr.x2 <= 0 &&
-          targetAttr.y2 - selectAttr.y2 <= 0
+          targetAttr.y2 - selectAttr.y2 <= 0 &&
+          !item.status.lock &&
+          !item.status.hide
         ) {
           isSelect = true
           chartEditStore.setTargetSelectChart(item.id, true)

From 2c834c1d62120c4fad919dff8f53301a934a1841 Mon Sep 17 00:00:00 2001
From: tnt group <dodu@live.cn>
Date: Wed, 28 Sep 2022 17:51:59 +0800
Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=E9=94=81=E5=AE=9A=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=B8=8D=E8=83=BD=E9=80=89=E4=B8=AD=E5=92=8C=E6=8B=96?=
 =?UTF-8?q?=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/chart/ContentEdit/hooks/useDrag.hook.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
index 9c412bc3..995a1427 100644
--- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
+++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
@@ -168,6 +168,7 @@ export const useMouseHandle = () => {
   const mouseClickHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
     e.preventDefault()
     e.stopPropagation()
+    if (item.status.lock) return
     // 若此时按下了 CTRL, 表示多选
     if (
       window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) ||
@@ -187,6 +188,7 @@ export const useMouseHandle = () => {
   const mousedownHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
     e.preventDefault()
     e.stopPropagation()
+    if (item.status.lock) return
     onClickOutSide()
     // 按下左键 + CTRL
     if (

From c22d559195140d2b5c39e533883274e4bd79a278 Mon Sep 17 00:00:00 2001
From: tnt group <dodu@live.cn>
Date: Wed, 28 Sep 2022 18:43:55 +0800
Subject: [PATCH 8/8] =?UTF-8?q?feat:=20=E9=9A=90=E8=97=8F=E9=94=81?=
 =?UTF-8?q?=E5=AE=9A=E6=93=8D=E4=BD=9C=EF=BC=8C=E6=94=AF=E6=8C=81=E5=8E=86?=
 =?UTF-8?q?=E5=8F=B2=E8=AE=B0=E5=BD=95=E5=9B=9E=E9=80=80=E5=92=8C=E5=89=8D?=
 =?UTF-8?q?=E8=BF=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/chartEditStore/chartEditStore.ts  | 30 +++++++++++++++++--
 .../chartHistoryStore/chartHistoryDefine.ts   | 11 +++----
 .../chartHistoryStore/chartHistoryStore.ts    | 18 ++++++++---
 .../components/EditHistory/index.vue          | 27 +++++++++++++----
 4 files changed, 70 insertions(+), 16 deletions(-)

diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index f3fc4356..6db94d74 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -618,6 +618,32 @@ export const useChartEditStore = defineStore({
         }
         return
       }
+
+      switch (HistoryItem.actionType) {
+        // 锁定处理
+        case HistoryActionTypeEnum.LOCK:
+        case HistoryActionTypeEnum.UNLOCK:
+          if (!isForward) {
+            // 恢复原来状态
+            if (HistoryItem.actionType === HistoryActionTypeEnum.LOCK) historyData[0].status.lock = false
+            if (HistoryItem.actionType === HistoryActionTypeEnum.UNLOCK) historyData[0].status.lock = true
+            return
+          }
+          this.setLock(!historyData[0].status.lock, false)
+          break
+
+        // 隐藏处理
+        case HistoryActionTypeEnum.HIDE:
+        case HistoryActionTypeEnum.SHOW:
+          if (!isForward) {
+            // 恢复原来状态
+            if (HistoryItem.actionType === HistoryActionTypeEnum.HIDE) historyData[0].status.hide = false
+            if (HistoryItem.actionType === HistoryActionTypeEnum.SHOW) historyData[0].status.hide = true
+            return
+          }
+          this.setHide(!historyData[0].status.hide, false)
+          break
+      }
     },
     // * 撤回
     setBack() {
@@ -811,7 +837,7 @@ export const useChartEditStore = defineStore({
 
           // 历史记录
           if (isHistory) {
-            chartHistoryStore.createLayerHistory(
+            chartHistoryStore.createLockHistory(
               [targetItem],
               status ? HistoryActionTypeEnum.LOCK : HistoryActionTypeEnum.UNLOCK
             )
@@ -843,7 +869,7 @@ export const useChartEditStore = defineStore({
 
           // 历史记录
           if (isHistory) {
-            chartHistoryStore.createLayerHistory(
+            chartHistoryStore.createHideHistory(
               [targetItem],
               status ? HistoryActionTypeEnum.HIDE : HistoryActionTypeEnum.SHOW
             )
diff --git a/src/store/modules/chartHistoryStore/chartHistoryDefine.ts b/src/store/modules/chartHistoryStore/chartHistoryDefine.ts
index a3f70d7c..7c38de1b 100644
--- a/src/store/modules/chartHistoryStore/chartHistoryDefine.ts
+++ b/src/store/modules/chartHistoryStore/chartHistoryDefine.ts
@@ -1,7 +1,4 @@
-import {
-  HistoryTargetTypeEnum,
-  HistoryActionTypeEnum
-} from './chartHistoryStore.d'
+import { HistoryTargetTypeEnum, HistoryActionTypeEnum } from './chartHistoryStore.d'
 
 export const historyActionTypeName = {
   [HistoryActionTypeEnum.ADD]: '新增图表',
@@ -18,6 +15,10 @@ export const historyActionTypeName = {
   [HistoryActionTypeEnum.GROUP]: '创建分组',
   [HistoryActionTypeEnum.UN_GROUP]: '解除分组',
   [HistoryActionTypeEnum.SELECT_HISTORY]: '选择记录',
-  
+  [HistoryActionTypeEnum.LOCK]: '锁定',
+  [HistoryActionTypeEnum.UNLOCK]: '解除锁定',
+  [HistoryActionTypeEnum.HIDE]: '隐藏',
+  [HistoryActionTypeEnum.SHOW]: '显示',
+
   [HistoryTargetTypeEnum.CANVAS]: '画布初始化'
 }
diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore.ts b/src/store/modules/chartHistoryStore/chartHistoryStore.ts
index 63da3ff8..b773300b 100644
--- a/src/store/modules/chartHistoryStore/chartHistoryStore.ts
+++ b/src/store/modules/chartHistoryStore/chartHistoryStore.ts
@@ -153,10 +153,6 @@ export const useChartHistoryStore = defineStore({
         | HistoryActionTypeEnum.DOWN
         | HistoryActionTypeEnum.UP
         | HistoryActionTypeEnum.BOTTOM
-        | HistoryActionTypeEnum.LOCK
-        | HistoryActionTypeEnum.UNLOCK
-        | HistoryActionTypeEnum.HIDE
-        | HistoryActionTypeEnum.SHOW
     ) {
       this.createStackItem(item, type, HistoryTargetTypeEnum.CHART)
     },
@@ -171,6 +167,20 @@ export const useChartHistoryStore = defineStore({
     // * 解除分组
     createUnGroupHistory(item: Array<CreateComponentType | CreateComponentGroupType>) {
       this.createStackItem(item, HistoryActionTypeEnum.UN_GROUP, HistoryTargetTypeEnum.CHART)
+    },
+    // * 锁定记录
+    createLockHistory(
+      item: Array<CreateComponentType | CreateComponentGroupType>,
+      type: HistoryActionTypeEnum.LOCK | HistoryActionTypeEnum.UNLOCK
+    ) {
+      this.createStackItem(item, type, HistoryTargetTypeEnum.CHART)
+    },
+    // * 隐藏记录
+    createHideHistory(
+      item: Array<CreateComponentType | CreateComponentGroupType>,
+      type: HistoryActionTypeEnum.HIDE | HistoryActionTypeEnum.SHOW
+    ) {
+      this.createStackItem(item, type, HistoryTargetTypeEnum.CHART)
     }
   }
 })
diff --git a/src/views/chart/ContentEdit/components/EditHistory/index.vue b/src/views/chart/ContentEdit/components/EditHistory/index.vue
index 4346905b..4ad642bb 100644
--- a/src/views/chart/ContentEdit/components/EditHistory/index.vue
+++ b/src/views/chart/ContentEdit/components/EditHistory/index.vue
@@ -48,8 +48,19 @@ import {
   HistoryActionTypeEnum
 } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
 
-const { DesktopOutlineIcon, PencilIcon, TrashIcon, CopyIcon, LayersIcon, DuplicateIcon, HelpOutlineIcon } =
-  icon.ionicons5
+const {
+  DesktopOutlineIcon,
+  PencilIcon,
+  TrashIcon,
+  CopyIcon,
+  LayersIcon,
+  DuplicateIcon,
+  HelpOutlineIcon,
+  LockClosedOutlineIcon,
+  LockOpenOutlineIcon,
+  EyeOffOutlineIcon,
+  EyeOutlineIcon
+} = icon.ionicons5
 const { StackedMoveIcon, Carbon3DCursorIcon, Carbon3DSoftwareIcon } = icon.carbon
 
 const chartHistoryStoreStore = useChartHistoryStore()
@@ -83,6 +94,14 @@ const iconHandle = (e: HistoryItemType) => {
       return Carbon3DCursorIcon
     case HistoryActionTypeEnum.UN_GROUP:
       return Carbon3DSoftwareIcon
+    case HistoryActionTypeEnum.LOCK:
+      return LockClosedOutlineIcon
+    case HistoryActionTypeEnum.UNLOCK:
+      return LockOpenOutlineIcon
+    case HistoryActionTypeEnum.HIDE:
+      return EyeOffOutlineIcon
+    case HistoryActionTypeEnum.SHOW:
+      return EyeOutlineIcon
     default:
       return PencilIcon
   }
@@ -109,9 +128,7 @@ const options = computed(() => {
     }
   })
 
-  return reverse(options.filter(item => {
-    return item.label
-  }))
+  return reverse(options.filter(item => item.label))
 })
 </script>