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

package/src/schema.ts

@@ -1,5 +1,33 @@
+import type { InjectionKey } from 'vue';
+
+import type { FormItemConfig } from '@tmagic/form-schema';
+
 export * from '@tmagic/form-schema';
 
+/**
+ * 对比模式相关配置，由 `MForm` 通过 `provide` 注入，
+ * 所有层级的 Container（含嵌套在 fieldset / panel 等容器组件内部的 Container）通过 `inject` 获取，
+ * 无需逐层透传 prop。
+ */
+export interface FormDiffConfig {
+  /**
+   * 自定义"是否展示对比内容"的判断函数（仅在对比模式下生效）。
+   *
+   * - 不传：使用默认逻辑 `!isEqual(curValue, lastValue)`；
+   * - 传函数：完全以函数返回值为准，返回 `true` 才展示前后两份对比内容。
+   */
+  showDiff?: (_data: { curValue: any; lastValue: any; config: FormItemConfig }) => boolean;
+  /**
+   * 自定义「自接管对比」的字段类型（仅在对比模式下生效）。
+   *
+   * - 传数组：在内置类型基础上「追加」这些类型；
+   * - 传函数：入参为内置类型数组，返回值作为「最终」完整类型列表（可完全替换内置项）。
+   */
+  selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]);
+}
+
+export const FORM_DIFF_CONFIG_KEY: InjectionKey<FormDiffConfig> = Symbol('mFormDiffConfig');
+
 export interface ValidateError {
   message: string;
   field: string;
@@ -14,3 +42,22 @@ export interface ContainerChangeEventData {
   modifyKey?: string;
   changeRecords?: ChangeRecord[];
 }
+
+/** 自定义 label slot 的作用域参数 */
+export interface FormLabelSlotProps {
+  /** 当前表单项配置 */
+  config: FormItemConfig;
+  /** 经处理后的类型 */
+  type: string;
+  /** 经 filterFunction 处理后的 label 文案 */
+  text?: string;
+  /** 完整字段路径（包含父级前缀） */
+  prop: string;
+  /** 经 filterFunction 处理后的最终禁用状态 */
+  disabled?: boolean;
+}
+
+/** Form / Container 暴露的具名 slot 定义 */
+export interface FormSlots {
+  label(_props: FormLabelSlotProps): any;
+}

package/src/submitForm.ts

@@ -19,7 +19,7 @@
 import { type AppContext, type Component, createApp, defineComponent, h, nextTick, ref, watch } from 'vue';
 
 import Form from './Form.vue';
-import type { FormConfig, FormState } from './schema';
+import type { ChangeRecord, FormConfig, FormState } from './schema';
 
 // #region SubmitFormOptions
 /**
@@ -45,9 +45,19 @@ 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;
+  /**
+   * 是否在 resolve 结果中携带 changeRecords（变更记录）。
+   * 开启后 resolve 的结果为 `{ values, changeRecords }`，否则仅 resolve values。
+   */
+  returnChangeRecords?: boolean;
   /**
    * 父级应用上下文，用于继承全局组件、指令、provide 等。
    * 通常通过 `app._context` 或 `getCurrentInstance()?.appContext` 获取。
@@ -55,9 +65,30 @@ export interface SubmitFormOptions {
   appContext?: AppContext | null;
   /** 等待表单初始化的最长时间（毫秒），超时将以错误 reject。默认 10000ms */
   timeout?: number;
+  /**
+   * 调试模式。默认 `false`。
+   *
+   * - `false`：表单以隐藏方式挂载，初始化完成后自动提交（原有行为）。
+   * - `true`：将表单以弹层形式可见地渲染在页面上，需手动点击「确定」才会触发校验/提交，
+   *   点击「取消」则以 reject 中断；校验失败时保留弹层并展示错误信息，便于修正后重试。
+   *   调试模式下 `timeout` 不生效（等待人工操作）。
+   */
+  debug?: boolean;
 }
 // #endregion SubmitFormOptions
 
+// #region SubmitFormResult
+/**
+ * 开启 `returnChangeRecords` 时 submitForm 的返回结果
+ */
+export interface SubmitFormResult {
+  /** 校验通过后的表单值 */
+  values: any;
+  /** 表单变更记录 */
+  changeRecords: ChangeRecord[];
+}
+// #endregion SubmitFormResult
+
 /**
  * 以命令式方式调用 Form.vue 完成一次表单校验/提交。
  *
@@ -78,14 +109,31 @@ export interface SubmitFormOptions {
  * } catch (e) {
  *   console.error(e);
  * }
+ *
+ * // 需要同时获取变更记录时：
+ * const { values, changeRecords } = await submitForm({
+ *   config: [...],
+ *   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, ...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;
@@ -95,23 +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();
-              const result = await formRef.value.submitForm(native);
-              resolve(result);
-            } catch (err) {
-              reject(err);
-            } finally {
-              cleanup();
-            }
+            doSubmit();
           },
           { flush: 'post', immediate: true },
         );
@@ -142,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.`));

package/src/theme/container.scss

@@ -15,7 +15,10 @@
   }
 
   .tmagic-design-form-item {
-    &.show-diff {
+    &.show-after-diff {
+      background: rgb(225, 243, 216);
+    }
+    &.show-before-diff {
       background: #f7dadd;
     }
   }