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,12 +16,16 @@ 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}>
+    <div
-      <Row gutter={[16, 16]}>
+      className="summary-stat-cards"
+      style={{ "--summary-stat-columns": columns } as CSSProperties}
+      aria-label={ariaLabel}
+    >
       {items.map((item) => (
-          <Col xs={24} sm={12} xl={6} key={item.key}>
+        <Card className="summary-stat-cards__card" variant="borderless" 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}
@@ -33,9 +37,7 @@ export default function SummaryStatCards({ items, ariaLabel }: SummaryStatCardsP
             }
           />
         </Card>
-          </Col>
       ))}
-      </Row>
     </div>
   );
 }