213 lines
9.1 KiB
TypeScript
213 lines
9.1 KiB
TypeScript
'use client';
|
||
|
||
import Navigation from '../../../../components/Navigation';
|
||
import Footer from '../../../../components/Footer';
|
||
import { useLanguage } from '../../../../hooks/useLanguage';
|
||
import Link from 'next/link';
|
||
import { LanguageType } from '../../../../lib/content';
|
||
|
||
interface ArticlePageProps {
|
||
params: {
|
||
lang: string;
|
||
id: string;
|
||
};
|
||
}
|
||
|
||
export default function ArticlePage({ params }: ArticlePageProps) {
|
||
const { currentLang, setCurrentLang, currentContent, createLocalizedPath } = useLanguage(
|
||
params.lang as LanguageType,
|
||
);
|
||
const articleId = parseInt(params.id, 10);
|
||
|
||
const article = currentContent.news.articles.find((a) => a.id === articleId);
|
||
const relatedArticles = currentContent.news.articles
|
||
.filter((a) => a.id !== articleId && a.category === article?.category)
|
||
.slice(0, 3);
|
||
|
||
if (!article) {
|
||
return (
|
||
<div className="min-h-screen bg-gray-900 text-white">
|
||
<Navigation
|
||
currentLang={currentLang}
|
||
setCurrentLang={setCurrentLang}
|
||
content={currentContent}
|
||
createLocalizedPath={createLocalizedPath}
|
||
/>
|
||
|
||
<div className="flex items-center justify-center min-h-[60vh]">
|
||
<div className="text-center">
|
||
<h1 className="text-4xl font-bold mb-4 text-cyan-400">文章未找到</h1>
|
||
<p className="text-gray-400 mb-8">抱歉，您访问的文章不存在。</p>
|
||
<Link
|
||
href={createLocalizedPath('/news')}
|
||
className="px-6 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg font-semibold hover:from-cyan-400 hover:to-blue-500 transition-all duration-300"
|
||
>
|
||
返回资讯列表
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 🔧 完整调用 Footer，添加 createLocalizedPath */}
|
||
<Footer content={currentContent} createLocalizedPath={createLocalizedPath} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const getCategoryColor = (category: string) => {
|
||
const colors: Record<string, string> = {
|
||
industry: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
|
||
technology: 'bg-green-500/20 text-green-400 border-green-500/30',
|
||
company: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
|
||
case: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
|
||
};
|
||
return colors[category] ?? 'bg-gray-500/20 text-gray-400 border-gray-500/30';
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-900 text-white">
|
||
<Navigation
|
||
currentLang={currentLang}
|
||
setCurrentLang={setCurrentLang}
|
||
content={currentContent}
|
||
createLocalizedPath={createLocalizedPath}
|
||
/>
|
||
|
||
{/* Breadcrumb */}
|
||
<section className="relative z-10 px-6 py-8">
|
||
<div className="max-w-4xl mx-auto">
|
||
<nav className="flex items-center space-x-2 text-sm text-gray-400">
|
||
<Link
|
||
href={createLocalizedPath('/')}
|
||
className="hover:text-cyan-400 transition-colors"
|
||
>
|
||
首页
|
||
</Link>
|
||
<span>/</span>
|
||
<Link
|
||
href={createLocalizedPath('/news')}
|
||
className="hover:text-cyan-400 transition-colors"
|
||
>
|
||
资讯
|
||
</Link>
|
||
<span>/</span>
|
||
<span className="text-gray-300">{article.title}</span>
|
||
</nav>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Article Header */}
|
||
<section className="relative z-10 px-6 py-8">
|
||
<div className="max-w-4xl mx-auto">
|
||
<div className="mb-6">
|
||
<span
|
||
className={`px-3 py-1 rounded-full text-sm font-medium border ${getCategoryColor(
|
||
article.category,
|
||
)}`}
|
||
>
|
||
{currentContent.news.categories[article.category]}
|
||
</span>
|
||
</div>
|
||
|
||
<h1 className="text-3xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent leading-tight">
|
||
{article.title}
|
||
</h1>
|
||
|
||
<div className="flex flex-wrap items-center gap-4 text-gray-400 mb-8">
|
||
<div className="flex items-center">
|
||
<svg
|
||
className="w-5 h-5 mr-2"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
|
||
/>
|
||
</svg>
|
||
{article.author}
|
||
</div>
|
||
<div className="flex items-center">
|
||
<svg
|
||
className="w-5 h-5 mr-2"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||
/>
|
||
</svg>
|
||
{article.date}
|
||
</div>
|
||
<div className="flex items-center">
|
||
<svg
|
||
className="w-5 h-5 mr-2"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
||
/>
|
||
</svg>
|
||
{article.readTime}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Tags */}
|
||
<div className="flex flex-wrap gap-2 mb-8">
|
||
{article.tags.map((tag, idx) => (
|
||
<span
|
||
key={idx}
|
||
className="px-3 py-1 bg-gray-700/50 text-gray-400 text-sm rounded-full"
|
||
>
|
||
#{tag}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Article Content */}
|
||
<section className="relative z-10 px-6 py-8">
|
||
<div className="max-w-4xl mx-auto">
|
||
<div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-8 border border-cyan-500/20">
|
||
<div className="prose prose-lg prose-invert max-w-none">
|
||
<p className="text-xl text-gray-300 leading-relaxed mb-6">
|
||
{article.summary}
|
||
</p>
|
||
<div className="text-gray-300 leading-relaxed space-y-4">
|
||
{article.content.split('\n').map((paragraph, idx) => (
|
||
<p key={idx}>{paragraph}</p>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Share Section */}
|
||
<section className="relative z-10 px-6 py-8">
|
||
<div className="max-w-4xl mx-auto">{/* ... 分享按钮等省略 */}</div>
|
||
</section>
|
||
|
||
{/* Related Articles */}
|
||
{relatedArticles.length > 0 && (
|
||
<section className="relative z-10 px-6 py-20">{/* ... 相关文章省略 */}</section>
|
||
)}
|
||
|
||
{/* 🔧 完整调用 Footer，传入 createLocalizedPath */}
|
||
<Footer content={currentContent} createLocalizedPath={createLocalizedPath} />
|
||
</div>
|
||
);
|
||
}
|