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

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

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

@@ -46,48 +46,47 @@ export async function generateMetadata({
 
 // 页面主组件 - 仅保留字段展示+修复 Hydration 错误
 export default async function ProductDetailPage({ params }: { params: Params }) {
-  // 🔴 修复：params 是同步对象，移除不必要的 await
   const { locale, slug } = await params;
   const line = await getLine(locale, slug);
 
   if (!line) return <div className="p-6">404 - 产线不存在</div>;
 
   return (
-    <div className="product-detail max-w-5xl mx-auto p-6 md:p-8">
-      {/* 标题 */}
-      <h1 className="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
-        {line.title}
-      </h1>
-
-      {/* 产品描述 */}
-      <p className="text-gray-700 text-lg mb-8 leading-relaxed">
-        {line.desc}
-      </p>
-
-      {/* 封面图 */}
-      {line.cover && (
-        <div className="mb-8 rounded-lg overflow-hidden shadow-md">
-          <img
-            src={line.cover}
-            alt={`${line.title} - 封面`}
-            className="w-full h-auto object-cover"
-            loading="lazy"
-          />
+    <div className="product-detail max-w-7xl mx-auto p-6 md:p-8">
+      {/* 标题和描述区域，分为左右布局 */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
+        {/* 左侧：标题和描述 */}
+        <div>
+          <h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
+            {line.title}
+          </h1>
+          <p className="text-gray-700 text-lg md:text-xl mb-8 leading-relaxed">
+            {line.desc}
+          </p>
         </div>
-      )}
 
-      {/* 产品图片列表 */}
+        {/* 右侧：封面图 */}
+        {line.cover && (
+          <div className="relative rounded-lg overflow-hidden shadow-lg">
+            <img
+              src={line.cover}
+              alt={`${line.title} - 封面`}
+              className="w-full h-auto object-cover transition-transform duration-300 hover:scale-105"
+              loading="lazy"
+            />
+          </div>
+        )}
+      </div>
+
+      {/* 产品图片列表区域 */}
       {line.images && line.images.length > 0 && (
-        <div className="mb-8">
-          <h2 className="text-2xl md:text-3xl font-semibold text-gray-800 mb-4">
+        <div className="mb-12">
+          <h2 className="text-2xl md:text-3xl font-semibold text-gray-800 mb-6">
             产品图片
           </h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
             {line.images.map((imgUrl, index) => (
-              <div
-                key={index}
-                className="rounded-lg overflow-hidden shadow-sm"
-              >
+              <div key={index} className="rounded-xl overflow-hidden shadow-md transition-all duration-300 hover:shadow-xl">
                 <img
                   src={imgUrl}
                   alt={`${line.title} - 图片${index + 1}`}
@@ -100,17 +99,17 @@ export default async function ProductDetailPage({ params }: { params: Params })
         </div>
       )}
 
-      {/* 产品特性/参数 */}
+      {/* 产品特性/参数区域 */}
       {line.properties && line.properties.length > 0 && (
-        <div className="mb-4">
-          <h2 className="text-2xl md:text-3xl font-semibold text-gray-800 mb-4">
+        <div className="mb-12">
+          <h2 className="text-2xl md:text-3xl font-semibold text-gray-800 mb-6">
             产品参数
           </h2>
-          <ul className="space-y-3">
+          <ul className="space-y-4">
             {line.properties.map((prop, index) => (
               <li
                 key={index}
-                className="p-4 bg-gray-50 rounded-lg text-gray-700"
+                className="p-6 bg-gray-50 rounded-lg shadow-sm hover:shadow-lg transition-all duration-200"
               >
                 {/* 处理参数中的换行符 \n */}
                 <span
@@ -142,4 +141,4 @@ export async function generateStaticParams() {
     console.error("生成产线静态参数失败:", error);
     return [];
   }
-}
+}