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>
   );