refactor: 完善各个ui的按键控制

src/components/colomn.vue

@@ -27,9 +27,7 @@ import { onMounted, onUnmounted, onUpdated, ref } from 'vue';
 import { LeftOutlined } from '@ant-design/icons-vue';
 import Scroll from './scroll.vue';
 import { isMobile } from '../plugin/use';
-import { has, keycode } from '../plugin/utils';
-import { sleep } from 'mutate-animate';
-import { KeyCode } from '../plugin/keyCodes';
+import { has } from '../plugin/utils';
 
 const emits = defineEmits<{
     (e: 'close'): void;
@@ -59,23 +57,10 @@ function resize() {
     if (has(props.right)) right.style.flexBasis = `${props.right}%`;
 }
 
-// function key(e: KeyboardEvent) {
-//     const c = keycode(e.keyCode);
-//     if (c === KeyCode.Escape || c === KeyCode.KeyX) emits('close');
-// }
-
 onMounted(async () => {
     resize();
-
-    await sleep(50);
-    // if (mota.plugin.ui.transition.value) await sleep(600);
-    // document.addEventListener('keyup', key);
 });
 onUpdated(resize);
-
-onUnmounted(() => {
-    // document.removeEventListener('keyup', key);
-});
 </script>
 
 <style lang="less" scoped>

src/core/main/custom/hotkey.ts

@@ -28,7 +28,10 @@ interface HotkeyData extends Required<RegisterHotkeyData> {
     group?: string;
 }
 
-type HotkeyFunc = (code: KeyCode, ev: KeyboardEvent) => void;
+/**
+ * @param id 此处的id包含数字后缀
+ */
+type HotkeyFunc = (id: string, code: KeyCode, ev: KeyboardEvent) => void;
 
 export interface HotkeyJSON {
     key: KeyCode;
@@ -184,7 +187,7 @@ export class Hotkey extends EventEmitter<HotkeyEvent> {
                 if (!func) {
                     throw new Error(`Emit unknown scope keys.`);
                 }
-                func(key, ev);
+                func(v.id, key, ev);
             }
         });
         this.emit('emit', key, assist, type);

src/core/main/init/hotkey.ts

@@ -135,6 +135,66 @@ gameKey
         name: '鼠标位置怪物临界',
         defaults: KeyCode.KeyC
     })
