# 金诺物流 · App 交互原型 v0.6
> 客户演示用高保真可交互 HTML 原型（App 端）。
> 位置：`docs/design/prototype/app.html` ｜ 无需构建、无外链 CDN，`file://` 直接打开。
> 视觉唯一来源：`docs/design/design-tokens.json` + `docs/design/README.md`；对应 PRD：`docs/product/prd-im-v0.6.md` §7.1。
## 1. 怎么打开 / 怎么讲
- 直接双击 `app.html`，或浏览器打开 `file:///root/workspace/docs/design/prototype/app.html`。
- 桌面：左侧「演示导航」按模块跳屏；`← →` 切换上一屏/下一屏；`Esc` 关闭弹层。
- 手机：点右上「演示导航」从抽屉进入；页面按窗口宽度自适应缩放。
- 首页 `index.html` 是三个原型的入口（App / 后台 / 投屏接收端）。
## 2. 文件结构
```
docs/design/prototype/
├── index.html 三个原型入口（app/admin/cast）
├── app.html App 手机框 + 状态栏 + 演示导航
├── assets/app.css 设计 tokens 落地 + 全部组件/页面样式
├── assets/app.js 35 屏模板、路由、状态与交互
└── README.md 本文件
```
`admin.html` / `cast.html` 分别由管理后台、投屏同学交付，说明见 `README-admin-notes.md` / `README-cast-notes.md`；本目录只放入口链接。
## 3. 屏幕清单（35 屏）
| # | 模块 | 屏幕 |
|---|---|---|
| 01 | 账号 | 登录 / 企业邀请码加入 |
| 02 | 消息 | 消息列表（含骨架屏首载、断网提示） |
| 03 | 消息 | 会话详情 · 金诺财务报销群 |
| 04 | 消息 | 会话详情 · 运单群 粤Ap3826 |
| 05 | 消息 | 通讯录（部门树展开/收起） |
| 06 | 消息 | 成员名片 |
| 07 | 消息 | 群详情（群公告、成员、免打扰、退群） |
| 08 | 消息 | 全局搜索（消息/群组/成员） |
| 09 | 消息 | 通知设置 |
| 10 | 会议 | 会议首页（快速开会/加入/预定/历史） |
| 11 | 会议 | 预定会议（时间、参会人、密码、等候室） |
| 12 | 会议 | 等候室（等待、准入模拟、麦克风/摄像头） |
| 13 | 会议 | 会议中（成员宫格、静音、共享、举手、成员/聊天） |
| 14 | 会议 | 投屏（扫码/投屏码/设备列表/投屏中倒计时） |
| 15 | 工单 | 工单列表（状态 tab、SLA 告警、空态） |
| 16 | 工单 | 工单详情（状态时间线、处理记录） |
| 17 | 工单 | 提交工单（类型/运单自动带出/描述/附件） |
| 18 | 工单 | 工单评价（星级 + 标签） |
| 19 | 差异单 | 差异单列表（待确认/申诉中/已闭环） |
| 20 | 差异单 | 差异单详情（运单/车辆/差异明细/时限） |
| 21 | 差异单 | 申诉（理由 + 水印照片 + 语音） |
| 22 | 报销 | 报销列表（状态 tab、本月汇总） |
| 23 | 报销 | 提交报销（日期/车辆自动带出/类型/金额/凭证/备注） |
| 24 | 报销 | 报销详情（状态轨迹、驳回原因、重提） |
| 25 | 我的 | 我的（业务入口、安全与设备） |
| 26 | 我的 | 设置（账号、通知、清缓存、退出登录） |
| 27 | 我的 | 设备管理（本机/其他设备/下线） |
| 28 | 我的 | 我的车辆（只读：车牌/车型/绑定时间/换车记录） |
| 29 | 我的 | 安全设置（动态水印、截屏防护、hash 存证） |
| 30 | 水印相机 | 相机取景（水印字段、连拍、定位拒绝模拟） |
| 31 | 水印相机 | 预览（字段快照、发送/存相册/重拍） |
| 32 | 水印相机 | 水印照片查看（hash 溯源） |
| 33 | 状态 | 加载中（骨架屏） |
| 34 | 状态 | 空态 |
| 35 | 状态 | 异常态（错误码 + 重试） |
> 额外可达变体：财务群/运单群两套群详情、李雪等成员名片、已解决工单详情、已驳回报销详情、单聊会话等。
## 4. 3 分钟演示路径
1. **登录**（01）：任意 11 位手机号 + 任意 6 位验证码；不勾协议/格式错误会就地报错。登录后进入消息列表（02 首载有骨架屏）。
2. **财务群**（03）：看文本/支付凭证/报销卡片；点报销卡片看详情（24）。点输入框「+」→ 报销卡片可再次发送；相机图标进 30。
3. **运单群**（04）：看运单卡片、工单卡片、水印照片、语音、文件；点工单卡片看工单详情（16）。
4. **会议**（10 → 14）：快速开会进入会议中（13）；静音、举手、共享屏幕、成员/聊天面板、主持人操作、结束会议。投屏（14）输码 `482916` 连接，展示 5 分钟倒计时与结束释放。
5. **水印相机**（30 → 31 → 32）：连拍 3 张 → 预览 → 发送回运单群；点会话中的水印照片看 hash 溯源。可点「模拟定位拒绝」看降级水印。
6. **差异单**（19 → 20 → 21）：待确认 → 申诉（理由 + 水印照片 + 语音）→ 列表状态变「申诉中」；或「确认无异议」→ 已闭环。
7. **报销**（22 → 23）：提交金额 71.63、加凭证、提交 → 列表新增 BX20261115004「待审」；驳回单（24）展示原因与重提入口。
8. **工单**（15 → 17）：提交一条「货损」工单，列表新增 GD20261115041；已解决工单可评价（18）。
9. **收尾**：我的（25）→ 安全设置（29）看水印/截屏策略；状态示例（33-35）演示空/错/载。
## 5. 交互与模拟说明
- **导航**：所有 `data-go` 屏幕互通；返回按钮遵循层级；底部 Tab 仅主页面出现。
- **消息**：发送文本会追加气泡并带「已读」；`+` 面板可发水印照片/文件/位置/报销卡片/工单卡片；点自己消息可撤回/复制（演示）。
- **弹窗/toast**：退出登录、清空聊天、结束会议、结束投屏、设备下线等为二次确认；操作有 2.4s toast。
- **表单校验**：登录（手机号/验证码/协议）、加入企业（邀请码）、加入会议（9 位会议号）、预定会议（主题）、提交工单（描述 ≥10 字）、申诉（理由 ≥10 字）、报销（金额 >0 + 至少 1 张凭证）。
- **拍照模拟**：水印相机快门/连拍生成预览，水印字段（时间/定位/企业姓名工号/车牌/运单）与「定位拒绝」降级可见。
- **会议控制**：麦克风/摄像头/共享/举手为状态切换；成员面板可全体静音、锁定、转让、移出、结束（确认后回会议首页）。
- **投屏**：扫码（模拟成功）、投屏码（`482916`/`103774` 成功，其他报错）、设备列表（离线设备不可点）；连接后 5 分钟倒计时，可暂停/结束。
- **单据闭环**：报销/工单/差异单提交后写入内存数据并回到对应列表，状态即时更新；刷新页面恢复初始演示数据。
- **空/错/载**：消息列表首次进入骨架屏 750ms；搜索无结果/工单空 tab 为空态；消息列表可切「离线」、异常态屏可重试；所有异常态含错误码与下一步动作。
## 6. 数据样例（真实感）
- 司机 **刘建华**（工号 D0231，粤Ap3826）、**唐辉**（D0235，粤BNU758）、调度 张敏、财务 李雪、车队主管 王建国、文员 陈晓。
- 财务群：充电费凭证「特来电 · 广州白云大道站」，金额 **71.63**；停车费 **10.00**（唐辉 · 广州南沙港）。
- 运单 **YD20261115008**：广州白云 → 佛山南海，冷链食品 2.4 吨，11-15 16:00 前送达。
- 会议：安全例会 14:30，会议号 **832 756 104**，密码 6688。
- 工单 **GD20261114-032**（货损，处理中）、差异单 **CY20261112031**（数量差异 2 箱）、报销 ****BX20261115003/BX20261115004****、投屏码 **482 916**。
- 不含 lorem ipsum，也不含真实个人隐私信息（手机号均脱敏）。
## 7. 与 PRD §7.1 的对应
| PRD 页面项 | 原型 |
|---|---|
| 登录/邀请 | 01 |
| 消息列表、会话详情、通讯录、成员名片、群详情、全局搜索、通知设置 | 02–09 |
| 会议首页/预定/等候室/会议中/投屏 | 10–14 |
| 工单列表/详情/提交/评价 | 15–18 |
| 我的车辆、安全设置 | 28–29 |
| 水印相机/预览/照片查看 | 30–32 |
| 差异单列表/详情/申诉 | 19–21 |
| 报销列表/提交/详情 | 22–24 |
| 我的/设置/设备管理 | 25–27 |
| 空/错/载状态 | 33–35（并在消息、搜索、工单中复用） |
## 8. 与设计规范的对齐
- 画布 375×812，`rpx = dp × 2`；页面边距 16、卡片圆角 16、按钮 44/48、列表行 ≥56。
- 色彩只用 tokens：主色 `#1266D9`、页面底 `#F7F8FA`、文字三档、语义色（成功/警告/错误）。
- 字阶：22/20/18/16/14/12/11，行高按 tokens；按钮/标签/说明保持一致。
- 品牌色、状态色、间距均集中定义在 `app.css` 顶部 `:root`，方便和 tokens 对齐（后续可换生成器）。
- 深色模式仅做「设置里的预览开关」示意，未覆盖全部页面（P1）。
## 9. 自检结果
- `node --check assets/app.js` 通过；`app.js` 约 133KB，`app.css` 约 73KB，无外部依赖。
- DOM 沙箱：40 条路由逐屏渲染无异常；38 个 `data-go` 目标全部可达；167 组 `data-act` 交互全部无运行时异常。
- 交互流测试 15/15 通过：登录校验与跳转、发消息、报销校验与提交、差异申诉、工单提交、投屏成功/失败、静音/举手/共享、结束会议、搜索有结果/空结果。
- 40 段渲染 HTML 用 Python HTMLParser 校验：无未闭合/错配标签；全目录扫描无 http(s) 外链。
- 浏览器兼容：Chrome/Edge/Safari 现代版本；`file://` 直接打开可用。
## 10. 未实现 / 待确认
- `admin.html`、`cast.html` 已由对应同学交付（2026-11-15），本目录的 `index.html` 已放入口；联调时以各自说明为准。
- 真实摄像头/扫码/音视频/RTC 为界面模拟；接口未接（PRD 要求原型阶段不依赖后端）。
- 转发选会话、群成员邀请、建群、文件预览、会议历史详情等次要流程只做 toast/入口示意。
- 深色模式、字号大档、无障碍朗读未完整覆盖（P1）。
- 管理后台与投屏接收端联调时，演示数据（会议号/投屏码）需统一。
- 若客户要演示「外部访客/访客水印」流程，下一版加访客会话与等候室拒绝分支。
---
## 11. 管理后台（admin.html）
> 交付：admin-console-dev ｜ 2026-11-15 ｜ 详细说明见 [`README-admin-notes.md`](./README-admin-notes.md)
- 入口与文件：双击 `admin.html`；样式与逻辑在 `assets/admin.css` 与 4 个 `admin.*.js`。无构建、无 CDN、无图片外链，`file://` 直接打开。
- 页面：**25 页** —— 登录、概览、组织架构、成员、角色权限、会话审计、安全与水印策略、水印模板、水印照片审计、操作日志、会议管理、投屏设备、车辆管理、工单管理、送货差异、差异统计、报销待审、报销单详情、报销汇总、费用类型与额度、财务群配置、易流占位、公告、系统配置、系统运维。
- 演示导航：右下角「✦ 演示导航」或 `Ctrl/Cmd + K` 打开；支持搜索、跳任意页、加载/空/错误态示例与「重置数据」；顶栏头像可退出登录回到登录页。
- 可交互：表格筛选/排序/分页/全选/批量操作，审核通过·驳回·改判·打款标记，派单、下发差异、导出 Excel/CSV（二次确认）、水印字段开关与排序实时预览、告警/备份/升级回滚等弹窗与抽屉，全局 Toast。
- 数据样例：金诺物流、粤Ap3826、充电费 **¥71.63**（RE-20261115-006）、DF-20261115-006、GD-20261115-003；全部为演示数据，不含真实个人信息。
- 自检：5 个 JS `node --check` 通过；jsdom 以 `file://` 加载 25 条路由，0 运行时错误、0 未实现 `data-action`；筛选/分页/弹窗/批量/导出/水印/状态示例/登录跳转冒烟通过；HTML 无外链、无 `![]()
`/`