前言¶

DeepSeek Harness (DSH) 的界面主要由插件動態渲染。如果需要對界面樣式做精細調整，傳統方式往往需要修改源碼或重新構建。dsh-custom-css 插件在設置行裏提供了一個類似瀏覽器 DevTools 的 CSS 編輯器，樣式表直接對應磁盤上的文件，支持寫完即生效，解決了界面定製與開發環境割裂的問題。

是什麼¶

這是一個 DSH profile 插件（Host 側 + 瀏覽器側），無構建步驟即可運行。

• 維護者：FOX4096
• 開源協議：MIT
• 兼容版本：DSH 0.1.2-rc.1 ~ 0.1.5-rc.1
• 核心價值：在設置行提供 CSS 編輯入口，文件與磁盤雙向同步。

核心功能¶

插件提供了一套完整的樣式編寫與管理工作流。

DevTools 風格的編輯體驗¶

編輯器模仿了瀏覽器 DevTools 的 Styles 標籤頁：
* 基礎功能：支持行號 gutter、語法高亮（註釋、選擇器、屬性、值）、撤銷重做、查找替換（Ctrl+F，支持大小寫切換）。
* 智能輸入：輸入時彈出屬性補全列表，補全數據來自瀏覽器的 CSSStyleDeclaration.prototype。
* 格式校驗：支持一鍵格式化，僅重排行，不修改內容。
* 規則面板：點擊左側選擇器可展開右側面板，支持重命名選擇器、添加屬性、查看摘要。

文件管理與同步¶

• 多文件管理：樣式表保存在 ~/.dsh/custom-css/ 目錄。
• 即時生效：編輯器內容會在防抖 400ms 後寫入磁盤並重繪頁面。
• 雙向同步：
  1. 編輯器 -> 磁盤：在編輯器中保存，或使用 Ctrl/Cmd+S 立即寫盤。
  2. 磁盤 -> 編輯器：編輯器會監聽目錄變化（通過文件的修訂號 size 和 mtime 判斷），當外部修改文件時，編輯器會提示是否重新載入。
• 歷史版本：每次覆蓋寫盤前會生成快照，保存在 .history/ 目錄下，最多保留 20 份，支持從「更多操作」中回退。

輔助工具¶

• 元素拾取器：點擊界面元素，生成跨版本儘量穩的選擇器，並將實際生效的令牌寫成聲明。
• 屬性字典：內置 112 條屬性字典，支持中文名值下拉、簡寫屬性（如 margin、padding）的分量輸入。
• 明暗自適應：界面支持跟隨 DSH 的明暗主題自動調整。

安裝與啓用¶

插件通過 DSH profile 機制加載。啓用後，在 DSH 的「設置 → 通用」界面的「外觀」下方，會新增一行「自定義 CSS」。

典型用法¶

1. 在 ~/.dsh/custom-css/ 目錄下創建或編輯 .css 文件。
2. 在 DSH 界面找到「自定義 CSS」一行，點擊進入編輯器。
3. 編寫樣式或使用元素拾取器生成規則。
4. 保存後，樣式即刻應用到界面。

注意事項¶

• 插件通過 Host 側讀寫文件，請確保對該目錄有寫入權限。
• 查找功能爲純文本匹配，不支持正則表達式。
• 格式化功能僅調整排版，不會修改屬性值本身。
• 建議在安裝前檢查源碼與許可證。

結尾¶

對於需要頻繁調整 DSH 界面外觀的開發者或高級用戶，dsh-custom-css 提供了一個低門檻、高效率的定製方案。它將本地開發工具（文本編輯器、版本控制）與運行時調試（實時預覽）結合在了一起。