@tmagic/form 1.8.0-beta.15 → 1.8.0-beta.17

package/dist/es/Form.vue_vue_type_script_setup_true_lang.js

@@ -145,6 +145,17 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			}
 		});
 		/**
+		* formState 的内置 key 快照（keyProp / values / $emit / fields / post 等）。
+		*
+		* 在 `extendState` 首次合并前捕获，`applyExtendState` 会据此禁止 `extendState`
+		* 覆盖这些已有字段（只能新增字段），避免表单核心状态被外部意外改写。
+		*
+		* 之所以在此处（effect 之外）捕获而不是在 `applyExtendState` 内动态取：
+		* `watchEffect` 会在依赖变化时重跑，若动态取，`extendState` 自己新增的字段在第二次
+		* 合并时也会被当成「已有 key」而拒绝刷新；这里只锁定内置字段即可规避该问题。
+		*/
+		const reservedStateKeys = new Set(Reflect.ownKeys(formState));
+		/**
 		* `extendState` 的同步段（直到第一个 `await` 之前）所访问的任何响应式数据，
 		* 都会被 `watchEffect` 自动跟踪。这样可以兼容历史用法 ——
 		*
@@ -179,7 +190,7 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 				return;
 			}
 			if (stale) return;
-			applyExtendState(formState, state);
+			applyExtendState(formState, state, reservedStateKeys);
 		});
 		provide("mForm", formState);
 		/**

package/dist/es/style.css

@@ -296,12 +296,16 @@ fieldset.m-fieldset .m-form-tip {
   gap: 8px;
 }
 .m-fields-group-list .m-fields-group-list-footer {
-  display: flex;
   justify-content: space-between;
   margin-top: 10px;
   margin-bottom: 16px;
 }
 
+/** 最外层的groupList需要每个item需要增加空白区域界限时，增加outer-gorup_list可以实现 */
+.m-container-group-list.outer-gorup_list > .m-fields-group-list > .m-fields-group-list-item {
+  margin-bottom: 10px;
+}
+
 .m-form-panel .el-card__header:hover {
   background: #f2f6fc;
 }

package/dist/es/submitForm.js

@@ -3,6 +3,8 @@ import { applyExtendState } from "./utils/form.js";
 import Form_default from "./Form.js";
 import { createApp, defineComponent, h, nextTick, provide, ref, watch } from "vue";
 //#region packages/form/src/submitForm.ts
