chore:修正存档界面按键监听事件的命名

packages-user/client-modules/src/action/hotkey.ts

@@ -434,7 +434,45 @@ gameKey
         id: '@fly_right_t_2',
         name: '后10张地图_2',
         defaults: KeyCode.PageUp
+    })
+    // #region 存档界面
+    .group('@ui_save', 'save')
+    .register({
+        id: '@save_exit',
+        name: '退出存档界面',
+        defaults: KeyCode.KeyS
+    })
+    .register({
+        id: '@save_pageUp',
+        name: '存档向后翻页',
+        defaults: KeyCode.PageUp
+    })
+    .register({
+        id: '@save_pageDown',
+        name: '存档向前翻页',
+        defaults: KeyCode.PageDown
+    })
+    .register({
+        id: '@save_up',
+        name: '存档选择框向上',
+        defaults: KeyCode.UpArrow
+    })
+    .register({
+        id: '@save_down',
+        name: '存档选择框向下',
+        defaults: KeyCode.DownArrow
+    })
+    .register({
+        id: '@save_left',
+        name: '存档选择框向左',
+        defaults: KeyCode.LeftArrow
+    })
+    .register({
+        id: '@save_right',
+        name: '存档选择框向右',
+        defaults: KeyCode.RightArrow
     });
+// #endregion
 
 gameKey.enable();
 gameKey.use(mainScope);

packages-user/client-modules/src/render/ui/save.tsx

@@ -7,7 +7,7 @@ import {
     SetupComponentOptions,
     UIComponentProps
 } from '@motajs/system-ui';
-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref, computed } from 'vue';
 import { Background, Page, PageExpose } from '../components';
 import { useKey } from '../use';
 import { MAP_WIDTH, MAP_HEIGHT } from '../shared';
