# 任务008：H5用户端

## 目标

实现H5用户端，底部导航（首页/设备/我的），扫码进入设备详情，充电控制。

## 技术栈

- React + TypeScript（复用前端项目）
- 移动端适配（viewport + rem/vw）
- Arco Design Mobile（或自定义移动端组件）

## 路由结构

```
/pms                    # H5首页（Dashboard）
/pms/devices            # 设备列表
/pms/devices/:id        # 设备详情（柜子视图）
/pms/me                 # 我的
/pms/login              # 登录
```

**扫码入口：** `/pms/{abstract_id}` 直接跳到设备详情

## 页面设计

### 底部导航

```
┌─────────────────┐
│                 │
│    页面内容      │
│                 │
─────────────────┤
│ 首页 | 设备 | 我的 │
└─────────────────┘
```

### 首页（Dashboard）

**数据卡片：**
```
┌─────┐ ┌───── ┌─────┐ ┌─────
│在线  │ │充电中│ │空闲  │ │故障  │
│ 125 │ │  45 │ │  82 │ │  3  │
│柜子 │ │柜子 │ │通道 │ │通道 │
└───── └───── └───── └─────┘
```

**今日统计：**
- 充电次数：423次
- 充电时长：628小时
- 总能耗：3,750 kWh

**告警通知：**
- ⚠ 项目A-柜子3 通道12 过温
- ⚠ 项目B-柜子7 离线

**项目列表：**
- 项目A | 3柜 | 充电28 空闲10 故障2
- 项目B | 2柜 | 充电17 空闲15 故障0

### 设备页

**项目列表 → 设备列表 → 设备详情**

**设备详情（柜子视图）：**
```
┌──────────────────────────────────────────────┐
│  柜子ID: 10-00000000    状态: 在线            │
├──────────────────────────────────────────────┤
│  仓板1 (ID:1)                                │
│  ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐│
│  │通道1 │ │通道2 │ │通道3 │ │通道4 │ │通道5 │ │通道6 ││
│  │状态 │ │状态 │ │状态 │ │状态 │ │状态 │ │状态 ││
│  │电压 │ │电压 │ │电压 │ │电压 │ │电压 │ │电压 ││
│  │电流 │ │电流 │ │电流 │ │电流 │ │电流 │ │电流 ││
│  └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘│
──────────────────────────────────────────────┤
│  仓板2 (ID:2) ...                            │
└──────────────────────────────────────────────┘
```

**通道详情页：**
- 实时状态（SOC、SOH）
- 电气参数（电压、电流、功率、能耗）
- BMS数据（单体电压、温度、告警）
- 充电曲线
- 操作按钮（停止充电、开门）— 需确认弹窗

### 我的页

- 个人信息（姓名、手机号）
- 修改密码
- 退出登录

## API接口

```
GET  /api/h5/dashboard          # 首页数据
GET  /api/h5/projects           # 项目列表
GET  /api/h5/cabinets           # 设备列表（按项目）
GET  /api/h5/cabinets/:id       # 设备详情
GET  /api/h5/compartments/:id   # 通道详情
POST /api/h5/charge/start       # 开始充电
POST /api/h5/charge/stop        # 停止充电
POST /api/h5/door/open          # 开门
```

## 质量约束

1. 完成代码后执行 `tsc --noEmit`，零报错零警告
2. 分层拆分，单函数≤80行，命名语义化，完整注释
3. 所有外部IO/网络请求异常捕获
4. 分支逻辑全覆盖，不遗漏兜底分支
5. 常量抽离，不使用废弃API
6. React函数组件+Hooks
7. 移动端适配，触摸友好