fix(settings): enable profile save and avatar selection

app/(account)/settings/page.tsx

@@ -2,6 +2,7 @@
 
 import { Camera } from "lucide-react"
 import Link from "next/link"
+import { useEffect, useRef, useState } from "react"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
@@ -11,11 +12,22 @@ 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 { notifySuccess } from "@/lib/toast"
 import type { UserRole } from "@/lib/types"
 import { useAuthStore } from "@/store/auth"
 
 export default function SettingsPage() {
-  const { currentRole, verifiedRoles, switchRole, user } = useAuthStore()
+  const { currentRole, verifiedRoles, switchRole, user, updateProfile } = useAuthStore()
+  const [nickname, setNickname] = useState(user?.nickname ?? "")
+  const [bio, setBio] = useState(user?.bio ?? "")
+  const [avatar, setAvatar] = useState(user?.avatar ?? "")
+  const fileRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    setNickname(user?.nickname ?? "")
+    setBio(user?.bio ?? "")
+    setAvatar(user?.avatar ?? "")
+  }, [user])
 
   const isRoleVerified = (role: UserRole) => verifiedRoles.includes(role)
 
@@ -30,12 +42,25 @@ export default function SettingsPage() {
         <CardContent className="flex items-center gap-4">
           <div className="relative">
             <Avatar className="h-20 w-20">
-              <AvatarImage src={user?.avatar} />
+              <AvatarImage src={avatar} />
               <AvatarFallback className="text-lg">{user?.nickname?.[0] ?? "?"}</AvatarFallback>
             </Avatar>
+            <input
+              ref={fileRef}
+              type="file"
+              accept="image/*"
+              className="hidden"
+              onChange={(event) => {
+                const file = event.target.files?.[0]
+                if (!file) return
+                setAvatar(URL.createObjectURL(file))
+                event.target.value = ""
+              }}
+            />
             <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"
+              onClick={() => fileRef.current?.click()}
             >
               <Camera className="h-3.5 w-3.5" />
             </button>
@@ -51,18 +76,38 @@ export default function SettingsPage() {
         <CardContent className="space-y-4">
           <div className="space-y-2">
             <Label htmlFor="nickname">昵称</Label>
-            <Input id="nickname" defaultValue={user?.nickname ?? ""} />
+            <Input
+              id="nickname"
+              value={nickname}
+              onChange={(event) => setNickname(event.target.value)}
+            />
           </div>
           <div className="space-y-2">
             <Label htmlFor="bio">个人简介</Label>
-            <Textarea id="bio" defaultValue={user?.bio ?? ""} rows={3} />
+            <Textarea
+              id="bio"
+              value={bio}
+              onChange={(event) => setBio(event.target.value)}
+              rows={3}
+            />
           </div>
           <div className="space-y-2">
             <Label htmlFor="phone">手机号</Label>
             <Input id="phone" defaultValue={user?.phone ?? ""} disabled />
             <p className="text-xs text-muted-foreground">如需更换手机号请联系客服</p>
           </div>
-          <Button>保存修改</Button>
+          <Button
+            onClick={() => {
+              updateProfile({
+                nickname: nickname.trim() || user?.nickname,
+                bio: bio.trim(),
+                avatar,
+              })
+              notifySuccess("资料已保存")
+            }}
+          >
+            保存修改
+          </Button>
         </CardContent>
       </Card>