MockPilot2 Review

为模拟面试平台中的用户身份验证模块,实现注册 / 登录功能。使用技术栈包括:

  • Next.js 13 + App Router
  • TypeScript
  • React Hook Form
  • Zod 用于 schema 校验
  • Sonner 实现 toast 提示
  • 自定义组件如 FormField, Button, Form

该项目将作为简历中的展示项目,目标是:代码清晰、逻辑完整、类型安全、可讲解


🧰 核心功能模块划分

1. 表单 Schema 生成 (authFormSchema)

  • 利用 Zod 按照身份类型动态生成 schema
  • Sign-Up 需要 name 字段,Sign-In 不需要
css 复制代码
const authFormSchema = (type: FormType) =>
  z.object({
    name: type === "sign-up" ? z.string().min(3) : z.string().optional(),
    email: z.string().email(),
    password: z.string().min(3),
  });

2. 表单形成 (React Hook Form + zodResolver)

  • useForm 和 schema 绑定
  • 用 TS 定义表单值类型
  • defaultValues 确保 RHF 初始化正确
css 复制代码
const formSchema = authFormSchema(type);
const form = useForm<z.infer<typeof formSchema>>({
  resolver: zodResolver(formSchema),
  defaultValues: {
    name: "",
    email: "",
    password: "",
  },
});

3. 提交函数 onSubmit

  • 根据 type 判断是 sign-up 还是 sign-in
  • 使用 router.push 进行跳转
  • 给与用户不同 toast feedback
vbnet 复制代码
function onSubmit(values: z.infer<typeof formSchema>) {
  try {
    if (type === "sign-up") {
      toast.success("Account created successfully. Please sign in.");
      router.push("/sign-in");
    } else {
      toast.success("Sign in successfully.");
      router.push("/");
    }
  } catch (error) {
    toast.error(`There was an error: ${error}`);
  }
}

4. 表单字段组件 FormField(✨设计亮点)

  • 自定义封装组件 FormField 用于统一表单字段逻辑:

    • 自动绑定 RHF 的 control
    • 封装 label + input 渲染逻辑
    • 支持通用 props(如 placeholder, type
ini 复制代码
<FormField
  control={form.control}
  name="email"
  label="Email"
  placeholder="Your email address"
  type="email"
/>

🔹 价值非常大

  • 减少重复代码
  • 增强表单复用性与可维护性
  • 一致化 UI 和行为逻辑

⚡️ Debug 重点回顾 (TypeScript + RHF + Zod)

❌ 1. z.infer<typeof formSchema> 使用时报错

问题原因 : formSchema 在函数体内部才声明,导致接口型别无法推断

解决方案:

ini 复制代码
// 尽量接在 formSchema 之后声明类型
const formSchema = authFormSchema(type);
type AuthFormValues = z.infer<typeof formSchema>;

❌ 2. ReturnType<typeof authFormSchema> 无法 infer

问题原因 : 没有给 authFormSchema 指定参数,结果是 infer 一个函数,而不是 schema

解决方案: 利用实际执行后的 schema 进行 infer

ini 复制代码
const schema = authFormSchema("sign-in");
type AuthFormValues = z.infer<typeof schema>;

❌ 3. FormField.tsx 路径报错

原因 : 文件名写错了,写成 FormFileld.tsx

解决: 类名和实际路径完全对应,要么改路径,要么重命名文件

javascript 复制代码
// 正确写法
import FormField from "@/components/ui/FormField";

⚡️ UI 模块设计

  • 利用 Tailwind CSS + flex + spacing 进行布局
  • 根据 type 显示或隐藏 name 输入框
  • 提供用户切换登录/注册的方便链接

✅ 总结: 我从这个小段项目中所学到的

  1. 完整路通 RHF + Zod 表单校验流程
  2. 利用 TypeScript 进行 infer 和类型分离开发
  3. 在实际设计中处理很多小混乱,学会了转化思路
  4. 从 bug 中学习自我调试,创造比照路线
  5. 使用 FormField 封装复用,提升开发质量

📅 接下来操作

  • 联系 Firebase API 或操作本地 auth.action.ts
  • 在登录成功后添加 Dashboard 控制面板模块
  • 完善 Loading 状态和异步错误处理

相关推荐
第七种黄昏几秒前
Vue3 中的 ref、模板引用和 defineExpose 详解
前端·javascript·vue.js
一只卡比兽1 分钟前
动态规划与贪心算法详解:原理、对比与代码实践
前端
aiwery4 分钟前
一文掌握 TypeScript 工具类型:Record、Partial、Omit、Pick 等实战用法
前端·代码规范
ankleless18 分钟前
C语言(12)——进阶函数
前端·html
一条上岸小咸鱼22 分钟前
Kotlin 基本数据类型(四):String
android·前端·kotlin
我是哈哈hh36 分钟前
【Node.js】ECMAScript标准 以及 npm安装
开发语言·前端·javascript·node.js
张元清1 小时前
电商 Feeds 流缓存策略:Temu vs 拼多多的技术选择
前端·javascript·面试
一枚前端小能手1 小时前
🎨 CSS布局从入门到放弃?Grid让你重新爱上布局
前端·css
晴空雨1 小时前
React 合成事件原理:从事件委托到 React 17 的重大改进
前端·react.js
魏嗣宗1 小时前
Node.js 网络编程全解析:从 Socket 到 HTTP,再到流式协议
前端·全栈