style(theme): 更新网站主题色彩方案与字体配置

- 调整主色调从 #1C1C1C 至 #1A1A1A，优化视觉层次 - 更新背景色系为暖白色调 (#FAFAF7, #F5F4F0 等) - 配置中文字体栈，添加 serif 字体支持 - 优化文本颜色梯度，提升可读性 - 调整边框颜色，统一水墨风格 - 添加 Google Search Console 验证码配置项 - 新增桌面应用架构专家代理配置文件 - 重构 E2E 测试等待策略，提升稳定性 - 添加回归测试脚本，增强质量保障
2026-06-17 11:37:25 +08:00
parent a3cc4c9d43
commit 415a103a24
50 changed files with 3651 additions and 1186 deletions
@@ -0,0 +1,113 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useReducedMotion } from '@/hooks/use-reduced-motion';
+
+// ===== 抽象几何装饰 - 用于各 section 背景 =====
+export function GeometricDecoration({ variant = 'circles' }: { variant?: 'circles' | 'lines' | 'grid' | 'waves' }) {
+  const shouldReduceMotion = useReducedMotion();
+
+  if (variant === 'circles') {
+    return (
+      <div className="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
+        <svg className="absolute top-[10%] right-[5%] w-64 h-64 opacity-[0.04]" viewBox="0 0 200 200">
+          <circle cx="100" cy="100" r="80" fill="none" stroke="currentColor" className="text-[var(--color-brand-primary)]" strokeWidth="0.5" />
+          <circle cx="100" cy="100" r="60" fill="none" stroke="currentColor" className="text-[var(--color-brand-primary)]" strokeWidth="0.5" />
+          <circle cx="100" cy="100" r="40" fill="none" stroke="currentColor" className="text-[var(--color-brand-primary)]" strokeWidth="0.5" />
+          {!shouldReduceMotion && (
+            <motion.circle
+              cx="100" cy="100" r="20"
+              fill="rgba(var(--color-brand-primary-rgb, 196, 30, 58), 0.1)"
+              animate={{ r: [20, 35, 20], opacity: [0.1, 0.05, 0.1] }}
+              transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
+            />
+          )}
+        </svg>
+        <svg className="absolute bottom-[15%] left-[8%] w-48 h-48 opacity-[0.03]" viewBox="0 0 200 200">
+          <rect x="40" y="40" width="120" height="120" rx="20" fill="none" stroke="currentColor" className="text-[var(--color-text-subtle)]" strokeWidth="0.5" transform="rotate(15 100 100)" />
+          <rect x="60" y="60" width="80" height="80" rx="12" fill="none" stroke="currentColor" className="text-[var(--color-text-subtle)]" strokeWidth="0.5" transform="rotate(15 100 100)" />
+        </svg>
+      </div>
+    );
+  }
+
+  if (variant === 'lines') {
+    return (
+      <div className="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
+        <svg className="absolute top-0 right-0 w-full h-full opacity-[0.02]" viewBox="0 0 1000 1000" preserveAspectRatio="none">
+          <line x1="800" y1="0" x2="1000" y2="400" stroke="currentColor" className="text-[var(--color-brand-primary)]" strokeWidth="1" />
+          <line x1="850" y1="0" x2="1000" y2="300" stroke="currentColor" className="text-[var(--color-brand-primary)]" strokeWidth="0.5" />
+          <line x1="900" y1="0" x2="1000" y2="200" stroke="currentColor" className="text-[var(--color-brand-primary)]" strokeWidth="0.5" />
+          <line x1="0" y1="600" x2="300" y2="1000" stroke="currentColor" className="text-[var(--color-text-subtle)]" strokeWidth="0.5" />
+          <line x1="0" y1="700" x2="200" y2="1000" stroke="currentColor" className="text-[var(--color-text-subtle)]" strokeWidth="0.5" />
+        </svg>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+// ===== 数据可视化条 - 用于指标展示区域 =====
+export function DataBar({ value, max = 100, label, color = 'brand' }: { value: number; max?: number; label: string; color?: 'brand' | 'blue' | 'purple' | 'cyan' }) {
+  const percentage = Math.min((value / max) * 100, 100);
+  const colorMap = {
+    brand: 'var(--color-brand-primary)',
+    blue: 'var(--color-accent-blue)',
+    purple: 'var(--color-accent-purple)',
+    cyan: 'var(--color-accent-cyan)',
+  };
+
+  return (
+    <div className="space-y-1.5">
+      <div className="flex justify-between items-center text-xs">
+        <span className="text-[var(--color-text-muted)]">{label}</span>
+        <span className="font-mono font-medium text-[var(--color-text-secondary)]">{value}%</span>
+      </div>
+      <div className="h-1.5 rounded-full bg-[var(--color-bg-tertiary)] overflow-hidden">
+        <motion.div
+          initial={{ width: 0 }}
+          whileInView={{ width: `${percentage}%` }}
+          viewport={{ once: true }}
+          transition={{ duration: 1, ease: [0.16, 1, 0.3, 1], delay: 0.2 }}
+          className="h-full rounded-full"
+          style={{ backgroundColor: colorMap[color] }}
+        />
+      </div>
+    </div>
+  );
+}
+
+// ===== 品牌渐变分隔线 =====
+export function GradientDivider() {
+  return (
+    <div className="flex items-center gap-4 py-2">
+      <div className="h-px flex-1 bg-gradient-to-r from-transparent via-[var(--color-border-primary)] to-transparent" />
+      <div className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand-primary)]" />
+      <div className="h-px flex-1 bg-gradient-to-r from-transparent via-[var(--color-border-primary)] to-transparent" />
+    </div>
+  );
+}
+
+// ===== 品牌徽章/印章效果 =====
+export function BrandStamp({ children }: { children: React.ReactNode }) {
+  const shouldReduceMotion = useReducedMotion();
+
+  return (
+    <motion.div
+      initial={shouldReduceMotion ? {} : { scale: 1.3, opacity: 0, rotate: -12 }}
+      whileInView={{ scale: 1, opacity: 1, rotate: -5 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
+      className="inline-block px-3 py-1.5 border-2 border-[var(--color-brand-primary)] rounded-sm"
+      style={{
+        transform: 'rotate(-5deg)',
+        background: 'repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(var(--color-brand-primary-rgb), 0.03) 2px, rgba(var(--color-brand-primary-rgb), 0.03) 4px)',
+      }}
+    >
+      <span className="text-xs font-bold tracking-widest text-[var(--color-brand-primary)] font-calligraphy">
+        {children}
+      </span>
+    </motion.div>
+  );
+}