chore: UI 改成全覆盖

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

@@ -9,6 +9,7 @@ import { createLoopMap } from './loopMap';
 import { createGameCanvas } from './legacy/gameCanvas';
 import { createElements } from './elements';
 import { mainRenderer } from './renderer';
+import { createUI } from './ui';
 
 export function createGameRenderer() {
     const App = defineComponent(_props => {
@@ -37,6 +38,7 @@ export function createGameRenderer() {
 }
 
 export function createRender() {
+    createUI();
     createGameCanvas();
     createItemDetail();
     createLoopMap();

packages-user/client-modules/src/render/ui/controller.ts

@@ -1,3 +0,0 @@
-import { UIController } from '@motajs/system-ui';
-
-export const mainUIController = new UIController('main-ui');

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

@@ -0,0 +1,33 @@
+import { DefaultProps } from '@motajs/render-vue';
+import {
+    GameUI,
+    SetupComponentOptions,
+    UIComponentProps,
+    UIController
+} from '@motajs/system-ui';
+import { defineComponent } from 'vue';
+import { MAIN_HEIGHT, MAIN_WIDTH } from '../shared';
+
+export const mainUIController = new UIController('main-ui');
+
+export interface MainBackgroundProps extends DefaultProps, UIComponentProps {}
+
+const mainBackgroundProps = {
+    props: ['controller', 'instance']
+} satisfies SetupComponentOptions<MainBackgroundProps>;
+
+export const MainBackground = defineComponent<MainBackgroundProps>(() => {
+    return () => (
+        <g-rect
+            loc={[0, 0, MAIN_WIDTH, MAIN_HEIGHT]}
+            fill
+            fillStyle="rgba(0, 0, 0, 0.8)"
+        />
+    );
+}, mainBackgroundProps);
+
+export const MainBackgroundUI = new GameUI('main-background', MainBackground);
+
+export function createMainController() {
+    mainUIController.setBackground(MainBackgroundUI, {});
+}

packages-user/client-modules/src/render/ui/index.ts

@@ -1,3 +1,9 @@
+import { createMainController } from './controller';
+
+export function createUI() {
+    createMainController();
+}
+
 export * from './controller';
 export * from './main';
 export * from './save';

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

@@ -8,7 +8,7 @@ import {
     UIComponentProps
 } from '@motajs/system-ui';
 import { defineComponent, ref, computed } from 'vue';
-import { Background, Page, PageExpose } from '../components';
+import { Page, PageExpose } from '../components';
 import { useKey } from '../use';
 import { MAP_WIDTH, MAP_HEIGHT } from '../shared';
 
@@ -44,6 +44,7 @@ const saveBtnProps = {
 export const SaveBtn = defineComponent<SaveBtnProps>(props => {
     const w = props.loc[2] ?? 200;
     const font = new Font('normal', 18);
+    const statusFont = new Font('normal', 14);
     const text = computed(() =>
         props.index === -1 ? '自动存档' : `存档${props.index + 1}`
     );
@@ -57,10 +58,10 @@ export const SaveBtn = defineComponent<SaveBtnProps>(props => {
             <text
                 text={text.value}
                 font={font}
-                loc={[w / 2, 0, void 0, void 0, 0.5, 0]}
+                loc={[w / 2, 20, void 0, void 0, 0.5, 1]}
             />
             <g-rect
-                loc={[lineWidth.value, 20, w - 2 * lineWidth.value, w]}
+                loc={[lineWidth.value, 24, w - 2 * lineWidth.value, w]}
                 fill
                 stroke
                 fillStyle="gray"
@@ -71,8 +72,8 @@ export const SaveBtn = defineComponent<SaveBtnProps>(props => {
             <text
                 text="placeholder"
                 fillStyle="yellow"
-                font={font}
-                loc={[w / 2, w + 20, void 0, void 0, 0.5, 0]}
+                font={statusFont}
+                loc={[w / 2, w + 28, void 0, void 0, 0.5, 0]}
             />
         </container>
     );
@@ -80,12 +81,6 @@ export const SaveBtn = defineComponent<SaveBtnProps>(props => {
 
 export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
     (props, { emit }) => {
-        // 这些注释写完之后删了
-        // 这里是 UI 部分，不负责任何存读档操作，这些在特定场景下传入 onEmit 来实现
-        // 缩略图暂用 container 元素替代，点击时触发 onEmit
-        // onEmit 事件在点击存档或按键确认时触发
-        // 存读档执行函数在 ../../utils/saves.ts
-
         const row = 2;
         const column = 3;
         /** 除自动存档外，每一页容纳的存档数量 */
@@ -122,7 +117,6 @@ 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();
@@ -148,10 +142,17 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
             .realize(
                 '@save_up',
                 () => {
-                    if (pickIndex.value >= row) pickIndex.value -= column;
-                    else {
-                        pickIndex.value += pageCap + 1 - column;
-                        pageRef.value?.movePage(-1);
+                    if (!pageRef.value) return;
+                    const now = pageRef.value.now();
+                    if (pickIndex.value >= row) {
+                        pickIndex.value -= column;
+                    } else {
+                        if (now === 0) {
+                            pickIndex.value = 0;
+                        } else {
+                            pickIndex.value += pageCap + 1 - column;
+                            pageRef.value?.movePage(-1);
+                        }
                     }
                 },
                 { type: 'down-repeat' }
@@ -171,10 +172,15 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
             .realize(
                 '@save_left',
                 () => {
-                    if (pickIndex.value > 0) pickIndex.value--;
-                    else {
-                        pickIndex.value = pageCap;
-                        pageRef.value?.movePage(-1);
+                    if (!pageRef.value) return;
+                    const now = pageRef.value.now();
+                    if (pickIndex.value > 0) {
+                        pickIndex.value--;
+                    } else {
+                        if (now > 0) {
+                            pickIndex.value = pageCap;
+                            pageRef.value?.movePage(-1);
+                        }
                     }
                 },
                 { type: 'down-repeat' }
@@ -190,11 +196,9 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
                 },
                 { type: 'down-repeat' }
             );
-        // 其他按键自定义，需要新开一个 save 的 group
 
         return () => (
-            <container loc={props.loc}>
-                <Background loc={[0, 0, MAP_WIDTH, MAP_HEIGHT]} color="black" />
+            <container loc={props.loc} zIndex={10}>
                 <Page
                     loc={[0, 0, MAP_WIDTH, MAP_HEIGHT - 10]}
                     pages={1000}

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

@@ -21,9 +21,9 @@ import { KeyCode } from '@motajs/client-base';
 import { Progress } from '../components/misc';
 import { generateBinary } from '@motajs/legacy-common';
 import { SetupComponentOptions } from '@motajs/system-ui';
-import { selectSave } from './save';
+import { SaveUI } from './save';
 import { mainUIController } from '@user/client-modules';
-import { STATUS_BAR_WIDTH, MAP_WIDTH, MAP_HEIGHT } from '../shared';
+import { MAIN_WIDTH, MAIN_HEIGHT } from '../shared';
 
 interface ToolbarProps extends DefaultProps {
     loc?: ElementLocator;
@@ -88,19 +88,7 @@ export const PlayingToolbar = defineComponent<
     const tool = () => core.openToolbox(true);
     const fly = () => core.useFly(true);
     const save = async () => {
-        const index = await selectSave(mainUIController, [
-            STATUS_BAR_WIDTH,
-            0,
-            MAP_WIDTH,
-            MAP_HEIGHT
-        ]);
-        if (index === -2) {
-            // 如果用户未选择存档，而是关闭了存档。
-            console.log('用户关闭了存档界面。');
-        } else {
-            // 用户选择了一个存档。
-            console.log('用户选择在存档位' + index + '保存。');
-        }
+        mainUIController.open(SaveUI, { loc: [0, 0, MAIN_WIDTH, MAIN_HEIGHT] });
     };
     const load = () => core.load(true);
     const equip = () => core.openEquipbox(true);