fix: 修改快捷键

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@types/color": "^3.0.3",
+    "@types/keymaster": "^1.6.30",
     "animate.css": "^4.1.1",
     "axios": "0.23.0",
     "color": "^4.2.3",
@@ -16,6 +17,7 @@
     "echarts-liquidfill": "^3.1.0",
     "highlight.js": "^11.5.0",
     "html2canvas": "^1.4.1",
+    "keymaster": "^1.6.2",
     "naive-ui": "^2.27.0",
     "pinia": "^2.0.13",
     "screenfull": "^6.0.1",

pnpm-lock.yaml

@@ -2,6 +2,7 @@ lockfileVersion: 5.3
 
 specifiers:
   '@types/color': ^3.0.3
+  '@types/keymaster': ^1.6.30
   '@types/node': ^16.11.26
   '@typescript-eslint/eslint-plugin': ^5.18.0
   '@typescript-eslint/parser': ^5.18.0
@@ -25,6 +26,7 @@ specifiers:
   eslint-plugin-vue: ^8.5.0
   highlight.js: ^11.5.0
   html2canvas: ^1.4.1
+  keymaster: ^1.6.2
   lodash: ~4.17.21
   mockjs: ^1.1.0
   naive-ui: ^2.27.0
@@ -51,6 +53,7 @@ specifiers:
 
 dependencies:
   '@types/color': 3.0.3
+  '@types/keymaster': 1.6.30
   animate.css: 4.1.1
   axios: 0.23.0
   color: 4.2.3
@@ -58,6 +61,7 @@ dependencies:
   echarts-liquidfill: 3.1.0_echarts@5.3.2
   highlight.js: 11.5.0
   html2canvas: 1.4.1
+  keymaster: 1.6.2
   naive-ui: 2.27.0_vue@3.2.31
   pinia: 2.0.13_typescript@4.6.3+vue@3.2.31
   screenfull: 6.0.1
@@ -650,6 +654,10 @@ packages:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
     dev: true
 
+  /@types/keymaster/1.6.30:
+    resolution: {integrity: sha512-mtL/NuDBX72zmyIa3cYHA1bQj1WAYlSC4eZcIQj+DHJkcRyTRF2XJXo7DBmkkY8TEq7XaAf7B8TGxs5PHhjRtw==}
+    dev: false
+
   /@types/liftoff/4.0.0:
     resolution: {integrity: sha512-Ny/PJkO6nxWAQnaet8q/oWz15lrfwvdvBpuY4treB0CSsBO1CG0fVuNLngR3m3bepQLd+E4c3Y3DlC2okpUvPw==}
     dependencies:
@@ -2946,6 +2954,10 @@ packages:
       promise: 7.3.1
     dev: true
 
+  /keymaster/1.6.2:
+    resolution: {integrity: sha512-OvA/AALN8IDKKkTk2Z+bDrzs/SQao4lo/QPbwSdDvm+frxfiYiYCSn1aHFUypJY3SruAO1y/c771agBmTXqUtg==}
+    dev: false
+
   /kind-of/6.0.3:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}

src/enums/editPageEnum.ts

@@ -18,4 +18,20 @@ export enum MenuEnum {
   UP = 'up',
   DOWN = 'down',
   CLEAR = 'clear',
+  BACK = 'back',
+  FORWORD = 'forward'
+}
+
+// Win 键盘枚举
+export enum WinKeyboard {
+  CTRL = 'ctrl',
+  SHIFT = 'shift',
+  ALT = ' alt',
+}
+
+// Mac 键盘枚举
+export enum MacKeyboard {
+  CTRL = '^',
+  SHIFT = '⇧',
+  ALT = '⌥',
 }

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

