From 46b5f4a5e248676159b0c38305ed68e099bd623a Mon Sep 17 00:00:00 2001
From: ji ruo <79234113+RuoJi6@users.noreply.github.com>
Date: Fri, 30 Oct 2026 01:53:05 +0800
Subject: [PATCH] fix: show resource metrics as progress bars

---
 web/src/app/(main)/dashboard/page.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/src/app/(main)/dashboard/page.tsx b/web/src/app/(main)/dashboard/page.tsx
index 63b9dc6..f2b5092 100644
--- a/web/src/app/(main)/dashboard/page.tsx
+++ b/web/src/app/(main)/dashboard/page.tsx
@@ -116,12 +116,16 @@ function SystemResourceStatus({ metrics }: { metrics: SystemMetrics | null }) {
     [HardDriveIcon, "磁盘", metrics.data_disk.percent],
   ] as const;
   return (
-    <div className="flex flex-1 items-center justify-center gap-4 text-xs text-muted-foreground" role="status" aria-live="polite">
-      <span className="font-medium">容器资源</span>
+    <div className="flex min-w-0 flex-1 items-center justify-center gap-3 text-xs text-muted-foreground" role="status" aria-live="polite">
+      <span className="shrink-0 font-medium">容器资源</span>
       {items.map(([Icon, label, value]) => (
-        <span key={label} className="inline-flex items-center gap-1 tabular-nums" title={`${label} ${value.toFixed(1)}%`}>
-          <Icon className="size-3.5" aria-hidden="true" /> {label} {value.toFixed(1)}%
-        </span>
+        <div key={label} className="w-24 min-w-0" title={`${label} ${value.toFixed(1)}%`}>
+          <div className="mb-1 flex items-center justify-between gap-1 text-[10px]">
+            <span className="inline-flex items-center gap-1"><Icon className="size-3" aria-hidden="true" />{label}</span>
+            <span className="tabular-nums">{value.toFixed(1)}%</span>
+          </div>
+          <Progress value={value} className="h-1.5" />
+        </div>
       ))}
     </div>
   );