@tmagic/form 1.8.0-manmanyu.11 → 1.8.0-manmanyu.13

package/package.json

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

package/src/Form.vue

@@ -83,6 +83,13 @@ const props = withDefaults(
     keyProp?: string;
     popperClass?: string;
     preventSubmitDefault?: boolean;
+    /**
+     * 表单校验失败时，错误提示前缀是否使用字段的 text 文案（通过 `getTextByName` 从 config 中查找）。
+     *
+     * - `true`（默认）：错误提示形如 `字段文案 -> 错误信息`，找不到 text 时回退为字段 name；
+     * - `false`：跳过查找，直接使用字段 name 作为错误提示前缀（形如 `字段name -> 错误信息`）。
+     */
+    useFieldTextInError?: boolean;
     extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
     /**
      * 自定义"是否展示对比内容"的判断函数（仅在 `isCompare === true` 时生效）。
@@ -134,6 +141,7 @@ const props = withDefaults(
     inline: false,
     labelPosition: 'right',
     keyProp: '__key',
+    useFieldTextInError: true,
   },
 );
 
@@ -433,7 +441,7 @@ defineExpose({
       Object.entries(invalidFields).forEach(([prop, ValidateError]) => {
         (ValidateError as ValidateError[]).forEach(({ field, message }) => {
           const name = field || prop;
-          const text = getTextByName(name, props.config) || name;
+          const text = (props.useFieldTextInError ? getTextByName(name, props.config) : undefined) || name;
 
           error.push(`${text} -> ${message}`);
         });

package/src/FormBox.vue

@@ -13,6 +13,7 @@
           :label-position="labelPosition"
           :inline="inline"
           :prevent-submit-default="preventSubmitDefault"
+          :use-field-text-in-error="useFieldTextInError"
           :extend-state="extendState"
           @change="changeHandler"
         ></Form>
@@ -61,12 +62,15 @@ const props = withDefaults(
     inline?: boolean;
     labelPosition?: string;
     preventSubmitDefault?: boolean;
+    /** 透传给内部 `MForm`，控制表单校验失败时错误提示前缀是否使用字段的 text 文案 */
+    useFieldTextInError?: boolean;
     extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   }>(),
   {
     config: () => [],
     values: () => ({}),
     confirmText: '确定',
+    useFieldTextInError: true,
   },
 );
 

package/src/FormDialog.vue

@@ -31,6 +31,7 @@
         :label-position="labelPosition"
         :inline="inline"
         :prevent-submit-default="preventSubmitDefault"
+        :use-field-text-in-error="useFieldTextInError"
         :extend-state="extendState"
         :theme="effectiveTheme"
         @change="changeHandler"
@@ -97,6 +98,8 @@ const props = withDefaults(
     destroyOnClose?: boolean;
     showClose?: boolean;
     showCancel?: boolean;
+    /** 透传给内部 `MForm`，控制表单校验失败时错误提示前缀是否使用字段的 text 文案 */
+    useFieldTextInError?: boolean;
     /** 透传给内部 `MForm`，用于扩展 `formState`（如注入 `$message` / `$store` 等） */
     extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
     /**
@@ -115,6 +118,7 @@ const props = withDefaults(
     destroyOnClose: false,
     showClose: true,
     showCancel: true,
+    useFieldTextInError: true,
   },
 );
 

package/src/FormDrawer.vue

@@ -28,6 +28,7 @@
         :label-position="labelPosition"
         :inline="inline"
         :prevent-submit-default="preventSubmitDefault"
+        :use-field-text-in-error="useFieldTextInError"
         :extend-state="extendState"
         :theme="effectiveTheme"
         @change="changeHandler"
@@ -83,6 +84,8 @@ const props = withDefaults(
     inline?: boolean;
     labelPosition?: string;
     preventSubmitDefault?: boolean;
+    /** 透传给内部 `MForm`，控制表单校验失败时错误提示前缀是否使用字段的 text 文案 */
+    useFieldTextInError?: boolean;
     /** 关闭前的回调，会暂停 Drawer 的关闭; done 是个 function type 接受一个 boolean 参数, 执行 done 使用 true 参数或不提供参数将会终止关闭 */
     beforeClose?: (_done: (_cancel?: boolean) => void) => void;
     /** 透传给内部 `MForm`，用于扩展 `formState`（如注入 `$message` / `$store` 等） */
@@ -99,6 +102,7 @@ const props = withDefaults(
     config: () => [],
     values: () => ({}),
     confirmText: '确定',
+    useFieldTextInError: true,
   },
 );
 

