@tmagic/editor 1.8.0-beta.26 → 1.8.0-beta.28

package/dist/es/fields/configs/stickyAddButton.js

@@ -1,11 +1,12 @@
 //#region packages/editor/src/fields/configs/stickyAddButton.ts
 /**
-* 属性面板列表字段共用的吸底全宽「添加」按钮，展开到 group-list 配置上。
+* 属性面板列表字段共用的吸底全宽「添加」按钮与吸顶标题，展开到 group-list 配置上。
 *
-* 吸底按钮会盖住列表底部，新增的项必须同时滚进视口才看得见，两者一起给出避免漏配。
+* 吸底按钮会盖住列表底部，吸顶标题会盖住列表顶部，新增的项必须同时滚进视口才看得见。
 */
 var stickyAddButton = (text) => ({
 	scrollLastItemIntoView: true,
+	header: { sticky: true },
 	addButtonConfig: {
 		sticky: true,
 		text,

package/dist/es/hooks/use-form-context.js

@@ -1,4 +1,5 @@
-import { computed } from "vue";
+import { FORM_CONTEXT_KEY, mergeFormContexts } from "@tmagic/form";
+import { computed, inject, unref } from "vue";
 //#region packages/editor/src/hooks/use-form-context.ts
 /**
 * 编辑器注入给表单的业务上下文：`services` 与当前画布 `stage`。
@@ -6,14 +7,23 @@ import { computed } from "vue";
 * 由 `Editor.vue`（provide `FORM_CONTEXT_KEY`）、`FormPanel.vue` 与 `useCompareForm`
 * 共用。`stage` 走 computed 而非快照，保证切换画布后配置回调读到的是最新实例。
 *
+* 宿主可能在 `<MEditor>` 外层 provide 了自己的业务字段，这里必须把那一层合并进来：
+* 否则编辑器再 provide 一次会把宿主整层遮蔽掉，属性面板、对比表单里的配置回调就
+* 读不到宿主字段了。`services` / `stage` 由编辑器兜底，优先级高于宿主同名字段。
+*
 * 字段类型见 `@editor/type` 里对 `@tmagic/form-schema` 的 `FormContext` 模块增强。
 */
-var useEditorFormContext = (getServices) => computed(() => {
-	const services = getServices();
-	return {
-		services,
-		stage: services?.editorService.get("stage")
-	};
-});
+var useEditorFormContext = (getServices) => {
+	const hostContext = inject(FORM_CONTEXT_KEY, void 0);
+	return computed(() => {
+		const services = getServices();
+		const host = unref(hostContext);
+		if (host && host.services === services) return host;
+		return mergeFormContexts(host, {
+			services,
+			stage: services?.editorService.get("stage")
+		});
+	});
+};
 //#endregion
 export { useEditorFormContext };

package/dist/es/initService.js

@@ -73,6 +73,7 @@ var initServiceState = (props, { editorService, historyService, componentListSer
 		uiService.resetState();
 		componentListService.resetState();
 		codeBlockService.resetState();
+		eventsService.resetState();
 		keybindingService.reset();
 		depService.reset();
 	});
@@ -167,10 +168,20 @@ var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSou
 			});
 		});
 	};
