# PRD ② 管理端前端（React Web UI）V1

## 1. 产品形态
- 用户在 PC 上启动 `managerd`（Go 后端），浏览器打开：`http://127.0.0.1:<port>/`。
- 前端只与本机 `managerd` 通信（不直连设备），避免跨域与安全复杂度。

## 2. 目标
1. 一键 Search 发现设备并展示在线状态。
2. 单设备：查看 graphs 状态、查看 logs、执行 reload/rollback。
3. 单设备：上传模型、下发配置并生效。
4. 多设备：批量下发配置（任务化显示进度与失败原因）。

## 3. UI 风格（V1）
- 风格：极简运维控制台（表格 + 抽屉/弹窗 + 表单），信息密度优先。
- 主题：浅色默认；无需复杂动效。
- 组件库：Ant Design（推荐）。
- 状态表达：
  - Online：绿色圆点
  - Offline：灰色圆点
  - Running/Stopped：标签
  - 失败：红色提示 + 可展开错误详情

## 4. 技术选型与工程要求
- React 18 + TypeScript + Vite
- 路由：React Router
- 请求与缓存：React Query（或 SWR）
- 代码规范：ESLint + Prettier
- 环境配置：从 `window.__APP_CONFIG__` 或 `.env` 读取后端 baseURL（默认同源）

## 5. 页面与交互

### 5.1 设备列表页 `/devices`
**组件**：表格（可搜索/排序）

**顶部操作**：
- `Search`（触发发现）
- `Batch Apply Config`（进入批量配置向导/弹窗）

**表格列**：
- Status（Online/Offline）
- Device Name
- IP:AgentPort（可在详情页展示 MediaPort）
- Version（version + git_sha）
- Graphs（数量）
- Total FPS（从 graphs 汇总）
- Actions：Detail / Reload / Rollback

**交互**：
- Search 点击后 1~2 秒 loading，完成后刷新列表。
- Reload/Rollback：弹确认框；提交后显示 toast；失败显示 error 文本。

### 5.2 设备详情页 `/devices/:deviceId`
使用 Tabs：

1) **Overview**
- 展示 `info`：device_id、device_name、hostname、ip、version、git_sha、uptime
- 展示 graphs 概览（通过后端代理设备 agent 的 graphs 数据）

2) **Graphs**
- Graph 列表（name/running/fps/alarm_total/publish_clients）
- 点击某 graph 展开详情（nodes/edges），按后端数据渲染

3) **Logs**
- 最近日志（默认 200 行）
- 刷新按钮；（可选）自动刷新开关

4) **Models**
- 已上传模型列表（name/sha256/size/mtime/path）
- 上传：选择文件 + 填 name（默认用文件名去扩展名）
- 上传进度条；成功后自动刷新列表

5) **Config**
- JSON 编辑器（Monaco 或轻量 textarea + 格式化按钮）
- `Apply` 按钮（调用后端创建任务或直接 apply）
- 失败时展示 error，并提示可执行 rollback

### 5.3 模板/配置生成 `/templates`
**目标**：减少手写 JSON。

- 模板列表（后端提供 templates）
- 选择模板后展示动态表单（后端返回 params schema）
- 生成预览 JSON（只读）
- 选择目标设备（单台/多台）
- 点击 Apply：创建任务，跳转任务详情

### 5.4 任务中心 `/tasks`
- 任务列表：类型、创建时间、状态（running/success/failed/partial）
- 任务详情：每台设备结果（pending/running/success/failed + error）
- 实时更新：SSE（EventSource）订阅 `/api/tasks/:id/events`

## 6. 前端对接 API（本机 managerd）
前端只调用以下（具体字段见后端 PRD）：
- `POST /api/discovery/search`
- `GET /api/devices`
- `GET /api/devices/:id`
- `POST /api/devices/:id/reload`
- `POST /api/devices/:id/rollback`
- `GET /api/devices/:id/graphs`
- `GET /api/devices/:id/logs?limit=...`
- `POST /api/devices/:id/models/upload`
- `POST /api/devices/:id/config/apply`
- `GET /api/templates`、`GET /api/templates/:name`
- `POST /api/tasks`、`GET /api/tasks/:id`、`GET /api/tasks/:id/events`

## 7. 验收标准
1. 可 Search 并展示设备列表，状态正确。
2. 设备详情可查看 graphs、logs，且 reload/rollback 可用。
3. 可上传模型并在 Models 列表看到。
4. 可 Apply Config 并观察 graphs 状态变化。
5. 批量任务可创建并在任务中心看到逐台结果与错误原因。