@tmagic/form 1.8.0-beta.16 → 1.8.0-beta.18

package/dist/tmagic-form.umd.cjs

@@ -3088,6 +3088,11 @@
 			return;
 		}
 	};
+	/**
+	* 校验取值与字段 type 是否匹配；通过返回 undefined，否则返回错误文案。
+	*
+	* 命中的自定义规则是异步校验器时返回 Promise，内置规则始终同步返回。
+	*/
 	var validateTypeMatch = (value, mForm, props, message) => {
 		if (isEmptyValue(value) || isEmptyArray(value)) return;
 		if (!props.config?.name) return;
@@ -3103,34 +3108,106 @@
 		});
 		return validateBuiltinTypeMatch(value, fieldType, mForm, props, message);
 	};
+	var toError = (error) => error instanceof Error ? error : /* @__PURE__ */ new Error(`${error}`);
 	var createTypeMatchValidator = (mForm, props, rule) => {
 		const originalValidator = typeof rule.validator === "function" ? rule.validator : void 0;
+		/**
+		* 每次校验取一个自增序号，只有最新一轮的结论会被采用。
+		*
+		* 旧值的在途校验不能用自己的结论结算：它可能晚于新校验结束，用过期结论覆盖新结论
+		* （表单取最后结束的那次结果）；也不能在新校验开始时无条件按通过结算，否则
+		* `form.validate()` 会对一个还没校验过的值返回成功。因此所有尚未结算的调用都登记在
+		* pendingSettlers 中，等最新一轮出结论后用同一个结论一起结算。
+		*
+		* 不比较取值本身：配了 names 或取值为对象/数组时拿到的是同一个引用，就地修改后比较不出变化。
+		*/
+		let generation = 0;
+		let pendingSettlers = [];
 		return (asyncValidatorRule, value, callback, source, options) => {
 			const actualValue = props.config?.names ? props.model : value;
-			try {
-				const error = validateTypeMatch(actualValue, mForm, props, rule.message);
-				if (error) {
-					callback(new Error(error));
+			generation += 1;
+			const currentGeneration = generation;
+			/** 已有更新的一轮校验开始，本轮结论作废 */
+			const isStale = () => currentGeneration !== generation;
+			pendingSettlers.push((args) => callback(...args));
+			/**
+			* 结算本轮与被本轮取代的所有在途校验。
+			*
+			* async-validator 的 callback 不幂等：重复调用会让它的内部计数提前满足、错误信息重复；
+			* 原始 validator 写成 async 时很容易既调 callback 又返回 Promise，故所有回调都收敛到这里，
+			* 由「取出即出队」保证每个调用的 callback 只会被调用一次。
+			*/
+			const conclude = (...args) => {
+				if (isStale()) return;
+				const settlers = pendingSettlers;
+				pendingSettlers = [];
+				for (const settle of settlers) settle(args);
+			};
+			/**
+			* 执行原始 validator 并把结果统一转成 callback。
+			*
+			* async-validator 只解析同步返回给它的返回值（true / false / Error / 错误数组 / Promise，
+			* 抛错转成错误信息），异步路径已脱离它的调用栈，这些约定会失效导致校验永不结束，故复刻一份。
+			*/
+			const settleWithOriginalValidator = () => {
+				if (isStale()) return;
+				if (!originalValidator) {
+					conclude();
 					return;
 				}
-			} catch (error) {
-				console.error(error);
+				let result;
+				try {
+					result = originalValidator({
+						rule: asyncValidatorRule,
+						value: actualValue,
+						callback: conclude,
+						source,
+						options
+					}, {
+						values: mForm?.initValues || {},
+						model: props.model,
+						parent: mForm?.parentValues || {},
+						formValue: mForm?.values || props.model,
+						prop: props.prop,
+						config: props.config
+					}, mForm);
+				} catch (err) {
+					conclude(toError(err));
+					return;
+				}
+				if (isPromise(result)) result.then(() => conclude(), (err) => conclude(toError(err)));
+				else if (result === true) conclude();
+				else if (result === false) {
+					const field = asyncValidatorRule?.fullField || asyncValidatorRule?.field || props.prop;
+					conclude(new Error(rule.message || `${field} fails`));
+				} else if (result instanceof Error || Array.isArray(result)) conclude(result);
+			};
+			const skipFailedTypeMatch = (err) => {
+				console.error(err);
+				settleWithOriginalValidator();
+			};
+			let error;
+			try {
+				error = validateTypeMatch(actualValue, mForm, props, rule.message);
+			} catch (err) {
+				skipFailedTypeMatch(err);
+				return;
 			}
-			if (originalValidator) return originalValidator({
-				rule: asyncValidatorRule,
-				value: actualValue,
-				callback,
-				source,
-				options
-			}, {
-				values: mForm?.initValues || {},
-				model: props.model,
-				parent: mForm?.parentValues || {},
-				formValue: mForm?.values || props.model,
-				prop: props.prop,
-				config: props.config
-			}, mForm);
-			callback();
+			if (isPromise(error)) {
+				error.then((asyncMessage) => {
+					if (asyncMessage) {
+						conclude(new Error(asyncMessage));
+						return;
+					}
+					settleWithOriginalValidator();
+				}, skipFailedTypeMatch);
+				return;
+			}
+			if (error) {
+				conclude(new Error(error));
+				return;
+			}
+			settleWithOriginalValidator();
 		};
 	};
 	//#endregion
@@ -3149,15 +3226,16 @@
 				const callback = (error) => {
 					if (settled) return;
 					settled = true;
-					if (error) resolve({
+					const first = Array.isArray(error) ? error[0] : error;
+					if (first) resolve({
 						result: false,
-						message: typeof error === "string" ? error : error.message
+						message: typeof first === "string" ? first : first.message
 					});
 					else resolve(true);
 				};
 				try {
 					const result = validator(void 0, value, callback);
-					if (result !== null && typeof result.then === "function") Promise.resolve(result).then(() => {
+					if (result && typeof result.then === "function") Promise.resolve(result).then(() => {
 						if (!settled) callback();
 					}, (err) => {
 						callback(err instanceof Error ? err : new Error(String(err)));
@@ -4420,6 +4498,8 @@
 	});
 	//#endregion
 	//#region packages/form/src/submitForm.ts
+	/** 未指定或传入非正数 timeout 时的兜底超时（毫秒），保证非 debug 挂载始终能被清理 */
+	var DEFAULT_MOUNT_TIMEOUT = 1e4;
 	/**
 	* submitForm / validateForm 的公共脚手架：
 	*
@@ -4430,14 +4510,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;
@@ -4445,59 +4530,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 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 (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);
@@ -4630,11 +4727,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.`,
@@ -4771,7 +4869,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,
@@ -4779,6 +4877,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.16",
+  "version": "1.8.0-beta.18",
   "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.16",
-    "@tmagic/utils": "1.8.0-beta.16",
-    "@tmagic/form-schema": "1.8.0-beta.16"
+    "@tmagic/design": "1.8.0-beta.18",
+    "@tmagic/utils": "1.8.0-beta.18",
+    "@tmagic/form-schema": "1.8.0-beta.18"
   },
   "peerDependenciesMeta": {
     "typescript": {

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,85 +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;
-                  }
-                  // 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);
+              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);
@@ -454,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,
     // 调试模式等待人工操作，不应用超时
@@ -563,6 +610,11 @@ export interface ValidateFormOptions {
    */
   debug?: boolean;
   typeMatchValid?: boolean;
+  /**
+   * 外部中断信号。abort 时会立即以 `signal.reason` reject 并卸载临时表单实例、移除容器。
+   * 主要用于 `debug` 模式（无超时兜底）下取消一个被放弃的表单弹层，避免其无限驻留在页面上。
+   */
+  signal?: AbortSignal;
 }
 // #endregion ValidateFormOptions
 
@@ -658,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) };
@@ -667,6 +719,7 @@ export const validateForm = (options: ValidateFormOptions): Promise<string> => {
     formProps,
     appContext,
     timeout,
+    signal,
     // 调试模式需把表单展示出来；普通模式隐藏挂载
     hidden: !debug,
     // 调试模式等待人工操作，不应用超时