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>