114 lines
4.6 KiB
JavaScript
114 lines
4.6 KiB
JavaScript
import { api } from "../api.js";
|
|
import { emptyState, mediaCard } from "../components.js";
|
|
import {
|
|
escapeAttr, escapeHtml, formatCount, formatDate, formatDelta,
|
|
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}`,
|
|
});
|
|
}
|
|
|
|
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: 6 }),
|
|
api("/api/videos", { sort: "heat", limit: 6 }),
|
|
api("/api/videos", { sort: "growth", growth_days: 7, limit: 6 }),
|
|
]);
|
|
|
|
const fans = overview.fans;
|
|
const firstDay = overview.is_first_day;
|
|
const addedLabel = firstDay
|
|
? formatCount(overview.initial_import_count)
|
|
: formatCount(overview.added_today);
|
|
const activeCount = overview.counts?.active || 0;
|
|
|
|
root.innerHTML = `<section class="page home-page">
|
|
<header class="page-head home-head">
|
|
<div>
|
|
<h1>最新动态</h1>
|
|
<p class="page-sub">收录视频 ${formatCount(activeCount)}</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("7 日粉丝变化", fans?.delta_7d === null || fans?.delta_7d === undefined ? "—" : formatDelta(fans.delta_7d), {
|
|
href: "/fans",
|
|
})}
|
|
${statChip("数据日期", escapeHtml(overview.data_date || "—"))}
|
|
</div>
|
|
|
|
<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>
|
|
</section>`;
|
|
|
|
root.querySelector("#refresh-home")?.addEventListener("click", () => window.location.reload());
|
|
}
|