fix: 修复某些边缘情况的图表显示异常 (#592)

crates/bili_sync/src/api/response.rs

@@ -184,6 +184,7 @@ pub struct DashBoardResponse {
 
 #[derive(Serialize, Clone, Copy)]
 pub struct SysInfo {
+    pub timestamp: i64,
     pub total_memory: u64,
     pub used_memory: u64,
     pub process_memory: u64,

crates/bili_sync/src/api/routes/ws/mod.rs

@@ -262,6 +262,7 @@ impl WebSocketHandler {
                             (available, total)
                         });
                     let sys_info = SysInfo {
+                        timestamp: chrono::Utc::now().timestamp_millis(),
                         total_memory: system.total_memory(),
                         used_memory: system.used_memory(),
                         process_memory: process.memory(),

web/src/lib/types.ts

@@ -328,6 +328,7 @@ export interface DashBoardResponse {
 }
 
 export interface SysInfo {
+	timestamp: number;
 	total_memory: number;
 	used_memory: number;
 	process_memory: number;
@@ -336,7 +337,6 @@ export interface SysInfo {
 	total_disk: number;
 	used_disk: number;
 	available_disk: number;
-	uptime: number;
 }
 
 export interface TaskStatus {

web/src/routes/+page.svelte

@@ -47,6 +47,15 @@
 		return `${cpu.toFixed(1)}%`;
 	}
 
+	function formatTimestamp(timestamp: number): string {
+		return new Date(timestamp).toLocaleString('en-US', {
+			hour: '2-digit',
+			minute: '2-digit',
+			second: '2-digit',
+			hour12: true
+		});
+	}
+
 	async function loadDashboard() {
 		loading = true;
 		try {
@@ -131,27 +140,28 @@
 		}
 	} satisfies Chart.ChartConfig;
 
-	let memoryHistory: Array<{ time: Date; used: number; process: number }> = [];
-	let cpuHistory: Array<{ time: Date; used: number; process: number }> = [];
+	let memoryHistory: Array<{ time: number; used: number; process: number }> = [];
+	let cpuHistory: Array<{ time: number; used: number; process: number }> = [];
 
 	$: if (sysInfo) {
 		memoryHistory = [
-			...memoryHistory.slice(-19),
+			...memoryHistory.slice(-14),
 			{
-				time: new Date(),
+				time: sysInfo.timestamp,
 				used: sysInfo.used_memory,
 				process: sysInfo.process_memory
 			}
 		];
 		cpuHistory = [
-			...cpuHistory.slice(-19),
+			...cpuHistory.slice(-14),
 			{
-				time: new Date(),
+				time: sysInfo.timestamp,
 				used: sysInfo.used_cpu,
 				process: sysInfo.process_cpu
 			}
 		];
 	}
+
 	// 计算磁盘使用率
 	$: diskUsagePercent = sysInfo
 		? ((sysInfo.total_disk - sysInfo.available_disk) / sysInfo.total_disk) * 100
@@ -435,13 +445,8 @@
 							>
 								{#snippet tooltip()}
 									<MyChartTooltip
-										labelFormatter={(v: Date) => {
-											return v.toLocaleString('en-US', {
-												hour: '2-digit',
-												minute: '2-digit',
-												second: '2-digit',
-												hour12: true
-											});
+										labelFormatter={(timestamp: number) => {
+											return formatTimestamp(timestamp);
 										}}
 										valueFormatter={(v: number) => formatBytes(v)}
 										indicator="line"
@@ -502,13 +507,8 @@
 							>
 								{#snippet tooltip()}
 									<MyChartTooltip
-										labelFormatter={(v: Date) => {
-											return v.toLocaleString('en-US', {
-												hour: '2-digit',
-												minute: '2-digit',
-												second: '2-digit',
-												hour12: true
-											});
+										labelFormatter={(timestamp: number) => {
+											return formatTimestamp(timestamp);
 										}}
 										valueFormatter={(v: number) => formatCpu(v)}
 										indicator="line"