'use client'; import { useEffect, useState } from 'react'; import Link from 'next/link'; import { Navigation } from '../../../components/Navigation'; import { Footer } from '../../../components/Footer'; import { Head } from '../../../components/Head'; import { Calendar, User, Clock, ArrowLeft } from 'lucide-react'; import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism'; type Lang = 'zh' | 'zh-tw' | 'en'; interface ArticleData { content: string; meta: { title: string; description: string; author: string; date: string; readTime: number; category: string; }; } interface ArticleClientProps { slug: string; initialData: ArticleData; } export function ArticleClient({ slug, initialData }: ArticleClientProps) { const [currentLang, setCurrentLang] = useState('zh'); const [content, setContent] = useState(initialData.content); const [meta, setMeta] = useState(initialData.meta); const translations = { zh: { nav: { home: '首页', products: '产品', solutions: '解决方案', support: '支持', news: '资讯', contact: '联系我们' }, backToNews: '返回资讯列表', minutes: '分钟', articleNotFound: '文章未找到', backToList: '返回资讯列表', }, 'zh-tw': { nav: { home: '首頁', products: '產品', solutions: '解決方案', support: '支援', news: '資訊', contact: '聯絡我們' }, backToNews: '返回資訊列表', minutes: '分鐘', articleNotFound: '文章未找到', backToList: '返回資訊列表', }, en: { nav: { home: 'Home', products: 'Products', solutions: 'Solutions', support: 'Support', news: 'News', contact: 'Contact' }, backToNews: 'Back to News', minutes: 'min', articleNotFound: 'Article Not Found', backToList: 'Back to News List', }, } as const; const t = translations[currentLang]; useEffect(() => { const browserLang = navigator.language.toLowerCase(); if (browserLang.includes('en')) { setCurrentLang('en'); } else if (browserLang.includes('zh-tw') || browserLang.includes('zh-hk')) { setCurrentLang('zh-tw'); } }, []); // 移除动态加载内容的逻辑，直接使用传入的数据 // useEffect(() => { ... }, [slug, currentLang]); const getCategoryColor = (category: string) => { const colors = { tech: 'bg-blue-100 text-blue-800', product: 'bg-green-100 text-green-800', industry: 'bg-purple-100 text-purple-800', tutorial: 'bg-orange-100 text-orange-800', } as const; return (colors as any)[category] || 'bg-gray-100 text-gray-800'; }; const getCategoryName = (category: string) => { const names = { zh: { tech: '技术文章', product: '产品更新', industry: '行业动态', tutorial: '教程指南' }, 'zh-tw': { tech: '技術文章', product: '產品更新', industry: '行業動態', tutorial: '教學指南' }, en: { tech: 'Technical Articles', product: 'Product Updates', industry: 'Industry News', tutorial: 'Tutorials' }, } as const; return (names as any)[currentLang]?.[category] || category; }; if (!meta || !content) { return (

{t.articleNotFound}

{t.backToList}
); } return (
{t.backToNews}
{getCategoryName(meta.category)}

{meta.title}

{meta.author}
{meta.date}
{meta.readTime} {t.minutes}
{String(children).replace(/\n$/, '')} ) : ( {children} ); }, }} > {content}
); }