@tmagic/editor 1.8.0-manmanyu.10 → 1.8.0-manmanyu.12

package/dist/es/Editor.vue_vue_type_script_setup_true_lang.js

@@ -19,7 +19,7 @@ import stageOverlay_default from "./services/stageOverlay.js";
 import { defaultEditorProps } from "./editorProps.js";
 import { initServiceEvents, initServiceState } from "./initService.js";
 import { M_THEME_KEY } from "@tmagic/design";
-import { computed, createBlock, createVNode, defineComponent, mergeDefaults, openBlock, provide, renderSlot, unref, withCtx } from "vue";
+import { computed, createBlock, createVNode, defineComponent, mergeDefaults, openBlock, provide, ref, renderSlot, unref, withCtx } from "vue";
 import { EventEmitter } from "events";
 //#region packages/editor/src/Editor.vue?vue&type=script&setup=true&lang.ts
 var Editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -127,6 +127,7 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			beforeDblclick: props.beforeDblclick
 		};
 		stageOverlay_default.set("stageOptions", stageOptions);
+		const propsPanelRef = ref(null);
 		provide("services", services);
 		provide("codeOptions", props.codeOptions);
 		provide("stageOptions", stageOptions);
@@ -137,6 +138,11 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		*/
 		provide("extendFormState", props.extendFormState);
 		/**
+		* 提供 PropsPanel 主属性表单的 formState getter，供历史差异弹窗复用，
+		* 让 CompareForm 与 PropsPanel 的 filterFunction 上下文保持一致。
+		*/
+		provide("getPropsPanelFormState", () => propsPanelRef.value?.configForm?.formState);
+		/**
 		* 把历史记录面板的自定义扩展 tab 提供给深层的 HistoryListPanel（它挂在 NavMenu 中，
 		* 以 markRaw component 形式渲染，无法直接通过 props 透传）。业务方可借此在历史记录
 		* 面板内追加自定义模块的历史 tab。
@@ -150,9 +156,11 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		*/
 		provide(M_THEME_KEY, computed(() => props.theme ?? ""));
 		const propsPanelMountedHandler = (e) => {
+			propsPanelRef.value = e;
 			emit("props-panel-mounted", e);
 		};
 		const propsPanelUnmountedHandler = () => {
+			propsPanelRef.value = null;
 			emit("props-panel-unmounted");
 		};
 		const propsPanelSubmitErrorHandler = (e) => {

package/dist/es/components/CompareForm.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,3 @@
-import { useServices } from "../hooks/use-services.js";
 import { getCodeBlockFormConfig } from "../utils/code-block.js";
 import { MForm } from "@tmagic/form";
 import { HookType } from "@tmagic/core";
@@ -16,13 +15,17 @@ var CompareForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		dataSourceType: {},
 		labelWidth: { default: "120px" },
 		height: {},
-		extendState: {},
+		extendState: {
+			type: Function,
+			default: (state) => state
+		},
+		baseFormState: {},
+		selfDiffFieldTypes: {},
 		loadConfig: {},
-		services: { default: () => useServices() }
+		services: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
-		const { propsService, dataSourceService, codeBlockService, editorService } = props.services;
 		provide("services", props.services);
 		const config = ref([]);
 		/** vs-code 编辑器的 monaco 配置项，沿用 Editor 顶层 provide('codeOptions', ...) 的注入。 */
@@ -94,21 +97,25 @@ var CompareForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				})
 			};
 		});
+		const mergedExtendState = (state) => {
+			return props.extendState(props.baseFormState || state);
+		};
 		/**
 		* 内置的默认 FormConfig 加载逻辑：按 `category` 从对应 service / 工具取配置。
 		* 作为 ctx.defaultLoadConfig 透传给自定义 `loadConfig`，方便复用与二次加工。
 		*/
 		const defaultLoadConfig = async () => {
+			if (!props.services) return [];
 			switch (props.category) {
 				case "node":
 					if (!props.type) return [];
-					return removeStyleDisplayConfig(await propsService.getPropsConfig(props.type, { node: props.value }));
-				case "data-source": return dataSourceService.getFormConfig(props.type || "base").map((item) => "type" in item && item.type === "tab" ? {
+					return removeStyleDisplayConfig(await props.services.propsService.getPropsConfig(props.type, { node: props.value }));
+				case "data-source": return props.services.dataSourceService.getFormConfig(props.type || "base").map((item) => "type" in item && item.type === "tab" ? {
 					...item,
 					active: "fields"
 				} : item);
 				case "code-block": return getCodeBlockFormConfig({
-					paramColConfig: codeBlockService.getParamsColConfig(),
+					paramColConfig: props.services.codeBlockService.getParamsColConfig(),
 					isDataSource: () => Boolean(props.dataSourceType),
 					dataSourceType: () => props.dataSourceType,
 					codeOptions,
@@ -147,10 +154,9 @@ var CompareForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		* - services：整个 useServices() 返回的服务集合；
 		* - stage：当前 editorService.get('stage') 的最新值。
 		*/
-		const stage = computed(() => editorService.get("stage"));
 		watchEffect(() => {
-			if (formRef.value) {
-				formRef.value.formState.stage = stage.value;
+			if (formRef.value && props.services) {
+				formRef.value.formState.stage = props.services.editorService.get("stage");
 				formRef.value.formState.services = props.services;
 			}
 		});
@@ -173,14 +179,15 @@ var CompareForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				"is-compare": true,
 				disabled: true,
 				"label-width": __props.labelWidth,
-				"extend-state": __props.extendState,
-				"show-diff": showDiff
+				"extend-state": mergedExtendState,
+				"show-diff": showDiff,
+				"self-diff-field-types": __props.selfDiffFieldTypes
 			}, null, 8, [
 				"config",
 				"init-values",
 				"last-values",
 				"label-width",
-				"extend-state"
+				"self-diff-field-types"
 			])) : createCommentVNode("v-if", true)], 4);
 		};
 	}

