Hwayn-pixel/dsh-image-skin

dsh-image-skin 🦊

DSH（DeepSeek Harness）Web UI 的图像皮肤：为界面的大块区域换上你自己的图片——包括循环播放的视频背景——还能把可拖拽、可缩放的贴纸粘到侧边栏和输入框上。一切都在设置子菜单里配置，数据全部留在你自己的机器上。

这不是调色板适配器。 本插件绘制的是区域和贴纸（静态图片 / GIF / 视频）——它不会从一张图里采样来自动生成主题配色。GitHub 上有几个其他项目也叫 dsh-image-skin；这个是做区域和贴纸的那个。

中文说明见下方 中文。

关于 / About

这是一名学生的第一次开源项目（2026）。出于兴趣与学习而做，属于弱维护项目：欢迎提 issue / PR，但回复可能较慢，也没有路线图、发版节奏或支持承诺。欢迎使用、fork、学习——只是别把它当产品。

This is a student's first open-source project (2026). It was made for fun and to learn, and it is a low-maintenance project: issues and PRs are welcome, but replies may be slow, and there is no roadmap, release cadence or support commitment. Use it, fork it, learn from it — just don't expect a product.

功能特性

- 按区域设置图片——窗口背景（静态图片、GIF 或 mp4/webm 视频）、中间栏、侧边栏、欢迎 / 空状态、右侧面板、输入框区域。
- 按模式设置图片——设置页打开时有两个大按钮：浅色模式 / 深色模式，各自进入该模式下完全相同的菜单，因此浅色和深色可以完全分开配置。侧边栏底部 Settings 旁边的太阳/月亮开关用于切换真实的 DSH 主题，尺寸与 Settings 按钮一致。某个模式没有图片的区域会回退到共享图片，因此按模式支持之前的配置仍然可用。
- 平滑的模式切换——切换浅色/深色时会交叉淡入淡出：约 320 ms 内，带颜色的属性会在整个 UI 上过渡（插件自身的色调也会跟随），而按模式不同的壁纸会在两张图之间交叉淡入，而不是瞬间切换。
- 视频播放速率——一个滑块设置插件渲染的所有视频（窗口壁纸和贴纸视频）的播放速度，实时生效并在重启后保留。
- 两个可拖拽贴纸——把图片锚定到输入框座位或侧边栏列；拖动可移动，拖动角上的手柄可缩放。偏移量和缩放比例会保存在设置中。
- 面板不透明度滑块——让 DSH 自身的表面变半透明，使壁纸透出来。壁纸本身刻意不受此滑块变暗影响。
- 仅本地存储——上传的文件写入 $DSH_HOME/image-skin/，并通过 /dsh-image-skin/files/ 提供访问；不会上传到任何第三方。
- 自动清理——不再被任何区域引用的文件会被回收（每次图片变更后，以及通过设置页的清理未使用图片按钮）。
- 上传大小限制——读取请求体时强制 32 MB 上限，浏览器端还有 24 MB 预检查并显示错误提示。
- 完全可逆 — 禁用插件会移除它添加的每一个样式、贴纸、视频图层和注入元素。
- 可扩展 — 添加一个区域只需在宿主端的 IMAGE_AREAS 中添加一项，并在客户端端的
AREAS 中添加一项；设置架构、上传路由和子菜单行会自动跟进。

安装

DSH 通过一个配置文件（profile）来组合其 Web UI，而 dsh plugin 是该配置文件内对 pnpm 的
一层薄封装。

1. 从 npm 安装
dsh plugin --profile web add dsh-image-skin

...或从本地检出安装
git clone https://github.com/Hwayn-pixel/dsh-image-skin.git
cd dsh-image-skin
npm install
npm run build
dsh plugin --profile web add -w .

2. 重启 Web 宿主以重新组合配置文件
dsh --profile web --no-open

3. 硬刷新浏览器（Ctrl+F5）

随附的辅助脚本会为你完成步骤 1–2：node scripts/install.mjs --profile web
（添加 --dry-run 可预览它将运行的命令）。

用法

设置 → 图片皮肤 / Image skin。 每个区域一行，每行包含：

| 控件 | 含义 |
|---|---|
| 上传 | 图片、GIF、mp4 / webm（≤ 24 MB） |
| 启用 | 按区域开启/关闭 |
| 填充 | cover / contain / tile（仅限区域） |
| 编辑位置 / Edit position | 仅限贴纸 — 拖动以移动，角柄以缩放 |
| 面板不透明度 / Panel opacity | 一个滑块控制所有 DSH 表面 |

