前言¶

DeepSeek Harness（dsh）的網頁設置面板默認寬度爲 800px。在移動端瀏覽器上查看時，這種固定寬度會導致佈局錯亂，控件難以操作。dsh-mobile-ui 插件通過 CSS 覆蓋技術，解決了這一問題，它將原本爲桌面端設計的模態框適配到移動端視口。

插件定位¶

dsh-mobile-ui 是一個 Responsive CSS override plugin（響應式 CSS 覆蓋插件）。它由 jackuh105 維護，旨在將 DSH 的桌面設置模態框適配到移動端視口。

核心功能¶

在視口寬度 ≤ 680px 的移動瀏覽器環境下，插件會自動調整佈局：

1. 將 800px 寬度的桌面模態框轉換爲全屏垂直表單。
2. 將左側 188px 的導航欄 rail 轉換爲頂部全寬、可水平滾動的標籤欄。
3. 將關閉按鈕固定在右上角。
4. 內容區域填充剩餘高度，支持獨立滾動並包含安全區域填充。
5. 允許常規設置行換行，避免控件被擠壓出屏幕。

安裝與啓用¶

安裝前需確認 dsh 的配置目錄是 pnpm workspace 根目錄，部分 pnpm 版本需要 -w 參數。

執行安裝命令：

dsh plugin --profile web add -w https://github.com/jackuh105/dsh-mobile-ui.git

安裝完成後重啓 web profile：

dsh web

驗證與使用¶

安裝生效後，可以通過以下方式確認：

1. 打開瀏覽器開發者工具，檢查 HTML <head>，確認包含 <style id="dsh-mobile-ui">。
2. 將桌面瀏覽器窗口寬度縮小至 680px 以下，打開設置面板，觀察佈局變化。

注意事項¶

1. 兼容性：當前 CSS 選擇器針對 dsh 0.1.0-rc.6 的結構。若 DSH 升級導致類名變更，可能需要更新插件內的選擇器。
2. 定製：如需修改斷點（例如將 680px 改爲其他值），可編輯 lib/index.js 中的 CSS 字符串，然後重啓 dsh web。

總結¶

通過引入此插件，開發者可以在移動端獲得更友好的 DSH 設置面板體驗。源碼及更新見下方鏈接。