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 設置面板在窄屏下的可用性問題。其樣式實現採用了標記化策略，對現有佈局干擾極小。