兼容性

针对 @deepseek-ai/dsh@0.1.5-rc.1 开发和测试。

DSH 是一个基于 Cordis 的应用：此插件是 Web 配置文件中的一行，贡献一个设置
命名空间（宿主端）和一个 settings.section 页面（浏览器端）。区域宿主通过
CSS 模块类名后缀（_centerCol、_sidebarCol、_hero、_pane、
_composerSeat 等）而非哈希前缀来定位，但它们仍是 DSH 内部实现：一个重命名它们的版本
可能会破坏区域定位。面板半透明会覆盖文档化的主题令牌
（--dsw-alias-bg-base、--dsw-alias-bg-layer-1/2、--dsw-alias-bg-overlay、
--dsw-specific-sidebar-fill、--dsw-specific-app-shell），除此之外不覆盖任何内容。

开发

npm install
npm run build       # src/index.ts -> lib/index.js（ESM 宿主半部分）
src/client/index.ts -> lib/client.js（浏览器半部分，ModuleLoader 格式）
npm run watch       # 变更时重新构建
npm run typecheck   # tsc --noEmit
npm test            # 离线宿主半部分测试套件（32 条断言，无 DSH 进程，无网络）

lib/ 是有意提交的 — DSH 加载构建后的半部分 — 而 prepublishOnly 会重新构建它，因此
已发布的产物永远不会与 src/ 产生偏差。

扩展

1. 在 src/index.ts 的 IMAGE_AREAS 中添加一个 id — 设置架构由它生成；
2. 在 src/client/index.ts 的 AREAS 中添加相同的 id 和一个标签；
3. 添加一个 REGION_SELECTORS 条目，如果它添加了 DOM，则在 disposeSkinDom() 中清理它。

作者 / Authors

- Hwayn（幻弈）— 作者 / author：设计、实现与主要代码。
- Yucheng Xiao（肖宇成）— 协作者 / contributor：方向、需求、测试，以及让这个项目得以公开。

许可证

MIT — 见 LICENSE。

中文说明
DSH（DeepSeek Harness）Web UI 的通用图片皮肤插件：只改「几个大块区域」，给窗口背景 / 中栏 /
侧边栏 / 欢迎页 / 右栏 / 输入区换上你自己的图片或视频，另外可以往侧栏和输入框贴两个能拖动、能缩放的角标。
配置全部在设置里，图片只存本机。

不是配色适配器。 本插件做的是「贴区域 + 贴角标」（静态图 / GIF / 视频），
不会拿一张图去自动生成主题配色。GitHub 上有几个同名的 dsh-image-skin 项目——
我们这个是「区域 + 角标」那个。

特性

- 按区域换图：窗口背景（支持 mp4/webm 循环视频）、中栏主区、侧边栏、欢迎页、右栏、输入区
- 两个角标贴图：可拖动定位、拖右下角圆点缩放，位置与缩放会存进设置
- 面板不透明度滑块：调低让 DSH 面板变半透明，透出壁纸；壁纸本身不会被这个滑块调暗
- 本机存储：文件落在 $DSH_HOME/image-skin/，不联网、不上传
- 不再被引用的旧文件会自动回收（换图/清除后触发，设置页也有「清理未使用图片」按钮）
- 单文件上限 24 MB，超出会在设置页给出明确报错
- 完全可还原：插件卸载后不会残留样式、贴图、视频层

安装：dsh plugin --profile web add dsh-image-skin，然后重启 DSH、浏览器 Ctrl+F5。
本地开发用 dsh plugin --profile web add -w .；也可以直接跑 node scripts/install.mjs --profile web。

结构

| 文件 | 作用 |
|------|------|
| src/index.ts | Host 半：注册 ui-image-skin 设置命名空间 + 图片上传/存储/回收/服务路由 /dsh-image-skin/* |
| src/client/index.ts | 浏览器半：绑定设置、把图片贴到对应区域、注册设置二级菜单 |
| cordis.patch.yml | bundle patch：把插件注册进 web profile |
| build.mjs | 把 TS 编译成 lib/index.js + lib/client.js |
| test/host.test.mjs | 宿主半离线测试（路由 / 上传上限 / GC / 路径穿越） |

扩展新区域：src/index.ts 的 IMAGE_AREAS 加一个 id（schema 自动生成字段）→
src/client/index.ts 的 AREAS 加同 id + 标签 → 加 REGION_SELECTORS 并在 disposeSkinDom() 里清理。
其余（设置菜单、上传路由、存储、回收）自动生效。