package/src/submitForm.ts

@@ -45,6 +45,11 @@ export interface SubmitFormOptions {
   keyProp?: string;
   popperClass?: string;
   preventSubmitDefault?: boolean;
+  /**
+   * 表单校验失败时，错误提示前缀是否使用字段的 text 文案（通过 `getTextByName` 从 config 中查找）。
+   * 默认 `true`，置为 `false` 时直接使用字段 name。
+   */
+  useFieldTextInError?: boolean;
   extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   /** 透传给 Form.submitForm 的参数：是否直接返回原始响应式 values */
   native?: boolean;
@@ -60,6 +65,15 @@ export interface SubmitFormOptions {
   appContext?: AppContext | null;
   /** 等待表单初始化的最长时间（毫秒），超时将以错误 reject。默认 10000ms */
   timeout?: number;
+  /**
+   * 调试模式。默认 `false`。
+   *
+   * - `false`：表单以隐藏方式挂载，初始化完成后自动提交（原有行为）。
+   * - `true`：将表单以弹层形式可见地渲染在页面上，需手动点击「确定」才会触发校验/提交，
+   *   点击「取消」则以 reject 中断；校验失败时保留弹层并展示错误信息，便于修正后重试。
+   *   调试模式下 `timeout` 不生效（等待人工操作）。
+   */
+  debug?: boolean;
 }
 // #endregion SubmitFormOptions
 
@@ -102,14 +116,24 @@ export interface SubmitFormResult {
  *   initValues: { name: 'foo' },
  *   returnChangeRecords: true,
  * });
