diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md index ec30dd8..4327490 100644 --- a/DEVELOPMENT.md +++ b/DEVELOPMENT.md @@ -539,7 +539,7 @@ P3 实现说明: | 页面 | 内容 | |---|---| -| 首页 | 最新动态优先:顶部四个可点击数据卡片(今日入库→视频榜按入库排序、播放增量→视频榜按 1 日增长排序、粉丝日增→粉丝页、待确认候选→候选页);下方为最近发布、增长动态、热度速览、历史收藏夹与采集状态;三处视频区块统一使用竖排媒体卡(封面 + 两行截断标题 + 作者/数据行 + 高亮数据行),热度速览为横向滑动。 | +| 首页 | 最新动态优先:顶部四个可点击数据卡片(今日入库→视频榜按入库排序、播放增量→视频榜按 1 日增长排序、粉丝日增→粉丝页、待确认候选→候选页);下方为最近发布、增长动态、热度速览、历史收藏夹与采集状态;三处视频区块统一使用竖排媒体卡(封面 + 两行截断标题 + 作者/数据行 + 高亮数据行),并统一为响应式网格:移动端每行 1 个、平板 2/3 个、PC 每行 5 个,每处各取前 5 条。 | | 视频(`/videos`) | 内容效率(默认)、综合热度、发布时间、入库时间、播放/投币/收藏/评论、互动率、播放增量、播放增速;工具条为「排序」下拉 + 时间下拉 + 右侧放大镜搜索框(一行展示),时间支持全部/7 天/30 天/90 天/1 年/年份。 | | UP主(`/ups`) | 独立入口,不再与视频混排;卡片显示 UP 头像、视频数与总时长、最新粉丝数,以及当前排序的主/副指标(「总播放」排序时副指标为「平均播放」);排序下拉含内容效率、互动效率、内容量、总播放、视频数、平均播放、总互动、最近发布;不提供按视频数筛选。 | | 数据说明(`/about`) | 数据来源与更新、发布时间/入库时间/快照日期、指标公式、时长与成熟窗口筛选、粉丝快照覆盖与已知局限;数值由 `/api/about` 动态读取。 | diff --git a/README.md b/README.md index 453e42c..46ae021 100644 --- a/README.md +++ b/README.md @@ -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 条; - 「视频」与「UP主」是两个独立入口;工具条顺序为「排序」下拉 → 时间下拉(无需 label)→ 右侧自适应搜索框(最大 320px,放大镜按钮在输入框内),三者在 PC 与移动端都保持一行; - 视频排序:内容效率(默认)、综合热度、发布时间、入库时间、播放/投币/收藏/评论、互动率、播放增量/播放增速;UP 排序:内容效率、互动效率、内容量、总播放、视频数、平均播放、总互动、最近发布; - UP 卡片显示 UP 头像(无头像时显示首字母占位)、视频数/总时长与最新粉丝数;「总播放」排序时副指标显示「平均播放」(相当于平均播放榜,主副指标对调);UP 详情页也显示头像; diff --git a/reaction_board/web/static/style.css b/reaction_board/web/static/style.css index 8cece52..4f6c92c 100644 --- a/reaction_board/web/static/style.css +++ b/reaction_board/web/static/style.css @@ -415,17 +415,11 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo font-size: 18px; } -.heat-strip { - display: grid; - grid-auto-flow: column; - grid-auto-columns: 210px; - gap: 10px; - overflow-x: auto; - padding-bottom: 4px; - scroll-snap-type: x proximity; - scrollbar-width: none; -} -.heat-strip::-webkit-scrollbar { display: none; } +/* 统一的响应式媒体网格:移动端 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)); } } +@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; @@ -442,7 +436,6 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo 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: 10px; diff --git a/reaction_board/web/static/views/home.js b/reaction_board/web/static/views/home.js index a761c76..5fea219 100644 --- a/reaction_board/web/static/views/home.js +++ b/reaction_board/web/static/views/home.js @@ -15,9 +15,9 @@ function statChip(label, value, { href = null, tone = "" } = {}) { return `
${inner}
`; } -function heatStrip(items) { +function heatGrid(items) { if (!items.length) return emptyState("暂无热度数据", "完成一次快照后这里会出现榜单。"); - return `
+ return `
${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) { 查看全部

按视频发布时间排序,与入库时间无关。

-
+
${published.items.length ? published.items.map((item) => publishedCard(item)).join("") : emptyState("最近 14 天没有新发布视频", "搜索发现的新视频会逐步补充。")}
@@ -124,7 +124,7 @@ export async function renderHome(root) { 增长榜
${growth.available && growth.items.length - ? `
${growth.items.map((item, index) => growthCard(item, index)).join("")}
` + ? `
${growth.items.map((item, index) => growthCard(item, index)).join("")}
` : emptyState("需要至少 2 天快照", growth.reason || "当前只有 1 个数据点,明天开始显示播放增量。")} @@ -133,7 +133,7 @@ export async function renderHome(root) {

热度速览

完整榜单
- ${heatStrip(heat.items)} + ${heatGrid(heat.items)} ${capacity(overview.folders || [])}