feat: 增加右键菜单功能及处理逻辑

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",
+  CTRL_SOURCE_KEY = 'control',
-  SHIFT_SOURCE_KEY = "shift",
+  SHIFT_SOURCE_KEY = 'shift',
-  ALT_SOURCE_KEY = "alt"
+  ALT_SOURCE_KEY = 'alt'
 }
 
 // Mac 键盘枚举
@@ -60,7 +68,7 @@ export enum MacKeyboard {
   CTRL = '⌘',
   SHIFT = '⇧',
   ALT = '⌥',
-  CTRL_SOURCE_KEY = "⌘",
+  CTRL_SOURCE_KEY = '⌘',
-  SHIFT_SOURCE_KEY = "⇧",
+  SHIFT_SOURCE_KEY = '⇧',
-  ALT_SOURCE_KEY = "⌥"
+  ALT_SOURCE_KEY = '⌥'
 }

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 {

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'
 }
 
 // 对象类型

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)
     },

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[] = []
+    return allList.filter(i => menulist.includes(i.key as MenuEnum))
-    allList.forEach(item => {
-      if (menulist.includes(item.key as MenuEnum)) {
-        list.push(item)
-      }
-    })
-    return list
   }
 
   // 多选处理
   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))
+    ]
   }
 }
 

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[] = []
+    return allList.filter(i => [MenuEnum.GROUP, MenuEnum.DELETE].includes(i.key as MenuEnum))
-
-    allList.forEach(item => {
-      // 成组
-      if (moreMenuEnums.includes(item.key as MenuEnum)) {
-        list.push(item)
-      }
-    })
-    return list
   }
-  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))
 }
 
 // 主题色

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="LockClosedOutlineIcon" v-if="status.lock" />
-        <n-icon size="12" class="list-status-icon" :component="EyeOffOutlineIcon" />
+        <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[] = []
+    return allList.filter(i => menulist.includes(i.key as MenuEnum))
-    allList.forEach(item => {
-      if (menulist.includes(item.key as MenuEnum)) {
-        list.push(item)
-      }
-    })
-    return list
   }
 
   // 多选处理
   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()

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="LockClosedOutlineIcon" v-if="status.lock" />
-      <n-icon size="12" class="list-status-icon" :component="EyeOffOutlineIcon" />
+      <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>

src/views/chart/ContentLayers/index.vue

@@ -114,16 +114,20 @@ const optionsHandle = (
 ) => {
   // 多选处理
   if (chartEditStore.getTargetChart.selectId.length > 1) {
-    const list: MenuOptionsItemType[] = []
+    return targetList.filter(i => i.key === MenuEnum.GROUP)
-    targetList.forEach(item => {
-      // 成组
-      if (item.key === MenuEnum.GROUP) {
-        list.push(item)
-      }
-    })
-    return list
   }
-  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))
 }
 
 // 缩小

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,