feat： 设备管理页面优化

frontend/src/components/shared/SummaryStatCards/SummaryStatCards.css

@@ -1,4 +1,8 @@
 .summary-stat-cards {
+  --summary-stat-columns: 4;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
   flex-shrink: 0;
   min-width: 0;
 }
@@ -36,3 +40,15 @@
   align-items: center;
   line-height: 1;
 }
+
+@media (min-width: 576px) {
+  .summary-stat-cards {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1200px) {
+  .summary-stat-cards {
+    grid-template-columns: repeat(var(--summary-stat-columns), minmax(0, 1fr));
+  }
+}

frontend/src/components/shared/SummaryStatCards/index.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties, ReactNode } from "react";
-import { Card, Col, Row, Statistic } from "antd";
+import { Card, Statistic } from "antd";
 import "./SummaryStatCards.css";
 
 export interface SummaryStatCardItem {
@@ -16,26 +16,28 @@ interface SummaryStatCardsProps {
 }
 
 export default function SummaryStatCards({ items, ariaLabel }: SummaryStatCardsProps) {
+  const columns = Math.max(items.length, 1);
+
   return (
-    <div className="summary-stat-cards" aria-label={ariaLabel}>
-      <Row gutter={[16, 16]}>
-        {items.map((item) => (
-          <Col xs={24} sm={12} xl={6} key={item.key}>
-            <Card className="summary-stat-cards__card" variant="borderless">
-              <Statistic
-                title={<span className="summary-stat-cards__label">{item.label}</span>}
-                value={item.value}
-                valueStyle={{ color: item.color, fontWeight: 700 } as CSSProperties}
-                prefix={
-                  <span className="summary-stat-cards__icon" style={{ color: item.color }}>
-                    {item.icon}
-                  </span>
-                }
-              />
-            </Card>
-          </Col>
-        ))}
-      </Row>
+    <div
+      className="summary-stat-cards"
+      style={{ "--summary-stat-columns": columns } as CSSProperties}
+      aria-label={ariaLabel}
+    >
+      {items.map((item) => (
+        <Card className="summary-stat-cards__card" variant="borderless" key={item.key}>
+          <Statistic
+            title={<span className="summary-stat-cards__label">{item.label}</span>}
+            value={item.value}
+            valueStyle={{ color: item.color, fontWeight: 700 } as CSSProperties}
+            prefix={
+              <span className="summary-stat-cards__icon" style={{ color: item.color }}>
+                {item.icon}
+              </span>
+            }
+          />
+        </Card>
+      ))}
     </div>
   );
 }