flvx/plans/049-monitor-list-view.md

049 - Monitor List View

Objective

The user requested that the Monitor page should switch its card-based grid view to a list view similar to a provided screenshot, and a view mode toggle should be added to the top right.

Expected Features

1. View Mode Toggle
   • Add a state viewMode in pages/monitor.tsx.
   • Add a toggle button with LayoutGrid/List icons next to the refresh button.
   • Pass viewMode down to MonitorView component.
2. List View Implementation
   • Extend MonitorViewProps with viewMode: "list" | "grid".
   • Render the ServerCard grid when viewMode === "grid".
   • Render a Table when viewMode === "list".
   • The list view should include:
     • 状态 (Status: Colored dot depending on isOnline).
     • 名称 (Name: Node name).
     • 速率 (Speed: Up/Down speeds styled appropriately).
     • 流量 (Traffic: Total Up/Down bytes).
     • 开机时长 (Uptime).
     • 连接数 (Connections: TCP/UDP).
     • CPU (Progress bar).
     • RAM (Progress bar).
     • 存储 (Storage / Disk Progress bar).
     • 操作 (Actions: Eye view icon to open detailed monitor).

Checklist

• Create plan document.
• Add viewMode state and toggle in monitor.tsx.
• Receive viewMode in MonitorView and selectively render Grid vs List views.
• Ensure list correctly visualizes node info, speed, traffic, uptime, conns, CPU/RAM/Disk usages, and action icons.
• Fix HeroUI missing TableProps typings (remove removeWrapper prop).