@tmagic/form 1.8.0-beta.0 → 1.8.0-beta.2

package/dist/tmagic-form.umd.cjs

@@ -38,6 +38,9 @@
 	//#endregion
 	dayjs = __toESM(dayjs, 1);
 	dayjs_plugin_utc = __toESM(dayjs_plugin_utc, 1);
+	//#region packages/form/src/schema.ts
+	var FORM_DIFF_CONFIG_KEY = Symbol("mFormDiffConfig");
+	//#endregion
 	//#region node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/_freeGlobal.js
 	/** Detect free variable `global` from Node.js. */
 	var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
@@ -2889,7 +2892,8 @@
 	var _hoisted_5$3 = ["innerHTML"];
 	var _hoisted_6$1 = ["innerHTML"];
 	var _hoisted_7$1 = ["innerHTML"];
-	var _hoisted_8$1 = {
+	var _hoisted_8$1 = ["innerHTML"];
+	var _hoisted_9 = {
 		key: 5,
 		style: { "text-align": "center" }
 	};
@@ -2921,11 +2925,20 @@
 			const props = __props;
 			const emit = __emit;
 			const mForm = (0, vue.inject)("mForm");
+			const diffConfig = (0, vue.inject)(FORM_DIFF_CONFIG_KEY, {});
 			const expand = (0, vue.ref)(false);
 			const name = (0, vue.computed)(() => props.config.name || "");
 			const showDiff = (0, vue.computed)(() => {
 				if (!props.isCompare) return false;
-				return !isEqual(name.value ? props.model[name.value] : props.model, name.value ? props.lastValues[name.value] : props.lastValues);
+				const curValue = name.value ? props.model[name.value] : props.model;
+				const lastValue = name.value ? props.lastValues[name.value] : props.lastValues;
+				const customShowDiff = diffConfig.showDiff;
+				if (typeof customShowDiff === "function") return Boolean(customShowDiff({
+					curValue,
+					lastValue,
+					config: props.config
+				}));
+				return !isEqual(curValue, lastValue);
 			});
 			const items = (0, vue.computed)(() => props.config.items);
 			const itemProp = (0, vue.computed)(() => {
@@ -2946,6 +2959,35 @@
 				if (type.value === "component" && props.config.component) return props.config.component;
 				return getField(type.value || "container") || `m-${items.value ? "form" : "fields"}-${type.value}`;
 			});
+			/**
+			* 自接管对比的字段类型白名单。
+			*
+			* 这类字段在 `isCompare === true` 且存在差异时，不再由 Container 渲染前后两份独立组件来对比，
+			* 而是只渲染一次组件，将 `model` / `lastValues` / `isCompare` 一并传给字段组件，
+			* 由字段组件内部自行展示前后差异（典型场景：vs-code 字段使用 monaco 自带的 diff 编辑器）。
+			*
+			* 这样做的好处：
+			* 1. 避免重型字段（如 monaco 编辑器）在对比模式下被实例化两次，节省资源；
+			* 2. 提供更专业的对比视觉效果（如 monaco diff 的行级高亮、左右滚动同步等）。
+			*
+			* 注意：像 `event-select` / `code-select-col` 这类内部由列表 / 嵌套子表单组成的复合字段，若按默认逻辑
+			* 渲染前后两份独立组件，会出现两套下拉框 + 两份参数表单（或两套「添加事件」按钮、两份完整面板），
+			* 体验很差。这类字段在内部把 `is-compare`/`lastValues` 透传给子级容器，由子级逐项展示差异，
+			* 因此同样归类为自接管对比字段。
+			*/
+			const DEFAULT_SELF_DIFF_FIELD_TYPES = [
+				"vs-code",
+				"event-select",
+				"code-select-col",
+				"code-select"
+			];
+			const effectiveSelfDiffFieldTypes = (0, vue.computed)(() => {
+				const custom = diffConfig.selfDiffFieldTypes;
+				if (typeof custom === "function") return new Set(custom([...DEFAULT_SELF_DIFF_FIELD_TYPES]));
+				if (Array.isArray(custom)) return new Set([...DEFAULT_SELF_DIFF_FIELD_TYPES, ...custom]);
+				return new Set(DEFAULT_SELF_DIFF_FIELD_TYPES);
+			});
+			const isSelfDiffField = (0, vue.computed)(() => effectiveSelfDiffFieldTypes.value.has(type.value));
 			const disabled = (0, vue.computed)(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
 			const text = (0, vue.computed)(() => filterFunction(mForm, props.config.text, props));
 			const tooltip = (0, vue.computed)(() => {
@@ -3114,7 +3156,13 @@
 					"label-width",
 					"style"
 				])) : type.value && display$3.value && !showDiff.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicFormItem), (0, vue.mergeProps)(formItemProps.value, { class: { "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value } }), {
-					label: (0, vue.withCtx)(() => [(0, vue.createVNode)(FormLabel_default, {
+					label: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "label", {
+						config: __props.config,
+						type: type.value,
+						text: text.value,
+						prop: itemProp.value,
+						disabled: disabled.value
+					}, () => [(0, vue.createVNode)(FormLabel_default, {
 						tip: __props.config.tip,
 						type: type.value,
 						"use-label": __props.config.useLabel,
@@ -3126,7 +3174,7 @@
 						"use-label",
 						"label-title",
 						"text"
-					])]),
+					])])]),
 					default: (0, vue.withCtx)(() => [tooltip.value.text ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
 						key: 0,
 						placement: tooltip.value.placement
@@ -3155,7 +3203,7 @@
 						"last-values",
 						"is-compare"
 					]))]),
