feat: 完成社区首页功能迭代，新增首页聚合与工作台组件
本次提交实现了完整的社区首页功能： 1. 新增首页聚合接口与服务，包含社区统计、热门帖、活跃用户与板块数据 2. 实现帖子推荐排序、SSR缓存与点赞态同步逻辑 3. 重构导航与布局系统，新增工作台侧边栏与移动端适配 4. 优化主题色与UI样式，统一设计系统风格 5. 修复登录注册页自动跳转与组件状态同步问题
This commit is contained in:
@@ -29,7 +29,7 @@ export default async function BoardPage({ params, searchParams }: PageProps) {
|
||||
const page = Math.max(1, parseInt(pageStr || "1", 10) || 1);
|
||||
const cookie = authCookieHeader(await cookies());
|
||||
const [postsData, boardsData] = await Promise.all([
|
||||
fetchPosts(page, 20, Number(id), "latest", "", cookie),
|
||||
fetchPosts(page, 20, Number(id), "latest", "", false, cookie),
|
||||
fetchBoards(),
|
||||
]);
|
||||
const boardIndex = boardsData.boards.findIndex((b) => b.id === Number(id));
|
||||
@@ -88,8 +88,8 @@ export default async function BoardPage({ params, searchParams }: PageProps) {
|
||||
<span className="font-bold text-[15px]" style={{ color: "var(--ink)" }}>全部讨论</span>
|
||||
<span className="meta text-xs">第 {page} 页</span>
|
||||
</div>
|
||||
{rows.map((post) => (
|
||||
<PostRow key={post.id} post={post} />
|
||||
{rows.map((post, i) => (
|
||||
<PostRow key={post.id} post={post} index={i} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@@ -1,40 +1,48 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* ============================================================
|
||||
姜十三论坛 · WARM CORNER 设计系统
|
||||
暖白纸面 / 圆润卡片 / 柔和投影 / 青绿主色 / 陶土辅色
|
||||
姜十三论坛 · GRAPHITE INDIGO 设计系统
|
||||
冷调石墨灰阶 / 纯白卡片 / 靛蓝主色 / 近黑锌灰暗色
|
||||
============================================================ */
|
||||
|
||||
:root {
|
||||
/* 浅色（默认） */
|
||||
--bg: #f6f2ea;
|
||||
/* 浅色（默认）——冷调石墨：底色微蓝灰，面板纯白浮起，层次干净锐利 */
|
||||
--bg: #f6f7f9;
|
||||
--panel: #ffffff;
|
||||
--panel-2: #faf6ef;
|
||||
--tint: #f1ebe0;
|
||||
--ink: #2c2620;
|
||||
--ink-2: #6b6257;
|
||||
--ink-3: #7c7365;
|
||||
--line: #ece4d8;
|
||||
--line-2: #ddd2c1;
|
||||
--panel-2: #f2f4f7;
|
||||
--tint: #eceff3;
|
||||
--ink: #161a22;
|
||||
--ink-2: #4b5260;
|
||||
--ink-3: #5b6270;
|
||||
--line: #e4e7ec; /* 装饰性分隔/卡片边（非交互，配合阴影与底色高差） */
|
||||
--line-2: #7c8698; /* 功能性边界：输入框/按钮/分页等可交互控件，满足 1.4.11 ≥3:1 */
|
||||
|
||||
--accent: #0e6f66;
|
||||
--accent-hi: #0b5c54;
|
||||
--accent-soft: rgba(14, 111, 102, 0.1);
|
||||
--accent-on: #fdfbf6; /* 暖白，与暖纸底色协调，而非冷纯白 */
|
||||
--accent: #3b5bdb;
|
||||
--accent-hi: #3451c8;
|
||||
--accent-soft: rgba(59, 91, 219, 0.1);
|
||||
--accent-on: #ffffff;
|
||||
|
||||
--clay: #b85c42;
|
||||
--clay-soft: rgba(200, 105, 77, 0.12);
|
||||
--gold: #9a6b1f;
|
||||
--gold-soft: rgba(176, 124, 30, 0.13);
|
||||
--clay: #a5420a;
|
||||
--clay-soft: rgba(165, 66, 10, 0.12);
|
||||
--gold: #825700;
|
||||
--gold-soft: rgba(130, 87, 0, 0.13);
|
||||
|
||||
--danger: #d23b32;
|
||||
--danger-soft: rgba(210, 59, 50, 0.09);
|
||||
--ok: #2f8f4e;
|
||||
--ok-soft: rgba(47, 143, 78, 0.1);
|
||||
--danger: #c8281e;
|
||||
--danger-soft: rgba(200, 40, 30, 0.09);
|
||||
--ok: #137333;
|
||||
--ok-soft: rgba(19, 115, 51, 0.1);
|
||||
|
||||
--shadow-sm: 0 1px 2px rgba(87, 66, 36, 0.05);
|
||||
--shadow: 0 2px 8px rgba(87, 66, 36, 0.05), 0 10px 28px rgba(87, 66, 36, 0.05);
|
||||
--shadow-lg: 0 6px 16px rgba(87, 66, 36, 0.07), 0 20px 48px rgba(87, 66, 36, 0.1);
|
||||
/* 工作台语义：导航选中态 / 榜单奖牌色 */
|
||||
--nav-active-bg: var(--accent-soft);
|
||||
--nav-active-ink: var(--accent);
|
||||
--nav-active-line: rgba(59, 91, 219, 0.22);
|
||||
--rank-1: #96620f;
|
||||
--rank-2: #5d6676;
|
||||
--rank-3: #a05a2c;
|
||||
|
||||
--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
|
||||
--shadow: 0 2px 8px rgba(16, 24, 40, 0.05), 0 10px 28px rgba(16, 24, 40, 0.06);
|
||||
--shadow-lg: 0 6px 16px rgba(16, 24, 40, 0.08), 0 20px 48px rgba(16, 24, 40, 0.12);
|
||||
|
||||
/* next/font 构建期自托管，变量由 layout.tsx 注入；
|
||||
本地系统字体仅作网络字体分片就绪前的回退（PingFang/雅黑与 Noto 观感接近） */
|
||||
@@ -52,30 +60,39 @@
|
||||
}
|
||||
|
||||
.dark {
|
||||
--bg: #181510;
|
||||
--panel: #221e18;
|
||||
--panel-2: #2a251e;
|
||||
--tint: #312b22;
|
||||
--ink: #f3ede2;
|
||||
--ink-2: #c3b9a9;
|
||||
--ink-3: #9d9383;
|
||||
--line: rgba(243, 237, 226, 0.09);
|
||||
--line-2: rgba(243, 237, 226, 0.17);
|
||||
/* 近黑锌灰：面板逐层浮起，靛蓝提亮为长春花蓝 */
|
||||
--bg: #0f1115;
|
||||
--panel: #181b21;
|
||||
--panel-2: #20242c;
|
||||
--tint: #282d37;
|
||||
--ink: #eef1f6;
|
||||
--ink-2: #b6bdc9;
|
||||
--ink-3: #98a1b2;
|
||||
--line: rgba(238, 241, 246, 0.08); /* 装饰性分隔/卡片边 */
|
||||
--line-2: rgba(238, 241, 246, 0.38); /* 功能性控件边界，1.4.11 ≥3:1 */
|
||||
|
||||
--accent: #2dd4bf;
|
||||
--accent-hi: #5eead4;
|
||||
--accent-soft: rgba(45, 212, 191, 0.15);
|
||||
--accent-on: #0c2420;
|
||||
--accent: #8ea2ff;
|
||||
--accent-hi: #a9b8ff;
|
||||
--accent-soft: rgba(141, 163, 255, 0.16);
|
||||
--accent-on: #10162b;
|
||||
|
||||
--clay: #e89070;
|
||||
--clay-soft: rgba(232, 144, 112, 0.16);
|
||||
--gold: #d8ae5e;
|
||||
--gold-soft: rgba(216, 174, 94, 0.16);
|
||||
--clay: #f0875a;
|
||||
--clay-soft: rgba(240, 135, 90, 0.16);
|
||||
--gold: #e0b259;
|
||||
--gold-soft: rgba(224, 178, 89, 0.16);
|
||||
|
||||
--danger: #f26b5e;
|
||||
--danger-soft: rgba(242, 107, 94, 0.15);
|
||||
--ok: #6fcf8e;
|
||||
--ok-soft: rgba(111, 207, 142, 0.15);
|
||||
--danger: #ff6b60;
|
||||
--danger-soft: rgba(255, 107, 96, 0.15);
|
||||
--ok: #58d18a;
|
||||
--ok-soft: rgba(88, 209, 138, 0.15);
|
||||
|
||||
/* 工作台语义 */
|
||||
--nav-active-bg: rgba(141, 163, 255, 0.14);
|
||||
--nav-active-ink: #a9b8ff;
|
||||
--nav-active-line: rgba(141, 163, 255, 0.3);
|
||||
--rank-1: #e3bf74;
|
||||
--rank-2: #b9c1cd;
|
||||
--rank-3: #e0a06e;
|
||||
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
--shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 12px 32px rgba(0, 0, 0, 0.22);
|
||||
@@ -84,10 +101,6 @@
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
* {
|
||||
border-color: var(--line);
|
||||
}
|
||||
|
||||
html {
|
||||
scrollbar-color: var(--line-2) transparent;
|
||||
}
|
||||
@@ -118,6 +131,13 @@ body {
|
||||
/* 链接重置放入 base 层：避免未分层规则击败 components 层的 .btn-primary 等类
|
||||
（Tailwind v4 中未分层样式优先级高于任何 @layer） */
|
||||
@layer base {
|
||||
/* 必须在 base 层：未分层的 * 选择器会击败 @layer components 中所有
|
||||
border-color（.field/.btn-line/.pager-btn 等曾因此实际渲染成 --line） */
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
border-color: var(--line);
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
@@ -161,6 +181,19 @@ h1, h2, h3, h4 {
|
||||
border-color: var(--line-2);
|
||||
}
|
||||
|
||||
/* 整行可点：标题链接的 ::after 铺满最近的 relative 行容器，
|
||||
行内其他交互元素加 .above-link 抬到点击层之上 */
|
||||
.stretch-link::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.above-link {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* ----- 按钮（胶囊） ----- */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
@@ -184,12 +217,12 @@ h1, h2, h3, h4 {
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
box-shadow: 0 1px 2px rgba(87, 66, 36, 0.12), 0 2px 8px rgba(14, 111, 102, 0.16);
|
||||
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12), 0 2px 8px rgba(59, 91, 219, 0.22);
|
||||
}
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: var(--accent-hi);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 6px rgba(87, 66, 36, 0.1), 0 8px 20px rgba(14, 111, 102, 0.24);
|
||||
box-shadow: 0 2px 6px rgba(16, 24, 40, 0.1), 0 8px 20px rgba(59, 91, 219, 0.3);
|
||||
}
|
||||
.btn-primary:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
@@ -213,6 +246,10 @@ h1, h2, h3, h4 {
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
}
|
||||
.dark .btn-danger:hover:not(:disabled) {
|
||||
/* 暗色 danger 为亮红，白字仅 2.79:1，改用深色文字 */
|
||||
color: #1a0c0b;
|
||||
}
|
||||
|
||||
.btn-sm { padding: 7px 14px; font-size: 13px; }
|
||||
|
||||
@@ -235,7 +272,8 @@ h1, h2, h3, h4 {
|
||||
font-family: var(--font-sans);
|
||||
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
|
||||
}
|
||||
.field::placeholder { color: var(--ink-3); opacity: 0.8; }
|
||||
/* 占位符不使用 opacity：透明度与底色合成后浅色仅 3.7:1，实色 ink-3 达 5.72:1 */
|
||||
.field::placeholder { color: var(--ink-3); }
|
||||
.field:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
@@ -295,7 +333,7 @@ h1, h2, h3, h4 {
|
||||
/* ----- 分页 ----- */
|
||||
.pager-btn {
|
||||
background: var(--panel);
|
||||
border-color: var(--line);
|
||||
border-color: var(--line-2);
|
||||
color: var(--ink-2);
|
||||
}
|
||||
.pager-btn:hover {
|
||||
@@ -339,6 +377,199 @@ h1, h2, h3, h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
工作台组件（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"] {
|
||||
appearance: none;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
border-radius: 999px;
|
||||
padding: 6.5px 15px;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
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;
|
||||
}
|
||||
.j13-seg [role="tab"]:hover {
|
||||
color: var(--ink);
|
||||
}
|
||||
.j13-seg [role="tab"][aria-selected="true"] {
|
||||
background: var(--panel);
|
||||
color: var(--accent);
|
||||
box-shadow: var(--shadow-sm);
|
||||
font-weight: 700;
|
||||
}
|
||||
.j13-seg [role="tab"]:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
/* 侧栏导航项 */
|
||||
.j13-raillink {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--r-sm);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--ink-2);
|
||||
transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
|
||||
}
|
||||
.j13-raillink:hover {
|
||||
background: var(--panel-2);
|
||||
color: var(--ink);
|
||||
}
|
||||
.j13-raillink[aria-current="page"] {
|
||||
background: var(--nav-active-bg);
|
||||
border-color: var(--nav-active-line);
|
||||
color: var(--nav-active-ink);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 工作台模块卡 */
|
||||
.j13-module {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: 16px;
|
||||
}
|
||||
.j13-module-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
/* 统计数字格 */
|
||||
.j13-stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
padding: 11px 13px;
|
||||
background: var(--panel-2);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r-sm);
|
||||
}
|
||||
.j13-stat .j13-stat-num {
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.015em;
|
||||
color: var(--ink);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.j13-stat .j13-stat-lab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--ink-3);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 热门榜单 */
|
||||
.j13-rank {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 8px 8px;
|
||||
border-radius: 10px;
|
||||
transition: background 0.16s ease;
|
||||
}
|
||||
.j13-rank:hover {
|
||||
background: var(--panel-2);
|
||||
}
|
||||
.j13-rank .j13-rank-no {
|
||||
width: 18px;
|
||||
padding-top: 2px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--ink-3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.j13-rank:nth-child(1) .j13-rank-no { color: var(--rank-1); }
|
||||
.j13-rank:nth-child(2) .j13-rank-no { color: var(--rank-2); }
|
||||
.j13-rank:nth-child(3) .j13-rank-no { color: var(--rank-3); }
|
||||
|
||||
/* 精选置顶卡 */
|
||||
.j13-feature {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 15px 17px;
|
||||
background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
|
||||
}
|
||||
.j13-feature:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow);
|
||||
border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
|
||||
}
|
||||
|
||||
/* 移动端横向板块条（滚动条隐藏，保留触控惯性） */
|
||||
.j13-chips {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.j13-chips::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.j13-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
padding: 7px 14px;
|
||||
border: 1px solid var(--line-2);
|
||||
background: var(--panel);
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--ink-2);
|
||||
white-space: nowrap;
|
||||
transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
|
||||
}
|
||||
.j13-chip:hover {
|
||||
border-color: var(--line-2);
|
||||
color: var(--ink);
|
||||
}
|
||||
.j13-chip[aria-current="page"] {
|
||||
background: var(--nav-active-bg);
|
||||
border-color: var(--nav-active-line);
|
||||
color: var(--nav-active-ink);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
@@ -401,22 +632,22 @@ h1, h2, h3, h4 {
|
||||
}
|
||||
|
||||
/* 头像配色（浅/暗各自保证可读） */
|
||||
.av-0 { background: rgba(15, 118, 110, 0.12); color: #0f766e; }
|
||||
.av-1 { background: rgba(200, 105, 77, 0.14); color: #b85c42; }
|
||||
.av-2 { background: rgba(176, 124, 30, 0.15); color: #9a6b1f; }
|
||||
.av-3 { background: rgba(91, 111, 181, 0.14); color: #4c61ab; }
|
||||
.av-4 { background: rgba(122, 92, 168, 0.14); color: #6f50a0; }
|
||||
.av-5 { background: rgba(79, 138, 95, 0.15); color: #477e55; }
|
||||
.av-6 { background: rgba(192, 106, 139, 0.14); color: #b1557a; }
|
||||
.av-7 { background: rgba(63, 134, 147, 0.14); color: #357985; }
|
||||
.dark .av-0 { background: rgba(45, 212, 191, 0.16); color: #5eead4; }
|
||||
.dark .av-1 { background: rgba(232, 144, 112, 0.18); color: #f0a484; }
|
||||
.dark .av-2 { background: rgba(216, 174, 94, 0.18); color: #e3bf74; }
|
||||
.dark .av-3 { background: rgba(130, 150, 224, 0.18); color: #a7b8f0; }
|
||||
.dark .av-4 { background: rgba(178, 150, 224, 0.18); color: #c3abe8; }
|
||||
.dark .av-5 { background: rgba(129, 201, 148, 0.18); color: #99ddac; }
|
||||
.dark .av-6 { background: rgba(235, 148, 180, 0.18); color: #f0a5c2; }
|
||||
.dark .av-7 { background: rgba(102, 190, 206, 0.18); color: #84d4e0; }
|
||||
.av-0 { background: rgba(52, 81, 200, 0.12); color: #3451c8; }
|
||||
.av-1 { background: rgba(10, 99, 117, 0.12); color: #0a6375; }
|
||||
.av-2 { background: rgba(109, 71, 192, 0.12); color: #6d47c0; }
|
||||
.av-3 { background: rgba(27, 99, 158, 0.12); color: #1b639e; }
|
||||
.av-4 { background: rgba(12, 102, 95, 0.13); color: #0c665f; }
|
||||
.av-5 { background: rgba(171, 56, 93, 0.12); color: #ab385d; }
|
||||
.av-6 { background: rgba(133, 88, 0, 0.14); color: #855800; }
|
||||
.av-7 { background: rgba(82, 96, 122, 0.13); color: #52607a; }
|
||||
.dark .av-0 { background: rgba(169, 184, 255, 0.18); color: #a9b8ff; }
|
||||
.dark .av-1 { background: rgba(92, 201, 224, 0.18); color: #5cc9e0; }
|
||||
.dark .av-2 { background: rgba(192, 168, 245, 0.18); color: #c0a8f5; }
|
||||
.dark .av-3 { background: rgba(125, 184, 238, 0.18); color: #7db8ee; }
|
||||
.dark .av-4 { background: rgba(94, 211, 189, 0.18); color: #5ed3bd; }
|
||||
.dark .av-5 { background: rgba(240, 147, 181, 0.18); color: #f093b5; }
|
||||
.dark .av-6 { background: rgba(224, 178, 89, 0.18); color: #e0b259; }
|
||||
.dark .av-7 { background: rgba(170, 182, 207, 0.18); color: #aab6cf; }
|
||||
|
||||
/* ============================================================
|
||||
微交互
|
||||
@@ -432,13 +663,13 @@ h1, h2, h3, h4 {
|
||||
45% { transform: scale(1.4); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
.j13-heart-pop { animation: j13-heart-pop 0.26s ease-out; }
|
||||
.j13-heart-pop { animation: j13-heart-pop 0.18s ease-out; }
|
||||
|
||||
@keyframes j13-fade-up {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.j13-fade-up { animation: j13-fade-up 0.3s ease-out both; }
|
||||
.j13-fade-up { animation: j13-fade-up 0.2s ease-out both; }
|
||||
|
||||
/* 跳到主内容 */
|
||||
.skip-link {
|
||||
|
||||
@@ -5,7 +5,8 @@ import "./globals.css";
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import Toaster from "@/components/Toaster";
|
||||
import { fetchMe, type User } from "@/lib/api";
|
||||
import type { User } from "@/lib/api";
|
||||
import { getMeCached } from "@/lib/serverData";
|
||||
import { TOKEN_COOKIE, REFRESH_COOKIE, authCookieHeader } from "@/lib/cookies";
|
||||
|
||||
// 构建期下载并自托管字体：同源加载 + 自动 preload + fallback 度量校正，
|
||||
@@ -63,7 +64,7 @@ export default async function RootLayout({
|
||||
!!cookieStore.get(TOKEN_COOKIE)?.value || !!cookieStore.get(REFRESH_COOKIE)?.value;
|
||||
if (hasAuthCookie) {
|
||||
// 用户信息与未读数合并为一次请求；只转发最小化的 access cookie
|
||||
const me = await fetchMe(authCookieHeader(cookieStore) || undefined);
|
||||
const me = await getMeCached(authCookieHeader(cookieStore) || undefined);
|
||||
user = me.user;
|
||||
unread = me.unread_count;
|
||||
}
|
||||
@@ -81,7 +82,7 @@ export default async function RootLayout({
|
||||
<main
|
||||
id="main"
|
||||
tabIndex={-1}
|
||||
className="flex-1 w-full max-w-6xl mx-auto px-4 sm:px-6 py-7 sm:py-9 outline-none"
|
||||
className="flex-1 w-full max-w-[1440px] mx-auto px-4 sm:px-6 py-7 sm:py-9 outline-none"
|
||||
>
|
||||
{children}
|
||||
</main>
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { MessagesSquare } from "lucide-react";
|
||||
import { apiLogin } from "@/lib/api";
|
||||
import { apiLogin, apiMe } from "@/lib/api";
|
||||
import { hasAuthCookieHint } from "@/lib/cookies";
|
||||
|
||||
// 仅允许同源相对路径跳转，拦截 //host、/\\host 与绝对 URL 形式的开放重定向
|
||||
function safeRedirect(to: string | null): string {
|
||||
@@ -23,6 +24,17 @@ export default function LoginPage() {
|
||||
const [error, setError] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// 已登录用户访问登录页：直接回落到安全的跳转目标
|
||||
useEffect(() => {
|
||||
if (!hasAuthCookieHint()) return;
|
||||
apiMe()
|
||||
.then((res) => {
|
||||
if (res.user) router.replace(redirect);
|
||||
})
|
||||
.catch(() => {});
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
|
||||
@@ -1,12 +1,19 @@
|
||||
import Link from "next/link";
|
||||
import type { Metadata } from "next";
|
||||
import { cookies } from "next/headers";
|
||||
import { PenSquare, SearchX, MessagesSquare, Check, ArrowRight } from "lucide-react";
|
||||
import { fetchPosts, fetchBoards } from "@/lib/api";
|
||||
import Link from "next/link";
|
||||
import { PenSquare, SearchX, MessagesSquare } from "lucide-react";
|
||||
import {
|
||||
fetchPosts,
|
||||
fetchOverview,
|
||||
type OverviewResponse,
|
||||
} from "@/lib/api";
|
||||
import { authCookieHeader } from "@/lib/cookies";
|
||||
import { getMeCached } from "@/lib/serverData";
|
||||
import Pagination from "@/components/Pagination";
|
||||
import PostRow from "@/components/PostRow";
|
||||
import PinnedPosts from "@/components/PinnedPosts";
|
||||
import FeedTabs, { type FeedSort } from "@/components/home/FeedTabs";
|
||||
import { WorkspaceNav, WorkspaceNavMobile } from "@/components/home/WorkspaceNav";
|
||||
import { CommunityPanels, CommunityPanelsMobile } from "@/components/home/CommunityPanels";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "姜十三论坛 · 技术讨论社区",
|
||||
@@ -14,97 +21,172 @@ export const metadata: Metadata = {
|
||||
};
|
||||
|
||||
interface HomePageProps {
|
||||
searchParams: Promise<{ q?: string; page?: string }>;
|
||||
searchParams: Promise<{ q?: string; page?: string; sort?: string; board?: string }>;
|
||||
}
|
||||
|
||||
function normalizeSort(v?: string): FeedSort {
|
||||
return v === "hot" || v === "recommended" ? v : "latest";
|
||||
}
|
||||
|
||||
// 空结果面板（无帖 / 无搜索结果）
|
||||
function EmptyState({ keyword }: { keyword: string }) {
|
||||
return (
|
||||
<div className="text-center py-20 px-6">
|
||||
<span
|
||||
className="inline-flex w-14 h-14 rounded-full items-center justify-center mb-4"
|
||||
style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
|
||||
>
|
||||
{keyword ? <SearchX size={26} /> : <MessagesSquare size={26} />}
|
||||
</span>
|
||||
<p className="font-bold text-lg" style={{ color: "var(--ink)" }}>
|
||||
{keyword ? "没有找到相关帖子" : "还没有帖子"}
|
||||
</p>
|
||||
<p className="meta mt-1.5">
|
||||
{keyword ? `换个关键词试试，或者发起“${keyword}”相关的话题` : "成为第一个发起讨论的人吧"}
|
||||
</p>
|
||||
{keyword ? (
|
||||
<div className="flex items-center justify-center gap-3 mt-6">
|
||||
<Link href="/" className="btn btn-line">
|
||||
清除搜索
|
||||
</Link>
|
||||
<Link href="/compose" className="btn btn-primary">
|
||||
<PenSquare size={15} /> 发起这个话题
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<Link href="/compose" className="btn btn-primary mt-6">
|
||||
<PenSquare size={15} /> 写新帖
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default async function HomePage({ searchParams }: HomePageProps) {
|
||||
const { q, page: pageStr } = await searchParams;
|
||||
const keyword = q?.trim() || "";
|
||||
const page = Math.max(1, parseInt(pageStr || "1", 10) || 1);
|
||||
// 仅转发最小化的 access cookie 供后端填充 liked 状态（不携带 refresh 等）
|
||||
const cookie = authCookieHeader(await cookies());
|
||||
const [postsData, boardsData] = await Promise.all([
|
||||
fetchPosts(page, 20, undefined, "latest", keyword, cookie),
|
||||
fetchBoards(),
|
||||
]);
|
||||
const sp = await searchParams;
|
||||
const keyword = sp.q?.trim() || "";
|
||||
const page = Math.max(1, parseInt(sp.page || "1", 10) || 1);
|
||||
const sort = normalizeSort(sp.sort);
|
||||
const boardId = Math.max(0, parseInt(sp.board || "0", 10) || 0);
|
||||
const isSearch = keyword.length > 0;
|
||||
|
||||
// 第一页且非搜索时：管理员置顶独立成区，其余进入普通列表
|
||||
const split = page === 1 && !keyword;
|
||||
const pinned = split ? postsData.posts.filter((p) => p.pinned > 0) : [];
|
||||
const rows = split ? postsData.posts.filter((p) => p.pinned <= 0) : postsData.posts;
|
||||
const cookie = authCookieHeader(await cookies());
|
||||
// 与 layout 共享同一份 /me 请求（React cache 去重）
|
||||
const mePromise = getMeCached(cookie || undefined);
|
||||
const postsPromise = fetchPosts(
|
||||
page,
|
||||
20,
|
||||
isSearch || boardId <= 0 ? undefined : boardId,
|
||||
sort === "recommended" ? "hot" : sort,
|
||||
keyword,
|
||||
sort === "recommended",
|
||||
cookie
|
||||
);
|
||||
// 聚合面板失败不阻塞帖子流
|
||||
const overviewPromise: Promise<OverviewResponse | null> = fetchOverview(cookie).catch(() => null);
|
||||
|
||||
const [me, postsData, overview] = await Promise.all([
|
||||
mePromise,
|
||||
postsPromise,
|
||||
overviewPromise,
|
||||
]);
|
||||
const user = me.user;
|
||||
const boards = overview?.boards ?? [];
|
||||
const activeBoard = boards.find((b) => b.id === boardId) || null;
|
||||
|
||||
// 搜索态：单栏占满，无 Tabs/侧栏
|
||||
if (isSearch) {
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<div className="mb-5">
|
||||
<h1 className="text-[24px] sm:text-[28px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
|
||||
搜索“<span style={{ color: "var(--accent)" }}>{keyword}</span>”
|
||||
</h1>
|
||||
<p className="meta mt-2">共 {postsData.total} 篇结果 · 按相关度与时间排序</p>
|
||||
</div>
|
||||
<div className="panel overflow-hidden">
|
||||
{postsData.posts.length > 0 ? (
|
||||
postsData.posts.map((post, i) => (
|
||||
<PostRow key={post.id} post={post} boardHref index={i} showViews={false} showLike={false} />
|
||||
))
|
||||
) : (
|
||||
<EmptyState keyword={keyword} />
|
||||
)}
|
||||
</div>
|
||||
<Pagination
|
||||
total={postsData.total}
|
||||
page={page}
|
||||
size={20}
|
||||
basePath="/"
|
||||
query={{ q: keyword }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 置顶帖直接按后端 pinned DESC 顺序并入统一信息流，同样的行布局
|
||||
const heading = activeBoard
|
||||
? activeBoard.name
|
||||
: sort === "hot"
|
||||
? "热门讨论"
|
||||
: 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);
|
||||
if (sort !== "latest") pageQuery.sort = sort;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* 页头 */}
|
||||
<div className="flex items-end justify-between gap-4 mb-6">
|
||||
<div>
|
||||
<h1 className="text-[26px] sm:text-[32px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
|
||||
{keyword ? (
|
||||
<>
|
||||
搜索“<span style={{ color: "var(--accent)" }}>{keyword}</span>”
|
||||
</>
|
||||
) : (
|
||||
"最新讨论"
|
||||
)}
|
||||
</h1>
|
||||
<p className="meta mt-2">
|
||||
{keyword
|
||||
? `共找到 ${postsData.total} 篇相关帖子`
|
||||
: `共 ${postsData.total} 篇帖子 · ${boardsData.boards.length} 个板块，欢迎加入讨论`}
|
||||
</p>
|
||||
</div>
|
||||
<Link href="/compose" className="btn btn-primary hidden sm:inline-flex">
|
||||
<PenSquare size={16} /> 写新帖
|
||||
</Link>
|
||||
</div>
|
||||
<WorkspaceNavMobile boards={boards} user={user} />
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1fr_290px] gap-6">
|
||||
{/* 主列 */}
|
||||
<div>
|
||||
<PinnedPosts posts={pinned} />
|
||||
<div className="flex items-start gap-6 xl:gap-7 mt-5 lg:mt-0">
|
||||
<WorkspaceNav boards={boards} user={user} />
|
||||
|
||||
{/* 中栏：帖子流（左栏切板块只替换这一列） */}
|
||||
<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>
|
||||
|
||||
<div className="panel overflow-hidden">
|
||||
{rows.length > 0 ? (
|
||||
<>
|
||||
<div className="px-4 sm:px-5 py-3.5 flex items-center justify-between" style={{ borderBottom: "1px solid var(--line)" }}>
|
||||
<span className="font-bold text-[15px]" style={{ color: "var(--ink)" }}>
|
||||
{keyword ? "搜索结果" : "全部讨论"}
|
||||
</span>
|
||||
<span className="meta text-xs">共 {postsData.total} 篇</span>
|
||||
</div>
|
||||
{rows.map((post) => (
|
||||
<PostRow key={post.id} post={post} boardHref />
|
||||
))}
|
||||
</>
|
||||
{postsData.posts.length > 0 ? (
|
||||
postsData.posts.map((post, i) => (
|
||||
<PostRow
|
||||
key={post.id}
|
||||
post={post}
|
||||
boardHref={!activeBoard}
|
||||
compact
|
||||
index={i}
|
||||
showViews={false}
|
||||
showLike={false}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center py-20 px-6">
|
||||
<span
|
||||
className="inline-flex w-14 h-14 rounded-full items-center justify-center mb-4"
|
||||
style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
|
||||
>
|
||||
{keyword ? <SearchX size={26} /> : <MessagesSquare size={26} />}
|
||||
</span>
|
||||
<p className="font-bold text-lg" style={{ color: "var(--ink)" }}>
|
||||
{keyword ? "没有找到相关帖子" : "还没有帖子"}
|
||||
</p>
|
||||
<p className="meta mt-1.5">
|
||||
{keyword ? `换个关键词试试，或者发起“${keyword}”相关的话题` : "成为第一个发起讨论的人吧"}
|
||||
</p>
|
||||
{keyword ? (
|
||||
<div className="flex items-center justify-center gap-3 mt-6">
|
||||
<Link href="/" className="btn btn-line">
|
||||
清除搜索
|
||||
</Link>
|
||||
<Link href="/compose" className="btn btn-primary">
|
||||
<PenSquare size={15} /> 发起这个话题
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<Link href="/compose" className="btn btn-primary mt-6">
|
||||
<PenSquare size={15} /> 写新帖
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<EmptyState keyword="" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -113,87 +195,30 @@ export default async function HomePage({ searchParams }: HomePageProps) {
|
||||
page={page}
|
||||
size={20}
|
||||
basePath="/"
|
||||
query={keyword ? { q: keyword } : undefined}
|
||||
query={Object.keys(pageQuery).length > 0 ? pageQuery : undefined}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 侧栏 */}
|
||||
<aside className="space-y-5">
|
||||
{/* 发帖引导 */}
|
||||
{!keyword && (
|
||||
<div
|
||||
className="p-5"
|
||||
style={{
|
||||
background: "var(--accent-soft)",
|
||||
borderRadius: "var(--r)",
|
||||
}}
|
||||
>
|
||||
<p className="font-extrabold text-[16px] mb-1" style={{ color: "var(--ink)" }}>
|
||||
有什么想聊的？
|
||||
</p>
|
||||
<p className="text-[13px] leading-relaxed mb-4" style={{ color: "var(--ink-2)" }}>
|
||||
分享你的想法、问题或经验，社区里有人正在等你的回答。
|
||||
</p>
|
||||
<Link
|
||||
href="/compose"
|
||||
className="btn btn-primary w-full justify-center"
|
||||
>
|
||||
<PenSquare size={15} /> 发起讨论
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="panel p-5">
|
||||
<p className="font-bold text-[15px] mb-3.5" style={{ color: "var(--ink)" }}>板块导航</p>
|
||||
<div className="space-y-1">
|
||||
{boardsData.boards.map((b, i) => (
|
||||
<Link
|
||||
key={b.id}
|
||||
href={`/board/${b.id}`}
|
||||
className="group flex items-center gap-3 py-1.5 px-2 -mx-2 rounded-xl transition-colors hover:bg-[var(--panel-2)]"
|
||||
>
|
||||
<span
|
||||
className={`av-${i % 8} w-8 h-8 rounded-xl flex items-center justify-center text-[13px] font-bold shrink-0`}
|
||||
>
|
||||
{b.name.slice(0, 1)}
|
||||
</span>
|
||||
<span
|
||||
className="text-sm font-medium flex-1 truncate group-hover:text-[var(--accent)] transition-colors"
|
||||
style={{ color: "var(--ink)" }}
|
||||
>
|
||||
{b.name}
|
||||
</span>
|
||||
<ArrowRight size={14} className="opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all" style={{ color: "var(--accent)" }} />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="panel p-5">
|
||||
<p className="font-bold text-[15px] mb-3.5" style={{ color: "var(--ink)" }}>社区守则</p>
|
||||
<ul className="space-y-3 text-[13.5px] leading-relaxed" style={{ color: "var(--ink-2)" }}>
|
||||
<li className="flex gap-2.5">
|
||||
<span className="shrink-0 w-5 h-5 rounded-full flex items-center justify-center mt-0.5" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}>
|
||||
<Check size={12} strokeWidth={3} />
|
||||
</span>
|
||||
标题清晰，内容支持 Markdown
|
||||
</li>
|
||||
<li className="flex gap-2.5">
|
||||
<span className="shrink-0 w-5 h-5 rounded-full flex items-center justify-center mt-0.5" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}>
|
||||
<Check size={12} strokeWidth={3} />
|
||||
</span>
|
||||
友善讨论，就事论事
|
||||
</li>
|
||||
<li className="flex gap-2.5">
|
||||
<span className="shrink-0 w-5 h-5 rounded-full flex items-center justify-center mt-0.5" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}>
|
||||
<Check size={12} strokeWidth={3} />
|
||||
</span>
|
||||
违规内容可向管理员举报
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
{/* 右栏：社区面板 */}
|
||||
{overview && (
|
||||
<CommunityPanels
|
||||
stats={overview.stats}
|
||||
hot={overview.hot}
|
||||
activeUsers={overview.active_users}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 窄屏：面板下沉到帖子流之后 */}
|
||||
{overview && (
|
||||
<div className="mt-6">
|
||||
<CommunityPanelsMobile
|
||||
stats={overview.stats}
|
||||
hot={overview.hot}
|
||||
activeUsers={overview.active_users}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { UserPlus } from "lucide-react";
|
||||
import { apiRegister } from "@/lib/api";
|
||||
import { apiRegister, apiMe } from "@/lib/api";
|
||||
import { hasAuthCookieHint } from "@/lib/cookies";
|
||||
|
||||
export default function RegisterPage() {
|
||||
const router = useRouter();
|
||||
@@ -14,6 +15,16 @@ export default function RegisterPage() {
|
||||
const [error, setError] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// 已登录用户不必再注册，直接回首页
|
||||
useEffect(() => {
|
||||
if (!hasAuthCookieHint()) return;
|
||||
apiMe()
|
||||
.then((res) => {
|
||||
if (res.user) router.replace("/");
|
||||
})
|
||||
.catch(() => {});
|
||||
}, [router]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
|
||||
Reference in New Issue
Block a user