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

package/dist/es/Form.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,13 @@
+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";
 //#region packages/form/src/Form.vue?vue&type=script&setup=true&lang.ts
-var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MForm",
 	__name: "Form",
 	props: {
@@ -34,7 +35,13 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		keyProp: { default: "__key" },
 		popperClass: {},
 		preventSubmitDefault: { type: Boolean },
-		extendState: {}
+		useFieldTextInError: {
+			type: Boolean,
+			default: true
+		},
+		extendState: {},
+		showDiff: {},
+		selfDiffFieldTypes: {}
 	},
 	emits: [
 		"change",
@@ -150,6 +157,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 = [];
@@ -234,7 +249,7 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 					Object.entries(invalidFields).forEach(([prop, ValidateError]) => {
 						ValidateError.forEach(({ field, message }) => {
 							const name = field || prop;
-							const text = getTextByName(name, props.config) || name;
+							const text = (props.useFieldTextInError ? getTextByName(name, props.config) : void 0) || name;
 							error.push(`${text} -> ${message}`);
 						});
 					});
@@ -266,7 +281,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 +296,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/FormBox.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { computed, createElementBlock, createElementVNode, createTextVNode, crea
 import { TMagicButton, TMagicScrollbar } from "@tmagic/design";
 //#region packages/form/src/FormBox.vue?vue&type=script&setup=true&lang.ts
 var footerHeight = 60;
-var FormBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var FormBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormBox",
 	__name: "FormBox",
 	props: {
@@ -19,6 +19,10 @@ var FormBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		inline: { type: Boolean },
 		labelPosition: {},
 		preventSubmitDefault: { type: Boolean },
+		useFieldTextInError: {
+			type: Boolean,
+			default: true
+		},
 		extendState: {}
 	},
 	emits: [
@@ -81,6 +85,7 @@ var FormBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					"label-position": __props.labelPosition,
 					inline: __props.inline,
 					"prevent-submit-default": __props.preventSubmitDefault,
+					"use-field-text-in-error": __props.useFieldTextInError,
 					"extend-state": __props.extendState,
 					onChange: changeHandler
 				}, null, 8, [
@@ -93,6 +98,7 @@ var FormBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					"label-position",
 					"inline",
 					"prevent-submit-default",
+					"use-field-text-in-error",
 					"extend-state"
 				]), renderSlot(_ctx.$slots, "default")]),
 				_: 3

package/dist/es/FormDialog.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { computed, createBlock, createCommentVNode, createElementBlock, createEl
 import { TMagicButton, TMagicCol, TMagicDialog, TMagicRow } from "@tmagic/design";
 //#region packages/form/src/FormDialog.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { style: { "min-height": "1px" } };
-var FormDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var FormDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormDialog",
 	__name: "FormDialog",
 	props: {
@@ -41,6 +41,10 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			type: Boolean,
 			default: true
 		},
+		useFieldTextInError: {
+			type: Boolean,
+			default: true
+		},
 		extendState: {}
 	},
 	emits: [
@@ -191,6 +195,7 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					"label-position": __props.labelPosition,
 					inline: __props.inline,
 					"prevent-submit-default": __props.preventSubmitDefault,
+					"use-field-text-in-error": __props.useFieldTextInError,
 					"extend-state": __props.extendState,
 					onChange: changeHandler
 				}, null, 8, [
@@ -204,6 +209,7 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					"label-position",
 					"inline",
 					"prevent-submit-default",
+					"use-field-text-in-error",
 					"extend-state"
 				]), renderSlot(_ctx.$slots, "default")], 4)) : createCommentVNode("v-if", true)]),
 				_: 3

package/dist/es/FormDrawer.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { createBlock, createCommentVNode, createElementBlock, createElementVNode
 import { TMagicButton, TMagicCol, TMagicDrawer, TMagicRow } from "@tmagic/design";
 //#region packages/form/src/FormDrawer.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { style: { "min-height": "1px" } };
-var FormDrawer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var FormDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormDialog",
 	__name: "FormDrawer",
 	props: {
@@ -24,6 +24,10 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		inline: { type: Boolean },
 		labelPosition: {},
 		preventSubmitDefault: { type: Boolean },
+		useFieldTextInError: {
+			type: Boolean,
+			default: true
+		},
 		beforeClose: {},
 		extendState: {}
 	},
@@ -149,6 +153,7 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					"label-position": __props.labelPosition,
 					inline: __props.inline,
 					"prevent-submit-default": __props.preventSubmitDefault,
+					"use-field-text-in-error": __props.useFieldTextInError,
 					"extend-state": __props.extendState,
 					onChange: changeHandler
 				}, null, 8, [
@@ -161,6 +166,7 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					"label-position",
 					"inline",
 					"prevent-submit-default",
+					"use-field-text-in-error",
 					"extend-state"
 				]), renderSlot(_ctx.$slots, "default")], 512)) : createCommentVNode("v-if", true)]),
 				_: 3

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

@@ -3,7 +3,7 @@ import Container_default from "./Container.js";
 import { computed, createBlock, createVNode, defineComponent, inject, openBlock, unref, vShow, withCtx, withDirectives } from "vue";
 import { TMagicCol } from "@tmagic/design";
 //#region packages/form/src/containers/Col.vue?vue&type=script&setup=true&lang.ts
-var Col_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Col_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormCol",
 	__name: "Col",
 	props: {

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,11 +16,12 @@ 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" }
 };
-var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormContainer",
 	__name: "Container",
 	props: {
@@ -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 /* @__PURE__ */ 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";
@@ -13,7 +14,7 @@ var _hoisted_6 = {
 };
 var _hoisted_7 = { style: { "flex": "1" } };
 var _hoisted_8 = ["src"];
-var Fieldset_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Fieldset_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormFieldset",
 	__name: "Fieldset",
 	props: {
@@ -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/FlexLayout.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import Container_default from "./Container.js";
 import { Fragment, computed, createBlock, createElementBlock, defineComponent, inject, normalizeStyle, openBlock, renderList, unref } from "vue";
 //#region packages/form/src/containers/FlexLayout.vue?vue&type=script&setup=true&lang.ts
-var FlexLayout_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var FlexLayout_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormFlexLayout",
 	__name: "FlexLayout",
 	props: {

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

@@ -12,7 +12,7 @@ var _hoisted_1 = {
 var _hoisted_2 = ["innerHTML", "title"];
 var _hoisted_3 = ["innerHTML"];
 var _hoisted_4 = ["innerHTML", "title"];
-var FormLabel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var FormLabel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "FormLabel",
 	props: {
 		tip: {},

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

@@ -8,13 +8,16 @@ 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",
 	"flex": "1"
 } };
-var GroupList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var GroupList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormGroupList",
 	__name: "GroupList",
 	props: {
@@ -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)
 			]);
 		};
 	}