From 4f47c15d4f5ca02fad4c0c425edf3e29539f4f6f Mon Sep 17 00:00:00 2001
From: admin <admin@viaeon.com>
Date: Wed, 10 Jun 2026 22:26:38 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=81=A2=E5=A4=8D=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E5=9B=BE=E7=89=87=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?,=E4=BD=BF=E7=94=A8scale-down=E7=A1=AE=E4=BF=9D=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E5=AE=8C=E6=95=B4=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/views/user/ProductDetail.vue | 137 ++++++----------------
 1 file changed, 36 insertions(+), 101 deletions(-)

diff --git a/frontend/src/views/user/ProductDetail.vue b/frontend/src/views/user/ProductDetail.vue
index 14255e1..85f85ec 100644
--- a/frontend/src/views/user/ProductDetail.vue
+++ b/frontend/src/views/user/ProductDetail.vue
@@ -5,39 +5,26 @@
       <el-row :gutter="32">
         <el-col :span="12">
           <div class="product-images">
-            <!-- 主图显示 -->
-            <div class="main-image-wrap">
-              <el-image
-                :src="currentImage"
-                fit="contain"
-                class="main-image"
-                :preview-src-list="productImages"
-                :initial-index="currentImageIndex"
-                :z-index="9999"
-              >
-                <template #error>
-                  <div class="image-placeholder">
-                    <el-icon size="80"><Goods /></el-icon>
-                  </div>
-                </template>
-              </el-image>
-            </div>
-            <!-- 缩略图列表 -->
-            <div class="thumbnail-list" v-if="productImages.length > 1">
-              <div
-                v-for="(img, index) in productImages"
-                :key="index"
-                class="thumbnail-item"
-                :class="{ active: currentImageIndex === index }"
-                @click="currentImageIndex = index"
-              >
-                <el-image :src="img" fit="cover" class="thumbnail-image" />
-              </div>
-            </div>
-            <!-- 单图提示 -->
-            <div class="image-tip" v-if="productImages.length > 0">
-              <el-icon><ZoomIn /></el-icon>
-              <span>点击图片放大查看</span>
+            <el-carousel v-if="productImages.length > 1" height="400px" :autoplay="false" indicator-position="outside">
+              <el-carousel-item v-for="(img, index) in productImages" :key="index">
+                <el-image :src="img" fit="scale-down" class="carousel-image" :preview-src-list="productImages" :initial-index="index">
+                  <template #error>
+                    <div class="image-placeholder">
+                      <el-icon size="80"><Goods /></el-icon>
+                    </div>
+                  </template>
+                </el-image>
+              </el-carousel-item>
+            </el-carousel>
+            <el-image v-else-if="productImages.length === 1" :src="productImages[0]" fit="scale-down" class="single-image" :preview-src-list="productImages">
+              <template #error>
+                <div class="image-placeholder">
+                  <el-icon size="80"><Goods /></el-icon>
+                </div>
+              </template>
+            </el-image>
+            <div v-else class="image-placeholder empty">
+              <el-icon size="80"><Goods /></el-icon>
             </div>
           </div>
         </el-col>
@@ -78,7 +65,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { Goods, ZoomIn } from '@element-plus/icons-vue'
+import { Goods } from '@element-plus/icons-vue'
 import { productApi, userApi } from '../../api'
 import { useCartStore } from '../../store/cart'
 import { useI18n } from 'vue-i18n'
@@ -92,17 +79,12 @@ const cartStore = useCartStore()
 const product = ref<any>(null)
 const quantity = ref(1)
 const userCredits = ref(0)
-const currentImageIndex = ref(0)
 
 const productImages = computed(() => {
   if (!product.value?.images) return []
   return product.value.images.split(',').map((s: string) => s.trim()).filter(Boolean).map((url: string) => getImageUrl(url))
 })
 
-const currentImage = computed(() => {
-  return productImages.value[currentImageIndex.value] || ''
-})
-
 // 检查用户是否有足够资格购买
 function hasEnoughCredit(): boolean {
   if (!product.value || !product.value.require_credit) return true
@@ -157,68 +139,18 @@ function buyNow() {
 .product-detail-page { padding: 0; }
 .detail-card { background: #2d2d44; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 32px; }
 .product-images {
+  height: 400px;
   background: rgba(255, 255, 255, 0.04);
   border-radius: 12px;
   overflow: hidden;
 
-  .main-image-wrap {
+  .carousel-image, .single-image {
+    width: 100%;
     height: 400px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-
-    .main-image {
-      max-width: 100%;
-      max-height: 100%;
-    }
-  }
-
-  .thumbnail-list {
-    display: flex;
-    gap: 8px;
-    padding: 12px;
-    background: rgba(0, 0, 0, 0.2);
-
-    .thumbnail-item {
-      width: 60px;
-      height: 60px;
-      border-radius: 6px;
-      overflow: hidden;
-      cursor: pointer;
-      border: 2px solid transparent;
-      transition: all 0.2s;
-      opacity: 0.6;
-
-      &:hover {
-        opacity: 0.9;
-      }
-
-      &.active {
-        border-color: #4e6ef2;
-        opacity: 1;
-      }
-
-      .thumbnail-image {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-
-  .image-tip {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    padding: 8px;
-    background: rgba(0, 0, 0, 0.3);
-    color: rgba(255, 255, 255, 0.5);
-    font-size: 12px;
-
-    .el-icon {
-      font-size: 14px;
-    }
   }
 
   .image-placeholder {
@@ -230,6 +162,10 @@ function buyNow() {
     background: rgba(255, 255, 255, 0.04);
     color: rgba(255, 255, 255, 0.2);
   }
+
+  .image-placeholder.empty {
+    height: 400px;
+  }
 }
 h1 { font-size: 28px; color: #fff; margin-bottom: 16px; }
 .price { font-size: 32px; font-weight: 700; color: #4e6ef2; margin-bottom: 16px; }
@@ -277,16 +213,15 @@ h1 { font-size: 28px; color: #fff; margin-bottom: 16px; }
   }
 
   .product-images {
-    .main-image-wrap {
-      height: 300px;
-    }
+    height: 300px;
+  }
 
-    .thumbnail-list {
-      .thumbnail-item {
-        width: 50px;
-        height: 50px;
-      }
-    }
+  .carousel-image, .single-image {
+    height: 300px;
+  }
+
+  .image-placeholder {
+    height: 300px;
   }
 
   h1 {