前言¶
DSH（DeepSeek Harness）的設置面板由多個插件拼裝而成。在歷史上，不同來源的頁面往往使用不同的字體大小、卡片圓角和控件樣式，導致界面視覺割裂。爲了改善這種體驗，需要一套標準化的設計語言來統一所有設置頁面的視覺表現。
這是什麼¶
dsh-settings-beautify 是一個 Headless 插件，爲 DSH 設置界面提供單一的設計語言。它不包含導航入口，而是通過觀察設置面板的結構並標記 DOM 元素，應用一套統一的樣式規則。
核心功能¶
該插件主要實現以下目標：
- 統一排版：所有頁面的標題、解釋、條目標題和正文字號保持一致。
- 三層結構：定義了統一的層級結構：標題 → 解釋 → 內容。
- 統一控件：卡片、行控件、標籤、滾動條和焦點狀態（Focus Ring）在所有頁面上樣式一致。
- 擴展性：支持通過
data-dshb-scan屬性，讓第三方插件貢獻的頁面也接入這套設計語言。 - 動畫支持：微交互動畫會自動檢測系統的
prefers-reduced-motion設置。
安裝與啓用¶
該插件遵循 DSH 的社區市場包約定，可以通過插件市場或命令行安裝。
- 執行安裝命令：
dsh plugin --profile <profile> add dsh-settings-beautify
- 安裝完成後，重啓 DSH Desktop（或刷新 Web 窗口），設計語言會自動生效。
典型用法¶
由於插件是 Headless 的，它不會在設置導航欄增加新條目。你可以通過以下方式配置或擴展它：
- 啓用第三方頁面：在第三方頁面的根元素上添加
data-dshb-scan屬性，即可啓用統一設計語言。 - 調整偏好設置：偏好設置存儲在瀏覽器的
localStorage中。打開瀏覽器控制台，可以使用window.DSHB.setPrefs方法調整密度和動畫開關：
// 設置爲緊湊密度
window.DSHB.setPrefs({ density: "compact" });
// 禁用動畫
window.DSHB.setPrefs({ motion: false });
適用場景與注意¶
- Headless 模式：插件本身不提供設置頁面，偏好數據僅保存在
localStorage的dsh-settings-beautify:prefs鍵下。 - 兼容性：當前適配版本爲 DSH 0.1.7-rc.2，無需修改 DSH 源碼即可運行。
- 覆蓋範圍：支持 Shell（導航欄、頭部）、通用設置、模型配置、智能體預設、內置插件等頁面。
總結¶
該插件通過標準化樣式和屬性約定，解決了 DSH 設置界面碎片化的問題。通過簡單的安裝和屬性配置，即可提升整體視覺的一致性。
