张翔
9451814ca4
refactor: 重构页面结构和导航逻辑 fix: 修复移动端菜单导航和滚动行为 perf: 优化图片加载性能和资源请求 test: 添加端到端测试和性能测试用例 docs: 更新.gitignore文件 chore: 更新依赖和配置 style: 优化代码格式和类型安全 ci: 调整Playwright测试超时时间 build: 更新Next.js配置和构建选项
71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
'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 === '/';
|
|
}
|
|
const basePath = href.split('#')[0] || href;
|
|
return pathname.startsWith(basePath);
|
|
};
|
|
|
|
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>
|
|
);
|
|
}
|