界面与交互设计

小程序 IoT 业务页面的界面与交互设计文档。需求定义见功能需求（第 8 节 MP-010~MP-074），用户场景见用户与场景（场景一至四）。

1. 导航结构

TabBar

三个固定 Tab：

首页 — 设备列表
设备 — 设备管理入口（添加设备、配网）
我的 — 个人中心

页面跳转关系

首页（设备列表）
  ├─→ 设备详情（push）→ 设备设置（push）→ 数据历史（push）
  └─→ 配网流程（push，多步骤）

设备 Tab
  └─→ 配网流程（push）

我的
  ├─→ 家庭管理（push）
  ├─→ 消息中心（push）
  └─→ 设置（push）

2. 页面设计

2.1 首页：设备列表

定位： 用户查看和访问名下设备的主入口。

┌──────────────────────────────┐
│  家 ▼                    🔍  │
├──────────────────────────────┤
│  ┌──────────────────────┐    │
│  │ 🔌 客厅继电器         🟢│    │
│  │    四路继电器    25.6°│    │
│  └──────────────────────┘    │
│  ┌──────────────────────┐    │
│  │ 💡 卧室开关           🟢│    │
│  │    智能开关           │    │
│  └──────────────────────┘    │
│  ┌──────────────────────┐    │
│  │ 🌡 温湿度传感器       ⚫│    │
│  │    环境监测      23.1°│    │
│  └──────────────────────┘    │
│                         [+]  │
└──────────────────────────────┘

布局结构：

区域	内容
顶部	家庭名称（左侧，点击下拉切换家庭）+ 搜索图标（右侧）
搜索栏	点击搜索图标展开，输入关键词实时过滤设备
主体	设备卡片列表，下拉刷新
悬浮按钮	右下角"+"按钮，点击进入配网流程

设备卡片：

位置	内容
左侧	设备类型图标（根据产品类型显示不同 icon）
中间	设备名称（大字）+ 产品类型（灰色小字，如"四路继电器"）
右侧	在线状态圆点（绿=在线，灰=离线）+ 最新数据摘要（如"温度 25.6°"）

点击卡片进入设备详情页。

状态变化：

状态	表现
加载中	卡片区域 skeleton 占位（灰色方块闪烁）
空状态	居中插画 + "还没有设备" + "添加设备"按钮
搜索无结果	"未找到设备"提示
网络错误	"加载失败，点击重试"

交互：

下拉刷新：触发 onPullDownRefresh，重新请求设备列表
家庭切换：点击顶部家庭名称 → 弹出家庭列表 → 选择后设备列表按家庭过滤
WebSocket：收到 device.status 推送时更新对应卡片的在线状态圆点

2.2 设备详情（控制页）

定位： 查看设备实时状态并执行控制操作。

┌──────────────────────────────┐
│  ← 客厅继电器        🟢在线  │
│     最后上报: 10:30:15       │
├──────────────────────────────┤
│      ┌──────────────┐        │
│      │   继电器 1    │        │
│      │   ╭──────╮   │        │
│      │   │ OFF  │   │        │
│      │   ╰──────╯   │        │
│      └──────────────┘        │
│      ┌──────────────┐        │
│      │   继电器 2    │        │
│      │   ╭──────╮   │        │
│      │   │ ON   │   │        │
│      │   ╰──────╯   │        │
│      └──────────────┘        │
│      ┌──────────────┐        │
│      │   芯片温度    │        │
│      │    45.2 °C    │        │
│      └──────────────┘        │
├──────────────────────────────┤
│      [  查看历史数据  ]      │
└──────────────────────────────┘

布局结构：

区域	内容
顶部	设备名称 + 在线状态标签（绿底"在线"/灰底"离线"）+ 最后上报时间
主体	控制组件区，根据物模型 `ui.component` 字段动态渲染
底部	"查看历史数据"按钮

控制组件映射（来自物模型 ui.component）：

