Merge branch 'feat/home-media-grid'

DEVELOPMENT.md

@@ -539,7 +539,7 @@ P3 实现说明：
 
 | 页面 | 内容 |
 |---|---|
-| 首页 | 最新动态优先：顶部四个可点击数据卡片（今日入库→视频榜按入库排序、播放增量→视频榜按 1 日增长排序、粉丝日增→粉丝页、待确认候选→候选页）；下方为最近发布、增长动态、热度速览、历史收藏夹与采集状态；三处视频区块统一使用竖排媒体卡（封面 + 两行截断标题 + 作者/数据行 + 高亮数据行），热度速览为横向滑动。 |
+| 首页 | 最新动态优先：顶部四个可点击数据卡片（今日入库→视频榜按入库排序、播放增量→视频榜按 1 日增长排序、粉丝日增→粉丝页、待确认候选→候选页）；下方为最近发布、增长动态、热度速览、历史收藏夹与采集状态；三处视频区块统一使用竖排媒体卡（封面 + 两行截断标题 + 作者/数据行 + 高亮数据行），并统一为响应式网格：移动端每行 1 个、平板 2/3 个、PC 每行 5 个，每处各取前 5 条。 |
 | 视频（`/videos`） | 内容效率（默认）、综合热度、发布时间、入库时间、播放/投币/收藏/评论、互动率、播放增量、播放增速；工具条为「排序」下拉 + 时间下拉 + 右侧放大镜搜索框（一行展示），时间支持全部/7 天/30 天/90 天/1 年/年份。 |
 | UP主（`/ups`） | 独立入口，不再与视频混排；卡片显示 UP 头像、视频数与总时长、最新粉丝数，以及当前排序的主/副指标（「总播放」排序时副指标为「平均播放」）；排序下拉含内容效率、互动效率、内容量、总播放、视频数、平均播放、总互动、最近发布；不提供按视频数筛选。 |
 | 数据说明（`/about`） | 数据来源与更新、发布时间/入库时间/快照日期、指标公式、时长与成熟窗口筛选、粉丝快照覆盖与已知局限；数值由 `/api/about` 动态读取。 |

README.md

@@ -166,7 +166,7 @@ uv run python tools/seed_preview_db.py --days 7
 uv run python app.py serve --preview --config data/preview/config.json
 ```
 
-- 首页默认“最新动态”：顶部四个数据卡片（今日入库 / 播放增量 / 粉丝日增 / 待确认候选）可点击跳转（视频榜按入库或增长排序、粉丝页、候选页）；下方为最近发布、增长动态、热度速览、历史收藏夹与采集状态；“最近发布”“增长动态”“热度速览”三处统一使用竖排卡片（封面 + 两行截断标题 + 作者/数据行 + 高亮数据行）；
+- 首页默认“最新动态”：顶部四个数据卡片（今日入库 / 播放增量 / 粉丝日增 / 待确认候选）可点击跳转（视频榜按入库或增长排序、粉丝页、候选页）；下方为最近发布、增长动态、热度速览、历史收藏夹与采集状态；“最近发布”“增长动态”“热度速览”三处统一使用竖排卡片（封面 + 两行截断标题 + 作者/数据行 + 高亮数据行），并统一为响应式网格（移动端每行 1 个、PC 每行 5 个），每处各取前 5 条；
 - 「视频」与「UP主」是两个独立入口；工具条顺序为「排序」下拉 → 时间下拉（无需 label）→ 右侧自适应搜索框（最大 320px，放大镜按钮在输入框内），三者在 PC 与移动端都保持一行；
 - 视频排序：内容效率（默认）、综合热度、发布时间、入库时间、播放/投币/收藏/评论、互动率、播放增量/播放增速；UP 排序：内容效率、互动效率、内容量、总播放、视频数、平均播放、总互动、最近发布；
 - UP 卡片显示 UP 头像（无头像时显示首字母占位）、视频数/总时长与最新粉丝数；「总播放」排序时副指标显示「平均播放」（相当于平均播放榜，主副指标对调）；UP 详情页也显示头像；

reaction_board/web/static/style.css

@@ -415,17 +415,11 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   font-size: 18px;
 }
 
-.heat-strip {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 210px;
-  gap: 10px;
-  overflow-x: auto;
-  padding-bottom: 4px;
-  scroll-snap-type: x proximity;
-  scrollbar-width: none;
-}
-.heat-strip::-webkit-scrollbar { display: none; }
+/* 统一的响应式媒体网格：移动端 1 列，PC 端 5 列。 */
+.media-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
+@media (min-width: 620px) { .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (min-width: 900px) { .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+@media (min-width: 1280px) { .media-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
 /* 统一的竖排媒体卡：图 + 两行截断标题 + 作者/数据行 + 高亮数据行。 */
 .media-card {
   position: relative;
@@ -442,7 +436,6 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
   transform: translateY(-1px);
 }
-.heat-strip > .media-card { scroll-snap-align: start; }
 .media-rank {
   position: absolute;
   top: 10px;

reaction_board/web/static/views/home.js

@@ -15,9 +15,9 @@ function statChip(label, value, { href = null, tone = "" } = {}) {
   return `<div class="live-chip ${tone}">${inner}</div>`;
 }
 
-function heatStrip(items) {
+function heatGrid(items) {
   if (!items.length) return emptyState("暂无热度数据", "完成一次快照后这里会出现榜单。");
-  return `<div class="heat-strip">
+  return `<div class="media-grid">
     ${items.map((item, index) => mediaCard(item, {
       rank: index + 1,
       meta: `${escapeHtml(item.up_name || "未知 UP")} · ${formatCount(item.metrics?.view)} 播放`,
@@ -65,7 +65,7 @@ export async function renderHome(root) {
     api("/api/overview"),
     api("/api/videos", { sort: "published", within_days: 14, limit: 5 }),
     api("/api/videos", { sort: "heat", limit: 5 }),
-    api("/api/videos", { sort: "growth", growth_days: 7, limit: 3 }),
+    api("/api/videos", { sort: "growth", growth_days: 7, limit: 5 }),
   ]);
 
   const pending = overview.counts.candidates_pending || 0;
@@ -112,7 +112,7 @@ export async function renderHome(root) {
         <a class="text-link" href="/videos?sort=published&within_days=30">查看全部</a>
       </div>
       <p class="section-note">按视频发布时间排序，与入库时间无关。</p>
-      <div class="video-list">
+      <div class="media-grid">
         ${published.items.length ? published.items.map((item) => publishedCard(item)).join("")
           : emptyState("最近 14 天没有新发布视频", "搜索发现的新视频会逐步补充。")}
       </div>
@@ -124,7 +124,7 @@ export async function renderHome(root) {
         <a class="text-link" href="/videos?sort=growth&growth_days=7">增长榜</a>
       </div>
       ${growth.available && growth.items.length
-        ? `<div class="video-list">${growth.items.map((item, index) => growthCard(item, index)).join("")}</div>`
+        ? `<div class="media-grid">${growth.items.map((item, index) => growthCard(item, index)).join("")}</div>`
         : emptyState("需要至少 2 天快照", growth.reason || "当前只有 1 个数据点，明天开始显示播放增量。")}
     </section>
 
@@ -133,7 +133,7 @@ export async function renderHome(root) {
         <h2>热度速览</h2>
         <a class="text-link" href="/videos?sort=heat">完整榜单</a>
       </div>
-      ${heatStrip(heat.items)}
+      ${heatGrid(heat.items)}
     </section>
 
     ${capacity(overview.folders || [])}