KinGao294/dsh-skin

dsh-skin

皮肤切换器 + 自定义壁纸 + 奶龙桌宠（带表情包）
适用于 DeepSeek Harness —— 一个类似 Codex 主题风格的“换肤”功能。
它向 DSH 内置的主题运行时注册了一套精选调色板目录，并在 设置 → 通用 中新增三行（位于内置的外观行下方）：

- 皮肤 / Skins —— 从 7 套精选调色板中选择一套（或选择 默认 / Default 以跟随内置外观）。
- 背景图片 / Wallpaper —— 本地图片，或粘贴图片/视频 URL；可调整不透明度、模糊度和填充方式（cover / contain / stretch / tile）。
- 奶龙桌宠 / Pet —— 一个可拖拽的悬浮黄色小龙桌宠，带有 8 种情绪的表情包。它会跟随智能体的运行状态（空闲 → 思考 → 工作 → 完成 → 睡觉），空闲时会眨眼，长时间空闲会入睡，可拖拽到任意位置（位置会被记住），并显示一个 🎨 表情面板，你可以在其中手动选择任意情绪。可在设置行中开关它、调整大小或重置其位置。

两项选择都会在重新加载后保留（localStorage）。已保存的第三方皮肤会在启动时重新应用一次（DSH 自身只持久化 system/light/dark）。

工作原理

DSH 的主题系统基于 token：Web 外壳提供 --dsw- 设计 token，而 ThemeRuntime 允许第三方插件注册主题，按配色方案覆盖别名层（--dsw-alias-）。本包是一个常规的双面插件：

- 宿主端（lib/index.js）—— 一个 dsh.bundle 补丁层，插入一个加载器条目（skin）；一个空操作的 apply，与随附的 ui-* 包完全一致。
- 浏览器端（lib/client.js）—— 一个 dsh.client 包（通过 /plugins/dsh-skin/client.js 提供），它会：
1. 通过 ctx.theme.register(...) 注册 7 套精选皮肤；
2. 恢复已保存的皮肤 id，并通过 ctx.theme.setTheme(...) 应用它；
3. 将壁纸渲染为固定背景层（z-index: -1），并叠加一个 token 覆盖（ctx.theme.overrideTokens），使主画布（--dsw-alias-bg-base）和侧边栏（--dsw-specific-sidebar-fill）半透明，从而让图片透出，同时内部表面（卡片、输入框、气泡）保持不透明且可读；
4. 使插槽存储与 theme/change 保持同步（并在当前皮肤或明暗方案变化时重新调整壁纸色调）；
5. 将两行挂载到 settings.general.item 中；
6. 挂载桌宠（一个固定的可拖拽元素，带有内联 SVG 贴纸），并通过 ctx.get("sessions").list() 监听智能体的运行状态以切换情绪。

每套皮肤都会设置其 colorScheme（light/dark），这会驱动 body[data-ds-dark-theme]，同时由 ui-layout 的 ThemePresenter 将别名 token 覆盖作为内联自定义属性应用到  上。

皮肤

| id        | scheme | 风格                              |
|-----------|--------|-----------------------------------|
| skin-ocean | dark   | DeepSeek 蓝深海            |
| skin-graphite| 深色   | 中性单色                |
| skin-forest | 深色   | 绿色宁静                        |
| skin-sunset | 深色   | 暖紫色                       |
| skin-midnight| 深色   | 纯黑 OLED                   |
| skin-paper | 浅色  | 暖纸色                        |
| skin-sakura | 浅色  | 粉色点缀                      |

Id 带有命名空间（skin-），因此不会与官方 @deepseek-ai/dsh-client-ui-console 主题（sakura、graphite）冲突。已保存的无前缀 id 会在读取时迁移。

选择 默认 / Default 会恢复为内置外观（跟随系统）
并清除已存储的皮肤。

壁纸

在 设置 → 通用 → 背景图片 / Wallpaper 中：- 选择图片 / Choose image — 选择本地图片（≤ 2MB，以 data
URL 形式存储，仅保存在此浏览器中）。本地视频文件不会被上传；请改为粘贴 URL。
- 网址 / URL — 粘贴 http(s) / data 图片或视频（mp4/webm/ogv/mov）。blob 会被拒绝（重新加载后失效）。无需额外的媒体服务器。
- 显示方式 / Fit — cover / contain / stretch / tile。
- 界面遮罩 / UI wash 和 模糊 / Blur 滑块（经 rAF 合并；不会崩溃）。遮罩越高 = UI 越不透明。
- 移除 / Remove 将其清除。

