From a6f09ce9977f165f69cae2ad38c8b99a2f40b818 Mon Sep 17 00:00:00 2001
From: dushixiang <dushixiang@typesafe.cn>
Date: Sat, 7 Feb 2026 15:40:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20GPU=20=E9=85=8D=E8=89=B2?=
 =?UTF-8?q?=E4=B8=8D=E6=AD=A3=E7=A1=AE=E7=9A=84=E9=97=AE=E9=A2=98=20fix=20?=
 =?UTF-8?q?#61?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/server/GpuMonitorSection.tsx   | 50 ++++++++++++++-----
 1 file changed, 37 insertions(+), 13 deletions(-)

diff --git a/web/src/portal/components/server/GpuMonitorSection.tsx b/web/src/portal/components/server/GpuMonitorSection.tsx
index f202fa1..a4024cd 100644
--- a/web/src/portal/components/server/GpuMonitorSection.tsx
+++ b/web/src/portal/components/server/GpuMonitorSection.tsx
@@ -15,6 +15,23 @@ export const GpuMonitorSection = ({latestMetrics}: GpuMonitorSectionProps) => {
     // 如果没有 GPU 数据，不渲染组件
     if (!latestMetrics?.gpu || latestMetrics.gpu.length === 0) {
         return null;
+        // # mock 测试
+        // const mockGpu: GPUMetric = {
+        //     agentId: "agent123",           // 代理 ID
+        //     fanSpeed: 3000,                // 风扇转速（单位：rpm）
+        //     id: 1,                         // GPU ID
+        //     index: 0,                      // GPU 索引
+        //     memoryFree: 4096,              // 可用内存（单位：MB）
+        //     memoryTotal: 8192,             // 总内存（单位：MB）
+        //     memoryUsed: 4096,              // 已用内存（单位：MB）
+        //     name: "NVIDIA GeForce RTX 3070",  // GPU 名称
+        //     performanceState: "P0",        // 性能状态（P0-P15）
+        //     powerUsage: 150,               // 功率使用（单位：W）
+        //     temperature: 70,               // 温度（单位：°C）
+        //     timestamp: Date.now(),         // 当前时间戳
+        //     utilization: 85                // GPU 利用率（单位：%）
+        // };
+        // latestMetrics.gpu = [mockGpu];
     }
 
     return (
@@ -23,41 +40,48 @@ export const GpuMonitorSection = ({latestMetrics}: GpuMonitorSectionProps) => {
                 {latestMetrics.gpu.map((gpu) => (
                     <div
                         key={gpu.index}
-                        className="rounded-xl border border-cyan-900/50 bg-black/30 p-4 backdrop-blur-sm hover:border-cyan-700/50 transition"
+                        className="rounded-xl border border-slate-200 dark:border-cyan-900/50 bg-slate-50 dark:bg-black/30 p-4 backdrop-blur-sm hover:border-slate-300 dark:hover:border-cyan-700/50 transition"
                     >
                         <div className="mb-3 flex items-center justify-between">
                             <div className="flex items-center gap-2">
                                 <span
-                                    className="flex h-9 w-9 items-center justify-center rounded-lg bg-cyan-500/10 text-cyan-500">
+                                    className="flex h-9 w-9 items-center justify-center rounded-lg bg-gray-200 text-gray-600 dark:bg-cyan-500/10 dark:text-cyan-500">
                                     <Zap className="h-4 w-4"/>
                                 </span>
                                 <div>
-                                    <p className="text-sm font-bold font-mono text-cyan-100">GPU {gpu.index}</p>
-                                    <p className="text-xs text-cyan-500">{gpu.name}</p>
+                                    <p className="text-sm font-bold font-mono text-gray-700 dark:text-cyan-100">GPU {gpu.index}</p>
+                                    <p className="text-xs text-gray-600 dark:text-cyan-500">{gpu.name}</p>
                                 </div>
                             </div>
-                            <span className="text-2xl font-bold text-purple-400">
+                            <span className="text-2xl font-bold text-orange-600 dark:text-purple-400">
                                 {gpu.utilization?.toFixed(1) ?? 0}%
                             </span>
                         </div>
                         <div className="space-y-2 text-xs">
                             <div className="flex items-center justify-between">
-                                <span className="text-cyan-500 font-mono text-xs uppercase tracking-wider">温度</span>
-                                <span className="font-medium text-cyan-200">{gpu.temperature?.toFixed(1)}°C</span>
+                                <span
+                                    className="text-gray-600 dark:text-cyan-500 font-mono text-xs uppercase tracking-wider">温度</span>
+                                <span
+                                    className="font-medium text-gray-900 dark:text-cyan-200">{gpu.temperature?.toFixed(1)}°C</span>
                             </div>
                             <div className="flex items-center justify-between">
-                                <span className="text-cyan-500 font-mono text-xs uppercase tracking-wider">显存</span>
-                                <span className="font-medium text-cyan-200">
+                                <span
+                                    className="text-gray-600 dark:text-cyan-500 font-mono text-xs uppercase tracking-wider">显存</span>
+                                <span className="font-medium text-gray-900 dark:text-cyan-200">
                                     {formatBytes(gpu.memoryUsed)} / {formatBytes(gpu.memoryTotal)}
                                 </span>
                             </div>
                             <div className="flex items-center justify-between">
-                                <span className="text-cyan-500 font-mono text-xs uppercase tracking-wider">功耗</span>
-                                <span className="font-medium text-cyan-200">{gpu.powerUsage?.toFixed(1)}W</span>
+                                <span
+                                    className="text-gray-600 dark:text-cyan-500 font-mono text-xs uppercase tracking-wider">功耗</span>
+                                <span
+                                    className="font-medium text-gray-900 dark:text-cyan-200">{gpu.powerUsage?.toFixed(1)}W</span>
                             </div>
                             <div className="flex items-center justify-between">
-                                <span className="text-cyan-500 font-mono text-xs uppercase tracking-wider">风扇转速</span>
-                                <span className="font-medium text-cyan-200">{gpu.fanSpeed?.toFixed(0)}%</span>
+                                <span
+                                    className="text-gray-600 dark:text-cyan-500 font-mono text-xs uppercase tracking-wider">风扇转速</span>
+                                <span
+                                    className="font-medium text-gray-900 dark:text-cyan-200">{gpu.fanSpeed?.toFixed(0)}%</span>
                             </div>
                         </div>
                     </div>