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>
|
|||
|
|
);
|
|||
|
|
}
|