refactor: 设置的修改部分

src/App.vue

@@ -2,8 +2,9 @@
     <div id="ui-new">
         <div id="ui-main">
             <div id="ui-list">
-                <div class="ui-one" v-for="ui of mainUi.stack">
+                <div class="ui-one" v-for="(ui, index) of mainUi.stack">
                     <component
+                        v-if="show(index)"
                         :is="ui.ui.component"
                         v-on="ui.vOn ?? {}"
                         v-bind="ui.vBind ?? {}"
@@ -31,6 +32,11 @@ import { hook } from '@/core/main/game';
 onMounted(() => {
     hook.emit('mounted');
 });
+
+function show(index: number) {
+    if (mainUi.show === 'all') return true;
+    if (mainUi.show === 'end') return index === mainUi.stack.length - 1;
+}
 </script>
 
 <style lang="less" scoped>

src/core/main/custom/ui.ts

@@ -168,6 +168,7 @@ export class UiController extends Focus<IndexedGameUi> {
     static list: UiController[] = [];
     list: Record<string, GameUi> = {};
     num: number = 0;
+    show: 'end' | 'all' = 'all';
 
     private hold: boolean = false;
 
@@ -191,6 +192,20 @@ export class UiController extends Focus<IndexedGameUi> {
         });
     }
 
+    /**
+     * 设置为仅显示最后一个ui
+     */
+    showEnd() {
+        this.show = 'end';
+    }
+
+    /**
+     * 设置为显示所有ui
+     */
+    showAll() {
+        this.show = 'all';
+    }
+
     /**
      * 执行按键操作
      * @param key 按键的KeyCode

src/core/main/init/settings.tsx

@@ -0,0 +1,110 @@
+import type { SettingComponent, SettingComponentProps } from '../setting';
+import { Button, InputNumber } from 'ant-design-vue';
+import { mainUi } from './ui';
+
+interface Components {
+    DefaultSetting: SettingComponent;
+    BooleanSetting: SettingComponent;
+    NumberSetting: SettingComponent;
+    HotkeySetting: SettingComponent;
+    ToolbarSetting: SettingComponent;
+}
+
+export function createSettingComponents() {
+    const com: Components = {
+        DefaultSetting,
+        BooleanSetting,
+        NumberSetting,
+        HotkeySetting,
+        ToolbarSetting
+    };
+    return com;
+}
+
+function DefaultSetting(props: SettingComponentProps) {
+    return (
+        <div>
+            <span> 未知的设置类型 </span>
+        </div>
+    );
+}
+
+function BooleanSetting(props: SettingComponentProps) {
+    const { setting, displayer, item } = props;
+    const changeValue = () => {
+        setting.setValue(displayer.selectStack.join('.'), !item.value);
+        displayer.update();
+    };
+
+    return (
+        <div>
+            <span>当前 {item.value ? '开启' : '关闭'}</span>
+            <Button type="primary" size="large" onClick={changeValue}>
+                {item.value ? '开启' : '关闭'}设置
+            </Button>
+        </div>
+    );
+}
+
+function NumberSetting(props: SettingComponentProps) {
+    const { setting, displayer, item } = props;
+    const changeValue = () => {
+        setting.setValue(displayer.selectStack.join('.'), !item.value);
+        displayer.update();
+    };
+
+    return (
+        <div>
+            <span> 修改设置： </span>
+            <InputNumber
+                class="number-input"
+                size="large"
+                keyboard={true}
+                min={item.step?.[0] ?? 0}
+                max={item.step?.[1] ?? 100}
+                step={item.step?.[2] ?? 1}
+                value={item.value as number}
+                onChange={changeValue}
+            ></InputNumber>
+        </div>
+    );
+}
+
+function showSpecialSetting(id: string) {
+    const ui = mainUi.get(id);
+    mainUi.showEnd();
+    ui.once('close', () => {
+        mainUi.showAll();
+    });
+    mainUi.open(id);
+}
+
+function HotkeySetting(props: SettingComponentProps) {
+    // todo: hotkey.vue
+    return (
+        <div>
+            <Button
+                type="primary"
+                size="large"
+                onClick={() => showSpecialSetting('hotkey')}
+            >
+                快捷键设置
+            </Button>
+        </div>
+    );
+}
+
+function ToolbarSetting(props: SettingComponentProps) {
+    // todo: toolSetting.vue
+    return (
+        <div>
+            <Button
+                type="primary"
+                size="large"
+                onClick={() => showSpecialSetting('toolSetting')}
+            >
+                自定义工具栏
+            </Button>
+        </div>
+    );
+}

src/core/main/init/ui.ts

@@ -35,6 +35,7 @@ mainUi.register(
     new GameUi('bgm', UI.BgmList, exitKey)
     // todo: 把游戏主 div 加入到 mainUi 里面
 );
+mainUi.showAll();
 
 export const fixedUi = new UiController(true);
 fixedUi.register(
@@ -45,6 +46,7 @@ fixedUi.register(
     new GameUi('completeAchi', UI.CompleteAchi),
     new GameUi('start', UI.Start)
 );
+fixedUi.showAll();
 
 hook.once('mounted', () => {
     const ui = document.getElementById('ui-main')!;

src/core/main/setting.ts

@@ -1,21 +1,28 @@
-import { Component, reactive } from 'vue';
+import { FunctionalComponent, reactive } from 'vue';
 import { EmitableEvent, EventEmitter } from '../common/eventEmitter';
 import { loading } from '../loader/load';
 import { hook } from './game';
 import { GameStorage } from './storage';
 import { triggerFullscreen } from '@/plugin/utils';
+import { createSettingComponents } from './init/settings';
 
+export interface SettingComponentProps {
+    item: MotaSettingItem;
+    setting: MotaSetting;
+    displayer: SettingDisplayer;
+}
+
+export type SettingComponent = FunctionalComponent<SettingComponentProps>;
 type MotaSettingType = boolean | number | MotaSetting;
 
 export interface MotaSettingItem<T extends MotaSettingType = MotaSettingType> {
     name: string;
     key: string;
     value: T;
+    controller: SettingComponent;
     defaults?: boolean | number;
     step?: [number, number, number];
     display?: (value: T) => string;
-    controller?: Component;
-    special?: string;
 }
 
 interface SettingEvent extends EmitableEvent {
@@ -36,6 +43,8 @@ export interface SettingDisplayInfo {
     text: string[];
 }
 
+const COM = createSettingComponents();
+
 export class MotaSetting extends EventEmitter<SettingEvent> {
     readonly list: Record<string, MotaSettingItem> = {};
 
@@ -49,15 +58,6 @@ export class MotaSetting extends EventEmitter<SettingEvent> {
         }
     }
 
-    /**
-     * 标记为特殊的设置项
-     */
-    markSpecial(key: string, sp: string) {
-        const setting = this.getSettingBy(key.split('.'));
-        setting.special = sp;
-        return this;
-    }
-
     /**
      * 注册一个数字型设置
      * @param key 设置的键名
@@ -67,6 +67,7 @@ export class MotaSetting extends EventEmitter<SettingEvent> {
         key: string,
         name: string,
         value: number,
+        com?: SettingComponent,
         step?: [number, number, number]
     ): this;
     /**
@@ -74,17 +75,24 @@ export class MotaSetting extends EventEmitter<SettingEvent> {
      * @param key 设置的键名
      * @param value 设置的值
      */
