1.9 KiB
1.9 KiB
设备绑定首页设计说明
日期： 2026-05-07
目标
把首页调整为“设备绑定首页（无设备状态）”，并在不接入真实后端接口的前提下，补齐扫码绑定、蓝牙搜索、权限提示和底部导航的前端交互骨架。
范围
- 保留当前单页结构，不新增独立页面
- 使用
Taro + React + TypeScript - 扫码使用
Taro.scanCode - 蓝牙流程优先调用小程序蓝牙相关 API
- 蓝牙搜索结果允许使用前端占位数据兜底，方便开发阶段演示流程
- 不接入真实后端接口，不保存真实绑定关系
页面结构
- 顶部区：登录按钮、设备标题、设备数量、添加入口
- 功能区：扫码添加设备、蓝牙搜索设备
- 状态区：蓝牙搜索状态、搜索结果列表、绑定成功提示
- 权限提示区：展示绑定前注意事项
- 底部导航：首页、报告、小e、消息、我的
交互设计
扫码绑定
- 点击“扫码 添加新设备”
- 调用扫码能力
- 从扫码结果中提取设备编码
- 弹出“查询中”提示
- 用本地状态模拟绑定成功，并把设备数量更新为
1
异常处理：
- 用户取消扫码：提示已取消
- 扫码失败：提示二维码无法识别或扫码失败
- 权限不足：提示前往系统设置开启相机权限
蓝牙绑定
- 点击“蓝牙搜附近的设备”
- 检查定位授权状态
- 尝试申请定位授权
- 打开蓝牙适配器
- 开始搜索附近蓝牙设备
- 展示“搜索中”状态
- 收集搜索结果；如果短时间内没有结果，显示前端占位设备列表
- 点击设备项后执行绑定成功流程
异常处理：
- 未开启定位或授权失败：提示开启定位权限
- 蓝牙不可用：提示开启系统蓝牙
- 未发现设备：展示空状态提示
实现边界
- 只修改首页和文档
- 不新增全局状态管理
- 不新增依赖
- 不删除任何目录或批量删除任何文件