组件类型	渲染方式	交互
`switch`	大圆形开关按钮，带名称标签	点击切换，操作中 loading 动画，收到 set_reply 后更新状态
`multi-switch`	多路开关列表	每路独立开关 + 通道名称，互不干扰
`slider`	滑块 + 当前值数字	拖拽调节，松手后下发指令
`display`	大号数值 + 单位	只读展示（温度、湿度等），WebSocket 实时更新

控制交互流程：

点击开关 → 按钮置灰 + 旋转 loading
  ├─→ 3s 内收到 set_reply → 更新状态 + 轻提示"已开启/关闭"
  └─→ 3s 超时未回复 → 恢复原状态 + 轻提示"操作失败，请重试"

WebSocket 实时更新：

onShow 时发送 subscribe 订阅设备影子
收到 device.shadow 推送后直接更新页面组件状态，无需手动刷新
onHide 时发送 unsubscribe 取消订阅

离线处理：

设备离线时所有控制组件置灰不可点击
顶部状态标签显示"离线"
横幅提示"设备当前离线，无法控制"

2.3 设备配网

定位： 引导用户将新设备连接 WiFi 并注册到平台。

入口：

首页空状态"添加设备"按钮
首页右上角"+"按钮
设备 Tab 页"添加设备"

流程步骤（步骤条展示）：

步骤 1 — 选择配网方式：

默认 BLE 配网（推荐，大字卡片）
扫码配网（备用选项）

步骤 2 — 扫描设备：

┌──────────────────────────────┐
│  ← 添加设备       步骤 2/5   │
├──────────────────────────────┤
│      ● BLE 配网  ○ 扫码配网  │
├──────────────────────────────┤
│         ⟳ 正在扫描...        │
│  ┌──────────────────────┐    │
│  │ YunStack-4CH-A1B2    │    │
│  │ 信号强度: ▂▄▆█ -42   │    │
│  └──────────────────────┘    │
│  ┌──────────────────────┐    │
│  │ YunStack-4CH-C3D4    │    │
│  │ 信号强度: ▂▄▆█ -55   │    │
│  └──────────────────────┘    │
└──────────────────────────────┘

BLE 模式：扫描动画 + 发现的设备列表（显示设备名称和信号强度），点击选择目标设备
扫码模式：打开摄像头扫码

步骤 3 — 输入 WiFi 密码：

┌──────────────────────────────┐
│  ← 添加设备       步骤 3/5   │
├──────────────────────────────┤
│  WiFi 名称                   │
│  ┌──────────────────────┐    │
│  │ MyWiFi-5G            │    │
│  └──────────────────────┘    │
│  WiFi 密码                   │
│  ┌──────────────────────┐    │
│  │ ****************  👁  │    │
│  └──────────────────────┘    │
│  ┌──────────────────────┐    │
│  │     开始配网          │    │
│  └──────────────────────┘    │
└──────────────────────────────┘

SSID 自动填充当前手机连接的 WiFi
密码输入框 + 显示/隐藏切换按钮
"开始配网"按钮

步骤 4 — 配网中：

┌──────────────────────────────┐
│  ← 添加设备       步骤 4/5   │
├──────────────────────────────┤
│         ⟳ 旋转动画           │
│    正在连接设备...            │
│  ✓ 连接 BLE                │
│  → 写入 WiFi 凭据          │
│    等待设备上线              │
└──────────────────────────────┘

旋转进度动画 + 文字提示"正在连接设备..."
BLE 写入 WiFi 信息到设备配网特征值
显示当前步骤（连接 BLE → 写入 WiFi → 等待设备上线）

步骤 5 — 配网结果：

配网成功：
┌──────────────────────────────┐
│  ← 添加设备       步骤 5/5   │
├──────────────────────────────┤
│         ✅                   │
│     设备添加成功              │
│  ┌──────────────────────┐    │
│  │ 客厅继电器            │    │
│  └──────────────────────┘    │
│  ┌──────────────────────┐    │
│  │       完成            │    │
│  └──────────────────────┘    │
└──────────────────────────────┘

