皮肤壁纸桌宠 KinGao294/dsh-skin

dsh-skin

皮肤切换器 + 自定义壁纸 + 奶龙桌宠（带表情包），为 DeepSeek Harness 打造——一个「换皮肤」功能，灵感来自 Codex 主题。它把一套精选调色板注册进 DSH 内置的主题运行时，并在 Settings → General 里加上三行（位于内置的 Appearance 行下方）：

- 皮肤 / Skins — 从 7 套精选调色板里挑一个（或选 默认 / Default，跟随内置外观）。
- 背景图片 / Wallpaper — 本地图片，或粘贴图片/视频 URL；可调不透明度、模糊、填充方式（cover / contain / stretch / tile）。
- 奶龙桌宠 / Pet — 一只悬浮、可拖拽的黄色小龙桌宠，带 8 种心情的表情包。它会跟随智能体的运行状态（idle → thinking → working → done → sleeping），空闲时会眨眼，闲太久会睡着，能拖到任何地方（位置会记住），还会弹出一个 🎨 表情面板，让你手动挑心情。在设置行里可以开关它、调整大小，或重置位置。

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

工作原理

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

- 宿主半边（lib/index.js）—— 一个 dsh.bundle 补丁层，插入一条 loader 条目（skin）；apply 是空操作，和随包发布的 ui-* 包完全一样。
- 浏览器半边（lib/client.js）—— 一个 dsh.client bundle（由 /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. 让 slot store 与 theme/change 保持同步（当前皮肤或明暗方案变化时，重新给壁纸调色）；
5. 把两行挂载到 settings.general.item；
6. 挂载桌宠（一个固定、可拖拽的元素，贴纸用内联 SVG），并通过 ctx.get("sessions").list() 观察智能体的运行状态来切换心情。

每套皮肤都会设置自己的 colorScheme（light/dark），它驱动 body[data-ds-dark-theme]，另外还有别名 token 覆盖，由 ui-layout 的 ThemePresenter 作为内联自定义属性应用到 <body> 上。

皮肤

| id | scheme | vibe |
| skin-ocean | dark | DeepSeek-blue deep sea |
| 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 会恢复内置外观（跟随系统），并清除已保存的皮肤。

壁纸

在 Settings → General → 背景图片 / 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 合并，不会崩溃）。遮罩越高，界面越实。
- 移除 / Remove 清除壁纸。

壁纸放在 z-index: -1 的固定图层上，所以只能透过半透明的主画布和侧边栏看到；消息区域保留实色背景，保证可读性。它还会跟随当前皮肤的色调（切换皮肤会重新给半透明表面着色）。

奶龙桌宠 / Pet

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

- 状态心情 — 奶龙跟随智能体：一轮开始时 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 settings 接口只向浏览器客户端暴露一份白名单命名空间（dsh-host-apiproxy 里的 WEB_SETTINGS_NAMESPACES），所以第三方命名空间会返回 settings-not-exposed；产品本身把远程浏览器偏好保存在进程本地，localStorage 正好与之匹配同一来源下，视觉偏好的边界，同时能在重新加载后保留。

安装

在任意位置，把包添加到 web 配置档：

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

-w 参数是必需的：每个配置档都自带 pnpm-workspace.yaml，所以 pnpm 9 会把配置档目录当成工作区根目录，直接 add 会报 ERR_PNPM_ADDING_TO_ROOT 并拒绝执行。

这条命令会在 ~/.dsh/profiles/web 里运行 pnpm，安装包，并把它追加到 dsh.profile.bundles（它的补丁层会插入 skin 加载器条目）。要让新的 bundle 层生效，必须重启正在运行的 web 服务器：

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

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

发布（npm）

DSH（rc.6）没有独立的插件市场——插件分发渠道就是* npm registry。只要包声明了 dsh.bundle（宿主补丁层）和 dsh.client（浏览器 bundle），dsh plugin --profile <name> add <package> 就能装它，所以把这个包发布到 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 提供；加载器条目在启动时重新扫描）。