fix: 处理右键不统一的问题

src/views/chart/ContentEdit/components/EditGroup/index.vue

@@ -17,7 +17,7 @@
       @mousedown="mousedownHandle($event, groupData)"
       @mouseenter="mouseenterHandle($event, groupData)"
       @mouseleave="mouseleaveHandle($event, groupData)"
-      @contextmenu="handleContextMenu($event, groupData, undefined, hideOptionsList)"
+      @contextmenu="handleContextMenu($event, groupData, optionsHandle)"
     >
       <!-- 组合组件 -->
       <edit-shape-box
@@ -54,9 +54,10 @@ import { computed, PropType } from 'vue'
 import { MenuEnum } from '@/enums/editPageEnum'
 import { chartColors } from '@/settings/chartThemes/index'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
 import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
+import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook'
 import { useMouseHandle } from '../../hooks/useDrag.hook'
 import { useComponentStyle, useSizeStyle } from '../../hooks/useStyle.hook'
 import { EditShapeBox } from '../../components/EditShapeBox'
@@ -81,6 +82,30 @@ const hideOptionsList = [MenuEnum.GROUP]
 // 点击事件
 const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle()
 
+// 右键
+const optionsHandle = (
+  targetList: MenuOptionsItemType[],
+  allList: MenuOptionsItemType[],
+  targetInstance: CreateComponentType
+) => {
+  const filter = (menulist: MenuEnum[]) => {
+    const list: MenuOptionsItemType[] = []
+    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 themeColor = computed(() => {
   const chartThemeColor = chartEditStore.getEditCanvasConfig.chartThemeColor

src/views/chart/ContentEdit/index.vue

@@ -105,7 +105,7 @@ const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle }
 const optionsHandle = (
   targetList: MenuOptionsItemType[],
   allList: MenuOptionsItemType[],
-  item: CreateComponentType
+  targetInstance: CreateComponentType
 ) => {
   // 多选处理
   if (chartEditStore.getTargetChart.selectId.length > 1) {

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

@@ -7,7 +7,7 @@
       @mousedown="groupMousedownHandle()"
       @mouseenter="mouseenterHandle(componentGroupData)"
       @mouseleave="mouseleaveHandle(componentGroupData)"
-      @contextmenu="handleContextMenu($event, componentGroupData, undefined, undefined, pickOptionsList)"
+      @contextmenu="handleContextMenu($event, componentGroupData, optionsHandle)"
     >
       <div class="go-flex-items-center item-content">
         <n-icon size="20" class="go-ml-1">
@@ -46,7 +46,8 @@ import { MouseEventButton } from '@/enums/editPageEnum'
 import { MenuEnum } from '@/enums/editPageEnum'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
+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'
@@ -72,6 +73,30 @@ const { handleContextMenu, onClickOutSide } = useContextMenu()
 const themeColor = ref(designStore.getAppTheme)
 const expend = ref(false)
 
+// 右键
+const optionsHandle = (
+  targetList: MenuOptionsItemType[],
+  allList: MenuOptionsItemType[],
+  targetInstance: CreateComponentType
+) => {
+  const filter = (menulist: MenuEnum[]) => {
+    const list: MenuOptionsItemType[] = []
+    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 clickHandle = (e: MouseEvent) => {
   // 判断左右键

src/views/chart/ContentLayers/index.vue

@@ -65,7 +65,7 @@ const { handleContextMenu, onClickOutSide } = useContextMenu()
 const optionsHandle = (
   targetList: MenuOptionsItemType[],
   allList: MenuOptionsItemType[],
-  item: CreateComponentType
+  targetInstance: CreateComponentType
 ) => {
   // 多选处理
   if (chartEditStore.getTargetChart.selectId.length > 1) {

src/views/chart/hooks/useContextMenu.hook.ts

@@ -12,13 +12,17 @@ const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon, Carbon3DSoftwareIcon, Car
 
 const chartEditStore = useChartEditStore()
 
-// * 分割线
+/**
-const divider = [
+ * 分割线
-  {
+ * @param {number} n > 2
+ * @returns
+ */
+export const divider = (n:number = 3) => {
+  return {
     type: 'divider',
-    key: 'd3'
+    key: `d${n}`
+  }
 }
-]
 
 // * 默认单组件选项
 export const defaultOptions: MenuOptionsItemType[] = [
@@ -140,7 +144,7 @@ const menuOptions = ref<MenuOptionsItemType[]>([])
 const handleContextMenu = (
   e: MouseEvent,
   // 右键对象
-  item?: CreateComponentType | CreateComponentGroupType,
+  targetInstance?: CreateComponentType | CreateComponentGroupType,
   // 判断函数
   optionsHandle?: Function,
   // 隐藏选项列表
@@ -167,21 +171,21 @@ const handleContextMenu = (
     menuOptions.value = defaultOptions
   }
 
-  if (!item) {
+  if (!targetInstance) {
     menuOptions.value = pickOption(toRaw(menuOptions.value), defaultNoItemKeys)
   }
   if (hideOptionsList) {
-    menuOptions.value = hideOption([...defaultMultiSelectOptions, ...divider, ...defaultOptions], hideOptionsList)
+    menuOptions.value = hideOption([...defaultMultiSelectOptions, divider(), ...defaultOptions], hideOptionsList)
   }
   if (pickOptionsList) {
-    menuOptions.value = pickOption([...defaultMultiSelectOptions, ...divider, ...defaultOptions], pickOptionsList)
+    menuOptions.value = pickOption([...defaultMultiSelectOptions, divider(), ...defaultOptions], pickOptionsList)
   }
   if (optionsHandle) {
     // 自定义函数能够拿到当前选项和所有选项
     menuOptions.value = optionsHandle(
       cloneDeep(toRaw(menuOptions.value)),
       [...defaultMultiSelectOptions, ...defaultOptions],
-      item
+      targetInstance
     )
   }
   nextTick().then(() => {