dsh-bg-image

August 14, 2026 · View on GitHub

给 DeepSeek Harness Web 界面（dsh web）添加自定义背景壁纸的客户端插件。

效果预览

  • 整页铺背景图（cover 铺满、居中、不重复），侧边栏 / 聊天区 / 详情面板呈半透明磨砂效果
  • 自动适配明/暗主题（基于主题颜色变量混合）
  • 带设置界面：设置 → 通用 → "背景图" —— 图片链接 / 本地图片 / 面板不透明度 / 磨砂模糊 / 恢复默认
  • 持久化在浏览器 localStorage（不写宿主配置、不改任何核心文件）

兼容性（先看这里）

  • 已验证的 dsh 版本：0.1.0-rc.6（web profile）
  • 插件 CSS 覆盖的目标类名带构建期哈希前缀（如 .pI_x6G_frame、.hHd-Xa_root、.wSkVaW_root）。 升级 dsh 大版本后这些类名可能变化，导致背景不生效 —— 修复方法：浏览器 F12 检查 实际类名，同步更新 lib/client.js 里 buildCss() 中的选择器即可。
  • 依赖的 dsh.client.inject 包（connection / runtime / locale / ui-settings / api-remotes） 是标准 web profile 自带项，无需额外安装。

安装

方式 A：从本仓库获取（推荐）

  1. 下载本仓库（绿色 Code 按钮 → Download ZIP，或 git clone https://github.com/lyh9712/dsh-bg-image.git）

  2. 把解压/克隆得到的 dsh-bg-image 文件夹放到目标机器的： $DSH_HOME\profiles\node_modules\@local\dsh-bg-image\ （@local 目录不存在就新建；$DSH_HOME 默认 ~/.dsh，或被环境变量 DSH_HOME 覆盖）

  3. 编辑 $DSH_HOME\profiles\web\cordis.patch.yml，追加：

    # dsh-bg-image：网页背景图插件
- insert:
    - id: bg-image
      name: '@local/dsh-bg-image'

  4. 重启 dsh web 服务，浏览器打开界面后按 Ctrl+F5 强刷。

方式 B：pnpm 安装（正规方式）

cd $DSH_HOME\profiles\web
pnpm add "file:<本仓库路径>"
# 或：dsh plugin --profile web add "file:<本仓库路径>"

安装后同样在 cordis.patch.yml 加注册行（步骤 A 的第 3 步），然后重启服务。

使用

打开 设置 → 通用 → 背景图：

控件说明
图片链接 + 应用填 https://… 或 data:image/…，回车或点"应用"
选择本地图片从本机选图，自动内嵌（建议 ≤ 3MB）
面板不透明度50–100%，越大文字越清晰、背景越不明显
磨砂模糊0–40px，越大越"毛玻璃"
恢复默认回到内置深蓝渐变示例图

设置实时生效并保存在当前浏览器，下次打开自动恢复。

卸载

  1. 删除 cordis.patch.yml 里的 bg-image insert 行
  2. 删除 $DSH_HOME\profiles\node_modules\@local\dsh-bg-image 目录
  3. 重启服务 + 刷新

文件结构

dsh-bg-image/
├── package.json      # dsh.client 声明：exports["./client"] + 注入清单
├── LICENSE           # MIT
├── lib/
│   ├── index.js      # 宿主端空实现（cordis loader 需要根导出）
│   └── client.js     # 浏览器端：设置行 UI + 样式注入 + localStorage
└── README.md

原理（给想折腾的人）

客户端插件机制：package.json 声明 "dsh": { "client": { "platform": "web" } }， exports["./client"] 指向浏览器 bundle。宿主把 bundle 编入 window.__DSH_BOOT__， 浏览器端 __ModuleLoader__ 实例化后，插件往 <head> 注入 <style data-plugin="…">， 用 !important 覆盖布局插件的背景规则（整页画布、侧边栏、聊天区、新建会话按钮、详情面板）。 设置界面通过 ctx.slots 注册到 settings.general.item 槽位（与官方主题插件同一机制）。