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

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",
@@ -52,14 +55,45 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		const lastValuesProcessed = ref({});
 		const fields = /* @__PURE__ */ new Map();
 		const requestFuc = getConfig("request");
+		/**
+		* formState 实现说明：
+		*
+		* 1. 与 props 直接对应的字段（config / initValues / lastValues / isCompare / parentValues /
+		*    keyProp / popperClass）使用「访问器（getter）」定义，每次读取都会回到 `props.xxx`
+		*    取最新值，不存在「props 变了但 formState 还没同步过来」的中间态。
+		*
+		* 2. `values` / `lastValuesProcessed` 是 ref，Vue 的 `reactive` 会自动解包，因此每次
+		*    访问 `formState.values` / `formState.lastValuesProcessed` 也都是当前 ref 值。
+		*
+		* 3. `extendState` 注入的字段在下方的 `watchEffect` 中合并到 `formState`：
+		*    - data 描述符（普通字段）通过 `formState[key] = value` 写入，走 reactive proxy 的
+		*      set，触发依赖通知；`extendState` 同步段读到的响应式数据变化时会自动重跑，
+		*      把最新值刷进 formState。
+		*    - accessor 描述符（`{ get stage() { return ... } }`）按原样写入，调用方可以控制
+		*      读时求值，每次读取都会重新执行 getter。
+		*/
 		const formState = reactive({
-			keyProp: props.keyProp,
-			popperClass: props.popperClass,
-			config: props.config,
-			initValues: props.initValues,
-			isCompare: props.isCompare,
-			lastValues: props.lastValues,
-			parentValues: props.parentValues,
+			get keyProp() {
+				return props.keyProp;
+			},
+			get popperClass() {
+				return props.popperClass;
+			},
+			get config() {
+				return props.config;
+			},
+			get initValues() {
+				return props.initValues;
+			},
+			get isCompare() {
+				return props.isCompare;
+			},
+			get lastValues() {
+				return props.lastValues;
+			},
+			get parentValues() {
+				return props.parentValues;
+			},
 			values,
 			lastValuesProcessed,
 			$emit: emit,
@@ -76,22 +110,57 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 				});
 			}
 		});
-		watchEffect(async () => {
-			formState.initValues = props.initValues;
-			formState.lastValues = props.lastValues;
-			formState.isCompare = props.isCompare;
-			formState.config = props.config;
-			formState.keyProp = props.keyProp;
-			formState.popperClass = props.popperClass;
-			formState.parentValues = props.parentValues;
-			if (typeof props.extendState === "function") {
-				const state = await props.extendState(formState) || {};
-				Object.entries(state).forEach(([key, value]) => {
-					formState[key] = value;
-				});
+		/**
+		* `extendState` 的同步段（直到第一个 `await` 之前）所访问的任何响应式数据，
+		* 都会被 `watchEffect` 自动跟踪。这样可以兼容历史用法 ——
+		*
+		*   extendState: (formState) => ({
+		*     username: store.username,   // 同步读 store，会被跟踪
+		*     env: store.env,
+		*   })
+		*
+		* 当 `store.username` 变化时，整个 effect 重跑，新值会被刷进 `formState`。
+		*
+		* prop 派生字段（initValues / config / ...）已经在上方用 getter 定义，
+		* 这里不再重复同步；因此 `props.initValues` 这类高频变化也不会再触发
+		* `extendState` 重跑（旧版的性能问题修复点）。
+		*
+		* 实现细节：
+		* - data 描述符：通过 `formState[key] = value` 走 reactive proxy 的 set，
+		*   触发依赖通知；与旧版「逐项赋值」语义完全等价。
+		* - accessor 描述符（`{ get stage() {...} }`）按原样写入 formState，调用方
+		*   可以自行控制读时求值；强制 `configurable: true` 以便下一次重跑可再 define。
+		*/
+		watchEffect(async (onCleanup) => {
+			const { extendState } = props;
+			if (typeof extendState !== "function") return;
+			let stale = false;
+			onCleanup(() => {
+				stale = true;
+			});
+			let state = {};
+			try {
+				state = await extendState(formState) || {};
+			} catch (e) {
+				console.error("[MForm] extendState failed:", e);
+				return;
+			}
+			if (stale) return;
+			for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(state))) if ("value" in descriptor) formState[key] = state[key];
+			else {
+				descriptor.configurable = true;
+				Object.defineProperty(formState, key, descriptor);
 			}
 		});
 		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 = [];
@@ -208,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",
@@ -219,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,20 @@ 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);
+			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 = computed(() => props.config.items);
 		const itemProp = computed(() => {
@@ -70,6 +81,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 +278,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 +296,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 +325,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 +341,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 +364,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 +521,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 +537,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/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),