-					_: 1
+					_: 3
 				}, 16, ["class"]), __props.config.tip && type.value === "checkbox" && !__props.config.useLabel ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
 					key: 0,
 					placement: "top"
@@ -3171,12 +3219,18 @@
 					_: 1
 				})) : (0, vue.createCommentVNode)("v-if", true)], 64)) : type.value && display$3.value && showDiff.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 3 }, [
 					(0, vue.createCommentVNode)(" 对比 "),
-					(0, vue.createCommentVNode)(" 上次内容 "),
-					(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicFormItem), (0, vue.mergeProps)(formItemProps.value, { class: {
+					(0, vue.createCommentVNode)(" 自接管对比的字段类型（如 vs-code）：只渲染一次组件，由字段内部用 diff 编辑器/视图自行展示前后差异 "),
+					isSelfDiffField.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicFormItem), (0, vue.mergeProps)({ key: 0 }, formItemProps.value, { class: {
 						"tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value,
-						"show-diff": true
+						"self-diff": true
 					} }), {
-						label: (0, vue.withCtx)(() => [(0, vue.createVNode)(FormLabel_default, {
+						label: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "label", {
+							config: __props.config,
+							type: type.value,
+							text: text.value,
+							prop: itemProp.value,
+							disabled: disabled.value
+						}, () => [(0, vue.createVNode)(FormLabel_default, {
 							tip: __props.config.tip,
 							type: type.value,
 							"use-label": __props.config.useLabel,
@@ -3188,88 +3242,148 @@
 							"use-label",
 							"label-title",
 							"text"
-						])]),
+						])])]),
 						default: (0, vue.withCtx)(() => [tooltip.value.text ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
 							key: 0,
 							placement: tooltip.value.placement
 						}, {
 							content: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { innerHTML: tooltip.value.text }, null, 8, _hoisted_4$4)]),
 							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(tagName.value), (0, vue.mergeProps)(fieldsProps.value, {
-								model: __props.lastValues,
+								model: __props.model,
+								"last-values": __props.lastValues,
+								"is-compare": __props.isCompare,
 								onChange: onChangeHandler
-							}), null, 16, ["model"]))]),
+							}), null, 16, [
+								"model",
+								"last-values",
+								"is-compare"
+							]))]),
 							_: 1
 						}, 8, ["placement"])) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(tagName.value), (0, vue.mergeProps)({ key: 1 }, fieldsProps.value, {
-							model: __props.lastValues,
+							model: __props.model,
+							"last-values": __props.lastValues,
+							"is-compare": __props.isCompare,
 							onChange: onChangeHandler
-						}), null, 16, ["model"]))]),
-						_: 1
-					}, 16, ["class"]),
-					__props.config.tip && type.value === "checkbox" && !__props.config.useLabel ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
-						key: 0,
-						placement: "top"
-					}, {
-						content: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { innerHTML: __props.config.tip }, null, 8, _hoisted_5$3)]),
-						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicIcon), { style: {
-							"line-height": "40px",
-							"margin-left": "5px"
-						} }, {
-							default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.WarningFilled))]),
-							_: 1
-						})]),
-						_: 1
-					})) : (0, vue.createCommentVNode)("v-if", true),
-					(0, vue.createCommentVNode)(" 当前内容 "),
-					(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicFormItem), (0, vue.mergeProps)(formItemProps.value, {
-						style: __props.config.tip ? "flex: 1" : "",
-						class: {
+						}), null, 16, [
+							"model",
+							"last-values",
+							"is-compare"
+						]))]),
+						_: 3
+					}, 16, ["class"])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [
+						(0, vue.createCommentVNode)(" 普通字段：渲染前后两份独立的组件用于对比 "),
+						(0, vue.createCommentVNode)(" 上次内容 "),
+						(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicFormItem), (0, vue.mergeProps)(formItemProps.value, { class: {
 							"tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value,
-							"show-diff": true
-						}
-					}), {
-						label: (0, vue.withCtx)(() => [(0, vue.createVNode)(FormLabel_default, {
-							tip: __props.config.tip,
-							type: type.value,
-							"use-label": __props.config.useLabel,
-							"label-title": __props.config.labelTitle,
-							text: text.value
-						}, null, 8, [
-							"tip",
-							"type",
-							"use-label",
-							"label-title",
-							"text"
-						])]),
-						default: (0, vue.withCtx)(() => [tooltip.value.text ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
+							"show-before-diff": true
+						} }), {
+							label: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "label", {
+								config: __props.config,
+								type: type.value,
+								text: text.value,
+								prop: itemProp.value,
+								disabled: disabled.value
+							}, () => [(0, vue.createVNode)(FormLabel_default, {
+								tip: __props.config.tip,
+								type: type.value,
+								"use-label": __props.config.useLabel,
+								"label-title": __props.config.labelTitle,
+								text: text.value
+							}, null, 8, [
+								"tip",
+								"type",
+								"use-label",
+								"label-title",
+								"text"
+							])])]),
+							default: (0, vue.withCtx)(() => [tooltip.value.text ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
+								key: 0,
+								placement: tooltip.value.placement
+							}, {
+								content: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { innerHTML: tooltip.value.text }, null, 8, _hoisted_5$3)]),
+								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(tagName.value), (0, vue.mergeProps)(fieldsProps.value, {
+									model: __props.lastValues,
+									onChange: onChangeHandler
+								}), null, 16, ["model"]))]),
+								_: 1
+							}, 8, ["placement"])) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(tagName.value), (0, vue.mergeProps)({ key: 1 }, fieldsProps.value, {
+								model: __props.lastValues,
+								onChange: onChangeHandler
+							}), null, 16, ["model"]))]),
+							_: 3
+						}, 16, ["class"]),
+						__props.config.tip && type.value === "checkbox" && !__props.config.useLabel ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
 							key: 0,
