refactor: update navigation to use independent page links

src/components/layout/header.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { useState, useEffect, useCallback, useRef } 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 { Button } from '@/components/ui/button';
@@ -9,87 +11,13 @@ import { useFocusTrap } from '@/hooks/use-focus-trap';
 
 export function Header() {
   const [isOpen, setIsOpen] = useState(false);
-  const [activeSection, setActiveSection] = useState('home');
   const [isScrolled, setIsScrolled] = useState(false);
-  const isScrollingRef = useRef(false);
-  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const pathname = usePathname();
   const focusTrapRef = useFocusTrap<HTMLDivElement>(isOpen);
 
-  const handleNavClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
-    e.preventDefault();
-    const targetId = href.replace('#', '');
-    const element = document.getElementById(targetId);
-    
-    if (element) {
-      isScrollingRef.current = true;
-      
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
-      
-      const headerOffset = 64;
-      const elementPosition = element.getBoundingClientRect().top;
-      const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
-
-      window.scrollTo({
-        top: offsetPosition,
-        behavior: 'smooth'
-      });
-      
-      setActiveSection(targetId);
-      setIsOpen(false);
-      
-      scrollTimeoutRef.current = setTimeout(() => {
-        isScrollingRef.current = false;
-      }, 1000);
-    }
-  }, []);
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent, href?: string) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      if (href) {
-        const targetId = href.replace('#', '');
-        const element = document.getElementById(targetId);
-        if (element) {
-          element.scrollIntoView({ behavior: 'smooth' });
-          setActiveSection(targetId);
-          setIsOpen(false);
-        }
-      } else {
-        setIsOpen(!isOpen);
-      }
-    }
-    if (e.key === 'Escape' && isOpen) {
-      setIsOpen(false);
-    }
-  }, [isOpen]);
-
   useEffect(() => {
     const handleScroll = () => {
       setIsScrolled(window.scrollY > 20);
-
-      if (isScrollingRef.current) {
-        return;
-      }
-
-      const sections = NAVIGATION.map(item => item.href.replace('#', ''));
-      const scrollPosition = window.scrollY + 100;
-
-      for (let i = sections.length - 1; i >= 0; i--) {
-        const sectionId = sections[i];
-        if (!sectionId) {continue;}
-        
-        const section = document.getElementById(sectionId);
-        if (section) {
-          const sectionTop = section.offsetTop;
-          const sectionBottom = sectionTop + section.offsetHeight;
-          if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
-            setActiveSection(sectionId);
-            break;
-          }
-        }
-      }
     };
 
     window.addEventListener('scroll', handleScroll, { passive: true });
@@ -97,12 +25,19 @@ export function Header() {
 
     return () => {
       window.removeEventListener('scroll', handleScroll);
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
     };
   }, []);
 
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      setIsOpen(!isOpen);
+    }
+    if (e.key === 'Escape' && isOpen) {
+      setIsOpen(false);
+    }
+  }, [isOpen]);
+
   return (
     <>
       <header 
@@ -117,10 +52,8 @@ export function Header() {
       >
         <div className="container-wide">
           <div className="flex items-center justify-between h-16">
-            <a 
-              href="#home" 
-              onClick={(e) => handleNavClick(e, '#home')}
-              onKeyDown={(e) => handleKeyDown(e, '#home')}
+            <Link 
+              href="/"
               className="flex items-center group focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-offset-2 rounded-sm"
             >
               <img 
@@ -128,56 +61,49 @@ export function Header() {
                 alt={COMPANY_INFO.name}
                 className="h-8 w-auto transition-transform duration-200 group-hover:scale-105"
               />
-            </a>
+            </Link>
 
             <nav className="hidden md:flex items-center gap-1" role="navigation" aria-label="主导航">
               {NAVIGATION.map((item) => (
-                <a
+                <Link
                   key={item.id}
                   href={item.href}
-                  onClick={(e) => handleNavClick(e, item.href)}
-                  onKeyDown={(e) => handleKeyDown(e, item.href)}
                   className={`
                     relative px-3 py-1.5 text-sm font-medium
                     transition-all duration-300
                     focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-offset-2 rounded-sm
-                    ${activeSection === item.id.replace('#', '')
+                    ${pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href))
                       ? 'text-[#1C1C1C]'
                       : 'text-[#3D3D3D] hover:text-[#1C1C1C]'
                     }
                   `}
-                  aria-current={activeSection === item.id.replace('#', '') ? 'page' : undefined}
+                  aria-current={pathname === item.href ? 'page' : undefined}
                 >
                   {item.label}
-                  {activeSection === item.id.replace('#', '') && (
+                  {(pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href))) && (
                     <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 }}
                     />
                   )}
-                </a>
+                </Link>
               ))}
             </nav>
 
             <div className="hidden md:flex items-center gap-3">
               <Button 
                 size="sm"
-                onClick={() => {
-                  const element = document.getElementById('contact');
-                  if (element) {
-                    element.scrollIntoView({ behavior: 'smooth' });
-                  }
-                }}
+                asChild
               >
-                立即咨询
+                <Link href="/contact">立即咨询</Link>
               </Button>
             </div>
 
             <button
               className="md:hidden p-2 -mr-2 text-[#3D3D3D] hover:text-[#1C1C1C] transition-colors focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-offset-2 rounded-sm"
               onClick={() => setIsOpen(!isOpen)}
-              onKeyDown={(e) => handleKeyDown(e)}
+              onKeyDown={handleKeyDown}
               aria-expanded={isOpen}
               aria-controls="mobile-menu"
               aria-label={isOpen ? '关闭菜单' : '打开菜单'}
@@ -214,40 +140,38 @@ export function Header() {
             >
               <nav className="container-wide py-4">
                 {NAVIGATION.map((item, index) => (
-                  <motion.a
+                  <motion.div
                     key={item.id}
-                    href={item.href}
-                    onClick={(e) => handleNavClick(e, item.href)}
-                    onKeyDown={(e) => handleKeyDown(e, item.href)}
                     initial={{ x: -20, opacity: 0 }}
                     animate={{ x: 0, opacity: 1 }}
                     transition={{ delay: index * 0.05 }}
-                    className={`
-                      block px-4 py-3 text-base font-medium
-                      transition-all duration-300
-                      border-l-2
-                      focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-inset
-                      ${activeSection === item.id.replace('#', '')
-                        ? 'text-[#1C1C1C] border-[#C41E3A] bg-[#FEF2F4]'
-                        : 'text-[#3D3D3D] border-transparent hover:text-[#1C1C1C] hover:bg-[#F5F5F5]'
-                      }
-                    `}
                   >
-                    {item.label}
-                  </motion.a>
+                    <Link
+                      href={item.href}
+                      onClick={() => setIsOpen(false)}
+                      className={`
+                        block px-4 py-3 text-base font-medium
+                        transition-all duration-300
+                        border-l-2
+                        focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-inset
+                        ${pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href))
+                          ? 'text-[#1C1C1C] border-[#C41E3A] bg-[#FEF2F4]'
+                          : 'text-[#3D3D3D] border-transparent hover:text-[#1C1C1C] hover:bg-[#F5F5F5]'
+                        }
+                      `}
+                    >
+                      {item.label}
+                    </Link>
+                  </motion.div>
                 ))}
                 <div className="mt-4 px-4 pt-4 border-t border-[#E2E8F0] space-y-3">
                   <Button 
                     className="w-full"
-                    onClick={() => {
-                      const element = document.getElementById('contact');
-                      if (element) {
-                        element.scrollIntoView({ behavior: 'smooth' });
-                      }
-                      setIsOpen(false);
-                    }}
+                    asChild
                   >
-                    联系我们
+                    <Link href="/contact" onClick={() => setIsOpen(false)}>
+                      联系我们
+                    </Link>
                   </Button>
                 </div>
               </nav>

src/lib/constants.ts

@@ -11,14 +11,14 @@ export const COMPANY_INFO = {
   address: '中国四川省成都市龙泉驿区幸福路12号',
 } as const;
 
-// Navigation Items - 单页面锚点导航（顺序必须与页面 Section 顺序一致）
+// Navigation Items - 独立页面导航
 export const NAVIGATION = [
-  { id: 'home', label: '首页', href: '#home' },
-  { id: 'solutions', label: '核心业务', href: '/solutions' },
-  { id: 'products', label: '产品服务', href: '#products' },
-  { id: 'about', label: '关于我们', href: '#about' },
-  { id: 'news', label: '新闻动态', href: '#news' },
-  { id: 'contact', label: '联系我们', href: '#contact' },
+  { id: 'home', label: '首页', href: '/' },
+  { id: 'services', label: '核心业务', href: '/services' },
+  { id: 'products', label: '产品服务', href: '/products' },
+  { id: 'about', label: '关于我们', href: '/about' },
+  { id: 'news', label: '新闻动态', href: '/news' },
+  { id: 'contact', label: '联系我们', href: '/contact' },
 ] as const;
 
 // Stats Data