157 lines
6.7 KiB
JavaScript
157 lines
6.7 KiB
JavaScript
import { api } from "../api.js";
|
|
import {
|
|
emptyState, mediaCard, sectionHeader,
|
|
} from "../components.js";
|
|
import {
|
|
escapeAttr, escapeHtml, formatCount, formatDate, formatDelta, formatDateTime,
|
|
formatDuration, formatPercent, formatScore,
|
|
} from "../format.js";
|
|
|
|
function statChip(label, value, { href = null, tone = "" } = {}) {
|
|
const inner = `<span>${escapeHtml(label)}</span><strong>${value}</strong>`;
|
|
if (href) {
|
|
return `<a class="live-chip ${tone}" href="${escapeAttr(href)}">${inner}</a>`;
|
|
}
|
|
return `<div class="live-chip ${tone}">${inner}</div>`;
|
|
}
|
|
|
|
function heatGrid(items) {
|
|
if (!items.length) return emptyState("暂无热度数据", "完成一次快照后这里会出现榜单。");
|
|
return `<div class="media-grid">
|
|
${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">
|
|
${sectionHeader("历史收藏夹")}
|
|
<p class="section-note">系统已不再同步收藏夹；下列统计仅保留历史来源。</p>
|
|
${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>
|
|
</div>`).join("")}
|
|
</section>`;
|
|
}
|
|
|
|
export async function renderHome(root) {
|
|
const [overview, published, heat, growth] = await Promise.all([
|
|
api("/api/overview"),
|
|
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: 5 }),
|
|
]);
|
|
|
|
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 };
|
|
|
|
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), {
|
|
href: "/videos?sort=added&within_days=7", tone: "accent",
|
|
})}
|
|
${statChip("播放增量", overview.view_delta_available ? formatDelta(overview.view_delta) : "—", {
|
|
href: "/videos?sort=growth&growth_days=1",
|
|
})}
|
|
${statChip("粉丝日增", fans?.delta_1d === null || fans?.delta_1d === undefined ? "—" : formatDelta(fans.delta_1d), {
|
|
href: "/fans",
|
|
})}
|
|
${statChip("待确认候选", formatCount(pending), {
|
|
href: "/candidates", tone: 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="/videos?sort=published&within_days=30">查看全部</a>
|
|
</div>
|
|
<p class="section-note">按视频发布时间排序，与入库时间无关。</p>
|
|
<div class="media-grid">
|
|
${published.items.length ? published.items.map((item) => publishedCard(item)).join("")
|
|
: emptyState("最近 14 天没有新发布视频", "搜索发现的新视频会逐步补充。")}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<div class="section-head">
|
|
<h2>增长动态</h2>
|
|
<a class="text-link" href="/videos?sort=growth&growth_days=7">增长榜</a>
|
|
</div>
|
|
${growth.available && growth.items.length
|
|
? `<div class="media-grid">${growth.items.map((item, index) => growthCard(item, index)).join("")}</div>`
|
|
: emptyState("需要至少 2 天快照", growth.reason || "当前只有 1 个数据点，明天开始显示播放增量。")}
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<div class="section-head">
|
|
<h2>热度速览</h2>
|
|
<a class="text-link" href="/videos?sort=heat">完整榜单</a>
|
|
</div>
|
|
${heatGrid(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());
|
|
}
|