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>