配网失败：
┌──────────────────────────────┐
│  ← 添加设备                  │
├──────────────────────────────┤
│         ❌                   │
│     配网失败                  │
│  设备未响应，请确认            │
│  设备已通电并靠近手机          │
│  ┌──────────────────────┐    │
│  │       重试            │    │
│  └──────────────────────┘    │
└──────────────────────────────┘

失败原因提示：

错误场景	提示文案	建议操作
密码错误	WiFi 密码错误，请重新输入	重新输入密码
设备未响应	设备未响应，请确认设备已通电并靠近手机	检查设备电源
超时	连接超时，请重试	重新配网

2.4 设备命名

定位： 配网成功后为设备设置名称。

┌──────────────────────────────┐
│  ← 命名设备                  │
├──────────────────────────────┤
│         ✅                   │
│     设备添加成功              │
│  ┌──────────────────────┐    │
│  │ 四路继电器            │    │
│  └──────────────────────┘    │
│  ┌──────────────────────┐    │
│  │       完成            │    │
│  └──────────────────────┘    │
└──────────────────────────────┘

区域	内容
顶部	绿色打勾图标 + "设备添加成功"标题
主体	设备名称输入框，默认值如"四路继电器"
底部	"完成"按钮

点击完成 → 调用 PATCH /devices/:id/name → 跳转设备详情页。

2.5 设备设置

定位： 管理设备信息和配置。

从设备详情页右上角"..."进入，列表形式：

┌──────────────────────────────┐
│  ← 设备设置                  │
├──────────────────────────────┤
│  设备名称         客厅继电器 >│
│  ─────────────────────────── │
│  设备信息                   >│
│  ─────────────────────────── │
│  固件升级      v1.0.0 🔴  >│
│  ─────────────────────────── │
│  设备分享             (v0.5) │
│  ─────────────────────────── │
│  解绑设备                    │
└──────────────────────────────┘

菜单项	交互
设备名称	点击弹出编辑弹窗，修改后保存
设备信息	点击展开：产品名称、设备 ID、固件版本、MAC、注册时间（只读）
固件升级	显示当前版本，有新版本时显示红点 + "立即升级"按钮
设备分享	预留入口（v0.5）
解绑设备	红色文字，点击弹出二次确认弹窗"解绑后设备将脱离平台，确认解绑？"，确认后调用 DELETE 并返回首页

2.6 数据历史

定位： 查看设备历史遥测数据的趋势变化。

从设备详情页"查看历史数据"进入。

┌──────────────────────────────┐
│  ← 数据历史                  │
├──────────────────────────────┤
│  [今天] [近7天] [近30天] 自定义│
├──────────────────────────────┤
│  ☑ 温度  ☑ 湿度  ☐ 继电器1  │
├──────────────────────────────┤
│  温度/°C                     │
│  30 ┤         ╱╲             │
│  25 ┤   ╱╲  ╱  ╲   ╱╲      │
│  20 ┤  ╱  ╲╱    ╲╱  ╲     │
│     └───────────────── 时间   │
│  湿度/%                      │
│  80 ┤  ╲    ╱╲              │
│  60 ┤   ╲  ╱  ╲   ╱╲      │
│  40 ┤    ╲╱    ╲╱  ╲     │
│     └───────────────── 时间   │
└──────────────────────────────┘

区域	内容
顶部	时间范围快捷切换：今天 / 近 7 天 / 近 30 天 / 自定义
筛选	属性选择标签（多选，如"温度""湿度""继电器1"）
主体	时序曲线图（横轴时间，纵轴数值，多属性不同颜色叠加）
底部	无更多数据提示

交互：

切换时间范围或属性 → 图表 loading 蒙层 → 重新加载数据
点击曲线上的点 → 显示详情气泡（时间 + 数值 + 单位）
空状态：所选范围无数据时显示"暂无数据"
加载失败：图表区域显示"加载失败，点击重试"

2.7 家庭管理

定位： 管理多家庭、多房间的设备分组。

