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

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

@@ -16,7 +16,12 @@ 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() }
 	},
@@ -94,6 +99,9 @@ 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`，方便复用与二次加工。
@@ -173,14 +181,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/HistoryDiffDialog.vue_vue_type_script_setup_true_lang.js

@@ -31,7 +31,8 @@ var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		width: { default: "900px" },
 		isConfirm: { type: Boolean },
 		onConfirm: {},
-		selfDiffFieldTypes: {}
+		selfDiffFieldTypes: {},
+		compareFormState: {}
 	},
 	emits: ["close"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -236,6 +237,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 +249,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 的底部初始行展示。
@@ -151,7 +152,10 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		* 二者均由 useHistoryRevert 内部按需动态挂载 HistoryDiffDialog，
 		* 业务方亦可直接 import useHistoryRevert(services) 调用，无需自行挂载任何弹窗。
 		*/
-		const { onPageRevert, onDataSourceRevert, onCodeBlockRevert, onPageDiff, onDataSourceDiff, onCodeBlockDiff } = useHistoryRevert(services, { extendState: extendFormState });
+		const { onPageRevert, onDataSourceRevert, onCodeBlockRevert, onPageDiff, onDataSourceDiff, onCodeBlockDiff } = useHistoryRevert(services, {
+			extendState: extendFormState,
+			getPropsPanelFormState
+		});
 		/**
 		* 把内存中（已清空对应类别后的）历史状态重新写回 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
 	};
@@ -124,7 +126,7 @@ var viewHistoryDiffDialog = async (payload, options) => {
 var useHistoryRevert = (services, options = {}) => {
 	const { editorService, dataSourceService, codeBlockService, historyService } = services;
 	const appContext = options.appContext ?? getCurrentInstance()?.appContext ?? null;
-	const { extendState } = options;
+	const { extendState, getPropsPanelFormState } = options;
 	/** 目标数据已被删除、无法回滚时的统一提示。 */
 	const showRevertTargetMissing = () => {
 		tMagicMessage.error("回滚失败：该记录对应的数据已被删除");
@@ -200,7 +202,7 @@ var useHistoryRevert = (services, options = {}) => {
 			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 ? editorService.revertPageStep(index) : null);
 	};
 	const onDataSourceRevert = (id, index) => {
 		if (isDataSourceRevertTargetMissing(id, index)) {
@@ -225,7 +227,8 @@ var useHistoryRevert = (services, options = {}) => {
 		if (payload) return viewHistoryDiffDialog(payload, {
 			appContext,
 			extendState,
-			services
+			services,
+			compareFormState: getPropsPanelFormState?.()
 		});
 	};
 	const onDataSourceDiff = (id, index) => {

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 {

package/dist/themes/magic-admin.css

@@ -110,6 +110,25 @@
   margin-bottom: 8px;
 }
 
+.tmagic-design-form-item.has-extra-tips > .el-form-item__content {
+  gap: 10px;
+}
+.tmagic-design-form-item.has-extra-tips > .el-form-item__content > .tmagic-design-alert {
+  border-radius: 2px;
+  width: fit-content;
+  padding: 0 8px;
+  color: var(--el-color-primary, #0056ea);
+  background-color: var(--el-color-primary-light-9, rgb(236, 245, 255));
+}
+.tmagic-design-form-item.has-extra-tips > .el-form-item__content > .tmagic-design-alert .el-icon.el-alert__icon {
+  fill: var(--el-color-primary, #0056ea);
+  color: var(--el-color-primary, #0056ea);
+}
+.tmagic-design-form-item.has-extra-tips > .el-form-item__content > .tmagic-design-alert .el-alert__title {
+  font-size: 14px;
+  line-height: 22px;
+}
+
 .m-table .el-button.action-btn + .el-button.action-btn {
   margin-left: 0;
 }
@@ -423,6 +442,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/tmagic-editor.umd.cjs

@@ -11255,7 +11255,12 @@
 				dataSourceType: {},
 				labelWidth: { default: "120px" },
 				height: {},
-				extendState: {},
+				extendState: {
+					type: Function,
+					default: (state) => state
+				},
+				baseFormState: {},
+				selfDiffFieldTypes: {},
 				loadConfig: {},
 				services: { default: () => useServices() }
 			},
@@ -11333,6 +11338,9 @@
 						})
 					};
 				});
+				const mergedExtendState = (state) => {
+					return props.extendState(props.baseFormState || state);
+				};
 				/**
 				* 内置的默认 FormConfig 加载逻辑：按 `category` 从对应 service / 工具取配置。
 				* 作为 ctx.defaultLoadConfig 透传给自定义 `loadConfig`，方便复用与二次加工。
@@ -11412,14 +11420,15 @@
 						"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"
 					])) : (0, vue.createCommentVNode)("v-if", true)], 4);
 				};
 			}
@@ -11467,7 +11476,8 @@
 				width: { default: "900px" },
 				isConfirm: { type: Boolean },
 				onConfirm: {},
-				selfDiffFieldTypes: {}
+				selfDiffFieldTypes: {},
+				compareFormState: {}
 			},
 			emits: ["close"],
 			setup(__props, { expose: __expose, emit: __emit }) {
@@ -11672,6 +11682,7 @@
 								"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,
@@ -11683,6 +11694,7 @@
 								"data-source-type",
 								"value",
 								"last-value",
+								"base-form-state",
 								"extend-state",
 								"load-config",
 								"self-diff-field-types",
@@ -11763,6 +11775,7 @@
 			extendState: options.extendState,
 			loadConfig: options.loadConfig,
 			selfDiffFieldTypes: options.selfDiffFieldTypes,
+			compareFormState: options.compareFormState,
 			onClose: options.onClose
 		});
 		if (options.appContext) Object.assign(app._context, options.appContext);
@@ -11776,6 +11789,7 @@
 			}, 300);
 		};
 		return {
+			app,
 			instance,
 			destroy
 		};
@@ -11841,7 +11855,7 @@
 	var useHistoryRevert = (services, options = {}) => {
 		const { editorService, dataSourceService, codeBlockService, historyService } = services;
 		const appContext = options.appContext ?? (0, vue.getCurrentInstance)()?.appContext ?? null;
-		const { extendState } = options;
+		const { extendState, getPropsPanelFormState } = options;
 		/** 目标数据已被删除、无法回滚时的统一提示。 */
 		const showRevertTargetMissing = () => {
 			_tmagic_design.tMagicMessage.error("回滚失败：该记录对应的数据已被删除");
@@ -11917,7 +11931,7 @@
 				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 ? editorService.revertPageStep(index) : null);
 		};
 		const onDataSourceRevert = (id, index) => {
 			if (isDataSourceRevertTargetMissing(id, index)) {
@@ -11942,7 +11956,8 @@
 			if (payload) return viewHistoryDiffDialog(payload, {
 				appContext,
 				extendState,
-				services
+				services,
+				compareFormState: getPropsPanelFormState?.()
 			});
 		};
 		const onDataSourceDiff = (id, index) => {
@@ -12080,6 +12095,7 @@
 			* 未提供时为 undefined，CompareForm/MForm 会跳过 extendState 处理。
 			*/
 			const extendFormState = (0, vue.inject)("extendFormState", void 0);
+			const getPropsPanelFormState = (0, vue.inject)("getPropsPanelFormState", void 0);
 			const { expanded, toggleGroup, pageGroups, dataSourceGroups, codeBlockGroups, pageGroupsDisplay, dataSourceGroupsByTarget, codeBlockGroupsByTarget } = useHistoryList();
 			/**
 			* 当前活动页的「加载/初始」标记记录（设置 root 时生成），透传给 PageTab 的底部初始行展示。
@@ -12163,7 +12179,10 @@
 			* 二者均由 useHistoryRevert 内部按需动态挂载 HistoryDiffDialog，
 			* 业务方亦可直接 import useHistoryRevert(services) 调用，无需自行挂载任何弹窗。
 			*/
-			const { onPageRevert, onDataSourceRevert, onCodeBlockRevert, onPageDiff, onDataSourceDiff, onCodeBlockDiff } = useHistoryRevert(services, { extendState: extendFormState });
+			const { onPageRevert, onDataSourceRevert, onCodeBlockRevert, onPageDiff, onDataSourceDiff, onCodeBlockDiff } = useHistoryRevert(services, {
+				extendState: extendFormState,
+				getPropsPanelFormState
+			});
 			/**
 			* 把内存中（已清空对应类别后的）历史状态重新写回 IndexedDB，
 			* 使本地持久化的那份与内存保持一致——即「连同本地保存的一并删除」。
@@ -12239,7 +12258,8 @@
 						default: (0, vue.withCtx)(() => [
 							((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tabPaneComponent)?.component || "el-tab-pane"), (0, vue.normalizeProps)((0, vue.guardReactiveProps)((0, vue.unref)(tabPaneComponent)?.props({
 								name: "page",
-								label: `${pageName.value} (${(0, vue.unref)(pageGroups).length})`
+								label: `${pageName.value} (${(0, vue.unref)(pageGroups).length})`,
+								lazy: true
 							}) || {})), {
 								default: (0, vue.withCtx)(() => [(0, vue.createVNode)(PageTab_default, {
 									list: (0, vue.unref)(pageGroupsDisplay),
@@ -12264,7 +12284,8 @@
 							}, 16)),
 							!disabledDataSource.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tabPaneComponent)?.component || "el-tab-pane"), (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 0 }, (0, vue.unref)(tabPaneComponent)?.props({
 								name: "data-source",
-								label: `${dataSourceName.value} (${(0, vue.unref)(dataSourceGroups).length})`
+								label: `${dataSourceName.value} (${(0, vue.unref)(dataSourceGroups).length})`,
+								lazy: true
 							}) || {})), {
 								default: (0, vue.withCtx)(() => [(0, vue.createVNode)(BucketTab_default, {
 									config: dataSourceConfig.value,
@@ -12288,7 +12309,8 @@
 							}, 16)) : (0, vue.createCommentVNode)("v-if", true),
 							!disabledCodeBlock.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tabPaneComponent)?.component || "el-tab-pane"), (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 1 }, (0, vue.unref)(tabPaneComponent)?.props({
 								name: "code-block",
-								label: `${codeBlockName.value} (${(0, vue.unref)(codeBlockGroups).length})`
+								label: `${codeBlockName.value} (${(0, vue.unref)(codeBlockGroups).length})`,
+								lazy: true
 							}) || {})), {
 								default: (0, vue.withCtx)(() => [(0, vue.createVNode)(BucketTab_default, {
 									config: codeBlockConfig.value,
@@ -12313,7 +12335,8 @@
 							((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(extraTabs), (tab) => {
 								return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tabPaneComponent)?.component || "el-tab-pane"), (0, vue.mergeProps)({ key: tab.name }, { ref_for: true }, (0, vue.unref)(tabPaneComponent)?.props({
 									name: tab.name,
-									label: resolveTabLabel(tab)
+									label: resolveTabLabel(tab),
+									lazy: true
 								}) || {}), {
 									default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(tab.component), (0, vue.mergeProps)({ ref_for: true }, tab.props || {}, (0, vue.toHandlers)(tab.listeners || {})), null, 16))]),
 									_: 2
@@ -18993,6 +19016,7 @@
 				beforeDblclick: props.beforeDblclick
 			};
 			stageOverlay_default.set("stageOptions", stageOptions);
+			const propsPanelRef = (0, vue.ref)(null);
 			(0, vue.provide)("services", services);
 			(0, vue.provide)("codeOptions", props.codeOptions);
 			(0, vue.provide)("stageOptions", stageOptions);
@@ -19003,6 +19027,11 @@
 			*/
 			(0, vue.provide)("extendFormState", props.extendFormState);
 			/**
+			* 提供 PropsPanel 主属性表单的 formState getter，供历史差异弹窗复用，
+			* 让 CompareForm 与 PropsPanel 的 filterFunction 上下文保持一致。
+			*/
+			(0, vue.provide)("getPropsPanelFormState", () => propsPanelRef.value?.configForm?.formState);
+			/**
 			* 把历史记录面板的自定义扩展 tab 提供给深层的 HistoryListPanel（它挂在 NavMenu 中，
 			* 以 markRaw component 形式渲染，无法直接通过 props 透传）。业务方可借此在历史记录
 			* 面板内追加自定义模块的历史 tab。
@@ -19016,9 +19045,11 @@
 			*/
 			(0, vue.provide)(_tmagic_design.M_THEME_KEY, (0, vue.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) => {
@@ -20613,7 +20644,7 @@
 					onSelect: selectHandler
 				}), {
 					suffix: (0, vue.withCtx)(() => [(0, vue.createVNode)(Icon_default, { icon: (0, vue.unref)(_element_plus_icons_vue.Coin) }, null, 8, ["icon"])]),
-					default: (0, vue.withCtx)(({ item }) => [(0, vue.createElementVNode)("div", _hoisted_1$38, [(0, vue.createElementVNode)("div", null, (0, vue.toDisplayString)(item.text), 1), (0, vue.createElementVNode)("span", _hoisted_2$7, (0, vue.toDisplayString)(item.value), 1)])]),
+					default: (0, vue.withCtx)((slotProps) => [(0, vue.createElementVNode)("div", _hoisted_1$38, [(0, vue.createElementVNode)("div", null, (0, vue.toDisplayString)(slotProps?.item?.text || ""), 1), (0, vue.createElementVNode)("span", _hoisted_2$7, (0, vue.toDisplayString)(slotProps?.item?.value || ""), 1)])]),
 					_: 1
 				}, 16, ["modelValue"])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 					key: 2,
@@ -24482,6 +24513,7 @@
 	exports.classifyDragSources = classifyDragSources;
 	exports.codeBlockService = codeBlock_default;
 	exports.collectRelatedNodes = collectRelatedNodes;
+	exports.componentListService = componentList_default;
 	exports.confirmHistoryAction = confirmHistoryAction;
 	exports.createStackStep = createStackStep;
 	exports.dataSourceService = dataSource_default;
@@ -24545,6 +24577,7 @@
 	exports.info = info;
 	exports.isIncludeDataSource = isIncludeDataSource;
 	exports.isIndexedDBSupported = isIndexedDBSupported;
+	exports.keybindingService = keybinding_default;
 	exports.loadMonaco = monaco_editor_default;
 	exports.log = log;
 	exports.markStackSaved = markStackSaved;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-manmanyu.10",
+  "version": "1.8.0-manmanyu.11",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.0",
     "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.8.0-manmanyu.10",
-    "@tmagic/stage": "1.8.0-manmanyu.10",
-    "@tmagic/table": "1.8.0-manmanyu.10",
-    "@tmagic/utils": "1.8.0-manmanyu.10",
-    "@tmagic/form": "1.8.0-manmanyu.10"
+    "@tmagic/design": "1.8.0-manmanyu.11",
+    "@tmagic/form": "1.8.0-manmanyu.11",
+    "@tmagic/stage": "1.8.0-manmanyu.11",
+    "@tmagic/utils": "1.8.0-manmanyu.11",
+    "@tmagic/table": "1.8.0-manmanyu.11"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -76,7 +76,7 @@
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
     "vue": "^3.5.38",
-    "@tmagic/core": "1.8.0-manmanyu.10"
+    "@tmagic/core": "1.8.0-manmanyu.11"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Editor.vue

@@ -136,7 +136,7 @@
 <script lang="ts" setup>
 import { EventEmitter } from 'events';
 
-import { computed, provide } from 'vue';
+import { computed, provide, ref } from 'vue';
 
 import type { MApp } from '@tmagic/core';
 import { M_THEME_KEY } from '@tmagic/design';
@@ -229,6 +229,8 @@ const stageOptions: StageOptions = {
 
 stageOverlayService.set('stageOptions', stageOptions);
 
+const propsPanelRef = ref<InstanceType<typeof FormPanel> | null>(null);
+
 provide('services', services);
 
 provide('codeOptions', props.codeOptions);
@@ -239,6 +241,11 @@ provide('stageOptions', stageOptions);
  * 与 PropsPanel 通过 `:extend-state` 显式传入的方式保持等价。
  */
 provide('extendFormState', props.extendFormState);
+/**
+ * 提供 PropsPanel 主属性表单的 formState getter，供历史差异弹窗复用，
+ * 让 CompareForm 与 PropsPanel 的 filterFunction 上下文保持一致。
+ */
+provide('getPropsPanelFormState', () => propsPanelRef.value?.configForm?.formState);
 
 /**
  * 把历史记录面板的自定义扩展 tab 提供给深层的 HistoryListPanel（它挂在 NavMenu 中，
@@ -260,9 +267,11 @@ provide(
 );
 
 const propsPanelMountedHandler = (e: InstanceType<typeof FormPanel>) => {
+  propsPanelRef.value = e;
   emit('props-panel-mounted', e);
 };
 const propsPanelUnmountedHandler = () => {
+  propsPanelRef.value = null;
   emit('props-panel-unmounted');
 };
 

package/src/components/CompareForm.vue

@@ -10,8 +10,9 @@
       :is-compare="true"
       :disabled="true"
       :label-width="labelWidth"
-      :extend-state="extendState"
+      :extend-state="mergedExtendState"
       :show-diff="showDiff"
+      :self-diff-field-types="selfDiffFieldTypes"
     ></MForm>
   </div>
 </template>
@@ -61,6 +62,13 @@ const props = withDefaults(
      * 因此在差异对比场景下也需要透传，避免出现 `formState.xxx is undefined` 的运行时错误。
      */
     extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+    /**
+     * 外部透传的基础 formState（通常来自 PropsPanel 主属性表单）。
+     * CompareForm 会提取其中的扩展字段覆盖到自己的 formState，保证 filterFunction 上下文一致。
+     */
+    baseFormState?: FormState;
+    /** 需要走 self diff 的字段类型（例如 mod-cond）。 */
+    selfDiffFieldTypes?: string[];
     /**
      * 自定义 FormConfig 加载逻辑。传入后将接管内置的按 `category`(node/data-source/code-block)
      * 取配置逻辑，调用方可根据业务自行返回（或异步返回）表单配置。可通过
@@ -74,6 +82,7 @@ const props = withDefaults(
     category: 'node',
     labelWidth: '120px',
     services: () => useServices(),
+    extendState: (state: FormState) => state,
   },
 );
 
@@ -174,6 +183,10 @@ const removeStyleDisplayConfig = (formConfig: FormConfig): FormConfig =>
     };
   });
 
+const mergedExtendState = (state: FormState) => {
+  return props.extendState(props.baseFormState || state);
+};
+
 /**
  * 内置的默认 FormConfig 加载逻辑：按 `category` 从对应 service / 工具取配置。
  * 作为 ctx.defaultLoadConfig 透传给自定义 `loadConfig`，方便复用与二次加工。