feat: create news detail page with related news

2026-02-26 18:04:18 +08:00
parent 3138d62afc
commit bc936328dd
1 changed files with 132 additions and 0 deletions
@@ -0,0 +1,132 @@
+import { notFound } from 'next/navigation';
+import { NEWS } from '@/lib/constants';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { ArrowLeft, Calendar, Share2 } from 'lucide-react';
+import Link from 'next/link';
+
+export async function generateStaticParams() {
+  return NEWS.map((news) => ({
+    id: news.id,
+  }));
+}
+
+export async function generateMetadata({ params }: { params: { id: string } }) {
+  const news = NEWS.find((n) => n.id === params.id);
+  
+  if (!news) {
+    return {
+      title: '新闻未找到',
+    };
+  }
+
+  return {
+    title: `${news.title} - 睿新致远`,
+    description: news.excerpt,
+  };
+}
+
+export default function NewsDetailPage({ params }: { params: { id: string } }) {
+  const news = NEWS.find((n) => n.id === params.id);
+
+  if (!news) {
+    notFound();
+  }
+
+  const relatedNews = NEWS
+    .filter((n) => n.id !== news.id && n.category === news.category)
+    .slice(0, 3);
+
+  return (
+    <div className="min-h-screen bg-white">
+      <div className="bg-gradient-to-br from-[#C41E3A] to-[#1C1C1C] py-20">
+        <div className="container-wide">
+          <Link
+            href="/news"
+            className="inline-flex items-center text-white/80 hover:text-white transition-colors mb-8"
+          >
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            返回新闻列表
+          </Link>
+          <div className="max-w-4xl">
+            <div className="inline-block px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full text-white text-sm mb-6">
+              {news.category}
+            </div>
+            <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
+              {news.title}
+            </h1>
+            <div className="flex items-center gap-6 text-white/90">
+              <div className="flex items-center gap-2">
+                <Calendar className="w-5 h-5" />
+                {news.date}
+              </div>
+              <button className="flex items-center gap-2 hover:text-white transition-colors">
+                <Share2 className="w-5 h-5" />
+                分享
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="container-wide py-16">
+        <div className="max-w-4xl">
+          <article className="prose prose-lg max-w-none">
+            <div className="aspect-video bg-gradient-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 rounded-lg mb-8 flex items-center justify-center">
+              <span className="text-6xl">📰</span>
+            </div>
+            
+            <p className="text-xl text-[#5C5C5C] leading-relaxed mb-8 border-l-4 border-[#C41E3A] pl-6">
+              {news.excerpt}
+            </p>
+
+            <div className="text-[#1C1C1C] leading-relaxed whitespace-pre-line">
+              {news.content}
+            </div>
+          </article>
+
+          {relatedNews.length > 0 && (
+            <div className="mt-16 pt-16 border-t border-gray-200">
+              <h2 className="text-2xl font-bold text-[#1C1C1C] mb-8">
+                相关新闻
+              </h2>
+              <div className="grid md:grid-cols-3 gap-6">
+                {relatedNews.map((related) => (
+                  <Link key={related.id} href={`/news/${related.id}`}>
+                    <div className="group cursor-pointer">
+                      <div className="aspect-video bg-gradient-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 rounded-lg mb-4 flex items-center justify-center group-hover:shadow-lg transition-shadow">
+                        <span className="text-4xl">📰</span>
+                      </div>
+                      <Badge variant="secondary" className="mb-2">
+                        {related.category}
+                      </Badge>
+                      <h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 line-clamp-2 group-hover:text-[#C41E3A] transition-colors">
+                        {related.title}
+                      </h3>
+                      <p className="text-sm text-[#5C5C5C] line-clamp-2">
+                        {related.excerpt}
+                      </p>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <div className="mt-16 flex justify-center gap-4">
+            <Button variant="outline" size="lg" asChild>
+              <Link href="/news">
+                返回新闻列表
+              </Link>
+            </Button>
+            <Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
+              <Link href="/#contact">
+                联系我们
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}