From 5dd3c4ff1c4178c38846d095be4d84155e85bdc3 Mon Sep 17 00:00:00 2001
From: sinohqb <huangqiaobin2012@gmail.com>
Date: Wed, 29 Jul 2026 15:26:38 +0800
Subject: [PATCH] style(dashboard): redesign stat cards with fixed-height
 compact layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

累计执行卡片的“/ 今日 N”后缀按数值字号渲染导致换行、卡片高度不一。
StatCard 改为紧凑三行固定高度布局（标题/数值/副行），今日次数移到
副行小字显示，六张卡片高度一致。
---
 frontend/web/src/components/StatCard.tsx | 37 ++++++++++++++++++------
 frontend/web/src/pages/Home.tsx          |  2 +-
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/frontend/web/src/components/StatCard.tsx b/frontend/web/src/components/StatCard.tsx
index 9aa4be4..9de7f29 100644
--- a/frontend/web/src/components/StatCard.tsx
+++ b/frontend/web/src/components/StatCard.tsx
@@ -1,5 +1,5 @@
-import { Card, Statistic } from 'antd'
-import type { ReactNode } from 'react'
+import { Card } from 'antd'
+import type { CSSProperties, ReactNode } from 'react'
 
 type Color = 'blue' | 'green' | 'orange' | 'purple' | 'red'
 
@@ -18,23 +18,42 @@ interface StatCardProps {
   value: number | string
   suffix?: string
   precision?: number
-  valueStyle?: React.CSSProperties
+  valueStyle?: CSSProperties
+  subText?: string
 }
 
-export default function StatCard({ icon, color = 'blue', title, value, suffix, precision, valueStyle }: StatCardProps) {
+export default function StatCard({ icon, color = 'blue', title, value, suffix, precision, valueStyle, subText }: StatCardProps) {
   const c = colorMap[color]
+  const display = typeof value === 'number' && precision != null ? value.toFixed(precision) : value
   return (
-    <Card>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+    <Card styles={{ body: { padding: '14px 16px' } }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
         <div style={{
-          width: 48, height: 48, borderRadius: 10,
+          width: 42, height: 42, borderRadius: 10,
           background: c.bg,
           display: 'flex', alignItems: 'center', justifyContent: 'center',
           flexShrink: 0,
         }}>
-          <span style={{ fontSize: 22, color: c.color, display: 'flex' }}>{icon}</span>
+          <span style={{ fontSize: 20, color: c.color, display: 'flex' }}>{icon}</span>
+        </div>
+        <div style={{ minWidth: 0, flex: 1 }}>
+          <div style={{
+            fontSize: 12, color: 'rgba(0,0,0,0.45)', lineHeight: '18px',
+            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
+          }}>
+            {title}
+          </div>
+          <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, whiteSpace: 'nowrap' }}>
+            <span style={{ fontSize: 24, fontWeight: 600, lineHeight: '30px', ...valueStyle }}>{display}</span>
+            {suffix && <span style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)' }}>{suffix}</span>}
+          </div>
+          <div style={{
+            fontSize: 11, color: 'rgba(0,0,0,0.35)', lineHeight: '16px', height: 16,
+            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
+          }}>
+            {subText ?? ''}
+          </div>
         </div>
-        <Statistic title={title} value={value} suffix={suffix} precision={precision} valueStyle={valueStyle} />
       </div>
     </Card>
   )
diff --git a/frontend/web/src/pages/Home.tsx b/frontend/web/src/pages/Home.tsx
index 048a842..326b767 100644
--- a/frontend/web/src/pages/Home.tsx
+++ b/frontend/web/src/pages/Home.tsx
@@ -92,7 +92,7 @@ export default function HomePage() {
               <StatCard
                 icon={<PlayCircleOutlined />} color="orange" title="累计执行"
                 value={stats?.runs_count ?? 0}
-                suffix={stats?.today_runs ? ` / 今日 ${stats.today_runs}` : undefined}
+                subText={stats?.today_runs ? `今日 ${stats.today_runs} 次` : undefined}
               />
             </Col>
             <Col xs={12} sm={8} xl={4}>