Refactor Mihomo overview charts and statistics display

- Replaced Card components with KpiPanelCard and KpiStatCard for a more consistent and visually appealing layout. - Updated chart and statistics sections to include descriptive footers and icons, enhancing user experience and clarity. - Improved grid layout for better responsiveness and spacing in the overview section.
Refactor memory handling in Mihomo to use KiB
2026-03-31 13:31:55 +07:00 · 2026-03-31 13:26:20 +07:00
2 changed files with 165 additions and 106 deletions
@@ -1,8 +1,11 @@
 <script lang="ts">
 	import { onDestroy, onMount } from 'svelte';
 	import Chart from 'chart.js/auto';
-	import * as Card from '$lib/components/ui/card/index.js';
+	import KpiPanelCard from '$lib/components/kpi-panel-card.svelte';
 	import ActivityIcon from '@lucide/svelte/icons/activity';
+	import ChartPieIcon from '@lucide/svelte/icons/chart-pie';
+	import MemoryStickIcon from '@lucide/svelte/icons/memory-stick';
+	import PlugIcon from '@lucide/svelte/icons/plug';
 	import NetworkIcon from '@lucide/svelte/icons/network';
 	import GaugeIcon from '@lucide/svelte/icons/gauge';

@@ -83,7 +86,7 @@
 			type: 'line',
 			data: {
 				labels: histMem.map((_, i) => String(i)),
-				datasets: [{ label: 'KB', data: [...histMem], borderColor: '#a78bfa', tension: 0.2, fill: true }]
+				datasets: [{ label: 'KiB', data: [...histMem], borderColor: '#a78bfa', tension: 0.2, fill: true }]
 			},
 			options: lineOpts()
 		});
@@ -167,58 +170,76 @@
 </script>

 <div class="grid gap-4 lg:grid-cols-2">
