feat(ui): 重构核心 UI 组件库，新增 shadcn/ui 组件

- 重构 Button、Card、Badge、Input、Textarea 等基础组件 - 新增 Accordion、Alert、Dialog、Dropdown、Form 等 shadcn/ui 组件 - 新增 AnimatedCounter、StatsShowcase、MetricCard 等数据展示组件 - 新增 ScrollReveal 滚动动画组件 - 重构 Toast 通知系统与 Tooltip 提示组件 - 更新设计令牌系统，对齐新品牌视觉
2026-07-07 06:52:38 +08:00
parent 9053f69123
commit e78df62cd1
62 changed files with 4024 additions and 822 deletions
@@ -0,0 +1,123 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { ArrowUpRight, ArrowDownRight } from 'lucide-react';
+import { AnimatedCounter } from '@/components/ui/animated-counter';
+import { cn } from '@/lib/utils';
+
+type TrendDirection = 'up' | 'down' | 'neutral';
+
+interface MetricCardProps {
+  icon?: ReactNode;
+  label: string;
+  value: number;
+  prefix?: string;
+  suffix?: string;
+  decimals?: number;
+  description?: string;
+  trend?: {
+    value: string;
+    direction: TrendDirection;
+    label?: string;
+  };
+  accentColor?: 'brand' | 'blue' | 'teal' | 'amber' | 'purple';
+  className?: string;
+  theme?: 'light' | 'dark';
+}
+
+const accentStyles: Record<string, string> = {
+  brand: 'text-brand bg-brand-bg',
+  blue: 'text-accent-blue bg-accent-blue/10',
+  teal: 'text-accent-teal bg-accent-teal/10',
+  amber: 'text-accent-amber bg-accent-amber/10',
+  purple: 'text-accent-purple bg-accent-purple/10',
+};
+
+const trendIcon = {
+  up: ArrowUpRight,
+  down: ArrowDownRight,
+  neutral: ArrowUpRight,
+};
+
+const trendColor: Record<TrendDirection, string> = {
+  up: 'text-success',
+  down: 'text-error',
+  neutral: 'text-text-muted',
+};
+
+export function MetricCard({
+  icon,
+  label,
+  value,
+  prefix = '',
+  suffix = '',
+  decimals = 0,
+  description,
+  trend,
+  accentColor = 'brand',
+  className,
+  theme = 'light',
+}: MetricCardProps) {
+  const TrendIcon = trend ? trendIcon[trend.direction] : null;
+  const isDark = theme === 'dark';
+
+  return (
+    <div
+      className={cn(
+        'group relative overflow-hidden rounded-sm border p-6 sm:p-7 transition-all duration-300 ease-out',
+        isDark
+          ? 'bg-ink/50 border-white/[0.08] hover:border-white/20 hover:bg-ink'
+          : 'border-border-primary bg-bg-primary hover:bg-bg-secondary',
+        className
+      )}
+    >
+      <div className="flex items-start justify-between mb-5">
+        {icon && (
+          <div
+            className={cn(
+              'flex w-12 h-12 items-center justify-center rounded-xl transition-transform duration-300 group-hover:scale-110',
+              accentStyles[accentColor]
+            )}
+          >
+            {icon}
+          </div>
+        )}
+        {trend && TrendIcon && (
+          <div className={cn('flex items-center gap-1 text-xs font-medium', trendColor[trend.direction])}>
+            <TrendIcon className="w-3.5 h-3.5" />
+            <span>{trend.value}</span>
+            {trend.label && <span className={isDark ? 'text-white/40' : 'text-text-subtle'}>{trend.label}</span>}
+          </div>
+        )}
+      </div>
+
+      <div className="space-y-1.5">
+        <div className={cn(
+          'text-sm font-medium tracking-wide uppercase',
+          isDark ? 'text-white/50' : 'text-text-muted'
+        )}>
+          {label}
+        </div>
+        <div className={cn(
+          'text-3xl sm:text-4xl font-bold tracking-tight',
+          isDark ? 'text-white' : 'text-text-primary'
+        )}>
+          <AnimatedCounter
+            value={value}
+            decimals={decimals}
+            prefix={prefix}
+            suffix={suffix}
+          />
+        </div>
+        {description && (
+          <p className={cn(
+            'text-sm leading-relaxed pt-2',
+            isDark ? 'text-white/60' : 'text-text-muted'
+          )}>
+            {description}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}