From 0d6acd1056de60d43924d9fb7b2fa179f459ba63 Mon Sep 17 00:00:00 2001
From: puz <13060209078@163.com>
Date: Thu, 2 Jul 2026 17:49:27 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=20=E8=AE=BE=E5=A4=87=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SummaryStatCards/SummaryStatCards.css     | 16 +++++++
 .../shared/SummaryStatCards/index.tsx         | 42 ++++++++++---------
 2 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/shared/SummaryStatCards/SummaryStatCards.css b/frontend/src/components/shared/SummaryStatCards/SummaryStatCards.css
index 3f0453f..04b9388 100644
--- a/frontend/src/components/shared/SummaryStatCards/SummaryStatCards.css
+++ b/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));
+  }
+}
diff --git a/frontend/src/components/shared/SummaryStatCards/index.tsx b/frontend/src/components/shared/SummaryStatCards/index.tsx
index b1c80af..b836636 100644
--- a/frontend/src/components/shared/SummaryStatCards/index.tsx
+++ b/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>
   );
 }