feat: 完成社区首页功能迭代,新增首页聚合与工作台组件

本次提交实现了完整的社区首页功能:
1. 新增首页聚合接口与服务,包含社区统计、热门帖、活跃用户与板块数据
2. 实现帖子推荐排序、SSR缓存与点赞态同步逻辑
3. 重构导航与布局系统,新增工作台侧边栏与移动端适配
4. 优化主题色与UI样式,统一设计系统风格
5. 修复登录注册页自动跳转与组件状态同步问题
This commit is contained in:
2026-09-12 23:36:18 +08:00
parent 055688a6cf
commit bee06fa962
24 changed files with 1446 additions and 359 deletions

View File

@@ -0,0 +1,122 @@
"use client";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { PenSquare, Home, Bell, Settings, LogIn, UserPlus } 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 style={{ borderTop: "1px solid var(--line)" }} className="pt-3 space-y-0.5">
{user ? (
<>
<Link href="/notifications" className="j13-raillink">
<Bell size={16} className="shrink-0" /> 通知中心
</Link>
<Link href="/settings" className="j13-raillink">
<Settings size={16} className="shrink-0" /> 账号设置
</Link>
</>
) : (
<>
<Link href="/login" className="j13-raillink">
<LogIn size={16} className="shrink-0" /> 登录
</Link>
<Link href="/register" className="j13-raillink">
<UserPlus size={16} className="shrink-0" /> 注册账号
</Link>
</>
)}
</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>
);
}