okooooooo/pika
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复 GPU 配色不正确的问题 fix #61

Browse Source
This commit is contained in:
dushixiang committed 2026-02-07 15:40:48 +08:00
1 parent e82046ac89
commit a6f09ce997
1 file changed
+37 -13
Download Patch File Download Diff File Expand all files Collapse all files
web/src/portal/components/server/GpuMonitorSection.tsx
+37 -13
View File
@@ -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>