feat(web): home media grid 2-up mobile / 3-up PC, 6 items, drop folder panel

This commit is contained in:
kairee committed 2026-11-01 17:30:52 +08:00
1 parent b9c77ab7b8
commit 14a4cab48b
5 files changed
+8 -47

No files matched your search

+2 -22
View File
@@ -415,11 +415,9 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
font-size: 18px;
}
/* 统一的响应式媒体网格:移动端 1 列,PC 端 5 列。 */
.media-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 620px) { .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 统一的响应式媒体网格:移动端 2 列(图片自动缩放),PC 端 3 列。 */
.media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .media-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* 统一的竖排媒体卡:图 + 两行截断标题 + 作者/数据行 + 高亮数据行。 */
.media-card {
position: relative;
@@ -464,24 +462,6 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
.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; }
.capacity-label strong { color: var(--muted); font-weight: 600; }
.capacity-track {
height: 7px;
margin-top: 6px;
overflow: hidden;
border-radius: 999px;
background: var(--surface-2);
}
.capacity-track span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--blue), var(--accent));
}
.capacity-track span.warning { background: linear-gradient(90deg, var(--warning), var(--danger)); }
.status-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
+3 -22
View File
@@ -43,29 +43,12 @@ function growthCard(item, index) {
});
}
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 }),
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 pending = overview.counts.candidates_pending || 0;
@@ -136,8 +119,6 @@ export async function renderHome(root) {
${heatGrid(heat.items)}
</section>
${capacity(overview.folders || [])}
<section class="panel status-panel">
${sectionHeader("采集状态")}
<div class="status-grid">