package/dist/es/fields/DataSourceInput.vue_vue_type_script_setup_true_lang.js

@@ -230,7 +230,7 @@ var DataSourceInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				onSelect: selectHandler
 			}), {
 				suffix: withCtx(() => [createVNode(Icon_default, { icon: unref(Coin) }, null, 8, ["icon"])]),
-				default: withCtx(({ item }) => [createElementVNode("div", _hoisted_1, [createElementVNode("div", null, toDisplayString(item.text), 1), createElementVNode("span", _hoisted_2, toDisplayString(item.value), 1)])]),
+				default: withCtx((slotProps) => [createElementVNode("div", _hoisted_1, [createElementVNode("div", null, toDisplayString(slotProps?.item?.text || ""), 1), createElementVNode("span", _hoisted_2, toDisplayString(slotProps?.item?.value || ""), 1)])]),
 				_: 1
 			}, 16, ["modelValue"])) : (openBlock(), createElementBlock("div", {
 				key: 2,

package/dist/es/index.js

@@ -52,9 +52,11 @@ import DataSourceConfigPanel_default from "./layouts/sidebar/data-source/DataSou
 import LayerPanel_default from "./layouts/sidebar/layer/LayerPanel.js";
 import ComponentListPanel_default from "./layouts/sidebar/ComponentListPanel.js";
 import codeBlock_default from "./services/codeBlock.js";
+import componentList_default from "./services/componentList.js";
 import dataSource_default from "./services/dataSource.js";
 import dep_default from "./services/dep.js";
 import events_default from "./services/events.js";
+import keybinding_default from "./services/keybinding.js";
 import stageOverlay_default from "./services/stageOverlay.js";
 import Editor_default from "./Editor.js";
 import CodeSelect_default from "./fields/CodeSelect.js";
@@ -85,4 +87,4 @@ export * from "@tmagic/table";
 export * from "@tmagic/stage";
 export * from "@tmagic/design";
 export * from "@tmagic/utils";
-export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, CodeBlockEditor_default as CodeBlockEditor, CodeBlockList_default as CodeBlockList, CodeBlockListPanel_default as CodeBlockListPanel, CodeDeleteErrorType, CodeSelect_default as CodeSelect, CodeSelectCol_default as CodeSelectCol, ColumnLayout, CompareForm_default as CompareForm, ComponentListPanel_default as ComponentListPanel, CondOpSelect_default as CondOpSelect, ContentMenu_default as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, DataSourceAddButton_default as DataSourceAddButton, DataSourceConfigPanel_default as DataSourceConfigPanel, Index_default as DataSourceFieldSelect, DataSourceFields_default as DataSourceFields, DataSourceInput_default as DataSourceInput, DataSourceMethodSelect_default as DataSourceMethodSelect, DataSourceMethods_default as DataSourceMethods, DataSourceMocks_default as DataSourceMocks, DataSourceSelect_default as DataSourceSelect, DepTargetType, DisplayConds_default as DisplayConds, DragType, EventSelect_default as EventSelect, Fixed2Other, FloatingBox_default as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, HistoryDiffDialog_default as HistoryDiffDialog, Bucket_default as HistoryListBucket, BucketTab_default as HistoryListBucketTab, Icon_default as Icon, IdleTask, KeyBindingCommand, KeyValue_default as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerOffset, LayerPanel_default as LayerPanel, Layout, SplitView_default as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, PageFragmentSelect_default as PageFragmentSelect, FormPanel_default as PropsFormPanel, PropsPanel_default as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, Resizer_default as Resizer, ScrollViewer, SideItemKey, SplitView_default as SplitView, StageCore, Index_default$1 as StyleSetter, CodeEditor_default as TMagicCodeEditor, Editor_default as TMagicEditor, ToolButton_default as ToolButton, Tree_default as Tree, TreeNode_default as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, canUsePluginMethods, change2Fixed, classifyDragSources, codeBlock_default as codeBlockService, collectRelatedNodes, confirmHistoryAction, createStackStep, dataSource_default as dataSourceService, debug, plugin_default as default, defaultIsExpandable, dep_default as depService, describeRevertStep, describeStepForRevert, deserializeStacks, designPlugin, detectStackOpType, detectTargetId, detectTargetName, displayTabConfig, editorNodeMergeCustomizer, editor_default as editorService, eqOptions, error, eventTabConfig, events_default as eventsService, fillConfig, fixNodeLeft, fixNodePosition, formPlugin, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getCodeBlockFormConfig, getDefaultConfig, getDisplayField, getEditorConfig, getFieldType, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getLastPushedHistoryIds, getNodeIndex, getOrCreateStack, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, history_default as historyService, idbDelete, idbGet, idbSet, info, isIncludeDataSource, isIndexedDBSupported, monaco_editor_default as loadMonaco, log, markStackSaved, mergeSteps, moveItemsInContainer, numberOptions, openIndexedDB, props_default as propsService, resolveSelectedNode, serializeConfig, serializeStacks, setChildrenLayout, setEditorConfig, setLayout, stageOverlay_default as stageOverlayService, storage_default as storageService, styleTabConfig, tablePlugin, toggleFixedPosition, ui_default as uiService, undoFloor, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useHistoryRevert, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, CodeBlockEditor_default as CodeBlockEditor, CodeBlockList_default as CodeBlockList, CodeBlockListPanel_default as CodeBlockListPanel, CodeDeleteErrorType, CodeSelect_default as CodeSelect, CodeSelectCol_default as CodeSelectCol, ColumnLayout, CompareForm_default as CompareForm, ComponentListPanel_default as ComponentListPanel, CondOpSelect_default as CondOpSelect, ContentMenu_default as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, DataSourceAddButton_default as DataSourceAddButton, DataSourceConfigPanel_default as DataSourceConfigPanel, Index_default as DataSourceFieldSelect, DataSourceFields_default as DataSourceFields, DataSourceInput_default as DataSourceInput, DataSourceMethodSelect_default as DataSourceMethodSelect, DataSourceMethods_default as DataSourceMethods, DataSourceMocks_default as DataSourceMocks, DataSourceSelect_default as DataSourceSelect, DepTargetType, DisplayConds_default as DisplayConds, DragType, EventSelect_default as EventSelect, Fixed2Other, FloatingBox_default as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, HistoryDiffDialog_default as HistoryDiffDialog, Bucket_default as HistoryListBucket, BucketTab_default as HistoryListBucketTab, Icon_default as Icon, IdleTask, KeyBindingCommand, KeyValue_default as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerOffset, LayerPanel_default as LayerPanel, Layout, SplitView_default as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, PageFragmentSelect_default as PageFragmentSelect, FormPanel_default as PropsFormPanel, PropsPanel_default as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, Resizer_default as Resizer, ScrollViewer, SideItemKey, SplitView_default as SplitView, StageCore, Index_default$1 as StyleSetter, CodeEditor_default as TMagicCodeEditor, Editor_default as TMagicEditor, ToolButton_default as ToolButton, Tree_default as Tree, TreeNode_default as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, canUsePluginMethods, change2Fixed, classifyDragSources, codeBlock_default as codeBlockService, collectRelatedNodes, componentList_default as componentListService, confirmHistoryAction, createStackStep, dataSource_default as dataSourceService, debug, plugin_default as default, defaultIsExpandable, dep_default as depService, describeRevertStep, describeStepForRevert, deserializeStacks, designPlugin, detectStackOpType, detectTargetId, detectTargetName, displayTabConfig, editorNodeMergeCustomizer, editor_default as editorService, eqOptions, error, eventTabConfig, events_default as eventsService, fillConfig, fixNodeLeft, fixNodePosition, formPlugin, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getCodeBlockFormConfig, getDefaultConfig, getDisplayField, getEditorConfig, getFieldType, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getLastPushedHistoryIds, getNodeIndex, getOrCreateStack, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, history_default as historyService, idbDelete, idbGet, idbSet, info, isIncludeDataSource, isIndexedDBSupported, keybinding_default as keybindingService, monaco_editor_default as loadMonaco, log, markStackSaved, mergeSteps, moveItemsInContainer, numberOptions, openIndexedDB, props_default as propsService, resolveSelectedNode, serializeConfig, serializeStacks, setChildrenLayout, setEditorConfig, setLayout, stageOverlay_default as stageOverlayService, storage_default as storageService, styleTabConfig, tablePlugin, toggleFixedPosition, ui_default as uiService, undoFloor, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useHistoryRevert, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, warn };

package/dist/es/layouts/history-list/BucketTab.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,15 @@
 import Bucket_default from "./Bucket.js";
 import { TMagicScrollbar } from "@tmagic/design";
-import { Fragment, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, renderList, unref, withCtx } from "vue";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, renderList, unref, withCtx } from "vue";
 //#region packages/editor/src/layouts/history-list/BucketTab.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
 	class: "m-editor-history-list-empty"
 };
