'use client'; import { useState, useEffect } from 'react'; import Link from 'next/link'; import { Locale, generateLocalizedPath } from '@/lib/i18n'; import { NewsArticle } from '@/lib/markdown'; interface HomePageClientProps { locale: Locale; home: any; common: any; latestNews: NewsArticle[]; } export default function HomePageClient({ locale, home, common, latestNews }: HomePageClientProps) { const [currentSlide, setCurrentSlide] = useState(0); // 生成新闻文章的链接 const getNewsArticleUrl = (articleId: string) => { return generateLocalizedPath(`/news/${articleId}`, locale); }; // 生成新闻缩略图(使用Unsplash随机图片作为占位符) const getNewsImage = (index: number) => { const imageIds = [ 'photo-1560472354-b33ff0c44a43', // 科技主题 'photo-1551434678-e076c223a692', // 云计算主题 'photo-1581091226825-a6a2a5aee158' // AI主题 ]; const imageId = imageIds[index % imageIds.length]; return `https://images.unsplash.com/${imageId}?w=400&h=225&fit=crop`; }; // Banner carousel data const bannerSlides = [ { id: 1, image: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1200&h=600&fit=crop', }, { id: 2, image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1200&h=600&fit=crop', }, { id: 3, image: 'https://images.unsplash.com/photo-1557804506-669a67965ba0?w=1200&h=600&fit=crop', }, ]; // Auto-advance carousel useEffect(() => { const timer = setInterval(() => { setCurrentSlide((prev) => (prev + 1) % bannerSlides.length); }, 5000); return () => clearInterval(timer); }, []); const nextSlide = () => { setCurrentSlide((prev) => (prev + 1) % bannerSlides.length); }; const prevSlide = () => { setCurrentSlide((prev) => (prev - 1 + bannerSlides.length) % bannerSlides.length); }; return ( <> {/* Banner Carousel */}
{bannerSlides.map((slide, index) => (

{home.banner[index]?.title}

{home.banner[index]?.subtitle}

))}
{/* Carousel Controls */} {/* Carousel Indicators */}
{bannerSlides.map((_, index) => (
{/* Hero Section */}

{home.hero.title}

{home.hero.subtitle}

{/* Services Section */}

{home.services.title}

{home.services.subtitle}

{home.services.items.map((service: any, index: number) => (

{service.title}

{service.description}

))}
{/* News Section */}

{home.news.title}

{latestNews.length > 0 ? latestNews.map((article, index) => (
{article.title}
{article.category} {article.date} {article.readTime}

{article.title}

{article.excerpt}

{article.author && (

{home.news.author}: {article.author}

)}
)) : ( // 如果没有新闻数据,显示占位符 [1, 2, 3].map((item) => (

{home.news.sampleTitle} {item}

{home.news.sampleDate}

)) )}
{/* 查看更多新闻按钮 */} {latestNews.length > 0 && (
{home.news.viewMore}
)}
{/* Contact Section */}

{home.contact.title}

{home.contact.description}

); }