feat: 添加管理后台页面和功能，优化测试和性能配置

refactor: 重构页面导航和滚动逻辑，提升用户体验

test: 更新测试配置和用例，增加覆盖率和稳定性

perf: 优化性能指标和阈值，适应开发环境需求

ci: 添加Lighthouse CI工作流，集成性能测试

docs: 更新API文档和健康检查端点

fix: 修复登录页面和表单提交问题

style: 调整响应式布局和可访问性改进

chore: 更新依赖项和脚本配置

src/app/(marketing)/services/page.tsx

@@ -1,15 +1,15 @@
 'use client';
 
-import Link from 'next/link';
-import { motion } from 'framer-motion';
+import { useState, useMemo, useRef, ChangeEvent } from 'react';
 import { useInView } from 'framer-motion';
-import { useRef, useState, useEffect } from 'react';
+import { useServices } from '@/hooks/use-services';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
 import { PageHeader } from '@/components/ui/page-header';
-import { ServiceCardSkeleton } from '@/components/ui/loading-skeleton';
-import { ArrowRight, ArrowLeft, Code, Cloud, BarChart3, Shield } from 'lucide-react';
-import { SERVICES } from '@/lib/constants';
+import { Search, ArrowLeft, Code, Cloud, BarChart3, Shield, ChevronLeft, ChevronRight, Filter } from 'lucide-react';
+import Link from 'next/link';
+import { motion } from 'framer-motion';
 
 const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
   Code,
@@ -18,15 +18,72 @@ const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
   Shield,
 };
 
