refactor: update navigation to use independent page links

2026-02-26 21:27:19 +08:00
parent cb512bb13a
commit 2b08a536eb
2 changed files with 53 additions and 129 deletions
@@ -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>