SanquanConsumption 消费主页面设计

日期：2026-09-28

目标

在 SanquanConsumption 中实现视频《三全消费机.mp4》所示的智能刷脸就餐系统主要页面。页面优先按目标设备的 1366×768 横屏分辨率还原，同时保证其他常见横屏尺寸下结构不溢出、不遮挡。

实现范围

主页面

• 全屏横屏显示，隐藏默认 ActionBar，使用视频中的橙色顶部栏和浅木纹背景。
• 顶部左侧显示当前餐次及时间段，中间显示“智能刷脸就餐系统”，右侧设置入口打开现有 SettingsActivity。
• 左侧固定信息区包含餐次圆形入口、就餐类型、金额、余额、付款二维码以及连接状态提示。
• 右侧显示“就餐记录”表格，列为序号、姓名、就餐类型、金额、余额、就餐时间。
• 就餐记录调用项目现有订单列表接口；没有数据或请求失败时显示明确状态，不在生产运行时伪造视频中的人员与消费记录。

结算面板

• 点击左侧“餐”进入结算状态，左侧信息区保持不变，右侧切换为金额输入与数字键盘。
• 支持数字、小数点、删除和清空输入；金额按货币规则限制为最多两位小数。
• “关闭”返回就餐记录页面。
• “扫码支付”复现视频中的扫码弹层和关闭行为。当前工程缺少目标设备扫码 SDK，因此本次只提供清晰的扫码接入边界，不伪造支付成功。
• “+”按钮保留为视频对应的业务操作入口；在服务端或硬件契约未明确前，不发起错误支付请求。

设置页面

• 保留本项目现有设置项与现有保存、配对、版本检查逻辑：API 地址、配对码、设备编号、语音开关、版本更新。
• 宽屏仍采用左侧导航、右侧设置内容的结构，并统一为主页面的橙色顶栏与浅木纹边界风格。
• 窄屏继续使用顶部返回入口，不因主页面横屏设计删除现有适配。

分辨率与布局策略

• 1366×768 为首要视觉验收尺寸，按视频中的约 1:2.1 左右栏比例组织内容。
• 关键尺寸统一放入资源文件，不在 Java 代码中散落像素或颜色常量。
• 使用 dp、权重和最小宽高约束组合适配；表头和记录行使用同一列权重，避免不同分辨率下错列。
• 主页面锁定横屏；当宽度不足时优先保持左侧信息完整，右侧记录区允许内容压缩但不允许覆盖。

组件与职责

• MainActivity：页面状态切换、订单加载、MQTT 状态展示和页面级生命周期管理。
• ConsumptionRecordAdapter：只负责就餐记录行的展示与数据刷新。
• AmountInputController：只负责结算金额的输入、删除、清空和格式约束，避免键盘逻辑散落在 Activity 中。
• Android 资源：集中保存颜色、尺寸、字符串、圆形按钮、表格行和木纹边界等视觉资源。

数据流与异常处理

1. 页面启动后连接现有 MQTT，并调用当天订单列表接口。
2. 订单接口成功后刷新表格；页面恢复前台时按需刷新，避免重复创建连接。
3. 网络失败、配置不完整或 MQTT 未启用时，在页面状态区显示可理解提示，不阻断本地页面操作。
4. 支付和扫码在缺少硬件能力时保持未完成状态，不构造虚假成功结果。

验证标准

• 在 1366×768 横屏截图中，顶部栏、左右区域、表格、金额键盘与视频主要视觉关系一致。
• 设置入口、餐次入口、数字键盘、删除、关闭、扫码弹层均可操作。
• 订单接口成功、空数据、请求失败三种状态均不会崩溃。
• 现有设置项和逻辑全部保留。
• assembleDebug 与单元测试通过；对金额输入控制器补充边界测试。

明确不包含

• 未提供 SDK 的真实人脸识别、摄像头预览和硬件扫码能力。
• 未确认业务契约前的真实支付提交。
• 与视频主页面无关的功能扩展或源项目大规模移植。