feat: 添加预览效果页面并优化交互效果

refactor: 优化代码健壮性和类型安全

style: 更新字体样式和全局CSS

fix: 修复IntersectionObserver潜在空引用问题

chore: 更新依赖和ESLint配置

build: 更新构建ID和路由配置

src/components/layout/header.tsx

@@ -5,6 +5,7 @@ import { Menu, X } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Button } from '@/components/ui/button';
 import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
+import { useFocusTrap } from '@/hooks/use-focus-trap';
 
 export function Header() {
   const [isOpen, setIsOpen] = useState(false);
@@ -12,6 +13,7 @@ export function Header() {
   const [isScrolled, setIsScrolled] = useState(false);
   const isScrollingRef = useRef(false);
   const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const focusTrapRef = useFocusTrap<HTMLDivElement>(isOpen);
 
   const handleNavClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
     e.preventDefault();
@@ -43,6 +45,26 @@ export function Header() {
     }
   }, []);
 
+  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);
@@ -55,12 +77,15 @@ export function Header() {
       const scrollPosition = window.scrollY + 100;
 
       for (let i = sections.length - 1; i >= 0; i--) {
-        const section = document.getElementById(sections[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(sections[i]);
+            setActiveSection(sectionId);
             break;
           }
         }
@@ -95,7 +120,8 @@ export function Header() {
             <a 
               href="#home" 
               onClick={(e) => handleNavClick(e, '#home')}
-              className="flex items-center group"
+              onKeyDown={(e) => handleKeyDown(e, '#home')}
+              className="flex items-center group focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-offset-2 rounded-sm"
             >
               <img 
                 src="/logo.svg" 
@@ -110,9 +136,11 @@ export function Header() {
                   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('#', '')
                       ? 'text-[#1C1C1C]'
                       : 'text-[#3D3D3D] hover:text-[#1C1C1C]'
@@ -147,8 +175,9 @@ export function Header() {
             </div>
 
             <button
-              className="md:hidden p-2 -mr-2 text-[#3D3D3D] hover:text-[#1C1C1C] transition-colors"
+              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)}
               aria-expanded={isOpen}
               aria-controls="mobile-menu"
               aria-label={isOpen ? '关闭菜单' : '打开菜单'}
@@ -162,6 +191,7 @@ export function Header() {
       <AnimatePresence>
         {isOpen && (
           <motion.div 
+            ref={focusTrapRef}
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
@@ -170,6 +200,7 @@ export function Header() {
             <div 
               className="absolute inset-0 bg-black/20 backdrop-blur-sm"
               onClick={() => setIsOpen(false)}
+              aria-hidden="true"
             />
             <motion.div 
               initial={{ y: -20, opacity: 0 }}
@@ -187,6 +218,7 @@ export function Header() {
                     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 }}
@@ -194,6 +226,7 @@ export function Header() {
                       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]'