405 lines
18 KiB
TypeScript
405 lines
18 KiB
TypeScript
|
'use client';
|
|||
|
|
|
|||
|
|
import { useState, useEffect } from 'react';
|
|||
|
|
import Link from 'next/link';
|
|||
|
|
import Header from '@/app/components/Header';
|
|||
|
|
import Footer from '@/app/components/Footer';
|
|||
|
|
import { type Article } from '../../lib/types';
|
|||
|
|
// News translations
|
|||
|
|
export const newsTranslations = {
|
|||
|
|
'zh-CN': {
|
|||
|
|
nav: {
|
|||
|
|
home: '首页',
|
|||
|
|
products: '产品与服务',
|
|||
|
|
news: '新闻资讯',
|
|||
|
|
support: '客户支持',
|
|||
|
|
about: '关于我们',
|
|||
|
|
contact: '联系我们',
|
|||
|
|
},
|
|||
|
|
title: '新闻资讯',
|
|||
|
|
subtitle: '了解最新的云计算技术动态和行业资讯',
|
|||
|
|
categories: [
|
|||
|
|
{ id: 'all', name: '全部' },
|
|||
|
|
{ id: 'tech', name: '技术动态' },
|
|||
|
|
{ id: 'product', name: '产品更新' },
|
|||
|
|
{ id: 'industry', name: '行业资讯' },
|
|||
|
|
{ id: 'company', name: '公司动态' },
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
articles: [
|
|||
|
|
{
|
|||
|
|
id: '1',
|
|||
|
|
title: 'AWS新一代EC2实例发布，性能提升50%',
|
|||
|
|
excerpt:
|
|||
|
|
'AWS发布了新一代EC2实例，采用最新的处理器技术，在计算性能、网络性能和存储性能方面都有显著提升...',
|
|||
|
|
category: 'tech',
|
|||
|
|
date: '2024-01-15',
|
|||
|
|
image: '/api/placeholder/400/250',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: '2',
|
|||
|
|
title: '云安全最佳实践：保护您的AWS环境',
|
|||
|
|
excerpt:
|
|||
|
|
'随着云计算的普及，云安全变得越来越重要。本文将介绍AWS环境下的安全最佳实践...',
|
|||
|
|
category: 'tech',
|
|||
|
|
date: '2024-01-12',
|
|||
|
|
image: '/api/placeholder/400/250',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: '3',
|
|||
|
|
title: '合肥懂云获得AWS高级合作伙伴认证',
|
|||
|
|
excerpt: '我们很高兴地宣布，合肥懂云信息科技有限公司正式获得AWS高级合作伙伴认证...',
|
|||
|
|
category: 'company',
|
|||
|
|
date: '2024-01-10',
|
|||
|
|
image: '/api/placeholder/400/250',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
readMore: '阅读更多',
|
|||
|
|
noArticles: '暂无相关文章',
|
|||
|
|
footer: {
|
|||
|
|
sections: [
|
|||
|
|
{
|
|||
|
|
title: '目录',
|
|||
|
|
items: ['首页', '产品与服务', '新闻资讯', '客户支持', '关于我们'],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '热门产品',
|
|||
|
|
items: ['轻量云服务器', '站群服务器', 'EC2服务器', '高防服务器', 'S3云存储'],
|
|||
|
|
},
|
|||
|
|
{ title: '客户支持', items: ['技术支持', '在线客服', '帮助文档', '服务状态'] },
|
|||
|
|
{ title: '', items: ['新闻资讯', '关于我们', '隐私政策', '站点地图'] },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
'zh-TW': {
|
|||
|
|
nav: {
|
|||
|
|
home: '首頁',
|
|||
|
|
products: '產品與服務',
|
|||
|
|
news: '新聞資訊',
|
|||
|
|
support: '客戶支持',
|
|||
|
|
about: '關於我們',
|
|||
|
|
contact: '聯繫我們',
|
|||
|
|
},
|
|||
|
|
title: '新聞資訊',
|
|||
|
|
subtitle: '了解最新的雲計算技術動態和行業資訊',
|
|||
|
|
categories: [
|
|||
|
|
{ id: 'all', name: '全部' },
|
|||
|
|
{ id: 'tech', name: '技術動態' },
|
|||
|
|
{ id: 'product', name: '產品更新' },
|
|||
|
|
{ id: 'industry', name: '行業資訊' },
|
|||
|
|
{ id: 'company', name: '公司動態' },
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
articles: [
|
|||
|
|
{
|
|||
|
|
id: '1',
|
|||
|
|
title: 'AWS新一代EC2實例發布，性能提升50%',
|
|||
|
|
excerpt:
|
|||
|
|
'AWS發布了新一代EC2實例，採用最新的處理器技術，在計算性能、網絡性能和存儲性能方面都有顯著提升...',
|
|||
|
|
category: 'tech',
|
|||
|
|
date: '2024-01-15',
|
|||
|
|
image: '/api/placeholder/400/250',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: '2',
|
|||
|
|
title: '雲安全最佳實踐：保護您的AWS環境',
|
|||
|
|
excerpt:
|
|||
|
|
'隨著雲計算的普及，雲安全變得越來越重要。本文將介紹AWS環境下的安全最佳實踐...',
|
|||
|
|
category: 'tech',
|
|||
|
|
date: '2024-01-12',
|
|||
|
|
image: '/api/placeholder/400/250',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: '3',
|
|||
|
|
title: '合肥懂雲獲得AWS高級合作夥伴認證',
|
|||
|
|
excerpt: '我們很高興地宣布，合肥懂雲信息科技有限公司正式獲得AWS高級合作夥伴認證...',
|
|||
|
|
category: 'company',
|
|||
|
|
date: '2024-01-10',
|
|||
|
|
image: '/api/placeholder/400/250',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
readMore: '閱讀更多',
|
|||
|
|
noArticles: '暫無相關文章',
|
|||
|
|
footer: {
|
|||
|
|
sections: [
|
|||
|
|
{
|
|||
|
|
title: '目錄',
|
|||
|
|
items: ['首頁', '產品與服務', '新聞資訊', '客戶支持', '關於我們'],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '熱門產品',
|
|||
|
|
items: ['輕量雲服務器', '站群服務器', 'EC2服務器', '高防服務器', 'S3雲存儲'],
|
|||
|
|
},
|
|||
|
|
{ title: '客戶支持', items: ['技術支持', '在線客服', '幫助文檔', '服務狀態'] },
|
|||
|
|
{ title: '', items: ['新聞資訊', '關於我們', '隱私政策', '站點地圖'] },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
en: {
|
|||
|
|
nav: {
|
|||
|
|
home: 'Home',
|
|||
|
|
products: 'Products & Services',
|
|||
|
|
news: 'News',
|
|||
|
|
support: 'Support',
|
|||
|
|
about: 'About Us',
|
|||
|
|
contact: 'Contact Us',
|
|||
|
|
},
|
|||
|
|
title: 'News & Updates',
|
|||
|
|
subtitle: 'Stay updated with the latest cloud computing technology and industry insights',
|
|||
|
|
categories: [
|
|||
|
|
{ id: 'all', name: 'All' },
|
|||
|
|
{ id: 'tech', name: 'Technology' },
|
|||
|
|
{ id: 'product', name: 'Product Updates' },
|
|||
|
|
{ id: 'industry', name: 'Industry News' },
|
|||
|
|
{ id: 'company', name: 'Company News' },
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
articles: [
|
|||
|
|
{
|
|||
|
|
id: '1',
|
|||
|
|
title: 'AWS Launches New Generation EC2 Instances with 50% Performance Boost',
|
|||
|
|
excerpt:
|
|||
|
|
'AWS has released new generation EC2 instances featuring the latest processor technology, with significant improvements in compute, network, and storage performance...',
|
|||
|
|
category: 'tech',
|
|||
|
|
date: '2024-01-15',
|
|||
|
|
image: '/api/placeholder/400/250',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: '2',
|
|||
|
|
title: 'Cloud Security Best Practices: Protecting Your AWS Environment',
|
|||
|
|
excerpt:
|
|||
|
|
'As cloud computing becomes more prevalent, cloud security is becoming increasingly important. This article covers security best practices for AWS environments...',
|
|||
|
|
category: 'tech',
|
|||
|
|
date: '2024-01-12',
|
|||
|
|
image: '/api/placeholder/400/250',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: '3',
|
|||
|
|
title: 'Hefei DongYun Achieves AWS Advanced Partner Certification',
|
|||
|
|
excerpt:
|
|||
|
|
'We are pleased to announce that Hefei DongYun Information Technology Co., Ltd. has officially achieved AWS Advanced Partner certification...',
|
|||
|
|
category: 'company',
|
|||
|
|
date: '2024-01-10',
|
|||
|
|
image: '/api/placeholder/400/250',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
readMore: 'Read More',
|
|||
|
|
noArticles: 'No articles available',
|
|||
|
|
footer: {
|
|||
|
|
sections: [
|
|||
|
|
{
|
|||
|
|
title: 'Directory',
|
|||
|
|
items: ['Home', 'Products & Services', 'News', 'Support', 'About Us'],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'Popular Products',
|
|||
|
|
items: [
|
|||
|
|
'Lightweight Cloud Server',
|
|||
|
|
'Station Group Server',
|
|||
|
|
'EC2 Server',
|
|||
|
|
'High-Defense Server',
|
|||
|
|
'S3 Cloud Storage',
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{ title: 'Customer Support', items: ['Technical Support', 'Online Service', 'Help Documentation', 'Service Status'] },
|
|||
|
|
{ title: '', items: ['News', 'About Us', 'Privacy Policy', 'Site Map'] },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
type NewsLanguage = keyof typeof newsTranslations;
|
|||
|
|
|
|||
|
|
interface NewsPageClientProps {
|
|||
|
|
locale: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function NewsPageClient({ locale }: NewsPageClientProps) {
|
|||
|
|
const [language, setLanguage] = useState<NewsLanguage>(
|
|||
|
|
locale === 'zh' ? 'zh-CN' : locale === 'zh-TW' ? 'zh-TW' : 'en',
|
|||
|
|
);
|
|||
|
|
const [selectedCategory, setSelectedCategory] = useState('all');
|
|||
|
|
const [articles, setArticles] = useState<Article[]>([]);
|
|||
|
|
const [categories, setCategories] = useState<{ id: string; name: string }[]>([]);
|
|||
|
|
const t = newsTranslations[language] || newsTranslations['zh-CN'];
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
// Load articles and categories when language or category changes
|
|||
|
|
useEffect(() => {
|
|||
|
|
const fetchArticles = async () => {
|
|||
|
|
setLoading(true);
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(
|
|||
|
|
`/api/articles?locale=${language}&category=${selectedCategory}`,
|
|||
|
|
);
|
|||
|
|
if (response.ok) {
|
|||
|
|
const data = await response.json();
|
|||
|
|
setArticles(data.articles);
|
|||
|
|
|
|||
|
|
// Set categories only on first load or language change
|
|||
|
|
if (selectedCategory === 'all') {
|
|||
|
|
const t = newsTranslations[language] || newsTranslations['zh-CN'];
|
|||
|
|
const categoryMap: { [key: string]: string } = {
|
|||
|
|
tech: t.categories.find((c) => c.id === 'tech')?.name || 'Technology',
|
|||
|
|
product:
|
|||
|
|
t.categories.find((c) => c.id === 'product')?.name || 'Product',
|
|||
|
|
industry:
|
|||
|
|
t.categories.find((c) => c.id === 'industry')?.name || 'Industry',
|
|||
|
|
company:
|
|||
|
|
t.categories.find((c) => c.id === 'company')?.name || 'Company',
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const mappedCategories = [
|
|||
|
|
{
|
|||
|
|
id: 'all',
|
|||
|
|
name: t.categories.find((c) => c.id === 'all')?.name || 'All',
|
|||
|
|
},
|
|||
|
|
...data.categories.map((cat: string) => ({
|
|||
|
|
id: cat,
|
|||
|
|
name: categoryMap[cat] || cat,
|
|||
|
|
})),
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
setCategories(mappedCategories);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error fetching articles:', error);
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
fetchArticles();
|
|||
|
|
}, [language, selectedCategory]);
|
|||
|
|
|
|||
|
|
const handleLanguageChange = (newLanguage: string) => {
|
|||
|
|
const validLanguage = newLanguage as NewsLanguage;
|
|||
|
|
setLanguage(validLanguage);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="min-h-screen bg-white">
|
|||
|
|
<Header
|
|||
|
|
language={language}
|
|||
|
|
setLanguage={handleLanguageChange}
|
|||
|
|
translations={t}
|
|||
|
|
locale={locale}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* Hero Section */}
|
|||
|
|
<section className="bg-blue-600 text-white h-96 flex items-center justify-center">
|
|||
|
|
<div className="max-w-6xl mx-auto px-4 text-center">
|
|||
|
|
<h1 className="text-4xl font-bold mb-4">{t.title}</h1>
|
|||
|
|
<p className="text-xl">{t.subtitle}</p>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* Category Filter */}
|
|||
|
|
<section className="py-8 bg-gray-50">
|
|||
|
|
<div className="max-w-6xl mx-auto px-4">
|
|||
|
|
<div className="flex flex-wrap justify-center gap-4">
|
|||
|
|
{categories.map((category) => (
|
|||
|
|
<button
|
|||
|
|
key={category.id}
|
|||
|
|
onClick={() => setSelectedCategory(category.id)}
|
|||
|
|
className={`px-6 py-2 rounded-full transition-colors ${
|
|||
|
|
selectedCategory === category.id
|
|||
|
|
? 'bg-blue-600 text-white'
|
|||
|
|
: 'bg-white text-gray-700 hover:bg-blue-50'
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
{category.name}
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* Articles Section */}
|
|||
|
|
<section className="py-16">
|
|||
|
|
<div className="max-w-6xl mx-auto px-4">
|
|||
|
|
{loading ? (
|
|||
|
|
<div className="flex justify-center items-center py-16">
|
|||
|
|
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-600"></div>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|||
|
|
{articles.map((article) => {
|
|||
|
|
const categoryName =
|
|||
|
|
categories.find(
|
|||
|
|
(cat) => cat.id === article.metadata.category,
|
|||
|
|
)?.name || article.metadata.category;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<article
|
|||
|
|
key={`${article.id}-${article.metadata.locale}`}
|
|||
|
|
className="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow"
|
|||
|
|
>
|
|||
|
|
<img
|
|||
|
|
src={article.metadata.image}
|
|||
|
|
alt={article.metadata.title}
|
|||
|
|
className="w-full h-48 object-cover rounded-t-lg"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<div className="p-6">
|
|||
|
|
<div className="flex items-center justify-between mb-3">
|
|||
|
|
<span className="text-sm text-blue-600 font-medium">
|
|||
|
|
{categoryName}
|
|||
|
|
</span>
|
|||
|
|
<span className="text-sm text-gray-500">
|
|||
|
|
{article.metadata.date}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<h3 className="text-xl font-bold mb-3 line-clamp-2">
|
|||
|
|
{article.metadata.title}
|
|||
|
|
</h3>
|
|||
|
|
<p className="text-gray-600 mb-4 line-clamp-3">
|
|||
|
|
{article.metadata.excerpt}
|
|||
|
|
</p>
|
|||
|
|
<Link
|
|||
|
|
href={
|
|||
|
|
locale === 'zh'
|
|||
|
|
? `/news/${article.metadata.slug}`
|
|||
|
|
: `/${locale}/news/${article.metadata.slug}`
|
|||
|
|
}
|
|||
|
|
className="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium"
|
|||
|
|
>
|
|||
|
|
{t.readMore}
|
|||
|
|
<svg
|
|||
|
|
className="w-4 h-4 ml-2"
|
|||
|
|
fill="none"
|
|||
|
|
stroke="currentColor"
|
|||
|
|
viewBox="0 0 24 24"
|
|||
|
|
>
|
|||
|
|
<path
|
|||
|
|
strokeLinecap="round"
|
|||
|
|
strokeLinejoin="round"
|
|||
|
|
strokeWidth={2}
|
|||
|
|
d="M9 5l7 7-7 7"
|
|||
|
|
/>
|
|||
|
|
</svg>
|
|||
|
|
</Link>
|
|||
|
|
</div>
|
|||
|
|
</article>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{articles.length === 0 && !loading && (
|
|||
|
|
<div className="text-center py-16">
|
|||
|
|
<p className="text-gray-500 text-lg">{t.noArticles}</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<Footer translations={t} />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|