feat(ui): 更新车间和产品页面UI设计并添加新图片资源

更新多个页面的UI设计，包括产品卡片、车间详情页和列表页，采用现代化卡片设计和动画效果
添加新的车间图片资源并更新相关页面的图片引用路径
优化响应式布局和交互体验，增强视觉吸引力

app/[locale]/workshop/page.tsx

@@ -2,13 +2,14 @@ import { Link as I18nLink, LOCALES } from "@/i18n/routing";
 import { constructMetadata } from "@/lib/metadata";
 import { getWorkShops } from "@/lib/workshop";
 import { WorkShop } from "@/types/workShop";
+import clsx from "clsx";
 import { Metadata } from "next";
 import { getTranslations } from "next-intl/server";
 
 // 强制静态生成
 export const dynamic = "force-static";
 
-// 明确 Params 类型（静态生成的参数）
+// 明确 Params 类型（静态生成的参数） 
 type Params = { locale: string };
 
 type MetadataProps = {
@@ -16,9 +17,7 @@ type MetadataProps = {
 };
 
 // 生成页面元数据（确保服务端/客户端翻译一致）
-export async function generateMetadata({
-  params,
-}: MetadataProps): Promise<Metadata> {
+export async function generateMetadata({ params }: MetadataProps): Promise<Metadata> {
   const { locale } = params;
   const t = await getTranslations({ locale, namespace: "Workshop" });
 
@@ -44,35 +43,27 @@ function EmptyState() {
   return <div className="py-10 text-center text-gray-500">暂无车间数据</div>;
 }
 
-// 单个车间卡片组件（Client Component 标记，避免 Hydration 冲突）
-// 'use client'; // 仅当需要添加交互时启用，当前纯展示可不用
-
 function WorkshopCard({ workshop }: { workshop: WorkShop }) {
-  // 为 Image 组件添加默认值，避免属性缺失导致不匹配
+  // 为 img 标签添加默认值，避免属性缺失导致不匹配
   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">
-        {/* 封面图：优化属性，确保服务端/客户端渲染一致 */}
+    <I18nLink href={`/workshop/${workshop.slug}`} locale={workshop.locale}>
+      <div className="border rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-shadow">
+        {/* 封面图：使用原生 img 标签，确保图片尺寸一致 */}
         <div className="relative h-64 w-full">
           <img
             src={coverSrc}
             alt={coverAlt}
-            sizes="100vw" // 简化 sizes，避免解析差异
-            className="object-cover"
-            // 显式设置属性，避免隐式差异
+            className="object-cover w-full h-full"
             loading="lazy"
           />
         </div>
 
         {/* 车间信息 */}
-        <div className="p-4">
-          <h2 className="text-xl font-bold mb-2">{workshop.title || "未命名车间"}</h2>
+        <div className="p-6 bg-white">
+          <h2 className="text-2xl font-semibold mb-2 text-gray-800">{workshop.title || "未命名车间"}</h2>
           <p className="text-gray-600 mb-4">{workshop.desc || "暂无描述"}</p>
         </div>
       </div>
@@ -81,11 +72,7 @@ function WorkshopCard({ workshop }: { workshop: WorkShop }) {
 }
 
 // 页面主组件（Server Component）
-export default async function Page({
-  params,
-}: {
-  params: Params;
-}) {
+export default async function Page({ params }: { params: Params }) {
   const { locale } = await params;
   // 获取翻译（确保服务端/客户端一致）
   const t = await getTranslations({ locale, namespace: "Workshop" });
@@ -97,22 +84,21 @@ export default async function Page({
   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>
+    <main className="container mx-auto py-16 px-6 max-w-screen-xl">
+      {/* 页面标题 */}
+      <h1 className="text-4xl font-extrabold text-center text-gray-900 mb-12">{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 导致的问题）
+      {/* 展示车间卡片 */}
+      <div className={clsx("grid gap-8", workShops.length ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" : "")}>
+        {workShops.length > 0 ? (
+          workShops.map((workshop) => {
             const stableKey = `${workshop.title}-${workshop.locale}`;
             return <WorkshopCard key={stableKey} workshop={workshop} />;
-          })}
-        </div>
-      ) : (
-        <EmptyState />
-      )}
+          })
+        ) : (
+          <EmptyState />
+        )}
+      </div>
     </main>
   );
-}
+}