feat(web): unify home published/growth cards with heat-strip vertical layout
This commit is contained in:
kairee committed
1 parent
59fa38b6e3
commit
e40905da24
6 files changed
+57
-26
No files matched your search
@@ -125,7 +125,7 @@ window.addEventListener("error", (event) => {
|
||||
const target = event.target;
|
||||
if (target instanceof HTMLImageElement) {
|
||||
target.classList.add("image-error");
|
||||
const wrapper = target.closest(".video-thumb, .hero-cover, .heat-thumb, .candidate-thumb");
|
||||
const wrapper = target.closest(".video-thumb, .hero-cover, .media-thumb, .candidate-thumb");
|
||||
wrapper?.classList.add("cover-placeholder");
|
||||
}
|
||||
}, true);
|
||||
|
||||
@@ -120,6 +120,16 @@ export function metricGrid(item) {
|
||||
</div>`;
|
||||
}
|
||||
|
||||
export function mediaCard(item, { rank = null, meta = "", highlight = "" } = {}) {
|
||||
return `<a class="media-card" href="/video/${item.aid}" data-aid="${item.aid}">
|
||||
${rank === null || rank === undefined ? "" : `<span class="media-rank">${escapeHtml(String(rank))}</span>`}
|
||||
${cover(item, "media-thumb")}
|
||||
<strong class="media-title">${escapeHtml(item.title || "(无标题)")}</strong>
|
||||
${meta ? `<span class="media-meta">${meta}</span>` : ""}
|
||||
${highlight ? `<span class="media-highlight">${highlight}</span>` : ""}
|
||||
</a>`;
|
||||
}
|
||||
|
||||
export function sectionHeader(title, extra = "") {
|
||||
return `<div class="section-head"><h2>${escapeHtml(title)}</h2>${extra}</div>`;
|
||||
}
|
||||
|
||||
@@ -336,7 +336,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
||||
.rank-badge.rank-1 { background: var(--accent); color: var(--accent-contrast); }
|
||||
.rank-badge.rank-2 { background: var(--accent-soft); color: var(--accent-strong); }
|
||||
.rank-badge.rank-3 { background: var(--surface-3); color: var(--muted); }
|
||||
.video-thumb, .hero-cover, .heat-thumb, .candidate-thumb {
|
||||
.video-thumb, .hero-cover, .media-thumb, .candidate-thumb {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 9px;
|
||||
@@ -348,7 +348,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
||||
width: 96px;
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
.video-thumb img, .hero-cover img, .heat-thumb img, .candidate-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.video-thumb img, .hero-cover img, .media-thumb img, .candidate-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.cover-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 10px; }
|
||||
.cover-placeholder img.image-error { opacity: 0; }
|
||||
.video-card-body { grid-column: 3; grid-row: 1; min-width: 0; }
|
||||
@@ -426,7 +426,8 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.heat-strip::-webkit-scrollbar { display: none; }
|
||||
.heat-card {
|
||||
/* 统一的竖排媒体卡：图 + 两行截断标题 + 作者/数据行 + 高亮数据行。 */
|
||||
.media-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -435,12 +436,17 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 13px;
|
||||
background: var(--surface);
|
||||
scroll-snap-align: start;
|
||||
transition: border-color 0.15s, transform 0.15s;
|
||||
}
|
||||
.heat-rank {
|
||||
.media-card:hover {
|
||||
border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.heat-strip > .media-card { scroll-snap-align: start; }
|
||||
.media-rank {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 14px;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
@@ -452,17 +458,18 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.heat-thumb { width: 100%; aspect-ratio: 16 / 9; }
|
||||
.heat-title {
|
||||
.media-thumb { width: 100%; aspect-ratio: 16 / 9; }
|
||||
.media-title {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.35;
|
||||
font-weight: 650;
|
||||
}
|
||||
.heat-meta, .heat-score { color: var(--muted); font-size: 10.5px; }
|
||||
.heat-score { color: var(--accent); }
|
||||
.media-meta { color: var(--muted); font-size: 10.5px; }
|
||||
.media-highlight { color: var(--accent); font-size: 10.5px; font-weight: 650; }
|
||||
|
||||
.capacity-row { padding: 7px 0; }
|
||||
.capacity-label { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { api } from "../api.js";
|
||||
import {
|
||||
emptyState, cover, sectionHeader, videoCard,
|
||||
emptyState, mediaCard, sectionHeader,
|
||||
} from "../components.js";
|
||||
import {
|
||||
escapeAttr, escapeHtml, formatCount, formatDate, formatDelta, formatDateTime,
|
||||
formatPercent, formatScore,
|
||||
formatDuration, formatPercent, formatScore,
|
||||
} from "../format.js";
|
||||
|
||||
function statChip(label, value, { href = null, tone = "" } = {}) {
|
||||
@@ -18,17 +18,31 @@ function statChip(label, value, { href = null, tone = "" } = {}) {
|
||||
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("")}
|
||||
${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">
|
||||
@@ -99,7 +113,7 @@ export async function renderHome(root) {
|
||||
</div>
|
||||
<p class="section-note">按视频发布时间排序，与入库时间无关。</p>
|
||||
<div class="video-list">
|
||||
${published.items.length ? published.items.map((item) => videoCard(item)).join("")
|
||||
${published.items.length ? published.items.map((item) => publishedCard(item)).join("")
|
||||
: emptyState("最近 14 天没有新发布视频", "搜索发现的新视频会逐步补充。")}
|
||||
</div>
|
||||
</section>
|
||||
@@ -110,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) => videoCard(item, { rank: index + 1 })).join("")}</div>`
|
||||
? `<div class="video-list">${growth.items.map((item, index) => growthCard(item, index)).join("")}</div>`
|
||||
: emptyState("需要至少 2 天快照", growth.reason || "当前只有 1 个数据点，明天开始显示播放增量。")}
|
||||
</section>
|
||||
|
||||
|
||||
Reference in new issue
Block a user