perf: 优化键盘按下的提示

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

@@ -1,11 +1,16 @@
 <template>
   <div class="go-edit-bottom">
-    <edit-history></edit-history>
+    <n-space>
+      <!-- 历史记录 -->
+      <edit-history></edit-history>
+      <!-- CTRL按键触发展示 -->
+      <n-text id="keyboard-dress-show" depth="3"></n-text>
+    </n-space>
 
     <n-space class="bottom-ri">
       <!-- 快捷键提示 -->
       <edit-shortcut-key />
-      
+
       <!-- 缩放比例 -->
       <n-select
         :disabled="lockScale"
@@ -14,18 +19,13 @@
         size="mini"
         :options="filterOptions"
         @update:value="selectHandle"
-     ></n-select>
+      ></n-select>
 
       <!-- 锁定缩放 -->
       <n-tooltip trigger="hover">
         <template #trigger>
           <n-button @click="lockHandle" text>
-            <n-icon
-              class="lock-icon"
-              :class="{ color: lockScale }"
-              size="18"
-              :depth="2"
-            >
+            <n-icon class="lock-icon" :class="{ color: lockScale }" size="18" :depth="2">
               <lock-closed-outline-icon v-if="lockScale"></lock-closed-outline-icon>
               <lock-open-outline-icon v-else></lock-open-outline-icon>
             </n-icon>
@@ -46,7 +46,7 @@
         :disabled="lockScale"
         :marks="sliderMaks"
         @update:value="sliderHandle"
-     ></n-slider>
+      ></n-slider>
     </n-space>
   </div>
 </template>

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

@@ -2,8 +2,9 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { WinKeyboard, MacKeyboard, MenuEnum } from '@/enums/editPageEnum'
 import throttle from 'lodash/throttle'
 import debounce from 'lodash/debounce'
-
 import keymaster from 'keymaster'
+import { setKeyboardDressShow } from '@/utils'
+
 // Keymaster可以支持识别以下组合键： ⇧，shift，option，⌥，alt，ctrl，control，command，和⌘
 const chartEditStore = useChartEditStore()
 
@@ -27,7 +28,7 @@ export const winKeyboardValue = {
   [MenuEnum.LOCK]: winCtrlMerge('l'),
   [MenuEnum.UNLOCK]: winCtrlMerge(winShiftMerge('l')),
   [MenuEnum.HIDE]: winCtrlMerge('h'),
-  [MenuEnum.SHOW]: winCtrlMerge(winShiftMerge('h')),
+  [MenuEnum.SHOW]: winCtrlMerge(winShiftMerge('h'))
 }
 
 // 这个 Ctrl 后面还是换成了 ⌘
@@ -52,7 +53,7 @@ export const macKeyboardValue = {
   [MenuEnum.LOCK]: macCtrlMerge('l'),
   [MenuEnum.UNLOCK]: macCtrlMerge(macShiftMerge('l')),
   [MenuEnum.HIDE]: macCtrlMerge('h'),
-  [MenuEnum.SHOW]: macCtrlMerge(macShiftMerge('h')),
+  [MenuEnum.SHOW]: macCtrlMerge(macShiftMerge('h'))
 }
 
 // Win 快捷键列表
@@ -77,7 +78,7 @@ const winKeyList: Array<string> = [
   winKeyboardValue.unLock,
 
   winKeyboardValue.hide,
-  winKeyboardValue.show,
+  winKeyboardValue.show
 ]
 
 // Mac 快捷键列表
@@ -102,7 +103,7 @@ const macKeyList: Array<string> = [
   macKeyboardValue.unLock,
 
   macKeyboardValue.hide,
-  macKeyboardValue.show,
+  macKeyboardValue.show
 ]
 
 // 处理键盘记录
@@ -113,11 +114,18 @@ const keyRecordHandle = () => {
   }
   
   document.onkeydown = (e: KeyboardEvent) => {
-    if(e.keyCode === 17 && window.$KeyboardActive) window.$KeyboardActive.ctrl = true
+    if(e.keyCode === 17 && window.$KeyboardActive) {
+      setKeyboardDressShow(e.keyCode)
+      window.$KeyboardActive.ctrl = true
+    }
   }
 
   document.onkeyup = (e: KeyboardEvent) => {
-    if(e.keyCode === 17 && window.$KeyboardActive) window.$KeyboardActive.ctrl = false
+    if(e.keyCode === 17 && window.$KeyboardActive) 
+    {
+      window.$KeyboardActive.ctrl = false
+      setKeyboardDressShow()
+    }
   }
 }