-var _hoisted_2 = { class: "m-editor-history-list-toolbar" };
+var _hoisted_2 = {
+	key: 0,
+	class: "m-editor-history-list-toolbar"
+};
 var _hoisted_3 = ["title"];
 var BucketTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorHistoryListBucketTab",
@@ -26,11 +29,11 @@ var BucketTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 	],
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return !__props.buckets.length ? (openBlock(), createElementBlock("div", _hoisted_1, "暂无操作记录")) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", _hoisted_2, [createElementVNode("span", {
+			return !__props.buckets.length ? (openBlock(), createElementBlock("div", _hoisted_1, "暂无操作记录")) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [__props.config.showClear !== false ? (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("span", {
 				class: "m-editor-history-list-clear",
 				title: `清空${__props.config.title}的历史记录`,
 				onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("clear"))
-			}, "清空", 8, _hoisted_3)]), createVNode(unref(TMagicScrollbar), { "max-height": "360px" }, {
+			}, "清空", 8, _hoisted_3)])) : createCommentVNode("v-if", true), createVNode(unref(TMagicScrollbar), { "max-height": "360px" }, {
 				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.buckets, (bucket) => {
 					return openBlock(), createBlock(Bucket_default, {
 						key: `${__props.config.prefix}-${bucket.id}`,

package/dist/es/layouts/history-list/HistoryDiffDialog.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,3 @@
-import { useServices } from "../../hooks/use-services.js";
 import CodeEditor_default from "../CodeEditor.js";
 import CompareForm_default from "../../components/CompareForm.js";
 import { TMagicButton, TMagicDialog, TMagicRadioButton, TMagicRadioGroup, TMagicTag } from "@tmagic/design";
@@ -25,13 +24,14 @@ var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 	name: "MEditorHistoryDiffDialog",
 	__name: "HistoryDiffDialog",
 	props: {
-		services: { default: () => useServices() },
+		services: {},
 		extendState: {},
 		loadConfig: {},
 		width: { default: "900px" },
 		isConfirm: { type: Boolean },
 		onConfirm: {},
-		selfDiffFieldTypes: {}
+		selfDiffFieldTypes: {},
+		compareFormState: {}
 	},
 	emits: ["close"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -65,6 +65,13 @@ var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		};
 		const dialogTitle = computed(() => props.onConfirm ? "确认回滚" : "查看修改差异");
 		const hasCurrent = computed(() => payload.value?.currentValue !== void 0 && payload.value?.currentValue !== null);
+		/** 是否存在该步「修改后的值」：不存在（如仅删除）时「与修改前对比」无意义，置灰禁用。 */
+		const hasValue = computed(() => payload.value?.value !== void 0 && payload.value?.value !== null);
+		/**
+		* 计算 open 时的初始对比模式：
+		* 没有「修改后的值」但有当前值时（「与修改前对比」不可用），默认进入「与当前对比」；否则默认「与修改前对比」。
+		*/
+		const resolveInitialMode = () => !hasValue.value && hasCurrent.value ? "current" : "before";
 		/** 左侧（旧/参照）值 */
 		const leftValue = computed(() => {
 			if (!payload.value) return {};
@@ -107,7 +114,7 @@ var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		});
 		const open = (p) => {
 			payload.value = p;
-			mode.value = "before";
+			mode.value = resolveInitialMode();
 			viewMode.value = "form";
 			visible.value = true;
 		};
@@ -199,10 +206,13 @@ var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 						size: "small",
 						class: "m-editor-history-diff-dialog-mode"
 					}, {
-						default: withCtx(() => [createVNode(unref(TMagicRadioButton), { value: "before" }, {
+						default: withCtx(() => [createVNode(unref(TMagicRadioButton), {
+							value: "before",
+							disabled: !hasValue.value
+						}, {
 							default: withCtx(() => [..._cache[7] || (_cache[7] = [createTextVNode("与修改前对比", -1)])]),
 							_: 1
-						}), createVNode(unref(TMagicRadioButton), {
+						}, 8, ["disabled"]), createVNode(unref(TMagicRadioButton), {
 							value: "current",
 							disabled: !hasCurrent.value
 						}, {
@@ -236,6 +246,7 @@ var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 						"data-source-type": payload.value.dataSourceType,
 						value: rightValue.value,
 						"last-value": leftValue.value,
+						"base-form-state": __props.compareFormState,
 						"extend-state": __props.extendState,
 						"load-config": __props.loadConfig,
 						"self-diff-field-types": __props.selfDiffFieldTypes,
@@ -247,6 +258,7 @@ var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 						"data-source-type",
 						"value",
 						"last-value",
+						"base-form-state",
 						"extend-state",
 						"load-config",
 						"self-diff-field-types",

package/dist/es/layouts/history-list/HistoryListPanel.vue_vue_type_script_setup_true_lang.js

@@ -68,6 +68,7 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		* 未提供时为 undefined，CompareForm/MForm 会跳过 extendState 处理。
 		*/
 		const extendFormState = inject("extendFormState", void 0);
+		const getPropsPanelFormState = inject("getPropsPanelFormState", void 0);
 		const { expanded, toggleGroup, pageGroups, dataSourceGroups, codeBlockGroups, pageGroupsDisplay, dataSourceGroupsByTarget, codeBlockGroupsByTarget } = useHistoryList();
 		/**
 		* 当前活动页的「加载/初始」标记记录（设置 root 时生成），透传给 PageTab 的底部初始行展示。
@@ -149,9 +150,12 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		/**
 		* 「单步回滚」与「查看差异」的完整逻辑收敛到 useHistoryRevert，面板与业务方共用：
 		* 二者均由 useHistoryRevert 内部按需动态挂载 HistoryDiffDialog，
-		* 业务方亦可直接 import useHistoryRevert(services) 调用，无需自行挂载任何弹窗。
+		* 业务方亦可直接 import useHistoryRevert(options, services) 调用，无需自行挂载任何弹窗。
 		*/
-		const { onPageRevert, onDataSourceRevert, onCodeBlockRevert, onPageDiff, onDataSourceDiff, onCodeBlockDiff } = useHistoryRevert(services, { extendState: extendFormState });
+		const { onPageRevert, onDataSourceRevert, onCodeBlockRevert, onPageDiff, onDataSourceDiff, onCodeBlockDiff } = useHistoryRevert({
+			extendState: extendFormState,
+			getPropsPanelFormState
+		}, services);
 		/**
 		* 把内存中（已清空对应类别后的）历史状态重新写回 IndexedDB，
 		* 使本地持久化的那份与内存保持一致——即「连同本地保存的一并删除」。
@@ -227,7 +231,8 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					default: withCtx(() => [
 						(openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), normalizeProps(guardReactiveProps(unref(tabPaneComponent)?.props({
 							name: "page",
-							label: `${pageName.value} (${unref(pageGroups).length})`
+							label: `${pageName.value} (${unref(pageGroups).length})`,
+							lazy: true
 						}) || {})), {
 							default: withCtx(() => [createVNode(PageTab_default, {
 								list: unref(pageGroupsDisplay),
@@ -252,7 +257,8 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 						}, 16)),
 						!disabledDataSource.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), normalizeProps(mergeProps({ key: 0 }, unref(tabPaneComponent)?.props({
 							name: "data-source",
-							label: `${dataSourceName.value} (${unref(dataSourceGroups).length})`
+							label: `${dataSourceName.value} (${unref(dataSourceGroups).length})`,
+							lazy: true
 						}) || {})), {
 							default: withCtx(() => [createVNode(BucketTab_default, {
 								config: dataSourceConfig.value,
@@ -276,7 +282,8 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 						}, 16)) : createCommentVNode("v-if", true),
 						!disabledCodeBlock.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), normalizeProps(mergeProps({ key: 1 }, unref(tabPaneComponent)?.props({
 							name: "code-block",
-							label: `${codeBlockName.value} (${unref(codeBlockGroups).length})`
+							label: `${codeBlockName.value} (${unref(codeBlockGroups).length})`,
+							lazy: true
 						}) || {})), {
 							default: withCtx(() => [createVNode(BucketTab_default, {
 								config: codeBlockConfig.value,
@@ -301,7 +308,8 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 						(openBlock(true), createElementBlock(Fragment, null, renderList(unref(extraTabs), (tab) => {
 							return openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), mergeProps({ key: tab.name }, { ref_for: true }, unref(tabPaneComponent)?.props({
 								name: tab.name,
-								label: resolveTabLabel(tab)
+								label: resolveTabLabel(tab),
+								lazy: true
 							}) || {}), {
 								default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(tab.component), mergeProps({ ref_for: true }, tab.props || {}, toHandlers(tab.listeners || {})), null, 16))]),
 								_: 2

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

@@ -46,6 +46,7 @@ var mountHistoryDiffDialog = async (options) => {
 		extendState: options.extendState,
 		loadConfig: options.loadConfig,
 		selfDiffFieldTypes: options.selfDiffFieldTypes,
+		compareFormState: options.compareFormState,
 		onClose: options.onClose
 	});
 	if (options.appContext) Object.assign(app._context, options.appContext);
@@ -59,6 +60,7 @@ var mountHistoryDiffDialog = async (options) => {
 		}, 300);
 	};
 	return {
+		app,
 		instance,
 		destroy
 	};
@@ -116,15 +118,14 @@ var viewHistoryDiffDialog = async (payload, options) => {
 * ```ts
 * import { useHistoryRevert } from '@tmagic/editor';
 *
-* const { onPageRevert, onPageDiff } = useHistoryRevert(editorRef.value); // editorRef.value 即 Editor 暴露的 services
+* const { onPageRevert, onPageDiff } = useHistoryRevert({}, editorRef.value); // editorRef.value 即 Editor 暴露的 services
 * await onPageRevert(index); // 弹出差异 / 二次确认弹窗后回滚
 * onPageDiff(index); // 弹出只读差异弹窗查看前后值差异
 * ```
 */
-var useHistoryRevert = (services, options = {}) => {
-	const { editorService, dataSourceService, codeBlockService, historyService } = services;
+var useHistoryRevert = (options = {}, services) => {
 	const appContext = options.appContext ?? getCurrentInstance()?.appContext ?? null;
-	const { extendState } = options;
+	const { extendState, getPropsPanelFormState } = options;
 	/** 目标数据已被删除、无法回滚时的统一提示。 */
 	const showRevertTargetMissing = () => {
 		tMagicMessage.error("回滚失败：该记录对应的数据已被删除");
@@ -151,22 +152,22 @@ var useHistoryRevert = (services, options = {}) => {
 	};
 	const buildPageDiffPayload = (index) => buildDiffPayload({
 		category: "node",
-		groups: () => historyService.getHistoryGroups("page", editorService.get("page")?.id),
-		getCurrent: (id) => editorService.getNodeById(id),
+		groups: () => services?.historyService.getHistoryGroups("page", services?.editorService.get("page")?.id) ?? [],
+		getCurrent: (id) => services?.editorService.getNodeById(id),
 		resolveType: (n, o) => n.type || o.type || "",
 		resolveLabel: (n, o) => n.name || o.name || n.type || o.type || ""
 	}, index);
 	const buildDataSourceDiffPayload = (id, index) => buildDiffPayload({
 		category: "data-source",
-		groups: () => historyService.getHistoryGroups("dataSource"),
-		getCurrent: (id) => dataSourceService.getDataSourceById(`${id}`),
+		groups: () => services?.historyService.getHistoryGroups("dataSource") ?? [],
+		getCurrent: (id) => services?.dataSourceService.getDataSourceById(`${id}`),
 		resolveType: (n, o) => n.type || o.type || "base",
 		resolveLabel: (n, o, id) => n.title || o.title || `${id}`
 	}, index, id);
 	const buildCodeBlockDiffPayload = (id, index) => buildDiffPayload({
 		category: "code-block",
-		groups: () => historyService.getHistoryGroups("codeBlock"),
-		getCurrent: (id) => codeBlockService.getCodeContentById(id),
+		groups: () => services?.historyService.getHistoryGroups("codeBlock") ?? [],
+		getCurrent: (id) => services?.codeBlockService.getCodeContentById(id),
 		resolveLabel: (n, o, id) => n.name || o.name || `${id}`
 	}, index, id);
 	/**
@@ -176,45 +177,45 @@ var useHistoryRevert = (services, options = {}) => {
 	* add（回滚即删除）即使目标已不在，也已达成「删除」目的，不视为失败。
 	*/
 	const isPageRevertTargetMissing = (index) => {
-		const step = historyService.getStepList("page", editorService.get("page")?.id)[index]?.step;
+		const step = services?.historyService.getStepList("page", services?.editorService.get("page")?.id)[index]?.step;
 		if (!step) return false;
 		if (step.opType === "update") return (step.diff ?? []).some((item) => {
 			const id = item.newSchema?.id ?? item.oldSchema?.id;
-			return id !== void 0 && !editorService.getNodeById(id, false);
+			return id !== void 0 && !services?.editorService.getNodeById(id, false);
 		});
-		if (step.opType === "remove") return (step.diff ?? []).some((item) => item.parentId !== void 0 && !editorService.getNodeById(item.parentId, false));
+		if (step.opType === "remove") return (step.diff ?? []).some((item) => item.parentId !== void 0 && !services?.editorService.getNodeById(item.parentId, false));
 		return false;
 	};
 	/** 数据源 update 步骤回滚时，对应数据源必须仍存在（已删除则无处写回旧值）。 */
 	const isDataSourceRevertTargetMissing = (id, index) => {
-		const step = historyService.getStepList("dataSource", id)[index]?.step;
-		return Boolean(step?.opType === "update" && !dataSourceService.getDataSourceById(`${id}`));
+		const step = services?.historyService.getStepList("dataSource", id)[index]?.step;
+		return Boolean(step?.opType === "update" && !services?.dataSourceService.getDataSourceById(`${id}`));
 	};
 	/** 代码块 update 步骤回滚时，对应代码块必须仍存在（已删除则无处写回旧值）。 */
 	const isCodeBlockRevertTargetMissing = (id, index) => {
-		const step = historyService.getStepList("codeBlock", id)[index]?.step;
-		return Boolean(step?.opType === "update" && !codeBlockService.getCodeContentById(id));
+		const step = services?.historyService.getStepList("codeBlock", id)[index]?.step;
+		return Boolean(step?.opType === "update" && !services?.codeBlockService.getCodeContentById(id));
 	};
 	const onPageRevert = (index) => {
 		if (isPageRevertTargetMissing(index)) {
 			showRevertTargetMissing();
 			return Promise.resolve(null);
 		}
-		return runRevert(buildPageDiffPayload(index)).then((result) => result ? editorService.revertPageStep(index) : null);
+		return runRevert(buildPageDiffPayload(index), { compareFormState: getPropsPanelFormState?.() }).then((result) => result ? services?.editorService.revertPageStep(index) : null);
 	};
 	const onDataSourceRevert = (id, index) => {
 		if (isDataSourceRevertTargetMissing(id, index)) {
 			showRevertTargetMissing();
 			return Promise.resolve(null);
 		}
-		return runRevert(buildDataSourceDiffPayload(id, index)).then((result) => result ? dataSourceService.revert(id, index) : null);
+		return runRevert(buildDataSourceDiffPayload(id, index)).then((result) => result ? services?.dataSourceService.revert(id, index) : null);
 	};
 	const onCodeBlockRevert = (id, index) => {
 		if (isCodeBlockRevertTargetMissing(id, index)) {
 			showRevertTargetMissing();
 			return Promise.resolve(null);
 		}
-		return runRevert(buildCodeBlockDiffPayload(id, index)).then((result) => result ? codeBlockService.revert(id, index) : null);
+		return runRevert(buildCodeBlockDiffPayload(id, index)).then((result) => result ? services?.codeBlockService.revert(id, index) : null);
 	};
 	/**
 	* 「查看差异」：可差异对比的步骤（单实体 update）动态挂载只读 HistoryDiffDialog 展示前后值差异，
@@ -225,7 +226,8 @@ var useHistoryRevert = (services, options = {}) => {
 		if (payload) return viewHistoryDiffDialog(payload, {
 			appContext,
 			extendState,
-			services
+			services,
+			compareFormState: getPropsPanelFormState?.()
 		});
 	};
 	const onDataSourceDiff = (id, index) => {

package/dist/es/services/codeBlock.js

@@ -56,6 +56,7 @@ var CodeBlock = class extends BaseService {
 	async setCodeDsl(codeDsl) {
 		this.state.codeDsl = codeDsl;
 		this.emit("code-dsl-change", this.state.codeDsl);
+		this.emit("change", this.state.codeDsl);
 	}
 	/**
 	* 获取活动的代码块dsl数据源（默认从dsl中的codeBlocks字段读取）
@@ -132,6 +133,7 @@ var CodeBlock = class extends BaseService {
 			this.lastPushedHistoryId = (step ? history_default.push("codeBlock", step, id) : null)?.uuid ?? null;
 		}
 		this.emit("addOrUpdate", id, codeDsl[id]);
+		this.emit("change", this.getCodeDsl());
 	}
 	/**
 	* 根据代码块id数组获取代码dsl
@@ -229,6 +231,7 @@ var CodeBlock = class extends BaseService {
 			}
 			this.emit("remove", id);
 		});
+		this.emit("change", this.getCodeDsl());
 	}
 	/**
 	* 下列 *AndGetHistoryId 方法与对应的写入方法行为完全一致，

package/dist/es/services/dataSource.js

@@ -102,6 +102,7 @@ var DataSource = class extends BaseService {
 			this.lastPushedHistoryId = (step ? history_default.push("dataSource", step, newConfig.id) : null)?.uuid ?? null;
 		}
 		this.emit("add", newConfig);
+		this.emit("change", this.get("dataSources"));
 		return newConfig;
 	}
 	/**
@@ -132,6 +133,7 @@ var DataSource = class extends BaseService {
 			oldConfig,
 			changeRecords
 		});
+		this.emit("change", this.get("dataSources"));
 		return newConfig;
 	}
 	/**
@@ -156,6 +158,7 @@ var DataSource = class extends BaseService {
 			this.lastPushedHistoryId = (step ? history_default.push("dataSource", step, id) : null)?.uuid ?? null;
 		}
 		this.emit("remove", id);
+		this.emit("change", this.get("dataSources"));
 	}
 	/**
 	* 下列 *AndGetHistoryId 方法与对应的 add / update / remove 行为完全一致，

package/dist/es/services/editor.js

@@ -335,6 +335,13 @@ var Editor = class extends BaseService {
 			} else this.selectionBeforeOp = null;
 		}
 		this.emit("add", newNodes);
+		this.emit("change", {
+			type: "add",
+			data: newNodes.map((node) => ({
+				node,
+				page: this.getPageOfNode(node.id)
+			}))
+		});
 		return Array.isArray(addNode) ? newNodes : newNodes[0];
 	}
 	async doRemove(node, { doNotSelect = false, doNotSwitchPage = false } = {}) {
@@ -398,6 +405,10 @@ var Editor = class extends BaseService {
 	async remove(nodeOrNodeList, { doNotSelect = false, doNotSwitchPage = false, doNotPushHistory = false, historyDescription, historySource } = {}) {
 		this.captureSelectionBeforeOp();
 		const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
+		const changeItems = nodes.map((node) => ({
+			node,
+			page: this.getPageOfNode(node.id)
+		}));
 		const removedItems = [];
 		let pageForOp = null;
 		if (!(isPage(nodes[0]) || isPageFragment(nodes[0]))) for (const n of nodes) {
@@ -427,6 +438,10 @@ var Editor = class extends BaseService {
 		});
 		else this.selectionBeforeOp = null;
 		this.emit("remove", nodes);
+		this.emit("change", {
+			type: "remove",
+			data: changeItems
+		});
 	}
 	async doUpdate(config, { changeRecords = [], historySource } = {}) {
 		if (!this.get("root")) throw new Error("root为空");
@@ -512,6 +527,13 @@ var Editor = class extends BaseService {
 			} else this.selectionBeforeOp = null;
 		}
 		this.emit("update", updateData);
+		this.emit("change", {
+			type: "update",
+			data: updateData.map((node) => ({
+				node,
+				page: this.getPageOfNode(node.newNode.id)
+			}))
+		});
 		return Array.isArray(config) ? updateData.map((item) => item.newNode) : updateData[0].newNode;
 	}
 	/**
@@ -677,6 +699,14 @@ var Editor = class extends BaseService {
 			});
 		} else this.selectionBeforeOp = null;
 		this.emit("move-layer", offset);
+		this.emit("change", {
+			type: "move-layer",
+			data: [{
+				node,
+				page: this.getPageOfNode(node.id)
+			}],
+			offset
+		});
 	}
 	/**
 	* 移动一个或多个节点到指定容器中。
@@ -806,6 +836,15 @@ var Editor = class extends BaseService {
 			configs,
 			targetParent
 		});
+		this.emit("change", {
+			type: "drag-to",
+			data: configs.map((node) => ({
+				node,
+				page: this.getPageOfNode(node.id)
+			})),
+			targetIndex,
+			targetParent
+		});
 	}
 	/**
 	* 下列 *AndGetHistoryId 方法与对应的普通操作（add / remove / update ...）行为完全一致，
@@ -1064,6 +1103,19 @@ var Editor = class extends BaseService {
 	addModifiedNodeId(id) {
 		this.get("modifiedNodeIds").set(id, id);
 	}
+	/**
+	* 获取指定节点所属的页面 / 页面片：
+	* - 普通节点返回其所在的 page；
+	* - 节点本身就是 page / pageFragment 时返回它自己；
+	* - 找不到时返回 null。
+	* 供 `change` 事件携带「变更节点对应的 page」（而非编辑器当前选中页）。
+	*/
+	getPageOfNode(id) {
+		const { node, page } = this.getNodeInfo(id, false);
+		if (page) return page;
+		if (node && (isPage(node) || isPageFragment(node))) return node;
+		return null;
+	}
 	captureSelectionBeforeOp() {
 		if (this.selectionBeforeOp) return;
 		this.selectionBeforeOp = this.get("nodes").map((n) => n.id);

package/dist/es/style.css

@@ -462,6 +462,7 @@ fieldset.m-fieldset .m-form-tip {
   display: flex;
   justify-content: space-between;
   margin-top: 10px;
+  margin-bottom: 16px;
 }
 
 .m-form-panel .el-card__header:hover {

package/dist/style.css

@@ -462,6 +462,7 @@ fieldset.m-fieldset .m-form-tip {
   display: flex;
   justify-content: space-between;
   margin-top: 10px;
+  margin-bottom: 16px;
 }
 
 .m-form-panel .el-card__header:hover {