界面换肤 kaivenw/dsh-skin

dsh-skin · DSH 换肤

GitHub · Gitee · MIT License

给 DeepSeek Harness 的 Web GUI 换背景皮肤：静态图片、动图（GIF/WebP/APNG）、视频、纯 CSS 渐变都能当壁纸；界面用「主题 token 覆盖 + 毛玻璃」透出壁纸，可单独调透明度、模糊、暗化、缩放、适配方式，支持本地素材、内置精选与在线搜索，实时预览、方案保存与自动轮换。

素材面板

应用壁纸后的界面

全屏预览

功能

壁纸
- 静态图片（JPG/PNG/WebP/AVIF）、动图（GIF/WebP/APNG）、视频（MP4/WebM）、CSS 渐变/网格
- 内置 21 个素材（12 张壁纸 + 3 个动态 + 6 个渐变）、15 张缩略图，授权见 docs/ATTRIBUTION.md
- 本地导入（按钮 / 拖拽 / 选择多个）、粘贴图片或视频直链
- 在线搜索四档来源：自动（国内 360 + 国外 Openverse/Wikimedia 并发，谁先回先用谁）、国内（360 图片）、国外（Openverse + Wikimedia，CC 授权）、必应壁纸（Bing 每日壁纸，免关键词）
- 实测（本机）：国内约 0.6s 出结果、必应约 0.2s、国外约 1.3s（缓存命中即时）；结果缓存 30 分钟
- 适配：填满裁切 / 完整显示 / 拉伸铺满 / 平铺，五档对齐，1–200% 缩放，按窗口自适应

画面参数
- 壁纸不透明度、模糊、亮度、对比度、饱和度、色相、压暗、暗角、颗粒
- 动效：Ken Burns 缓慢推拉、鼠标视差、遵循系统「减少动态效果」
- 视频：静音 / 循环 / 切后台暂停 / 0.25–2× 播放速度

界面透明（透明体 / 玻璃）
- 跟随皮肤（自动对比度）/ 清晰 / 玻璃三档预设，最低实度（0.2–1）、玻璃模糊（0–60px）、侧栏实度、输入框实度、正文可读性保护
- 默认回到最初交付的玻璃效果：实度 0.4、玻璃模糊 12px，壁纸明显透出，标题栏/标签页继承同一层；侧栏同材质
- 「界面」页可选「跟随皮肤（自动对比度）」按壁纸明暗自动调实度，或「清晰（0.88 接近原样）」
- 走官方 ctx.theme.overrideTokens 覆盖 --dsw-alias-bg-base / --dsw-specific-sidebar-fill，不依赖构建哈希类名，卸载自动回收
- 省电模式：关闭全屏毛玻璃与颗粒

其他
- 实时预览、全屏预览（隐藏面板，点任意处或 Esc 退出）
- 方案保存 / 应用 / 删除，设置 JSON 导出导入
- 自动轮换：每次启动 / 每小时 / 每天，只换素材不动参数
- 快捷键 ⌘⇧K / Ctrl+Shift+K 开关面板；Escape 关闭
- 设置存 localStorage，本地素材存 IndexedDB（图片导入时降采样到 1920px 并另存 360px 缩略图，动图/视频保留原文件）
- 轻量策略：内置壁纸按屏幕选 960 / 1600 / 2400 宽变体；视频/动图壁纸自动把玻璃模糊压到 8px；低配机首次加载自动进省电模式

安装

推荐：侧栏「插件」页

DSH 侧栏 →「插件」→ 添加插件 → 粘贴本目录绝对路径 → 安装 → 启用。插件管理器会即时应用，刷新页面后左侧 logo 行右端出现调色盘图标。

或：命令行

node scripts/install-profile.mjs # 默认 ~/.dsh/profiles/desktop
或：node scripts/install-profile.mjs --profile ~/.dsh/profiles/web

macOS 没装 Node.js 时双击 install.command。安装后重启 DSH 生效；卸载加 --uninstall。

使用

点侧栏 logo 行右端的调色盘图标打开面板（折叠侧栏时按钮自动隐藏）：

