feat(web): home media sections use 5-up PC / 1-up mobile grid, growth top5

This commit is contained in:
kairee committed 2026-11-01 17:27:10 +08:00
1 parent 1bb5718328
commit e00331c4c6
4 files changed
+13 -20

No files matched your search

+6 -6
View File
@@ -15,9 +15,9 @@ function statChip(label, value, { href = null, tone = "" } = {}) {
return `<div class="live-chip ${tone}">${inner}</div>`;
}
function heatStrip(items) {
function heatGrid(items) {
if (!items.length) return emptyState("暂无热度数据", "完成一次快照后这里会出现榜单。");
return `<div class="heat-strip">
return `<div class="media-grid">
${items.map((item, index) => mediaCard(item, {
rank: index + 1,
meta: `${escapeHtml(item.up_name || "未知 UP")} · ${formatCount(item.metrics?.view)} 播放`,
@@ -65,7 +65,7 @@ export async function renderHome(root) {
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: 3 }),
api("/api/videos", { sort: "growth", growth_days: 7, limit: 5 }),
]);
const pending = overview.counts.candidates_pending || 0;
@@ -112,7 +112,7 @@ export async function renderHome(root) {
<a class="text-link" href="/videos?sort=published&within_days=30">查看全部</a>
</div>
<p class="section-note">按视频发布时间排序,与入库时间无关。</p>
<div class="video-list">
<div class="media-grid">
${published.items.length ? published.items.map((item) => publishedCard(item)).join("")
: emptyState("最近 14 天没有新发布视频", "搜索发现的新视频会逐步补充。")}
</div>
@@ -124,7 +124,7 @@ export async function renderHome(root) {
<a class="text-link" href="/videos?sort=growth&growth_days=7">增长榜</a>
</div>
${growth.available && growth.items.length
? `<div class="video-list">${growth.items.map((item, index) => growthCard(item, index)).join("")}</div>`
? `<div class="media-grid">${growth.items.map((item, index) => growthCard(item, index)).join("")}</div>`
: emptyState("需要至少 2 天快照", growth.reason || "当前只有 1 个数据点,明天开始显示播放增量。")}
</section>
@@ -133,7 +133,7 @@ export async function renderHome(root) {
<h2>热度速览</h2>
<a class="text-link" href="/videos?sort=heat">完整榜单</a>
</div>
${heatStrip(heat.items)}
${heatGrid(heat.items)}
</section>
${capacity(overview.folders || [])}