feat: settings, wallet, notifications, and identity verification pages

2026-02-20 15:34:15 +08:00
parent 6523556d8b
commit 5b21793ede
4 changed files with 464 additions and 9 deletions
@@ -1,8 +1,119 @@
+import {
+  ArrowDownLeft,
+  ArrowUpRight,
+  CreditCard,
+  DollarSign,
+  RefreshCw,
+  Wallet,
+} from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import { mockTransactions, walletBalance } from "@/lib/mock-data"
+
+const typeLabels: Record<string, string> = {
+  topup: "充值",
+  payment: "支付",
+  income: "收入",
+  withdrawal: "提现",
+  refund: "退款",
+}
+
+const typeIcons: Record<string, typeof ArrowUpRight> = {
+  topup: ArrowDownLeft,
+  payment: ArrowUpRight,
+  income: ArrowDownLeft,
+  withdrawal: ArrowUpRight,
+  refund: ArrowDownLeft,
+}
+
 export default function WalletPage() {
  return (
-    <div>
+    <div className="max-w-2xl space-y-6">
      <h1 className="text-2xl font-bold">钱包</h1>
-      <p className="mt-2 text-muted-foreground">充值、余额、支付记录、收入明细、提现</p>
+
+      <Card>
+        <CardContent className="pt-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-muted-foreground">账户余额</p>
+              <p className="text-3xl font-bold mt-1">¥{walletBalance.toFixed(2)}</p>
+            </div>
+            <Wallet className="h-10 w-10 text-muted-foreground" />
+          </div>
+          <div className="flex gap-2 mt-4">
+            <Button>
+              <DollarSign className="mr-1 h-4 w-4" />
+              充值
+            </Button>
+            <Button variant="outline">
+              <CreditCard className="mr-1 h-4 w-4" />
+              提现
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">快捷充值</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-3 gap-2">
+            {[50, 100, 200, 500, 1000, 2000].map((amount) => (
+              <Button key={`amount-${amount}`} variant="outline" className="h-12">
+                ¥{amount}
+              </Button>
+            ))}
+          </div>
+          <Separator />
+          <div className="flex gap-2">
+            <Input placeholder="自定义金额" type="number" />
+            <Button>充值</Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between">
+          <CardTitle className="text-base">交易记录</CardTitle>
+          <Button variant="ghost" size="sm">
+            <RefreshCw className="mr-1 h-3.5 w-3.5" />
+            刷新
+          </Button>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {mockTransactions.map((tx) => {
+            const Icon = typeIcons[tx.type]
+            const isIncome = tx.amount > 0
+            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 className="h-4 w-4" />
+                  </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")}
+                    </p>
+                  </div>
+                </div>
+                <div className="text-right">
+                  <p className={`text-sm font-medium ${isIncome ? "text-green-600" : ""}`}>
+                    {isIncome ? "+" : ""}¥{Math.abs(tx.amount).toFixed(2)}
+                  </p>
+                  <Badge variant="outline" className="text-[10px]">
+                    {typeLabels[tx.type]}
+                  </Badge>
+                </div>
+              </div>
+            )
+          })}
+        </CardContent>
+      </Card>
    </div>
  )
 }