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

app/(account)/notifications/page.tsx

@@ -1,8 +1,119 @@
+import { Bell, CheckCheck, MessageSquare, ShoppingBag } from "lucide-react"
+import Link from "next/link"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { mockNotifications } from "@/lib/mock-data"
+import type { Notification } from "@/lib/types"
+
+const typeIcons: Record<Notification["type"], typeof Bell> = {
+  order: ShoppingBag,
+  community: MessageSquare,
+  system: Bell,
+}
+
+const typeLabels: Record<Notification["type"], string> = {
+  order: "订单",
+  community: "社区",
+  system: "系统",
+}
+
+function NotificationItem({ notification }: { notification: Notification }) {
+  const Icon = typeIcons[notification.type]
+  const content = (
+    <div className="flex items-start gap-3 rounded-md border p-3 hover:bg-muted/50 transition-colors">
+      <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center shrink-0 mt-0.5">
+        <Icon className="h-4 w-4" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium">{notification.title}</span>
+          {!notification.read && <span className="h-2 w-2 rounded-full bg-primary shrink-0" />}
+        </div>
+        <p className="text-sm text-muted-foreground mt-0.5">{notification.content}</p>
+        <p className="text-xs text-muted-foreground mt-1">
+          {new Date(notification.createdAt).toLocaleString("zh-CN")}
+        </p>
+      </div>
+      <Badge variant="outline" className="text-[10px] shrink-0">
+        {typeLabels[notification.type]}
+      </Badge>
+    </div>
+  )
+
+  return notification.link ? <Link href={notification.link}>{content}</Link> : content
+}
+
 export default function NotificationsPage() {
+  const unreadCount = mockNotifications.filter((n) => !n.read).length
+  const orderNotifs = mockNotifications.filter((n) => n.type === "order")
+  const communityNotifs = mockNotifications.filter((n) => n.type === "community")
+  const systemNotifs = mockNotifications.filter((n) => n.type === "system")
+
   return (
-    <div>
+    <div className="max-w-2xl space-y-6">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
           <h1 className="text-2xl font-bold">通知中心</h1>
-      <p className="mt-2 text-muted-foreground">订单通知、社区通知、系统通知</p>
+          {unreadCount > 0 && <Badge>{unreadCount} 条未读</Badge>}
+        </div>
+        <Button variant="outline" size="sm">
+          <CheckCheck className="mr-1 h-4 w-4" />
+          全部已读
+        </Button>
+      </div>
+
+      <Tabs defaultValue="all">
+        <TabsList>
+          <TabsTrigger value="all">全部</TabsTrigger>
+          <TabsTrigger value="order">订单</TabsTrigger>
+          <TabsTrigger value="community">社区</TabsTrigger>
+          <TabsTrigger value="system">系统</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="all" className="space-y-2 mt-4">
+          {mockNotifications.map((n) => (
+            <NotificationItem key={n.id} notification={n} />
+          ))}
+        </TabsContent>
+
+        <TabsContent value="order" className="space-y-2 mt-4">
+          {orderNotifs.length === 0 ? (
+            <Card>
+              <CardContent className="py-8 text-center text-sm text-muted-foreground">
+                暂无订单通知
+              </CardContent>
+            </Card>
+          ) : (
+            orderNotifs.map((n) => <NotificationItem key={n.id} notification={n} />)
+          )}
+        </TabsContent>
+
+        <TabsContent value="community" className="space-y-2 mt-4">
+          {communityNotifs.length === 0 ? (
+            <Card>
+              <CardContent className="py-8 text-center text-sm text-muted-foreground">
+                暂无社区通知
+              </CardContent>
+            </Card>
+          ) : (
+            communityNotifs.map((n) => <NotificationItem key={n.id} notification={n} />)
+          )}
+        </TabsContent>
+
+        <TabsContent value="system" className="space-y-2 mt-4">
+          {systemNotifs.length === 0 ? (
+            <Card>
+              <CardContent className="py-8 text-center text-sm text-muted-foreground">
+                暂无系统通知
+              </CardContent>
+            </Card>
+          ) : (
+            systemNotifs.map((n) => <NotificationItem key={n.id} notification={n} />)
+          )}
+        </TabsContent>
+      </Tabs>
     </div>
   )
 }

app/(account)/settings/page.tsx

