@tmagic/editor 1.8.0-beta.0 → 1.8.0-beta.10

package/dist/es/layouts/sidebar/ComponentListPanel.vue_vue_type_script_setup_true_lang.js

@@ -10,7 +10,7 @@ import { Grid } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/sidebar/ComponentListPanel.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["onClick", "onDragstart"];
 var _hoisted_2 = ["title"];
-var ComponentListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ComponentListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorComponentListPanel",
 	__name: "ComponentListPanel",
 	setup(__props) {
@@ -37,7 +37,7 @@ var ComponentListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 				name: text,
 				type,
 				...data
-			});
+			}, void 0, { historySource: "component-panel" });
 		};
 		const dragstartHandler = ({ text, type, data = {} }, e) => {
 			e.dataTransfer?.setData("text/json", serialize({

package/dist/es/layouts/sidebar/Sidebar.vue_vue_type_script_setup_true_lang.js

@@ -30,7 +30,7 @@ var _hoisted_5 = {
 	class: "m-editor-sidebar-tips"
 };
 var _hoisted_6 = { class: "m-editor-slide-list-box" };
-var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorSidebar",
 	__name: "Sidebar",
 	props: {
@@ -71,7 +71,11 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				});
 			}
 		}, { immediate: true });
-		const activeTabName = ref(props.data?.status);
+		const activeTabName = computed({
+			get: () => uiService.get("sideBarActiveTabName"),
+			set: (value) => uiService.set("sideBarActiveTabName", value)
+		});
+		uiService.set("sideBarActiveTabName", props.data?.status || "");
 		const getItemConfig = (data) => {
 			const map = {
 				[SideItemKey.COMPONENT_LIST]: {
@@ -83,7 +87,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					slots: {}
 				},
 				layer: {
-					$key: "layer",
+					$key: SideItemKey.LAYER,
 					type: "component",
 					icon: List,
 					text: "已选组件",
@@ -101,7 +105,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					slots: {}
 				},
 				[SideItemKey.CODE_BLOCK]: {
-					$key: "code-block",
+					$key: SideItemKey.CODE_BLOCK,
 					type: "component",
 					icon: EditPen,
 					text: "代码编辑",

package/dist/es/layouts/sidebar/code-block/CodeBlockList.vue_vue_type_script_setup_true_lang.js

@@ -9,7 +9,7 @@ import { DepTargetType } from "@tmagic/core";
 import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx, withModifiers } from "vue";
 import { Close, Edit, View } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue?vue&type=script&setup=true&lang.ts
-var CodeBlockList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CodeBlockList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorCodeBlockList",
 	__name: "CodeBlockList",
 	props: {
@@ -78,7 +78,7 @@ var CodeBlockList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		const editCode = (id) => {
 			emit("edit", id);
 		};
-		const deleteCode = async (id) => {
+		const deleteCode = async (id, { historySource } = {}) => {
 			const currentCode = codeList.value.find((codeItem) => codeItem.id === id);
 			const existBinds = Boolean(currentCode?.items?.length);
 			const undeleteableList = codeBlockService.getUndeletableList() || [];
@@ -88,7 +88,7 @@ var CodeBlockList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					cancelButtonText: "取消",
 					type: "warning"
 				});
-				emit("remove", id);
+				emit("remove", id, { historySource });
 			} else if (typeof props.customError === "function") props.customError(id, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
 			else if (existBinds) tMagicMessage.error("代码块存在绑定关系，不可删除");
 			else tMagicMessage.error("代码块不可删除");
@@ -138,7 +138,7 @@ var CodeBlockList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 						default: withCtx(() => [createVNode(Icon_default, {
 							icon: unref(Close),
 							class: "edit-icon",
-							onClick: withModifiers(($event) => deleteCode(`${data.key}`), ["stop"])
+							onClick: withModifiers(($event) => deleteCode(`${data.key}`, { historySource: "tree" }), ["stop"])
 						}, null, 8, ["icon", "onClick"])]),
 						_: 2
 					}, 1024)) : createCommentVNode("v-if", true),

package/dist/es/layouts/sidebar/code-block/CodeBlockListPanel.vue_vue_type_script_setup_true_lang.js

@@ -9,7 +9,7 @@ import { TMagicButton, TMagicScrollbar } from "@tmagic/design";
 import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, openBlock, renderSlot, unref, useTemplateRef, watch, withCtx } from "vue";
 //#region packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "search-wrapper" };
