feat: 设置界面换用新的

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

@@ -435,11 +435,6 @@ gameKey
     })
     // #region 存档界面
     .group('@ui_save', 'save')
-    .register({
-        id: '@save_exit',
-        name: '退出存档界面',
-        defaults: KeyCode.KeyS
-    })
     .register({
         id: '@save_pageUp',
         name: '存档向后翻页',
@@ -485,9 +480,6 @@ gameKey
     .realize('book', () => {
         core.openBook(true);
     })
-    .realize('load', () => {
-        core.load(true);
-    })
     .realize('toolbox', () => {
         core.openToolbox(true);
     })
@@ -497,9 +489,6 @@ gameKey
     .realize('fly', () => {
         core.useFly(true);
     })
-    .realize('menu', () => {
-        core.openSettings(true);
-    })
     .realize('replay', () => {
         core.ui._drawReplay();
     })

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

@@ -1,6 +1,12 @@
 import { gameKey } from '@motajs/system-action';
 import { MAIN_WIDTH, MAIN_HEIGHT } from './shared';
-import { saveSave, mainUIController, openStatistics } from './ui';
+import {
+    saveSave,
+    mainUIController,
+    openStatistics,
+    saveLoad,
+    openSettings
+} from './ui';
 
 export function createAction() {
     gameKey
@@ -9,5 +15,11 @@ export function createAction() {
         })
         .realize('statistics', () => {
             openStatistics(mainUIController);
+        })
+        .realize('load', () => {
+            saveLoad(mainUIController, [0, 0, MAIN_WIDTH, MAIN_HEIGHT]);
+        })
+        .realize('menu', () => {
+            openSettings(mainUIController, [420, 240, 240, 400, 0.5, 0.5]);
         });
 }

packages-user/client-modules/src/render/components/choices.tsx

@@ -144,7 +144,7 @@ export const ConfirmBox = defineComponent<
             <Background
                 loc={[0, 0, props.width, height.value]}
                 winskin={props.winskin}
-                color={props.color}
+                color={props.color ?? '#333'}
                 border={props.border}
                 zIndex={0}
             />
@@ -444,11 +444,13 @@ export const Choices = defineComponent<
         }
     });
     key.realize('moveDown', () => {
+        const page = pageCom.value?.now() ?? 0;
         if (selected.value === choiceCountPerPage.value - 1) {
-            pageCom.value?.movePage(1);
+            if (page < pages.value - 1) {
-            selected.value = 0;
+                pageCom.value?.movePage(1);
+                selected.value = 0;
+            }
         } else {
-            const page = pageCom.value?.now() ?? 1;
             const index = page * choiceCountPerPage.value + selected.value;
             if (index < props.choices.length - 1) {
                 selected.value++;
@@ -458,7 +460,7 @@ export const Choices = defineComponent<
     key.realize('moveLeft', () => pageCom.value?.movePage(-1));
     key.realize('moveRight', () => pageCom.value?.movePage(1));
     key.realize('confirm', () => {
-        const page = pageCom.value?.now() ?? 1;
+        const page = pageCom.value?.now() ?? 0;
         const index = page * choiceCountPerPage.value + selected.value;
         emit('choose', props.choices[index][0]);
     });

packages-user/client-modules/src/render/components/misc.tsx

@@ -309,8 +309,8 @@ export const Selection = defineComponent<SelectionProps>(props => {
         isWinskin.value ? core.material.images.images[props.winskin!] : null
     );
     const fixedLoc = computed<ElementLocator>(() => {
-        const [x = 0, y = 0, width = 200, height = 200] = props.loc;
+        const [x = 0, y = 0, width = 200, height = 200, ax, ay] = props.loc;
-        return [x + 1, y + 1, width - 2, height - 2];
+        return [x + 1, y + 1, width - 2, height - 2, ax, ay];
     });
 
     const renderWinskin = (canvas: MotaOffscreenCanvas2D) => {

packages-user/client-modules/src/render/components/textbox.tsx

@@ -135,13 +135,11 @@ export const TextContent = defineComponent<
         }
         renderable = [];
 
-        spriteElement.value?.requestBeforeFrame(() => {
+        typer.setConfig(props);
-            typer.setConfig(props);
+        typer.setText(props.text ?? '');
-            typer.setText(props.text ?? '');
+        typer.type();
-            typer.type();
+        needUpdate = false;
-            needUpdate = false;
+        updateLoc();
-            updateLoc();
-        });
     };
 
     const showAll = () => {

packages-user/client-modules/src/render/index.tsx

@@ -1,4 +1,4 @@
-import { createApp } from '@motajs/render';
+import { createApp, Font } from '@motajs/render';
 import { defineComponent } from 'vue';
 import { MAIN_HEIGHT, MAIN_WIDTH } from './shared';
 import { loading } from '@user/data-base';
@@ -37,6 +37,8 @@ export function createRender() {
         sceneController.open(GameTitleUI, {});
         mainRenderer.show();
     });
+
+    Font.setDefaults(new Font('normal', 18));
 }
 
 export * from './components';

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

@@ -14,15 +14,22 @@ import {
     onMounted,
     shallowReactive
 } from 'vue';
-import { Page, PageExpose } from '../components';
+import { getConfirm, Page, PageExpose } from '../components';
 import { useKey } from '../use';
 import { MAP_WIDTH } from '../shared';
 import { getSave, SaveData } from '../utils';
 import { Thumbnail } from '../components/thumbnail';
 import { adjustGrid, IGridLayoutData } from '../utils/layout';
 
+export const enum SaveMode {
+    Save,
+    Load,
+    Other
+}
+
 export interface SaveProps extends UIComponentProps, DefaultProps {
     loc: ElementLocator;
+    mode: SaveMode;
 }
 
 export interface SaveItemProps extends DefaultProps {
@@ -43,7 +50,7 @@ export type SaveEmits = {
 };
 
 const saveProps = {
-    props: ['loc', 'controller', 'instance'],
+    props: ['loc', 'controller', 'instance', 'mode'],
     emits: ['delete', 'emit', 'exit']
 } satisfies SetupComponentOptions<SaveProps, SaveEmits, keyof SaveEmits>;
 
@@ -63,7 +70,7 @@ export const SaveItem = defineComponent<SaveItemProps>(props => {
     });
 
     const name = computed(() => {
-        return props.index === -1 ? '自动存档' : `存档${props.index}`;
+        return props.index === 0 ? '自动存档' : `存档${props.index}`;
     });
     const statusText = computed(() => {
         if (!props.data) return '';
@@ -181,23 +188,25 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
          */
         const getPosIndex = (index: number) => {
             if (index === -1) return 0;
-            return index % (grid.value.count - 1);
+            return (index % (grid.value.count - 1)) + 1;
         };
 
         /**
          * 获取存档的总序号，从 0 开始，用于数据交互。
          */
         const getIndex = (posIndex: number, page: number) => {
-            return page * grid.value.count + posIndex - 1;
+            return page * (grid.value.count - 1) + posIndex - 1;
         };
 
         const updateDataList = async (page: number) => {
-            const promises: Promise<SaveData | null>[] = [];
+            const promises: Promise<SaveData | null>[] = [getSave(0)];
-            for (let i = 0; i < grid.value.count; i++) {
+            for (let i = 1; i < grid.value.count; i++) {
                 const index = getIndex(i, page);
-                promises.push(getSave(index));
+                promises.push(getSave(index + 1));
             }
+            const before = now.value;
             const data = await Promise.all(promises);
+            if (before !== now.value) return;
 
             data.forEach((v, i) => {
                 if (v) {
@@ -217,14 +226,28 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
         };
 
         onMounted(() => {
+            const startIndex = getPosIndex(core.saves.saveIndex);
+            selected.value = startIndex;
+            pageRef.value?.changePage(
+                Math.floor(core.saves.saveIndex / (grid.value.count - 1))
+            );
             updateDataList(now.value);
         });
 
-        const emitSave = (index: number) => {
+        const emitSave = async (index: number) => {
             const posIndex = getPosIndex(index);
             if (inDelete.value) {
-                emit('delete', index, exist(posIndex));
+                const confirm = await getConfirm(
-                deleteData(posIndex);
+                    props.controller,
+                    `确认要删除存档 ${index + 1}？`,
+                    [420, 240, void 0, void 0, 0.5, 0.5],
+                    240,
+                    { winskin: 'winskin2.png' }
+                );
+                if (confirm) {
+                    emit('delete', index, exist(posIndex));
+                    deleteData(posIndex);
+                }
             } else {
                 emit('emit', index, exist(posIndex));
             }
@@ -260,11 +283,18 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
             if (selected.value === 0) {
                 emitSave(-1);
             } else {
-                emitSave((grid.value.count - 1) * now.value + selected.value);
+                emitSave(
+                    (grid.value.count - 1) * now.value + selected.value - 1
+                );
             }
         })
             .realize('exit', exit)
-            .realize('@save_exit', exit)
+            .realize('save', () => {
+                if (props.mode === SaveMode.Save) exit();
+            })
+            .realize('load', () => {
+                if (props.mode === SaveMode.Load) exit();
+            })
             .realize(
                 '@save_pageUp',
                 () => {
@@ -345,7 +375,7 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
             );
 
         return () => (
-            <container loc={props.loc} zIndex={10}>
+            <container loc={props.loc}>
                 <Page
                     ref={pageRef}
                     loc={[0, 0, width.value, height.value - 10]}
@@ -360,7 +390,7 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
                             {grid.value.locs.map((v, i) => {
                                 const count = grid.value.count;
                                 const rawIndex = (count - 1) * page + i;
-                                const index = i === 0 ? -1 : rawIndex;
+                                const index = i === 0 ? 0 : rawIndex;
                                 return (
                                     <SaveItem
                                         loc={v}
@@ -368,7 +398,7 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
                                         selected={selected.value === i}
                                         inDelete={inDelete.value}
                                         data={saveData[i]}
-                                        onClick={() => emitSave(index)}
+                                        onClick={() => emitSave(index - 1)}
                                         onEnter={() => (selected.value = i)}
                                     />
                                 );
@@ -434,6 +464,7 @@ export type SaveValidationFunction = (
 export function selectSave(
     controller: IUIMountable,
     loc: ElementLocator,
+    mode: SaveMode,
     validate?: SaveValidationFunction,
     props?: SaveProps
 ) {
@@ -449,6 +480,7 @@ export function selectSave(
         const instance = controller.open(SaveUI, {
             loc,
             ...props,
+            mode,
             onEmit: (index: number, exist: boolean) => {
                 if (!validate) {
                     controller.close(instance);
@@ -491,8 +523,15 @@ export async function saveSave(
             return { message: '', valid: true };
         }
     };
-    const index = await selectSave(controller, loc, validate, props);
+    const index = await selectSave(
+        controller,
+        loc,
+        SaveMode.Save,
+        validate,
+        props
+    );
     if (index === -2) return false;
+    core.saves.saveIndex = index;
     core.doSL(index + 1, 'save');
     return true;
 }
@@ -505,10 +544,16 @@ export async function saveLoad(
     const validate = (_: number, exist: boolean): SaveValidation => {
         return { message: '无效的存档！', valid: exist };
     };
-    const index = await selectSave(controller, loc, validate, props);
+    const index = await selectSave(
+        controller,
+        loc,
+        SaveMode.Load,
+        validate,
+        props
+    );
     if (index === -2) return false;
     if (index === -1) {
-        core.doSL('autosave', 'load');
+        core.doSL('autoSave', 'load');
     } else {
         core.doSL(index + 1, 'load');
     }

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

@@ -1,6 +1,7 @@
 import { ElementLocator } from '@motajs/render';
 import {
     GameUI,
+    IUIMountable,
     SetupComponentOptions,
     UIComponentProps
 } from '@motajs/system-ui';
@@ -21,13 +22,15 @@ import { getAllSavesData, getSaveData, syncFromServer } from '../utils';
 import { getInput } from '../components/input';
 import { openStatistics } from './statistics';
 
-export interface SettingsProps extends Partial<ChoicesProps>, UIComponentProps {
+export interface MainSettingsProps
+    extends Partial<ChoicesProps>,
+        UIComponentProps {
     loc: ElementLocator;
 }
 
-const settingsProps = {
+const mainSettingsProps = {
     props: ['loc', 'controller', 'instance']
-} satisfies SetupComponentOptions<SettingsProps>;
+} satisfies SetupComponentOptions<MainSettingsProps>;
 
 const enum MainChoice {
     SystemSetting,
@@ -43,7 +46,7 @@ const enum MainChoice {
     Back
 }
 
-export const MainSettings = defineComponent<SettingsProps>(props => {
+export const MainSettings = defineComponent<MainSettingsProps>(props => {
     const choices: ChoiceItem[] = [
         [MainChoice.SystemSetting, '系统设置'],
         [MainChoice.VirtualKey, '虚拟键盘'],
@@ -106,9 +109,11 @@ export const MainSettings = defineComponent<SettingsProps>(props => {
             choices={choices}
             width={240}
             onChoose={choose}
+            maxHeight={400}
+            interval={8}
         />
     );
-}, settingsProps);
+}, mainSettingsProps);
 
 const enum ReplayChoice {
     Start,
@@ -120,7 +125,7 @@ const enum ReplayChoice {
     Back
 }
 
-export const ReplaySettings = defineComponent<SettingsProps>(props => {
+export const ReplaySettings = defineComponent<MainSettingsProps>(props => {
     const choice: ChoiceItem[] = [
         [ReplayChoice.Start, '从头回放录像'],
         [ReplayChoice.StartFromSave, '从存档开始回放'],
@@ -186,9 +191,10 @@ export const ReplaySettings = defineComponent<SettingsProps>(props => {
             choices={choice}
             width={240}
             onChoose={choose}
+            interval={8}
         />
     );
-}, settingsProps);
+}, mainSettingsProps);
 
 const enum GameInfoChoice {
     Statistics,
@@ -199,7 +205,7 @@ const enum GameInfoChoice {
     Back
 }
 
-export const GameInfo = defineComponent<SettingsProps>(props => {
+export const GameInfo = defineComponent<MainSettingsProps>(props => {
     const choices: ChoiceItem[] = [
         [GameInfoChoice.Statistics, '数据统计'],
         [GameInfoChoice.Project, '查看工程'],
@@ -272,9 +278,10 @@ export const GameInfo = defineComponent<SettingsProps>(props => {
             choices={choices}
             width={240}
             onChoose={choose}
+            interval={8}
         />
     );
-});
+}, mainSettingsProps);
 
 const enum SyncSaveChoice {
     // ----- 主菜单
@@ -289,7 +296,7 @@ const enum SyncSaveChoice {
     NowSave
 }
 
-export const SyncSave = defineComponent<SettingsProps>(props => {
+export const SyncSave = defineComponent<MainSettingsProps>(props => {
     const choices: ChoiceItem[] = [
         [SyncSaveChoice.ToServer, '同步存档至服务器'],
         [SyncSaveChoice.FromServer, '从服务器加载存档'],
@@ -340,11 +347,12 @@ export const SyncSave = defineComponent<SettingsProps>(props => {
             width={240}
             choices={choices}
             onChoose={choose}
+            interval={8}
         />
     );
-});
+}, mainSettingsProps);
 
-export const SyncSaveSelect = defineComponent<SettingsProps>(props => {
+export const SyncSaveSelect = defineComponent<MainSettingsProps>(props => {
     const choices: ChoiceItem[] = [
         [SyncSaveChoice.AllSaves, '同步全部存档'],
         [SyncSaveChoice.NowSave, '同步当前存档'],
@@ -392,11 +400,12 @@ export const SyncSaveSelect = defineComponent<SettingsProps>(props => {
             width={240}
             choices={choices}
             onChoose={choose}
+            interval={8}
         />
     );
-});
+}, mainSettingsProps);
 
-export const DownloadSaveSelect = defineComponent<SettingsProps>(props => {
+export const DownloadSaveSelect = defineComponent<MainSettingsProps>(props => {
     const choices: ChoiceItem[] = [
         [SyncSaveChoice.AllSaves, '下载全部存档'],
         [SyncSaveChoice.NowSave, '下载当前存档'],
@@ -460,11 +469,12 @@ export const DownloadSaveSelect = defineComponent<SettingsProps>(props => {
             width={240}
             choices={choices}
             onChoose={choose}
+            interval={8}
         />
     );
-});
+}, mainSettingsProps);
 
-export const ClearSaveSelect = defineComponent<SettingsProps>(props => {
+export const ClearSaveSelect = defineComponent<MainSettingsProps>(props => {
     const choices: ChoiceItem[] = [
         [SyncSaveChoice.AllSaves, '清空全部塔存档'],
         [SyncSaveChoice.NowSave, '清空当前塔存档'],
@@ -568,9 +578,10 @@ export const ClearSaveSelect = defineComponent<SettingsProps>(props => {
             width={240}
             choices={choices}
             onChoose={choose}
+            interval={8}
         />
     );
-});
+}, mainSettingsProps);
 
 /** @see {@link MainSettings} */
 export const MainSettingsUI = new GameUI('main-settings', MainSettings);
@@ -592,3 +603,14 @@ export const ClearSaveSelectUI = new GameUI(
     'clear-save-select',
     ClearSaveSelect
 );
+
+export function openSettings(
+    controller: IUIMountable,
+    loc: ElementLocator,
+    props?: MainSettingsProps
+) {
+    controller.open(MainSettingsUI, {
+        ...props,
+        loc
+    });
+}

packages-user/client-modules/src/render/utils/saves.ts

@@ -25,7 +25,7 @@ export function getSave(index: number) {
             const content = {
                 name: core.firstData.name,
                 version: core.firstData.version,
-                data: data instanceof Array ? data[0] : data
+                data: data instanceof Array ? data.at(-1)! : data
             };
             res(content);
         });

packages/system-ui/src/container.tsx

@@ -24,17 +24,19 @@ export const UIContainer = defineComponent<UIContainerProps>(props => {
                     instance={b}
                     key={b.key}
                     hidden={b.hidden && !b.alwaysShow}
+                    zIndex={0}
                 ></b.ui.component>
             );
         }
         return elements.concat(
-            data.stack.map(v => (
+            data.stack.map((v, i) => (
                 <v.ui.component
                     {...v.vBind}
                     key={v.key}
                     controller={data}
                     instance={v}
                     hidden={v.hidden && !v.alwaysShow}
+                    zIndex={i * 5}
                 ></v.ui.component>
             ))
         );

src/types/declaration/control.d.ts

@@ -636,7 +636,7 @@ interface Control {
     /**
      * 获得某个存档内容
      */
-    getSave(index: number, callback?: (data?: Save) => void): void;
+    getSave(index: number, callback?: (data?: Save | Save[]) => void): void;
 
     /**
      * 获得某些存档内容