-							placement: tooltip.value.placement
+							placement: "top"
 						}, {
-							content: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { innerHTML: tooltip.value.text }, null, 8, _hoisted_6$1)]),
-							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(tagName.value), (0, vue.mergeProps)(fieldsProps.value, {
+							content: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { innerHTML: __props.config.tip }, null, 8, _hoisted_6$1)]),
+							default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicIcon), { style: {
+								"line-height": "40px",
+								"margin-left": "5px"
+							} }, {
+								default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.WarningFilled))]),
+								_: 1
+							})]),
+							_: 1
+						})) : (0, vue.createCommentVNode)("v-if", true),
+						(0, vue.createCommentVNode)(" 当前内容 "),
+						(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicFormItem), (0, vue.mergeProps)(formItemProps.value, {
+							style: __props.config.tip ? "flex: 1" : "",
+							class: {
+								"tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value,
+								"show-after-diff": true
+							}
+						}), {
+							label: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "label", {
+								config: __props.config,
+								type: type.value,
+								text: text.value,
+								prop: itemProp.value,
+								disabled: disabled.value
+							}, () => [(0, vue.createVNode)(FormLabel_default, {
+								tip: __props.config.tip,
+								type: type.value,
+								"use-label": __props.config.useLabel,
+								"label-title": __props.config.labelTitle,
+								text: text.value
+							}, null, 8, [
+								"tip",
+								"type",
+								"use-label",
+								"label-title",
+								"text"
+							])])]),
+							default: (0, vue.withCtx)(() => [tooltip.value.text ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
+								key: 0,
+								placement: tooltip.value.placement
+							}, {
+								content: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { innerHTML: tooltip.value.text }, null, 8, _hoisted_7$1)]),
+								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(tagName.value), (0, vue.mergeProps)(fieldsProps.value, {
+									model: __props.model,
+									onChange: onChangeHandler
+								}), null, 16, ["model"]))]),
+								_: 1
+							}, 8, ["placement"])) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(tagName.value), (0, vue.mergeProps)({ key: 1 }, fieldsProps.value, {
 								model: __props.model,
 								onChange: onChangeHandler
 							}), null, 16, ["model"]))]),
