dsh-custom-logo：自定義 DeepSeek Harness 左上角品牌標識

前言¶

DeepSeek Harness（DSH）的 Web 界面默認在側邊欄左上角顯示 “deepseek harness” 字樣。對於需要展示特定項目名稱或公司品牌的場景，這是一個痛點。dsh-custom-logo 插件旨在解決這個問題，它允許用戶直接在原位替換品牌標識，且不依賴懸浮組件，對界面佈局的侵入性極低。

這是什麼¶

dsh-custom-logo 是一個獨立的 DeepSeek Harness 插件（profile-bundle 類型），由用戶 189-sketch 維護。它的核心作用是替換 DSH 默認渲染的 <BrandWordmark> 和 <FishLogo>，支持自定義圖片或文本，並通過內聯的配置句柄實現無干擾的設置體驗。

核心功能¶

該插件提供以下能力：

三種渲染模式
- Default：不進行任何替換，保持 DSH 原始樣式。
- Image：上傳圖片（PNG/SVG/JPG），客戶端限制大小 ≤ 256KB。
- Text：輸入自定義文本，支持樣式調整。
內聯配置句柄
- 懸停在左上角的品牌標識上，右側會出現一個淡入的 ⚙ 符號。
- 點擊該符號即可喚起設置面板，操作結束後面板自動關閉。
樣式控制
- 對齊方式：支持左對齊、居中、右對齊。
- 字體大小：10-48px 滑塊調節，雙擊滑塊可觸發“自動適應”模式。
- 顏色選擇：僅在文本模式下可用。
持久化與兼容
- 配置通過 localStorage 保存，刷新頁面後自動恢復，無需重新登錄。
- 摺疊安全模式：當 DSH 側邊欄摺疊至 rail 狀態時，插件會自動移除自定義內容，確保切換按鈕不被遮擋。
- Shadow DOM 隔離：設置面板的樣式被隔離在 Shadow DOM 中，不會污染 DSH 主界面的樣式。

安裝與啓用¶

通過一行命令即可安裝該插件。

dsh plugin --profile web add link:/path/to/dsh-custom-logo

安裝後，如果 DSH Web 進程正在運行，需要重啓進程或硬刷新瀏覽器（Ctrl+F5）以清除客戶端緩存並加載新插件。

典型用法¶

喚起設置
將鼠標懸停在 DSH 界面左上角的 “deepseek harness” 品牌標識上，直到右側出現 ⚙ 符號。
選擇模式
點擊 ⚙ 打開設置面板。在面板中選擇模式：
- Default：關閉面板，恢復原始狀態。
- Image：點擊上傳區域，選擇本地圖片（≤256KB），並設置對齊方式。
- Text：輸入品牌文字，設置顏色、字號和對齊方式。
驗證效果
配置更改即時生效。爲了確保在摺疊狀態下正常工作，可以摺疊側邊欄，檢查 rail 上的切換按鈕是否清晰可見。
重置
若需恢復默認，可在設置面板中點擊 “Reset” 按鈕。

注意與限制¶

渲染延遲：DSH 內部渲染機制可能導致品牌按鈕在重渲染時短暫消失，插件通過單例模式複用元素來緩解此問題，但首次加載後仍可能出現約一秒的不可見。
存儲範圍：配置存儲在 localStorage 中，按瀏覽器 profile 隔離，不同瀏覽器或 profile 之間無法共享。
圖片大小：客戶端通過 <input type="file"> 進行限制，最大支持 256KB 的圖片，超限將被截斷。
運行環境：該插件僅運行在瀏覽器端，不涉及 Node.js 或 SSR 環境。
生產構建：開發模式下可以使用 pnpm run watch，但在生產環境中沒有文件監視器，修改源碼後必須手動運行 pnpm run build。

總結¶

dsh-custom-logo 是一個輕量級的 UI 定製工具，適合需要在 DSH 側邊欄展示特定品牌信息的開發者。它通過內聯配置和 Shadow DOM 技術，在不破壞原有交互邏輯的前提下，提供了靈活的視覺替換方案。

插件目錄：dsh-custom-logo - SkillHub
源碼倉庫：189-sketch/dsh-custom-logo