taiheEhu/docs/superpowers/plans/2026-05-07-device-binding-home.md

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

• 确认构建通过且没有新增依赖问题