feat: 添加面包屑导航组件并优化页面布局
refactor: 重构页面结构和导航逻辑 fix: 修复移动端菜单导航和滚动行为 perf: 优化图片加载性能和资源请求 test: 添加端到端测试和性能测试用例 docs: 更新.gitignore文件 chore: 更新依赖和配置 style: 优化代码格式和类型安全 ci: 调整Playwright测试超时时间 build: 更新Next.js配置和构建选项
This commit is contained in:
张翔
@@ -0,0 +1,123 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Breadcrumb } from '@/components/layout/breadcrumb';
|
||||
import { ArrowLeft, Calendar } from 'lucide-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { NEWS } from '@/lib/constants';
|
||||
|
||||
interface NewsDetailClientProps {
|
||||
news: typeof NEWS[0];
|
||||
}
|
||||
|
||||
export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
||||
const contentRef = useRef(null);
|
||||
const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
|
||||
const router = useRouter();
|
||||
|
||||
const relatedNews = NEWS
|
||||
.filter((n) => n.id !== news.id && n.category === news.category)
|
||||
.slice(0, 3);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Breadcrumb items={[{ label: '新闻动态', href: '/news' }, { label: news.title, href: `/news/${news.id}` }]} />
|
||||
<div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
|
||||
<div className="container-wide relative z-10 pt-32 pb-20">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-[#5C5C5C] hover:text-[#C41E3A] hover:bg-[#C41E3A]/10"
|
||||
onClick={() => router.back()}
|
||||
type="button"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
返回
|
||||
</Button>
|
||||
<div className="max-w-4xl">
|
||||
<div className="inline-block px-4 py-2 bg-[#C41E3A]/10 rounded-full text-[#C41E3A] text-sm mb-6">
|
||||
{news.category}
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||||
{news.title}
|
||||
</h1>
|
||||
<div className="flex items-center gap-6 text-[#5C5C5C]">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="w-5 h-5" />
|
||||
{news.date}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-wide relative z-10 py-16" ref={contentRef}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6 }}
|
||||
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-[#E5E5E5]">
|
||||
<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">
|
||||
<Link href="/news">
|
||||
<Button variant="outline" size="lg">
|
||||
返回新闻列表
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/#contact">
|
||||
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white">
|
||||
联系我们
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import { NEWS } from '@/lib/constants';
|
||||
import { NewsDetailClient } from './NewsDetailClient';
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return NEWS.map((news) => ({
|
||||
slug: news.id,
|
||||
}));
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
|
||||
const { slug } = await params;
|
||||
const news = NEWS.find((n) => n.id === slug);
|
||||
|
||||
if (!news) {
|
||||
return {
|
||||
title: '新闻未找到',
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: `${news.title} - 睿新致远`,
|
||||
description: news.excerpt,
|
||||
};
|
||||
}
|
||||
|
||||
export default async function NewsDetailPage({ params }: { params: Promise<{ slug: string }> }) {
|
||||
const { slug } = await params;
|
||||
const news = NEWS.find((n) => n.id === slug);
|
||||
|
||||
if (!news) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const serializedNews = JSON.parse(JSON.stringify(news));
|
||||
return <NewsDetailClient news={serializedNews} />;
|
||||
}
|
||||
Reference in New Issue
Block a user