feat: 添加每日签到功能,新增帖子排序与社区面板优化

本次提交完成了多个核心功能迭代:
1.  新增用户每日签到系统,包含签到状态查询、连续天数统计、积分累计逻辑
2.  新增"新帖子"排序选项,替换原有的latest排序为新评论排序
3.  重构首页信息流布局,优化移动端与桌面端展示样式
4.  新增最新评论、最新注册用户模块,完善社区面板数据展示
5.  新增静态友情链接配置模块
6.  提取通用时间格式化工具函数,统一全站相对时间展示
7.  补充数据库签到模型与后端API接口,完善前后端交互链路
This commit is contained in:
2026-09-13 06:03:40 +08:00
parent 95921d24fa
commit 9bae6f2513
19 changed files with 790 additions and 280 deletions

View File

@@ -1,7 +1,106 @@
import Link from "next/link";
import { Flame, Users, MessageCircle, Heart } from "lucide-react";
import type { PostListItem, ActiveUser } from "@/lib/api";
import {
Flame,
Users,
MessageCircle,
Heart,
MessageSquareText,
UserPlus,
Link2,
} from "lucide-react";
import type {
PostListItem,
ActiveUser,
OverviewStats,
LatestComment,
NewUser,
CheckinStatus,
} from "@/lib/api";
import Avatar from "@/components/Avatar";
import CheckinCard from "./CheckinCard";
import { FRIEND_LINKS } from "@/lib/friendLinks";
import { formatRelative } from "@/lib/format";
/* ---------- 品牌卡 ---------- */
function BrandCard({ stats }: { stats: OverviewStats }) {
const items: { num: number; label: string }[] = [
{ num: stats.posts, label: "帖子" },
{ num: stats.comments, label: "回复" },
{ num: stats.users, label: "用户" },
];
return (
<section className="j13-module text-center" aria-label="姜十三论坛">
<p className="text-[16.5px] font-extrabold tracking-wide" style={{ color: "var(--accent)" }}>
姜十三论坛
</p>
<p className="meta mt-1 text-[12px]">分享技术、讨论问题、交流心得</p>
<div
className="mt-3.5 pt-3.5 grid grid-cols-3"
style={{ borderTop: "1px solid var(--line)" }}
>
{items.map((it) => (
<div key={it.label}>
<p
className="text-[19px] font-extrabold tabular-nums leading-none"
style={{ color: "var(--accent)" }}
>
{it.num}
</p>
<p className="meta mt-1.5 text-[11.5px]">{it.label}</p>
</div>
))}
</div>
</section>
);
}
/* ---------- 最新评论 ---------- */
function LatestComments({ comments }: { comments: LatestComment[] }) {
if (comments.length === 0) return null;
return (
<section className="j13-module" aria-label="最新评论">
<p className="j13-module-title mb-1">
<MessageSquareText size={15} style={{ color: "var(--accent)" }} /> 最新评论
</p>
<ul>
{comments.map((c) => {
const name = c.user.nickname || c.user.username;
return (
<li key={c.id}>
<Link href={`/post/${c.post.id}`} className="j13-raillink items-start">
<Avatar name={name} src={c.user.avatar} size={28} className="mt-px" />
<span className="min-w-0 flex-1">
<span className="flex items-baseline gap-1.5">
<span
className="shrink-0 max-w-[84px] truncate text-[12.5px] font-semibold"
style={{ color: "var(--ink-2)" }}
>
{name}
</span>
<span
className="min-w-0 flex-1 truncate text-[13px]"
style={{ color: "var(--ink-2)" }}
>
{c.content}
</span>
</span>
<span className="meta mt-0.5 block truncate text-[11.5px]">
{c.post.title}
</span>
</span>
<span className="meta mt-px shrink-0 text-[11px]">
{formatRelative(c.created_at)}
</span>
</Link>
</li>
);
})}
</ul>
</section>
);
}
/* ---------- 热门榜 ---------- */
@@ -45,6 +144,41 @@ function HotRanking({ posts }: { posts: PostListItem[] }) {
);
}
/* ---------- 最新注册 ---------- */
function NewUsers({ users }: { users: NewUser[] }) {
if (users.length === 0) return null;
return (
<section className="j13-module" aria-label="最新注册">
<p className="j13-module-title mb-3">
<UserPlus size={15} style={{ color: "var(--accent)" }} /> 最新注册
</p>
<ul className="grid grid-cols-4 gap-y-3">
{users.map((u) => {
const name = u.nickname || u.username;
return (
<li key={u.id}>
<Link
href={`/u/${u.id}`}
className="flex flex-col items-center gap-1.5 rounded-lg px-1 py-1 transition-colors hover:bg-[var(--panel-2)]"
>
<Avatar name={name} src={u.avatar} size={38} />
<span
className="w-full truncate text-center text-[11px]"
style={{ color: "var(--ink-2)" }}
title={name}
>
{name}
</span>
</Link>
</li>
);
})}
</ul>
</section>
);
}
/* ---------- 活跃用户 ---------- */
function ActiveUsers({ users }: { users: ActiveUser[] }) {
@@ -73,20 +207,72 @@ function ActiveUsers({ users }: { users: ActiveUser[] }) {
);
}
/* ---------- 友情链接 ---------- */
function FriendLinks() {
return (
<section className="j13-module" aria-label="友情链接">
<p className="j13-module-title mb-3">
<Link2 size={15} style={{ color: "var(--accent)" }} /> 友情链接
<Link
href="/compose"
className="meta ml-auto text-[12px] font-normal transition-colors hover:text-[var(--accent)]"
>
申请
</Link>
</p>
<div className="flex flex-wrap gap-2">
{FRIEND_LINKS.map((l) =>
l.href.startsWith("http") ? (
<a
key={l.name}
href={l.href}
target="_blank"
rel="noopener noreferrer"
className="j13-chip"
>
{l.name}
</a>
) : (
<span key={l.name} className="j13-chip" title="友链待配置">
{l.name}
</span>
)
)}
</div>
</section>
);
}
/* ---------- 桌面 / 移动两种装配 ---------- */
export function CommunityPanels({
hot,
activeUsers,
}: {
type PanelsProps = {
stats: OverviewStats;
hot: PostListItem[];
activeUsers: ActiveUser[];
}) {
latestComments: LatestComment[];
newUsers: NewUser[];
checkin?: CheckinStatus | null;
};
export function CommunityPanels({
stats,
hot,
activeUsers,
latestComments,
newUsers,
checkin,
}: PanelsProps) {
return (
<aside className="hidden lg:block w-[280px] xl:w-[300px] shrink-0" aria-label="社区面板">
<aside className="hidden w-[280px] shrink-0 lg:block xl:w-[300px]" aria-label="社区面板">
<div className="sticky top-24 space-y-4">
<BrandCard stats={stats} />
<CheckinCard initial={checkin} />
<LatestComments comments={latestComments} />
<HotRanking posts={hot} />
<NewUsers users={newUsers} />
<ActiveUsers users={activeUsers} />
<FriendLinks />
</div>
</aside>
);
@@ -95,14 +281,18 @@ export function CommunityPanels({
export function CommunityPanelsMobile({
hot,
activeUsers,
}: {
hot: PostListItem[];
activeUsers: ActiveUser[];
}) {
latestComments,
newUsers,
checkin,
}: Omit<PanelsProps, "stats">) {
return (
<div className="lg:hidden space-y-4" aria-label="社区面板">
<div className="space-y-4 lg:hidden" aria-label="社区面板">
<CheckinCard initial={checkin} />
<LatestComments comments={latestComments} />
<HotRanking posts={hot} />
<NewUsers users={newUsers} />
<ActiveUsers users={activeUsers} />
<FriendLinks />
</div>
);
}