From 44bf88b200d7b89405457cb518489dc2df74145d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= <xiangzhang1024@gmail.com>
Date: Fri, 27 Feb 2026 20:26:08 +0800
Subject: [PATCH] feat: add mobile tab bar navigation

---
 src/app/globals.css                      | 16 ++++++
 src/app/layout.tsx                       |  2 +
 src/components/layout/mobile-tab-bar.tsx | 69 ++++++++++++++++++++++++
 3 files changed, 87 insertions(+)
 create mode 100644 src/components/layout/mobile-tab-bar.tsx

diff --git a/src/app/globals.css b/src/app/globals.css
index 567c196..830b40b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1102,3 +1102,19 @@
 .icon-container-brand:hover {
   box-shadow: 0 4px 12px rgba(196, 30, 58, 0.15);
 }
+
+/* 移动端安全区域适配 */
+.safe-area-inset-bottom {
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+/* 隐藏移动端底部导航栏时的页面底部间距 */
+body {
+  padding-bottom: 0;
+}
+
+@media (max-width: 767px) {
+  body {
+    padding-bottom: 64px;
+  }
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b5e0852..854f7eb 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import "./globals.css";
 import { ThemeProvider } from "@/contexts/theme-context";
 import { WebVitals } from "@/components/analytics/web-vitals";
 import { OrganizationSchema, WebsiteSchema } from "@/components/seo/structured-data";
+import { MobileTabBar } from "@/components/layout/mobile-tab-bar";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -145,6 +146,7 @@ export default function RootLayout({
         <ThemeProvider>
           {children}
         </ThemeProvider>
+        <MobileTabBar />
       </body>
     </html>
   );
diff --git a/src/components/layout/mobile-tab-bar.tsx b/src/components/layout/mobile-tab-bar.tsx
new file mode 100644
index 0000000..cf7d7d1
--- /dev/null
+++ b/src/components/layout/mobile-tab-bar.tsx
@@ -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>
+  );
+}