feat(web): unify home published/growth cards with heat-strip vertical layout

DEVELOPMENT.md

@@ -539,7 +539,7 @@ P3 实现说明：
 
 | 页面 | 内容 |
 |---|---|
-| 首页 | 最新动态优先：顶部四个可点击数据卡片（今日入库→视频榜按入库排序、播放增量→视频榜按 1 日增长排序、粉丝日增→粉丝页、待确认候选→候选页）；下方为最近发布、增长动态、热度速览、历史收藏夹与采集状态。 |
+| 首页 | 最新动态优先：顶部四个可点击数据卡片（今日入库→视频榜按入库排序、播放增量→视频榜按 1 日增长排序、粉丝日增→粉丝页、待确认候选→候选页）；下方为最近发布、增长动态、热度速览、历史收藏夹与采集状态；三处视频区块统一使用竖排媒体卡（封面 + 两行截断标题 + 作者/数据行 + 高亮数据行），热度速览为横向滑动。 |
 | 视频（`/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
 ```
 
-- 首页默认“最新动态”：顶部四个数据卡片（今日入库 / 播放增量 / 粉丝日增 / 待确认候选）可点击跳转（视频榜按入库或增长排序、粉丝页、候选页）；下方为最近发布、增长动态、热度速览、历史收藏夹与采集状态；
+- 首页默认“最新动态”：顶部四个数据卡片（今日入库 / 播放增量 / 粉丝日增 / 待确认候选）可点击跳转（视频榜按入库或增长排序、粉丝页、候选页）；下方为最近发布、增长动态、热度速览、历史收藏夹与采集状态；“最近发布”“增长动态”“热度速览”三处统一使用竖排卡片（封面 + 两行截断标题 + 作者/数据行 + 高亮数据行）；
 - 「视频」与「UP主」是两个独立入口；工具条顺序为「排序」下拉 → 时间下拉（无需 label）→ 右侧自适应搜索框（最大 320px，放大镜按钮在输入框内），三者在 PC 与移动端都保持一行；
 - 视频排序：内容效率（默认）、综合热度、发布时间、入库时间、播放/投币/收藏/评论、互动率、播放增量/播放增速；UP 排序：内容效率、互动效率、内容量、总播放、视频数、平均播放、总互动、最近发布；
 - UP 卡片显示 UP 头像（无头像时显示首字母占位）、视频数/总时长与最新粉丝数；「总播放」排序时副指标显示「平均播放」（相当于平均播放榜，主副指标对调）；UP 详情页也显示头像；

reaction_board/web/static/app.js

@@ -125,7 +125,7 @@ window.addEventListener("error", (event) => {
   const target = event.target;
   if (target instanceof HTMLImageElement) {
     target.classList.add("image-error");
-    const wrapper = target.closest(".video-thumb, .hero-cover, .heat-thumb, .candidate-thumb");
+    const wrapper = target.closest(".video-thumb, .hero-cover, .media-thumb, .candidate-thumb");
     wrapper?.classList.add("cover-placeholder");
   }
 }, true);

reaction_board/web/static/components.js

