From b53f0a312fd183f05fd9735e5164892b7d6a5895 Mon Sep 17 00:00:00 2001
From: doubao01 <doubao01@users.noreply.github.com>
Date: Sat, 31 Oct 2026 14:03:11 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E6=8E=A5=E4=B8=8A=E8=A2=AB=E9=81=97?=
 =?UTF-8?q?=E6=BC=8F=E5=BC=95=E7=94=A8=E7=9A=84=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E9=80=82=E9=85=8D=E5=B1=82=20mobile.css=20/=20mobile-columns.j?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

css/mobile.css（42KB）与 mobile-columns.js 早已写好完整的真机适配：
侧栏抽屉化、四张表卡片化、面板头两行制、表格页脚整行铺开、面包屑收窄、
设置页导航转横条、报表排行卡改两行。但 index.html 从未引用这两个文件，
它依赖的三个元素 #nav-toggle / .nav-scrim / .mobile-menu-btn 在 DOM 里
也不存在 —— 整层适配是写好忘了接线的孤儿文件。

症状（真机 ≤767px）：
- 顶栏面包屑的当前页名被压成一个字宽，长页名（网络代理 / 请求日志）
  竖排堆叠，顶栏被撑高（实测 h=69px）
- 五张表的页脚控件组 .table-foot-ctl 是 flex:0 0 auto 不收缩，右溢出
  到 539~627px，被 .panel 的 overflow:clip 整块裁掉 —— 翻页 / 条数 /
  跳页控件看不见也点不到
- 面板头 .head-actions 里的分段控件比容器宽，同样被裁
- 侧栏恒占 68px（19% 屏宽）只显示图标，且点图标后没有收起入口

顺带发现 app.js:166 已经在做「切页后收起抽屉」
（document.getElementById('nav-toggle').checked = false），
但 #nav-toggle 不存在，这行一直是 no-op —— 也是接线遗漏的旁证。

改动（纯接线，不改既有逻辑）：
1. index.html：在 islands/ui.css 之后引入 css/mobile.css
   （必须排在其后 —— 组件库 Tailwind utilities 带 !important，
    mobile.css 靠级联顺序压住它们）；末尾引入 mobile-columns.js
2. index.html：补齐 mobile.css 依赖的三个元素
   - #nav-toggle 作为 .sidebar 的前序兄弟（:checked ~ .sidebar 靠这个
     相邻关系开合，位置错了抽屉打不开）
   - .nav-scrim 遮罩放在 .sidebar 之后（同为 .shell 直接子元素）
   - .mobile-menu-btn 汉堡放在 .topbar 内，用 <label for> 而非 button
   三者桌面端都靠 position:absolute / display:none 不占位 ——
   .shell 是「2 列 + 100vh」的 grid，多一个在流内的子元素会多出隐式行、
   把富余高度分走一半
3. css/mobile.css：补一条分段控件通用兜底
   mobile.css 原来只在 .toolbar .group 与 .mm-filters 里处理分段控件，
   但网络代理页的筛选行（proxies-page.tsx 的裸 div，没有这两个标识）
   里的 11 档分段控件 362px 宽 > 288px 容器，被 .panel 裁掉右端
   （实测 right=414 > 视口 360）。改成让 [data-slot="segmented-control"]
   自己成为滚动盒，任何父容器下都不溢出

验证（360×770 视口，逐页量元素盒模型 + 向上追溯裁剪祖先）：
接线后 12 个页面全部无「被裁切」越界；文档宽度从被 min-width:720px
撑开恢复到视口宽；抽屉开合、遮罩关闭、切页收起均正常。
---
 desktop-tauri/ui/css/mobile.css | 26 ++++++++++++++++++++++++++
 desktop-tauri/ui/index.html     | 29 +++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+)

diff --git a/desktop-tauri/ui/css/mobile.css b/desktop-tauri/ui/css/mobile.css
index 08c10f8ff..d2d9faaa1 100644
--- a/desktop-tauri/ui/css/mobile.css
+++ b/desktop-tauri/ui/css/mobile.css
@@ -893,3 +893,29 @@
   /* 签到页：全选 / 清空 小按钮 */
   .ck-mini-btn { min-height: 30px; }
 }
