46 lines
3.0 KiB
TypeScript
46 lines
3.0 KiB
TypeScript
import { notFound } from "next/navigation";
|
||
import { ArrowRight } from "@/components/icons";
|
||
import { DevPlaceholder, FeatureList, PreviewNotice, ProductVisual } from "@/components/ui";
|
||
import { products } from "@/lib/content";
|
||
|
||
export function generateStaticParams() {
|
||
return products.map((product) => ({ slug: product.slug }));
|
||
}
|
||
|
||
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
|
||
const { slug } = await params;
|
||
const product = products.find((item) => item.slug === slug);
|
||
return { title: product?.name ?? "产品详情" };
|
||
}
|
||
|
||
export default async function ProductDetailPage({ params }: { params: Promise<{ slug: string }> }) {
|
||
const { slug } = await params;
|
||
const product = products.find((item) => item.slug === slug);
|
||
if (!product) notFound();
|
||
|
||
return (
|
||
<div className="container-shell py-16 sm:py-24">
|
||
<PreviewNotice>产品详情模板已完成；当前页面不代表真实产品发布状态。</PreviewNotice>
|
||
<div className="mt-10 grid gap-12 lg:grid-cols-[1fr_0.85fr] lg:items-center">
|
||
<div>
|
||
<DevPlaceholder>{product.shortLabel}</DevPlaceholder>
|
||
<p className="mt-6 text-xs font-semibold uppercase tracking-[0.2em] text-subtle">{product.category}</p>
|
||
<h1 className="mt-4 max-w-xl text-5xl font-semibold tracking-[-0.06em] sm:text-7xl">{product.name}</h1>
|
||
<p className="body-copy mt-7 max-w-lg text-lg">{product.summary}</p>
|
||
<div className="mt-8 flex flex-wrap gap-3"><a className="button-primary" href="#details">查看内容结构 <ArrowRight /></a><a className="button-ghost" href="/contact">联系内容负责人</a></div>
|
||
</div>
|
||
<ProductVisual accent={product.accent} label={product.category.toUpperCase()} />
|
||
</div>
|
||
<section className="mt-24 grid gap-10 border-t border-line pt-12 lg:grid-cols-[0.8fr_1.2fr]" id="details">
|
||
<div><p className="eyebrow eyebrow-blue">Product template</p><h2 className="mt-5 text-3xl font-semibold tracking-[-0.04em]">内容结构已就位，事实资料待填。</h2></div>
|
||
<div className="grid gap-8 sm:grid-cols-2">
|
||
<div><p className="text-xs font-semibold uppercase tracking-[0.18em] text-subtle">产品介绍</p><p className="mt-3 text-sm leading-7 text-muted">正式介绍文案待产品资料确认后录入。</p></div>
|
||
<div><p className="text-xs font-semibold uppercase tracking-[0.18em] text-subtle">核心优势</p><FeatureList items={["真实卖点待确认", "规格字段预留", "应用场景待补充"]} /></div>
|
||
<div><p className="text-xs font-semibold uppercase tracking-[0.18em] text-subtle">规格</p><p className="mt-3 text-sm leading-7 text-muted">不展示未经核实的型号、参数或认证信息。</p></div>
|
||
<div><p className="text-xs font-semibold uppercase tracking-[0.18em] text-subtle">媒体与 FAQ</p><p className="mt-3 text-sm leading-7 text-muted">媒体素材和问答内容将在 CMS 阶段接入。</p></div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|