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 不动）

.workbuddy/memory/2026-09-03.md

@@ -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 同步评估后人工复制

project/短视频脚本创作/V1.0/mcn-work-shop/public/data-pages.js

@@ -522,20 +522,13 @@ async function renderRanking(view) {
   const st = { week: mkState(), hot: mkState(), likes: mkState() };
   let tab = 'week';
   const tabLabel = () => { const t = RANK_TABS.find(([k]) => k === tab); return t ? t[1] : ''; };
-  // tab 切换 + 赛道选择 + 时间切换 同一行（标题行只放 返回 | 标题，tab + 筛选放标题下一行 .rank-toolbar）
-  // 09-03 更新榜单按钮放标题行最右（.toolbar-right）：三榜 tab 切换与空态（无本地数据文件）均可见，便于首次抓取
-  const toolbar = (s, withFilters) => `
-    <div class="page-toolbar">
-      ${toolbarBack()}
-      <span class="page-title">热点数据</span>
-      <div class="toolbar-right">
-        <button class="btn btn-icon" id="rankUpdate" title="更新榜单数据：后台任务重新抓取三榜（账号周榜 5 赛道 / 视频热榜 / 点赞榜）最新一期并落盘；30 分钟内已更新会拦截防重复">${svgIcon('download', 16, 'currentColor')}</button>
-      </div>
+  // 09-03 tab 始终在 page-toolbar 渲染（含空态/错误态），下载按钮紧贴 tab 右侧；筛选+翻页放 rank-toolbar（withFilters 时）
+  const toolbar = (s, withFilters) => {
+    const tabsHtml = `<div class="rank-tabs" role="tablist" style="margin-left:auto">
+      ${RANK_TABS.map(([k, label, tip]) => `<button class="rank-tab${k === tab ? ' active' : ''}" data-rank-tab="${k}"${tip ? ` title="${tip}"` : ''} role="tab">${label}</button>`).join('')}
     </div>
-    ${withFilters ? `<div class="rank-toolbar">
-      <div class="rank-tabs" role="tablist">
-        ${RANK_TABS.map(([k, label, tip]) => `<button class="rank-tab${k === tab ? ' active' : ''}" data-rank-tab="${k}"${tip ? ` title="${tip}"` : ''} role="tab">${label}</button>`).join('')}
-      </div>
+    <button class="btn btn-icon" id="rankUpdate" title="更新榜单数据：后台任务重新抓取三榜（账号周榜 5 赛道 / 视频热榜 / 点赞榜）最新一期并落盘；30 分钟内已更新会拦截防重复">${svgIcon('download', 16, 'currentColor')}</button>`;
+    const filtersHtml = withFilters ? `<div class="rank-toolbar">
       <div class="toolbar-right">
         <select id="rankCat" class="input-select" title="赛道筛选">
           <option value="">全部赛道</option>
@@ -545,7 +538,14 @@ async function renderRanking(view) {
         <span class="pager-info" title="选择日期">${esc(s.date)}</span>
         <button class="btn" id="rankNext" title="下一期">▶</button>
       </div>
-    </div>` : ''}`;
+    </div>` : '';
+    return `<div class="page-toolbar">
+      ${toolbarBack()}
+      <span class="page-title">热点数据</span>
+      ${tabsHtml}
+    </div>
+    ${filtersHtml}`;
+  };
 
   // 标题列统一截断（作品标题很长）：悬停 title 看全文
   const titleTd = (text, url) => `<span class="rk-tl" title="${esc(String(text || '').replace(/"/g, '&quot;'))}">${url ? `<a class="link" data-ext="${esc(url)}">${esc(text)}</a>` : esc(text)}</span>`;

project/短视频脚本创作/V1.0/mcn-work-shop/public/index.html

@@ -42,6 +42,6 @@
 </div>
 
 <script src="app.js?v=20260903v"></script>
-<script src="data-pages.js?v=20260903x"></script>
+<script src="data-pages.js?v=20260903y"></script>
 </body>
 </html>