manual save(2026-01-22 15:47)
This commit is contained in:
@@ -7,6 +7,7 @@ import { News } from './pages/News'
|
||||
import { Contact } from './pages/Contact'
|
||||
import { Cases } from './pages/Cases'
|
||||
import { Learning } from './pages/Learning'
|
||||
import { Assistant } from './pages/Assistant'
|
||||
|
||||
// 页面切换动画配置
|
||||
const pageVariants = {
|
||||
|
||||
72
src/components/Breadcrumbs.tsx
Normal file
72
src/components/Breadcrumbs.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import React, { useMemo } from 'react'
|
||||
import { Link, useLocation } from 'react-router-dom'
|
||||
import { ChevronRight, Home as HomeIcon } from 'lucide-react'
|
||||
import { getLocaleFromPathname, stripLocalePrefix, withLocalePath } from '../lib/i18n'
|
||||
|
||||
export type BreadcrumbItem = {
|
||||
label: string
|
||||
href?: string
|
||||
}
|
||||
|
||||
type BreadcrumbsProps = {
|
||||
items: BreadcrumbItem[]
|
||||
className?: string
|
||||
}
|
||||
|
||||
export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items, className }) => {
|
||||
const location = useLocation()
|
||||
const locale = useMemo(() => getLocaleFromPathname(location.pathname), [location.pathname])
|
||||
|
||||
const homeLabel = locale === 'en' ? 'Home' : '首页'
|
||||
const homeHref = withLocalePath(locale, '/')
|
||||
|
||||
const normalizedItems = useMemo(() => {
|
||||
const prefix = stripLocalePrefix(location.pathname).startsWith('/') ? '' : '/'
|
||||
void prefix
|
||||
return items
|
||||
}, [items, location.pathname])
|
||||
|
||||
return (
|
||||
<nav aria-label={locale === 'en' ? 'Breadcrumb' : '面包屑导航'} className={className}>
|
||||
<ol className="flex flex-wrap items-center gap-1 text-sm text-gray-600">
|
||||
<li className="flex items-center gap-1">
|
||||
<Link
|
||||
to={homeHref}
|
||||
className="inline-flex items-center gap-1 rounded-md px-2 py-1 hover:bg-white/60 hover:text-primary transition-colors"
|
||||
aria-label={locale === 'en' ? 'Go to homepage' : '返回首页'}
|
||||
>
|
||||
<HomeIcon size={16} />
|
||||
<span>{homeLabel}</span>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
{normalizedItems.map((item, index) => {
|
||||
const isLast = index === normalizedItems.length - 1
|
||||
return (
|
||||
<React.Fragment key={`${item.label}-${index}`}>
|
||||
<li aria-hidden="true" className="text-gray-400">
|
||||
<ChevronRight size={16} />
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
{item.href && !isLast ? (
|
||||
<Link
|
||||
to={withLocalePath(locale, item.href)}
|
||||
className="rounded-md px-2 py-1 hover:bg-white/60 hover:text-primary transition-colors"
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
) : (
|
||||
<span className="px-2 py-1 text-gray-700 font-medium" aria-current={isLast ? 'page' : undefined}>
|
||||
{item.label}
|
||||
</span>
|
||||
)}
|
||||
</li>
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</ol>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
export default Breadcrumbs
|
||||
@@ -23,6 +23,7 @@ const navLabelMap: Record<string, NavLabel> = {
|
||||
cases: { zh: '服务案例', en: 'Cases' },
|
||||
news: { zh: '新闻中心', en: 'News' },
|
||||
learning: { zh: '培训学习', en: 'Learning' },
|
||||
assistant: { zh: 'AI智能助手', en: 'AI Assistant' },
|
||||
contact: { zh: '联系我们', en: 'Contact' },
|
||||
}
|
||||
|
||||
|
||||
@@ -26,6 +26,7 @@ export const NAVIGATION_MENU = [
|
||||
{ id: 'cases', label: '服务案例', path: '/cases' },
|
||||
{ id: 'news', label: '新闻中心', path: '/news' },
|
||||
{ id: 'learning', label: '培训学习', path: '/learning' },
|
||||
{ id: 'assistant', label: 'AI智能助手', path: '/assistant' },
|
||||
{ id: 'contact', label: '联系我们', path: '/contact' },
|
||||
];
|
||||
|
||||
@@ -153,6 +154,10 @@ export const PAGE_META = {
|
||||
title: '联系我们',
|
||||
description: '联系信息与留言反馈(占位内容)',
|
||||
},
|
||||
assistant: {
|
||||
title: 'AI智能助手',
|
||||
description: '诚裕智能客服:基于知识库的智能问答与留资服务(占位内容)',
|
||||
},
|
||||
};
|
||||
|
||||
// 联系方式配置
|
||||
|
||||
Reference in New Issue
Block a user