+
+/* ═══ 分段控件通用兜底：容器内横滚，绝不顶出父容器 ═══
+   上面只对已知容器（.toolbar .group / .mm-filters）做了「铺满 + 内部等分」。
+   但分段控件还会以裸奔形态出现在别的工具条里 —— 例如网络代理页的筛选行
+   （proxies-page.tsx 的 div.flex.flex-wrap.items-center.gap-2.5，没有
+   .toolbar 也没有 .mm-filters 标识）。那条容器 flex-wrap:wrap 只对它的
+   直接子项生效，而一个 11 档的分段控件自身就是 362px 宽的单个子项，
+   比 288px 的容器还宽 —— 换行帮不上忙，于是它被 .panel 的 overflow:clip
+   裁掉右端（实测 right=414 > 视口 360，「订阅 / 全部」等档位看不见也点不到）。
+
+   修法：让分段控件自己成为滚动盒。这样任何父容器下都不会溢出，
+   也不需要为每个新页面重新登记一次。档位少（放得下）时 overflow-x:auto
+   不产生滚动条，视觉与原来一致；档位多时在控件内部横滑。
+   注意不改 flex 值 —— 已铺满的容器里靠各自的 flex:1 1 0 等分，
+   这里再加 flex 会破坏那份等分。 */
+@media (max-width: 767px) {
+  [data-slot="segmented-control"] {
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;          /* Firefox */
+    -webkit-overflow-scrolling: touch;
+  }
+  [data-slot="segmented-control"]::-webkit-scrollbar { height: 0; }
+}
+
diff --git a/desktop-tauri/ui/index.html b/desktop-tauri/ui/index.html
index 9e8fdc8d7..42704d1d8 100644
--- a/desktop-tauri/ui/index.html
+++ b/desktop-tauri/ui/index.html
@@ -95,6 +95,13 @@
        排在最后：工具类带 !important（原因见 ui-kit/styles/globals.css 顶部），
        顺序其实已不影响结果，但保持「后加载的是更新的体系」这条阅读线索。 -->
   <link rel="stylesheet" href="islands/ui.css">
+  <!-- 移动端适配层（真机 ≤767px）：抽屉化侧栏、表格卡片化、面板头两行制、
+       页脚整行铺开、面包屑收窄。全部规则锁在 @media (max-width:767px) 内，
+       桌面端不生效。
+       必须排在 islands/ui.css 之后 —— 组件库的 Tailwind utilities 带 !important，
+       mobile.css 要用同等重要的声明压住它们（如强制关掉 JS 写进表格的
+       min-width），只能靠级联顺序取胜。 -->
+  <link rel="stylesheet" href="css/mobile.css">
   <!-- 多语言运行时：查表 t() + 静态文案扫描器（data-i18n 系列）。
        词典已由上面 head 里的引导脚本同步注入（document.write），这里只放运行时逻辑。
        必须排在 units.js / app.js 等业务脚本之前 —— 它们在加载期就可能读 window.wbI18n；
@@ -103,6 +110,12 @@
 </head>
 <body>
   <div class="shell">
+    <!-- 移动端抽屉开关（≤767px 生效，见 css/mobile.css）。
+         必须是 .sidebar 的前序兄弟：#nav-toggle:checked ~ .sidebar 靠这个相邻
+         关系开合，挪到 sidebar 后面就失效。桌面端靠 .nav-toggle-input 的
+         position:absolute 脱离文档流 —— .shell 是「2 列 + 100vh」的 grid，
+         在流内的多余子元素会多出一个隐式行、把富余高度分走一半。 -->
+    <input type="checkbox" id="nav-toggle" class="nav-toggle-input" aria-label="打开导航菜单">
     <!-- ─── 左侧导航 ─── -->
     <aside class="sidebar">
       <div class="brand">
@@ -177,9 +190,19 @@ <h1>Agent2API</h1>
       </div>
     </aside>
 
+    <!-- 抽屉遮罩：同为 .shell 的直接子元素、且在 .sidebar 之后
+         （#nav-toggle:checked ~ .nav-scrim 靠这个顺序生效）。
+         桌面端 display:none 彻底不占位，理由同上面的 input 注释。 -->
+    <label for="nav-toggle" class="nav-scrim" aria-label="关闭导航菜单"></label>
+
     <!-- ─── 主区域 ─── -->
     <main class="main">
       <header class="topbar">
+        <!-- 汉堡：label 指向 #nav-toggle，纯 CSS 开合（见 css/mobile.css）。
+             桌面端 .mobile-menu-btn 恒为 display:none，不占位。 -->
+        <label for="nav-toggle" class="mobile-menu-btn" aria-label="打开导航菜单">
+          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
+        </label>
         <div class="crumb">
           <span>Agent2API</span>
           <span class="sep">/</span>
@@ -604,5 +627,11 @@ <h1>Agent2API</h1>
   <!-- 数据结构升级弹窗：启动时问一次 /api/upgrade，有待迁移数据就弹。
        排在最后：它的 refreshPanels() 要调各面板的 load()，那些都得先挂好 -->
   <script src="upgrade-panel.js"></script>
+  <!-- 移动端卡片化的列名注入（配合 css/mobile.css）：把 th[data-col] / 表头文字
+       写进对应 td 的 data-col，供 td::before { content: attr(data-col) } 渲染。
+       只在 ≤767px 执行，桌面端不碰 DOM；监听所有 .page 子树（60ms 合并），
+       React 岛重渲染后自动补写。
+       排在最后：要等 islands/ui.js 把各页面挂好、且表头已在 DOM 里。 -->
+  <script src="mobile-columns.js"></script>
 </body>
 </html>