From 1ed3746f4b8dd98972a8bba5b5a9162a5699aa5d Mon Sep 17 00:00:00 2001 From: kaireewu Date: Sun, 1 Nov 2026 14:19:27 +0800 Subject: [PATCH] feat(web): clickable home stats, drop recent-ingest panel, rename watch link --- DEVELOPMENT.md | 2 +- README.md | 2 +- project.md | 2 +- reaction_board/web/static/style.css | 2 + reaction_board/web/static/views/home.js | 47 ++++++++++-------------- reaction_board/web/static/views/video.js | 2 +- 6 files changed, 26 insertions(+), 31 deletions(-) diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md index f787130..37630d3 100644 --- a/DEVELOPMENT.md +++ b/DEVELOPMENT.md @@ -530,7 +530,7 @@ P3 实现说明： | 页面 | 内容 | |---|---| -| 首页 | 最新动态优先：今日增量、最新入库、最近发布、增长动态、热度速览、容量与采集状态。 | +| 首页 | 最新动态优先：顶部四个可点击数据卡片（今日入库→视频榜按入库排序、播放增量→视频榜按 1 日增长排序、粉丝日增→粉丝页、待确认候选→候选页）；下方为最近发布、增长动态、热度速览、历史收藏夹与采集状态。 | | 视频（`/videos`） | 内容效率（默认）、综合热度、发布时间、入库时间、播放/投币/收藏/评论、互动率、播放增量、播放增速；工具条为「排序」下拉 + 时间下拉 + 右侧放大镜搜索框（一行展示），时间支持全部/7 天/30 天/90 天/1 年/年份。 | | UP主（`/ups`） | 独立入口，不再与视频混排；排序下拉含内容效率、互动效率、内容量、总播放、视频数、平均播放、总互动、最近发布；不提供按视频数筛选。 | | 数据说明（`/about`） | 数据来源与更新、发布时间/入库时间/快照日期、指标公式、时长与成熟窗口筛选、粉丝快照覆盖与已知局限；数值由 `/api/about` 动态读取。 | diff --git a/README.md b/README.md index f2f3024..035490d 100644 --- a/README.md +++ b/README.md @@ -165,7 +165,7 @@ uv run python tools/seed_preview_db.py --days 7 uv run python app.py serve --preview --config data/preview/config.json ``` -- 首页默认“最新动态”：今日增量、最新入库、最近发布、增长动态、热度速览、历史收藏夹与采集状态； +- 首页默认“最新动态”：顶部四个数据卡片（今日入库 / 播放增量 / 粉丝日增 / 待确认候选）可点击跳转（视频榜按入库或增长排序、粉丝页、候选页）；下方为最近发布、增长动态、热度速览、历史收藏夹与采集状态； - 「视频」与「UP主」是两个独立入口；工具条顺序为「排序」下拉 → 时间下拉（无需 label）→ 右侧自适应搜索框（最大 320px，放大镜按钮在输入框内），三者在 PC 与移动端都保持一行； - 视频排序：内容效率（默认）、综合热度、发布时间、入库时间、播放/投币/收藏/评论、互动率、播放增量/播放增速；UP 排序：内容效率、互动效率、内容量、总播放、视频数、平均播放、总互动、最近发布； - 时间筛选：全部 / 近 7 天 / 近 30 天 / 近 90 天 / 近 1 年 / 已入库的年份；不再提供按收藏夹过滤，UP 页也不再按视频数筛选； diff --git a/project.md b/project.md index 0ab04ed..e36d8e1 100644 --- a/project.md +++ b/project.md @@ -700,7 +700,7 @@ UP 内容效率 = EB 收缩后的 Σview / Σ内容小时 | 页面 | 内容 | |---|---| -| 首页 | 最新动态优先：今日增量、最新入库、最近发布、增长动态、热度速览、收藏夹容量、采集状态 | +| 首页 | 最新动态优先：顶部四个可点击数据卡片（今日入库 / 播放增量 / 粉丝日增 / 待确认候选）跳转对应页面；下方为最近发布、增长动态、热度速览、历史收藏夹、采集状态 | | **视频** | 排序下拉：内容效率（默认）/综合热度/发布时间/入库时间/播放/投币/收藏/评论/互动率/播放增量/播放增速；时间下拉：全部/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 61b6432..ba6c986 100644 --- a/reaction_board/web/static/style.css +++ b/reaction_board/web/static/style.css @@ -278,6 +278,8 @@ h1, h2, h3, p { margin: 0; } } .live-chip span { display: block; color: var(--muted); font-size: 11px; } .live-chip strong { display: block; margin-top: 2px; font-size: 17px; letter-spacing: -0.2px; } +a.live-chip { text-decoration: none; color: inherit; transition: border-color 0.15s ease, background 0.15s ease; } +a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .live-chip.accent { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); } .live-chip.warning { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); background: var(--warning-soft); } diff --git a/reaction_board/web/static/views/home.js b/reaction_board/web/static/views/home.js index e592b9b..dfec8a1 100644 --- a/reaction_board/web/static/views/home.js +++ b/reaction_board/web/static/views/home.js @@ -3,14 +3,16 @@ import { emptyState, cover, sectionHeader, videoCard, } from "../components.js"; import { - escapeHtml, formatCount, formatDate, formatDelta, formatDateTime, + escapeAttr, escapeHtml, formatCount, formatDate, formatDelta, formatDateTime, formatPercent, formatScore, } from "../format.js"; -function statChip(label, value, tone = "") { - return `
- ${escapeHtml(label)}${value} -
`; +function statChip(label, value, { href = null, tone = "" } = {}) { + const inner = `${escapeHtml(label)}${value}`; + if (href) { + return `${inner}`; + } + return `
${inner}
`; } function heatStrip(items) { @@ -45,9 +47,8 @@ function capacity(folders) { } export async function renderHome(root) { - const [overview, added, published, heat, growth] = await Promise.all([ + const [overview, published, heat, growth] = await Promise.all([ api("/api/overview"), - api("/api/videos", { sort: "added", within_days: 7, limit: 5 }), 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 }), @@ -60,10 +61,6 @@ export async function renderHome(root) { ? formatCount(overview.initial_import_count) : formatCount(overview.added_today); const health = overview.snapshot_health || { total: 0, ok: 0, failed: 0 }; - const addedNote = firstDay - ? `