+							_: 3
+						}, 16, ["style", "class"]),
+						__props.config.tip && type.value === "checkbox" && !__props.config.useLabel ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
+							key: 1,
+							placement: "top"
+						}, {
+							content: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { innerHTML: __props.config.tip }, null, 8, _hoisted_8$1)]),
+							default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicIcon), { style: {
+								"line-height": "40px",
+								"margin-left": "5px"
+							} }, {
+								default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.WarningFilled))]),
+								_: 1
+							})]),
 							_: 1
-						}, 8, ["placement"])) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(tagName.value), (0, vue.mergeProps)({ key: 1 }, fieldsProps.value, {
-							model: __props.model,
-							onChange: onChangeHandler
-						}), null, 16, ["model"]))]),
-						_: 1
-					}, 16, ["style", "class"]),
-					__props.config.tip && type.value === "checkbox" && !__props.config.useLabel ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
-						key: 1,
-						placement: "top"
-					}, {
-						content: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { innerHTML: __props.config.tip }, null, 8, _hoisted_7$1)]),
-						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicIcon), { style: {
-							"line-height": "40px",
-							"margin-left": "5px"
-						} }, {
-							default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.WarningFilled))]),
-							_: 1
-						})]),
-						_: 1
-					})) : (0, vue.createCommentVNode)("v-if", true)
+						})) : (0, vue.createCommentVNode)("v-if", true)
+					], 64))
 				], 64)) : items.value && display$3.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 4 }, [(isValidName() ? __props.model[name.value] : __props.model) ? ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, (0, vue.renderList)(items.value, (item) => {
 					return (0, vue.openBlock)(), (0, vue.createBlock)(_component_Container, {
 						key: key(item),
@@ -3285,7 +3399,11 @@
 						prop: itemProp.value,
 						onChange: onChangeHandler,
 						onAddDiffCount
-					}, null, 8, [
+					}, (0, vue.createSlots)({ _: 2 }, [_ctx.$slots.label ? {
+						name: "label",
+						fn: (0, vue.withCtx)((labelProps) => [(0, vue.renderSlot)(_ctx.$slots, "label", (0, vue.mergeProps)({ ref_for: true }, labelProps))]),
+						key: "0"
+					} : void 0]), 1032, [
 						"model",
 						"last-values",
 						"is-compare",
@@ -3297,7 +3415,7 @@
 						"label-width",
 						"prop"
 					]);
-				}), 128)) : (0, vue.createCommentVNode)("v-if", true)], 64)) : (0, vue.createCommentVNode)("v-if", true), __props.config.expand && type.value !== "fieldset" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_8$1, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
+				}), 128)) : (0, vue.createCommentVNode)("v-if", true)], 64)) : (0, vue.createCommentVNode)("v-if", true), __props.config.expand && type.value !== "fieldset" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_9, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
 					type: "primary",
 					size: "small",
 					disabled: false,
@@ -3340,7 +3458,9 @@
 			keyProp: { default: "__key" },
 			popperClass: {},
 			preventSubmitDefault: { type: Boolean },
