mirror of
https://github.com/Sagit-chu/flvx.git
synced 2026-09-28 07:36:38 +08:00
sagit
33 lines
1.5 KiB
Markdown
33 lines
1.5 KiB
Markdown
# 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
|
|
- [x] Create plan document.
|
|
- [x] Add viewMode state and toggle in `monitor.tsx`.
|
|
- [x] Receive viewMode in `MonitorView` and selectively render Grid vs List views.
|
|
- [x] Ensure list correctly visualizes node info, speed, traffic, uptime, conns, CPU/RAM/Disk usages, and action icons.
|
|
- [x] Fix HeroUI missing TableProps typings (remove `removeWrapper` prop).
|