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]'

src/components/layout/mobile-menu.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { Menu, X } from 'lucide-react';
 import { NAVIGATION } from '@/lib/constants';
 import { cn } from '@/lib/utils';
+import { useFocusTrap } from '@/hooks/use-focus-trap';
 
 interface MobileMenuProps {
   className?: string;
@@ -11,6 +12,7 @@ interface MobileMenuProps {
 
 export function MobileMenu({ className }: MobileMenuProps) {
   const [isOpen, setIsOpen] = useState(false);
+  const focusTrapRef = useFocusTrap<HTMLDivElement>(isOpen);
 
   useEffect(() => {
     if (isOpen) {
@@ -32,12 +34,29 @@ export function MobileMenu({ className }: MobileMenuProps) {
     }
   };
 
+  const handleKeyDown = (event: React.KeyboardEvent, href?: string) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      if (href) {
+        handleNavClick(href);
+      } else {
+        setIsOpen(!isOpen);
+      }
+    }
+    if (event.key === 'Escape' && isOpen) {
+      setIsOpen(false);
+    }
+  };
+
   return (
-    <div className={cn('lg:hidden', className)}>
+    <div className={cn('lg:hidden', className)} ref={focusTrapRef}>
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="p-2 rounded-md hover:bg-[#F5F5F5] transition-colors"
+        onKeyDown={(e) => handleKeyDown(e)}
+        className="p-2 rounded-md hover:bg-[#F5F5F5] transition-colors focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-offset-2"
         aria-label={isOpen ? '关闭菜单' : '打开菜单'}
+        aria-expanded={isOpen}
+        aria-controls="mobile-menu-panel"
       >
         {isOpen ? (
           <X className="w-6 h-6 text-[#171717]" />
@@ -51,16 +70,23 @@ export function MobileMenu({ className }: MobileMenuProps) {
           <div
             className="fixed inset-0 bg-black/20 backdrop-blur-sm z-40"
             onClick={() => setIsOpen(false)}
+            aria-hidden="true"
           />
           
-          <nav className="fixed top-16 left-0 right-0 bg-white border-b border-[#E5E5E5] z-50 shadow-lg">
+          <nav 
+            id="mobile-menu-panel"
+            className="fixed top-16 left-0 right-0 bg-white border-b border-[#E5E5E5] z-50 shadow-lg"
+            role="navigation"
+            aria-label="移动端导航"
+          >
             <div className="container-wide py-4">
-              <ul className="space-y-1">
+              <ul className="space-y-1" role="list">
                 {NAVIGATION.map((item) => (
                   <li key={item.id}>
                     <button
                       onClick={() => handleNavClick(item.href)}
-                      className="block w-full text-left px-4 py-3 text-[#171717] hover:bg-[#FEF2F4] hover:text-[#C41E3A] rounded-md transition-colors"
+                      onKeyDown={(e) => handleKeyDown(e, item.href)}
+                      className="block w-full text-left px-4 py-3 text-[#171717] hover:bg-[#FEF2F4] hover:text-[#C41E3A] rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-inset"
                     >
                       {item.label}
                     </button>