diff --git a/src/app/products/[id]/page.tsx b/src/app/products/[id]/page.tsx new file mode 100644 index 0000000..3ecf186 --- /dev/null +++ b/src/app/products/[id]/page.tsx @@ -0,0 +1,232 @@ +import { notFound } from 'next/navigation'; +import { PRODUCTS } from '@/lib/constants'; +import { Button } from '@/components/ui/button'; +import { ArrowLeft, CheckCircle2, Zap, Target, Layers, CreditCard, ArrowRight } from 'lucide-react'; +import Link from 'next/link'; + +export async function generateStaticParams() { + return PRODUCTS.map((product) => ({ + id: product.id, + })); +} + +export async function generateMetadata({ params }: { params: { id: string } }) { + const product = PRODUCTS.find((p) => p.id === params.id); + + if (!product) { + return { + title: '产品未找到', + }; + } + + return { + title: `${product.title} - 睿新致远`, + description: product.description, + }; +} + +export default function ProductDetailPage({ params }: { params: { id: string } }) { + const product = PRODUCTS.find((p) => p.id === params.id); + + if (!product) { + notFound(); + } + + return ( +
+
+
+ + + 返回产品列表 + +
+
+ {product.category} +
+

+ {product.title} +

+

+ {product.description} +

+
+
+
+ +
+
+
+

产品概述

+

+ {product.overview} +

+
+ +
+

+ + 核心功能 +

+
+ {product.features.map((feature, index) => ( +
+
+ +
+ {feature} +
+ ))} +
+
+ +
+

+ + 产品优势 +

+
+ {product.benefits.map((benefit, index) => ( +
+
+ +
+ {benefit} +
+ ))} +
+
+ +
+

+ + 实施流程 +

+
+ {product.process.map((step, index) => ( +
+
+ {index + 1} +
+
+

{step}

+ {index < product.process.length - 1 && ( +
+ )} +
+
+ ))} +
+
+ +
+

+ + 技术规格 +

+
+ {product.specs.map((spec, index) => ( +
+
+ {spec} +
+ ))} +
+
+ +
+

+ + 价格方案 +

+
+
+

基础版

+

{product.pricing.base}

+
    +
  • + + 基础功能模块 +
    • +
  • + + 邮件支持 +
    • +
  • + + 标准报表 +
    • +
+
+
+
+ 推荐 +
+

标准版

+

{product.pricing.standard}

+
    +
  • + + 全部功能模块 +
    • +
  • + + 电话支持 +
    • +
  • + + 自定义报表 +
    • +
+
+
+

企业版

+

{product.pricing.enterprise}

+
    +
  • + + 全部功能模块 +
    • +
  • + + 专属客服 +
    • +
  • + + 定制开发 +
    • +
+
+
+
+ +
+ + +
+
+
+
+ ); +}