diff --git a/packages/oh-my-live2d/src/config/config.ts b/packages/oh-my-live2d/src/config/config.ts index 1b1422f..d9fd2ad 100644 --- a/packages/oh-my-live2d/src/config/config.ts +++ b/packages/oh-my-live2d/src/config/config.ts @@ -19,6 +19,7 @@ export const DEFAULT_OPTIONS: DefaultOptions = { }, models: [], statusBar: { + disable: false, errorColor: STATUS_BAR_ERROR_COLOR, style: STATUS_BAR_DEFAULT_STYLE, mobileStyle: STATUS_BAR_DEFAULT_STYLE @@ -61,16 +62,15 @@ export const DEFAULT_OPTIONS: DefaultOptions = { icon: 'icon-rest', title: '休息', onClick(oml2d): void { - oml2d.statusBarPopup('看板娘休息中', false); - - oml2d.clearTips(); + void oml2d.statusBarOpen('看板娘休息中'); // 展示状态条 + oml2d.clearTips(); // 清除当前提示框内容, 并停止空闲消息播放器 + // 为状态条绑定点击事件 oml2d.setStatusBarClickEvent(() => { - oml2d.statusBarPopup(); - void oml2d.stageSlideIn(); + void oml2d.statusBarClose(); // 关闭状态条 + void oml2d.stageSlideIn(); // 舞台滑入 }); - - void oml2d.stageSlideOut(); + void oml2d.stageSlideOut(); // 舞台滑出 } }, { diff --git a/packages/oh-my-live2d/src/modules/load-oml2d.ts b/packages/oh-my-live2d/src/modules/load-oml2d.ts index a54d49a..8492571 100644 --- a/packages/oh-my-live2d/src/modules/load-oml2d.ts +++ b/packages/oh-my-live2d/src/modules/load-oml2d.ts @@ -72,8 +72,16 @@ export class LoadOhMyLive2D { void this.oml2d?.tips.idlePlayer?.start(); } - statusBarPopup(message?: string, delay?: number | false, color?: string): void { - this.oml2d?.statusBar.popup(message, delay, color); + async statusBarOpen(content?: string, color?: string): Promise { + await this.oml2d?.statusBar.open(content, color); + } + + async statusBarClose(content?: string, color?: string, delay?: number): Promise { + await this.oml2d?.statusBar.close(content, color, delay); + } + + statusBarPopup(content?: string, delay?: number, color?: string): void { + this.oml2d?.statusBar.popup(content, delay, color); } setStatusBarClickEvent(fn: EventType): void { diff --git a/packages/oh-my-live2d/src/modules/status-bar.ts b/packages/oh-my-live2d/src/modules/status-bar.ts index f86c30f..5c1a2df 100644 --- a/packages/oh-my-live2d/src/modules/status-bar.ts +++ b/packages/oh-my-live2d/src/modules/status-bar.ts @@ -28,7 +28,9 @@ export class StatusBar { constructor(private options: DefaultOptions) {} create(): void { - this.element = createElement({ id: ELEMENT_ID.statusBar, tagName: 'div', innerText: '' }); + if (!this.options.statusBar.disable) { + this.element = createElement({ id: ELEMENT_ID.statusBar, tagName: 'div', innerText: '' }); + } } mount(): void { @@ -116,14 +118,13 @@ export class StatusBar { } showLoading(): void { - this.popup( + void this.open( `
加载中
- `, - false + ` ); } @@ -131,17 +132,6 @@ export class StatusBar { this.popup('加载成功'); } - // setHoverAction(inContent: HoverActionParams, outContent: HoverActionParams): void { - // if (this.element) { - // this.element.onmouseover = (): void => { - // this.popup(inContent.content, inContent.state, false); - // }; - // this.element.onmouseout = (): void => { - // this.popup(outContent.content, outContent.state, false); - // }; - // } - // } - setHoverEvent(events?: { onIn?: () => void; onOut?: () => void }): void { if (this.element) { this.element.onmouseover = events?.onIn || null; @@ -190,20 +180,9 @@ export class StatusBar { }); // 弹出状态提示 - this.popup('加载失败', false, this.options.statusBar.errorColor); + void this.open('加载失败', this.options.statusBar.errorColor); } - // rest(isPermanent = false, callback?: () => void): void { - // if (isPermanent) { - // this.popup('看板娘休息中', SystemState.info, false, () => { - // void this.slideOut(); - // callback?.(); - // }); - // } else { - // this.popup('看板娘休息中', SystemState.info, 8000); - // } - // } - get stateColor(): { info: string; error: string } { return { info: this.options.primaryColor, @@ -217,19 +196,40 @@ export class StatusBar { } this.setStyle({ backgroundColor: color }); } + + async open(content?: string, color = this.options.primaryColor): Promise { + if (content) { + this.setContent(content); + } + this.setColor(color); + await this.slideIn(); + } + + close(content?: string, color = this.options.primaryColor, delay = 0): Promise { + return new Promise((resolve) => { + if (content) { + this.setContent(content); + } + this.setColor(color); + setTimeout(() => { + void this.slideOut().then(resolve); + }, delay); + }); + } + /** * 状态条弹出, 自动收起, delay为false时不收起 * @param message * @param state * @param delay */ - popup(message?: string, delay: number | false = 0, color = this.options.primaryColor): void { + popup(message?: string, delay: number = 0, color = this.options.primaryColor): void { clearTimeout(this.timer); this.setColor(color); if (message) { this.setContent(message); } - // this.setStyle({ backgroundColor: this.stateColor[state] }); + void this.slideIn().then(() => { if (isNumber(delay)) { this.timer = setTimeout(() => { diff --git a/packages/oh-my-live2d/src/types/statusBar.ts b/packages/oh-my-live2d/src/types/statusBar.ts index 1eb40ce..36e8ed9 100644 --- a/packages/oh-my-live2d/src/types/statusBar.ts +++ b/packages/oh-my-live2d/src/types/statusBar.ts @@ -6,7 +6,12 @@ import { CommonStyleType } from './common.js'; */ export interface StatusBarOptions { /** - * 异常时展示的背景色 + * 禁用状态条, 为true时将不再展示状态条 + * @default false + */ + disable?: boolean; + /** + * 加载异常时展示的背景色 */ errorColor?: string; /** diff --git a/tests/vite-app/src/main.ts b/tests/vite-app/src/main.ts index 2237a45..5b4de92 100644 --- a/tests/vite-app/src/main.ts +++ b/tests/vite-app/src/main.ts @@ -49,6 +49,7 @@ const foo = async () => { } }, statusBar: { + disable: false, style: {} }, menus: {