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

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