111 lines
4.0 KiB
Markdown
111 lines
4.0 KiB
Markdown
# 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. 批量任务可创建并在任务中心看到逐台结果与错误原因。
|