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

package/dist/es/Form.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,8 @@
+import { FORM_DIFF_CONFIG_KEY } from "./schema.js";
 import { getConfig } from "./utils/config.js";
 import { initValue } from "./utils/form.js";
 import Container_default from "./containers/Container.js";
-import { Fragment, createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeStyle, openBlock, provide, reactive, ref, renderList, shallowRef, toRaw, unref, useTemplateRef, watch, watchEffect, withCtx } from "vue";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createSlots, defineComponent, mergeProps, normalizeStyle, openBlock, provide, reactive, ref, renderList, renderSlot, shallowRef, toRaw, unref, useTemplateRef, watch, watchEffect, withCtx } from "vue";
 import { cloneDeep, isEqual } from "lodash-es";
 import { TMagicForm, tMagicMessage, tMagicMessageBox } from "@tmagic/design";
 import { setValueByKeyPath } from "@tmagic/utils";
@@ -34,7 +35,9 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		keyProp: { default: "__key" },
 		popperClass: {},
 		preventSubmitDefault: { type: Boolean },
-		extendState: {}
+		extendState: {},
+		showDiff: {},
+		selfDiffFieldTypes: {}
 	},
 	emits: [
 		"change",
@@ -150,6 +153,14 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 			}
 		});
 		provide("mForm", formState);
+		provide(FORM_DIFF_CONFIG_KEY, {
+			get showDiff() {
+				return props.showDiff;
+			},
+			get selfDiffFieldTypes() {
+				return props.selfDiffFieldTypes;
+			}
+		});
 		const changeRecords = shallowRef([]);
 		watch([() => props.config, () => props.initValues], ([config], [preConfig]) => {
 			changeRecords.value = [];
@@ -266,7 +277,11 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 						"step-active": __props.stepActive,
 						size: __props.size,
 						onChange: changeHandler
-					}, null, 8, [
+					}, createSlots({ _: 2 }, [_ctx.$slots.label ? {
+						name: "label",
+						fn: withCtx((labelProps) => [renderSlot(_ctx.$slots, "label", mergeProps({ ref_for: true }, labelProps))]),
+						key: "0"
+					} : void 0]), 1032, [
 						"disabled",
 						"config",
 						"model",
@@ -277,7 +292,7 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 						"size"
 					]);
 				}), 128)) : createCommentVNode("v-if", true)]),
