refactor(auth): align auth UI and mock auth API

app/(account)/verify/page.tsx

@@ -21,6 +21,9 @@ import { useEffect, useRef, useState } from "react"
 
 export default function VerifyPage() {
   const [verifyRole, setVerifyRole] = useState<UserRole | "">("")
+  const [realName, setRealName] = useState("")
+  const [idNumber, setIdNumber] = useState("")
+  const [gameProfile, setGameProfile] = useState("")
   const verificationStatus = useAuthStore((state) => state.verificationStatus)
   const verificationReasons = useAuthStore((state) => state.verificationReasons)
   const verifiedRoles = useAuthStore((state) => state.verifiedRoles)
@@ -38,8 +41,21 @@ export default function VerifyPage() {
     [],
   )
 
+  const buildMaterials = () => {
+    const materials: Record<string, string> = {
+      realName,
+      idNumber,
+      gameProfile,
+      idCardFront: "mock://idCardFront",
+      idCardBack: "mock://idCardBack",
+      gameScreenshot: "mock://gameScreenshot",
+    }
+
+    return materials
+  }
+
   const submitWithMockApproval = (role: UserRole) => {
-    submitVerification(role)
+    submitVerification(role, buildMaterials())
     const oldTimer = timersRef.current.get(role)
     if (oldTimer) {
       clearTimeout(oldTimer)
@@ -149,19 +165,34 @@ export default function VerifyPage() {
 
           <div className="space-y-2">
             <Label htmlFor="real-name">真实姓名</Label>
-            <Input id="real-name" placeholder="请输入真实姓名" />
+            <Input
+              id="real-name"
+              placeholder="请输入真实姓名"
+              value={realName}
+              onChange={(event) => setRealName(event.target.value)}
+            />
           </div>
 
           <div className="space-y-2">
             <Label htmlFor="id-number">身份证号</Label>
-            <Input id="id-number" placeholder="请输入身份证号" />
+            <Input
+              id="id-number"
+              placeholder="请输入身份证号"
+              value={idNumber}
+              onChange={(event) => setIdNumber(event.target.value)}
+            />
           </div>
 
           <Separator />
 
           <div className="space-y-2">
             <Label>游戏资质（打手认证）</Label>
-            <Textarea placeholder="请描述你的游戏经历、段位、擅长游戏等" rows={3} />
+            <Textarea
+              placeholder="请描述你的游戏经历、段位、擅长游戏等"
+              rows={3}
+              value={gameProfile}
+              onChange={(event) => setGameProfile(event.target.value)}
+            />
           </div>
 
           <div className="space-y-2">

app/(auth)/forgot-password/page.tsx

@@ -3,36 +3,72 @@
 import { Button } from "@/components/ui/button"
 import { IconInput } from "@/components/ui/icon-input"
 import { Label } from "@/components/ui/label"
-import { notifySuccess } from "@/lib/toast"
+import { resetPassword } from "@/lib/api"
+import { toApiError } from "@/lib/errors"
+import { notifyInfo, notifySuccess } from "@/lib/toast"
 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
-import { Mail } from "lucide-react"
+import { KeyRound, Lock, Mail } from "lucide-react"
 import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { useEffect, useState } from "react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 
-const forgotSchema = z.object({
+const forgotSchema = z
+  .object({
     email: z.string().email("请输入正确的邮箱地址"),
-})
+    vcode: z.string().min(6, "验证码至少6位"),
+    newPassword: z.string().min(8, "密码至少8位"),
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.newPassword === data.confirmPassword, {
+    message: "两次输入的密码不一致",
+    path: ["confirmPassword"],
+  })
 
 export default function ForgotPasswordPage() {
+  const router = useRouter()
+  const [countdown, setCountdown] = useState(0)
+
   const {
     register,
     handleSubmit,
+    trigger,
     formState: { errors, isSubmitting },
   } = useForm({
     resolver: standardSchemaResolver(forgotSchema),
   })
 
-  const onSubmit = async (_data: z.infer<typeof forgotSchema>) => {
+  useEffect(() => {
-    await new Promise((r) => setTimeout(r, 500))
+    if (countdown <= 0) return
-    notifySuccess("重置链接已发送到你的邮箱")
+    const timer = setInterval(() => setCountdown((c) => c - 1), 1000)
+    return () => clearInterval(timer)
+  }, [countdown])
+
+  const handleSendCode = async () => {
+    const isValid = await trigger("email")
+    if (!isValid) return
+
+    // Mock sending code
+    setCountdown(60)
+    notifySuccess("验证码已发送到你的邮箱")
+  }
+
+  const onSubmit = async (data: z.infer<typeof forgotSchema>) => {
+    try {
+      await resetPassword({ email: data.email, vcode: data.vcode, newPassword: data.newPassword })
+      notifySuccess("密码已重置")
+      router.push("/login")
+    } catch (err) {
+      notifyInfo(toApiError(err).msg)
+    }
   }
 
   return (
     <>
       <div className="mb-8">
         <h2 className="text-2xl font-bold">找回密码</h2>
-        <p className="mt-2 text-sm text-muted-foreground">输入注册邮箱，我们将发送重置链接</p>
+        <p className="mt-2 text-sm text-muted-foreground">输入注册邮箱和新密码进行重置</p>
       </div>
 
       <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
@@ -45,11 +81,67 @@ export default function ForgotPasswordPage() {
             placeholder="输入注册邮箱"
             {...register("email")}
           />
-          {errors.email && <p className="text-xs text-destructive">{errors.email.message}</p>}
+          {errors.email && (
+            <p className="text-xs text-destructive">{errors.email.message as string}</p>
+          )}
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="vcode">验证码</Label>
+          <div className="flex gap-2">
+            <div className="flex-1">
+              <IconInput
+                id="vcode"
+                icon={<KeyRound />}
+                placeholder="输入6位验证码"
+                {...register("vcode")}
+              />
+            </div>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleSendCode}
+              disabled={countdown > 0}
+              className="w-[110px]"
+            >
+              {countdown > 0 ? `${countdown}s` : "获取验证码"}
+            </Button>
+          </div>
+          {errors.vcode && (
+            <p className="text-xs text-destructive">{errors.vcode.message as string}</p>
+          )}
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="newPassword">新密码</Label>
+          <IconInput
+            id="newPassword"
+            icon={<Lock />}
+            type="password"
+            placeholder="输入新密码"
+            {...register("newPassword")}
+          />
+          {errors.newPassword && (
+            <p className="text-xs text-destructive">{errors.newPassword.message as string}</p>
+          )}
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="confirmPassword">确认新密码</Label>
+          <IconInput
+            id="confirmPassword"
+            icon={<Lock />}
+            type="password"
+            placeholder="再次输入新密码"
+            {...register("confirmPassword")}
+          />
+          {errors.confirmPassword && (
+            <p className="text-xs text-destructive">{errors.confirmPassword.message as string}</p>
+          )}
         </div>
 
         <Button type="submit" className="mt-2 w-full" size="lg" disabled={isSubmitting}>
-          {isSubmitting ? "发送中..." : "发送重置链接"}
+          {isSubmitting ? "提交中..." : "重置密码"}
         </Button>
       </form>
 

app/(auth)/login/page.tsx

@@ -4,10 +4,12 @@ import { Button } from "@/components/ui/button"
 import { Checkbox } from "@/components/ui/checkbox"
 import { IconInput } from "@/components/ui/icon-input"
 import { Label } from "@/components/ui/label"
-import { getCurrentUserForLogin } from "@/lib/api"
+import { login as loginApi } from "@/lib/api"
+import { toApiError } from "@/lib/errors"
+import { notifyInfo } from "@/lib/toast"
 import { useAuthStore } from "@/store/auth"
 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
-import { Eye, EyeOff, Lock, Phone } from "lucide-react"
+import { Eye, EyeOff, Lock, User } from "lucide-react"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
 import { useState } from "react"
@@ -15,13 +17,13 @@ import { useForm } from "react-hook-form"
 import { z } from "zod"
 
 const loginSchema = z.object({
-  phone: z.string().min(11, "请输入正确的手机号"),
+  username: z.string().min(1, "请输入用户名"),
   password: z.string().min(6, "密码至少6位"),
 })
 
 export default function LoginPage() {
   const router = useRouter()
-  const { login } = useAuthStore()
+  const { login: storeLogin } = useAuthStore()
   const [showPassword, setShowPassword] = useState(false)
   const {
     register,
@@ -31,10 +33,14 @@ export default function LoginPage() {
     resolver: standardSchemaResolver(loginSchema),
   })
 
-  const onSubmit = async (_data: z.infer<typeof loginSchema>) => {
+  const onSubmit = async (data: z.infer<typeof loginSchema>) => {
-    await new Promise((r) => setTimeout(r, 500))
+    try {
-    login(getCurrentUserForLogin(), ["consumer", "player", "owner"])
+      const user = await loginApi({ username: data.username, password: data.password })
+      storeLogin(user, ["consumer", "player", "owner"])
       router.push("/")
+    } catch (err) {
+      notifyInfo(toApiError(err).msg)
+    }
   }
 
   return (
@@ -46,9 +52,14 @@ export default function LoginPage() {
 
       <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
         <div className="space-y-1.5">
-          <Label htmlFor="phone">手机号</Label>
+          <Label htmlFor="username">用户名</Label>
-          <IconInput id="phone" icon={<Phone />} placeholder="输入手机号" {...register("phone")} />
+          <IconInput
-          {errors.phone && <p className="text-xs text-destructive">{errors.phone.message}</p>}
+            id="username"
+            icon={<User />}
+            placeholder="输入用户名"
+            {...register("username")}
+          />
+          {errors.username && <p className="text-xs text-destructive">{errors.username.message}</p>}
         </div>
 
         <div className="space-y-1.5">

app/(auth)/register/page.tsx

@@ -4,10 +4,12 @@ import { Button } from "@/components/ui/button"
 import { Checkbox } from "@/components/ui/checkbox"
 import { IconInput } from "@/components/ui/icon-input"
 import { Label } from "@/components/ui/label"
-import { getCurrentUserForLogin } from "@/lib/api"
+import { register as registerApi } from "@/lib/api"
+import { toApiError } from "@/lib/errors"
+import { notifyInfo } from "@/lib/toast"
 import { useAuthStore } from "@/store/auth"
 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
-import { Eye, EyeOff, Lock, Phone, User } from "lucide-react"
+import { Eye, EyeOff, Lock, Mail, Shield, User } from "lucide-react"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
 import { useState } from "react"
@@ -16,8 +18,9 @@ import { z } from "zod"
 
 const registerSchema = z
   .object({
-    nickname: z.string().min(2, "昵称至少2个字符"),
+    username: z.string().min(1, "请输入用户名"),
-    phone: z.string().min(11, "请输入正确的手机号"),
+    email: z.string().email("请输入正确的邮箱地址"),
+    vcode: z.string().optional(),
     password: z.string().min(6, "密码至少6位"),
     confirmPassword: z.string(),
     agreeTerms: z.boolean(),
@@ -33,7 +36,7 @@ const registerSchema = z
 
 export default function RegisterPage() {
   const router = useRouter()
-  const { login } = useAuthStore()
+  const { login: storeLogin } = useAuthStore()
   const [showPassword, setShowPassword] = useState(false)
   const [showConfirmPassword, setShowConfirmPassword] = useState(false)
   const {
@@ -46,10 +49,19 @@ export default function RegisterPage() {
     defaultValues: { agreeTerms: false },
   })
 
-  const onSubmit = async (_data: z.infer<typeof registerSchema>) => {
+  const onSubmit = async (data: z.infer<typeof registerSchema>) => {
-    await new Promise((r) => setTimeout(r, 500))
+    try {
-    login(getCurrentUserForLogin(), ["consumer"])
+      const user = await registerApi({
+        username: data.username,
+        email: data.email,
+        password: data.password,
+        vcode: data.vcode,
+      })
+      storeLogin(user, ["consumer"])
       router.push("/")
+    } catch (err) {
+      notifyInfo(toApiError(err).msg)
+    }
   }
 
   return (
@@ -61,20 +73,38 @@ export default function RegisterPage() {
 
       <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
         <div className="space-y-1.5">
-          <Label htmlFor="nickname">昵称</Label>
+          <Label htmlFor="username">用户名</Label>
           <IconInput
-            id="nickname"
+            id="username"
             icon={<User />}
-            placeholder="输入你的昵称"
+            placeholder="输入用户名"
-            {...register("nickname")}
+            {...register("username")}
           />
-          {errors.nickname && <p className="text-xs text-destructive">{errors.nickname.message}</p>}
+          {errors.username && <p className="text-xs text-destructive">{errors.username.message}</p>}
         </div>
 
         <div className="space-y-1.5">
-          <Label htmlFor="phone">手机号</Label>
+          <Label htmlFor="email">邮箱</Label>
-          <IconInput id="phone" icon={<Phone />} placeholder="输入手机号" {...register("phone")} />
+          <IconInput id="email" icon={<Mail />} placeholder="输入邮箱地址" {...register("email")} />
-          {errors.phone && <p className="text-xs text-destructive">{errors.phone.message}</p>}
+          {errors.email && <p className="text-xs text-destructive">{errors.email.message}</p>}
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="vcode">验证码</Label>
+          <div className="flex gap-2">
+            <div className="flex-1">
+              <IconInput
+                id="vcode"
+                icon={<Shield />}
+                placeholder="输入验证码（可选）"
+                {...register("vcode")}
+              />
+            </div>
+            <Button type="button" variant="outline" onClick={() => {}}>
+              发送验证码
+            </Button>
+          </div>
+          {errors.vcode && <p className="text-xs text-destructive">{errors.vcode.message}</p>}
         </div>
 
         <div className="space-y-1.5">

components/login-dialog.tsx

@@ -10,7 +10,9 @@ import {
 } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
-import { getCurrentUserForLogin } from "@/lib/api"
+import { login as loginApi } from "@/lib/api"
+import { toApiError } from "@/lib/errors"
+import { notifyInfo } from "@/lib/toast"
 import { useAuthStore } from "@/store/auth"
 import { useLoginDialogStore } from "@/store/login-dialog"
 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
@@ -19,7 +21,7 @@ import { useForm } from "react-hook-form"
 import { z } from "zod"
 
 const loginSchema = z.object({
-  phone: z.string().min(11, "请输入正确的手机号"),
+  username: z.string().min(1, "请输入用户名"),
   password: z.string().min(6, "密码至少6位"),
 })
 
@@ -30,7 +32,7 @@ interface LoginDialogProps {
 
 export function LoginDialog({ open, onOpenChange }: LoginDialogProps) {
   const router = useRouter()
-  const { login } = useAuthStore()
+  const { login: storeLogin } = useAuthStore()
   const consumePendingAction = useLoginDialogStore((state) => state.consumePendingAction)
   const {
     register,
@@ -40,11 +42,15 @@ export function LoginDialog({ open, onOpenChange }: LoginDialogProps) {
     resolver: standardSchemaResolver(loginSchema),
   })
 
-  const onSubmit = async (_data: z.infer<typeof loginSchema>) => {
+  const onSubmit = async (data: z.infer<typeof loginSchema>) => {
-    await new Promise((r) => setTimeout(r, 500))
+    try {
-    login(getCurrentUserForLogin(), ["consumer", "player", "owner"])
+      const user = await loginApi({ username: data.username, password: data.password })
+      storeLogin(user, ["consumer", "player", "owner"])
       consumePendingAction()
       onOpenChange(false)
+    } catch (err) {
+      notifyInfo(toApiError(err).msg)
+    }
   }
 
   return (
@@ -56,9 +62,11 @@ export function LoginDialog({ open, onOpenChange }: LoginDialogProps) {
         </DialogHeader>
         <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
           <div className="space-y-2">
-            <Label htmlFor="dialog-phone">手机号</Label>
+            <Label htmlFor="dialog-username">用户名</Label>
-            <Input id="dialog-phone" placeholder="请输入手机号" {...register("phone")} />
+            <Input id="dialog-username" placeholder="请输入用户名" {...register("username")} />
-            {errors.phone && <p className="text-xs text-destructive">{errors.phone.message}</p>}
+            {errors.username && (
+              <p className="text-xs text-destructive">{errors.username.message}</p>
+            )}
           </div>
           <div className="space-y-2">
             <Label htmlFor="dialog-password">密码</Label>

lib/api/auth-extra.ts

@@ -0,0 +1,4 @@
+export function sendForgotPasswordCode(email: string): never {
+  void email
+  throw new Error("Not implemented")
+}

lib/api/auth.ts

@@ -0,0 +1,93 @@
+import type { User } from "@/lib/types"
+
+import { mockUsers } from "@/lib/mock"
+
+export type RegisterInput = {
+  username: string
+  email: string
+  password: string
+  vcode?: string
+}
+
+export type LoginInput = {
+  username: string
+  password: string
+}
+
+function throwApiError(code: number, msg: string): never {
+  throw { code, msg }
+}
+
+function nextUserId(): string {
+  const maxId = Math.max(0, ...mockUsers.map((user) => Number.parseInt(user.id, 10) || 0))
+  return String(maxId + 1)
+}
+
+export async function register(input: RegisterInput): Promise<User> {
+  const username = input.username.trim()
+  const email = input.email.trim()
+  const password = input.password
+
+  if (!username) throwApiError(400, "请输入用户名")
+  if (!email) throwApiError(400, "请输入邮箱")
+  if (!password || password.length < 6) throwApiError(400, "密码至少6位")
+
+  const usernameTaken = mockUsers.some(
+    (user) => user.username.toLowerCase() === username.toLowerCase(),
+  )
+  if (usernameTaken) throwApiError(400, "用户名已存在")
+
+  const emailTaken = mockUsers.some((user) => user.email?.toLowerCase() === email.toLowerCase())
+  if (emailTaken) throwApiError(400, "邮箱已被注册")
+
+  await new Promise((r) => setTimeout(r, 500))
+
+  const user: User = {
+    id: nextUserId(),
+    username,
+    email,
+    nickname: username,
+    avatar: "/avatars/u1.jpg",
+    role: "consumer",
+    createdAt: new Date().toISOString(),
+  }
+
+  mockUsers.push(user)
+  return user
+}
+
+export async function login(input: LoginInput): Promise<User> {
+  const username = input.username.trim()
+  const password = input.password
+
+  if (!username) throwApiError(400, "请输入用户名")
+  if (!password || password.length < 6) throwApiError(400, "密码至少6位")
+
+  await new Promise((r) => setTimeout(r, 500))
+
+  const user =
+    mockUsers.find((u) => u.username.toLowerCase() === username.toLowerCase()) ??
+    mockUsers.find((u) => u.email?.toLowerCase() === username.toLowerCase())
+
+  if (!user) throwApiError(404, "用户不存在")
+  return user
+}
+
+export async function resetPassword(input: {
+  email: string
+  vcode: string
+  newPassword: string
+}): Promise<void> {
+  const email = input.email.trim()
+  const vcode = input.vcode.trim()
+  const newPassword = input.newPassword
+
+  if (!email) throwApiError(400, "请输入邮箱")
+  if (!vcode) throwApiError(400, "请输入验证码")
+  if (!newPassword || newPassword.length < 8) throwApiError(400, "密码至少8位")
+
+  await new Promise((r) => setTimeout(r, 500))
+
+  const user = mockUsers.find((u) => u.email?.toLowerCase() === email.toLowerCase())
+  if (!user) throwApiError(404, "用户不存在")
+}

lib/api/email.ts

@@ -0,0 +1,4 @@
+export function sendEmailVerificationCode(input: { email: string; scene: string }): never {
+  void input
+  throw new Error("Not implemented")
+}

lib/api/files.ts

@@ -0,0 +1,4 @@
+export function getFileById(fileId: string): never {
+  void fileId
+  throw new Error("Not implemented")
+}

lib/api/index.ts

@@ -1,8 +1,12 @@
+export { login, register, resetPassword } from "./auth"
+export { sendForgotPasswordCode } from "./auth-extra"
 export { getChatSessionById, listChatMessages, listChatSessions } from "./chat"
 export { requestWithAuth } from "./client"
 export { addComment, listComments, listCommentsByPost, toggleCommentLike } from "./comments"
 export { getDisputeByOrderId, listDisputes } from "./disputes"
+export { sendEmailVerificationCode } from "./email"
 export { isFavorited, listFavorites, listFavoritesByUser } from "./favorites"
+export { getFileById } from "./files"
 export { getGameById, listGames } from "./games"
 export { addNotification, listNotifications, markNotificationAsRead } from "./notifications"
 export { getOrderById, listOrders, listOrdersByConsumer } from "./orders"

store/auth.ts

@@ -25,7 +25,7 @@ interface AuthState {
   themePreference: ThemePreference
   user: User | null
   switchRole: (role: UserRole) => void
-  submitVerification: (role: UserRole) => void
+  submitVerification: (role: UserRole, materials?: Record<string, string>) => void
   approveVerification: (role: UserRole) => void
   rejectVerification: (role: UserRole, reason: string) => void
   setNotificationPref: (type: keyof NotificationPrefs, enabled: boolean) => void
@@ -50,7 +50,7 @@ export const useAuthStore = create<AuthState>((set, get) => ({
       set({ currentRole: role })
     }
   },
-  submitVerification: (role) =>
+  submitVerification: (role, _materials) =>
     set((state) => {
       if (state.verifiedRoles.includes(role)) {
         return state