yuzhiran-dev
123 lines
4.0 KiB
TypeScript
123 lines
4.0 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { apiFetch } from '../../../lib/auth';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
|
|
interface Profile {
|
|
nickname: string;
|
|
email: string;
|
|
phone: string;
|
|
avatar: string;
|
|
}
|
|
|
|
export default function SettingsPage() {
|
|
const router = useRouter();
|
|
const [profile, setProfile] = useState<Profile>({ nickname: '', email: '', phone: '', avatar: '' });
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [nickname, setNickname] = useState('');
|
|
const [email, setEmail] = useState('');
|
|
|
|
useEffect(() => {
|
|
loadProfile();
|
|
}, []);
|
|
|
|
async function loadProfile() {
|
|
try {
|
|
const res = await apiFetch('/dashboard/profile');
|
|
const data = await res.json();
|
|
setProfile(data);
|
|
setNickname(data.nickname || '');
|
|
setEmail(data.email || '');
|
|
} catch (e) { console.error(e) }
|
|
setLoading(false);
|
|
}
|
|
|
|
async function handleSave(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
setSaving(true);
|
|
try {
|
|
await apiFetch('/dashboard/profile', {
|
|
method: 'PUT',
|
|
body: JSON.stringify({ nickname, email }),
|
|
});
|
|
alert('保存成功');
|
|
} catch (e) { console.error(e) }
|
|
setSaving(false);
|
|
}
|
|
|
|
async function handleLogout() {
|
|
localStorage.removeItem('token');
|
|
localStorage.removeItem('refreshToken');
|
|
router.push('/auth');
|
|
}
|
|
|
|
if (loading) return (
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<Skeleton className="h-8 w-48 mb-6" />
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
|
|
<Skeleton className="h-24 rounded-xl" />
|
|
<Skeleton className="h-24 rounded-xl" />
|
|
<Skeleton className="h-24 rounded-xl" />
|
|
</div>
|
|
<Skeleton className="h-64 w-full rounded-xl" />
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div className="mb-8">
|
|
<button onClick={() => router.back()} className="text-sm text-muted-foreground hover:text-foreground mb-4 block">← 返回</button>
|
|
<h1 className="text-3xl font-bold text-foreground">设置</h1>
|
|
<p className="mt-2 text-muted-foreground">管理你的账号偏好</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleSave} className="bg-card rounded-2xl border border-border p-6 space-y-6">
|
|
<h2 className="text-lg font-semibold text-foreground">个人信息</h2>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground mb-1.5">昵称</label>
|
|
<input
|
|
type="text"
|
|
value={nickname}
|
|
onChange={e => setNickname(e.target.value)}
|
|
className="w-full px-4 py-2.5 border border-border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground mb-1.5">邮箱</label>
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={e => setEmail(e.target.value)}
|
|
className="w-full px-4 py-2.5 border border-border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
<button
|
|
type="submit"
|
|
disabled={saving}
|
|
className="px-6 py-2.5 bg-brand-600 text-white rounded-xl text-sm font-medium hover:bg-brand-700 disabled:opacity-50"
|
|
>
|
|
{saving ? '保存中...' : '保存修改'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div className="bg-card rounded-2xl border border-border p-6 mt-6">
|
|
<h2 className="text-lg font-semibold text-foreground mb-4">账号安全</h2>
|
|
<button
|
|
onClick={handleLogout}
|
|
className="px-6 py-2.5 border border-red-200 text-red-600 rounded-xl text-sm font-medium hover:bg-red-50"
|
|
>
|
|
退出登录
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|