diff --git a/index.html b/index.html index c96a31f..45d8c9d 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,10 @@ - - - - 示例集团 - 稳健前行 · 携手共赢 + + + + 诚裕集团
diff --git a/src/App.tsx b/src/App.tsx index 391b6a0..542a5e5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,6 +5,8 @@ import { About } from './pages/About' import { Services } from './pages/Services' import { News } from './pages/News' import { Contact } from './pages/Contact' +import { Cases } from './pages/Cases' +import { Learning } from './pages/Learning' // 页面切换动画配置 const pageVariants = { @@ -24,7 +26,6 @@ const pageVariants = { const pageTransition = { duration: 0.4, - ease: 'easeInOut', } // 页面包装组件 - 添加动画效果 @@ -68,8 +69,20 @@ function App() { } /> } /> } /> + } /> } /> + } /> } /> + + {/* English routes */} + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 2c82004..537cb26 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,250 +1,122 @@ -import { Link } from 'react-router-dom'; -import { motion } from 'framer-motion'; -import { - Building2, - Phone, - Mail, - MapPin, - Clock, - MessageCircle, - Share2, - Linkedin as LinkedinIcon, - ArrowRight, -} from 'lucide-react'; -import { - COMPANY_INFO, - FOOTER_LINKS, - SOCIAL_MEDIA, -} from '../lib/constants'; +import { motion } from 'framer-motion' +import { Building2, Mail, MapPin, Phone } from 'lucide-react' +import { Link, useLocation } from 'react-router-dom' +import { COMPANY_INFO, NAVIGATION_MENU } from '../lib/constants' +import { getLocaleFromPathname, withLocalePath } from '../lib/i18n' -/** - * Footer 组件 - 企业官网页脚 - */ - -// 动画变体配置 -const containerVariants = { - hidden: { opacity: 0 }, - visible: { - opacity: 1, - transition: { - staggerChildren: 0.1, - delayChildren: 0.2, - }, - }, -}; - -const itemVariants = { - hidden: { opacity: 0, y: 20 }, - visible: { - opacity: 1, - y: 0, - transition: { duration: 0.5 }, - }, -}; - -// 图标映射 -const iconMap: Record> = { - Wechat: MessageCircle, - Weibo: Share2, - Linkedin: LinkedinIcon, -}; - -/** - * 联系方式项组件 - */ -const ContactItem: React.FC<{ - icon: React.ComponentType<{ size?: number; className?: string }>; - title: string; - content: string; -}> = ({ icon: Icon, title, content }) => ( -
- -
-

{title}

-

{content}

-
-
-); - -/** - * 链接列组件 - */ -const LinkColumn: React.FC<{ - title: string; - links: Array<{ label: string; path: string }>; -}> = ({ title, links }) => ( -
-

- {title} -

-
    - {links.map((link) => ( -
  • - - - - {link.label} - - -
    • - ))} -
-
-); - -/** - * Footer 组件 - */ export const Footer: React.FC = () => { - const currentYear = new Date().getFullYear(); + const location = useLocation() + const locale = getLocaleFromPathname(location.pathname) + const currentYear = new Date().getFullYear() return (
- {/* 主内容区域 */} -
- - {/* 企业信息 */} - - {/* Logo */} - -
- +
+
+
+ +
+
- - 示例集团 - -

Chengyu Group

+
{locale === 'en' ? COMPANY_INFO.nameEn : COMPANY_INFO.name}
+
{COMPANY_INFO.nameEn.toUpperCase()}
- {/* 企业简介 */} -

- {COMPANY_INFO.description} -

+

{COMPANY_INFO.description}

- {/* 联系方式 */} -
- - - - -
- +
    +
  • + + {COMPANY_INFO.headquarters} +
    • +
  • + + {COMPANY_INFO.phone} +
    • +
  • + + {COMPANY_INFO.email} +
    • +
+
- {/* 产品服务 */} - - - - - {/* 公司信息 */} - - - - - {/* 社交媒体 */} - -

- 关注我们 -

-

- 了解更多企业动态 -

-
- {SOCIAL_MEDIA.map((social) => { - const Icon = iconMap[social.icon] || MessageCircle; - return ( - +

+ {locale === 'en' ? 'Navigation' : '网站导航'} +

+
    + {NAVIGATION_MENU.filter((n) => n.id !== 'home').map((n) => ( +
  • + - - {social.label} - - ); - })} + {locale === 'en' + ? n.id === 'about' + ? 'About' + : n.id === 'scope' + ? 'Services' + : n.id === 'cases' + ? 'Cases' + : n.id === 'news' + ? 'News' + : n.id === 'learning' + ? 'Learning' + : n.id === 'contact' + ? 'Contact' + : n.label + : n.label} + +
    • + ))} +
+
+ +
+

+ {locale === 'en' ? 'Notes' : '说明'} +

+

+ {locale === 'en' + ? 'This website is a placeholder version. Content and data will be updated after official materials are provided.' + : '本网站为占位版本，内容与数据后续将根据集团正式资料完善与更新。'} +

+
+ +
+

+ {locale === 'en' ? 'Contact' : '联系'} +

+
+
+
{locale === 'en' ? 'Email' : '邮箱'}
+
{COMPANY_INFO.email}
+
+
+
{locale === 'en' ? 'Phone' : '电话'}
+
{COMPANY_INFO.phone}
+
- - -
- - {/* 底部版权栏 */} -
-
-
- {/* 版权信息 */} - - © {currentYear} {COMPANY_INFO.fullName} 版权所有 - - - {/* 备案和链接 */} - - 京ICP备XXXXXXXX号 - | - - 隐私政策 - - | - - 使用条款 - -
-
- ); -}; -export default Footer; +
+
+ + © {currentYear} {COMPANY_INFO.fullName}. {locale === 'en' ? 'All rights reserved.' : '版权所有。'} + +

