init
This commit is contained in:
砂糖
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