feat(auth): complete verification state machine with resubmit flow

app/(account)/verify/page.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { CheckCircle, Clock, ShieldCheck, Upload } from "lucide-react"
-import { useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
@@ -22,29 +22,39 @@ import { useAuthStore } from "@/store/auth"
 export default function VerifyPage() {
   const [verifyRole, setVerifyRole] = useState<UserRole | "">("")
   const verificationStatus = useAuthStore((state) => state.verificationStatus)
+  const verificationReasons = useAuthStore((state) => state.verificationReasons)
+  const verifiedRoles = useAuthStore((state) => state.verifiedRoles)
   const submitVerification = useAuthStore((state) => state.submitVerification)
-  const submitted = Object.values(verificationStatus).includes("pending")
+  const approveVerification = useAuthStore((state) => state.approveVerification)
+  const timersRef = useRef<Map<UserRole, ReturnType<typeof setTimeout>>>(new Map())
 
-  if (submitted) {
+  useEffect(
-    return (
+    () => () => {
-      <div className="max-w-2xl space-y-6">
+      timersRef.current.forEach((timer) => {
-        <h1 className="text-2xl font-bold">身份认证</h1>
+        clearTimeout(timer)
-        <Card>
+      })
-          <CardContent className="py-12 text-center space-y-4">
+      timersRef.current.clear()
-            <Clock className="h-12 w-12 mx-auto text-muted-foreground" />
+    },
-            <h2 className="text-xl font-bold">认证申请已提交</h2>
+    [],
-            <p className="text-sm text-muted-foreground">
-              我们将在 1-3 个工作日内审核你的申请，审核结果将通过通知中心告知
-            </p>
-            <Badge variant="outline" className="text-sm">
-              <Clock className="mr-1 h-3.5 w-3.5" />
-              审核中
-            </Badge>
-          </CardContent>
-        </Card>
-      </div>
   )
+
+  const submitWithMockApproval = (role: UserRole) => {
+    submitVerification(role)
+    const oldTimer = timersRef.current.get(role)
+    if (oldTimer) {
+      clearTimeout(oldTimer)
     }
+    const timer = setTimeout(() => {
+      approveVerification(role)
+      timersRef.current.delete(role)
+    }, 3000)
+    timersRef.current.set(role, timer)
+  }
+
+  const roleMeta: { role: UserRole; label: string }[] = [
+    { role: "player", label: "打手认证" },
+    { role: "owner", label: "店主认证" },
+  ]
 
   return (
     <div className="max-w-2xl space-y-6">
@@ -66,6 +76,59 @@ export default function VerifyPage() {
         </CardContent>
       </Card>
 
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">认证状态</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {roleMeta.map((item) => {
+            const status = verificationStatus[item.role]
+            const reason = verificationReasons[item.role]
+
+            return (
+              <div key={item.role} className="rounded-md border p-3 space-y-2">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm font-medium">{item.label}</span>
+                  {status === "approved" || verifiedRoles.includes(item.role) ? (
+                    <Badge
+                      variant="outline"
+                      className="text-green-700 border-green-200 bg-green-50"
+                    >
+                      已通过
+                    </Badge>
+                  ) : status === "pending" ? (
+                    <Badge variant="outline">
+                      <Clock className="mr-1 h-3.5 w-3.5" />
+                      审核中
+                    </Badge>
+                  ) : status === "rejected" ? (
+                    <Badge variant="outline" className="text-red-700 border-red-200 bg-red-50">
+                      未通过
+                    </Badge>
+                  ) : (
+                    <Badge variant="secondary">未申请</Badge>
+                  )}
+                </div>
+
+                {status === "rejected" && (
+                  <p className="text-xs text-muted-foreground">驳回原因：{reason}</p>
+                )}
+
+                {status === "rejected" && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => submitWithMockApproval(item.role)}
+                  >
+                    重新提交
+                  </Button>
+                )}
+              </div>
+            )
+          })}
+        </CardContent>
+      </Card>
+
       <Card>
         <CardHeader>
           <CardTitle className="text-base">申请认证</CardTitle>
@@ -122,13 +185,19 @@ export default function VerifyPage() {
 
           <Button
             className="w-full"
-            disabled={!verifyRole}
+            disabled={
+              !verifyRole ||
+              verificationStatus[verifyRole] === "pending" ||
+              verificationStatus[verifyRole] === "approved"
+            }
             onClick={() => {
               if (!verifyRole) return
-              submitVerification(verifyRole)
+              submitWithMockApproval(verifyRole)
             }}
           >
-            提交认证申请
+            {verifyRole && verificationStatus[verifyRole] === "rejected"
+              ? "重新提交认证申请"
+              : "提交认证申请"}
           </Button>
         </CardContent>
       </Card>

store/auth.ts

@@ -6,9 +6,12 @@ interface AuthState {
   currentRole: UserRole
   verifiedRoles: UserRole[]
   verificationStatus: Partial<Record<UserRole, VerificationStatus>>
+  verificationReasons: Partial<Record<UserRole, string>>
   user: User | null
   switchRole: (role: UserRole) => void
   submitVerification: (role: UserRole) => void
+  approveVerification: (role: UserRole) => void
+  rejectVerification: (role: UserRole, reason: string) => void
   login: (user: User, verifiedRoles?: UserRole[]) => void
   logout: () => void
 }
@@ -18,6 +21,7 @@ export const useAuthStore = create<AuthState>((set, get) => ({
   currentRole: "consumer",
   verifiedRoles: ["consumer"],
   verificationStatus: { consumer: "approved" },
+  verificationReasons: {},
   user: null,
   switchRole: (role) => {
     const { verifiedRoles } = get()
@@ -31,11 +35,52 @@ export const useAuthStore = create<AuthState>((set, get) => ({
         return state
       }
 
+      const nextReasons = { ...state.verificationReasons }
+      delete nextReasons[role]
+
       return {
         verificationStatus: {
           ...state.verificationStatus,
           [role]: "pending",
         },
+        verificationReasons: nextReasons,
+      }
+    }),
+  approveVerification: (role) =>
+    set((state) => {
+      if (state.verifiedRoles.includes(role) && state.verificationStatus[role] === "approved") {
+        return state
+      }
+
+      const nextReasons = { ...state.verificationReasons }
+      delete nextReasons[role]
+
+      return {
+        verifiedRoles: state.verifiedRoles.includes(role)
+          ? state.verifiedRoles
+          : [...state.verifiedRoles, role],
+        verificationStatus: {
+          ...state.verificationStatus,
+          [role]: "approved",
+        },
+        verificationReasons: nextReasons,
+      }
+    }),
+  rejectVerification: (role, reason) =>
+    set((state) => {
+      if (state.verifiedRoles.includes(role)) {
+        return state
+      }
+
+      return {
+        verificationStatus: {
+          ...state.verificationStatus,
+          [role]: "rejected",
+        },
+        verificationReasons: {
+          ...state.verificationReasons,
+          [role]: reason.trim() || "认证资料不完整，请补充后重试",
+        },
       }
     }),
   login: (user, verifiedRoles = ["consumer"]) =>
@@ -51,6 +96,7 @@ export const useAuthStore = create<AuthState>((set, get) => ({
         },
         {},
       ),
+      verificationReasons: {},
     }),
   logout: () =>
     set({
@@ -58,6 +104,7 @@ export const useAuthStore = create<AuthState>((set, get) => ({
       currentRole: "consumer",
       verifiedRoles: ["consumer"],
       verificationStatus: { consumer: "approved" },
+      verificationReasons: {},
       user: null,
     }),
 }))