feat: create news list page with filtering and search

2026-02-26 18:03:44 +08:00
parent 9cdd554454
commit 3138d62afc
1 changed files with 127 additions and 0 deletions
@@ -0,0 +1,127 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+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 { Search, Calendar, ArrowRight, 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 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-[#F5F7FA]">
+      <div className="bg-gradient-to-br from-[#C41E3A] to-[#1C1C1C] py-20">
+        <div className="container-wide">
+          <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
+            新闻动态
+          </h1>
+          <p className="text-xl text-white/90 max-w-2xl">
+            了解睿新致远最新动态，把握行业发展脉搏
+          </p>
+        </div>
+      </div>
+
+      <div className="container-wide py-12">
+        <div 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>
+        </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={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: 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>
+  );
+}