@@ -139,40 +139,44 @@ const shortcutKeyOptions = [
     value: '1'
   },
   {
-    label: 'Alt + ↑ 向上移动',
+    label: 'Ctrl + ↑ 向上移动',
     value: '2'
   },
   {
-    label: 'Alt + → 向右移动',
+    label: 'Ctrl + → 向右移动',
     value: '3'
   },
   {
-    label: 'Alt + ↓ 向下移动',
+    label: 'Ctrl + ↓ 向下移动',
     value: '4'
   },
   {
-    label: 'Alt + ← 向左移动',
+    label: 'Ctrl + ← 向左移动',
     value: '5'
   },
   {
-    label: 'Alt + Delete 删除',
+    label: 'Ctrl + Delete 删除',
     value: '6'
   },
   {
-    label: 'Alt + C 复制',
+    label: 'Ctrl + C 复制',
     value: '7'
   },
   {
-    label: 'Alt + X 剪切',
+    label: 'Ctrl + X 剪切',
     value: '8'
   },
   {
-    label: 'Alt + Z 后退',
+    label: 'Ctrl + V 粘贴',
     value: '9'
   },
   {
-    label: 'Alt + Shift + Z 前进',
+    label: 'Ctrl + Z 后退',
     value: '10'
+  },
+  {
+    label: 'Ctrl + Shift + Z 前进',
+    value: '11'
   }
 ]
 

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

@@ -1,78 +1,142 @@
-import { isMac, addEventListener, removeEventListener } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { MenuEnum } from '@/enums/editPageEnum'
+import { WinKeyboard, MacKeyboard, MenuEnum } from '@/enums/editPageEnum'
+import throttle from 'lodash/throttle'
+import debounce from 'lodash/debounce'
+
+import keymaster from 'keymaster'
+// Keymaster可以支持识别以下组合键： ⇧，shift，option，⌥，alt，ctrl，control，command，和⌘
 
 const chartEditStore = useChartEditStore()
 
-export const keyboardValue = {
-  [MenuEnum.ARROW_UP]: 'arrowup',
-  [MenuEnum.ARROW_RIGHT]: 'arrowright',
-  [MenuEnum.ARROW_DOWN]: 'arrowdown',
-  [MenuEnum.ARROW_LEFT]: 'arrowleft',
-  [MenuEnum.COPY]: 'c',
-  [MenuEnum.CUT]: 'x',
-  [MenuEnum.PARSE]: 'v',
+const winCtrlMerge = (e: string) => `${WinKeyboard.CTRL}+${e}`
+const winShiftMerge = (e: string) => `${WinKeyboard.SHIFT}+${e}`
+const winAltMerge = (e: string) => `${WinKeyboard.ALT}+${e}`
+
+export const winKeyboardValue = {
+  [MenuEnum.ARROW_UP]: winCtrlMerge('arrowup'),
+  [MenuEnum.ARROW_RIGHT]: winCtrlMerge('arrowright'),
+  [MenuEnum.ARROW_DOWN]: winCtrlMerge('arrowdown'),
+  [MenuEnum.ARROW_LEFT]: winCtrlMerge('arrowleft'),
+  [MenuEnum.COPY]: winCtrlMerge('c'),
+  [MenuEnum.CUT]: winCtrlMerge('x'),
+  [MenuEnum.PARSE]: winCtrlMerge('v'),
   [MenuEnum.DELETE]: 'delete',
-  back: 'z',
+  [MenuEnum.BACK]: winCtrlMerge('z'),
+  [MenuEnum.FORWORD]: winCtrlMerge(winShiftMerge('z')),
 }
 
-const KeyboardHandle = (e: KeyboardEvent) => {
-  const isMacRes = isMac()
+const macCtrlMerge = (e: string) => `${MacKeyboard.CTRL}+${e}`
+const macShiftMerge = (e: string) => `${MacKeyboard.SHIFT}+${e}`
+const macAltMerge = (e: string) => `${MacKeyboard.ALT}+${e}`
 
-  // 暂不支持mac，因为我没有😤👻
-  if (isMacRes) return
-  const key = e.key.toLowerCase()
+// 没有测试 macOS 系统，因为我没有😤👻
+export const macKeyboardValue = {
+  [MenuEnum.ARROW_UP]: macCtrlMerge('arrowup'),
+  [MenuEnum.ARROW_RIGHT]: macCtrlMerge('arrowright'),
+  [MenuEnum.ARROW_DOWN]: macCtrlMerge('arrowdown'),
+  [MenuEnum.ARROW_LEFT]: macCtrlMerge('arrowleft'),
+  [MenuEnum.COPY]: macCtrlMerge('c'),
+  [MenuEnum.CUT]: macCtrlMerge('x'),
+  [MenuEnum.PARSE]: macCtrlMerge('v'),
+  [MenuEnum.DELETE]: 'delete',
+  [MenuEnum.BACK]: macCtrlMerge('z'),
+  [MenuEnum.FORWORD]: macCtrlMerge(macShiftMerge('z')),
+}
 
-  // 删除（单纯的delete会和其他位置冲突）
-  // if (key === keyboardValue.delete) {
-  //   chartEditStore.removeComponentList()
-  //   return
-  // }
-  
-  // 前进
-  if (e.altKey && e.shiftKey && key == keyboardValue.back) {
-    chartEditStore.setForward()
-    return
-  }
+// Win 快捷键列表
+const winKeyList: Array<string> = [
+  winKeyboardValue.up,
+  winKeyboardValue.right,
+  winKeyboardValue.down,
+  winKeyboardValue.left,
 
-  if (e.altKey) {
-    switch (key) {
+  winKeyboardValue.delete,
+  winKeyboardValue.copy,
+  winKeyboardValue.cut,
+  winKeyboardValue.parse,
+
+  winKeyboardValue.back,
+  winKeyboardValue.forward,
+]
+
+// Mac 快捷键列表
+const macKeyList: Array<string> = [
+  macKeyboardValue.up,
+  macKeyboardValue.right,
+  macKeyboardValue.down,
+  macKeyboardValue.left,
+
+  macKeyboardValue.delete,
+  macKeyboardValue.copy,
+  macKeyboardValue.cut,
+  macKeyboardValue.parse,
+
+  macKeyboardValue.back,
+  macKeyboardValue.forward,
+]
+
+// 初始化监听事件
+export const useAddKeyboard = () => {
+  const switchHande = (keyboardValue: typeof winKeyboardValue, e: string) => {
+    switch (e) {
       // ↑
-      case keyboardValue.up: chartEditStore.setMove(MenuEnum.ARROW_UP)
+      case keyboardValue.up:
+        keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_UP); return false }, 200))
         break;
       // →
-      case keyboardValue.right: chartEditStore.setMove(MenuEnum.ARROW_RIGHT)
+      case keyboardValue.right:
+        keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_RIGHT); return false }, 200))
         break;
       // ↓
