From 9be79e97f1d7fa061d7876a226d39acca282a931 Mon Sep 17 00:00:00 2001
From: Flanker <6418075+podcctv@users.noreply.github.com>
Date: Wed, 6 May 2026 03:01:12 +0000
Subject: [PATCH] Fix usage bars updates and refresh card/latency visuals

---
 src/components/NodeCard.tsx   | 11 ++++++-----
 src/components/NodeDetail.tsx | 27 ++++++++++++++++-----------
 src/utils/cn.ts               | 10 +++++-----
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/components/NodeCard.tsx b/src/components/NodeCard.tsx
index f5fd5b2..79e7bab 100644
--- a/src/components/NodeCard.tsx
+++ b/src/components/NodeCard.tsx
@@ -75,7 +75,8 @@ function Metric({
   sub?: ReactNode
   subTitle?: string
 }) {
-  const percent = pct(value)
+  const numericValue = Number.isFinite(value) ? (value as number) : undefined
+  const percent = pct(numericValue)
   return (
     <div className="space-y-1">
       <div className="flex items-center text-xs font-mono">
@@ -85,12 +86,12 @@ function Metric({
             {sub}
           </span>
         ) : null}
-        <span className={cn('ml-auto font-semibold tabular-nums', loadTextColor(percent))}>{percent}%</span>
+        <span className={cn('ml-auto font-semibold tabular-nums', loadTextColor(numericValue))}>{percent}</span>
       </div>
       <Progress
-        value={percent}
-        className="h-2 rounded-sm bg-cyan-950/70 ring-1 ring-cyan-300/20"
-        indicatorClassName={cn(loadColor(percent), 'progress-glow')}
+        value={numericValue}
+        className="h-2 rounded-sm bg-slate-800/80 ring-1 ring-white/10"
+        indicatorClassName={cn(loadColor(numericValue), 'progress-glow')}
       />
     </div>
   )
diff --git a/src/components/NodeDetail.tsx b/src/components/NodeDetail.tsx
index c262953..67db19d 100644
--- a/src/components/NodeDetail.tsx
+++ b/src/components/NodeDetail.tsx
@@ -280,20 +280,25 @@ function OnlinePanel({ online }: { online: boolean }) {
 }
 
 function TcpMiniPanel({ rows }: { rows: TaskQueryResult[] }) {
-  const stats = useMemo(() => computeLatencyStats(rows, 'tcp_ping').slice(0, 3), [rows])
+  const stats = useMemo(() => computeLatencyStats(rows, 'tcp_ping').slice(0, 5), [rows])
   return (
-    <div className="rounded-xl border border-amber-400/25 bg-amber-500/5 p-4 space-y-2">
-      <div className="text-sm text-amber-300">二网 TCPing</div>
+    <div className="rounded-xl border border-cyan-400/25 bg-cyan-500/5 p-4 space-y-2">
+      <div className="text-sm text-cyan-300">TCP Ping 质量</div>
       {stats.map(s => (
-        <div key={s.name} className="flex items-center gap-3">
-          <span className="w-12 text-xs text-muted-foreground truncate">{s.name}</span>
-          <div className="h-3 flex-1 rounded bg-black/20 overflow-hidden">
-            <div
-              className="h-full bg-amber-400"
-              style={{ width: `${Math.max(2, Math.min(100, 100 - (s.avg ?? 999) / 4))}%` }}
-            />
+        <div key={s.name} className="space-y-1">
+          <div className="flex items-center gap-3">
+            <span className="w-12 text-xs text-muted-foreground truncate">{s.name}</span>
+            <div className="h-3 flex-1 rounded bg-black/20 overflow-hidden">
+              <div
+                className="h-full bg-gradient-to-r from-cyan-400 to-sky-400"
+                style={{ width: `${Math.max(2, Math.min(100, 100 - (s.avg ?? 999) / 4))}%` }}
+              />
+            </div>
+            <span className="w-14 text-right font-mono text-xs">{s.avg != null ? `${Math.round(s.avg)}ms` : '—'}</span>
+          </div>
+          <div className="ml-[3.75rem] text-[11px] text-muted-foreground font-mono">
+            min {s.min != null ? `${Math.round(s.min)}ms` : '—'} · max {s.max != null ? `${Math.round(s.max)}ms` : '—'} · 丢包 {s.loss.toFixed(1)}%
           </div>
-          <span className="w-14 text-right font-mono text-xs">{s.avg != null ? `${Math.round(s.avg)}ms` : '—'}</span>
         </div>
       ))}
       {stats.length === 0 && <div className="text-xs text-muted-foreground">暂无 TCP ping 数据</div>}
diff --git a/src/utils/cn.ts b/src/utils/cn.ts
index 2a592fc..ee69393 100644
--- a/src/utils/cn.ts
+++ b/src/utils/cn.ts
@@ -7,21 +7,21 @@ export function cn(...inputs: ClassValue[]) {
 
 export function loadColor(v?: number | null) {
   if (v == null || !Number.isFinite(v)) return 'bg-muted-foreground/40'
-  if (v >= 90) return 'bg-gradient-to-r from-fuchsia-500 via-rose-500 to-orange-500'
-  if (v >= 70) return 'bg-gradient-to-r from-amber-400 to-orange-500'
-  return 'bg-gradient-to-r from-emerald-400 to-cyan-400'
+  if (v >= 90) return 'bg-gradient-to-r from-rose-500 via-orange-500 to-amber-400'
+  if (v >= 70) return 'bg-gradient-to-r from-amber-400 to-yellow-300'
+  return 'bg-gradient-to-r from-sky-500 to-cyan-300'
 }
 
 export function loadTextColor(v?: number | null) {
   if (v == null || !Number.isFinite(v)) return 'text-muted-foreground'
   if (v >= 90) return 'text-rose-300'
   if (v >= 70) return 'text-amber-300'
-  return 'text-emerald-300'
+  return 'text-cyan-300'
 }
 
 export function strokeColor(v?: number | null) {
   if (v == null || !Number.isFinite(v)) return 'stroke-muted-foreground/40'
   if (v >= 90) return 'stroke-rose-500'
   if (v >= 70) return 'stroke-amber-500'
-  return 'stroke-emerald-500'
+  return 'stroke-sky-500'
 }