refactor: 数据层对齐HSI架构与水墨雅致视觉系统

- 产品分类统一为企业套装区+专业产品区，删除growth分类 - 导航数据对齐HSI层级，独立产品改为专业产品 - Hero主题从深色渐变改为水墨雅致浅色系(宣纸色底/墨色文字) - 设计系统hero文字颜色从白色改为stone系列 - 解决方案接口添加L3信任层可选字段(TODO标记)
2026-06-07 16:18:07 +08:00
parent 9677c91511
commit 2d602c0e57
8 changed files with 900 additions and 25 deletions
@@ -0,0 +1,134 @@
+export const DESIGN_SYSTEM = {
+  animation: {
+    duration: {
+      fast: '0.2s',
+      normal: '0.4s',
+      slow: '0.6s',
+      slower: '0.8s',
+      countUp: '2s',
+    },
+    easing: {
+      smooth: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      bounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+      easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
+      easeInOut: 'cubic-bezier(0.4, 0, 0.6, 1)',
+    },
+    delay: {
+      stagger: 0.08,
+      section: 0.15,
+    },
+  },
+
+  spacing: {
+    section: {
+      py: 'py-20 lg:py-28',
+      pyCompact: 'py-16 lg:py-20',
+    },
+    container: {
+      default: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8',
+      narrow: 'max-w-5xl mx-auto px-4 sm:px-6 lg:px-8',
+      wide: 'max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8',
+    },
+    grid: {
+      gap: 'gap-6 lg:gap-8',
+      gapSmall: 'gap-4 lg:gap-6',
+    },
+  },
+
+  typography: {
+    hero: {
+      title: 'text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight',
+      subtitle: 'text-lg md:text-xl text-stone-600 leading-relaxed',
+      description: 'text-base text-stone-500 mt-4 max-w-2xl',
+    },
+    section: {
+      title: 'text-3xl md:text-4xl font-bold tracking-tight',
+      subtitle: 'text-lg text-gray-600 mt-2',
+      body: 'text-base leading-relaxed text-gray-700',
+    },
+    card: {
+      title: 'text-lg font-semibold',
+      description: 'text-sm text-gray-600 leading-relaxed',
+    },
+  },
+
+  effects: {
+    inkGlow: {
+      border: 'conic-gradient(from var(--angle), transparent 0%, #C41E3A 10%, transparent 20%)',
+      glow: 'radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(196, 30, 58, 0.15) 0%, transparent 50%)',
+      speed: '3s',
+    },
+    hover: {
+      translateY: '-4px',
+      shadow: 'shadow-xl shadow-gray-200/50',
+      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    },
+    scroll: {
+      fadeInUp: {
+        initial: { opacity: 0, y: 24 },
+        animate: { opacity: 1, y: 0 },
+        viewport: { once: true, margin: '-80px' },
+        transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] as const },
+      },
+      staggerChildren: {
+        delay: 0.08,
+      },
+    },
+  },
+
+  colors: {
+    brand: {
+      primary: '#C41E3A',
+      light: 'rgba(196, 30, 58, 0.08)',
+      lighter: 'rgba(196, 30, 58, 0.04)',
+      gradient: 'linear-gradient(135deg, #C41E3A 0%, #99182d 100%)',
+    },
+    neutral: {
+      50: '#fafafa',
+      100: '#f5f5f5',
+      200: '#e5e5e5',
+      300: '#d4d4d4',
+      400: '#a3a3a3',
+      500: '#737373',
+      600: '#525252',
+      700: '#404040',
+      800: '#262626',
+      900: '#171717',
+    },
+    ink: {
+      light: 'rgba(0, 0, 0, 0.03)',
+      medium: 'rgba(0, 0, 0, 0.06)',
+      texture: 'repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,.02) 10px, rgba(0,0,0,.02) 11px)',
+    },
+  },
+
+  components: {
+    card: {
+      base: 'bg-white rounded-2xl border border-gray-100 overflow-hidden transition-all duration-300',
+      hover: 'hover:border-gray-200 hover:shadow-lg hover:-translate-y-1',
+      padding: 'p-6 lg:p-8',
+    },
+    badge: {
+      base: 'inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium',
+      variants: {
+        primary: 'bg-red-50 text-red-700',
+        secondary: 'bg-gray-100 text-gray-700',
+        success: 'bg-green-50 text-green-700',
+        warning: 'bg-yellow-50 text-yellow-700',
+      },
+    },
+    button: {
+      primary: 'inline-flex items-center gap-2 px-6 py-3 bg-[#C41E3A] text-white font-semibold rounded-lg shadow-md hover:bg-[#99182d] hover:shadow-lg transition-all duration-200',
+      secondary: 'inline-flex items-center gap-2 px-6 py-3 bg-white text-gray-700 font-semibold rounded-lg border border-gray-300 hover:border-gray-400 hover:shadow-sm transition-all duration-200',
+      ghost: 'inline-flex items-center gap-2 px-4 py-2 text-[#C41E3A] font-medium hover:bg-red-50 rounded-lg transition-colors duration-200',
+    },
+    metric: {
+      container: 'text-center p-6 bg-gradient-to-br from-gray-50 to-white rounded-xl border border-gray-100',
+      value: 'text-3xl md:text-4xl font-bold text-gray-900 mb-1',
+      label: 'text-sm text-gray-500',
+      description: 'text-xs text-gray-400 mt-1',
+    },
+  },
+};
+
+export type DesignSystem = typeof DESIGN_SYSTEM;