-      case keyboardValue.down: chartEditStore.setMove(MenuEnum.ARROW_DOWN)
+      case keyboardValue.down:
+        keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_DOWN); return false }, 200))
         break;
       // ←
-      case keyboardValue.left: chartEditStore.setMove(MenuEnum.ARROW_LEFT)
+      case keyboardValue.left:
+        keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_LEFT); return false }, 200))
         break;
+
       // 删除
-      case keyboardValue.delete: chartEditStore.removeComponentList()
+      case keyboardValue.delete:
+        keymaster(e, debounce(() => { chartEditStore.removeComponentList(); return false }, 200))
         break;
       // 复制
-      case keyboardValue.copy: chartEditStore.setCopy()
+      case keyboardValue.copy:
+        keymaster(e, debounce(() => { chartEditStore.setCopy(); return false }, 200))
         break;
       // 剪切
-      case keyboardValue.cut: chartEditStore.setCut()
+      case keyboardValue.cut:
+        keymaster(e, debounce(() => { chartEditStore.setCut(); return false }, 200))
         break;
       // 粘贴
-      case keyboardValue.parse: chartEditStore.setParse()
+      case keyboardValue.parse:
+        keymaster(e, throttle(() => { chartEditStore.setParse(); return false }, 200))
         break;
+
       // 撤回
-      case keyboardValue.back: chartEditStore.setBack()
+      case keyboardValue.back:
+        keymaster(e, throttle(() => { chartEditStore.setBack(); return false }, 200))
+        break;
+      // 前进
+      case keyboardValue.forward:
+        keymaster(e, throttle(() => { chartEditStore.setForward(); return false }, 200))
         break;
     }
-    e.preventDefault()
   }
+  winKeyList.forEach((key: string) => {
+    switchHande(winKeyboardValue, key)
+  })
+  macKeyList.forEach((key: string) => {
+    switchHande(macKeyboardValue, key)
+  })
 }
 
-export const useAddKeyboard = () => {
-  addEventListener(document, 'keyup', KeyboardHandle, 20)
-}
-
+// 卸载监听事件
 export const useRemoveKeyboard = () => {
-  removeEventListener(document, 'keyup', KeyboardHandle)
+  winKeyList.forEach((key: string) => {
+    keymaster.unbind(key)
+  })
+  macKeyList.forEach((key: string) => {
+    keymaster.unbind(key)
+  })
 }