{locale === 'en' ? 'ICP filing: TBD' : 'ICP备案：待补充'}

+
+
+ + ) +} + +export default Footer diff --git a/src/components/Header.tsx b/src/components/Header.tsx index a965e61..c9eb61e 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,296 +1,204 @@ -import { useState, useEffect, useCallback } from 'react'; -import { Link, useLocation } from 'react-router-dom'; -import { motion, AnimatePresence } from 'framer-motion'; -import { Menu, X, Building2, Phone, Mail, Search, ChevronDown } from 'lucide-react'; -import { NAVIGATION_MENU } from '../lib/constants'; +import { useEffect, useMemo, useState } from 'react' +import { Link, useLocation, useNavigate } from 'react-router-dom' +import { AnimatePresence, motion } from 'framer-motion' +import { Building2, Globe, Menu, X } from 'lucide-react' +import { COMPANY_INFO, NAVIGATION_MENU } from '../lib/constants' +import { + DEFAULT_LOCALE, + getLocaleFromPathname, + stripLocalePrefix, + toOppositeLocale, + withLocalePath, +} from '../lib/i18n' + +type NavLabel = { + zh: string + en: string +} + +const navLabelMap: Record = { + home: { zh: '首页', en: 'Home' }, + about: { zh: '集团概况', en: 'About' }, + scope: { zh: '服务范围', en: 'Services' }, + cases: { zh: '服务案例', en: 'Cases' }, + news: { zh: '新闻中心', en: 'News' }, + learning: { zh: '培训学习', en: 'Learning' }, + contact: { zh: '联系我们', en: 'Contact' }, +} -/** - * Header 组件 - 企业官网导航栏 - */ export const Header: React.FC = () => { - const [isScrolled, setIsScrolled] = useState(false); - const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); - const location = useLocation(); + const [isScrolled, setIsScrolled] = useState(false) + const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) + const location = useLocation() + const navigate = useNavigate() - // 监听滚动事件 - useEffect(() => { - const handleScroll = () => { - setIsScrolled(window.scrollY > 20); - }; - - window.addEventListener('scroll', handleScroll); - return () => window.removeEventListener('scroll', handleScroll); - }, []); - - // 关闭移动端菜单 - 使用回调避免直接 setState - const closeMobileMenu = useCallback(() => { - setIsMobileMenuOpen(false); - }, []); + const locale = useMemo(() => getLocaleFromPathname(location.pathname), [location.pathname]) useEffect(() => { - closeMobileMenu(); - }, [location.pathname, closeMobileMenu]); + const handleScroll = () => setIsScrolled(window.scrollY > 20) + window.addEventListener('scroll', handleScroll) + return () => window.removeEventListener('scroll', handleScroll) + }, []) - // 检查当前路径是否为活动状态 - const isActive = (path: string): boolean => { - if (path === '/') { - return location.pathname === '/'; + useEffect(() => { + setIsMobileMenuOpen(false) + }, [location.pathname]) + + const navItems = useMemo( + () => + NAVIGATION_MENU.map((item) => ({ + ...item, + label: locale === 'en' ? navLabelMap[item.id]?.en ?? item.label : navLabelMap[item.id]?.zh ?? item.label, + to: withLocalePath(locale, item.path), + })), + [locale], + ) + + const isActive = (to: string) => { + const current = stripLocalePrefix(location.pathname) + const target = stripLocalePrefix(to) + if (target === '/') return current === '/' + return current.startsWith(target) + } + + const handleToggleLocale = () => { + const next = toOppositeLocale(locale) + const nextPath = withLocalePath(next, stripLocalePrefix(location.pathname)) + + try { + localStorage.setItem('preferredLocale', next) + } catch { + // ignore } - return location.pathname.startsWith(path); - }; + + navigate(nextPath) + } + + useEffect(() => { + if (getLocaleFromPathname(location.pathname) !== DEFAULT_LOCALE) return + + try { + const preferred = localStorage.getItem('preferredLocale') + if (preferred === 'en') { + navigate(withLocalePath('en', stripLocalePrefix(location.pathname)), { replace: true }) + } + } catch { + // ignore + } + }, [location.pathname, navigate]) return ( - <> - {/* 顶部信息栏 - 玻璃效果 */} - -
-
-
- - 400-123-4567 -
-
- - contact@chengyu.com -
-
-
- 欢迎来到示例集团官网 -
- | - - / - -
-
-
- - - {/* 主导航栏 */} - -
-
- {/* Logo 区域 - 增强版 */} + +
+
- - - {/* 光晕效果 */} -
- +
+ +
- - 示例集团 - -

