Improve mobile capture layout

public/mobile.css

@@ -122,6 +122,7 @@ h1 {
 .offline-panel,
 .device-panel,
 .app-settings-panel,
+.device-settings-panel,
 .batch-panel,
 .history-strip,
 .results {
@@ -149,6 +150,59 @@ h1 {
   gap: 10px;
 }
 
+.device-settings-panel {
+  padding: 0;
+  overflow: hidden;
+}
+
+.device-settings-panel > summary {
+  min-height: 46px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 0 12px;
+  color: var(--accent);
+  font-weight: 900;
+  cursor: pointer;
+  list-style: none;
+}
+
+.device-settings-panel > summary::-webkit-details-marker {
+  display: none;
+}
+
+.device-settings-panel > summary::before {
+  content: ">";
+  display: inline-grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  transition: transform 0.16s ease;
+}
+
+.device-settings-panel[open] > summary::before {
+  transform: rotate(90deg);
+}
+
+.device-settings-panel > summary span:first-child {
+  margin-right: auto;
+}
+
+.device-settings-panel .device-panel,
+.device-settings-panel .app-settings-panel,
+.device-settings-panel .install-hint,
+.device-settings-panel .network {
+  border: 0;
+  border-top: 1px solid var(--line);
+  border-radius: 0;
+  margin: 0;
+  background: transparent;
+}
+
 .settings-head {
   display: flex;
   justify-content: space-between;
@@ -298,11 +352,15 @@ textarea:focus {
 
 .actions {
   display: grid;
-  grid-template-columns: 1fr 118px 92px;
+  grid-template-columns: 1fr 1fr;
   gap: 10px;
   margin-top: 12px;
 }
 
+#collect-button {
+  grid-column: 1 / -1;
+}
+
 button {
   height: 44px;
   border: 1px solid var(--accent);
@@ -332,6 +390,12 @@ button:disabled,
   color: var(--muted);
 }
 
+.mobile-status-stack {
+  display: grid;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
 .offline-status,
 .install-hint {
   background: var(--panel);
@@ -343,6 +407,10 @@ button:disabled,
   font-size: 13px;
 }
 
+.mobile-status-stack .offline-status {
+  margin-bottom: 0;
+}
+
 .install-hint {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
@@ -726,3 +794,36 @@ button:disabled,
   padding: 22px 4px;
   text-align: center;
 }
+
+@media (max-width: 420px) {
+  .mobile-shell {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  .mobile-header {
+    align-items: flex-start;
+  }
+
+  h1 {
+    font-size: 20px;
+  }
+
+  .actions,
+  .setting-actions,
+  .device-panel,
+  .install-hint {
+    grid-template-columns: 1fr;
+  }
+
+  .draft-actions {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .desktop-link,
+  .secondary,
+  button {
+    min-height: 42px;
+  }
+}

public/mobile.html

@@ -18,33 +18,6 @@
         <a class="desktop-link" href="/">桌面版</a>
       </header>
 
-      <section class="device-panel">
-        <label class="field">
-          <span>这台手机/录入人</span>
-          <input id="mobile-device-name" type="text" placeholder="例如：张三手机、商务部手机">
-        </label>
-        <button id="save-device-name-button" class="secondary-button" type="button">保存名称</button>
-      </section>
-
-      <section class="app-settings-panel">
-        <div class="settings-head">
-          <div>
-            <div class="section-title">手机 App 设置</div>
-            <p>绑定电脑或 NAS 地址后，离开局域网再回来也能快速同步。</p>
-          </div>
-          <span id="mobile-app-state" class="app-state">检测中</span>
-        </div>
-        <label class="field">
-          <span>电脑 / NAS 地址</span>
-          <input id="mobile-server-url" type="url" placeholder="例如：http://192.168.18.120:3001">
-        </label>
-        <div class="setting-actions">
-          <button id="save-mobile-server-button" class="secondary-button" type="button">保存地址</button>
-          <button id="test-mobile-server-button" class="secondary-button" type="button">测试连接</button>
-        </div>
-        <div id="mobile-binding-summary" class="binding-summary">尚未绑定固定地址，默认使用当前打开页面。</div>
-      </section>
-
       <form id="collect-form" class="collect-panel">
         <label class="field">
           <span>节目名</span>
@@ -86,27 +59,62 @@
         <span id="status-text">等待输入节目名</span>
       </section>
 
-      <section id="offline-status" class="offline-status">
+      <div class="mobile-status-stack">
-        <strong>离线录入</strong>
+        <section id="offline-status" class="offline-status">
-        <span>首次在局域网打开后，会缓存手机版；之后可离线打开并保存待同步。</span>
+          <strong>离线录入</strong>
-      </section>
+          <span>首次在局域网打开后，会缓存手机版；之后可离线打开并保存待同步。</span>
+        </section>
+      </div>
 
-      <section id="install-hint" class="install-hint">
+      <details class="device-settings-panel">
-        <div>
+        <summary>
-          <strong>安装到手机桌面</strong>
+          <span>设备与同步设置</span>
-          <span id="install-status">可在手机浏览器菜单中选择“添加到主屏幕”，下次不在局域网也能直接打开录入。</span>
+          <span id="mobile-app-state" class="app-state">检测中</span>
-        </div>
+        </summary>
-        <button id="install-app-button" class="secondary-button" type="button" hidden>安装</button>
-      </section>
 
-      <section class="network">
+        <section class="device-panel">
-        <div class="network-title">手机访问地址</div>
+          <label class="field">
-        <div id="network-links">正在读取局域网地址...</div>
+            <span>这台手机/录入人</span>
-        <details class="network-help">
+            <input id="mobile-device-name" type="text" placeholder="例如：张三手机、商务部手机">
-          <summary>不在同一 WiFi 怎么办</summary>
+          </label>
-          <p>手机连电脑热点最简单；长期使用可以电脑和手机都装 Tailscale；临时外网访问可以用内网穿透转发 3000 端口。</p>
+          <button id="save-device-name-button" class="secondary-button" type="button">保存名称</button>
-        </details>
+        </section>
-      </section>
+
+        <section class="app-settings-panel">
+          <div class="settings-head">
+            <div>
+              <div class="section-title">手机 App 设置</div>
+              <p>绑定电脑或 NAS 地址后，离开局域网再回来也能快速同步。</p>
+            </div>
+          </div>
+          <label class="field">
+            <span>电脑 / NAS 地址</span>
+            <input id="mobile-server-url" type="url" placeholder="例如：http://192.168.18.120:3001">
+          </label>
+          <div class="setting-actions">
+            <button id="save-mobile-server-button" class="secondary-button" type="button">保存地址</button>
+            <button id="test-mobile-server-button" class="secondary-button" type="button">测试连接</button>
+          </div>
+          <div id="mobile-binding-summary" class="binding-summary">尚未绑定固定地址，默认使用当前打开页面。</div>
+        </section>
+
+        <section id="install-hint" class="install-hint">
+          <div>
+            <strong>安装到手机桌面</strong>
+            <span id="install-status">可在手机浏览器菜单中选择“添加到主屏幕”，下次不在局域网也能直接打开录入。</span>
+          </div>
+          <button id="install-app-button" class="secondary-button" type="button" hidden>安装</button>
+        </section>
+
+        <section class="network">
+          <div class="network-title">手机访问地址</div>
+          <div id="network-links">正在读取局域网地址...</div>
+          <details class="network-help">
+            <summary>不在同一 WiFi 怎么办</summary>
+            <p>手机连电脑热点最简单；长期使用可以电脑和手机都装 Tailscale；临时外网访问可以用内网穿透转发 3000 端口。</p>
+          </details>
+        </section>
+      </details>
 
       <section class="offline-panel">
         <div class="offline-head">

test/mobile-capture-system.test.js

@@ -47,3 +47,13 @@ test("mobile app exposes server binding settings for app-like use", () => {
   assert.match(css, /\.app-settings-panel/);
   assert.match(css, /\.binding-summary/);
 });
+
+test("mobile layout prioritizes quick capture before device settings", () => {
+  assert.ok(html.indexOf('id="collect-form"') < html.indexOf('class="device-settings-panel"'));
+  assert.ok(html.indexOf('id="collect-form"') < html.indexOf('id="mobile-device-name"'));
+  assert.ok(html.indexOf('id="offline-status"') < html.indexOf('id="mobile-server-url"'));
+  assert.match(html, /<details class="device-settings-panel">/);
+  assert.match(css, /\.device-settings-panel/);
+  assert.match(css, /\.mobile-status-stack/);
+  assert.match(css, /#collect-button\s*\{/);
+});