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

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

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

ci: 更新Playwright测试配置

src/components/sections/services-section.tsx

@@ -7,7 +7,7 @@ import Link from 'next/link';
 import { Code, Cloud, BarChart3, Shield, ArrowRight } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import { SERVICES } from '@/lib/constants';
+import { useServices } from '@/hooks/use-services';
 
 const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
   Code,
@@ -28,13 +28,41 @@ interface ServicesSectionProps {
 export function ServicesSection({ config }: ServicesSectionProps) {
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, margin: '-100px' });
+  const { services, loading, error } = useServices();
 
   const filteredServices = useMemo(() => {
-    if (!config?.items || config.items.length === 0) {
-      return SERVICES;
+    if (!services || services.length === 0) {
+      return [];
     }
-    return SERVICES.filter(service => config.items?.includes(service.id));
-  }, [config]);
+    if (!config?.items || config.items.length === 0) {
+      return services;
+    }
+    return services.filter(service => config.items?.includes(service.id));
+  }, [services, config]);
+
+  if (loading) {
+    return (
+      <section id="services" aria-labelledby="services-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}>
+        <div className="container-wide relative z-10">
+          <div className="text-center">
+            <p className="text-lg text-[#5C5C5C]">加载中...</p>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  if (error) {
+    return (
+      <section id="services" aria-labelledby="services-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}>
+        <div className="container-wide relative z-10">
+          <div className="text-center">
+            <p className="text-lg text-red-600">加载服务信息失败，请稍后重试</p>
+          </div>
+        </div>
+      </section>
+    );
+  }
 
   return (
     <section id="services" aria-labelledby="services-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}>
@@ -56,36 +84,42 @@ export function ServicesSection({ config }: ServicesSectionProps) {
           </p>
         </motion.div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-          {filteredServices.map((service, index) => {
-            const Icon = iconMap[service.icon];
-            return (
-              <motion.div
-                key={service.id}
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
-              >
-                <Link href={`/services/${service.id}`}>
-                  <Card className="p-6 h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors">
-                    <CardContent className="p-0">
-                      <div className="w-12 h-12 rounded-xl bg-[#F5F5F5] flex items-center justify-center mb-4 group-hover:bg-[#C41E3A] transition-all duration-300">
-                        {Icon && <Icon className="w-6 h-6 text-[#1C1C1C] group-hover:text-white transition-colors" />}
-                      </div>
-                      <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">{service.title}</h3>
-                      <p className="text-[#5C5C5C] text-sm leading-relaxed">{service.description}</p>
-                      <div className="mt-4 flex items-center text-[#C41E3A] text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity">
-                        了解详情
-                        <ArrowRight className="ml-1 w-4 h-4" />
-                      </div>
-                    </CardContent>
-                  </Card>
-                </Link>
-              </motion.div>
-            );
-          })}
-        </div>
+        {filteredServices.length > 0 ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {filteredServices.map((service, index) => {
+              const Icon = iconMap[service.icon];
+              return (
+                <motion.div
+                  key={service.id}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                >
+                  <Link href={`/services/${service.id}`}>
+                    <Card className="p-6 h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors">
+                      <CardContent className="p-0">
+                        <div className="w-12 h-12 rounded-xl bg-[#F5F5F5] flex items-center justify-center mb-4 group-hover:bg-[#C41E3A] transition-all duration-300">
+                          {Icon && <Icon className="w-6 h-6 text-[#1C1C1C] group-hover:text-white transition-colors" />}
+                        </div>
+                        <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">{service.title}</h3>
+                        <p className="text-[#5C5C5C] text-sm leading-relaxed">{service.description}</p>
+                        <div className="mt-4 flex items-center text-[#C41E3A] text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity">
+                          了解详情
+                          <ArrowRight className="ml-1 w-4 h-4" />
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </Link>
+                </motion.div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="text-center py-12">
+            <p className="text-lg text-[#5C5C5C]">暂无服务信息</p>
+          </div>
+        )}
 
         <motion.div
           initial={{ opacity: 0, y: 20 }}