From 85b0f625a99ba5fb30027c668c016fd893e89c4c Mon Sep 17 00:00:00 2001 From: kaireewu Date: Sun, 1 Nov 2026 17:38:30 +0800 Subject: [PATCH] feat(web): clean public home header (data date, 7d fans, video count), drop status panel --- DEVELOPMENT.md | 2 +- README.md | 2 +- project.md | 2 +- reaction_board/web/static/style.css | 1 - reaction_board/web/static/views/home.js | 36 +++++-------------------- 5 files changed, 9 insertions(+), 34 deletions(-) diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md index 5f48ed5..04b1289 100644 --- a/DEVELOPMENT.md +++ b/DEVELOPMENT.md @@ -539,7 +539,7 @@ P3 实现说明： | 页面 | 内容 | |---|---| -| 首页 | 最新动态优先：顶部四个可点击数据卡片（今日入库→视频榜按入库排序、播放增量→视频榜按 1 日增长排序、粉丝日增→粉丝页、待确认候选→候选页）；下方为最近发布、增长动态、热度速览与采集状态；三处视频区块统一使用竖排媒体卡（封面 + 两行截断标题 + 作者/数据行 + 高亮数据行），并统一为响应式网格：移动端每行 2 个、PC 每行 3 个，每处各取前 6 条。 | +| 首页 | 最新动态优先：标题下显示「收录视频 N」；顶部四个数据卡片为「今日入库→视频榜按入库排序 / 播放增量→视频榜按 1 日增长排序 / 7 日粉丝变化→粉丝页 / 数据日期」；下方为最近发布、增长动态、热度速览三个区块，统一使用竖排媒体卡（封面 + 两行截断标题 + 作者/数据行 + 高亮数据行）与响应式网格：移动端每行 2 个、PC 每行 3 个，每处各取前 6 条；采集/候选等运行期信息只在登录后的「系统」「候选」页可见。 | | 视频（`/videos`） | 内容效率（默认）、综合热度、发布时间、入库时间、播放/投币/收藏/评论、互动率、播放增量、播放增速；工具条为「排序」下拉 + 时间下拉 + 右侧放大镜搜索框（一行展示），时间支持全部/7 天/30 天/90 天/1 年/年份。 | | UP主（`/ups`） | 独立入口，不再与视频混排；卡片显示 UP 头像、视频数与总时长、最新粉丝数，以及当前排序的主/副指标（「总播放」排序时副指标为「平均播放」）；排序下拉含内容效率、互动效率、内容量、总播放、视频数、平均播放、总互动、最近发布；不提供按视频数筛选。 | | 数据说明（`/about`） | 数据来源与更新、发布时间/入库时间/快照日期、指标公式、时长与成熟窗口筛选、粉丝快照覆盖与已知局限；数值由 `/api/about` 动态读取。 | diff --git a/README.md b/README.md index 49ba13e..5bba522 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 ``` -- 首页默认“最新动态”：顶部四个数据卡片（今日入库 / 播放增量 / 粉丝日增 / 待确认候选）可点击跳转（视频榜按入库或增长排序、粉丝页、候选页）；下方为最近发布、增长动态、热度速览与采集状态；“最近发布”“增长动态”“热度速览”三处统一使用竖排卡片（封面 + 两行截断标题 + 作者/数据行 + 高亮数据行），并统一为响应式网格（移动端每行 2 个、PC 每行 3 个），每处各取前 6 条； +- 首页默认“最新动态”：标题下显示「收录视频 N」，顶部四个数据卡片为「今日入库 / 播放增量 / 7 日粉丝变化 / 数据日期」（前三项可点击跳转）；下方为最近发布、增长动态、热度速览三个区块，统一使用竖排卡片（封面 + 两行截断标题 + 作者/数据行 + 高亮数据行），并统一为响应式网格（移动端每行 2 个、PC 每行 3 个），每处各取前 6 条；采集/候选等运行期信息只在登录后的「系统」「候选」页可见； - 「视频」与「UP主」是两个独立入口；工具条顺序为「排序」下拉 → 时间下拉（无需 label）→ 右侧自适应搜索框（最大 320px，放大镜按钮在输入框内），三者在 PC 与移动端都保持一行； - 视频排序：内容效率（默认）、综合热度、发布时间、入库时间、播放/投币/收藏/评论、互动率、播放增量/播放增速；UP 排序：内容效率、互动效率、内容量、总播放、视频数、平均播放、总互动、最近发布； - UP 卡片显示 UP 头像（无头像时显示首字母占位）、视频数/总时长与最新粉丝数；「总播放」排序时副指标显示「平均播放」（相当于平均播放榜，主副指标对调）；UP 详情页也显示头像； diff --git a/project.md b/project.md index 0473a97..745d6e8 100644 --- a/project.md +++ b/project.md @@ -701,7 +701,7 @@ UP 内容效率 = EB 收缩后的 Σview / Σ内容小时 | 页面 | 内容 | |---|---| -| 首页 | 最新动态优先：顶部四个可点击数据卡片（今日入库 / 播放增量 / 粉丝日增 / 待确认候选）跳转对应页面；下方为最近发布、增长动态、热度速览与采集状态；三处视频区块统一竖排卡片（移动端每行 2 个、PC 每行 3 个），每处取前 6 条 | +| 首页 | 最新动态优先：标题下显示「收录视频 N」；顶部四个数据卡片为「今日入库 / 播放增量 / 7 日粉丝变化 / 数据日期」（前三项可点击跳转）；下方为最近发布、增长动态、热度速览三个区块（竖排卡片，移动端每行 2 个、PC 每行 3 个，每处前 6 条）；采集/候选等运行期信息只在登录后的「系统」「候选」页可见 | | **视频** | 排序下拉：内容效率（默认）/综合热度/发布时间/入库时间/播放/投币/收藏/评论/互动率/播放增量/播放增速；时间下拉：全部/7 天/30 天/90 天/1 年/年份；搜索框约 230px；不再按收藏夹过滤 | | **UP主** | 独立入口；排序下拉：内容效率/互动效率/内容量/总播放/视频数/平均播放/总互动/最近发布；时间下拉同上；不按视频数筛选 | | 工具条 | 顺序为「排序」（带 label）→ 时间（无 label）→ 右侧自适应搜索框（最大 320px，放大镜按钮内嵌），gap 10px，PC 与移动均一行 | diff --git a/reaction_board/web/static/style.css b/reaction_board/web/static/style.css index f49e4a2..7be3936 100644 --- a/reaction_board/web/static/style.css +++ b/reaction_board/web/static/style.css @@ -476,7 +476,6 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo .status-grid strong { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 650; } /* 预计下次运行等 3 项：PC 与移动端都保持一行 */ .status-grid.status-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } -.status-panel .text-link { display: inline-block; margin-top: 10px; } .segmented { display: inline-flex; diff --git a/reaction_board/web/static/views/home.js b/reaction_board/web/static/views/home.js index 1fdf7e8..06bf120 100644 --- a/reaction_board/web/static/views/home.js +++ b/reaction_board/web/static/views/home.js @@ -1,9 +1,7 @@ import { api } from "../api.js"; +import { emptyState, mediaCard } from "../components.js"; import { - emptyState, mediaCard, sectionHeader, -} from "../components.js"; -import { - escapeAttr, escapeHtml, formatCount, formatDate, formatDelta, formatDateTime, + escapeAttr, escapeHtml, formatCount, formatDate, formatDelta, formatDuration, formatPercent, formatScore, } from "../format.js"; @@ -51,20 +49,18 @@ export async function renderHome(root) { api("/api/videos", { sort: "growth", growth_days: 7, limit: 6 }), ]); - const pending = overview.counts.candidates_pending || 0; const fans = overview.fans; const firstDay = overview.is_first_day; const addedLabel = firstDay ? formatCount(overview.initial_import_count) : formatCount(overview.added_today); - const health = overview.snapshot_health || { total: 0, ok: 0, failed: 0 }; + const activeCount = overview.counts?.active || 0; root.innerHTML = `

