feat: 添加每日签到功能，新增帖子排序与社区面板优化
本次提交完成了多个核心功能迭代： 1. 新增用户每日签到系统，包含签到状态查询、连续天数统计、积分累计逻辑 2. 新增"新帖子"排序选项，替换原有的latest排序为新评论排序 3. 重构首页信息流布局，优化移动端与桌面端展示样式 4. 新增最新评论、最新注册用户模块，完善社区面板数据展示 5. 新增静态友情链接配置模块 6. 提取通用时间格式化工具函数，统一全站相对时间展示 7. 补充数据库签到模型与后端API接口，完善前后端交互链路
This commit is contained in:
@@ -430,41 +430,34 @@ h1, h2, h3, h4 {
|
||||
工作台组件（WORKSPACE EDITION）
|
||||
============================================================ */
|
||||
|
||||
/* 分段控件：凹陷轨道 + 凸起的白色选中胶囊 */
|
||||
.j13-seg {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 4px;
|
||||
background: var(--tint);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
}
|
||||
.j13-seg [role="tab"] {
|
||||
/* 信息流小 tab：描边小圆角按钮，选中为 accent 浅底描边（布局类走 Tailwind，此处不写 display） */
|
||||
.j13-tab {
|
||||
appearance: none;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
border-radius: 999px;
|
||||
padding: 6.5px 15px;
|
||||
padding: 4.5px 12px;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 13.5px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
color: var(--ink-3);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease,
|
||||
transform 0.12s ease;
|
||||
transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
|
||||
}
|
||||
.j13-seg [role="tab"]:hover {
|
||||
.j13-tab:hover {
|
||||
color: var(--ink);
|
||||
border-color: var(--line-2);
|
||||
background: var(--panel-2);
|
||||
}
|
||||
.j13-seg [role="tab"][aria-selected="true"] {
|
||||
background: var(--panel);
|
||||
.j13-tab[aria-selected="true"] {
|
||||
background: var(--accent-soft);
|
||||
border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
|
||||
color: var(--accent);
|
||||
box-shadow: var(--shadow-sm);
|
||||
font-weight: 700;
|
||||
}
|
||||
.j13-seg [role="tab"]:active {
|
||||
.j13-tab:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
@@ -582,77 +575,6 @@ h1, h2, h3, h4 {
|
||||
border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
|
||||
}
|
||||
|
||||
/* 首页欢迎横幅 */
|
||||
.j13-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 20px 22px;
|
||||
border-radius: var(--r);
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: var(--shadow-sm);
|
||||
background:
|
||||
linear-gradient(115deg, color-mix(in srgb, var(--accent-soft) 75%, var(--panel)) 0%, var(--panel) 60%);
|
||||
}
|
||||
.j13-hero-glow {
|
||||
position: absolute;
|
||||
top: -72px;
|
||||
right: -52px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 9999px;
|
||||
background: var(--accent-soft);
|
||||
pointer-events: none;
|
||||
}
|
||||
.j13-hero-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.j13-hero-stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
}
|
||||
.j13-hero-stat-num {
|
||||
font-size: 21px;
|
||||
font-weight: 800;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.015em;
|
||||
color: var(--ink);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.j13-hero-stat-num.is-hot { color: var(--accent); }
|
||||
.j13-hero-stat-lab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--ink-3);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.j13-dot-pulse {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 9999px;
|
||||
background: var(--accent);
|
||||
animation: j13-dot-pulse 2.4s ease-in-out infinite;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.j13-hero { padding: 22px 26px; }
|
||||
.j13-hero-stats {
|
||||
display: flex;
|
||||
width: auto;
|
||||
gap: 0;
|
||||
}
|
||||
.j13-hero-stat + .j13-hero-stat {
|
||||
margin-left: 22px;
|
||||
padding-left: 22px;
|
||||
border-left: 1px solid var(--line);
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端横向板块条（滚动条隐藏，保留触控惯性） */
|
||||
.j13-chips {
|
||||
display: flex;
|
||||
@@ -810,11 +732,6 @@ h1, h2, h3, h4 {
|
||||
}
|
||||
.j13-fade-up { animation: j13-fade-up 0.2s ease-out both; }
|
||||
|
||||
@keyframes j13-dot-pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.35; transform: scale(0.8); }
|
||||
}
|
||||
|
||||
/* 跳到主内容 */
|
||||
.skip-link {
|
||||
position: fixed;
|
||||
|
||||
@@ -14,7 +14,6 @@ import PostRow from "@/components/PostRow";
|
||||
import FeedTabs, { type FeedSort } from "@/components/home/FeedTabs";
|
||||
import { WorkspaceNav, WorkspaceNavMobile } from "@/components/home/WorkspaceNav";
|
||||
import { CommunityPanels, CommunityPanelsMobile } from "@/components/home/CommunityPanels";
|
||||
import HomeHero from "@/components/home/HomeHero";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "姜十三论坛 · 技术讨论社区",
|
||||
@@ -26,7 +25,10 @@ interface HomePageProps {
|
||||
}
|
||||
|
||||
function normalizeSort(v?: string): FeedSort {
|
||||
return v === "hot" || v === "recommended" ? v : "latest";
|
||||
if (v === "new" || v === "recommended") return v;
|
||||
// 兼容旧的 ?sort=hot 链接：落到最接近的推荐帖
|
||||
if (v === "hot") return "recommended";
|
||||
return "latest";
|
||||
}
|
||||
|
||||
// 空结果面板（无帖 / 无搜索结果）
|
||||
@@ -125,25 +127,14 @@ export default async function HomePage({ searchParams }: HomePageProps) {
|
||||
);
|
||||
}
|
||||
|
||||
// 置顶帖直接按后端 pinned DESC 顺序并入统一信息流，同样的行布局
|
||||
// 置顶帖直接按后端 pinned DESC 顺序并入统一信息流；标题仅供屏幕阅读器
|
||||
const heading = activeBoard
|
||||
? activeBoard.name
|
||||
: sort === "hot"
|
||||
? "热门讨论"
|
||||
: sort === "new"
|
||||
? "最新发布"
|
||||
: sort === "recommended"
|
||||
? "精华内容"
|
||||
? "推荐帖"
|
||||
: "最新讨论";
|
||||
const headingHint = activeBoard
|
||||
? sort === "hot"
|
||||
? "该板块按点赞与评论热度排序"
|
||||
: sort === "recommended"
|
||||
? "该板块管理员精选的优质内容"
|
||||
: "该板块新发帖与新评论都会浮到顶部"
|
||||
: sort === "hot"
|
||||
? "按点赞与评论热度排序"
|
||||
: sort === "recommended"
|
||||
? "管理员精选的优质内容"
|
||||
: "新发帖与新评论都会浮到顶部";
|
||||
|
||||
const pageQuery: Record<string, string> = {};
|
||||
if (boardId > 0) pageQuery.board = String(boardId);
|
||||
@@ -151,31 +142,22 @@ export default async function HomePage({ searchParams }: HomePageProps) {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<HomeHero user={user} stats={overview?.stats ?? null} />
|
||||
|
||||
<WorkspaceNavMobile boards={boards} user={user} />
|
||||
|
||||
<div className="flex items-start gap-6 xl:gap-7 mt-5 lg:mt-0">
|
||||
<WorkspaceNav boards={boards} user={user} />
|
||||
|
||||
{/* 中栏：帖子流（左栏切板块只替换这一列） */}
|
||||
{/* 中栏：tab 栏与帖子流为同一个整体卡片（左栏切板块只替换这一列） */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-end justify-between gap-3 flex-wrap mb-4">
|
||||
<div className="min-w-0">
|
||||
<h1
|
||||
className="text-[23px] sm:text-[27px] font-extrabold tracking-tight"
|
||||
style={{ color: "var(--ink)" }}
|
||||
>
|
||||
{heading}
|
||||
</h1>
|
||||
<p className="meta mt-1.5">
|
||||
共 {postsData.total} 篇 · {headingHint}
|
||||
</p>
|
||||
</div>
|
||||
<FeedTabs current={sort} boardId={boardId} />
|
||||
</div>
|
||||
<h1 className="sr-only">{heading}</h1>
|
||||
|
||||
<div className="panel overflow-hidden">
|
||||
<div className="flex items-center justify-between gap-2 px-3 sm:px-4 pt-3 pb-2.5">
|
||||
<FeedTabs current={sort} boardId={boardId} />
|
||||
<span className="meta shrink-0 text-[12px] tabular-nums">
|
||||
共 {postsData.total} 篇
|
||||
</span>
|
||||
</div>
|
||||
{postsData.posts.length > 0 ? (
|
||||
postsData.posts.map((post, i) => (
|
||||
<PostRow
|
||||
@@ -204,14 +186,27 @@ export default async function HomePage({ searchParams }: HomePageProps) {
|
||||
|
||||
{/* 右栏：社区面板 */}
|
||||
{overview && (
|
||||
<CommunityPanels hot={overview.hot} activeUsers={overview.active_users} />
|
||||
<CommunityPanels
|
||||
stats={overview.stats}
|
||||
hot={overview.hot}
|
||||
activeUsers={overview.active_users}
|
||||
latestComments={overview.latest_comments}
|
||||
newUsers={overview.new_users}
|
||||
checkin={overview.checkin ?? undefined}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 窄屏：面板下沉到帖子流之后 */}
|
||||
{overview && (
|
||||
<div className="mt-6">
|
||||
<CommunityPanelsMobile hot={overview.hot} activeUsers={overview.active_users} />
|
||||
<CommunityPanelsMobile
|
||||
hot={overview.hot}
|
||||
activeUsers={overview.active_users}
|
||||
latestComments={overview.latest_comments}
|
||||
newUsers={overview.new_users}
|
||||
checkin={overview.checkin ?? undefined}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user