From a2becdbb646abe3812b850e57d3f11288d02d3d8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 26 Jul 2026 19:06:11 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E4=BF=AE=E5=A4=8D=E6=97=A5?=
 =?UTF-8?q?=E5=BF=97=E9=A1=B5=E7=BB=9F=E8=AE=A1=E6=9D=A1=E7=AA=84=E5=B1=8F?=
 =?UTF-8?q?=E6=96=87=E5=AD=97=E9=87=8D=E5=8F=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

日志页「范围 / 统计条」在窄屏（移动端）下，统计文字会压到右侧「自动清理超过 N 天
的日志」上。原因是该条为单行 flex justify-between：左侧分组带 min-w-0 会被压缩，
但其中的计数 span 是 shrink-0，被压缩后内容溢出自身盒子并直接画到右侧分组上——
是溢出，而不是换行或截断，所以两段文字叠在一起。

改为窄屏竖向堆叠（md 以上仍是原来的单行左右分布）：两个分组各 w-full 独占一行，
长文本才能在行内截断；「自动清理」分组允许换行，避免超窄屏横向溢出。同时给
「当前 / 实时」两个徽标补 shrink-0 whitespace-nowrap，避免被挤成两行折字；统计
分隔符从全角「，」改为「 ·」，与顶栏一致，在非中文语言下更易读。

真实构建下用 Playwright 复现与验证（vi-VN，400px 宽）：修复前两段文字 X 轴重叠
57.6px、Y 轴完全重叠；修复后 400/360/1280 宽在浅色与深色主题下均无重叠、无横向
溢出，桌面端布局不变。

Co-authored-by: RenjiYuusei <daoluc.yy@gmail.com>
---
 .../routes/Logger/LoggerMobile.test.tsx       |  9 ++++++++
 src/pages/options/routes/Logger/index.tsx     | 21 +++++++++++++------
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/pages/options/routes/Logger/LoggerMobile.test.tsx b/src/pages/options/routes/Logger/LoggerMobile.test.tsx
index ed037fec3..6dc7661f0 100644
--- a/src/pages/options/routes/Logger/LoggerMobile.test.tsx
+++ b/src/pages/options/routes/Logger/LoggerMobile.test.tsx
@@ -84,6 +84,15 @@ describe("日志页面 - 移动端", () => {
     expect(msg.className).not.toContain("truncate");
   });
 
+  it("移动端范围/统计条竖向堆叠，统计与自动清理各自独占整行", () => {
+    renderPage();
+    const bar = screen.getByTestId("logger-stats-bar");
+    expect(bar.className).toContain("flex-col");
+    // 两组必须撑满整行:否则长文本会溢出自身盒子压到相邻分组上(窄屏文字重叠)
+    expect(screen.getByTestId("logger-stats-summary").className).toContain("w-full");
+    expect(screen.getByTestId("logger-clean-schedule").className).toContain("w-full");
+  });
+
   it("仍渲染全部日志且筛选交互可用", () => {
     renderPage();
     expect(screen.getByText("retry timeout reached")).toBeTruthy();
diff --git a/src/pages/options/routes/Logger/index.tsx b/src/pages/options/routes/Logger/index.tsx
index 66c65a59d..78c17b738 100644
--- a/src/pages/options/routes/Logger/index.tsx
+++ b/src/pages/options/routes/Logger/index.tsx
@@ -216,28 +216,37 @@ export default function Logger() {
       </div>
 
       {/* 范围 / 统计条 */}
-      <div className="flex items-center justify-between gap-2 min-h-[34px] px-4 py-1 md:py-0 shrink-0 border-b border-border bg-muted/40 text-xs">
-        <div className="flex items-center gap-2 min-w-0 text-fg-secondary">
+      <div
+        data-testid="logger-stats-bar"
+        className="flex flex-col gap-1 min-h-[34px] px-4 py-1.5 shrink-0 border-b border-border bg-muted/40 text-xs md:flex-row md:items-center md:justify-between md:gap-2 md:py-0"
+      >
+        <div
+          data-testid="logger-stats-summary"
+          className="flex w-full items-center gap-2 min-w-0 text-fg-secondary md:w-auto"
+        >
           <span className="truncate font-mono">
             {`${formatUnixTime(range.start / 1000)} → ${formatUnixTime(range.end / 1000)}`}
           </span>
           {isNow && (
-            <span className="rounded-full bg-primary-light px-1.5 py-0.5 text-[11px] font-medium text-primary">
+            <span className="shrink-0 whitespace-nowrap rounded-full bg-primary-light px-1.5 py-0.5 text-[11px] font-medium text-primary">
               {t("logs:now")}
             </span>
           )}
           {refreshInterval !== "off" && (
-            <span className="inline-flex items-center gap-1.5 rounded-full bg-success-bg px-1.5 py-0.5 text-[11px] font-medium text-success-fg">
+            <span className="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-success-bg px-1.5 py-0.5 text-[11px] font-medium text-success-fg">
               <span className="h-1.5 w-1.5 rounded-full bg-success" />
               {`${t("logs:live")} · ${getIntervalLabel(refreshInterval, t)}`}
             </span>
           )}
           <span className="text-muted-foreground">{"·"}</span>
           <span className="shrink-0">
-            {`${t("logs:total_count", { count: logs.length })}，${t("logs:filtered_count", { count: filtered.length })}`}
+            {`${t("logs:total_count", { count: logs.length })} · ${t("logs:filtered_count", { count: filtered.length })}`}
           </span>
         </div>
-        <div className="flex items-center gap-1.5 shrink-0 text-muted-foreground">
+        <div
+          data-testid="logger-clean-schedule"
+          className="flex w-full flex-wrap items-center gap-1.5 text-muted-foreground md:w-auto md:flex-nowrap md:shrink-0"
+        >
           <span>{t("logs:clean_schedule")}</span>
           <input
             type="number"