flvx/plans/047-beautify-monitor-tab.md

047 - Beautify Monitor Tab

Goal

Redesign the node monitoring cards in the Monitor tab (监控标签) to make them more visually appealing. Incorporate a dynamic, clean layout mimicking the Nezha monitoring dashboard.

Tasks

• Redesign ServerCard in vite-frontend/src/pages/node/monitor-view.tsx with gradients, neon statuses, clean layout, up/down arrows for speeds.
• Update the realtime KPI cards in the Monitor detailed view to have subtle gradients and dynamically colored text.
• Fix TypeScript linting issues with Progress component colors (classNames vs color).