[doubao01]

问题

desktop-tauri/ui/css/mobile.css（42KB）和 mobile-columns.js 里有一套完整的真机移动端适配：侧栏抽屉化、四张表卡片化、面板头两行制、表格页脚整行铺开、面包屑收窄、设置页导航转横条、报表排行卡改两行。

但 index.html 从未引用这两个文件，它依赖的三个元素 #nav-toggle / .nav-scrim / .mobile-menu-btn 在 DOM 里也不存在 —— 整层适配是写好忘了接线的孤儿文件。

旁证：app.js:166 已经在做「切页后收起抽屉」

{ const t = document.getElementById('nav-toggle'); if (t) t.checked = false; }

但 #nav-toggle 不存在，这行一直是 no-op。

真机 ≤767px 的实际症状（360×770 实测）

现象	实测数据
顶栏页名被压成一字宽、竖排	.crumb .cur 报表 h=34px、网络代理 h=69px
五张表的页脚控件被整块裁掉	.table-foot-ctl right=539~627px，被 .panel 的 overflow:clip 裁掉
面板头分段控件被裁	.head-actions 内控件 right=376 > 视口 360
代理页 11 档分段控件被裁	right=414 > 视口 360
侧栏恒占 68px（19% 屏宽）且无收起入口	—

根因：面板只有 ≤900px（侧栏收成图标）和 ≤767px（放开固定视口）两个断点，但没有一条规则处理「内容比容器宽」，而 .panel 用 overflow:clip（不可滚动，注释里写明是为规避滚动锚定）——越界内容被静默裁掉。

改动（纯接线，不改既有逻辑，55 行新增、0 删除）

1. index.html 引入两个孤儿文件

• css/mobile.css 放在 islands/ui.css 之后 —— 组件库 Tailwind utilities 带 !important，mobile.css 靠级联顺序压住它们（例如强制关掉 JS 写进表格的 min-width）
• mobile-columns.js 放在最后 —— 它要把 th[data-col] 写进对应 td，得等岛屿渲染完

2. index.html 补齐 mobile.css 依赖的三个元素

• #nav-toggle 必须是 .sidebar 的前序兄弟 —— #nav-toggle:checked ~ .sidebar 靠这个相邻关系开合，位置放错抽屉就打不开
• .nav-scrim 遮罩放在 .sidebar 之后（同为 .shell 直接子元素）
• .mobile-menu-btn 汉堡放在 .topbar 内，用 <label for> 而不是 button —— mobile.css 的注释明确写「汉堡 label 与遮罩 label 都指向 #nav-toggle」，纯 CSS 开合不需要 JS
• 三者桌面端都靠 position:absolute / display:none 不占位。.shell 是「2 列 + 100vh」的 grid，多一个在流内的子元素会多出一个隐式行、把富余高度分走一半（mobile.css 顶部注释专门警告过这条）

3. css/mobile.css 补一条分段控件通用兜底

mobile.css 原来只在 .toolbar .group 和 .mm-filters 里处理分段控件。但网络代理页的筛选行（proxies-page.tsx 里一个裸 div.flex.flex-wrap，没有这两个标识）中的 11 档分段控件自身 362px 宽，比 288px 容器还宽 —— 容器 flex-wrap:wrap 只对直接子项生效，而它就是单个子项，换行帮不上忙，于是被 .panel 裁掉右端（实测 right=414 > 视口 360，「订阅 / 全部」等档位看不见也点不到）。

改成让 [data-slot="segmented-control"] 自己成为滚动盒，任何父容器下都不溢出。档位少时 overflow-x:auto 不产生滚动条，视觉与原来一致；档位多时在控件内部横滑。

验证

360×770 视口，逐页量元素盒模型并向上追溯第一个非 visible 的祖先，区分「被裁切」与「可在容器内横滚」：

• 接线前：报表 / 账号 / 模型 / 代理 / Key / 请求 / 日志 7 个页面均有被裁切项
• 接线后：12 个页面全部无裁切
• 文档宽度从被 min-width:720px 撑开到 720px，恢复到视口宽 360px
• 抽屉开合、遮罩关闭、切页收起均正常（截图确认侧栏滑入并显示完整导航文案）

未验证 / 边界

• 量测在桌面内核 + 360×770 节流视口完成，未在真机 WebView 上复核字体度量差异
• 768–900px 平板区间：本补丁的抽屉与卡片化锁在 ≤767px，该区间仍是「68px 图标侧栏」，属既有设计，未改动
• 分段控件改为横滚后，选中态滑块随内容滚动，属预期行为