sage-home/app/[locale]/product/page.tsx

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")} &gt;
                </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,
  }));
}