AncTe/HumanBreak
1
1
Fork 0
mirror of https://github.com/unanmed/HumanBreak.git synced 2025-04-11 15:47:06 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: UI 系统类型加强

Browse Source
This commit is contained in:
unanmed 2025-03-03 11:10:34 +08:00
parent 109e77d6a2
commit 5b2f42f692
4 changed files with 114 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/core/system/ui/container.tsx
View File

@ -1,9 +1,9 @@
import { computed, defineComponent, VNode } from 'vue';
import { IUIMountable, UIComponent } from './shared';
import { defineComponent, VNode } from 'vue';
import { IUIMountable } from './shared';
import { SetupComponentOptions } from '@/module';
export interface UIContainerProps {
controller: IUIMountable<UIComponent>;
controller: IUIMountable;
}
const containerConfig = {
@ -13,18 +13,29 @@ const containerConfig = {
export const UIContainer = defineComponent<UIContainerProps>(props => {
const data = props.controller;
const back = data.backIns;
const show = computed(() => data.stack.filter(v => !v.hidden));
return (): VNode[] => {
const elements: VNode[] = [];
const b = back.value;
if (b && data.showBack.value && !b.hidden) {
elements.push(
<b.ui.component {...b.vBind} key={b.key}></b.ui.component>
<b.ui.component
{...b.vBind}
controller={data}
instance={b}
key={b.key}
hidden={b.hidden}
></b.ui.component>
);
}
return elements.concat(
show.value.map(v => (
<v.ui.component {...v.vBind} key={v.key}></v.ui.component>
data.stack.map(v => (
<v.ui.component
{...v.vBind}
key={v.key}
controller={data}
instance={v}
hidden={v.hidden}
></v.ui.component>
))
);
};

70
src/core/system/ui/controller.ts
View File

@ -5,9 +5,9 @@ import {
IKeepController,
IUIInstance,
IUIMountable,
UIComponent
UIComponent,
UIProps
} from './shared';
import { Props } from '@/core/render';
import { UIInstance } from './instance';
import {
computed,
@ -35,13 +35,13 @@ export const enum UIMode {
Custom
}
export interface IUICustomConfig<C extends UIComponent> {
export interface IUICustomConfig {
/**
* 打开一个新的 UI
* @param ins 要打开的 UI 实例
* @param stack 当前的 UI 栈，还未将 UI 实例加入栈中
*/
open(ins: IUIInstance<C>, stack: IUIInstance<C>[]): void;
open(ins: IUIInstance, stack: IUIInstance[]): void;
/**
* 关闭一个 UI
@ -49,7 +49,7 @@ export interface IUICustomConfig<C extends UIComponent> {
* @param stack 当前的 UI 栈，还未将 UI 实例移除
* @param index 这个 UI 实例在 UI 栈中的索引
*/
close(ins: IUIInstance<C>, stack: IUIInstance<C>[], index: number): void;
close(ins: IUIInstance, stack: IUIInstance[], index: number): void;
/**
* 隐藏一个 UI
@ -57,7 +57,7 @@ export interface IUICustomConfig<C extends UIComponent> {
* @param stack 当前的 UI 栈
* @param index 这个 UI 实例在 UI 栈中的索引
*/
hide(ins: IUIInstance<C>, stack: IUIInstance<C>[], index: number): void;
hide(ins: IUIInstance, stack: IUIInstance[], index: number): void;
/**
* 显示一个 UI
@ -65,32 +65,32 @@ export interface IUICustomConfig<C extends UIComponent> {
* @param stack 当前的 UI 栈
* @param index 这个 UI 实例在 UI 栈中的索引
*/
show(ins: IUIInstance<C>, stack: IUIInstance<C>[], index: number): void;
show(ins: IUIInstance, stack: IUIInstance[], index: number): void;
/**
* 更新所有 UI 的显示，一般会在显示模式更改时调用
* @param stack 当前的 UI 栈
*/
update(stack: IUIInstance<C>[]): void;
update(stack: IUIInstance[]): void;
}
interface UIControllerEvent {}
export class UIController<C extends UIComponent = UIComponent>
export class UIController
extends EventEmitter<UIControllerEvent>
implements IUIMountable<C>
implements IUIMountable
{
static controllers: Map<string, UIController> = new Map();
/** 当前的 ui 栈 */
readonly stack: IUIInstance<C>[] = reactive([]);
readonly stack: IUIInstance[] = reactive([]);
/** UI 显示方式 */
mode: UIMode = UIMode.LastOnlyStack;
/** 这个 UI 实例的背景，当这个 UI 处于显示模式时，会显示背景 */
background?: IGameUI<C>;
background?: IGameUI;
/** 背景 UI 实例 */
readonly backIns: ShallowRef<IUIInstance<C> | null> = shallowRef(null);
readonly backIns: ShallowRef<IUIInstance | null> = shallowRef(null);
/** 当前是否显示背景 UI */
readonly showBack: ComputedRef<boolean> = computed(
() => this.userShowBack.value && this.sysShowBack.value
@ -102,7 +102,7 @@ export class UIController<C extends UIComponent = UIComponent>
}
/** 自定义显示模式下的配置信息 */
private config?: IUICustomConfig<C>;
private config?: IUICustomConfig;
/** 是否维持背景 UI */
private keepBack: boolean = false;
/** 用户是否显示背景 UI */
@ -134,7 +134,7 @@ export class UIController<C extends UIComponent = UIComponent>
* 设置背景 UI
* @param back 这个 UI 控制器的背景 UI
*/
setBackground(back: IGameUI<C>) {
setBackground(back: IGameUI) {
this.background = back;
}
@ -171,13 +171,12 @@ export class UIController<C extends UIComponent = UIComponent>
};
}
/**
* 打开一个 ui
* @param ui 要打开的 ui
* @param vBind 传递给这个 ui 的响应式数据
*/
open(ui: IGameUI<C>, vBind: Props<C>) {
const ins = new UIInstance(ui, vBind);
open<T extends UIComponent>(
ui: IGameUI<T>,
vBind: UIProps<T>,
alwaysShow: boolean = false
): IUIInstance<T> {
const ins = new UIInstance(ui, vBind, alwaysShow);
switch (this.mode) {
case UIMode.LastOnly:
case UIMode.LastOnlyStack:
@ -196,11 +195,7 @@ export class UIController<C extends UIComponent = UIComponent>
return ins;
}
/**
* 关闭一个 ui
* @param ui 要关闭的 ui 实例
*/
close(ui: UIInstance<C>) {
close(ui: IUIInstance) {
const index = this.stack.indexOf(ui);
if (index === -1) return;
switch (this.mode) {
@ -239,7 +234,16 @@ export class UIController<C extends UIComponent = UIComponent>
this.keepBack = false;
}
hide(ins: IUIInstance<C>): void {
closeAll(ui?: IGameUI): void {
if (!ui) {
this.stack.splice(0);
} else {
const list = this.stack.filter(v => v.ui === ui);
list.forEach(v => this.close(v));
}
}
hide(ins: IUIInstance): void {
const index = this.stack.indexOf(ins);
if (index === -1) return;
if (this.mode === UIMode.Custom) {
@ -249,7 +253,7 @@ export class UIController<C extends UIComponent = UIComponent>
}
}
show(ins: IUIInstance<C>): void {
show(ins: IUIInstance): void {
const index = this.stack.indexOf(ins);
if (index === -1) return;
if (this.mode === UIMode.Custom) {
@ -290,7 +294,7 @@ export class UIController<C extends UIComponent = UIComponent>
* 使用自定义的显示模式
* @param config 自定义显示模式的配置
*/
showCustom(config: IUICustomConfig<C>) {
showCustom(config: IUICustomConfig) {
this.mode = UIMode.Custom;
this.config = config;
config.update(this.stack);
@ -300,10 +304,8 @@ export class UIController<C extends UIComponent = UIComponent>
* 获取一个元素上的 ui 控制器
* @param id 要获取的 ui 控制器的唯一标识符
*/
static getController<T extends UIComponent>(
id: string
): UIController<T> | null {
const res = this.controllers.get(id) as UIController<T>;
static getController(id: string): UIController | null {
const res = this.controllers.get(id);
return res ?? null;
}
}

13
src/core/system/ui/instance.ts
View File

@ -1,5 +1,5 @@
import { Props } from '@/core/render';
import { IGameUI, IUIInstance, UIComponent } from './shared';
import { IGameUI, IUIInstance, UIComponent, UIProps } from './shared';
import EventEmitter from 'eventemitter3';
import { markRaw, mergeProps } from 'vue';
@ -21,7 +21,8 @@ export class UIInstance<C extends UIComponent>
constructor(
ui: IGameUI<C>,
public vBind: Props<C>
public vBind: UIProps<C>,
public readonly alwaysShow: boolean = false
) {
super();
this.ui = markRaw(ui);
@ -30,13 +31,13 @@ export class UIInstance<C extends UIComponent>
/**
* 设置这个 UI 实例的响应式数据的值
* @param data 要设置的值
* @param merge 是将传入的值与原先的值合并（true），还是将当前值覆盖掉原先的值（false）
* @param merge 是将传入的值与原先的值合并（true），还是将当前值覆盖掉原先的值（false），默认合并
*/
setVBind(data: Props<C>, merge: boolean = true) {
setVBind(data: Partial<Props<C>>, merge: boolean = true) {
if (merge) {
this.vBind = mergeProps(this.vBind, data) as Props<C>;
this.vBind = mergeProps(this.vBind, data) as UIProps<C>;
} else {
this.vBind = data;
this.vBind = data as UIProps<C>;
}
}

61
src/core/system/ui/shared.ts
View File

@ -3,7 +3,17 @@ import { DefineComponent, DefineSetupFnComponent, Ref, ShallowRef } from 'vue';
export type UIComponent = DefineSetupFnComponent<any> | DefineComponent;
export interface IGameUI<C extends UIComponent> {
export interface UIComponentProps<T extends UIComponent = UIComponent> {
controller: IUIMountable;
instance: IUIInstance<T>;
}
export type UIProps<C extends UIComponent = UIComponent> = Omit<
Props<C>,
keyof UIComponentProps<C>
>;
export interface IGameUI<C extends UIComponent = UIComponent> {
/** 这个 UI 的名称 */
readonly name: string;
/** 这个 UI 的组件 */
@ -22,11 +32,11 @@ export interface IKeepController {
unload(): void;
}
export interface IUIMountable<C extends UIComponent> {
export interface IUIMountable {
/** 当前的 UI 栈 */
readonly stack: IUIInstance<C>[];
readonly stack: IUIInstance<UIComponent>[];
/** 当前的背景 UI */
readonly backIns: ShallowRef<IUIInstance<C> | null>;
readonly backIns: ShallowRef<IUIInstance<UIComponent> | null>;
/** 当前是否显示背景 UI */
readonly showBack: Ref<boolean>;
@ -34,13 +44,46 @@ export interface IUIMountable<C extends UIComponent> {
* 隐藏一个 UI
* @param ins 要隐藏的 UI 实例
*/
hide(ins: IUIInstance<C>): void;
hide(ins: IUIInstance<UIComponent>): void;
/**
* 显示一个 UI
* @param ins 要显示的 UI 实例
*/
show(ins: IUIInstance<C>): void;
show(ins: IUIInstance<UIComponent>): void;
/**
* 隐藏背景 UI
*/
hideBackground(): void;
/**
* 显示背景 UI
*/
showBackground(): void;
/**
* 打开一个 ui
* @param ui 要打开的 ui
* @param vBind 传递给这个 ui 的响应式数据
* @param alwaysShow 这个 ui 是否保持开启，对于需要叠加显示的 ui 非常有用
*/
open<T extends UIComponent>(
ui: IGameUI<T>,
vBind: UIProps<T>,
alwaysShow?: boolean
): IUIInstance<T>;
/**
* 关闭一个 ui
* @param ui 要关闭的 ui 实例
*/
close(ui: IUIInstance<UIComponent>): void;
/**
* 关闭所有或指定类型的所有 UI
*/
closeAll(ui?: IGameUI<UIComponent>): void;
/**
* 维持背景，直到下次所有 UI 都被关闭
@ -48,15 +91,17 @@ export interface IUIMountable<C extends UIComponent> {
keep(): IKeepController;
}
export interface IUIInstance<C extends UIComponent> {
export interface IUIInstance<C extends UIComponent = UIComponent> {
/** 这个 ui 实例的唯一 key，用于 vue */
readonly key: number;
/** 这个 ui 实例的 ui 信息 */
readonly ui: IGameUI<C>;
/** 传递给这个 ui 实例的响应式数据 */
readonly vBind: Props<C>;
readonly vBind: UIProps<C>;
/** 当前元素是否被隐藏 */
readonly hidden: boolean;
/** 是否永远保持开启 */
readonly alwaysShow: boolean;
/**
* 隐藏这个 ui