| 页签 | 内容 |
| 素材 | 实时预览卡、导入本地、在线搜索、链接、内置素材（按静态/动图/视频/渐变 + 深色/浅色筛选）、本地素材 |
| 画面 | 适配方式与对齐、缩放、不透明度、模糊、亮度/对比度/饱和度/色相、压暗/暗角/颗粒、动效、视频参数 |
| 界面 | 跟随皮肤/清晰/玻璃预设、自动对比度、最低实度、玻璃模糊、侧栏实度、输入框实度、正文可读性保护、省电模式、压暗色调 |
| 方案 | 保存当前为方案、应用/删除、导出导入 JSON、自动轮换；底部「重置」分组可恢复默认设置 |

调参实时生效；面板右上角开关可临时停用换肤而不丢设置。右上角 ↺ 与「方案 → 重置」都能恢复默认设置：关闭换肤、清空当前素材选择、参数回默认，保留本地素材和已保存方案，操作前有确认弹窗。

开发

npm install # 只为构建客户端 bundle（esbuild）
npm run build # client/.jsx -> client.js

- 客户端 bundle 是 window.__ModuleLoader__.load({ id, factory }) 信封，运行时只 require 平台 seed 模块（react / react-dom / react/jsx-runtime）。
- 宿主半侧 index.js 注册四个同源路由：/dsh-skin/assets/（素材，支持 Range）、/dsh-skin/api/materials（素材清单）、/dsh-skin/api/search（在线素材搜索）、/dsh-skin/api/image（远程图片代理，绕开 ORB/防盗链，限 https + 25MB）。
- 壁纸层是 position:fixed; z-index:-1 的 React 层；界面透明靠主题 token 覆盖 + 少量外壳容器置透明，不使用哈希类名。
- 结构：client/index.jsx（挂载 / 触发按钮 / 状态）、client/engine.js（样式与壁纸层）、client/panel.jsx（面板）、client/settings.js（参数与持久化）、client/media.js（IndexedDB）、client/materials.js（素材与搜索）。

内存与省电

| 项 | 上限 / 策略 |
| 当前壁纸解码 | 只解一张；按屏幕像素选 960/1600/2400 宽变体（1440 屏约 5.8MB，而不是 2400 原图的 13MB） |
| 素材缩略图 | 内置 480×270、本地 360px，列表 lazy-load，不把原图当缩略图解码 |
| 在线图片代理缓存 | 宿主内存上限 48MB（单图最多 12MB），LRU 淘汰 |
| 本地素材 | 单图 ≤80MB、单视频 ≤200MB；IndexedDB 总量接近 1.2GB 时拒绝导入；面板可看占用并一键清空 |
| 视频壁纸 | 单实例、切后台暂停；玻璃模糊自动压到 ≤8px；默认静音循环 |
| 毛玻璃 | 全屏 backdrop-filter 可一键关闭（界面 → 省电模式）；低配机（≤4 核或 ≤4GB 内存）首次加载默认开启 |
| 卸载 | 画布/视频/object URL/新增变量/token 覆盖全部回收 |

仍有开销、但可控的地方：视频解码本身吃 CPU/GPU（与外层插件无关，建议 1080p、≤200MB）；超宽/4K 屏会选 2400 原图（约 13MB）；远程大图经代理限 12MB，但解码尺寸取决于源图。觉得重就开省电模式、把「玻璃模糊」拉到 0，或在「本地素材」里清空不用的文件。

已知边界

- 只支持 Web GUI（桌面端与 dsh web 同一套前端）；未做 Windows 标题栏与 macOS 红绿灯的专门避让，壁纸铺在它们之下。
- 在线搜索：国外源受 Openverse / Wikimedia 匿名配额限制；国内 360 图片为聚合搜索，版权归原作者，仅建议个人使用，不要用于商业分发或再发布。
- 素材授权见 docs/ATTRIBUTION.md：CC0 / Public Domain / CC BY，CC BY 素材保留署名信息。
- 全屏毛玻璃每帧都要做一次高斯，视频壁纸 + 高模糊在低端机可能掉帧，可开省电模式或降低玻璃模糊。

License

MIT。素材授权见 docs/ATTRIBUTION.md。