feat: 新增多选快捷键处理

src/store/modules/chartEditStore/chartEditStore.ts

@@ -595,6 +595,8 @@ export const useChartEditStore = defineStore({
     // * 创建分组
     setGroup() {
       try {
+        if(this.getTargetChart.selectId.length < 2) return 
+
         loadingStart()
         const groupClass = new PublicGroupConfigClass()
         // 记录整体坐标
@@ -636,6 +638,8 @@ export const useChartEditStore = defineStore({
         groupClass.attr.h = groupAttr.b - groupAttr.t
 
         this.addComponentList(groupClass)
+        this.setTargetSelectChart(groupClass.id)
+
         loadingFinish()
       } catch (error) {
         window['$message'].error('创建分组失败，请联系管理员！')
@@ -645,12 +649,15 @@ export const useChartEditStore = defineStore({
     // * 解除分组
     setUnGroup() {
       try {
-        loadingStart()
         const selectGroupIdArr = this.getTargetChart.selectId
+        if(selectGroupIdArr.length !== 1) return
+        loadingStart()
+
         // 解组
         const unGroup = (targetIndex: number) => {
           const targetGroup = this.getComponentList[targetIndex] as CreateComponentGroupType
-
+          if(!targetGroup.isGroup) return
+          
           // 分离组件并还原位置属性
           targetGroup.groupList.forEach(item => {
             item.attr.x = item.attr.x + targetGroup.attr.x
@@ -666,11 +673,11 @@ export const useChartEditStore = defineStore({
         // 判断目标是否为分组父级
         if(targetIndex !== -1) {
           unGroup(targetIndex)
-        } else {
-          window['$message'].error('解除分组失败，请联系管理员！')
         }
+
         loadingFinish()
       } catch (error) {
+        console.log(error)
         window['$message'].error('解除分组失败，请联系管理员！')
         loadingFinish()
       }

src/views/chart/ContentEdit/components/EditShortcutKey/ShortcutKeyModal.vue

@@ -104,6 +104,16 @@ const shortcutKeyOptions = [
     win: `${WinKeyboard.CTRL.toUpperCase()} + 🖱️ `,
     mac: `${MacKeyboard.CTRL_SOURCE_KEY.toUpperCase()} + 🖱️ `,
   },
+  {
+    label: '创建分组',
+    win: `${WinKeyboard.CTRL.toUpperCase()} + G `,
+    mac: `${MacKeyboard.CTRL_SOURCE_KEY.toUpperCase()} + G `,
+  },
+  {
+    label: '解除分组',
+    win: `${WinKeyboard.CTRL.toUpperCase()} + ${WinKeyboard.SHIFT.toUpperCase()} + G `,
+    mac: `${MacKeyboard.CTRL_SOURCE_KEY.toUpperCase()} + ${WinKeyboard.SHIFT.toUpperCase()} + G `,
+  },
 ]
 const closeHandle = () => {
   emit('update:modelShow', false)

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

@@ -22,6 +22,8 @@ export const winKeyboardValue = {
   [MenuEnum.DELETE]: 'delete',
   [MenuEnum.BACK]: winCtrlMerge('z'),
   [MenuEnum.FORWORD]: winCtrlMerge(winShiftMerge('z')),
+  [MenuEnum.GROUP]: winCtrlMerge('g'),
+  [MenuEnum.UN_GROUP]: winCtrlMerge(winShiftMerge('g')),
 }
 
 // 这个 Ctrl 后面还是换成了 ⌘
@@ -41,6 +43,8 @@ export const macKeyboardValue = {
   [MenuEnum.DELETE]: macCtrlMerge('backspace'),
   [MenuEnum.BACK]: macCtrlMerge('z'),
   [MenuEnum.FORWORD]: macCtrlMerge(macShiftMerge('z')),
+  [MenuEnum.GROUP]: macCtrlMerge('g'),
+  [MenuEnum.UN_GROUP]: macCtrlMerge(macShiftMerge('g')),
 }
 
 // Win 快捷键列表
@@ -57,6 +61,9 @@ const winKeyList: Array<string> = [
 
   winKeyboardValue.back,
   winKeyboardValue.forward,
+
+  winKeyboardValue.group,
+  winKeyboardValue.unGroup,
 ]
 
 // Mac 快捷键列表
@@ -73,6 +80,9 @@ const macKeyList: Array<string> = [
 
   macKeyboardValue.back,
   macKeyboardValue.forward,
+
+  macKeyboardValue.group,
+  macKeyboardValue.unGroup,
 ]
 
 // 处理键盘记录
@@ -89,49 +99,59 @@ const keyRecordHandle = () => {
 
 // 初始化监听事件
 export const useAddKeyboard = () => {
+  const throttleTime = 50
   const switchHandle = (keyboardValue: typeof winKeyboardValue, e: string) => {
     switch (e) {
       // ct+↑
       case keyboardValue.up:
-        keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_UP); return false }, 200))
+        keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_UP); return false }, throttleTime))
         break;
       // ct+→
       case keyboardValue.right:
-        keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_RIGHT); return false }, 200))
+        keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_RIGHT); return false }, throttleTime))
         break;
       // ct+↓
       case keyboardValue.down:
-        keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_DOWN); return false }, 200))
+        keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_DOWN); return false }, throttleTime))
         break;
       // ct+←
       case keyboardValue.left:
-        keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_LEFT); return false }, 200))
+        keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_LEFT); return false }, throttleTime))
         break;
 
       // 删除 delete
       case keyboardValue.delete:
-        keymaster(e, debounce(() => { chartEditStore.removeComponentList(); return false }, 200))
+        keymaster(e, debounce(() => { chartEditStore.removeComponentList(); return false }, throttleTime))
         break;
       // 复制 ct+v
       case keyboardValue.copy:
-        keymaster(e, debounce(() => { chartEditStore.setCopy(); return false }, 200))
+        keymaster(e, debounce(() => { chartEditStore.setCopy(); return false }, throttleTime))
         break;
       // 剪切 ct+x
       case keyboardValue.cut:
-        keymaster(e, debounce(() => { chartEditStore.setCut(); return false }, 200))
+        keymaster(e, debounce(() => { chartEditStore.setCut(); return false }, throttleTime))
         break;
       // 粘贴 ct+v
       case keyboardValue.parse:
-        keymaster(e, throttle(() => { chartEditStore.setParse(); return false }, 200))
+        keymaster(e, throttle(() => { chartEditStore.setParse(); return false }, throttleTime))
         break;
 
       // 撤回 ct+z
       case keyboardValue.back:
-        keymaster(e, throttle(() => { chartEditStore.setBack(); return false }, 200))
+        keymaster(e, throttle(() => { chartEditStore.setBack(); return false }, throttleTime))
         break;
       // 前进 ct+sh+z
       case keyboardValue.forward:
-        keymaster(e, throttle(() => { chartEditStore.setForward(); return false }, 200))
+        keymaster(e, throttle(() => { chartEditStore.setForward(); return false }, throttleTime))
+        break;
+      
+      // 创建分组 ct+g
+      case keyboardValue.group:
+        keymaster(e, throttle(() => { chartEditStore.setGroup(); return false }, throttleTime))
+        break;
+      // 解除分组 ct+sh+g
+      case keyboardValue.unGroup:
+        keymaster(e, throttle(() => { chartEditStore.setUnGroup(); return false }, throttleTime))
         break;
     }
   }