From b7934f9f5108a72ea7224b573e0bbb3722983b64 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 29 Nov 2022 16:58:00 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E9=A1=B5=E9=9D=A2=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E4=B8=8D=E5=9C=A8=E9=87=8D=E6=96=B0=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E7=94=BB=E5=B8=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/layouts/workspace/Stage.vue     | 11 ++++++++++-
 packages/editor/src/layouts/workspace/Workspace.vue |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/layouts/workspace/Stage.vue b/packages/editor/src/layouts/workspace/Stage.vue
index 06e6b18f..e933f5df 100644
--- a/packages/editor/src/layouts/workspace/Stage.vue
+++ b/packages/editor/src/layouts/workspace/Stage.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts" setup name="MEditorStage">
-import { computed, inject, markRaw, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
+import { computed, inject, markRaw, nextTick, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
@@ -96,6 +96,15 @@ watch(root, (root) => {
   }
 });
 
+watch(page, (page) => {
+  if (runtime && page) {
+    runtime.updatePageId?.(page.id);
+    nextTick(() => {
+      stage?.select(page.id);
+    });
+  }
+});
+
 const resizeObserver = new ResizeObserver((entries) => {
   for (const { contentRect } of entries) {
     services?.uiService.set('stageContainerRect', {
diff --git a/packages/editor/src/layouts/workspace/Workspace.vue b/packages/editor/src/layouts/workspace/Workspace.vue
index 361cb8ba..b897d1dd 100644
--- a/packages/editor/src/layouts/workspace/Workspace.vue
+++ b/packages/editor/src/layouts/workspace/Workspace.vue
@@ -3,7 +3,7 @@
     <Breadcrumb></Breadcrumb>
 
     <slot name="stage">
-      <MagicStage :key="page?.id" :stage-content-menu="stageContentMenu"></MagicStage>
+      <MagicStage v-if="page" :stage-content-menu="stageContentMenu"></MagicStage>
     </slot>
 
     <slot name="workspace-content"></slot>