flvx/plans/050-monitor-tunnel-top-level.md

050 - 监控页面隧道独立入口

背景

当前监控页面的隧道流量监控嵌套在节点详情内，用户需要先点击某个节点才能看到隧道流量。 需要将隧道监控提升为与节点列表同级的入口，展示隧道质量（延迟）和流量统计。

设计

监控页面结构变更

在 monitor.tsx 页面增加 Tab 式结构（或并列区域），新增"隧道监控"入口与节点列表同级：

• 节点 Tab：保持现有节点卡片/列表 + 详情视图
• 隧道 Tab：新增隧道卡片/列表视图
  • 每个隧道卡片显示：隧道名称、状态、质量指标（入口→出口延迟、出口→Bing TCP延迟）
  • 点击隧道进入详情：隧道流量趋势图表（已有的 tunnel metrics chart）

隧道质量指标

使用已有的隧道诊断 API (/tunnel/diagnose) 进行 TCP 延迟测试：

• 入口→出口延迟
• 出口→Bing TCP 延迟（bing.com:443）

新增一个轻量级的后端 API 来获取隧道质量快照（定时 TCP 测试延迟）， 或者前端在隧道 Tab 里手动触发诊断。

实现方案（前端为主）

由于后端已有完整的 tunnel metrics 和 diagnosis API，本次改动主要在前端：

1. monitor.tsx 增加 Tab 切换（节点 / 隧道）
2. 新建 tunnel-monitor-view.tsx 组件
3. 隧道列表用卡片展示质量指标
4. 点击进入隧道详情，展示流量图表
5. 从 monitor-view.tsx 的节点详情中移除隧道流量图表

任务清单

• 1. 修改 monitor.tsx，增加节点/隧道 Tab 切换
• 2. 新建 tunnel-monitor-view.tsx 组件，实现隧道列表视图
• 3. 隧道卡片展示名称、状态、质量指标（支持手动诊断获取延迟）
• 4. 隧道详情视图，展示流量趋势图表（复用已有 tunnel metrics API）
• 5. 从节点详情视图中移除隧道流量图表
• 6. TypeScript 编译通过验证