feat: refactor Header with NAVIGATION_V2 and MegaDropdown integration

src/components/layout/header.tsx

@@ -7,7 +7,8 @@ import { usePathname, useSearchParams } from 'next/navigation';
 import { Menu, X } from 'lucide-react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Button } from '@/components/ui/button';
-import { COMPANY_INFO, NAVIGATION, type NavigationItem } from '@/lib/constants';
+import { COMPANY_INFO, NAVIGATION_V2, MEGA_DROPDOWN_DATA, type NavigationItemV2 } from '@/lib/constants';
+import { MegaDropdown } from '@/components/layout/mega-dropdown';
 import { useFocusTrap } from '@/hooks/use-focus-trap';
 
 declare global {
@@ -19,6 +20,7 @@ declare global {
 function HeaderContent() {
   const [isOpen, setIsOpen] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
+  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const focusTrapRef = useFocusTrap<HTMLDivElement>(isOpen);
@@ -91,7 +93,7 @@ function HeaderContent() {
     }
   }, [isOpen]);
 
-  const handleNavClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>, item: NavigationItem) => {
+  const handleNavClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>, item: NavigationItemV2) => {
     e.preventDefault();
     
     if (item.id === 'contact') {
@@ -133,7 +135,7 @@ function HeaderContent() {
     setIsOpen(false);
   }, [pathname]);
 
-  const isActive = useCallback((item: NavigationItem) => {
+  const isActive = useCallback((item: NavigationItemV2) => {
     if (item.id === 'contact') {
       return pathname === '/contact';
     }
@@ -145,8 +147,6 @@ function HeaderContent() {
     return false;
   }, [pathname, activeSection]);
 
-  const navigationItems = NAVIGATION;
-
   return (
     <>
       <header 
@@ -178,33 +178,43 @@ function HeaderContent() {
             </StaticLink>
 
             <nav className="hidden md:flex items-center gap-1" role="navigation" aria-label="主导航" data-testid="desktop-navigation">
-              {navigationItems.map((item) => (
+              {NAVIGATION_V2.map((item) => (
-                <StaticLink
+                item.hasDropdown ? (
-                  key={item.id}
+                  <MegaDropdown
-                  href={item.href}
+                    key={item.id}
-                  onClick={(e) => handleNavClick(e, item)}
+                    label={item.label}
-                  className={`
+                    items={MEGA_DROPDOWN_DATA[item.dropdownKey!]}
-                    relative px-3 py-1.5 text-sm font-medium
+                    isOpen={openDropdown === item.id}
-                    transition-all duration-300
+                    onToggle={() => setOpenDropdown(openDropdown === item.id ? null : item.id)}
-                    ${isActive(item)
+                  />
-                      ? 'text-[#1C1C1C]'
+                ) : (
-                      : 'text-[#3D3D3D] hover:text-[#1C1C1C]'
+                  <StaticLink
-                    }
+                    key={item.id}
-                  `}
+                    href={item.href}
-                  aria-current={isActive(item) ? 'page' : undefined}
+                    onClick={(e) => handleNavClick(e, item)}
-                >
-                  {item.label}
-                  <span 
                     className={`
-                      absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-[#C41E3A] rounded-full
+                      relative px-3 py-1.5 text-sm font-medium
-                      transition-all duration-200 ease-out
+                      transition-all duration-300
-                      ${isActive(item) 
+                      ${isActive(item)
-                        ? 'opacity-100 scale-x-100' 
+                        ? 'text-[#1C1C1C]'
-                        : 'opacity-0 scale-x-0'
+                        : 'text-[#3D3D3D] hover:text-[#1C1C1C]'
                       }
                     `}
-                  />
+                    aria-current={isActive(item) ? 'page' : undefined}
-                </StaticLink>
+                  >
+                    {item.label}
+                    <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'
+                        }
+                      `}
+                    />
+                  </StaticLink>
+                )
               ))}
             </nav>
 
@@ -260,7 +270,7 @@ function HeaderContent() {
               data-testid="mobile-navigation"
             >
               <nav className="container-wide py-6">
-                {navigationItems.map((item, index) => (
+                {NAVIGATION_V2.map((item, index) => (
                   <motion.div
                     key={item.id}
                     initial={{ x: 20, opacity: 0 }}