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