feat(website): 三轮视觉改造与页面过渡动画
改造概要（30项）： - 第一轮：Hero重构/Section差异化/SocialProof强化/CTA对比度/About架构 - 第二轮：字体优化/背景交替/Solutions差异化/Footer五列/MegaDropdown修复 - 第三轮：卡片交互/表单层级/CTA统一/时间线标记/连接线/三列布局/移动导航/Button微交互/SEO Schema - P3-2：template.tsx+Framer Motion页面过渡/loading.tsx加载状态 - 清理：删除未用组件/hooks，修复重复移动导航，清理冗余CSS
This commit is contained in:
张翔
@@ -14,16 +14,16 @@ interface BreadcrumbProps {
|
||||
|
||||
export function Breadcrumb({ items }: BreadcrumbProps) {
|
||||
return (
|
||||
<nav aria-label="breadcrumb" className="flex items-center space-x-1 text-sm text-[#5C5C5C] py-4">
|
||||
<StaticLink href="/" className="flex items-center hover:text-[#C41E3A] transition-colors" aria-label="返回首页">
|
||||
<nav aria-label="breadcrumb" className="flex items-center space-x-1 text-sm text-[var(--color-text-placeholder)] py-4">
|
||||
<StaticLink href="/" className="flex items-center hover:text-[var(--color-brand-primary)] transition-colors" aria-label="返回首页">
|
||||
<Home className="w-4 h-4" />
|
||||
</StaticLink>
|
||||
{items.map((item, index) => (
|
||||
<div key={index} className="flex items-center">
|
||||
<ChevronRight className="w-4 h-4 text-[#E5E5E5]" />
|
||||
<ChevronRight className="w-4 h-4 text-[var(--color-border-primary)]" />
|
||||
<StaticLink
|
||||
href={item.href}
|
||||
className="ml-1 hover:text-[#C41E3A] transition-colors"
|
||||
className="ml-1 hover:text-[var(--color-brand-primary)] transition-colors"
|
||||
>
|
||||
{item.label}
|
||||
</StaticLink>
|
||||
|
||||
@@ -5,10 +5,10 @@ import { COMPANY_INFO, NAVIGATION_V2, MEGA_DROPDOWN_DATA } from '@/lib/constants
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="bg-[#1C1C1C] text-white py-16" data-testid="footer" role="contentinfo">
|
||||
<footer className="bg-[var(--color-footer-bg)] text-white py-16" data-testid="footer" role="contentinfo">
|
||||
<div className="container-wide">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-12">
|
||||
<div data-testid="card-brand">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 lg:gap-8">
|
||||
<div data-testid="card-brand" className="lg:col-span-2">
|
||||
<div className="mb-6">
|
||||
<Image
|
||||
src="/logo-light.svg"
|
||||
@@ -19,12 +19,12 @@ export function Footer() {
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<p className="text-[#A0A0A0] text-sm leading-relaxed mb-6">
|
||||
<p className="text-[var(--color-footer-text)] text-sm leading-relaxed mb-6">
|
||||
{COMPANY_INFO.description}
|
||||
</p>
|
||||
<div className="pt-6 border-t border-[#333]">
|
||||
<p className="text-sm text-[#A0A0A0] mb-3">关注公众号</p>
|
||||
<div className="inline-block p-2 rounded-lg border border-[#333]">
|
||||
<div className="pt-6 border-t border-[var(--color-footer-border)]">
|
||||
<p className="text-sm text-[var(--color-footer-text)] mb-3">关注公众号</p>
|
||||
<div className="inline-block p-2 rounded-lg border border-[var(--color-footer-border)]">
|
||||
<Image
|
||||
src="/images/qrcode_for_gh_a297181ff548_258.jpg"
|
||||
alt="微信公众号二维码"
|
||||
@@ -44,7 +44,7 @@ export function Footer() {
|
||||
<li key={item.id}>
|
||||
<StaticLink
|
||||
href={item.href}
|
||||
className="text-[#A0A0A0] hover:text-white transition-colors duration-200 text-sm"
|
||||
className="text-[var(--color-footer-text)] hover:text-white transition-colors duration-200 text-sm"
|
||||
>
|
||||
{item.label}
|
||||
</StaticLink>
|
||||
@@ -54,26 +54,23 @@ export function Footer() {
|
||||
</div>
|
||||
|
||||
<div data-testid="card-products">
|
||||
<h3 className="font-semibold text-base mb-5 text-white">产品</h3>
|
||||
<h3 className="font-semibold text-base mb-5 text-white">产品与方案</h3>
|
||||
<ul className="space-y-3">
|
||||
{(MEGA_DROPDOWN_DATA.products ?? []).map((item) => (
|
||||
<li key={item.id}>
|
||||
<StaticLink
|
||||
href={item.href}
|
||||
className="text-[#A0A0A0] hover:text-white transition-colors duration-200 text-sm"
|
||||
className="text-[var(--color-footer-text)] hover:text-white transition-colors duration-200 text-sm"
|
||||
>
|
||||
{item.title}
|
||||
</StaticLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<h3 className="font-semibold text-base mb-5 mt-8 text-white">解决方案</h3>
|
||||
<ul className="space-y-3">
|
||||
{(MEGA_DROPDOWN_DATA.solutions ?? []).map((item) => (
|
||||
<li key={item.id}>
|
||||
<StaticLink
|
||||
href={item.href}
|
||||
className="text-[#A0A0A0] hover:text-white transition-colors duration-200 text-sm"
|
||||
className="text-[var(--color-footer-text)] hover:text-white transition-colors duration-200 text-sm"
|
||||
>
|
||||
{item.title}
|
||||
</StaticLink>
|
||||
@@ -86,17 +83,17 @@ export function Footer() {
|
||||
<h3 className="font-semibold text-base mb-5 text-white">联系方式</h3>
|
||||
<ul className="space-y-4">
|
||||
<li className="flex items-start gap-3">
|
||||
<MapPin className="w-4 h-4 text-[#C41E3A] mt-0.5 shrink-0" />
|
||||
<span className="text-[#A0A0A0] text-sm">{COMPANY_INFO.address}</span>
|
||||
<MapPin className="w-4 h-4 text-[var(--color-brand-primary)] mt-0.5 shrink-0" />
|
||||
<span className="text-[var(--color-footer-text)] text-sm">{COMPANY_INFO.address}</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<Mail className="w-4 h-4 text-[#C41E3A] shrink-0" />
|
||||
<span className="text-[#A0A0A0] text-sm">{COMPANY_INFO.email}</span>
|
||||
<Mail className="w-4 h-4 text-[var(--color-brand-primary)] shrink-0" />
|
||||
<span className="text-[var(--color-footer-text)] text-sm">{COMPANY_INFO.email}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="mt-6 pt-6 border-t border-[#333]">
|
||||
<p className="text-sm text-[#A0A0A0] mb-3">企业微信业务咨询</p>
|
||||
<div className="inline-block p-2 rounded-lg border border-[#333]">
|
||||
<div className="mt-6 pt-6 border-t border-[var(--color-footer-border)]">
|
||||
<p className="text-sm text-[var(--color-footer-text)] mb-3">企业微信业务咨询</p>
|
||||
<div className="inline-block p-2 rounded-lg border border-[var(--color-footer-border)]">
|
||||
<Image
|
||||
src="/images/149A1D2F-D9FD-49C7-B139-142C50C5FE8B_1_201_a.jpeg"
|
||||
alt="企业微信业务咨询二维码"
|
||||
@@ -110,37 +107,37 @@ export function Footer() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-[#333] mt-12 pt-8 pb-24 md:pb-8">
|
||||
<div className="border-t border-[var(--color-footer-border)] mt-12 pt-8 pb-24 md:pb-8">
|
||||
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p className="text-[#666] text-sm">
|
||||
<p className="text-[var(--color-footer-text-muted)] text-sm">
|
||||
© {new Date().getFullYear()} {COMPANY_INFO.name}. All rights reserved.
|
||||
</p>
|
||||
<div className="flex gap-6">
|
||||
<StaticLink href="/privacy" className="text-[#666] hover:text-white text-sm transition-colors duration-200">
|
||||
<StaticLink href="/privacy" className="text-[var(--color-footer-text-muted)] hover:text-white text-sm transition-colors duration-200">
|
||||
隐私政策
|
||||
</StaticLink>
|
||||
<StaticLink href="/terms" className="text-[#666] hover:text-white text-sm transition-colors duration-200">
|
||||
<StaticLink href="/terms" className="text-[var(--color-footer-text-muted)] hover:text-white text-sm transition-colors duration-200">
|
||||
服务条款
|
||||
</StaticLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-6 pt-6 border-t border-[#333]">
|
||||
<div className="text-center mt-6 pt-6 border-t border-[var(--color-footer-border)]">
|
||||
<div className="flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-4 text-xs">
|
||||
<a
|
||||
href="https://beian.miit.gov.cn/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-[#E0E0E0] hover:text-white transition-colors duration-200"
|
||||
className="text-[var(--color-footer-text-link)] hover:text-white transition-colors duration-200"
|
||||
>
|
||||
{COMPANY_INFO.icp}
|
||||
</a>
|
||||
<span className="hidden sm:inline text-[#999]">|</span>
|
||||
<span className="hidden sm:inline text-[var(--color-footer-text-dim)]">|</span>
|
||||
<a
|
||||
href="https://beian.mps.gov.cn/#/query/webSearch?code=51010602003285"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-[#E0E0E0] hover:text-white transition-colors duration-200 inline-flex items-center gap-1.5"
|
||||
className="text-[var(--color-footer-text-link)] hover:text-white transition-colors duration-200 inline-flex items-center gap-1.5"
|
||||
>
|
||||
<Image
|
||||
src="/images/beian-icon.png"
|
||||
|
||||
@@ -77,7 +77,7 @@ function HeaderContent() {
|
||||
fixed top-0 left-0 right-0 z-50
|
||||
transition-all duration-300 ease-out
|
||||
${isScrolled
|
||||
? 'bg-white/95 backdrop-blur-xl border-b border-[#E2E8F0] shadow-sm'
|
||||
? 'bg-[var(--color-bg-primary)]/95 backdrop-blur-xl border-b border-[var(--color-border-primary)] shadow-sm'
|
||||
: 'bg-transparent'
|
||||
}
|
||||
`}
|
||||
@@ -123,8 +123,8 @@ function HeaderContent() {
|
||||
relative px-3 py-1.5 text-sm font-medium
|
||||
transition-all duration-300
|
||||
${isActive(item)
|
||||
? 'text-[#1C1C1C]'
|
||||
: 'text-[#3D3D3D] hover:text-[#1C1C1C]'
|
||||
? 'text-[var(--color-text-primary)]'
|
||||
: 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'
|
||||
}
|
||||
`}
|
||||
aria-current={isActive(item) ? 'page' : undefined}
|
||||
@@ -132,7 +132,7 @@ function HeaderContent() {
|
||||
{item.label}
|
||||
<span
|
||||
className={`
|
||||
absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-[#C41E3A] rounded-full
|
||||
absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-[var(--color-brand-primary)] rounded-full
|
||||
transition-all duration-200 ease-out
|
||||
${isActive(item)
|
||||
? 'opacity-100 scale-x-100'
|
||||
@@ -155,7 +155,7 @@ function HeaderContent() {
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="md:hidden p-3 -mr-3 text-[#3D3D3D] hover:text-[#1C1C1C] hover:bg-[#F5F5F5] rounded-lg transition-all duration-200 active:scale-95"
|
||||
className="md:hidden p-3 -mr-3 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-primary-lighter)] rounded-lg transition-all duration-200 active:scale-95"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
onKeyDown={handleKeyDown}
|
||||
aria-expanded={isOpen}
|
||||
@@ -190,7 +190,7 @@ function HeaderContent() {
|
||||
animate={{ x: 0 }}
|
||||
exit={{ x: '100%' }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
||||
className="absolute top-16 right-0 bottom-0 left-0 bg-white/98 backdrop-blur-xl shadow-2xl overflow-y-auto"
|
||||
className="absolute top-16 right-0 bottom-0 left-0 bg-[var(--color-bg-primary)]/98 backdrop-blur-xl shadow-2xl overflow-y-auto"
|
||||
id="mobile-menu"
|
||||
role="navigation"
|
||||
aria-label="移动端导航"
|
||||
@@ -211,8 +211,8 @@ function HeaderContent() {
|
||||
block px-4 py-4 text-base font-medium rounded-lg
|
||||
transition-all duration-200
|
||||
${isActive(item)
|
||||
? 'text-[#1C1C1C] bg-[#F5F5F5] border-l-4 border-[#C41E3A]'
|
||||
: 'text-[#3D3D3D] hover:text-[#1C1C1C] hover:bg-[#F5F5F5]'
|
||||
? 'text-[var(--color-text-primary)] bg-[var(--color-primary-lighter)] border-l-4 border-[var(--color-brand-primary)]'
|
||||
: 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-primary-lighter)]'
|
||||
}
|
||||
`}
|
||||
style={{ minHeight: '48px', display: 'flex', alignItems: 'center' }}
|
||||
@@ -221,7 +221,7 @@ function HeaderContent() {
|
||||
</StaticLink>
|
||||
</motion.div>
|
||||
))}
|
||||
<div className="mt-6 px-4 pt-6 border-t border-[#E2E8F0]">
|
||||
<div className="mt-6 px-4 pt-6 border-t border-[var(--color-border-primary)]">
|
||||
<Button
|
||||
className="w-full"
|
||||
asChild
|
||||
@@ -246,13 +246,13 @@ function HeaderFallback() {
|
||||
<header className="fixed top-0 left-0 right-0 z-50 bg-transparent">
|
||||
<div className="container-wide">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
<div className="h-8 w-8 bg-gray-200 animate-pulse rounded" />
|
||||
<div className="h-8 w-8 bg-[var(--color-skeleton-bg)] animate-pulse rounded" />
|
||||
<nav className="hidden md:flex items-center gap-1">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<div key={i} className="h-6 w-16 bg-gray-200 animate-pulse rounded mx-1" />
|
||||
<div key={i} className="h-6 w-16 bg-[var(--color-skeleton-bg)] animate-pulse rounded mx-1" />
|
||||
))}
|
||||
</nav>
|
||||
<div className="h-9 w-20 bg-gray-200 animate-pulse rounded" />
|
||||
<div className="h-9 w-20 bg-[var(--color-skeleton-bg)] animate-pulse rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -2,69 +2,42 @@
|
||||
|
||||
import { useRef, useEffect } from 'react';
|
||||
import { ChevronDown } from 'lucide-react';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import type { MegaDropdownItem } from '@/lib/constants';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
|
||||
interface MegaDropdownItem {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
interface MegaDropdownProps {
|
||||
label: string;
|
||||
items: MegaDropdownItem[];
|
||||
isOpen: boolean;
|
||||
onToggle: () => void;
|
||||
onOpen?: () => void;
|
||||
onClose?: () => void;
|
||||
onOpen: () => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const HOVER_DELAY = 150;
|
||||
|
||||
export function MegaDropdown({ label, items, isOpen, onToggle, onOpen, onClose }: MegaDropdownProps) {
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
if (isOpen) { onToggle(); }
|
||||
}
|
||||
}
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, [isOpen, onToggle]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (hoverTimeoutRef.current) {
|
||||
clearTimeout(hoverTimeoutRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
if (hoverTimeoutRef.current) {
|
||||
clearTimeout(hoverTimeoutRef.current);
|
||||
hoverTimeoutRef.current = null;
|
||||
}
|
||||
if (!isOpen) {
|
||||
if (onOpen) {
|
||||
onOpen();
|
||||
} else {
|
||||
onToggle();
|
||||
}
|
||||
}
|
||||
clearTimeout(timeoutRef.current);
|
||||
onOpen();
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
hoverTimeoutRef.current = setTimeout(() => {
|
||||
if (isOpen) {
|
||||
if (onClose) {
|
||||
onClose();
|
||||
} else {
|
||||
onToggle();
|
||||
}
|
||||
}
|
||||
}, HOVER_DELAY);
|
||||
timeoutRef.current = setTimeout(onClose, 150);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
return () => clearTimeout(timeoutRef.current);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div ref={dropdownRef} className="relative" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
|
||||
<button
|
||||
@@ -73,8 +46,8 @@ export function MegaDropdown({ label, items, isOpen, onToggle, onOpen, onClose }
|
||||
flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md
|
||||
transition-all duration-200
|
||||
${isOpen
|
||||
? 'text-[#C41E3A] bg-[#FEF2F4]'
|
||||
: 'text-[#3D3D3D] hover:text-[#1C1C1C] hover:bg-[#F5F5F5]'
|
||||
? 'text-[var(--color-brand-primary)] bg-[var(--color-brand-primary-bg)]'
|
||||
: 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)]'
|
||||
}
|
||||
`}
|
||||
aria-expanded={isOpen}
|
||||
@@ -93,19 +66,21 @@ export function MegaDropdown({ label, items, isOpen, onToggle, onOpen, onClose }
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -8 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
className="absolute top-full left-1/2 -translate-x-1/2 mt-3 w-[520px] bg-white rounded-xl border border-[#E5E5E5] shadow-lg p-5 z-50"
|
||||
className="absolute top-full left-1/2 -translate-x-1/2 pt-2 w-[520px] z-50"
|
||||
>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="bg-[var(--color-bg-primary)] rounded-xl border border-[var(--color-border-primary)] shadow-lg p-5">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{items.map((item) => (
|
||||
<StaticLink
|
||||
key={item.id}
|
||||
href={item.href}
|
||||
className="block p-4 rounded-lg border-l-[3px] border-l-[#C41E3A] hover:bg-[#FFFBF5] transition-colors duration-200"
|
||||
className="block p-4 rounded-lg border-l-[3px] border-l-[var(--color-brand-primary)] hover:bg-[var(--color-bg-secondary)] transition-colors duration-200"
|
||||
>
|
||||
<div className="text-sm font-semibold text-[#1C1C1C]">{item.title}</div>
|
||||
<div className="text-xs text-[#5C5C5C] mt-1.5 leading-relaxed">{item.description}</div>
|
||||
<div className="text-sm font-semibold text-[var(--color-text-primary)]">{item.title}</div>
|
||||
<div className="text-xs text-[var(--color-text-placeholder)] mt-1.5 leading-relaxed">{item.description}</div>
|
||||
</StaticLink>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
@@ -46,15 +46,15 @@ export function MobileMenu({ className }: MobileMenuProps) {
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
onKeyDown={(e) => handleKeyDown(e)}
|
||||
className="p-3 rounded-md hover:bg-[#F5F5F5] transition-colors focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-offset-2 min-w-[48px] min-h-[48px] flex items-center justify-center"
|
||||
className="p-3 rounded-md hover:bg-[var(--color-primary-lighter)] transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-brand-primary)] focus:ring-offset-2 min-w-[48px] min-h-[48px] flex items-center justify-center"
|
||||
aria-label={isOpen ? '关闭菜单' : '打开菜单'}
|
||||
aria-expanded={isOpen}
|
||||
aria-controls="mobile-menu-panel"
|
||||
>
|
||||
{isOpen ? (
|
||||
<X className="w-6 h-6 text-[#171717]" />
|
||||
<X className="w-6 h-6 text-[var(--color-text-primary)]" />
|
||||
) : (
|
||||
<Menu className="w-6 h-6 text-[#171717]" />
|
||||
<Menu className="w-6 h-6 text-[var(--color-text-primary)]" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
@@ -68,7 +68,7 @@ export function MobileMenu({ className }: MobileMenuProps) {
|
||||
|
||||
<nav
|
||||
id="mobile-menu-panel"
|
||||
className="fixed top-16 left-0 right-0 bg-white border-b border-[#E5E5E5] z-50 shadow-lg max-h-[calc(100vh-4rem)] overflow-y-auto"
|
||||
className="fixed top-16 left-0 right-0 bg-[var(--color-bg-primary)] border-b border-[var(--color-border-primary)] z-50 shadow-lg max-h-[calc(100vh-4rem)] overflow-y-auto"
|
||||
role="navigation"
|
||||
aria-label="移动端导航"
|
||||
>
|
||||
@@ -81,7 +81,7 @@ export function MobileMenu({ className }: MobileMenuProps) {
|
||||
<button
|
||||
onClick={() => toggleDropdown(item.dropdownKey!)}
|
||||
onKeyDown={(e) => handleKeyDown(e, () => toggleDropdown(item.dropdownKey!))}
|
||||
className="flex items-center justify-between w-full text-left px-4 py-4 text-[#171717] hover:bg-[#FEF2F4] hover:text-[#C41E3A] rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-inset min-h-[48px]"
|
||||
className="flex items-center justify-between w-full text-left px-4 py-4 text-[var(--color-text-primary)] hover:bg-[var(--color-brand-primary-bg)] hover:text-[var(--color-brand-primary)] rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-brand-primary)] focus:ring-inset min-h-[48px]"
|
||||
aria-expanded={expandedDropdown === item.dropdownKey}
|
||||
>
|
||||
{item.label}
|
||||
@@ -99,10 +99,10 @@ export function MobileMenu({ className }: MobileMenuProps) {
|
||||
<StaticLink
|
||||
href={sub.href}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="block px-4 py-3 text-sm text-[#595959] hover:text-[#C41E3A] hover:bg-[#FEF2F4] rounded-md transition-colors"
|
||||
className="block px-4 py-3 text-sm text-[var(--color-text-muted)] hover:text-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-bg)] rounded-md transition-colors"
|
||||
>
|
||||
<span className="font-medium text-[#1C1C1C]">{sub.title}</span>
|
||||
<span className="block text-xs text-[#8C8C8C] mt-0.5">{sub.description}</span>
|
||||
<span className="font-medium text-[var(--color-text-primary)]">{sub.title}</span>
|
||||
<span className="block text-xs text-[var(--color-text-hint)] mt-0.5">{sub.description}</span>
|
||||
</StaticLink>
|
||||
</li>
|
||||
))}
|
||||
@@ -113,7 +113,7 @@ export function MobileMenu({ className }: MobileMenuProps) {
|
||||
<StaticLink
|
||||
href={item.href}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="block px-4 py-4 text-[#171717] hover:bg-[#FEF2F4] hover:text-[#C41E3A] rounded-md transition-colors min-h-[48px]"
|
||||
className="block px-4 py-4 text-[var(--color-text-primary)] hover:bg-[var(--color-brand-primary-bg)] hover:text-[var(--color-brand-primary)] rounded-md transition-colors min-h-[48px]"
|
||||
>
|
||||
{item.label}
|
||||
</StaticLink>
|
||||
|
||||
@@ -61,7 +61,7 @@ describe('MobileTabBar', () => {
|
||||
|
||||
it('should show active indicator', () => {
|
||||
render(<MobileTabBar />);
|
||||
const activeIndicator = document.querySelector('.bg-\\[\\#C41E3A\\]');
|
||||
const activeIndicator = document.querySelector('.bg-\\[var\\(--color-brand-primary\\)\\]');
|
||||
expect(activeIndicator).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { Home, Briefcase, Package, FileText, User } from 'lucide-react';
|
||||
import { Home, Lightbulb, 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: 'solutions', label: '方案', href: '/solutions', icon: Lightbulb },
|
||||
{ id: 'about', label: '关于', href: '/about', icon: FileText },
|
||||
{ id: 'contact', label: '联系', href: '/contact', icon: User },
|
||||
];
|
||||
@@ -27,8 +27,8 @@ export function MobileTabBar() {
|
||||
if (id === 'products') {
|
||||
return pathname === '/products' || pathname.startsWith('/products/');
|
||||
}
|
||||
if (id === 'services') {
|
||||
return pathname === '/services' || pathname.startsWith('/services/');
|
||||
if (id === 'solutions') {
|
||||
return pathname === '/solutions' || pathname.startsWith('/solutions/');
|
||||
}
|
||||
if (id === 'about') {
|
||||
return pathname === '/about';
|
||||
@@ -37,7 +37,7 @@ export function MobileTabBar() {
|
||||
};
|
||||
|
||||
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">
|
||||
<nav className="fixed bottom-0 left-0 right-0 z-50 md:hidden bg-[var(--color-bg-primary)]/95 backdrop-blur-xl border-t border-[var(--color-border-primary)] safe-area-inset-bottom">
|
||||
<div className="flex items-center justify-around h-16">
|
||||
{tabs.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
@@ -53,13 +53,13 @@ export function MobileTabBar() {
|
||||
<Icon
|
||||
className={cn(
|
||||
'w-6 h-6 transition-colors',
|
||||
active ? 'text-[#C41E3A]' : 'text-[#5C5C5C] group-hover:text-[#1C1C1C]'
|
||||
active ? 'text-[var(--color-brand-primary)]' : 'text-[var(--color-text-placeholder)] group-hover:text-[var(--color-text-primary)]'
|
||||
)}
|
||||
/>
|
||||
<span
|
||||
className={cn(
|
||||
'text-xs mt-1 transition-colors',
|
||||
active ? 'text-[#C41E3A] font-medium' : 'text-[#5C5C5C]'
|
||||
active ? 'text-[var(--color-brand-primary)] font-medium' : 'text-[var(--color-text-placeholder)]'
|
||||
)}
|
||||
>
|
||||
{tab.label}
|
||||
@@ -67,7 +67,7 @@ export function MobileTabBar() {
|
||||
{active && (
|
||||
<motion.div
|
||||
layoutId="activeTab"
|
||||
className="absolute -bottom-1 w-8 h-0.5 bg-[#C41E3A] rounded-full"
|
||||
className="absolute -bottom-1 w-8 h-0.5 bg-[var(--color-brand-primary)] rounded-full"
|
||||
transition={{ type: 'spring', stiffness: 380, damping: 30 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -14,23 +14,23 @@ interface PageNavProps {
|
||||
|
||||
export function PageNav({ items }: PageNavProps) {
|
||||
return (
|
||||
<nav aria-label="breadcrumb" className="flex items-center gap-[3px] md:gap-1 text-[11px] md:text-sm text-[#A3A3A3] mb-2 md:mb-8 -ml-0.5">
|
||||
<StaticLink href="/" className="flex items-center w-fit hover:text-[#C41E3A] transition-colors" aria-label="返回首页">
|
||||
<nav aria-label="breadcrumb" className="flex items-center gap-[3px] md:gap-1 text-[11px] md:text-sm text-[var(--color-text-subtle)] mb-2 md:mb-8 -ml-0.5">
|
||||
<StaticLink href="/" className="flex items-center w-fit hover:text-[var(--color-brand-primary)] transition-colors" aria-label="返回首页">
|
||||
<Home className="w-2.5 h-2.5 md:w-3.5 md:h-3.5" />
|
||||
</StaticLink>
|
||||
{items.map((item, index) => {
|
||||
const isLast = index === items.length - 1;
|
||||
return (
|
||||
<div key={index} className="flex items-center gap-[3px] md:gap-1">
|
||||
<ChevronRight className="w-2.5 h-2.5 md:w-3.5 md:h-3.5 text-[#D4D4D4]" />
|
||||
<ChevronRight className="w-2.5 h-2.5 md:w-3.5 md:h-3.5 text-[var(--color-border-secondary)]" />
|
||||
{isLast || !item.href ? (
|
||||
<span className={isLast ? 'text-[#1C1C1C] font-medium' : ''}>
|
||||
<span className={isLast ? 'text-[var(--color-text-primary)] font-medium' : ''}>
|
||||
{item.label}
|
||||
</span>
|
||||
) : (
|
||||
<StaticLink
|
||||
href={item.href}
|
||||
className="hover:text-[#C41E3A] transition-colors"
|
||||
className="hover:text-[var(--color-brand-primary)] transition-colors"
|
||||
>
|
||||
{item.label}
|
||||
</StaticLink>
|
||||
|
||||
Reference in New Issue
Block a user