@dsh-external/dsh-client-ui-skin-doro

Readme

# dsh-doro · Doro 橘子酱

面向 DeepSeek Harness WebGUI 的 Doro 主题皮肤插件（粉丝向，个人/非商用）。

| 亮色 | 暗色 |
|---|---|
| ![light](preview/screenshot-light.png) | ![dark](preview/screenshot-dark.png) |

## 这是什么

一套**纯展示层**皮肤插件：全屏背景、左右下角立绘（自动贴合侧栏与窗口宽度、不挡聊天文字）、
粉橙主题色、自定义 favicon。可热切换、不注入服务、不发 Cordis 事件、不触达模型请求。

> Doro 是 NIKKE（Shift Up）的版权角色。本仓库是粉丝向非商用作品，素材为
> AI 生成 + 自整理的粉丝图，发布行为由仓库所有者自行负责。

## 安装（装进 dsh web profile）

```sh
# 方式一：git 仓库（推荐）
dsh plugin --profile web add github:<你的用户名>/dsh-doro

# 方式二：本地开发
git clone <repo-url> dsh-doro
cd dsh-doro
pnpm install
pnpm build        # 产出 lib/index.js + lib/client.js
dsh plugin --profile web add <dsh-doro 绝对路径>
```

然后**重启 dsh web** 生效；之后切换皮肤走配置热重载（见下）。

## 激活 / 切换皮肤

编辑两个 patch 层（home 层覆盖 profile 层）：

- `~/.dsh/cordis.patch.yml`
- `~/.dsh/profiles/web/cordis.patch.yml`

```yaml
- id: ui-skin-doro
  disabled: false
- id: ui-skin-maid-atelier
  disabled: true
- id: ui-skin-orca-link
  disabled: true
```

patch 里没列出的皮肤默认启用，所以同一时间必须显式停用其余每一套。保存即热重载，
刷新页面即可。

## 任务完成提示音

每次 agent 完成一轮回复（工作中指示消失）会自动播放提示音：

- **默认**：无音效文件时播放 WebAudio 合成的两连音（A5→E6）。
- **默认音效**：Doro 吟唱"Doro doro doro"（经典 meme 曲 DORODORA ODORO，裁取
  2.2s 片段），取自 [Voicemod Tuna 音效板](https://tuna.voicemod.net/) 用户上传的
  粉丝 meme 音频，非商用粉丝用途。
- **自定义音效**：把你的音效文件命名为 `chime.mp3`（也支持 wav/ogg/m4a）放进
  `assets/`，然后：
  ```sh
  node scripts/build-art.mjs   # 内嵌 assets/chime.* → DORO_CHIME
  pnpm build
  ```
  重启 dsh web 生效。建议音效 ≤1MB、时长 1~2 秒。
- **静音**：浏览器控制台执行 `localStorage['dsh-doro:chime-muted'] = '1'`，恢复设 `'0'`。

实现：监听会话的"工作中"指示（`role="status"` + "Deep diving" 文本）从挂载到消失的
边沿；音频在首次点击/按键时预热（浏览器自动播放策略），之后可靠触发。

## 替换素材

1. 把你的 Doro 图（PNG，带透明通道最佳）丢进 `assets/`。
2. 调整 `scripts/build-art.mjs` 里的角色映射（哪张做背景、左/右立绘、favicon）。
3. 重新生成并构建：
   ```sh
   node scripts/build-art.mjs   # 重生成 src/client/doro-art.generated.ts（ffmpeg → WebP data URI）
   pnpm build
   ```
4. 重启 dsh web 生效。

素材槽位：

| 常量 | 用途 |
|---|---|
| `DORO_BACKDROP` | 全屏背景（建议宽幅构图，低透明度 + 渐变遮罩保证可读性） |
| `DORO_CHAR_LEFT` | 左下角立绘（宽度受限贴合留白区、自动避开侧栏；窄窗口自动隐藏，不挡聊天文字） |
| `DORO_CHAR_RIGHT` | 右下角立绘（同上；窗口 <1400px 自动隐藏） |
| `DORO_MASCOT` | 预留槽位：当前默认不渲染（曾经底部居中的吉祥物会压住 hero 提示文字，已移除）。想用回它需要同时改 `src/client/index.ts` 与 CSS |
| `DORO_FAVICON` | 浏览器标签图标（从吉祥物图中心裁剪生成） |

立绘尺寸调节：改 `src/client/doro.style.ts` 里 `[data-doro-character='left']` /
`'right'` 的 `width: clamp(...)` 与媒体查询断点即可（方图按宽度×宽度渲染）。

想加更多装饰层（侧栏挂件、标题栏装饰等）：仿照 `maid-atelier` 在 `apply()`
里追加 `data-skin-chrome` 舞台层（`position: fixed; inset: 0; z-index: 0/1;
pointer-events: none; contain: strict`）。

## 构建

```sh
pnpm install
pnpm build
```

产物契约与官方皮肤一致：`lib/client.js` 是闭包工厂
（`window.__ModuleLoader__.load({ id, factory })`），平台模块走加载器模块表。
`lib/` 已随仓库分发（预构建），克隆后可直接安装使用，无需本地构建。

## 致谢

- 皮肤架构（bundle 形状、客户端生命周期、patch 分层）参考
  [dsh-deep-whale](https://github.com/Small-tailqwq/dsh-deep-whale) 与
  [dsh-web-ui](https://github.com/zhu1090093659/dsh-web-ui) 皮肤系列。
- 角色形象版权归 NIKKE（Shift Up）所有；本仓库为粉丝向非商用二创。

## 许可

CC BY-NC-SA 4.0（署名-非商业性使用-相同方式共享）。详见 [LICENSE](LICENSE)。