From ccd87d06be667cd45cc0a7e8fc9b195305b6da2d Mon Sep 17 00:00:00 2001
From: AdingApkgg <AdingApkgg@outlook.com>
Date: Sat, 27 Dec 2025 07:00:22 +0800
Subject: [PATCH] Enhance image loading and refactor screenshot handling in
 VndbPanel.vue

- Added `referrerpolicy="no-referrer"` to image elements to improve privacy during image loading.
- Removed unused `screenshotsReady` state and related logic, simplifying the component's state management.
- Updated class names for consistency and improved styling of screenshot buttons.
- Cleaned up comments for better clarity regarding screenshot loading behavior.
---
 src/components/VndbPanel.vue | 39 +++++++-----------------------------
 1 file changed, 7 insertions(+), 32 deletions(-)

diff --git a/src/components/VndbPanel.vue b/src/components/VndbPanel.vue
index 13b4248..cb8ffc0 100644
--- a/src/components/VndbPanel.vue
+++ b/src/components/VndbPanel.vue
@@ -97,6 +97,7 @@
                     :alt="searchStore.vndbInfo.mainName"
                     class="w-full h-auto rounded-2xl shadow-lg cursor-pointer hover:opacity-90 hover:scale-[1.02] transition-all"
                     loading="lazy"
+                    referrerpolicy="no-referrer"
                     @error="handleImageError"
                   />
                 </button>
@@ -377,6 +378,7 @@
                         :alt="char.name"
                         class="absolute inset-0 w-full h-full object-cover"
                         loading="lazy"
+                        referrerpolicy="no-referrer"
                         @load="($event.target as HTMLElement).parentElement?.querySelector('.skeleton')?.classList.add('hidden')"
                       />
                     </template>
@@ -513,10 +515,9 @@
               </div>
             </div>
 
-            <!-- 游戏截图 (等待首张图片加载后显示) -->
+            <!-- 游戏截图 -->
             <div 
               v-if="searchStore.vndbInfo.screenshots && searchStore.vndbInfo.screenshots.length > 0" 
-              v-show="screenshotsReady"
               class="vndb-card"
             >
               <div class="flex items-center gap-2 mb-4">
@@ -527,14 +528,15 @@
                 <button
                   v-for="(screenshot, index) in searchStore.vndbInfo.screenshots"
                   :key="index"
-                  class="group block overflow-hidden rounded-xl hover:scale-[1.02] transition-transform"
+                  class="group block overflow-hidden rounded-xl hover:scale-[1.02] transition-transform bg-gray-100 dark:bg-slate-700"
                   @click="openGallery(index + 1)"
                 >
                   <img
                     :src="screenshot"
                     :alt="`${searchStore.vndbInfo.mainName} 截图 ${index + 1}`"
                     class="w-full h-auto cursor-pointer group-hover:scale-105 transition-transform duration-300"
-                    @load="screenshotsReady = true"
+                    loading="lazy"
+                    referrerpolicy="no-referrer"
                     @error="handleImageError"
                   />
                 </button>
@@ -548,7 +550,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed, nextTick } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { useSearchStore, type VndbCharacter, type VndbQuote } from '@/stores/search'
 import { useUIStore } from '@/stores/ui'
 import { translateAllContent, fetchVndbCharacters, fetchVndbQuotes, fetchGameVideoUrl } from '@/api/search'
@@ -617,8 +619,6 @@ const hasAnyTranslation = computed(() =>
   translatedDescription.value || translatedTags.value.size > 0 || translatedQuotes.value.size > 0,
 )
 
-// 截图加载状态
-const screenshotsReady = ref(false)
 
 // PV 视频状态
 const pvVideoUrl = ref<string | null>(null)
@@ -680,8 +680,6 @@ watch(() => searchStore.vndbInfo, async (newInfo) => {
   translateQuotesError.value = false
   // 重置一键翻译状态
   isTranslatingAllRef.value = false
-  // 重置截图加载状态
-  screenshotsReady.value = false
   // 重置角色和名言
   characters.value = []
   quotes.value = []
@@ -698,7 +696,6 @@ watch(() => searchStore.vndbInfo, async (newInfo) => {
   
   // 先捕获游戏 ID，用于后续竞态检查
   const vnIdAtStart = newInfo?.id || null
-  const vnIdForScreenshots = newInfo?.id
   
   // 更新当前游戏 ID
   currentVnId.value = vnIdAtStart
@@ -713,28 +710,6 @@ watch(() => searchStore.vndbInfo, async (newInfo) => {
       }
     })
   }
-  
-  // 检查缓存的截图是否已加载
-  if (newInfo?.screenshots && newInfo.screenshots.length > 0) {
-    nextTick(() => {
-      requestAnimationFrame(() => {
-        // 竞态检查：如果用户已切换到其他游戏，跳过处理
-        if (vnIdForScreenshots && currentVnId.value !== vnIdForScreenshots) {
-          return
-        }
-        const screenshotImgs = modalRef.value?.querySelectorAll('img[alt*="截图"]')
-        if (screenshotImgs) {
-          for (let i = 0; i < screenshotImgs.length; i++) {
-            const img = screenshotImgs[i] as HTMLImageElement
-            if (img.complete && img.naturalHeight > 0) {
-              screenshotsReady.value = true
-              break
-            }
-          }
-        }
-      })
-    })
-  }
 }, { immediate: true })
 
 // 加载角色、名言和 PV 视频