freefire/jiang13-bbs
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

feat: 新增帖子最后回复展示、文章目录与三栏布局，优化点赞按钮与导航栏

Browse Source 
这是一次包含多个功能升级的提交：
1. 后端新增批量查询帖子最后回复的逻辑，在前端帖子列表项中展示最后回复信息
2. 重构点赞按钮，新增文章样式变体并统一样式逻辑
3. 重写工作台导航栏，精简默认展示的菜单选项
4. 新增文章目录组件，为帖子详情页添加文章目录导航
5. 重构帖子详情页，实现三栏响应式布局，新增板块卡片、作者信息栏与同板块热议推荐
6. 重构帖子列表行组件，优化排版与信息展示逻辑
7. 重构帖子管理操作组件，使用下拉菜单整合所有管理功能
8. 新增全局通用的滚动容器与点赞按钮样式
This commit is contained in:
姜十三
2026-09-13 04:06:56 +08:00
parent bee06fa962
commit 52124f2682
10 changed files with 926 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/components/Header.tsx
View File

@@ -142,33 +142,37 @@ export default function Header({
WebkitBackdropFilter: "blur(14px)",
}}
>
<div className="max-w-[1440px] mx-auto px-4 sm:px-6 h-[68px] flex items-center justify-between gap-4">
{/* 品牌 */}
<Link href="/" className="flex items-center gap-2.5 shrink-0 group">
<span
className="w-9 h-9 rounded-2xl flex items-center justify-center transition-transform duration-300 group-hover:rotate-[-6deg]"
style={{ background: "var(--accent)", color: "var(--accent-on)" }}
>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
</svg>
</span>
<span className="leading-none">
<span className="block font-extrabold text-[17px] tracking-tight" style={{ color: "var(--ink)" }}>
姜十三
<div className="max-w-[1440px] mx-auto px-4 sm:px-6 h-[68px] flex items-center gap-4 lg:gap-7">
{/* 左组：品牌 + 主导航 */}
<div className="flex items-center gap-3 lg:gap-5 shrink-0">
<Link href="/" className="flex items-center gap-2.5 group">
<span
className="w-9 h-9 rounded-2xl flex items-center justify-center transition-transform duration-300 group-hover:rotate-[-6deg]"
style={{ background: "var(--accent)", color: "var(--accent-on)" }}
>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
</svg>
</span>
<span className="block text-[10.5px] font-semibold mt-0.5" style={{ color: "var(--ink-3)" }}>
J13 社区
<span className="leading-none">
<span className="block font-extrabold text-[17px] tracking-tight" style={{ color: "var(--ink)" }}>
姜十三
</span>
<span className="block text-[10.5px] font-semibold mt-0.5" style={{ color: "var(--ink-3)" }}>
J13 社区
</span>
</span>
</span>
</Link>
</Link>
<nav className="hidden lg:flex items-center gap-1 pl-3" style={{ borderLeft: "1px solid var(--line)" }}>
<NavPill href="/" active={pathname === "/"} icon={<Home size={14} />}>
首页
</NavPill>
</nav>
</div>
{/* 桌面端 */}
<nav className="hidden lg:flex items-center gap-1">
<NavPill href="/" active={pathname === "/"} icon={<Home size={14} />}>
首页
</NavPill>
<form onSubmit={handleSearch} className="relative ml-2">
{/* 中组：搜索居中 */}
<form onSubmit={handleSearch} className="hidden lg:flex flex-1 justify-center">
<div className="relative w-full max-w-[380px] focus-within:max-w-[440px] transition-[max-width] duration-200">
<Search
size={15}
className="absolute left-4 top-1/2 -translate-y-1/2"
@@ -182,7 +186,7 @@ export default function Header({
onKeyDown={onSearchKeyDown}
placeholder="搜索帖子..."
aria-label="搜索帖子"
className="w-48 focus:w-64 transition-[width] duration-200 pl-10 pr-10 py-2.5 text-sm rounded-full"
className="w-full pl-10 pr-10 py-2.5 text-sm rounded-full"
style={{
background: "var(--panel)",
color: "var(--ink)",
@@ -195,8 +199,8 @@ export default function Header({
>
/
</kbd>
</form>
</nav>
</div>
</form>
{/* 右侧操作区：桌面/移动共用铃铛（仅挂载一次，避免重复轮询），
桌面额外显示主题/发帖/用户菜单，移动端收进汉堡抽屉 */}