首次导入共 ${formatCount(overview.initial_import_count)} 条， - 按发布时间倒序展示。后续每日增量从下一次快照开始。

` - : `

按入库时间排序，展示最近 7 天新收录的视频。

`; root.innerHTML = `
@@ -76,10 +73,18 @@ export async function renderHome(root) {
- ${statChip(firstDay ? "首次导入" : "今日入库", escapeHtml(addedLabel), "accent")} - ${statChip("播放增量", overview.view_delta_available ? formatDelta(overview.view_delta) : "—")} - ${statChip("粉丝日增", fans?.delta_1d === null || fans?.delta_1d === undefined ? "—" : formatDelta(fans.delta_1d))} - ${statChip("待确认候选", formatCount(pending), pending ? "warning" : "")} + ${statChip(firstDay ? "首次导入" : "今日入库", escapeHtml(addedLabel), { + href: "/videos?sort=added&within_days=7", tone: "accent", + })} + ${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), { + href: "/fans", + })} + ${statChip("待确认候选", formatCount(pending), { + href: "/candidates", tone: pending ? "warning" : "", + })}
${pending ? ` @@ -87,18 +92,6 @@ export async function renderHome(root) { 请在 Telegram 中处理 → ` : ""} -
-
-

最新入库

- 查看全部 -
- ${addedNote} -
- ${added.items.length ? added.items.map((item) => videoCard(item)).join("") - : emptyState("最近 7 天没有新入库视频", "搜索发现确认或 Telegram 私聊手动入库后会出现在这里。")} -
-
-

最近发布

diff --git a/reaction_board/web/static/views/video.js b/reaction_board/web/static/views/video.js index 36f5cb0..e36b286 100644 --- a/reaction_board/web/static/views/video.js +++ b/reaction_board/web/static/views/video.js @@ -48,7 +48,7 @@ export async function renderVideo(root, { params, query }) {
← 返回视频榜
- ${detail.url ? `打开 B 站` : ""} + ${detail.url ? `B 站观看` : ""}