-var CodeBlockListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CodeBlockListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorCodeBlockListPanel",
 	__name: "CodeBlockListPanel",
 	props: {
@@ -38,7 +38,7 @@ var CodeBlockListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 			if (codeBlockListRef.value) for (const [, status] of codeBlockListRef.value.nodeStatusMap.entries()) status.selected = false;
 		};
 		const { nodeContentMenuHandler, menuData: contentMenuData, contentMenuHideHandler } = useContentMenu((id) => {
-			codeBlockListRef.value?.deleteCode(id);
+			codeBlockListRef.value?.deleteCode(id, { historySource: "tree-contextmenu" });
 		});
 		const menuData = computed(() => props.customContentMenu(contentMenuData, "code-block"));
 		return (_ctx, _cache) => {

package/dist/es/layouts/sidebar/code-block/useContentMenu.js

@@ -26,7 +26,7 @@ var useContentMenu = (deleteCode) => {
 				const codeBlock = codeBlockService.getCodeContentById(selectId);
 				if (!codeBlock) return;
 				const newCodeId = await codeBlockService.getUniqueId();
-				codeBlockService.setCodeDslById(newCodeId, cloneDeep(codeBlock));
+				codeBlockService.setCodeDslById(newCodeId, cloneDeep(codeBlock), { historySource: "tree-contextmenu" });
 			}
 		},
 		{

package/dist/es/layouts/sidebar/data-source/DataSourceAddButton.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import ToolButton_default from "../../../components/ToolButton.js";
 import { TMagicButton, TMagicPopover } from "@tmagic/design";
 import { Fragment, createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
 //#region packages/editor/src/layouts/sidebar/data-source/DataSourceAddButton.vue?vue&type=script&setup=true&lang.ts
-var DataSourceAddButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var DataSourceAddButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorDataSourceAddButton",
 	__name: "DataSourceAddButton",
 	props: {

package/dist/es/layouts/sidebar/data-source/DataSourceConfigPanel.vue_vue_type_script_setup_true_lang.js

@@ -4,15 +4,17 @@ import { useNextFloatBoxPosition } from "../../../hooks/use-next-float-box-posit
 import FloatingBox_default from "../../../components/FloatingBox.js";
 import { MFormBox } from "@tmagic/form";
 import { tMagicMessage } from "@tmagic/design";
-import { createBlock, createVNode, defineComponent, inject, isRef, mergeModels, nextTick, openBlock, ref, unref, useModel, watch, watchEffect, withCtx } from "vue";
+import { computed, createBlock, createVNode, defineComponent, inject, isRef, mergeModels, nextTick, openBlock, provide, ref, unref, useModel, watch, watchEffect, withCtx } from "vue";
 //#region packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue?vue&type=script&setup=true&lang.ts
-var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorDataSourceConfigPanel",
 	__name: "DataSourceConfigPanel",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		title: {},
 		values: {},
-		disabled: { type: Boolean }
+		disabled: { type: Boolean },
+		editMethodName: {},
+		editFieldPath: {}
 	}, {
 		"visible": {
 			type: Boolean,
@@ -22,7 +24,7 @@ var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /* @__PU
 		"width": { default: 670 },
 		"widthModifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels([
+	emits: /*@__PURE__*/ mergeModels([
 		"submit",
 		"close",
 		"open"
@@ -37,9 +39,20 @@ var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /* @__PU
 		const dataSourceConfig = ref([]);
 		const { height: editorHeight } = useEditorContentHeight();
 		const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, inject("parentFloating", ref(null)));
+		/** 供「方法定义」tab 内的字段消费，用于打开数据源详情后自动打开指定方法 */
+		provide("editingDataSourceMethodName", computed(() => props.editMethodName));
+		/** 供「数据定义」tab 内的字段消费，用于打开数据源详情后自动打开指定字段 */
+		provide("editingDataSourceFieldPath", computed(() => props.editFieldPath || []));
 		watchEffect(() => {
 			initValues.value = props.values;
-			dataSourceConfig.value = dataSourceService.getFormConfig(initValues.value.type);
+			const config = dataSourceService.getFormConfig(initValues.value.type);
+			let activeTab = "fields";
+			if (props.editMethodName) activeTab = "methods";
+			else if (props.editFieldPath?.length) activeTab = "fields";
+			dataSourceConfig.value = config.map((item) => item.type === "tab" ? {
+				...item,
+				active: activeTab
+			} : item);
 		});
 		const submitHandler = (values, data) => {
 			emit("submit", values, data);

package/dist/es/layouts/sidebar/data-source/DataSourceList.vue_vue_type_script_setup_true_lang.js

@@ -8,7 +8,7 @@ import { DepTargetType } from "@tmagic/core";
 import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx, withModifiers } from "vue";
 import { Close, Edit, View } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/sidebar/data-source/DataSourceList.vue?vue&type=script&setup=true&lang.ts
-var DataSourceList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var DataSourceList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorDataSourceList",
 	__name: "DataSourceList",
 	props: {

package/dist/es/layouts/sidebar/data-source/DataSourceListPanel.vue_vue_type_script_setup_true_lang.js

@@ -7,11 +7,11 @@ import DataSourceConfigPanel_default from "./DataSourceConfigPanel.js";
 import DataSourceList_default from "./DataSourceList.js";
 import { useContentMenu } from "./useContentMenu.js";
 import { TMagicScrollbar, tMagicMessageBox } from "@tmagic/design";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, openBlock, renderSlot, unref, useTemplateRef, watch, withCtx } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, openBlock, ref, renderSlot, unref, useTemplateRef, watch, withCtx } from "vue";
 import { mergeWith } from "lodash-es";
 //#region packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "search-wrapper" };
-var DataSourceListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var DataSourceListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorDataSourceListPanel",
 	__name: "DataSourceListPanel",
 	props: {
@@ -24,7 +24,13 @@ var DataSourceListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 		const eventBus = inject("eventBus");
 		const { dataSourceService } = useServices();
 		const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } = useDataSourceEdit(dataSourceService);
+		/** 打开数据源详情时需要直接定位并打开的方法名，为空则正常展示「数据定义」tab */
+		const editMethodName = ref("");
+		/** 打开数据源详情时需要直接定位并打开的字段路径，为空则不自动打开字段配置 */
+		const editFieldPath = ref([]);
 		const editDialogCloseHandler = () => {
+			editMethodName.value = "";
+			editFieldPath.value = [];
 			if (dataSourceListRef.value) for (const [, status] of dataSourceListRef.value.nodeStatusMap.entries()) status.selected = false;
 		};
 		watch(dataSourceValues, (dataSourceValues) => {
@@ -55,13 +61,25 @@ var DataSourceListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 				cancelButtonText: "取消",
 				type: "warning"
 			});
-			dataSourceService.remove(id);
+			dataSourceService.remove(id, { historySource: "tree-contextmenu" });
 		};
 		const dataSourceListRef = useTemplateRef("dataSourceList");
 		const filterTextChangeHandler = (val) => {
 			dataSourceListRef.value?.filter(val);
 		};
 		eventBus?.on("edit-data-source", (id) => {
+			editMethodName.value = "";
+			editFieldPath.value = [];
+			editHandler(id);
+		});
+		eventBus?.on("edit-data-source-method", (id, methodName) => {
+			editMethodName.value = methodName;
+			editFieldPath.value = [];
+			editHandler(id);
+		});
+		eventBus?.on("edit-data-source-field", (id, fieldPath) => {
+			editMethodName.value = "";
+			editFieldPath.value = fieldPath;
 			editHandler(id);
 		});
 		eventBus?.on("remove-data-source", (id) => {
@@ -110,12 +128,16 @@ var DataSourceListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 					disabled: !unref(editable),
 					values: unref(dataSourceValues),
 					title: unref(dialogTitle),
+					"edit-method-name": editMethodName.value,
+					"edit-field-path": editFieldPath.value,
 					onSubmit: unref(submitDataSourceHandler),
 					onClose: editDialogCloseHandler
 				}, null, 8, [
 					"disabled",
 					"values",
 					"title",
+					"edit-method-name",
+					"edit-field-path",
 					"onSubmit"
 				]),
 				(openBlock(), createBlock(Teleport, { to: "body" }, [menuData.value.length ? (openBlock(), createBlock(ContentMenu_default, {

package/dist/es/layouts/sidebar/data-source/useContentMenu.js

@@ -25,7 +25,7 @@ var useContentMenu = () => {
 				if (!selectId) return;
 				const ds = dataSourceService.getDataSourceById(selectId);
 				if (!ds) return;
-				dataSourceService.add(cloneDeep(ds));
+				dataSourceService.add(cloneDeep(ds), { historySource: "tree-contextmenu" });
 			}
 		},
 		{

package/dist/es/layouts/sidebar/layer/LayerMenu.vue_vue_type_script_setup_true_lang.js

@@ -6,7 +6,7 @@ import { isPage, isPageFragment } from "@tmagic/utils";
 import { computed, createBlock, defineComponent, markRaw, openBlock, useTemplateRef } from "vue";
 import { Files, Plus } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/sidebar/layer/LayerMenu.vue?vue&type=script&setup=true&lang.ts
-var LayerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var LayerMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorLayerMenu",
 	__name: "LayerMenu",
 	props: {
@@ -32,7 +32,7 @@ var LayerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 					name: component.text,
 					type: component.type,
 					...component.data || {}
-				});
+				}, void 0, { historySource: "tree-contextmenu" });
 			}
 		}));
 		const getSubMenuData = computed(() => {
@@ -41,7 +41,7 @@ var LayerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				type: "button",
 				icon: Files,
 				handler: () => {
-					editorService.add({ type: "tab-pane" });
+					editorService.add({ type: "tab-pane" }, void 0, { historySource: "tree-contextmenu" });
 				}
 			}];
 			if (node.value?.items) return componentList.value.reduce((subMenuData, group, index) => subMenuData.concat(createMenuItems(group), index < componentList.value.length - 1 ? [{
@@ -68,9 +68,9 @@ var LayerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				items: getSubMenuData.value
 			},
 			useCopyMenu(),
-			usePasteMenu(),
-			useDeleteMenu(),
-			useMoveToMenu(services),
+			usePasteMenu("tree-contextmenu"),
+			useDeleteMenu("tree-contextmenu"),
+			useMoveToMenu(services, "tree-contextmenu"),
 			...props.layerContentMenu
 		], "layer"));
 		const show = (e) => {

package/dist/es/layouts/sidebar/layer/LayerNodeTool.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { TMagicButton } from "@tmagic/design";
 import { createBlock, createCommentVNode, defineComponent, openBlock, unref, withModifiers } from "vue";
 import { Hide, View } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/sidebar/layer/LayerNodeTool.vue?vue&type=script&setup=true&lang.ts
-var LayerNodeTool_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var LayerNodeTool_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "LayerNodeTool",
 	props: { data: {} },
 	setup(__props) {
@@ -13,7 +13,7 @@ var LayerNodeTool_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			editorService.update({
 				id: props.data.id,
 				visible
-			});
+			}, { historySource: "tree" });
 		};
 		return (_ctx, _cache) => {
 			return __props.data.type !== "page" ? (openBlock(), createBlock(unref(TMagicButton), {

package/dist/es/layouts/sidebar/layer/LayerPanel.vue_vue_type_script_setup_true_lang.js

@@ -11,7 +11,7 @@ import { useNodeStatus } from "./use-node-status.js";
 import { TMagicScrollbar } from "@tmagic/design";
 import { Teleport, computed, createBlock, createCommentVNode, createVNode, defineComponent, openBlock, renderSlot, unref, useTemplateRef, withCtx } from "vue";
 //#region packages/editor/src/layouts/sidebar/layer/LayerPanel.vue?vue&type=script&setup=true&lang.ts
-var LayerPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var LayerPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorLayerPanel",
 	__name: "LayerPanel",
 	props: {

package/dist/es/layouts/sidebar/layer/use-node-status.js

@@ -4,7 +4,7 @@ import { computed, onBeforeUnmount, ref, watch } from "vue";
 //#region packages/editor/src/layouts/sidebar/layer/use-node-status.ts
 var createPageNodeStatus = (page, initialLayerNodeStatus) => {
 	const map = /* @__PURE__ */ new Map();
-	map.set(page.id, {
+	map.set(page.id, initialLayerNodeStatus?.get(page.id) || {
 		visible: true,
 		expand: true,
 		selected: true,
@@ -27,10 +27,43 @@ var useNodeStatus = ({ editorService }) => {
 	const nodeStatusMaps = ref(/* @__PURE__ */ new Map());
 	/** 当前页面的节点状态 */
 	const nodeStatusMap = computed(() => page.value ? nodeStatusMaps.value.get(page.value.id) : /* @__PURE__ */ new Map());
-	watch(() => page.value?.id, (pageId) => {
-		if (!pageId) return;
-		nodeStatusMaps.value.set(pageId, createPageNodeStatus(page.value, nodeStatusMaps.value.get(pageId)));
+	watch(page, (newPage) => {
+		if (!newPage?.id) return;
+		nodeStatusMaps.value.set(newPage.id, createPageNodeStatus(newPage, nodeStatusMaps.value.get(newPage.id)));
 	}, { immediate: true });
+	/**
+	* root 整体被替换时（外部 modelValue 变化、历史版本恢复、套件编辑模式进入/退出等）：
+	* - 仅 watch page 引用还不够，因为 root-change 同步触发时 page 还是旧引用，
+	*   等 initService 的异步 IIFE 跑完 editorService.select(...) 后 page 才会
+	*   被替换为新 dsl 中的 page；此时上面的 page watch 才会触发重建。
+	* - 但若直接同步清空 nodeStatusMaps，会让 nodeStatusMap (computed) 立刻变
+	*   undefined。上层 LayerPanel 用 `v-if="page && nodeStatusMap"` 渲染组件树，
+	*   会瞬间销毁整个面板；若紧接着的异步 select 链路（套件退出等场景）发生
+	*   竞态、page 引用未变 / 解析失败，watch(page) 不触发重建，组件树就再也回
+	*   不来。
+	* - 此外「污染」问题本质来自 createPageNodeStatus 用旧 status 作为新节点
+	*   initial 值：只要新 root 的 page 是新引用，watch(page) 会触发重建，重建
+	*   时基于新 page.items 生成的 map 只会包含新节点 id；旧节点 id 即便残留在
+	*   initialLayerNodeStatus 中也不会被写入新 map。真正的风险只有「同一 page
+	*   id 下，新旧 dsl 都存在同一节点 id 但其实是不同节点」这种极端情况——这
+	*   在常规业务中不会发生（id 是 uuid）。
+	*
+	* 综合：root-change 时仅清理「在新 root 中已不存在的 page id」对应缓存，
+	* 保留仍然有效的 page status 不动；既避免 v-if 闪断，也不会保留无关 page 的
+	* 死缓存。同 page id 的重建交给下方 watch(page) 触发。
+	*/
+	const rootChangeHandler = (value) => {
+		if (!value) {
+			nodeStatusMaps.value = /* @__PURE__ */ new Map();
+			return;
+		}
+		const validPageIds = /* @__PURE__ */ new Set();
+		(value.items || []).forEach((p) => {
+			if (p?.id !== void 0) validPageIds.add(p.id);
+		});
+		for (const cachedPageId of Array.from(nodeStatusMaps.value.keys())) if (!validPageIds.has(cachedPageId)) nodeStatusMaps.value.delete(cachedPageId);
+	};
+	editorService.on("root-change", rootChangeHandler);
 	watch(nodes, (nodes) => {
 		if (!nodeStatusMap.value) return;
 		for (const [id, status] of nodeStatusMap.value.entries()) {
@@ -63,6 +96,7 @@ var useNodeStatus = ({ editorService }) => {
 	};
 	editorService.on("remove", removeHandler);
 	onBeforeUnmount(() => {
+		editorService.off("root-change", rootChangeHandler);
 		editorService.off("remove", removeHandler);
 		editorService.off("add", addHandler);
 	});

package/dist/es/layouts/workspace/Breadcrumb.vue_vue_type_script_setup_true_lang.js

@@ -12,7 +12,7 @@ var _hoisted_2 = {
 	class: "m-editor-breadcrumb-separator"
 };
 var COLLAPSE_RATIO = .8;
-var Breadcrumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Breadcrumb_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorBreadcrumb",
 	__name: "Breadcrumb",
 	setup(__props) {

package/dist/es/layouts/workspace/Workspace.vue_vue_type_script_setup_true_lang.js

@@ -4,7 +4,7 @@ import Breadcrumb_default from "./Breadcrumb.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, openBlock, renderSlot, unref, withCtx } from "vue";
 //#region packages/editor/src/layouts/workspace/Workspace.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-editor-workspace" };
-var Workspace_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Workspace_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorWorkspace",
 	__name: "Workspace",
 	props: {

package/dist/es/layouts/workspace/viewer/NodeListMenu.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ import { TMagicTooltip } from "@tmagic/design";
 import { getIdFromEl } from "@tmagic/utils";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, openBlock, ref, unref, useTemplateRef, watch, withCtx } from "vue";
 //#region packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue?vue&type=script&setup=true&lang.ts
-var NodeListMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var NodeListMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "NodeListMenu",
 	setup(__props) {
 		const services = useServices();

package/dist/es/layouts/workspace/viewer/Stage.vue_vue_type_script_setup_true_lang.js

@@ -11,7 +11,7 @@ import { getOffset } from "@tmagic/stage";
 import { calcValueByFontsize, getIdFromEl } from "@tmagic/utils";
 import { Teleport, computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, markRaw, nextTick, normalizeStyle, onBeforeUnmount, onMounted, openBlock, renderSlot, resolveDirective, useTemplateRef, watch, watchEffect, withCtx, withDirectives } from "vue";
 //#region packages/editor/src/layouts/workspace/viewer/Stage.vue?vue&type=script&setup=true&lang.ts
-var Stage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Stage_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorStage",
 	__name: "Stage",
 	props: {
@@ -226,7 +226,7 @@ var Stage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					left: calcValueByFontsize(doc, left / zoom.value)
 				};
 				config.data.inputEvent = e;
-				editorService.add(config.data, parent);
+				editorService.add(config.data, parent, { historySource: "component-panel" });
 			}
 		};
 		return (_ctx, _cache) => {

package/dist/es/layouts/workspace/viewer/StageOverlay.vue_vue_type_script_setup_true_lang.js

@@ -8,7 +8,7 @@ var _hoisted_1 = {
 	key: 0,
 	class: "m-editor-stage-overlay"
 };
-var StageOverlay_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var StageOverlay_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "StageOverlay",
 	setup(__props) {
 		const { stageOverlayService, editorService, uiService } = useServices();

package/dist/es/layouts/workspace/viewer/ViewerMenu.vue_vue_type_script_setup_true_lang.js

@@ -8,7 +8,7 @@ import { NodeType } from "@tmagic/core";
 import { computed, createBlock, defineComponent, markRaw, openBlock, ref, useTemplateRef, watch } from "vue";
 import { Bottom, Top } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue?vue&type=script&setup=true&lang.ts
-var ViewerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ViewerMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorViewerMenu",
 	__name: "ViewerMenu",
 	props: {
@@ -36,11 +36,11 @@ var ViewerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				display: () => canCenter.value,
 				handler: () => {
 					if (!nodes.value) return;
-					editorService.alignCenter(nodes.value);
+					editorService.alignCenter(nodes.value, { historySource: "stage-contextmenu" });
 				}
 			},
 			useCopyMenu(),
-			usePasteMenu(menuRef),
+			usePasteMenu("stage-contextmenu", menuRef),
 			{
 				type: "divider",
 				direction: "horizontal",
@@ -55,7 +55,7 @@ var ViewerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				icon: markRaw(Top),
 				display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
 				handler: () => {
-					editorService.moveLayer(1);
+					editorService.moveLayer(1, { historySource: "stage-contextmenu" });
 				}
 			},
 			{
@@ -64,7 +64,7 @@ var ViewerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				icon: markRaw(Bottom),
 				display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
 				handler: () => {
-					editorService.moveLayer(-1);
+					editorService.moveLayer(-1, { historySource: "stage-contextmenu" });
 				}
 			},
 			{
@@ -73,7 +73,7 @@ var ViewerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				icon: markRaw(Top),
 				display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
 				handler: () => {
-					editorService.moveLayer(LayerOffset.TOP);
+					editorService.moveLayer(LayerOffset.TOP, { historySource: "stage-contextmenu" });
 				}
 			},
 			{
@@ -82,16 +82,16 @@ var ViewerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				icon: markRaw(Bottom),
 				display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
 				handler: () => {
-					editorService.moveLayer(LayerOffset.BOTTOM);
+					editorService.moveLayer(LayerOffset.BOTTOM, { historySource: "stage-contextmenu" });
 				}
 			},
-			useMoveToMenu(services),
+			useMoveToMenu(services, "stage-contextmenu"),
 			{
 				type: "divider",
 				direction: "horizontal",
 				display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect
 			},
-			useDeleteMenu(),
+			useDeleteMenu("stage-contextmenu"),
 			{
 				type: "divider",
 				direction: "horizontal"