feat(web): home media grid 2-up mobile / 3-up PC, 6 items, drop folder panel
This commit is contained in:
1 parent
b9c77ab7b8
commit
14a4cab48b
5 files changed
+8
-47
No files matched your search
+1
-1
@@ -539,7 +539,7 @@ P3 实现说明:
|
||||
|
||||
| 页面 | 内容 |
|
||||
|---|---|
|
||||
| 首页 | 最新动态优先:顶部四个可点击数据卡片(今日入库→视频榜按入库排序、播放增量→视频榜按 1 日增长排序、粉丝日增→粉丝页、待确认候选→候选页);下方为最近发布、增长动态、热度速览、历史收藏夹与采集状态;三处视频区块统一使用竖排媒体卡(封面 + 两行截断标题 + 作者/数据行 + 高亮数据行),并统一为响应式网格:移动端每行 1 个、平板 2/3 个、PC 每行 5 个,每处各取前 5 条。 |
|
||||
| 首页 | 最新动态优先:顶部四个可点击数据卡片(今日入库→视频榜按入库排序、播放增量→视频榜按 1 日增长排序、粉丝日增→粉丝页、待确认候选→候选页);下方为最近发布、增长动态、热度速览与采集状态;三处视频区块统一使用竖排媒体卡(封面 + 两行截断标题 + 作者/数据行 + 高亮数据行),并统一为响应式网格:移动端每行 2 个、PC 每行 3 个,每处各取前 6 条。 |
|
||||
| 视频(`/videos`) | 内容效率(默认)、综合热度、发布时间、入库时间、播放/投币/收藏/评论、互动率、播放增量、播放增速;工具条为「排序」下拉 + 时间下拉 + 右侧放大镜搜索框(一行展示),时间支持全部/7 天/30 天/90 天/1 年/年份。 |
|
||||
| UP主(`/ups`) | 独立入口,不再与视频混排;卡片显示 UP 头像、视频数与总时长、最新粉丝数,以及当前排序的主/副指标(「总播放」排序时副指标为「平均播放」);排序下拉含内容效率、互动效率、内容量、总播放、视频数、平均播放、总互动、最近发布;不提供按视频数筛选。 |
|
||||
| 数据说明(`/about`) | 数据来源与更新、发布时间/入库时间/快照日期、指标公式、时长与成熟窗口筛选、粉丝快照覆盖与已知局限;数值由 `/api/about` 动态读取。 |
|
||||
|
||||
@@ -166,7 +166,7 @@ uv run python tools/seed_preview_db.py --days 7
|
||||
uv run python app.py serve --preview --config data/preview/config.json
|
||||
```
|
||||
|
||||
- 首页默认“最新动态”:顶部四个数据卡片(今日入库 / 播放增量 / 粉丝日增 / 待确认候选)可点击跳转(视频榜按入库或增长排序、粉丝页、候选页);下方为最近发布、增长动态、热度速览、历史收藏夹与采集状态;“最近发布”“增长动态”“热度速览”三处统一使用竖排卡片(封面 + 两行截断标题 + 作者/数据行 + 高亮数据行),并统一为响应式网格(移动端每行 1 个、PC 每行 5 个),每处各取前 5 条;
|
||||
- 首页默认“最新动态”:顶部四个数据卡片(今日入库 / 播放增量 / 粉丝日增 / 待确认候选)可点击跳转(视频榜按入库或增长排序、粉丝页、候选页);下方为最近发布、增长动态、热度速览与采集状态;“最近发布”“增长动态”“热度速览”三处统一使用竖排卡片(封面 + 两行截断标题 + 作者/数据行 + 高亮数据行),并统一为响应式网格(移动端每行 2 个、PC 每行 3 个),每处各取前 6 条;
|
||||
- 「视频」与「UP主」是两个独立入口;工具条顺序为「排序」下拉 → 时间下拉(无需 label)→ 右侧自适应搜索框(最大 320px,放大镜按钮在输入框内),三者在 PC 与移动端都保持一行;
|
||||
- 视频排序:内容效率(默认)、综合热度、发布时间、入库时间、播放/投币/收藏/评论、互动率、播放增量/播放增速;UP 排序:内容效率、互动效率、内容量、总播放、视频数、平均播放、总互动、最近发布;
|
||||
- UP 卡片显示 UP 头像(无头像时显示首字母占位)、视频数/总时长与最新粉丝数;「总播放」排序时副指标显示「平均播放」(相当于平均播放榜,主副指标对调);UP 详情页也显示头像;
|
||||
|
||||
+1
-1
@@ -701,7 +701,7 @@ UP 内容效率 = EB 收缩后的 Σview / Σ内容小时
|
||||
|
||||
| 页面 | 内容 |
|
||||
|---|---|
|
||||
| 首页 | 最新动态优先:顶部四个可点击数据卡片(今日入库 / 播放增量 / 粉丝日增 / 待确认候选)跳转对应页面;下方为最近发布、增长动态、热度速览、历史收藏夹、采集状态 |
|
||||
| 首页 | 最新动态优先:顶部四个可点击数据卡片(今日入库 / 播放增量 / 粉丝日增 / 待确认候选)跳转对应页面;下方为最近发布、增长动态、热度速览与采集状态;三处视频区块统一竖排卡片(移动端每行 2 个、PC 每行 3 个),每处取前 6 条 |
|
||||
| **视频** | 排序下拉:内容效率(默认)/综合热度/发布时间/入库时间/播放/投币/收藏/评论/互动率/播放增量/播放增速;时间下拉:全部/7 天/30 天/90 天/1 年/年份;搜索框约 230px;不再按收藏夹过滤 |
|
||||
| **UP主** | 独立入口;排序下拉:内容效率/互动效率/内容量/总播放/视频数/平均播放/总互动/最近发布;时间下拉同上;不按视频数筛选 |
|
||||
| 工具条 | 顺序为「排序」(带 label)→ 时间(无 label)→ 右侧自适应搜索框(最大 320px,放大镜按钮内嵌),gap 10px,PC 与移动均一行 |
|
||||
|
||||
@@ -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));
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in new issue
Block a user