feat(web): add mobile-first read-only dashboard frontend

2026-10-31 23:46:55 +08:00
1 parent 257fbe009b
commit cbba405271
@@ -0,0 +1,124 @@
+import { api } from "../api.js";
+import {
+  badge, cover, emptyState, metricChips, metricGrid, sectionHeader, videoCard,
+} from "../components.js";
+import { lineChart, emptyChart } from "../charts.js";
+import {
+  escapeAttr, escapeHtml, formatCount, formatDate, formatDelta,
+  formatDuration, formatPercent, formatScore, metricLabel, statusLabel,
+} from "../format.js";
+import { replaceQuery } from "../router.js";
+
+const METRICS = ["view", "like", "coin", "favorite", "share", "reply", "danmaku"];
+const RANGES = [["7", "7 天"], ["30", "30 天"], ["90", "90 天"], ["all", "全部"]];
+
+function snapshotTable(points) {
+  if (!points.length) return emptyState("暂无快照", "该视频还没有成功采集的数据。");
+  return `<div class="table-wrap">
+    <table class="data-table">
+      <thead><tr><th>日期</th>${METRICS.map((metric) => `<th>${metricLabel(metric)}</th>`).join("")}<th>状态</th></tr></thead>
+      <tbody>
+        ${points.slice().reverse().map((point) => `
+          <tr class="${point.ok ? "" : "failed-row"}">
+            <td>${escapeHtml(point.stat_date)}</td>
+            ${METRICS.map((metric) => `<td>${point.ok ? formatCount(point[metric]) : "—"}</td>`).join("")}
+            <td>${point.ok ? "成功" : `<span class="danger">失败</span>`}</td>
+          </tr>`).join("")}
+      </tbody>
+    </table>
+  </div>`;
+}
+
+export async function renderVideo(root, { params, query }) {
+  const aid = Number(params[0]);
+  const metric = METRICS.includes(query.get("metric")) ? query.get("metric") : "view";
+  const range = query.get("range") || "30";
+  const trendDays = range === "all" ? "all" : range;
+  const [detail, trend] = await Promise.all([
+    api(`/api/videos/${aid}`),
+    api(`/api/videos/${aid}/trend`, { range: trendDays }),
+  ]);
+  const up = detail.up_mid ? await api(`/api/ups/${detail.up_mid}`) : null;
+  const samples = detail.snapshot_count || 0;
+  const others = up?.videos?.filter((item) => item.aid !== aid).slice(0, 5) || [];
+
+  root.innerHTML = `<section class="page video-page">
+    <header class="page-head">
+      <a class="back-link" href="#/rank?scope=video&sort=heat">← 返回榜单</a>
+      <div class="head-actions">
+        ${detail.url ? `<a class="button ghost" href="${escapeAttr(detail.url)}" target="_blank" rel="noreferrer">打开 B 站</a>` : ""}
+      </div>
+    </header>
+
+    <div class="detail-hero">
+      ${cover(detail, "hero-cover")}
+      <div class="detail-hero-body">
+        <h1>${escapeHtml(detail.title)}</h1>
+        <div class="detail-meta">
+          ${detail.up_mid ? `<a class="inline-link" href="#/up/${detail.up_mid}">${escapeHtml(detail.up_name || "未知 UP")}</a>` : escapeHtml(detail.up_name || "未知 UP")}
+          <span>${escapeHtml(formatDate(detail.pubdate))}</span>
+          <span>${escapeHtml(formatDuration(detail.duration))}</span>
+          ${detail.folder_title ? badge(detail.folder_title) : ""}
+          ${badge(statusLabel(detail.status), `status-${detail.status}`)}
+          ${samples < 2 ? badge("样本不足", "warning") : ""}
+        </div>
+        ${detail.blacklisted ? `<p class="section-note warning-text">该 UP 在黑名单中；黑名单只影响未来发现，不影响当前视频追踪。</p>` : ""}
+      </div>
+    </div>
+
+    ${metricGrid(detail)}
+
+    <div class="mini-stats">
+      <div><span>互动率</span><strong>${formatPercent(detail.interaction_rate)}</strong></div>
+      <div><span>综合热度</span><strong>${formatScore(detail.heat)}</strong></div>
+      <div><span>全库百分位</span><strong>${detail.heat_percentile === null || detail.heat_percentile === undefined ? "—" : `前 ${Math.max(0, 100 - detail.heat_percentile).toFixed(0)}%`}</strong></div>
+      <div><span>播放日增</span><strong>${detail.growth?.available ? formatDelta(detail.growth.delta) : "—"}</strong></div>
+      <div><span>快照数</span><strong>${samples}</strong></div>
+      <div><span>最近快照</span><strong>${escapeHtml(detail.snapshot_date || "—")}</strong></div>
+    </div>
+
+    <section class="panel chart-panel">
+      ${sectionHeader("七项趋势")}
+      <div class="chip-row scroll-x">${metricChips(METRICS, metric)}</div>
+      <div class="chip-row scroll-x range-row">
+        ${RANGES.map(([value, label]) => `<button type="button"
+          class="chip${range === value ? " active" : ""}" data-range="${value}">${label}</button>`).join("")}
+      </div>
+      ${trend.available ? `<div class="chart" id="video-trend"></div>` : emptyState("暂无趋势数据", "该视频还没有成功快照。")}
+      ${!trend.available ? "" : `<p class="section-note">缺失日期会断开，不插值；失败快照按缺失处理。</p>`}
+    </section>
+
+    <section class="panel">
+      ${sectionHeader("快照记录")}
+      ${snapshotTable(trend.points || [])}
+    </section>
+
+    ${up ? `<section class="panel">
+      <div class="section-head">
+        <h2>该 UP 的其他视频</h2>
+        <a class="text-link" href="#/up/${detail.up_mid}">查看 UP 页 →</a>
+      </div>
+      <div class="video-list">
+        ${others.length ? others.map((item) => videoCard(item)).join("") : emptyState("没有其他视频")}
+      </div>
+    </section>` : ""}
+  </section>`;
+
+  root.querySelectorAll("[data-metric]").forEach((button) => button.addEventListener("click", () => {
+    replaceQuery({ metric: button.dataset.metric });
+  }));
+  root.querySelectorAll("[data-range]").forEach((button) => button.addEventListener("click", () => {
+    replaceQuery({ range: button.dataset.range });
+  }));
+
+  const chartElement = root.querySelector("#video-trend");
+  if (chartElement) {
+    lineChart(chartElement, {
+      dates: trend.dates || [],
+      values: trend.series?.[metric] || [],
+      name: metricLabel(metric),
+      color: metric === "view" ? "#fb7299" : "#00aeec",
+      scale: true,
+    });
+  }
+}