# Demo 录制指南（Demo GIF guide）

README 顶部的 Demo 表格目前是占位图。录制三个 10–30 秒的短动画，放到本目录（`docs/`）并替换 README 中的占位链接即可。

## 目标文件

| 文件 | 场景 |
| --- | --- |
| `docs/demo-turn.gif` | 任务完成：代理跑完一轮，桌面弹出「任务已完成」通知 |
| `docs/demo-review.gif` | 需要审核：代理停下等待审批，桌面弹出「需要你的审核」 |
| `docs/demo-failure.gif` | 后台任务失败：后台作业失败/被终止，桌面弹出「后台任务失败」 |

## 推荐工具

- **Windows**：[ScreenToGif](https://www.screentogif.com/)（推荐，可直接录区域并导出 GIF）、[ShareX](https://getsharex.com/)、OBS
- **macOS**：[Kap](https://getkap.co/)、QuickTime Player
- 备选：先录 MP4，再用 ffmpeg 转 GIF（控制体积）：

```sh
ffmpeg -i demo-turn.mp4 -vf "fps=10,scale=640:-1" -loop 0 demo-turn.gif
```

## 录制前准备

1. 启动 `dsh web` 并安装本插件（见 README）。
2. 打开设置 → 插件 → 「任务完成提醒」，确认开关：启用提醒 = 开，浏览器系统通知 = 开，提示音 = 关。
3. 首次在页面点击一下，允许浏览器的「通知」权限。
4. 把 DSH 窗口与录屏区域并排，让通知弹出的那一刻入镜（体现"切到别的窗口也能看到"）。

## 场景一：任务完成（demo-turn.gif）

1. 开始录制。
2. 在 DSH 里发一个会跑几十秒的任务（例如让代理写一个小函数并解释）。
3. 立即切到另一个窗口（浏览器其他标签或桌面）。
4. 代理跑完 → 桌面右上角弹出「任务已完成」+ 任务标题，页面右下角同步出现 toast。
5. 停止录制，截取「运行中 → 切走 → 完成通知弹出」的完整片段。

## 场景二：需要审核（demo-review.gif）

1. 开始录制。
2. 发一个会触发审批/计划评审/提问的任务（例如需要写文件到受保护目录、或要求确认方案）。
3. 切到别的窗口。
4. 弹出「需要你的审核」通知，展示标题 + 「操作审批 / 计划评审 / 提问」。
5. 停止录制。

## 场景三：后台任务失败（demo-failure.gif）

1. 开始录制。
2. 发起一个注定失败的后台命令或子代理任务（例如 `ls /nonexistent` 或让子代理执行失败命令）。
3. 切到别的窗口。
4. 后台任务结束，弹出「后台任务失败 / 后台任务被终止」通知。
5. 停止录制。

## 体积与观感建议

- 单张 GIF 控制在 **1–3 MB** 以内（fps 8–10、宽度 ≤ 720px）。
- 每个片段 10–30 秒，**循环要自然**（结束帧接近开始帧）。
- 通知弹出时停留 2 秒再停录，让文字可读。
- 用浅色/深色系统主题都行，保持三个片段主题一致即可。

## 替换 README 占位

把三个文件放到 `docs/` 后，`README.md` 和 `README.zh-CN.md` 的 Demo 表格会自动指向它们（路径已写为 `docs/demo-*.gif`），无需再改 README。