feat(status-bar): 状态条选项新增了disable属性, 当为true时不会创建状态条

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(); // 舞台滑出
         }
       },
       {

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<void> {
+    await this.oml2d?.statusBar.open(content, color);
+  }
+
+  async statusBarClose(content?: string, color?: string, delay?: number): Promise<void> {
+    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 {

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,32 +118,20 @@ export class StatusBar {
   }
 
   showLoading(): void {
-    this.popup(
+    void this.open(
       `
       <div style="margin-bottom:3px;">加载中</div>
       <svg class="oml2d-icon oml2d-loading" aria-hidden="true">
         <use xlink:href="#icon-loading"></use>
       </svg>
-    `,
-      false
+    `
     );
   }
 
   hideLoading(): void {
     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<void> {
+    if (content) {
+      this.setContent(content);
+    }
+    this.setColor(color);
+    await this.slideIn();
+  }
+
+  close(content?: string, color = this.options.primaryColor, delay = 0): Promise<void> {
+    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(() => {

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;
   /**

tests/vite-app/src/main.ts

@@ -49,6 +49,7 @@ const foo = async () => {
       }
     },
     statusBar: {
+      disable: false,
       style: {}
     },
     menus: {