+/** 未指定或传入非正数 timeout 时的兜底超时（毫秒），保证非 debug 挂载始终能被清理 */
+var DEFAULT_MOUNT_TIMEOUT = 1e4;
 /**
 * submitForm / validateForm 的公共脚手架：
 *
@@ -13,14 +15,19 @@ import { createApp, defineComponent, h, nextTick, provide, ref, watch } from "vu
 * 容器创建、卸载、超时、上下文注入等模板代码在此统一收口。
 */
 var mountFormInstance = (options) => {
-	const { formProps, appContext, timeout, timeoutMessage, hidden = true, skipTimeout = false, createWrapper } = options;
+	const { formProps, appContext, timeout, timeoutMessage, hidden = true, skipTimeout = false, signal, createWrapper } = options;
 	return new Promise((resolve, reject) => {
-		const container = document.createElement("div");
-		if (hidden) container.style.display = "none";
-		document.body.appendChild(container);
+		if (signal?.aborted) {
+			reject(signal.reason ?? /* @__PURE__ */ new Error("mountFormInstance aborted"));
+			return;
+		}
 		let cleaned = false;
 		let timer = null;
+		let onAbort = null;
 		const instance = { app: null };
+		const container = document.createElement("div");
+		if (hidden) container.style.display = "none";
+		document.body.appendChild(container);
 		const cleanup = () => {
 			if (cleaned) return;
 			cleaned = true;
@@ -28,58 +35,71 @@ var mountFormInstance = (options) => {
 				clearTimeout(timer);
 				timer = null;
 			}
+			if (signal && onAbort) {
+				signal.removeEventListener("abort", onAbort);
+				onAbort = null;
+			}
 			try {
 				instance.app?.unmount();
 			} catch {}
 			container.parentNode?.removeChild(container);
 		};
-		const formRef = ref(null);
-		const { extendState, ...restFormProps } = formProps;
-		const userWrapper = createWrapper({
-			formRef,
-			formProps: restFormProps,
-			cleanup,
-			resolve,
-			reject
-		});
-		const wrapperComponent = typeof extendState === "function" ? defineComponent({
-			name: "MFormExtendStateInjector",
-			setup() {
-				watch(() => formRef.value, (form) => {
-					if (!form) return;
-					let result;
-					try {
-						result = extendState(form.formState);
-					} catch (e) {
-						console.error("[MForm] extendState failed:", e);
-						return;
-					}
-					const apply = (state) => applyExtendState(form.formState, state);
-					if (result && typeof result.then === "function") result.then(apply, (e) => console.error("[MForm] extendState failed:", e));
-					else apply(result);
-				}, {
-					flush: "sync",
-					immediate: true
-				});
-				return () => h(userWrapper);
-			}
-		}) : userWrapper;
-		const app = createApp(hidden ? defineComponent({
-			name: "MFormSilentProvider",
-			setup() {
-				provide(FORM_SILENT_MODE_KEY, true);
-				return () => h(wrapperComponent);
-			}
-		}) : wrapperComponent);
-		instance.app = app;
-		if (appContext) Object.assign(app._context, appContext);
-		if (timeout > 0 && !skipTimeout) timer = setTimeout(() => {
-			if (!cleaned) {
-				reject(new Error(timeoutMessage));
+		if (signal) {
+			onAbort = () => {
+				if (cleaned) return;
+				reject(signal.reason ?? /* @__PURE__ */ new Error("mountFormInstance aborted"));
 				cleanup();
-			}
-		}, timeout);
+			};
+			signal.addEventListener("abort", onAbort);
+		}
 		try {
+			const formRef = ref(null);
+			const { extendState, ...restFormProps } = formProps;
+			const userWrapper = createWrapper({
+				formRef,
+				formProps: restFormProps,
+				cleanup,
+				resolve,
+				reject
+			});
+			const wrapperComponent = typeof extendState === "function" ? defineComponent({
+				name: "MFormExtendStateInjector",
+				setup() {
+					watch(() => formRef.value, (form) => {
+						if (!form) return;
+						let result;
+						try {
+							result = extendState(form.formState);
+						} catch (e) {
+							console.error("[MForm] extendState failed:", e);
+							return;
+						}
+						const reservedStateKeys = new Set(Reflect.ownKeys(form.formState));
+						const apply = (state) => applyExtendState(form.formState, state, reservedStateKeys);
+						if (result && typeof result.then === "function") result.then(apply, (e) => console.error("[MForm] extendState failed:", e));
+						else apply(result);
+					}, {
+						flush: "sync",
+						immediate: true
+					});
+					return () => h(userWrapper);
+				}
+			}) : userWrapper;
+			const app = createApp(hidden ? defineComponent({
+				name: "MFormSilentProvider",
+				setup() {
+					provide(FORM_SILENT_MODE_KEY, true);
+					return () => h(wrapperComponent);
+				}
+			}) : wrapperComponent);
+			instance.app = app;
+			if (appContext) Object.assign(app._context, appContext);
+			if (!skipTimeout) timer = setTimeout(() => {
+				if (!cleaned) {
+					reject(new Error(timeoutMessage));
+					cleanup();
+				}
+			}, timeout > 0 ? timeout : DEFAULT_MOUNT_TIMEOUT);
 			app.mount(container);
 		} catch (err) {
 			reject(err);
@@ -212,11 +232,12 @@ var createDebugWrapper = (options) => {
 * ```
 */
 var submitForm = (options) => {
-	const { native, appContext, timeout = 1e4, returnChangeRecords, debug = false, ...formProps } = options;
+	const { native, appContext, timeout = 1e4, returnChangeRecords, debug = false, signal, ...formProps } = options;
 	return mountFormInstance({
 		formProps,
 		appContext,
 		timeout,
+		signal,
 		hidden: !debug,
 		skipTimeout: debug,
 		timeoutMessage: `submitForm timeout after ${timeout}ms: form is not initialized.`,
@@ -353,7 +374,7 @@ var stripTabItemsLazy = (config) => {
 * ```
 */
 var validateForm = (options) => {
-	const { appContext, timeout = 1e4, debug = false, config, ...rest } = options;
+	const { appContext, timeout = 1e4, debug = false, config, signal, ...rest } = options;
 	return mountFormInstance({
 		formProps: {
 			...rest,
@@ -361,6 +382,7 @@ var validateForm = (options) => {
 		},
 		appContext,
 		timeout,
+		signal,
 		hidden: !debug,
 		skipTimeout: debug,
 		timeoutMessage: `validateForm timeout after ${timeout}ms: form is not initialized.`,

package/dist/es/utils/form.js

@@ -211,15 +211,19 @@ var sortChange = (data, { prop, order }) => {
 * - accessor 描述符（`{ get stage() { return ... } }`）按原样 defineProperty，调用方
 *   可控制读时求值；强制 `configurable: true` 以便下一次合并可再 define。
 *
-* 注意：formState 上由 props 派生的字段（keyProp / popperClass / config / initValues /
-* isCompare / lastValues / parentValues）是只读 getter（无 setter），extendState 若以
-* 普通字段形式返回同名 key，直接赋值会让 proxy 的 set trap 失败并抛出
-* `TypeError: 'set' on proxy: trap returned falsish`，这里统一跳过并告警；
-* 如确需覆盖，可在 extendState 中以 get 访问器形式返回。
+* 注意：extendState 只能向 formState「新增」字段，不允许覆盖其已有 key。
+* 调用方可通过 `reservedKeys` 传入合并前已存在的内置 key 快照（keyProp / popperClass /
+* config / initValues / isCompare / lastValues / parentValues / values / $emit / fields /
+* post 等），命中这些 key 时统一跳过并告警。
+*
+* 兜底：未传 `reservedKeys` 时，仍会拦截 props 派生的只读 getter 字段（无 setter），
+* 否则以普通字段形式赋值会让 proxy 的 set trap 抛出
+* `TypeError: 'set' on proxy: trap returned falsish`。
 */
-var applyExtendState = (formState, state) => {
+var applyExtendState = (formState, state, reservedKeys) => {
 	if (!state) return;
 	for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(state))) {
+		if (reservedKeys?.has(key)) continue;
 		if (!("value" in descriptor)) {
 			descriptor.configurable = true;
 			Object.defineProperty(formState, key, descriptor);

package/dist/es/utils/typeMatch.js

@@ -89,7 +89,7 @@ var stringifyExampleValue = (value) => {
 	}
 	return String(value);
 };
-var MAX_SUGGESTION_OPTIONS = 5;
+var MAX_SUGGESTION_OPTIONS = 20;
 /**
 * 生成「请使用以下某一个值：xxx；xxx」形式的参考建议；无可选值时返回空字符串（不追加建议）。
 * 可选值超过 MAX_SUGGESTION_OPTIONS 个时仅展示前若干个并以「等」省略。

package/dist/style.css

@@ -296,12 +296,16 @@ fieldset.m-fieldset .m-form-tip {
   gap: 8px;
 }
 .m-fields-group-list .m-fields-group-list-footer {
-  display: flex;
   justify-content: space-between;
   margin-top: 10px;
   margin-bottom: 16px;
 }
 
+/** 最外层的groupList需要每个item需要增加空白区域界限时，增加outer-gorup_list可以实现 */
+.m-container-group-list.outer-gorup_list > .m-fields-group-list > .m-fields-group-list-item {
+  margin-bottom: 10px;
+}
+
 .m-form-panel .el-card__header:hover {
   background: #f2f6fc;
 }

package/dist/themes/magic-admin.css

@@ -296,12 +296,16 @@ fieldset.m-fieldset .m-form-tip {
   gap: 8px;
 }
 .m-fields-group-list .m-fields-group-list-footer {
-  display: flex;
   justify-content: space-between;
   margin-top: 10px;
   margin-bottom: 16px;
 }
 
+/** 最外层的groupList需要每个item需要增加空白区域界限时，增加outer-gorup_list可以实现 */
+.m-container-group-list.outer-gorup_list > .m-fields-group-list > .m-fields-group-list-item {
+  margin-bottom: 10px;
+}
+
 .m-form-panel .el-card__header:hover {
   background: #f2f6fc;
 }
@@ -496,4 +500,10 @@ fieldset.m-fieldset .m-form-tip {
 }
 .m-form.m-form--magic-admin .m-form-container .m-form-container-expand {
   text-align: left;
+}
+.m-form.m-form--magic-admin .m-fields-group-list .el-table__empty-block .el-table__empty-text {
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.03);
+  margin-top: 8px;
+  border-radius: 4px;
 }

package/dist/tmagic-form.umd.cjs

@@ -2816,7 +2816,7 @@
 		}
 		return String(value);
 	};
-	var MAX_SUGGESTION_OPTIONS = 5;
+	var MAX_SUGGESTION_OPTIONS = 20;
 	/**
 	* 生成「请使用以下某一个值：xxx；xxx」形式的参考建议；无可选值时返回空字符串（不追加建议）。
 	* 可选值超过 MAX_SUGGESTION_OPTIONS 个时仅展示前若干个并以「等」省略。
@@ -3340,15 +3340,19 @@
 	* - accessor 描述符（`{ get stage() { return ... } }`）按原样 defineProperty，调用方
 	*   可控制读时求值；强制 `configurable: true` 以便下一次合并可再 define。
 	*
-	* 注意：formState 上由 props 派生的字段（keyProp / popperClass / config / initValues /
-	* isCompare / lastValues / parentValues）是只读 getter（无 setter），extendState 若以
-	* 普通字段形式返回同名 key，直接赋值会让 proxy 的 set trap 失败并抛出
-	* `TypeError: 'set' on proxy: trap returned falsish`，这里统一跳过并告警；
-	* 如确需覆盖，可在 extendState 中以 get 访问器形式返回。
+	* 注意：extendState 只能向 formState「新增」字段，不允许覆盖其已有 key。
+	* 调用方可通过 `reservedKeys` 传入合并前已存在的内置 key 快照（keyProp / popperClass /
+	* config / initValues / isCompare / lastValues / parentValues / values / $emit / fields /
+	* post 等），命中这些 key 时统一跳过并告警。
+	*
+	* 兜底：未传 `reservedKeys` 时，仍会拦截 props 派生的只读 getter 字段（无 setter），
+	* 否则以普通字段形式赋值会让 proxy 的 set trap 抛出
+	* `TypeError: 'set' on proxy: trap returned falsish`。
 	*/
-	var applyExtendState = (formState, state) => {
+	var applyExtendState = (formState, state, reservedKeys) => {
 		if (!state) return;
 		for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(state))) {
+			if (reservedKeys?.has(key)) continue;
 			if (!("value" in descriptor)) {
 				descriptor.configurable = true;
 				Object.defineProperty(formState, key, descriptor);
@@ -4167,6 +4171,17 @@
 				}
 			});
 			/**
+			* formState 的内置 key 快照（keyProp / values / $emit / fields / post 等）。
+			*
+			* 在 `extendState` 首次合并前捕获，`applyExtendState` 会据此禁止 `extendState`
+			* 覆盖这些已有字段（只能新增字段），避免表单核心状态被外部意外改写。
+			*
+			* 之所以在此处（effect 之外）捕获而不是在 `applyExtendState` 内动态取：
+			* `watchEffect` 会在依赖变化时重跑，若动态取，`extendState` 自己新增的字段在第二次
+			* 合并时也会被当成「已有 key」而拒绝刷新；这里只锁定内置字段即可规避该问题。
+			*/
+			const reservedStateKeys = new Set(Reflect.ownKeys(formState));
+			/**
 			* `extendState` 的同步段（直到第一个 `await` 之前）所访问的任何响应式数据，
 			* 都会被 `watchEffect` 自动跟踪。这样可以兼容历史用法 ——
 			*
@@ -4201,7 +4216,7 @@
 					return;
 				}
 				if (stale) return;
-				applyExtendState(formState, state);
+				applyExtendState(formState, state, reservedStateKeys);
 			});
 			(0, vue.provide)("mForm", formState);
 			/**
@@ -4405,6 +4420,8 @@
 	});
 	//#endregion
 	//#region packages/form/src/submitForm.ts
+	/** 未指定或传入非正数 timeout 时的兜底超时（毫秒），保证非 debug 挂载始终能被清理 */
+	var DEFAULT_MOUNT_TIMEOUT = 1e4;
 	/**
 	* submitForm / validateForm 的公共脚手架：
 	*
@@ -4415,14 +4432,19 @@
 	* 容器创建、卸载、超时、上下文注入等模板代码在此统一收口。
 	*/
 	var mountFormInstance = (options) => {
-		const { formProps, appContext, timeout, timeoutMessage, hidden = true, skipTimeout = false, createWrapper } = options;
+		const { formProps, appContext, timeout, timeoutMessage, hidden = true, skipTimeout = false, signal, createWrapper } = options;
 		return new Promise((resolve, reject) => {
-			const container = document.createElement("div");
-			if (hidden) container.style.display = "none";
-			document.body.appendChild(container);
+			if (signal?.aborted) {
+				reject(signal.reason ?? /* @__PURE__ */ new Error("mountFormInstance aborted"));
+				return;
+			}
 			let cleaned = false;
 			let timer = null;
+			let onAbort = null;
 			const instance = { app: null };
+			const container = document.createElement("div");
+			if (hidden) container.style.display = "none";
+			document.body.appendChild(container);
 			const cleanup = () => {
 				if (cleaned) return;
 				cleaned = true;
@@ -4430,58 +4452,71 @@
 					clearTimeout(timer);
 					timer = null;
 				}
+				if (signal && onAbort) {
+					signal.removeEventListener("abort", onAbort);
+					onAbort = null;
+				}
 				try {
 					instance.app?.unmount();
 				} catch {}
 				container.parentNode?.removeChild(container);
 			};
-			const formRef = (0, vue.ref)(null);
-			const { extendState, ...restFormProps } = formProps;
-			const userWrapper = createWrapper({
-				formRef,
-				formProps: restFormProps,
-				cleanup,
-				resolve,
-				reject
-			});
-			const wrapperComponent = typeof extendState === "function" ? (0, vue.defineComponent)({
-				name: "MFormExtendStateInjector",
-				setup() {
-					(0, vue.watch)(() => formRef.value, (form) => {
-						if (!form) return;
-						let result;
-						try {
-							result = extendState(form.formState);
-						} catch (e) {
-							console.error("[MForm] extendState failed:", e);
-							return;
-						}
-						const apply = (state) => applyExtendState(form.formState, state);
-						if (result && typeof result.then === "function") result.then(apply, (e) => console.error("[MForm] extendState failed:", e));
-						else apply(result);
-					}, {
-						flush: "sync",
-						immediate: true
-					});
-					return () => (0, vue.h)(userWrapper);
-				}
-			}) : userWrapper;
-			const app = (0, vue.createApp)(hidden ? (0, vue.defineComponent)({
-				name: "MFormSilentProvider",
-				setup() {
-					(0, vue.provide)(FORM_SILENT_MODE_KEY, true);
-					return () => (0, vue.h)(wrapperComponent);
-				}
-			}) : wrapperComponent);
-			instance.app = app;
-			if (appContext) Object.assign(app._context, appContext);
-			if (timeout > 0 && !skipTimeout) timer = setTimeout(() => {
-				if (!cleaned) {
-					reject(new Error(timeoutMessage));
+			if (signal) {
+				onAbort = () => {
+					if (cleaned) return;
+					reject(signal.reason ?? /* @__PURE__ */ new Error("mountFormInstance aborted"));
 					cleanup();
-				}
-			}, timeout);
+				};
+				signal.addEventListener("abort", onAbort);
+			}
 			try {
+				const formRef = (0, vue.ref)(null);
+				const { extendState, ...restFormProps } = formProps;
+				const userWrapper = createWrapper({
+					formRef,
+					formProps: restFormProps,
+					cleanup,
+					resolve,
+					reject
+				});
+				const wrapperComponent = typeof extendState === "function" ? (0, vue.defineComponent)({
+					name: "MFormExtendStateInjector",
+					setup() {
+						(0, vue.watch)(() => formRef.value, (form) => {
+							if (!form) return;
+							let result;
+							try {
+								result = extendState(form.formState);
+							} catch (e) {
+								console.error("[MForm] extendState failed:", e);
+								return;
+							}
+							const reservedStateKeys = new Set(Reflect.ownKeys(form.formState));
+							const apply = (state) => applyExtendState(form.formState, state, reservedStateKeys);
+							if (result && typeof result.then === "function") result.then(apply, (e) => console.error("[MForm] extendState failed:", e));
+							else apply(result);
+						}, {
+							flush: "sync",
+							immediate: true
+						});
+						return () => (0, vue.h)(userWrapper);
+					}
+				}) : userWrapper;
+				const app = (0, vue.createApp)(hidden ? (0, vue.defineComponent)({
+					name: "MFormSilentProvider",
+					setup() {
+						(0, vue.provide)(FORM_SILENT_MODE_KEY, true);
+						return () => (0, vue.h)(wrapperComponent);
+					}
+				}) : wrapperComponent);
+				instance.app = app;
+				if (appContext) Object.assign(app._context, appContext);
+				if (!skipTimeout) timer = setTimeout(() => {
+					if (!cleaned) {
+						reject(new Error(timeoutMessage));
+						cleanup();
+					}
+				}, timeout > 0 ? timeout : DEFAULT_MOUNT_TIMEOUT);
 				app.mount(container);
 			} catch (err) {
 				reject(err);
@@ -4614,11 +4649,12 @@
 	* ```
 	*/
 	var submitForm = (options) => {
-		const { native, appContext, timeout = 1e4, returnChangeRecords, debug = false, ...formProps } = options;
+		const { native, appContext, timeout = 1e4, returnChangeRecords, debug = false, signal, ...formProps } = options;
 		return mountFormInstance({
 			formProps,
 			appContext,
 			timeout,
+			signal,
 			hidden: !debug,
 			skipTimeout: debug,
 			timeoutMessage: `submitForm timeout after ${timeout}ms: form is not initialized.`,
@@ -4755,7 +4791,7 @@
 	* ```
 	*/
 	var validateForm = (options) => {
-		const { appContext, timeout = 1e4, debug = false, config, ...rest } = options;
+		const { appContext, timeout = 1e4, debug = false, config, signal, ...rest } = options;
 		return mountFormInstance({
 			formProps: {
 				...rest,
@@ -4763,6 +4799,7 @@
 			},
 			appContext,
 			timeout,
+			signal,
 			hidden: !debug,
 			skipTimeout: debug,
 			timeoutMessage: `validateForm timeout after ${timeout}ms: form is not initialized.`,

package/package.json

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

package/src/Form.vue

@@ -261,6 +261,18 @@ const formState: FormState = reactive<FormState>({
   },
 });
 
+/**
+ * formState 的内置 key 快照（keyProp / values / $emit / fields / post 等）。
+ *
+ * 在 `extendState` 首次合并前捕获，`applyExtendState` 会据此禁止 `extendState`
+ * 覆盖这些已有字段（只能新增字段），避免表单核心状态被外部意外改写。
+ *
+ * 之所以在此处（effect 之外）捕获而不是在 `applyExtendState` 内动态取：
+ * `watchEffect` 会在依赖变化时重跑，若动态取，`extendState` 自己新增的字段在第二次
+ * 合并时也会被当成「已有 key」而拒绝刷新；这里只锁定内置字段即可规避该问题。
+ */
+const reservedStateKeys = new Set<string | symbol>(Reflect.ownKeys(formState));
+
 /**
  * `extendState` 的同步段（直到第一个 `await` 之前）所访问的任何响应式数据，
  * 都会被 `watchEffect` 自动跟踪。这样可以兼容历史用法 ——
@@ -299,7 +311,7 @@ watchEffect(async (onCleanup) => {
   }
   if (stale) return;
 
-  applyExtendState(formState, state);
+  applyExtendState(formState, state, reservedStateKeys);
 });
 
 provide('mForm', formState);

package/src/submitForm.ts

@@ -87,6 +87,11 @@ export interface SubmitFormOptions {
    */
   debug?: boolean;
   typeMatchValid?: boolean;
+  /**
+   * 外部中断信号。abort 时会立即以 `signal.reason` reject 并卸载临时表单实例、移除容器。
+   * 主要用于 `debug` 模式（无超时兜底）下取消一个被放弃的表单弹层，避免其无限驻留在页面上。
+   */
+  signal?: AbortSignal;
 }
 // #endregion SubmitFormOptions
 
@@ -127,7 +132,7 @@ interface MountFormInstanceOptions<T> {
   formProps: Record<string, any>;
   /** 父级应用上下文，用于继承全局组件、指令、provide 等 */
   appContext?: AppContext | null;
-  /** 等待表单初始化的最长时间（毫秒），<=0 表示不注册超时 */
+  /** 等待表单初始化的最长时间（毫秒），<=0 时回退到默认超时以保证兜底清理生效 */
   timeout: number;
   /** 超时 reject 的错误文案 */
   timeoutMessage: string;
@@ -135,10 +140,15 @@ interface MountFormInstanceOptions<T> {
   hidden?: boolean;
   /** 是否跳过超时注册。调试模式等待人工操作，应传 `true` */
   skipTimeout?: boolean;
+  /** 外部中断信号：abort 时会 reject 并卸载实例、移除容器，用于取消无超时（如 debug）的挂载 */
+  signal?: AbortSignal;
   /** 构造 wrapper 组件 */
   createWrapper: FormWrapperFactory<T>;
 }
 
+/** 未指定或传入非正数 timeout 时的兜底超时（毫秒），保证非 debug 挂载始终能被清理 */
+const DEFAULT_MOUNT_TIMEOUT = 10000;
+
 /**
  * submitForm / validateForm 的公共脚手架：
  *
@@ -149,20 +159,36 @@ interface MountFormInstanceOptions<T> {
  * 容器创建、卸载、超时、上下文注入等模板代码在此统一收口。
  */
 const mountFormInstance = <T>(options: MountFormInstanceOptions<T>): Promise<T> => {
-  const { formProps, appContext, timeout, timeoutMessage, hidden = true, skipTimeout = false, createWrapper } = options;
+  const {
+    formProps,
+    appContext,
+    timeout,
+    timeoutMessage,
+    hidden = true,
+    skipTimeout = false,
+    signal,
+    createWrapper,
+  } = options;
 
   return new Promise<T>((resolve, reject) => {
-    const container = document.createElement('div');
-    if (hidden) {
-      container.style.display = 'none';
+    // 已中断则直接 reject，不创建任何容器/实例
+    if (signal?.aborted) {
+      reject(signal.reason ?? new Error('mountFormInstance aborted'));
+      return;
     }
-    document.body.appendChild(container);
 
     let cleaned = false;
     let timer: ReturnType<typeof setTimeout> | null = null;
+    let onAbort: (() => void) | null = null;
     // 用 holder 持有 app，使 cleanup 可在 app 创建之前定义（const app + 无 TDZ / 无 use-before-define）
     const instance: { app: ReturnType<typeof createApp> | null } = { app: null };
 
+    const container = document.createElement('div');
+    if (hidden) {
+      container.style.display = 'none';
+    }
+    document.body.appendChild(container);
+
     const cleanup = () => {
       if (cleaned) return;
       cleaned = true;
@@ -170,6 +196,10 @@ const mountFormInstance = <T>(options: MountFormInstanceOptions<T>): Promise<T>
         clearTimeout(timer);
         timer = null;
       }
+      if (signal && onAbort) {
+        signal.removeEventListener('abort', onAbort);
+        onAbort = null;
+      }
       try {
         instance.app?.unmount();
       } catch {
@@ -178,81 +208,101 @@ const mountFormInstance = <T>(options: MountFormInstanceOptions<T>): Promise<T>
       container.parentNode?.removeChild(container);
     };
 
-    const formRef = ref<any>(null);
-
-    // 将 extendState 从 formProps 中剥离：不由 Form.vue 的 async watchEffect 异步应用，
-    // 而是在 wrapper 中通过 sync watch 在 formRef 就绪后直接写入 formState，
-    // 避免 display 等 filterFunction 在首次渲染时读到 undefined。
-    // 与 CompareForm / FormPanel 中「formRef.value.formState.services = ...」的做法一致。
-    const { extendState, ...restFormProps } = formProps;
-
-    const userWrapper = createWrapper({ formRef, formProps: restFormProps, cleanup, resolve, reject });
+    // 支持外部通过 AbortSignal 主动中断：debug 模式无超时兜底，若调用方放弃了该 Promise，
+    // 可通过 abort 卸载实例、移除遮罩/容器，避免无限驻留在 DOM 中。
+    if (signal) {
+      onAbort = () => {
+        if (cleaned) return;
+        reject(signal.reason ?? new Error('mountFormInstance aborted'));
+        cleanup();
+      };
+      signal.addEventListener('abort', onAbort);
+    }
 
-    const wrapperComponent =
-      typeof extendState === 'function'
+    // 从容器创建到 mount 的全流程统一 try/catch：任一步骤（createWrapper/createApp/上下文合并/mount）
+    // 抛错都会走到 cleanup，避免已插入 body 的 container 及未挂载的 app 残留导致泄漏。
+    try {
+      const formRef = ref<any>(null);
+
+      // 将 extendState 从 formProps 中剥离：不由 Form.vue 的 async watchEffect 异步应用，
+      // 而是在 wrapper 中通过 sync watch 在 formRef 就绪后直接写入 formState，
+      // 避免 display 等 filterFunction 在首次渲染时读到 undefined。
+      // 与 CompareForm / FormPanel 中「formRef.value.formState.services = ...」的做法一致。
+      const { extendState, ...restFormProps } = formProps;
+
+      const userWrapper = createWrapper({ formRef, formProps: restFormProps, cleanup, resolve, reject });
+
+      const wrapperComponent =
+        typeof extendState === 'function'
+          ? defineComponent({
+              name: 'MFormExtendStateInjector',
+              setup() {
+                watch(
+                  () => formRef.value,
+                  (form) => {
+                    if (!form) return;
+                    let result: any;
+                    try {
+                      result = extendState(form.formState);
+                    } catch (e) {
+                      console.error('[MForm] extendState failed:', e);
+                      return;
+                    }
+                    // formState 的内置 key 快照：在 extendState 合并前捕获，
+                    // 供 applyExtendState 禁止 extendState 覆盖这些已有字段（只能新增），
+                    // 与 Form.vue 中 reservedStateKeys 的语义保持一致。
+                    const reservedStateKeys = new Set<string | symbol>(Reflect.ownKeys(form.formState));
+                    // 合并逻辑收口在 applyExtendState：props 派生的只读 getter 字段
+                    // （keyProp 等）以普通字段形式返回时会被跳过并告警，避免 proxy set 抛错
+                    const apply = (state: Record<string, any> | null | undefined) =>
+                      applyExtendState(form.formState, state, reservedStateKeys);
+                    if (result && typeof result.then === 'function') {
+                      result.then(apply, (e: any) => console.error('[MForm] extendState failed:', e));
+                    } else {
+                      apply(result);
+                    }
+                  },
+                  { flush: 'sync', immediate: true },
+                );
+                return () => h(userWrapper);
+              },
+            })
+          : userWrapper;
+
+      // 静默（隐藏挂载）模式下注入静默标记：vs-code 等重型字段组件可据此跳过自身渲染，
+      // 校验/取值依赖 FormItem 与 model 值，与叶子 UI 组件无关（见 FORM_SILENT_MODE_KEY 注释）。
+      // 用组件级 provide 而非 app.provide：appContext 合并后 app._context.provides 与父级应用
+      // 共享引用，app.provide 会把标记泄漏到父级应用。
+      const rootComponent = hidden
         ? defineComponent({
-            name: 'MFormExtendStateInjector',
+            name: 'MFormSilentProvider',
             setup() {
-              watch(
-                () => formRef.value,
-                (form) => {
-                  if (!form) return;
-                  let result: any;
-                  try {
-                    result = extendState(form.formState);
-                  } catch (e) {
-                    console.error('[MForm] extendState failed:', e);
-                    return;
-                  }
-                  // 合并逻辑收口在 applyExtendState：props 派生的只读 getter 字段
-                  // （keyProp 等）以普通字段形式返回时会被跳过并告警，避免 proxy set 抛错
-                  const apply = (state: Record<string, any> | null | undefined) =>
-                    applyExtendState(form.formState, state);
-                  if (result && typeof result.then === 'function') {
-                    result.then(apply, (e: any) => console.error('[MForm] extendState failed:', e));
-                  } else {
-                    apply(result);
-                  }
-                },
-                { flush: 'sync', immediate: true },
-              );
-              return () => h(userWrapper);
+              provide(FORM_SILENT_MODE_KEY, true);
+              return () => h(wrapperComponent);
             },
           })
-        : userWrapper;
-
-    // 静默（隐藏挂载）模式下注入静默标记：vs-code 等重型字段组件可据此跳过自身渲染，
-    // 校验/取值依赖 FormItem 与 model 值，与叶子 UI 组件无关（见 FORM_SILENT_MODE_KEY 注释）。
-    // 用组件级 provide 而非 app.provide：appContext 合并后 app._context.provides 与父级应用
-    // 共享引用，app.provide 会把标记泄漏到父级应用。
-    const rootComponent = hidden
-      ? defineComponent({
-          name: 'MFormSilentProvider',
-          setup() {
-            provide(FORM_SILENT_MODE_KEY, true);
-            return () => h(wrapperComponent);
-          },
-        })
-      : wrapperComponent;
+        : wrapperComponent;
 
-    const app = createApp(rootComponent);
-    instance.app = app;
+      const app = createApp(rootComponent);
+      instance.app = app;
 
-    // 继承父级应用上下文（components / directives / provides / config 等）
-    if (appContext) {
-      Object.assign(app._context, appContext);
-    }
+      // 继承父级应用上下文（components / directives / provides / config 等）
+      if (appContext) {
+        Object.assign(app._context, appContext);
+      }
 
-    if (timeout > 0 && !skipTimeout) {
-      timer = setTimeout(() => {
-        if (!cleaned) {
-          reject(new Error(timeoutMessage));
-          cleanup();
-        }
-      }, timeout);
-    }
+      // 非 debug（未跳过超时）场景始终注册超时兜底：timeout 为非正数时回退到默认值，
+      // 避免表单永不初始化时实例/容器/watcher 无限驻留而泄漏。
+      if (!skipTimeout) {
+        const effectiveTimeout = timeout > 0 ? timeout : DEFAULT_MOUNT_TIMEOUT;
+        timer = setTimeout(() => {
+          if (!cleaned) {
+            reject(new Error(timeoutMessage));
+            cleanup();
+          }
+        }, effectiveTimeout);
+      }
 
-    try {
       app.mount(container);
     } catch (err) {
       reject(err);
@@ -450,12 +500,13 @@ const createDebugWrapper = (options: DebugWrapperOptions): Component => {
  * ```
  */
 export const submitForm = (options: SubmitFormOptions): Promise<any> => {
-  const { native, appContext, timeout = 10000, returnChangeRecords, debug = false, ...formProps } = options;
+  const { native, appContext, timeout = 10000, returnChangeRecords, debug = false, signal, ...formProps } = options;
 
   return mountFormInstance<any>({
     formProps,
     appContext,
     timeout,
+    signal,
     // 调试模式需把表单展示出来；普通模式隐藏挂载
     hidden: !debug,
     // 调试模式等待人工操作，不应用超时
@@ -559,6 +610,11 @@ export interface ValidateFormOptions {
    */
   debug?: boolean;
   typeMatchValid?: boolean;
+  /**
+   * 外部中断信号。abort 时会立即以 `signal.reason` reject 并卸载临时表单实例、移除容器。
+   * 主要用于 `debug` 模式（无超时兜底）下取消一个被放弃的表单弹层，避免其无限驻留在页面上。
+   */
+  signal?: AbortSignal;
 }
 // #endregion ValidateFormOptions
 
@@ -654,7 +710,7 @@ export const stripTabItemsLazy = (config: FormConfig): FormConfig => {
  * ```
  */
 export const validateForm = (options: ValidateFormOptions): Promise<string> => {
-  const { appContext, timeout = 10000, debug = false, config, ...rest } = options;
+  const { appContext, timeout = 10000, debug = false, config, signal, ...rest } = options;
 
   // 去掉 tab 容器各标签页的 lazy，确保懒加载标签页内的字段也参与校验
   const formProps = { ...rest, config: stripTabItemsLazy(config) };
@@ -663,6 +719,7 @@ export const validateForm = (options: ValidateFormOptions): Promise<string> => {
     formProps,
     appContext,
     timeout,
+    signal,
     // 调试模式需把表单展示出来；普通模式隐藏挂载
     hidden: !debug,
     // 调试模式等待人工操作，不应用超时

package/src/theme/group-list.scss

@@ -2,7 +2,6 @@
   .m-fields-group-list-item.tmagic-design-card--flat:last-child {
     border: 0;
   }
-
   .el-button--text {
     padding: 0;
     margin-bottom: 7px;
@@ -32,9 +31,19 @@
   }
 
   .m-fields-group-list-footer {
-    display: flex;
     justify-content: space-between;
     margin-top: 10px;
     margin-bottom: 16px;
   }
 }
+
+/** 最外层的groupList需要每个item需要增加空白区域界限时，增加outer-gorup_list可以实现 */
+.m-container-group-list {
+  &.outer-gorup_list {
+    > .m-fields-group-list {
+      > .m-fields-group-list-item {
+        margin-bottom: 10px;
+      }
+    }
+  }
+}

package/src/theme/themes/magic-admin/index.scss

@@ -92,4 +92,15 @@
       text-align: left;
     }
   }
+
+  .m-fields-group-list {
+    .el-table__empty-block {
+      .el-table__empty-text {
+        width: 100%;
+        background-color: rgba(0, 0, 0, 0.03);
+        margin-top: 8px;
+        border-radius: 4px;
+      }
+    }
+  }
 }

package/src/utils/form.ts

@@ -449,16 +449,27 @@ export const sortChange = (data: any[], { prop, order }: SortProp) => {
  * - accessor 描述符（`{ get stage() { return ... } }`）按原样 defineProperty，调用方
  *   可控制读时求值；强制 `configurable: true` 以便下一次合并可再 define。
  *
- * 注意：formState 上由 props 派生的字段（keyProp / popperClass / config / initValues /
- * isCompare / lastValues / parentValues）是只读 getter（无 setter），extendState 若以
- * 普通字段形式返回同名 key，直接赋值会让 proxy 的 set trap 失败并抛出
- * `TypeError: 'set' on proxy: trap returned falsish`，这里统一跳过并告警；
- * 如确需覆盖，可在 extendState 中以 get 访问器形式返回。
+ * 注意：extendState 只能向 formState「新增」字段，不允许覆盖其已有 key。
+ * 调用方可通过 `reservedKeys` 传入合并前已存在的内置 key 快照（keyProp / popperClass /
+ * config / initValues / isCompare / lastValues / parentValues / values / $emit / fields /
+ * post 等），命中这些 key 时统一跳过并告警。
+ *
+ * 兜底：未传 `reservedKeys` 时，仍会拦截 props 派生的只读 getter 字段（无 setter），
+ * 否则以普通字段形式赋值会让 proxy 的 set trap 抛出
+ * `TypeError: 'set' on proxy: trap returned falsish`。
  */
-export const applyExtendState = (formState: FormState, state: Record<string, any> | null | undefined): void => {
+export const applyExtendState = (
+  formState: FormState,
+  state: Record<string, any> | null | undefined,
+  reservedKeys?: Set<string | symbol>,
+): void => {
   if (!state) return;
 
   for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(state))) {
+    if (reservedKeys?.has(key)) {
+      continue;
+    }
+
     if (!('value' in descriptor)) {
       descriptor.configurable = true;
       Object.defineProperty(formState, key, descriptor);

package/src/utils/typeMatch.ts

@@ -142,7 +142,7 @@ const stringifyExampleValue = (value: any): string => {
 };
 
 // 参考建议中最多展示的可选值个数，超出以「等」省略。
-const MAX_SUGGESTION_OPTIONS = 5;
+const MAX_SUGGESTION_OPTIONS = 20;
 
 /**
  * 生成「请使用以下某一个值：xxx；xxx」形式的参考建议；无可选值时返回空字符串（不追加建议）。

package/types/index.d.ts

@@ -128,6 +128,11 @@ interface SubmitFormOptions {
    */
   debug?: boolean;
   typeMatchValid?: boolean;
+  /**
+   * 外部中断信号。abort 时会立即以 `signal.reason` reject 并卸载临时表单实例、移除容器。
+   * 主要用于 `debug` 模式（无超时兜底）下取消一个被放弃的表单弹层，避免其无限驻留在页面上。
+   */
+  signal?: AbortSignal;
 }
 /**
  * 开启 `returnChangeNodes` 时 submitForm 的返回结果
@@ -209,6 +214,11 @@ interface ValidateFormOptions {
    */
   debug?: boolean;
   typeMatchValid?: boolean;
+  /**
+   * 外部中断信号。abort 时会立即以 `signal.reason` reject 并卸载临时表单实例、移除容器。
+   * 主要用于 `debug` 模式（无超时兜底）下取消一个被放弃的表单弹层，避免其无限驻留在页面上。
+   */
+  signal?: AbortSignal;
 }
 /**
  * 返回一份去除了 tab 标签页 lazy 的配置副本。
@@ -290,13 +300,16 @@ declare const sortChange: (data: any[], {
  * - accessor 描述符（`{ get stage() { return ... } }`）按原样 defineProperty，调用方
  *   可控制读时求值；强制 `configurable: true` 以便下一次合并可再 define。
  *
- * 注意：formState 上由 props 派生的字段（keyProp / popperClass / config / initValues /
- * isCompare / lastValues / parentValues）是只读 getter（无 setter），extendState 若以
- * 普通字段形式返回同名 key，直接赋值会让 proxy 的 set trap 失败并抛出
- * `TypeError: 'set' on proxy: trap returned falsish`，这里统一跳过并告警；
- * 如确需覆盖，可在 extendState 中以 get 访问器形式返回。
+ * 注意：extendState 只能向 formState「新增」字段，不允许覆盖其已有 key。
+ * 调用方可通过 `reservedKeys` 传入合并前已存在的内置 key 快照（keyProp / popperClass /
+ * config / initValues / isCompare / lastValues / parentValues / values / $emit / fields /
+ * post 等），命中这些 key 时统一跳过并告警。
+ *
+ * 兜底：未传 `reservedKeys` 时，仍会拦截 props 派生的只读 getter 字段（无 setter），
+ * 否则以普通字段形式赋值会让 proxy 的 set trap 抛出
+ * `TypeError: 'set' on proxy: trap returned falsish`。
  */
-declare const applyExtendState: (formState: schema_d_exports.FormState, state: Record<string, any> | null | undefined) => void;
+declare const applyExtendState: (formState: schema_d_exports.FormState, state: Record<string, any> | null | undefined, reservedKeys?: Set<string | symbol>) => void;
 declare const createObjectProp: (prop: string, key: string, name?: string | number) => string;
 //#endregion
 //#region temp/packages/form/src/utils/useAddField.d.ts