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,149 @@
+import { api } from "../api.js";
+import {
+  emptyState, cover, sectionHeader, videoCard,
+} from "../components.js";
+import {
+  escapeHtml, formatCount, formatDate, formatDelta, formatDateTime,
+  formatPercent, formatScore,
+} from "../format.js";
+
+function statChip(label, value, tone = "") {
+  return `<div class="live-chip ${tone}">
+    <span>${escapeHtml(label)}</span><strong>${value}</strong>
+  </div>`;
+}
+
+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("")}
+  </div>`;
+}
+
+function capacity(folders) {
+  if (!folders.length) return "";
+  return `<section class="panel capacity-panel">
+    ${sectionHeader("年度收藏夹")}
+    ${folders.map((folder) => `
+      <div class="capacity-row">
+        <div class="capacity-label">
+          <span>${escapeHtml(folder.title || String(folder.year))}</span>
+          <strong>${formatCount(folder.media_count)} / ${formatCount(folder.capacity)}</strong>
+        </div>
+        <div class="capacity-track"><span style="width:${Math.min(100, folder.ratio * 100)}%"
+          class="${folder.warning ? "warning" : ""}"></span></div>
+        ${folder.warning ? `<p class="warning-text">接近容量上限，请准备新建年度收藏夹。</p>` : ""}
+      </div>`).join("")}
+  </section>`;
+}
+
+export async function renderHome(root) {
+  const [overview, added, published, heat, growth] = await Promise.all([
+    api("/api/overview"),
+    api("/api/videos", { sort: "added", within_days: 7, limit: 5 }),
+    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 }),
+  ]);
+
+  const pending = overview.counts.candidates_pending || 0;
+  const fans = overview.fans;
+  const firstDay = overview.is_first_day;
+  const addedLabel = firstDay
+    ? formatCount(overview.initial_import_count)
+    : formatCount(overview.added_today);
+  const health = overview.snapshot_health || { total: 0, ok: 0, failed: 0 };
+  const addedNote = firstDay
+    ? `<p class="section-note">首次导入共 ${formatCount(overview.initial_import_count)} 条，
+       按发布时间倒序展示。后续每日增量从下一次快照开始。</p>`
+    : `<p class="section-note">按入库时间排序，展示最近 7 天新收录的视频。</p>`;
+
+  root.innerHTML = `<section class="page home-page">
+    <header class="page-head home-head">
+      <div>
+        <h1>最新动态</h1>
+        <p class="page-sub">数据 ${escapeHtml(overview.data_date || "—")} ·
+          采集 ${health.ok}/${health.total}${health.failed ? ` · 失败 ${health.failed}` : ""}</p>
+      </div>
+      <button class="icon-button" id="refresh-home" type="button" title="刷新">刷新</button>
+    </header>
+
+    <div class="live-strip">
+      ${statChip(firstDay ? "首次导入" : "今日入库", escapeHtml(addedLabel), "accent")}
+      ${statChip("播放增量", overview.view_delta_available ? formatDelta(overview.view_delta) : "—")}
+      ${statChip("粉丝日增", fans?.delta_1d === null || fans?.delta_1d === undefined ? "—" : formatDelta(fans.delta_1d))}
+      ${statChip("待确认候选", formatCount(pending), pending ? "warning" : "")}
+    </div>
+
+    ${pending ? `<a class="notice-row" href="#/candidates">
+      <strong>${formatCount(pending)} 条候选待确认</strong>
+      <span>请在 Telegram 中处理 →</span>
+    </a>` : ""}
+
+    <section class="panel">
+      <div class="section-head">
+        <h2>最新入库</h2>
+        <a class="text-link" href="#/rank?scope=video&sort=added&within_days=7">查看全部</a>
+      </div>
+      ${addedNote}
+      <div class="video-list">
+        ${added.items.length ? added.items.map((item) => videoCard(item)).join("")
+          : emptyState("最近 7 天没有新入库视频", "收藏夹同步或搜索确认后会出现在这里。")}
+      </div>
+    </section>
+
+    <section class="panel">
+      <div class="section-head">
+        <h2>最近发布</h2>
+        <a class="text-link" href="#/rank?scope=video&sort=published&within_days=14">查看全部</a>
+      </div>
+      <p class="section-note">按视频发布时间排序，与入库时间无关。</p>
+      <div class="video-list">
+        ${published.items.length ? published.items.map((item) => videoCard(item)).join("")
+          : emptyState("最近 14 天没有新发布视频", "搜索发现的新视频会逐步补充。")}
+      </div>
+    </section>
+
+    <section class="panel">
+      <div class="section-head">
+        <h2>增长动态</h2>
+        <a class="text-link" href="#/rank?scope=video&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>`
+        : emptyState("需要至少 2 天快照", growth.reason || "当前只有 1 个数据点，明天开始显示播放增量。")}
+    </section>
+
+    <section class="panel">
+      <div class="section-head">
+        <h2>热度速览</h2>
+        <a class="text-link" href="#/rank?scope=video&sort=heat">完整榜单</a>
+      </div>
+      ${heatStrip(heat.items)}
+    </section>
+
+    ${capacity(overview.folders || [])}
+
+    <section class="panel status-panel">
+      ${sectionHeader("采集状态")}
+      <div class="status-grid">
+        <div><span>快照完成</span><strong>${overview.snapshot_completed_today ? "是" : "否"}</strong></div>
+        <div><span>数据日期</span><strong>${escapeHtml(overview.data_date || "—")}</strong></div>
+        <div><span>粉丝</span><strong>${formatCount(fans?.follower)}</strong></div>
+        <div><span>7 日粉丝</span><strong>${fans?.delta_7d === null || fans?.delta_7d === undefined ? "—" : formatDelta(fans.delta_7d)}</strong></div>
+        <div><span>最近快照</span><strong>${escapeHtml(formatDateTime(overview.tasks?.snapshot?.finished_at))}</strong></div>
+        <div><span>最近发现</span><strong>${escapeHtml(formatDateTime(overview.tasks?.discovery?.finished_at))}</strong></div>
+      </div>
+      <a class="text-link" href="#/system">查看系统状态 →</a>
+    </section>
+  </section>`;
+
+  root.querySelector("#refresh-home")?.addEventListener("click", () => window.location.reload());
+}