壁纸位于 z-index: -1 的固定层上，因此只能透过半透明的主画布和侧边栏看到；消息表面保持其不透明背景以确保可读性。它还会跟随当前皮肤色调
（切换皮肤会重新为半透明表面着色）。

奶龙桌宠 / Pet

在 设置 → 通用 → 奶龙桌宠 / Pet 中，你可以显示/隐藏桌宠、调整其大小
（64–180 px）并重置其位置。行为：

- 状态情绪 — 奶龙会跟随 agent：回合开始时为 thinking，
运行期间为 working，完成时为 done（带闪光），
然后回到 idle。闲置过久会睡着（sleeping，Zzz）。
- 贴纸包（表情包） — 悬停桌宠并打开 🎨：可选择 8 种情绪
（idle / happy / thinking / working / done / sad / surprised / sleeping）。
点击桌宠也会随机切换到一个贴纸，持续几秒。
- 可拖拽 — 可将其拖到任意位置；位置会被记住
（dsh-skin:pet-pos）。可从设置行中重置。
- 零资源 — 每个贴纸都是内联 SVG（原创手绘的
奶龙风格图案，并非授权角色），因此包体保持无依赖，
且在任何尺寸下都清晰锐利。仓库中的 preview.html 展示了完整贴纸包。

持久化

选择存储在 localStorage 中（dsh-skin:skin、dsh-skin:wallpaper、
dsh-skin:wallpaper-opacity、dsh-skin:wallpaper-blur、dsh-skin:wallpaper-fit、
dsh-skin:pet-enabled、dsh-skin:pet-size、dsh-skin:pet-pos）。
DSH 的 Host 设置接线仅向浏览器客户端暴露一组允许列表中的命名空间
（dsh-host-apiproxy 中的 WEB_SETTINGS_NAMESPACES），因此
第三方命名空间会返回 settings-not-exposed；产品本身
将远程浏览器偏好保持为进程本地，而 localStorage 与此一致
在同一源上重载后仍能保留的视觉偏好的边界。

安装

从任意位置，将该包添加到 web profile：

dsh plugin --profile web add -w /path/to/dsh-skin

-w 标志是必需的：每个 profile 都会附带一个 pnpm-workspace.yaml，因此
pnpm 9 会将 profile 目录视为工作区根目录，并拒绝裸 add，报错
ERR_PNPM_ADDING_TO_ROOT。

这会在 ~/.dsh/profiles/web 中运行 pnpm，安装该包，并将其追加到
dsh.profile.bundles（其 patch 层会插入 skin loader 条目）。
必须重启正在运行的 web 服务器，才能加载新的 bundle 层：

停止正在运行的实例，然后：
dsh web

打开 Settings → General 即可使用皮肤、壁纸和宠物。

发布（npm）

DSH（rc.6）没有单独的插件市场——插件分发渠道就是* npm registry。一个声明了 dsh.bundle（宿主 patch 层）和 dsh.client（浏览器 bundle）的包，正是 dsh plugin
--profile  add  所安装的内容，因此将这个包发布到 npm 就是如今“上架”的含义：

1. 选择一个唯一的名称（带 scope 的名称更安全，例如 @yourscope/dsh-skin），并
填写 author、repository、keywords 以及 CHANGELOG。
2. 确保 files 会发布 lib/index.js、lib/client.js、lib/types、
cordis.patch.yml（已配置好）。
3. 发布到官方 npm registry（本机的默认 registry 是
镜像——发布到镜像不会到达 npmjs）：
npm publish --registry https://registry.npmjs.org

4. 用户通过以下方式安装：
dsh plugin --profile web add -w @yourscope/dsh-skin

然后重启 dsh web。

需要向用户说明的已知平台边界：浏览器端偏好设置存储在 localStorage 中（第三方设置命名空间尚未通过网络暴露），并且客户端 bundle 只能 require 模块表实体（平台种子 + 已注册的客户端 bundle）。

开发

客户端 bundle 直接以 __ModuleLoader__ bundle 格式编写
（与 tsdown 为随附的 ui-* 包输出的形状相同），因此无需构建步骤。lib/client.js 只能 require 模块表实体：平台种子词（react、react/jsx-runtime、……）以及已注册的客户端 bundle
（@deepseek-ai/dsh-client-runtime/client、@deepseek-ai/dsh-client-ui-theme/client、
……）。编辑后，重启 web 服务器（bundle 内容会重新哈希，并以新的 rev 提供；loader 条目会在启动时重新扫描）。