# 瓶安芯移动端 UI 原型

本目录是依据 `doc/*产品设计` 原型图制作的 iOS/Android 交互原型，用于确认信息架构、视觉语言和关键流程，不是生产 Flutter 工程，也不连接真实 API、IoT、支付、定位或对象存储。

## 预览入口

启动本地预览：

```bash
npm install
npm run dev -- --host 127.0.0.1 --port 4173
```

入口参数：

| 入口 | 查询参数 | 主要内容 |
| --- | --- | --- |
| 用户端 | `/?app=user` | 瓶阀控制、商城、订单、个人中心 |
| 配送员 | `/?app=service&role=delivery` | 配送任务、到场、气瓶扫描、随瓶安检、签收 |
| 安装维修员 | `/?app=service&role=installer` | 使用条件、备料、安装、测试、安检、用户确认 |
| 安检员 | `/?app=service&role=inspector` | 现场检查、取证、风险等级、隐患闭环 |

右上角设备选择器可切换 iPhone 与 Pixel 10，用于检查 iOS/Android 安全区、底部系统区域和键盘行为。

## 原型边界

- 所有数据均为演示数据，按钮只模拟界面状态，不表示后端业务已实现。
- 设备命令先进入“等待回执”，不能用请求成功冒充设备执行成功。
- 工作人员角色切换只改变当前工作上下文；生产实现必须由服务端重新校验岗位、组织、资质、培训、上班状态和服务区域。
- 现场照片、签名、定位和弱网补传在原型中只展示交互，生产实现须遵循 `docs/04-服务端App需求.md` 的 Flutter 开发说明。
- 生产 Flutter 工程按仓库规划分别放入 `apps/user_app` 和 `apps/service_app`；在明确进入实现阶段前，不从本原型复制出空壳工程。

## 视觉基线

- 用户端：安全蓝为主色，瓶阀状态是首页第一层级，危险与待确认状态必须同时使用图标和文字。
- 服务端：紫色为统一作业框架，安检关键动作使用安全绿色；配送、安装维修、安检共享组件但不共享任务状态机。
- 中文界面最小正文建议不低于 12sp，触控目标不小于 44×44 logical pixels；金额、时间、单位和更新时间必须明确。
- 图标使用统一图标库，禁止使用 emoji、字符画或自行绘制的业务图标替代正式资产。