feat: add touch swipe support for mobile

src/components/sections/cases-section.tsx

@@ -7,6 +7,7 @@ import Link from 'next/link';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
+import { TouchSwipe } from '@/components/ui/touch-swipe';
 import { CASES } from '@/lib/constants';
 import { ArrowRight, Building2, TrendingUp } from 'lucide-react';
 
@@ -36,6 +37,15 @@ export function CasesSection() {
           </p>
         </motion.div>
 
+        <TouchSwipe
+          onSwipeLeft={() => {
+            // 切换到下一个案例
+          }}
+          onSwipeRight={() => {
+            // 切换到上一个案例
+          }}
+          className="md:hidden"
+        >
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
             {featuredCases.map((caseItem, index) => (
               <motion.div
@@ -78,6 +88,7 @@ export function CasesSection() {
               </motion.div>
             ))}
           </div>
+        </TouchSwipe>
 
         <motion.div
           initial={{ opacity: 0, y: 20 }}

src/components/sections/news-section.tsx

@@ -5,6 +5,7 @@ import { useInView } from 'framer-motion';
 import { useRef } from 'react';
 import Link from 'next/link';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { TouchSwipe } from '@/components/ui/touch-swipe';
 import { ArrowRight, Calendar } from 'lucide-react';
 import { NEWS } from '@/lib/constants';
 
@@ -29,6 +30,15 @@ export function NewsSection() {
           </p>
         </motion.div>
 
+        <TouchSwipe
+          onSwipeLeft={() => {
+            // 切换到下一页新闻
+          }}
+          onSwipeRight={() => {
+            // 切换到上一页新闻
+          }}
+          className="md:hidden"
+        >
           <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
             {NEWS.slice(0, 4).map((news, idx) => (
               <motion.div
@@ -66,6 +76,7 @@ export function NewsSection() {
               </motion.div>
             ))}
           </div>
+        </TouchSwipe>
 
         <motion.div 
           initial={{ opacity: 0, y: 20 }}

src/components/ui/touch-swipe.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useRef, type ReactNode } from 'react';
+import { useRef, ReactNode } from 'react';
 
 interface TouchSwipeProps {
   children: ReactNode;
@@ -17,39 +17,24 @@ export function TouchSwipe({
   threshold = 50,
   className = '',
 }: TouchSwipeProps) {
-  const [touchStart, setTouchStart] = useState<number | null>(null);
+  const touchStartX = useRef(0);
-  const [touchEnd, setTouchEnd] = useState<number | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
   const handleTouchStart = (e: React.TouchEvent) => {
-    setTouchEnd(null);
+    touchStartX.current = e.touches[0].clientX;
-    const touch = e.targetTouches[0];
-    if (touch) {
-      setTouchStart(touch.clientX);
-    }
   };
 
-  const handleTouchMove = (e: React.TouchEvent) => {
+  const handleTouchEnd = (e: React.TouchEvent) => {
-    const touch = e.targetTouches[0];
+    const touchEndX = e.changedTouches[0].clientX;
-    if (touch) {
+    const diff = touchStartX.current - touchEndX;
-      setTouchEnd(touch.clientX);
-    }
-  };
 
-  const handleTouchEnd = () => {
+    if (Math.abs(diff) > threshold) {
-    if (!touchStart || !touchEnd) {return;}
+      if (diff > 0 && onSwipeLeft) {
-
-    const distance = touchStart - touchEnd;
-    const isLeftSwipe = distance > threshold;
-    const isRightSwipe = distance < -threshold;
-
-    if (isLeftSwipe && onSwipeLeft) {
         onSwipeLeft();
-    }
+      } else if (diff < 0 && onSwipeRight) {
-
-    if (isRightSwipe && onSwipeRight) {
         onSwipeRight();
       }
+    }
   };
 
   return (
@@ -57,7 +42,6 @@ export function TouchSwipe({
       ref={containerRef}
       className={className}
       onTouchStart={handleTouchStart}
-      onTouchMove={handleTouchMove}
       onTouchEnd={handleTouchEnd}
     >
       {children}