feat: 实现内容管理API及相关功能

refactor(services-section): 重构服务展示组件使用API数据
refactor(news-section): 重构新闻展示组件使用API数据
refactor(products-section): 重构产品展示组件使用API数据

test: 添加API客户端和服务钩子的单元测试
test(e2e): 添加配置验证和API响应格式的端到端测试

ci: 更新Playwright测试配置

src/components/sections/news-section.tsx

@@ -6,7 +6,7 @@ import { useRef, useMemo } from 'react';
 import Link from 'next/link';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { ArrowRight, Calendar } from 'lucide-react';
-import { NEWS } from '@/lib/constants';
+import { useNews } from '@/hooks/use-news';
 
 interface NewsConfig {
   enabled?: boolean;
@@ -22,12 +22,17 @@ interface NewsSectionProps {
 export function NewsSection({ config }: NewsSectionProps) {
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, margin: '-100px' });
+  const { news, loading, error } = useNews();
   
   const displayedNews = useMemo(() => {
-    let filtered = NEWS;
+    if (!news || news.length === 0) {
+      return [];
+    }
+    
+    let filtered = news;
     
     if (config?.categories && config.categories.length > 0) {
-      filtered = filtered.filter(news => config.categories?.includes(news.category));
+      filtered = filtered.filter(newsItem => config.categories?.includes(newsItem.category));
     }
     
     if (config?.sortOrder === 'asc') {
@@ -38,7 +43,31 @@ export function NewsSection({ config }: NewsSectionProps) {
     
     const count = config?.displayCount || 4;
     return filtered.slice(0, count);
-  }, [config]);
+  }, [news, config]);
+
+  if (loading) {
+    return (
+      <section id="news" role="region" aria-labelledby="news-heading" className="py-24 bg-[#F5F5F5]" ref={ref}>
+        <div className="container-custom">
+          <div className="text-center">
+            <p className="text-lg text-[#5C5C5C]">加载中...</p>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  if (error) {
+    return (
+      <section id="news" role="region" aria-labelledby="news-heading" className="py-24 bg-[#F5F5F5]" ref={ref}>
+        <div className="container-custom">
+          <div className="text-center">
+            <p className="text-lg text-red-600">加载新闻信息失败，请稍后重试</p>
+          </div>
+        </div>
+      </section>
+    );
+  }
 
   return (
     <section id="news" role="region" aria-labelledby="news-heading" className="py-24 bg-[#F5F5F5]" ref={ref}>
@@ -57,43 +86,49 @@ export function NewsSection({ config }: NewsSectionProps) {
           </p>
         </motion.div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
-          {displayedNews.map((news, idx) => (
-            <motion.div
-              key={news.id}
-              initial={{ opacity: 0, y: 20 }}
-              animate={isInView ? { opacity: 1, y: 0 } : {}}
-              transition={{ duration: 0.4, delay: idx * 0.08 }}
-            >
-              <Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C]">
-                <CardHeader>
-                  <div className="flex items-center gap-2 mb-3">
-                    <span className="inline-block px-2 py-0.5 rounded-full bg-[#F5F5F5] text-[#1C1C1C] text-xs font-medium">
-                      {news.category}
-                    </span>
-                    <span className="text-sm text-[#5C5C5C] flex items-center gap-1">
-                      <Calendar className="w-3 h-3" />
-                      {news.date}
-                    </span>
-                  </div>
-                  <CardTitle className="text-xl leading-tight">{news.title}</CardTitle>
-                </CardHeader>
-                <CardContent className="flex-1 flex flex-col">
-                  <CardDescription className="text-base leading-relaxed mb-6 flex-1">
-                    {news.excerpt}
-                  </CardDescription>
-                  <a
-                    href={`/news/${news.id}`}
-                    className="inline-flex items-center text-sm font-medium text-[#1C1C1C] hover:text-[#C41E3A] transition-colors group/link"
-                  >
-                    阅读更多
-                    <ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover/link:translate-x-1" />
-                  </a>
-                </CardContent>
-              </Card>
-            </motion.div>
-          ))}
-        </div>
+        {displayedNews.length > 0 ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
+            {displayedNews.map((newsItem, idx) => (
+              <motion.div
+                key={newsItem.id}
+                initial={{ opacity: 0, y: 20 }}
+                animate={isInView ? { opacity: 1, y: 0 } : {}}
+                transition={{ duration: 0.4, delay: idx * 0.08 }}
+              >
+                <Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C]">
+                  <CardHeader>
+                    <div className="flex items-center gap-2 mb-3">
+                      <span className="inline-block px-2 py-0.5 rounded-full bg-[#F5F5F5] text-[#1C1C1C] text-xs font-medium">
+                        {newsItem.category}
+                      </span>
+                      <span className="text-sm text-[#5C5C5C] flex items-center gap-1">
+                        <Calendar className="w-3 h-3" />
+                        {newsItem.date}
+                      </span>
+                    </div>
+                    <CardTitle className="text-xl leading-tight">{newsItem.title}</CardTitle>
+                  </CardHeader>
+                  <CardContent className="flex-1 flex flex-col">
+                    <CardDescription className="text-base leading-relaxed mb-6 flex-1">
+                      {newsItem.excerpt}
+                    </CardDescription>
+                    <a
+                      href={`/news/${newsItem.id}`}
+                      className="inline-flex items-center text-sm font-medium text-[#1C1C1C] hover:text-[#C41E3A] transition-colors group/link"
+                    >
+                      阅读更多
+                      <ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover/link:translate-x-1" />
+                    </a>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-12">
+            <p className="text-lg text-[#5C5C5C]">暂无新闻信息</p>
+          </div>
+        )}
 
         <motion.div 
           initial={{ opacity: 0, y: 20 }}