novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加面包屑导航组件并优化页面布局

Browse Source 
refactor: 重构页面结构和导航逻辑

fix: 修复移动端菜单导航和滚动行为

perf: 优化图片加载性能和资源请求

test: 添加端到端测试和性能测试用例

docs: 更新.gitignore文件

chore: 更新依赖和配置

style: 优化代码格式和类型安全

ci: 调整Playwright测试超时时间

build: 更新Next.js配置和构建选项
This commit is contained in:
张翔
2026-02-28 09:09:04 +08:00
parent 9d01e0982f
commit 9451814ca4
60 changed files with 4078 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(marketing)/about/client.tsx
+2
View File
@@ -6,6 +6,7 @@ import { useRef } from 'react';
import { COMPANY_INFO, STATS } from '@/lib/constants';
import { Card, CardContent } from '@/components/ui/card';
import { PageHeader } from '@/components/ui/page-header';
import { Breadcrumb } from '@/components/layout/breadcrumb';
import { Lightbulb, Users, Target, Award, MapPin, Mail, Phone } from 'lucide-react';
export function AboutClient() {
@@ -70,6 +71,7 @@ export function AboutClient() {
return (
<div className="min-h-screen bg-white">
<Breadcrumb items={[{ label: '关于我们', href: '/about' }]} />
<PageHeader
title="关于我们"
description="了解睿新致远的品牌故事。我们不只是技术供应商，更是您数字化转型的成长伙伴。以智慧连接数字趋势，以伙伴身份陪您成长。"
src/app/(marketing)/cases/[id]/client.tsx
+11 -4
View File
@@ -2,8 +2,10 @@
import { useEffect, useRef, useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Breadcrumb } from '@/components/layout/breadcrumb';
import { ArrowLeft, CheckCircle2, TrendingUp, Users, Target, Quote, Clock, MessageCircle, Award } from 'lucide-react';
import { CASES } from '@/lib/constants';
import type { StaticImageData } from 'next/image';
@@ -66,12 +68,14 @@ export function CaseDetailClient({ caseItem }: CaseDetailClientProps) {
return (
<main className="min-h-screen bg-white">
<Breadcrumb items={[{ label: '成功案例', href: '/cases' }, { label: caseItem.title, href: `/cases/${caseItem.id}` }]} />
<div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
<div className="container-wide relative z-10 pt-32 pb-20">
<Button
variant="ghost"
className="text-[#5C5C5C] hover:text-[#C41E3A] hover:bg-[#C41E3A]/10"
onClick={() => router.back()}
type="button"
>
<ArrowLeft className="w-4 h-4 mr-2" />
返回
@@ -273,11 +277,14 @@ export function CaseDetailClient({ caseItem }: CaseDetailClientProps) {
<p className="text-sm text-white/80 mb-4">
联系我们的专家团队，获取定制化解决方案
</p>
<Link href="/#contact">
<Button className="w-full bg-white text-[#C41E3A] hover:bg-white/90">
<Button
className="w-full bg-white text-[#C41E3A] hover:bg-white/90"
asChild
>
<Link href="/#contact">
联系我们
</Button>
</Link>
</Link>
</Button>
</div>
</div>
</div>
src/app/(marketing)/cases/[id]/page.tsx
+1 -1
View File
@@ -33,5 +33,5 @@ export default async function CaseDetailPage({ params }: { params: Promise<{ id:
notFound();
}
return <CaseDetailClient caseItem={caseItem} />;
return <CaseDetailClient caseItem={caseItem as any} />;
}
src/app/(marketing)/cases/page.tsx
+20 -26
View File
@@ -7,7 +7,8 @@ import { useRef } from 'react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { PageHeader } from '@/components/ui/page-header';
import { ArrowRight, Building2, Calendar, TrendingUp } from 'lucide-react';
import { Breadcrumb } from '@/components/layout/breadcrumb';
import { ArrowLeft, ArrowRight, Building2, Calendar, TrendingUp } from 'lucide-react';
import { CASES } from '@/lib/constants';
export default function CasesPage() {
@@ -16,6 +17,7 @@ export default function CasesPage() {
return (
<div className="min-h-screen bg-white">
<Breadcrumb items={[{ label: '成功案例', href: '/cases' }]} />
<PageHeader
title="与谁同行，决定能走多远"
description="我们与优秀的企业同行，共同成长，共创未来"
@@ -101,31 +103,23 @@ export default function CasesPage() {
让我们与您同行，共创美好未来
</p>
<div className="flex justify-center gap-4">
<Button
size="lg"
variant="outline"
onClick={() => {
const element = document.getElementById('contact');
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}}
>
联系我们
</Button>
<Button
size="lg"
className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
onClick={() => {
const element = document.getElementById('contact');
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}}
>
立即咨询
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
<Link href="/#contact">
<Button
size="lg"
variant="outline"
>
联系我们
</Button>
</Link>
<Link href="/#contact">
<Button
size="lg"
className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
>
立即咨询
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
</Link>
</div>
</div>
</motion.div>
src/app/(marketing)/contact/actions.ts
+1 -2
View File
@@ -7,12 +7,11 @@ export interface ContactFormState {
}
export async function submitContactForm(
prevState: ContactFormState | null,
_prevState: ContactFormState | null,
formData: FormData
): Promise<ContactFormState> {
const name = formData.get('name') as string;
const email = formData.get('email') as string;
const phone = formData.get('phone') as string;
const subject = formData.get('subject') as string;
const message = formData.get('message') as string;
src/app/(marketing)/contact/page.tsx
+88 -5
View File
@@ -1,6 +1,6 @@
'use client';
import { useState, useRef } from 'react';
import { useState, useRef, useEffect } from 'react';
import { useInView } from 'framer-motion';
import { motion } from 'framer-motion';
import { COMPANY_INFO } from '@/lib/constants';
@@ -9,25 +9,73 @@ import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { PageHeader } from '@/components/ui/page-header';
import { Breadcrumb } from '@/components/layout/breadcrumb';
import { Mail, Phone, MapPin, Send, Loader2 } from 'lucide-react';
export default function ContactPage() {
const [isSubmitting, setIsSubmitting] = useState(false);
const [submitResult, setSubmitResult] = useState<{ success: boolean; message?: string; error?: string } | null>(null);
const [mathAnswer, setMathAnswer] = useState('');
const [mathProblem, setMathProblem] = useState({ num1: 0, num2: 0, hash: '', timestamp: 0 });
const contentRef = useRef(null);
const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
const isSubmitted = submitResult?.success || false;
useEffect(() => {
const num1 = Math.floor(Math.random() * 10) + 1;
const num2 = Math.floor(Math.random() * 10) + 1;
const answer = num1 + num2;
const timestamp = Date.now();
const hash = btoa(`${answer}-${timestamp}`);
setMathProblem({ num1, num2, hash, timestamp });
}, []);
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
console.log('Form submission started');
setIsSubmitting(true);
setSubmitResult(null);
const formData = new FormData(e.currentTarget);
const data = Object.fromEntries(formData);
console.log('FormData:', data);
const honeypot = formData.get('website') as string;
if (honeypot) {
console.log('Honeypot triggered');
return;
}
const userAnswer = parseInt(formData.get('mathAnswer') as string);
if (isNaN(userAnswer)) {
setSubmitResult({ success: false, error: '请输入验证码' });
return;
}
const expectedHash = btoa(`${userAnswer}-${mathProblem.timestamp}`);
if (expectedHash !== mathProblem.hash) {
setSubmitResult({ success: false, error: '验证码错误，请重新计算' });
return;
}
const submitTime = formData.get('submitTime') as string;
const timeDiff = Date.now() - parseInt(submitTime);
if (timeDiff < 2000) {
console.log('Too fast submission');
setSubmitResult({ success: false, error: '提交过快，请稍后再试' });
return;
}
setIsSubmitting(true);
setSubmitResult(null);
const submitData = {
...data,
mathHash: mathProblem.hash,
mathTimestamp: mathProblem.timestamp,
mathAnswer: userAnswer,
submitTime: submitTime
};
console.log('FormData:', submitData);
try {
const response = await fetch('/api/contact', {
@@ -35,12 +83,13 @@ export default function ContactPage() {
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
body: JSON.stringify(submitData),
});
console.log('Response status:', response.status);
const result = await response.json();
console.log('Response result:', result);
console.log('Setting submitResult:', result);
setSubmitResult(result);
} catch (error) {
console.error('Form submission error:', error);
@@ -52,6 +101,7 @@ export default function ContactPage() {
return (
<div className="min-h-screen bg-white">
<Breadcrumb items={[{ label: '联系我们', href: '/contact' }]} />
<PageHeader
badge="联系我们"
title="与我们取得联系"
@@ -210,6 +260,39 @@ export default function ContactPage() {
required
/>
</div>
<div className="space-y-3">
<label htmlFor="mathAnswer" className="block text-sm font-medium text-[#1C1C1C] mb-2">
验证码 *
</label>
<div className="flex items-center gap-4">
<div className="bg-[#f9f9f9] px-4 py-2 rounded-lg text-[#1C1C1C] font-medium min-w-[120px] text-center">
{mathProblem.num1} + {mathProblem.num2} = ?
</div>
<Input
id="mathAnswer"
name="mathAnswer"
type="number"
placeholder="请输入答案"
value={mathAnswer}
onChange={(e) => setMathAnswer(e.target.value)}
required
className="flex-1"
/>
</div>
</div>
<input
type="hidden"
name="website"
value=""
/>
<input
type="hidden"
name="submitTime"
value={Date.now()}
/>
<Button
type="submit"
className="w-full bg-[#C41E3A] hover:bg-[#A01830] text-white"
src/app/(marketing)/layout.tsx
+4
View File
@@ -1,4 +1,6 @@
import { ErrorBoundary } from '@/components/ui/error-boundary';
import { Header } from '@/components/layout/header';
import { Footer } from '@/components/layout/footer';
export default function MarketingLayout({
children,
@@ -7,9 +9,11 @@ export default function MarketingLayout({
}) {
return (
<div className="min-h-screen flex flex-col">
<Header />
<ErrorBoundary>
<main className="flex-1">{children}</main>
</ErrorBoundary>
<Footer />
</div>
);
}
src/app/news/[slug]/NewsDetailClient.tsx → src/app/(marketing)/news/[slug]/NewsDetailClient.tsx
+15 -20
View File
@@ -1,21 +1,18 @@
'use client';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { ArrowLeft, Calendar, Share2 } from 'lucide-react';
import { Breadcrumb } from '@/components/layout/breadcrumb';
import { ArrowLeft, Calendar } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { motion } from 'framer-motion';
import { useInView } from 'framer-motion';
import { useRef } from 'react';
import { NEWS } from '@/lib/constants';
interface NewsItem {
id: string;
title: string;
category: string;
date: string;
excerpt: string;
content: string;
interface NewsDetailClientProps {
news: typeof NEWS[0];
}
export function NewsDetailClient({ news }: NewsDetailClientProps) {
@@ -29,12 +26,14 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
return (
<div className="min-h-screen bg-white">
<Breadcrumb items={[{ label: '新闻动态', href: '/news' }, { label: news.title, href: `/news/${news.id}` }]} />
<div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
<div className="container-wide relative z-10 pt-32 pb-20">
<Button
variant="ghost"
className="text-[#5C5C5C] hover:text-[#C41E3A] hover:bg-[#C41E3A]/10"
onClick={() => router.back()}
type="button"
>
<ArrowLeft className="w-4 h-4 mr-2" />
返回
@@ -51,10 +50,6 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
<Calendar className="w-5 h-5" />
{news.date}
</div>
<button className="flex items-center gap-2 hover:text-[#C41E3A] transition-colors">
<Share2 className="w-5 h-5" />
分享
</button>
</div>
</div>
</div>
@@ -110,16 +105,16 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
)}
<div className="mt-16 flex justify-center gap-4">
<Button variant="outline" size="lg" asChild>
<Link href="/news">
<Link href="/news">
<Button variant="outline" size="lg">
返回新闻列表
</Link>
</Button>
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
<Link href="/#contact">
</Button>
</Link>
<Link href="/#contact">
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white">
联系我们
</Link>
</Button>
</Button>
</Link>
</div>
</motion.div>
</div>
src/app/news/[slug]/page.tsx → src/app/(marketing)/news/[slug]/page.tsx
+2 -1
View File
@@ -32,5 +32,6 @@ export default async function NewsDetailPage({ params }: { params: Promise<{ slu
notFound();
}
return <NewsDetailClient news={news} />;
const serializedNews = JSON.parse(JSON.stringify(news));
return <NewsDetailClient news={serializedNews} />;
}
src/app/news/page.tsx → src/app/(marketing)/news/page.tsx
+2
View File
@@ -8,6 +8,7 @@ import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { PageHeader } from '@/components/ui/page-header';
import { Breadcrumb } from '@/components/layout/breadcrumb';
import { Search, Calendar, ArrowRight, ArrowLeft, Filter } from 'lucide-react';
import Link from 'next/link';
import { motion } from 'framer-motion';
@@ -32,6 +33,7 @@ export default function NewsListPage() {
return (
<div className="min-h-screen bg-white">
<Breadcrumb items={[{ label: '新闻动态', href: '/news' }]} />
<PageHeader
title="新闻动态"
description="了解睿新致远最新动态，把握行业发展脉搏"
src/app/(marketing)/page.tsx
-4
View File
@@ -1,8 +1,6 @@
"use client";
import dynamic from 'next/dynamic';
import { Header } from "@/components/layout/header";
import { Footer } from "@/components/layout/footer";
import { HeroSection } from "@/components/sections/hero-section";
import { SectionSkeleton } from "@/components/ui/loading-skeleton";
@@ -57,7 +55,6 @@ const ContactSection = dynamic(
export default function HomePage() {
return (
<main className="min-h-screen bg-white dark:bg-[var(--color-bg-primary)]">
<Header />
<HeroSection />
<ServicesSection />
<ProductsSection />
@@ -65,7 +62,6 @@ export default function HomePage() {
<AboutSection />
<NewsSection />
<ContactSection />
<Footer />
</main>
);
}
src/app/products/[id]/page.tsx → src/app/(marketing)/products/[id]/page.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import Link from 'next/link';
import { PRODUCTS } from '@/lib/constants';
import { Button } from '@/components/ui/button';
import { BackButton } from '@/components/ui/back-button';
import { ArrowLeft, CheckCircle2, Zap, Target, Layers, CreditCard, ArrowRight } from 'lucide-react';
import { CheckCircle2, Zap, Target, Layers, CreditCard, ArrowRight } from 'lucide-react';
export async function generateStaticParams() {
return PRODUCTS.map((product) => ({
src/app/(marketing)/products/page.tsx
+2
View File
@@ -8,6 +8,7 @@ import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { PageHeader } from '@/components/ui/page-header';
import { Breadcrumb } from '@/components/layout/breadcrumb';
import { ArrowRight, ArrowLeft, Check, TrendingUp } from 'lucide-react';
import { PRODUCTS } from '@/lib/constants';
@@ -17,6 +18,7 @@ export default function ProductsPage() {
return (
<div className="min-h-screen bg-white">
<Breadcrumb items={[{ label: '产品服务', href: '/products' }]} />
<PageHeader
title="产品服务"
description="自主研发的企业级产品，助力企业高效运营，实现数字化转型"
src/app/(marketing)/services/[id]/client.tsx
+12 -8
View File
@@ -2,8 +2,10 @@
import { useRef } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Breadcrumb } from '@/components/layout/breadcrumb';
import {
ArrowLeft,
CheckCircle2,
@@ -105,12 +107,14 @@ export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
return (
<main className="min-h-screen bg-white">
<Breadcrumb items={[{ label: '核心业务', href: '/services' }, { label: service.title, href: `/services/${service.id}` }]} />
<div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
<div className="container-wide relative z-10 pt-32 pb-20">
<Button
variant="ghost"
className="text-[#5C5C5C] hover:text-[#C41E3A] hover:bg-[#C41E3A]/10"
onClick={() => router.back()}
type="button"
>
<ArrowLeft className="w-4 h-4 mr-2" />
返回
@@ -266,17 +270,17 @@ export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
</section>
<div className="flex justify-center gap-4 pt-8 border-t border-[#E5E5E5]">
<Button variant="outline" size="lg" asChild>
<Link href="/services">
<Link href="/services">
<Button variant="outline" size="lg">
查看其他服务
</Link>
</Button>
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
<Link href="/contact">
</Button>
</Link>
<Link href="/contact">
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white">
开始您的转型之旅
<ArrowRight className="ml-2 w-4 h-4" />
</Link>
</Button>
</Button>
</Link>
</div>
</div>
</div>
src/app/(marketing)/services/[id]/page.tsx
+1 -1
View File
@@ -33,5 +33,5 @@ export default async function ServiceDetailPage({ params }: { params: Promise<{
notFound();
}
return <ServiceDetailClient service={service} />;
return <ServiceDetailClient service={JSON.parse(JSON.stringify(service))} />;
}
src/app/(marketing)/services/page.tsx
+2
View File
@@ -8,6 +8,7 @@ import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { PageHeader } from '@/components/ui/page-header';
import { ServiceCardSkeleton } from '@/components/ui/loading-skeleton';
import { Breadcrumb } from '@/components/layout/breadcrumb';
import { ArrowRight, ArrowLeft, Code, Cloud, BarChart3, Shield } from 'lucide-react';
import { SERVICES } from '@/lib/constants';
@@ -30,6 +31,7 @@ export default function ServicesPage() {
return (
<div className="min-h-screen bg-white">
<Breadcrumb items={[{ label: '核心业务', href: '/services' }]} />
<PageHeader
title="核心业务"
description="专业技术团队，为您提供全方位的数字化解决方案"
src/app/(marketing)/solutions/page.tsx
+2
View File
@@ -5,6 +5,7 @@ import { useInView } from 'framer-motion';
import { useRef } from 'react';
import { Button } from '@/components/ui/button';
import { PageHeader } from '@/components/ui/page-header';
import { Breadcrumb } from '@/components/layout/breadcrumb';
import { ArrowRight, Lightbulb, Cpu, Users, CheckCircle2 } from 'lucide-react';
export default function SolutionsPage() {
@@ -13,6 +14,7 @@ export default function SolutionsPage() {
return (
<div className="min-h-screen bg-white">
<Breadcrumb items={[{ label: '解决方案', href: '/solutions' }]} />
<PageHeader
title="三种角色，一种身份——您的成长伙伴"
description="我们以伙伴的身份，陪您走过数字化转型的每一步"
src/app/api/contact/route.ts
+220 -2
View File
@@ -1,10 +1,14 @@
import { NextRequest, NextResponse } from 'next/server';
import { Resend } from 'resend';
const resend = new Resend(process.env.RESEND_API_KEY);
const companyEmail = process.env.COMPANY_EMAIL || 'contact@novalon.cn';
export async function POST(request: NextRequest) {
try {
const body = await request.json();
const { name, email, phone, subject, message } = body;
const { name, email, phone, subject, message, website, submitTime, mathHash, mathTimestamp, mathAnswer } = body;
if (!name || !email || !subject || !message) {
return NextResponse.json(
@@ -21,8 +25,222 @@ export async function POST(request: NextRequest) {
);
}
if (website) {
console.log('Honeypot field filled, rejecting request');
return NextResponse.json(
{ success: true, message: '消息已发送' },
{ status: 200 }
);
}
if (submitTime) {
const timeDiff = Date.now() - parseInt(submitTime);
if (timeDiff < 2000) {
console.log('Submission too fast:', timeDiff);
return NextResponse.json(
{ success: false, error: '提交过快，请稍后再试' },
{ status: 400 }
);
}
}
if (mathHash && mathTimestamp && mathAnswer !== undefined) {
const expectedHash = btoa(`${mathAnswer}-${mathTimestamp}`);
if (expectedHash !== mathHash) {
console.log('Invalid math captcha');
return NextResponse.json(
{ success: false, error: '验证码错误，请重新计算' },
{ status: 400 }
);
}
}
const emailContent = `
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
line-height: 1.6;
color: #1C1C1C;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
}
.header {
background: #C41E3A;
color: white;
padding: 40px 30px;
text-align: center;
border-radius: 8px 8px 0 0;
}
.header h1 {
margin: 0;
font-size: 28px;
font-weight: 600;
}
.header p {
margin: 10px 0 0 0;
font-size: 14px;
opacity: 0.9;
}
.content {
padding: 40px 30px;
background: #ffffff;
}
.info-card {
background: #f9f9f9;
border-radius: 8px;
padding: 20px;
margin-bottom: 25px;
border: 1px solid #e5e5e5;
}
.info-row {
display: flex;
margin-bottom: 12px;
align-items: flex-start;
}
.info-row:last-child {
margin-bottom: 0;
}
.info-label {
font-weight: 600;
color: #1C1C1C;
min-width: 70px;
font-size: 14px;
}
.info-value {
color: #5C5C5C;
font-size: 14px;
flex: 1;
}
.message-box {
background: #fff;
padding: 20px;
border-left: 4px solid #C41E3A;
margin-top: 20px;
border-radius: 0 8px 8px 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.message-label {
font-weight: 600;
color: #C41E3A;
font-size: 14px;
margin-bottom: 10px;
}
.message-content {
color: #1C1C1C;
font-size: 14px;
line-height: 1.8;
white-space: pre-wrap;
}
.footer {
text-align: center;
padding: 30px;
color: #8C8C8C;
font-size: 12px;
border-top: 1px solid #e5e5e5;
}
.footer a {
color: #C41E3A;
text-decoration: none;
}
.divider {
height: 1px;
background: #e5e5e5;
margin: 25px 0;
}
.badge {
display: inline-block;
background: #C41E3A;
color: white;
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>📬 新的客户咨询</h1>
<p>来自 睿新致远官方网站</p>
</div>
<div class="content">
<span class="badge">新消息</span>
<div class="info-card">
<div class="info-row">
<div class="info-label">姓名</div>
<div class="info-value">${name}</div>
</div>
<div class="info-row">
<div class="info-label">邮箱</div>
<div class="info-value"><a href="mailto:${email}" style="color: #C41E3A; text-decoration: none;">${email}</a></div>
</div>
${phone ? `
<div class="info-row">
<div class="info-label">电话</div>
<div class="info-value">${phone}</div>
</div>
` : ''}
<div class="info-row">
<div class="info-label">主题</div>
<div class="info-value">${subject}</div>
</div>
</div>
<div class="message-box">
<div class="message-label">咨询内容</div>
<div class="message-content">${message}</div>
</div>
<div class="divider"></div>
<div style="text-align: center; color: #8C8C8C; font-size: 13px;">
<p>💡 提示：点击邮箱地址可直接回复客户</p>
</div>
</div>
<div class="footer">
<p style="margin-bottom: 10px;">本邮件由 睿新致远 官网联系表单自动发送，请勿直接回复此邮件</p>
<p style="margin-bottom: 10px;">如需回复客户，请点击上方邮箱地址或直接回复客户的原始邮件</p>
<p style="margin-bottom: 15px;">提交时间：${new Date().toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })}</p>
<p style="margin-top: 15px; border-top: 1px solid #e5e5e5; padding-top: 15px;">© ${new Date().getFullYear()} 四川睿新致远科技有限公司. All rights reserved.</p>
</div>
</div>
</body>
</html>
`;
const { data, error } = await resend.emails.send({
from: '睿新致远官网 <onboarding@resend.dev>',
to: [companyEmail],
subject: `📧 ${subject} - ${name}`,
html: emailContent,
replyTo: email,
});
if (error) {
console.error('Resend API error:', error);
return NextResponse.json(
{ success: false, error: '邮件发送失败，请稍后重试' },
{ status: 500 }
);
}
console.log('Email sent successfully:', data);
return NextResponse.json({ success: true, message: '消息已发送' });
} catch (error) {
console.error('Contact form submission error:', error);
return NextResponse.json(
{ success: false, error: '提交失败,请重试' },
{ status: 500 }
src/app/error.tsx
+118
View File
@@ -0,0 +1,118 @@
'use client';
import { useEffect } from 'react';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Home, RefreshCw, AlertTriangle } from 'lucide-react';
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
useEffect(() => {
console.error('Application error:', error);
}, [error]);
return (
<div className="min-h-screen bg-white flex items-center justify-center">
<div className="container-wide px-4 py-20">
<div className="max-w-2xl mx-auto text-center">
<div className="mb-8">
<div className="w-24 h-24 bg-[#C41E3A]/10 rounded-full flex items-center justify-center mx-auto mb-6">
<AlertTriangle className="w-12 h-12 text-[#C41E3A]" />
</div>
<div className="w-32 h-1 bg-[#C41E3A] mx-auto"></div>
</div>
<h1 className="text-3xl font-bold text-[#1C1C1C] mb-4">
出现了一些问题
</h1>
<p className="text-lg text-[#5C5C5C] mb-6 leading-relaxed">
很抱歉，我们遇到了一个意外错误。
请尝试刷新页面，或返回首页继续浏览。
</p>
{error.message && (
<div className="bg-[#FAFAFA] border border-[#E5E5E5] rounded-lg p-4 mb-8 text-left">
<p className="text-sm text-[#5C5C5C] font-mono">
错误信息: {error.message}
</p>
{error.digest && (
<p className="text-xs text-[#5C5C5C] mt-2 font-mono">
错误ID: {error.digest}
</p>
)}
</div>
)}
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
<Button
size="lg"
onClick={reset}
className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
>
<RefreshCw className="w-5 h-5 mr-2" />
重试
</Button>
<Button
size="lg"
variant="outline"
asChild
>
<Link href="/">
<Home className="w-5 h-5 mr-2" />
返回首页
</Link>
</Button>
</div>
<div className="bg-[#FAFAFA] rounded-lg p-8">
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-6">
需要帮助？
</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<Link
href="/contact"
className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
>
<div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
<AlertTriangle className="w-5 h-5 text-[#C41E3A]" />
</div>
<div className="text-left">
<div className="font-semibold text-[#1C1C1C]">联系我们</div>
<div className="text-sm text-[#5C5C5C]">获取技术支持</div>
</div>
</Link>
<Link
href="/services"
className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
>
<div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
<RefreshCw className="w-5 h-5 text-[#C41E3A]" />
</div>
<div className="text-left">
<div className="font-semibold text-[#1C1C1C]">核心业务</div>
<div className="text-sm text-[#5C5C5C]">了解我们的服务</div>
</div>
</Link>
</div>
</div>
<div className="mt-8 text-sm text-[#5C5C5C]">
如果问题持续存在，请{' '}
<Link href="/contact" className="text-[#C41E3A] hover:underline">
联系我们的技术团队
</Link>
</div>
</div>
</div>
</div>
);
}
src/app/layout.tsx
+4 -1
View File
@@ -5,6 +5,7 @@ import { ThemeProvider } from "@/contexts/theme-context";
import { WebVitals } from "@/components/analytics/web-vitals";
import { OrganizationSchema, WebsiteSchema } from "@/components/seo/structured-data";
import { MobileTabBar } from "@/components/layout/mobile-tab-bar";
import { ErrorBoundary } from "@/components/ui/error-boundary";
const geistSans = Geist({
variable: "--font-geist-sans",
@@ -144,7 +145,9 @@ export default function RootLayout({
>
<WebVitals />
<ThemeProvider>
{children}
<ErrorBoundary>
{children}
</ErrorBoundary>
</ThemeProvider>
<MobileTabBar />
</body>
src/app/not-found.tsx
+120
View File
@@ -0,0 +1,120 @@
'use client';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Home, ArrowLeft, Search } from 'lucide-react';
export default function NotFound() {
return (
<div className="min-h-screen bg-white flex items-center justify-center">
<div className="container-wide px-4 py-20">
<div className="max-w-2xl mx-auto text-center">
<div className="mb-8">
<h1 className="text-[120px] font-bold text-[#C41E3A] leading-none mb-4">
404
</h1>
<div className="w-32 h-1 bg-[#C41E3A] mx-auto mb-6"></div>
</div>
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-4">
页面未找到
</h2>
<p className="text-lg text-[#5C5C5C] mb-8 leading-relaxed">
很抱歉，您访问的页面不存在或已被移动。
请检查网址是否正确，或使用以下导航继续浏览。
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
<Button
size="lg"
asChild
className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
>
<Link href="/">
<Home className="w-5 h-5 mr-2" />
返回首页
</Link>
</Button>
<Button
size="lg"
variant="outline"
onClick={() => window.history.back()}
>
<ArrowLeft className="w-5 h-5 mr-2" />
返回上一页
</Button>
</div>
<div className="bg-[#FAFAFA] rounded-lg p-8">
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-6">
您可能在寻找
</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<Link
href="/about"
className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
>
<div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
<Search className="w-5 h-5 text-[#C41E3A]" />
</div>
<div className="text-left">
<div className="font-semibold text-[#1C1C1C]">关于我们</div>
<div className="text-sm text-[#5C5C5C]">了解睿新致远</div>
</div>
</Link>
<Link
href="/services"
className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
>
<div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
<Search className="w-5 h-5 text-[#C41E3A]" />
</div>
<div className="text-left">
<div className="font-semibold text-[#1C1C1C]">核心业务</div>
<div className="text-sm text-[#5C5C5C]">我们的服务</div>
</div>
</Link>
<Link
href="/products"
className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
>
<div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
<Search className="w-5 h-5 text-[#C41E3A]" />
</div>
<div className="text-left">
<div className="font-semibold text-[#1C1C1C]">产品服务</div>
<div className="text-sm text-[#5C5C5C]">企业级产品</div>
</div>
</Link>
<Link
href="/cases"
className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
>
<div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
<Search className="w-5 h-5 text-[#C41E3A]" />
</div>
<div className="text-left">
<div className="font-semibold text-[#1C1C1C]">成功案例</div>
<div className="text-sm text-[#5C5C5C]">客户故事</div>
</div>
</Link>
</div>
</div>
<div className="mt-8 text-sm text-[#5C5C5C]">
如果您认为这是一个错误，请{' '}
<Link href="/contact" className="text-[#C41E3A] hover:underline">
联系我们
</Link>
</div>
</div>
</div>
</div>
);
}
src/components/layout/breadcrumb.tsx
+34
View File
@@ -0,0 +1,34 @@
'use client';
import Link from 'next/link';
import { ChevronRight, Home } from 'lucide-react';
interface BreadcrumbItem {
label: string;
href: string;
}
interface BreadcrumbProps {
items: BreadcrumbItem[];
}
export function Breadcrumb({ items }: BreadcrumbProps) {
return (
<nav aria-label="breadcrumb" className="flex items-center space-x-2 text-sm text-[#5C5C5C] py-4">
<Link href="/" className="flex items-center hover:text-[#C41E3A] transition-colors">
<Home className="w-4 h-4" />
</Link>
{items.map((item, index) => (
<div key={index} className="flex items-center">
<ChevronRight className="w-4 h-4 text-[#E5E5E5]" />
<Link
href={item.href}
className="ml-2 hover:text-[#C41E3A] transition-colors"
>
{item.label}
</Link>
</div>
))}
</nav>
);
}
src/components/layout/header.tsx
+9 -1
View File
@@ -37,13 +37,21 @@ export function Header() {
}
};
const handleGlobalKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape' && isOpen) {
setIsOpen(false);
}
};
window.addEventListener('scroll', handleScroll, { passive: true });
window.addEventListener('keydown', handleGlobalKeyDown);
handleScroll();
return () => {
window.removeEventListener('scroll', handleScroll);
window.removeEventListener('keydown', handleGlobalKeyDown);
};
}, [pathname]);
}, [pathname, isOpen]);
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
src/components/layout/mobile-tab-bar.tsx
+2 -1
View File
@@ -21,7 +21,8 @@ export function MobileTabBar() {
if (href === '/') {
return pathname === '/';
}
return pathname.startsWith(href.split('#')[0]);
const basePath = href.split('#')[0] || href;
return pathname.startsWith(basePath);
};
return (
src/components/sections/cases-section.tsx
+1 -1
View File
@@ -75,7 +75,7 @@ export function CasesSection() {
<p className="text-[#5C5C5C] text-sm line-clamp-2 mb-4">
{caseItem.description}
</p>
{caseItem.results.length > 0 && (
{caseItem.results.length > 0 && caseItem.results[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>
src/components/ui/badge.tsx
+2
View File
@@ -1,3 +1,5 @@
'use client';
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
src/components/ui/button.tsx
+2
View File
@@ -1,3 +1,5 @@
'use client';
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
src/components/ui/optimized-image.tsx
+168
View File
@@ -0,0 +1,168 @@
'use client';
import Image from 'next/image';
import { useState, useCallback, memo } from 'react';
import { cn } from '@/lib/utils';
interface OptimizedImageProps {
src: string;
alt: string;
width?: number;
height?: number;
fill?: boolean;
priority?: boolean;
className?: string;
containerClassName?: string;
sizes?: string;
quality?: number;
placeholder?: 'blur' | 'empty';
blurDataURL?: string;
onLoad?: () => void;
onError?: () => void;
objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
objectPosition?: string;
loading?: 'lazy' | 'eager';
unoptimized?: boolean;
}
const shimmer = (w: number, h: number) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="g">
<stop stop-color="#f0f0f0" offset="20%" />
<stop stop-color="#e0e0e0" offset="50%" />
<stop stop-color="#f0f0f0" offset="70%" />
</linearGradient>
</defs>
<rect width="${w}" height="${h}" fill="#f0f0f0" />
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
</svg>`;
const toBase64 = (str: string) =>
typeof window === 'undefined'
? Buffer.from(str).toString('base64')
: window.btoa(str);
const OptimizedImage = memo(function OptimizedImage({
src,
alt,
width,
height,
fill = false,
priority = false,
className,
containerClassName,
sizes,
quality = 85,
placeholder = 'blur',
blurDataURL,
onLoad,
onError,
objectFit = 'cover',
objectPosition = 'center',
loading = 'lazy',
unoptimized = false,
}: OptimizedImageProps) {
const [isLoading, setIsLoading] = useState(true);
const [hasError, setHasError] = useState(false);
const handleLoad = useCallback(() => {
setIsLoading(false);
onLoad?.();
}, [onLoad]);
const handleError = useCallback(() => {
setIsLoading(false);
setHasError(true);
onError?.();
}, [onError]);
const defaultBlurDataURL = blurDataURL || (width && height ? `data:image/svg+xml;base64,${toBase64(shimmer(width, height))}` : undefined);
const objectFitClass = {
contain: 'object-contain',
cover: 'object-cover',
fill: 'object-fill',
none: 'object-none',
'scale-down': 'object-scale-down',
}[objectFit];
if (hasError) {
return (
<div
className={cn(
'flex items-center justify-center bg-gray-100 text-gray-400',
containerClassName
)}
style={width && height ? { width, height } : undefined}
>
<svg
className="w-12 h-12"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
</div>
);
}
const imageElement = (
<Image
src={src}
alt={alt}
width={fill ? undefined : width}
height={fill ? undefined : height}
fill={fill}
priority={priority}
sizes={sizes}
quality={quality}
placeholder={placeholder}
blurDataURL={defaultBlurDataURL}
onLoad={handleLoad}
onError={handleError}
loading={priority ? 'eager' : loading}
unoptimized={unoptimized}
className={cn(
'transition-opacity duration-300',
isLoading ? 'opacity-0' : 'opacity-100',
objectFitClass,
className
)}
style={{ objectPosition }}
/>
);
if (fill) {
return (
<div className={cn('relative overflow-hidden', containerClassName)}>
{imageElement}
{isLoading && (
<div className="absolute inset-0 animate-pulse bg-gray-200" />
)}
</div>
);
}
return (
<div className={cn('relative overflow-hidden', containerClassName)}>
{imageElement}
{isLoading && (
<div
className="absolute inset-0 animate-pulse bg-gray-200"
style={width && height ? { width, height } : undefined}
/>
)}
</div>
);
});
export { OptimizedImage };
export type { OptimizedImageProps };
src/components/ui/touch-optimized.tsx
+269
View File
@@ -0,0 +1,269 @@
'use client';
import { useState, useCallback, useRef, useEffect, memo } from 'react';
import { cn } from '@/lib/utils';
interface SwipeableProps {
children: React.ReactNode;
onSwipeLeft?: () => void;
onSwipeRight?: () => void;
onSwipeUp?: () => void;
onSwipeDown?: () => void;
threshold?: number;
className?: string;
disabled?: boolean;
}
export const Swipeable = memo(function Swipeable({
children,
onSwipeLeft,
onSwipeRight,
onSwipeUp,
onSwipeDown,
threshold = 50,
className,
disabled = false,
}: SwipeableProps) {
const [touchStart, setTouchStart] = useState<{ x: number; y: number } | null>(null);
const [touchEnd, setTouchEnd] = useState<{ x: number; y: number } | null>(null);
const ref = useRef<HTMLDivElement>(null);
const onTouchStart = useCallback((e: React.TouchEvent) => {
if (disabled) return;
const touch = e.targetTouches[0];
if (!touch) return;
setTouchEnd(null);
setTouchStart({
x: touch.clientX,
y: touch.clientY,
});
}, [disabled]);
const onTouchMove = useCallback((e: React.TouchEvent) => {
if (disabled) return;
const touch = e.targetTouches[0];
if (!touch) return;
setTouchEnd({
x: touch.clientX,
y: touch.clientY,
});
}, [disabled]);
const onTouchEnd = useCallback(() => {
if (!touchStart || !touchEnd || disabled) return;
const distanceX = touchStart.x - touchEnd.x;
const distanceY = touchStart.y - touchEnd.y;
const isHorizontalSwipe = Math.abs(distanceX) > Math.abs(distanceY);
if (isHorizontalSwipe) {
if (Math.abs(distanceX) > threshold) {
if (distanceX > 0) {
onSwipeLeft?.();
} else {
onSwipeRight?.();
}
}
} else {
if (Math.abs(distanceY) > threshold) {
if (distanceY > 0) {
onSwipeUp?.();
} else {
onSwipeDown?.();
}
}
}
}, [touchStart, touchEnd, threshold, onSwipeLeft, onSwipeRight, onSwipeUp, onSwipeDown, disabled]);
return (
<div
ref={ref}
onTouchStart={onTouchStart}
onTouchMove={onTouchMove}
onTouchEnd={onTouchEnd}
className={className}
>
{children}
</div>
);
});
interface PullToRefreshProps {
children: React.ReactNode;
onRefresh: () => Promise<void>;
disabled?: boolean;
className?: string;
}
export const PullToRefresh = memo(function PullToRefresh({
children,
onRefresh,
disabled = false,
className,
}: PullToRefreshProps) {
const [isRefreshing, setIsRefreshing] = useState(false);
const [pullDistance, setPullDistance] = useState(0);
const touchStartY = useRef(0);
const containerRef = useRef<HTMLDivElement>(null);
const handleTouchStart = useCallback((e: React.TouchEvent) => {
if (disabled || isRefreshing) return;
const touch = e.touches[0];
if (touch) {
touchStartY.current = touch.clientY;
}
}, [disabled, isRefreshing]);
const handleTouchMove = useCallback((e: React.TouchEvent) => {
if (disabled || isRefreshing) return;
const container = containerRef.current;
if (!container || container.scrollTop > 0) return;
const touch = e.touches[0];
if (!touch) return;
const distance = touch.clientY - touchStartY.current;
if (distance > 0) {
setPullDistance(Math.min(distance, 100));
}
}, [disabled, isRefreshing]);
const handleTouchEnd = useCallback(async () => {
if (disabled || isRefreshing) return;
if (pullDistance > 60) {
setIsRefreshing(true);
try {
await onRefresh();
} finally {
setIsRefreshing(false);
}
}
setPullDistance(0);
}, [disabled, isRefreshing, pullDistance, onRefresh]);
return (
<div
ref={containerRef}
onTouchStart={handleTouchStart}
onTouchMove={handleTouchMove}
onTouchEnd={handleTouchEnd}
className={cn('relative overflow-auto', className)}
>
{pullDistance > 0 && (
<div
className="absolute top-0 left-0 right-0 flex items-center justify-center bg-white/80 backdrop-blur-sm z-10"
style={{ height: pullDistance }}
>
<div className={cn(
'w-6 h-6 border-2 border-[#C41E3A] border-t-transparent rounded-full',
isRefreshing && 'animate-spin'
)} />
</div>
)}
{children}
</div>
);
});
interface TouchFeedbackProps {
children: React.ReactNode;
className?: string;
disabled?: boolean;
}
export const TouchFeedback = memo(function TouchFeedback({
children,
className,
disabled = false,
}: TouchFeedbackProps) {
const [isPressed, setIsPressed] = useState(false);
return (
<div
className={cn(
'transition-transform duration-100',
isPressed && !disabled && 'scale-95',
className
)}
onTouchStart={() => !disabled && setIsPressed(true)}
onTouchEnd={() => setIsPressed(false)}
onTouchCancel={() => setIsPressed(false)}
>
{children}
</div>
);
});
interface LongPressProps {
children: React.ReactNode;
onLongPress: () => void;
delay?: number;
className?: string;
disabled?: boolean;
}
export const LongPress = memo(function LongPress({
children,
onLongPress,
delay = 500,
className,
disabled = false,
}: LongPressProps) {
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
const [isPressed, setIsPressed] = useState(false);
const handleTouchStart = useCallback(() => {
if (disabled) return;
setIsPressed(true);
timeoutRef.current = setTimeout(() => {
onLongPress();
setIsPressed(false);
}, delay);
}, [disabled, delay, onLongPress]);
const handleTouchEnd = useCallback(() => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
timeoutRef.current = null;
}
setIsPressed(false);
}, []);
useEffect(() => {
return () => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
};
}, []);
return (
<div
onTouchStart={handleTouchStart}
onTouchEnd={handleTouchEnd}
onTouchCancel={handleTouchEnd}
className={cn(
'transition-transform duration-100',
isPressed && !disabled && 'scale-95',
className
)}
>
{children}
</div>
);
});
export function useTouchDevice() {
const [isTouchDevice, setIsTouchDevice] = useState(false);
useEffect(() => {
setIsTouchDevice(
'ontouchstart' in window ||
navigator.maxTouchPoints > 0
);
}, []);
return isTouchDevice;
}
src/components/ui/touch-swipe.tsx
+12 -8
View File
@@ -21,18 +21,22 @@ export function TouchSwipe({
const containerRef = useRef<HTMLDivElement>(null);
const handleTouchStart = (e: React.TouchEvent) => {
touchStartX.current = e.touches[0].clientX;
if (e.touches[0]) {
touchStartX.current = e.touches[0].clientX;
}
};
const handleTouchEnd = (e: React.TouchEvent) => {
const touchEndX = e.changedTouches[0].clientX;
const diff = touchStartX.current - touchEndX;
if (e.changedTouches[0]) {
const touchEndX = e.changedTouches[0].clientX;
const diff = touchStartX.current - touchEndX;
if (Math.abs(diff) > threshold) {
if (diff > 0 && onSwipeLeft) {
onSwipeLeft();
} else if (diff < 0 && onSwipeRight) {
onSwipeRight();
if (Math.abs(diff) > threshold) {
if (diff > 0 && onSwipeLeft) {
onSwipeLeft();
} else if (diff < 0 && onSwipeRight) {
onSwipeRight();
}
}
}
};
src/lib/constants.ts
+2 -2
View File
@@ -144,7 +144,7 @@ export const SERVICES = [
'持续改进：持续改进安全防护能力',
],
},
] as const;
];
// Products Data
export const PRODUCTS = [
@@ -515,7 +515,7 @@ export const CASES = [
tags: ['数据中台', '大数据', '商业智能'],
image: '/images/cases/retail.jpg',
},
] as const;
];
// Social Links
export const SOCIAL_LINKS = [