feat: 新增statusBar状态条选项

oh-my-live2d · Mar 14, 2024 · 3c8eb97 · 3c8eb97
1 parent 83adb60
commit 3c8eb97
Show file tree

Hide file tree

Showing 34 changed files with 927 additions and 632 deletions.
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -41,7 +41,7 @@ rules:
       allowTypedFunctionExpressions: true
 
   '@typescript-eslint/naming-convention':
-    - warn
+    - off
     - selector: default
       format:
         - camelCase

diff --git a/docs/documentation.json b/docs/documentation.json
diff --git a/package.json b/package.json
@@ -19,8 +19,9 @@
     "release": "dotenv lerna version --generate-release-notes --yes",
     "release:major": "dotenv lerna version major --generate-release-notes --yes",
     "run-tests": "lerna run test",
-    "test:build": "pnpm -r run test:build",
-    "test:dev": "pnpm -r run test:dev"
+    "test": "pnpm -F vite-app run test:dev",
+    "test:build": "pnpm -F vite-app run test:build",
+    "test:vue": "pnpm -F vue-app run test:dev"
   },
   "nano-staged": {
     "**/*": "prettier --write --ignore-unknown",

diff --git a/packages/oh-my-live2d/package.json b/packages/oh-my-live2d/package.json
@@ -31,7 +31,7 @@
   ],
   "scripts": {
     "build": "rimraf dist && tsc && node ./scripts/build.js",
-    "dev": "rimraf dist && tsc && (concurrently \"tsc -w\" \"cross-env OML_ENV=dev node ./scripts/build.js\")",
+    "dev": "rimraf dist && tsc && (concurrently \"tsc -w\" \"cross-env OML_ENV=dev vite build\")",
     "release": "dotenv release-it"
   },
   "devDependencies": {

diff --git a/packages/oh-my-live2d/src/config/config.ts b/packages/oh-my-live2d/src/config/config.ts
@@ -3,24 +3,84 @@ import type { DefaultOptions } from '../types/index.js';
 // 第三方库服务地址
 const libServicePath = 'https://lib.oml2d.com';
 
+export const PRIMARY_COLOR = '#38B0DE';
+export const STATUS_BAR_ERROR_COLOR = '#F08080';
 // 默认配置选项, 实例化时会与用户传进来的合并
 export const DEFAULT_OPTIONS: DefaultOptions = {
   mobileDisplay: false,
   fixed: true,
-  primaryColor: '#38B0DE',
+  primaryColor: PRIMARY_COLOR,
   sayHello: true,
   transitionTime: 1000,
   parentElement: document.body,
   importType: 'complete',
   libraryUrls: {
     cubism2: `${libServicePath}/live2d.min.js`,
-    cubism5: `${libServicePath}/live2dcubismcore.min.js`
+    cubism5: `${libServicePath}/live2dcubismcore.min.js`,
+    pixi: `${libServicePath}/pixi.min.js`,
+    pixiLive2dDisplay: `${libServicePath}/pixi-live2d-display.min.js`,
+    pixiLive2dDisplayCubism2: `${libServicePath}/pixi-live2d-display-cubism2.min.js`,
+    pixiLive2dDisplayCubism4: `${libServicePath}/pixi-live2d-display-cubism4.min.js`,
+    pixiLive2dDisplayExtra: `${libServicePath}/pixi-live2d-display-extra.min.js`
   },
   models: [],
+  statusBar: {
+    style: {
+      minWidth: '20px',
+      minHeight: '40px',
+      position: 'fixed',
+      transform: 'translateX(-110%)',
+      left: '0',
+      bottom: '80px',
+      padding: '7px 5px',
+      zIndex: '9998',
+      borderStyle: 'solid',
+      borderColor: '#fff',
+      fontWeight: 'bold',
+      borderRadius: '0 5px 5px 0',
+      borderWidth: '2px 2px 2px 0',
+      boxShadow: '0 0 5px #999',
+      color: '#fff',
+      display: 'flex',
+      alignItems: 'center',
+      textAlign: 'center',
+      flexWrap: 'wrap',
+      fontSize: '14px',
+      writingMode: 'vertical-lr',
+      cursor: 'pointer',
+      backgroundColor: PRIMARY_COLOR
+    },
+    stateColor: {
+      info: PRIMARY_COLOR,
+      error: STATUS_BAR_ERROR_COLOR
+    }
+  },
   tips: {
     messageLine: 3,
     mobileStyle: {},
-    style: {},
+    style: {
+      position: 'absolute',
+      fontSize: '18px',
+      borderRadius: '10px',
+      filter: 'drop-shadow(0 0 5px #999)',
+      border: '2px solid #fff',
+      color: '#fff',
+      padding: '5px 5px',
+      opacity: 0,
+      visibility: 'hidden',
+      transform: 'translateX(-50%)',
+      textAlign: 'center',
+      justifyContent: 'center',
+      animationDuration: `1000ms,1000ms`,
+      animationFillMode: 'forwards, none',
+      animationIterationCount: '1, infinite',
+      width: '60%',
+      left: '50%',
+      top: 0,
+      display: 'flex',
+      alignItems: 'center',
+      minHeight: '100px'
+    },
     idleTips: {
       wordTheDay: false,
       message: [],
@@ -50,22 +110,26 @@ export const DEFAULT_OPTIONS: DefaultOptions = {
   }
 };
 
-/** 第三方 SDK */
-export const SDK = {
-  PIXI: `${libServicePath}/pixi.min.js`,
-  PIXI_LIVE2D_DISPLAY: `${libServicePath}/pixi-live2d-display.min.js`,
-  PIXI_LIVE2D_DISPLAY_CUBISM2: `${libServicePath}/pixi-live2d-display-cubism2.min.js`,
-  PIXI_LIVE2D_DISPLAY_CUBISM4: `${libServicePath}/pixi-live2d-display-cubism4.min.js`,
-  PIXI_LIVE2D_DISPLAY_EXTRA: `${libServicePath}/pixi-live2d-display-extra.min.js`
+export const SDK_ID = {
+  cubism2: 'oml2d-cubism2',
+  cubism5: 'oml2d-cubism5',
+  pixi: 'oml2d-sdk-pixi',
+  pixiLive2dDisplay: 'oml2d-pixi-live2d-display',
+  pixiLive2dDisplayCubism2: 'oml2d-pixi-live2d-display-cubism2',
+  pixiLive2dDisplayCubism4: 'oml2d-pixi-live2d-display-cubism4',
+  // pixiLive2dDisplayCubism: 'oml2d-pixi-live2d-display-cubism',
+  pixiLive2dDisplayExtra: 'oml2d-pixi-live2d-display-extra'
 };
 
 /** 全局配置 */
-export const CONFIG = {
-  stageId: 'oml2dStage',
-  canvasId: 'oml2dCanvas',
-  statusBarId: 'oml2dStatusBar',
-  tipsId: 'oml2dTips',
-  menusId: 'oml2dMenus'
+export const ELEMENT_ID = {
+  globalStyle: 'oml2d-global-style',
+  stage: 'oml2d-stage',
+  canvas: 'oml2d-canvas',
+  statusBar: 'oml2d-statusBar',
+  tips: 'oml2d-tips',
+  menus: 'oml2d-menus',
+  iconSvg: 'oml2d-icon-svg'
 };
 
 /** 菜单的配置 */

diff --git a/packages/oh-my-live2d/src/config/style.ts b/packages/oh-my-live2d/src/config/style.ts
@@ -1,3 +1,4 @@
+import { ELEMENT_ID } from '../config/config.js';
 import { CSSProperties } from '../types/index.js';
 
 export const generateGlobalStyle = (primaryColor: string): string => {
@@ -96,7 +97,7 @@ export const generateGlobalStyle = (primaryColor: string): string => {
     box-shadow: 0 0 5px #000;
   }
   
-  #oml2dMenus .oml2d-menus-item:not(:last-child) {
+  #${ELEMENT_ID.menus} .oml2d-menus-item:not(:last-child) {
     margin-bottom: 10px;
   }
   

diff --git a/packages/oh-my-live2d/src/index.ts b/packages/oh-my-live2d/src/index.ts
@@ -1,23 +1,17 @@
-import { HitAreaFrames } from 'pixi-live2d-display/extra';
-import * as PIXI from 'pixi.js';
-
-import { setup } from './modules/index.js';
-import { loadLibrary } from './utils/index.js';
 import './library/iconfont.js';
+import { setup } from './modules/index.js';
+import { loadScript } from './utils/index.js';
 
 export * from './types/options.js';
-
 // @ts-ignore
-window.PIXI = PIXI;
-
-PIXI.utils.skipHello();
-
-export const loadOml2d = setup(async (importType, urls) => {
-  const PixiLive2dDisplay = await loadLibrary(importType, urls);
+export const loadOml2d = setup(async () => {
+  // await loadUmdLibrary(importType, urls);
+  await loadScript({ url: 'https://lib.oml2d.com/complete.js', id: 'test' });
+  window.PIXI.utils.skipHello();
 
   return {
-    HitAreaFrames,
-    PixiLive2dDisplay,
-    PIXI
+    PIXI: window.PIXI,
+    PixiLive2dDisplay: window.PIXI.live2d,
+    HitAreaFrames: window.PIXI.live2d.HitAreaFrames
   };
 });
diff --git a/packages/oh-my-live2d/src/index.umd.ts b/packages/oh-my-live2d/src/index.umd.ts
diff --git a/packages/oh-my-live2d/src/library/iconfont.js b/packages/oh-my-live2d/src/library/iconfont.js
diff --git a/packages/oh-my-live2d/src/library/live2d.min.js b/packages/oh-my-live2d/src/library/live2d.min.js
diff --git a/packages/oh-my-live2d/src/library/live2dcubismcore.min.js b/packages/oh-my-live2d/src/library/live2dcubismcore.min.js
diff --git a/packages/oh-my-live2d/src/library/pixi-live2d-display.min.js b/packages/oh-my-live2d/src/library/pixi-live2d-display.min.js
diff --git a/packages/oh-my-live2d/src/library/pixi.min.js b/packages/oh-my-live2d/src/library/pixi.min.js
diff --git a/packages/oh-my-live2d/src/modules/globalStyle.ts b/packages/oh-my-live2d/src/modules/globalStyle.ts
@@ -1,3 +1,4 @@
+import { ELEMENT_ID } from '../config/config.js';
 import { generateGlobalStyle } from '../config/style.js';
 import { createElement } from '../utils/index.js';
 
@@ -6,7 +7,12 @@ type GlobalStyleType = { primaryColor: string };
 export class GlobalStyle {
   styleSheet: HTMLElement;
   constructor(private style: GlobalStyleType) {
-    this.styleSheet = createElement({ tagName: 'style', id: 'oml2dStyle', innerHtml: generateGlobalStyle(this.style.primaryColor) }); // 创建全局样式表
+    // destroyElement(ELEMENT_ID.globalStyle);
+    this.styleSheet = createElement({
+      tagName: 'style',
+      id: ELEMENT_ID.globalStyle,
+      innerHtml: generateGlobalStyle(this.style.primaryColor)
+    }); // 创建全局样式表
     document.head.append(this.styleSheet);
   }