@@ -19,6 +19,7 @@ export interface SaveProps extends UIComponentProps, DefaultProps {
 export interface SaveBtnProps extends DefaultProps {
     loc: ElementLocator;
     index: number;
+    isSelected: boolean;
     isDelete: boolean;
 }
 
@@ -37,26 +38,34 @@ const saveProps = {
 } satisfies SetupComponentOptions<SaveProps, SaveEmits, keyof SaveEmits>;
 
 const saveBtnProps = {
-    props: ['loc', 'index', 'isDelete']
+    props: ['loc', 'index', 'isSelected', 'isDelete']
 } satisfies SetupComponentOptions<SaveBtnProps>;
 
 export const SaveBtn = defineComponent<SaveBtnProps>(props => {
     const w = props.loc[2] ?? 200;
-    const text = props.index === -1 ? '自动存档' : `存档${props.index + 1}`;
     const font = new Font('normal', 18);
+    const text = computed(() =>
+        props.index === -1 ? '自动存档' : `存档${props.index + 1}`
+    );
+    const strokeStyle = computed(() => {
+        if (props.isSelected) return props.isDelete ? 'red' : 'gold';
+        else return 'white';
+    });
+    const lineWidth = computed(() => (props.isSelected ? 2 : 1));
     return () => (
         <container loc={props.loc}>
             <text
-                text={text}
+                text={text.value}
                 font={font}
                 loc={[w / 2, 0, void 0, void 0, 0.5, 0]}
             />
             <g-rect
-                loc={[0, 20, w, w]}
+                loc={[lineWidth.value, 20, w - 2 * lineWidth.value, w]}
                 fill
                 stroke
                 fillStyle="gray"
-                strokeStyle={props.isDelete ? 'red' : 'white'}
+                strokeStyle={strokeStyle.value}
+                lineWidth={lineWidth.value}
             />
             <text
                 text="placeholder"
@@ -76,22 +85,21 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
         // onEmit 事件在点击存档或按键确认时触发
         // 存读档执行函数在 ../../utils/saves.ts
 
+        const row = 2;
+        const column = 3;
         /** 除自动存档外，每一页容纳的存档数量 */
-        const pageCap = 5;
+        const pageCap = row * column - 1;
         const font = new Font('normal', 18);
 
         const isDelete = ref(false);
         const pageRef = ref<PageExpose>();
-
+        /** 当前页上被选中的存档的序号 只会是0到5 */
-        // 参考 ../../action/hotkey.ts 中的按键定义
+        const pickIndex = ref(1);
-        const [key] = useKey();
-        key.realize('confirm', () => {});
-        key.realize('exit', () => {});
-        // 其他按键自定义，需要新开一个 save 的 group
 
         const emitSave = (index: number) => {
             if (isDelete.value) emit('delete', index);
             else emit('emit', index);
+            pickIndex.value = (index % pageCap) + 1;
         };
 
         const wheel = (ev: IWheelEvent) => {
@@ -112,6 +120,76 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
             props.controller.close(props.instance);
         };
 
+        // 参考 ../../action/hotkey.ts 中的按键定义
+        const [key] = useKey();
+        key.realize('confirm', () => {
+            const currPage = pageRef.value?.now();
+            if (currPage == null) return;
+            emitSave(pageCap * currPage + pickIndex.value);
+        })
+            .realize('exit', exit)
+            .realize('save_exit', exit)
+            .realize(
+                'save_pageUp',
+                () => {
+                    pageRef.value?.movePage(1);
+                },
+                { type: 'down-repeat' }
+            )
+            .realize(
+                'save_pageDown',
+                () => {
+                    pageRef.value?.movePage(-1);
+                },
+                { type: 'down-repeat' }
+            )
+            .realize(
+                'save_up',
+                () => {
+                    if (pickIndex.value >= row) pickIndex.value -= column;
+                    else {
+                        pickIndex.value += pageCap + 1 - column;
+                        pageRef.value?.movePage(-1);
+                    }
+                },
+                { type: 'down-repeat' }
+            )
+            .realize(
+                'save_down',
+                () => {
+                    if (pickIndex.value <= pageCap - row)
+                        pickIndex.value += column;
+                    else {
+                        pickIndex.value += column - pageCap - 1;
+                        pageRef.value?.movePage(1);
+                    }
+                },
+                { type: 'down-repeat' }
+            )
+            .realize(
+                'save_left',
+                () => {
+                    if (pickIndex.value > 0) pickIndex.value--;
+                    else {
+                        pickIndex.value = pageCap;
+                        pageRef.value?.movePage(-1);
+                    }
+                },
+                { type: 'down-repeat' }
+            )
+            .realize(
+                'save_right',
+                () => {
+                    if (pickIndex.value < pageCap) pickIndex.value++;
+                    else {
+                        pickIndex.value = 0;
+                        pageRef.value?.movePage(1);
+                    }
+                },
+                { type: 'down-repeat' }
+            );
+        // 其他按键自定义，需要新开一个 save 的 group
+
         return () => (
             <container loc={props.loc}>
                 <Background loc={[0, 0, MAP_WIDTH, MAP_HEIGHT]} color="black" />
@@ -126,6 +204,7 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
                             <SaveBtn
                                 loc={[30, 50, 120, 170]}
                                 index={-1}
+                                isSelected={pickIndex.value === 0}
                                 isDelete={isDelete.value}
                                 onClick={() => emitSave(-1)}
                                 cursor="pointer"
@@ -133,6 +212,7 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
                             <SaveBtn
                                 loc={[180, 50, 120, 170]}
                                 index={page * pageCap}
+                                isSelected={pickIndex.value === 1}
                                 isDelete={isDelete.value}
                                 onClick={() => emitSave(page * pageCap)}
                                 cursor="pointer"
@@ -140,6 +220,7 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
                             <SaveBtn
                                 loc={[330, 50, 120, 170]}
                                 index={page * pageCap + 1}
+                                isSelected={pickIndex.value === 2}
                                 isDelete={isDelete.value}
                                 onClick={() => emitSave(page * pageCap + 1)}
                                 cursor="pointer"
@@ -147,6 +228,7 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
                             <SaveBtn
                                 loc={[30, 230, 120, 170]}
                                 index={page * pageCap + 2}
+                                isSelected={pickIndex.value === 3}
                                 isDelete={isDelete.value}
                                 onClick={() => emitSave(page * pageCap + 2)}
                                 cursor="pointer"
@@ -154,6 +236,7 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
                             <SaveBtn
                                 loc={[180, 230, 120, 170]}
                                 index={page * pageCap + 3}
+                                isSelected={pickIndex.value === 4}
                                 isDelete={isDelete.value}
                                 onClick={() => emitSave(page * pageCap + 3)}
                                 cursor="pointer"
@@ -161,6 +244,7 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
                             <SaveBtn
                                 loc={[330, 230, 120, 170]}
                                 index={page * pageCap + 4}
+                                isSelected={pickIndex.value === 5}
                                 isDelete={isDelete.value}
                                 onClick={() => emitSave(page * pageCap + 4)}
                                 cursor="pointer"