fix(stage): 模型选项舞台样式隔离

oh-my-live2d · Mar 25, 2024 · a5a51ac · a5a51ac
1 parent 475d5e7
commit a5a51ac
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 32 deletions.
diff --git a/docs/src/guide/vuepress.md b/docs/src/guide/vuepress.md
@@ -1,6 +1,6 @@
 # 在 VuePress 中使用
 
-您可以 VuePress 项目中使用官方插件。
+您可以在 VuePress 项目中通过 `vuepress-plugin-oh-my-live2d` 插件来加载组件。
 
 ## 安装/更新插件
 

diff --git a/packages/oh-my-live2d/src/config/style.ts b/packages/oh-my-live2d/src/config/style.ts
@@ -127,6 +127,17 @@ export const generateGlobalStyle = (primaryColor: string): string => {
   `;
 };
 
+export const STAGE_DEFAULT_STYLE: CommonStyleType = {
+  width: '0px',
+  height: '0px',
+  position: 'fixed',
+  right: 'auto',
+  left: 0,
+  bottom: 0,
+  zIndex: '9997',
+  transform: 'translateY(130%)'
+};
+
 export const TIPS_DEFAULT_STYLE: CommonStyleType = {
   position: 'absolute',
   fontSize: '18px',

diff --git a/packages/oh-my-live2d/src/modules/oml2d.ts b/packages/oh-my-live2d/src/modules/oml2d.ts
@@ -65,7 +65,6 @@ export class OhMyLive2D {
    */
   private create(): void {
     this.stage.create();
-    this.stage.initializeStyle();
 
     this.pixiApp = new PixiApp(this.PIXI, this.stage);
 

diff --git a/packages/oh-my-live2d/src/modules/stage.ts b/packages/oh-my-live2d/src/modules/stage.ts
@@ -1,7 +1,7 @@
 import { mergeDeep } from 'tianjie';
 
 import type { Events } from './events.js';
-import { ELEMENT_ID } from '../config/index.js';
+import { ELEMENT_ID, STAGE_DEFAULT_STYLE } from '../config/index.js';
 import { WindowSizeType } from '../constants/index.js';
 import { CommonStyleType } from '../types/common.js';
 import type { CSSProperties, DefaultOptions } from '../types/index.js';
@@ -39,30 +39,17 @@ export class Stage {
     }
   }
 
-  initializeStyle(): void {
-    this.setStyle({
-      width: '0px',
-      height: '0px',
-      position: 'fixed',
-      left: 0,
-      bottom: 0,
-      zIndex: '9997',
-      transform: 'translateY(130%)'
-    });
-    this.reloadStyle();
-  }
-
-  reloadStyle(modelSize: CommonStyleType = {}): void {
+  reloadStyle(style: CommonStyleType = {}): void {
     switch (getWindowSizeType()) {
       case WindowSizeType.mobile:
-        modelSize = mergeDeep(modelSize, this.options.models?.[this.modelIndex]?.mobileStageStyle || {});
-        this.setStyle(handleCommonStyle(modelSize));
+        style = mergeDeep(style, this.options.models?.[this.modelIndex]?.mobileStageStyle || {});
         break;
       case WindowSizeType.pc:
-        modelSize = mergeDeep(modelSize, this.options.models?.[this.modelIndex]?.stageStyle || {});
-        this.setStyle(handleCommonStyle(modelSize));
+        style = mergeDeep(style, this.options.models?.[this.modelIndex]?.stageStyle || {});
         break;
     }
+
+    this.setStyle(handleCommonStyle(mergeDeep(STAGE_DEFAULT_STYLE, style)));
   }
 
   unMount(): void {

diff --git a/tests/vite-app/src/main.ts b/tests/vite-app/src/main.ts
@@ -19,12 +19,13 @@ const foo = async () => {
         position: [0, 100],
         volume: 0,
         stageStyle: {
+          right: 0,
+          left: 'auto',
           height: 500
         }
       },
       {
         path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Senko_Normals/senko.model3.json',
-        stageStyle: {},
         mobileScale: 0.08
       },
       {
@@ -144,15 +145,15 @@ const foo = async () => {
   // console.log(oml2d);
   // oml2d.loadNextModel();
 
-  await loadOml2d({
-    models: [
-      {
-        path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Senko_Normals/senko.model3.json',
-        stageStyle: {},
-        mobileScale: 0.08
-      }
-    ]
-  });
+  // await loadOml2d({
+  //   models: [
+  //     {
+  //       path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Senko_Normals/senko.model3.json',
+  //       stageStyle: {},
+  //       mobileScale: 0.08
+  //     }
+  //   ]
+  // });
 
   // setTimeout(() => {
   //   oml2d.loadNextModel();

diff --git a/tests/vite-app/src/style.css b/tests/vite-app/src/style.css
@@ -12,7 +12,10 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
+/* #oml2d-stage {
+  right: 60px !important;
+  left: auto !important;
+} */
 a {
   font-weight: 500;
   color: #646cff;