@@ -120,6 +120,16 @@ export function metricGrid(item) {
   </div>`;
 }
 
+export function mediaCard(item, { rank = null, meta = "", highlight = "" } = {}) {
+  return `<a class="media-card" href="/video/${item.aid}" data-aid="${item.aid}">
+    ${rank === null || rank === undefined ? "" : `<span class="media-rank">${escapeHtml(String(rank))}</span>`}
+    ${cover(item, "media-thumb")}
+    <strong class="media-title">${escapeHtml(item.title || "(无标题)")}</strong>
+    ${meta ? `<span class="media-meta">${meta}</span>` : ""}
+    ${highlight ? `<span class="media-highlight">${highlight}</span>` : ""}
+  </a>`;
+}
+
 export function sectionHeader(title, extra = "") {
   return `<div class="section-head"><h2>${escapeHtml(title)}</h2>${extra}</div>`;
 }

reaction_board/web/static/style.css

@@ -336,7 +336,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
 .rank-badge.rank-1 { background: var(--accent); color: var(--accent-contrast); }
 .rank-badge.rank-2 { background: var(--accent-soft); color: var(--accent-strong); }
 .rank-badge.rank-3 { background: var(--surface-3); color: var(--muted); }
-.video-thumb, .hero-cover, .heat-thumb, .candidate-thumb {
+.video-thumb, .hero-cover, .media-thumb, .candidate-thumb {
   position: relative;
   overflow: hidden;
   border-radius: 9px;
@@ -348,7 +348,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   width: 96px;
   aspect-ratio: 16 / 9;
 }
-.video-thumb img, .hero-cover img, .heat-thumb img, .candidate-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.video-thumb img, .hero-cover img, .media-thumb img, .candidate-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
 .cover-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 10px; }
 .cover-placeholder img.image-error { opacity: 0; }
 .video-card-body { grid-column: 3; grid-row: 1; min-width: 0; }
@@ -426,7 +426,8 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   scrollbar-width: none;
 }
 .heat-strip::-webkit-scrollbar { display: none; }
-.heat-card {
+/* 统一的竖排媒体卡：图 + 两行截断标题 + 作者/数据行 + 高亮数据行。 */
+.media-card {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -435,12 +436,17 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   border: 1px solid var(--border);
   border-radius: 13px;
   background: var(--surface);
-  scroll-snap-align: start;
+  transition: border-color 0.15s, transform 0.15s;
 }
-.heat-rank {
+.media-card:hover {
+  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: 14px;
+  top: 10px;
-  left: 14px;
+  left: 10px;
   z-index: 1;
   display: grid;
   place-items: center;
@@ -452,17 +458,18 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   font-size: 11px;
   font-weight: 700;
 }
-.heat-thumb { width: 100%; aspect-ratio: 16 / 9; }
+.media-thumb { width: 100%; aspect-ratio: 16 / 9; }
-.heat-title {
+.media-title {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   font-size: 12.5px;
   line-height: 1.35;
+  font-weight: 650;
 }
-.heat-meta, .heat-score { color: var(--muted); font-size: 10.5px; }
+.media-meta { color: var(--muted); font-size: 10.5px; }
-.heat-score { color: var(--accent); }
+.media-highlight { color: var(--accent); font-size: 10.5px; font-weight: 650; }
 
 .capacity-row { padding: 7px 0; }
 .capacity-label { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }

reaction_board/web/static/views/home.js

@@ -1,10 +1,10 @@
 import { api } from "../api.js";
 import {
-  emptyState, cover, sectionHeader, videoCard,
+  emptyState, mediaCard, sectionHeader,
 } from "../components.js";
 import {
   escapeAttr, escapeHtml, formatCount, formatDate, formatDelta, formatDateTime,
-  formatPercent, formatScore,
+  formatDuration, formatPercent, formatScore,
 } from "../format.js";
 
 function statChip(label, value, { href = null, tone = "" } = {}) {
@@ -18,17 +18,31 @@ function statChip(label, value, { href = null, tone = "" } = {}) {
 function heatStrip(items) {
   if (!items.length) return emptyState("暂无热度数据", "完成一次快照后这里会出现榜单。");
   return `<div class="heat-strip">
-    ${items.map((item, index) => `
+    ${items.map((item, index) => mediaCard(item, {
-      <a class="heat-card" href="/video/${item.aid}">
+      rank: index + 1,
-        <span class="heat-rank">${index + 1}</span>
+      meta: `${escapeHtml(item.up_name || "未知 UP")} · ${formatCount(item.metrics?.view)} 播放`,
-        ${cover(item, "heat-thumb")}
+      highlight: `热度 ${formatScore(item.heat)} · 前 ${Math.max(0, 100 - (item.heat_percentile || 0)).toFixed(0)}%`,
-        <strong class="heat-title">${escapeHtml(item.title)}</strong>
+    })).join("")}
-        <span class="heat-meta">${escapeHtml(item.up_name || "未知 UP")} · ${formatCount(item.metrics?.view)} 播放</span>
-        <span class="heat-score">热度 ${formatScore(item.heat)} · 前 ${Math.max(0, 100 - (item.heat_percentile || 0)).toFixed(0)}%</span>
-      </a>`).join("")}
   </div>`;
 }
 
+function publishedCard(item) {
+  return mediaCard(item, {
+    meta: `${escapeHtml(item.up_name || "未知 UP")} · ${escapeHtml(formatDate(item.pubdate))} · ${escapeHtml(formatDuration(item.duration))}`,
+    highlight: `${formatCount(item.metrics?.view)} 播放 · 互动 ${formatPercent(item.interaction_rate)}`,
+  });
+}
+
+function growthCard(item, index) {
+  const delta = item.growth?.delta;
+  const deltaText = delta === null || delta === undefined ? "" : ` · ${formatDelta(delta)}`;
+  return mediaCard(item, {
+    rank: index + 1,
+    meta: `${escapeHtml(item.up_name || "未知 UP")} · ${escapeHtml(formatDate(item.pubdate))} · ${escapeHtml(formatDuration(item.duration))}`,
+    highlight: `${formatCount(item.metrics?.view)} 播放${deltaText}`,
+  });
+}
+
 function capacity(folders) {
   if (!folders.length) return "";
   return `<section class="panel capacity-panel">
@@ -99,7 +113,7 @@ export async function renderHome(root) {
       </div>
       <p class="section-note">按视频发布时间排序，与入库时间无关。</p>
       <div class="video-list">
-        ${published.items.length ? published.items.map((item) => videoCard(item)).join("")
+        ${published.items.length ? published.items.map((item) => publishedCard(item)).join("")
           : emptyState("最近 14 天没有新发布视频", "搜索发现的新视频会逐步补充。")}
       </div>
     </section>
@@ -110,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) => videoCard(item, { rank: index + 1 })).join("")}</div>`
+        ? `<div class="video-list">${growth.items.map((item, index) => growthCard(item, index)).join("")}</div>`
         : emptyState("需要至少 2 天快照", growth.reason || "当前只有 1 个数据点，明天开始显示播放增量。")}
     </section>