前言¶
DSH 的插件機制允許以獨立插件形式擴展 Web UI。對於使用 DSH Web UI 的開發者或用戶，如果需要在手機端或窄屏窗口中操作，需要處理字號層級、觸控目標、輸入區、側邊欄、設置頁、消息區、統計行和 Markdown 表格等佈局問題。dsh-mobile-css 是一個移動端適配插件，通過純 CSS 注入和兩個輕量輔助腳本優化手機端體驗。
這是什麼¶
dsh-mobile-css 是 DeepSeek Harness（DSH）Web UI 的移動端適配插件。倉庫地址爲：
https://github.com/ook826092-cloud/dsh-mobile-css
倉庫路徑中的用戶名爲 ook826092-cloud。許可證爲 MIT License，package.json 中版本爲 1.0.0。
它通過官方鉤子注入：
WebServer.tapIndex()
整體方式爲純 CSS 注入 + 兩個輕量輔助腳本，零依賴、零源碼修改、隨時可卸載。
核心功能¶
字號、字體與觸控¶
- 緊湊字號體系與移動端字體棧。
- 安全觸控目標：獨立控件 ≥44px。
- 輸入框防安卓聚焦自動縮放。
輸入區¶
- 輸入卡全寬貼邊。
- 光標對齊修復。
- 模型名智能隱藏。
- 發送按鈕貼右。
側邊欄與設置頁¶
- 側邊欄抽屜式：展開覆蓋主界面、點擊遮罩關閉、收起時保留小圖標條。
- 設置頁兩頁式：全屏菜單頁跳轉全屏內容頁並支持返回。
消息區與統計行¶
- 用戶消息氣泡佔滿整行。
- 底部操作條換行完整顯示。
- 工具調用摘要允許換行。
- 統計行固定兩行顯示耗時+速度、緩存+Token。
Markdown 表格¶
- Markdown 表格長單元格內容自動換行。
觸發條件¶
- 觸發條件爲
pointer: coarse或視口 ≤1024px。 - 桌面端完全不受影響。
安裝與啓用¶
下面介紹已覈實的安裝方式。
從 GitHub 安裝¶
下面命令會將 dsh-mobile-css 添加到 web profile：
dsh plugin --profile web add github:ook826092-cloud/dsh-mobile-css
從包名安裝¶
下面命令用於添加同名插件包：
dsh plugin --profile web add dsh-mobile-css
手動 patch¶
不經過包管理器時，編輯以下文件並加入 insert 條目：
~/.dsh/profiles/web/cordis.patch.yml
- insert:
- id: dsh-mobile-css
name: "dsh-mobile-css"
然後安裝依賴並啓動：
cd ~/.dsh/profiles/web
pnpm add dsh-mobile-css
dsh web
啓用¶
經過上面的步驟後，按以下順序啓用：
1、重啓 dsh web。
2、瀏覽器硬刷新。
3、打開 DSH Web UI。
卸載¶
刪除 patch 中的 dsh-mobile-css 條目，然後重啓：
dsh web
該插件只注入 CSS 和兩個事件監聽腳本，無網絡請求、無憑證訪問、無文件系統操作。
典型用法¶
下面是在手機端驗證時可直接對照的步驟：
1、確認當前瀏覽器滿足 pointer: coarse 或視口 ≤1024px。
2、打開 DSH Web UI，查看輸入區、側邊欄、設置頁、消息區、統計行和 Markdown 表格。
3、如果某項未按移動端樣式顯示，先檢查觸發條件，再檢查 DSH Web 前端類名是否變化。
適用場景與注意¶
dsh-mobile-css 適合在移動端瀏覽器或窄屏窗口中使用 DSH Web UI 的場景。使用前注意以下事項：
- 適用於現代 Chrome / 系統瀏覽器；
:has()選擇器需要 Chrome 105+。 - 插件按 DSH Web 前端的 CSS Modules 類名選擇器編寫；DSH 升級後如個別選擇器失效，需複查對應類名。
- 許可證爲
MIT License，package.json中版本爲1.0.0。 - 該插件爲純 CSS + 兩個事件監聽腳本，無網絡請求、無憑證訪問、無文件系統操作。
- 若將其加入當前 profile，它會以當前
dsh進程權限運行；安裝前應檢查安裝來源、源碼和許可證。
結尾¶
經過上面的安裝與檢查，dsh-mobile-css 可以用純 CSS 注入和兩個輕量輔助腳本優化 DSH Web UI 的手機端佈局與觸控體驗。相關地址如下：
