login-form.md

基本信息

• 类型: React 组件
• 路径: ./src/components/auth/login-form.tsx

功能描述

邮箱密码登录表单组件，使用 React Hook Form 和 Zod 进行表单验证。提交后通过 NextAuth 的 credentials 提供者进行认证。

导出内容

• LoginForm - 主组件函数
• loginSchema - Zod 验证模式
• LoginFormValues - 表单值类型

Props

无

表单字段

字段	验证规则	说明
email	必须为有效邮箱格式	用户邮箱地址
password	最少 6 个字符	用户密码

验证模式

const loginSchema = z.object({
  email: z.string().email("Invalid email address"),
  password: z.string().min(6, "Password must be at least 6 characters"),
});

type LoginFormValues = z.infer<typeof loginSchema>;

功能流程

1. 用户输入邮箱和密码
2. Zod 验证表单数据
3. 调用 signIn("credentials") 进行认证
4. 成功后跳转到首页
5. 失败时显示错误提示

依赖

• react - useState
• next/navigation - useRouter
• next-auth/react - signIn
• next-intl - useTranslations
• react-hook-form - useForm
• @hookform/resolvers/zod - zodResolver
• zod - 数据验证
• @/components/ui/* - Button, Input, Form
• lucide-react - Loader2
• sonner - toast 通知
• @/lib/analytics - analyticsAuth