perf: 优化键盘按下的提示

src/utils/utils.ts

@@ -7,6 +7,7 @@ import html2canvas from 'html2canvas'
 import { downloadByA } from './file'
 import { toString } from './type'
 import cloneDeep from 'lodash/cloneDeep'
+import { WinKeyboard } from '@/enums/editPageEnum'
 import { RequestHttpIntervalEnum, RequestParamsObjType } from '@/enums/httpEnum'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 
@@ -79,7 +80,11 @@ export const screenfullFn = (isFullscreen?: boolean, isEnabled?: boolean) => {
  * @param x X轴
  * @param y Y轴
  */
- export const setComponentPosition = (target: CreateComponentType | CreateComponentGroupType, x?: number, y?:number) => {
+export const setComponentPosition = (
+  target: CreateComponentType | CreateComponentGroupType,
+  x?: number,
+  y?: number
+) => {
   x && (target.attr.x = x)
   y && (target.attr.y = y)
 }
@@ -261,3 +266,22 @@ export const objToCookie = (obj: RequestParamsObjType) => {
   }
   return str.substring(0, str.length - 1)
 }
+
+/**
+ * * 设置按下键盘按键的底部展示
+ * @param keyCode
+ * @returns
+ */
+export const setKeyboardDressShow = (keyCode?: number) => {
+  const code = new Map([[17, WinKeyboard.CTRL]])
+
+  const dom = document.getElementById('keyboard-dress-show')
+  if (!dom) return
+  if (!keyCode) {
+    dom.innerText = ''
+    return
+  }
+  if (keyCode && code.has(keyCode)) {
+    dom.innerText = `您按下了${code.get(keyCode)}键`
+  }
+}

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()
+    }
   }
 }