feat(TextStatistics): 引入 StatCard 组件以优化统计信息展示

- 新增 StatCard 组件，简化统计信息的展示逻辑。 - 更新 TextStatistics 页面，使用 StatCard 组件替代原有的统计项渲染方式，提升代码可读性和维护性。
2026-06-19 10:22:49 +08:00
parent ca0143f3bd
commit 9c993b6cea
2 changed files with 22 additions and 24 deletions
@@ -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>
+  );
+}