基于 Zod 模式推导的声明式动态表单（AutoForm）可行性研究与架构实践

Zod Schema 定义
  │
  ├── z.string() ────────────────► 映射为 <Input type="text" />
  ├── z.number() ────────────────► 映射为 <Input type="number" />
  ├── z.boolean() ───────────────► 映射为 <Switch /> 或 <Checkbox />
  ├── z.enum(['Admin', 'User']) ─► 映射为 <Select options={...} />
  ├── z.date() ──────────────────► 映射为 <DatePicker />
  └── z.object({ ... }) ─────────► 递归映射为 Fieldset 子表单组
  │
  ▼ 运行时类型反射 (Schema AST Parsing)
AutoForm 智能渲染器 (自动绑定 React Hook Form / VeeValidate + 错误提示)

import { z } from 'zod';
import { AutoForm, AutoFormSubmit } from '@/components/ui/auto-form';
 
// 1. 声明完整的业务数据模型与校验规则
const userProfileSchema = z.object({
  username: z
    .string()
    .min(3, '用户名至少 3 个字符')
    .describe('用户登录名称'), // describe 自动作为表单 Label
  email: z
    .string()
    .email('请输入合法的邮箱格式')
    .describe('工作电子邮箱'),
  role: z
    .enum(['Developer', 'Designer', 'ProductManager'])
    .default('Developer')
    .describe('团队角色'),
  notifications: z
    .boolean()
    .default(true)
    .describe('开启每周邮件订阅通知'),
  bio: z
    .string()
    .optional()
    .describe('个人简介 (选填)'),
});
 
export function ProfileFormPage() {
  const handleSubmit = (data: z.infer<typeof userProfileSchema>) => {
    console.log('校验通过，提交数据:', data);
  };
 
  return (
    <div className="max-w-md mx-auto p-6 border rounded-xl shadow-sm">
      <h2 className="text-xl font-bold mb-4">个人资料配置</h2>
      
      {/* 2. 一行代码自动生成完整的表单 */}
      <AutoForm
        formSchema={userProfileSchema}
        onSubmit={handleSubmit}
        fieldConfig={{
          bio: {
            fieldType: 'textarea', // 覆盖默认渲染类型为多行文本
            inputProps: {
              placeholder: '写点什么介绍自己吧...',
            },
          },
        }}
      >
        <AutoFormSubmit>保存配置</AutoFormSubmit>
      </AutoForm>
    </div>
  );
}