@tmagic/form 1.8.0-beta.1 → 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",
@@ -3456,6 +3576,14 @@
 				}
 			});
 			(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 = [];
@@ -3572,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",
@@ -3583,7 +3715,7 @@
 							"size"
 						]);
 					}), 128)) : (0, vue.createCommentVNode)("v-if", true)]),
-					_: 1
+					_: 3
 				}, 8, [
 					"model",
 					"label-width",
@@ -4723,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);
@@ -4797,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)],
@@ -4938,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",
@@ -4958,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,
@@ -4977,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",
@@ -5024,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)
@@ -5064,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",
@@ -5149,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)
 				]);
 			};
 		}
@@ -5751,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",
@@ -5771,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",
@@ -5782,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),
@@ -7861,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;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.1",
+  "version": "1.8.0-beta.2",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -52,9 +52,9 @@
   "peerDependencies": {
     "vue": "^3.5.34",
     "typescript": "^6.0.3",
-    "@tmagic/design": "1.8.0-beta.1",
-    "@tmagic/form-schema": "1.8.0-beta.1",
-    "@tmagic/utils": "1.8.0-beta.1"
+    "@tmagic/design": "1.8.0-beta.2",
+    "@tmagic/form-schema": "1.8.0-beta.2",
+    "@tmagic/utils": "1.8.0-beta.2"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Form.vue

@@ -22,7 +22,11 @@
         :step-active="stepActive"
         :size="size"
         @change="changeHandler"
-      ></Container>
+      >
+        <template v-if="$slots.label" #label="labelProps">
+          <slot name="label" v-bind="labelProps"></slot>
+        </template>
+      </Container>
     </template>
   </TMagicForm>
 </template>
@@ -37,12 +41,23 @@ import { setValueByKeyPath } from '@tmagic/utils';
 import Container from './containers/Container.vue';
 import { getConfig } from './utils/config';
 import { initValue } from './utils/form';
-import type { ChangeRecord, ContainerChangeEventData, FormConfig, FormState, FormValue, ValidateError } from './schema';
+import type {
+  ChangeRecord,
+  ContainerChangeEventData,
+  FormConfig,
+  FormSlots,
+  FormState,
+  FormValue,
+  ValidateError,
+} from './schema';
+import { FORM_DIFF_CONFIG_KEY } from './schema';
 
 defineOptions({
   name: 'MForm',
 });
 
+defineSlots<FormSlots>();
+
 const props = withDefaults(
   defineProps<{
     /** 表单配置 */
@@ -65,6 +80,33 @@ const props = withDefaults(
     popperClass?: string;
     preventSubmitDefault?: boolean;
     extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+    /**
+     * 自定义"是否展示对比内容"的判断函数（仅在 `isCompare === true` 时生效）。
+     *
+     * - 不传：使用默认逻辑 `!isEqual(curValue, lastValue)`；
+     * - 传函数：完全以函数返回值为准，返回 `true` 才展示前后两份对比内容。
+     *
+     * 通过 provide 下发给所有层级的 Container（含嵌套在容器组件内部的 Container），
+     * 调用方只需在 MForm 这一层传一次即可对整棵表单生效。
+     *
+     * 典型场景：某些字段语义上相等但结构不同（例如 `code-select` 字段中 `''` 与
+     * `{ hookType: 'code', hookData: [] }` 应视为相等），调用方在此处显式声明，
+     * 避免被 lodash `isEqual` 误判为差异。
+     */
+    showDiff?: (_data: { curValue: any; lastValue: any; config: any }) => boolean;
+    /**
+     * 自定义「自接管对比」的字段类型（仅在对比模式下生效）。
+     *
+     * 自接管对比的字段不会渲染前后两份独立组件，而是只渲染一次并由字段组件内部展示前后差异
+     * （如 vs-code 使用 monaco diff 编辑器；event-select / code-select-col 等复合字段逐项展示差异）。
+     *
+     * 支持两种形式：
+     * - 传数组：在内置类型基础上「追加」这些类型；
+     * - 传函数：入参为内置类型数组，返回值作为「最终」完整列表（可完全替换内置项）。
+     *
+     * 通过 provide 下发，对整棵表单的所有层级 Container 生效，只需在 MForm 这一层传一次。
+     */
+    selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]);
   }>(),
   {
     config: () => [],
@@ -201,6 +243,17 @@ watchEffect(async (onCleanup) => {
 
 provide('mForm', formState);
 
+// 对比相关配置单独通过 provide 下发，所有层级的 Container 通过 inject 获取，无需逐层透传 prop。
+// 用 getter 对象保证读取时回到最新的 props 值，维持响应式。
+provide(FORM_DIFF_CONFIG_KEY, {
+  get showDiff() {
+    return props.showDiff;
+  },
+  get selfDiffFieldTypes() {
+    return props.selfDiffFieldTypes;
+  },
+});
+
 const changeRecords = shallowRef<ChangeRecord[]>([]);
 
 watch(