在 DeepSeek Harness (DSH) 的 WebUI 使用場景中，除了模型交互，開發者往往需要定製界面風格。傳統的主題修改可能需要覆蓋大量代碼。這裏介紹一個純展示層插件，它通過 Canvas 動畫和細粒度的 CSS 部件拆分，在不改變底層服務邏輯的前提下，爲 DSH WebUI 提供了“錦鯉池塘”的視覺體驗。
插件介紹¶
這是一個名爲 dsh-skin-koi-pond 的 DSH WebUI 主題插件，由 Kogisune 維護，採用 MIT 許可證。它通過 Canvas 動畫和 7 部件 CSS 拆分結構，爲 WebUI 提供了“錦鯉池塘”的視覺意象，支持亮暗雙主題。
核心功能¶
該插件主要提供以下能力：
- 錦鯉池塘動畫：基於 Canvas 2D 實現錦鯉的聚羣、對齊、分離行爲，支持鼠標驅趕。當頁面隱藏時動畫自動暫停。
- 亮暗雙主題：提供“池塘夜色”（深色）和“宣紙日色”（淺色）兩套主題。
- 視覺遮罩：背景採用 15% 白色遮罩加 3px 模糊，柔化動畫並突出前景 UI。
- 部件拆分 CSS：採用 7 部件拆分（background / sidebar / titlebar / composer / overlay / fonts / ui）結構，覆蓋 DSH 官方設計令牌。
- 輔助色：提供金鱗、荷葉、水光藍等配色輔助。
- 純展示層：不注入服務、不發 Cordis 事件、不觸達模型請求，僅覆蓋設計令牌。
安裝與啓用¶
作爲 DSH 插件安裝，執行以下命令：
dsh plugin --profile web add github:Kogisune/dsh-skin-koi-pond
安裝後需重啓 DSH Web 服務以使配置生效。
使用方法¶
實時切換配色¶
在 DSH WebUI 的瀏覽器控制台中調用 __koiSetScheme 接口可實時切換錦鯉配色，該操作不會重建魚羣：
__koiSetScheme('ogon')
構建主題¶
若需修改 CSS 或源碼，需運行構建命令：
node scripts/build.mjs
注意事項¶
- 依賴：依賴
@deepseek-ai/cordis(^4.0.1)。 - 無障礙：支持
prefers-reduced-motion，會自動降級爲靜態渲染。 - 生效時機：修改 CSS 或源碼後必須重新運行
node scripts/build.mjs，DSH 加載的是lib/構建產物。 - 權限範圍：作爲純展示層，它不會干擾模型請求和 Cordis 事件。
