dsh-settings-nav-collapse：DSH 设置面板的移动端导航折叠方案

前言¶

DSH（DeepSeek Harness）的随包设置面板采用固定布局：导航栏宽度为 188px，内容列宽度为 800px。这种布局在桌面端尚可，但在 360px 宽的手机等窄屏设备上，导航栏会占据过多空间，导致正文列实际可用宽度不足 76px，阅读体验极差。

dsh-settings-nav-collapse 是一个纯客户端插件，旨在解决这一问题。它通过在设置面板标题栏增加一个切换按钮，将左侧导航栏折叠为窄图标轨道，从而释放空间，让正文列在移动端恢复可读宽度。

标题栏切换按钮
在设置面板标题栏（关闭按钮左侧）增加一个按钮，可在“rail（56px 图标轨道）”和“展开”状态间切换。按钮图标随状态翻转，aria-pressed 属性反映实际生效状态。
响应式默认行为
- 窄屏（≤640px）默认折叠。
- 宽屏默认展开。
- 用户手动切换后，选择会被记住（存储在 localStorage["dsh.settingsNav"] 中）。
优雅降级
导航栏若无内联 SVG 图标，会自动退化为 compact 模式（88px、保留文字标签）。这避免了在窄屏下出现“一条什么也点不到的空白轨道”。
内容列滚动与高度适配
- 窄屏下，内容列变为可滚动视口（overflow:auto + overscroll-behavior:contain + 触摸惯性滚动）。
- 使用 dvh 单位，使面板高度避开浏览器地址栏和工具栏。
极窄屏画布与横向平移
极窄屏下，设置页会被限制在一个 480px 的画布内，并允许用户横向拖动，防止设置项被压成竖排单字。
样式隔离
插件仅在自己的标记上写样式（html[data-dsh-settings-nav] + 面板标记 data-dsh-settings-nav-panel），不依赖包内私有属性，不 import 官方 client 包，也不使用 !important。

使用 DSH 的插件管理器进行安装：

dsh plugin add @mengli114/dsh-settings-nav-collapse

安装完成后，重启一次 Web 客户端，打开设置面板，即可在标题栏右侧看到新增的折叠按钮。

项	要求
DSH 版本	`>=0.1.5-rc.1`
Node 版本	`^22.19.0 \\|\\| >=24.0.0`
浏览器特性	需要 `MutationObserver`、`matchMedia`、CSS `min()/max()`、`dvh`（不支持的引擎自动回退到 `vh`）

展开态的 480px 画布：有意为之。用户在窄屏手动展开时，正文列实际宽度可能仅约 92px，但插件仍按 480px 布局并允许横向拖动，以保证可读性。若希望展开态按实际宽度换行，需移除相关 CSS 规则。
横向平移无视觉提示：极窄屏下部分内容在屏外，需要用户自行横向拖动。
导航标题隐藏：rail/compact 模式下导航栏顶端的标题会被隐藏。但如果该节点带有 data-modal-autofocus（极端情况），插件不会隐藏它，以确保模态层的初始聚焦。
状态存储：状态保存在 localStorage，不同设备或浏览器会记录各自的偏好。

dsh-settings-nav-collapse 是一个针对移动端优化的实用工具，通过简单的折叠逻辑解决了 DSH 设置面板在窄屏下的可用性问题。其样式实现采用了标记化策略，对现有布局干扰极小。