init
This commit is contained in:
砂糖
184
app/[locale]/product/[slug]/page.tsx
Normal file
184
app/[locale]/product/[slug]/page.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
import ProductTabsClient from "@/components/ProductTabsClient";
|
||||
import { Locale, LOCALES } from "@/i18n/routing";
|
||||
import { getProducts } from "@/lib/getProducts";
|
||||
import { constructMetadata } from "@/lib/metadata";
|
||||
import { Product } from "@/types/product";
|
||||
import { Metadata } from "next";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { notFound } from "next/navigation";
|
||||
|
||||
type Params = {
|
||||
locale: string;
|
||||
slug: string;
|
||||
};
|
||||
|
||||
type MetadataProps = {
|
||||
params: Promise<Params>;
|
||||
};
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: MetadataProps): Promise<Metadata> {
|
||||
const { locale, slug } = await params;
|
||||
|
||||
try {
|
||||
const { products }: { products: Product[] } = await getProducts(locale);
|
||||
const product = products.find((product) => product.slug === slug);
|
||||
|
||||
if (!product) {
|
||||
return constructMetadata({
|
||||
title: "404 - 产品不存在",
|
||||
description: "请求的产品页面未找到",
|
||||
noIndex: true,
|
||||
locale: locale as Locale,
|
||||
path: `/products/${slug}`,
|
||||
canonicalUrl: `/products/${slug}`,
|
||||
});
|
||||
}
|
||||
|
||||
return constructMetadata({
|
||||
page: "products",
|
||||
title: product.title,
|
||||
description: `${product.title} - ${product.model} - ${product.place}`,
|
||||
images: product.images.length ? [product.images[0]] : [],
|
||||
locale: locale as Locale,
|
||||
path: `/products/${slug}`,
|
||||
canonicalUrl: `/products/${slug}`,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("生成产品元数据失败:", error);
|
||||
return constructMetadata({
|
||||
title: "产品详情",
|
||||
description: "产品详情页面",
|
||||
locale: (await params).locale as Locale,
|
||||
path: `/products/${(await params).slug}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default async function ProductPage({ params }: { params: Promise<Params> }) {
|
||||
const { locale, slug } = await params;
|
||||
const { products }: { products: Product[] } = await getProducts(locale);
|
||||
const product = products.find((item) => item.slug == slug);
|
||||
if (!product) return notFound();
|
||||
|
||||
const t = await getTranslations({ locale, namespace: "Product" });
|
||||
|
||||
// 获取所有产品图片
|
||||
const allImages = product.images || [];
|
||||
|
||||
const formattedPublishTime = (() => {
|
||||
if (!product.publishedTime) return "暂无";
|
||||
const publishDate = typeof product.publishedTime === 'string'
|
||||
? new Date(product.publishedTime)
|
||||
: product.publishedTime;
|
||||
|
||||
return isNaN(publishDate.getTime())
|
||||
? "暂无"
|
||||
: publishDate.toLocaleDateString("zh-CN", {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
});
|
||||
})();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<img src="http://kelunpuzhonggong.com/upload/img/20251015111553.jpg" className="w-screen h-auto" alt="" />
|
||||
<div className="w-full max-w-6xl mx-auto px-4 md:px-8 py-8">
|
||||
<div className="text-center mb-6">
|
||||
<h1 className="text-purple-600 text-xl font-bold">{t("detailTitle")}</h1>
|
||||
</div>
|
||||
|
||||
{/* 调整后：左侧大图+下方缩略图 + 右侧信息 */}
|
||||
<div className="border rounded p-4 mb-6">
|
||||
<div className="flex flex-col md:flex-row">
|
||||
{/* 左侧图片区域（大图+缩略图） */}
|
||||
<div className="md:w-1/3 mb-4 md:mb-0">
|
||||
{/* 第一张大图 */}
|
||||
{allImages.length > 0 ? (
|
||||
<div className="relative w-full h-auto max-h-[500px]">
|
||||
<img
|
||||
src={allImages[0]}
|
||||
alt={`${product.title || "产品"}-主图`}
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 66vw, 66vw"
|
||||
className="object-contain"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-full h-60 bg-gray-100 flex items-center justify-center text-gray-500">
|
||||
暂无产品图片
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 右侧产品信息区域 */}
|
||||
<div className="md:w-2/3 md:ml-4">
|
||||
<h1 className="text-xl font-bold mb-3">{product.title || "未命名产品"}</h1>
|
||||
<div className="space-y-2 mb-6">
|
||||
<div>
|
||||
<span className="font-medium">{t("productModel")}：</span>
|
||||
<span>{product.model || "暂无"}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium">{t("productPlace")}：</span>
|
||||
<span>{product.place || "暂无"}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium">{t("productPublishedTime")}：</span>
|
||||
<span>{formattedPublishTime}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* 所有图片缩略图（横向滚动） */}
|
||||
{allImages.length > 0 && (
|
||||
<div className="flex flex-nowrap gap-2 mt-4 overflow-x-auto pb-2">
|
||||
{allImages.map((img, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="relative w-20 h-20 cursor-pointer border border-gray-200 rounded"
|
||||
>
|
||||
<img
|
||||
src={img}
|
||||
alt={`${product.title || "产品"}-图${index + 1}`}
|
||||
className="object-cover"
|
||||
sizes="80px"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ProductTabsClient
|
||||
locale={locale}
|
||||
detail={product.detail}
|
||||
spec={product.spec}
|
||||
packaging={product.packaging}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
try {
|
||||
const defaultLocale = LOCALES[0];
|
||||
const { products }: { products: Product[] } = await getProducts(defaultLocale);
|
||||
const validProducts = products.filter((product) => product.slug.toString() && product.title);
|
||||
|
||||
return LOCALES.flatMap((locale) =>
|
||||
validProducts.map((product) => ({
|
||||
locale,
|
||||
slug: product.slug.toString(),
|
||||
}))
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("生成产品静态参数失败:", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
157
app/[locale]/product/page.tsx
Normal file
157
app/[locale]/product/page.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import { Link as I18nLink, Locale, LOCALES } from "@/i18n/routing";
|
||||
import { getProducts } from "@/lib/getProducts";
|
||||
import { constructMetadata } from "@/lib/metadata";
|
||||
import { Product } from "@/types/product";
|
||||
import { Metadata } from "next";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
|
||||
type Params = Promise<{ locale: string }>;
|
||||
|
||||
type MetadataProps = {
|
||||
params: Params;
|
||||
};
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: MetadataProps): Promise<Metadata> {
|
||||
const { locale } = await params;
|
||||
const t = await getTranslations({ locale, namespace: "Product" });
|
||||
|
||||
return constructMetadata({
|
||||
page: "Product",
|
||||
title: "产品中心",
|
||||
description: "公司产品展示",
|
||||
locale: locale as Locale,
|
||||
path: `/product`,
|
||||
canonicalUrl: `/product`,
|
||||
});
|
||||
}
|
||||
|
||||
// 每页产品数量
|
||||
const PRODUCTS_PER_PAGE = 8;
|
||||
|
||||
export default async function Page({
|
||||
params,
|
||||
searchParams,
|
||||
}: {
|
||||
params: Params;
|
||||
searchParams: { page?: string };
|
||||
}) {
|
||||
const { locale } = await params;
|
||||
const t = await getTranslations("Product");
|
||||
|
||||
// 获取当前页码，默认第1页
|
||||
let currentPage = parseInt(searchParams.page || "1");
|
||||
if (isNaN(currentPage) || currentPage < 1) {
|
||||
currentPage = 1;
|
||||
}
|
||||
|
||||
// 获取产品数据
|
||||
const { products }: { products: Product[] } = await getProducts(locale);
|
||||
|
||||
// 计算总页数
|
||||
const totalProducts = products.length;
|
||||
const totalPages = Math.ceil(totalProducts / PRODUCTS_PER_PAGE);
|
||||
|
||||
// 确保当前页码不超过总页数
|
||||
const safeCurrentPage = Math.min(currentPage, totalPages);
|
||||
|
||||
// 计算当前页的产品数据
|
||||
const startIndex = (safeCurrentPage - 1) * PRODUCTS_PER_PAGE;
|
||||
const endIndex = startIndex + PRODUCTS_PER_PAGE;
|
||||
const currentProducts = products.slice(startIndex, endIndex);
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
{/* 面包屑导航 */}
|
||||
<div className="bg-gray-100 py-4">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||
<I18nLink href="/" prefetch={false} className="hover:underline">
|
||||
{t("breadcrumb.home")}
|
||||
</I18nLink>
|
||||
<span>/</span>
|
||||
<span className="text-gray-700">{t("breadcrumb.product")}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 产品标题区域 */}
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<h1 className="text-3xl font-bold text-center text-gray-800 mb-8">{t("title")}</h1>
|
||||
|
||||
{/* 产品网格 */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{currentProducts.map((product) => (
|
||||
<I18nLink
|
||||
key={product.slug}
|
||||
href={`/product/${product.slug}`}
|
||||
prefetch={false}
|
||||
className="block bg-white border border-gray-100 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300"
|
||||
>
|
||||
<div className="aspect-square flex items-center justify-center p-6">
|
||||
<img
|
||||
src={product.images?.[0] || "/placeholder.svg"}
|
||||
alt={product.title}
|
||||
className="max-w-full max-h-full object-contain hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-6 text-center">
|
||||
<h3 className="text-lg font-medium text-gray-800 mb-4">{product.title}</h3>
|
||||
<div className="inline-block text-red-600 font-medium hover:underline">
|
||||
{t("learnMore")} >
|
||||
</div>
|
||||
</div>
|
||||
</I18nLink>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 分页组件 */}
|
||||
{totalPages > 1 && (
|
||||
<div className="mt-12 flex justify-center">
|
||||
<nav className="inline-flex items-center -space-x-px">
|
||||
{/* 上一页按钮 */}
|
||||
<I18nLink
|
||||
href={`/product?page=${safeCurrentPage - 1}`}
|
||||
prefetch={false}
|
||||
className={`px-3 py-2 rounded-l-lg border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 ${safeCurrentPage === 1 ? 'cursor-not-allowed opacity-50' : ''}`}
|
||||
aria-disabled={safeCurrentPage === 1}
|
||||
>
|
||||
{t("pagination.previous")}
|
||||
</I18nLink>
|
||||
|
||||
{/* 页码按钮 */}
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
|
||||
<I18nLink
|
||||
key={page}
|
||||
href={`/product?page=${page}`}
|
||||
prefetch={false}
|
||||
className={`px-3 py-2 border-y border-gray-300 bg-white text-sm font-medium ${page === safeCurrentPage ? 'bg-red-50 text-red-600' : 'text-gray-500 hover:bg-gray-50'}`}
|
||||
>
|
||||
{page}
|
||||
</I18nLink>
|
||||
))}
|
||||
|
||||
{/* 下一页按钮 */}
|
||||
<I18nLink
|
||||
href={`/product?page=${safeCurrentPage + 1}`}
|
||||
prefetch={false}
|
||||
className={`px-3 py-2 rounded-r-lg border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 ${safeCurrentPage === totalPages ? 'cursor-not-allowed opacity-50' : ''}`}
|
||||
aria-disabled={safeCurrentPage === totalPages}
|
||||
>
|
||||
{t("pagination.next")}
|
||||
</I18nLink>
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
// 为每个语言生成首页
|
||||
return LOCALES.map((locale) => ({
|
||||
locale,
|
||||
}));
|
||||
}
|
||||
Reference in New Issue
Block a user