106 lines
4.7 KiB
TypeScript
106 lines
4.7 KiB
TypeScript
import Navbar from '../components/Navbar';
|
||
import NewsList from '../components/NewsList';
|
||
import Footer from '../components/Footer';
|
||
import type { GetStaticProps } from 'next';
|
||
import { getAllNews, NewsItem } from '../lib/content';
|
||
import { Calendar, Newspaper, TrendingUp } from 'lucide-react';
|
||
|
||
export default function NewsPage({ news }: { news: NewsItem[] }) {
|
||
// 统计新闻数据
|
||
const totalNews = news.length;
|
||
const recentNews = news.slice(0, 3);
|
||
const categories = Array.from(new Set(news.flatMap(item => item.tags || [])));
|
||
|
||
return (
|
||
<div className="pt-16 bg-background">
|
||
<Navbar />
|
||
<main>
|
||
{/* 页面标题部分 */}
|
||
<section className="px-6 py-16 bg-gradient-to-br from-blue-50 to-indigo-100">
|
||
<div className="max-w-screen-xl mx-auto text-center">
|
||
<h1 className="text-4xl md:text-5xl font-bold text-primary mb-6">
|
||
新闻资讯
|
||
</h1>
|
||
<p className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed mb-8">
|
||
了解最新的产品动态、技术更新和行业资讯，掌握云加速服务的最新发展
|
||
</p>
|
||
|
||
{/* 统计信息 */}
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-2xl mx-auto">
|
||
<div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 shadow-sm">
|
||
<div className="flex items-center justify-center mb-2">
|
||
<Newspaper className="w-6 h-6 text-accent mr-2" />
|
||
<span className="text-2xl font-bold text-primary">{totalNews}</span>
|
||
</div>
|
||
<p className="text-sm text-gray-600">新闻资讯</p>
|
||
</div>
|
||
|
||
<div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 shadow-sm">
|
||
<div className="flex items-center justify-center mb-2">
|
||
<Calendar className="w-6 h-6 text-green-500 mr-2" />
|
||
<span className="text-2xl font-bold text-primary">{categories.length}</span>
|
||
</div>
|
||
<p className="text-sm text-gray-600">分类标签</p>
|
||
</div>
|
||
|
||
<div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 shadow-sm">
|
||
<div className="flex items-center justify-center mb-2">
|
||
<TrendingUp className="w-6 h-6 text-purple-500 mr-2" />
|
||
<span className="text-2xl font-bold text-primary">实时</span>
|
||
</div>
|
||
<p className="text-sm text-gray-600">更新状态</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 最新资讯预览 */}
|
||
{recentNews.length > 0 && (
|
||
<section className="px-6 py-12 bg-white">
|
||
<div className="max-w-screen-xl mx-auto">
|
||
<h2 className="text-2xl font-bold text-primary mb-8 text-center">最新资讯</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
{recentNews.map((item, index) => (
|
||
<div key={item.slug} className="group bg-gray-50 rounded-xl p-6 hover:shadow-lg transition-all duration-300 border border-gray-100 hover:border-accent/20">
|
||
<div className="flex items-center mb-3">
|
||
<span className="bg-accent text-white text-xs font-semibold px-2 py-1 rounded-full mr-3">
|
||
最新
|
||
</span>
|
||
<time className="text-sm text-gray-500">{item.date}</time>
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-primary mb-2 group-hover:text-accent transition-colors line-clamp-2">
|
||
{item.title}
|
||
</h3>
|
||
{item.summary && (
|
||
<p className="text-gray-600 text-sm line-clamp-3 mb-3">
|
||
{item.summary}
|
||
</p>
|
||
)}
|
||
{item.tags && item.tags.length > 0 && (
|
||
<div className="flex flex-wrap gap-1">
|
||
{item.tags.slice(0, 2).map(tag => (
|
||
<span key={tag} className="px-2 py-1 text-xs bg-white border border-gray-200 rounded text-gray-600">
|
||
{tag}
|
||
</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* 新闻列表 */}
|
||
<NewsList news={news} />
|
||
</main>
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export const getStaticProps: GetStaticProps = async () => {
|
||
const news = getAllNews();
|
||
return { props: { news } };
|
||
} |