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

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

app/[locale]/blog/[slug]/page.tsx

@@ -5,6 +5,7 @@ import { getPosts } from "@/lib/getBlogs";
 import { constructMetadata } from "@/lib/metadata";
 import { BlogPost } from "@/types/blog";
 import fs from "fs/promises";
+import matter from 'gray-matter';
 import { Metadata } from "next";
 import { MDXRemote } from "next-mdx-remote-client/rsc";
 import { notFound } from "next/navigation";
@@ -31,7 +32,7 @@ async function getMDXContent(locale: string, section: string): Promise<BlogPost>
     const content = await fs.readFile(filePath, "utf-8");
 
     // 解析MDX文件的frontmatter和内容
-    const { frontmatter, content: postContent } = parseMDXContent(content);
+    const { data: frontmatter, content: postContent } = matter(content);
 
     // 构建BlogPost对象
     const blogPost: BlogPost = {
@@ -123,8 +124,6 @@ export async function generateMetadata({
   const { locale, slug } = await params;
   let post = await getMDXContent(locale, slug);
 
-  console.log(post, 'post');
-
   if (!post) {
     return constructMetadata({
       title: "404",
@@ -151,7 +150,6 @@ export default async function BlogPage({ params }: { params: Params }) {
   const { locale, slug } = await params;
   let post = await getMDXContent(locale, slug);
 
-  console.log(post);
   if (!post) {
     return notFound();
   }

app/[locale]/blog/page.tsx

@@ -42,7 +42,7 @@ export default async function Page({
   const resolvedSearchParams = await searchParams;
   const category = resolvedSearchParams.category as string || "";
 
-  let { posts } = await getPosts(locale, category);
+  let { posts } = await getPosts(locale);
 
   const t = await getTranslations("Blog");
 
@@ -77,12 +77,6 @@ export default async function Page({
             <I18nLink href="/blog" prefetch={false} className="hover:underline">
               新闻中心
             </I18nLink>
-            {/* {typeLabel && (
-              <>
-                <span>/</span>
-                <span className="text-gray-700">{typeLabel}</span>
-              </>
-            )} */}
           </div>
         </div>
 

app/[locale]/product/[slug]/page.tsx

@@ -1,103 +1,184 @@
-import { Callout } from "@/components/mdx/Callout";
-import MDXComponents from "@/components/mdx/MDXComponents";
+import ProductTabsClient from "@/components/ProductTabsClient";
 import { Locale, LOCALES } from "@/i18n/routing";
-import { getPosts } from "@/lib/getBlogs";
+import { getProducts } from "@/lib/getProducts";
 import { constructMetadata } from "@/lib/metadata";
-import { BlogPost } from "@/types/blog";
+import { Product } from "@/types/product";
 import { Metadata } from "next";
-import { MDXRemote } from "next-mdx-remote-client/rsc";
+import { getTranslations } from "next-intl/server";
 import { notFound } from "next/navigation";
 
-type Params = Promise<{
+type Params = {
   locale: string;
   slug: string;
-}>;
+};
 
 type MetadataProps = {
-  params: Params;
+  params: Promise<Params>;
 };
 
 export async function generateMetadata({
   params,
 }: MetadataProps): Promise<Metadata> {
   const { locale, slug } = await params;
-  let { posts }: { posts: BlogPost[] } = await getPosts(locale);
-  const post = posts.find((post) => post.slug === "/" + slug);
 
-  if (!post) {
+  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({
-      title: "404",
-      description: "Page not found",
-      noIndex: true,
+      page: "products",
+      title: product.title,
+      description: `${product.title} - ${product.model} - ${product.place}`,
+      images: product.images.length ? [product.images[0]] : [],
       locale: locale as Locale,
-      path: `/blog/${slug}`,
-      canonicalUrl: `/blog/${slug}`,
+      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}`,
     });
   }
-
-  return constructMetadata({
-    page: "blog",
-    title: post.title,
-    description: post.description,
-    images: post.image ? [post.image] : [],
-    locale: locale as Locale,
-    path: `/blog/${slug}`,
-    canonicalUrl: `/blog/${slug}`,
-  });
 }
 
-export default async function BlogPage({ params }: { params: Params }) {
+export default async function ProductPage({ params }: { params: Promise<Params> }) {
   const { locale, slug } = await params;
-  let { posts }: { posts: BlogPost[] } = await getPosts(locale);
+  const { products }: { products: Product[] } = await getProducts(locale);
+  const product = products.find((item) => item.slug == slug);
+  if (!product) return notFound();
 
-  const post = posts.find((item) => item.slug === "/" + slug);
+  const t = await getTranslations({ locale, namespace: "Product" });
 
-  if (!post) {
-    return notFound();
-  }
+  // 获取所有产品图片
+  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 className="w-full md:w-3/5 px-2 md:px-12">
-      <h1 className="break-words text-4xl font-bold mt-6 mb-4">{post.title}</h1>
-      {post.image && (
-        <img src={post.image} alt={post.title} className="rounded-sm" />
-      )}
-      {post.tags && post.tags.split(",").length ? (
-        <div className="flex flex-wrap gap-2">
-          {post.tags.split(",").map((tag) => {
-            return (
-              <div
-                key={tag}
-                className={`rounded-md bg-gray-200 hover:!no-underline dark:bg-[#24272E] flex px-2.5 py-1.5 text-sm font-medium transition-colors hover:text-black hover:dark:bg-[#15AFD04C] hover:dark:text-[#82E9FF] text-gray-500 dark:text-[#7F818C] outline-none focus-visible:ring transition`}
-              >
-                {tag.trim()}
-              </div>
-            );
-          })}
+    <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>
-      ) : (
-        <></>
-      )}
-      {post.description && <Callout>{post.description}</Callout>}
-      <MDXRemote source={post?.content || ""} components={MDXComponents} />
+
+        {/* 调整后：左侧大图+下方缩略图 + 右侧信息 */}
+        <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() {
-  let posts = (await getPosts()).posts;
+  try {
+    const defaultLocale = LOCALES[0];
+    const { products }: { products: Product[] } = await getProducts(defaultLocale);
+    const validProducts = products.filter((product) => product.slug && product.title);
 
-  // Filter out posts without a slug
-  posts = posts.filter((post) => post.slug);
-
-  return LOCALES.flatMap((locale) =>
-    posts.map((post) => {
-      const slugPart = post.slug.replace(/^\//, "").replace(/^blog\//, "");
-
-      return {
+    return LOCALES.flatMap((locale) =>
+      validProducts.map((product) => ({
         locale,
-        slug: slugPart,
-      };
-    })
-  );
-}
+        slug: product.slug,
+      }))
+    );
+  } catch (error) {
+    console.error("生成产品静态参数失败:", error);
+    return [];
+  }
+}

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,
+  }));
 }