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

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

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

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

chore: 更新依赖和ESLint配置

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

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>