feat(ui): redesign the overview page as a trend-first command deck

Replace the ten-small-cards overview with an action bar, four vitals
tiles carrying 72-sample sparklines seeded from /server/history, a
two-series throughput chart, a TCP/UDP connections chart, and a
grouped system strip (uptime xray|os, panel ram|threads, ip
addresses). StatusCard and XrayStatusCard are deleted; every modal
stays reachable from the action bar, the Xray error message moves
into a tooltip on the state pill, and the panel version text keeps
opening the update modal (the dev-channel switch lives there) even
when no update is available. Live values sit beside the
upload/download and tcp/udp legends, a health sentence appears only
when a vital crosses the shared warn/crit thresholds now exported
from models/status, and load average is left to System History.

The sidebar becomes an auto-collapsed 72px icon rail that expands as
an overlay on hover: rail width, brand-row height and menu paddings
are pinned so nothing shifts during the transition, the collapsed-menu
tooltips are disabled, hover state survives the per-page sidebar
remounts (with a matches(':hover') resync), and the manual collapse
trigger is gone.

Sparkline gains rgb()/rgba() support in its fill gradient, a
showLegend prop so pages stop reaching into its internals, and loses
a dependency-less repaint effect that doubled canvas paints. Chart
tooltips show clock time via the new TimeFormatter.formatClock;
accents come from theme tokens instead of status.cpu.color. Verified
by screenshot at 390/800/1150/1280/1400/1600px in light and dark,
en and fa-IR, plus programmatic geometry checks on the sidebar.
Locale files gain 8 keys and lose 9 dead ones across all 13
languages.
This commit is contained in:
Sanaei
2026-07-29 20:17:37 +02:00
parent 87ebcc7a6f
commit c3fa73d5a0
30 changed files with 1467 additions and 765 deletions
+12 -8
View File
@@ -106,7 +106,6 @@
"routing": "Định tuyến",
"outbounds": "Outbound",
"apiDocs": "Tài liệu API",
"link": "Quản lý",
"donate": "Quyên góp",
"hosts": "Hosts",
"docs": "Tài liệu",
@@ -127,12 +126,9 @@
},
"index": {
"cpu": "CPU",
"logicalProcessors": "Bộ xử lý logic",
"frequency": "Tần số",
"swap": "Swap",
"storage": "Lưu trữ",
"memory": "Bộ nhớ",
"threads": "Luồng",
"xrayStatus": "Xray",
"stopXray": "Dừng",
"restartXray": "Khởi động lại",
@@ -153,7 +149,6 @@
"xrayStatusRunning": "Đang chạy",
"xrayStatusStop": "Dừng",
"xrayStatusError": "Lỗi",
"operationHours": "Thời gian hoạt động",
"systemHistoryTitle": "Lịch sử hệ thống",
"historyTitleCpu": "Mức sử dụng CPU",
"historyTitleMem": "Mức sử dụng bộ nhớ",
@@ -171,7 +166,6 @@
"historyTabLoad": "Tải",
"historyTabConnections": "Kết nối",
"historyTabDiskUsage": "Sử dụng đĩa",
"charts": "Biểu đồ",
"xrayMetricsTitle": "Chỉ số Xray",
"xrayTitleHeap": "Bộ nhớ Heap đã cấp phát",
"xrayTitleSys": "Bộ nhớ dành riêng từ HĐH",
@@ -200,7 +194,6 @@
"overallSpeed": "Tốc độ tổng thể",
"upload": "Tải lên",
"download": "Tải xuống",
"totalData": "Tổng dữ liệu",
"sent": "Đã gửi",
"received": "Đã nhận",
"xraySwitchVersionDialog": "Bạn có chắc chắn muốn thay đổi phiên bản Xray không?",
@@ -250,7 +243,18 @@
"exportDatabasePgDesc": "Nhấn để tải xuống bản kết xuất PostgreSQL (.dump) của cơ sở dữ liệu hiện tại về thiết bị của bạn.",
"importDatabasePgDesc": "Nhấn để chọn và tải lên bản sao lưu PostgreSQL (.dump), cơ sở dữ liệu SQLite (.db) hoặc tệp kết xuất di trú SQLite nhằm khôi phục cơ sở dữ liệu của bạn. Thao tác này sẽ thay thế toàn bộ dữ liệu hiện tại.",
"migrationDownload": "Tải tệp di trú",
"migrationDownloadPgDesc": "Nhấp để tải xuống cơ sở dữ liệu SQLite .db được tạo từ dữ liệu PostgreSQL của bạn, sẵn sàng chạy bảng điều khiển này trên SQLite."
"migrationDownloadPgDesc": "Nhấp để tải xuống cơ sở dữ liệu SQLite .db được tạo từ dữ liệu PostgreSQL của bạn, sẵn sàng chạy bảng điều khiển này trên SQLite.",
"avg": "TB",
"peak": "đỉnh",
"free": "trống",
"openSockets": "socket đang mở",
"throughputSub": "Tổng theo giao diện mạng",
"avgWindow": "Trung bình trong khoảng",
"healthWarm": "{list} — đang cao",
"healthCritical": "{list} — nguy cấp",
"panel": "Panel",
"threads": "Luồng",
"uptime": "Thời gian chạy"
},
"inbounds": {
"totalDownUp": "Tổng tải lên/tải xuống",