From 8aba90690417211262efa9e7a77d049fb522f4b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=B4=80=E1=B4=8D=E1=B4=9B=E1=B4=8F=E1=B4=80=E1=B4=87?=
 =?UTF-8?q?=CA=80?= <amtoaer@gmail.com>
Date: Tue, 24 Feb 2026 01:54:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=B0=9D=E8=AF=95=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E6=B5=8F=E8=A7=88=E5=99=A8=E4=BB=8E=E4=BC=91=E7=9C=A0=E4=B8=AD?=
 =?UTF-8?q?=E6=81=A2=E5=A4=8D=E6=97=B6=E7=9A=84=E5=9B=BE=E8=A1=A8=E4=B9=B1?=
 =?UTF-8?q?=E5=BA=8F=E9=97=AE=E9=A2=98=20(#656)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/routes/+page.svelte | 82 ++++++++++++++++++-------------------
 1 file changed, 40 insertions(+), 42 deletions(-)

diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 56220cc..4e8deb4 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -29,11 +29,13 @@
 		DownloadIcon
 	} from '@lucide/svelte/icons';
 
-	let dashboardData: DashBoardResponse | null = null;
-	let sysInfo: SysInfo | null = null;
-	let taskStatus: TaskStatus | null = null;
-	let loading = false;
-	let triggering = false;
+	let dashboardData = $state<DashBoardResponse | null>(null);
+	let sysInfo = $state<SysInfo | null>(null);
+	let taskStatus = $state<TaskStatus | null>(null);
+	let loading = $state(false);
+	let triggering = $state(false);
+	let memoryHistory = $state<Array<{ time: number; used: number; process: number }>>([]);
+	let cpuHistory = $state<Array<{ time: number; used: number; process: number }>>([]);
 	let unsubscribeSysInfo: (() => void) | null = null;
 	let unsubscribeTasks: (() => void) | null = null;
 
@@ -90,29 +92,6 @@
 		}
 	}
 
-	onMount(() => {
-		setBreadcrumb([{ label: '仪表盘' }]);
-
-		unsubscribeSysInfo = api.subscribeToSysInfo((data) => {
-			sysInfo = data;
-		});
-		unsubscribeTasks = api.subscribeToTasks((data: TaskStatus) => {
-			taskStatus = data;
-		});
-		loadDashboard();
-		return () => {
-			if (unsubscribeSysInfo) {
-				unsubscribeSysInfo();
-				unsubscribeSysInfo = null;
-			}
-			if (unsubscribeTasks) {
-				unsubscribeTasks();
-				unsubscribeTasks = null;
-			}
-		};
-	});
-
-	// 图表配置
 	const videoChartConfig = {
 		videos: {
 			label: '视频数量',
@@ -142,32 +121,51 @@
 		}
 	} satisfies Chart.ChartConfig;
 
-	let memoryHistory: Array<{ time: number; used: number; process: number }> = [];
-	let cpuHistory: Array<{ time: number; used: number; process: number }> = [];
-
-	$: if (sysInfo) {
+	function pushSysInfo(data: SysInfo) {
 		memoryHistory = [
 			...memoryHistory.slice(-14),
 			{
-				time: sysInfo.timestamp,
-				used: sysInfo.used_memory,
-				process: sysInfo.process_memory
+				time: data.timestamp,
+				used: data.used_memory,
+				process: data.process_memory
 			}
 		];
 		cpuHistory = [
 			...cpuHistory.slice(-14),
 			{
-				time: sysInfo.timestamp,
-				used: sysInfo.used_cpu,
-				process: sysInfo.process_cpu
+				time: data.timestamp,
+				used: data.used_cpu,
+				process: data.process_cpu
 			}
 		];
 	}
 
-	// 计算磁盘使用率
-	$: diskUsagePercent = sysInfo
-		? ((sysInfo.total_disk - sysInfo.available_disk) / sysInfo.total_disk) * 100
-		: 0;
+	const diskUsagePercent = $derived(
+		sysInfo ? ((sysInfo.total_disk - sysInfo.available_disk) / sysInfo.total_disk) * 100 : 0
+	);
+
+	onMount(() => {
+		setBreadcrumb([{ label: '仪表盘' }]);
+
+		unsubscribeSysInfo = api.subscribeToSysInfo((data) => {
+			sysInfo = data;
+			pushSysInfo(data);
+		});
+		unsubscribeTasks = api.subscribeToTasks((data: TaskStatus) => {
+			taskStatus = data;
+		});
+		loadDashboard();
+		return () => {
+			if (unsubscribeSysInfo) {
+				unsubscribeSysInfo();
+				unsubscribeSysInfo = null;
+			}
+			if (unsubscribeTasks) {
+				unsubscribeTasks();
+				unsubscribeTasks = null;
+			}
+		};
+	});
 </script>
 
 <svelte:head>