# Device Binding Home Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 将首页实现为带扫码和蓝牙占位交互的设备绑定页。

**Architecture:** 保持单页实现，使用本地 `useState` 管理设备数量、蓝牙搜索状态、搜索结果和绑定结果。扫码和蓝牙优先调用 Taro 小程序能力，在无法完成真实设备搜索时使用轻量前端兜底数据维持流程闭环。

**Tech Stack:** Taro 4、React 18、TypeScript、SCSS

---

### Task 1: 更新首页交互逻辑

**Files:**
- Modify: `src/pages/index/index.tsx`

- [ ] 定义设备绑定页所需的本地状态：设备数量、蓝牙状态、搜索结果、最近绑定设备
- [ ] 实现扫码按钮逻辑，调用 `Taro.scanCode`
- [ ] 实现蓝牙搜索流程，串联授权、蓝牙适配器、设备发现和占位兜底
- [ ] 实现设备列表点击绑定逻辑
- [ ] 为未完成的登录、设备列表、底部导航保留 Toast 占位

### Task 2: 更新首页视觉样式

**Files:**
- Modify: `src/pages/index/index.scss`

- [ ] 调整顶部区域、功能按钮、权限卡片和底部导航样式
- [ ] 新增蓝牙状态区、设备结果列表、成功提示区样式
- [ ] 保持深色背景与参考图一致的视觉方向

### Task 3: 更新项目说明

**Files:**
- Modify: `README.md`

- [ ] 更新首页说明为设备绑定页
- [ ] 补充扫码和蓝牙交互当前已实现的范围
- [ ] 说明蓝牙功能更适合真机调试

### Task 4: 验证

**Files:**
- Modify: `src/pages/index/index.tsx`
- Modify: `src/pages/index/index.scss`
- Modify: `README.md`

- [ ] 运行 `npm run build:weapp`
- [ ] 确认构建通过且没有新增依赖问题