feat: add dark mode support with theme toggle
This commit is contained in:
张翔
+136
-111
@@ -1,26 +1,23 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { Menu } from 'lucide-react';
|
||||
import { Menu, X } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
|
||||
import { ThemeToggle } from '@/components/ui/theme-toggle';
|
||||
import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export function Header() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [activeSection, setActiveSection] = useState('home');
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
|
||||
// 处理平滑滚动
|
||||
const handleNavClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
|
||||
e.preventDefault();
|
||||
const targetId = href.replace('#', '');
|
||||
const element = document.getElementById(targetId);
|
||||
|
||||
if (element) {
|
||||
const headerOffset = 80; // header高度
|
||||
const headerOffset = 64;
|
||||
const elementPosition = element.getBoundingClientRect().top;
|
||||
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
|
||||
|
||||
@@ -34,15 +31,12 @@ export function Header() {
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 监听滚动，更新激活状态和header样式
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
// 更新header背景
|
||||
setIsScrolled(window.scrollY > 10);
|
||||
setIsScrolled(window.scrollY > 20);
|
||||
|
||||
// 计算当前激活的section
|
||||
const sections = NAVIGATION.map(item => item.href.replace('#', ''));
|
||||
const scrollPosition = window.scrollY + 100; // 添加偏移量
|
||||
const scrollPosition = window.scrollY + 100;
|
||||
|
||||
for (let i = sections.length - 1; i >= 0; i--) {
|
||||
const section = document.getElementById(sections[i]);
|
||||
@@ -57,114 +51,145 @@ export function Header() {
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
handleScroll(); // 初始化
|
||||
handleScroll();
|
||||
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header
|
||||
className={cn(
|
||||
"fixed top-0 left-0 right-0 z-50 transition-all duration-300",
|
||||
isScrolled
|
||||
? "bg-white/95 backdrop-blur-md shadow-sm border-b border-[#E8E0E0]"
|
||||
: "bg-transparent"
|
||||
)}
|
||||
>
|
||||
<div className="container-custom">
|
||||
<div className="flex items-center justify-between h-20">
|
||||
{/* Logo */}
|
||||
<Link
|
||||
href="#home"
|
||||
onClick={(e) => handleNavClick(e, '#home')}
|
||||
className="flex items-center"
|
||||
>
|
||||
<img src="/logo.svg" alt={COMPANY_INFO.name} className="h-10 w-auto" />
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden lg:flex items-center gap-1">
|
||||
{NAVIGATION.map((item) => (
|
||||
<a
|
||||
key={item.id}
|
||||
href={item.href}
|
||||
onClick={(e) => handleNavClick(e, item.href)}
|
||||
className={cn(
|
||||
"relative px-4 py-2 text-sm font-medium transition-all duration-200",
|
||||
activeSection === item.id.replace('#', '')
|
||||
? "text-[#C41E3A]"
|
||||
: "text-[#4A4A4A] hover:text-[#C41E3A]"
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
{/* 活跃指示条 */}
|
||||
<span
|
||||
className={cn(
|
||||
"absolute bottom-0 left-1/2 -translate-x-1/2 h-0.5 bg-[#C41E3A] transition-all duration-200",
|
||||
activeSection === item.id.replace('#', '') ? "w-6" : "w-0"
|
||||
)}
|
||||
/>
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* CTA Button - Desktop */}
|
||||
<div className="hidden lg:block">
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
const element = document.getElementById('contact');
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}}
|
||||
<>
|
||||
<header
|
||||
className={`
|
||||
fixed top-0 left-0 right-0 z-50
|
||||
transition-all duration-300 ease-out
|
||||
${isScrolled
|
||||
? 'bg-white/95 dark:bg-[#171717]/95 backdrop-blur-sm border-b border-[#E5E5E5] dark:border-[#333333]'
|
||||
: 'bg-transparent'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className="container-wide">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
<a
|
||||
href="#home"
|
||||
onClick={(e) => handleNavClick(e, '#home')}
|
||||
className="flex items-center group"
|
||||
>
|
||||
立即咨询
|
||||
</Button>
|
||||
</div>
|
||||
<img
|
||||
src="/logo.svg"
|
||||
alt={COMPANY_INFO.name}
|
||||
className="h-8 w-auto transition-transform duration-200 group-hover:scale-105"
|
||||
/>
|
||||
</a>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<Sheet open={isOpen} onOpenChange={setIsOpen}>
|
||||
<SheetTrigger asChild className="lg:hidden">
|
||||
<Button variant="ghost" size="icon">
|
||||
<Menu className="h-6 w-6" />
|
||||
<nav className="hidden md:flex items-center gap-1">
|
||||
{NAVIGATION.map((item) => (
|
||||
<a
|
||||
key={item.id}
|
||||
href={item.href}
|
||||
onClick={(e) => handleNavClick(e, item.href)}
|
||||
className={`
|
||||
relative px-3 py-1.5 text-sm font-medium
|
||||
transition-colors duration-200
|
||||
${activeSection === item.id.replace('#', '')
|
||||
? 'text-[#C41E3A]'
|
||||
: 'text-[#525252] dark:text-[#D4D4D4] hover:text-[#C41E3A]'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{item.label}
|
||||
{activeSection === item.id.replace('#', '') && (
|
||||
<span className="absolute bottom-0 left-1/2 -translate-x-1/2 w-1 h-1 bg-[#C41E3A] rounded-full" />
|
||||
)}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="hidden md:flex items-center gap-3">
|
||||
<ThemeToggle />
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
const element = document.getElementById('contact');
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}}
|
||||
>
|
||||
联系我们
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="right" className="w-[300px] bg-white">
|
||||
<div className="flex flex-col gap-2 mt-8">
|
||||
{NAVIGATION.map((item) => (
|
||||
<a
|
||||
key={item.id}
|
||||
href={item.href}
|
||||
onClick={(e) => handleNavClick(e, item.href)}
|
||||
className={cn(
|
||||
"px-4 py-3 text-lg font-medium rounded-lg transition-all duration-200",
|
||||
activeSection === item.id.replace('#', '')
|
||||
? "text-[#C41E3A] bg-[#FEF2F4]"
|
||||
: "text-[#4A4A4A] hover:text-[#C41E3A] hover:bg-[#F5F0F0]"
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
))}
|
||||
<div className="mt-4 pt-4 border-t border-[#E8E0E0]">
|
||||
<Button
|
||||
className="w-full"
|
||||
onClick={() => {
|
||||
const element = document.getElementById('contact');
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
立即咨询
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
const element = document.getElementById('about');
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}}
|
||||
>
|
||||
了解更多
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="md:hidden p-2 -mr-2 text-[#525252] dark:text-[#D4D4D4] hover:text-[#C41E3A] transition-colors"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
{isOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
{isOpen && (
|
||||
<div className="fixed inset-0 z-40 md:hidden">
|
||||
<div
|
||||
className="absolute inset-0 bg-black/10 backdrop-blur-sm"
|
||||
onClick={() => setIsOpen(false)}
|
||||
/>
|
||||
<div className="absolute top-16 left-0 right-0 bg-white dark:bg-[#171717] border-b border-[#E5E5E5] dark:border-[#333333] animate-fade-in">
|
||||
<nav className="container-wide py-4">
|
||||
{NAVIGATION.map((item) => (
|
||||
<a
|
||||
key={item.id}
|
||||
href={item.href}
|
||||
onClick={(e) => handleNavClick(e, item.href)}
|
||||
className={`
|
||||
block px-4 py-3 text-base font-medium
|
||||
transition-colors duration-200
|
||||
border-l-2
|
||||
${activeSection === item.id.replace('#', '')
|
||||
? 'text-[#C41E3A] border-[#C41E3A] bg-[#FEF2F4] dark:bg-[#1A0F11]'
|
||||
: 'text-[#525252] dark:text-[#D4D4D4] border-transparent hover:text-[#C41E3A] hover:bg-[#FAFAFA] dark:hover:bg-[#262626]'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
))}
|
||||
<div className="mt-4 px-4 pt-4 border-t border-[#E5E5E5] space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-[#737373]">主题模式</span>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
<Button
|
||||
className="w-full"
|
||||
onClick={() => {
|
||||
const element = document.getElementById('contact');
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
联系我们
|
||||
</Button>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user