Files
platforms/ui
..

瓶安芯移动端 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_appapps/service_app;在明确进入实现阶段前,不从本原型复制出空壳工程。

视觉基线

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