dsh-gif-background

English | 中文

给 DeepSeek Harness（DSH）Web 界面添加自定义背景的独立插件：设置页一个开关 + 一个本地背景库（图片 / GIF / 动态壁纸），官方默认主题与 dsh-web-ui 皮肤中心两套显示机制，互不干扰。

功能

• 开启 / 关闭开关（localStorage 持久化，默认开启）。
• 背景库：添加（上传 gif / jpg / jpeg / png / webp，100 MB 上限）、删除、重命名、刷新；删除当前使用中的素材会自动回退到内置背景。
• 官方主题（无皮肤）：背景直接绘制到布局框架（AppFrame）自己的 background-image 上，并注入一套 rgba 半透明 token 覆盖让面板透出背景；内置背景走短 URL API——几 MB 的 base64 塞进 CSS 声明会被浏览器解析器静默丢弃。
• 皮肤模式：与 dsh-web-ui 皮肤中心的皮肤共存，背景层显示在皮肤面板后方，皮肤自己的配色不受影响。
• 素材 API 仅本机可用（loopback-only），不会暴露到外部。

安装

前置：DSH 0.1.x。安装后重启 dsh web，浏览器 Ctrl+F5。

从仓库安装（开发调试）

git clone https://github.com/alcohol-101/dsh-gif-background.git
dsh plugin --profile web add "link:"

从 npm 安装（发布后）

dsh plugin --profile web add dsh-gif-background

使用

设置 → 插件 → 「自定义背景」卡片：

• 勾选「开启背景」显示 / 隐藏背景；
• 「添加」上传本地图片或 GIF，上传后自动选中；
• 点击列表项切换背景；「rename」行内重命名（回车确认、Esc 取消）；「x」删除；
• 「刷新」重新扫描素材目录——也可以直接把文件放进 gifs/ 目录再点刷新。

工作原理

两套机制，按页面状态自动切换：

1. 官方默认主题（未启用皮肤中心的皮肤）：把当前背景画到 AppFrame 元素上，同时给 body 注入一套 rgba 半透明 token 覆盖（--dsw-alias-bg-base、-bg-layer-1/2/3、-bg-module-platform、--dsw-specific-sidebar-fill，亮 / 暗两套），面板变半透明后背景透出来。
2. 皮肤模式：只保留 z-index:-1 的全屏背景层 + 遮罩层，皮肤自己的半透明 #root 表面自然透出背景。

注意：dsh-web-ui 皮肤中心即使没有启用任何皮肤，也会在 `` 上常驻一个 data-dsh-skin-center 作用域属性。旧版本曾因此误判为皮肤模式，导致官方主题下背景不显示；现版本已把该属性加入白名单，只把皮肤自己的 body 属性当作皮肤。

目录结构

dsh-gif-background/
├── client/
│   ├── client.template.js   # 浏览器端源码（__GIF_BASE64__ 占位符）
│   └── build.mjs            # 构建脚本：把 gifs/builtin.gif 内嵌进 lib/client.js
├── lib/
│   ├── index.js             # 服务端：素材库 API（loopback-only）
│   └── client.js            # 浏览器端构建产物（已入库，link 安装无需构建）
├── gifs/
│   └── builtin.gif          # 内置背景（设置卡片上传的素材不入库）
├── cordis.patch.yml         # dsh bundle patch：声明插件行
└── package.json             # dsh.client 注入声明 + 导出