-    register(key: string, name: string, value: boolean | MotaSetting): this;
+    register(
+        key: string,
+        name: string,
+        value: boolean | MotaSetting,
+        com?: SettingComponent
+    ): this;
     register(
         key: string,
         name: string,
         value: MotaSettingType,
+        com: SettingComponent = COM.DefaultSetting,
         step: [number, number, number] = [0, 100, 1]
     ) {
         const setting: MotaSettingItem = {
             name,
             value,
-            key
+            key,
+            controller: com
         };
         if (!(value instanceof MotaSetting)) setting.defaults = value;
         if (typeof value === 'number') setting.step = step;
@@ -148,7 +156,12 @@ export class MotaSetting extends EventEmitter<SettingEvent> {
         return this;
     }
 
-    setValueController(key: string, com: Component) {
+    /**
+     * 设置一个设置的修改部分组件
+     * @param key 要设置的设置的键
+     * @param com 设置修改部分的组件
+     */
+    setValueController(key: string, com: SettingComponent) {
         const setting = this.getSettingBy(key.split('.'));
         setting.controller = com;
         return this;
@@ -359,43 +372,41 @@ mainSetting
         'screen',
         '显示设置',
         new MotaSetting()
-            .register('fullscreen', '全屏游戏', false)
+            .register('fullscreen', '全屏游戏', false, COM.BooleanSetting)
-            .register('halo', '光环显示', true)
+            .register('halo', '光环显示', true, COM.BooleanSetting)
-            .register('itemDetail', '宝石血瓶显伤', true)
+            .register('itemDetail', '宝石血瓶显伤', true, COM.BooleanSetting)
-            .register('heroDetail', '勇士显伤', false)
+            .register('heroDetail', '勇士显伤', false, COM.BooleanSetting)
-            .register('transition', '界面动画', false)
+            .register('transition', '界面动画', false, COM.BooleanSetting)
-            .register('antiAlias', '抗锯齿', false)
+            .register('antiAlias', '抗锯齿', false, COM.BooleanSetting)
-            .register('fontSize', '字体大小', 16, [8, 28, 1])
+            .register('fontSize', '字体大小', 16, COM.NumberSetting, [8, 28, 1])
-            .register('smoothView', '平滑镜头', true)
+            .register('smoothView', '平滑镜头', true, COM.BooleanSetting)
-            .register('criticalGem', '临界显示方式', false)
+            .register('criticalGem', '临界显示方式', false, COM.BooleanSetting)
             .setDisplayFunc('criticalGem', value => (value ? '宝石数' : '攻击'))
     )
     .register(
         'action',
         '操作设置',
         new MotaSetting()
-            .register('autoSkill', '自动切换技能', true)
+            .register('autoSkill', '自动切换技能', true, COM.BooleanSetting)
-            .register('fixed', '定点查看', true)
+            .register('fixed', '定点查看', true, COM.BooleanSetting)
-            .register('hotkey', '快捷键', false)
+            .register('hotkey', '快捷键', false, COM.BooleanSetting)
-            .markSpecial('hotkey', 'hotkey')
             .setDisplayFunc('hotkey', () => '')
-            .register('toolbar', '自定义工具栏', false)
+            .register('toolbar', '自定义工具栏', false, COM.BooleanSetting)
-            .markSpecial('toolbar', 'toolbar')
             .setDisplayFunc('toolbar', () => '')
     )
     .register(
         'utils',
         '系统设置',
         new MotaSetting()
-            .register('betterLoad', '优化加载', true)
+            .register('betterLoad', '优化加载', true, COM.BooleanSetting)
-            .register('autoScale', '自动放缩', true)
+            .register('autoScale', '自动放缩', true, COM.BooleanSetting)
     )
     .register(
         'fx',
         '特效设置',
         new MotaSetting()
-            .register('paraLight', '野外阴影', true)
+            .register('paraLight', '野外阴影', true, COM.BooleanSetting)
-            .register('frag', '打怪特效', true)
+            .register('frag', '打怪特效', true, COM.BooleanSetting)
     );
 
 interface SettingStorage {

src/ui/settings.vue

@@ -52,43 +52,13 @@
                 ></div>
                 <a-divider class="info-divider" dashed></a-divider>
                 <div class="info-editor" v-if="!!selectedItem">
-                    <div class="editor-custom" v-if="!!selectedItem.controller">
+                    <div class="editor-custom">
-                        <component :is="selectedItem.controller"></component>
+                        <component
-                    </div>
+                            :is="selectedItem.controller"
-                    <div v-else-if="!!selectedItem.special"></div>
+                            :item="selectedItem"
-                    <div
+                            :displayer="displayer"
-                        class="editor-number"
+                            :setting="setting"
-                        v-else-if="typeof selectedItem.value === 'number'"
+                        ></component>
-                    >
-                        <span>修改设置：</span>
-                        <a-input-number
-                            class="number-input"
-                            size="large"
-                            :min="selectedItem.step?.[0] ?? 0"
-                            :max="selectedItem.step?.[1] ?? 100"
-                            :step="selectedItem.step?.[2] ?? 1"
-                            :keyboard="true"
-                            :value="selectedItem.value"
-                            @change="changeValue"
-                        ></a-input-number>
-                    </div>
-                    <div
-                        class="editor-boolean"
-                        v-else-if="typeof selectedItem.value === 'boolean'"
-                    >
-                        <span
-                            >当前{{
-                                selectedItem.value ? '开启' : '关闭'
-                            }}</span
-                        >
-                        <a-button
-                            class="boolean-button"
-                            type="primary"
-                            size="large"
-                            @click="changeValue(!selectedItem.value)"
-                        >
-                            {{ selectedItem.value ? '关闭' : '开启' }}设置
-                        </a-button>
                     </div>
                 </div>
             </div>