refactor(ui): 优化导航组件和页面布局

- 移除多个页面的面包屑导航组件 - 添加统一的返回按钮组件替代各页面独立实现 - 优化导航栏滚动检测逻辑和动画效果 - 更新常量类型定义和统计数据 - 调整动态导入的SSR配置为false - 添加FlipClock组件展示公司运营时长 - 优化新闻列表页的类型安全和响应式设计
2026-02-28 13:09:07 +08:00
parent 9451814ca4
commit 0cfefaa937
18 changed files with 389 additions and 195 deletions
@@ -1,12 +1,12 @@
 'use client';

-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { Menu, X } from 'lucide-react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import { Button } from '@/components/ui/button';
-import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
+import { COMPANY_INFO, NAVIGATION, type NavigationItem } from '@/lib/constants';
 import { useFocusTrap } from '@/hooks/use-focus-trap';

 export function Header() {
@@ -15,25 +15,58 @@ export function Header() {
  const [activeSection, setActiveSection] = useState('home');
  const pathname = usePathname();
  const focusTrapRef = useFocusTrap<HTMLDivElement>(isOpen);
+  const sectionCacheRef = useRef(new Map<string, { offsetTop: number; offsetHeight: number }>());
+  const activeSectionRef = useRef(activeSection);
+  const isManualNavigationRef = useRef(false);
+  const manualNavTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  useEffect(() => {
+    activeSectionRef.current = activeSection;
+  }, [activeSection]);
+
+  useEffect(() => {
+    let ticking = false;
+    
+    const updateSectionCache = () => {
+      const sections = ['home', 'services', 'products', 'cases', 'about', 'news', 'contact'];
+      sections.forEach(sectionId => {
+        const element = document.getElementById(sectionId);
+        if (element) {
+          sectionCacheRef.current.set(sectionId, {
+            offsetTop: element.offsetTop,
+            offsetHeight: element.offsetHeight
+          });
+        }
+      });
+    };
+
+    updateSectionCache();
+    
    const handleScroll = () => {
-      setIsScrolled(window.scrollY > 20);
-      
-      if (pathname === '/') {
-        const sections = ['home', 'services', 'products', 'cases', 'about', 'news', 'contact'];
-        const scrollPosition = window.scrollY + 100;
-        
-        for (const sectionId of sections) {
-          const element = document.getElementById(sectionId);
-          if (element) {
-            const { offsetTop, offsetHeight } = element;
-            if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
-              setActiveSection(sectionId);
-              break;
+      if (!ticking) {
+        requestAnimationFrame(() => {
+          setIsScrolled(window.scrollY > 20);
+          
+          if (pathname === '/' && !isManualNavigationRef.current) {
+            const scrollPosition = window.scrollY + 100;
+            const sections = ['home', 'services', 'products', 'cases', 'about', 'news', 'contact'];
+            let currentSection = 'home';
+            
+            for (const sectionId of sections) {
+              const cached = sectionCacheRef.current.get(sectionId);
+              if (cached && scrollPosition >= cached.offsetTop && scrollPosition < cached.offsetTop + cached.offsetHeight) {
+                currentSection = sectionId;
+                break;
+              }
+            }
+            
+            if (currentSection !== activeSectionRef.current) {
+              setActiveSection(currentSection);
            }
          }
-        }
+          ticking = false;
+        });
+        ticking = true;
      }
    };

@@ -45,11 +78,16 @@ export function Header() {

    window.addEventListener('scroll', handleScroll, { passive: true });
    window.addEventListener('keydown', handleGlobalKeyDown);
+    window.addEventListener('resize', updateSectionCache);
    handleScroll();

    return () => {
      window.removeEventListener('scroll', handleScroll);
      window.removeEventListener('keydown', handleGlobalKeyDown);
+      window.removeEventListener('resize', updateSectionCache);
+      if (manualNavTimeoutRef.current) {
+        clearTimeout(manualNavTimeoutRef.current);
+      }
    };
  }, [pathname, isOpen]);

@@ -63,14 +101,32 @@ export function Header() {
    }
  }, [isOpen]);

-  const isActive = (item: typeof NAVIGATION[number]) => {
+  const handleNavClick = useCallback((item: NavigationItem) => {
+    if (pathname === '/' && item.href.startsWith('/#')) {
+      setActiveSection(item.id);
+      isManualNavigationRef.current = true;
+      
+      if (manualNavTimeoutRef.current) {
+        clearTimeout(manualNavTimeoutRef.current);
+      }
+      
+      manualNavTimeoutRef.current = setTimeout(() => {
+        isManualNavigationRef.current = false;
+      }, 800);
+    }
+    setIsOpen(false);
+  }, [pathname]);
+
+  const isActive = useCallback((item: NavigationItem) => {
    if (pathname === '/') {
      return activeSection === item.id;
    }
    
    const navPath = item.href.split('#')[0];
    return pathname === navPath || pathname.startsWith(navPath + '/');
-  };
+  }, [pathname, activeSection]);
+
+  const navigationItems = useMemo(() => NAVIGATION, []);

  return (
    <>
@@ -98,10 +154,11 @@ export function Header() {
            </Link>

            <nav className="hidden md:flex items-center gap-1" role="navigation" aria-label="主导航">
-              {NAVIGATION.map((item) => (
+              {navigationItems.map((item) => (
                <Link
                  key={item.id}
                  href={item.href}
+                  onClick={() => handleNavClick(item)}
                  className={`
                    relative px-3 py-1.5 text-sm font-medium
                    transition-all duration-300
@@ -113,13 +170,16 @@ export function Header() {
                  aria-current={isActive(item) ? 'page' : undefined}
                >
                  {item.label}
-                  {isActive(item) && (
-                    <motion.span 
-                      layoutId="activeNav"
-                      className="absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-[#C41E3A] rounded-full"
-                      transition={{ type: "spring", stiffness: 380, damping: 30 }}
-                    />
-                  )}
+                  <span 
+                    className={`
+                      absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-[#C41E3A] rounded-full
+                      transition-all duration-200 ease-out
+                      ${isActive(item) 
+                        ? 'opacity-100 scale-x-100' 
+                        : 'opacity-0 scale-x-0'
+                      }
+                    `}
+                  />
                </Link>
              ))}
            </nav>
@@ -172,7 +232,7 @@ export function Header() {
              aria-label="移动端导航"
            >
              <nav className="container-wide py-4">
-                {NAVIGATION.map((item, index) => (
+                {navigationItems.map((item, index) => (
                  <motion.div
                    key={item.id}
                    initial={{ x: -20, opacity: 0 }}
@@ -181,7 +241,7 @@ export function Header() {
                  >
                    <Link
                      href={item.href}
-                      onClick={() => setIsOpen(false)}
+                      onClick={() => handleNavClick(item)}
                      className={`
                        block px-4 py-3 text-base font-medium
                        transition-all duration-300
@@ -2,16 +2,17 @@

 import { motion } from 'framer-motion';
 import { useInView } from 'framer-motion';
-import { useRef } from 'react';
+import { useRef, useMemo } from 'react';
 import Link from 'next/link';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
-import { TouchSwipe } from '@/components/ui/touch-swipe';
 import { ArrowRight, Calendar } from 'lucide-react';
 import { NEWS } from '@/lib/constants';

 export function NewsSection() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: '-100px' });
+  
+  const displayedNews = useMemo(() => NEWS.slice(0, 4), []);

  return (
    <section id="news" className="py-24 bg-[#F5F5F5]" ref={ref}>
@@ -19,7 +20,7 @@ export function NewsSection() {
        <motion.div 
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
-          transition={{ duration: 0.6 }}
+          transition={{ duration: 0.5 }}
          className="text-center max-w-3xl mx-auto mb-16"
        >
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1C1C1C] mb-6">
@@ -30,53 +31,43 @@ export function NewsSection() {
          </p>
        </motion.div>

-        <TouchSwipe
-          onSwipeLeft={() => {
-            // 切换到下一页新闻
-          }}
-          onSwipeRight={() => {
-            // 切换到上一页新闻
-          }}
-          className="md:hidden"
-        >
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
-            {NEWS.slice(0, 4).map((news, idx) => (
-              <motion.div
-                key={news.id}
-                initial={{ opacity: 0, y: 20 }}
-                animate={isInView ? { opacity: 1, y: 0 } : {}}
-                transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
-              >
-                <Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C]">
-                  <CardHeader>
-                    <div className="flex items-center gap-2 mb-3">
-                      <span className="inline-block px-2 py-0.5 rounded-full bg-[#F5F5F5] text-[#1C1C1C] text-xs font-medium">
-                        {news.category}
-                      </span>
-                      <span className="text-sm text-[#5C5C5C] flex items-center gap-1">
-                        <Calendar className="w-3 h-3" />
-                        {news.date}
-                      </span>
-                    </div>
-                    <CardTitle className="text-xl leading-tight">{news.title}</CardTitle>
-                  </CardHeader>
-                  <CardContent className="flex-1 flex flex-col">
-                    <CardDescription className="text-base leading-relaxed mb-6 flex-1">
-                      {news.excerpt}
-                    </CardDescription>
-                    <a
-                      href={`/news/${news.id}`}
-                      className="inline-flex items-center text-sm font-medium text-[#1C1C1C] hover:text-[#C41E3A] transition-colors group/link"
-                    >
-                      阅读更多
-                      <ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover/link:translate-x-1" />
-                    </a>
-                  </CardContent>
-                </Card>
-              </motion.div>
-            ))}
-          </div>
-        </TouchSwipe>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
+          {displayedNews.map((news, idx) => (
+            <motion.div
+              key={news.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={isInView ? { opacity: 1, y: 0 } : {}}
+              transition={{ duration: 0.4, delay: idx * 0.08 }}
+            >
+              <Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C]">
+                <CardHeader>
+                  <div className="flex items-center gap-2 mb-3">
+                    <span className="inline-block px-2 py-0.5 rounded-full bg-[#F5F5F5] text-[#1C1C1C] text-xs font-medium">
+                      {news.category}
+                    </span>
+                    <span className="text-sm text-[#5C5C5C] flex items-center gap-1">
+                      <Calendar className="w-3 h-3" />
+                      {news.date}
+                    </span>
+                  </div>
+                  <CardTitle className="text-xl leading-tight">{news.title}</CardTitle>
+                </CardHeader>
+                <CardContent className="flex-1 flex flex-col">
+                  <CardDescription className="text-base leading-relaxed mb-6 flex-1">
+                    {news.excerpt}
+                  </CardDescription>
+                  <a
+                    href={`/news/${news.id}`}
+                    className="inline-flex items-center text-sm font-medium text-[#1C1C1C] hover:text-[#C41E3A] transition-colors group/link"
+                  >
+                    阅读更多
+                    <ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover/link:translate-x-1" />
+                  </a>
+                </CardContent>
+              </Card>
+            </motion.div>
+          ))}
+        </div>

        <motion.div 
          initial={{ opacity: 0, y: 20 }}
@@ -10,7 +10,8 @@ export function BackButton() {
  return (
    <Button 
      variant="ghost" 
-      className="text-[#5C5C5C] hover:text-[#C41E3A] hover:bg-[#C41E3A]/10"
+      size="sm"
+      className="text-[#5C5C5C] hover:text-[#C41E3A] hover:bg-transparent h-auto py-2 px-3"
      onClick={() => router.back()}
    >
      <ArrowLeft className="w-4 h-4 mr-2" />
@@ -0,0 +1,149 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+interface FlipCardProps {
+  value: number;
+  label: string;
+  maxDigits?: number;
+}
+
+interface FlipDigitProps {
+  digit: number;
+  prevDigit: number;
+}
+
+function FlipDigit({ digit, prevDigit }: FlipDigitProps) {
+  return (
+    <div className="relative w-14 h-20 sm:w-16 sm:h-24 md:w-20 md:h-28 perspective-1000">
+      {/* 背景卡片 - 静态显示当前数字 */}
+      <div className="absolute inset-0 bg-gradient-to-b from-white via-white to-gray-50 rounded-lg shadow-xl overflow-hidden border border-gray-200">
+        {/* 上半部分 */}
+        <div className="absolute top-0 left-0 right-0 h-1/2 bg-gradient-to-b from-white to-gray-50 border-b border-gray-300 overflow-hidden">
+          <div className="absolute inset-0 flex items-center justify-center text-4xl sm:text-5xl md:text-6xl font-bold text-[#C41E3A]">
+            {digit}
+          </div>
+        </div>
+        {/* 下半部分 */}
+        <div className="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-b from-white to-gray-50 overflow-hidden">
+          <div className="absolute inset-0 flex items-center justify-center text-4xl sm:text-5xl md:text-6xl font-bold text-[#C41E3A]">
+            {digit}
+          </div>
+        </div>
+      </div>
+      
+      {/* 翻转动画层 */}
+      <AnimatePresence custom={true}>
+        {/* 上半部分翻转 */}
+        <motion.div
+          key={`top-${prevDigit}`}
+          initial={{ rotateX: 0 }}
+          animate={{ rotateX: -180 }}
+          exit={{ rotateX: -180 }}
+          transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}
+          className="absolute inset-0 bg-gradient-to-b from-white to-gray-50 rounded-t-lg overflow-hidden border-t border-l border-r border-gray-200"
+          style={{ 
+            transformOrigin: 'bottom',
+            backfaceVisibility: 'hidden',
+          }}
+        >
+          <div className="absolute inset-0 flex items-center justify-center text-4xl sm:text-5xl md:text-6xl font-bold text-[#C41E3A]">
+            {prevDigit}
+          </div>
+        </motion.div>
+        
+        {/* 下半部分翻转 */}
+        <motion.div
+          key={`bottom-${digit}`}
+          initial={{ rotateX: 180 }}
+          animate={{ rotateX: 0 }}
+          exit={{ rotateX: 0 }}
+          transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}
+          className="absolute inset-0 bg-gradient-to-b from-white to-gray-50 rounded-b-lg overflow-hidden border-b border-l border-r border-gray-200"
+          style={{ 
+            transformOrigin: 'top',
+            backfaceVisibility: 'hidden',
+          }}
+        >
+          <div className="absolute inset-0 flex items-center justify-center text-4xl sm:text-5xl md:text-6xl font-bold text-[#C41E3A]">
+            {digit}
+          </div>
+        </motion.div>
+      </AnimatePresence>
+      
+      {/* 中间分割线和装饰 */}
+      <div className="absolute top-1/2 left-0 right-0 h-px bg-gray-400 transform -translate-y-1/2" />
+      <div className="absolute top-0 left-0 right-0 h-px bg-gray-300/50" />
+      <div className="absolute bottom-0 left-0 right-0 h-px bg-gray-300/50" />
+      
+      {/* 侧面阴影增强立体感 */}
+      <div className="absolute inset-0 rounded-lg shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)] pointer-events-none" />
+    </div>
+  );
+}
+
+function FlipCard({ value, label, maxDigits = 2 }: FlipCardProps) {
+  const [prevValue, setPrevValue] = useState(value);
+  const [currentValue, setCurrentValue] = useState(value);
+
+  useEffect(() => {
+    if (value !== currentValue) {
+      setPrevValue(currentValue);
+      setCurrentValue(value);
+    }
+  }, [value]);
+
+  // 将数字转换为数组，每个数字一位
+  const formatNumber = (num: number) => {
+    const str = num.toString().padStart(maxDigits, '0');
+    return str.split('').map(c => parseInt(c));
+  };
+
+  const currentDigits = formatNumber(currentValue);
+  const prevDigits = formatNumber(prevValue);
+
+  return (
+    <div className="flex flex-col items-center">
+      <div className="flex gap-1 sm:gap-2 mb-3">
+        {currentDigits.map((digit, index) => (
+          <FlipDigit
+            key={index}
+            digit={digit}
+            prevDigit={prevDigits[index] ?? digit}
+          />
+        ))}
+      </div>
+      <div className="text-sm sm:text-base text-[#5C5C5C] font-medium">{label}</div>
+    </div>
+  );
+}
+
+interface FlipClockProps {
+  years: number;
+  months: number;
+  days: number;
+}
+
+export function FlipClock({ years, months, days }: FlipClockProps) {
+  return (
+    <div className="bg-[#FFFBF5] rounded-2xl p-8 border border-[#E5E5E5]">
+      <h2 className="text-2xl font-bold text-[#1C1C1C] mb-6">运营时长</h2>
+      <p className="text-[#5C5C5C] mb-6 leading-relaxed">
+        自 <span className="font-semibold text-[#1C1C1C]">2026 年 1 月 15 日</span> 成立以来
+      </p>
+      
+      <div className="flex flex-wrap justify-center items-center gap-4 sm:gap-6 mb-6">
+        <FlipCard value={years} label="年" maxDigits={2} />
+        <div className="text-2xl sm:text-3xl font-bold text-[#C41E3A]">:</div>
+        <FlipCard value={months} label="个月" maxDigits={2} />
+        <div className="text-2xl sm:text-3xl font-bold text-[#C41E3A]">:</div>
+        <FlipCard value={days} label="天" maxDigits={3} />
+      </div>
+      
+      <p className="text-[#5C5C5C] leading-relaxed font-medium">
+        持续为客户提供优质的数字化转型服务
+      </p>
+    </div>
+  );
+}