feat(ui): refine account pages

app/(account)/verify/page.tsx

@@ -11,6 +11,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
+import { StatusBadge } from "@/components/ui/status-badge"
 import {
   applyCurrentUserVerification,
   getCurrentUserForLogin,
@@ -21,7 +22,7 @@ import { toApiError } from "@/lib/errors"
 import { notifyInfo, notifySuccess } from "@/lib/toast"
 import type { UserRole } from "@/lib/types"
 import { useAuthStore } from "@/store/auth"
-import { CheckCircle, Clock, ShieldCheck, Upload } from "lucide-react"
+import { CheckCircle, ShieldCheck, Upload } from "lucide-react"
 import { useEffect, useState } from "react"
 
 type MaterialKey = "idCardFront" | "idCardBack" | "gameScreenshot"
@@ -38,7 +39,7 @@ function MaterialUpload({
   onSelect: (file: File) => Promise<void>
 }) {
   return (
-    <label className="h-24 w-24 rounded-md border-2 border-dashed border-muted-foreground/25 flex flex-col items-center justify-center gap-1 text-muted-foreground cursor-pointer hover:border-muted-foreground/50 transition-colors">
+    <label className="h-24 w-24 rounded-lg border border-border/60 bg-muted/20 flex flex-col items-center justify-center gap-1.5 text-muted-foreground cursor-pointer hover:bg-accent/50 hover:border-border transition-colors">
       <input
         type="file"
         accept="image/*"
@@ -52,10 +53,10 @@ function MaterialUpload({
           target.value = ""
         }}
       />
-      <Upload className="h-5 w-5" />
-      <span className="text-[10px]">{uploading ? "上传中..." : label}</span>
+      <Upload className="h-5 w-5 opacity-70" />
+      <span className="text-[10px] font-medium">{uploading ? "上传中..." : label}</span>
       {value && (
-        <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
+        <Badge variant="success" className="text-[10px] px-1.5 py-0 mt-0.5">
           已上传
         </Badge>
       )}
@@ -155,14 +156,12 @@ export default function VerifyPage() {
   }
 
   return (
-    <div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
+    <div className="container mx-auto max-w-2xl px-4 py-8 space-y-8">
       <h1 className="text-2xl font-bold">身份认证</h1>
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">认证说明</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-3 text-sm text-muted-foreground">
+      <section className="space-y-4">
+        <h2 className="text-base font-semibold">认证说明</h2>
+        <div className="rounded-xl border border-border/60 bg-muted/10 p-4 space-y-3 text-sm text-muted-foreground">
           <div className="flex items-start gap-2">
             <ShieldCheck className="h-4 w-4 shrink-0 mt-0.5 text-primary" />
             <span>通过身份认证后，你可以成为打手或店主，开始接单或经营店铺</span>
@@ -171,64 +170,51 @@ export default function VerifyPage() {
             <CheckCircle className="h-4 w-4 shrink-0 mt-0.5 text-primary" />
             <span>认证信息仅用于平台审核，不会对外展示</span>
           </div>
-        </CardContent>
-      </Card>
+        </div>
+      </section>
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">认证状态</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-3">
+      <section className="space-y-4">
+        <h2 className="text-base font-semibold">认证状态</h2>
+        <div className="rounded-xl border border-border/60 divide-y divide-border/60">
           {roleMeta.map((item) => {
             const status = statusFor(item.role)
             const reason = reasonFor(item.role)
 
             return (
-              <Card key={item.role} className="p-3 space-y-2 shadow-none">
+              <div key={item.role} className="flex flex-col gap-2 p-4">
                 <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>
+                    <StatusBadge status="success">已通过</StatusBadge>
                   ) : status === "pending" ? (
-                    <Badge variant="outline">
-                      <Clock className="mr-1 h-3.5 w-3.5" />
-                      审核中
-                    </Badge>
+                    <StatusBadge status="info">审核中</StatusBadge>
                   ) : status === "rejected" ? (
-                    <Badge variant="outline" className="text-red-700 border-red-200 bg-red-50">
-                      未通过
-                    </Badge>
+                    <StatusBadge status="destructive">未通过</StatusBadge>
                   ) : (
-                    <Badge variant="secondary">未申请</Badge>
+                    <StatusBadge status="neutral">未申请</StatusBadge>
                   )}
                 </div>
 
                 {status === "rejected" && (
-                  <p className="text-xs text-muted-foreground">驳回原因：{reason}</p>
+                  <div className="flex items-center justify-between mt-2">
+                    <p className="text-xs text-muted-foreground">驳回原因：{reason}</p>
+                    <Button variant="outline" size="sm" onClick={() => setVerifyRole(item.role)}>
+                      重新填写
+                    </Button>
+                  </div>
                 )}
-
-                {status === "rejected" && (
-                  <Button variant="outline" size="sm" onClick={() => setVerifyRole(item.role)}>
-                    重新填写
-                  </Button>
-                )}
-              </Card>
+              </div>
             )
           })}
-        </CardContent>
-      </Card>
+        </div>
+      </section>
 
-      <Card>
+      <Card className="border-border/60 shadow-sm">
         <CardHeader>
           <CardTitle className="text-base">申请认证</CardTitle>
         </CardHeader>
         <CardContent className="space-y-6">
-          <div className="space-y-2">
+          <div className="space-y-3">
             <Label>认证类型</Label>
             <Select value={verifyRole} onValueChange={(value) => setVerifyRole(value as UserRole)}>
               <SelectTrigger>
@@ -241,9 +227,9 @@ export default function VerifyPage() {
             </Select>
           </div>
 
-          <div className="space-y-2">
+          <div className="space-y-3">
             <Label>证明材料</Label>
-            <div className="flex gap-2">
+            <div className="flex flex-wrap gap-3">
               <MaterialUpload
                 label="身份证正面"
                 value={idCardFront}