feat: 添加产品中心功能并优化博客系统

- 新增产品中心功能，包括产品列表页和详情页
- 实现产品多语言支持(中文、英文、越南语)
- 重构博客系统，从API获取改为本地MDX文件管理
- 更新favicon为PNG格式并修复相关引用
- 添加产品类型定义和获取逻辑
- 优化首页应用场景图片和链接
- 完善国际化配置和翻译
- 新增产品详情页标签切换组件
- 修复代理配置中的favicon路径问题

app/[locale]/product/page.tsx

@@ -1,5 +1,7 @@
 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";
 
@@ -25,66 +27,40 @@ export async function generateMetadata({
   });
 }
 
-// 产品数据
-const productData = [
-  {
-    id: 1,
-    name: "直线高频焊接圆管(含热浸镀锌)",
-    image: "/placeholder.svg",
-    url: "/product/114",
-  },
-  {
-    id: 2,
-    name: "方矩形焊接钢管(含热浸镀锌)",
-    image: "/placeholder.svg",
-    url: "/product/115",
-  },
-  {
-    id: 3,
-    name: "钢塑复合管",
-    image: "/placeholder.svg",
-    url: "/product/116",
-  },
-  {
-    id: 4,
-    name: "管路连接件",
-    image: "/placeholder.svg",
-    url: "/product/117",
-  },
-  {
-    id: 5,
-    name: "其他产品1",
-    image: "/placeholder.svg",
-    url: "/product/118",
-  },
-  {
-    id: 6,
-    name: "其他产品2",
-    image: "/placeholder.svg",
-    url: "/product/119",
-  },
-  {
-    id: 7,
-    name: "其他产品3",
-    image: "/placeholder.svg",
-    url: "/product/120",
-  },
-  {
-    id: 8,
-    name: "其他产品4",
-    image: "/placeholder.svg",
-    url: "/product/121",
-  },
-];
+// 每页产品数量
+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">
       {/* 面包屑导航 */}
@@ -92,48 +68,90 @@ export default async function Page({
         <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">产品中心</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">产品中心</h1>
-        
+        <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">
-          {productData.map((product) => (
+          {currentProducts.map((product) => (
             <I18nLink
-              key={product.id}
-              href={product.url}
+              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.image} 
-                  alt={product.name} 
+                <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.name}</h3>
+                <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">
-                  了解更多 &gt;
+                  {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 }));
+  // 为每个语言生成首页
+  return LOCALES.map((locale) => ({
+    locale,
+  }));
 }