优化商品管理筛选功能

frontend/src/features/listings/views/ListingDetailView.vue

@@ -131,6 +131,7 @@ const detailScreenshots = computed(() => {
     url,
   }))
 })
+const detailScreenshotUrls = computed(() => detailScreenshots.value.map(shot => shot.url))
 
 function readGroupedScreenshots(item: Listing) {
   const groups = item.asset_summary?.screenshot_groups
@@ -462,8 +463,20 @@ function handleToggleFavorite() {
               <span>{{ detailScreenshots.length }} 张</span>
             </div>
             <div class="detail-screenshot-grid">
-              <figure v-for="shot in detailScreenshots" :key="shot.url" class="detail-screenshot">
-                <AuthImage :source="shot.url" :alt="shot.label" />
+              <figure
+                v-for="(shot, index) in detailScreenshots"
+                :key="shot.url"
+                class="detail-screenshot"
+              >
+                <AuthImage
+                  :source="shot.url"
+                  :alt="shot.label"
+                  image-class="detail-screenshot-image"
+                  fallback-class="detail-screenshot-image"
+                  fit="cover"
+                  :preview-src-list="detailScreenshotUrls"
+                  :preview-initial-index="index"
+                />
                 <figcaption>{{ shot.label }}</figcaption>
               </figure>
             </div>
@@ -908,12 +921,20 @@ function handleToggleFavorite() {
   margin: 0;
 }
 
-.detail-screenshot img {
+.detail-screenshot-image {
   width: 100%;
   aspect-ratio: 16 / 10;
-  object-fit: cover;
+  overflow: hidden;
   border-radius: 12px;
   border: 1px solid #edf0f4;
+  background: #f8fafc;
+  cursor: zoom-in;
+}
+
+.detail-screenshot-image :deep(.el-image__inner) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .detail-screenshot figcaption {
@@ -996,8 +1017,7 @@ function handleToggleFavorite() {
   margin-bottom: 0;
   border: 1px solid rgba(245, 158, 11, 0.2);
   background:
-    linear-gradient(135deg, rgba(255, 251, 235, 0.96), rgba(255, 247, 237, 0.92)),
-    #fffbeb;
+    linear-gradient(135deg, rgba(255, 251, 235, 0.96), rgba(255, 247, 237, 0.92)), #fffbeb;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
 }