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,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>
);
}