Files
jiang13-bbs/frontend/components/home/WorkspaceNav.tsx
freefire 52124f2682 feat: 新增帖子最后回复展示、文章目录与三栏布局,优化点赞按钮与导航栏
这是一次包含多个功能升级的提交:
1. 后端新增批量查询帖子最后回复的逻辑,在前端帖子列表项中展示最后回复信息
2. 重构点赞按钮,新增文章样式变体并统一样式逻辑
3. 重写工作台导航栏,精简默认展示的菜单选项
4. 新增文章目录组件,为帖子详情页添加文章目录导航
5. 重构帖子详情页,实现三栏响应式布局,新增板块卡片、作者信息栏与同板块热议推荐
6. 重构帖子列表行组件,优化排版与信息展示逻辑
7. 重构帖子管理操作组件,使用下拉菜单整合所有管理功能
8. 新增全局通用的滚动容器与点赞按钮样式
2026-09-13 04:06:56 +08:00

101 lines
3.2 KiB
TypeScript

"use client";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { PenSquare, Home } from "lucide-react";
import type { BoardWithCount, User } from "@/lib/api";
// 首页壳内板块切换:仅替换中栏帖子流,不离开工作台
function boardHref(id: number) {
return `/?board=${id}`;
}
// 桌面左栏:发帖 CTA + 板块导航 + 登录态快捷入口
export function WorkspaceNav({ boards, user }: { boards: BoardWithCount[]; user: User | null }) {
const params = useSearchParams();
const activeBoard = Number(params.get("board")) || 0;
const composeHref = user ? "/compose" : "/login?redirect=/compose";
return (
<nav className="hidden lg:block w-56 xl:w-60 shrink-0" aria-label="工作台导航">
<div className="sticky top-24 space-y-5">
<Link href={composeHref} className="btn btn-primary w-full justify-center">
<PenSquare size={16} /> 发起讨论
</Link>
<div>
<p className="px-2.5 mb-1.5 text-[11.5px] font-bold tracking-[0.08em] uppercase" style={{ color: "var(--ink-3)" }}>
板块
</p>
<div className="space-y-0.5">
<Link
href="/"
className="j13-raillink"
aria-current={activeBoard === 0 ? "page" : undefined}
>
<Home size={16} className="shrink-0" />
<span className="flex-1 truncate">全部讨论</span>
</Link>
{boards.map((b, i) => (
<Link
key={b.id}
href={boardHref(b.id)}
className="j13-raillink"
aria-current={activeBoard === b.id ? "page" : undefined}
>
<span
className={`av-${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>
<span className="meta text-[11.5px]">{b.post_count}</span>
</Link>
))}
</div>
</div>
</div>
</nav>
);
}
// 移动端:发帖入口 + 横向滑动板块条
export function WorkspaceNavMobile({
boards,
user,
}: {
boards: BoardWithCount[];
user: User | null;
}) {
const params = useSearchParams();
const activeBoard = Number(params.get("board")) || 0;
const composeHref = user ? "/compose" : "/login?redirect=/compose";
return (
<div className="lg:hidden -mx-4 sm:-mx-6 px-4 sm:px-6">
<div className="j13-chips">
<Link href={composeHref} className="btn btn-primary btn-sm shrink-0">
<PenSquare size={14} /> 发帖
</Link>
<Link
href="/"
className="j13-chip"
aria-current={activeBoard === 0 ? "page" : undefined}
>
<Home size={13} /> 全部
</Link>
{boards.map((b) => (
<Link
key={b.id}
href={boardHref(b.id)}
className="j13-chip"
aria-current={activeBoard === b.id ? "page" : undefined}
>
{b.name}
</Link>
))}
</div>
</div>
);
}