毛玻璃换肤 xassuyge003-ui/dsh-skin-yanisuu

DSH Skin — Yanisuu

为 DeepSeek Harness Web 客户端换肤的完整开源方案：暖色调主题、毛玻璃壁纸层、左缘控制抽屉（毛玻璃开关 / 模糊滑条 / 自动轮播 / 本地上传壁纸 / 设置持久化）。原作致敬自《躲在超市后门抽烟的两人》的黄昏配色。

⚠️ 本仓库不包含任何版权图片。仓库自带壁纸素材生成脚本，请使用你自己的图片生成 p0-p7 素材；本仓库仅提供代码、样式与安装方法。

功能

- 🎨 暖色暮色调色板（明/暗双模式自适应），通过主题服务叠加 --dsw-alias-* 覆盖层
- 🖼️ 完整画作居中（contain）+ 两侧同图模糊延伸（cover），壁纸从不被裁切
- 🧊 毛玻璃：三列半透明 + 模糊渲染，一键开关（关闭时工作区 100% 不受影响）
- 🔍 7 档「清晰 ← → 模糊」滑条（预渲染模糊变体即时切换）
- 🔄 自动轮播：每 X 分钟换一张（0 = 关闭），缩略图点击即切换
- ⬆️ 本地上传壁纸：客户端压缩、localStorage 持久化（刷新不丢）、参与轮播、可删除
- 💾 设置持久化：当前壁纸 / 模糊档 / 轮播频率 / 毛玻璃开关，重新打开自动恢复
- 📎 左侧小抽屉收纳所有控件，默认收起、除手柄外不拦截任何点击

快速开始

1. 复制到你的 deepseek-harness 检出

cp -R packages/ui-skin-yanisuu /packages/client/ui-skin-yanisuu

2. 生成你自己的壁纸素材（8 张）

把你的图片放进一个文件夹（任意尺寸，竖图最佳），运行：

node scripts/make-posters.mjs /apps/web/public/ui-skin/posters

脚本为每张图生成：完整图（contain 层）、模糊填充（cover 层）、7 档模糊变体、缩略图。
没有素材时皮肤会以纯色模式运行（毛玻璃关），不会报错。

3. 注册组合行（三处）

packages/bundle/web-app/cordis.patch.yml 的浏览器名单中加入：

- id: ui-skin-yanisuu
name: '@deepseek-ai/dsh-client-ui-skin-yanisuu'

packages/bundle/web-app/package.json 依赖中加入：

"@deepseek-ai/dsh-client-ui-skin-yanisuu": "workspace:^"

tsconfig.client.json 的 references 中加入：

{ "path": "./packages/client/ui-skin-yanisuu" }

（tsconfig.base.json 的 paths 中同样需要一行映射，详见 docs/INSTALL.md。）

4. 构建并重启

pnpm install
pnpm --filter @deepseek-ai/dsh-client-ui-skin-yanisuu exec tsc -b
pnpm --filter @deepseek-ai/dsh-client-ui-skin-yanisuu bundle
pnpm --filter @deepseek-ai/dsh-web-frontend build
重启 DeepSeek Harness（关页面 → 双击启动命令）

之后每次打开页面皮肤自动生效；左侧边缘出现「皮肤控制」抽屉手柄。

仓库结构

packages/ui-skin-yanisuu/ # 客户端皮肤插件（TS + CSS Modules + 组件测试） scripts/make-posters.mjs # 壁纸素材生成器（sharp）：full/fill/7档模糊/缩略图 docs/INSTALL.md # 完整安装文档（含 MIME 表补丁与组合行详解）

原理（这套「换肤方法」）

1. 主题 token 层：ctx.theme.overrideTokens 叠加半透明暖色 token（明/暗成对），所有产品表面立刻透出背景；
2. 壁纸层：body 的 background-image 三层结构 —— 遮罩渐变 / 完整画作 contain / 模糊填充 cover，通过两个 CSS 变量动态换图；
3. 控件抽屉：注册进 shell.overlay 加法槽位（零替换风险），状态存 localStorage；
4. 素材路由：图片由 frontend-static 提供，需在 packages/host/frontend-static/src/index.ts 的 MIME 表中补 png/jpg/webp/gif（详见 docs/INSTALL.md）。

许可

MIT。壁纸素材请使用你拥有权利或获授权的图片。