feat(status-bar): 添加状态条配置选项

packages/oh-my-live2d/src/config/config.ts

@@ -20,6 +20,14 @@ export const DEFAULT_OPTIONS: DefaultOptions = {
   models: [],
   statusBar: {
     disable: false,
+    transitionTime: 800,
+    loadingMessage: '加载中',
+    loadSuccessMessage: '加载成功',
+    loadFailMessage: '加载失败',
+    reloadMessage: '重新加载',
+    restMessage: '看板娘休息中',
+    restMessageDuration: 8000,
+    loadingIcon: 'icon-loading',
     errorColor: STATUS_BAR_ERROR_COLOR,
     style: STATUS_BAR_DEFAULT_STYLE,
     mobileStyle: STATUS_BAR_DEFAULT_STYLE
@@ -63,14 +71,16 @@ export const DEFAULT_OPTIONS: DefaultOptions = {
         icon: 'icon-rest',
         title: '休息',
         onClick(oml2d): void {
-          void oml2d.statusBarOpen('看板娘休息中'); // 展示状态条
+          oml2d.statusBarOpen(oml2d.options.statusBar.restMessage); // 展示状态条
           oml2d.clearTips(); // 清除当前提示框内容, 并停止空闲消息播放器
 
           // 为状态条绑定点击事件
           oml2d.setStatusBarClickEvent(() => {
             void oml2d.statusBarClose(); // 关闭状态条
             void oml2d.stageSlideIn(); // 舞台滑入
+            oml2d.statusBarClearEvents(); // 清除所有事件
           });
+
           void oml2d.stageSlideOut(); // 舞台滑出
         }
       },
@@ -98,7 +108,6 @@ export const DEFAULT_OPTIONS: DefaultOptions = {
   }
 };
 
-/** 全局配置 */
 export const ELEMENT_ID = {
   globalStyle: 'oml2d-global-style',
   stage: 'oml2d-stage',

packages/oh-my-live2d/src/modules/load-oml2d.ts

@@ -72,18 +72,22 @@ export class LoadOhMyLive2D {
     void this.oml2d?.tips.idlePlayer?.start();
   }
 
-  async statusBarOpen(content?: string, color?: string): Promise<void> {
-    await this.oml2d?.statusBar.open(content, color);
+  statusBarOpen(content?: string, color?: string): void {
+    this.oml2d?.statusBar.open(content, color);
   }
 
-  async statusBarClose(content?: string, color?: string, delay?: number): Promise<void> {
-    await this.oml2d?.statusBar.close(content, color, delay);
+  statusBarClose(content?: string, color?: string, delay?: number): void {
+    this.oml2d?.statusBar.close(content, color, delay);
   }
 
   statusBarPopup(content?: string, delay?: number, color?: string): void {
     this.oml2d?.statusBar.popup(content, delay, color);
   }
 
+  statusBarClearEvents(): void {
+    this.oml2d?.statusBar.clearClickEvent();
+    this.oml2d?.statusBar.clearHoverEvent();
+  }
   setStatusBarClickEvent(fn: EventType): void {
     this.oml2d?.statusBar.setClickEvent(fn);
   }

packages/oh-my-live2d/src/modules/oml2d.ts

@@ -99,6 +99,8 @@ export class OhMyLive2D {
     }
 
     if (this.mobileHidden) {
+      this.statusBar.rest();
+
       return;
     }
     if (isLoading) {

packages/oh-my-live2d/src/modules/status-bar.ts

@@ -1,8 +1,8 @@
-import { mergeDeep } from 'tianjie';
+import { isNumber, mergeDeep } from 'tianjie';
 
 import { ELEMENT_ID } from '../config/index.js';
 import { WindowSizeType } from '../constants/index.js';
-import type { CSSProperties, DefaultOptions } from '../types/index.js';
+import type { CSSProperties, DefaultOptions, DefaultStatusBarOptions } from '../types/index.js';
 import { createElement, getWindowSizeType, handleCommonStyle, setStyleForElement } from '../utils/index.js';
 
 export type HoverActionParams = {
@@ -14,13 +14,16 @@ export type HoverActionParams = {
  */
 export class StatusBar {
   element?: HTMLElement;
-  transitionTime = 800;
 
   private style: CSSProperties = {};
   private timer = 0;
   private status = false;
   constructor(private options: DefaultOptions) {}
 
+  get statusBarOptions(): DefaultStatusBarOptions {
+    return this.options.statusBar;
+  }
+
   create(): void {
     if (!this.options.statusBar.disable) {
       this.element = createElement({ id: ELEMENT_ID.statusBar, tagName: 'div', innerText: '' });
@@ -80,13 +83,13 @@ export class StatusBar {
       {
         this.setStyle({
           animationName: 'oml2d-status-bar-slide-in',
-          animationDuration: `${this.transitionTime}ms`,
+          animationDuration: `${this.statusBarOptions.transitionTime}ms`,
           animationFillMode: 'forwards'
         });
         setTimeout(() => {
           this.status = true;
           resolve();
-        }, this.transitionTime);
+        }, this.statusBarOptions.transitionTime);
       }
     });
   }
@@ -98,32 +101,32 @@ export class StatusBar {
       } else {
         this.setStyle({
           animationName: 'oml2d-status-bar-slide-out',
-          animationDuration: `${this.transitionTime}ms`,
+          animationDuration: `${this.statusBarOptions.transitionTime}ms`,
           animationFillMode: 'forwards'
         });
         setTimeout(() => {
           this.status = true;
-          this.clearClickEvent();
-          this.clearHoverEvent();
+          // this.clearClickEvent();
+          // this.clearHoverEvent();
           resolve();
-        }, this.transitionTime);
+        }, this.statusBarOptions.transitionTime);
       }
     });
   }
 
   showLoading(): void {
     void this.open(
       `
-      <div style="margin-bottom:3px;">加载中</div>
+      <div style="margin-bottom:3px;">${this.statusBarOptions.loadingMessage}</div>
       <svg class="oml2d-icon oml2d-loading" aria-hidden="true">
-        <use xlink:href="#icon-loading"></use>
+        <use xlink:href=#${this.statusBarOptions.loadingIcon}></use>
       </svg>
     `
     );
   }
 
   hideLoading(): void {
-    this.popup('加载成功', 1000);
+    this.popup(this.statusBarOptions.loadSuccessMessage, 1000);
   }
 
   setHoverEvent(events?: { onIn?: () => void; onOut?: () => void }): void {
@@ -154,17 +157,21 @@ export class StatusBar {
     }
   }
 
+  rest(): void {
+    this.popup(this.statusBarOptions.restMessage, this.statusBarOptions.restMessageDuration);
+  }
+
   /**
    * 专门处理加载失败, 需要传入一个重新加载的方法
    * @param reloadFn
    */
   loadingError(reloadFn: () => void): void {
     this.setHoverEvent({
       onIn: () => {
-        this.setContent('重新加载');
+        this.setContent(this.statusBarOptions.reloadMessage);
       },
       onOut: () => {
-        this.setContent('加载失败');
+        this.setContent(this.statusBarOptions.loadFailMessage);
       }
     });
 
@@ -174,7 +181,7 @@ export class StatusBar {
     });
 
     // 弹出状态提示
-    void this.open('加载失败', this.options.statusBar.errorColor);
+    void this.open(this.statusBarOptions.loadFailMessage, this.options.statusBar.errorColor);
   }
 
   get stateColor(): { info: string; error: string } {
@@ -191,24 +198,12 @@ 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();
+  open(content?: string, color = this.options.primaryColor): void {
+    this.popup(content, false, color);
   }
 
-  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);
-    });
+  close(content?: string, color = this.options.primaryColor, delay = 0): void {
+    this.popup(content, delay, color);
   }
 
   /**
@@ -217,17 +212,22 @@ export class StatusBar {
    * @param state
    * @param delay
    */
