前言¶

做智能体开发，很多人一整天都开着 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 / 幻方无官方从属关系；该地址来自目录线索，以站点实际收录为准）