feat: 完成社区首页功能迭代,新增首页聚合与工作台组件
本次提交实现了完整的社区首页功能: 1. 新增首页聚合接口与服务,包含社区统计、热门帖、活跃用户与板块数据 2. 实现帖子推荐排序、SSR缓存与点赞态同步逻辑 3. 重构导航与布局系统,新增工作台侧边栏与移动端适配 4. 优化主题色与UI样式,统一设计系统风格 5. 修复登录注册页自动跳转与组件状态同步问题
This commit is contained in:
122
frontend/components/home/WorkspaceNav.tsx
Normal file
122
frontend/components/home/WorkspaceNav.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user