diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md index 9ef4534..5ab3ada 100644 --- a/DEVELOPMENT.md +++ b/DEVELOPMENT.md @@ -542,8 +542,8 @@ P3 实现说明： | 页面 | 内容 | |---|---| | 首页 | 最新动态优先：今日增量、最新入库、最近发布、增长动态、热度速览、容量与采集状态。 | -| 视频（`/videos`） | 内容效率（默认）、综合热度、发布时间、入库时间、播放/投币/收藏/评论、互动率、播放增量、播放增速；排序与时间筛选为下拉框，时间支持全部/7 天/30 天/90 天/1 年/年份。 | -| UP主（`/ups`） | 独立入口，不再与视频混排；排序下拉含内容效率、互动效率、内容量、总播放、视频数、平均播放、总互动、最近发布。 | +| 视频（`/videos`） | 内容效率（默认）、综合热度、发布时间、入库时间、播放/投币/收藏/评论、互动率、播放增量、播放增速；工具条为「排序」下拉 + 时间下拉 + 右侧放大镜搜索框（一行展示），时间支持全部/7 天/30 天/90 天/1 年/年份。 | +| UP主（`/ups`） | 独立入口，不再与视频混排；排序下拉含内容效率、互动效率、内容量、总播放、视频数、平均播放、总互动、最近发布；不提供按视频数筛选。 | | 数据说明（`/about`） | 数据来源与更新、发布时间/入库时间/快照日期、指标公式、时长与成熟窗口筛选、粉丝快照覆盖与已知局限；数值由 `/api/about` 动态读取。 | | 视频详情 | 元数据、分 P 数、七项指标、内容/互动效率、入库时粉丝数、单指标趋势、快照表、同 UP 对比。 | | UP 页 | 该 UP 的全部视频、聚合趋势、单视频对比、总时长与播放·小时、入库时与当前粉丝数。 | diff --git a/README.md b/README.md index 8a18ae8..98d870c 100644 --- a/README.md +++ b/README.md @@ -171,9 +171,9 @@ uv run python app.py serve --preview --config data/preview/config.json ``` - 首页默认“最新动态”：今日增量、最新入库、最近发布、增长动态、热度速览、收藏夹容量与采集状态； -- 「视频」与「UP主」是两个独立入口；搜索框固定在约 230px，排序与时间筛选都是下拉框，可放在同一行； +- 「视频」与「UP主」是两个独立入口；工具条顺序为「排序」下拉 → 时间下拉（无需 label）→ 右侧自适应搜索框（放大镜按钮在输入框内），三者在 PC 与移动端都保持一行； - 视频排序：内容效率（默认）、综合热度、发布时间、入库时间、播放/投币/收藏/评论、互动率、播放增量/播放增速；UP 排序：内容效率、互动效率、内容量、总播放、视频数、平均播放、总互动、最近发布； -- 时间筛选：全部 / 近 7 天 / 近 30 天 / 近 90 天 / 近 1 年 / 已入库的年份；不再提供按收藏夹过滤； +- 时间筛选：全部 / 近 7 天 / 近 30 天 / 近 90 天 / 近 1 年 / 已入库的年份；不再提供按收藏夹过滤，UP 页也不再按视频数筛选； - 内容效率 = 播放 / 内容小时；单条视频用 60 分钟先验暴露量向全库均值收缩，只统计时长 ≥ 600 秒、发布满 2 天、播放 ≥ 2000 的视频（综合热度榜同样要求播放 ≥ 2000）；UP 内容效率用经验贝叶斯收缩，避免极小样本冲榜； - 「数据说明」（`/about`）说明数据来源、发布时间/入库时间/快照日期、指标公式、筛选口径与已知局限，数值由 `/api/about` 动态读取； - 视频详情提供分 P 数、七项指标、内容/互动效率、入库时粉丝数、单指标趋势、快照表和同 UP 对比；UP 页提供聚合趋势、单视频对比与入库时/当前粉丝数； diff --git a/project.md b/project.md index 7230174..7a08c58 100644 --- a/project.md +++ b/project.md @@ -702,7 +702,8 @@ UP 内容效率 = EB 收缩后的 Σview / Σ内容小时 |---|---| | 首页 | 最新动态优先：今日增量、最新入库、最近发布、增长动态、热度速览、收藏夹容量、采集状态 | | **视频** | 排序下拉：内容效率（默认）/综合热度/发布时间/入库时间/播放/投币/收藏/评论/互动率/播放增量/播放增速；时间下拉：全部/7 天/30 天/90 天/1 年/年份；搜索框约 230px；不再按收藏夹过滤 | -| **UP主** | 独立入口；排序下拉：内容效率/互动效率/内容量/总播放/视频数/平均播放/总互动/最近发布；时间下拉同上 | +| **UP主** | 独立入口；排序下拉：内容效率/互动效率/内容量/总播放/视频数/平均播放/总互动/最近发布；时间下拉同上；不按视频数筛选 | +| 工具条 | 顺序为「排序」（带 label）→ 时间（无 label）→ 右侧自适应搜索框（放大镜按钮内嵌），gap 10px，PC 与移动均一行 | | 数据说明 | 数据来源与更新节奏、三个时间概念、指标公式、时长/成熟窗口筛选、粉丝快照覆盖与已知局限；数值由 `/api/about` 动态读取当前配置 | | 视频详情 | 元数据 + 分 P 数 + 七项指标 + 内容/互动效率 + 入库时粉丝数 + 单指标趋势 + 同 UP 对比 + 快照表 | | UP 页 | 该 UP 全部视频、聚合趋势、单视频对比、总时长/播放·小时、入库时与当前粉丝数 | diff --git a/reaction_board/web/static/style.css b/reaction_board/web/static/style.css index 9bfb798..fad5ed3 100644 --- a/reaction_board/web/static/style.css +++ b/reaction_board/web/static/style.css @@ -516,13 +516,15 @@ h1, h2, h3, p { margin: 0; } .rank-toolbar { display: flex; - flex-wrap: wrap; + flex-wrap: nowrap; align-items: center; - gap: 8px; + gap: 10px; + overflow-x: auto; + scrollbar-width: none; + padding-bottom: 2px; } -.rank-search { display: flex; flex: 0 0 auto; width: 230px; gap: 6px; } -.rank-search .search-input { flex: 1 1 auto; min-width: 0; } -.select-label { +.rank-toolbar::-webkit-scrollbar { display: none; } +.rank-toolbar .select-label { display: inline-flex; align-items: center; gap: 6px; @@ -530,11 +532,38 @@ h1, h2, h3, p { margin: 0; } font-size: 12.5px; white-space: nowrap; } -.rank-toolbar .select { max-width: 220px; width: auto; } -@media (max-width: 619px) { - .rank-search { width: 230px; } - .rank-toolbar .select { max-width: 100%; } +.rank-toolbar .select { max-width: 150px; min-width: 0; width: auto; } +.rank-toolbar #rank-time { max-width: 128px; } +.rank-search { + display: flex; + flex: 1 1 120px; + min-width: 96px; + margin-left: auto; } +.search-box { position: relative; display: flex; align-items: center; width: 100%; } +.search-box .search-input { width: 100%; padding-right: 34px; } +.search-box .search-input::-webkit-search-cancel-button { + -webkit-appearance: none; + appearance: none; +} +.search-button { + position: absolute; + right: 2px; + top: 50%; + transform: translateY(-50%); + width: 34px; + height: 34px; + display: grid; + place-items: center; + padding: 0; + border: none; + border-radius: 8px; + background: transparent; + color: var(--muted); + cursor: pointer; +} +.search-button svg { width: 18px; height: 18px; } +.search-button:hover { color: var(--accent); } .search-input, .select { min-height: 38px; padding: 8px 11px; diff --git a/reaction_board/web/static/views/rankings.js b/reaction_board/web/static/views/rankings.js index 350d76f..898dd3c 100644 --- a/reaction_board/web/static/views/rankings.js +++ b/reaction_board/web/static/views/rankings.js @@ -67,27 +67,27 @@ function timeOptions(within, year, years) { return base + yearOptions; } -function controls({ scope, sort, within, year, growthDays, q, minVideos, years }) { +function controls({ scope, sort, within, year, growthDays, q, years }) { return `
- - - ${scope === "up" ? `` : ""} + +
${scope === "video" && (sort === "growth" || sort === "growth_rate") ? `
@@ -184,9 +184,6 @@ function bindControls(root) { root.querySelectorAll("[data-growth-days]").forEach((button) => button.addEventListener("click", () => { replaceQuery({ growth_days: button.dataset.growthDays, page: null }); })); - root.querySelector("#min-videos")?.addEventListener("change", (event) => { - replaceQuery({ min_videos: event.target.value, page: null }); - }); root.querySelector("#rank-filter")?.addEventListener("submit", (event) => { event.preventDefault(); const value = new FormData(event.target).get("q") || ""; @@ -205,7 +202,6 @@ async function renderScope(root, { query }, scope) { const year = query.get("year") || ""; const growthDays = query.get("growth_days") || "7"; const q = query.get("q") || ""; - const minVideos = query.get("min_videos") || "1"; const page = Math.max(1, Number(query.get("page") || 1)); const overview = await getOverview(); @@ -222,7 +218,7 @@ async function renderScope(root, { query }, scope) { }; let data; if (scope === "up") { - data = await api("/api/ups", { ...params, min_videos: minVideos }); + data = await api("/api/ups", params); } else { data = await api("/api/videos", params); } @@ -235,7 +231,7 @@ async function renderScope(root, { query }, scope) {

${title} 共 ${formatCount(data.total)} ${unit}

- ${controls({ scope, sort, within, year, growthDays, q, minVideos, years })} + ${controls({ scope, sort, within, year, growthDays, q, years })} ${durationNote(data)} ${data.available === false ? `
${sort.startsWith("growth") ? "增长数据尚不可用" : "榜单筛选后为空"}