DeepSeek Harness 背景圖片插件

DSH (DeepSeek Harness) 的界面默認風格較爲簡潔。如果你希望在開發或演示時，將界面背景替換爲自定義圖片或漸變，以獲得更沉浸的視覺體驗，可以使用 dsh-plugin-background-image。該插件由 Voyage-He 維護，基於 MIT 許可證開源。

插件概覽¶

該插件允許你將 Web 圖片、本地圖片或預設漸變設置爲 DSH 的界面背景。除了基礎的圖片切換，它還提供了圖片不透明度、顯示範圍、毛玻璃模糊、分區域透明度以及聊天內容偏移等細粒度控制。

安裝¶

使用官方提供的安裝命令進行添加。將 <profile> 替換爲你使用的 DSH 配置文件名稱。

npx @deepseek-ai/dsh plugin --profile <profile> add dsh-plugin-background-image

安裝完成後，使用相同的 profile 啓動 DSH，插件將自動加載。

核心功能¶

1. 資源支持¶

插件支持三種類型的圖片資源：
* Web 圖片：支持 http:// 或 https:// 鏈接。
* 本地圖片：使用絕對路徑（例如 /Users/name/Picture.png）。
* Data URL：直接嵌入的 Base64 數據。

2. 本地圖片失效檢測¶

插件會在頁面加載以及打開設置頁面時自動探測本地圖片路徑。如果文件被移動或刪除，界面會提示你需要重新選擇圖片。本地文件路徑僅被記錄，不會被複制或移動。

3. 漸變預設¶

提供了一套預設的漸變色板，包括 Aurora、Sky、Sakura、Sunset、Mint 和 Ocean，方便快速切換風格。

4. 顯示範圍與沉浸式模式¶

你可以選擇背景的顯示範圍：
* 沉浸式全屏：背景覆蓋整個頁面。
* 僅對話區域：背景僅顯示在對話列表和撰寫框所在的區域。

5. 毛玻璃效果與飽和度¶

側邊欄與卡片：側邊欄和撰寫器卡片支持毛玻璃模糊和顏色飽和度調節。
對話區域獨立控制：對話區域擁有獨立的模糊強度（0–48 px）和不透明度（0–100%）設置。默認情況下爲透明且無模糊，以保留原有設置。

6. 分區不透明度¶

側邊欄、對話區域和撰寫器的不透明度可以分別調節。注意，側邊欄的不透明度設置僅在沉浸式全屏模式下生效。

7. 聊天內容偏移¶

通過左右偏移聊天內容（消息列表 + 撰寫框，支持 ±320px），可以在不改變列寬的情況下，更好地展示背景圖片的細節。

配置與持久化¶

所有設置都會自動保存到 settings.yaml 文件中，並在刷新頁面或重啓 DSH 後自動恢復。

配置示例¶

插件會在配置文件中生成 background-image 節點。以下是配置結構的示例：

background-image:
  enabled: true
  mode: fullscreen
  opacity: 0.9
  image: https://example.com/background.webp
  blur: 12             # 毛玻璃模糊強度（側邊欄和卡片），0 爲關閉
  conversationBlur: 0 # 對話區域獨立模糊（0-48 px）
  conversationOpacity: 0 # 對話區域獨立不透明度（0-1）
  saturation: 1.4      # 毛玻璃顏色飽和度
  sidebarOpacity: 0.5  # 側邊欄不透明度（全屏模式）
  composerOpacity: 0.72 # 撰寫器不透明度
  contentOffset: 120   # 內容水平偏移（px），正數爲右，負數爲左

本地圖片加載機制¶

由於瀏覽器安全策略，無法直接加載 file:// 資源。插件會在宿主註冊一個只讀的文件服務路由（GET /plugins/background-image/file?path=<絕對路徑>），通過同源 HTTP 協議向頁面返回本地圖片。該路由僅接受迴環地址，且只服務於當前配置中引用的路徑。

已知限制與注意事項¶

全局背景 Token 覆蓋：插件會覆蓋 DSH 的全局背景 token --dsw-alias-bg-base。雖然插件會強制將已知面板/按鈕設爲表面色，但未來 DSH 更新中新增引用該 token 的元素可能需要後續調整。
內部類名依賴：毛玻璃效果和內容偏移依賴於 DSH 的內部哈希類名（如 .pI_x6G_frame）。如果 DSH 版本更新導致類名變更，相關效果可能會失效或錯位。
側邊欄毛玻璃實現：側邊欄的毛玻璃效果通過僞元素（.pI_x6G_sidebarCol::before）實現，而非直接應用在側邊欄容器上。這種實現方式避免了 backdrop-filter 在包含 position: fixed 子元素時可能出現的渲染問題。

總結¶

dsh-plugin-background-image 爲 DSH 提供了從基礎圖片切換到精細化 UI 定製的完整能力。對於需要定製界面風格、進行演示或增強沉浸感的用戶，這是一個實用的工具。

GitHub 倉庫: https://github.com/Voyage-He/dsh-background-image
插件目錄: https://www.skillhub.cn/plugins/Voyage-He/dsh-background-image