feat(products): 核心产品组件添加点击跳转和布局优化

- 为产品卡片添加最小高度样式确保布局一致性
- 将产品卡片包装在链接中实现点击跳转到产品详情页
- 调整产品卡片样式移除固定高度并添加指针光标
- 优化产品图片容器样式改为全宽并添加圆角背景
- 更新图片属性使用响应式尺寸和悬停缩放效果
- 修改图片alt属性为产品名称并调整尺寸参数

src/components/CoreProducts.tsx

@@ -53,7 +53,7 @@ export default function CoreProducts({products}: ProductMenuProps) {
   }, [products, activeTab])
 
   return (
-    <section className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <section className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 min-h-150">
       <div className="flex justify-end mb-5 sm:mb-8">
         <Link
           href="/products"
@@ -85,9 +85,10 @@ export default function CoreProducts({products}: ProductMenuProps) {
 
       <div className="mt-4 sm:mt-6 grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6">
         {showProducts.map((product) => (
-          <div
+          <Link
             key={product.productId}
-            className="group rounded-xl border border-gray-200 bg-white p-4 sm:p-6 h-80 sm:h-96 flex flex-col items-center text-center justify-between shadow-sm hover:shadow-md transition-shadow duration-300"
+            href={`/products/${product.productId}`}
+            className="group rounded-xl border border-gray-200 bg-white p-4 sm:p-6 flex flex-col items-center text-center justify-between shadow-sm hover:shadow-md transition-shadow duration-300 cursor-pointer"
           >
             <h3 className="shuheiti text-sm sm:text-xl text-gray-900 line-clamp-1">
               {product.productName}
@@ -95,14 +96,14 @@ export default function CoreProducts({products}: ProductMenuProps) {
             <p className="mt-1 text-xs sm:text-sm text-gray-500 w-full">
               <span className="text-blue-800 font-bold line-clamp-2">{product.productIntroduction}</span>
             </p>
-            {/* 产品图片 */}
-            <div className="mt-3 sm:mt-5 w-24 h-24 sm:w-40 sm:h-40 flex items-center justify-center">
+            <div className="mt-3 sm:mt-5 w-full overflow-hidden rounded-lg bg-gray-50">
               <Image
                 src={product.productUrl ? BASE_URL + product.productUrl : "/assets/productions/2.png"}
-                alt={product.productType}
-                width={160}
-                height={160}
-                className="object-contain scale-105 transition-transform duration-300"
+                alt={product.productName}
+                width={1000}
+                height={1000}
+                sizes="(max-width: 640px) 50vw, 25vw"
+                className="w-full h-auto object-contain p-2 transition-transform duration-300 group-hover:scale-105"
               />
             </div>
             <div className="mt-3 sm:mt-5 w-full flex flex-col items-center gap-1">
@@ -113,7 +114,7 @@ export default function CoreProducts({products}: ProductMenuProps) {
                                 {product.productModel}
                             </span>
             </div>
-          </div>
+          </Link>
         ))}
       </div>
     </section>