97 lines
3.5 KiB
TypeScript
97 lines
3.5 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import Link from "next/link"
|
|
import { ArrowLeft, Phone, Bell, Shield, HelpCircle } from "lucide-react"
|
|
import { useStore } from "@/lib/store"
|
|
|
|
export default function SettingsPage() {
|
|
const { user, updateUser } = useStore()
|
|
const [nickname, setNickname] = useState(user?.nickname || "")
|
|
const [saved, setSaved] = useState(false)
|
|
|
|
const handleSave = () => {
|
|
if (user) {
|
|
updateUser(user.id, { nickname })
|
|
setSaved(true)
|
|
setTimeout(() => setSaved(false), 2000)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<main className="min-h-screen bg-[#0a1628] text-white pb-20">
|
|
<div className="sticky top-0 z-10 bg-[#0a1628]/95 backdrop-blur-md border-b border-gray-700/50">
|
|
<div className="max-w-md mx-auto flex items-center gap-4 p-4">
|
|
<Link href="/my" className="p-2 -ml-2">
|
|
<ArrowLeft className="w-5 h-5" />
|
|
</Link>
|
|
<h1 className="text-lg font-semibold">账户设置</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4">
|
|
<div className="max-w-md mx-auto space-y-4">
|
|
{/* Profile Settings */}
|
|
<div className="bg-[#0f2137]/60 rounded-xl p-4">
|
|
<h3 className="text-gray-400 text-sm mb-4">个人信息</h3>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="text-gray-400 text-xs">昵称</label>
|
|
<input
|
|
type="text"
|
|
value={nickname}
|
|
onChange={(e) => setNickname(e.target.value)}
|
|
className="w-full bg-[#0a1628] border border-gray-700 rounded-lg px-4 py-3 text-white mt-1"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-gray-400 text-xs">手机号</label>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<Phone className="w-4 h-4 text-gray-500" />
|
|
<span className="text-gray-400">{user?.phone}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleSave}
|
|
className="w-full mt-4 bg-[#38bdac] hover:bg-[#2da396] text-white py-3 rounded-lg font-medium"
|
|
>
|
|
{saved ? "已保存" : "保存修改"}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Other Settings */}
|
|
<div className="bg-[#0f2137]/60 rounded-xl overflow-hidden">
|
|
<div className="flex items-center justify-between p-4 border-b border-gray-700/30">
|
|
<div className="flex items-center gap-3">
|
|
<Bell className="w-5 h-5 text-gray-400" />
|
|
<span>消息通知</span>
|
|
</div>
|
|
<div className="w-10 h-5 bg-[#38bdac] rounded-full relative">
|
|
<div className="w-4 h-4 bg-white rounded-full absolute right-0.5 top-0.5" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between p-4 border-b border-gray-700/30">
|
|
<div className="flex items-center gap-3">
|
|
<Shield className="w-5 h-5 text-gray-400" />
|
|
<span>隐私设置</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Link href="/docs" className="flex items-center justify-between p-4">
|
|
<div className="flex items-center gap-3">
|
|
<HelpCircle className="w-5 h-5 text-gray-400" />
|
|
<span>帮助文档</span>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|