From 47ca2b1a50a77928fd1263bbae7aa3e571e10126 Mon Sep 17 00:00:00 2001
From: Codex <codex@local>
Date: Thu, 14 May 2026 20:53:43 +0800
Subject: [PATCH] Reposition task queue and mobile sync panel

---
 public/index.html              | 55 +++++++++++++++++-----------------
 public/styles.css              |  6 ++++
 test/desktop-dashboard.test.js |  8 +++++
 test/mobile-sync.test.js       |  5 ++++
 4 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/public/index.html b/public/index.html
index f0cee38..31f2d4f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -33,6 +33,23 @@
             <button id="collect-history-button" class="top-collect-all" type="button">采集全部历史节目</button>
             <button id="retry-pending-button" class="top-collect-all secondary" type="button">复查无数据</button>
           </div>
+          <section id="task-queue-panel" class="task-queue-panel brand-task-queue idle" aria-label="采集任务队列">
+            <div class="task-queue-head">
+              <div>
+                <div class="panel-title">任务队列</div>
+                <div id="task-current" class="task-current">暂无运行中的采集任务</div>
+              </div>
+              <div id="task-ratio" class="task-ratio">0/0</div>
+            </div>
+            <div class="task-progress-track" aria-hidden="true">
+              <div id="task-progress-fill" class="task-progress-fill"></div>
+            </div>
+            <div class="task-counters">
+              <span>有效 <strong id="task-ok-count">0</strong></span>
+              <span>未找到/无指标 <strong id="task-missing-count">0</strong></span>
+              <span>风控/错误 <strong id="task-error-count">0</strong></span>
+            </div>
+          </section>
         </div>
         <form id="collect-form" class="searchbar">
           <input id="program-name" name="name" type="search" placeholder="输入节目名" autocomplete="off" required>
@@ -75,34 +92,6 @@
         <span id="status-text">等待输入节目名</span>
       </section>
 
-      <section id="task-queue-panel" class="task-queue-panel idle" aria-label="采集任务队列">
-        <div class="task-queue-head">
-          <div>
-            <div class="panel-title">任务队列</div>
-            <div id="task-current" class="task-current">暂无运行中的采集任务</div>
-          </div>
-          <div id="task-ratio" class="task-ratio">0/0</div>
-        </div>
-        <div class="task-progress-track" aria-hidden="true">
-          <div id="task-progress-fill" class="task-progress-fill"></div>
-        </div>
-        <div class="task-counters">
-          <span>有效 <strong id="task-ok-count">0</strong></span>
-          <span>未找到/无指标 <strong id="task-missing-count">0</strong></span>
-          <span>风控/错误 <strong id="task-error-count">0</strong></span>
-        </div>
-      </section>
-
-      <section id="mobile-sync-panel" class="mobile-sync-panel">
-        <div class="panel-head">
-          <div>
-            <div class="panel-title">手机同步待处理</div>
-            <div class="panel-note">手机端同步过来的节目先放这里，不会自动写入历史数据。</div>
-          </div>
-        </div>
-        <div id="mobile-sync-list" class="mobile-sync-list empty">暂无手机同步记录</div>
-      </section>
-
       <section id="duty-panel" class="duty-panel">
         <div class="panel-head">
           <div>
@@ -244,6 +233,16 @@
         <textarea id="temporary-query-text" rows="4" placeholder="粘贴节目列表，每行一个节目名"></textarea>
         <div id="temporary-query-result" class="temporary-result empty">暂无临时查询结果</div>
       </section>
+
+      <section id="mobile-sync-panel" class="mobile-sync-panel">
+        <div class="panel-head">
+          <div>
+            <div class="panel-title">手机同步待处理</div>
+            <div class="panel-note">手机端同步过来的节目先放这里，不会自动写入历史数据。</div>
+          </div>
+        </div>
+        <div id="mobile-sync-list" class="mobile-sync-list empty">暂无手机同步记录</div>
+      </section>
     </main>
     <footer class="app-status-dock" aria-live="polite">
       <span class="dock-label">状态</span>
diff --git a/public/styles.css b/public/styles.css
index 72e311d..f04a837 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -357,6 +357,12 @@ h1 {
   box-shadow: var(--shadow);
 }
 
+.brand-task-queue {
+  margin: 6px 0 0;
+  padding: 10px 12px;
+  box-shadow: none;
+}
+
 .task-queue-panel.idle {
   box-shadow: none;
 }
diff --git a/test/desktop-dashboard.test.js b/test/desktop-dashboard.test.js
index 00d2fa9..870156a 100644
--- a/test/desktop-dashboard.test.js
+++ b/test/desktop-dashboard.test.js
@@ -22,14 +22,22 @@ test("desktop workbench summary sits below the trend charts", () => {
 
 test("collection progress has a visible task queue panel", () => {
   assert.match(html, /id="task-queue-panel"/);
+  assert.match(html, /brand-task-queue/);
   assert.match(html, /id="task-current"/);
   assert.match(html, /id="task-progress-fill"/);
   assert.match(html, /id="task-ok-count"/);
   assert.match(html, /id="task-missing-count"/);
   assert.match(css, /\.task-queue-panel/);
+  assert.match(css, /\.brand-task-queue/);
   assert.match(app, /updateTaskQueue/);
 });
 
+test("task queue sits directly under the top history collection controls", () => {
+  assert.ok(html.indexOf('id="collect-history-button"') < html.indexOf('id="task-queue-panel"'));
+  assert.ok(html.indexOf('id="task-queue-panel"') < html.indexOf('id="collect-form"'));
+  assert.ok(html.indexOf('id="task-queue-panel"') < html.indexOf('class="statusline"'));
+});
+
 test("desktop shell has app-style navigation and persistent status", () => {
   assert.match(html, /class="app-nav"/);
   assert.match(html, /href="#desktop-dashboard"/);
diff --git a/test/mobile-sync.test.js b/test/mobile-sync.test.js
index 00d73cd..7ff167a 100644
--- a/test/mobile-sync.test.js
+++ b/test/mobile-sync.test.js
@@ -44,3 +44,8 @@ test("desktop page shows mobile sync drafts as a pending queue", () => {
   assert.match(desktopCss, /\.mobile-sync-panel/);
   assert.match(desktopCss, /\.mobile-sync-item/);
 });
+
+test("desktop mobile sync queue sits at the bottom of the main app content", () => {
+  assert.ok(desktopHtml.indexOf('id="temporary-query-panel"') < desktopHtml.indexOf('id="mobile-sync-panel"'));
+  assert.ok(desktopHtml.indexOf('id="mobile-sync-panel"') < desktopHtml.indexOf("</main>"));
+});