dsh-plugin-background

DeepSeek Harness Web 界面背景插件：为 Web GUI 的四个界面区域绘制按区域独立的背景——对话区、轨迹区、侧边栏、设置页，灵感来自 VSCode 的 background 扩展。插件在设置 → 插件页注册自己的配置卡片（背景编辑器）。

功能

• 四个独立区域：对话区 / 轨迹区 / 侧边栏 / 设置页，各自独立的媒体组
• 单一媒体组：每组只含一种媒体——图片组像 PPT 一样轮播切换，视频组静音循环播放；不支持图片与视频混在同一组（混入的不同类型会被过滤并提示）
• 动态背景：支持 GIF 与常见视频格式（mp4/webm 等，静音循环播放，不发出任何声音）；视频按显示模式映射 object-fit（不支持平铺，界面自动禁用）
• 每图独立显示配置：填充 / 适应 / 拉伸 / 平铺 / 居中 / 自定义 + 详细参数（坐标 X·Y / 缩放% / 宽度 / 高度 / 重复 / 旋转° / 圆角px）
• 每图独立渲染配置：不透明度与模糊均为每张图独立配置（非区域级）
• 预加载 + Web Animations API 交叉淡入切换：任何图片切换（轮播、下一张、点击缩略图）都会先预加载并解码目标图片，再在两层叠层之间交叉淡入（450 ms）——不依赖 CSS transition，不受宿主样式覆盖影响。轮播会在半个间隔时提前预热下一张；若到设定时间仍未就绪，切换会等待加载完成，绝不出现切换瞬间图片缺失
• 本地图片不做 base64 打包：选中的文件以原始字节存入 IndexedDB，通过懒创建的 object URL 显示——选择即时、无容量爆涨、刷新后保留
• 中英文界面

表面	对话区 / 轨迹区 / 侧边栏 / 设置页 四个内置区域；安装 dsh-better-sidebar 后，其右侧/底部面板的每个标签页都是一个独立表面（按标签标题持久化，关闭后置灰保留、重开自动恢复；未安装时无任何面板行，不影响原版 DSH）
多表面同图	统一勾选模型：勾选多行后添加，同一批图同时落到所有勾选表面（各自独立副本，可分别微调）；点击行切换编辑对象
合并组	拖拽合并：把一个表面拖到另一个表面上 = 合并成一张大图（多显示器壁纸策略——画布为成员矩形并集外接框，每个成员渲染对应切片，随拖动/缩放实时重算；视频同样支持）；拖到组行 = 加入组；成员 chip × 或拖出 = 拆出；组 × = 解散（组图复制回成员）
媒体组	图片组像 PPT 轮播切换，视频组静音循环播放；不支持图片/视频混播
播放	间隔（0 = 暂停轮播，视频组则持续循环播放）、顺序/随机、下一张、n/m 位置；预加载 + 交叉淡入
图片来源	粘贴 URL（逗号分隔多张）、多选图片文件、或整个文件夹（不递归，仅直接子文件）
持久化	配置存 localStorage；本地图片字节存 IndexedDB（dsh-plugin-background 库）

安装

# 将 <插件仓库根>/background 替换为本插件的实际位置
dsh plugin --profile web add <插件仓库根>/background

然后在 profile 的补丁层挂载（$DSH_HOME/profiles/web/cordis.patch.yml）：

- insert:
    - id: ui-background
      name: dsh-plugin-background

安装后重启一次 Web 界面。此后每次重新构建只需硬刷新（Ctrl+Shift+R）。

构建

npm install          # 开发依赖：esbuild + typescript
npm run build        # esbuild 打包 → lib/client.js
npm run typecheck    # tsc --noEmit

src/ 为 TypeScript 源码；浏览器端被打包成单文件 module-loader bundle lib/client.js（构建产物，不提交仓库）。

使用

1. 打开 设置 → 插件 → 背景，展开配置卡片
2. 在表面列表中点击要配置的表面（对话区 / 轨迹区 / 侧边栏 / 设置页，以及 better-sidebar 面板的每个标签页）；勾选多行后添加 = 同一批图落到所有勾选表面
3. 粘贴图片或视频链接（逗号分隔多张），或从本地选择图片 / 视频文件 / 整个文件夹
4. 点击缩略图进入编辑器：显示模式、详细参数、每图不透明度与模糊
5. 设置轮播间隔与顺序/随机；间隔设为 0 暂停轮播（视频组则持续循环播放）
6. 添加即启用，随时可用「启用 / 停用」按钮切换
7. 合并：把一个表面行拖到另一个表面行上 = 合并成一张跨区域大图（每个成员显示画布的对应切片，标签切换 / 面板缩放时实时重算）；拖到组行或其成员行 = 加入组（组可含任意多个成员）；成员 chip × 或拖出 = 拆出；组 × = 解散（组图复制回各成员）

目录结构

background/
├── src/            TypeScript 源码（入口 entry.ts，服务 BackgroundService 在 service.ts）
├── lib/index.js    服务端 cordis 插件（惰性，负责挂载包）
├── lib/client.js   浏览器端 bundle（npm run build 生成）
├── build.mjs       esbuild 构建脚本
└── package.json    dsh.client 元数据 + 构建脚本

License

MIT