feat: 完成社区首页功能迭代，新增首页聚合与工作台组件
本次提交实现了完整的社区首页功能： 1. 新增首页聚合接口与服务，包含社区统计、热门帖、活跃用户与板块数据 2. 实现帖子推荐排序、SSR缓存与点赞态同步逻辑 3. 重构导航与布局系统，新增工作台侧边栏与移动端适配 4. 优化主题色与UI样式，统一设计系统风格 5. 修复登录注册页自动跳转与组件状态同步问题
This commit is contained in:
142
frontend/components/home/CommunityPanels.tsx
Normal file
142
frontend/components/home/CommunityPanels.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
import Link from "next/link";
|
||||
import { BarChart3, Flame, Users, MessagesSquare, MessageCircle, Heart, Sparkles } from "lucide-react";
|
||||
import type { OverviewStats, PostListItem, ActiveUser } from "@/lib/api";
|
||||
import Avatar from "@/components/Avatar";
|
||||
|
||||
/* ---------- 统计 2×2 ---------- */
|
||||
|
||||
function StatsGrid({ stats }: { stats: OverviewStats }) {
|
||||
const items = [
|
||||
{ icon: MessagesSquare, label: "讨论", value: stats.posts },
|
||||
{ icon: Users, label: "成员", value: stats.users },
|
||||
{ icon: MessageCircle, label: "评论", value: stats.comments },
|
||||
{ icon: Sparkles, label: "今日", value: stats.today_posts },
|
||||
];
|
||||
return (
|
||||
<section className="j13-module" aria-label="社区数据">
|
||||
<p className="j13-module-title mb-3">
|
||||
<BarChart3 size={15} style={{ color: "var(--accent)" }} /> 社区数据
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{items.map(({ icon: Icon, label, value }) => (
|
||||
<div key={label} className="j13-stat">
|
||||
<span className="j13-stat-num">{value}</span>
|
||||
<span className="j13-stat-lab">
|
||||
<Icon size={12} /> {label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- 热门榜 ---------- */
|
||||
|
||||
function HotRanking({ posts }: { posts: PostListItem[] }) {
|
||||
return (
|
||||
<section className="j13-module" aria-label="热门讨论">
|
||||
<p className="j13-module-title mb-1.5">
|
||||
<Flame size={15} style={{ color: "var(--clay)" }} /> 热门讨论
|
||||
</p>
|
||||
{posts.length === 0 ? (
|
||||
<p className="meta px-1.5 py-3">还没有热门讨论</p>
|
||||
) : (
|
||||
<ol className="j13-ranklist">
|
||||
{posts.map((p, i) => (
|
||||
<li key={p.id}>
|
||||
<Link href={`/post/${p.id}`} className="j13-rank" title={p.title}>
|
||||
<span className="j13-rank-no">{i + 1}</span>
|
||||
<span className="min-w-0 flex-1">
|
||||
<span
|
||||
className="block text-[13.5px] font-semibold leading-snug line-clamp-2"
|
||||
style={{ color: "var(--ink)" }}
|
||||
>
|
||||
{p.title}
|
||||
</span>
|
||||
<span className="mt-1 flex items-center gap-2.5 meta text-[11.5px]">
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<MessageCircle size={11.5} /> {p.comment_count}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<Heart size={11.5} /> {p.like_count}
|
||||
</span>
|
||||
<span className="truncate">{p.board.name}</span>
|
||||
</span>
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- 活跃用户 ---------- */
|
||||
|
||||
function ActiveUsers({ users }: { users: ActiveUser[] }) {
|
||||
return (
|
||||
<section className="j13-module" aria-labelledby="active-users-title">
|
||||
<p className="j13-module-title mb-3" id="active-users-title">
|
||||
<Users size={15} style={{ color: "var(--accent)" }} /> 活跃成员
|
||||
</p>
|
||||
{users.length === 0 ? (
|
||||
<p className="meta px-1.5 py-2">近 14 天还没有人互动</p>
|
||||
) : (
|
||||
<ul className="space-y-1">
|
||||
{users.map((u) => (
|
||||
<li key={u.id}>
|
||||
<Link href={`/u/${u.id}`} className="j13-raillink">
|
||||
<Avatar name={u.nickname || u.username} src={u.avatar} size={28} />
|
||||
<span className="flex-1 truncate text-[13.5px]">{u.nickname || u.username}</span>
|
||||
<span className="meta text-[11.5px]">{u.activity_count} 次</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
<p className="meta mt-3 px-1 text-[11px]">按近 14 天发帖与评论计数</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- 桌面 / 移动两种装配 ---------- */
|
||||
|
||||
export function CommunityPanels({
|
||||
stats,
|
||||
hot,
|
||||
activeUsers,
|
||||
}: {
|
||||
stats: OverviewStats;
|
||||
hot: PostListItem[];
|
||||
activeUsers: ActiveUser[];
|
||||
}) {
|
||||
return (
|
||||
<aside className="hidden lg:block w-[280px] xl:w-[300px] shrink-0" aria-label="社区面板">
|
||||
<div className="sticky top-24 space-y-4">
|
||||
<StatsGrid stats={stats} />
|
||||
<HotRanking posts={hot} />
|
||||
<ActiveUsers users={activeUsers} />
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
export function CommunityPanelsMobile({
|
||||
stats,
|
||||
hot,
|
||||
activeUsers,
|
||||
}: {
|
||||
stats: OverviewStats;
|
||||
hot: PostListItem[];
|
||||
activeUsers: ActiveUser[];
|
||||
}) {
|
||||
return (
|
||||
<div className="lg:hidden space-y-4" aria-label="社区面板">
|
||||
<StatsGrid stats={stats} />
|
||||
<HotRanking posts={hot} />
|
||||
<ActiveUsers users={activeUsers} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
57
frontend/components/home/FeedTabs.tsx
Normal file
57
frontend/components/home/FeedTabs.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useRef } from "react";
|
||||
|
||||
export type FeedSort = "latest" | "hot" | "recommended";
|
||||
|
||||
const TAB_KEYS: FeedSort[] = ["latest", "hot", "recommended"];
|
||||
const TAB_LABELS: Record<FeedSort, string> = {
|
||||
latest: "最新",
|
||||
hot: "热门",
|
||||
recommended: "精华",
|
||||
};
|
||||
|
||||
// 在指定板块内切换排序时保留 ?board=
|
||||
function tabHref(key: FeedSort, boardId: number) {
|
||||
const params = new URLSearchParams();
|
||||
if (boardId > 0) params.set("board", String(boardId));
|
||||
if (key !== "latest") params.set("sort", key);
|
||||
const qs = params.toString();
|
||||
return qs ? `/?${qs}` : "/";
|
||||
}
|
||||
|
||||
// 中栏排序分段控件：URL query 驱动、SSR 直出，键盘 ←/→ 可切换
|
||||
export default function FeedTabs({ current, boardId = 0 }: { current: FeedSort; boardId?: number }) {
|
||||
const router = useRouter();
|
||||
const tabRefs = useRef<(HTMLAnchorElement | null)[]>([]);
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent, i: number) => {
|
||||
if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
|
||||
e.preventDefault();
|
||||
const next = (i + (e.key === "ArrowRight" ? 1 : TAB_KEYS.length - 1)) % TAB_KEYS.length;
|
||||
tabRefs.current[next]?.focus();
|
||||
router.push(tabHref(TAB_KEYS[next], boardId));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="j13-seg" role="tablist" aria-label="帖子排序">
|
||||
{TAB_KEYS.map((key, i) => (
|
||||
<Link
|
||||
key={key}
|
||||
ref={(el) => {
|
||||
tabRefs.current[i] = el;
|
||||
}}
|
||||
href={tabHref(key, boardId)}
|
||||
role="tab"
|
||||
aria-selected={current === key}
|
||||
tabIndex={current === key ? 0 : -1}
|
||||
onKeyDown={(e) => handleKeyDown(e, i)}
|
||||
>
|
||||
{TAB_LABELS[key]}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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