瓶安芯移动端 UI 原型
本目录是依据 doc/*产品设计 原型图制作的 iOS/Android 交互原型,用于确认信息架构、视觉语言和关键流程,不是生产 Flutter 工程,也不连接真实 API、IoT、支付、定位或对象存储。
预览入口
启动本地预览:
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、字符画或自行绘制的业务图标替代正式资产。