# WorkBuddy 移动端 UI 复刻 · 交付说明

> 素材来源：https://uinotes.com/app/193580166355178952（UI Notes 收录的 WorkBuddy v1.1 截图，共 160 张）
> 技术栈：HTML + Tailwind CSS 3（CDN 3.4.16）+ Font Awesome 6 免费图标
> 产物：`app/workbuddy-mobile.html`（单文件，双击即可在浏览器打开）

## 1. 素材获取情况

| 项 | 结果 |
|---|---|
| 站点接口 | `GET /uinotes-api/app-detail?uuid=193580166355178952&page=N` |
| **可匿名获取** | 第 1–3 页，**共 60 张**（编号 001–060），已全部下载到 `img/` |
| 第 4 页及之后 | 接口返回 **204 空响应**（需登录才能继续翻页），故 061–160 未取得 |
| 图片真实地址 | `https://uinotes-img.oss-cn-shanghai.aliyuncs.com/image/origin-webp/<uuid>.webp?v1`，需带 `Referer: https://uinotes.com/` |
| 文件规模 | 60 张 × 1170×2532（iPhone 15 Pro @3x），共约 5.9 MB |

60 张里包含：5 张营销海报（001–005）、引导/登录/新对话/模型面板/其他登录（006–030 大部分）、
侧栏/任务对话/过程折叠/完成态/选项追问（041–060）。**本次复刻的 10 个界面全部在已获取的 60 张之内**，
无需登录即可完成；如需补齐剩余 100 张（主要是暗色模式、分享、缺省页、加载态），可以在浏览器登录后
把 Cookie 给我，我再拉 061–160。

## 2. 截图 → 界面映射

| Demo 页 | 依据截图 | 说明 |
|---|---|---|
| 01 引导首页 | 001 (P01) | 吉祥物 + 云端/连接电脑切换 + 4 个快捷胶囊 + 大输入框 |
| 02 登录页 | 007 (P02) | 吉祥物 + 手机号登录 + 微信/QQ/企业版/其他 + 协议勾选 |
| 03 新对话 | 010 (P03) | 登录后落地态，标题居中、定时任务胶囊、输入后出现发送按钮 |
| 04 选择模型 | 025 (P04) | 底部面板、猫头从面板上沿探出、推理/视觉标签、绿色勾选 |
| 05 其他登录方式 | 006 (P05) | iOS 操作表：其他登录 / 扫码登录 / 免登录使用 / 取消 |
| 06 侧栏任务列表 | 052 (P06) | 用户信息、自动化/项目/专家、任务列表（进行中带 spinner） |
| 07 任务对话 | 054 (P07) | 用户气泡、共 3 段过程折叠、步骤条、参数表格、AI 操作预览 |
| 08 执行中 / 追问 | 044 (P08) | 已折叠 2 段过程、执行中、正在整理答案、2/2 编号选项卡片 |
| 09 完成态 | 049 (P09) | 任务创建成功表格、💡 提示块、内容由 AI 生成、朗读/复制/分享 |
| 10 选项式追问 | 044 同族 (P10) | 与 08 同屏的选项卡片，截图时展示为完整追问态 |

## 3. 设计令牌（取自截图）

| 令牌 | 值 | 用途 |
|---|---|---|
| `soft` | `#f5f5f7` | 分段控件轨道、三方登录圆底、追问卡片底 |
| `fill` | `#ececee` | 用户气泡 |
| `line` | `#ebebef` | 分割线 |
| `ink` | `#1a1a1a` | 主文字、主按钮底（`#1c1c1e`） |
| `muted` | `#8e8e93` | 次级文字 |
| `faint` | `#b8b8bd` | 占位符、折叠步骤文字 |
| `brand` | `#17b58b` | 品牌薄荷绿（勾选、已完成、胶囊标签） |
| `reasoning` / `vision` | `#5b6cf0` / `#3fae72` | 模型面板“推理”“视觉”标签 |

字号（按 3x 截图 ÷3）：正文 17px、次级 14–15px、标题 30px、按钮 18px、标签 12–13px。
圆角：输入框 26px、按钮/胶囊 12–16px、面板 26px、用户气泡 20px。

## 4. 视觉素材

截图中的位图（吉祥物、模型图标、专家头像、APP 图标）**无法用 CSS 还原**，从原截图按坐标裁出后放在 `assets/`：

- `mascot.png` / `mascot-head.png`：吉祥物全身 / 猫头（取自 025、013，白底 → 用 `mix-blend-mode: multiply` 叠到任意底色）
- `model-*.png`：Hy3 / GLM / Kimi 三款模型图标；Auto 用 CSS 画的圆环 A
- `expert-1~4.png`：海报中四个专家头像（备用）
- `app-logo.png`：APP 图标

状态栏、图标（菜单/发送/时钟/加号/勾选等）全部用 Font Awesome + CSS 绘制，未截取。

## 5. 已实现的交互

每个手机都是独立可点的小应用：

- 引导页/新对话：点汉堡开侧栏；点“选择模型”拉起模型面板；输入文字后出现发送按钮，发送进入会话
- 模型面板：点任意模型切换，行文字变薄荷绿 + 勾选，自动收起并 toast「已切换到 xx」
- 侧栏：点历史任务进入会话并关闭侧栏
- 登录页：点“其他”弹出操作表；“免登录使用”关闭并发 toast
- 顶部“全部 / 基础版 / 完整版”可按类别筛选手机

## 6. 已知差异（未完全一致的地方）

1. **状态栏**：截图是 iOS 真机状态栏（时间/信号/电池），这里用 CSS 模拟，并保留了截图里 uinotes 的水印胶囊位置。
2. **字体**：截图使用苹方 / HarmonyOS Sans；网页使用系统字体栈，未加载外部字体文件。
3. **吉祥物裁剪边缘**：吉祥物为截图裁切所得，发光与阴影外沿在白底上仍有极淡的方块边界（放大才能看出）。
4. **键盘弹起态**：截图里的系统键盘（012/030/047 等）没有复刻，Demo 中只保留输入框本身。
5. **未覆盖页面**：暗色模式、分享、缺省页、加载态、产物文件页等属于 061–160，需登录后补抓。
6. 页面内部分文案（如「2026-08-03 09:00」「Kimi-K3」）仿照截图原样保留，仅作展示。

## 7. 文件清单

```
workbuddy-demo/
├── workbuddy-mobile.html      单文件 Demo（10 屏）
├── assets/                    从截图裁出的位图素材
├── screenshots/               浏览器实拍对照图（01–10 + wall.png 总览）
└── README.md                  本说明
```

原图与抓取脚本在 `E:\work\fmode-app-v2\.tmp-uinotes-workbuddy\`（`img/`、`api/`、`probe/`），
不需要时可以整体删除。