mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-08-17 16:50:58 +00:00
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:
@@ -1,5 +1,10 @@
|
||||
import { NumberFormatter } from '@/utils';
|
||||
|
||||
export const USAGE_WARN_PERCENT = 80;
|
||||
export const USAGE_CRIT_PERCENT = 90;
|
||||
export const USAGE_WARN_COLOR = '#faad14';
|
||||
export const USAGE_CRIT_COLOR = '#ff4d4f';
|
||||
|
||||
export class CurTotal {
|
||||
current: number;
|
||||
total: number;
|
||||
@@ -16,9 +21,9 @@ export class CurTotal {
|
||||
|
||||
get color(): string {
|
||||
const p = this.percent;
|
||||
if (p < 80) return '#1677ff';
|
||||
if (p < 90) return '#faad14';
|
||||
return '#ff4d4f';
|
||||
if (p < USAGE_WARN_PERCENT) return '#1677ff';
|
||||
if (p < USAGE_CRIT_PERCENT) return USAGE_WARN_COLOR;
|
||||
return USAGE_CRIT_COLOR;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user