feat(web): split video and up rankings and add about page

reaction_board/web/static/components.js

@@ -19,9 +19,16 @@ export function rankBadge(rank) {
   return `<span class="rank-badge${top}">${rank}</span>`;
 }
 
-export function videoCard(item, { rank = null, primary = "view", showStatus = false } = {}) {
+export function videoCard(item, {
+  rank = null, primary = "view", primaryLabel = "", primaryText = null,
+  showStatus = false,
+} = {}) {
   const metrics = item.metrics || {};
-  const primaryValue = metrics[primary];
+  const hasMetric = Object.prototype.hasOwnProperty.call(metrics, primary);
+  const primaryValue = primaryText !== null
+    ? primaryText
+    : (hasMetric ? metrics[primary] : item[primary]);
+  const label = primaryLabel || metricLabel(primary);
   const growth = item.growth;
   const delta = growth?.available ? growth.delta : null;
   const title = escapeHtml(item.title || "(无标题)");
@@ -45,12 +52,9 @@ export function videoCard(item, { rank = null, primary = "view", showStatus = fa
         </div>
         <div class="video-stats">
           <span class="primary-stat">
-            <b>${formatCount(primaryValue)}</b><small>${escapeHtml(metricLabel(primary))}</small>
+            <b>${escapeHtml(primaryValue ?? "—")}</b><small>${escapeHtml(label)}</small>
           </span>
           ${delta !== null ? `<span class="delta ${delta >= 0 ? "up" : "down"}">${formatDelta(delta)}</span>` : ""}
-          <span class="secondary-stat">赞 ${formatCount(metrics.like)}</span>
-          <span class="secondary-stat optional">币 ${formatCount(metrics.coin)}</span>
-          <span class="secondary-stat optional">藏 ${formatCount(metrics.favorite)}</span>
           <span class="secondary-stat">互动 ${formatPercent(item.interaction_rate)}</span>
         </div>
       </div>
@@ -58,12 +62,16 @@ export function videoCard(item, { rank = null, primary = "view", showStatus = fa
     </a>`;
 }
 
-export function upCard(item, { rank = null } = {}) {
+export function upCard(item, {
+  rank = null, primary = "efficiency", primaryLabel = "播放/小时", primaryText = null,
+} = {}) {
   const best = item.best_video || {};
   const displayCover = cover(
     { title: best.title || item.up_name, cover: best.cover },
     "video-thumb up-thumb",
   );
+  const value = primaryText !== null ? primaryText : item[primary];
+  const hours = item.content_hours;
   return `
     <a class="up-card" href="/up/${item.up_mid}">
       ${rankBadge(rank)}
@@ -72,12 +80,11 @@ export function upCard(item, { rank = null } = {}) {
         <h3 class="video-title">${escapeHtml(item.up_name || `UP ${item.up_mid}`)}</h3>
         <div class="video-meta">
           <span>${formatNumber(item.video_count)} 条视频</span>
-          <span>均播 ${formatCount(item.avg_views)}</span>
+          <span>${hours === null || hours === undefined ? "时长未知" : `${formatNumber(hours)} 小时`}</span>
         </div>
         <div class="video-stats">
-          <span class="primary-stat"><b>${formatCount(item.total_views)}</b><small>总播放</small></span>
-          <span class="secondary-stat">总互动 ${formatCount(item.total_interactions)}</span>
-          <span class="secondary-stat">均互动 ${formatPercent(item.avg_interaction)}</span>
+          <span class="primary-stat"><b>${escapeHtml(value ?? "—")}</b><small>${escapeHtml(primaryLabel)}</small></span>
+          <span class="secondary-stat">总播放 ${formatCount(item.total_views)}</span>
         </div>
       </div>
       <span class="card-arrow" aria-hidden="true">›</span>