refactor: 迁移旧ui至新ui系统

public/project/functions.js

@@ -405,16 +405,18 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a = {
                     break;
                 case 67: // C：怪物临界
                     if (core.getBlockCls(mx, my)?.startsWith('enemy')) {
-                        core.plugin.fixedDetailPanel = 'critical';
                         mota.plugin.fixed.showFixed.value = false;
-                        mota.plugin.ui.fixedDetailOpened.value = true;
+                        mota.ui.main.open('fixedDetail', void 0, {
+                            panel: 'critical'
+                        });
                     }
                     break;
                 case 69: // E：怪物属性
                     if (core.getBlockCls(mx, my)?.startsWith('enemy')) {
-                        core.plugin.fixedDetailPanel = 'special';
                         mota.plugin.fixed.showFixed.value = false;
-                        mota.plugin.ui.fixedDetailOpened.value = true;
+                        mota.ui.main.open('fixedDetail', void 0, {
+                            panel: 'special'
+                        });
                     }
                     break;
                 case 77: // M：快速标记

public/project/items.js

@@ -1161,21 +1161,21 @@ var items_296f5d02_12fd_4166_a7c1_b5e830c9ee3a =
 		"name": "bgm查看器",
 		"canUseItemEffect": "true",
 		"text": "可以查看游戏内你已经听过的bgm，歌曲名格式：歌手——歌曲名。未完工。",
-		"useItemEffect": "mota.plugin.utils.tip('warn', '当前道具还未制作完成！');\n// mota.plugin.ui.bgmOpened.value = true;"
+		"useItemEffect": "mota.plugin.utils.tip('warn', '当前道具还未制作完成！');\n// mota.ui.main.open('bgm');"
 	},
 	"I559": {
 		"cls": "constants",
 		"name": "系统设置",
 		"canUseItemEffect": "true",
 		"text": "内含所有系统设置项",
-		"useItemEffect": "if (!core.isReplaying()) mota.plugin.ui.settingsOpened.value = true;"
+		"useItemEffect": "if (!core.isReplaying()) mota.ui.main.open('settings');"
 	},
 	"I560": {
 		"cls": "constants",
 		"name": "百科全书",
 		"canUseItemEffect": "true",
 		"text": "一个包含游戏中所有功能详细说明的百科全书，可以查看游戏中所有的功能",
-		"useItemEffect": "if (!core.isReplaying()) mota.plugin.ui.descOpened.value = true;"
+		"useItemEffect": "if (!core.isReplaying()) mota.ui.main.open('desc');"
 	},
 	"I565": {
 		"cls": "constants",
@@ -1233,7 +1233,7 @@ var items_296f5d02_12fd_4166_a7c1_b5e830c9ee3a =
 		"cls": "constants",
 		"name": "成就",
 		"canUseItemEffect": "true",
-		"useItemEffect": "mota.plugin.ui.achievementOpened.value = true;",
+		"useItemEffect": "mota.ui.main.open('achievement');",
 		"text": "可以查看成就"
 	}
 }

src/App.vue

@@ -1,20 +1,13 @@
 <template>
-    <!-- <div id="ui">
-        <template v-for="com of uiStack">
-            <component :is="com"></component>
-        </template>
-    </div> -->
     <div id="ui-new">
         <div id="ui-main">
             <div id="ui-list">
                 <div class="ui-one" v-for="ui of mainUi.stack">
-                    <template>
+                    <component
-                        <component
+                        :is="ui.ui.component"
-                            :is="ui.ui.component"
+                        v-on="ui.vOn ?? {}"
-                            v-on="ui.vOn ?? {}"
+                        v-bind="ui.vBind ?? {}"
-                            v-bind="ui.vBind ?? {}"
+                    ></component>
-                        ></component>
-                    </template>
                 </div>
             </div>
         </div>
