diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 3453e291..add460e5 100644 --- a/src/utils/utils.ts +++ b/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)}键` + } +} diff --git a/src/views/chart/ContentEdit/components/EditBottom/index.vue b/src/views/chart/ContentEdit/components/EditBottom/index.vue index 85aad898..193f4b70 100644 --- a/src/views/chart/ContentEdit/components/EditBottom/index.vue +++ b/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> diff --git a/src/views/chart/hooks/useKeyboard.hook.ts b/src/views/chart/hooks/useKeyboard.hook.ts index 337ec579..fce80e5e 100644 --- a/src/views/chart/hooks/useKeyboard.hook.ts +++ b/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() + } } }