From 9c993b6cea9a3966dc0b587503d9991ce0aa08d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 19 Jun 2026 10:22:49 +0800
Subject: [PATCH] =?UTF-8?q?feat(TextStatistics):=20=E5=BC=95=E5=85=A5=20St?=
 =?UTF-8?q?atCard=20=E7=BB=84=E4=BB=B6=E4=BB=A5=E4=BC=98=E5=8C=96=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=E4=BF=A1=E6=81=AF=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 StatCard 组件，简化统计信息的展示逻辑。
- 更新 TextStatistics 页面，使用 StatCard 组件替代原有的统计项渲染方式，提升代码可读性和维护性。
---
 .../TextStatistics/components/StatCard.tsx    | 17 +++++++++++
 src/pages/TextStatistics/index.tsx            | 29 ++++---------------
 2 files changed, 22 insertions(+), 24 deletions(-)
 create mode 100644 src/pages/TextStatistics/components/StatCard.tsx

diff --git a/src/pages/TextStatistics/components/StatCard.tsx b/src/pages/TextStatistics/components/StatCard.tsx
new file mode 100644
index 0000000..8b132c1
--- /dev/null
+++ b/src/pages/TextStatistics/components/StatCard.tsx
@@ -0,0 +1,17 @@
+interface StatCardProps {
+  label: string;
+  value: React.ReactNode;
+}
+
+export default function StatCard({ label, value }: StatCardProps) {
+  return (
+    <div className="flex flex-col justify-center items-center p-4 text-center rounded-xl border border-border bg-card shadow-sm text-card-foreground hover:-translate-y-0.5 hover:shadow-md hover:border-primary/50 focus-within:ring-1 focus-within:ring-ring">
+      <span className="text-xs font-medium text-muted-foreground tracking-wider mb-1 select-none">
+        {label}
+      </span>
+      <span className="font-mono text-lg md:text-2xl font-extrabold text-primary break-all tracking-tight leading-none tabular-nums select-all">
+        {value}
+      </span>
+    </div>
+  );
+}
diff --git a/src/pages/TextStatistics/index.tsx b/src/pages/TextStatistics/index.tsx
index 25a29b3..bfd5696 100644
--- a/src/pages/TextStatistics/index.tsx
+++ b/src/pages/TextStatistics/index.tsx
@@ -1,18 +1,11 @@
 import TextInputArea from '@/components/TextInputArea';
 import { formatBytes } from '@/utils/format';
+import StatCard from './components/StatCard';
 import { useTextStatistics } from './useTextStatistics';
-import { cn } from '@/lib/utils';
 
 export default function Index() {
   const { text, stats, setText } = useTextStatistics();
 
-  const statItems = [
-    { label: '字符数', value: stats.characters },
-    { label: '单词数', value: stats.words },
-    { label: '行数', value: stats.lines },
-    { label: '字节大小', value: formatBytes(stats.bytes) },
-  ];
-
   return (
     <div className="p-4 w-full space-y-4">
       <TextInputArea
@@ -26,22 +19,10 @@ export default function Index() {
       />
 
       <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-        {statItems.map((item) => (
-          <div
-            key={item.label}
-            className={cn(
-              'flex flex-col justify-center items-center p-4 text-center rounded-xl border border-border bg-card shadow-sm text-card-foreground',
-              'hover:-translate-y-0.5 hover:shadow-md hover:border-primary/50 focus-within:ring-1 focus-within:ring-ring',
-            )}
-          >
-            <span className="text-xs font-medium text-muted-foreground tracking-wider mb-1 select-none">
-              {item.label}
-            </span>
-            <span className="font-mono text-lg md:text-2xl font-extrabold text-primary break-all tracking-tight leading-none tabular-nums select-all">
-              {item.value}
-            </span>
-          </div>
-        ))}
+        <StatCard label="字符数" value={stats.characters} />
+        <StatCard label="单词数" value={stats.words} />
+        <StatCard label="行数" value={stats.lines} />
+        <StatCard label="字节大小" value={formatBytes(stats.bytes)} />
       </div>
     </div>
   );