feat: add case detail pages with SSG and dynamic routing
This commit is contained in:
张翔
@@ -0,0 +1,224 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import Image from 'next/image';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { ArrowLeft, Building2, CheckCircle2, TrendingUp, Users, Target } from 'lucide-react';
|
||||||
|
import { CASES, COMPANY_INFO } from '@/lib/constants';
|
||||||
|
import type { StaticImageData } from 'next/image';
|
||||||
|
|
||||||
|
interface CaseResult {
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CaseItem {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
client: string;
|
||||||
|
industry: string;
|
||||||
|
description: string;
|
||||||
|
results: readonly CaseResult[];
|
||||||
|
tags: readonly string[];
|
||||||
|
image?: string | StaticImageData;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CaseDetailClientProps {
|
||||||
|
caseItem: CaseItem;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CaseDetailClient({ caseItem }: CaseDetailClientProps) {
|
||||||
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
|
const contentRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const observer = new IntersectionObserver(
|
||||||
|
([entry]) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
setIsVisible(true);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ threshold: 0.1 }
|
||||||
|
);
|
||||||
|
|
||||||
|
if (contentRef.current) {
|
||||||
|
observer.observe(contentRef.current);
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => observer.disconnect();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const relatedCases = CASES.filter((c) => c.id !== caseItem.id).slice(0, 2);
|
||||||
|
|
||||||
|
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
|
||||||
|
'业务处理效率': TrendingUp,
|
||||||
|
'客户满意度': Users,
|
||||||
|
'运营成本': Target,
|
||||||
|
'生产效率': TrendingUp,
|
||||||
|
'设备利用率': Target,
|
||||||
|
'不良品率': CheckCircle2,
|
||||||
|
'数据整合效率': TrendingUp,
|
||||||
|
'决策响应时间': Target,
|
||||||
|
'营销转化率': Users,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen bg-white">
|
||||||
|
<div className="pt-16">
|
||||||
|
<div className="relative h-[40vh] min-h-[300px] bg-gradient-to-br from-[#C41E3A] to-[#8B1429] overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-black/20" />
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<Building2 className="w-32 h-32 text-white/10" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute top-6 left-6 z-10">
|
||||||
|
<Link href="/#cases">
|
||||||
|
<Button variant="ghost" className="text-white hover:bg-white/10">
|
||||||
|
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||||
|
返回案例
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-black/60 to-transparent">
|
||||||
|
<div className="container-wide">
|
||||||
|
<Badge className="mb-4 bg-white/20 text-white hover:bg-white/30">
|
||||||
|
{caseItem.industry}
|
||||||
|
</Badge>
|
||||||
|
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-semibold text-white mb-2">
|
||||||
|
{caseItem.title}
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg text-white/80">
|
||||||
|
{caseItem.client}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div ref={contentRef} className="container-wide py-12 md:py-16">
|
||||||
|
<div
|
||||||
|
className={`
|
||||||
|
grid lg:grid-cols-3 gap-8 lg:gap-12
|
||||||
|
opacity-0 translate-y-4
|
||||||
|
${isVisible ? 'animate-fade-in-up' : ''}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<div className="lg:col-span-2 space-y-8">
|
||||||
|
<section>
|
||||||
|
<h2 className="text-2xl font-semibold text-[#171717] mb-4">项目背景</h2>
|
||||||
|
<p className="text-[#525252] leading-relaxed">
|
||||||
|
{caseItem.description}
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2 className="text-2xl font-semibold text-[#171717] mb-4">解决方案</h2>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{caseItem.tags.map((tag, index) => (
|
||||||
|
<div key={tag} className="flex items-start gap-3">
|
||||||
|
<div className="w-6 h-6 bg-[#C41E3A] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||||
|
<CheckCircle2 className="w-4 h-4 text-white" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium text-[#171717]">{tag}</h3>
|
||||||
|
<p className="text-sm text-[#737373]">
|
||||||
|
基于 {tag} 技术的专业解决方案，助力企业实现数字化转型目标。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2 className="text-2xl font-semibold text-[#171717] mb-4">项目成果</h2>
|
||||||
|
<div className="grid sm:grid-cols-3 gap-4">
|
||||||
|
{caseItem.results.map((result) => {
|
||||||
|
const Icon = iconMap[result.label] || TrendingUp;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={result.label}
|
||||||
|
className="p-6 bg-[#FAFAFA] rounded-lg border border-[#E5E5E5] hover:border-[#C41E3A] transition-colors"
|
||||||
|
>
|
||||||
|
<Icon className="w-8 h-8 text-[#C41E3A] mb-3" />
|
||||||
|
<div className="text-2xl font-semibold text-[#C41E3A] mb-1">
|
||||||
|
{result.value}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-[#737373]">{result.label}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="p-6 bg-[#FAFAFA] rounded-lg border border-[#E5E5E5]">
|
||||||
|
<h3 className="text-lg font-semibold text-[#171717] mb-4">项目信息</h3>
|
||||||
|
<dl className="space-y-3">
|
||||||
|
<div>
|
||||||
|
<dt className="text-sm text-[#737373]">客户名称</dt>
|
||||||
|
<dd className="text-[#171717] font-medium">{caseItem.client}</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt className="text-sm text-[#737373]">行业领域</dt>
|
||||||
|
<dd className="text-[#171717] font-medium">{caseItem.industry}</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt className="text-sm text-[#737373]">技术标签</dt>
|
||||||
|
<dd className="flex flex-wrap gap-2 mt-1">
|
||||||
|
{caseItem.tags.map((tag) => (
|
||||||
|
<Badge key={tag} variant="secondary" className="text-xs">
|
||||||
|
{tag}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-6 bg-gradient-to-br from-[#C41E3A] to-[#8B1429] rounded-lg text-white">
|
||||||
|
<h3 className="text-lg font-semibold mb-2">想要了解更多？</h3>
|
||||||
|
<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>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{relatedCases.length > 0 && (
|
||||||
|
<section className="mt-16 pt-16 border-t border-[#E5E5E5]">
|
||||||
|
<h2 className="text-2xl font-semibold text-[#171717] mb-8">相关案例</h2>
|
||||||
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
|
{relatedCases.map((relatedCase) => (
|
||||||
|
<Link
|
||||||
|
key={relatedCase.id}
|
||||||
|
href={`/cases/${relatedCase.id}`}
|
||||||
|
className="group p-6 bg-[#FAFAFA] rounded-lg border border-[#E5E5E5] hover:border-[#C41E3A] transition-colors"
|
||||||
|
>
|
||||||
|
<Badge variant="secondary" className="mb-2">
|
||||||
|
{relatedCase.industry}
|
||||||
|
</Badge>
|
||||||
|
<h3 className="text-lg font-semibold text-[#171717] group-hover:text-[#C41E3A] transition-colors">
|
||||||
|
{relatedCase.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-[#737373] mt-2 line-clamp-2">
|
||||||
|
{relatedCase.description}
|
||||||
|
</p>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
import { Metadata } from 'next';
|
||||||
|
import { notFound } from 'next/navigation';
|
||||||
|
import { CASES } from '@/lib/constants';
|
||||||
|
import { CaseDetailClient } from './client';
|
||||||
|
|
||||||
|
export async function generateStaticParams() {
|
||||||
|
return CASES.map((caseItem) => ({
|
||||||
|
id: caseItem.id,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
|
||||||
|
const { id } = await params;
|
||||||
|
const caseItem = CASES.find((c) => c.id === id);
|
||||||
|
|
||||||
|
if (!caseItem) {
|
||||||
|
return {
|
||||||
|
title: '案例未找到',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
title: `${caseItem.title} - 睿新致远`,
|
||||||
|
description: caseItem.description,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function CaseDetailPage({ params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const { id } = await params;
|
||||||
|
const caseItem = CASES.find((c) => c.id === id);
|
||||||
|
|
||||||
|
if (!caseItem) {
|
||||||
|
notFound();
|
||||||
|
}
|
||||||
|
|
||||||
|
return <CaseDetailClient caseItem={caseItem} />;
|
||||||
|
}
|
||||||
@@ -0,0 +1,150 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { GlassCard } from '@/components/ui/glass-card';
|
||||||
|
import { CASES } from '@/lib/constants';
|
||||||
|
import { ArrowRight, Building2, TrendingUp } from 'lucide-react';
|
||||||
|
|
||||||
|
export function CasesSection() {
|
||||||
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
|
const sectionRef = useRef<HTMLElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const observer = new IntersectionObserver(
|
||||||
|
([entry]) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
setIsVisible(true);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ threshold: 0.1 }
|
||||||
|
);
|
||||||
|
|
||||||
|
if (sectionRef.current) {
|
||||||
|
observer.observe(sectionRef.current);
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => observer.disconnect();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
ref={sectionRef}
|
||||||
|
id="cases"
|
||||||
|
className="py-24 md:py-32 relative overflow-hidden bg-[#FAFAFA]"
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 pointer-events-none">
|
||||||
|
<div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-[#E5E5E5] to-transparent" />
|
||||||
|
<div className="absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-[#E5E5E5] to-transparent" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="container-wide relative z-10">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<div
|
||||||
|
className={`
|
||||||
|
opacity-0 translate-y-4
|
||||||
|
${isVisible ? 'animate-fade-in-up' : ''}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#C41E3A]/10 text-[#C41E3A] text-sm font-medium mb-4">
|
||||||
|
<TrendingUp className="w-4 h-4" />
|
||||||
|
成功案例
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2
|
||||||
|
className={`
|
||||||
|
text-3xl sm:text-4xl font-semibold text-[#171717] mb-4
|
||||||
|
opacity-0 translate-y-4
|
||||||
|
${isVisible ? 'animate-fade-in-up stagger-1' : ''}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
客户成功案例
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p
|
||||||
|
className={`
|
||||||
|
text-lg text-[#525252] max-w-2xl mx-auto
|
||||||
|
opacity-0 translate-y-4
|
||||||
|
${isVisible ? 'animate-fade-in-up stagger-2' : ''}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
以专业实力赢得客户信赖，用技术创新创造商业价值
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid lg:grid-cols-3 gap-6 md:gap-8">
|
||||||
|
{CASES.map((caseItem, index) => (
|
||||||
|
<Link key={caseItem.id} href={`/cases/${caseItem.id}`}>
|
||||||
|
<GlassCard
|
||||||
|
variant="elevated"
|
||||||
|
className="overflow-hidden group cursor-pointer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`
|
||||||
|
opacity-0 translate-y-4
|
||||||
|
${isVisible ? 'animate-fade-in-up' : ''}
|
||||||
|
`}
|
||||||
|
style={{ animationDelay: `${(index + 3) * 100}ms` }}
|
||||||
|
>
|
||||||
|
<div className="relative h-48 bg-gradient-to-br from-[#C41E3A]/10 to-[#D4A574]/10 overflow-hidden">
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<Building2 className="w-16 h-16 text-[#C41E3A]/30 group-hover:scale-110 transition-transform duration-500" />
|
||||||
|
</div>
|
||||||
|
<div className="absolute top-4 left-4">
|
||||||
|
<span className="px-3 py-1 bg-white/90 backdrop-blur-sm rounded-full text-xs font-medium text-[#C41E3A]">
|
||||||
|
{caseItem.industry}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-6">
|
||||||
|
<h3 className="text-lg font-semibold text-[#171717] mb-2 group-hover:text-[#C41E3A] transition-colors duration-300">
|
||||||
|
{caseItem.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p className="text-sm text-[#525252] mb-4 line-clamp-2">
|
||||||
|
{caseItem.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-3 gap-2 mb-4">
|
||||||
|
{caseItem.results.map((result) => (
|
||||||
|
<div
|
||||||
|
key={result.label}
|
||||||
|
className="text-center p-2 bg-[#FAFAFA] rounded-lg"
|
||||||
|
>
|
||||||
|
<div className="text-sm font-semibold text-[#C41E3A]">
|
||||||
|
{result.value}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-[#737373] truncate">
|
||||||
|
{result.label}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-2 mb-4">
|
||||||
|
{caseItem.tags.map((tag) => (
|
||||||
|
<span
|
||||||
|
key={tag}
|
||||||
|
className="px-2 py-1 bg-[#171717]/5 rounded text-xs text-[#525252]"
|
||||||
|
>
|
||||||
|
{tag}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-center text-sm font-medium text-[#C41E3A] group-hover:gap-2 transition-all">
|
||||||
|
查看详情
|
||||||
|
<ArrowRight className="w-4 h-4 ml-1" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</GlassCard>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user