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

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) => `
-      <a class="heat-card" href="/video/${item.aid}">
-        <span class="heat-rank">${index + 1}</span>
-        ${cover(item, "heat-thumb")}
-        <strong class="heat-title">${escapeHtml(item.title)}</strong>
-        <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("")}
+    ${items.map((item, index) => mediaCard(item, {
+      rank: index + 1,
+      meta: `${escapeHtml(item.up_name || "未知 UP")} · ${formatCount(item.metrics?.view)} 播放`,
+      highlight: `热度 ${formatScore(item.heat)} · 前 ${Math.max(0, 100 - (item.heat_percentile || 0)).toFixed(0)}%`,
+    })).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>