refactor: 优化网站页面结构和数据展示

- 增强服务数据模型，添加 challenges 和 outcomes 字段 - 简化统计数据配置，改为静态定义 - 重构多个页面组件，优化代码结构 - 新增产品、服务、解决方案相关的布局和组件 - 更新样式和动画配置 - 优化测试用例和类型定义 - 修复 ESLint 错误：移除不必要的 useEffect 和未使用的导入
2026-04-25 08:44:23 +08:00
parent 9650e56dcf
commit 40384ec024
77 changed files with 3751 additions and 1226 deletions
@@ -0,0 +1,96 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { StaticLink } from '@/components/ui/static-link';
+import Image from 'next/image';
+import { ArrowLeft, Phone } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Button } from '@/components/ui/button';
+import { RippleButton } from '@/lib/animations';
+
+/**
+ * 产品站专属 Header
+ *
+ * 与主站 Header 的区别：
+ * - 无导航菜单（产品列表、关于我们等）
+ * - 只保留 Logo + 返回主站按钮
+ * - 始终浅色毛玻璃风格（适配产品页浅色主题）
+ * - 更简洁的视觉层次，强化"独立产品站"感知
+ */
+function ProductHeaderContent() {
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 20);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <motion.header
+      className="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
+      initial={{ y: -100 }}
+      animate={{ y: 0 }}
+      transition={{ duration: 0.5, ease: [0.25, 0.46, 0.45, 0.94] }}
+    >
+      <div
+        className={`transition-all duration-300 ${
+          isScrolled
+            ? 'bg-white/90 backdrop-blur-xl border-b border-[#E5E5E5] shadow-sm'
+            : 'bg-transparent'
+        }`}
+      >
+        <div className="container-wide">
+          <div className="flex items-center justify-between h-16">
+            <div className="flex items-center gap-3">
+              {/* Logo */}
+              <StaticLink href="/" className="flex items-center gap-3 group">
+                <Image
+                  src="/logo.svg"
+                  alt="Novalon"
+                  width={120}
+                  height={32}
+                  className="h-8 w-auto"
+                  priority
+                />
+              </StaticLink>
+
+              {/* 立即咨询 CTA */}
+              <RippleButton
+                href="/contact"
+                className="bg-[#C41E3A] hover:bg-[#A01830] text-white px-5 py-2 rounded-lg text-sm font-semibold inline-flex items-center gap-2"
+                rippleColor="rgba(255, 255, 255, 0.3)"
+              >
+                <Phone className="w-4 h-4" />
+                <span className="hidden md:inline">联系我们</span>
+              </RippleButton>
+            </div>
+
+            {/* 返回主站按钮 */}
+            <StaticLink href="/">
+              <Button
+                variant="outline"
+                size="sm"
+                className="border-[#E5E5E5] text-[#5C5C5C] hover:text-[#1C1C1C] hover:bg-[#F5F5F5] hover:border-[#C41E3A]/30 transition-all duration-200 text-sm"
+              >
+                <ArrowLeft className="w-4 h-4 mr-2" />
+                返回主站
+              </Button>
+            </StaticLink>
+          </div>
+        </div>
+      </div>
+    </motion.header>
+  );
+}
+
+export function ProductHeader() {
+  return (
+    <AnimatePresence mode="wait">
+      <ProductHeaderContent />
+    </AnimatePresence>
+  );
+}