feat: 添加用户个人资料编辑功能,优化页面布局与导航

1. 后端新增用户资料更新接口,支持修改昵称、头像、邮箱和签名
2. 前端新增资料编辑表单页面,适配响应式布局
3. 优化帖子详情页布局与移动端适配逻辑
4. 重构首页侧边栏导航,使用卡片式板块展示
5. 移除全局板块缓存,调整Header导航移除板块菜单
6. 补充用户签名展示功能,完善用户信息返回字段
This commit is contained in:
2026-09-14 16:10:38 +08:00
parent e8882664fb
commit e2e5ba077c
16 changed files with 388 additions and 187 deletions

View File

@@ -19,9 +19,8 @@ import {
User as UserIcon,
ChevronDown,
Megaphone,
Layers,
} from "lucide-react";
import { apiLogout, apiMe, type User, type Board } from "@/lib/api";
import { apiLogout, apiMe, type User } from "@/lib/api";
import { hasAuthCookieHint } from "@/lib/cookies";
import NotificationBell from "./NotificationBell";
import Avatar from "./Avatar";
@@ -30,12 +29,10 @@ export default function Header({
initialUser,
initialUnread = 0,
initialTheme = "light",
boards = [],
}: {
initialUser: User | null;
initialUnread?: number;
initialTheme?: "light" | "dark";
boards?: Board[];
}) {
const router = useRouter();
const pathname = usePathname();
@@ -171,7 +168,6 @@ export default function Header({
<NavPill href="/" active={pathname === "/"} icon={<Home size={14} />}>
首页
</NavPill>
<BoardsMenu boards={boards} />
</nav>
</div>
@@ -285,39 +281,6 @@ export default function Header({
{!user && <MobileLink href="/login">登录</MobileLink>}
{!user && <MobileLink href="/register">注册</MobileLink>}
</div>
{/* 全站板块入口:手机用户在任意页面都能切板块,不必回首页 */}
{boards.length > 0 && (
<div className="mt-3 pt-3 border-t" style={{ borderColor: "var(--line)" }}>
<p className="px-3 mb-1.5 text-[11.5px] font-bold tracking-[0.08em] uppercase" style={{ color: "var(--ink-3)" }}>
板块
</p>
<div className="grid grid-cols-2 gap-1">
{boards.map((b, i) => {
const active = pathname === `/board/${b.id}`;
return (
<Link
key={b.id}
href={`/board/${b.id}`}
onClick={() => setMenuOpen(false)}
aria-current={active ? "page" : undefined}
className="flex items-center gap-2 px-3 py-2.5 rounded-xl text-[13.5px] font-semibold transition-colors"
style={{
color: active ? "var(--accent)" : "var(--ink)",
background: active ? "var(--accent-soft)" : "transparent",
}}
>
<span
className={`av-${Math.max(0, b.color_index ?? i) % 8} w-6 h-6 rounded-lg flex items-center justify-center text-[11px] font-bold shrink-0`}
>
{b.name.slice(0, 1)}
</span>
<span className="truncate">{b.name}</span>
</Link>
);
})}
</div>
</div>
)}
<div className="pt-3 mt-2 border-t flex items-center justify-between" style={{ borderColor: "var(--line)" }}>
<button onClick={toggleTheme} className="btn btn-line btn-sm">
{theme === "dark" ? <Sun size={14} /> : <Moon size={14} />}
@@ -362,96 +325,6 @@ function NavPill({
);
}
/**
* 板块下拉菜单(桌面端):全站任意页面的 Header 都能直达板块,
* 替代原先只有首页左栏才有板块导航的布局局限
*/
function BoardsMenu({ boards }: { boards: Board[] }) {
const pathname = usePathname();
const [open, setOpen] = useState(false);
const menuRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!open) return;
const onDown = (e: MouseEvent) => {
if (menuRef.current && !menuRef.current.contains(e.target as Node)) setOpen(false);
};
const onKey = (e: KeyboardEvent) => {
if (e.key === "Escape") setOpen(false);
};
document.addEventListener("mousedown", onDown);
document.addEventListener("keydown", onKey);
return () => {
document.removeEventListener("mousedown", onDown);
document.removeEventListener("keydown", onKey);
};
}, [open]);
if (boards.length === 0) return null;
const active = pathname.startsWith("/board/");
return (
<div className="relative" ref={menuRef}>
<button
onClick={() => setOpen((v) => !v)}
aria-haspopup="menu"
aria-expanded={open}
className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full text-[13.5px] font-semibold transition-colors"
style={
active || open
? { background: "var(--accent-soft)", color: "var(--accent)" }
: { color: "var(--ink-2)" }
}
>
<Layers size={14} />
板块
<ChevronDown
size={12}
className="transition-transform duration-200"
style={{ transform: open ? "rotate(180deg)" : "none" }}
/>
</button>
{open && (
<div
role="menu"
className="absolute left-0 mt-2.5 w-60 max-h-[60vh] overflow-y-auto p-1.5 z-50 j13-toast-in"
style={{
background: "var(--panel)",
border: "1px solid var(--line)",
borderRadius: "var(--r)",
boxShadow: "var(--shadow-lg)",
}}
>
{boards.map((b, i) => {
const isActive = pathname === `/board/${b.id}`;
return (
<Link
key={b.id}
href={`/board/${b.id}`}
onClick={() => setOpen(false)}
role="menuitem"
className="flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-[13.5px] font-semibold transition-colors hover:bg-[var(--panel-2)]"
style={{
color: isActive ? "var(--accent)" : "var(--ink)",
background: isActive ? "var(--nav-active-bg)" : undefined,
}}
>
<span
className={`av-${Math.max(0, b.color_index ?? i) % 8} w-7 h-7 rounded-lg flex items-center justify-center text-[12px] font-bold shrink-0`}
>
{b.name.slice(0, 1)}
</span>
<span className="flex-1 truncate">{b.name}</span>
</Link>
);
})}
</div>
)}
</div>
);
}
function MobileLink({
href,
active,