From 0bd8496facb7f4aa22dcfa368d83a6819b0bf376 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 6 Jun 2025 19:29:20 +0800
Subject: [PATCH] =?UTF-8?q?refactor(editor,stage):=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=8F=98=E5=8C=96=E5=90=8E=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=E5=A4=A7=E5=B0=8F=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/layouts/workspace/viewer/Stage.vue    | 20 ++++++++++++++++---
 packages/stage/src/StageMask.ts               | 14 +++++++++++--
 packages/stage/src/StageRender.ts             |  7 +++++--
 packages/stage/src/types.ts                   |  1 +
 4 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/packages/editor/src/layouts/workspace/viewer/Stage.vue b/packages/editor/src/layouts/workspace/viewer/Stage.vue
index 9b2ae33b..108ed685 100644
--- a/packages/editor/src/layouts/workspace/viewer/Stage.vue
+++ b/packages/editor/src/layouts/workspace/viewer/Stage.vue
@@ -164,9 +164,23 @@ watch(page, (page) => {
     }, 3000);
 
     runtime.updatePageId?.(page.id);
-    nextTick(() => {
-      stage?.select(page.id);
-    });
+
+    const unWatch = watch(
+      stageLoading,
+      () => {
+        if (stageLoading.value) {
+          return;
+        }
+
+        nextTick(() => {
+          stage?.select(page.id);
+          unWatch();
+        });
+      },
+      {
+        immediate: true,
+      },
+    );
   }
 });
 
diff --git a/packages/stage/src/StageMask.ts b/packages/stage/src/StageMask.ts
index 03c1a3bf..e7c4b147 100644
--- a/packages/stage/src/StageMask.ts
+++ b/packages/stage/src/StageMask.ts
@@ -236,6 +236,12 @@ export default class StageMask extends Rule {
         const { clientHeight, clientWidth } = entry.target;
         this.wrapperHeight = clientHeight;
         this.wrapperWidth = clientWidth;
+
+        if (this.mode === Mode.FIXED) {
+          this.content.style.width = `${this.wrapperWidth}px`;
+          this.content.style.height = `${this.wrapperHeight}px`;
+        }
+
         this.setMaxScrollLeft();
         this.setMaxScrollTop();
       });
@@ -286,7 +292,9 @@ export default class StageMask extends Rule {
   private setHeight(height: number): void {
     this.height = height;
     this.setMaxScrollTop();
-    this.content.style.height = `${height}px`;
+    if (this.mode !== Mode.FIXED) {
+      this.content.style.height = `${height}px`;
+    }
   }
 
   /**
@@ -296,7 +304,9 @@ export default class StageMask extends Rule {
   private setWidth(width: number): void {
     this.width = width;
     this.setMaxScrollLeft();
-    this.content.style.width = `${width}px`;
+    if (this.mode !== Mode.FIXED) {
+      this.content.style.width = `${width}px`;
+    }
   }
 
   /**
diff --git a/packages/stage/src/StageRender.ts b/packages/stage/src/StageRender.ts
index 5fd4adff..93c52f80 100644
--- a/packages/stage/src/StageRender.ts
+++ b/packages/stage/src/StageRender.ts
@@ -19,7 +19,7 @@
 import { EventEmitter } from 'events';
 
 import type { Id } from '@tmagic/core';
-import { getElById, getHost, injectStyle, isSameDomain } from '@tmagic/core';
+import { getElById, getHost, guid, injectStyle, isSameDomain } from '@tmagic/core';
 
 import { DEFAULT_ZOOM, RenderType } from './const';
 import style from './style.css?raw';
@@ -54,7 +54,10 @@ export default class StageRender extends EventEmitter {
   }
 
   public getMagicApi = () => ({
-    onPageElUpdate: (el: HTMLElement) => this.emit('page-el-update', el),
+    id: guid(),
+    onPageElUpdate: (el: HTMLElement) => {
+      this.emit('page-el-update', el);
+    },
     onRuntimeReady: (runtime: Runtime) => {
       if (this.runtime) {
         return;
diff --git a/packages/stage/src/types.ts b/packages/stage/src/types.ts
index bf0734c1..3ab520f4 100644
--- a/packages/stage/src/types.ts
+++ b/packages/stage/src/types.ts
@@ -214,6 +214,7 @@ export interface Runtime {
 }
 
 export interface Magic {
+  id: string;
   /** 当前页面的根节点变化时调用该方法，编辑器会同步该el和stage的大小，该方法由stage注入到iframe.contentWindow中 */
   onPageElUpdate: (el: HTMLElement) => void;