feat: add mobile tab bar navigation

2026-02-27 20:26:08 +08:00
parent b426bc9b62
commit 44bf88b200
3 changed files with 87 additions and 0 deletions
@@ -0,0 +1,69 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Home, Briefcase, Package, FileText, User } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { cn } from '@/lib/utils';
+
+const tabs = [
+  { id: 'home', label: '首页', href: '/', icon: Home },
+  { id: 'services', label: '服务', href: '/#services', icon: Briefcase },
+  { id: 'products', label: '产品', href: '/#products', icon: Package },
+  { id: 'news', label: '新闻', href: '/#news', icon: FileText },
+  { id: 'contact', label: '联系', href: '/#contact', icon: User },
+];
+
+export function MobileTabBar() {
+  const pathname = usePathname();
+
+  const isActive = (href: string) => {
+    if (href === '/') {
+      return pathname === '/';
+    }
+    return pathname.startsWith(href.split('#')[0]);
+  };
+
+  return (
+    <nav className="fixed bottom-0 left-0 right-0 z-50 md:hidden bg-white/95 backdrop-blur-xl border-t border-[#E5E5E5] safe-area-inset-bottom">
+      <div className="flex items-center justify-around h-16">
+        {tabs.map((tab) => {
+          const Icon = tab.icon;
+          const active = isActive(tab.href);
+
+          return (
+            <Link
+              key={tab.id}
+              href={tab.href}
+              className="flex flex-col items-center justify-center flex-1 h-full relative group"
+            >
+              <div className="relative flex flex-col items-center justify-center">
+                <Icon
+                  className={cn(
+                    'w-6 h-6 transition-colors',
+                    active ? 'text-[#C41E3A]' : 'text-[#5C5C5C] group-hover:text-[#1C1C1C]'
+                  )}
+                />
+                <span
+                  className={cn(
+                    'text-xs mt-1 transition-colors',
+                    active ? 'text-[#C41E3A] font-medium' : 'text-[#5C5C5C]'
+                  )}
+                >
+                  {tab.label}
+                </span>
+                {active && (
+                  <motion.div
+                    layoutId="activeTab"
+                    className="absolute -bottom-2 w-8 h-0.5 bg-[#C41E3A] rounded-full"
+                    transition={{ type: 'spring', stiffness: 380, damping: 30 }}
+                  />
+                )}
+              </div>
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}