+ *
+ * // 调试模式：可见地渲染表单，点击「确定」才提交：
+ * const values = await submitForm({
+ *   config: [...],
+ *   initValues: { name: 'foo' },
+ *   debug: true,
+ * });
  * ```
  */
 export const submitForm = (options: SubmitFormOptions): Promise<any> => {
-  const { native, appContext, timeout = 10000, returnChangeRecords, ...formProps } = options;
+  const { native, appContext, timeout = 10000, returnChangeRecords, debug = false, ...formProps } = options;
 
   return new Promise((resolve, reject) => {
     const container = document.createElement('div');
-    container.style.display = 'none';
+    // 调试模式下需要把表单展示出来，普通模式则隐藏挂载
+    if (!debug) {
+      container.style.display = 'none';
+    }
     document.body.appendChild(container);
 
     let cleaned = false;
@@ -119,25 +143,154 @@ export const submitForm = (options: SubmitFormOptions): Promise<any> => {
       name: 'MFormSubmitWrapper',
       setup() {
         const formRef = ref<any>(null);
+        // 调试模式下用于展示校验失败信息
+        const errorMsg = ref('');
 
+        const doSubmit = async () => {
+          try {
+            // 等待子组件（FormItem 等）完成首次渲染，确保 validate 能拿到所有字段
+            await nextTick();
+            // submitForm 校验通过后会清空 changeRecords，需在调用前先做快照
+            const changeRecords: ChangeRecord[] = [...(formRef.value?.changeRecords ?? [])];
+            const result = await formRef.value.submitForm(native);
+            resolve(returnChangeRecords ? { values: result, changeRecords } : result);
+            cleanup();
+          } catch (err) {
+            // 调试模式下校验失败时保留弹层并展示错误，便于修正后重新提交
+            if (debug) {
+              errorMsg.value = err instanceof Error ? err.message : String(err);
+              return;
+            }
+            reject(err);
+            cleanup();
+          }
+        };
+
+        // 调试模式：可见地渲染表单，点击「确定」才提交，点击「取消」则中断
+        if (debug) {
+          const handleCancel = () => {
+            reject(new Error('submitForm canceled in debug mode.'));
+            cleanup();
+          };
+
+          const btnBase = {
+            padding: '8px 20px',
+            fontSize: '14px',
+            lineHeight: '1',
+            border: '1px solid #dcdfe6',
+            borderRadius: '4px',
+            cursor: 'pointer',
+          };
+
+          return () =>
+            h(
+              'div',
+              {
+                style: {
+                  position: 'fixed',
+                  inset: '0',
+                  zIndex: '10000',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  background: 'rgba(0, 0, 0, 0.5)',
+                },
+              },
+              [
+                h(
+                  'div',
+                  {
+                    style: {
+                      display: 'flex',
+                      flexDirection: 'column',
+                      width: '600px',
+                      maxWidth: '90vw',
+                      maxHeight: '85vh',
+                      background: '#fff',
+                      borderRadius: '8px',
+                      boxShadow: '0 8px 24px rgba(0, 0, 0, 0.2)',
+                      overflow: 'hidden',
+                    },
+                  },
+                  [
+                    h(
+                      'div',
+                      {
+                        style: {
+                          padding: '16px 20px',
+                          fontSize: '16px',
+                          fontWeight: '600',
+                          borderBottom: '1px solid #ebeef5',
+                        },
+                      },
+                      'submitForm 调试',
+                    ),
+                    h(
+                      'div',
+                      {
+                        style: {
+                          flex: '1',
+                          padding: '20px',
+                          overflow: 'auto',
+                        },
+                      },
+                      [
+                        h(Form as Component, { ...formProps, ref: formRef }),
+                        errorMsg.value
+                          ? h('div', {
+                              style: {
+                                marginTop: '12px',
+                                color: '#f56c6c',
+                                fontSize: '13px',
+                                lineHeight: '1.5',
+                              },
+                              innerHTML: errorMsg.value,
+                            })
+                          : null,
+                      ],
+                    ),
+                    h(
+                      'div',
+                      {
+                        style: {
+                          display: 'flex',
+                          justifyContent: 'flex-end',
+                          gap: '12px',
+                          padding: '12px 20px',
+                          borderTop: '1px solid #ebeef5',
+                        },
+                      },
+                      [
+                        h('button', { type: 'button', onClick: handleCancel, style: { ...btnBase } }, '取消'),
+                        h(
+                          'button',
+                          {
+                            type: 'button',
+                            onClick: doSubmit,
+                            style: {
+                              ...btnBase,
+                              color: '#fff',
+                              background: '#409eff',
+                              borderColor: '#409eff',
+                            },
+                          },
+                          '确定',
+                        ),
+                      ],
+                    ),
+                  ],
+                ),
+              ],
+            );
+        }
+
+        // 普通模式：表单初始化完成后自动提交
         const stop = watch(
           () => formRef.value?.initialized,
-          async (initialized) => {
+          (initialized) => {
             if (!initialized) return;
             stop();
-
-            try {
-              // 等待子组件（FormItem 等）完成首次渲染，确保 validate 能拿到所有字段
-              await nextTick();
-              // submitForm 校验通过后会清空 changeRecords，需在调用前先做快照
-              const changeRecords: ChangeRecord[] = [...(formRef.value.changeRecords ?? [])];
-              const result = await formRef.value.submitForm(native);
-              resolve(returnChangeRecords ? { values: result, changeRecords } : result);
-            } catch (err) {
-              reject(err);
-            } finally {
-              cleanup();
-            }
+            doSubmit();
           },
           { flush: 'post', immediate: true },
         );
@@ -168,7 +321,8 @@ export const submitForm = (options: SubmitFormOptions): Promise<any> => {
       container.parentNode?.removeChild(container);
     };
 
-    if (timeout > 0) {
+    // 调试模式等待人工操作，不应用超时
+    if (timeout > 0 && !debug) {
       timer = setTimeout(() => {
         if (!cleaned) {
           reject(new Error(`submitForm timeout after ${timeout}ms: form is not initialized.`));