dsh-skin-blue-whale

Readme

# dsh-skin-blue-whale 🐋

为 dsh Web UI 打造的「蓝鲸跃海」皮肤插件 —— 极简、高级，像桌面壁纸一样安静地铺在界面后面。

## 效果

![主页：鲸鱼以输入框为海平面跃出](./screenshots/hero.png)

![对话 / 思考：整页居中的底层水印鲸鱼](./screenshots/work.png)

- **官网同款蓝白渐变底**：浅色模式复刻 DeepSeek 官网 Hero 区的蓝白渐变
  （按可访问性要求提亮为 `#b9d3ec → 白`），叠加缓慢漂移的"流动海水"水汽与
  一道横向水光（纯 CSS，无 canvas/WebGL），深色模式自动适配为"夜海"幽光版；
- **官网蓝鲸 logo**：使用 DeepSeek 官方鲸鱼 logo 路径，官方蓝 `#4D6BFE`
  主身 + 亮冰蓝鱼肚 + 尾鳍高光 + 眼睛，水花飞溅、涟漪扩散、气泡上升；
- **双场景自适应**：
  - **主页（空会话）**：鲸鱼把输入框当作海平面破浪而出，贴着输入框顶边
    还有一道发光水线；
  - **对话 / 思考中**：鲸鱼变为整页居中的底层水印（约 10% 透明度，像
    底层印刷），不影响阅读，且从不占据左侧边栏；
- **整套鲸蓝界面令牌**：按钮、焦点环、选区、聊天气泡、侧栏、滚动条统一
  换成 DeepSeek 蓝鲸蓝（#4D6BFE 系），浅色/深色双调色板自动切换；
- 尊重系统 `prefers-reduced-motion`（用户偏好减少动效时关闭动画）。

## 安装

前置要求：Node 20+、pnpm、dsh（0.1.0-rc.6+）。

```powershell
git clone https://github.com/zenghuizhu69-hub/dsh-skin-blue-whale.git
cd dsh-skin-blue-whale
dsh plugin --profile web add .
```

安装后重启 Web 服务（`dsh web`）即可生效。`dsh plugin` 会把本包以
`link:` 方式挂进 profile，因此**克隆目录请勿移动**；移动后重新执行
`dsh plugin --profile web add .` 即可。

> ⚠️ 请将本仓库克隆到**不含空格**的路径（如 `D:\plugins\dsh-skin-blue-whale`）；
> 当前 dsh CLI 在路径含空格时转发给 pnpm 的绝对路径不会加引号，会安装失败。

> 修改插件源码后需要重启 `dsh web` 才会加载新版本。

## 卸载

```powershell
dsh plugin --profile web remove dsh-skin-blue-whale
```

卸载后重启 Web 服务：背景层、鲸鱼与整套令牌覆盖会全部还原为基础样式。

## 实现说明

- 这是一个 **dsh 插件包（bundle）**：`package.json` 声明
  `dsh.bundle.patch`（`cordis.patch.yml` 向插件树插入皮肤行）与
  `dsh.client`（浏览器侧客户端模块，`platform: web`）。
- 浏览器半边通过 `window.__ModuleLoader__.load` 注册为静态客户端模块，
  注入 `theme` 与 `sessions` 服务：
  - `theme.overrideTokens()` 叠加整套 `--dsw-alias-*` 令牌覆盖层
    （每个令牌提供 `{ light, dark }` 两个值）；
  - `sessions.list` 快照区分空会话/活跃会话，驱动 hero/work 双场景；
  - 运行时通过框架自身的 `grid-template-columns` 内联样式与
    `[data-shell-overlay]` 锚点测量侧栏宽度与输入框顶边（海平面），
    不依赖任何哈希类名。
- 鲸鱼与场景的颜色全部走 CSS 类上色（而非 SVG 呈现属性里的 `var()`），
  杜绝呈现属性回退成黑色的兼容性问题。
- 插件卸载时令牌层、DOM、样式、监听器全部自动还原，无残留。

## 文件

| 文件 | 说明 |
| --- | --- |
| `lib/client.js` | 浏览器半边：令牌覆盖 + 样式 + 鲸鱼 SVG + 测量/模式逻辑 |
| `lib/index.js` | 宿主半边占位（供 Loader 扫描） |
| `cordis.patch.yml` | 插件树补丁层 |
| `art/whale-art.svg` | 鲸鱼场景源文件（生成自 `art/whale-path.json`） |
| `art/build-svg.cjs` | 从官方路径 JSON 重建 SVG 的脚本 |
| `art/smoke.cjs` | 无浏览器冒烟测试（令牌/挂载/清理校验） |

## 致谢

- 鲸鱼造型：DeepSeek 官方 logo 路径（取自 dsh 内置前端 favicon）；
- 底色渐变：DeepSeek 官网 Hero 区蓝白渐变（`#9cc1e7 → rgba(250,250,250,0)`）。

## License

[MIT](./LICENSE)