feat: add mobile optimization with hooks and touch components

2026-02-13 14:46:21 +08:00
parent e829451fa3
commit 7914decdaf
7 changed files with 396 additions and 0 deletions
@@ -0,0 +1,76 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Menu, X } from 'lucide-react';
+import { NAVIGATION } from '@/lib/constants';
+import { cn } from '@/lib/utils';
+
+interface MobileMenuProps {
+  className?: string;
+}
+
+export function MobileMenu({ className }: MobileMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen]);
+
+  const handleNavClick = (href: string) => {
+    setIsOpen(false);
+    const element = document.querySelector(href);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
+  return (
+    <div className={cn('lg:hidden', className)}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="p-2 rounded-md hover:bg-[#F5F5F5] transition-colors"
+        aria-label={isOpen ? '关闭菜单' : '打开菜单'}
+      >
+        {isOpen ? (
+          <X className="w-6 h-6 text-[#171717]" />
+        ) : (
+          <Menu className="w-6 h-6 text-[#171717]" />
+        )}
+      </button>
+
+      {isOpen && (
+        <>
+          <div
+            className="fixed inset-0 bg-black/20 backdrop-blur-sm z-40"
+            onClick={() => setIsOpen(false)}
+          />
+          
+          <nav className="fixed top-16 left-0 right-0 bg-white border-b border-[#E5E5E5] z-50 shadow-lg">
+            <div className="container-wide py-4">
+              <ul className="space-y-1">
+                {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"
+                    >
+                      {item.label}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </nav>
+        </>
+      )}
+    </div>
+  );
+}