+const categories = ['全部', '软件开发', '云服务', '数据分析', '信息安全'];
+const ITEMS_PER_PAGE = 6;
+
 export default function ServicesPage() {
+  const [selectedCategory, setSelectedCategory] = useState('全部');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
   const contentRef = useRef(null);
   const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
-  const [isLoading, setIsLoading] = useState(true);
+  const { services, loading, error } = useServices();
 
-  useEffect(() => {
-    const timer = setTimeout(() => setIsLoading(false), 1000);
-    return () => clearTimeout(timer);
-  }, []);
+  const filteredServices = useMemo(() => {
+    if (!services || services.length === 0) return [];
+
+    return services.filter((service) => {
+      const matchesCategory = selectedCategory === '全部' || service.title.includes(selectedCategory);
+      const matchesSearch = 
+        service.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        service.description.toLowerCase().includes(searchQuery.toLowerCase());
+      return matchesCategory && matchesSearch;
+    });
+  }, [services, selectedCategory, searchQuery]);
+
+  const totalPages = Math.ceil(filteredServices.length / ITEMS_PER_PAGE);
+  const paginatedServices = useMemo(() => {
+    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+    const endIndex = startIndex + ITEMS_PER_PAGE;
+    return filteredServices.slice(startIndex, endIndex);
+  }, [filteredServices, currentPage]);
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handleCategoryChange = (category: string) => {
+    setSelectedCategory(category);
+    setCurrentPage(1);
+  };
+
+  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+    setCurrentPage(1);
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-white flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#C41E3A] mx-auto mb-4"></div>
+          <p className="text-[#5C5C5C]">加载中...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-white flex items-center justify-center">
+        <div className="text-center">
+          <p className="text-red-600 mb-4">加载服务失败</p>
+          <Button onClick={() => window.location.reload()}>重新加载</Button>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="min-h-screen bg-white">
@@ -41,61 +98,145 @@ export default function ServicesPage() {
             <ArrowLeft className="w-4 h-4 mr-2" />
             返回首页
           </Link>
-          {isLoading ? (
-            <div className="grid md:grid-cols-2 gap-8">
-              {Array.from({ length: 4 }).map((_, index) => (
-                <ServiceCardSkeleton key={index} />
-              ))}
+
+          <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={() => handleCategoryChange(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={handleSearchChange}
+                className="pl-10"
+              />
+            </div>
+          </motion.div>
+
+          {paginatedServices.length === 0 ? (
+            <div className="text-center py-20">
+              <p className="text-xl text-[#5C5C5C]">没有找到相关服务</p>
             </div>
           ) : (
-            <div className="grid md:grid-cols-2 gap-8">
-              {SERVICES.map((service, index) => {
-                const Icon = iconMap[service.icon];
-                return (
-                  <motion.div
-                    key={service.id}
-                    initial={{ opacity: 0, y: 20 }}
-                    animate={isContentInView ? { opacity:1, y: 0 } : {}}
-                    transition={{ duration: 0.5, delay: index * 0.1 }}
-                  >
-                    <Link
-                      href={`/services/${service.id}`}
-                      className="group bg-white rounded-2xl border border-[#E5E5E5] overflow-hidden hover:shadow-xl transition-all duration-300 block h-full"
+            <>
+              <div className="grid md:grid-cols-2 gap-8">
+                {paginatedServices.map((service, index) => {
+                  const Icon = iconMap[service.icon];
+                  return (
+                    <motion.div
+                      key={service.id}
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+                      transition={{ duration: 0.5, delay: index * 0.1 }}
                     >
-                      <div className="p-8">
-                        <div className="flex items-start gap-4 mb-4">
-                          <div className="w-14 h-14 rounded-xl bg-[#F5F5F5] flex items-center justify-center group-hover:bg-[#C41E3A] transition-all duration-300">
-                            {Icon && <Icon className="w-7 h-7 text-[#1C1C1C] group-hover:text-white transition-colors" />}
+                      <Link
+                        href={`/services/${service.slug}`}
+                        className="group bg-white rounded-2xl border border-[#E5E5E5] overflow-hidden hover:shadow-xl transition-all duration-300 block h-full"
+                      >
+                        <div className="p-8">
+                          <div className="flex items-start gap-4 mb-4">
+                            <div className="w-14 h-14 rounded-xl bg-[#F5F5F5] flex items-center justify-center group-hover:bg-[#C41E3A] transition-all duration-300">
+                              {Icon && <Icon className="w-7 h-7 text-[#1C1C1C] group-hover:text-white transition-colors" />}
+                            </div>
+                            <div className="flex-1">
+                              <h3 className="text-xl font-semibold text-[#1C1C1C] mb-2 group-hover:text-[#C41E3A] transition-colors">
+                                {service.title}
+                              </h3>
+                              <p className="text-[#5C5C5C] text-sm leading-relaxed">
+                                {service.description}
+                              </p>
+                            </div>
                           </div>
-                          <div className="flex-1">
-                            <h3 className="text-xl font-semibold text-[#1C1C1C] mb-2 group-hover:text-[#C41E3A] transition-colors">
-                              {service.title}
-                            </h3>
-                            <p className="text-[#5C5C5C] text-sm leading-relaxed">
-                              {service.description}
-                            </p>
-                          </div>
-                        </div>
 
-                        <div className="mt-6 pt-4 border-t border-[#E5E5E5]">
-                          <div className="flex flex-wrap gap-2 mb-4">
-                            {service.features.slice(0, 3).map((feature, idx) => (
-                              <Badge key={idx} variant="secondary" className="text-xs">
-                                {feature.split('：')[0]}
-                              </Badge>
-                            ))}
-                          </div>
-                          <div className="flex items-center text-[#C41E3A] font-medium group-hover:translate-x-2 transition-transform">
-                            了解详情
-                            <ArrowRight className="w-4 h-4 ml-2" />
+                          <div className="mt-6 pt-4 border-t border-[#E5E5E5]">
+                            <div className="flex flex-wrap gap-2 mb-4">
+                              {service.features.slice(0, 3).map((feature, idx) => (
+                                <Badge key={idx} variant="secondary" className="text-xs">
+                                  {feature.split('：')[0]}
+                                </Badge>
+                              ))}
+                            </div>
+                            <div className="flex items-center text-[#C41E3A] font-medium group-hover:translate-x-2 transition-transform">
+                              了解详情
+                              <ArrowLeft className="w-4 h-4 ml-2 rotate-180" />
+                            </div>
                           </div>
                         </div>
-                      </div>
-                    </Link>
-                  </motion.div>
-                );
-              })}
-            </div>
+                      </Link>
+                    </motion.div>
+                  );
+                })}
+              </div>
+
+              {totalPages > 1 && (
+                <div className="flex justify-center items-center gap-2 mt-8">
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    onClick={() => handlePageChange(currentPage - 1)}
+                    disabled={currentPage === 1}
+                  >
+                    <ChevronLeft className="w-4 h-4" />
+                  </Button>
+                  
+                  {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+                    <Button
+                      key={page}
+                      variant={currentPage === page ? 'default' : 'outline'}
+                      size="icon"
+                      onClick={() => handlePageChange(page)}
+                      className={
+                        currentPage === page
+                          ? 'bg-[#C41E3A] hover:bg-[#A01830] text-white'
+                          : ''
+                      }
+                    >
+                      {page}
+                    </Button>
+                  ))}
+                  
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    onClick={() => handlePageChange(currentPage + 1)}
+                    disabled={currentPage === totalPages}
+                  >
+                    <ChevronRight className="w-4 h-4" />
+                  </Button>
+                </div>
+              )}
+
+              <div className="text-center mt-4 text-[#5C5C5C] text-sm">
+                显示 {paginatedServices.length} 条，共 {filteredServices.length} 条服务
+              </div>
+            </>
           )}
         </div>
       </div>
@@ -120,7 +261,7 @@ export default function ServicesPage() {
           >
             <Link href="/contact">
               立即咨询
-              <ArrowRight className="ml-2 w-4 h-4" />
+              <ArrowLeft className="ml-2 w-4 h-4 rotate-180" />
             </Link>
           </Button>
         </div>