-			extendState: {}
+			extendState: {},
+			showDiff: {},
+			selfDiffFieldTypes: {}
 		},
 		emits: [
 			"change",
@@ -3358,14 +3478,45 @@
 			const lastValuesProcessed = (0, vue.ref)({});
 			const fields = /* @__PURE__ */ new Map();
 			const requestFuc = getConfig("request");
+			/**
+			* formState 实现说明：
+			*
+			* 1. 与 props 直接对应的字段（config / initValues / lastValues / isCompare / parentValues /
+			*    keyProp / popperClass）使用「访问器（getter）」定义，每次读取都会回到 `props.xxx`
+			*    取最新值，不存在「props 变了但 formState 还没同步过来」的中间态。
+			*
+			* 2. `values` / `lastValuesProcessed` 是 ref，Vue 的 `reactive` 会自动解包，因此每次
+			*    访问 `formState.values` / `formState.lastValuesProcessed` 也都是当前 ref 值。
+			*
+			* 3. `extendState` 注入的字段在下方的 `watchEffect` 中合并到 `formState`：
+			*    - data 描述符（普通字段）通过 `formState[key] = value` 写入，走 reactive proxy 的
+			*      set，触发依赖通知；`extendState` 同步段读到的响应式数据变化时会自动重跑，
+			*      把最新值刷进 formState。
+			*    - accessor 描述符（`{ get stage() { return ... } }`）按原样写入，调用方可以控制
+			*      读时求值，每次读取都会重新执行 getter。
+			*/
 			const formState = (0, vue.reactive)({
-				keyProp: props.keyProp,
-				popperClass: props.popperClass,
-				config: props.config,
-				initValues: props.initValues,
-				isCompare: props.isCompare,
-				lastValues: props.lastValues,
-				parentValues: props.parentValues,
+				get keyProp() {
+					return props.keyProp;
+				},
+				get popperClass() {
+					return props.popperClass;
+				},
+				get config() {
+					return props.config;
+				},
+				get initValues() {
+					return props.initValues;
+				},
+				get isCompare() {
+					return props.isCompare;
+				},
+				get lastValues() {
+					return props.lastValues;
+				},
+				get parentValues() {
+					return props.parentValues;
+				},
 				values,
 				lastValuesProcessed,
 				$emit: emit,
@@ -3382,22 +3533,57 @@
 					});
 				}
 			});
-			(0, vue.watchEffect)(async () => {
-				formState.initValues = props.initValues;
-				formState.lastValues = props.lastValues;
-				formState.isCompare = props.isCompare;
-				formState.config = props.config;
-				formState.keyProp = props.keyProp;
-				formState.popperClass = props.popperClass;
-				formState.parentValues = props.parentValues;
-				if (typeof props.extendState === "function") {
-					const state = await props.extendState(formState) || {};
-					Object.entries(state).forEach(([key, value]) => {
-						formState[key] = value;
-					});
+			/**
+			* `extendState` 的同步段（直到第一个 `await` 之前）所访问的任何响应式数据，
+			* 都会被 `watchEffect` 自动跟踪。这样可以兼容历史用法 ——
+			*
+			*   extendState: (formState) => ({
+			*     username: store.username,   // 同步读 store，会被跟踪
+			*     env: store.env,
+			*   })
+			*
+			* 当 `store.username` 变化时，整个 effect 重跑，新值会被刷进 `formState`。
+			*
+			* prop 派生字段（initValues / config / ...）已经在上方用 getter 定义，
+			* 这里不再重复同步；因此 `props.initValues` 这类高频变化也不会再触发
+			* `extendState` 重跑（旧版的性能问题修复点）。
+			*
+			* 实现细节：
+			* - data 描述符：通过 `formState[key] = value` 走 reactive proxy 的 set，
+			*   触发依赖通知；与旧版「逐项赋值」语义完全等价。
+			* - accessor 描述符（`{ get stage() {...} }`）按原样写入 formState，调用方
+			*   可以自行控制读时求值；强制 `configurable: true` 以便下一次重跑可再 define。
+			*/
+			(0, vue.watchEffect)(async (onCleanup) => {
+				const { extendState } = props;
+				if (typeof extendState !== "function") return;
+				let stale = false;
+				onCleanup(() => {
+					stale = true;
+				});
+				let state = {};
+				try {
+					state = await extendState(formState) || {};
+				} catch (e) {
+					console.error("[MForm] extendState failed:", e);
+					return;
+				}
+				if (stale) return;
+				for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(state))) if ("value" in descriptor) formState[key] = state[key];
+				else {
+					descriptor.configurable = true;
+					Object.defineProperty(formState, key, descriptor);
 				}
 			});
 			(0, vue.provide)("mForm", formState);
+			(0, vue.provide)(FORM_DIFF_CONFIG_KEY, {
+				get showDiff() {
+					return props.showDiff;
+				},
+				get selfDiffFieldTypes() {
+					return props.selfDiffFieldTypes;
+				}
+			});
 			const changeRecords = (0, vue.shallowRef)([]);
 			(0, vue.watch)([() => props.config, () => props.initValues], ([config], [preConfig]) => {
 				changeRecords.value = [];
@@ -3514,7 +3700,11 @@
 							"step-active": __props.stepActive,
 							size: __props.size,
 							onChange: changeHandler
-						}, null, 8, [
+						}, (0, vue.createSlots)({ _: 2 }, [_ctx.$slots.label ? {
+							name: "label",
+							fn: (0, vue.withCtx)((labelProps) => [(0, vue.renderSlot)(_ctx.$slots, "label", (0, vue.mergeProps)({ ref_for: true }, labelProps))]),
+							key: "0"
+						} : void 0]), 1032, [
 							"disabled",
 							"config",
 							"model",
@@ -3525,7 +3715,7 @@
 							"size"
 						]);
 					}), 128)) : (0, vue.createCommentVNode)("v-if", true)]),