@@ -64,9 +57,12 @@ onMounted(() => {
     height: 100vh;
     display: none;
     justify-content: center;
+    align-items: center;
     left: 0;
     top: 0;
     position: fixed;
+    background-color: #000b;
+    backdrop-filter: blur(5px);
 }
 
 #ui-list {

src/App2.vue

@@ -1,47 +0,0 @@
-<template>
-    <!-- <div id="non-ui">
-        <Start v-if="startOpened"></Start>
-        <StatusBar v-if="showStatusBar"></StatusBar>
-        <MarkedEnemy v-if="showMarkedEnemy && showStatusBar"></MarkedEnemy>
-        <Studied
-            v-if="showStudiedSkill && showStatusBar && showStudied"
-        ></Studied> 
-        <Fixed v-if="showStatusBar && useFixed"></Fixed>
-        <Chapter v-if="chapterShowed" :chapter="chapterContent"></Chapter>
-        <CompleteAchievement
-            v-if="showComplete"
-            :complete="completeAchi"
-        ></CompleteAchievement>
-    </div> -->
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import { showStatusBar, startOpened } from './plugin/uiController';
-import { chapterContent, chapterShowed } from './plugin/ui/chapter';
-import { showMarkedEnemy } from './plugin/mark';
-import { showComplete, completeAchi } from './plugin/ui/achievement';
-import MarkedEnemy from './ui/markedEnemy.vue';
-import StatusBar from './ui/statusBar.vue';
-import Chapter from './ui/chapter.vue';
-import Fixed from './ui/fixed.vue';
-import Start from './ui/start.vue';
-import CompleteAchievement from './ui/completeAchievement.vue';
-import { mainSetting } from './core/main/setting';
-
-const useFixed = ref(true);
-
-mainSetting.on('valueChange', (key, n, o) => {
-    if (key === 'action.fixed') useFixed.value = n as boolean;
-});
-</script>
-
-<style lang="less" scoped>
-#non-ui {
-    width: 0;
-    height: 0;
-    overflow: visible;
-    left: 0;
-    top: 0;
-}
-</style>

src/core/main/custom/hotkey.ts

@@ -302,9 +302,10 @@ hotkey
             const [x, y] = flags.mouseLoc ?? [];
             const [mx, my] = getLocFromMouseLoc(x, y);
             if (core.getBlockCls(mx, my)?.startsWith('enemy')) {
-                core.plugin.fixedDetailPanel = 'special';
                 mota.plugin.fixed.showFixed.value = false;
-                mota.plugin.ui.fixedDetailOpened.value = true;
+                mota.ui.main.open('fixedDetail', void 0, {
+                    panel: 'special'
+                });
             }
         }
     })
@@ -314,9 +315,10 @@ hotkey
             const [x, y] = flags.mouseLoc ?? [];
             const [mx, my] = getLocFromMouseLoc(x, y);
             if (core.getBlockCls(mx, my)?.startsWith('enemy')) {
-                core.plugin.fixedDetailPanel = 'critical';
                 mota.plugin.fixed.showFixed.value = false;
-                mota.plugin.ui.fixedDetailOpened.value = true;
+                mota.ui.main.open('fixedDetail', void 0, {
+                    panel: 'critical'
+                });
             }
         }
     })

src/core/main/custom/ui.ts

