From 9a2d1a9b1e2bcf6f95864683f4d611b67be5f222 Mon Sep 17 00:00:00 2001
From: zhang1106 <849185023@qq.com>
Date: Fri, 15 May 2026 14:52:05 +0800
Subject: [PATCH] =?UTF-8?q?feat(rack):=20=E6=9C=BA=E6=9F=9C=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E5=92=8C=E5=88=97=E8=A1=A8=E6=96=B0=E5=A2=9E=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E7=8E=87=E8=BF=9B=E5=BA=A6=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/RackManagement.jsx | 29 ++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/RackManagement.jsx b/frontend/src/pages/RackManagement.jsx
index dfcab2d..c074014 100644
--- a/frontend/src/pages/RackManagement.jsx
+++ b/frontend/src/pages/RackManagement.jsx
@@ -220,6 +220,13 @@ const RackCard = ({ rack, onEdit, onDelete, onView, selected, onSelect }) => {
           >
             {rack.height}U / {usedU}
           </div>
+          <Progress
+            percent={rack.height > 0 ? Math.min((usedU / rack.height) * 100, 100) : 0}
+            showInfo={false}
+            size="small"
+            strokeColor={usedU / rack.height >= 0.8 ? '#ff4d4f' : usedU / rack.height >= 0.6 ? '#faad14' : '#52c41a'}
+            style={{ marginTop: '4px' }}
+          />
         </div>
         <div style={{ padding: '12px', background: '#fafafa', borderRadius: '8px' }}>
           <Text type="secondary" style={{ fontSize: '11px' }}>
@@ -670,10 +677,26 @@ function RackManagement() {
       key: 'heightUsage',
       render: (_, record) => {
         const used = record.Devices?.reduce((sum, d) => sum + (d.height || 1), 0) || 0;
+        const percentage = record.height > 0 ? Math.min((used / record.height) * 100, 100) : 0;
+        const status = percentage >= 80 ? 'exception' : percentage >= 60 ? 'active' : 'normal';
         return (
-          <Text style={{ fontSize: '13px' }}>
-            {record.height}U / 已用 {used} U位
-          </Text>
+          <div style={{ minWidth: '120px' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '2px' }}>
+              <Text style={{ fontSize: '13px' }}>
+                {record.height}U / 已用 {used}U
+              </Text>
+              <Text style={{ fontSize: '12px', color: percentage >= 80 ? '#ff4d4f' : percentage >= 60 ? '#faad14' : '#52c41a' }}>
+                {percentage.toFixed(0)}%
+              </Text>
+            </div>
+            <Progress
+              percent={percentage}
+              status={status}
+              showInfo={false}
+              size="small"
+              strokeColor={percentage >= 80 ? '#ff4d4f' : percentage >= 60 ? '#faad14' : '#52c41a'}
+            />
+          </div>
         );
       },
       sorter: (a, b) =>