张翔
2f45818724
- Add automatic route change tracking for SPA navigation - Implement Cookie consent banner for GDPR compliance - Add performance tracking (LCP, FID, CLS Web Vitals) - Add outbound link click tracking - Integrate contact form submission tracking with conversion events - Add CTA button click tracking in hero section - Integrate error tracking in ErrorBoundary component - Extend analytics utility library with 15+ tracking functions - Configure IP anonymization and privacy settings - Remove unused test files and deployment scripts - Update case studies to include only specified cases - Fix mobile navigation active state issues - Fix lint errors in test files and components BREAKING CHANGE: Google Analytics now requires user consent before tracking
99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useLayoutEffect, useRef } from 'react';
|
|
import { StaticLink } from '@/components/ui/static-link';
|
|
import { usePathname, useSearchParams } 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 searchParams = useSearchParams();
|
|
const [hash, setHash] = useState('');
|
|
const isInitializedRef = useRef(false);
|
|
|
|
useLayoutEffect(() => {
|
|
if (!isInitializedRef.current) {
|
|
isInitializedRef.current = true;
|
|
setHash(window.location.hash.slice(1));
|
|
}
|
|
|
|
const handleHashChange = () => {
|
|
setHash(window.location.hash.slice(1));
|
|
};
|
|
|
|
window.addEventListener('hashchange', handleHashChange);
|
|
return () => window.removeEventListener('hashchange', handleHashChange);
|
|
}, []);
|
|
|
|
const isActive = (_href: string, id: string) => {
|
|
if (id === 'contact') {
|
|
return pathname === '/contact';
|
|
}
|
|
|
|
if (pathname === '/') {
|
|
const section = searchParams.get('section');
|
|
const currentSection = section || hash;
|
|
|
|
if (id === 'home') {
|
|
return !currentSection || currentSection === 'home';
|
|
}
|
|
return currentSection === id;
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
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, tab.id);
|
|
|
|
return (
|
|
<StaticLink
|
|
key={tab.id}
|
|
href={tab.href}
|
|
className="flex flex-col items-center justify-center flex-1 h-full relative group min-h-12"
|
|
>
|
|
<div className="relative flex flex-col items-center justify-center py-2">
|
|
<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-1 w-8 h-0.5 bg-[#C41E3A] rounded-full"
|
|
transition={{ type: 'spring', stiffness: 380, damping: 30 }}
|
|
/>
|
|
)}
|
|
</div>
|
|
</StaticLink>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|