@@ -124,6 +124,12 @@ interface ShowableGameUi {
 type UiVOn = Record<string, (param?: any) => void>;
 type UiVBind = Record<string, any>;
 
+interface MountedVBind {
+    num: number;
+    ui: GameUi;
+    [x: string]: any;
+}
+
 export class GameUi extends EventEmitter<GameUiEvent> {
     static uiList: GameUi[] = [];
 
@@ -151,6 +157,11 @@ export class GameUi extends EventEmitter<GameUiEvent> {
 
 interface IndexedGameUi extends ShowableGameUi {
     num: number;
+    vBind?: MountedVBind;
+}
+
+interface HoldOnController {
+    end(): void;
 }
 
 export class UiController extends Focus<IndexedGameUi> {
@@ -166,11 +177,13 @@ export class UiController extends Focus<IndexedGameUi> {
         this.on('splice', spliced => {
             spliced.forEach(v => {
                 v.ui.emit('close');
-                if (this.stack.length === 0) {
-                    if (!this.hold) this.emit('end');
-                    this.hold = false;
-                }
             });
+            if (this.stack.length === 0) {
+                console.log(this.hold);
+
+                if (!this.hold) this.emit('end');
+                this.hold = false;
+            }
         });
         this.on('add', item => {
             if (this.stack.length === 1) {
@@ -201,11 +214,17 @@ export class UiController extends Focus<IndexedGameUi> {
      * 暂时保持下一次删除ui不会导致ui整体被关闭，引起ui背景闪烁。
      * 例如可以用于道具栏，打开道具时就应当 holdOn，然后通过道具使用钩子来判断接下来是否要隐藏 app:
      * ```txt
-     * hold on -> close -> use item -> hook -> stack.length === 0 ? hide app : no action
+     * hold on -> close -> use item -> hook -> stack.length === 0 ? end() : no action
      * ```
      */
-    holdOn() {
+    holdOn(): HoldOnController {
         this.hold = true;
+
+        return {
+            end: () => {
+                this.emit('end');
+            }
+        };
     }
 
     /**
@@ -222,7 +241,6 @@ export class UiController extends Focus<IndexedGameUi> {
      * @param id 要关闭的ui的id
      */
     closeByName(id: string) {
-        console.log(id);
         if (!this.equal) {
             const ui = this.stack.findIndex(v => v.ui.id === id);
             this.spliceIndex(ui);
@@ -245,7 +263,15 @@ export class UiController extends Focus<IndexedGameUi> {
         const ui = this.get(id);
         if (!ui) return -1;
         const num = this.num++;
-        this.add({ num, ...ui.with(vOn, vBind) });
+        const sui = ui.with(vOn, {
+            num,
+            ui,
+            ...(vBind ?? {})
+        });
+        this.add({
+            num,
+            ...sui
+        } as IndexedGameUi);
         return num;
     }
 
@@ -292,4 +318,12 @@ export class UiController extends Focus<IndexedGameUi> {
     getByNum(num: number) {
         return this.stack.find(v => v.num === num);
     }
+
+    /**
+     * 根据ui的唯一标识符来判断当前是否存在某个ui
+     * @param id ui的唯一标识符
+     */
+    hasName(id: string) {
+        return this.stack.some(v => v.ui.id === id);
+    }
 }

src/core/main/init/ui.ts

@@ -1,21 +1,4 @@
-import Book from '@ui/book.vue';
+import * as UI from '@ui/.';
-import Toolbox from '@ui/toolbox.vue';
-import Equipbox from '@ui/equipbox.vue';
-import Settings from '@ui/settings.vue';
-import Desc from '@ui/desc.vue';
-import Skill from '@ui/skill.vue';
-import SkillTree from '@ui/skillTree.vue';
-import Fly from '@ui/fly.vue';
-import FixedDetail from '@ui/fixedDetail.vue';
-import Shop from '@ui/shop.vue';
-import Achievement from '@ui/achievement.vue';
-import Bgm from '@ui/bgmList.vue';
-import StatusBar from '@ui/statusBar.vue';
-import Mark from '@ui/markedEnemy.vue';
-import Fixed from '@ui/fixed.vue';
-import Chapter from '@ui/chapter.vue';
-import CompleteAchi from '@ui/completeAchievement.vue';
-import Start from '@ui/start.vue';
 import { GameUi, UiController } from '../custom/ui';
 import { Hotkey } from '../custom/hotkey';
 import { KeyCode } from '@/plugin/keyCodes';
@@ -38,29 +21,29 @@ exitKey
 
 export const mainUi = new UiController();
 mainUi.register(
-    new GameUi('book', Book, exitKey),
+    new GameUi('book', UI.Book, exitKey),
-    new GameUi('toolbox', Toolbox, exitKey),
+    new GameUi('toolbox', UI.Toolbox, exitKey),
-    new GameUi('equipbox', Equipbox, exitKey),
+    new GameUi('equipbox', UI.Equipbox, exitKey),
-    new GameUi('settings', Settings, exitKey),
+    new GameUi('settings', UI.Settings, exitKey),
-    new GameUi('desc', Desc, exitKey),
+    new GameUi('desc', UI.Desc, exitKey),
-    new GameUi('skill', Skill, exitKey),
+    new GameUi('skill', UI.Skill, exitKey),
-    new GameUi('skillTree', SkillTree, exitKey),
+    new GameUi('skillTree', UI.SkillTree, exitKey),
-    new GameUi('fly', Fly, exitKey),
+    new GameUi('fly', UI.Fly, exitKey),
-    new GameUi('fixedDetail', FixedDetail, exitKey),
+    new GameUi('fixedDetail', UI.FixedDetail, exitKey),
-    new GameUi('shop', Shop, exitKey),
+    new GameUi('shop', UI.Shop, exitKey),
-    new GameUi('achievement', Achievement, exitKey),
+    new GameUi('achievement', UI.Achievement, exitKey),
-    new GameUi('bgm', Bgm, exitKey)
+    new GameUi('bgm', UI.BgmList, exitKey)
     // todo: 把游戏主 div 加入到 mainUi 里面
 );
 
 export const fixedUi = new UiController(true);
 fixedUi.register(
-    new GameUi('statusBar', StatusBar),
+    new GameUi('statusBar', UI.StatusBar),
-    new GameUi('markedEnemy', Mark),
+    new GameUi('markedEnemy', UI.Marked),
-    new GameUi('fixed', Fixed),
+    new GameUi('fixed', UI.Fixed),
-    new GameUi('chapter', Chapter),
+    new GameUi('chapter', UI.Chapter),
-    new GameUi('completeAchi', CompleteAchi),
+    new GameUi('completeAchi', UI.CompleteAchi),
-    new GameUi('start', Start)
+    new GameUi('start', UI.Start)
 );
 
 hook.once('mounted', () => {
@@ -69,9 +52,11 @@ hook.once('mounted', () => {
 
     mainUi.on('start', () => {
         ui.style.display = 'flex';
+        core.lockControl();
     });
     mainUi.on('end', () => {
         ui.style.display = 'none';
+        core.closePanel();
     });
     fixedUi.on('start', () => {
         fixed.style.display = 'block';
@@ -79,4 +64,7 @@ hook.once('mounted', () => {
     fixedUi.on('end', () => {
         fixed.style.display = 'none';
     });
+
+    // todo: 暂时先这么搞，之后重写加载界面，需要改成先显示加载界面，加载完毕后再打开这个界面
+    fixedUi.open('start');
 });

src/plugin/game/enemy/damage.ts

@@ -715,10 +715,11 @@ export class DamageEnemy<T extends EnemyIds = EnemyIds> {
                 start = curr;
             }
             if (i++ >= 10000) {
-                throw new Error(
+                console.warn(
                     `Unexpected endless loop in calculating critical.` +
                         `Enemy Id: ${this.id}. Loc: ${this.x},${this.y}. Floor: ${this.floorId}`
                 );
+                break;
             }
         }
 

src/plugin/game/hero.ts

@@ -113,8 +113,10 @@ function getRealStatus(
 
 declare global {
     interface PluginDeclaration {
-        getHeroStatusOf: typeof getHeroStatusOf;
+        hero: {
-        getHeroStatusOn: typeof getHeroStatusOn;
+            getHeroStatusOf: typeof getHeroStatusOf;
+            getHeroStatusOn: typeof getHeroStatusOn;
+        };
     }
 }
 

src/plugin/game/skillTree.js

@@ -227,7 +227,7 @@ export function getSkillConsume(skill) {
 
 export function openTree() {
     if (main.replayChecking) return;
-    mota.plugin.ui.skillTreeOpened.value = true;
+    mota.ui.main.open('skillTree');
 }
 
 /**

src/plugin/game/ui.js

@@ -11,8 +11,9 @@ export {};
 
     function openItemShop(itemShopId) {
         if (!core.isReplaying()) {
-            core.plugin.openedShopId = itemShopId;
+            mota.ui.main.open('shop', void 0, {
-            mota.plugin.ui.shopOpened.value = true;
+                shopId: itemShopId
+            });
         }
     }
 
@@ -24,22 +25,19 @@ export {};
     }
 
     ui.prototype.drawBook = function () {
-        if (!core.isReplaying())
+        if (!core.isReplaying()) return mota.ui.main.open('book');
-            return (mota.plugin.ui.bookOpened.value = true);
     };
 
     ui.prototype._drawToolbox = function () {
-        if (!core.isReplaying())
+        if (!core.isReplaying()) return mota.ui.main.open('toolbox');
-            return (mota.plugin.ui.toolOpened.value = true);
     };
 
     ui.prototype._drawEquipbox = function () {
-        if (!core.isReplaying())
+        if (!core.isReplaying()) return mota.ui.main.open('equipbox');
-            return (mota.plugin.ui.equipOpened.value = true);
     };
 
     ui.prototype.drawFly = function () {
-        if (!core.isReplaying()) return (mota.plugin.ui.flyOpened.value = true);
+        if (!core.isReplaying()) return mota.ui.main.open('fly');
     };
 
     control.prototype.updateStatusBar_update = function () {
@@ -54,6 +52,7 @@ export {};
         updateVueStatusBar();
     };
 
+    // todo: 多个状态栏分离与控制
     control.prototype.showStatusBar = function () {
         if (main.mode == 'editor') return;
         core.removeFlag('hideStatusBar');
@@ -93,7 +92,7 @@ export {};
 
     function openSkill() {
         if (core.isReplaying()) return;
-        mota.plugin.ui.skillOpened.value = true;
+        mota.ui.main.open('skill');
     }
 
     core.plugin.gameUi = {

src/plugin/ui/equipbox.tsx

@@ -67,7 +67,7 @@ export function getNowStatus(nowEquip?: Equip, onCol: boolean = false) {
             {toShow.map(v => {
                 let status: string;
                 if (v === 'lv') status = core.getLvName() ?? '';
-                else status = core.plugin.getHeroStatusOn(v)?.toString();
+                else status = core.plugin.hero.getHeroStatusOn(v)?.toString();
 
                 let add = 0;
                 if (has(nowEquip)) {

src/plugin/uiController.ts

@@ -1,126 +1,21 @@
-import { sleep } from 'mutate-animate';
+import { ref } from 'vue';
-import { Component, markRaw, ref, Ref, shallowReactive, watch } from 'vue';
-import Book from '../ui/book.vue';
-import Toolbox from '../ui/toolbox.vue';
-import Equipbox from '../ui/equipbox.vue';
-import Settings from '../ui/settings.vue';
-import Desc from '../ui/desc.vue';
-import Skill from '../ui/skill.vue';
-import SkillTree from '../ui/skillTree.vue';
-import Fly from '../ui/fly.vue';
-import FixedDetail from '../ui/fixedDetail.vue';
-import Shop from '../ui/shop.vue';
-import Achievement from '../ui/achievement.vue';
-import Bgm from '../ui/bgmList.vue';
 
 // todo: 优化开启控制器
 
-export const bookOpened = ref(false);
-export const toolOpened = ref(false);
-export const equipOpened = ref(false);
 export const showStatusBar = ref(false);
-export const settingsOpened = ref(false);
-export const descOpened = ref(false);
-export const skillOpened = ref(false);
-export const skillTreeOpened = ref(false);
-export const flyOpened = ref(false);
 export const showStudiedSkill = ref(false);
-export const fixedDetailOpened = ref(false);
-export const shopOpened = ref(false);
 export const startOpened = ref(true);
-export const achievementOpened = ref(false);
-export const bgmOpened = ref(false);
 
 export const transition = ref(true);
 export const noClosePanel = ref(false);
 
 export const startAnimationEnded = ref(false);
 
-let app: HTMLDivElement;
-
-/** ui声明列表 */
-const UI_LIST: [Ref<boolean>, Component][] = [
-    // [bookOpened, Book],
-    // [toolOpened, Toolbox],
-    // [equipOpened, Equipbox],
-    // [settingsOpened, Settings],
-    // [descOpened, Desc],
-    // [skillOpened, Skill],
-    // [skillTreeOpened, SkillTree],
-    // [flyOpened, Fly],
-    // [fixedDetailOpened, FixedDetail],
-    // [shopOpened, Shop],
-    // [achievementOpened, Achievement],
-    // [bgmOpened, Bgm]
-];
-
-/** ui栈 */
-export const uiStack = shallowReactive<Component[]>([]);
-
 export default function init() {
-    // app = document.getElementById('root') as HTMLDivElement;
-    // UI_LIST.forEach(([ref, com]) => {
-    //     watch(ref, n => {
-    //         if (n === true) {
-    //             uiStack.push(markRaw(com));
-    //             showApp();
-    //         } else {
-    //             const index = uiStack.findIndex(v => v === com);
-    //             if (index === -1) return;
-    //             if (uiStack.length === 1) {
-    //                 hideApp(index);
-    //             } else {
-    //                 uiStack.splice(index, 1);
-    //             }
-    //         }
-    //     });
-    // });
     return {
-        uiStack,
         transition,
-        bookOpened,
-        toolOpened,
-        equipOpened,
         showStatusBar,
-        settingsOpened,
-        descOpened,
-        skillOpened,
-        skillTreeOpened,
-        flyOpened,
         showStudiedSkill,
-        fixedDetailOpened,
+        startAnimationEnded
-        shopOpened,
-        startOpened,
-        startAnimationEnded,
-        achievementOpened,
-        bgmOpened
     };
 }
-
-async function showApp() {
-    core.lockControl();
-
-    if (transition.value) {
-        app.style.transition = 'all 0.6s linear';
-    } else {
-        app.style.transition = 'none';
-    }
-    app.style.display = 'flex';
-    await sleep(50);
-    app.style.opacity = '1';
-}
-
-async function hideApp(index: number) {
-    if (transition.value) {
-        app.style.transition = 'all 0.6s linear';
-        app.style.opacity = '0';
-        await sleep(600);
-    } else {
-        app.style.transition = '';
-        app.style.opacity = '0';
-    }
-    uiStack.splice(index, 1);
-    app.style.display = 'none';
-    if (!noClosePanel.value) core.closePanel();
-    noClosePanel.value = false;
-}

src/types/plugin.d.ts

@@ -168,75 +168,27 @@ interface PluginUtils {
 }
 
 interface PluginUis {
-    /** 定点查看的界面，特殊属性还是临界 */
-    fixedDetailPanel: 'special' | 'critical';
-
-    /** 打开的商店id */
-    openedShopId: string;
-
     /** ui是否使用渐变 */
     readonly transition: Ref<boolean>;
 
-    /** 手册是否打开 */
-    readonly bookOpened: Ref<boolean>;
-
-    /** 道具栏是否打开 */
-    readonly toolOpened: Ref<boolean>;
-
-    /** 装备栏是否打开 */
-    readonly equipOpened: Ref<boolean>;
-
     /** 是否显示状态栏 */
     readonly showStatusBar: Ref<boolean>;
 
-    /** 设置界面是否打开 */
-    readonly settingsOpened: Ref<boolean>;
-
     /** 是否正在进行章节显示 */
     readonly chapterShowed: Ref<boolean>;
 
     /** 章节显示的内容 */
     readonly chapterContent: Ref<boolean>;
 
-    /** 百科全书是否打开了 */
-    readonly descOpened: Ref<boolean>;
-
-    /** 技能查看界面是否打开 */
-    readonly skillOpened: Ref<boolean>;
-
-    /** 技能树界面是否打开 */
-    readonly skillTreeOpened: Ref<boolean>;
-
-    /** 楼传界面是否打开 */
-    readonly flyOpened: Ref<boolean>;
-
     /** 是否展示标记的怪物 */
     readonly showMarkedEnemy: Ref<boolean>;
 
     /** 是否展示已学习的技能 */
     readonly showStudiedSkill: Ref<boolean>;
 
-    /** 定点查看是否打开 */
-    readonly fixedDetailOpened: Ref<boolean>;
-
     /** 是否展示移动鼠标显示怪物信息的盒子 */
     readonly showFixed: Ref<boolean>;
 
-    /** 商店是否打开 */
-    readonly shopOpened: Ref<boolean>;
-
-    /** 开始界面是否打开 */
-    readonly startOpened: Ref<boolean>;
-
-    /** 成就界面是否打开 */
-    readonly achievementOpened: Ref<boolean>;
-
-    /** bgm界面是否打开 */
-    readonly bgmOpened: Ref<boolean>;
-
-    /** ui栈 */
-    readonly uiStack: Ref<any[]>;
-
     /**
      * 显示章节
      * @param chapter 显示的文字

src/ui/achievement.vue

@@ -98,7 +98,7 @@
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
-import { achievementOpened, noClosePanel } from '../plugin/uiController';
+import { noClosePanel } from '../plugin/uiController';
 import { LeftOutlined } from '@ant-design/icons-vue';
 import list from '../data/achievement.json';
 import {
@@ -109,6 +109,10 @@ import {
 import Scroll from '../components/scroll.vue';
 import { isMobile } from '../plugin/use';
 
+const props = defineProps<{
+    num: number;
+}>();
+
 type AchievementList = typeof list;
 type AchievementType = keyof AchievementList;
 
@@ -173,12 +177,13 @@ function getAllAchievements(type: AchievementType): ResolvedAchievement[] {
 }
 
 function exit() {
+    // ???
     try {
         core.closePanel();
     } catch {
         noClosePanel.value = true;
     }
-    achievementOpened.value = false;
+    mota.ui.main.close(props.num);
 }
 </script>
 

src/ui/bgmList.vue

@@ -33,6 +33,10 @@ import Colomn from '../components/colomn.vue';
 import bgm from '../data/bgm.json';
 import { splitText } from '../plugin/utils';
 
+const props = defineProps<{
+    num: number;
+}>();
+
 interface Bgm {
     img: string;
     area: string;
@@ -51,7 +55,7 @@ const content = computed(() => {
 const name = computed(() => list[selected.value]!.name);
 
 function exit() {
-    mota.plugin.ui.bgmOpened.value = false;
+    mota.ui.main.close(props.num);
 }
 
 function select(id: BgmIds) {

src/ui/book.vue

@@ -49,6 +49,12 @@ import { KeyCode } from '../plugin/keyCodes';
 import { noClosePanel } from '../plugin/uiController';
 import { ToShowEnemy, detailInfo } from '../plugin/ui/book';
 import { getDetailedEnemy } from '../plugin/ui/fixed';
+import { GameUi } from '@/core/main/custom/ui';
+
+const props = defineProps<{
+    num: number;
+    ui: GameUi;
+}>();
 
 const floorId =
     // @ts-ignore
@@ -113,7 +119,7 @@ async function show() {
  */
 async function exit() {
     noClosePanel.value = true;
-    mota.plugin.ui.bookOpened.value = false;
+    mota.ui.main.close(props.num);
     if (mota.plugin.ui.transition.value) await sleep(650);
     else await sleep(100);
     if (core.events.recoverEvents(core.status.event.interval)) {

src/ui/desc.vue

@@ -23,12 +23,16 @@ import desc from '../data/desc.json';
 import { has, splitText } from '../plugin/utils';
 import Colomn from '../components/colomn.vue';
 
+const props = defineProps<{
+    num: number;
+}>();
+
 type DescKey = keyof typeof desc;
 
 const selected = ref(Object.keys(desc)[0] as DescKey);
 
 function exit() {
-    mota.plugin.ui.descOpened.value = false;
+    mota.ui.main.close(props.num);
 }
 
 const content = computed(() => {

src/ui/equipbox.vue

@@ -179,7 +179,15 @@ import {
     SortAscendingOutlined,
     SortDescendingOutlined
 } from '@ant-design/icons-vue';
-import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+import {
+    computed,
+    nextTick,
+    onMounted,
+    onUnmounted,
+    reactive,
+    ref,
+    watch
+} from 'vue';
 import Scroll from '../components/scroll.vue';
 import { getAddStatus, getEquips, getNowStatus } from '../plugin/ui/equipbox';
 import BoxAnimate from '../components/boxAnimate.vue';
@@ -187,6 +195,12 @@ import { has, keycode, tip, type } from '../plugin/utils';
 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';
+
+const props = defineProps<{
+    num: number;
+    ui: GameUi;
+}>();
 
 const equips = ref(getEquips());
 const col = ref('all');
@@ -303,7 +317,7 @@ function changeSort() {
 }
 
 function exit() {
-    mota.plugin.ui.equipOpened.value = false;
+    mota.ui.main.close(props.num);
 }
 
 function clickList(i: number) {
@@ -420,13 +434,11 @@ function dragout(e: Event) {
     toEquipType.value = -1;
 }
 
-async function toTool() {
+function toTool() {
-    const before = mota.plugin.ui.transition.value;
     mota.plugin.ui.transition.value = false;
+    mota.ui.main.holdOn();
     exit();
-    await sleep(50);
+    mota.ui.main.open('toolbox');
-    mota.plugin.ui.toolOpened.value = true;
-    mota.plugin.ui.transition.value = before;
 }
 
 function keyup(e: KeyboardEvent) {
@@ -447,9 +459,10 @@ watch(toShow, n => {
 
 onMounted(async () => {
     bind();
-    if (mota.plugin.ui.transition.value) await sleep(600);
+    await sleep(50);
-    else await sleep(50);
+    nextTick(() => {
-    document.addEventListener('keyup', keyup);
+        document.addEventListener('keyup', keyup);
+    });
 });
 
 onUnmounted(() => {

src/ui/fixed.vue

@@ -72,7 +72,7 @@ async function calHeight() {
     vw = window.innerWidth;
     width.value = vh * 0.28;
     await new Promise(res => requestAnimationFrame(res));
-    if (mota.plugin.ui.fixedDetailOpened.value) {
+    if (mota.ui.main.hasName('fixedDetail')) {
         showFixed.value = false;
     }
     updateMain();

src/ui/fixedDetail.vue

@@ -13,7 +13,12 @@ import { getDetailedEnemy, getLocFromMouseLoc } from '../plugin/ui/fixed';
 import BookDetail from './bookDetail.vue';
 import { detailInfo } from '../plugin/ui/book';
 
-const panel = core.plugin.fixedDetailPanel ?? 'special';
+const props = defineProps<{
+    num: number;
+    panel?: 'special' | 'critical' | 'target';
+}>();
+
+const panel = props.panel ?? 'special';
 
 detailInfo.pos = 0;
 
@@ -30,7 +35,7 @@ if (enemy) {
 }
 
 function close() {
-    mota.plugin.ui.fixedDetailOpened.value = false;
+    mota.ui.main.close(props.num);
 }
 </script>
 

src/ui/fly.vue

@@ -97,6 +97,10 @@ import { downloadCanvasImage, keycode, tip } from '../plugin/utils';
 import { sleep } from 'mutate-animate';
 import { KeyCode } from '../plugin/keyCodes';
 
+const props = defineProps<{
+    num: number;
+}>();
+
 type Loc2 = [number, number, number, number];
 
 const area = getArea();
@@ -147,7 +151,7 @@ let thumbCtx: CanvasRenderingContext2D;
 let downloadMode = false;
 
 function exit() {
-    mota.plugin.ui.flyOpened.value = false;
+    mota.ui.main.close(props.num);
 }
 
 const title = computed(() => {

src/ui/index.ts

@@ -0,0 +1,21 @@
+export { default as Achievement } from './achievement.vue';
+export { default as BgmList } from './bgmList.vue';
+export { default as Book } from './book.vue';
+export { default as BookDetail } from './bookDetail.vue';
+export { default as Chapter } from './chapter.vue';
+export { default as CompleteAchi } from './completeAchievement.vue';
+export { default as Desc } from './desc.vue';
+export { default as Equipbox } from './equipbox.vue';
+export { default as Fixed } from './fixed.vue';
+export { default as FixedDetail } from './fixedDetail.vue';
+export { default as Fly } from './fly.vue';
+export { default as Marked } from './markedEnemy.vue';
+export { default as Settings } from './settings.vue';
+export { default as Shop } from './shop.vue';
+export { default as Skill } from './skill.vue';
+export { default as SkillTree } from './skillTree.vue';
+export { default as Start } from './start.vue';
+export { default as StatusBar } from './statusBar.vue';
+export { default as Studied } from './studied.vue';
+export { default as Study } from './study.vue';
+export { default as Toolbox } from './toolbox.vue';

src/ui/settings.vue

@@ -94,7 +94,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, onUpdated, shallowRef } from 'vue';
+import { computed, onMounted, onUnmounted, shallowRef } from 'vue';
 import {
     mainSetting,
     MotaSetting,
@@ -107,7 +107,6 @@ import settingText from '../data/settings.json';
 import { RightOutlined, LeftOutlined } from '@ant-design/icons-vue';
 import { keycode, splitText } from '../plugin/utils';
 import Scroll from '../components/scroll.vue';
-import { settingsOpened } from '../plugin/uiController';
 import { isMobile } from '../plugin/use';
 import { sleep } from 'mutate-animate';
 import { KeyCode } from '../plugin/keyCodes';
@@ -115,6 +114,7 @@ import { KeyCode } from '../plugin/keyCodes';
 const props = defineProps<{
     info?: MotaSetting;
     text?: SettingText;
+    num: number;
 }>();
 
 const setting = props.info ?? mainSetting;
@@ -172,7 +172,7 @@ function changeValue(value: number | boolean) {
 }
 
 function exit() {
-    settingsOpened.value = false;
+    mota.ui.main.close(props.num);
 }
 
 function key(e: KeyboardEvent) {

src/ui/shop.vue

@@ -176,8 +176,13 @@ import BoxAnimate from '../components/boxAnimate.vue';
 import { KeyCode } from '../plugin/keyCodes';
 import { sleep } from 'mutate-animate';
 
-const id = core.plugin.openedShopId;
+const props = defineProps<{
-const shop = core.status.shops[core.plugin.openedShopId] as ItemShopEvent;
+    num: number;
+    shopId: string;
+}>();
+
+const id = props.shopId;
+const shop = core.status.shops[id] as ItemShopEvent;
 if (!shop.item) {
     throw new TypeError(
         `Wrong global shop type delivered in opening item shop.`
@@ -303,7 +308,7 @@ function keydown(e: KeyboardEvent) {
 
 function exit() {
     if (bought) core.status.route.push('closeShop');
-    mota.plugin.ui.shopOpened.value = false;
+    mota.ui.main.close(props.num);
 }
 
 onMounted(async () => {

src/ui/skill.vue

@@ -22,6 +22,10 @@ import skills from '../data/skill.json';
 import { has } from '../plugin/utils';
 import Column from '../components/colomn.vue';
 
+const props = defineProps<{
+    num: number;
+}>();
+
 type Skills = keyof typeof skills;
 
 const selected = ref<Skills>('none');
@@ -60,7 +64,7 @@ const content = computed(() => {
 });
 
 function exit() {
-    mota.plugin.ui.skillOpened.value = false;
+    mota.ui.main.close(props.num);
 }
 </script>
 

src/ui/skillTree.vue

@@ -82,6 +82,10 @@ import { isMobile } from '../plugin/use';
 import { sleep } from 'mutate-animate';
 import { KeyCode } from '../plugin/keyCodes';
 
+const props = defineProps<{
+    num: number;
+}>();
+
 let canvas: HTMLCanvasElement;
 let ctx: CanvasRenderingContext2D;
 
@@ -173,7 +177,7 @@ const level = computed(() => {
 });
 
 function exit() {
-    mota.plugin.ui.skillTreeOpened.value = false;
+    mota.ui.main.close(props.num);
 }
 
 function resize() {

src/ui/start.vue

@@ -67,7 +67,6 @@ import { sleep } from 'mutate-animate';
 import { Matrix4 } from '../plugin/webgl/matrix';
 import { doByInterval, keycode } from '../plugin/utils';
 import { KeyCode } from '../plugin/keyCodes';
-import { achievementOpened } from '../plugin/uiController';
 import { triggerFullscreen } from '../plugin/utils';
 import { loading } from '../core/loader/load';
 import { isMobile } from '../plugin/use';
@@ -149,7 +148,7 @@ async function clickStartButton(id: string) {
     }
     if (id === 'replay') core.chooseReplayFile();
     if (id === 'achievement') {
-        achievementOpened.value = true;
+        mota.ui.main.open('achievement');
     }
 }
 

src/ui/toolbox.vue

@@ -118,6 +118,10 @@ import { hyper, sleep } from 'mutate-animate';
 import { message } from 'ant-design-vue';
 import { KeyCode } from '../plugin/keyCodes';
 
+const props = defineProps<{
+    num: number;
+}>();
+
 type ItemMode = 'tools' | 'constants';
 type ShowItemIds = ItemIdOf<'constants' | 'tools'> | 'none';
 
@@ -165,7 +169,7 @@ async function select(id: ShowItemIds, nouse: boolean = false) {
 }
 
 function exit() {
-    mota.plugin.ui.toolOpened.value = false;
+    mota.ui.main.close(props.num);
 }
 
 async function use(id: ShowItemIds) {
@@ -187,12 +191,9 @@ async function use(id: ShowItemIds) {
 }
 
 async function toEquip() {
-    const before = mota.plugin.ui.transition.value;
+    mota.ui.main.holdOn();
-    mota.plugin.ui.transition.value = false;
     exit();
-    await sleep(50);
+    mota.ui.main.open('equipbox');
-    mota.plugin.ui.equipOpened.value = true;
-    mota.plugin.ui.transition.value = before;
 }
 
 function keyup(e: KeyboardEvent) {