freefire/jiang13-bbs
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

feat: 完成社区首页功能迭代，新增首页聚合与工作台组件

Browse Source 
本次提交实现了完整的社区首页功能：
1. 新增首页聚合接口与服务，包含社区统计、热门帖、活跃用户与板块数据
2. 实现帖子推荐排序、SSR缓存与点赞态同步逻辑
3. 重构导航与布局系统，新增工作台侧边栏与移动端适配
4. 优化主题色与UI样式，统一设计系统风格
5. 修复登录注册页自动跳转与组件状态同步问题
This commit is contained in:
姜十三
2026-09-12 23:36:18 +08:00
parent 055688a6cf
commit bee06fa962
24 changed files with 1446 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

377
frontend/app/globals.css
View File

@@ -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 {