张翔
415a103a24
- 调整主色调从 #1C1C1C 至 #1A1A1A，优化视觉层次 - 更新背景色系为暖白色调 (#FAFAF7, #F5F4F0 等) - 配置中文字体栈，添加 serif 字体支持 - 优化文本颜色梯度，提升可读性 - 调整边框颜色，统一水墨风格 - 添加 Google Search Console 验证码配置项 - 新增桌面应用架构专家代理配置文件 - 重构 E2E 测试等待策略，提升稳定性 - 添加回归测试脚本，增强质量保障
292 lines
11 KiB
TypeScript
292 lines
11 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, MessageCircle } from 'lucide-react';
|
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
import { Button } from '@/components/ui/button';
|
|
import { ThemeToggle } from '@/components/ui/theme-toggle';
|
|
import { useTheme } from '@/contexts/theme-context';
|
|
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);
|
|
const { resolvedTheme } = useTheme();
|
|
|
|
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) => {
|
|
setIsOpen(false);
|
|
// StaticLink 会 e.preventDefault()，需要手动执行导航
|
|
window.location.href = item.href;
|
|
}, []);
|
|
|
|
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)]/90 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="relative flex items-center group/logo"
|
|
aria-label="返回首页"
|
|
>
|
|
<div className="absolute inset-0 rounded-lg bg-[var(--color-brand-primary)] opacity-0 group-hover/logo:opacity-5 blur-xl transition-all duration-500 scale-75 group-hover/logo:scale-100" />
|
|
<Image
|
|
src="/logo.svg"
|
|
alt={COMPANY_INFO.name}
|
|
width={120}
|
|
height={30}
|
|
className={`relative transition-all duration-300 group-hover/logo:scale-105 w-auto h-8 md:h-8 ${resolvedTheme === 'dark' ? 'dark:invert dark:brightness-0 dark:hue-rotate-180' : ''}`}
|
|
loading="eager"
|
|
priority
|
|
suppressHydrationWarning
|
|
/>
|
|
</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}
|
|
groups={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)}
|
|
/>
|
|
) : (
|
|
<div key={item.id} className="-mx-2 px-2 py-2">
|
|
<StaticLink
|
|
href={item.href}
|
|
onClick={(e) => handleNavClick(e, item)}
|
|
className={`
|
|
relative block px-3 py-1.5 text-sm font-medium
|
|
transition-all duration-300 rounded-md
|
|
${isActive(item)
|
|
? 'text-[var(--color-text-primary)] bg-[var(--color-brand-primary-bg)]'
|
|
: 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)]'
|
|
}
|
|
`}
|
|
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>
|
|
</div>
|
|
)
|
|
))}
|
|
</nav>
|
|
|
|
<div className="hidden md:flex items-center gap-3">
|
|
<ThemeToggle />
|
|
<Button
|
|
size="sm"
|
|
asChild
|
|
className="hidden lg:flex"
|
|
>
|
|
<StaticLink href="/contact" data-testid="consult-button">
|
|
<MessageCircle className="w-4 h-4 mr-1.5" />
|
|
咨询
|
|
</StaticLink>
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
asChild
|
|
className="lg:hidden"
|
|
>
|
|
<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-[var(--color-primary)]/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-brand-primary-bg)]'
|
|
: '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)]">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<span className="text-sm text-[var(--color-text-muted)]">外观模式</span>
|
|
<ThemeToggle />
|
|
</div>
|
|
<Button
|
|
className="w-full"
|
|
asChild
|
|
size="lg"
|
|
>
|
|
<StaticLink href="/contact" onClick={() => setIsOpen(false)}>
|
|
<MessageCircle className="w-4 h-4 mr-2" />
|
|
咨询专家
|
|
</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>
|
|
);
|
|
}
|