fmode-app/workbuddy-demo

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/）， 不需要时可以整体删除。