-  popup(message?: string, delay: number = 0, color = this.options.primaryColor): void {
+  popup(message?: string, delay: number | false = 0, color = this.options.primaryColor): void {
     clearTimeout(this.timer);
     this.setColor(color);
     if (message) {
       this.setContent(message);
     }
 
     void this.slideIn().then(() => {
-      this.timer = setTimeout(() => {
-        void this.slideOut();
-      }, delay);
+      if (isNumber(delay)) {
+        this.timer = setTimeout(() => {
+          void this.slideOut().then(() => {
+            // this.clearClickEvent();
+            // this.clearHoverEvent();
+          });
+        }, delay);
+      }
     });
   }
 

packages/oh-my-live2d/src/types/statusBar.ts

@@ -10,17 +10,67 @@ export interface StatusBarOptions {
    * @default false
    */
   disable?: boolean;
+
+  /**
+   * 加载时的提示文本
+   * @default 加载中
+   */
+  loadingMessage?: string;
+  /**
+   * 模型加载成功时提示的文本信息
+   * @default 加载成功
+   */
+  loadSuccessMessage?: string;
+
+  /**
+   * 模型加载失败时提示的文本信息
+   * @default 加载失败
+   */
+  loadFailMessage?: string;
+
+  /**
+   * 加载失败hover事件时模型重新加载文本信息
+   * @default 重新加载
+   */
+  reloadMessage?: string;
+
+  /**
+   * 模型休息状态时提示的文本信息
+   * @default 看板娘休息中
+   */
+  restMessage?: string;
+
+  /**
+   * 模型休息时提示持续时长, 单位ms
+   * @default 8000
+   */
+  restMessageDuration?: number;
+
+  /**
+   * 自定义模型加载时的icon
+   * @default icon-loading
+   */
+  loadingIcon?: string;
+
+  /**
+   * 状态条弹入弹出时过渡动画时长, 单位ms
+   * @default 800
+   */
+  transitionTime?: number;
   /**
    * 加载异常时展示的背景色
    */
   errorColor?: string;
+
   /**
    * 配置状态条样式
    * @valueType object
    */
   style?: CommonStyleType;
+
   /**
    * 移动端下状态条样式
+   * @valueType object
    */
   mobileStyle?: CommonStyleType;
 }

tests/vite-app/src/main.ts

@@ -8,7 +8,7 @@ const foo = async () => {
   await loadOml2d({
     // parentElement: el,
     // importType: 'complete',
-    mobileDisplay: true,
+    mobileDisplay: false,
     primaryColor: 'pink',
     models: [
       {
@@ -49,6 +49,8 @@ const foo = async () => {
       }
     },
     statusBar: {
+      loadingMessage: '正在加载',
+      restMessage: '睡着了',
       disable: false,
       style: {}
     },