init

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

@@ -0,0 +1,135 @@
+import { LOCALES } from "@/i18n/routing";
+import { constructMetadata } from "@/lib/metadata";
+import { getWorkShop, getWorkShops } from "@/lib/workshop";
+import { WorkShop } from "@/types/workShop";
+import { Metadata } from "next";
+import { Locale } from "next-intl";
+
+// 强制静态渲染
+export const dynamic = "force-static";
+
+// 固定 Params 类型为普通对象（Next.js 原生传参无异步）
+type Params = {
+  locale: string;
+  slug: string;
+};
+
+type MetadataProps = {
+  params: Params;
+};
+
+export async function generateMetadata({
+  params,
+}: MetadataProps): Promise<Metadata> {
+  const { locale, slug } = await params;
+  const workShop = await getWorkShop(locale, slug);
+  console.log(workShop);
+
+  console.log(workShop?.slug);
+
+  if (!workShop) {
+    return constructMetadata({
+      title: "404 - 车间不存在",
+      description: "请求的车间页面未找到",
+      noIndex: true,
+      locale: locale as Locale,
+      path: `/workshop/${slug}`,
+      canonicalUrl: `/workshop/${slug}`,
+    });
+  }
+
+  return constructMetadata({
+    title: workShop.title,
+    description: workShop.desc,
+    locale: locale as Locale,
+    path: `/workshop/${slug}`,
+    canonicalUrl: `/workshop/${slug}`,
+  });
+}
+
+// 页面主组件 - 仅保留字段展示+修复 Hydration 错误
+export default async function WorkshopDetailPage({ params }: { params: Params }) {
+  // 🔴 核心修复1：移除不必要的 await（params 是同步对象）
+  const { locale, slug } = await params;
+  const workShop = await getWorkShop(locale, slug);
+
+  if (!workShop) return null;
+
+  // 兜底处理：避免字段为空导致属性不匹配
+  const coverSrc = workShop.cover || "";
+  const coverAlt = workShop.title || "车间封面";
+  const workshopDesc = workShop.desc || "暂无车间描述";
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-10 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-6xl mx-auto">
+        {/* 封面图区域 - 🔴 修复布局属性不一致 */}
+        <div className="relative rounded-2xl overflow-hidden shadow-lg h-[400px] sm:h-[500px] mb-8">
+          <img
+            src={coverSrc}
+            alt={coverAlt}
+            className="absolute inset-0 w-full h-full object-cover transition-transform hover:scale-105 duration-700"
+            // 显式设置属性，确保服务端/客户端一致
+            loading="lazy"
+            decoding="async"
+          />
+        </div>
+
+        {/* 标题+描述区域 */}
+        <div className="bg-white rounded-xl p-8 shadow-sm mb-10">
+          <h1 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-6">
+            {workShop.title}
+          </h1>
+          <p className="text-lg text-gray-700 leading-relaxed">
+            {workshopDesc}
+          </p>
+        </div>
+
+        {workShop.images?.length > 0 && (
+          <div className="bg-white rounded-xl p-8 shadow-sm">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-6 border-b pb-3 border-gray-200">
+              车间图片
+            </h2>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+              {workShop.images.map((img, index) => {
+                const stableKey = `workshop-${slug}-img-${index}-${img.slice(-8)}`;
+                const imgAlt = `${workShop.title}-图片${index + 1}`;
+                return (
+                  <div
+                    key={stableKey}
+                    className="relative rounded-lg overflow-hidden shadow-md h-64 hover:shadow-xl transition-all duration-300"
+                  >
+                    <img
+                      src={img}
+                      alt={imgAlt}
+                      className="absolute inset-0 w-full h-full object-cover transition-transform hover:scale-110 duration-500"
+                      loading="lazy"
+                      decoding="async"
+                    />
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export async function generateStaticParams() {
+  try {
+    const defaultLocale = LOCALES[0];
+    const workShops: WorkShop[] = await getWorkShops(defaultLocale);
+
+    return LOCALES.flatMap((locale) =>
+      workShops.map((workShop) => ({
+        locale,
+        slug: workShop.slug as string,
+      }))
+    );
+  } catch (error) {
+    console.error("生成产品静态参数失败:", error);
+    return [];
+  }
+}

app/[locale]/workshop/page.tsx

@@ -0,0 +1,118 @@
+import { Link as I18nLink, LOCALES } from "@/i18n/routing";
+import { constructMetadata } from "@/lib/metadata";
+import { getWorkShops } from "@/lib/workshop";
+import { WorkShop } from "@/types/workShop";
+import { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+
+// 强制静态生成
+export const dynamic = "force-static";
+
+// 明确 Params 类型（静态生成的参数）
+type Params = { locale: string };
+
+type MetadataProps = {
+  params: Params;
+};
+
+// 生成页面元数据（确保服务端/客户端翻译一致）
+export async function generateMetadata({
+  params,
+}: MetadataProps): Promise<Metadata> {
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: "Workshop" });
+
+  return constructMetadata({
+    page: "Workshop",
+    title: t("pageTitle", { defaultValue: "车间展示" }), // 使用 next-intl 官方的 defaultValue
+    description: t("pageDesc", { defaultValue: "公司车间展示" }),
+    locale: locale,
+    path: `/workshop`,
+    canonicalUrl: `/workshop`,
+  });
+}
+
+// 生成静态路由参数（多语言）
+export async function generateStaticParams() {
+  return LOCALES.map((locale) => ({
+    locale,
+  }));
+}
+
+// 空数据组件（纯静态，无动态属性）
+function EmptyState() {
+  return <div className="py-10 text-center text-gray-500">暂无车间数据</div>;
+}
+
+// 单个车间卡片组件（Client Component 标记，避免 Hydration 冲突）
+// 'use client'; // 仅当需要添加交互时启用，当前纯展示可不用
+
+function WorkshopCard({ workshop }: { workshop: WorkShop }) {
+  // 为 Image 组件添加默认值，避免属性缺失导致不匹配
+  const coverSrc = workshop.cover || "/default-workshop-cover.png"; // 兜底封面图
+  const coverAlt = workshop.title || "车间封面";
+
+  return (
+    <I18nLink
+      href={`/workshop/${workshop.slug}`}
+      locale={workshop.locale}
+    >
+      <div className="border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
+        {/* 封面图：优化属性，确保服务端/客户端渲染一致 */}
+        <div className="relative h-64 w-full">
+          <img
+            src={coverSrc}
+            alt={coverAlt}
+            sizes="100vw" // 简化 sizes，避免解析差异
+            className="object-cover"
+            // 显式设置属性，避免隐式差异
+            loading="lazy"
+          />
+        </div>
+
+        {/* 车间信息 */}
+        <div className="p-4">
+          <h2 className="text-xl font-bold mb-2">{workshop.title || "未命名车间"}</h2>
+          <p className="text-gray-600 mb-4">{workshop.desc || "暂无描述"}</p>
+        </div>
+      </div>
+    </I18nLink>
+  );
+}
+
+// 页面主组件（Server Component）
+export default async function Page({
+  params,
+}: {
+  params: Params;
+}) {
+  const { locale } = await params;
+  // 获取翻译（确保服务端/客户端一致）
+  const t = await getTranslations({ locale, namespace: "Workshop" });
+
+  // 获取车间数据（顶层 await，Server Component 原生支持）
+  const workShops: WorkShop[] = await getWorkShops(locale);
+
+  // 页面标题翻译兜底
+  const pageTitle = t("pageTitle", { defaultValue: "车间展示" });
+
+  return (
+    <main className="container mx-auto py-8 px-4">
+      {/* 页面标题（纯静态渲染，无动态属性） */}
+      <h1 className="text-3xl font-bold mb-8 text-center">{pageTitle}</h1>
+
+      {/* 移除不必要的 Suspense：Server Component 顶层 await 无需 Suspense */}
+      {workShops.length > 0 ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {workShops.map((workshop) => {
+            // 用稳定的 key（优先用唯一标识，如 id；无 id 则用 title+locale 避免 index 导致的问题）
+            const stableKey = `${workshop.title}-${workshop.locale}`;
+            return <WorkshopCard key={stableKey} workshop={workshop} />;
+          })}
+        </div>
+      ) : (
+        <EmptyState />
+      )}
+    </main>
+  );
+}