feat: 菜单项可配, 现在您可以自由配置菜单项的图标和事件. loadOml2d暴露主动提示消息方法tipsMessage

docs/src/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.12.0](https://github.com/oh-my-live2d/oh-my-live2d/compare/v0.11.1...v0.12.0) (2024-03-16)
+
+### ✨ Features | 新功能
+
+- **menus:** 新增了移动端下菜单样式的配置选项 ([995a74a](https://github.com/oh-my-live2d/oh-my-live2d/commit/995a74abb46f3762068fe099cdb402548ad136e6)) by Hacxy
+
 ## [0.11.1](https://github.com/oh-my-live2d/oh-my-live2d/compare/v0.11.0...v0.11.1) (2024-03-15)
 
 ### 🐛 Bug Fixes | Bug 修复

docs/src/options/MenusOptions.md

@@ -10,6 +10,12 @@
 
 ---
 
+### items
+
+配置菜单项,
+
+---
+
 ### mobileItemStyle
 
 移动端下菜单子项样式

docs/src/options/StatusBarOptions.md

@@ -10,6 +10,12 @@
 
 ---
 
+### mobileStyle
+
+移动端下状态条样式
+
+---
+
 ### style
 
 - 类型: `object`

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

@@ -55,6 +55,32 @@ export const DEFAULT_OPTIONS: DefaultOptions = {
     }
   },
   menus: {
+    items: [
+      {
+        id: 'Rest',
+        icon: 'icon-rest',
+        title: '休息',
+        onClick(oml2d): void {
+          oml2d.switchStatus();
+        }
+      },
+      {
+        id: 'SwitchModel',
+        icon: 'icon-switch',
+        title: '切换模型',
+        onClick(oml2d): void {
+          void oml2d.loadNextModel();
+        }
+      },
+      {
+        id: 'About',
+        icon: 'icon-about',
+        title: '关于',
+        onClick(): void {
+          window.open('https://oml2d.com');
+        }
+      }
+    ],
     style: MENUS_DEFAULT_STYLE,
     itemStyle: {},
     mobileStyle: MENUS_DEFAULT_STYLE,
@@ -72,27 +98,3 @@ export const ELEMENT_ID = {
   menus: 'oml2d-menus',
   iconSvg: 'oml2d-icon-svg'
 };
-
-/** 菜单的配置 */
-export const MENU_ITEMS = [
-  {
-    id: 'Rest',
-    name: 'icon-bed',
-    title: '休息'
-  },
-  {
-    id: 'SwitchModel',
-    name: 'icon-a-userswitch-fill',
-    title: '切换模型'
-  },
-  // {
-  //   id: 'Play',
-  //   name: 'icon-skin-fill',
-  //   title: '变装'
-  // },
-  {
-    id: 'About',
-    name: 'icon-info-circle-fill',
-    title: '关于'
-  }
-];

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

@@ -1,52 +1,57 @@
-import { mergeDeep } from 'tianjie';
+import { isArray, isFunction, mergeDeep } from 'tianjie';
 
-import { ELEMENT_ID, MENU_ITEMS } from '../config/index.js';
+import { DEFAULT_OPTIONS, ELEMENT_ID } from '../config/index.js';
 import { WindowSizeType } from '../constants/index.js';
-import type { CSSProperties, DefaultOptions } from '../types/index.js';
+import { Item, OML2D } from '../types/common.js';
+import type { CSSProperties, DefaultOptions, MenusOptions } from '../types/index.js';
 import { createElement, getWindowSizeType, handleCommonStyle, setStyleForElement } from '../utils/index.js';
 
 export class Menus {
   element?: HTMLElement;
   private style: CSSProperties = {};
   private itemStyle: CSSProperties = {};
-  private clickItem?: ((name: string) => void) | ((name: string) => Promise<void>);
   private menuItemList: HTMLElement[] = [];
 
-  constructor(private options: DefaultOptions) {}
+  constructor(
+    private options: DefaultOptions,
+    private oml2d: OML2D
+  ) {}
 
-  createMenuItem(): void {
-    this.menuItemList = MENU_ITEMS.map((item) => {
+  private get menuOptions(): MenusOptions {
+    return this.options.menus;
+  }
+
+  createMenuItemElements(items: Item[]): void {
+    this.menuItemList = items.map((item) => {
       const el = createElement({
         id: item.id,
         tagName: 'div',
         dataName: item.id,
         className: 'oml2d-menus-item',
         innerHtml: `
-      <svg class="oml2d-icon">
-        <use xlink:href="#${item.name}"></use>
-      </svg>
-    `
+<svg class="oml2d-icon">
+  <use xlink:href="#${item.icon}"></use>
+</svg>
+`
       });
 
       el.title = item.title;
 
+      el.onclick = (): void => {
+        item.onClick?.(this.oml2d);
+      };
+
       return el;
     });
+  }
+  createMenuItem(): void {
+    if (isArray(this.menuOptions.items)) {
+      this.createMenuItemElements(this.menuOptions.items);
+    } else if (isFunction(this.menuOptions.items)) {
+      const items = this.menuOptions.items(DEFAULT_OPTIONS.menus.items);
 
-    // this.element.append(...this.menuItemList);
-
-    this.element?.addEventListener('click', (e) => {
-      if (e.target === e.currentTarget) {
-        return;
-      }
-      let target = e.target as HTMLElement;
-
-      while (target.parentNode !== e.currentTarget) {
-        target = target.parentNode as HTMLElement;
-      }
-
-      void this.clickItem?.(target.getAttribute('data-name')!);
-    });
+      this.createMenuItemElements(items);
+    }
   }
 
   /**
@@ -114,10 +119,6 @@ export class Menus {
     this.reloadStyle();
   }
 
-  onClickItem(fn: ((name) => void) | ((name) => Promise<void>)): void {
-    this.clickItem = fn;
-  }
-
   setStyle(style: CSSProperties): void {
     if (this.element) {
       this.style = mergeDeep(this.style, style);

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

@@ -30,7 +30,7 @@ export class OhMyLive2D {
     this.stage = new Stage(options); // 实例化舞台
     this.statusBar = new StatusBar(options);
     this.tips = new Tips(options); // 提示框
-    this.menus = new Menus(options); // 菜单
+    this.menus = new Menus(options, this); // 菜单
     this.models = new Models(options, this.PixiLive2dDisplay);
     this.application = new Application(this.PIXI);
     this.store = new Store();
@@ -205,27 +205,6 @@ export class OhMyLive2D {
     window.document.oncopy = (): void => {
       this.tips.copy();
     };
-
-    // 菜单按钮项被点击
-    this.menus.onClickItem((name) => {
-      switch (name) {
-        case 'Rest':
-          // 休息
-          this.switchStatus();
-
-          return;
-        case 'SwitchModel':
-          // 切换模型
-          void this.loadNextModel();
-
-          return;
-        case 'About':
-          // 关于
-          window.open('https://oml2d.com');
-
-          return;
-      }
-    });
   }
 
   /**
@@ -236,7 +215,7 @@ export class OhMyLive2D {
   }
 
   /**
-   * 主动提示消息
+   * 提示消息
    */
   tipsMessage(message: string, duration?: number, priority?: number): void {
     this.tips.notification(message, duration, priority);

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

@@ -45,3 +45,10 @@ export type LoadOml2dSDK = (
 export type OML2D = Omit<OhMyLive2D, 'unMount' | 'initialize'>;
 
 export type StoreModelInfo = { key: string; currentIndex: number } | undefined;
+
+export type Item = {
+  id: string;
+  icon: string;
+  title: string;
+  onClick?: (oml2d: OML2D) => void;
+};

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

@@ -3,7 +3,7 @@ import type { Live2DModel } from 'pixi-live2d-display';
 import type { HitAreaFrames } from 'pixi-live2d-display/extra';
 import type { Application } from 'pixi.js';
 
-import { CommonStyleType } from './common.js';
+import { CommonStyleType, Item } from './common.js';
 import type { ModelOptions } from './model.js';
 import type { MenusOptions, Options } from './options.js';
 import { StatusBarOptions } from './statusBar.js';
@@ -46,7 +46,8 @@ export type DefaultStatusBarOptions = Omit<DeepRequired<StatusBarOptions>, 'styl
   mobileStyle?: CommonStyleType;
 };
 
-export type DefaultMenusOptions = Omit<DeepRequired<MenusOptions>, 'style' | 'itemStyle' | 'mobileStyle' | 'mobileItemStyle'> & {
+export type DefaultMenusOptions = Omit<DeepRequired<MenusOptions>, 'style' | 'itemStyle' | 'mobileStyle' | 'mobileItemStyle' | 'items'> & {
+  items: Item[];
   style?: CommonStyleType;
   itemStyle?: CommonStyleType;
   mobileStyle?: CommonStyleType;

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

@@ -1,10 +1,16 @@
-import { CommonStyleType } from './common.js';
+// import { OhMyLive2D } from 'src/modules/oml2d.js';
+import { CommonStyleType, Item } from './common.js';
 
 /**
  * # 菜单选项
  * @name 菜单选项
  */
 export interface MenusOptions {
+  /**
+   * 配置菜单项,
+   */
+  items?: Item[] | ((defaultItems: Item[]) => Item[]);
+
   /**
    * 配置菜单整体样式
    * @valueType object