+	/**
+	* root 是否已经不是编辑器当前的 root。
+	*
+	* `editorService.set('root', v)` 是同步赋值后再派发 `root-change`，因此派发那一刻 `v` 一定
+	* 就是当前 root；但处理 `root-change` 要等 stage / runtime / 依赖收集等异步过程，期间 root
+	* 可能被新的一次整体替换（外部重设 DSL、更新 root 节点、源码保存等）顶掉，此时手上的 `v`
+	* 已是过期快照，继续用它刷画布或回写给外部都会与新 root 互相覆盖。
+	*/
+	const isStaleRoot = (value) => toRaw(editorService.get("root")) !== toRaw(value);
 	const updateStageDsl = async (value) => {
 		const stage = await getStage();
 		const runtime = await stage.renderer?.getRuntime();
 		const app = await getTMagicApp();
+		if (isStaleRoot(value)) return;
 		if (!app?.dataSourceManager) runtime?.updateRootConfig?.(cloneDeep$1(toRaw(value)));
 		const page = editorService.get("page");
 		const node = editorService.get("node");
@@ -181,6 +192,7 @@ var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSou
 		if (value) {
 			depService.clearIdleTasks();
 			await (typeof Worker === "undefined" ? collectIdle(value.items, true) : depService.collectByWorker(value));
+			if (isStaleRoot(value)) return;
 			const dsl = cloneDeep$1(toRaw(value));
 			if (dsl.dataSources && dsl.dataSourceDeps && app?.dataSourceManager) for (const node of getNodes(getDepNodeIds(dsl.dataSourceDeps), dsl.items)) updateNode(app.dataSourceManager.compiledNode(node), dsl);
 			runtime?.updateRootConfig?.(dsl);
@@ -191,7 +203,7 @@ var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSou
 		depService.addTarget(createDataSourceMethodTarget(ds, reactive({})));
 		depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
 	};
-	const rootChangeHandler = (value, preValue) => {
+	const rootChangeHandler = (value) => {
 		if (!value) return;
 		value.codeBlocks = value.codeBlocks || {};
 		value.dataSources = value.dataSources || [];
@@ -217,7 +229,8 @@ var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSou
 				editorService.set("parent", null);
 				editorService.set("page", null);
 			}
-			if (toRaw(value) !== toRaw(preValue)) emit("update:modelValue", value);
+			if (isStaleRoot(value)) return;
+			if (toRaw(props.modelValue) !== toRaw(value)) emit("update:modelValue", value);
 		})();
 	};
 	const nodeAddHandler = (nodes) => {

package/dist/es/layouts/history-list/useHistoryRevert.js

@@ -135,7 +135,7 @@ var useHistoryRevert = (options = {}, services) => {
 	* 不弹差异弹窗，改用一个普通确认框替代「确定回滚」按钮，避免点击后无任何提示直接执行。
 	* 用户取消时返回 false，调用方据此中止回滚。
 	*/
-	const confirmRevert = () => confirmHistoryAction("确定回滚该步骤吗？回滚会将该操作作为一条新记录反向应用（新增将被删除、删除将被还原），不影响后续历史记录。");
+	const confirmRevert = () => confirmHistoryAction("确定回滚该步骤吗？");
 	/**
 	* 「回滚」统一确认入口：可差异对比的步骤动态挂载 HistoryDiffDialog 走差异确认弹窗，
 	* 无法对比的步骤（add / remove / 多节点更新）回退到普通二次确认框。

package/dist/es/services/events.js

@@ -47,8 +47,8 @@ var Events = class extends BaseService {
 		return cloneDeep(methodMap[toLine(type)]) || [];
 	}
 	resetState() {
-		eventMap = reactive({});
-		methodMap = reactive({});
+		Object.keys(eventMap).forEach((type) => delete eventMap[type]);
+		Object.keys(methodMap).forEach((type) => delete methodMap[type]);
 	}
 	destroy() {
 		this.resetState();

package/dist/es/style.css

@@ -478,18 +478,48 @@ fieldset.m-fieldset .m-form-tip {
   flex-shrink: 0;
   gap: 8px;
 }
-.m-fields-group-list .m-fields-group-list-item > .el-card__header,
-.m-fields-group-list .m-fields-group-list-item > .t-card__header {
+.m-fields-group-list > .m-fields-group-list-item {
+  --m-group-list-item-footer-bottom: var(
+    --m-group-list-nested-footer-bottom,
+    0px
+  );
+}
+.m-fields-group-list.is-footer-sticky > .m-fields-group-list-item {
+  --m-group-list-item-footer-bottom: calc(
+    var(--m-group-list-nested-footer-bottom, 0px) +
+      var(--m-group-list-footer-height)
+  );
+}
+.m-fields-group-list .m-fields-group-list-item .m-fields-group-list {
+  --m-group-list-nested-footer-bottom: var(
+    --m-group-list-item-footer-bottom,
+    0px
+  );
+}
+.m-fields-group-list.is-header-sticky {
+  --m-group-list-nested-sticky-top: var(--m-group-list-child-list-sticky-top);
+  --m-group-list-nested-header-z: var(--m-group-list-child-list-header-z);
+}
+.m-fields-group-list.is-header-sticky > .m-fields-group-list-item {
+  --m-group-list-item-sticky-top: var(
+    --m-group-list-nested-sticky-top,
+    var(--m-group-list-header-sticky-top, 0px)
+  );
+  --m-group-list-item-header-z: var(--m-group-list-nested-header-z, 7);
+  --m-group-list-child-list-sticky-top: calc(
+    var(--m-group-list-item-sticky-top) + var(--m-group-list-header-height)
+  );
+  --m-group-list-child-list-header-z: calc(
+    var(--m-group-list-item-header-z) - 1
+  );
+}
+.m-fields-group-list.is-header-sticky > .m-fields-group-list-item > .el-card__header,
+.m-fields-group-list.is-header-sticky > .m-fields-group-list-item > .t-card__header {
   position: sticky;
-  top: var(--m-group-list-header-sticky-top, 0px);
-  z-index: 7;
+  top: var(--m-group-list-item-sticky-top);
+  z-index: var(--m-group-list-item-header-z);
   background-color: var(--m-group-list-header-bg, #fff);
 }
-.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item > .el-card__header,
-.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item > .t-card__header {
-  top: calc(var(--m-group-list-header-sticky-top, 0px) + var(--m-group-list-header-height));
-  z-index: 6;
-}
 .m-fields-group-list .el-table__empty-block {
   width: 100%;
   min-height: 0;
@@ -507,7 +537,7 @@ fieldset.m-fieldset .m-form-tip {
 }
 .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
   position: sticky;
-  bottom: 0;
+  bottom: var(--m-group-list-nested-footer-bottom, 0px);
   z-index: 7;
   margin-bottom: 0;
   padding: var(--m-group-list-footer-padding-top) 0 var(--m-group-list-footer-padding-bottom);
@@ -521,10 +551,6 @@ fieldset.m-fieldset .m-form-tip {
   width: 100%;
   height: var(--m-group-list-footer-button-height);
 }
-.m-fields-group-list .m-fields-group-list-item .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
-  bottom: var(--m-group-list-footer-height);
-  z-index: 7;
-}
 
 /** 最外层的groupList需要每个item需要增加空白区域界限时，增加outer-gorup_list可以实现 */
 .m-container-group-list.outer-gorup_list > .m-fields-group-list > .m-fields-group-list-item {

package/dist/es/utils/code-block.js

@@ -55,13 +55,20 @@ var getCodeBlockFormConfig = (options = {}) => {
 			name: "timing",
 			type: "select",
 			options: () => {
-				const list = [{
-					text: "初始化前",
-					value: "beforeInit"
-				}, {
-					text: "初始化后",
-					value: "afterInit"
-				}];
+				const list = [
+					{
+						text: "初始化前",
+						value: "beforeInit"
+					},
+					{
+						text: "初始化后",
+						value: "afterInit"
+					},
+					{
+						text: "页面渲染后",
+						value: "mounted"
+					}
+				];
 				if (dataSourceType?.() !== "base") {
 					list.push({
 						text: "请求前",

package/dist/style.css

@@ -478,18 +478,48 @@ fieldset.m-fieldset .m-form-tip {
   flex-shrink: 0;
   gap: 8px;
 }
-.m-fields-group-list .m-fields-group-list-item > .el-card__header,
-.m-fields-group-list .m-fields-group-list-item > .t-card__header {
+.m-fields-group-list > .m-fields-group-list-item {
+  --m-group-list-item-footer-bottom: var(
+    --m-group-list-nested-footer-bottom,
+    0px
+  );
+}
+.m-fields-group-list.is-footer-sticky > .m-fields-group-list-item {
+  --m-group-list-item-footer-bottom: calc(
+    var(--m-group-list-nested-footer-bottom, 0px) +
+      var(--m-group-list-footer-height)
+  );
+}
+.m-fields-group-list .m-fields-group-list-item .m-fields-group-list {
+  --m-group-list-nested-footer-bottom: var(
+    --m-group-list-item-footer-bottom,
+    0px
+  );
+}
+.m-fields-group-list.is-header-sticky {
+  --m-group-list-nested-sticky-top: var(--m-group-list-child-list-sticky-top);
+  --m-group-list-nested-header-z: var(--m-group-list-child-list-header-z);
+}
+.m-fields-group-list.is-header-sticky > .m-fields-group-list-item {
+  --m-group-list-item-sticky-top: var(
+    --m-group-list-nested-sticky-top,
+    var(--m-group-list-header-sticky-top, 0px)
+  );
+  --m-group-list-item-header-z: var(--m-group-list-nested-header-z, 7);
+  --m-group-list-child-list-sticky-top: calc(
+    var(--m-group-list-item-sticky-top) + var(--m-group-list-header-height)
+  );
+  --m-group-list-child-list-header-z: calc(
+    var(--m-group-list-item-header-z) - 1
+  );
+}
+.m-fields-group-list.is-header-sticky > .m-fields-group-list-item > .el-card__header,
+.m-fields-group-list.is-header-sticky > .m-fields-group-list-item > .t-card__header {
   position: sticky;
-  top: var(--m-group-list-header-sticky-top, 0px);
-  z-index: 7;
+  top: var(--m-group-list-item-sticky-top);
+  z-index: var(--m-group-list-item-header-z);
   background-color: var(--m-group-list-header-bg, #fff);
 }
-.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item > .el-card__header,
-.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item > .t-card__header {
-  top: calc(var(--m-group-list-header-sticky-top, 0px) + var(--m-group-list-header-height));
-  z-index: 6;
-}
 .m-fields-group-list .el-table__empty-block {
   width: 100%;
   min-height: 0;
@@ -507,7 +537,7 @@ fieldset.m-fieldset .m-form-tip {
 }
 .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
   position: sticky;
-  bottom: 0;
+  bottom: var(--m-group-list-nested-footer-bottom, 0px);
   z-index: 7;
   margin-bottom: 0;
   padding: var(--m-group-list-footer-padding-top) 0 var(--m-group-list-footer-padding-bottom);
@@ -521,10 +551,6 @@ fieldset.m-fieldset .m-form-tip {
   width: 100%;
   height: var(--m-group-list-footer-button-height);
 }
-.m-fields-group-list .m-fields-group-list-item .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
-  bottom: var(--m-group-list-footer-height);
-  z-index: 7;
-}
 
 /** 最外层的groupList需要每个item需要增加空白区域界限时，增加outer-gorup_list可以实现 */
 .m-container-group-list.outer-gorup_list > .m-fields-group-list > .m-fields-group-list-item {

package/dist/themes/magic-admin.css

@@ -509,18 +509,48 @@ fieldset.m-fieldset .m-form-tip {
   flex-shrink: 0;
   gap: 8px;
 }
-.m-fields-group-list .m-fields-group-list-item > .el-card__header,
-.m-fields-group-list .m-fields-group-list-item > .t-card__header {
+.m-fields-group-list > .m-fields-group-list-item {
+  --m-group-list-item-footer-bottom: var(
+    --m-group-list-nested-footer-bottom,
+    0px
+  );
+}
+.m-fields-group-list.is-footer-sticky > .m-fields-group-list-item {
+  --m-group-list-item-footer-bottom: calc(
+    var(--m-group-list-nested-footer-bottom, 0px) +
+      var(--m-group-list-footer-height)
+  );
+}
+.m-fields-group-list .m-fields-group-list-item .m-fields-group-list {
+  --m-group-list-nested-footer-bottom: var(
+    --m-group-list-item-footer-bottom,
+    0px
+  );
+}
+.m-fields-group-list.is-header-sticky {
+  --m-group-list-nested-sticky-top: var(--m-group-list-child-list-sticky-top);
+  --m-group-list-nested-header-z: var(--m-group-list-child-list-header-z);
+}
+.m-fields-group-list.is-header-sticky > .m-fields-group-list-item {
+  --m-group-list-item-sticky-top: var(
+    --m-group-list-nested-sticky-top,
+    var(--m-group-list-header-sticky-top, 0px)
+  );
+  --m-group-list-item-header-z: var(--m-group-list-nested-header-z, 7);
+  --m-group-list-child-list-sticky-top: calc(
+    var(--m-group-list-item-sticky-top) + var(--m-group-list-header-height)
+  );
+  --m-group-list-child-list-header-z: calc(
+    var(--m-group-list-item-header-z) - 1
+  );
+}
+.m-fields-group-list.is-header-sticky > .m-fields-group-list-item > .el-card__header,
+.m-fields-group-list.is-header-sticky > .m-fields-group-list-item > .t-card__header {
   position: sticky;
-  top: var(--m-group-list-header-sticky-top, 0px);
-  z-index: 7;
+  top: var(--m-group-list-item-sticky-top);
+  z-index: var(--m-group-list-item-header-z);
   background-color: var(--m-group-list-header-bg, #fff);
 }
-.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item > .el-card__header,
-.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item > .t-card__header {
-  top: calc(var(--m-group-list-header-sticky-top, 0px) + var(--m-group-list-header-height));
-  z-index: 6;
-}
 .m-fields-group-list .el-table__empty-block {
   width: 100%;
   min-height: 0;
@@ -538,7 +568,7 @@ fieldset.m-fieldset .m-form-tip {
 }
 .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
   position: sticky;
-  bottom: 0;
+  bottom: var(--m-group-list-nested-footer-bottom, 0px);
   z-index: 7;
   margin-bottom: 0;
   padding: var(--m-group-list-footer-padding-top) 0 var(--m-group-list-footer-padding-bottom);
@@ -552,10 +582,6 @@ fieldset.m-fieldset .m-form-tip {
   width: 100%;
   height: var(--m-group-list-footer-button-height);
 }
-.m-fields-group-list .m-fields-group-list-item .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
-  bottom: var(--m-group-list-footer-height);
-  z-index: 7;
-}
 
 /** 最外层的groupList需要每个item需要增加空白区域界限时，增加outer-gorup_list可以实现 */
 .m-container-group-list.outer-gorup_list > .m-fields-group-list > .m-fields-group-list-item {

package/dist/tmagic-editor-headless.umd.cjs

@@ -8813,12 +8813,13 @@
 	//#endregion
 	//#region packages/editor/src/fields/configs/stickyAddButton.ts
 	/**
-	* 属性面板列表字段共用的吸底全宽「添加」按钮，展开到 group-list 配置上。
+	* 属性面板列表字段共用的吸底全宽「添加」按钮与吸顶标题，展开到 group-list 配置上。
 	*
-	* 吸底按钮会盖住列表底部，新增的项必须同时滚进视口才看得见，两者一起给出避免漏配。
+	* 吸底按钮会盖住列表底部，吸顶标题会盖住列表顶部，新增的项必须同时滚进视口才看得见。
 	*/
 	var stickyAddButton = (text) => ({
 		scrollLastItemIntoView: true,
+		header: { sticky: true },
 		addButtonConfig: {
 			sticky: true,
 			text,
@@ -9120,8 +9121,8 @@
 			return cloneDeep(methodMap[(0, _tmagic_utils.toLine)(type)]) || [];
 		}
 		resetState() {
-			eventMap = (0, vue.reactive)({});
-			methodMap = (0, vue.reactive)({});
+			Object.keys(eventMap).forEach((type) => delete eventMap[type]);
+			Object.keys(methodMap).forEach((type) => delete methodMap[type]);
 		}
 		destroy() {
 			this.resetState();

package/dist/tmagic-editor.umd.cjs

@@ -5057,13 +5057,18 @@
 	//#region packages/editor/src/hooks/use-form-context.ts
 	var useEditorFormContext;
 	var init_use_form_context = __esmMin((() => {
-		useEditorFormContext = (getServices) => (0, vue.computed)(() => {
-			const services = getServices();
-			return {
-				services,
-				stage: services?.editorService.get("stage")
-			};
-		});
+		useEditorFormContext = (getServices) => {
+			const hostContext = (0, vue.inject)(_tmagic_form.FORM_CONTEXT_KEY, void 0);
+			return (0, vue.computed)(() => {
+				const services = getServices();
+				const host = (0, vue.unref)(hostContext);
+				if (host && host.services === services) return host;
+				return (0, _tmagic_form.mergeFormContexts)(host, {
+					services,
+					stage: services?.editorService.get("stage")
+				});
+			});
+		};
 	}));
 	//#endregion
 	//#region packages/editor/src/utils/config.ts
@@ -5130,13 +5135,20 @@
 					name: "timing",
 					type: "select",
 					options: () => {
-						const list = [{
-							text: "初始化前",
-							value: "beforeInit"
-						}, {
-							text: "初始化后",
-							value: "afterInit"
-						}];
+						const list = [
+							{
+								text: "初始化前",
+								value: "beforeInit"
+							},
+							{
+								text: "初始化后",
+								value: "afterInit"
+							},
+							{
+								text: "页面渲染后",
+								value: "mounted"
+							}
+						];
 						if (dataSourceType?.() !== "base") {
 							list.push({
 								text: "请求前",
@@ -11208,8 +11220,8 @@
 			return cloneDeep$1(methodMap[(0, _tmagic_utils.toLine)(type)]) || [];
 		}
 		resetState() {
-			eventMap = (0, vue.reactive)({});
-			methodMap = (0, vue.reactive)({});
+			Object.keys(eventMap).forEach((type) => delete eventMap[type]);
+			Object.keys(methodMap).forEach((type) => delete methodMap[type]);
 		}
 		destroy() {
 			this.resetState();
@@ -13929,7 +13941,7 @@
 		* 不弹差异弹窗，改用一个普通确认框替代「确定回滚」按钮，避免点击后无任何提示直接执行。
 		* 用户取消时返回 false，调用方据此中止回滚。
 		*/
-		const confirmRevert = () => confirmHistoryAction("确定回滚该步骤吗？回滚会将该操作作为一条新记录反向应用（新增将被删除、删除将被还原），不影响后续历史记录。");
+		const confirmRevert = () => confirmHistoryAction("确定回滚该步骤吗？");
 		/**
 		* 「回滚」统一确认入口：可差异对比的步骤动态挂载 HistoryDiffDialog 走差异确认弹窗，
 		* 无法对比的步骤（add / remove / 多节点更新）回退到普通二次确认框。
@@ -20074,6 +20086,7 @@
 			uiService.resetState();
 			componentListService.resetState();
 			codeBlockService.resetState();
+			eventsService.resetState();
 			keybindingService.reset();
 			depService.reset();
 		});
@@ -20168,10 +20181,20 @@
 				});
 			});
 		};
+		/**
+		* root 是否已经不是编辑器当前的 root。
+		*
+		* `editorService.set('root', v)` 是同步赋值后再派发 `root-change`，因此派发那一刻 `v` 一定
+		* 就是当前 root；但处理 `root-change` 要等 stage / runtime / 依赖收集等异步过程，期间 root
+		* 可能被新的一次整体替换（外部重设 DSL、更新 root 节点、源码保存等）顶掉，此时手上的 `v`
+		* 已是过期快照，继续用它刷画布或回写给外部都会与新 root 互相覆盖。
+		*/
+		const isStaleRoot = (value) => (0, vue.toRaw)(editorService.get("root")) !== (0, vue.toRaw)(value);
 		const updateStageDsl = async (value) => {
 			const stage = await getStage();
 			const runtime = await stage.renderer?.getRuntime();
 			const app = await getTMagicApp();
+			if (isStaleRoot(value)) return;
 			if (!app?.dataSourceManager) runtime?.updateRootConfig?.(cloneDeep$1((0, vue.toRaw)(value)));
 			const page = editorService.get("page");
 			const node = editorService.get("node");
@@ -20182,6 +20205,7 @@
 			if (value) {
 				depService.clearIdleTasks();
 				await (typeof Worker === "undefined" ? collectIdle(value.items, true) : depService.collectByWorker(value));
+				if (isStaleRoot(value)) return;
 				const dsl = cloneDeep$1((0, vue.toRaw)(value));
 				if (dsl.dataSources && dsl.dataSourceDeps && app?.dataSourceManager) for (const node of (0, _tmagic_utils.getNodes)((0, _tmagic_utils.getDepNodeIds)(dsl.dataSourceDeps), dsl.items)) (0, _tmagic_core.updateNode)(app.dataSourceManager.compiledNode(node), dsl);
 				runtime?.updateRootConfig?.(dsl);
@@ -20192,7 +20216,7 @@
 			depService.addTarget((0, _tmagic_core.createDataSourceMethodTarget)(ds, (0, vue.reactive)({})));
 			depService.addTarget((0, _tmagic_core.createDataSourceCondTarget)(ds, (0, vue.reactive)({})));
 		};
-		const rootChangeHandler = (value, preValue) => {
+		const rootChangeHandler = (value) => {
 			if (!value) return;
 			value.codeBlocks = value.codeBlocks || {};
 			value.dataSources = value.dataSources || [];
@@ -20218,7 +20242,8 @@
 					editorService.set("parent", null);
 					editorService.set("page", null);
 				}
-				if ((0, vue.toRaw)(value) !== (0, vue.toRaw)(preValue)) emit("update:modelValue", value);
+				if (isStaleRoot(value)) return;
+				if ((0, vue.toRaw)(props.modelValue) !== (0, vue.toRaw)(value)) emit("update:modelValue", value);
 			})();
 		};
 		const nodeAddHandler = (nodes) => {
@@ -20667,12 +20692,13 @@
 	//#endregion
 	//#region packages/editor/src/fields/configs/stickyAddButton.ts
 	/**
-	* 属性面板列表字段共用的吸底全宽「添加」按钮，展开到 group-list 配置上。
+	* 属性面板列表字段共用的吸底全宽「添加」按钮与吸顶标题，展开到 group-list 配置上。
 	*
-	* 吸底按钮会盖住列表底部，新增的项必须同时滚进视口才看得见，两者一起给出避免漏配。
+	* 吸底按钮会盖住列表底部，吸顶标题会盖住列表顶部，新增的项必须同时滚进视口才看得见。
 	*/
 	var stickyAddButton = (text) => ({
 		scrollLastItemIntoView: true,
+		header: { sticky: true },
 		addButtonConfig: {
 			sticky: true,
 			text,

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.26",
+  "version": "1.8.0-beta.28",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -63,11 +63,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.7",
     "sortablejs": "^1.15.7",
-    "@tmagic/design": "1.8.0-beta.26",
-    "@tmagic/form": "1.8.0-beta.26",
-    "@tmagic/stage": "1.8.0-beta.26",
-    "@tmagic/table": "1.8.0-beta.26",
-    "@tmagic/utils": "1.8.0-beta.26"
+    "@tmagic/design": "1.8.0-beta.28",
+    "@tmagic/stage": "1.8.0-beta.28",
+    "@tmagic/utils": "1.8.0-beta.28",
+    "@tmagic/form": "1.8.0-beta.28",
+    "@tmagic/table": "1.8.0-beta.28"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -81,7 +81,7 @@
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
     "vue": "^3.5.41",
-    "@tmagic/core": "1.8.0-beta.26"
+    "@tmagic/core": "1.8.0-beta.28"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/fields/configs/stickyAddButton.ts

@@ -17,12 +17,13 @@
  */
 
 /**
- * 属性面板列表字段共用的吸底全宽「添加」按钮，展开到 group-list 配置上。
+ * 属性面板列表字段共用的吸底全宽「添加」按钮与吸顶标题，展开到 group-list 配置上。
  *
- * 吸底按钮会盖住列表底部，新增的项必须同时滚进视口才看得见，两者一起给出避免漏配。
+ * 吸底按钮会盖住列表底部，吸顶标题会盖住列表顶部，新增的项必须同时滚进视口才看得见。
  */
 export const stickyAddButton = (text: string) => ({
   scrollLastItemIntoView: true as const,
+  header: { sticky: true as const },
   addButtonConfig: {
     sticky: true as const,
     text,

package/src/hooks/use-form-context.ts

@@ -16,9 +16,9 @@
  * limitations under the License.
  */
 
-import { computed, type ComputedRef } from 'vue';
+import { computed, type ComputedRef, inject, unref } from 'vue';
 
-import type { FormContext } from '@tmagic/form';
+import { FORM_CONTEXT_KEY, type FormContext, mergeFormContexts } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
 
@@ -28,13 +28,29 @@ import type { Services } from '@editor/type';
  * 由 `Editor.vue`（provide `FORM_CONTEXT_KEY`）、`FormPanel.vue` 与 `useCompareForm`
  * 共用。`stage` 走 computed 而非快照，保证切换画布后配置回调读到的是最新实例。
  *
+ * 宿主可能在 `<MEditor>` 外层 provide 了自己的业务字段，这里必须把那一层合并进来：
+ * 否则编辑器再 provide 一次会把宿主整层遮蔽掉，属性面板、对比表单里的配置回调就
+ * 读不到宿主字段了。`services` / `stage` 由编辑器兜底，优先级高于宿主同名字段。
+ *
  * 字段类型见 `@editor/type` 里对 `@tmagic/form-schema` 的 `FormContext` 模块增强。
  */
-export const useEditorFormContext = (getServices: () => Services | undefined): ComputedRef<FormContext> =>
-  computed(() => {
+export const useEditorFormContext = (getServices: () => Services | undefined): ComputedRef<FormContext> => {
+  // inject 只能在 setup 期取值，因此本 hook 必须在 setup 中调用（`use` 前缀即此约定）。
+  // 返回的 computed 可以随便传递，但 hook 本身不能延迟到事件回调或 onMounted 里再调。
+  const hostContext = inject(FORM_CONTEXT_KEY, undefined);
+
+  return computed(() => {
     const services = getServices();
-    return {
+    const host = unref(hostContext);
+
+    // 上层（通常是 Editor.vue）已经用同一份 services 合并过了。FormPanel / useCompareForm
+    // 都是它的后代，再合并一次只会多套一层 Proxy，让每次属性 miss 多一轮线性查找。
+    // services 相同即可判定 stage 也相同——两边都是从同一个 editorService 读的。
+    if (host && host.services === services) return host;
+
+    return mergeFormContexts(host, {
       services,
       stage: services?.editorService.get('stage'),
-    };
+    });
   });
+};

package/src/initService.ts

@@ -254,6 +254,7 @@ export const initServiceState = (
     uiService.resetState();
     componentListService.resetState();
     codeBlockService.resetState();
+    eventsService.resetState();
     keybindingService.reset();
     depService.reset();
   });
@@ -426,12 +427,26 @@ export const initServiceEvents = (
     });
   };
 
+  /**
+   * root 是否已经不是编辑器当前的 root。
+   *
+   * `editorService.set('root', v)` 是同步赋值后再派发 `root-change`，因此派发那一刻 `v` 一定
+   * 就是当前 root；但处理 `root-change` 要等 stage / runtime / 依赖收集等异步过程，期间 root
+   * 可能被新的一次整体替换（外部重设 DSL、更新 root 节点、源码保存等）顶掉，此时手上的 `v`
+   * 已是过期快照，继续用它刷画布或回写给外部都会与新 root 互相覆盖。
+   */
+  const isStaleRoot = (value: MApp | null) => toRaw(editorService.get('root')) !== toRaw(value);
+
   const updateStageDsl = async (value: MApp | null) => {
     const stage = await getStage();
 
     const runtime = await stage.renderer?.getRuntime();
     const app = await getTMagicApp();
 
+    // 等 stage / runtime 就绪期间 root 已被替换：新 root 的刷新可能已经完成，
+    // 再把旧 dsl 推给 runtime 会让画布回退到旧内容
+    if (isStaleRoot(value)) return;
+
     if (!app?.dataSourceManager) {
       runtime?.updateRootConfig?.(cloneDeep(toRaw(value))!);
     }
@@ -448,6 +463,8 @@ export const initServiceEvents = (
 
       await (typeof Worker === 'undefined' ? collectIdle(value.items, true) : depService.collectByWorker(value));
 
+      if (isStaleRoot(value)) return;
+
       const dsl = cloneDeep(toRaw(value));
       if (dsl.dataSources && dsl.dataSourceDeps && app?.dataSourceManager) {
         for (const node of getNodes(getDepNodeIds(dsl.dataSourceDeps), dsl.items)) {
@@ -465,7 +482,7 @@ export const initServiceEvents = (
     depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
   };
 
-  const rootChangeHandler = (value: MApp | null, preValue?: MApp | null) => {
+  const rootChangeHandler = (value: MApp | null) => {
     if (!value) return;
 
     value.codeBlocks = value.codeBlocks || {};
@@ -508,7 +525,13 @@ export const initServiceEvents = (
         editorService.set('page', null);
       }
 
-      if (toRaw(value) !== toRaw(preValue)) {
+      // 上面的 select 是异步的，期间 root 可能已被替换，过期快照不能再回写给外部：
+      // 两次整体替换各自持有一个快照时，回写会把对方的 root 顶掉，外部 modelValue 变化又会
+      // 重新 set root，两条链路无休止地交替下去（表现为编辑器卡死）
+      if (isStaleRoot(value)) return;
+
+      // 外部已经持有这个 root（如本次变化就是 modelValue 传进来的）时无需回写
+      if (toRaw(props.modelValue) !== toRaw(value)) {
         emit('update:modelValue', value);
       }
     })();

package/src/layouts/history-list/useHistoryRevert.ts

@@ -204,10 +204,7 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
    * 不弹差异弹窗，改用一个普通确认框替代「确定回滚」按钮，避免点击后无任何提示直接执行。
    * 用户取消时返回 false，调用方据此中止回滚。
    */
-  const confirmRevert = (): Promise<boolean> =>
-    confirmHistoryAction(
-      '确定回滚该步骤吗？回滚会将该操作作为一条新记录反向应用（新增将被删除、删除将被还原），不影响后续历史记录。',
-    );
+  const confirmRevert = (): Promise<boolean> => confirmHistoryAction('确定回滚该步骤吗？');
 
   /**
    * 「回滚」统一确认入口：可差异对比的步骤动态挂载 HistoryDiffDialog 走差异确认弹窗，

package/src/services/events.ts

@@ -35,8 +35,8 @@ const canUsePluginMethods = {
 type AsyncMethodName = Writable<(typeof canUsePluginMethods)['async']>;
 type SyncMethodName = Writable<(typeof canUsePluginMethods)['sync']>;
 
-let eventMap: Record<string, EventOption[]> = reactive({});
-let methodMap: Record<string, EventOption[]> = reactive({});
+const eventMap: Record<string, EventOption[]> = reactive({});
+const methodMap: Record<string, EventOption[]> = reactive({});
 
 class Events extends BaseService {
   constructor() {
@@ -75,8 +75,9 @@ class Events extends BaseService {
   }
 
   public resetState() {
-    eventMap = reactive({});
-    methodMap = reactive({});
+    // 原地清空而不是重新赋值，保留 reactive 代理身份，已建立的 computed / 渲染副作用才能收到更新
+    Object.keys(eventMap).forEach((type) => delete eventMap[type]);
+    Object.keys(methodMap).forEach((type) => delete methodMap[type]);
   }
 
   public destroy() {

package/src/type.ts

@@ -225,6 +225,7 @@ export interface StageOptions {
   beforeDblclick?: (event: MouseEvent) => Promise<boolean | void> | boolean | void;
 }
 
+// #region NodeInvalidInfo
 /**
  * 节点校验错误信息，按来源（属性表单 / 样式表单）分别保存错误文案。
  * 属性表单与样式表单是两个独立的 FormPanel，均指向同一节点，故以来源为键，
@@ -237,9 +238,12 @@ export interface NodeInvalidInfo {
   /** 样式表单校验错误文案（可能为包含 <br> 的 HTML） */
   style?: string;
 }
+// #endregion NodeInvalidInfo
 
+// #region NodeInvalidSource
 /** 节点校验错误来源 */
 export type NodeInvalidSource = keyof NodeInvalidInfo;
+// #endregion NodeInvalidSource
 
 export interface StoreState {
   root: MApp | null;
@@ -312,6 +316,7 @@ export interface StageRect {
   height: number | string;
 }
 
+// #region UiState
 export interface UiState {
   /** 当前点击画布是否触发选中，true: 不触发，false: 触发，默认为false */
   uiSelectMode: boolean;
@@ -369,6 +374,7 @@ export interface UiState {
     height: number;
   };
 }
+// #endregion UiState
 
 // #region EditorNodeInfo
 export interface EditorNodeInfo {

package/src/utils/code-block.ts

@@ -103,6 +103,7 @@ export const getCodeBlockFormConfig = (options: GetCodeBlockFormConfigOptions =
         const list = [
           { text: '初始化前', value: 'beforeInit' },
           { text: '初始化后', value: 'afterInit' },
+          { text: '页面渲染后', value: 'mounted' },
         ];
         if (dataSourceType?.() !== 'base') {
           list.push({ text: '请求前', value: 'beforeRequest' });