@tmagic/form 1.8.0-beta.1 → 1.8.0-beta.3

package/dist/es/submitForm.js

@@ -21,10 +21,17 @@ import { createApp, defineComponent, h, nextTick, ref, watch } from "vue";
 * } catch (e) {
 *   console.error(e);
 * }
+*
+* // 需要同时获取变更记录时：
+* const { values, changeRecords } = await submitForm({
+*   config: [...],
+*   initValues: { name: 'foo' },
+*   returnChangeRecords: true,
+* });
 * ```
 */
 var submitForm = (options) => {
-	const { native, appContext, timeout = 1e4, ...formProps } = options;
+	const { native, appContext, timeout = 1e4, returnChangeRecords, ...formProps } = options;
 	return new Promise((resolve, reject) => {
 		const container = document.createElement("div");
 		container.style.display = "none";
@@ -40,7 +47,12 @@ var submitForm = (options) => {
 					stop();
 					try {
 						await nextTick();
-						resolve(await formRef.value.submitForm(native));
+						const changeRecords = [...formRef.value.changeRecords ?? []];
+						const result = await formRef.value.submitForm(native);
+						resolve(returnChangeRecords ? {
+							values: result,
+							changeRecords
+						} : result);
 					} catch (err) {
 						reject(err);
 					} finally {

package/dist/style.css

@@ -10,7 +10,10 @@
 .m-form-container.has-tip .tmagic-design-form-item {
   flex: 1;
 }
-.m-form-container .tmagic-design-form-item.show-diff {
+.m-form-container .tmagic-design-form-item.show-after-diff {
+  background: rgb(225, 243, 216);
+}
+.m-form-container .tmagic-design-form-item.show-before-diff {
   background: #f7dadd;
 }
 

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,21 @@
 			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);
+				if (!name.value) return false;
+				const curValue = props.model[name.value];
+				const lastValue = props.lastValues[name.value];
+				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 +2960,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 +3157,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 +3175,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 +3204,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 +3220,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 +3243,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 +3400,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 +3416,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 +3459,9 @@
 			keyProp: { default: "__key" },
 			popperClass: {},
 			preventSubmitDefault: { type: Boolean },
-			extendState: {}
+			extendState: {},
+			showDiff: {},
+			selfDiffFieldTypes: {}
 		},
 		emits: [
 			"change",
@@ -3456,6 +3577,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 +3701,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 +3716,7 @@
 							"size"
 						]);
 					}), 128)) : (0, vue.createCommentVNode)("v-if", true)]),
-					_: 1
+					_: 3
 				}, 8, [
 					"model",
 					"label-width",
@@ -3616,10 +3749,17 @@
 	* } catch (e) {
 	*   console.error(e);
 	* }
+	*
+	* // 需要同时获取变更记录时：
+	* const { values, changeRecords } = await submitForm({
+	*   config: [...],
+	*   initValues: { name: 'foo' },
+	*   returnChangeRecords: true,
+	* });
 	* ```
 	*/
 	var submitForm = (options) => {
-		const { native, appContext, timeout = 1e4, ...formProps } = options;
+		const { native, appContext, timeout = 1e4, returnChangeRecords, ...formProps } = options;
 		return new Promise((resolve, reject) => {
 			const container = document.createElement("div");
 			container.style.display = "none";
@@ -3635,7 +3775,12 @@
 						stop();
 						try {
 							await (0, vue.nextTick)();
-							resolve(await formRef.value.submitForm(native));
+							const changeRecords = [...formRef.value.changeRecords ?? []];
+							const result = await formRef.value.submitForm(native);
+							resolve(returnChangeRecords ? {
+								values: result,
+								changeRecords
+							} : result);
 						} catch (err) {
 							reject(err);
 						} finally {
@@ -4234,6 +4379,7 @@
 			const emit = __emit;
 			const mForm = (0, vue.inject)("mForm");
 			const name = (0, vue.computed)(() => props.config.name || "");
+			const legend = (0, vue.computed)(() => filterFunction(mForm, props.config.legend, props));
 			const checkboxName = (0, vue.computed)(() => {
 				if (typeof props.config.checkbox === "object" && typeof props.config.checkbox.name === "string") return props.config.checkbox.name;
 				return "value";
@@ -4273,7 +4419,7 @@
 						"false-value": checkboxFalseValue.value,
 						"onUpdate:modelValue": valueChangeHandler
 					}, {
-						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { innerHTML: __props.config.legend }, null, 8, _hoisted_1$11), __props.config.extra ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { innerHTML: legend.value }, null, 8, _hoisted_1$11), __props.config.extra ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 							key: 0,
 							innerHTML: __props.config.extra,
 							class: "m-form-tip"
@@ -4286,7 +4432,7 @@
 						"false-value"
 					])]),
 					_: 1
-				})) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("legend", _hoisted_3$5, [(0, vue.createElementVNode)("span", { innerHTML: __props.config.legend }, null, 8, _hoisted_4$3), __props.config.extra ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+				})) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("legend", _hoisted_3$5, [(0, vue.createElementVNode)("span", { innerHTML: legend.value }, null, 8, _hoisted_4$3), __props.config.extra ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 0,
 					innerHTML: __props.config.extra,
 					class: "m-form-tip"
@@ -4723,6 +4869,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 +4946,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 +5087,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 +5108,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 +5127,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 +5174,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 +5214,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 +5302,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 +5904,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 +5924,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 +5935,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 +8014,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.3",
   "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/utils": "1.8.0-beta.3",
+    "@tmagic/form-schema": "1.8.0-beta.3",
+    "@tmagic/design": "1.8.0-beta.3"
   },
   "peerDependenciesMeta": {
     "typescript": {