feat(ui): refine account pages

app/(account)/wallet/page.tsx

@@ -3,6 +3,7 @@
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { EmptyState } from "@/components/ui/empty-state"
 import { Input } from "@/components/ui/input"
 import { Separator } from "@/components/ui/separator"
 import { requestWithAuth } from "@/lib/api"
@@ -42,6 +43,14 @@ const typeIcons: Record<string, typeof ArrowUpRight> = {
   refund: ArrowDownLeft,
 }
 
+const typeVariants: Record<string, "success" | "info" | "warning" | "neutral" | "destructive"> = {
+  topup: "success",
+  income: "success",
+  refund: "info",
+  payment: "neutral",
+  withdrawal: "neutral",
+}
+
 export default function WalletPage() {
   const { currentRole } = useAuthStore()
   const isConsumer = currentRole === "consumer"
@@ -196,25 +205,25 @@ export default function WalletPage() {
     <div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
       <h1 className="text-2xl font-bold">钱包</h1>
 
-      <Card>
+      <Card className="border-border/60 shadow-sm">
         <CardContent className="pt-6">
           <div className="flex items-center justify-between">
             <div>
               <p className="text-sm text-muted-foreground">
                 {isConsumer ? "账户余额" : "收入余额"}
               </p>
-              <p className="text-3xl font-bold mt-1">
+              <p className="text-3xl font-bold mt-1 tracking-tight">
                 {balance === null ? (
-                  <span className="text-muted-foreground">--</span>
+                  <span className="text-muted-foreground opacity-50">--</span>
                 ) : (
                   <>¥{balance.toFixed(2)}</>
                 )}
               </p>
               {loadError && <p className="text-xs text-destructive mt-2">{loadError}</p>}
             </div>
-            <Wallet className="h-10 w-10 text-muted-foreground" />
+            <Wallet className="h-10 w-10 text-muted-foreground/30" />
           </div>
-          <div className="flex gap-2 mt-4">
+          <div className="flex gap-2 mt-6">
             {isConsumer ? (
               <Button
                 disabled={isMutating}
@@ -234,7 +243,7 @@ export default function WalletPage() {
       </Card>
 
       {isConsumer ? (
-        <Card>
+        <Card className="border-border/60 shadow-sm">
           <CardHeader>
             <CardTitle className="text-base">快捷充值</CardTitle>
           </CardHeader>
@@ -244,7 +253,7 @@ export default function WalletPage() {
                 <Button
                   key={`amount-${amount}`}
                   variant={selectedAmount === amount ? "default" : "outline"}
-                  className="h-12"
+                  className="h-12 border-border/60"
                   onClick={() => {
                     setSelectedAmount(amount)
                     setCustomAmount(amount.toString())
@@ -254,12 +263,13 @@ export default function WalletPage() {
                 </Button>
               ))}
             </div>
-            <Separator />
+            <Separator className="bg-border/60" />
             <div className="flex gap-2">
               <Input
                 placeholder="自定义金额"
                 type="number"
                 value={customAmount}
+                className="border-border/60 focus-visible:ring-primary/20"
                 onChange={(event) => {
                   setCustomAmount(event.target.value)
                   setSelectedAmount(null)
@@ -272,31 +282,32 @@ export default function WalletPage() {
           </CardContent>
         </Card>
       ) : (
-        <Card>
+        <Card className="border-border/60 shadow-sm">
           <CardHeader>
             <CardTitle className="text-base">收入概览</CardTitle>
           </CardHeader>
           <CardContent>
             <div className="grid grid-cols-3 gap-4 text-center">
-              <div>
+              <div className="space-y-1">
                 <p className="text-xs text-muted-foreground">累计收入</p>
                 <p className="text-lg font-bold">¥{incomeSummary.income.toFixed(2)}</p>
               </div>
-              <div>
+              <div className="space-y-1">
                 <p className="text-xs text-muted-foreground">可提现</p>
                 <p className="text-lg font-bold">¥{incomeSummary.available.toFixed(2)}</p>
               </div>
-              <div>
+              <div className="space-y-1">
                 <p className="text-xs text-muted-foreground">已提现</p>
                 <p className="text-lg font-bold">¥{incomeSummary.withdrawn.toFixed(2)}</p>
               </div>
             </div>
-            <Separator className="my-4" />
+            <Separator className="my-6 bg-border/60" />
             <div className="flex gap-2">
               <Input
                 placeholder="提现金额"
                 type="number"
                 value={customAmount}
+                className="border-border/60 focus-visible:ring-primary/20"
                 onChange={(event) => setCustomAmount(event.target.value)}
               />
               <Button variant="outline" disabled={isMutating} onClick={() => void handleWithdraw()}>
@@ -307,9 +318,14 @@ export default function WalletPage() {
         </Card>
       )}
 
-      <Card>
-        <CardHeader className="flex flex-row items-center justify-between">
-          <CardTitle className="text-base">交易记录</CardTitle>
+      <Card className="border-border/60 shadow-sm overflow-hidden">
+        <CardHeader className="flex flex-row items-center justify-between border-b border-border/60 bg-muted/10 py-4">
+          <div className="space-y-1">
+            <CardTitle className="text-base">交易记录</CardTitle>
+            {lastRefreshedAt && (
+              <p className="text-xs text-muted-foreground">最近刷新：{lastRefreshedAt}</p>
+            )}
+          </div>
           <Button
             variant="ghost"
             size="sm"
@@ -323,42 +339,62 @@ export default function WalletPage() {
             刷新
           </Button>
         </CardHeader>
-        <CardContent className="space-y-3">
-          {lastRefreshedAt && (
-            <p className="text-xs text-muted-foreground">最近刷新：{lastRefreshedAt}</p>
-          )}
+        <CardContent className="p-0">
           {isLoading ? (
-            <div className="text-center py-8 text-muted-foreground text-sm">加载中...</div>
+            <EmptyState
+              title="加载中"
+              description="正在获取交易记录..."
+              icon={RefreshCw}
+              className="border-0"
+            />
           ) : filteredTransactions.length > 0 ? (
-            filteredTransactions.map((tx) => {
-              const Icon = typeIcons[tx.type]
-              const isIncome = tx.type === "topup" || tx.type === "income" || tx.type === "refund"
-              return (
-                <div key={tx.id} className="flex items-center justify-between">
-                  <div className="flex items-center gap-3">
-                    <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center">
-                      {Icon ? <Icon className="h-4 w-4" /> : <ArrowUpRight className="h-4 w-4" />}
+            <div className="divide-y divide-border/60">
+              {filteredTransactions.map((tx) => {
+                const Icon = typeIcons[tx.type]
+                const isIncome = tx.type === "topup" || tx.type === "income" || tx.type === "refund"
+                return (
+                  <div
+                    key={tx.id}
+                    className="flex items-center justify-between p-4 hover:bg-muted/10 transition-colors"
+                  >
+                    <div className="flex items-center gap-3">
+                      <div className="h-10 w-10 rounded-full bg-muted/40 flex items-center justify-center border border-border/60">
+                        {Icon ? (
+                          <Icon className="h-4 w-4 text-foreground/70" />
+                        ) : (
+                          <ArrowUpRight className="h-4 w-4 text-foreground/70" />
+                        )}
+                      </div>
+                      <div className="space-y-0.5">
+                        <p className="text-sm font-medium">{tx.description}</p>
+                        <p className="text-[11px] text-muted-foreground">
+                          {new Date(tx.createdAt).toLocaleString("zh-CN")}
+                        </p>
+                      </div>
                     </div>
-                    <div>
-                      <p className="text-sm font-medium">{tx.description}</p>
-                      <p className="text-xs text-muted-foreground">
-                        {new Date(tx.createdAt).toLocaleString("zh-CN")}
+                    <div className="text-right space-y-1">
+                      <p
+                        className={`text-sm font-bold ${isIncome ? "text-success" : "text-foreground"}`}
+                      >
+                        {isIncome ? "+" : ""}¥{Math.abs(Number(tx.amount)).toFixed(2)}
                       </p>
+                      <Badge
+                        variant={typeVariants[tx.type] || "neutral"}
+                        className="text-[10px] px-1.5 py-0 leading-tight"
+                      >
+                        {typeLabels[tx.type]}
+                      </Badge>
                     </div>
                   </div>
-                  <div className="text-right">
-                    <p className={`text-sm font-medium ${isIncome ? "text-green-600" : ""}`}>
-                      {isIncome ? "+" : ""}¥{Math.abs(Number(tx.amount)).toFixed(2)}
-                    </p>
-                    <Badge variant="outline" className="text-[10px]">
-                      {typeLabels[tx.type]}
-                    </Badge>
-                  </div>
-                </div>
-              )
-            })
+                )
+              })}
+            </div>
           ) : (
-            <div className="text-center py-8 text-muted-foreground text-sm">暂无交易记录</div>
+            <EmptyState
+              title="暂无交易记录"
+              description="你的所有收支记录将显示在这里。"
+              className="border-0"
+            />
           )}
         </CardContent>
       </Card>