-				_: 1
+				_: 3
 			}, 8, [
 				"model",
 				"label-width",

package/dist/es/containers/Container.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,9 @@
+import { FORM_DIFF_CONFIG_KEY } from "../schema.js";
 import Hidden_default from "../fields/Hidden.js";
 import { getField } from "../utils/config.js";
 import { createObjectProp, display, filterFunction, getRules } from "../utils/form.js";
 import FormLabel_default from "./FormLabel.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeProps, normalizeClass, normalizeStyle, openBlock, readonly, ref, renderList, resolveComponent, resolveDynamicComponent, toDisplayString, toRaw, unref, watch, watchEffect, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, mergeProps, normalizeClass, normalizeStyle, openBlock, readonly, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toDisplayString, toRaw, unref, watch, watchEffect, withCtx } from "vue";
 import { isEqual } from "lodash-es";
 import { TMagicButton, TMagicFormItem, TMagicIcon, TMagicTooltip } from "@tmagic/design";
 import { getValueByKeyPath } from "@tmagic/utils";
@@ -15,7 +16,8 @@ var _hoisted_4 = ["innerHTML"];
 var _hoisted_5 = ["innerHTML"];
 var _hoisted_6 = ["innerHTML"];
 var _hoisted_7 = ["innerHTML"];
-var _hoisted_8 = {
+var _hoisted_8 = ["innerHTML"];
+var _hoisted_9 = {
 	key: 5,
 	style: { "text-align": "center" }
 };
@@ -45,11 +47,21 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		const props = __props;
 		const emit = __emit;
 		const mForm = inject("mForm");
+		const diffConfig = inject(FORM_DIFF_CONFIG_KEY, {});
 		const expand = ref(false);
 		const name = computed(() => props.config.name || "");
 		const showDiff = 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 = computed(() => props.config.items);
 		const itemProp = computed(() => {
@@ -70,6 +82,35 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 			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 = 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 = computed(() => effectiveSelfDiffFieldTypes.value.has(type.value));
 		const disabled = computed(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
 		const text = computed(() => filterFunction(mForm, props.config.text, props));
 		const tooltip = computed(() => {
@@ -238,7 +279,13 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				"label-width",
 				"style"
 			])) : type.value && display$1.value && !showDiff.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createVNode(unref(TMagicFormItem), mergeProps(formItemProps.value, { class: { "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value } }), {
-				label: withCtx(() => [createVNode(FormLabel_default, {
+				label: withCtx(() => [renderSlot(_ctx.$slots, "label", {
+					config: __props.config,
+					type: type.value,
+					text: text.value,
+					prop: itemProp.value,
+					disabled: disabled.value
+				}, () => [createVNode(FormLabel_default, {
 					tip: __props.config.tip,
 					type: type.value,
 					"use-label": __props.config.useLabel,
@@ -250,7 +297,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 					"use-label",
 					"label-title",
 					"text"
-				])]),
+				])])]),
 				default: withCtx(() => [tooltip.value.text ? (openBlock(), createBlock(unref(TMagicTooltip), {
 					key: 0,
 					placement: tooltip.value.placement
@@ -279,7 +326,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 					"last-values",
 					"is-compare"
 				]))]),
-				_: 1
+				_: 3
 			}, 16, ["class"]), __props.config.tip && type.value === "checkbox" && !__props.config.useLabel ? (openBlock(), createBlock(unref(TMagicTooltip), {
 				key: 0,
 				placement: "top"
@@ -295,12 +342,18 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				_: 1
 			})) : createCommentVNode("v-if", true)], 64)) : type.value && display$1.value && showDiff.value ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
 				createCommentVNode(" 对比 "),
-				createCommentVNode(" 上次内容 "),
-				createVNode(unref(TMagicFormItem), mergeProps(formItemProps.value, { class: {
+				createCommentVNode(" 自接管对比的字段类型（如 vs-code）：只渲染一次组件，由字段内部用 diff 编辑器/视图自行展示前后差异 "),
+				isSelfDiffField.value ? (openBlock(), createBlock(unref(TMagicFormItem), mergeProps({ key: 0 }, formItemProps.value, { class: {
 					"tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value,
-					"show-diff": true
+					"self-diff": true
 				} }), {
-					label: withCtx(() => [createVNode(FormLabel_default, {
+					label: withCtx(() => [renderSlot(_ctx.$slots, "label", {
+						config: __props.config,
+						type: type.value,
+						text: text.value,
+						prop: itemProp.value,
+						disabled: disabled.value
+					}, () => [createVNode(FormLabel_default, {
 						tip: __props.config.tip,
 						type: type.value,
 						"use-label": __props.config.useLabel,
@@ -312,88 +365,148 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 						"use-label",
 						"label-title",
 						"text"
-					])]),
+					])])]),
 					default: withCtx(() => [tooltip.value.text ? (openBlock(), createBlock(unref(TMagicTooltip), {
 						key: 0,
 						placement: tooltip.value.placement
 					}, {
 						content: withCtx(() => [createElementVNode("div", { innerHTML: tooltip.value.text }, null, 8, _hoisted_4)]),
 						default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(tagName.value), 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"])) : (openBlock(), createBlock(resolveDynamicComponent(tagName.value), 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 ? (openBlock(), createBlock(unref(TMagicTooltip), {
-					key: 0,
-					placement: "top"
-				}, {
-					content: withCtx(() => [createElementVNode("div", { innerHTML: __props.config.tip }, null, 8, _hoisted_5)]),
-					default: withCtx(() => [createVNode(unref(TMagicIcon), { style: {
-						"line-height": "40px",
-						"margin-left": "5px"
-					} }, {
-						default: withCtx(() => [createVNode(unref(WarningFilled))]),
-						_: 1
-					})]),
-					_: 1
-				})) : createCommentVNode("v-if", true),
-				createCommentVNode(" 当前内容 "),
-				createVNode(unref(TMagicFormItem), mergeProps(formItemProps.value, {
-					style: __props.config.tip ? "flex: 1" : "",
-					class: {
+					}), null, 16, [
+						"model",
+						"last-values",
+						"is-compare"
+					]))]),
+					_: 3
+				}, 16, ["class"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+					createCommentVNode(" 普通字段：渲染前后两份独立的组件用于对比 "),
+					createCommentVNode(" 上次内容 "),
+					createVNode(unref(TMagicFormItem), mergeProps(formItemProps.value, { class: {
 						"tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value,
-						"show-diff": true
-					}
-				}), {
-					label: withCtx(() => [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: withCtx(() => [tooltip.value.text ? (openBlock(), createBlock(unref(TMagicTooltip), {
+						"show-before-diff": true
+					} }), {
+						label: withCtx(() => [renderSlot(_ctx.$slots, "label", {
+							config: __props.config,
+							type: type.value,
+							text: text.value,
+							prop: itemProp.value,
+							disabled: disabled.value
+						}, () => [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: withCtx(() => [tooltip.value.text ? (openBlock(), createBlock(unref(TMagicTooltip), {
+							key: 0,
+							placement: tooltip.value.placement
+						}, {
+							content: withCtx(() => [createElementVNode("div", { innerHTML: tooltip.value.text }, null, 8, _hoisted_5)]),
+							default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps(fieldsProps.value, {
+								model: __props.lastValues,
+								onChange: onChangeHandler
+							}), null, 16, ["model"]))]),
+							_: 1
+						}, 8, ["placement"])) : (openBlock(), createBlock(resolveDynamicComponent(tagName.value), 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 ? (openBlock(), createBlock(unref(TMagicTooltip), {
 						key: 0,
-						placement: tooltip.value.placement
+						placement: "top"
 					}, {
-						content: withCtx(() => [createElementVNode("div", { innerHTML: tooltip.value.text }, null, 8, _hoisted_6)]),
-						default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps(fieldsProps.value, {
+						content: withCtx(() => [createElementVNode("div", { innerHTML: __props.config.tip }, null, 8, _hoisted_6)]),
+						default: withCtx(() => [createVNode(unref(TMagicIcon), { style: {
+							"line-height": "40px",
+							"margin-left": "5px"
+						} }, {
+							default: withCtx(() => [createVNode(unref(WarningFilled))]),
+							_: 1
+						})]),
+						_: 1
+					})) : createCommentVNode("v-if", true),
+					createCommentVNode(" 当前内容 "),
+					createVNode(unref(TMagicFormItem), mergeProps(formItemProps.value, {
+						style: __props.config.tip ? "flex: 1" : "",
+						class: {
+							"tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value,
+							"show-after-diff": true
+						}
+					}), {
+						label: withCtx(() => [renderSlot(_ctx.$slots, "label", {
+							config: __props.config,
+							type: type.value,
+							text: text.value,
+							prop: itemProp.value,
+							disabled: disabled.value
+						}, () => [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: withCtx(() => [tooltip.value.text ? (openBlock(), createBlock(unref(TMagicTooltip), {
+							key: 0,
+							placement: tooltip.value.placement
+						}, {
+							content: withCtx(() => [createElementVNode("div", { innerHTML: tooltip.value.text }, null, 8, _hoisted_7)]),
+							default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps(fieldsProps.value, {
+								model: __props.model,
+								onChange: onChangeHandler
+							}), null, 16, ["model"]))]),
+							_: 1
+						}, 8, ["placement"])) : (openBlock(), createBlock(resolveDynamicComponent(tagName.value), 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 ? (openBlock(), createBlock(unref(TMagicTooltip), {
+						key: 1,
+						placement: "top"
+					}, {
+						content: withCtx(() => [createElementVNode("div", { innerHTML: __props.config.tip }, null, 8, _hoisted_8)]),
+						default: withCtx(() => [createVNode(unref(TMagicIcon), { style: {
+							"line-height": "40px",
+							"margin-left": "5px"
+						} }, {
+							default: withCtx(() => [createVNode(unref(WarningFilled))]),
+							_: 1
+						})]),
 						_: 1
-					}, 8, ["placement"])) : (openBlock(), createBlock(resolveDynamicComponent(tagName.value), 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 ? (openBlock(), createBlock(unref(TMagicTooltip), {
-					key: 1,
-					placement: "top"
-				}, {
-					content: withCtx(() => [createElementVNode("div", { innerHTML: __props.config.tip }, null, 8, _hoisted_7)]),
-					default: withCtx(() => [createVNode(unref(TMagicIcon), { style: {
-						"line-height": "40px",
-						"margin-left": "5px"
-					} }, {
-						default: withCtx(() => [createVNode(unref(WarningFilled))]),
-						_: 1
-					})]),
-					_: 1
-				})) : createCommentVNode("v-if", true)
+					})) : createCommentVNode("v-if", true)
+				], 64))
 			], 64)) : items.value && display$1.value ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [(isValidName() ? __props.model[name.value] : __props.model) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(items.value, (item) => {
 				return openBlock(), createBlock(_component_Container, {
 					key: key(item),
@@ -409,7 +522,11 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 					prop: itemProp.value,
 					onChange: onChangeHandler,
 					onAddDiffCount
-				}, null, 8, [
+				}, createSlots({ _: 2 }, [_ctx.$slots.label ? {
+					name: "label",
+					fn: withCtx((labelProps) => [renderSlot(_ctx.$slots, "label", mergeProps({ ref_for: true }, labelProps))]),
+					key: "0"
+				} : void 0]), 1032, [
 					"model",
 					"last-values",
 					"is-compare",
@@ -421,7 +538,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 					"label-width",
 					"prop"
 				]);
-			}), 128)) : createCommentVNode("v-if", true)], 64)) : createCommentVNode("v-if", true), __props.config.expand && type.value !== "fieldset" ? (openBlock(), createElementBlock("div", _hoisted_8, [createVNode(unref(TMagicButton), {
+			}), 128)) : createCommentVNode("v-if", true)], 64)) : createCommentVNode("v-if", true), __props.config.expand && type.value !== "fieldset" ? (openBlock(), createElementBlock("div", _hoisted_9, [createVNode(unref(TMagicButton), {
 				type: "primary",
 				size: "small",
 				disabled: false,

package/dist/es/containers/Fieldset.vue_vue_type_script_setup_true_lang.js

@@ -1,3 +1,4 @@
+import { filterFunction } from "../utils/form.js";
 import Container_default from "./Container.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, normalizeStyle, openBlock, renderList, resolveDynamicComponent, unref, withCtx } from "vue";
 import { TMagicCheckbox } from "@tmagic/design";
@@ -36,6 +37,7 @@ var Fieldset_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		const emit = __emit;
 		const mForm = inject("mForm");
 		const name = computed(() => props.config.name || "");
+		const legend = computed(() => filterFunction(mForm, props.config.legend, props));
 		const checkboxName = computed(() => {
 			if (typeof props.config.checkbox === "object" && typeof props.config.checkbox.name === "string") return props.config.checkbox.name;
 			return "value";
@@ -75,7 +77,7 @@ var Fieldset_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					"false-value": checkboxFalseValue.value,
 					"onUpdate:modelValue": valueChangeHandler
 				}, {
-					default: withCtx(() => [createElementVNode("span", { innerHTML: __props.config.legend }, null, 8, _hoisted_1), __props.config.extra ? (openBlock(), createElementBlock("span", {
+					default: withCtx(() => [createElementVNode("span", { innerHTML: legend.value }, null, 8, _hoisted_1), __props.config.extra ? (openBlock(), createElementBlock("span", {
 						key: 0,
 						innerHTML: __props.config.extra,
 						class: "m-form-tip"
@@ -88,7 +90,7 @@ var Fieldset_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					"false-value"
 				])]),
 				_: 1
-			})) : (openBlock(), createElementBlock("legend", _hoisted_3, [createElementVNode("span", { innerHTML: __props.config.legend }, null, 8, _hoisted_4), __props.config.extra ? (openBlock(), createElementBlock("span", {
+			})) : (openBlock(), createElementBlock("legend", _hoisted_3, [createElementVNode("span", { innerHTML: legend.value }, null, 8, _hoisted_4), __props.config.extra ? (openBlock(), createElementBlock("span", {
 				key: 0,
 				innerHTML: __props.config.extra,
 				class: "m-form-tip"

package/dist/es/containers/GroupList.vue_vue_type_script_setup_true_lang.js

@@ -8,7 +8,10 @@ var _hoisted_3 = {
 	key: 1,
 	class: "el-table__empty-block"
 };
-var _hoisted_4 = { class: "m-fields-group-list-footer" };
+var _hoisted_4 = {
+	key: 3,
+	class: "m-fields-group-list-footer"
+};
 var _hoisted_5 = { style: {
 	"display": "flex",
 	"justify-content": "flex-end",
@@ -91,7 +94,7 @@ var GroupList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 						"group-model"
 					]);
 				}), 128)),
-				createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "toggle-button"), createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "add-button")])])
+				!__props.isCompare ? (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "toggle-button"), createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "add-button")])])) : createCommentVNode("v-if", true)
 			]);
 		};
 	}

package/dist/es/containers/GroupListItem.vue_vue_type_script_setup_true_lang.js

@@ -99,16 +99,17 @@ var GroupListItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 						}), createElementVNode("span", { innerHTML: title.value }, null, 8, _hoisted_1)]),
 						_: 1
 					}, 8, ["disabled"]),
-					withDirectives(createVNode(unref(TMagicButton), {
+					!__props.isCompare ? withDirectives((openBlock(), createBlock(unref(TMagicButton), {
+						key: 0,
 						type: "danger",
 						size: "small",
 						link: "",
 						icon: unref(Delete),
 						disabled: __props.disabled,
 						onClick: removeHandler
-					}, null, 8, ["icon", "disabled"]), [[vShow, showDelete.value]]),
-					copyable.value ? (openBlock(), createBlock(unref(TMagicButton), {
-						key: 0,
+					}, null, 8, ["icon", "disabled"])), [[vShow, showDelete.value]]) : createCommentVNode("v-if", true),
+					copyable.value && !__props.isCompare ? (openBlock(), createBlock(unref(TMagicButton), {
+						key: 1,
 						link: "",
 						size: "small",
 						type: "primary",
@@ -119,7 +120,7 @@ var GroupListItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 						default: withCtx(() => [..._cache[6] || (_cache[6] = [createTextVNode("复制", -1)])]),
 						_: 1
 					}, 8, ["icon", "disabled"])) : createCommentVNode("v-if", true),
-					movable.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [withDirectives(createVNode(unref(TMagicButton), {
+					movable.value && !__props.isCompare ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [withDirectives(createVNode(unref(TMagicButton), {
 						link: "",
 						size: "small",
 						disabled: __props.disabled,
@@ -138,8 +139,8 @@ var GroupListItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 						default: withCtx(() => [..._cache[8] || (_cache[8] = [createTextVNode("下移", -1)])]),
 						_: 1
 					}, 8, ["disabled", "icon"]), [[vShow, __props.index !== length.value - 1]])], 64)) : createCommentVNode("v-if", true),
-					__props.config.moveSpecifyLocation ? (openBlock(), createBlock(unref(TMagicPopover), {
-						key: 2,
+					__props.config.moveSpecifyLocation && !__props.isCompare ? (openBlock(), createBlock(unref(TMagicPopover), {
+						key: 3,
 						trigger: "click",
 						placement: "top",
 						width: "200",
@@ -185,7 +186,7 @@ var GroupListItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 						_: 1
 					}, 8, ["visible"])) : createCommentVNode("v-if", true),
 					itemExtra.value ? (openBlock(), createElementBlock("span", {
-						key: 3,
+						key: 4,
 						innerHTML: itemExtra.value,
 						class: "m-form-tip"
 					}, null, 8, _hoisted_3)) : createCommentVNode("v-if", true)

package/dist/es/containers/Tabs.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 import { display, filterFunction, initValue } from "../utils/form.js";
 import Container_default from "./Container.js";
-import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeProps, openBlock, ref, renderList, resolveDynamicComponent, toDisplayString, unref, watchEffect, withCtx } from "vue";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeProps, openBlock, ref, renderList, resolveDynamicComponent, toDisplayString, unref, watch, watchEffect, withCtx } from "vue";
 import { isEmpty } from "lodash-es";
 import { TMagicBadge, getDesignConfig } from "@tmagic/design";
 //#region packages/form/src/containers/Tabs.vue?vue&type=script&setup=true&lang.ts
@@ -74,6 +74,9 @@ var Tabs_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 				prop: props.prop
 			});
 		});
+		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);
@@ -148,7 +151,7 @@ var Tabs_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(tabs.value, (tab, tabIndex) => {
 					return openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), mergeProps({ key: tab[unref(mForm)?.keyProp || "__key"] ?? tabIndex }, { ref_for: true }, unref(tabPaneComponent)?.props({
 						name: filter(tab.status) || tabIndex.toString(),
-						lazy: tab.lazy || false
+						lazy: __props.isCompare ? false : tab.lazy || false
 					}) || {}), {
 						label: withCtx(() => [createElementVNode("span", null, [createTextVNode(toDisplayString(filter(tab.title)), 1), createVNode(unref(TMagicBadge), {
 							hidden: !diffCount.value[Number(tabIndex)],

package/dist/es/containers/table/Table.vue_vue_type_script_setup_true_lang.js

@@ -122,7 +122,7 @@ var Table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 						default: withCtx(() => [createTextVNode(toDisplayString(unref(isFullscreen) ? "退出全屏" : "全屏编辑"), 1)]),
 						_: 1
 					}, 8, ["icon", "onClick"])) : createCommentVNode("v-if", true),
-					unref(importable) ? (openBlock(), createBlock(unref(TMagicUpload), {
+					unref(importable) && !__props.isCompare ? (openBlock(), createBlock(unref(TMagicUpload), {
 						key: 2,
 						style: { "display": "inline-block" },
 						ref: "excelBtn",
@@ -142,7 +142,7 @@ var Table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 						}, 8, ["disabled"])]),
 						_: 1
 					}, 8, ["disabled", "on-change"])) : createCommentVNode("v-if", true),
-					unref(importable) ? (openBlock(), createBlock(unref(TMagicButton), {
+					unref(importable) && !__props.isCompare ? (openBlock(), createBlock(unref(TMagicButton), {
 						key: 3,
 						size: "small",
 						type: "warning",
@@ -153,7 +153,7 @@ var Table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 						default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("清空", -1)])]),
 						_: 1
 					}, 8, ["disabled", "onClick"])) : createCommentVNode("v-if", true)
-				]), renderSlot(_ctx.$slots, "add-button")]),
+				]), !__props.isCompare ? renderSlot(_ctx.$slots, "add-button", { key: 0 }) : createCommentVNode("v-if", true)]),
 				__props.config.pagination ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(unref(TMagicPagination), {
 					layout: "total, sizes, prev, pager, next, jumper",
 					"hide-on-single-page": __props.model[modelName.value].length < unref(pageSize),

package/dist/es/index.js

@@ -1,4 +1,5 @@
 import "./_virtual/_rolldown/runtime.js";
+import { FORM_DIFF_CONFIG_KEY } from "./schema.js";
 import { useAddField } from "./utils/useAddField.js";
 import Hidden_default from "./fields/Hidden.js";
 import { deleteField, getField, registerField } from "./utils/config.js";
@@ -38,4 +39,4 @@ import plugin_default from "./plugin.js";
 export * from "@tmagic/form-schema";
 var createForm = (config) => config;
 //#endregion
-export { Cascader_default as MCascader, Checkbox_default as MCheckbox, CheckboxGroup_default as MCheckboxGroup, ColorPicker_default as MColorPicker, Container_default as MContainer, Date_default as MDate, DateTime_default as MDateTime, Daterange_default as MDaterange, Display_default as MDisplay, DynamicField_default as MDynamicField, Fieldset_default as MFieldset, FlexLayout_default as MFlexLayout, Form_default as MForm, FormBox_default as MFormBox, FormDialog_default as MFormDialog, FormDrawer_default as MFormDrawer, TableGroupList_default as MGroupList, Hidden_default as MHidden, Link_default as MLink, Number_default as MNumber, NumberRange_default as MNumberRange, Panel_default as MPanel, RadioGroup_default as MRadioGroup, Row_default as MRow, Select_default as MSelect, Switch_default as MSwitch, TableGroupList_default as MTable, TableGroupList_default as MTableGroupList, Tabs_default as MTabs, Text_default as MText, Textarea_default as MTextarea, Time_default as MTime, Timerange_default as MTimerange, createForm, createObjectProp, createValues, datetimeFormatter, plugin_default as default, deleteField as deleteFormField, display, filterFunction, getDataByPage, getField as getFormField, getRules, initValue, registerField as registerFormField, sortArray, sortChange, submitForm, useAddField };
+export { FORM_DIFF_CONFIG_KEY, Cascader_default as MCascader, Checkbox_default as MCheckbox, CheckboxGroup_default as MCheckboxGroup, ColorPicker_default as MColorPicker, Container_default as MContainer, Date_default as MDate, DateTime_default as MDateTime, Daterange_default as MDaterange, Display_default as MDisplay, DynamicField_default as MDynamicField, Fieldset_default as MFieldset, FlexLayout_default as MFlexLayout, Form_default as MForm, FormBox_default as MFormBox, FormDialog_default as MFormDialog, FormDrawer_default as MFormDrawer, TableGroupList_default as MGroupList, Hidden_default as MHidden, Link_default as MLink, Number_default as MNumber, NumberRange_default as MNumberRange, Panel_default as MPanel, RadioGroup_default as MRadioGroup, Row_default as MRow, Select_default as MSelect, Switch_default as MSwitch, TableGroupList_default as MTable, TableGroupList_default as MTableGroupList, Tabs_default as MTabs, Text_default as MText, Textarea_default as MTextarea, Time_default as MTime, Timerange_default as MTimerange, createForm, createObjectProp, createValues, datetimeFormatter, plugin_default as default, deleteField as deleteFormField, display, filterFunction, getDataByPage, getField as getFormField, getRules, initValue, registerField as registerFormField, sortArray, sortChange, submitForm, useAddField };

package/dist/es/schema.js

@@ -1,2 +1,6 @@
 import "./_virtual/_rolldown/runtime.js";
 export * from "@tmagic/form-schema";
+//#region packages/form/src/schema.ts
+var FORM_DIFF_CONFIG_KEY = Symbol("mFormDiffConfig");
+//#endregion
+export { FORM_DIFF_CONFIG_KEY };

package/dist/es/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;
 }