OrangePi3588Media/PRD_02_Manager_Frontend_React.md

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