前言¶

做智能體開發，很多人一整天都開着 dsh Web UI。默認界面是靜態底色，看久了難免單調；想自己加個動態背景，就得改前端源碼、注入 canvas，還要處理容器透明化、主題可讀性和幀率控制，成本不低。

下面介紹的 dsh-plugin-backdrop 把這件事做成了插件：一條命令安裝，把 DeepSeek Harness 官網 hero 的完整氛圍——流體、字符鯨魚、發光魚羣、點線網格——注入 dsh Web UI 作爲動態背景。這也符合 dsh「一切皆插件」的思路，純前端增強同樣走插件通道。

這是什麼¶

dsh-plugin-backdrop 由 huguangyu666 維護，MIT 許可證，當前版本 0.1.2，已發佈到 npm。一句話定位：dsh Web UI 動態背景插件。

實現上是混合渲染：

• 流體背景沿用 WebGL2（原官網 GLSL 逆向）
• 鯨魚 / 魚羣用 Canvas 2D 預渲染精靈，全分辨率平滑渲染
• 點線網格沿用 Canvas 2D

環境要求：Node >= 22.5，peer 依賴 @deepseek-ai/dsh >= 0.1.0-rc.6，運行時依賴 three 0.150.1。想看完整技術原理，倉庫裏的 docs/ARCHITECTURE.md 與 docs/CANVAS_RENDERING.md 有說明。

四層背景分別是什麼¶

流體背景¶

WebGL2 flowmap 雙緩衝 + fbm/curl-noise 域扭曲，5 層深藍-暖金漸變，疊加自發光 bloom、跟隨鼠標 X 移動的虛擬光源、顆粒噪點和暗角。

字符鯨魚¶

視頻抽幀的遊動動畫：35 幀字符畫，~6fps 播放。整隻鯨魚在界面裏水平無縫漫遊、上下呼吸浮動，帶氣泡。

有個細節值得一提：視頻末幀與首幀不重合，循環重啓時鯨魚會被「拉回」。插件的處理是在接縫瞬間自動觸發一次賽博朋克故障爆發——白閃、RGB 色差、橫條撕裂、品紅殘影、掉幀跳變、掃描線、噪點——用故障效果把位置跳變蓋住。

發光魚羣¶

55 條預渲染平滑魚形精靈（4 配色 × 6 幀尾擺），魚羣中心沿弧線漫遊，魚在羣內繞圈跟隨，帶轉彎側傾、呼吸縮放、深度透明和氣泡。

點線網格¶

Canvas 2D 繪製：90px 點陣 + 鄰點連線，鼠標經過時產生波紋把點推開。

UI 融入與性能¶

背景要透出來，前提是 dsh 自己的頁面容器是透明的。插件在 apply() 時向 body 插入 .backdrop-root 容器（z-index:0、pointer-events:none）和覆蓋 CSS，不依賴 React；對已知類名的頁面級容器做透明化，再用全視口掃描兜底（覆蓋 ≥90% 視口且實底的容器置透明）。同時默認強制 dsh 官方暗色主題保證文字可讀性，實測對比度 9~19:1。

性能方面，四層全部 30fps 節流，視口外停幀、靜止自停，dpr 上限 1.5。

安裝與啓用¶

官方安裝（推薦）¶

# 安裝
dsh plugin --profile web add dsh-plugin-backdrop

# 卸載
dsh plugin --profile web remove dsh-plugin-backdrop

裝完重啓 dsh，刷新頁面即可。經過上面的步驟背景就會生效，但有三點注意：

1、官方命令內部會跑 pnpm，需要 pnpm 在 PATH；Windows 下若無代理 pnpm 會掛起，請給 HTTPS_PROXY 配置代理。
2、安裝和卸載都需要重啓 dsh，重啓會斷開當前會話，建議挑空閒時操作。
3、如果已經按下面「本地源碼開發」的方式手動掛載過 backdrop，不要再跑官方 add，否則報 duplicate loader entry id: backdrop。

本地源碼開發¶

改代碼想立即生效，先做鏈接，再掛配置：

1、用 junction 把 profile 目錄下的包名鏈接到本地源碼目錄：

