From 8f176e207e49d2c5fdd513bcd1f059a9adaeb73d Mon Sep 17 00:00:00 2001
From: dushixiang <dushixiang@typesafe.cn>
Date: Tue, 2 Dec 2025 19:57:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=AC=E5=85=B1=E9=A1=B5=E9=9D=A2=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E4=BF=AE=E6=94=B9=E6=97=B6=E9=97=B4=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=97=A5=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/Public/MonitorDetail.tsx | 17 ++++++++++++++--
 web/src/pages/Public/ServerDetail.tsx  | 28 ++++++++++++++++++--------
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/web/src/pages/Public/MonitorDetail.tsx b/web/src/pages/Public/MonitorDetail.tsx
index 076a43b..dacd4c3 100644
--- a/web/src/pages/Public/MonitorDetail.tsx
+++ b/web/src/pages/Public/MonitorDetail.tsx
@@ -240,10 +240,23 @@ const CustomTooltip = ({active, payload, label, unit = ' ms'}: TooltipProps<numb
         return null;
     }
 
+    // 从 payload 中获取完整的时间戳信息（如果有的话）
+    const fullTimestamp = payload[0]?.payload?.timestamp;
+    const displayLabel = fullTimestamp
+        ? new Date(fullTimestamp).toLocaleString('zh-CN', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit'
+        })
+        : label;
+
     return (
         <div
             className="rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-3 py-2 text-xs">
-            <p className="font-semibold text-slate-700 dark:text-slate-200">{label}</p>
+            <p className="font-semibold text-slate-700 dark:text-slate-200">{displayLabel}</p>
             <div className="mt-1 space-y-1">
                 {payload.map((entry, index) => {
                     if (!entry) {
@@ -394,7 +407,7 @@ const MonitorDetail = () => {
             });
 
             if (!acc[time]) {
-                acc[time] = {time};
+                acc[time] = {time, timestamp: item.timestamp};
             }
 
             // 根据选择的探针过滤
diff --git a/web/src/pages/Public/ServerDetail.tsx b/web/src/pages/Public/ServerDetail.tsx
index 395388a..0e241ef 100644
--- a/web/src/pages/Public/ServerDetail.tsx
+++ b/web/src/pages/Public/ServerDetail.tsx
@@ -450,10 +450,16 @@ const CustomTooltip = ({active, payload, label, unit = '%'}: MetricsTooltipProps
         return null;
     }
 
+    // 从 payload 中获取完整的时间戳信息（如果有的话）
+    const fullTimestamp = payload[0]?.payload?.timestamp;
+    const displayLabel = fullTimestamp
+        ? dayjs(fullTimestamp).format('YYYY-MM-DD HH:mm:ss')
+        : label;
+
     return (
         <div
             className="rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-3 py-2 text-xs">
-            <p className="font-semibold text-slate-700 dark:text-slate-200">{label}</p>
+            <p className="font-semibold text-slate-700 dark:text-slate-200">{displayLabel}</p>
             <div className="mt-1 space-y-1">
                 {payload.map((entry, index) => {
                     if (!entry) {
@@ -517,6 +523,7 @@ const ServerDetail = () => {
                     minute: '2-digit',
                 }),
                 usage: Number(item.maxUsage.toFixed(2)),
+                timestamp: item.timestamp,
             })),
         [metricsData.cpu]
     );
@@ -529,6 +536,7 @@ const ServerDetail = () => {
                     minute: '2-digit',
                 }),
                 usage: Number(item.maxUsage.toFixed(2)),
+                timestamp: item.timestamp,
             })),
         [metricsData.memory]
     );
@@ -585,7 +593,7 @@ const ServerDetail = () => {
             });
 
             if (!acc[time]) {
-                acc[time] = {time};
+                acc[time] = {time, timestamp: item.timestamp};
             }
 
             // 后端已经根据 interface 参数返回了对应的数据
@@ -605,7 +613,7 @@ const ServerDetail = () => {
 
     // Disk I/O 图表数据（汇总所有磁盘）
     const diskIOChartData = useMemo(() => {
-        const aggregated: Record<string, { time: string; read: number; write: number }> = {};
+        const aggregated: Record<string, { time: string; read: number; write: number; timestamp: number }> = {};
 
         metricsData.diskIO.forEach((item) => {
             const time = new Date(item.timestamp).toLocaleTimeString('zh-CN', {
@@ -614,7 +622,7 @@ const ServerDetail = () => {
             });
 
             if (!aggregated[time]) {
-                aggregated[time] = {time, read: 0, write: 0};
+                aggregated[time] = {time, read: 0, write: 0, timestamp: item.timestamp};
             }
 
             // 转换为 MB/s
@@ -635,7 +643,8 @@ const ServerDetail = () => {
             time: string;
             utilization: number;
             temperature: number;
-            count: number
+            count: number;
+            timestamp: number;
         }> = {};
 
         metricsData.gpu.forEach((item) => {
@@ -645,7 +654,7 @@ const ServerDetail = () => {
             });
 
             if (!aggregated[time]) {
-                aggregated[time] = {time, utilization: 0, temperature: 0, count: 0};
+                aggregated[time] = {time, utilization: 0, temperature: 0, count: 0, timestamp: item.timestamp};
             }
 
             aggregated[time].utilization += item.maxUtilization;
@@ -657,12 +666,13 @@ const ServerDetail = () => {
             time: item.time,
             utilization: Number((item.utilization / item.count).toFixed(2)),
             temperature: Number((item.temperature / item.count).toFixed(2)),
+            timestamp: item.timestamp,
         }));
     }, [metricsData.gpu]);
 
     // Temperature 图表数据（所有传感器的平均温度）
     const temperatureChartData = useMemo(() => {
-        const aggregated: Record<string, { time: string; temperature: number; count: number }> = {};
+        const aggregated: Record<string, { time: string; temperature: number; count: number; timestamp: number }> = {};
 
         metricsData.temperature.forEach((item) => {
             const time = new Date(item.timestamp).toLocaleTimeString('zh-CN', {
@@ -671,7 +681,7 @@ const ServerDetail = () => {
             });
 
             if (!aggregated[time]) {
-                aggregated[time] = {time, temperature: 0, count: 0};
+                aggregated[time] = {time, temperature: 0, count: 0, timestamp: item.timestamp};
             }
 
             aggregated[time].temperature += item.maxTemperature;
@@ -681,6 +691,7 @@ const ServerDetail = () => {
         return Object.values(aggregated).map((item) => ({
             time: item.time,
             temperature: Number((item.temperature / item.count).toFixed(2)),
+            timestamp: item.timestamp,
         }));
     }, [metricsData.temperature]);
 
@@ -1266,6 +1277,7 @@ const ServerDetail = () => {
                                             timeWait: item.maxTimeWait,
                                             closeWait: item.maxCloseWait,
                                             listen: item.maxListen,
+                                            timestamp: item.timestamp,
                                         }))}>
                                             <CartesianGrid stroke="currentColor" strokeDasharray="4 4"
                                                            className="stroke-slate-200 dark:stroke-slate-600"/>