-					_: 1
+					_: 3
 				}, 8, [
 					"model",
 					"label-width",
@@ -4665,6 +4855,9 @@
 					prop: props.prop
 				});
 			});
+			(0, vue.watch)([() => props.model, () => props.lastValues], () => {
+				diffCount.value = {};
+			});
 			const tabItems = (tab) => props.config.dynamic ? props.config.items : tab.items;
 			const tabClickHandler = (tab) => {
 				if (typeof tab === "object") tabClick(mForm, tab, props);
@@ -4739,7 +4932,7 @@
 					default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(tabs.value, (tab, tabIndex) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tabPaneComponent)?.component || "el-tab-pane"), (0, vue.mergeProps)({ key: tab[(0, vue.unref)(mForm)?.keyProp || "__key"] ?? tabIndex }, { ref_for: true }, (0, vue.unref)(tabPaneComponent)?.props({
 							name: filter(tab.status) || tabIndex.toString(),
-							lazy: tab.lazy || false
+							lazy: __props.isCompare ? false : tab.lazy || false
 						}) || {}), {
 							label: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", null, [(0, vue.createTextVNode)((0, vue.toDisplayString)(filter(tab.title)), 1), (0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicBadge), {
 								hidden: !diffCount.value[Number(tabIndex)],
@@ -4880,16 +5073,17 @@
 							}), (0, vue.createElementVNode)("span", { innerHTML: title.value }, null, 8, _hoisted_1$9)]),
 							_: 1
 						}, 8, ["disabled"]),
-						(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
+						!__props.isCompare ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicButton), {
+							key: 0,
 							type: "danger",
 							size: "small",
 							link: "",
 							icon: (0, vue.unref)(_element_plus_icons_vue.Delete),
 							disabled: __props.disabled,
 							onClick: removeHandler
-						}, null, 8, ["icon", "disabled"]), [[vue.vShow, showDelete.value]]),
-						copyable.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicButton), {
-							key: 0,
+						}, null, 8, ["icon", "disabled"])), [[vue.vShow, showDelete.value]]) : (0, vue.createCommentVNode)("v-if", true),
+						copyable.value && !__props.isCompare ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicButton), {
+							key: 1,
 							link: "",
 							size: "small",
 							type: "primary",
@@ -4900,7 +5094,7 @@
 							default: (0, vue.withCtx)(() => [..._cache[6] || (_cache[6] = [(0, vue.createTextVNode)("复制", -1)])]),
 							_: 1
 						}, 8, ["icon", "disabled"])) : (0, vue.createCommentVNode)("v-if", true),
-						movable.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
+						movable.value && !__props.isCompare ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
 							link: "",
 							size: "small",
 							disabled: __props.disabled,
