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("");
|
||||
|
||||
@@ -1,34 +1,20 @@
|
||||
import Link from "next/link";
|
||||
import pkg from "../package.json";
|
||||
import FooterTiming from "./FooterTiming";
|
||||
|
||||
// 仅把明确发布过的版本视为"真实版本"；脚手架默认号视为未设计，传空显示占位
|
||||
function realVersion(v: string): string {
|
||||
return !v || v === "0.0.0" || v === "0.1.0" ? "" : v;
|
||||
}
|
||||
|
||||
// 极简页脚：版权 + 实时性能指标（版本 / 页面加载 / 模板生成）
|
||||
export default function Footer() {
|
||||
const year = new Date().getFullYear();
|
||||
|
||||
return (
|
||||
<footer className="mt-14" style={{ borderTop: "1px solid var(--line)" }}>
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span
|
||||
className="w-7 h-7 rounded-lg flex items-center justify-center"
|
||||
style={{ background: "var(--accent)", color: "var(--accent-on)" }}
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span className="text-[13.5px] font-bold" style={{ color: "var(--ink)" }}>
|
||||
姜十三社区
|
||||
</span>
|
||||
</div>
|
||||
<nav className="flex items-center gap-5 text-[13px]" style={{ color: "var(--ink-2)" }}>
|
||||
<Link href="/" className="hover:text-[var(--accent)] transition-colors">
|
||||
首页
|
||||
</Link>
|
||||
<Link href="/board/1" className="hover:text-[var(--accent)] transition-colors">
|
||||
板块
|
||||
</Link>
|
||||
<span className="meta">Go × Next.js</span>
|
||||
</nav>
|
||||
<span className="meta text-[12.5px]">
|
||||
© 2026 姜十三
|
||||
</span>
|
||||
<div className="max-w-[1440px] mx-auto px-4 sm:px-6 py-4 flex items-center justify-between gap-4">
|
||||
<span className="meta text-[12px] whitespace-nowrap">© {year} 姜十三社区</span>
|
||||
<FooterTiming version={realVersion(pkg.version)} />
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
|
||||
121
frontend/components/FooterTiming.tsx
Normal file
121
frontend/components/FooterTiming.tsx
Normal file
@@ -0,0 +1,121 @@
|
||||
"use client";
|
||||
|
||||
import { Suspense, useEffect, useRef, useState } from "react";
|
||||
import { usePathname, useSearchParams } from "next/navigation";
|
||||
|
||||
// 版本由 Footer（RSC）从 package.json 注入；未正式设计版本号时传入空串，显示占位
|
||||
const PLACEHOLDER = "—";
|
||||
|
||||
interface Metrics {
|
||||
page: number; // 页面：整页加载/客户端导航总耗时
|
||||
tpl: number; // 模板：服务端响应（SSR / RSC）耗时
|
||||
}
|
||||
|
||||
// 硬加载：页面=loadEventEnd，模板≈TTFB（localhost 下基本等于服务端生成时间）
|
||||
function readHardNav(): Metrics {
|
||||
const n = performance.getEntriesByType("navigation")[0] as
|
||||
| PerformanceNavigationTiming
|
||||
| undefined;
|
||||
if (!n) return { page: 0, tpl: 0 };
|
||||
return {
|
||||
page: Math.round((n.loadEventEnd || n.domComplete || n.responseEnd) - n.startTime),
|
||||
tpl: Math.max(0, Math.round(n.responseStart - n.requestStart)),
|
||||
};
|
||||
}
|
||||
|
||||
function TimingInner({ version }: { version: string }) {
|
||||
const pathname = usePathname();
|
||||
const search = useSearchParams().toString();
|
||||
// 初始必须为 null：performance 仅客户端可读，直接参与首帧渲染会导致水合不一致
|
||||
const [metrics, setMetrics] = useState<Metrics | null>(null);
|
||||
// 记录一次站内链接点击，作为客户端导航计时起点
|
||||
const pending = useRef<{ start: number; path: string; search: string } | null>(null);
|
||||
|
||||
// 挂载后读取硬加载指标；load 事件后 loadEventEnd 才有完整值，再补一次
|
||||
useEffect(() => {
|
||||
setMetrics(readHardNav());
|
||||
const apply = () => setMetrics(readHardNav());
|
||||
if (document.readyState !== "complete") {
|
||||
window.addEventListener("load", apply, { once: true });
|
||||
return () => window.removeEventListener("load", apply);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 捕获阶段监听站内点击（不干预任何默认行为）
|
||||
useEffect(() => {
|
||||
const onClick = (e: MouseEvent) => {
|
||||
if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.defaultPrevented) return;
|
||||
const a = (e.target as HTMLElement).closest("a");
|
||||
if (!a || !a.href || a.target === "_blank" || a.hasAttribute("download")) return;
|
||||
let u: URL;
|
||||
try {
|
||||
u = new URL(a.href);
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
if (u.origin !== location.origin) return;
|
||||
pending.current = { start: performance.now(), path: u.pathname, search: u.search };
|
||||
};
|
||||
document.addEventListener("click", onClick, true);
|
||||
return () => document.removeEventListener("click", onClick, true);
|
||||
}, []);
|
||||
|
||||
// 路由切换后两帧（绘制完成）结算；模板耗时取本次 RSC fetch 的资源条目
|
||||
useEffect(() => {
|
||||
const p = pending.current;
|
||||
if (!p) return;
|
||||
if (p.path !== pathname || p.search !== (search ? `?${search}` : "")) return;
|
||||
let raf2 = 0;
|
||||
const raf1 = requestAnimationFrame(() => {
|
||||
raf2 = requestAnimationFrame(() => {
|
||||
const page = Math.round(performance.now() - p.start);
|
||||
let tpl = 0;
|
||||
const resources = performance.getEntriesByType("resource") as PerformanceResourceTiming[];
|
||||
for (let i = resources.length - 1; i >= 0; i--) {
|
||||
const r = resources[i];
|
||||
if (
|
||||
r.initiatorType === "fetch" &&
|
||||
r.startTime >= p.start - 10 &&
|
||||
r.name.startsWith(location.origin + p.path)
|
||||
) {
|
||||
tpl = Math.round(r.responseEnd - r.startTime);
|
||||
break;
|
||||
}
|
||||
}
|
||||
setMetrics((prev) => ({ page: Math.max(1, page), tpl: tpl || prev?.tpl || 0 }));
|
||||
pending.current = null;
|
||||
});
|
||||
});
|
||||
return () => {
|
||||
cancelAnimationFrame(raf1);
|
||||
cancelAnimationFrame(raf2);
|
||||
};
|
||||
}, [pathname, search]);
|
||||
|
||||
return (
|
||||
<span
|
||||
className="inline-flex items-center gap-2 text-[12px] tabular-nums whitespace-nowrap"
|
||||
style={{ color: "var(--ink-3)" }}
|
||||
>
|
||||
<span>版本:{version || PLACEHOLDER}</span>
|
||||
<span aria-hidden="true">·</span>
|
||||
<span suppressHydrationWarning>页面:{metrics ? `${metrics.page}ms` : PLACEHOLDER}</span>
|
||||
<span aria-hidden="true">·</span>
|
||||
<span suppressHydrationWarning>模板:{metrics ? `${metrics.tpl}ms` : PLACEHOLDER}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default function FooterTiming({ version = "" }: { version?: string }) {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<span className="text-[12px] meta whitespace-nowrap">
|
||||
版本:{version || PLACEHOLDER}
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<TimingInner version={version} />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -16,6 +16,8 @@ import {
|
||||
Settings,
|
||||
Bell,
|
||||
Home,
|
||||
User as UserIcon,
|
||||
ChevronDown,
|
||||
} from "lucide-react";
|
||||
import { apiLogout, apiMe, type User } from "@/lib/api";
|
||||
import { hasAuthCookieHint } from "@/lib/cookies";
|
||||
@@ -140,7 +142,7 @@ export default function Header({
|
||||
WebkitBackdropFilter: "blur(14px)",
|
||||
}}
|
||||
>
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 h-[68px] flex items-center justify-between gap-4">
|
||||
<div className="max-w-[1440px] mx-auto px-4 sm:px-6 h-[68px] flex items-center justify-between gap-4">
|
||||
{/* 品牌 */}
|
||||
<Link href="/" className="flex items-center gap-2.5 shrink-0 group">
|
||||
<span
|
||||
@@ -166,9 +168,6 @@ export default function Header({
|
||||
<NavPill href="/" active={pathname === "/"} icon={<Home size={14} />}>
|
||||
首页
|
||||
</NavPill>
|
||||
<NavPill href="/board/1" active={pathname.startsWith("/board")}>
|
||||
板块
|
||||
</NavPill>
|
||||
<form onSubmit={handleSearch} className="relative ml-2">
|
||||
<Search
|
||||
size={15}
|
||||
@@ -199,51 +198,38 @@ export default function Header({
|
||||
</form>
|
||||
</nav>
|
||||
|
||||
<div className="hidden lg:flex items-center gap-2">
|
||||
<button onClick={toggleTheme} className={iconBtn} style={iconBtnStyle} aria-label="切换主题">
|
||||
{/* 右侧操作区：桌面/移动共用铃铛（仅挂载一次，避免重复轮询），
|
||||
桌面额外显示主题/发帖/用户菜单，移动端收进汉堡抽屉 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className={`${iconBtn} hidden lg:inline-flex`}
|
||||
style={iconBtnStyle}
|
||||
aria-label="切换主题"
|
||||
>
|
||||
{theme === "dark" ? <Sun size={17} /> : <Moon size={17} />}
|
||||
</button>
|
||||
{user && <NotificationBell initialUnread={unread} />}
|
||||
{user ? (
|
||||
<>
|
||||
<Link href="/compose" className="btn btn-primary btn-sm ml-1">
|
||||
<Link href="/compose" className="btn btn-primary btn-sm hidden lg:inline-flex">
|
||||
<PenSquare size={14} /> 发帖
|
||||
</Link>
|
||||
<Link
|
||||
href={`/u/${user.id}`}
|
||||
className="flex items-center gap-2 rounded-full pl-1 pr-3 py-1 transition-colors"
|
||||
style={{ border: "1px solid var(--line)", background: "var(--panel)" }}
|
||||
>
|
||||
<Avatar name={user.nickname || user.username} size={28} />
|
||||
<span className="text-[13px] font-semibold max-w-[90px] truncate" style={{ color: "var(--ink)" }}>
|
||||
{user.nickname}
|
||||
</span>
|
||||
</Link>
|
||||
<button onClick={() => router.push("/settings")} className={iconBtn} style={iconBtnStyle} aria-label="设置">
|
||||
<Settings size={16} />
|
||||
</button>
|
||||
<button onClick={handleLogout} className={iconBtn} style={iconBtnStyle} aria-label="退出登录">
|
||||
<LogOut size={16} />
|
||||
</button>
|
||||
<UserMenu user={user} onLogout={handleLogout} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="hidden lg:flex items-center gap-2">
|
||||
<Link href="/login" className="btn btn-line btn-sm">
|
||||
<LogIn size={14} /> 登录
|
||||
</Link>
|
||||
<Link href="/register" className="btn btn-primary btn-sm">
|
||||
<UserPlus size={14} /> 注册
|
||||
</Link>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 移动端按钮 */}
|
||||
<div className="flex items-center gap-2 lg:hidden">
|
||||
{user && <NotificationBell initialUnread={unread} />}
|
||||
<button
|
||||
onClick={() => setMenuOpen(!menuOpen)}
|
||||
className="w-10 h-10 flex items-center justify-center rounded-full"
|
||||
className="w-10 h-10 flex items-center justify-center rounded-full lg:hidden"
|
||||
style={{ border: "1px solid var(--line)", background: "var(--panel)", color: "var(--ink)" }}
|
||||
aria-label="菜单"
|
||||
aria-expanded={menuOpen}
|
||||
@@ -274,7 +260,6 @@ export default function Header({
|
||||
</form>
|
||||
<div className="flex flex-col">
|
||||
<MobileLink href="/" active={pathname === "/"}>首页</MobileLink>
|
||||
<MobileLink href="/board/1" active={pathname.startsWith("/board")}>板块</MobileLink>
|
||||
{user && <MobileLink href="/compose">发帖</MobileLink>}
|
||||
{user && (
|
||||
<MobileLink href="/notifications">
|
||||
@@ -351,3 +336,109 @@ function MobileLink({
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 桌面端用户菜单：头像 + 昵称触发器，下拉承载个人主页/设置/登出，
|
||||
* 把零散的图标按钮收拢为一个语义明确的控件
|
||||
*/
|
||||
function UserMenu({ user, onLogout }: { user: User; onLogout: () => void }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onDown = (e: MouseEvent) => {
|
||||
if (menuRef.current && !menuRef.current.contains(e.target as Node)) setOpen(false);
|
||||
};
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") setOpen(false);
|
||||
};
|
||||
document.addEventListener("mousedown", onDown);
|
||||
document.addEventListener("keydown", onKey);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", onDown);
|
||||
document.removeEventListener("keydown", onKey);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
const itemCls =
|
||||
"w-full flex items-center gap-2.5 px-4 py-2.5 text-[13.5px] font-semibold transition-colors hover:bg-[var(--panel-2)]";
|
||||
|
||||
return (
|
||||
<div className="relative hidden lg:block" ref={menuRef}>
|
||||
<button
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={open}
|
||||
className="flex items-center gap-2 rounded-full pl-1 pr-2.5 py-1 transition-colors"
|
||||
style={{
|
||||
border: "1px solid " + (open ? "var(--accent)" : "var(--line)"),
|
||||
background: open ? "var(--accent-soft)" : "var(--panel)",
|
||||
}}
|
||||
>
|
||||
<Avatar name={user.nickname || user.username} size={28} />
|
||||
<span
|
||||
className="text-[13px] font-semibold max-w-[90px] truncate"
|
||||
style={{ color: open ? "var(--accent)" : "var(--ink)" }}
|
||||
>
|
||||
{user.nickname}
|
||||
</span>
|
||||
<ChevronDown
|
||||
size={14}
|
||||
className="transition-transform duration-200"
|
||||
style={{
|
||||
color: "var(--ink-3)",
|
||||
transform: open ? "rotate(180deg)" : "none",
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div
|
||||
role="menu"
|
||||
className="absolute right-0 mt-2.5 w-60 overflow-hidden z-50 j13-toast-in"
|
||||
style={{
|
||||
background: "var(--panel)",
|
||||
border: "1px solid var(--line)",
|
||||
borderRadius: "var(--r)",
|
||||
boxShadow: "var(--shadow-lg)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex items-center gap-3 px-4 py-3.5"
|
||||
style={{ borderBottom: "1px solid var(--line)" }}
|
||||
>
|
||||
<Avatar name={user.nickname || user.username} size={38} />
|
||||
<div className="min-w-0">
|
||||
<p className="text-[14px] font-bold truncate" style={{ color: "var(--ink)" }}>
|
||||
{user.nickname}
|
||||
</p>
|
||||
<p className="meta text-xs truncate">@ {user.username}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-1.5">
|
||||
<Link href={`/u/${user.id}`} onClick={() => setOpen(false)} className={itemCls} role="menuitem">
|
||||
<UserIcon size={15} style={{ color: "var(--ink-3)" }} /> 个人主页
|
||||
</Link>
|
||||
<Link href="/settings" onClick={() => setOpen(false)} className={itemCls} role="menuitem">
|
||||
<Settings size={15} style={{ color: "var(--ink-3)" }} /> 账号设置
|
||||
</Link>
|
||||
</div>
|
||||
<div className="p-1.5" style={{ borderTop: "1px solid var(--line)" }}>
|
||||
<button
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
onLogout();
|
||||
}}
|
||||
className={itemCls}
|
||||
role="menuitem"
|
||||
style={{ color: "var(--danger)" }}
|
||||
>
|
||||
<LogOut size={15} /> 退出登录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter, usePathname } from "next/navigation";
|
||||
import { IconHeart } from "./Icons";
|
||||
import { apiToggleLike } from "@/lib/api";
|
||||
@@ -25,6 +25,13 @@ export default function LikeButton({
|
||||
const [count, setCount] = useState(initialCount);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// router.refresh()（登录/登出后）服务端会重新下发 liked 态，同步到本地，
|
||||
// 避免客户端状态停留在刷新前的用户视角
|
||||
useEffect(() => {
|
||||
setLiked(initialLiked);
|
||||
setCount(initialCount);
|
||||
}, [initialLiked, initialCount]);
|
||||
|
||||
const handleClick = async () => {
|
||||
if (loading) return;
|
||||
setLoading(true);
|
||||
|
||||
@@ -44,8 +44,11 @@ export default function PinnedPosts({
|
||||
<Link
|
||||
key={p.id}
|
||||
href={`/post/${p.id}`}
|
||||
className="group flex items-center gap-3 sm:gap-3.5 px-4 sm:px-5 py-3.5 transition-colors hover:bg-[var(--panel-2)]"
|
||||
style={i > 0 ? { borderTop: "1px solid var(--line)" } : undefined}
|
||||
className="group relative flex items-center gap-3 sm:gap-3.5 px-4 sm:px-5 py-3.5 transition-colors hover:bg-[var(--panel-2)] j13-fade-up"
|
||||
style={{
|
||||
...(i > 0 ? { borderTop: "1px solid var(--line)" } : {}),
|
||||
animationDelay: `${i * 35}ms`,
|
||||
}}
|
||||
>
|
||||
<Avatar name={p.user.nickname || p.user.username} size={36} />
|
||||
<div className="flex-1 min-w-0">
|
||||
|
||||
@@ -18,18 +18,35 @@ function formatTime(dateStr: string) {
|
||||
export default function PostRow({
|
||||
post,
|
||||
boardHref,
|
||||
index = 0,
|
||||
compact = false,
|
||||
showViews = true,
|
||||
showLike = true,
|
||||
}: {
|
||||
post: PostListItem;
|
||||
index?: number;
|
||||
boardHref?: boolean;
|
||||
compact?: boolean;
|
||||
showViews?: boolean;
|
||||
showLike?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="group flex items-center gap-3 sm:gap-4 px-4 sm:px-5 py-4 border-t transition-colors hover:bg-[var(--panel-2)]"
|
||||
style={{ borderColor: "var(--line)" }}
|
||||
className="group relative flex items-center gap-3 sm:gap-4 px-4 sm:px-5 border-t transition-colors hover:bg-[var(--panel-2)] j13-fade-up"
|
||||
style={{
|
||||
borderColor: "var(--line)",
|
||||
paddingTop: compact ? 13 : 16,
|
||||
paddingBottom: compact ? 13 : 16,
|
||||
animationDelay: `${Math.min(index, 9) * 35}ms`,
|
||||
}}
|
||||
>
|
||||
<Link href={`/u/${post.user.id}`} className="shrink-0" aria-label={post.user.nickname}>
|
||||
<Avatar name={post.user.nickname || post.user.username} size={42} />
|
||||
<Link
|
||||
href={`/u/${post.user.id}`}
|
||||
className="shrink-0 above-link"
|
||||
aria-label={post.user.nickname}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<Avatar name={post.user.nickname || post.user.username} size={compact ? 38 : 42} />
|
||||
</Link>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
@@ -39,7 +56,7 @@ export default function PostRow({
|
||||
{post.recommended && <span className="badge-rec">推荐</span>}
|
||||
</div>
|
||||
)}
|
||||
<Link href={`/post/${post.id}`}>
|
||||
<Link href={`/post/${post.id}`} className="stretch-link" aria-label={post.title}>
|
||||
<h3
|
||||
className="font-semibold text-[15px] sm:text-[16px] leading-snug truncate transition-colors group-hover:text-[var(--accent)]"
|
||||
style={{ color: "var(--ink)" }}
|
||||
@@ -47,7 +64,7 @@ export default function PostRow({
|
||||
{post.title}
|
||||
</h3>
|
||||
</Link>
|
||||
<div className="meta flex items-center gap-2.5 mt-1.5 flex-wrap">
|
||||
<div className="meta relative z-[2] flex items-center gap-2.5 mt-1.5 flex-wrap">
|
||||
<Link
|
||||
href={`/u/${post.user.id}`}
|
||||
className="hover:text-[var(--accent)] transition-colors"
|
||||
@@ -70,21 +87,28 @@ export default function PostRow({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2.5 sm:gap-3.5 shrink-0">
|
||||
<span className="hidden sm:inline-flex items-center gap-1.5 meta" aria-label={`${post.comment_count} 条评论`}>
|
||||
<div className="above-link flex items-center gap-2.5 sm:gap-3.5 shrink-0">
|
||||
<span
|
||||
className={`${showViews ? "hidden sm:inline-flex" : "inline-flex"} items-center gap-1.5 meta`}
|
||||
aria-label={`${post.comment_count} 条评论`}
|
||||
>
|
||||
<IconComment size={15} />
|
||||
{post.comment_count}
|
||||
</span>
|
||||
<span className="hidden md:inline-flex items-center gap-1.5 meta" aria-label={`${post.view_count} 次浏览`}>
|
||||
<IconEye size={15} />
|
||||
{post.view_count}
|
||||
</span>
|
||||
<LikeButton
|
||||
postId={String(post.id)}
|
||||
liked={post.liked}
|
||||
likeCount={post.like_count}
|
||||
variant="compact"
|
||||
/>
|
||||
{showViews && (
|
||||
<span className="hidden md:inline-flex items-center gap-1.5 meta" aria-label={`${post.view_count} 次浏览`}>
|
||||
<IconEye size={15} />
|
||||
{post.view_count}
|
||||
</span>
|
||||
)}
|
||||
{showLike && (
|
||||
<LikeButton
|
||||
postId={String(post.id)}
|
||||
liked={post.liked}
|
||||
likeCount={post.like_count}
|
||||
variant="compact"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -39,9 +39,37 @@ export interface Board {
|
||||
name: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
color_index?: number;
|
||||
sort_order: number;
|
||||
}
|
||||
|
||||
// 首页聚合接口
|
||||
export interface OverviewStats {
|
||||
posts: number;
|
||||
users: number;
|
||||
comments: number;
|
||||
today_posts: number;
|
||||
}
|
||||
|
||||
export interface ActiveUser {
|
||||
id: number;
|
||||
username: string;
|
||||
nickname: string;
|
||||
avatar: string;
|
||||
activity_count: number;
|
||||
}
|
||||
|
||||
export interface BoardWithCount extends Board {
|
||||
post_count: number;
|
||||
}
|
||||
|
||||
export interface OverviewResponse {
|
||||
stats: OverviewStats;
|
||||
hot: PostListItem[];
|
||||
active_users: ActiveUser[];
|
||||
boards: BoardWithCount[];
|
||||
}
|
||||
|
||||
export interface PostListItem {
|
||||
id: number;
|
||||
board_id: number;
|
||||
@@ -222,16 +250,25 @@ export async function fetchPosts(
|
||||
boardId?: number,
|
||||
sort = "latest",
|
||||
keyword = "",
|
||||
recommended = false,
|
||||
cookieHeader?: string
|
||||
): Promise<PostsResponse> {
|
||||
const params = new URLSearchParams({ page: String(page), size: String(size), sort });
|
||||
if (boardId) params.set("board_id", String(boardId));
|
||||
if (keyword) params.set("keyword", keyword);
|
||||
if (recommended) params.set("recommended", "true");
|
||||
const res = await fetch(`${API_BASE}/api/posts?${params}`, ssrInit(cookieHeaders(cookieHeader)));
|
||||
if (!res.ok) throw new Error("获取帖子失败");
|
||||
return res.json();
|
||||
}
|
||||
|
||||
// SSR 首页聚合数据；失败时抛错，由首页调用方 try/catch 降级为无侧栏模块
|
||||
export async function fetchOverview(cookieHeader?: string): Promise<OverviewResponse> {
|
||||
const res = await fetch(`${API_BASE}/api/overview`, ssrInit(cookieHeaders(cookieHeader)));
|
||||
if (!res.ok) throw new Error("获取社区概览失败");
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function fetchBoards(): Promise<{ boards: Board[] }> {
|
||||
const res = await fetch(`${API_BASE}/api/boards`, ssrInit());
|
||||
if (!res.ok) throw new Error("获取板块失败");
|
||||
|
||||
6
frontend/lib/serverData.ts
Normal file
6
frontend/lib/serverData.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { cache } from "react";
|
||||
import { fetchMe } from "./api";
|
||||
|
||||
// 同一 SSR 请求内去重：layout 与页面可能同时需要当前用户，
|
||||
// 相同 Cookie 头参数下只产生一次 /api/me 调用。
|
||||
export const getMeCached = cache((cookieHeader?: string) => fetchMe(cookieHeader));
|
||||
4
frontend/next-env.d.ts
vendored
4
frontend/next-env.d.ts
vendored
@@ -1,7 +1,7 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
import "./.next/dev/types/routes.d.ts";
|
||||
import "./.next/dev/types/root-params.d.ts";
|
||||
import "./.next/types/routes.d.ts";
|
||||
import "./.next/types/root-params.d.ts";
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||
|
||||
Reference in New Issue
Block a user