From 4a8289137b539a6597d1b978418bb9901392e5c3 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Mon, 15 Jun 2026 20:43:53 +0800
Subject: [PATCH] =?UTF-8?q?fix(playground):=20=E4=BF=AE=E5=A4=8D=E5=8E=86?=
 =?UTF-8?q?=E5=8F=B2=E6=81=A2=E5=A4=8D=E5=90=8E=E5=8A=A0=E8=BD=BD=20DSL=20?=
 =?UTF-8?q?=E6=97=B6=E7=BC=BA=E5=B0=91=E9=A1=B5=E9=9D=A2=E5=9F=BA=E7=BA=BF?=
 =?UTF-8?q?=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

初始 set root 时标记各页面历史栈为已保存，并用 dsl.id 恢复 IndexedDB 历史，避免 restore 后再赋值时走 diff 分支导致无 initial 基线。
---
 playground/src/pages/Editor.vue | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/playground/src/pages/Editor.vue b/playground/src/pages/Editor.vue
index 58952b42..634a4ee3 100644
--- a/playground/src/pages/Editor.vue
+++ b/playground/src/pages/Editor.vue
@@ -51,10 +51,11 @@ import { computed, onBeforeUnmount, onMounted, ref, shallowRef, toRaw } from 'vu
 import { debounce } from 'lodash-es';
 
 import type { MApp, MContainer, MNode } from '@tmagic/core';
-import type { DatasourceTypeOption } from '@tmagic/editor';
+import type { DatasourceTypeOption, HistoryOpSource, StoreState } from '@tmagic/editor';
 import {
   editorService,
   historyService,
+  markStackSaved,
   propsService,
   serializeConfig,
   TMagicDialog,
@@ -148,16 +149,29 @@ const persistHistory = () => {
 // 编辑（尤其是本次会话新增的代码块 / 数据源历史）丢失，这里改为变更即落库以保证恢复完整。
 const schedulePersist = debounce(persistHistory, 500);
 
-// 进入页面时从 IndexedDB 恢复历史记录。此时 root 尚未设置，需显式传入待加载 DSL 的 id 以选中
-// 按 app 隔离的库；页面对齐由编辑器挂载后 select(defaultSelected) 触发的 changePage 负责。
+// 进入页面时从 IndexedDB 恢复历史记录。此时 root 尚未设置（value 在 restore 之后才赋值），
+// 需显式传入待加载 DSL 的 id 以选中按 app 隔离的库；页面对齐由编辑器挂载后
+// select(defaultSelected) 触发的 changePage 负责。
 const restoreHistory = async () => {
   try {
-    await historyService.restoreFromIndexedDB({ appId: value.value?.id });
+    await historyService.restoreFromIndexedDB({ appId: dsl.id });
   } catch (error) {
     console.error('恢复历史记录失败', error);
   }
 };
 
+const rootChangeHandler = (
+  _v: StoreState['root'],
+  _pV?: StoreState['root'],
+  { historySource }: { historySource?: HistoryOpSource } = {},
+) => {
+  if (historySource === 'initial') {
+    Object.values(historyService.state.pageSteps).forEach(markStackSaved);
+  }
+};
+
+editorService.on('root-change', rootChangeHandler);
+
 onMounted(async () => {
   await restoreHistory();
   value.value = dsl;
@@ -177,6 +191,7 @@ onBeforeUnmount(() => {
   window.removeEventListener('beforeunload', persistHistory);
   window.removeEventListener('pagehide', persistHistory);
   editorService.removeAllPlugins();
+  editorService.off('root-change', rootChangeHandler);
 });
 
 const propsSubmitErrorHandler = async (e: any) => {