CHENGYU GROUP

+
+ {locale === 'en' ? COMPANY_INFO.nameEn : COMPANY_INFO.name} +
+
{COMPANY_INFO.nameEn.toUpperCase()}
- {/* 桌面端导航菜单 - 增强版 */} - - {/* 桌面端操作区域 */} -
- {/* 搜索按钮 */} - + - {/* 联系电话按钮 */} - setIsMobileMenuOpen((v) => !v)} + className="lg:hidden inline-flex items-center justify-center w-10 h-10 rounded-lg text-gray-700 hover:bg-gray-50" + aria-label={isMobileMenuOpen ? (locale === 'en' ? 'Close menu' : '关闭菜单') : locale === 'en' ? 'Open menu' : '打开菜单'} + aria-expanded={isMobileMenuOpen} > - - 400-123-4567 - - - {/* CTA 按钮 - 渐变风格 */} - -
-
- - 立即咨询 - - → - - - + {isMobileMenuOpen ? : } +
- - {/* 移动端菜单按钮 */} - setIsMobileMenuOpen(!isMobileMenuOpen)} - aria-label={isMobileMenuOpen ? '关闭菜单' : '打开菜单'} - aria-expanded={isMobileMenuOpen} - whileHover={{ scale: 1.05 }} - whileTap={{ scale: 0.95 }} - > - - {isMobileMenuOpen ? : } - -
- {/* 移动端菜单 - 玻璃效果版 */} {isMobileMenuOpen && ( -
- {NAVIGATION_MENU.map((item, index) => ( - + {navItems.map((item) => ( + - -
- {item.label} -
- - + {item.label} + ))} - - {/* 移动端联系方式 */} - - - - 400-123-4567 - - - - 立即咨询 - - + {locale === 'en' ? 'Language' : '语言'} + {locale === 'en' ? '中文' : 'English'} +
)} - - - ); -}; + + ) +} -export default Header; +export default Header diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx index d25374c..e651810 100644 --- a/src/components/Hero.tsx +++ b/src/components/Hero.tsx @@ -29,18 +29,23 @@ const CountUpNumber: React.FC<{ // 数字递增动画 let current = 0; const increment = numValue / (duration * 60); - const timer = setInterval(() => { - current += increment; - if (current >= numValue) { - current = numValue; - clearInterval(timer); - } - let display = Math.floor(current); - if (hasYi) { - display = Math.floor(current); - } - ref.current.textContent = display.toLocaleString() + (hasPlus ? '+' : '') + (hasYi ? '亿' : suffix); - }, 1000 / 60); + const element = ref.current; + if (!element) return; + + const timer = setInterval(() => { + current += increment; + if (current >= numValue) { + current = numValue; + clearInterval(timer); + } + let display = Math.floor(current); + if (hasYi) { + display = Math.floor(current); + } + element.textContent = + display.toLocaleString() + (hasPlus ? '+' : '') + (hasYi ? '亿' : suffix); + }, 1000 / 60); + return () => clearInterval(timer); } diff --git a/src/components/Home/ServicesSection.tsx b/src/components/Home/ServicesSection.tsx index c8c44a4..832c1c9 100644 --- a/src/components/Home/ServicesSection.tsx +++ b/src/components/Home/ServicesSection.tsx @@ -28,7 +28,7 @@ const ServiceCard: React.FC<{ whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: index * 0.1, duration: 0.5 }} - whileHover={{ y: -8, shadow: '0 20px 40px rgba(0,0,0,0.1)' }} + whileHover={{ y: -8, boxShadow: '0 20px 40px rgba(0,0,0,0.1)' }} > {/* 背景装饰 */}
diff --git a/src/hooks/usePageMeta.ts b/src/hooks/usePageMeta.ts new file mode 100644 index 0000000..4b7169c --- /dev/null +++ b/src/hooks/usePageMeta.ts @@ -0,0 +1,35 @@ +import { useEffect } from 'react' +import { COMPANY_INFO } from '../lib/constants' +import type { Locale } from '../lib/i18n' + +type PageMetaInput = { + title: string + description?: string + locale: Locale +} + +function setMetaTag(name: string, content: string) { + const meta = document.querySelector(`meta[name="${name}"]`) + if (meta) meta.setAttribute('content', content) +} + +export function usePageMeta({ title, description, locale }: PageMetaInput) { + useEffect(() => { + const previousTitle = document.title + const previousLang = document.documentElement.lang + + const suffix = locale === 'en' ? COMPANY_INFO.nameEn : COMPANY_INFO.name + document.title = title ? `${title} - ${suffix}` : suffix + + document.documentElement.lang = locale === 'en' ? 'en' : 'zh-CN' + + if (description) { + setMetaTag('description', description) + } + + return () => { + document.title = previousTitle + document.documentElement.lang = previousLang + } + }, [description, locale, title]) +} diff --git a/src/hooks/usePageTitle.ts b/src/hooks/usePageTitle.ts index f2b556f..4d8e882 100644 --- a/src/hooks/usePageTitle.ts +++ b/src/hooks/usePageTitle.ts @@ -5,7 +5,7 @@ import { useEffect } from 'react'; * @param title 页面标题 * @param suffix 标题后缀，默认为 "示例集团" */ -export const usePageTitle = (title: string, suffix: string = '示例集团') => { +export const usePageTitle = (title: string, suffix: string = '诚裕集团') => { useEffect(() => { const prevTitle = document.title; document.title = title ? `${title} - ${suffix}` : suffix; diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 5a758b4..bded472 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -4,25 +4,28 @@ // 企业基本信息 export const COMPANY_INFO = { - name: '示例集团', + name: '诚裕集团', nameEn: 'Chengyu Group', - slogan: '稳健前行，携手共赢', - description: '示例集团成立于2010年，是一家集科技研发、金融服务、产业投资于一体的综合性企业集团。秉承"诚信、创新、共赢"的经营理念，致力于为客户提供高品质的产品和服务。', - fullName: '示例集团有限公司', - registrationNumber: '91110000XXXXXXXX', - established: '2010年', - headquarters: '北京市朝阳区建国路88号', - phone: '400-888-8888', - email: 'contact@chengyu-group.com', - workingHours: '周一至周五 9:00-18:00', + slogan: '以专业为本，以稳健致远', + description: + '诚裕集团是一家以综合服务为核心的集团型企业，围绕客户在经营与管理中的关键需求，提供系统化、可持续的解决方案。本网站内容为占位示例，后续将根据集团正式资料进行完善与更新。', + fullName: '诚裕集团', + registrationNumber: '统一社会信用代码（待补充）', + established: '成立时间（待补充）', + headquarters: '总部地址（待补充）', + phone: '联系电话（待补充）', + email: '邮箱（待补充）', + workingHours: '工作时间（待补充）', }; // 导航菜单配置 export const NAVIGATION_MENU = [ { id: 'home', label: '首页', path: '/' }, - { id: 'about', label: '关于我们', path: '/about' }, - { id: 'services', label: '产品服务', path: '/services' }, - { id: 'news', label: '新闻资讯', path: '/news' }, + { id: 'about', label: '集团概况', path: '/about' }, + { id: 'scope', label: '服务范围', path: '/services' }, + { id: 'cases', label: '服务案例', path: '/cases' }, + { id: 'news', label: '新闻中心', path: '/news' }, + { id: 'learning', label: '培训学习', path: '/learning' }, { id: 'contact', label: '联系我们', path: '/contact' }, ]; @@ -123,24 +126,32 @@ export const COMPANY_STATS = [ // 页面元信息 export const PAGE_META = { home: { - title: '示例集团 - 稳健前行，携手共赢', - description: '示例集团是一家集科技研发、金融服务、产业投资于一体的综合性企业集团', + title: '诚裕集团', + description: '诚裕集团品牌官网（内容占位，后续根据正式资料完善）', }, about: { - title: '关于我们 - 示例集团', - description: '了解示例集团的发展历程、企业文化和核心价值观', + title: '集团概况', + description: '了解诚裕集团的基本信息、文化理念与发展概况（占位内容）', }, services: { - title: '产品服务 - 示例集团', - description: '提供金融服务、科技研发、产业投资、咨询管理等专业服务', + title: '服务范围', + description: '围绕客户关键需求提供系统化服务（占位内容）', + }, + cases: { + title: '服务案例', + description: '典型项目与解决思路展示（占位内容）', }, news: { - title: '新闻资讯 - 示例集团', - description: '了解示例集团最新动态、行业资讯和荣誉资质', + title: '新闻中心', + description: '集团新闻、行业动态与公告（占位内容）', + }, + learning: { + title: '培训学习', + description: '课程与学习资源（占位内容）', }, contact: { - title: '联系我们 - 示例集团', - description: '获取示例集团联系方式，欢迎随时与我们沟通', + title: '联系我们', + description: '联系信息与留言反馈（占位内容）', }, }; diff --git a/src/lib/i18n.ts b/src/lib/i18n.ts new file mode 100644 index 0000000..5fee47f --- /dev/null +++ b/src/lib/i18n.ts @@ -0,0 +1,26 @@ +export type Locale = 'zh' | 'en' + +export const DEFAULT_LOCALE: Locale = 'zh' + +export function getLocaleFromPathname(pathname: string): Locale { + return pathname === '/en' || pathname.startsWith('/en/') ? 'en' : 'zh' +} + +export function stripLocalePrefix(pathname: string): string { + if (pathname === '/en') return '/' + if (pathname.startsWith('/en/')) return pathname.replace(/^\/en/, '') + return pathname +} + +export function withLocalePath(locale: Locale, path: string): string { + if (locale === 'en') { + if (path === '/') return '/en' + return `/en${path}` + } + + return path +} + +export function toOppositeLocale(locale: Locale): Locale { + return locale === 'en' ? 'zh' : 'en' +} diff --git a/src/pages/About.tsx b/src/pages/About.tsx index 9191323..c3dde57 100644 --- a/src/pages/About.tsx +++ b/src/pages/About.tsx @@ -10,55 +10,50 @@ import { Building2, Globe, } from 'lucide-react'; -import { Header } from '../components/Header'; -import { Footer } from '../components/Footer'; -import { COMPANY_INFO } from '../lib/constants'; -import { usePageTitle } from '../hooks/usePageTitle'; +import { Header } from '../components/Header' +import { Footer } from '../components/Footer' +import { COMPANY_INFO, PAGE_META } from '../lib/constants' +import { usePageMeta } from '../hooks/usePageMeta' +import { getLocaleFromPathname } from '../lib/i18n' // 发展历程数据 const milestones = [ { - year: '2010', - title: '公司成立', - description: '示例集团在北京成立，开始布局金融服务业务', + year: '年份', + title: '关键节点（待补充）', + description: '根据集团正式资料补充发展历程与重要节点。', icon: Building2, }, { - year: '2012', - title: '首次战略融资', - description: '完成 A 轮融资，获得知名投资机构认可', + year: '年份', + title: '关键节点（待补充）', + description: '根据集团正式资料补充发展历程与重要节点。', icon: TrendingUp, }, { - year: '2015', - title: '业务扩展', - description: '成立科技研发子公司，进军科技领域', + year: '年份', + title: '关键节点（待补充）', + description: '根据集团正式资料补充发展历程与重要节点。', icon: Globe, }, { - year: '2018', - title: '规模扩张', - description: '员工规模突破 200 人，服务客户超过 500 家', + year: '年份', + title: '关键节点（待补充）', + description: '根据集团正式资料补充发展历程与重要节点。', icon: Users, }, { - year: '2020', - title: '产业投资布局', - description: '成立产业投资基金，全面进入投资领域', + year: '年份', + title: '关键节点（待补充）', + description: '根据集团正式资料补充发展历程与重要节点。', icon: Target, }, { - year: '2023', - title: '集团化运营', - description: '正式更名为示例集团，形成多元化业务体系', + year: '年份', + title: '关键节点（待补充）', + description: '根据集团正式资料补充发展历程与重要节点。', icon: Award, }, - { - year: '2025', - title: '新里程碑', - description: '管理资产突破 500 亿，员工规模超过 500 人', - icon: Calendar, - }, ]; // 核心价值观数据 @@ -127,8 +122,14 @@ const honors = [ * About 组件 - 关于我们页面 */ export const About: React.FC = () => { - const timelineRef = useRef(null); - usePageTitle('关于我们'); + const timelineRef = useRef(null) + const locale = getLocaleFromPathname(window.location.pathname) + + usePageMeta({ + title: locale === 'en' ? 'About' : PAGE_META.about.title, + description: PAGE_META.about.description, + locale, + }) return ( { transition={{ duration: 0.6 }} >

- 关于示例集团 + {locale === 'en' ? 'About Chengyu Group' : '集团概况'}

- 示例集团成立于 2010 年，是一家集科技研发、金融服务、产业投资于一体的综合性企业集团 + {locale === 'en' + ? 'This is a placeholder introduction. Content will be updated after official materials are provided.' + : '本页面为占位示例，将在收到集团正式资料后完善集团介绍、文化理念与组织信息。'}

@@ -176,17 +179,23 @@ export const About: React.FC = () => {

- {COMPANY_INFO.fullName} - 成立于 {COMPANY_INFO.established}，总部位于 {COMPANY_INFO.headquarters}。 - 经过十余年的稳健发展，示例集团已形成了以金融服务、科技研发、产业投资为核心的多元化业务体系。 + {COMPANY_INFO.fullName} + {locale === 'en' + ? `Established: ${COMPANY_INFO.established}. Headquarters: ${COMPANY_INFO.headquarters}.` + : `成立于 ${COMPANY_INFO.established}，总部位于 ${COMPANY_INFO.headquarters}。`} + {locale === 'en' + ? ' This section is a placeholder and will be updated.' + : '本段为占位示例，后续将依据正式资料完善业务结构与治理信息。'} +

集团秉承"诚信、创新、共赢"的核心价值观，致力于为客户创造最大价值。 我们拥有一支经验丰富、专业高效的管理团队，汇聚了金融、科技、投资等领域的优秀人才。

- 截至目前，示例集团已成功为超过 1000 家企业客户提供专业服务， - 管理资产规模突破 500 亿元人民币，业务范围覆盖全国主要城市。 + {locale === 'en' + ? 'Key data will be provided and verified before publication.' + : '关键数据与范围将于正式资料确认后发布。'}

@@ -217,14 +226,15 @@ export const About: React.FC = () => {
示例集团办公环境
-
-
示例集团
-
稳健前行 · 携手共赢
-
+
+
{COMPANY_INFO.name}
+
{COMPANY_INFO.slogan}
+
+
{/* 装饰元素 */} diff --git a/src/pages/Cases.tsx b/src/pages/Cases.tsx new file mode 100644 index 0000000..e307220 --- /dev/null +++ b/src/pages/Cases.tsx @@ -0,0 +1,73 @@ +import { motion } from 'framer-motion' +import { Header } from '../components/Header' +import { Footer } from '../components/Footer' +import { usePageMeta } from '../hooks/usePageMeta' +import { getLocaleFromPathname } from '../lib/i18n' +import { PAGE_META } from '../lib/constants' + +type CaseCategory = { + id: string + zh: string + en: string +} + +const caseCategories: CaseCategory[] = [ + { id: 'separation', zh: '分立类案例', en: 'Separation Cases' }, + { id: 'accounts', zh: '整账类案例', en: 'Accounts Cases' }, + { id: 'internal-audit', zh: '企业内审类案例', en: 'Internal Audit Cases' }, + { id: 'tax-advisory', zh: '财税顾问案例', en: 'Tax & Finance Advisory' }, + { id: 'planning', zh: '涉税筹划类案例', en: 'Tax Planning Cases' }, + { id: 'insolvency', zh: '破产清算类案例', en: 'Insolvency & Liquidation' }, +] + +export const Cases: React.FC = () => { + const locale = getLocaleFromPathname(window.location.pathname) + + usePageMeta({ + title: locale === 'en' ? 'Cases' : PAGE_META.cases.title, + description: PAGE_META.cases.description, + locale, + }) + + return ( + +
+ +
+
+
+

+ {locale === 'en' ? 'Cases' : '服务案例'} +

+

+ {locale === 'en' + ? 'A placeholder showcase of representative engagements. Content will be updated after official materials are provided.' + : '以典型项目为线索，展示工作方法与交付路径。本页面为占位示例，后续将根据集团正式资料完善。'} +

+
+
+ +
+
+
+ {caseCategories.map((c) => ( +
+

{locale === 'en' ? c.en : c.zh}

+

+ {locale === 'en' + ? 'Add representative case summaries, scope, and outcomes.' + : '后续补充：案例背景、服务范围、关键工作、成果与影响。'} +

+
+ ))} +
+
+
+
+ +
+ + ) +} + +export default Cases diff --git a/src/pages/Categories.tsx b/src/pages/Categories.tsx index e7da140..c6833dd 100644 --- a/src/pages/Categories.tsx +++ b/src/pages/Categories.tsx @@ -53,7 +53,7 @@ export const CategoriesPage: React.FC = () => {
-

📂 文章分类

+

文章分类

浏览所有分类

@@ -93,7 +93,8 @@ export const CategoriesPage: React.FC = () => { />
-
📁
+
Category
+

{category.title}

diff --git a/src/pages/CategoryDetail.tsx b/src/pages/CategoryDetail.tsx index ee16bd6..736df5c 100644 --- a/src/pages/CategoryDetail.tsx +++ b/src/pages/CategoryDetail.tsx @@ -125,7 +125,7 @@ export const CategoryDetail: React.FC = () => { />
-
📂
+
Category

{category.title}

@@ -133,7 +133,7 @@ export const CategoryDetail: React.FC = () => {
)}

- 📂 {category?.title || '分类'} + {category?.title || '分类'}

探索该分类下的所有内容

diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx index 73bb97d..13e71d6 100644 --- a/src/pages/Contact.tsx +++ b/src/pages/Contact.tsx @@ -182,9 +182,16 @@ export const Contact: React.FC = () => {
- {CONTACT_INFO.map((info, index) => { - const Icon = info.icon; - return ( + {CONTACT_INFO.map((info, index) => { + const iconMap = { + MapPin, + Phone, + Mail, + Clock, + }; + const Icon = iconMap[info.icon as keyof typeof iconMap] || MapPin; + return ( + { className="w-full h-full object-cover" />
-

- 📍 示例集团总部 -

+

+ 示例集团总部 +

+

北京市朝阳区建国路88号示例大厦

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 63505e8..4092921 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,18 +1,26 @@ -import { motion } from 'framer-motion'; -import { Header } from '../components/Header'; -import { Footer } from '../components/Footer'; -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'; +import { motion } from 'framer-motion' +import { Header } from '../components/Header' +import { Footer } from '../components/Footer' +import { Hero } from '../components/Hero' +import { AboutSection } from '../components/Home/AboutSection' +import { ServicesSection } from '../components/Home/ServicesSection' +import { NewsSection } from '../components/Home/NewsSection' +import { usePageMeta } from '../hooks/usePageMeta' +import { getLocaleFromPathname } from '../lib/i18n' +import { PAGE_META } from '../lib/constants' /** * Home 组件 - 企业官网首页 */ export const Home: React.FC = () => { - usePageTitle('首页'); - + const locale = getLocaleFromPathname(window.location.pathname) + + usePageMeta({ + title: locale === 'en' ? 'Home' : PAGE_META.home.title, + description: PAGE_META.home.description, + locale, + }) + return ( { + const locale = getLocaleFromPathname(window.location.pathname) + + usePageMeta({ + title: locale === 'en' ? 'Learning' : PAGE_META.learning.title, + description: PAGE_META.learning.description, + locale, + }) + + return ( + +
+ +
+
+
+

+ {locale === 'en' ? 'Learning' : '培训学习'} +

+

+ {locale === 'en' + ? 'A placeholder section for learning resources. Content will be updated after official materials are provided.' + : '用于发布课程、视频与学习资料。本页面为占位示例，后续将根据集团正式资料完善。'} +

+
+
+ +
+
+
+ {learningItems.map((item) => ( +
+

+ {locale === 'en' ? item.titleEn : item.titleZh} +

+

+ {locale === 'en' ? item.descEn : item.descZh} +

+
+ ))} +
+
+
+
+ +
+ + ) +} + +export default Learning diff --git a/src/pages/News.tsx b/src/pages/News.tsx index 7a58227..be6d5bc 100644 --- a/src/pages/News.tsx +++ b/src/pages/News.tsx @@ -13,11 +13,12 @@ import { VolumeX, } from 'lucide-react'; import { Link } from 'react-router-dom'; -import { Header } from '../components/Header'; -import { Footer } from '../components/Footer'; -import { formatDate } from '../lib/utils'; -import { NEWS_CATEGORIES } from '../lib/constants'; -import { usePageTitle } from '../hooks/usePageTitle'; +import { Header } from '../components/Header' +import { Footer } from '../components/Footer' +import { formatDate } from '../lib/utils' +import { NEWS_CATEGORIES, PAGE_META } from '../lib/constants' +import { usePageMeta } from '../hooks/usePageMeta' +import { getLocaleFromPathname } from '../lib/i18n' // 模拟新闻数据 const allNews = [ @@ -322,9 +323,10 @@ const Pagination: React.FC<{ }; /** - * 数字人视频播放器组件 + * 视频区（占位） + */ -const DigitalHumanVideo: React.FC = () => { +const DigitalHumanVideo: React.FC<{ locale: 'zh' | 'en' }> = ({ locale }) => { const videoRef = useRef(null); const [isPlaying, setIsPlaying] = useState(false); const [isMuted, setIsMuted] = useState(true); @@ -401,7 +403,7 @@ const DigitalHumanVideo: React.FC = () => {
- 数字人播报 + {locale === 'en' ? 'Video' : '视频'}
@@ -411,28 +413,36 @@ const DigitalHumanVideo: React.FC = () => {
- AI 数字人 + {locale === 'en' ? 'Video (Placeholder)' : '视频（占位）'} +

- 示例集团新闻播报 + {locale === 'en' ? 'Updates' : '资讯更新'} +

- 欢迎收看示例集团最新资讯播报。我们使用先进的AI数字人技术，为您带来最新的企业动态、行业资讯和重要公告。 + {locale === 'en' + ? 'This is a placeholder module for media updates. It can be replaced by videos, announcements, or featured content.' + : '本模块为占位示例，可替换为公告、视频、专栏等重点内容入口。'} +

- 24小时不间断播报 + {locale === 'en' ? 'Featured slot' : '重点内容位'} +
- 实时更新企业资讯 + {locale === 'en' ? 'Timely updates' : '更新及时'} +
- 多语言智能播报 + {locale === 'en' ? 'Bilingual ready' : '支持双语结构'} +
@@ -454,7 +464,14 @@ const DigitalHumanVideo: React.FC = () => { * News 组件 - 新闻资讯页面 */ export const News: React.FC = () => { - usePageTitle('新闻资讯'); + const locale = getLocaleFromPathname(window.location.pathname) + + usePageMeta({ + title: locale === 'en' ? 'News' : PAGE_META.news.title, + description: PAGE_META.news.description, + locale, + }) + const [activeCategory, setActiveCategory] = useState('all'); const [currentPage, setCurrentPage] = useState(1); @@ -516,7 +533,7 @@ export const News: React.FC = () => {
{/* 数字人视频播放器 */} - +
{/* 左侧新闻列表 */} diff --git a/src/pages/Services.tsx b/src/pages/Services.tsx index 4714f5c..9a3b6d0 100644 --- a/src/pages/Services.tsx +++ b/src/pages/Services.tsx @@ -17,13 +17,15 @@ import { Users, Zap, } from 'lucide-react'; -import { Header } from '../components/Header'; -import { Footer } from '../components/Footer'; -import { SERVICES } from '../lib/constants'; -import { usePageTitle } from '../hooks/usePageTitle'; +import { Header } from '../components/Header' +import { Footer } from '../components/Footer' +import { PAGE_META, SERVICES } from '../lib/constants' +import { usePageMeta } from '../hooks/usePageMeta' +import { getLocaleFromPathname } from '../lib/i18n' /** - * Services 组件 - 产品服务页面 + * Services 组件 - 服务范围页面 + */ // 详细服务数据 @@ -196,7 +198,14 @@ const CaseCard: React.FC<{ case: typeof cases[0]; index: number }> = ({ case: ca * Services 组件 */ export const Services: React.FC = () => { - usePageTitle('产品服务'); + const locale = getLocaleFromPathname(window.location.pathname) + + usePageMeta({ + title: locale === 'en' ? 'Services' : PAGE_META.services.title, + description: PAGE_META.services.description, + locale, + }) + const [activeCategory, setActiveCategory] = useState('all'); const filteredCases = activeCategory === 'all' @@ -225,10 +234,12 @@ export const Services: React.FC = () => { transition={{ duration: 0.6 }} >

- 产品服务 + {locale === 'en' ? 'Services' : '服务范围'}

- 为客户提供全方位的专业服务解决方案 + {locale === 'en' + ? 'A structured overview of service scope (placeholder).' + : '围绕客户关键需求提供系统化服务（占位示例）。'}

@@ -245,10 +256,12 @@ export const Services: React.FC = () => { transition={{ duration: 0.6 }} >

- 核心业务板块 + {locale === 'en' ? 'Service Areas' : '服务范围概览'}

- 四大核心业务，构建全方位服务体系 + {locale === 'en' + ? 'Grouped capabilities and deliverables (placeholder).' + : '以条目化方式呈现能力范围与交付物（占位示例）。'}

@@ -435,10 +448,13 @@ export const Services: React.FC = () => { >

- 成功案例 + {locale === 'en' ? 'Representative Cases' : '典型案例（占位）'}

- 真实项目，展现专业实力 + {locale === 'en' + ? 'Placeholder cases for structure demonstration.' + : '用于展示案例结构，后续以真实案例替换。'} +

@@ -480,10 +496,12 @@ export const Services: React.FC = () => { transition={{ duration: 0.6 }} >

- 合作伙伴 + {locale === 'en' ? 'Partners' : '合作伙伴（占位）'}

- 与众多知名企业建立深度合作关系 + {locale === 'en' + ? 'Partner list will be updated after confirmation.' + : '合作伙伴信息将于正式资料确认后发布。'}

@@ -521,7 +539,7 @@ export const Services: React.FC = () => { viewport={{ once: true }} transition={{ duration: 0.6 }} > -

服务流程

+

{locale === 'en' ? 'Process' : '服务流程（占位）'}

标准化流程，确保服务质量