From 2f70a6627e235627a93e67dc45f9a07d5e715a12 Mon Sep 17 00:00:00 2001
From: yuming <yuming@baijia.com>
Date: Thu, 23 Apr 2026 08:59:58 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E6=89=8B=E6=9C=BA=E9=A1=B6=E9=83=A8?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA=E5=88=86=E4=B8=A4=E8=A1=8C=EF=BC=8C=E8=A7=A3?=
 =?UTF-8?q?=E5=86=B3=E6=96=87=E5=AD=97=E8=A2=AB=E6=8C=A4=E5=8E=8B=E7=AB=96?=
 =?UTF-8?q?=E6=8E=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 module/templates/index.html | 43 ++++++++++++++++++++++++++++---------
 1 file changed, 33 insertions(+), 10 deletions(-)

diff --git a/module/templates/index.html b/module/templates/index.html
index 48f8e11..b27085f 100644
--- a/module/templates/index.html
+++ b/module/templates/index.html
@@ -582,18 +582,41 @@
 
     /* 响应式：手机适配（≤ 768px） */
     @media (max-width: 768px) {
+      /* 顶部导航变两行，把 --hdr-h 调大供 formbar margin 跟随 */
+      :root { --hdr-h: 88px; }
+
       /* 页面滚动交给整页而非固定容器，避免 fixed 高度硬编码 bug */
       html, body { height: auto; }
 
-      /* 顶部导航压缩 */
-      .hdr { padding: 0 10px; gap: 8px; }
-      .hdr-brand { font-size: 13px; }
+      /* 顶部导航：允许换行，分两行显示，防止文字被挤压竖排 */
+      .hdr {
+        height: auto;
+        min-height: var(--hdr-h);
+        flex-wrap: wrap;
+        padding: 6px 10px;
+        gap: 8px;
+        align-items: center;
+      }
+      .hdr-brand { font-size: 13px; flex-shrink: 0; }
       .hdr-brand small { display: none; }
-      .hdr-stats { gap: 10px; }
-      .hstat-v { font-size: 12px; }
-      .hstat-l { font-size: 9px; }
-      .btn-pause { padding: 4px 10px; font-size: 11px; }
-      .state-pill { padding: 2px 6px; font-size: 11px; }
+      .hdr-divider { display: none; }
+      .hdr-right { margin-left: auto; gap: 6px; flex-shrink: 0; }
+      .state-pill { padding: 3px 8px; font-size: 11px; white-space: nowrap; flex-shrink: 0; }
+      .btn-pause { padding: 5px 12px; font-size: 11px; white-space: nowrap; flex-shrink: 0; }
+
+      /* 统计数字独占第二行（order: 5 让它换到 brand/right 之后） */
+      .hdr-stats {
+        order: 5;
+        flex-basis: 100%;
+        width: 100%;
+        gap: 0;
+        padding-top: 6px;
+        border-top: 1px solid var(--border);
+        justify-content: space-around;
+      }
+      .hstat { text-align: center; white-space: nowrap; }
+      .hstat-v { font-size: 13px; white-space: nowrap; }
+      .hstat-l { font-size: 10px; white-space: nowrap; margin-top: 1px; }
 
       /* 表单栏：取消固定定位，改为跟内容一起滚；字段全占满宽度 */
       .formbar {
@@ -655,8 +678,8 @@
       .wiz-title { font-size: 15px; }
       .ws-num { width: 22px; height: 22px; font-size: 10px; }
 
-      /* Toast 通知全宽居中 */
-      .toasts { top: 56px; right: 8px; left: 8px; }
+      /* Toast 通知全宽居中（避开变高的 hdr） */
+      .toasts { top: calc(var(--hdr-h) + 6px); right: 8px; left: 8px; }
       .toast { font-size: 12px; }
     }
   </style>