前端 UI 设计规格书

最后更新：2026-02-28

1) 页面清单

总页面数：10

#	页面	路由	实现状态
1	Runs Dashboard	/	已实现
2	Create Run	/create	已实现
3	Run Detail	/runs/:runId	已实现
4	A/B Compare	/compare	已实现
5	Live Monitor	/monitor	已实现
6	System & Node Config	/config	已实现
7	Health Check	/health	已实现
8	Scenario List	/scenarios	已实现
9	Scenario Editor (New)	/scenarios/new	已实现
10	Scenario Editor (Edit)	/scenarios/:id/edit	已实现

2) 可复用组件

组件	文件	说明
Layout	Layout.tsx	全局布局框架（Sidebar + Content）
Sidebar	Sidebar.tsx	侧边导航栏，8 个导航项
HealthStrip	HealthStrip.tsx	顶部健康状态条
PageHeader	PageHeader.tsx	页面标题与操作按钮
Card	Card.tsx	通用卡片容器
MetaCard	MetaCard.tsx	指标摘要卡片
StatusBadge	StatusBadge.tsx	运行状态标签
RunsTable	RunsTable.tsx	运行列表表格（含筛选、分页、操作）
TabGroup	TabGroup.tsx	标签页切换组件
BarChart	BarChart.tsx	柱状图（支持双柱对比）
Pagination	Pagination.tsx	分页控件

3) 页面设计与后端映射

3.1 Runs Dashboard（运行仪表盘）

区块：

• health strip（HealthStrip 组件）
• filters（状态/场景/策略筛选 + 搜索框）
• run table（RunsTable 组件）
• row actions (detail/start/stop/compare)

后端 API：

• GET /health
• GET /runs
• GET /scenarios（加载场景筛选项）
• GET /strategies（加载策略筛选项）
• POST /runs/{run_id}/start
• POST /runs/{run_id}/stop

3.2 Create Run（创建运行）

区块：

• scenario selector（从 GET /scenarios 加载）
• strategy selector（从 GET /strategies 加载）
• run parameter form (mode, steps, dt_seconds, seed)
• submit/validation area

后端 API：

• GET /scenarios
• GET /strategies
• POST /runs
• POST /runs/{run_id}/start（创建后自动启动）

3.3 Run Detail（运行详情）

区块：

• run metadata and status cards（MetaCard 组件 x4）
• metric charts (throughput/loss/delay，TabGroup 切换)
• traces table with pagination
• artifact summary panel（支持下载）

后端 API：

• GET /runs/{run_id}
• GET /runs/{run_id}/metrics
• GET /runs/{run_id}/traces
• GET /runs/{run_id}/artifacts

3.4 A/B Compare（A/B 对比）

区块：

• left/right run selector
• KPI cards (avg throughput/loss/p95 delay)
• overlay trend chart（双柱 BarChart）
• delta table

后端 API：

• GET /runs
• GET /runs/{run_id}（两次分别获取）
• GET /runs/{run_id}/metrics（两次分别获取）

3.5 Live Monitor（实时监控）

区块：

• state indicator（轮询连接状态指示）
• current step and status cards
• rolling live metrics（MetaCard x3）
• sync/overhead panel

后端 API：

• GET /runs（加载运行列表供选择）
• GET /runs/{run_id}/status（HTTP 轮询，1 秒间隔）

注：Live Monitor 当前使用 HTTP 轮询（useRunPolling hook）替代 WebSocket，降低实现复杂度。WebSocket 连接 (WS /ws/runs/{run_id}) 仍可用但前端暂未在此页使用。

3.6 System & Node Config（系统与节点配置）

区块：

• backend health and adapter status cards（MetaCard x4）
• A-G endpoint table
• scenario topology preview（SVG 渲染节点与连线）
• location-init execution section（一键运行 + 结果展示）

后端 API：

• GET /health
• GET /config
• GET /scenarios
• GET /scenarios/{scenario_id}（拓扑预览数据）
• POST /config/location-init/run

3.7 Health Check（健康检查）

区块：

• overall status banner（healthy/degraded/unhealthy）
• summary cards（MetaCard x4：健康节点、连接成功、PHY 正常、总 Agent）
• node health detail table

后端 API：

• GET /health/nodes（15 秒自动刷新，可手动刷新）

3.8 Scenario List（场景列表）

区块：

• scenario table（ID、名称、来源、创建/更新时间）
• row actions（编辑、导出、删除）
• "新建场景"按钮

后端 API：

• GET /scenarios
• DELETE /scenarios/{scenario_id}
• POST /scenarios/{scenario_id}/export

3.9 + 3.10 Scenario Editor（场景编辑器，新建/编辑）

区块：

• basic info form（场景 ID + 名称）
• nodes table（支持从 config 端点自动填充）
• traffic flow table
• run config parameters (seed / dt_seconds / steps)
• topology preview panel（右侧实时预览）

后端 API：

• GET /config（加载可用端点列表）
• GET /scenarios/{scenario_id}（编辑模式加载已有数据）
• POST /scenarios（新建）
• PUT /scenarios/{scenario_id}（更新）

4) UI 状态规则

• created：可编辑，启动按钮可用
• running：配置只读，停止按钮可用，实时监控可用
• stopping：控件禁用，等待状态
• finished/failed/stopped：详情和对比可用

5) 交付顺序

1. Dashboard + Create Run + Detail（已完成）
2. A/B Compare 页面（已完成）
3. Live Monitor 页面（HTTP 轮询）（已完成）
4. System & Node 页面（含位置初始化 UX）（已完成）
5. Health Check 页面（已完成）
6. Scenario List + Editor（已完成）