@@ -1,8 +1,124 @@
+"use client"
+
+import { Camera } from "lucide-react"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Separator } from "@/components/ui/separator"
+import { Switch } from "@/components/ui/switch"
+import { Textarea } from "@/components/ui/textarea"
+import { currentUser } from "@/lib/mock-data"
+import { useAuthStore } from "@/store/auth"
+
 export default function SettingsPage() {
+  const { currentRole, switchRole } = useAuthStore()
+
   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>
+        <CardHeader>
+          <CardTitle className="text-base">头像</CardTitle>
+        </CardHeader>
+        <CardContent className="flex items-center gap-4">
+          <div className="relative">
+            <Avatar className="h-20 w-20">
+              <AvatarImage src={currentUser.avatar} />
+              <AvatarFallback className="text-lg">{currentUser.nickname[0]}</AvatarFallback>
+            </Avatar>
+            <button
+              type="button"
+              className="absolute bottom-0 right-0 h-7 w-7 rounded-full bg-primary text-primary-foreground flex items-center justify-center"
+            >
+              <Camera className="h-3.5 w-3.5" />
+            </button>
+          </div>
+          <p className="text-sm text-muted-foreground">点击更换头像，支持 JPG、PNG 格式</p>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">基本信息</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="nickname">昵称</Label>
+            <Input id="nickname" defaultValue={currentUser.nickname} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="bio">个人简介</Label>
+            <Textarea id="bio" defaultValue={currentUser.bio} rows={3} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="phone">手机号</Label>
+            <Input id="phone" defaultValue={currentUser.phone} disabled />
+            <p className="text-xs text-muted-foreground">如需更换手机号请联系客服</p>
+          </div>
+          <Button>保存修改</Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">身份切换</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <p className="text-sm text-muted-foreground">切换身份后，导航和功能将对应变化</p>
+          <RadioGroup
+            value={currentRole}
+            onValueChange={(v) => switchRole(v as "consumer" | "player" | "owner")}
+          >
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value="consumer" id="role-consumer" />
+              <Label htmlFor="role-consumer">消费者</Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value="player" id="role-player" />
+              <Label htmlFor="role-player">打手</Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value="owner" id="role-owner" />
+              <Label htmlFor="role-owner">店主</Label>
+            </div>
+          </RadioGroup>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">通知偏好</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium">订单通知</p>
+              <p className="text-xs text-muted-foreground">接单、完成、争议等状态变更</p>
+            </div>
+            <Switch defaultChecked />
+          </div>
+          <Separator />
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium">社区通知</p>
+              <p className="text-xs text-muted-foreground">点赞、评论、关注</p>
+            </div>
+            <Switch defaultChecked />
+          </div>
+          <Separator />
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium">系统通知</p>
+              <p className="text-xs text-muted-foreground">平台公告、活动推送</p>
+            </div>
+            <Switch />
+          </div>
+        </CardContent>
+      </Card>
     </div>
   )
 }

app/(account)/verify/page.tsx

@@ -1,8 +1,125 @@
+"use client"
+
+import { CheckCircle, Clock, ShieldCheck, Upload } from "lucide-react"
+import { useState } from "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 { Label } from "@/components/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
+import { Textarea } from "@/components/ui/textarea"
+
 export default function VerifyPage() {
+  const [submitted, setSubmitted] = useState(false)
+
+  if (submitted) {
     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="py-12 text-center space-y-4">
+            <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>
+    )
+  }
+
+  return (
+    <div className="max-w-2xl space-y-6">
+      <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">
+          <div className="flex items-start gap-2">
+            <ShieldCheck className="h-4 w-4 shrink-0 mt-0.5 text-primary" />
+            <span>通过身份认证后，你可以成为打手或店主，开始接单或经营店铺</span>
+          </div>
+          <div className="flex items-start gap-2">
+            <CheckCircle className="h-4 w-4 shrink-0 mt-0.5 text-primary" />
+            <span>认证信息仅用于平台审核，不会对外展示</span>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">申请认证</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="space-y-2">
+            <Label>认证类型</Label>
+            <Select>
+              <SelectTrigger>
+                <SelectValue placeholder="选择认证类型" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="player">打手认证</SelectItem>
+                <SelectItem value="owner">店主认证</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="real-name">真实姓名</Label>
+            <Input id="real-name" placeholder="请输入真实姓名" />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="id-number">身份证号</Label>
+            <Input id="id-number" placeholder="请输入身份证号" />
+          </div>
+
+          <Separator />
+
+          <div className="space-y-2">
+            <Label>游戏资质（打手认证）</Label>
+            <Textarea placeholder="请描述你的游戏经历、段位、擅长游戏等" rows={3} />
+          </div>
+
+          <div className="space-y-2">
+            <Label>证明材料</Label>
+            <div className="flex gap-2">
+              <div 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">
+                <Upload className="h-5 w-5" />
+                <span className="text-[10px]">身份证正面</span>
+              </div>
+              <div 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">
+                <Upload className="h-5 w-5" />
+                <span className="text-[10px]">身份证反面</span>
+              </div>
+              <div 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">
+                <Upload className="h-5 w-5" />
+                <span className="text-[10px]">游戏截图</span>
+              </div>
+            </div>
+            <p className="text-xs text-muted-foreground">支持 JPG、PNG 格式，单张不超过 5MB</p>
+          </div>
+
+          <Button className="w-full" onClick={() => setSubmitted(true)}>
+            提交认证申请
+          </Button>
+        </CardContent>
+      </Card>
     </div>
   )
 }

app/(account)/wallet/page.tsx

@@ -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>
   )
 }