最新动态

-

数据 ${escapeHtml(overview.data_date || "—")} · - 采集 ${health.ok}/${health.total}${health.failed ? ` · 失败 ${health.failed}` : ""}

+

收录视频 ${formatCount(activeCount)}

@@ -76,19 +72,12 @@ export async function renderHome(root) { ${statChip("播放增量", overview.view_delta_available ? formatDelta(overview.view_delta) : "—", { href: "/videos?sort=growth&growth_days=1", })} - ${statChip("粉丝日增", fans?.delta_1d === null || fans?.delta_1d === undefined ? "—" : formatDelta(fans.delta_1d), { + ${statChip("7 日粉丝变化", fans?.delta_7d === null || fans?.delta_7d === undefined ? "—" : formatDelta(fans.delta_7d), { href: "/fans", })} - ${statChip("待确认候选", formatCount(pending), { - href: "/candidates", tone: pending ? "warning" : "", - })} + ${statChip("数据日期", escapeHtml(overview.data_date || "—"))} - ${pending ? ` - ${formatCount(pending)} 条候选待确认 - 请在 Telegram 中处理 → - ` : ""} -

最近发布

@@ -118,19 +107,6 @@ export async function renderHome(root) {
${heatGrid(heat.items)}
- -
- ${sectionHeader("采集状态")} -
-
快照完成${overview.snapshot_completed_today ? "是" : "否"}
-
数据日期${escapeHtml(overview.data_date || "—")}
-
粉丝${formatCount(fans?.follower)}
-
7 日粉丝${fans?.delta_7d === null || fans?.delta_7d === undefined ? "—" : formatDelta(fans.delta_7d)}
-
最近快照${escapeHtml(formatDateTime(overview.tasks?.snapshot?.finished_at))}
-
最近发现${escapeHtml(formatDateTime(overview.tasks?.discovery?.finished_at))}
-
- 查看系统状态 → -
`; root.querySelector("#refresh-home")?.addEventListener("click", () => window.location.reload());