张翔
37296b5717
改造概要（30项）： - 第一轮：Hero重构/Section差异化/SocialProof强化/CTA对比度/About架构 - 第二轮：字体优化/背景交替/Solutions差异化/Footer五列/MegaDropdown修复 - 第三轮：卡片交互/表单层级/CTA统一/时间线标记/连接线/三列布局/移动导航/Button微交互/SEO Schema - P3-2：template.tsx+Framer Motion页面过渡/loading.tsx加载状态 - 清理：删除未用组件/hooks，修复重复移动导航，清理冗余CSS
269 lines
9.9 KiB
TypeScript
269 lines
9.9 KiB
TypeScript
'use client';
|
|
|
|
import { Suspense, useState, useEffect, useCallback } from 'react';
|
|
import { StaticLink } from '@/components/ui/static-link';
|
|
import Image from 'next/image';
|
|
import { usePathname } 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_V2, MEGA_DROPDOWN_DATA, type NavigationItemV2 } from '@/lib/constants';
|
|
import { MegaDropdown } from '@/components/layout/mega-dropdown';
|
|
import { useFocusTrap } from '@/hooks/use-focus-trap';
|
|
|
|
function HeaderContent() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const [openDropdown, setOpenDropdown] = useState<string | null>(null);
|
|
const pathname = usePathname();
|
|
const focusTrapRef = useFocusTrap<HTMLDivElement>(isOpen);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 20);
|
|
};
|
|
|
|
const handleGlobalKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape' && isOpen) {
|
|
setIsOpen(false);
|
|
}
|
|
};
|
|
|
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
|
window.addEventListener('keydown', handleGlobalKeyDown);
|
|
|
|
return () => {
|
|
window.removeEventListener('scroll', handleScroll);
|
|
window.removeEventListener('keydown', handleGlobalKeyDown);
|
|
};
|
|
}, [isOpen]);
|
|
|
|
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
setIsOpen(!isOpen);
|
|
}
|
|
if (e.key === 'Escape' && isOpen) {
|
|
setIsOpen(false);
|
|
}
|
|
}, [isOpen]);
|
|
|
|
const handleNavClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>, item: NavigationItemV2) => {
|
|
e.preventDefault();
|
|
window.location.href = item.href;
|
|
setIsOpen(false);
|
|
}, []);
|
|
|
|
const isActive = useCallback((item: NavigationItemV2) => {
|
|
if (item.id === 'contact') {
|
|
return pathname === '/contact';
|
|
}
|
|
if (item.id === 'home') {
|
|
return pathname === '/';
|
|
}
|
|
if (item.id === 'products') {
|
|
return pathname === '/products' || pathname.startsWith('/products/');
|
|
}
|
|
if (item.id === 'solutions') {
|
|
return pathname === '/solutions' || pathname.startsWith('/solutions/');
|
|
}
|
|
return pathname === `/${item.id}`;
|
|
}, [pathname]);
|
|
|
|
return (
|
|
<>
|
|
<header
|
|
className={`
|
|
fixed top-0 left-0 right-0 z-50
|
|
transition-all duration-300 ease-out
|
|
${isScrolled
|
|
? 'bg-[var(--color-bg-primary)]/95 backdrop-blur-xl border-b border-[var(--color-border-primary)] shadow-sm'
|
|
: 'bg-transparent'
|
|
}
|
|
`}
|
|
>
|
|
<div className="container-wide">
|
|
<div className="flex items-center justify-between h-16">
|
|
<StaticLink
|
|
href="/"
|
|
className="flex items-center group"
|
|
aria-label="返回首页"
|
|
>
|
|
<Image
|
|
src="/logo.svg"
|
|
alt={COMPANY_INFO.name}
|
|
width={120}
|
|
height={30}
|
|
className="transition-transform duration-200 group-hover:scale-105 w-auto h-8 md:h-8"
|
|
loading="eager"
|
|
priority
|
|
/>
|
|
</StaticLink>
|
|
|
|
<nav className="hidden md:flex items-center gap-1" role="navigation" aria-label="主导航" data-testid="desktop-navigation">
|
|
{NAVIGATION_V2.map((item) => (
|
|
item.hasDropdown ? (
|
|
<MegaDropdown
|
|
key={item.id}
|
|
label={item.label}
|
|
items={MEGA_DROPDOWN_DATA[item.dropdownKey!] ?? []}
|
|
isOpen={openDropdown === item.id}
|
|
onToggle={() => {
|
|
setOpenDropdown((prev) => prev === item.id ? null : item.id);
|
|
}}
|
|
onOpen={() => setOpenDropdown(item.id)}
|
|
onClose={() => setOpenDropdown((prev) => prev === item.id ? null : prev)}
|
|
/>
|
|
) : (
|
|
<StaticLink
|
|
key={item.id}
|
|
href={item.href}
|
|
onClick={(e) => handleNavClick(e, item)}
|
|
className={`
|
|
relative px-3 py-1.5 text-sm font-medium
|
|
transition-all duration-300
|
|
${isActive(item)
|
|
? 'text-[var(--color-text-primary)]'
|
|
: 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'
|
|
}
|
|
`}
|
|
aria-current={isActive(item) ? 'page' : undefined}
|
|
>
|
|
{item.label}
|
|
<span
|
|
className={`
|
|
absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-[var(--color-brand-primary)] rounded-full
|
|
transition-all duration-200 ease-out
|
|
${isActive(item)
|
|
? 'opacity-100 scale-x-100'
|
|
: 'opacity-0 scale-x-0'
|
|
}
|
|
`}
|
|
/>
|
|
</StaticLink>
|
|
)
|
|
))}
|
|
</nav>
|
|
|
|
<div className="hidden md:flex items-center gap-3">
|
|
<Button
|
|
size="sm"
|
|
asChild
|
|
>
|
|
<StaticLink href="/contact" data-testid="consult-button">立即咨询</StaticLink>
|
|
</Button>
|
|
</div>
|
|
|
|
<button
|
|
className="md:hidden p-3 -mr-3 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-primary-lighter)] rounded-lg transition-all duration-200 active:scale-95"
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
onKeyDown={handleKeyDown}
|
|
aria-expanded={isOpen}
|
|
aria-controls="mobile-menu"
|
|
aria-label={isOpen ? '关闭菜单' : '打开菜单'}
|
|
data-testid="mobile-menu-button"
|
|
style={{ minWidth: '44px', minHeight: '44px' }}
|
|
>
|
|
{isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<AnimatePresence mode="wait">
|
|
{isOpen && (
|
|
<motion.div
|
|
ref={focusTrapRef}
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
className="fixed inset-0 z-40 md:hidden"
|
|
>
|
|
<div
|
|
className="absolute inset-0 bg-black/30 backdrop-blur-sm"
|
|
onClick={() => setIsOpen(false)}
|
|
aria-hidden="true"
|
|
/>
|
|
<motion.div
|
|
initial={{ x: '100%' }}
|
|
animate={{ x: 0 }}
|
|
exit={{ x: '100%' }}
|
|
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
|
className="absolute top-16 right-0 bottom-0 left-0 bg-[var(--color-bg-primary)]/98 backdrop-blur-xl shadow-2xl overflow-y-auto"
|
|
id="mobile-menu"
|
|
role="navigation"
|
|
aria-label="移动端导航"
|
|
data-testid="mobile-navigation"
|
|
>
|
|
<nav className="container-wide py-6">
|
|
{NAVIGATION_V2.map((item, index) => (
|
|
<motion.div
|
|
key={item.id}
|
|
initial={{ x: 20, opacity: 0 }}
|
|
animate={{ x: 0, opacity: 1 }}
|
|
transition={{ delay: index * 0.05 }}
|
|
>
|
|
<StaticLink
|
|
href={item.href}
|
|
onClick={(e) => handleNavClick(e, item)}
|
|
className={`
|
|
block px-4 py-4 text-base font-medium rounded-lg
|
|
transition-all duration-200
|
|
${isActive(item)
|
|
? 'text-[var(--color-text-primary)] bg-[var(--color-primary-lighter)] border-l-4 border-[var(--color-brand-primary)]'
|
|
: 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-primary-lighter)]'
|
|
}
|
|
`}
|
|
style={{ minHeight: '48px', display: 'flex', alignItems: 'center' }}
|
|
>
|
|
{item.label}
|
|
</StaticLink>
|
|
</motion.div>
|
|
))}
|
|
<div className="mt-6 px-4 pt-6 border-t border-[var(--color-border-primary)]">
|
|
<Button
|
|
className="w-full"
|
|
asChild
|
|
size="lg"
|
|
>
|
|
<StaticLink href="/contact" onClick={() => setIsOpen(false)}>
|
|
立即咨询
|
|
</StaticLink>
|
|
</Button>
|
|
</div>
|
|
</nav>
|
|
</motion.div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function HeaderFallback() {
|
|
return (
|
|
<header className="fixed top-0 left-0 right-0 z-50 bg-transparent">
|
|
<div className="container-wide">
|
|
<div className="flex items-center justify-between h-16">
|
|
<div className="h-8 w-8 bg-[var(--color-skeleton-bg)] animate-pulse rounded" />
|
|
<nav className="hidden md:flex items-center gap-1">
|
|
{[1, 2, 3, 4, 5].map((i) => (
|
|
<div key={i} className="h-6 w-16 bg-[var(--color-skeleton-bg)] animate-pulse rounded mx-1" />
|
|
))}
|
|
</nav>
|
|
<div className="h-9 w-20 bg-[var(--color-skeleton-bg)] animate-pulse rounded" />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
export function Header() {
|
|
return (
|
|
<Suspense fallback={<HeaderFallback />}>
|
|
<HeaderContent />
|
|
</Suspense>
|
|
);
|
|
}
|