diff --git a/index.html b/index.html index 9958f76..47e6268 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,13 @@ - + - + - react-template + + + + 诚裕集团 - 诚信为本 · 裕及四方
diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..a9ae56e --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Header.tsx b/src/components/Header.tsx index c5b9a50..ca658c5 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -41,11 +41,16 @@ export const Header: React.FC = () => { return ( <> - {/* 顶部信息栏 */} + {/* 顶部信息栏 - 玻璃效果 */} {
@@ -132,16 +148,7 @@ export const Header: React.FC = () => { aria-current={isActive(item.path) ? 'page' : undefined} > {item.label} - - {/* 活动状态指示器 - 渐变下划线 */} - {isActive(item.path) && ( - - )} - + {/* 悬停背景效果 */} {
- {/* 移动端菜单 - 增强版 */} + {/* 移动端菜单 - 玻璃效果版 */} {isMobileMenuOpen && ( { animate={{ opacity: 1, height: 'auto' }} exit={{ opacity: 0, height: 0 }} transition={{ duration: 0.3 }} - className="lg:hidden bg-gradient-to-b from-white to-gray-50 border-t border-gray-100 overflow-hidden shadow-xl" + className="lg:hidden overflow-hidden shadow-xl border-b border-white/20" + style={{ + background: 'rgba(255, 255, 255, 0.85)', + backdropFilter: 'blur(20px) saturate(150%)', + WebkitBackdropFilter: 'blur(20px) saturate(150%)', + }} role="navigation" aria-label="移动端导航" > @@ -238,19 +250,13 @@ export const Header: React.FC = () => { to={item.path} className={`block px-5 py-3.5 rounded-xl text-base font-medium transition-all duration-200 ${ isActive(item.path) - ? 'bg-gradient-to-r from-primary/10 to-accent/10 text-primary shadow-sm' - : 'text-gray-700 hover:bg-primary/5 active:scale-95' + ? 'bg-gradient-to-r from-primary/15 to-accent/15 text-primary shadow-sm backdrop-blur-sm' + : 'text-gray-700 hover:bg-white/30 active:scale-95 backdrop-blur-sm' }`} aria-current={isActive(item.path) ? 'page' : undefined} >
{item.label} - {isActive(item.path) && ( - - )}
@@ -258,21 +264,21 @@ export const Header: React.FC = () => { {/* 移动端联系方式 */} 400-123-4567 立即咨询 diff --git a/src/hooks/usePageTitle.ts b/src/hooks/usePageTitle.ts new file mode 100644 index 0000000..8a48b3b --- /dev/null +++ b/src/hooks/usePageTitle.ts @@ -0,0 +1,18 @@ +import { useEffect } from 'react'; + +/** + * 自定义 Hook - 设置页面标题 + * @param title 页面标题 + * @param suffix 标题后缀，默认为 "诚裕集团" + */ +export const usePageTitle = (title: string, suffix: string = '诚裕集团') => { + useEffect(() => { + const prevTitle = document.title; + document.title = title ? `${title} - ${suffix}` : suffix; + + // 清理函数：组件卸载时恢复默认标题 + return () => { + document.title = prevTitle; + }; + }, [title, suffix]); +}; diff --git a/src/pages/About.tsx b/src/pages/About.tsx index 37bb06d..b960a6b 100644 --- a/src/pages/About.tsx +++ b/src/pages/About.tsx @@ -13,6 +13,7 @@ import { import { Header } from '../components/Header'; import { Footer } from '../components/Footer'; import { COMPANY_INFO } from '../lib/constants'; +import { usePageTitle } from '../hooks/usePageTitle'; // 发展历程数据 const milestones = [ @@ -127,6 +128,7 @@ const honors = [ */ export const About: React.FC = () => { const timelineRef = useRef(null); + usePageTitle('关于我们'); return ( { + usePageTitle('文章分类') const [categories, setCategories] = useState([]) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) diff --git a/src/pages/CategoryDetail.tsx b/src/pages/CategoryDetail.tsx index ea93701..ee16bd6 100644 --- a/src/pages/CategoryDetail.tsx +++ b/src/pages/CategoryDetail.tsx @@ -8,6 +8,7 @@ import { Posts, Categories } from '../clientsdk/sdk.gen' import { createClient } from '../clientsdk/client' import { customQuerySerializer } from '../clientsdk/querySerializer' import { TENANT_SLUG, TENANT_API_KEY, API_URL } from '../config' +import { usePageTitle } from '../hooks/usePageTitle' const client = createClient({ baseUrl: API_URL, @@ -20,6 +21,7 @@ const client = createClient({ export const CategoryDetail: React.FC = () => { const { slug } = useParams<{ slug: string }>() + usePageTitle('分类详情') const [posts, setPosts] = useState([]) const [category, setCategory] = useState(null) const [loading, setLoading] = useState(true) diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx index 7ad4346..775c037 100644 --- a/src/pages/Contact.tsx +++ b/src/pages/Contact.tsx @@ -16,6 +16,7 @@ import { import { Header } from '../components/Header'; import { Footer } from '../components/Footer'; import { COMPANY_INFO, CONTACT_INFO } from '../lib/constants'; +import { usePageTitle } from '../hooks/usePageTitle'; /** * Contact 组件 - 联系我们页面 @@ -76,6 +77,7 @@ interface FormErrors { * Contact 组件 */ export const Contact: React.FC = () => { + usePageTitle('联系我们'); const [formData, setFormData] = useState({ name: '', email: '', diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 3099c2e..63505e8 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -5,11 +5,14 @@ import { Hero } from '../components/Hero'; import { AboutSection } from '../components/Home/AboutSection'; import { ServicesSection } from '../components/Home/ServicesSection'; import { NewsSection } from '../components/Home/NewsSection'; +import { usePageTitle } from '../hooks/usePageTitle'; /** * Home 组件 - 企业官网首页 */ export const Home: React.FC = () => { + usePageTitle('首页'); + return ( { * News 组件 - 新闻资讯页面 */ export const News: React.FC = () => { + usePageTitle('新闻资讯'); const [activeCategory, setActiveCategory] = useState('all'); const [currentPage, setCurrentPage] = useState(1); diff --git a/src/pages/PostDetail.tsx b/src/pages/PostDetail.tsx index fc1c068..509a6fd 100644 --- a/src/pages/PostDetail.tsx +++ b/src/pages/PostDetail.tsx @@ -6,6 +6,7 @@ import { Posts } from '../clientsdk/sdk.gen' import { createClient } from '../clientsdk/client' import { customQuerySerializer } from '../clientsdk/querySerializer' import { TENANT_SLUG, TENANT_API_KEY, API_URL } from '../config' +import { usePageTitle } from '../hooks/usePageTitle' const client = createClient({ baseUrl: API_URL, @@ -18,6 +19,7 @@ const client = createClient({ export const PostDetail: React.FC = () => { const { slug } = useParams<{ slug: string }>() + usePageTitle('文章详情') const [post, setPost] = useState(null) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) diff --git a/src/pages/Services.tsx b/src/pages/Services.tsx index e56149d..4714f5c 100644 --- a/src/pages/Services.tsx +++ b/src/pages/Services.tsx @@ -20,6 +20,7 @@ import { import { Header } from '../components/Header'; import { Footer } from '../components/Footer'; import { SERVICES } from '../lib/constants'; +import { usePageTitle } from '../hooks/usePageTitle'; /** * Services 组件 - 产品服务页面 @@ -195,6 +196,7 @@ const CaseCard: React.FC<{ case: typeof cases[0]; index: number }> = ({ case: ca * Services 组件 */ export const Services: React.FC = () => { + usePageTitle('产品服务'); const [activeCategory, setActiveCategory] = useState('all'); const filteredCases = activeCategory === 'all'