R36: 榜单下载按钮移至 tab 组件右侧(重构 toolbar,tab 上移 page-toolbar)

- 用户反馈:下载按钮「靠近 tab 组件,不是筛选/搜索组件」
- 冲突排查:原 toolbar(s, false) 空态时 rank-toolbar 不渲染,若简单把按钮移进 rank-toolbar 会丢失 R33 设计的「空态也能看到更新按钮(首次抓取入口)」
- 重构 toolbar() 函数:
  - tab 始终在 page-toolbar 渲染(含空态/错误态)
  - rankUpdate 紧贴 tab 右侧(rank-tabs margin-left:auto 推右,按钮紧跟其后)
  - rank-toolbar 仅放筛选+翻页(withFilters 时)
- 复用 CSS:.page-toolbar .rank-tabs 紧凑样式(L603-604 已就绪)
- CDP 验证:tab+rankUpdate 都在 page-toolbar ✓;筛选保留 ✓
- 版本:data-pages.js x→y(CSS 不动)
This commit is contained in:
maogeigei committed 2026-09-03 17:41:24 +08:00
1 parent 449d784de0
commit 1f147e84dd
3 files changed
+28 -15

No files matched your search

+13
View File
@@ -326,5 +326,18 @@
- **版本**:style.css ?v=20260903v→x、data-pages.js w→x(app.js 不动);同文件三处 bump 串行
- **CDP 验证**:JS=x;rankUpdate path 含 `M21 15v4...7 10 12 15 17 10...y1=15 y2=3` = download 图标 ✓;rankUpdate 宽 40px(+5)✓
## R36 榜单「下载按钮」靠近 tab(09-03 17:35)
- **需求**:用户反馈「下载按钮放到 tab 组件右边」「靠近 tab 组件 不是 筛选和搜索组件」
- **冲突点排查**:原来 rankUpdate 在 page-toolbar .toolbar-right;rank-toolbar.withFilters 控制整个 rank-toolbar(含 tab + 筛选)渲染——空态 toolbar(s,false) 时 rank-toolbar 不渲染;若简单把按钮移进 rank-toolbar 会丢失 R33 设计「空态也能看到更新按钮(首次抓取入口)」
- **解法**:**重构 toolbar() 函数**——tab 始终在 page-toolbar 渲染(含空态/错误态),rankUpdate 紧贴 tab 右侧;rank-toolbar 仅放筛选+翻页(withFilters 时)
- HTML:page-toolbar 子元素顺序 = 返回 / 标题 / `<div class="rank-tabs" style="margin-left:auto">` 三个 tab / `<button id="rankUpdate">⬇</button>`
- rank-tabs 用 `margin-left:auto` 推到右侧,rankUpdate 紧跟其后 → 视觉「"tab 组 + ⬇」紧贴
- rank-toolbar:只保留 .toolbar-right(赛道 select + 翻页),无 tab
- **CSS 复用**:`.page-toolbar .rank-tabs { border-bottom:none; margin-bottom:0; align-self:center }`(L603)+ `.page-toolbar .rank-tab`(L604 紧凑样式)已就绪,无需新增样式
- **验证**:
- CDP 实测:tab 在 page-toolbar ✓;btnInPageToolbar=true;filterExists=true(保留)
- 视觉截图:tab「账号周榜/视频热榜/点赞榜」+ ⬇ 在第一行右侧;筛选下拉+翻页在第二行
- **版本**:data-pages.js x→y(CSS 不动)
## R34 同步 dsh 副本计划
- dsh 副本 `C:\Users\maidou\.dsh\skills\short-video-script\`(独立副本,非软链)—— R34 改动 data-pages.js/app.js/style.css/index.html 同步评估后人工复制