+    .register({
+        id: 'quickEquip_1',
+        name: '切换/保存套装_1',
+        defaults: KeyCode.Digit1,
+        alt: true
+    })
+    .register({
+        id: 'quickEquip_2',
+        name: '切换/保存套装_2',
+        defaults: KeyCode.Digit2,
+        alt: true
+    })
+    .register({
+        id: 'quickEquip_3',
+        name: '切换/保存套装_3',
+        defaults: KeyCode.Digit3,
+        alt: true
+    })
+    .register({
+        id: 'quickEquip_4',
+        name: '切换/保存套装_4',
+        defaults: KeyCode.Digit4,
+        alt: true
+    })
+    .register({
+        id: 'quickEquip_5',
+        name: '切换/保存套装_5',
+        defaults: KeyCode.Digit5,
+        alt: true
+    })
+    .register({
+        id: 'quickEquip_6',
+        name: '切换/保存套装_6',
+        defaults: KeyCode.Digit6,
+        alt: true
+    })
+    .register({
+        id: 'quickEquip_7',
+        name: '切换/保存套装_7',
+        defaults: KeyCode.Digit7,
+        alt: true
+    })
+    .register({
+        id: 'quickEquip_8',
+        name: '切换/保存套装_8',
+        defaults: KeyCode.Digit8,
+        alt: true
+    })
+    .register({
+        id: 'quickEquip_9',
+        name: '切换/保存套装_9',
+        defaults: KeyCode.Digit9,
+        alt: true
+    })
+    .register({
+        id: 'quickEquip_0',
+        name: '切换/保存套装_0',
+        defaults: KeyCode.Digit0,
+        alt: true
+    })
     // --------------------
     .group('system', '系统按键')
     .register({

src/ui/desc.vue

@@ -20,11 +20,14 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import desc from '../data/desc.json';
-import { has, splitText } from '../plugin/utils';
+import { splitText } from '../plugin/utils';
 import Colomn from '../components/colomn.vue';
+import { GameUi } from '@/core/main/custom/ui';
+import { gameKey } from '@/core/main/init/hotkey';
 
 const props = defineProps<{
     num: number;
+    ui: GameUi;
 }>();
 
 type DescKey = keyof typeof desc;
@@ -47,6 +50,15 @@ function click(key: DescKey) {
 function show(condition: string) {
     return eval(condition);
 }
+
+gameKey.use(props.ui.symbol);
+gameKey
+    .realize('exit', () => {
+        exit();
+    })
+    .realize('desc', () => {
+        exit();
+    });
 </script>
 
 <style lang="less" scoped>

src/ui/equipbox.vue

@@ -196,6 +196,7 @@ import { cancelGlobalDrag, isMobile, useDrag } from '../plugin/use';
 import { hyper, sleep } from 'mutate-animate';
 import { KeyCode } from '../plugin/keyCodes';
 import { GameUi } from '@/core/main/custom/ui';
+import { gameKey } from '@/core/main/init/hotkey';
 
 const props = defineProps<{
     num: number;
@@ -440,17 +441,19 @@ function toTool() {
     mota.ui.main.open('toolbox');
 }
 
-function keyup(e: KeyboardEvent) {
-    const c = keycode(e.keyCode);
-    if (c === KeyCode.KeyQ || c === KeyCode.KeyX || c === KeyCode.Escape) {
+gameKey.use(props.ui.symbol);
+gameKey
+    .realize('exit', () => {
         exit();
-    }
-    if (e.altKey) {
-        const n = e.keyCode - 48;
-        core.quickSaveEquip(n);
-        tip('success', `已保存至${n}号套装`);
-    }
-}
+    })
+    .realize('equipbox', () => {
+        exit();
+    })
+    .realize('quickEquip', id => {
+        const num = parseInt(id.split('_').at(-1)!);
+        core.quickSaveEquip(num);
+        tip('success', `已保存至${num}号套装`);
+    });
 
 watch(toShow, n => {
     bind();
@@ -458,15 +461,11 @@ watch(toShow, n => {
 
 onMounted(async () => {
     bind();
-    await sleep(50);
-    nextTick(() => {
-        document.addEventListener('keyup', keyup);
-    });
 });
 
 onUnmounted(() => {
     cancelGlobalDrag(dragEquip);
-    document.removeEventListener('keyup', keyup);
+    gameKey.dispose(props.ui.symbol);
 });
 </script>
 

src/ui/fly.vue

@@ -558,6 +558,9 @@ gameKey
     })
     .realize('confirm', () => {
         fly();
+    })
+    .realize('fly', () => {
+        exit();
     });
 
 // -------------------- 触摸事件

src/ui/shop.vue

@@ -169,12 +169,9 @@ import {
     RightOutlined,
     DoubleRightOutlined
 } from '@ant-design/icons-vue';
-import { keycode, splitText, tip } from '../plugin/utils';
+import { splitText, tip } from '../plugin/utils';
 import Scroll from '../components/scroll.vue';
-import { isMobile } from '../plugin/use';
 import BoxAnimate from '../components/boxAnimate.vue';
-import { KeyCode } from '../plugin/keyCodes';
-import { sleep } from 'mutate-animate';
 import { GameUi } from '@/core/main/custom/ui';
 import { gameKey } from '@/core/main/init/hotkey';
 
@@ -302,6 +299,9 @@ gameKey
     })
     .realize('confirm', () => {
         confirm();
+    })
+    .realize('shop', () => {
+        exit();
     });
 
 function exit() {

src/ui/skillTree.vue

@@ -77,13 +77,15 @@
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
 import Scroll from '../components/scroll.vue';
-import { has, keycode, splitText, tip } from '../plugin/utils';
+import { has, splitText, tip } from '../plugin/utils';
 import { isMobile } from '../plugin/use';
 import { sleep } from 'mutate-animate';
-import { KeyCode } from '../plugin/keyCodes';
+import { gameKey } from '@/core/main/init/hotkey';
+import { GameUi } from '@/core/main/custom/ui';
 
 const props = defineProps<{
     num: number;
+    ui: GameUi;
 }>();
 
 let canvas: HTMLCanvasElement;
@@ -262,14 +264,17 @@ function upgrade(index: number) {
     }
 }
 
-function key(e: KeyboardEvent) {
-    const c = keycode(e.keyCode);
-    if (c === KeyCode.Escape || c === KeyCode.KeyX || c === KeyCode.KeyJ)
+gameKey.use(props.ui.symbol);
+gameKey
+    .realize('exit', () => {
         exit();
-    if (c === KeyCode.Space || c === KeyCode.Enter || c === KeyCode.KeyC) {
+    })
+    .realize('confirm', () => {
         upgrade(selected.value);
-    }
-}
+    })
+    .realize('skillTree', () => {
+        exit();
+    });
 
 onMounted(async () => {
     canvas = document.getElementById('skill-canvas') as HTMLCanvasElement;
@@ -280,11 +285,10 @@ onMounted(async () => {
     await sleep(50);
     // if (mota.plugin.ui.transition.value) await sleep(600);
     canvas.addEventListener('click', click);
-    document.addEventListener('keyup', key);
 });
 
 onUnmounted(() => {
-    document.removeEventListener('keyup', key);
+    gameKey.dispose(props.ui.symbol);
 });
 
 function selectChapter(delta: number) {

src/ui/toolbox.vue

@@ -235,6 +235,9 @@ gameKey
     })
     .realize('confirm', () => {
         use(selected.value);
+    })
+    .realize('toolbox', () => {
+        exit();
     });
 
 onUnmounted(() => {