-	<Card.Root>
-		<Card.Header>
-			<Card.Title class="flex items-center gap-2 text-base">
-				<ActivityIcon class="size-4" /> Трафик
-			</Card.Title>
-		</Card.Header>
-		<Card.Content class="h-56">
-			<canvas bind:this={elTraffic} class="max-h-full w-full"></canvas>
-		</Card.Content>
-	</Card.Root>
-	<Card.Root>
-		<Card.Header>
-			<Card.Title class="text-base">Поток (накоплено)</Card.Title>
-		</Card.Header>
-		<Card.Content class="h-56">
-			<canvas bind:this={elFlow} class="max-h-full w-full"></canvas>
-		</Card.Content>
-	</Card.Root>
-	<Card.Root>
-		<Card.Header>
-			<Card.Title class="text-base">Память (KB)</Card.Title>
-		</Card.Header>
-		<Card.Content class="h-56">
-			<canvas bind:this={elMem} class="max-h-full w-full"></canvas>
-		</Card.Content>
-	</Card.Root>
-	<Card.Root>
-		<Card.Header>
-			<Card.Title class="text-base">Подключения</Card.Title>
-		</Card.Header>
-		<Card.Content class="h-56">
-			<canvas bind:this={elConn} class="max-h-full w-full"></canvas>
-		</Card.Content>
-	</Card.Root>
-	<Card.Root>
-		<Card.Header>
-			<Card.Title class="flex items-center gap-2 text-base">
-				<NetworkIcon class="size-4" /> Типы сети
-			</Card.Title>
-		</Card.Header>
-		<Card.Content class="h-56">
-			<canvas bind:this={elNet} class="max-h-full w-full"></canvas>
-		</Card.Content>
-	</Card.Root>
-	<Card.Root>
-		<Card.Header>
-			<Card.Title class="flex items-center gap-2 text-base">
-				<GaugeIcon class="size-4" /> Топ прокси (по сессиям)
-			</Card.Title>
-		</Card.Header>
-		<Card.Content class="h-56">
-			<canvas bind:this={elTop} class="max-h-full w-full"></canvas>
-		</Card.Content>
-	</Card.Root>
+	<KpiPanelCard
+		accent="teal"
+		title="Трафик"
+		description="Скорость загрузки и скачивания (история из /traffic)"
+		headerClass="pb-2"
+		contentClass="h-56 px-4 pb-4 pt-0"
+	>
+		{#snippet icon()}
+			<ActivityIcon class="size-5" aria-hidden="true" />
+		{/snippet}
+		<canvas bind:this={elTraffic} class="max-h-full w-full"></canvas>
+	</KpiPanelCard>
+	<KpiPanelCard
+		accent="info"
+		title="Поток (накоплено)"
+		description="Соотношение накопленного down / up"
+		headerClass="pb-2"
+		contentClass="h-56 px-4 pb-4 pt-0"
+	>
+		{#snippet icon()}
+			<ChartPieIcon class="size-5" aria-hidden="true" />
+		{/snippet}
+		<canvas bind:this={elFlow} class="max-h-full w-full"></canvas>
+	</KpiPanelCard>
+	<KpiPanelCard
+		accent="violet"
+		title="Память (KiB)"
+		description="Использование по снимкам (ось — KiB)"
+		headerClass="pb-2"
+		contentClass="h-56 px-4 pb-4 pt-0"
+	>
+		{#snippet icon()}
+			<MemoryStickIcon class="size-5" aria-hidden="true" />
+		{/snippet}
+		<canvas bind:this={elMem} class="max-h-full w-full"></canvas>
+	</KpiPanelCard>
+	<KpiPanelCard
+		accent="success"
+		title="Подключения"
+		description="Число активных соединений во времени"
+		headerClass="pb-2"
+		contentClass="h-56 px-4 pb-4 pt-0"
+	>
+		{#snippet icon()}
+			<PlugIcon class="size-5" aria-hidden="true" />
+		{/snippet}
+		<canvas bind:this={elConn} class="max-h-full w-full"></canvas>
+	</KpiPanelCard>
+	<KpiPanelCard
+		accent="warning"
+		title="Типы сети"
+		description="TCP и UDP по текущему снимку"
+		headerClass="pb-2"
+		contentClass="h-56 px-4 pb-4 pt-0"
+	>
+		{#snippet icon()}
+			<NetworkIcon class="size-5" aria-hidden="true" />
+		{/snippet}
+		<canvas bind:this={elNet} class="max-h-full w-full"></canvas>
+	</KpiPanelCard>
+	<KpiPanelCard
+		accent="neutral"
+		title="Топ прокси (по сессиям)"
+		description="Распределение по имени прокси"
+		headerClass="pb-2"
+		contentClass="h-56 px-4 pb-4 pt-0"
+	>
+		{#snippet icon()}
+			<GaugeIcon class="size-5" aria-hidden="true" />
+		{/snippet}
+		<canvas bind:this={elTop} class="max-h-full w-full"></canvas>
+	</KpiPanelCard>
 </div>
@@ -18,7 +18,14 @@
 	} from '$lib/api/mihomo-types.js';
 	import { formatBytes, formatRatePerSec } from '$lib/format.js';
 	import * as Card from '$lib/components/ui/card/index.js';
+	import KpiStatCard from '$lib/components/kpi-stat-card.svelte';
 	import { Button } from '$lib/components/ui/button/index.js';
+	import ArrowBigUpIcon from '@lucide/svelte/icons/arrow-big-up';
+	import ArrowBigDownIcon from '@lucide/svelte/icons/arrow-big-down';
+	import CloudUploadIcon from '@lucide/svelte/icons/cloud-upload';
+	import CloudDownloadIcon from '@lucide/svelte/icons/cloud-download';
+	import PlugIcon from '@lucide/svelte/icons/plug';
+	import MemoryStickIcon from '@lucide/svelte/icons/memory-stick';
 	import { Badge } from '$lib/components/ui/badge/index.js';
 	import * as Tabs from '$lib/components/ui/tabs/index.js';
 	import DataQueryState from '$lib/components/fleet/data-query-state.svelte';
@@ -36,7 +43,8 @@
 	let downBps = $state(0);
 	let totalUp = $state(0);
 	let totalDown = $state(0);
-	let memKB = $state(0);
+	/** Память в KiB (кибибайты): из WS Mihomo приходит в байтах — нормализуем в одном месте. */
+	let memKiB = $state(0);
 	let connTotal = $state(0);
 	let tcpN = $state(0);
 	let udpN = $state(0);
@@ -48,6 +56,12 @@
 	let topList = $state<{ name: string; n: number }[]>([]);

 	const MAX_POINTS = 72;
+
+	/** Mihomo WS: `inuse` (/memory) и `memory` (/connections) — в байтах → KiB для карточки и графика. */
+	function mihomoWsMemoryToKiB(bytes: number): number {
+		if (!Number.isFinite(bytes) || bytes <= 0) return 0;
+		return bytes / 1024;
+	}
 	/** Mihomo hub/route/proxies.go: без query `url` URLTest часто даёт delay=0 → HTTP 503. */
 	const MIHOMO_DELAY_DEFAULT_URL = 'https://www.gstatic.com/generate_204';

@@ -203,8 +217,8 @@
 				if (line) {
 					try {
 						const o = JSON.parse(line) as { inuse?: number };
-						memKB = Number(o.inuse) || 0;
-						histMem = [...histMem, memKB];
+						memKiB = mihomoWsMemoryToKiB(Number(o.inuse) || 0);
+						histMem = [...histMem, memKiB];
 						while (histMem.length > MAX_POINTS) histMem.shift();
 						seen++;
 					} catch {
@@ -343,8 +357,8 @@
 				ws.onmessage = (ev) => {
 					try {
 						const o = JSON.parse(String(ev.data)) as { inuse?: number };
-						memKB = Number(o.inuse) || 0;
-						histMem = [...histMem, memKB];
+						memKiB = mihomoWsMemoryToKiB(Number(o.inuse) || 0);
+						histMem = [...histMem, memKiB];
 						while (histMem.length > MAX_POINTS) histMem.shift();
 					} catch {
 						/* ignore */
@@ -397,8 +411,8 @@
 			totalDown = j.downloadTotal;
 		}
 		if (typeof j.memory === 'number') {
-			memKB = j.memory;
-			histMem = [...histMem, memKB];
+			memKiB = mihomoWsMemoryToKiB(j.memory);
+			histMem = [...histMem, memKiB];
 			while (histMem.length > MAX_POINTS) histMem.shift();
 		}
 		let t = 0,
@@ -486,7 +500,7 @@
 		totalDown = 0;
 		upBps = 0;
 		downBps = 0;
-		memKB = 0;
+		memKiB = 0;
 		histUp = [];
 		histDown = [];
 		histMem = [];
@@ -622,14 +636,40 @@
 <DataQueryState err={metaErr} showSkeleton={loadingMeta} isEmpty={false}>
 	{#snippet skeleton()}
 		<Skeleton class="mb-4 h-6 w-96 max-w-full" />
-		<div class="mb-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
+		<div class="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
 			{#each Array.from({ length: 6 }) as _, i (i)}
-				<Skeleton class="h-24 rounded-lg" />
+				<Card.Root class="border-l-4 border-l-muted-foreground/30 shadow-sm">
+					<Card.Header class="pb-2">
+						<div class="flex gap-3">
+							<Skeleton class="size-10 shrink-0 rounded-lg" />
+							<div class="min-w-0 flex-1 space-y-2">
+								<Skeleton class="h-3 w-24" />
+								<Skeleton class="h-8 w-20" />
+							</div>
+						</div>
+					</Card.Header>
+					<Card.Content class="pt-0">
+						<Skeleton class="h-3 w-32" />
+					</Card.Content>
+				</Card.Root>
 			{/each}
 		</div>
 		<div class="grid gap-4 lg:grid-cols-2">
 			{#each Array.from({ length: 6 }) as _, i (i)}
-				<Skeleton class="h-56 rounded-lg" />
+				<Card.Root class="border-l-4 border-l-muted-foreground/30 shadow-sm">
+					<Card.Header class="pb-2">
+						<div class="flex gap-3">
+							<Skeleton class="size-10 shrink-0 rounded-lg" />
+							<div class="min-w-0 flex-1 space-y-2">
+								<Skeleton class="h-4 w-40" />
+								<Skeleton class="h-3 w-full max-w-xs" />
+							</div>
+						</div>
+					</Card.Header>
+					<Card.Content class="h-56 px-4 pb-4 pt-0">
+						<Skeleton class="h-full w-full rounded-md" />
+					</Card.Content>
+				</Card.Root>
 			{/each}
 		</div>
 	{/snippet}
@@ -640,45 +680,43 @@
 			</p>
 		{/if}
 		{#if tab === 'overview' && !metaErr}
-			<div class="mb-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
-				<Card.Root class="border-l-primary border-l-4 py-3">
-					<Card.Header class="pb-1">
-						<Card.Description>Загрузка</Card.Description>
-					</Card.Header>
-					<Card.Content class="text-lg font-semibold">{formatRatePerSec(upBps)}</Card.Content>
-				</Card.Root>
-				<Card.Root class="border-l-sky-500 border-l-4 py-3">
-					<Card.Header class="pb-1">
-						<Card.Description>Скачивание</Card.Description>
-					</Card.Header>
-					<Card.Content class="text-lg font-semibold">{formatRatePerSec(downBps)}</Card.Content>
-				</Card.Root>
-				<Card.Root class="border-l-amber-500 border-l-4 py-3">
-					<Card.Header class="pb-1">
-						<Card.Description>Всего загружено</Card.Description>
-					</Card.Header>
-					<Card.Content class="text-lg font-semibold">{formatBytes(totalUp)}</Card.Content>
-				</Card.Root>
-				<Card.Root class="border-l-cyan-500 border-l-4 py-3">
-					<Card.Header class="pb-1">
-						<Card.Description>Всего скачано</Card.Description>
-					</Card.Header>
-					<Card.Content class="text-lg font-semibold">{formatBytes(totalDown)}</Card.Content>
-				</Card.Root>
-				<Card.Root class="border-l-emerald-500 border-l-4 py-3">
-					<Card.Header class="pb-1">
-						<Card.Description>Активные соединения</Card.Description>
-					</Card.Header>
-					<Card.Content class="text-lg font-semibold">{connTotal}</Card.Content>
-				</Card.Root>
-				<Card.Root class="border-l-violet-500 border-l-4 py-3">
-					<Card.Header class="pb-1">
-						<Card.Description>Память</Card.Description>
-					</Card.Header>
-					<Card.Content class="text-lg font-semibold">
-						{memKB > 0 ? `${(memKB / 1024).toFixed(1)} MiB` : '—'}
-					</Card.Content>
-				</Card.Root>
+			<div class="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
+				<KpiStatCard accent="violet" label="Загрузка" footer="мгновенная скорость, /traffic" valueClass="text-xl">
+					{#snippet icon()}
+						<ArrowBigUpIcon class="size-5" aria-hidden="true" />
+					{/snippet}
+					{formatRatePerSec(upBps)}
+				</KpiStatCard>
+				<KpiStatCard accent="info" label="Скачивание" footer="мгновенная скорость, /traffic" valueClass="text-xl">
+					{#snippet icon()}
+						<ArrowBigDownIcon class="size-5" aria-hidden="true" />
+					{/snippet}
+					{formatRatePerSec(downBps)}
+				</KpiStatCard>
+				<KpiStatCard accent="warning" label="Всего загружено" footer="uploadTotal (снимок)" valueClass="text-xl">
+					{#snippet icon()}
+						<CloudUploadIcon class="size-5" aria-hidden="true" />
+					{/snippet}
+					{formatBytes(totalUp)}
+				</KpiStatCard>
+				<KpiStatCard accent="teal" label="Всего скачано" footer="downloadTotal (снимок)" valueClass="text-xl">
+					{#snippet icon()}
+						<CloudDownloadIcon class="size-5" aria-hidden="true" />
+					{/snippet}
+					{formatBytes(totalDown)}
+				</KpiStatCard>
+				<KpiStatCard accent="info" label="Активные соединения" footer="список /connections" valueClass="text-xl">
+					{#snippet icon()}
+						<PlugIcon class="size-5" aria-hidden="true" />
+					{/snippet}
+					{connTotal}
+				</KpiStatCard>
+				<KpiStatCard accent="neutral" label="Память" footer="/memory или поле memory в WS" valueClass="text-xl">
+					{#snippet icon()}
+						<MemoryStickIcon class="size-5" aria-hidden="true" />
+					{/snippet}
+					{memKiB > 0 ? `${(memKiB / 1024).toFixed(1)} MiB` : '—'}
+				</KpiStatCard>
 			</div>
 			<MihomoOverviewCharts
 				histUp={histUp}