{log.stamp &&
{log.stamp} }
{log.stamp && log.levelText ? ' ' : ''}
- {log.levelText &&
{log.levelText} }
+ {log.levelText && (
+
{log.levelText}
+ )}
{(log.body || log.service) && (
<>
{(log.stamp || log.levelText) &&
- }
diff --git a/frontend/src/pages/index/OverviewActionBar.tsx b/frontend/src/pages/index/OverviewActionBar.tsx
index e5020e9bd..d1b5ae6b2 100644
--- a/frontend/src/pages/index/OverviewActionBar.tsx
+++ b/frontend/src/pages/index/OverviewActionBar.tsx
@@ -75,20 +75,58 @@ export default function OverviewActionBar({
const actionGroups: BarAction[][] = [
[
- { key: 'restart', icon:
, text: t('pages.index.restartXray'), onClick: onRestartXray, primary: true },
- { key: 'stop', icon:
, text: t('pages.index.stopXray'), onClick: onStopXray },
+ {
+ key: 'restart',
+ icon:
,
+ text: t('pages.index.restartXray'),
+ onClick: onRestartXray,
+ primary: true,
+ },
+ {
+ key: 'stop',
+ icon:
,
+ text: t('pages.index.stopXray'),
+ onClick: onStopXray,
+ },
],
[
{ key: 'logs', icon:
, text: t('pages.index.logs'), onClick: onOpenLogs },
...(accessLogEnable
- ? [{ key: 'accessLogs', icon:
, text: t('pages.index.accessLogs'), onClick: onOpenXrayLogs }]
+ ? [
+ {
+ key: 'accessLogs',
+ icon:
,
+ text: t('pages.index.accessLogs'),
+ onClick: onOpenXrayLogs,
+ },
+ ]
: []),
- { key: 'config', icon:
, text: t('pages.index.config'), onClick: onOpenConfig },
- { key: 'backup', icon:
, text: t('pages.index.backupTitle'), onClick: onOpenBackup },
+ {
+ key: 'config',
+ icon:
,
+ text: t('pages.index.config'),
+ onClick: onOpenConfig,
+ },
+ {
+ key: 'backup',
+ icon:
,
+ text: t('pages.index.backupTitle'),
+ onClick: onOpenBackup,
+ },
],
[
- { key: 'history', icon:
, text: t('pages.index.systemHistoryTitle'), onClick: onOpenSystemHistory },
- { key: 'metrics', icon:
, text: t('pages.index.xrayMetricsTitle'), onClick: onOpenXrayMetrics },
+ {
+ key: 'history',
+ icon:
,
+ text: t('pages.index.systemHistoryTitle'),
+ onClick: onOpenSystemHistory,
+ },
+ {
+ key: 'metrics',
+ icon:
,
+ text: t('pages.index.xrayMetricsTitle'),
+ onClick: onOpenXrayMetrics,
+ },
],
];
@@ -98,11 +136,7 @@ export default function OverviewActionBar({
{`${t('pages.index.xrayStatus')} · ${stateText}`}
{hasVersion && (
-
+
{`v${status.xray.version}`}
diff --git a/frontend/src/pages/index/PanelUpdateModal.tsx b/frontend/src/pages/index/PanelUpdateModal.tsx
index 8bb7fb560..c785cc9a9 100644
--- a/frontend/src/pages/index/PanelUpdateModal.tsx
+++ b/frontend/src/pages/index/PanelUpdateModal.tsx
@@ -83,7 +83,10 @@ export default function PanelUpdateModal({
function updatePanel() {
modal.confirm({
title: t('pages.index.panelUpdateDialog'),
- content: t('pages.index.panelUpdateDialogDesc').replace('#version#', info.latestVersion || ''),
+ content: t('pages.index.panelUpdateDialogDesc').replace(
+ '#version#',
+ info.latestVersion || '',
+ ),
okText: t('confirm'),
cancelText: t('cancel'),
onOk: async () => {
@@ -104,8 +107,16 @@ export default function PanelUpdateModal({
return;
}
modal[outcome === 'failed' ? 'error' : 'warning']({
- title: t(outcome === 'failed' ? 'pages.index.panelUpdateFailedTitle' : 'pages.index.panelUpdateUnknownTitle'),
- content: t(outcome === 'failed' ? 'pages.index.panelUpdateFailedDesc' : 'pages.index.panelUpdateUnknownDesc'),
+ title: t(
+ outcome === 'failed'
+ ? 'pages.index.panelUpdateFailedTitle'
+ : 'pages.index.panelUpdateUnknownTitle',
+ ),
+ content: t(
+ outcome === 'failed'
+ ? 'pages.index.panelUpdateFailedDesc'
+ : 'pages.index.panelUpdateUnknownDesc',
+ ),
okText: t('refresh'),
onOk: () => window.location.reload(),
});
@@ -116,12 +127,7 @@ export default function PanelUpdateModal({
return (
<>
{contextHolder}
-
+
{info.updateAvailable && (
{t('pages.index.devChannel')}
-
- {isDev ? t('pages.index.currentCommit') : t('pages.index.currentPanelVersion')}
+
+ {isDev ? t('pages.index.currentCommit') : t('pages.index.currentPanelVersion')}
+
{isDev ? (
{info.currentCommit || '?'}
) : (
- {formatPanelVersion(window.X_UI_CUR_VER || info.currentVersion) || '?'}
+
+ {formatPanelVersion(window.X_UI_CUR_VER || info.currentVersion) || '?'}
+
)}
{info.updateAvailable ? (
- {isDev ? t('pages.index.latestCommit') : t('pages.index.latestPanelVersion')}
+
+ {isDev ? t('pages.index.latestCommit') : t('pages.index.latestPanelVersion')}
+
{(isDev ? info.latestCommit : info.latestVersion) || '-'}
) : (
diff --git a/frontend/src/pages/index/SystemHistoryModal.css b/frontend/src/pages/index/SystemHistoryModal.css
index e66e65304..1d56b7910 100644
--- a/frontend/src/pages/index/SystemHistoryModal.css
+++ b/frontend/src/pages/index/SystemHistoryModal.css
@@ -24,7 +24,11 @@
margin: 8px 8px 16px;
padding: 16px 18px 18px;
border-radius: 14px;
- background: linear-gradient(180deg, color-mix(in srgb, var(--ant-color-primary) 6%, transparent), transparent);
+ background: linear-gradient(
+ 180deg,
+ color-mix(in srgb, var(--ant-color-primary) 6%, transparent),
+ transparent
+ );
border: 1px solid var(--ant-color-border-secondary);
box-shadow: 0 2px 12px var(--ant-color-fill-quaternary);
}
diff --git a/frontend/src/pages/index/SystemHistoryModal.tsx b/frontend/src/pages/index/SystemHistoryModal.tsx
index 7d3fb249a..2fa8eb7db 100644
--- a/frontend/src/pages/index/SystemHistoryModal.tsx
+++ b/frontend/src/pages/index/SystemHistoryModal.tsx
@@ -45,15 +45,123 @@ interface MetricDef {
}
const METRICS: MetricDef[] = [
- { key: 'cpu', tab: 'CPU', tabKey: 'pages.index.cpu', title: 'pages.index.historyTitleCpu', icon:
, valueMax: 100, unit: '%', stroke: '' },
- { key: 'mem', tab: 'RAM', tabKey: 'pages.index.memory', title: 'pages.index.historyTitleMem', icon:
, valueMax: 100, unit: '%', stroke: '#7c4dff', key2: 'swap', stroke2: '#ffa940', name1: 'pages.index.memory', name2: 'pages.index.swap' },
- { key: 'netUp', tab: 'Bandwidth', tabKey: 'pages.index.historyTabBandwidth', title: 'pages.index.historyTitleNetwork', icon:
, valueMax: null, unit: 'B/s', stroke: '#1890ff', key2: 'netDown', stroke2: '#13c2c2', name1: 'Up', name2: 'Down' },
- { key: 'pktUp', tab: 'Packets', tabKey: 'pages.index.historyTabPackets', title: 'pages.index.historyTitlePackets', icon:
, valueMax: null, unit: 'pkt/s', stroke: '#2f54eb', key2: 'pktDown', stroke2: '#36cfc9', name1: 'Up', name2: 'Down' },
- { key: 'tcpCount', tab: 'Connections', tabKey: 'pages.index.historyTabConnections', title: 'pages.index.historyTitleConnections', icon:
, valueMax: null, unit: '', stroke: '#597ef7', key2: 'udpCount', stroke2: '#73d13d', name1: 'TCP', name2: 'UDP' },
- { key: 'diskRead', tab: 'Disk I/O', tabKey: 'pages.index.historyTabDisk', title: 'pages.index.historyTitleDisk', icon:
, valueMax: null, unit: 'B/s', stroke: '#eb2f96', key2: 'diskWrite', stroke2: '#722ed1', name1: 'Read', name2: 'Write' },
- { key: 'diskUsage', tab: 'Disk Usage', tabKey: 'pages.index.historyTabDiskUsage', title: 'pages.index.historyTitleDiskUsage', icon:
, valueMax: 100, unit: '%', stroke: '#13c2c2' },
- { key: 'online', tab: 'Online', tabKey: 'pages.index.historyTabOnline', title: 'pages.index.historyTitleOnline', icon:
, valueMax: null, unit: '', stroke: '#52c41a' },
- { key: 'load1', tab: 'Load', tabKey: 'pages.index.historyTabLoad', title: 'pages.index.historyTitleLoad', icon:
, valueMax: null, unit: '', stroke: '#fa8c16', key2: 'load5', stroke2: '#f5222d', name1: '1m', name2: '5m', key3: 'load15', stroke3: '#a0d911', name3: '15m' },
+ {
+ key: 'cpu',
+ tab: 'CPU',
+ tabKey: 'pages.index.cpu',
+ title: 'pages.index.historyTitleCpu',
+ icon:
,
+ valueMax: 100,
+ unit: '%',
+ stroke: '',
+ },
+ {
+ key: 'mem',
+ tab: 'RAM',
+ tabKey: 'pages.index.memory',
+ title: 'pages.index.historyTitleMem',
+ icon:
,
+ valueMax: 100,
+ unit: '%',
+ stroke: '#7c4dff',
+ key2: 'swap',
+ stroke2: '#ffa940',
+ name1: 'pages.index.memory',
+ name2: 'pages.index.swap',
+ },
+ {
+ key: 'netUp',
+ tab: 'Bandwidth',
+ tabKey: 'pages.index.historyTabBandwidth',
+ title: 'pages.index.historyTitleNetwork',
+ icon:
,
+ valueMax: null,
+ unit: 'B/s',
+ stroke: '#1890ff',
+ key2: 'netDown',
+ stroke2: '#13c2c2',
+ name1: 'Up',
+ name2: 'Down',
+ },
+ {
+ key: 'pktUp',
+ tab: 'Packets',
+ tabKey: 'pages.index.historyTabPackets',
+ title: 'pages.index.historyTitlePackets',
+ icon:
,
+ valueMax: null,
+ unit: 'pkt/s',
+ stroke: '#2f54eb',
+ key2: 'pktDown',
+ stroke2: '#36cfc9',
+ name1: 'Up',
+ name2: 'Down',
+ },
+ {
+ key: 'tcpCount',
+ tab: 'Connections',
+ tabKey: 'pages.index.historyTabConnections',
+ title: 'pages.index.historyTitleConnections',
+ icon:
,
+ valueMax: null,
+ unit: '',
+ stroke: '#597ef7',
+ key2: 'udpCount',
+ stroke2: '#73d13d',
+ name1: 'TCP',
+ name2: 'UDP',
+ },
+ {
+ key: 'diskRead',
+ tab: 'Disk I/O',
+ tabKey: 'pages.index.historyTabDisk',
+ title: 'pages.index.historyTitleDisk',
+ icon:
,
+ valueMax: null,
+ unit: 'B/s',
+ stroke: '#eb2f96',
+ key2: 'diskWrite',
+ stroke2: '#722ed1',
+ name1: 'Read',
+ name2: 'Write',
+ },
+ {
+ key: 'diskUsage',
+ tab: 'Disk Usage',
+ tabKey: 'pages.index.historyTabDiskUsage',
+ title: 'pages.index.historyTitleDiskUsage',
+ icon:
,
+ valueMax: 100,
+ unit: '%',
+ stroke: '#13c2c2',
+ },
+ {
+ key: 'online',
+ tab: 'Online',
+ tabKey: 'pages.index.historyTabOnline',
+ title: 'pages.index.historyTitleOnline',
+ icon:
,
+ valueMax: null,
+ unit: '',
+ stroke: '#52c41a',
+ },
+ {
+ key: 'load1',
+ tab: 'Load',
+ tabKey: 'pages.index.historyTabLoad',
+ title: 'pages.index.historyTitleLoad',
+ icon:
,
+ valueMax: null,
+ unit: '',
+ stroke: '#fa8c16',
+ key2: 'load5',
+ stroke2: '#f5222d',
+ name1: '1m',
+ name2: '5m',
+ key3: 'load15',
+ stroke3: '#a0d911',
+ name3: '15m',
+ },
];
function unitFormatter(unit: string, activeKey: string): (v: number) => string {
@@ -78,9 +186,10 @@ function unitFormatter(unit: string, activeKey: string): (v: number) => string {
function formatFullTimestamp(unixSec: number): string {
const d = new Date(unixSec * 1000);
const today = new Date();
- const sameDay = d.getFullYear() === today.getFullYear()
- && d.getMonth() === today.getMonth()
- && d.getDate() === today.getDate();
+ const sameDay =
+ d.getFullYear() === today.getFullYear() &&
+ d.getMonth() === today.getMonth() &&
+ d.getDate() === today.getDate();
const hh = String(d.getHours()).padStart(2, '0');
const mm = String(d.getMinutes()).padStart(2, '0');
const ss = String(d.getSeconds()).padStart(2, '0');
@@ -142,7 +251,12 @@ export default function SystemHistoryModal({ open, status, onClose }: SystemHist
const hh = String(d.getHours()).padStart(2, '0');
const mm = String(d.getMinutes()).padStart(2, '0');
const ss = String(d.getSeconds()).padStart(2, '0');
- const lab = bucket >= 2880 ? `${MM}-${DD} ${hh}:${mm}` : bucket >= 60 ? `${hh}:${mm}` : `${hh}:${mm}:${ss}`;
+ const lab =
+ bucket >= 2880
+ ? `${MM}-${DD} ${hh}:${mm}`
+ : bucket >= 60
+ ? `${hh}:${mm}`
+ : `${hh}:${mm}:${ss}`;
labs.push(lab);
vals.push(Number(p.v) || 0);
tss.push(Number(p.t) || 0);
@@ -232,7 +346,13 @@ export default function SystemHistoryModal({ open, status, onClose }: SystemHist
const tabLabel = m.tabKey ? t(m.tabKey) : m.tab;
return {
key: m.key,
- label: isMobile ?
{m.icon} : tabLabel,
+ label: isMobile ? (
+
+ {m.icon}
+
+ ) : (
+ tabLabel
+ ),
};
})}
/>
diff --git a/frontend/src/pages/index/SystemStrip.tsx b/frontend/src/pages/index/SystemStrip.tsx
index 944ed1161..40d9d72e6 100644
--- a/frontend/src/pages/index/SystemStrip.tsx
+++ b/frontend/src/pages/index/SystemStrip.tsx
@@ -32,7 +32,9 @@ export default function SystemStrip({ status, showIp, onToggleIp }: SystemStripP
Xray
-
{TimeFormatter.formatSecond(status.appStats.uptime)}
+
+ {TimeFormatter.formatSecond(status.appStats.uptime)}
+
diff --git a/frontend/src/pages/index/ThroughputCard.tsx b/frontend/src/pages/index/ThroughputCard.tsx
index b3aebbc77..d31883585 100644
--- a/frontend/src/pages/index/ThroughputCard.tsx
+++ b/frontend/src/pages/index/ThroughputCard.tsx
@@ -16,7 +16,13 @@ interface ThroughputCardProps {
isMobile: boolean;
}
-export default function ThroughputCard({ status, up, down, labels, isMobile }: ThroughputCardProps) {
+export default function ThroughputCard({
+ status,
+ up,
+ down,
+ labels,
+ isMobile,
+}: ThroughputCardProps) {
const { t } = useTranslation();
const { token } = theme.useToken();
const accent = token.colorPrimary;
diff --git a/frontend/src/pages/index/VersionModal.tsx b/frontend/src/pages/index/VersionModal.tsx
index 7df8f1fcf..fb85f8e61 100644
--- a/frontend/src/pages/index/VersionModal.tsx
+++ b/frontend/src/pages/index/VersionModal.tsx
@@ -96,12 +96,7 @@ export default function VersionModal({ open, status, onClose, onBusy }: VersionM
const activeKeyStr = Array.isArray(activeKey) ? activeKey[0] : activeKey;
return (
-
+
{modalContextHolder}
-
diff --git a/frontend/src/pages/index/XrayMetricsModal.css b/frontend/src/pages/index/XrayMetricsModal.css
index 9de945e51..6bf73a4b8 100644
--- a/frontend/src/pages/index/XrayMetricsModal.css
+++ b/frontend/src/pages/index/XrayMetricsModal.css
@@ -55,11 +55,17 @@
}
@keyframes obs-dot-pulse {
- 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ant-color-success) 22%, transparent); }
- 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ant-color-success) 6%, transparent); }
+ 0%,
+ 100% {
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--ant-color-success) 22%, transparent);
+ }
+ 50% {
+ box-shadow: 0 0 0 6px color-mix(in srgb, var(--ant-color-success) 6%, transparent);
+ }
}
@media (prefers-reduced-motion: reduce) {
- .obs-dot.is-alive { animation: none; }
+ .obs-dot.is-alive {
+ animation: none;
+ }
}
-
diff --git a/frontend/src/pages/index/XrayMetricsModal.tsx b/frontend/src/pages/index/XrayMetricsModal.tsx
index 5a6d53ac0..423d9ef60 100644
--- a/frontend/src/pages/index/XrayMetricsModal.tsx
+++ b/frontend/src/pages/index/XrayMetricsModal.tsx
@@ -48,12 +48,60 @@ interface ObservatoryTag {
}
const METRICS: MetricDef[] = [
- { key: 'xrAlloc', tab: 'Heap', tabKey: 'pages.index.xrayTabHeap', title: 'pages.index.xrayTitleHeap', icon: {m.icon} : tabLabel,
+ label: isMobile ? (
+
+ {m.icon}
+
+ ) : (
+ tabLabel
+ ),
};
})}
/>
@@ -357,10 +423,12 @@ export default function XrayMetricsModal({ open, onClose }: XrayMetricsModalProp
{activeObsTag.delay} ms
- {t('pages.index.xrayObservatoryLastSeen')}: {fmtTimestamp(activeObsTag.lastSeenTime)}
+ {t('pages.index.xrayObservatoryLastSeen')}:{' '}
+ {fmtTimestamp(activeObsTag.lastSeenTime)}
- {t('pages.index.xrayObservatoryLastTry')}: {fmtTimestamp(activeObsTag.lastTryTime)}
+ {t('pages.index.xrayObservatoryLastTry')}:{' '}
+ {fmtTimestamp(activeObsTag.lastTryTime)}
)}
diff --git a/frontend/src/pages/index/useOverviewHistory.ts b/frontend/src/pages/index/useOverviewHistory.ts
index f7f8e64ad..d282c5044 100644
--- a/frontend/src/pages/index/useOverviewHistory.ts
+++ b/frontend/src/pages/index/useOverviewHistory.ts
@@ -6,7 +6,16 @@ import type { Status } from '@/models/status';
const OVERVIEW_WINDOW = 72;
const SEED_BUCKET_SECONDS = 2;
-const SERIES_KEYS = ['cpu', 'mem', 'swap', 'diskUsage', 'netUp', 'netDown', 'tcpCount', 'udpCount'] as const;
+const SERIES_KEYS = [
+ 'cpu',
+ 'mem',
+ 'swap',
+ 'diskUsage',
+ 'netUp',
+ 'netDown',
+ 'tcpCount',
+ 'udpCount',
+] as const;
export type OverviewSeriesKey = (typeof SERIES_KEYS)[number];
@@ -26,7 +35,10 @@ interface HistoryWindow {
}
function emptySeries(): Record
{
- return Object.fromEntries(SERIES_KEYS.map((key) => [key, [] as number[]])) as Record;
+ return Object.fromEntries(SERIES_KEYS.map((key) => [key, [] as number[]])) as Record<
+ OverviewSeriesKey,
+ number[]
+ >;
}
function emptyWindow(): HistoryWindow {
diff --git a/frontend/src/pages/login/LoginPage.css b/frontend/src/pages/login/LoginPage.css
index d78ffae88..2a72af26a 100644
--- a/frontend/src/pages/login/LoginPage.css
+++ b/frontend/src/pages/login/LoginPage.css
@@ -8,10 +8,10 @@
--color-border: rgba(255, 255, 255, 0.6);
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 18px 50px rgba(99, 102, 241, 0.18);
--blob-1: rgba(99, 102, 241, 0.55);
- --blob-2: rgba(236, 72, 153, 0.50);
- --blob-3: rgba(20, 184, 166, 0.40);
+ --blob-2: rgba(236, 72, 153, 0.5);
+ --blob-3: rgba(20, 184, 166, 0.4);
--blob-4: rgba(251, 191, 36, 0.35);
- --blob-5: rgba(56, 189, 248, 0.40);
+ --blob-5: rgba(56, 189, 248, 0.4);
--grid-color: rgba(99, 102, 241, 0.06);
--vignette: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.05) 100%);
@@ -28,13 +28,13 @@
--color-text: rgba(255, 255, 255, 0.92);
--color-text-subtle: rgba(255, 255, 255, 0.55);
--color-accent: #3b82f6;
- --color-border: rgba(255, 255, 255, 0.10);
+ --color-border: rgba(255, 255, 255, 0.1);
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 20px 60px rgba(59, 130, 246, 0.22);
--blob-1: rgba(96, 165, 250, 0.42);
--blob-2: rgba(59, 130, 246, 0.42);
--blob-3: rgba(37, 99, 235, 0.35);
--blob-4: rgba(251, 146, 60, 0.18);
- --blob-5: rgba(129, 140, 248, 0.30);
+ --blob-5: rgba(129, 140, 248, 0.3);
--grid-color: rgba(255, 255, 255, 0.04);
--vignette: radial-gradient(ellipse at center, transparent 25%, rgba(0, 0, 0, 0.5) 100%);
background: radial-gradient(ellipse at 25% 20%, #152038 0%, #0d1117 60%);
@@ -45,9 +45,9 @@
--bg-card: rgba(15, 17, 28, 0.6);
--bg-card-solid: #101013;
--color-border: rgba(255, 255, 255, 0.06);
- --blob-1: rgba(99, 102, 241, 0.30);
+ --blob-1: rgba(99, 102, 241, 0.3);
--blob-2: rgba(236, 72, 153, 0.22);
- --blob-3: rgba(34, 211, 238, 0.20);
+ --blob-3: rgba(34, 211, 238, 0.2);
--blob-4: rgba(251, 146, 60, 0.15);
--blob-5: rgba(168, 85, 247, 0.25);
--grid-color: rgba(255, 255, 255, 0.025);
@@ -154,33 +154,63 @@
}
@keyframes blob-drift-a {
- 0% { transform: translate(0, 0) scale(1); }
- 50% { transform: translate(18vw, 10vh) scale(1.15); }
- 100% { transform: translate(34vw, 22vh) scale(1.25); }
+ 0% {
+ transform: translate(0, 0) scale(1);
+ }
+ 50% {
+ transform: translate(18vw, 10vh) scale(1.15);
+ }
+ 100% {
+ transform: translate(34vw, 22vh) scale(1.25);
+ }
}
@keyframes blob-drift-b {
- 0% { transform: translate(0, 0) scale(1); }
- 50% { transform: translate(-16vw, -10vh) scale(1.12); }
- 100% { transform: translate(-30vw, -22vh) scale(1.2); }
+ 0% {
+ transform: translate(0, 0) scale(1);
+ }
+ 50% {
+ transform: translate(-16vw, -10vh) scale(1.12);
+ }
+ 100% {
+ transform: translate(-30vw, -22vh) scale(1.2);
+ }
}
@keyframes blob-drift-c {
- 0% { transform: translate(-50%, -50%) scale(1); }
- 50% { transform: translate(-20%, -20%) scale(1.1); }
- 100% { transform: translate(-80%, -10%) scale(1.05); }
+ 0% {
+ transform: translate(-50%, -50%) scale(1);
+ }
+ 50% {
+ transform: translate(-20%, -20%) scale(1.1);
+ }
+ 100% {
+ transform: translate(-80%, -10%) scale(1.05);
+ }
}
@keyframes blob-drift-d {
- 0% { transform: translate(0, 0) scale(0.9); }
- 50% { transform: translate(-12vw, 14vh) scale(1.05); }
- 100% { transform: translate(8vw, -8vh) scale(1.1); }
+ 0% {
+ transform: translate(0, 0) scale(0.9);
+ }
+ 50% {
+ transform: translate(-12vw, 14vh) scale(1.05);
+ }
+ 100% {
+ transform: translate(8vw, -8vh) scale(1.1);
+ }
}
@keyframes blob-drift-e {
- 0% { transform: translate(0, 0) scale(1); }
- 50% { transform: translate(14vw, -8vh) scale(1.1); }
- 100% { transform: translate(-6vw, 12vh) scale(1.15); }
+ 0% {
+ transform: translate(0, 0) scale(1);
+ }
+ 50% {
+ transform: translate(14vw, -8vh) scale(1.1);
+ }
+ 100% {
+ transform: translate(-6vw, 12vh) scale(1.15);
+ }
}
@media (prefers-reduced-motion: reduce) {
@@ -267,7 +297,9 @@
rgba(255, 255, 255, 0) 40%,
rgba(99, 102, 241, 0.25) 80%
);
- -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+ -webkit-mask:
+ linear-gradient(#000 0 0) content-box,
+ linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
@@ -278,7 +310,7 @@
135deg,
rgba(255, 255, 255, 0.15),
rgba(255, 255, 255, 0) 40%,
- rgba(59, 130, 246, 0.40) 80%
+ rgba(59, 130, 246, 0.4) 80%
);
}
@@ -344,8 +376,14 @@
}
@keyframes headline-in {
- 0% { opacity: 0; transform: translateY(6px); }
- 100% { opacity: 1; transform: translateY(0); }
+ 0% {
+ opacity: 0;
+ transform: translateY(6px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
}
@media (prefers-reduced-motion: reduce) {
@@ -365,10 +403,11 @@
-webkit-text-fill-color: var(--color-text) !important;
-webkit-box-shadow: 0 0 0 1000px var(--bg-card-solid) inset !important;
box-shadow: 0 0 0 1000px var(--bg-card-solid) inset !important;
- transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
+ transition:
+ background-color 9999s ease-in-out 0s,
+ color 9999s ease-in-out 0s;
}
.submit-row {
margin-bottom: 0;
}
-
diff --git a/frontend/src/pages/login/LoginPage.tsx b/frontend/src/pages/login/LoginPage.tsx
index a74598bd4..59f8360aa 100644
--- a/frontend/src/pages/login/LoginPage.tsx
+++ b/frontend/src/pages/login/LoginPage.tsx
@@ -49,13 +49,12 @@ export default function LoginPage() {
const [submitting, setSubmitting] = useState(false);
const [twoFactorEnable, setTwoFactorEnable] = useState(false);
const [headlineIndex, setHeadlineIndex] = useState(0);
- const methods = useForm({ defaultValues: { username: '', password: '', twoFactorCode: '' } });
+ const methods = useForm({
+ defaultValues: { username: '', password: '', twoFactorCode: '' },
+ });
const [lang, setLang] = useState(() => LanguageManager.getLanguage());
- const headlineWords = useMemo(
- () => [t('pages.login.hello'), t('pages.login.title')],
- [t],
- );
+ const headlineWords = useMemo(() => [t('pages.login.hello'), t('pages.login.title')], [t]);
useEffect(() => {
const timer = window.setInterval(() => {
@@ -72,7 +71,9 @@ export default function LoginPage() {
if (msg.success) setTwoFactorEnable(!!msg.obj);
setFetched(true);
})();
- return () => { cancelled = true; };
+ return () => {
+ cancelled = true;
+ };
}, []);
const onSubmit = useCallback(async (values: LoginForm) => {
@@ -111,15 +112,18 @@ export default function LoginPage() {
}, [isDark, isUltra]);
const langMenuItems = useMemo(
- () => (LanguageManager.supportedLanguages as { value: string; name: string; icon: string }[]).map((l) => ({
- key: l.value,
- label: (
-
- {l.icon}
- {l.name}
-
+ () =>
+ (LanguageManager.supportedLanguages as { value: string; name: string; icon: string }[]).map(
+ (l) => ({
+ key: l.value,
+ label: (
+
+ {l.icon}
+ {l.name}
+
+ ),
+ }),
),
- })),
[],
);
diff --git a/frontend/src/pages/nodes/NodeFormModal.tsx b/frontend/src/pages/nodes/NodeFormModal.tsx
index b267deefd..00c62f70f 100644
--- a/frontend/src/pages/nodes/NodeFormModal.tsx
+++ b/frontend/src/pages/nodes/NodeFormModal.tsx
@@ -87,31 +87,38 @@ export default function NodeFormModal({
// connection") rather than a synthetic option, so it can't read as a second
// "direct" next to a real freedom outbound.
const outboundOptions = useMemo<
- ({ label: string; value: string } | { label: string; options: { label: string; value: string }[] })[]
+ (
+ | { label: string; value: string }
+ | { label: string; options: { label: string; value: string }[] }
+ )[]
>(() => {
const outOpts = (outboundGroups?.outbounds ?? []).map((tag) => ({ label: tag, value: tag }));
if (!outboundGroups?.balancers.length) return outOpts;
return [
{ label: t('pages.xray.Outbounds'), options: outOpts },
- { label: t('pages.xray.Balancers'), options: outboundGroups.balancers.map((tag) => ({ label: tag, value: tag })) },
+ {
+ label: t('pages.xray.Balancers'),
+ options: outboundGroups.balancers.map((tag) => ({ label: tag, value: tag })),
+ },
];
}, [outboundGroups, t]);
useEffect(() => {
if (!open) return;
const base = defaultValues();
- const next: NodeFormValues = mode === 'edit' && node
- ? {
- ...base,
- ...(node as unknown as Partial),
- id: node.id,
- scheme: (node.scheme as 'http' | 'https') || base.scheme,
- inboundSyncMode: (node.inboundSyncMode as 'all' | 'selected') || base.inboundSyncMode,
- inboundTags: node.inboundTags ?? [],
- apiToken: '',
- hasStoredToken: node.hasApiToken ?? false,
- }
- : base;
+ const next: NodeFormValues =
+ mode === 'edit' && node
+ ? {
+ ...base,
+ ...(node as unknown as Partial),
+ id: node.id,
+ scheme: (node.scheme as 'http' | 'https') || base.scheme,
+ inboundSyncMode: (node.inboundSyncMode as 'all' | 'selected') || base.inboundSyncMode,
+ inboundTags: node.inboundTags ?? [],
+ apiToken: '',
+ hasStoredToken: node.hasApiToken ?? false,
+ }
+ : base;
if (next.scheme === 'http') next.tlsVerifyMode = 'skip';
methods.reset(next);
setInboundOptions((next.inboundTags || []).map((tag) => ({ tag })));
@@ -209,7 +216,9 @@ export default function NodeFormModal({
const test = await testConnection(payload);
const probe = test?.success ? test.obj : null;
if (!probe || probe.status !== 'online') {
- setTestResult(probe ?? { status: 'offline', error: test?.msg || t('pages.nodes.connectionFailed') });
+ setTestResult(
+ probe ?? { status: 'offline', error: test?.msg || t('pages.nodes.connectionFailed') },
+ );
return;
}
setTestResult(probe);
@@ -303,11 +312,7 @@ export default function NodeFormModal({
+
@@ -379,7 +384,11 @@ export default function NodeFormModal({
extra={editingWithToken ? t('pages.nodes.apiTokenKeepHint') : undefined}
>
@@ -423,7 +432,12 @@ export default function NodeFormModal({
placeholder={t('pages.nodes.inboundTagsPlaceholder')}
popupRender={(menu) => (
<>
-
+
{t('pages.nodes.loadInbounds')}
{menu}
@@ -448,7 +462,9 @@ export default function NodeFormModal({
type="success"
showIcon
title={t('pages.nodes.connectionOk', { ms: testResult.latencyMs })}
- description={testResult.xrayVersion ? `Xray ${testResult.xrayVersion}` : undefined}
+ description={
+ testResult.xrayVersion ? `Xray ${testResult.xrayVersion}` : undefined
+ }
/>
) : (
{
try {
const url = `/panel/api/nodes/history/${node.id}/${metric}/${bucket}`;
- const msg = await HttpUtil.get(url) as ApiMsg;
+ const msg = (await HttpUtil.get(url)) as ApiMsg;
if (msg?.success && Array.isArray(msg.obj)) {
const vals: number[] = [];
const labs: string[] = [];
diff --git a/frontend/src/pages/nodes/NodeList.tsx b/frontend/src/pages/nodes/NodeList.tsx
index aec149054..e3dfc4869 100644
--- a/frontend/src/pages/nodes/NodeList.tsx
+++ b/frontend/src/pages/nodes/NodeList.tsx
@@ -1,17 +1,6 @@
import { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
-import {
- Badge,
- Button,
- Card,
- Dropdown,
- Modal,
- Space,
- Switch,
- Table,
- Tag,
- Tooltip,
-} from 'antd';
+import { Badge, Button, Card, Dropdown, Modal, Space, Switch, Table, Tag, Tooltip } from 'antd';
import type { BadgeProps } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import {
@@ -66,9 +55,12 @@ interface NodeRow extends NodeRecord {
function badgeStatus(status?: string): BadgeProps['status'] {
switch (status) {
- case 'online': return 'success';
- case 'offline': return 'error';
- default: return 'default';
+ case 'online':
+ return 'success';
+ case 'offline':
+ return 'error';
+ default:
+ return 'default';
}
}
@@ -92,18 +84,24 @@ function hasXrayProblem(status?: string, xrayState?: string): boolean {
// Tooltip text + icon color for the status cell. A real probe error (lastError)
// is a warning and takes precedence; otherwise an Xray-core problem shows purple.
function statusIssue(record: Pick) {
- const tip = record.lastError || (hasXrayProblem(record.status, record.xrayState) ? record.xrayError : '') || '';
- const iconColor = !record.lastError && hasXrayProblem(record.status, record.xrayState)
- ? XRAY_ERROR_COLOR
- : 'var(--ant-color-warning)';
+ const tip =
+ record.lastError ||
+ (hasXrayProblem(record.status, record.xrayState) ? record.xrayError : '') ||
+ '';
+ const iconColor =
+ !record.lastError && hasXrayProblem(record.status, record.xrayState)
+ ? XRAY_ERROR_COLOR
+ : 'var(--ant-color-warning)';
return { tip, iconColor };
}
function StatusDot({ status, xrayState }: HealthProps) {
if (status === 'online') {
- return hasXrayProblem(status, xrayState)
- ?
{t('pages.nodes.statusValues.online')} ({detail})
@@ -229,206 +228,307 @@ export default function NodeList({
function toggleExpanded(id: number) {
setExpandedIds((prev) => {
const next = new Set(prev);
- if (next.has(id)) next.delete(id); else next.add(id);
+ if (next.has(id)) next.delete(id);
+ else next.add(id);
return next;
});
}
- const columns = useMemo>(() => [
- {
- title: t('pages.nodes.actions'),
- align: 'center',
- width: 190,
- render: (_value, record) => record.transitive ? (
-
-
- ) : (
-
-
-
- {isUpdateEligible(record) && (
-
- >(
+ () => [
+ {
+ title: t('pages.nodes.actions'),
+ align: 'center',
+ width: 190,
+ render: (_value, record) =>
+ record.transitive ? (
+
+
- )}
-
-
-
-
-
- ),
- },
- {
- title: t('pages.nodes.enable'),
- dataIndex: 'enable',
- align: 'center',
- width: 80,
- render: (_value, record) => record.transitive ? (
- —
- ) : (
- onToggleEnable(record, v)}
- />
- ),
- },
- {
- title: t('pages.nodes.name'),
- dataIndex: 'name',
- ellipsis: true,
- render: (_value, record) => (
-
-
- {record.transitive &&
- {record.remark &&
{record.remark} }
-
- {t('pages.nodes.address')}
-
- {showAddress ? (
- setShowAddress(false)} onKeyDown={activateOnKey(() => setShowAddress(false))} />
- ) : (
- setShowAddress(true)} onKeyDown={activateOnKey(() => setShowAddress(true))} />
- )}
-
-
- ),
- dataIndex: 'url',
- ellipsis: true,
- render: (_value, record) => (
-
- {record.url}
-
- ),
- },
- {
- title: t('pages.nodes.status'),
- dataIndex: 'status',
- align: 'center',
- render: (_value, record) => {
- const { tip, iconColor } = statusIssue(record);
- return (
-
-
-
+
+
- )}
-
- );
+ {isUpdateEligible(record) && (
+
+
+ )}
+
+
+
+
+
+ ),
},
- },
- {
- title: t('pages.nodes.cpu'),
- dataIndex: 'cpuPct',
- align: 'center',
- width: 90,
- render: (_value, record) => formatPct(record.cpuPct),
- },
- {
- title: t('pages.nodes.mem'),
- dataIndex: 'memPct',
- align: 'center',
- width: 90,
- render: (_value, record) => formatPct(record.memPct),
- },
- {
- title: t('pages.nodes.xrayVersion'),
- dataIndex: 'xrayVersion',
- align: 'center',
- render: (_value, record) => record.xrayVersion || '-',
- },
- {
- title: t('pages.nodes.panelVersion') || 'Panel version',
- dataIndex: 'panelVersion',
- align: 'center',
- render: (_value, record) => {
- const canUpdate = isUpdateEligible(record)
- && isPanelUpdateAvailable(latestVersion, record.panelVersion || '');
- return (
-
- {record.panelVersion || '-'}
- {canUpdate && (
-
- onUpdateNode(record)} onKeyDown={activateOnKey(() => onUpdateNode(record))}>
- {t('pages.nodes.updateAvailable')}
+ {
+ title: t('pages.nodes.enable'),
+ dataIndex: 'enable',
+ align: 'center',
+ width: 80,
+ render: (_value, record) =>
+ record.transitive ? (
+ —
+ ) : (
+ onToggleEnable(record, v)}
+ />
+ ),
+ },
+ {
+ title: t('pages.nodes.name'),
+ dataIndex: 'name',
+ ellipsis: true,
+ render: (_value, record) => (
+
+
+ {record.transitive && (
+
+ {record.remark &&
{record.remark} }
+
+ {t('pages.nodes.address')}
+
+ {showAddress ? (
+ setShowAddress(false)}
+ onKeyDown={activateOnKey(() => setShowAddress(false))}
+ />
+ ) : (
+ setShowAddress(true)}
+ onKeyDown={activateOnKey(() => setShowAddress(true))}
+ />
+ )}
+
+
+ ),
+ dataIndex: 'url',
+ ellipsis: true,
+ render: (_value, record) => (
+
+ {record.url}
+
+ ),
+ },
+ {
+ title: t('pages.nodes.status'),
+ dataIndex: 'status',
+ align: 'center',
+ render: (_value, record) => {
+ const { tip, iconColor } = statusIssue(record);
+ return (
+
+
+
+ )}
+
+ );
+ },
+ },
+ {
+ title: t('pages.nodes.cpu'),
+ dataIndex: 'cpuPct',
+ align: 'center',
+ width: 90,
+ render: (_value, record) => formatPct(record.cpuPct),
+ },
+ {
+ title: t('pages.nodes.mem'),
+ dataIndex: 'memPct',
+ align: 'center',
+ width: 90,
+ render: (_value, record) => formatPct(record.memPct),
+ },
+ {
+ title: t('pages.nodes.xrayVersion'),
+ dataIndex: 'xrayVersion',
+ align: 'center',
+ render: (_value, record) => record.xrayVersion || '-',
+ },
+ {
+ title: t('pages.nodes.panelVersion') || 'Panel version',
+ dataIndex: 'panelVersion',
+ align: 'center',
+ render: (_value, record) => {
+ const canUpdate =
+ isUpdateEligible(record) &&
+ isPanelUpdateAvailable(latestVersion, record.panelVersion || '');
+ return (
+
+ {record.panelVersion || '-'}
+ {canUpdate && (
+
+ onUpdateNode(record)}
+ onKeyDown={activateOnKey(() => onUpdateNode(record))}
+ >
+ {t('pages.nodes.updateAvailable')}
+
+
+ )}
+
+ );
+ },
+ },
+ {
+ title: t('pages.nodes.uptime'),
+ dataIndex: 'uptimeSecs',
+ align: 'center',
+ render: (_value, record) => formatUptime(record.uptimeSecs),
+ },
+ {
+ title: t('clients'),
+ align: 'center',
+ width: 180,
+ render: (_value, record) => (
+
+
+
+ {record.activeCount ? (
+
+
+ {record.activeCount}
- )}
+ ) : null}
+ {record.disabledCount ? (
+
+
+ {record.disabledCount}
+
+
+ ) : null}
+ {record.depletedCount ? (
+
+
+ {record.depletedCount}
+
+
+ ) : null}
+ {record.onlineCount ? (
+
+
+ {record.onlineCount}
+
+
+ ) : null}
- );
+ ),
},
- },
- {
- title: t('pages.nodes.uptime'),
- dataIndex: 'uptimeSecs',
- align: 'center',
- render: (_value, record) => formatUptime(record.uptimeSecs),
- },
- {
- title: t('clients'),
- align: 'center',
- width: 180,
- render: (_value, record) => (
-
-
- {record.activeCount}
-
- ) : null}
- {record.disabledCount ? (
-
- {record.disabledCount}
-
- ) : null}
- {record.depletedCount ? (
-
- {record.depletedCount}
-
- ) : null}
- {record.onlineCount ? (
-
- {record.onlineCount}
-
- ) : null}
-
- ),
- },
- {
- title: t('pages.nodes.latency'),
- dataIndex: 'latencyMs',
- align: 'center',
- width: 100,
- render: (_value, record) =>
- record.latencyMs && record.latencyMs > 0 ? `${record.latencyMs} ms` : '-',
- },
- {
- title: t('pages.nodes.lastHeartbeat'),
- dataIndex: 'lastHeartbeat',
- align: 'center',
- width: 120,
- render: (_value, record) => relativeTime(record.lastHeartbeat),
- },
- ], [t, showAddress, relativeTime, latestVersion, onToggleEnable, onProbe, onEdit, onDelete, onUpdateNode, nameByGuid]);
+ {
+ title: t('pages.nodes.latency'),
+ dataIndex: 'latencyMs',
+ align: 'center',
+ width: 100,
+ render: (_value, record) =>
+ record.latencyMs && record.latencyMs > 0 ? `${record.latencyMs} ms` : '-',
+ },
+ {
+ title: t('pages.nodes.lastHeartbeat'),
+ dataIndex: 'lastHeartbeat',
+ align: 'center',
+ width: 120,
+ render: (_value, record) => relativeTime(record.lastHeartbeat),
+ },
+ ],
+ [
+ t,
+ showAddress,
+ relativeTime,
+ latestVersion,
+ onToggleEnable,
+ onProbe,
+ onEdit,
+ onDelete,
+ onUpdateNode,
+ nameByGuid,
+ ],
+ );
return (
@@ -455,93 +555,128 @@ export default function NodeList({
{t('noData')}
) : (
- dataSource.map((record) => record.transitive ? (
-
-
-
-
-
{record.name}
-
-
-
-
- ) : (
-
- {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- mouse click-to-expand mirrors the keyboard-accessible chevron disclosure button */}
+ dataSource.map((record) =>
+ record.transitive ? (
{
- if (!(e.target as HTMLElement).closest('.card-actions')) toggleExpanded(record.id);
- }}
+ key={String(record.key)}
+ className="node-card"
+ style={{ paddingInlineStart: 16, opacity: 0.85 }}
>
-
toggleExpanded(record.id))}
- />
- {record.name}
-
-
- setStatsNode(record)}
- onKeyDown={activateOnKey(() => setStatsNode(record))}
- />
-
-
onToggleEnable(record, v)}
- />
-
+
+
+
{record.name}
+
+
-
+ ) : (
+
+ {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- mouse click-to-expand mirrors the keyboard-accessible chevron disclosure button */}
+
{
+ if (!(e.target as HTMLElement).closest('.card-actions'))
+ toggleExpanded(record.id);
+ }}
+ >
+
toggleExpanded(record.id))}
+ />
+ {record.name}
+
+
+ setStatsNode(record)}
+ onKeyDown={activateOnKey(() => setStatsNode(record))}
+ />
+
+ onToggleEnable(record, v)}
+ />
+
+
+
- )}
-
- ))
+
+ {expandedIds.has(record.id) && (
+
+
+ )}
+
@@ -573,9 +708,23 @@ export default function NodeList({
{showAddress ? (
- setShowAddress(false)} onKeyDown={activateOnKey(() => setShowAddress(false))} />
+ setShowAddress(false)}
+ onKeyDown={activateOnKey(() => setShowAddress(false))}
+ />
) : (
- setShowAddress(true)} onKeyDown={activateOnKey(() => setShowAddress(true))} />
+ setShowAddress(true)}
+ onKeyDown={activateOnKey(() => setShowAddress(true))}
+ />
)}
@@ -605,7 +754,9 @@ export default function NodeList({
{statsNode.xrayVersion || '-'}