fix: 修复wordTheDayData类型缺失, 调整提示框样式参数, 从之前只能简单配置修改为可配置完整的CSS对象

oh-my-live2d · Mar 12, 2024 · 8db8397 · 8db8397
1 parent ca1fd28
commit 8db8397
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 63 deletions.
diff --git a/packages/oh-my-live2d/src/config/config.ts b/packages/oh-my-live2d/src/config/config.ts
@@ -16,12 +16,7 @@ export const DEFAULT_OPTIONS: DefaultOptions = {
   },
   models: [],
   tips: {
-    style: {
-      width: 230,
-      height: 100,
-      offsetX: 0,
-      offsetY: 0
-    },
+    style: {},
     idleTips: {
       wordTheDay: false,
       message: [],

diff --git a/packages/oh-my-live2d/src/modules/index.ts b/packages/oh-my-live2d/src/modules/index.ts
@@ -17,7 +17,7 @@ import type {
   Options,
   PixiLive2dDisplayModule
 } from '../types/index.js';
-import { checkVersion, handleStyleSize, printProjectInfo } from '../utils/index.js';
+import { checkVersion, handleCommonStyle, printProjectInfo } from '../utils/index.js';
 
 export class OhMyLive2D {
   private stage: Stage;
@@ -105,8 +105,9 @@ export class OhMyLive2D {
   }
 
   setStageStyle(style: Record<string, string | number>): void {
-    handleStyleSize(style);
-    this.stage.setStyle(style);
+    const newStyle = handleCommonStyle(style);
+
+    this.stage.setStyle(newStyle);
     this.application.resize();
   }
 

diff --git a/packages/oh-my-live2d/src/modules/tips.ts b/packages/oh-my-live2d/src/modules/tips.ts
@@ -2,8 +2,8 @@ import { getRandomArrayItem, isFunction, mergeDeep, setIntervalAsync } from 'tia
 
 import { CONFIG } from '../config/index.js';
 import type { IdleTimer } from '../types/common.js';
-import type { CSSProperties, DeepRequired, TipsOptions } from '../types/index.js';
-import { createElement, getWelcomeMessage, getWordTheDay, setStyleForElement, sleep } from '../utils/index.js';
+import type { CSSProperties, DefaultTipsOptions } from '../types/index.js';
+import { createElement, getWelcomeMessage, getWordTheDay, handleCommonStyle, setStyleForElement, sleep } from '../utils/index.js';
 
 export class Tips {
   private element: HTMLElement;
@@ -17,7 +17,7 @@ export class Tips {
 
   constructor(
     stageElement: HTMLElement,
-    private tipsOptions: DeepRequired<TipsOptions>
+    private tipsOptions: DefaultTipsOptions
   ) {
     this.element = createElement({ id: CONFIG.tipsId, tagName: 'div' });
     stageElement.append(this.element);
@@ -49,19 +49,17 @@ export class Tips {
       animationDuration: `${this.transitionTime}ms,${this.transitionTime}ms`,
       animationFillMode: 'forwards, none',
       animationIterationCount: '1, infinite',
-      minWidth: '230px',
-      minHeight: '100px',
+      width: '60%',
+      height: '100px',
       top: 0
     });
     if (this.tipsOptions) {
-      const { width = 230, height = 100, offsetX = 0, offsetY = 0 } = this.tipsOptions.style || {};
+      // const { width = 230, height = 100, offsetX = 0, offsetY = 0 } = this.tipsOptions.style || {};
+      const style = handleCommonStyle(this.tipsOptions.style || {});
 
-      this.setStyle({
-        minWidth: `${width}px`,
-        minHeight: `${height}px`,
-        left: `calc(${offsetX}px + 50%)`,
-        top: `${offsetY}px`
-      });
+      console.log(style);
+
+      this.setStyle(style);
     }
   }
 

diff --git a/packages/oh-my-live2d/src/types/index.ts b/packages/oh-my-live2d/src/types/index.ts
@@ -6,6 +6,7 @@ import type { DEFAULT_OPTIONS } from 'src/config/config.js';
 
 import type { ModelOptions } from './model.js';
 import type { Options } from './options.js';
+import { TipsOptions } from './tips.js';
 import type { DeepRequired } from './utils.js';
 
 export * from './options.js';
@@ -23,9 +24,15 @@ export type ApplicationType = typeof Application;
 
 export type CSSProperties = CSS.Properties;
 
-export type DefaultOptions = Omit<DeepRequired<Options>, 'parentElement' | 'models'> & { parentElement: HTMLElement } & {
+export type DefaultOptions = Omit<DeepRequired<Options>, 'parentElement' | 'models' | 'tips'> & {
+  parentElement: HTMLElement;
+  tips: DefaultTipsOptions;
+} & {
   models: ModelOptions[];
 };
+export type DefaultTipsOptions = Omit<DeepRequired<TipsOptions>, 'style'> & {
+  style?: CommonStyleType;
+};
 
 export type Live2DModelType = typeof Live2DModel;
 
@@ -54,3 +61,8 @@ export type LoadMethod = (
   PixiLive2dDisplay: PixiLive2dDisplayModule;
   HitAreaFrames: typeof HitAreaFrames;
 }>;
+
+export type CommonStyleType = Omit<CSSProperties, 'width' | 'height'> & {
+  width?: number | string;
+  height?: number | string;
+};
diff --git a/packages/oh-my-live2d/src/types/options.ts b/packages/oh-my-live2d/src/types/options.ts
@@ -10,7 +10,7 @@ import type { ImportType } from './index.js';
  */
 export interface Options {
   /**
-   * 导入类型, 默认使用全量导入: 'complete'
+   * 导入类型, 默认使用全量导入: complete
    * @default complete
    * @valueType complete | cubism2 | cubism5
    */
@@ -20,7 +20,7 @@ export interface Options {
    * 自定义 Cubism SDK 外部资源地址
    *
    * > [!TIP]
-   * > 从 v0.5.0 版本开始, 不再以模块形式通过 vite 打包构建 SDK , 因为这会造成部分模型在生产环境中展示异常, 这在 Vite5 中已得到证实, 为了更稳定的加载模型, 自 v0.5.0 版本后, 将通过 script 标签的 src 属性按需去引入对应版本的 Cubism SDK , 而这个过程是完全自动的, 您无需手动的去引入这些资源, 官方将长期维护这个服务器, 保证此 SDK 地址的安全与稳定性. 若发现 SDK 加载出现异常, 请及时联系作者
+   * > 从 v0.5.0 版本开始, 不再通过模块方式使用 vite 打包 SDK ,  自 v0.5.0 版本起, 将通过 script 标签的 src 属性按需去引入对应版本的 Cubism SDK , 这个过程是完全自动的, 您无需关注这个过程也无需手动的去引入这些资源, 官方将长期维护这个服务器, 保证此 SDK 地址的安全与稳定性. 若发现 SDK 加载出现异常, 请及时联系作者.
    * @valueType object
    */
   libraryUrls?: {

diff --git a/packages/oh-my-live2d/src/types/tips.ts b/packages/oh-my-live2d/src/types/tips.ts
@@ -1,4 +1,5 @@
-import type { WordTheDayData } from 'src/types/common.js';
+import type { WordTheDayData } from '../types/common.js';
+import type { CommonStyleType } from '../types/index.js';
 
 /**
  * # 提示框选项
@@ -12,35 +13,7 @@ export interface TipsOptions {
    * 自定义提示框样式
    * @valueType object
    */
-  style?: {
-    /**
-     * 提示框宽度, 单位 px
-     *
-     * @default 230
-     */
-    width?: number;
-
-    /**
-     * 提示框高度, 单位 px
-     *
-     * @default 100
-     */
-    height?: number;
-
-    /**
-     * 调整提示框位于舞台中的 x 轴方向偏移量
-     *
-     * @default 0
-     */
-    offsetX?: number;
-
-    /**
-     * 调整提示框位于舞台中的 y 轴方向偏移量
-     *
-     * @default 0
-     */
-    offsetY?: number;
-  };
+  style?: CommonStyleType;
 
   /**
    * 闲置状态下的提示

diff --git a/packages/oh-my-live2d/src/utils/index.ts b/packages/oh-my-live2d/src/utils/index.ts
@@ -2,7 +2,7 @@ import type { WordTheDayData } from 'src/types/common.js';
 import { isNumber } from 'tianjie';
 
 import { SDK } from '../config/index.js';
-import type { CSSProperties, ElementConfig, ImportType, LibraryUrls, PixiLive2dDisplayModule } from '../types/index.js';
+import type { CSSProperties, CommonStyleType, ElementConfig, ImportType, LibraryUrls, PixiLive2dDisplayModule } from '../types/index.js';
 
 export * from './tips.js';
 
@@ -19,14 +19,18 @@ export const printProjectInfo = (): void =>
     'background: #add7fb; padding:5px 0;'
   );
 
-export const handleStyleSize = (value: Record<string, unknown>): void => {
+export const handleCommonStyle = (value: CommonStyleType): CSSProperties => {
+  const style = { ...value };
+
   if ('width' in value && isNumber(value.width)) {
-    value.width = `${value.width}px`;
+    style.width = `${value.width}px`;
   }
 
   if ('height' in value && isNumber(value.height)) {
-    value.height = `${value.height}px`;
+    style.height = `${value.height}px`;
   }
+
+  return style as CSSProperties;
 };
 
 /**

diff --git a/tests/vite-app/public/index.min.js b/tests/vite-app/public/index.min.js
diff --git a/tests/vite-app/src/main.ts b/tests/vite-app/src/main.ts
@@ -22,6 +22,10 @@ void loadOml2d({
     }
   ],
   tips: {
+    // style: {
+    //   width: 300,
+    //   height: '100px'
+    // },
     idleTips: {
       wordTheDay(wordTheDayData) {
         return `${wordTheDayData.hitokoto}    by.${wordTheDayData.from}`;