# 设备绑定首页设计说明

**日期：** 2026-05-07

## 目标

把首页调整为“设备绑定首页（无设备状态）”，并在不接入真实后端接口的前提下，补齐扫码绑定、蓝牙搜索、权限提示和底部导航的前端交互骨架。

## 范围

- 保留当前单页结构，不新增独立页面
- 使用 `Taro + React + TypeScript`
- 扫码使用 `Taro.scanCode`
- 蓝牙流程优先调用小程序蓝牙相关 API
- 蓝牙搜索结果允许使用前端占位数据兜底，方便开发阶段演示流程
- 不接入真实后端接口，不保存真实绑定关系

## 页面结构

- 顶部区：登录按钮、设备标题、设备数量、添加入口
- 功能区：扫码添加设备、蓝牙搜索设备
- 状态区：蓝牙搜索状态、搜索结果列表、绑定成功提示
- 权限提示区：展示绑定前注意事项
- 底部导航：首页、报告、小e、消息、我的

## 交互设计

### 扫码绑定

1. 点击“扫码 添加新设备”
2. 调用扫码能力
3. 从扫码结果中提取设备编码
4. 弹出“查询中”提示
5. 用本地状态模拟绑定成功，并把设备数量更新为 `1`

异常处理：

- 用户取消扫码：提示已取消
- 扫码失败：提示二维码无法识别或扫码失败
- 权限不足：提示前往系统设置开启相机权限

### 蓝牙绑定

1. 点击“蓝牙搜附近的设备”
2. 检查定位授权状态
3. 尝试申请定位授权
4. 打开蓝牙适配器
5. 开始搜索附近蓝牙设备
6. 展示“搜索中”状态
7. 收集搜索结果；如果短时间内没有结果，显示前端占位设备列表
8. 点击设备项后执行绑定成功流程

异常处理：

- 未开启定位或授权失败：提示开启定位权限
- 蓝牙不可用：提示开启系统蓝牙
- 未发现设备：展示空状态提示

## 实现边界

- 只修改首页和文档
- 不新增全局状态管理
- 不新增依赖
- 不删除任何目录或批量删除任何文件