New-Item -ItemType Junction -Path "$env:USERPROFILE\.dsh\profiles\web\node_modules\dsh-plugin-backdrop" -Target "C:\Users\www13\Documents\AAA項目集\dsh-plugins\dsh-plugin-backdrop"

2、編輯 ~/.dsh/profiles/web/cordis.patch.yml，加入：

- insert:
    - id: backdrop
      name: 'dsh-plugin-backdrop'

3、重啓 dsh web，刷新頁面。

快速預覽（不動正式實例）¶

前提是源碼已按上一節鏈接到 profile 目錄。先建一個 overlay 文件（如 C:\Users\www13\.dsh\profiles\web\overlay-backdrop.yml），內容就是上面那段 insert 片段，然後起一個獨立端口的實例：

dsh --patch "C:\Users\www13\.dsh\profiles\web\overlay-backdrop.yml" --profile web --port 3090

瀏覽器打開 http://127.0.0.1:3090/ 查看。注意：如果 cordis.patch.yml 已經包含 backdrop，不要再加 --patch，否則同樣報 duplicate loader entry id: backdrop，此時直接 dsh --profile web --port 3090 即可。

配置與調試¶

配置存 localStorage['dsh-backdrop-config']，首次加載用默認值；通過 window.__backdrop.setConfig() 修改會自動持久化。四層有獨立開關，整體透明度和各層參數均可調。

只要鯨魚、其他全關，在瀏覽器 F12 控制檯執行：

__backdrop.setConfig({
  layers: { fluid: false, whale: true, fish: false, grid: false },
  opacity: 0.8,
});

即時調參走同一個接口，改完立即生效並保存：

__backdrop.setConfig({
  whale: { swimSpeed: 2.2, glitch: { burstWidth: 0.08, noise: 0.8 } },
  fish: { count: 30, scaleMax: 0.8 },
  fluid: { interactive: true },
});

常用的調試 API：

window.__backdrop.toggleLayer('whale', false)   // 關鯨魚層
window.__backdrop.setOpacity(0.6)               // 整體透明度
window.__backdrop.config                        // 查看當前生效配置
window.__backdrop.dispose()                     // 卸載背景，還原主題與容器

鯨魚實例還暴露 pokeBurst()，可以手動觸發一次故障爆發，預覽頁有對應按鈕。

三個容易踩的點：

1、fluid.interactive（流體鼠標筆刷 flowmap）在聊天場景必須爲 false，否則會出現「一團光斑跟手」。想要鼠標劃出光痕的觀感再開。
2、themeMode 保持默認的 force-dark 才能保證文字可讀性。
3、whale.density/light/mouse/offsetRight 與 fish.density/light 是舊版 WebGL 瓦片參數，新版 Canvas 渲染已不使用，保留僅爲兼容舊配置；whale.src 換剪影僅舊版瓦片引擎支持，現已無效。想調鯨魚，調 whale.swim* 與 whale.glitch.* 即可。

適用場景與注意¶

適合誰：長時間開着 dsh Web UI、想要一點氛圍，又不想自己維護一套前端注入邏輯的人。四層都能獨立開關，聊天時把 opacity 調低可以減少存在感，只留一層鯨魚當掛件用也行。

安裝前注意：插件以當前 dsh 進程的權限運行，安裝前建議先到倉庫檢查源碼與許可證（本項目爲 MIT）；確認本機 Node >= 22.5、dsh >= 0.1.0-rc.6，並留意上一節的 pnpm 代理與重啓斷會話事項。

小結¶

dsh-plugin-backdrop 把「給 Web UI 加動態背景」壓縮成一條安裝命令加幾個控制檯調用：四層氛圍獨立開關，參數即時可調且持久化，性能有節流兜底。如果你平時用 dsh Web UI，值得裝來試試。

• GitHub 倉庫：https://github.com/huguangyu666/dsh-plugin-backdrop
• 社區目錄收錄頁：https://www.skillhub.cn/plugins/huguangyu666/dsh-plugin-backdrop （社區目錄爲獨立站點，與 DeepSeek / 幻方無官方從屬關係；該地址來自目錄線索，以站點實際收錄爲準）