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({
-  email: z.string().email("请输入正确的邮箱地址"),
-})
+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>) => {
-    await new Promise((r) => setTimeout(r, 500))
-    notifySuccess("重置链接已发送到你的邮箱")
+  useEffect(() => {
+    if (countdown <= 0) return
+    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>) => {
-    await new Promise((r) => setTimeout(r, 500))
-    login(getCurrentUserForLogin(), ["consumer", "player", "owner"])
-    router.push("/")
+  const onSubmit = async (data: z.infer<typeof loginSchema>) => {
+    try {
+      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>
-          <IconInput id="phone" icon={<Phone />} placeholder="输入手机号" {...register("phone")} />
-          {errors.phone && <p className="text-xs text-destructive">{errors.phone.message}</p>}
+          <Label htmlFor="username">用户名</Label>
+          <IconInput
+            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个字符"),
-    phone: z.string().min(11, "请输入正确的手机号"),
+    username: z.string().min(1, "请输入用户名"),
+    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>) => {
-    await new Promise((r) => setTimeout(r, 500))
-    login(getCurrentUserForLogin(), ["consumer"])
-    router.push("/")
+  const onSubmit = async (data: z.infer<typeof registerSchema>) => {
+    try {
+      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="输入你的昵称"
-            {...register("nickname")}
+            placeholder="输入用户名"
+            {...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>
-          <IconInput id="phone" icon={<Phone />} placeholder="输入手机号" {...register("phone")} />
-          {errors.phone && <p className="text-xs text-destructive">{errors.phone.message}</p>}
+          <Label htmlFor="email">邮箱</Label>
+          <IconInput id="email" icon={<Mail />} placeholder="输入邮箱地址" {...register("email")} />
+          {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">