feat: add touch swipe support for mobile

2026-02-27 20:29:00 +08:00
parent 1bdb95b5b6
commit aa47a45a95
3 changed files with 112 additions and 106 deletions
@@ -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,48 +37,58 @@ export function CasesSection() {
          </p>
        </motion.div>

-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {featuredCases.map((caseItem, index) => (
-            <motion.div
-              key={caseItem.id}
-              initial={{ opacity: 0, y: 20 }}
-              animate={isInView ? { opacity: 1, y: 0 } : {}}
-              transition={{ duration: 0.5, delay: 0.1 + index * 0.1 }}
-            >
-              <Link href={`/cases/${caseItem.id}`}>
-                <Card className="h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors overflow-hidden">
-                  <div className="relative h-40 bg-gradient-to-br from-[#F5F5F5] to-[#E5E5E5] flex items-center justify-center">
-                    <Building2 className="w-16 h-16 text-[#C41E3A]/20 group-hover:scale-110 transition-transform duration-300" />
-                    <div className="absolute top-4 right-4">
-                      <Badge className="bg-white/90 text-[#1C1C1C] hover:bg-white">
-                        {caseItem.industry}
-                      </Badge>
-                    </div>
-                  </div>
-                  <CardContent className="p-6">
-                    <div className="flex items-center gap-2 mb-3">
-                      <Building2 className="w-4 h-4 text-[#C41E3A]" />
-                      <span className="text-sm text-[#5C5C5C]">{caseItem.client}</span>
-                    </div>
-                    <h3 className="text-lg font-semibold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">
-                      {caseItem.title}
-                    </h3>
-                    <p className="text-[#5C5C5C] text-sm line-clamp-2 mb-4">
-                      {caseItem.description}
-                    </p>
-                    {caseItem.results.length > 0 && (
-                      <div className="flex items-center gap-2 text-[#C41E3A]">
-                        <TrendingUp className="w-4 h-4" />
-                        <span className="text-sm font-medium">{caseItem.results[0].value}</span>
-                        <span className="text-sm text-[#5C5C5C]">{caseItem.results[0].label}</span>
+        <TouchSwipe
+          onSwipeLeft={() => {
+            // 切换到下一个案例
+          }}
+          onSwipeRight={() => {
+            // 切换到上一个案例
+          }}
+          className="md:hidden"
+        >
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {featuredCases.map((caseItem, index) => (
+              <motion.div
+                key={caseItem.id}
+                initial={{ opacity: 0, y: 20 }}
+                animate={isInView ? { opacity: 1, y: 0 } : {}}
+                transition={{ duration: 0.5, delay: 0.1 + index * 0.1 }}
+              >
+                <Link href={`/cases/${caseItem.id}`}>
+                  <Card className="h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors overflow-hidden">
+                    <div className="relative h-40 bg-gradient-to-br from-[#F5F5F5] to-[#E5E5E5] flex items-center justify-center">
+                      <Building2 className="w-16 h-16 text-[#C41E3A]/20 group-hover:scale-110 transition-transform duration-300" />
+                      <div className="absolute top-4 right-4">
+                        <Badge className="bg-white/90 text-[#1C1C1C] hover:bg-white">
+                          {caseItem.industry}
+                        </Badge>
                      </div>
-                    )}
-                  </CardContent>
-                </Card>
-              </Link>
-            </motion.div>
-          ))}
-        </div>
+                    </div>
+                    <CardContent className="p-6">
+                      <div className="flex items-center gap-2 mb-3">
+                        <Building2 className="w-4 h-4 text-[#C41E3A]" />
+                        <span className="text-sm text-[#5C5C5C]">{caseItem.client}</span>
+                      </div>
+                      <h3 className="text-lg font-semibold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">
+                        {caseItem.title}
+                      </h3>
+                      <p className="text-[#5C5C5C] text-sm line-clamp-2 mb-4">
+                        {caseItem.description}
+                      </p>
+                      {caseItem.results.length > 0 && (
+                        <div className="flex items-center gap-2 text-[#C41E3A]">
+                          <TrendingUp className="w-4 h-4" />
+                          <span className="text-sm font-medium">{caseItem.results[0].value}</span>
+                          <span className="text-sm text-[#5C5C5C]">{caseItem.results[0].label}</span>
+                        </div>
+                      )}
+                    </CardContent>
+                  </Card>
+                </Link>
+              </motion.div>
+            ))}
+          </div>
+        </TouchSwipe>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
@@ -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,43 +30,53 @@ export function NewsSection() {
          </p>
        </motion.div>

-        <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
-              key={news.id}
-              initial={{ opacity: 0, y: 20 }}
-              animate={isInView ? { opacity: 1, y: 0 } : {}}
-              transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
-            >
-              <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>
+        <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
+                key={news.id}
+                initial={{ opacity: 0, y: 20 }}
+                animate={isInView ? { opacity: 1, y: 0 } : {}}
+                transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
+              >
+                <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>
+        </TouchSwipe>

        <motion.div 
          initial={{ opacity: 0, y: 20 }}
@@ -1,6 +1,6 @@
 'use client';

-import { useState, useRef, type ReactNode } from 'react';
+import { useRef, ReactNode } from 'react';

 interface TouchSwipeProps {
  children: ReactNode;
@@ -17,38 +17,23 @@ export function TouchSwipe({
  threshold = 50,
  className = '',
 }: TouchSwipeProps) {
-  const [touchStart, setTouchStart] = useState<number | null>(null);
-  const [touchEnd, setTouchEnd] = useState<number | null>(null);
+  const touchStartX = useRef(0);
  const containerRef = useRef<HTMLDivElement>(null);

  const handleTouchStart = (e: React.TouchEvent) => {
-    setTouchEnd(null);
-    const touch = e.targetTouches[0];
-    if (touch) {
-      setTouchStart(touch.clientX);
-    }
+    touchStartX.current = e.touches[0].clientX;
  };

-  const handleTouchMove = (e: React.TouchEvent) => {
-    const touch = e.targetTouches[0];
-    if (touch) {
-      setTouchEnd(touch.clientX);
-    }
-  };
+  const handleTouchEnd = (e: React.TouchEvent) => {
+    const touchEndX = e.changedTouches[0].clientX;
+    const diff = touchStartX.current - touchEndX;

-  const handleTouchEnd = () => {
-    if (!touchStart || !touchEnd) {return;}
-
-    const distance = touchStart - touchEnd;
-    const isLeftSwipe = distance > threshold;
-    const isRightSwipe = distance < -threshold;
-
-    if (isLeftSwipe && onSwipeLeft) {
-      onSwipeLeft();
-    }
-
-    if (isRightSwipe && onSwipeRight) {
-      onSwipeRight();
+    if (Math.abs(diff) > threshold) {
+      if (diff > 0 && onSwipeLeft) {
+        onSwipeLeft();
+      } else if (diff < 0 && onSwipeRight) {
+        onSwipeRight();
+      }
    }
  };

@@ -57,7 +42,6 @@ export function TouchSwipe({
      ref={containerRef}
      className={className}
      onTouchStart={handleTouchStart}
-      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      {children}