@@ -4919,8 +5113,8 @@
 							default: (0, vue.withCtx)(() => [..._cache[8] || (_cache[8] = [(0, vue.createTextVNode)("下移", -1)])]),
 							_: 1
 						}, 8, ["disabled", "icon"]), [[vue.vShow, __props.index !== length.value - 1]])], 64)) : (0, vue.createCommentVNode)("v-if", true),
-						__props.config.moveSpecifyLocation ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicPopover), {
-							key: 2,
+						__props.config.moveSpecifyLocation && !__props.isCompare ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicPopover), {
+							key: 3,
 							trigger: "click",
 							placement: "top",
 							width: "200",
@@ -4966,7 +5160,7 @@
 							_: 1
 						}, 8, ["visible"])) : (0, vue.createCommentVNode)("v-if", true),
 						itemExtra.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
-							key: 3,
+							key: 4,
 							innerHTML: itemExtra.value,
 							class: "m-form-tip"
 						}, null, 8, _hoisted_3$3)) : (0, vue.createCommentVNode)("v-if", true)
@@ -5006,7 +5200,10 @@
 		key: 1,
 		class: "el-table__empty-block"
 	};
-	var _hoisted_4$1 = { class: "m-fields-group-list-footer" };
+	var _hoisted_4$1 = {
+		key: 3,
+		class: "m-fields-group-list-footer"
+	};
 	var _hoisted_5 = { style: {
 		"display": "flex",
 		"justify-content": "flex-end",
@@ -5091,7 +5288,7 @@
 							"group-model"
 						]);
 					}), 128)),
-					(0, vue.createElementVNode)("div", _hoisted_4$1, [(0, vue.renderSlot)(_ctx.$slots, "toggle-button"), (0, vue.createElementVNode)("div", _hoisted_5, [(0, vue.renderSlot)(_ctx.$slots, "add-button")])])
+					!__props.isCompare ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$1, [(0, vue.renderSlot)(_ctx.$slots, "toggle-button"), (0, vue.createElementVNode)("div", _hoisted_5, [(0, vue.renderSlot)(_ctx.$slots, "add-button")])])) : (0, vue.createCommentVNode)("v-if", true)
 				]);
 			};
 		}
@@ -5693,7 +5890,7 @@
 							default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(isFullscreen) ? "退出全屏" : "全屏编辑"), 1)]),
 							_: 1
 						}, 8, ["icon", "onClick"])) : (0, vue.createCommentVNode)("v-if", true),
-						(0, vue.unref)(importable) ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicUpload), {
+						(0, vue.unref)(importable) && !__props.isCompare ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicUpload), {
 							key: 2,
 							style: { "display": "inline-block" },
 							ref: "excelBtn",
@@ -5713,7 +5910,7 @@
 							}, 8, ["disabled"])]),
 							_: 1
 						}, 8, ["disabled", "on-change"])) : (0, vue.createCommentVNode)("v-if", true),
-						(0, vue.unref)(importable) ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicButton), {
+						(0, vue.unref)(importable) && !__props.isCompare ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicButton), {
 							key: 3,
 							size: "small",
 							type: "warning",
@@ -5724,7 +5921,7 @@
 							default: (0, vue.withCtx)(() => [..._cache[1] || (_cache[1] = [(0, vue.createTextVNode)("清空", -1)])]),
 							_: 1
 						}, 8, ["disabled", "onClick"])) : (0, vue.createCommentVNode)("v-if", true)
-					]), (0, vue.renderSlot)(_ctx.$slots, "add-button")]),
+					]), !__props.isCompare ? (0, vue.renderSlot)(_ctx.$slots, "add-button", { key: 0 }) : (0, vue.createCommentVNode)("v-if", true)]),
 					__props.config.pagination ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicPagination), {
 						layout: "total, sizes, prev, pager, next, jumper",
 						"hide-on-single-page": __props.model[modelName.value].length < (0, vue.unref)(pageSize),
@@ -7803,6 +8000,7 @@
 	} };
 	var createForm = (config) => config;
 	//#endregion
+	exports.FORM_DIFF_CONFIG_KEY = FORM_DIFF_CONFIG_KEY;
 	exports.MCascader = Cascader_default;
 	exports.MCheckbox = Checkbox_default;
 	exports.MCheckboxGroup = CheckboxGroup_default;