从"我的"→"家庭管理"进入。

┌──────────────────────────────┐
│  ← 家庭管理                  │
├──────────────────────────────┤
│  ┌──────────────────────┐    │
│  │ 🏠 家                │    │
│  │    3个房间 · 5台设备   >│    │
│  └──────────────────────┘    │
│  ┌──────────────────────┐    │
│  │ 🏢 公司              │    │
│  │    2个房间 · 3台设备   >│    │
│  └──────────────────────┘    │
│  ┌──────────────────────┐    │
│  │     + 创建家庭        │    │
│  └──────────────────────┘    │
└──────────────────────────────┘

区域	内容
主体	家庭卡片列表（家庭名称 + 房间数 + 设备总数）
底部	"创建家庭"按钮

点击家庭卡片进入家庭详情。

┌──────────────────────────────┐
│  ← 家                        │
├──────────────────────────────┤
│  家庭名称: ┌────────────┐    │
│            │ 家      ✎  │    │
│            └────────────┘    │
├──────────────────────────────┤
│  ┌──────────────────────┐    │
│  │ 🛋 客厅    2台设备    >│    │
│  └──────────────────────┘    │
│  ┌──────────────────────┐    │
│  │ 🛏 卧室    2台设备    >│    │
│  └──────────────────────┘    │
│  ┌──────────────────────┐    │
│  │ 🍳 厨房    1台设备    >│    │
│  └──────────────────────┘    │
│  ┌──────────────────────┐    │
│  │     + 添加房间        │    │
│  └──────────────────────┘    │
└──────────────────────────────┘

家庭详情页：

区域	内容
顶部	家庭名称（可点击编辑）
主体	房间列表（房间名 + 设备数，点击进入设备归属管理）
底部	"添加房间"按钮

状态变化：

状态	表现
空状态	居中插画 + "创建第一个家庭"引导按钮
加载中	卡片 skeleton 占位

2.8 消息中心

定位： 集中查看系统通知、告警和设备消息（v0.5+）。

从"我的"→"消息中心"进入。

┌──────────────────────────────┐
│  ← 消息中心                  │
├──────────────────────────────┤
│  ┌──────────────────────┐    │
│  │ 🔴 设备温度超过阈值   🔴│    │
│  │    客厅传感器...   10:30│    │
│  └──────────────────────┘    │
│  ┌──────────────────────┐    │
│  │ 🔵 固件 v1.1.0 已发布  │    │
│  │    四路继电器可升级 昨天│    │
│  └──────────────────────┘    │
│  ┌──────────────────────┐    │
│  │ 🟢 客厅插座已上线      │    │
│  │    设备已连接      昨天│    │
│  └──────────────────────┘    │
└──────────────────────────────┘

消息列表：

位置	内容
左侧	消息类型图标（告警红色、系统蓝色、设备绿色）
中间	标题 + 摘要（单行截断）
右侧	时间 + 未读红点

消息类型：

类型	示例
告警消息	"设备温度超过 80°C 阈值"
系统通知	"固件 v1.1.0 已发布，可升级"
设备消息	"客厅插座已上线"

3. 全局交互规范

规范	说明
加载状态	列表用原生下拉刷新，详情页用居中 spinner，控制操作用按钮内 loading
错误处理	网络异常用 `wx.showToast` 提示 + 手动重试按钮；Token 过期自动跳转登录页
实时更新	首页和详情页通过 WebSocket 推送，收到后直接更新页面数据，不做全量刷新
页面返回	所有子页面左上角返回按钮，物理返回键行为一致

界面与交互设计 ​

1. 导航结构 ​

TabBar ​

页面跳转关系 ​

2. 页面设计 ​

2.1 首页：设备列表 ​

2.2 设备详情（控制页） ​

2.3 设备配网 ​

2.4 设备命名 ​

2.5 设备设置 ​

2.6 数据历史 ​

2.7 家庭管理 ​

2.8 消息中心 ​

3. 全局交互规范 ​