From a5a51ac850758e3938e1ad88fc7d69a1d2a60bfb Mon Sep 17 00:00:00 2001
From: Hacxy <hacxy.97@outlook.com>
Date: Mon, 25 Mar 2024 13:41:41 +0800
Subject: [PATCH] =?UTF-8?q?fix(stage):=20=E6=A8=A1=E5=9E=8B=E9=80=89?=
 =?UTF-8?q?=E9=A1=B9=E8=88=9E=E5=8F=B0=E6=A0=B7=E5=BC=8F=E9=9A=94=E7=A6=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/src/guide/vuepress.md                 |  2 +-
 packages/oh-my-live2d/src/config/style.ts  | 11 ++++++++++
 packages/oh-my-live2d/src/modules/oml2d.ts |  1 -
 packages/oh-my-live2d/src/modules/stage.ts | 25 ++++++----------------
 tests/vite-app/src/main.ts                 | 21 +++++++++---------
 tests/vite-app/src/style.css               |  5 ++++-
 6 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/docs/src/guide/vuepress.md b/docs/src/guide/vuepress.md
index f80b26b..2ed4193 100644
--- 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
index 06d4418..c34c6b9 100644
--- 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
index 67256cc..6e19ef6 100644
--- 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
index 6394ef0..6ae6fac 100644
--- 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
index b80a55b..647282c 100644
--- 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
index 2308c34..7cb3282 100644
--- 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;