feat: 添加面包屑导航组件并优化页面布局

refactor: 重构页面结构和导航逻辑 fix: 修复移动端菜单导航和滚动行为 perf: 优化图片加载性能和资源请求 test: 添加端到端测试和性能测试用例 docs: 更新.gitignore文件 chore: 更新依赖和配置 style: 优化代码格式和类型安全 ci: 调整Playwright测试超时时间 build: 更新Next.js配置和构建选项
2026-02-28 09:09:04 +08:00
parent 9d01e0982f
commit 9451814ca4
60 changed files with 4078 additions and 148 deletions
@@ -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} />;
+}
@@ -0,0 +1,136 @@
+'use client';
+
+import { useState, useMemo, useRef } from 'react';
+import { useInView } from 'framer-motion';
+import { NEWS } from '@/lib/constants';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { PageHeader } from '@/components/ui/page-header';
+import { Breadcrumb } from '@/components/layout/breadcrumb';
+import { Search, Calendar, ArrowRight, ArrowLeft, Filter } from 'lucide-react';
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+
+const categories = ['全部', '公司新闻', '产品发布', '合作动态', '行业资讯'];
+
+export default function NewsListPage() {
+  const [selectedCategory, setSelectedCategory] = useState('全部');
+  const [searchQuery, setSearchQuery] = useState('');
+  const contentRef = useRef(null);
+  const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
+
+  const filteredNews = useMemo(() => {
+    return NEWS.filter((news) => {
+      const matchesCategory = selectedCategory === '全部' || news.category === selectedCategory;
+      const matchesSearch = 
+        news.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        news.excerpt.toLowerCase().includes(searchQuery.toLowerCase());
+      return matchesCategory && matchesSearch;
+    });
+  }, [selectedCategory, searchQuery]);
+
+  return (
+    <div className="min-h-screen bg-white">
+      <Breadcrumb items={[{ label: '新闻动态', href: '/news' }]} />
+      <PageHeader
+        title="新闻动态"
+        description="了解睿新致远最新动态，把握行业发展脉搏"
+      />
+
+      <div className="container-wide relative z-10 py-12" ref={contentRef}>
+        <Link href="/" className="inline-flex items-center text-[#5C5C5C] hover:text-[#C41E3A] transition-colors mb-8">
+          <ArrowLeft className="w-4 h-4 mr-2" />
+          返回首页
+        </Link>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.6 }}
+          className="mb-8 space-y-4"
+        >
+          <div className="flex flex-col md:flex-row gap-4 items-start md:items-center">
+            <div className="flex items-center gap-2 text-[#1C1C1C]">
+              <Filter className="w-5 h-5" />
+              <span className="font-medium">分类筛选：</span>
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {categories.map((category) => (
+                <Button
+                  key={category}
+                  variant={selectedCategory === category ? 'default' : 'outline'}
+                  onClick={() => setSelectedCategory(category)}
+                  className={
+                    selectedCategory === category
+                      ? 'bg-[#C41E3A] hover:bg-[#A01830] text-white'
+                      : ''
+                  }
+                >
+                  {category}
+                </Button>
+              ))}
+            </div>
+          </div>
+
+          <div className="relative max-w-md">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#5C5C5C] w-5 h-5" />
+            <Input
+              type="text"
+              placeholder="搜索新闻..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-10"
+            />
+          </div>
+        </motion.div>
+
+        {filteredNews.length === 0 ? (
+            <div className="text-center py-20">
+              <p className="text-xl text-[#5C5C5C]">没有找到相关新闻</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {filteredNews.map((news, index) => (
+                <motion.div
+                  key={news.id}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+                  transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
+                >
+                  <Link href={`/news/${news.id}`}>
+                    <Card className="h-full hover:shadow-lg transition-shadow cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A]">
+                      <CardContent className="p-0">
+                        <div className="aspect-video bg-gradient-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 flex items-center justify-center mb-4">
+                          <span className="text-4xl">📰</span>
+                        </div>
+                        <div className="p-6">
+                          <div className="flex items-center gap-2 mb-3">
+                            <Badge variant="secondary">{news.category}</Badge>
+                            <div className="flex items-center gap-1 text-sm text-[#5C5C5C]">
+                              <Calendar className="w-4 h-4" />
+                              {news.date}
+                            </div>
+                          </div>
+                          <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3 line-clamp-2">
+                            {news.title}
+                          </h3>
+                          <p className="text-[#5C5C5C] text-sm line-clamp-3 mb-4">
+                            {news.excerpt}
+                          </p>
+                          <div className="flex items-center text-[#C41E3A] text-sm font-medium group">
+                            阅读更多
+                            <ArrowRight className="ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform" />
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </Link>
+                </motion.div>
+              ))}
+            </div>
+          )}
+      </div>
+    </div>
+  );
+}