feat(设备管理): 添加机房筛选功能并优化UI样式

refactor(耗材统计): 重构筛选卡片布局和统计卡片样式

style(3D可视化): 优化机柜信息卡片样式和交互体验

backend/routes/devices.js

@@ -31,7 +31,7 @@ Rack.hasMany(Device, { foreignKey: 'rackId' });
 
 router.get('/', validateQuery(queryDeviceSchema), async (req, res) => {
   try {
-    const { keyword, status, type, rackId, page = 1, pageSize = 10 } = req.query;
+    const { keyword, status, type, rackId, roomId, page = 1, pageSize = 10 } = req.query;
     const offset = (page - 1) * pageSize;
 
     // 构建查询条件
@@ -101,6 +101,11 @@ router.get('/', validateQuery(queryDeviceSchema), async (req, res) => {
       where.rackId = rackId;
     }
 
+    // 机房筛选 - 通过机柜关联查询
+    if (roomId && roomId !== 'all') {
+      where['$Rack.roomId$'] = roomId;
+    }
+
     // 执行查询 - 优化：使用 JOIN 避免 N+1 查询问题
     const { count, rows } = await Device.findAndCountAll({
       where,

frontend/src/pages/ConsumableStatistics.jsx

@@ -157,39 +157,81 @@ const QuickFilterBtn = styled(Button)`
 
 const FilterCard = styled(motion.div)`
   background: ${designTokens.colors.background.card};
-  padding: 20px 24px;
+  padding: 24px;
   border-radius: 16px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
   margin-bottom: 24px;
   border: 1px solid ${designTokens.colors.border};
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  flex-wrap: wrap;
 
   @media (max-width: 768px) {
     padding: 16px;
   }
 `;
 
+const FilterRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  flex-wrap: wrap;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 16px;
+  }
+`;
+
+const FilterGroup = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+`;
+
 const FilterItem = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
 
   .filter-label {
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 600;
-    color: ${designTokens.colors.text.secondary};
+    color: ${designTokens.colors.text.primary};
-    text-transform: uppercase;
+    display: flex;
-    letter-spacing: 0.5px;
+    align-items: center;
+    gap: 6px;
+
+    &::before {
+      content: '';
+      width: 3px;
+      height: 12px;
+      background: ${designTokens.colors.primary.main};
+      border-radius: 2px;
+    }
+  }
+`;
+
+const FilterActions = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-left: auto;
+
+  @media (max-width: 768px) {
+    margin-left: 0;
+    width: 100%;
   }
 `;
 
 const StatsGrid = styled(motion.div)`
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 20px;
+  gap: 16px;
   margin-bottom: 24px;
 
   @media (max-width: 1200px) {
@@ -204,7 +246,7 @@ const StatsGrid = styled(motion.div)`
 const StatsCard = styled(motion.div)`
   background: ${designTokens.colors.background.card};
   border-radius: 16px;
-  padding: 24px;
+  padding: 20px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
   border: 1px solid ${designTokens.colors.border};
   position: relative;
@@ -213,8 +255,9 @@ const StatsCard = styled(motion.div)`
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
   &:hover {
-    transform: translateY(-4px);
+    transform: translateY(-6px);
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
+    border-color: ${props => props.$borderColor || designTokens.colors.primary.main}40;
   }
 
   &::before {
@@ -223,44 +266,40 @@ const StatsCard = styled(motion.div)`
     top: 0;
     left: 0;
     right: 0;
-    height: 3px;
+    height: 4px;
     background: ${props => props.$accent || designTokens.colors.primary.gradient};
   }
 
+  .card-content {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
   .card-icon {
     width: 48px;
     height: 48px;
-    border-radius: 12px;
+    border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 22px;
+    font-size: 24px;
-    margin-bottom: 16px;
     background: ${props => props.$iconBg || 'rgba(99, 102, 241, 0.1)'};
     color: ${props => props.$iconColor || designTokens.colors.primary.main};
-  }
+    box-shadow: 0 4px 12px ${props => props.$iconShadow || 'rgba(99, 102, 241, 0.2)'};
-
-  .card-value {
-    font-size: 36px;
-    font-weight: 700;
-    color: ${designTokens.colors.text.primary};
-    line-height: 1.2;
-    margin-bottom: 4px;
-  }
-
-  .card-label {
-    font-size: 14px;
-    color: ${designTokens.colors.text.secondary};
   }
 
   .card-trend {
-    position: absolute;
-    top: 24px;
-    right: 24px;
     display: flex;
     align-items: center;
     gap: 4px;
-    font-size: 13px;
+    font-size: 12px;
     font-weight: 600;
     padding: 4px 10px;
     border-radius: 20px;
@@ -280,6 +319,25 @@ const StatsCard = styled(motion.div)`
       background: rgba(107, 114, 128, 0.1);
     }
   }
+
+  .card-body {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .card-value {
+    font-size: 32px;
+    font-weight: 700;
+    color: ${designTokens.colors.text.primary};
+    line-height: 1;
+  }
+
+  .card-label {
+    font-size: 13px;
+    color: ${designTokens.colors.text.secondary};
+    font-weight: 500;
+  }
 `;
 
 const BentoGrid = styled(motion.div)`
@@ -312,12 +370,12 @@ const BentoCard = styled(motion.div)`
   }
 
   .card-header {
-    padding: 20px 24px;
+    padding: 18px 24px;
     border-bottom: 1px solid ${designTokens.colors.border};
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%);
+    background: ${designTokens.colors.background.main};
 
     .header-left {
       display: flex;
@@ -325,19 +383,20 @@ const BentoCard = styled(motion.div)`
       gap: 12px;
 
       .header-icon {
-        width: 36px;
+        width: 40px;
-        height: 36px;
+        height: 40px;
-        border-radius: 10px;
+        border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 18px;
+        font-size: 20px;
         background: ${props => props.$iconBg || designTokens.colors.primary.gradient};
         color: white;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
       }
 
       .header-title {
-        font-size: 16px;
+        font-size: 15px;
         font-weight: 600;
         color: ${designTokens.colors.text.primary};
       }
@@ -345,19 +404,24 @@ const BentoCard = styled(motion.div)`
 
     .header-extra {
       color: ${designTokens.colors.text.secondary};
-      font-size: 13px;
+      font-size: 12px;
+      font-weight: 500;
+      padding: 4px 10px;
+      background: ${designTokens.colors.background.card};
+      border-radius: 8px;
+      border: 1px solid ${designTokens.colors.border};
     }
   }
 
   .card-body {
-    padding: 20px 24px;
+    padding: 0;
   }
 `;
 
 const InOutComparison = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 20px;
+  gap: 16px;
 
   @media (max-width: 576px) {
     grid-template-columns: 1fr;
@@ -366,99 +430,146 @@ const InOutComparison = styled.div`
 
 const ComparisonItem = styled.div`
   padding: 20px;
-  border-radius: 12px;
+  border-radius: 14px;
   background: ${props => props.$bg || 'transparent'};
   text-align: center;
+  transition: all 0.3s ease;
+  border: 1px solid ${props => props.$color}20;
+
+  &:hover {
+    background: ${props => props.$bg || 'transparent'};
+    border-color: ${props => props.$color}40;
+    transform: translateY(-2px);
+  }
 
   .item-icon {
-    font-size: 28px;
+    width: 56px;
-    margin-bottom: 12px;
+    height: 56px;
+    margin: 0 auto 14px;
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 26px;
+    background: ${props => props.$color}15;
     color: ${props => props.$color};
   }
 
   .item-value {
-    font-size: 32px;
+    font-size: 34px;
     font-weight: 700;
     color: ${props => props.$color};
     margin-bottom: 4px;
+    line-height: 1;
   }
 
   .item-label {
     font-size: 14px;
     color: ${designTokens.colors.text.secondary};
-    margin-bottom: 8px;
+    margin-bottom: 10px;
+    font-weight: 500;
   }
 
   .item-sub {
     font-size: 13px;
     color: ${designTokens.colors.text.secondary};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
     
     strong {
       color: ${props => props.$color};
+      font-weight: 600;
     }
   }
 `;
 
 const CategoryGrid = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  gap: 16px;
+  gap: 12px;
 `;
 
 const CategoryCard = styled(motion.div)`
-  padding: 20px;
+  padding: 16px;
   border-radius: 12px;
-  background: linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%);
+  background: ${designTokens.colors.background.card};
   border: 1px solid ${designTokens.colors.border};
   text-align: center;
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: ${props => props.$color};
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
 
   &:hover {
-    transform: translateY(-2px);
+    transform: translateY(-4px);
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
+    box-shadow: 0 8px 24px ${props => props.$color}20;
     border-color: ${props => props.$color}40;
+    
+    &::before {
+      opacity: 1;
+    }
   }
 
   .category-badge {
     display: inline-flex;
     align-items: center;
     gap: 6px;
-    padding: 6px 14px;
+    padding: 5px 12px;
-    border-radius: 20px;
+    border-radius: 16px;
-    font-size: 13px;
+    font-size: 12px;
-    font-weight: 500;
+    font-weight: 600;
     margin-bottom: 12px;
     background: ${props => props.$color}15;
     color: ${props => props.$color};
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
 
     .dot {
-      width: 8px;
+      width: 6px;
-      height: 8px;
+      height: 6px;
       border-radius: 50%;
       background: currentColor;
     }
   }
 
   .category-count {
-    font-size: 28px;
+    font-size: 32px;
     font-weight: 700;
     color: ${designTokens.colors.text.primary};
     margin-bottom: 4px;
+    line-height: 1;
   }
 
   .category-label {
-    font-size: 13px;
+    font-size: 12px;
     color: ${designTokens.colors.text.secondary};
-    margin-bottom: 12px;
+    margin-bottom: 10px;
+    font-weight: 500;
   }
 
   .category-stock {
-    font-size: 13px;
+    font-size: 12px;
     color: ${designTokens.colors.text.secondary};
+    padding-top: 8px;
+    border-top: 1px solid ${designTokens.colors.border}40;
     
     strong {
       color: ${designTokens.colors.text.primary};
+      font-weight: 600;
     }
   }
 `;
@@ -466,15 +577,18 @@ const CategoryCard = styled(motion.div)`
 const StyledTable = styled(Table)`
   .ant-table {
     background: transparent;
+    font-size: 13px;
   }
 
   .ant-table-thead > tr > th {
     background: linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%);
     font-weight: 600;
-    font-size: 13px;
+    font-size: 12px;
     color: ${designTokens.colors.text.secondary};
     border-bottom: 1px solid ${designTokens.colors.border};
-    padding: 14px 16px;
+    padding: 12px 16px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
   }
 
   .ant-table-tbody > tr > td {
@@ -483,7 +597,11 @@ const StyledTable = styled(Table)`
   }
 
   .ant-table-tbody > tr:hover > td {
-    background: rgba(99, 102, 241, 0.02);
+    background: rgba(99, 102, 241, 0.03);
+  }
+
+  .ant-table-wrapper {
+    border-radius: 0 0 16px 16px;
   }
 `;
 
@@ -921,45 +1039,71 @@ const ConsumableStatistics = () => {
       </QuickFilterBar>
 
       <FilterCard variants={itemVariants}>
-        <FilterItem>
+        <FilterRow>
-          <span className="filter-label">时间范围</span>
+          <FilterGroup>
-          <RangePicker
+            <FilterItem>
-            value={dateRange}
+              <span className="filter-label">时间范围</span>
-            onChange={(dates) => {
+              <RangePicker
-              setDateRange(dates);
+                value={dateRange}
-              setQuickFilter(null);
+                onChange={(dates) => {
-            }}
+                  setDateRange(dates);
-            style={{ ...datePickerStyles.range, width: 280 }}
+                  setQuickFilter(null);
-            allowClear={false}
+                }}
-          />
+                style={{ ...datePickerStyles.range, width: 320 }}
-        </FilterItem>
+                allowClear={false}
-        <FilterItem>
+              />
-          <span className="filter-label">耗材类别</span>
+            </FilterItem>
-          <Select
+            <FilterItem>
-            value={categoryFilter}
+              <span className="filter-label">耗材类别</span>
-            onChange={setCategoryFilter}
+              <Select
-            style={{ ...selectStyles.base, width: 160 }}
+                value={categoryFilter}
-          >
+                onChange={setCategoryFilter}
-            <Option value="all">全部类别</Option>
+                style={{ ...selectStyles.base, width: 180 }}
-            {categories.map(cat => (
+                showSearch
-              <Option key={cat.id} value={cat.name}>{cat.name}</Option>
+                placeholder="选择类别"
-            ))}
+                optionFilterProp="children"
-          </Select>
+              >
-        </FilterItem>
+                <Option value="all">全部类别</Option>
-        <Button
+                {categories.map(cat => (
-          type="primary"
+                  <Option key={cat.id} value={cat.name}>{cat.name}</Option>
-          onClick={loadStatistics}
+                ))}
-          loading={loading}
+              </Select>
-          style={{
+            </FilterItem>
-            height: 38,
+          </FilterGroup>
-            borderRadius: 10,
+          <FilterActions>
-            background: designTokens.colors.primary.gradient,
+            <Button
-            border: 'none',
+              type="primary"
-            marginLeft: 'auto',
+              onClick={loadStatistics}
-          }}
+              loading={loading}
-        >
+              icon={<ThunderboltOutlined />}
-          应用筛选
+              style={{
-        </Button>
+                height: 40,
+                borderRadius: 10,
+                background: designTokens.colors.primary.gradient,
+                border: 'none',
+                padding: '0 24px',
+                fontWeight: 500,
+              }}
+            >
+              应用筛选
+            </Button>
+            <Button
+              onClick={() => {
+                setQuickFilter('30days');
+                setDateRange([dayjs().subtract(30, 'days'), dayjs()]);
+                setCategoryFilter('all');
+              }}
+              icon={<ReloadOutlined />}
+              style={{
+                height: 40,
+                borderRadius: 10,
+                borderColor: designTokens.colors.border,
+              }}
+            >
+              重置
+            </Button>
+          </FilterActions>
+        </FilterRow>
       </FilterCard>
 
       <StatsGrid variants={containerVariants} initial="hidden" animate="visible">
@@ -968,11 +1112,22 @@ const ConsumableStatistics = () => {
           $accent={designTokens.colors.primary.gradient}
           $iconBg="rgba(99, 102, 241, 0.1)"
           $iconColor={designTokens.colors.primary.main}
-          whileHover={{ y: -4 }}
+          $iconShadow="rgba(99, 102, 241, 0.2)"
+          $borderColor={designTokens.colors.primary.main}
+          whileHover={{ y: -6 }}
         >
-          <div className="card-icon"><DatabaseOutlined /></div>
+          <div className="card-content">
-          <div className="card-value">{summary?.total || 0}</div>
+            <div className="card-header">
-          <div className="card-label">耗材种类</div>
+              <div className="card-icon"><DatabaseOutlined /></div>
+              <div className="card-trend neutral">
+                <AppstoreOutlined /> 总览
+              </div>
+            </div>
+            <div className="card-body">
+              <div className="card-value">{summary?.total || 0}</div>
+              <div className="card-label">耗材种类</div>
+            </div>
+          </div>
         </StatsCard>
 
         <StatsCard
@@ -980,18 +1135,26 @@ const ConsumableStatistics = () => {
           $accent={designTokens.colors.warning.gradient}
           $iconBg="rgba(245, 158, 11, 0.1)"
           $iconColor={designTokens.colors.warning.main}
-          whileHover={{ y: -4 }}
+          $iconShadow="rgba(245, 158, 11, 0.2)"
+          $borderColor={designTokens.colors.warning.main}
+          whileHover={{ y: -6 }}
         >
-          <div className="card-icon"><WarningOutlined /></div>
+          <div className="card-content">
-          <div className="card-value" style={{ color: designTokens.colors.warning.main }}>
+            <div className="card-header">
-            {summary?.lowStock || 0}
+              <div className="card-icon"><WarningOutlined /></div>
-          </div>
+              {summary?.lowStock > 0 && (
-          <div className="card-label">库存预警</div>
+                <div className="card-trend down">
-          {summary?.lowStock > 0 && (
+                  <ExclamationCircleOutlined /> 需关注
-            <div className="card-trend down">
+                </div>
-              <ExclamationCircleOutlined /> 需关注
+              )}
             </div>
-          )}
+            <div className="card-body">
+              <div className="card-value" style={{ color: designTokens.colors.warning.main }}>
+                {summary?.lowStock || 0}
+              </div>
+              <div className="card-label">库存预警</div>
+            </div>
+          </div>
         </StatsCard>
 
         <StatsCard
@@ -999,13 +1162,24 @@ const ConsumableStatistics = () => {
           $accent={designTokens.colors.success.gradient}
           $iconBg="rgba(16, 185, 129, 0.1)"
           $iconColor={designTokens.colors.success.main}
-          whileHover={{ y: -4 }}
+          $iconShadow="rgba(16, 185, 129, 0.2)"
+          $borderColor={designTokens.colors.success.main}
+          whileHover={{ y: -6 }}
         >
-          <div className="card-icon"><ArrowDownOutlined /></div>
+          <div className="card-content">
-          <div className="card-value" style={{ color: designTokens.colors.success.main }}>
+            <div className="card-header">
-            {stats?.inQuantity || 0}
+              <div className="card-icon"><ArrowDownOutlined /></div>
+              <div className="card-trend up">
+                <RiseOutlined /> 入库
+              </div>
+            </div>
+            <div className="card-body">
+              <div className="card-value" style={{ color: designTokens.colors.success.main }}>
+                {stats?.inQuantity || 0}
+              </div>
+              <div className="card-label">期间入库</div>
+            </div>
           </div>
-          <div className="card-label">期间入库</div>
         </StatsCard>
 
         <StatsCard
@@ -1013,13 +1187,24 @@ const ConsumableStatistics = () => {
           $accent={designTokens.colors.secondary.gradient}
           $iconBg="rgba(236, 72, 153, 0.1)"
           $iconColor={designTokens.colors.secondary.main}
-          whileHover={{ y: -4 }}
+          $iconShadow="rgba(236, 72, 153, 0.2)"
+          $borderColor={designTokens.colors.secondary.main}
+          whileHover={{ y: -6 }}
         >
-          <div className="card-icon"><ArrowUpOutlined /></div>
+          <div className="card-content">
-          <div className="card-value" style={{ color: designTokens.colors.secondary.main }}>
+            <div className="card-header">
-            {stats?.outQuantity || 0}
+              <div className="card-icon"><ArrowUpOutlined /></div>
+              <div className="card-trend neutral">
+                <FallOutlined /> 出库
+              </div>
+            </div>
+            <div className="card-body">
+              <div className="card-value" style={{ color: designTokens.colors.secondary.main }}>
+                {stats?.outQuantity || 0}
+              </div>
+              <div className="card-label">期间出库</div>
+            </div>
           </div>
-          <div className="card-label">期间出库</div>
         </StatsCard>
       </StatsGrid>
 
@@ -1055,32 +1240,38 @@ const ConsumableStatistics = () => {
                 <div className="item-sub">共 <strong>{stats?.outQuantity || 0}</strong> 件</div>
               </ComparisonItem>
             </InOutComparison>
-            <div style={{ 
+            <motion.div
-              marginTop: 20, 
+              initial={{ opacity: 0, y: 10 }}
-              padding: '16px', 
+              animate={{ opacity: 1, y: 0 }}
-              background: netQuantity >= 0 ? 'rgba(16, 185, 129, 0.06)' : 'rgba(239, 68, 68, 0.06)',
+              transition={{ delay: 0.2 }}
-              borderRadius: 12,
+              style={{ 
-              display: 'flex',
+                marginTop: 20, 
-              alignItems: 'center',
+                padding: '18px 24px', 
-              justifyContent: 'center',
+                background: `linear-gradient(135deg, ${netQuantity >= 0 ? 'rgba(16, 185, 129, 0.08)' : 'rgba(239, 68, 68, 0.08)'} 0%, ${netQuantity >= 0 ? 'rgba(5, 150, 105, 0.04)' : 'rgba(185, 28, 28, 0.04)'} 100%)`,
-              gap: 8,
+                borderRadius: 14,
-            }}>
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 12,
+                border: `1px solid ${netQuantity >= 0 ? 'rgba(16, 185, 129, 0.2)' : 'rgba(239, 68, 68, 0.2)'}`,
+              }}
+            >
               {netQuantity >= 0 ? (
                 <>
-                  <RiseOutlined style={{ color: designTokens.colors.success.main, fontSize: 18 }} />
+                  <RiseOutlined style={{ color: designTokens.colors.success.main, fontSize: 20 }} />
-                  <Text style={{ color: designTokens.colors.success.main, fontWeight: 600 }}>
+                  <Text style={{ color: designTokens.colors.success.main, fontWeight: 600, fontSize: 15 }}>
                     净入库 +{netQuantity} 件
                   </Text>
                 </>
               ) : (
                 <>
-                  <FallOutlined style={{ color: designTokens.colors.error.main, fontSize: 18 }} />
+                  <FallOutlined style={{ color: designTokens.colors.error.main, fontSize: 20 }} />
-                  <Text style={{ color: designTokens.colors.error.main, fontWeight: 600 }}>
+                  <Text style={{ color: designTokens.colors.error.main, fontWeight: 600, fontSize: 15 }}>
-                    净出库 {netQuantity} 件
+                    净出库 {Math.abs(netQuantity)} 件
                   </Text>
                 </>
               )}
-            </div>
+            </motion.div>
           </div>
         </BentoCard>
 
@@ -1132,10 +1323,23 @@ const ConsumableStatistics = () => {
               <div className="header-icon"><ExclamationCircleOutlined /></div>
               <span className="header-title">库存预警</span>
             </div>
-            <Badge
+            {lowStockItems.length > 0 ? (
-              count={lowStockItems.length}
+              <Badge
-              style={{ backgroundColor: designTokens.colors.warning.main }}
+                count={lowStockItems.length}
-            />
+                style={{ backgroundColor: designTokens.colors.warning.main }}
+              />
+            ) : (
+              <span style={{ 
+                fontSize: 12, 
+                color: designTokens.colors.success.main,
+                fontWeight: 500,
+                padding: '4px 10px',
+                background: 'rgba(16, 185, 129, 0.1)',
+                borderRadius: 8
+              }}>
+                全部充足
+              </span>
+            )}
           </div>
           <div className="card-body" style={{ padding: 0 }}>
             <StyledTable

frontend/src/pages/DeviceManagement.jsx

@@ -87,6 +87,8 @@ function DeviceManagement() {
   const [keyword, setKeyword] = useState('');
   const [status, setStatus] = useState('all');
   const [type, setType] = useState('all');
+  const [roomId, setRoomId] = useState('all');
+  const [rackId, setRackId] = useState('all');
   const [searchForm] = Form.useForm();
 
   const [pagination, setPagination] = useState({
@@ -133,6 +135,8 @@ function DeviceManagement() {
           keyword: debouncedKeyword || undefined,
           status: status !== 'all' ? status : undefined,
           type: type !== 'all' ? type : undefined,
+          roomId: roomId !== 'all' ? roomId : undefined,
+          rackId: rackId !== 'all' ? rackId : undefined,
         };
 
         const response = await axios.get('/api/devices', { params });
@@ -149,7 +153,7 @@ function DeviceManagement() {
         setLoading(false);
       }
     },
-    [debouncedKeyword, status, type]
+    [debouncedKeyword, status, type, roomId, rackId]
   );
 
   const fetchDeviceFields = async () => {
@@ -271,6 +275,8 @@ function DeviceManagement() {
     setKeyword(values.keyword || '');
     setStatus(values.status || 'all');
     setType(values.type || 'all');
+    setRoomId(values.roomId || 'all');
+    setRackId(values.rackId || 'all');
 
     setPagination((prev) => ({ ...prev, current: 1 }));
 
@@ -283,6 +289,8 @@ function DeviceManagement() {
     setKeyword('');
     setStatus('all');
     setType('all');
+    setRoomId('all');
+    setRackId('all');
     searchForm.resetFields();
 
     setTimeout(() => setSearching(false), 300);
@@ -919,6 +927,43 @@ function DeviceManagement() {
             </Select>
           </Form.Item>
 
+          <Form.Item name="roomId" style={{ margin: 0 }}>
+            <Select
+              value={roomId}
+              onChange={(value) => {
+                setRoomId(value);
+                setRackId('all');
+              }}
+              style={{ width: '140px', borderRadius: designTokens.borderRadius.medium }}
+            >
+              <Option value="all">所有机房</Option>
+              {rooms.map((room) => (
+                <Option key={room.roomId} value={room.roomId}>
+                  {room.name}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+
+          <Form.Item name="rackId" style={{ margin: 0 }}>
+            <Select
+              value={rackId}
+              onChange={setRackId}
+              style={{ width: '140px', borderRadius: designTokens.borderRadius.medium }}
+              showSearch
+              optionFilterProp="children"
+            >
+              <Option value="all">所有机柜</Option>
+              {racks
+                .filter((rack) => roomId === 'all' || rack.roomId === roomId)
+                .map((rack) => (
+                  <Option key={rack.rackId} value={rack.rackId}>
+                    {rack.name}
+                  </Option>
+                ))}
+            </Select>
+          </Form.Item>
+
           <Form.Item style={{ margin: 0 }}>
             <Space>
               <Button

frontend/src/pages/Rack3DVisualization.jsx

@@ -18,6 +18,8 @@ import {
   DatePicker,
   Checkbox,
   Switch,
+  Tooltip,
+  Badge,
 } from 'antd';
 import {
   CloudServerOutlined,
@@ -30,6 +32,8 @@ import {
   SettingOutlined,
   FullscreenOutlined,
   EyeOutlined,
+  LeftOutlined,
+  RightOutlined,
 } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
@@ -74,7 +78,7 @@ const Rack3DVisualization = () => {
 
   const [selectedRoom, setSelectedRoom] = useState(null);
   const [loading, setLoading] = useState(false);
-  const [isRackInfoCollapsed, setIsRackInfoCollapsed] = useState(false); // Rack Info Card collapsed state
+  const [isRackInfoCollapsed, setIsRackInfoCollapsed] = useState(false);
 
   // Edit Modal State
   const [modalVisible, setModalVisible] = useState(false);
@@ -343,7 +347,7 @@ const Rack3DVisualization = () => {
   useEffect(() => {
     if (selectedRack?.rackId) {
       fetchDevices(selectedRack.rackId);
-      setSelectedDevice(null); // Reset selection on rack change
+      setSelectedDevice(null);
     }
   }, [selectedRack, fetchDevices]);
 
@@ -361,6 +365,40 @@ const Rack3DVisualization = () => {
     return Array.from(roomMap.values());
   }, [racks]);
 
+  // 计算机柜统计数据的 useMemo
+  const rackStats = useMemo(() => {
+    if (!selectedRack || !devices.length) {
+      return {
+        usedU: 0,
+        usagePercent: 0,
+        totalPower: 0,
+        availableU: selectedRack?.height || 0,
+      };
+    }
+
+    // 计算已用U位（考虑设备高度）
+    const usedU = devices.reduce((sum, device) => sum + (device.height || 1), 0);
+    
+    // 计算总功率
+    const totalPower = devices.reduce((sum, device) => {
+      const power = parseFloat(device.powerConsumption) || 0;
+      return sum + power;
+    }, 0);
+
+    // 机柜总高度
+    const totalHeight = selectedRack.height || 45;
+    
+    // 可用U位
+    const availableU = totalHeight - usedU;
+
+    return {
+      usedU,
+      usagePercent: totalHeight > 0 ? Math.round((usedU / totalHeight) * 100) : 0,
+      totalPower,
+      availableU,
+    };
+  }, [selectedRack, devices]);
+
   const racksInSelectedRoom = useMemo(() => {
     if (!selectedRoom) return [];
     return racks.filter(r => {
@@ -444,6 +482,20 @@ const Rack3DVisualization = () => {
     [selectedDevice, fetchDeviceCables]
   );
 
+  const handlePrevRack = () => {
+    if (racksInSelectedRoom.length <= 1) return;
+    const currentIndex = racksInSelectedRoom.findIndex(r => r.rackId === selectedRack?.rackId);
+    const prevIndex = currentIndex > 0 ? currentIndex - 1 : racksInSelectedRoom.length - 1;
+    setSelectedRack(racksInSelectedRoom[prevIndex]);
+  };
+
+  const handleNextRack = () => {
+    if (racksInSelectedRoom.length <= 1) return;
+    const currentIndex = racksInSelectedRoom.findIndex(r => r.rackId === selectedRack?.rackId);
+    const nextIndex = currentIndex < racksInSelectedRoom.length - 1 ? currentIndex + 1 : 0;
+    setSelectedRack(racksInSelectedRoom[nextIndex]);
+  };
+
   return (
     <Layout
       style={{ height: '100vh', overflow: 'hidden', background: '#000', position: 'relative' }}
@@ -468,7 +520,7 @@ const Rack3DVisualization = () => {
             type="text"
             icon={<ArrowLeftOutlined style={{ color: 'rgba(255,255,255,0.8)' }} />}
             onClick={() => navigate('/')}
-            style={{ marginRight: 16 }}
+            style={{ marginRight: 8 }}
             className="hover-bright"
           />
           <div
@@ -499,7 +551,7 @@ const Rack3DVisualization = () => {
         </div>
         <Space size="middle">
           <Select
-            placeholder="选择机房"
+            placeholder="搜索机房"
             style={{ width: 180 }}
             value={selectedRoom}
             onChange={val => {
@@ -513,6 +565,10 @@ const Rack3DVisualization = () => {
             variant="borderless"
             popupMatchSelectWidth={false}
             className="glass-select"
+            showSearch
+            filterOption={(input, option) =>
+              (option?.children?.toString() || '').toLowerCase().includes(input.toLowerCase())
+            }
           >
             {rooms.map(room => (
               <Option key={room.key} value={room.key}>
@@ -520,14 +576,29 @@ const Rack3DVisualization = () => {
               </Option>
             ))}
           </Select>
+          <Button
+            type="text"
+            icon={<LeftOutlined />}
+            onClick={handlePrevRack}
+            disabled={!selectedRoom || racksInSelectedRoom.length <= 1}
+            className="hover-bright"
+            style={{
+              color: 'rgba(255,255,255,0.9)',
+              borderRadius: '6px',
+            }}
+          />
           <Select
-            placeholder="选择机柜"
+            placeholder="搜索机柜"
             style={{ width: 180 }}
             value={selectedRack?.rackId}
             onChange={val => setSelectedRack(racks.find(r => r.rackId === val))}
             disabled={!selectedRoom}
             variant="borderless"
             className="glass-select"
+            showSearch
+            filterOption={(input, option) =>
+              (option?.children?.toString() || '').toLowerCase().includes(input.toLowerCase())
+            }
           >
             {racksInSelectedRoom.map(rack => (
               <Option key={rack.rackId} value={rack.rackId}>
@@ -535,6 +606,17 @@ const Rack3DVisualization = () => {
               </Option>
             ))}
           </Select>
+          <Button
+            type="text"
+            icon={<RightOutlined />}
+            onClick={handleNextRack}
+            disabled={!selectedRoom || racksInSelectedRoom.length <= 1}
+            className="hover-bright"
+            style={{
+              color: 'rgba(255,255,255,0.9)',
+              borderRadius: '6px',
+            }}
+          />
           <Button
             type="primary"
             ghost
@@ -625,19 +707,100 @@ const Rack3DVisualization = () => {
             border: 1px solid rgba(255, 255, 255, 0.1) !important;
             color: white !important;
             border-radius: 6px !important;
-            transition: all 0.3s;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            padding: 4px 12px !important;
+            height: auto !important;
+            min-height: 32px !important;
+            align-items: center !important;
         }
         .glass-select:hover .ant-select-selector {
             background: rgba(255, 255, 255, 0.15) !important;
             border-color: rgba(255, 255, 255, 0.3) !important;
         }
+        .glass-select.ant-select-focused .ant-select-selector {
+            background: rgba(255, 255, 255, 0.12) !important;
+            border-color: #3b82f6 !important;
+            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15), 0 0 12px rgba(59, 130, 246, 0.1) !important;
+        }
         .glass-select .ant-select-selection-item, 
         .glass-select .ant-select-selection-placeholder {
             color: rgba(255, 255, 255, 0.9) !important;
-            font-size: 13px;
+            font-size: 13px !important;
+            line-height: 1.5 !important;
+            white-space: nowrap !important;
+            overflow: hidden !important;
+            text-overflow: ellipsis !important;
+            position: relative !important;
+            z-index: 1 !important;
+            flex: 0 1 auto !important;
+        }
+        .glass-select.ant-select-show-search .ant-select-selection-item,
+        .glass-select.ant-select-show-search .ant-select-selection-placeholder {
+            position: absolute !important;
+            left: 0 !important;
+            top: 50% !important;
+            transform: translateY(-50%) !important;
+            width: 100% !important;
+            padding-right: 24px !important;
+        }
+        .glass-select.ant-select-show-search.ant-select-focused .ant-select-selection-item,
+        .glass-select.ant-select-show-search.ant-select-focused .ant-select-selection-placeholder {
+            display: none !important;
+        }
+        .glass-select .ant-select-selection-wrap {
+            display: flex !important;
+            flex-wrap: nowrap !important;
+            align-items: center !important;
+            white-space: nowrap !important;
+            overflow: hidden !important;
+            max-width: calc(100% - 24px) !important;
+        }
+        .glass-select .ant-select-selection-search {
+            position: absolute !important;
+            left: 0 !important;
+            top: 50% !important;
+            transform: translateY(-50%) !important;
+            width: 100% !important;
+            z-index: 2 !important;
+            display: flex !important;
+            align-items: center !important;
+        }
+        .glass-select .ant-select-selection-search-input {
+            width: 100% !important;
+            min-width: 0 !important;
+            color: white !important;
+            caret-color: #3b82f6 !important;
+            font-size: 13px !important;
+            background: transparent !important;
+            border: none !important;
+            outline: none !important;
+            padding: 0 !important;
+        }
+        .glass-select .ant-select-selection-search-input::placeholder {
+            color: rgba(255, 255, 255, 0.5) !important;
         }
         .glass-select .ant-select-arrow {
             color: rgba(255, 255, 255, 0.6) !important;
+            transition: all 0.3s;
+            position: relative !important;
+            z-index: 1 !important;
+        }
+        .glass-select.ant-select-focused .ant-select-arrow {
+            color: #60a5fa !important;
+            transform: translateY(-50%) scale(1.1);
+        }
+        .glass-select input {
+            color: white !important;
+            caret-color: #3b82f6 !important;
+            font-size: 13px !important;
+            width: 100% !important;
+            min-width: 0 !important;
+        }
+        .glass-select input::placeholder {
+            color: rgba(255, 255, 255, 0.5) !important;
+        }
+        .glass-select.ant-select-open input {
+            caret-color: #60a5fa !important;
         }
         .hover-bright:hover {
             color: white !important;
@@ -645,7 +808,8 @@ const Rack3DVisualization = () => {
         }
       `}</style>
 
-      <Layout>
+      <Layout style={{ marginTop: 64 }}>
+
         <Content style={{ position: 'relative', background: '#ffffff' }}>
           {loading ? (
             <div
@@ -679,17 +843,17 @@ const Rack3DVisualization = () => {
                 <div
                   style={{
                     position: 'absolute',
-                    top: 88, // Moved down to avoid header overlap
+                    top: 88,
-                    left: 24,
+                    right: 24,
-                    background: 'rgba(255, 255, 255, 0.85)', // Slightly more transparent
+                    background: 'linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%)',
-                    backdropFilter: 'blur(12px)',
+                    backdropFilter: 'blur(16px)',
-                    padding: isRackInfoCollapsed ? '12px 16px' : '20px',
+                    padding: isRackInfoCollapsed ? '14px 18px' : '20px',
-                    borderRadius: '16px',
+                    borderRadius: '20px',
-                    boxShadow: '0 8px 32px rgba(0, 0, 0, 0.08)', // Softer, deeper shadow
+                    boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05)',
-                    width: isRackInfoCollapsed ? 'auto' : '280px',
+                    width: isRackInfoCollapsed ? 'auto' : '300px',
                     zIndex: 5,
-                    border: '1px solid rgba(255, 255, 255, 0.6)',
+                    border: '1px solid rgba(255, 255, 255, 0.08)',
-                    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                    transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
                     overflow: 'hidden',
                     cursor: isRackInfoCollapsed ? 'pointer' : 'default',
                   }}
@@ -700,48 +864,67 @@ const Rack3DVisualization = () => {
                     style={{
                       display: 'flex',
                       alignItems: 'center',
-                      marginBottom: isRackInfoCollapsed ? 0 : 16,
+                      marginBottom: isRackInfoCollapsed ? 0 : 20,
                       justifyContent: 'space-between',
                     }}
                   >
-                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                    <div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
                       <div
                         style={{
-                          width: 36,
+                          width: 44,
-                          height: 36,
+                          height: 44,
                           background: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
-                          borderRadius: '10px',
+                          borderRadius: '12px',
                           display: 'flex',
                           alignItems: 'center',
                           justifyContent: 'center',
-                          marginRight: 12,
+                          marginRight: 14,
-                          boxShadow: '0 4px 12px rgba(59, 130, 246, 0.3)',
+                          boxShadow: '0 6px 20px rgba(59, 130, 246, 0.4)',
                           flexShrink: 0,
-                        }}
+                          position: 'relative',
-                      >
-                        <CloudServerOutlined style={{ color: 'white', fontSize: 18 }} />
-                      </div>
-                      <div
-                        style={{
-                          opacity: isRackInfoCollapsed ? 0 : 1,
-                          width: isRackInfoCollapsed ? 0 : 'auto',
-                          transition: 'opacity 0.2s',
-                          whiteSpace: 'nowrap',
                           overflow: 'hidden',
                         }}
                       >
                         <div
                           style={{
-                            fontSize: '16px',
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            right: 0,
+                            height: '50%',
+                            background: 'linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 100%)',
+                          }}
+                        />
+                        <CloudServerOutlined style={{ color: 'white', fontSize: 22, position: 'relative', zIndex: 1 }} />
+                      </div>
+                      <div
+                        style={{
+                          opacity: isRackInfoCollapsed ? 0 : 1,
+                          width: isRackInfoCollapsed ? 0 : 'auto',
+                          transition: 'opacity 0.3s',
+                          overflow: 'hidden',
+                          flex: 1,
+                        }}
+                      >
+                        <div
+                          style={{
+                            fontSize: '18px',
                             fontWeight: 700,
-                            color: '#1e293b',
+                            color: '#f8fafc',
                             lineHeight: 1.2,
+                            letterSpacing: '0.3px',
                           }}
                         >
                           {selectedRack.name}
                         </div>
-                        <div style={{ fontSize: '12px', color: '#64748b', marginTop: 2 }}>
+                        <div style={{ 
-                          ID: {selectedRack.rackId}
+                          fontSize: '12px', 
+                          color: 'rgba(148, 163, 184, 0.8)', 
+                          marginTop: 4,
+                          fontFamily: 'monospace',
+                          letterSpacing: '0.5px',
+                        }}>
+                          #{selectedRack.rackId}
                         </div>
                       </div>
                     </div>
@@ -754,16 +937,26 @@ const Rack3DVisualization = () => {
                         e.stopPropagation();
                         setIsRackInfoCollapsed(!isRackInfoCollapsed);
                       }}
-                      style={{ color: '#94a3b8', marginLeft: isRackInfoCollapsed ? 8 : 0 }}
+                      style={{ 
+                        color: 'rgba(148, 163, 184, 0.7)',
+                        marginLeft: isRackInfoCollapsed ? 0 : 8,
+                        width: isRackInfoCollapsed ? 44 : 32,
+                        height: isRackInfoCollapsed ? 44 : 32,
+                        borderRadius: isRackInfoCollapsed ? 12 : 8,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        transition: 'all 0.3s',
+                      }}
                     />
                   </div>
 
                   {/* Content Area - Collapsible */}
                   <div
                     style={{
-                      maxHeight: isRackInfoCollapsed ? 0 : '500px',
+                      maxHeight: isRackInfoCollapsed ? 0 : '600px',
                       opacity: isRackInfoCollapsed ? 0 : 1,
-                      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                      transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
                       overflow: 'hidden',
                     }}
                   >
@@ -771,87 +964,171 @@ const Rack3DVisualization = () => {
                     <div
                       style={{
                         display: 'grid',
-                        gridTemplateColumns: '1fr 1fr',
+                        gridTemplateColumns: 'repeat(3, 1fr)',
-                        gap: 12,
+                        gap: 10,
                         marginBottom: 16,
                       }}
                     >
                       <div
                         style={{
-                          background: 'rgba(241, 245, 249, 0.6)',
+                          background: 'rgba(59, 130, 246, 0.1)',
-                          padding: '10px',
+                          border: '1px solid rgba(59, 130, 246, 0.2)',
-                          borderRadius: '10px',
+                          padding: '12px 10px',
+                          borderRadius: '12px',
+                          textAlign: 'center',
                         }}
                       >
-                        <div style={{ fontSize: '12px', color: '#64748b', marginBottom: 2 }}>
+                        <div style={{ fontSize: '22px', fontWeight: 700, color: '#60a5fa', lineHeight: 1 }}>
-                          总高度
-                        </div>
-                        <div style={{ fontSize: '18px', fontWeight: 600, color: '#0f172a' }}>
                           {selectedRack.height}
-                          <span style={{ fontSize: '12px', fontWeight: 400, marginLeft: 2 }}>
+                        </div>
-                            U
+                        <div style={{ fontSize: '10px', color: 'rgba(148, 163, 184, 0.7)', marginTop: 4, fontWeight: 500 }}>
-                          </span>
+                          总高度
                         </div>
                       </div>
                       <div
                         style={{
-                          background: 'rgba(241, 245, 249, 0.6)',
+                          background: 'rgba(16, 185, 129, 0.1)',
-                          padding: '10px',
+                          border: '1px solid rgba(16, 185, 129, 0.2)',
-                          borderRadius: '10px',
+                          padding: '12px 10px',
+                          borderRadius: '12px',
+                          textAlign: 'center',
                         }}
                       >
-                        <div style={{ fontSize: '12px', color: '#64748b', marginBottom: 2 }}>
+                        <div style={{ fontSize: '22px', fontWeight: 700, color: '#34d399', lineHeight: 1 }}>
+                          {devices.length}
+                        </div>
+                        <div style={{ fontSize: '10px', color: 'rgba(148, 163, 184, 0.7)', marginTop: 4, fontWeight: 500 }}>
                           设备数
                         </div>
-                        <div style={{ fontSize: '18px', fontWeight: 600, color: '#3b82f6' }}>
+                      </div>
-                          {devices.length}
+                      <div
-                          <span style={{ fontSize: '12px', fontWeight: 400, marginLeft: 2 }}>
+                        style={{
-                            台
+                          background: 'rgba(245, 158, 11, 0.1)',
-                          </span>
+                          border: '1px solid rgba(245, 158, 11, 0.2)',
+                          padding: '12px 10px',
+                          borderRadius: '12px',
+                          textAlign: 'center',
+                        }}
+                      >
+                        <div style={{ fontSize: '22px', fontWeight: 700, color: '#fbbf24', lineHeight: 1 }}>
+                          {Math.round((devices.length / selectedRack.height) * 100)}%
+                        </div>
+                        <div style={{ fontSize: '10px', color: 'rgba(148, 163, 184, 0.7)', marginTop: 4, fontWeight: 500 }}>
+                          负载率
                         </div>
                       </div>
                     </div>
 
+                    {/* Status Indicators */}
+                    <div
+                      style={{
+                        background: 'rgba(255, 255, 255, 0.03)',
+                        border: '1px solid rgba(255, 255, 255, 0.06)',
+                        borderRadius: '12px',
+                        padding: '14px',
+                        marginBottom: 16,
+                      }}
+                    >
+                      <div style={{ fontSize: '11px', color: 'rgba(148, 163, 184, 0.6)', marginBottom: 12, fontWeight: 600, letterSpacing: '0.5px', textTransform: 'uppercase' }}>
+                        资源监控
+                      </div>
+                      {[
+                        { 
+                          label: 'U位使用', 
+                          value: `${rackStats.usedU}U / ${selectedRack.height}U`, 
+                          status: rackStats.usagePercent > 80 ? 'warning' : 'normal', 
+                          icon: '📊',
+                          subValue: `剩余 ${rackStats.availableU}U`,
+                        },
+                        { 
+                          label: '总功率', 
+                          value: `${rackStats.totalPower.toFixed(1)}kW`, 
+                          status: 'normal', 
+                          icon: '⚡',
+                          subValue: '当前负载',
+                        },
+                        { 
+                          label: '设备数', 
+                          value: `${devices.length} 台`, 
+                          status: 'normal', 
+                          icon: '🖥️',
+                          subValue: `负载率 ${rackStats.usagePercent}%`,
+                        },
+                      ].map((item, i) => (
+                        <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: i < 2 ? 12 : 0 }}>
+                          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                            <span style={{ fontSize: 16 }}>{item.icon}</span>
+                            <div>
+                              <div style={{ fontSize: '13px', color: 'rgba(226, 232, 240, 0.9)', fontWeight: 500 }}>{item.label}</div>
+                              <div style={{ fontSize: '11px', color: 'rgba(148, 163, 184, 0.6)', marginTop: 2 }}>{item.subValue}</div>
+                            </div>
+                          </div>
+                          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                            <span style={{ fontSize: '14px', fontWeight: 700, color: '#f8fafc' }}>{item.value}</span>
+                            <div style={{
+                              width: 8,
+                              height: 8,
+                              borderRadius: '50%',
+                              background: item.status === 'normal' ? '#10b981' : '#f59e0b',
+                              boxShadow: `0 0 8px ${item.status === 'normal' ? 'rgba(16, 185, 129, 0.6)' : 'rgba(245, 158, 11, 0.6)'}`,
+                            }} />
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+
                     {/* Guide Section */}
                     <div
                       style={{
-                        marginTop: 16,
+                        background: 'rgba(59, 130, 246, 0.05)',
-                        paddingTop: 16,
+                        border: '1px solid rgba(59, 130, 246, 0.1)',
-                        borderTop: '1px solid rgba(0,0,0,0.06)',
+                        borderRadius: '12px',
+                        padding: '14px',
                       }}
                     >
                       <div
                         style={{
-                          fontSize: '12px',
+                          fontSize: '11px',
                           fontWeight: 600,
-                          color: '#94a3b8',
+                          color: 'rgba(148, 163, 184, 0.6)',
-                          marginBottom: 8,
+                          marginBottom: 10,
                           display: 'flex',
                           alignItems: 'center',
+                          letterSpacing: '0.5px',
+                          textTransform: 'uppercase',
                         }}
                       >
-                        <InfoCircleOutlined style={{ marginRight: 6 }} /> 操作指南
+                        <InfoCircleOutlined style={{ marginRight: 6, fontSize: 12 }} /> 操作指南
                       </div>
-                      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                         {[
-                          { icon: '🖱️', text: '左键旋转视图' },
+                          { icon: '🖱️', text: '左键旋转视图', color: '#3b82f6' },
-                          { icon: '🔍', text: '滚轮缩放视图' },
+                          { icon: '🔍', text: '滚轮缩放视图', color: '#8b5cf6' },
-                          { icon: '👆', text: '点击设备查看详情' },
+                          { icon: '👆', text: '点击设备查看详情', color: '#10b981' },
                         ].map((item, i) => (
                           <div
                             key={i}
                             style={{
                               fontSize: '12px',
-                              color: '#475569',
+                              color: 'rgba(226, 232, 240, 0.8)',
                               display: 'flex',
                               alignItems: 'center',
-                              background: 'rgba(255,255,255,0.5)',
+                              gap: 10,
-                              padding: '4px 8px',
+                              padding: '8px 10px',
-                              borderRadius: '6px',
+                              background: 'rgba(255, 255, 255, 0.02)',
+                              borderRadius: '8px',
+                              transition: 'all 0.2s',
                             }}
                           >
-                            <span style={{ marginRight: 8, opacity: 0.8 }}>{item.icon}</span>
+                            <span style={{ fontSize: 14 }}>{item.icon}</span>
-                            {item.text}
+                            <span style={{ flex: 1 }}>{item.text}</span>
+                            <div style={{
+                              width: 4,
+                              height: 4,
+                              borderRadius: '50%',
+                              background: item.color,
+                              boxShadow: `0 0 6px ${item.color}`,
+                            }} />
                           </div>
                         ))}
                       </div>