From 228390194efad27b0053fbe3ccfc32ba4e6d4b35 Mon Sep 17 00:00:00 2001
From: AdingApkgg <AdingApkgg@outlook.com>
Date: Fri, 26 Dec 2025 19:12:01 +0800
Subject: [PATCH] Refactor image loading and placeholder logic in VndbPanel.vue

- Updated the structure for image loading to improve clarity and maintainability.
- Introduced a template for conditional rendering of images and skeleton loading.
- Enhanced the placeholder display for characters without images for better user experience.
---
 src/components/VndbPanel.vue | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/VndbPanel.vue b/src/components/VndbPanel.vue
index d8e3cde..bc9dcfd 100644
--- a/src/components/VndbPanel.vue
+++ b/src/components/VndbPanel.vue
@@ -391,16 +391,20 @@
                 >
                   <!-- 图片区域 -->
                   <div class="w-full relative">
-                    <!-- 骨架屏占位 (padding-bottom: 133.33% = 3:4 比例) -->
-                    <div class="w-full pb-[133.33%] skeleton bg-rose-100 dark:bg-rose-900/30" />
-                    <img 
-                      v-if="char.image" 
-                      :src="char.image" 
-                      :alt="char.name"
-                      class="absolute inset-0 w-full h-full object-cover"
-                      loading="lazy"
-                      @load="($event.target as HTMLElement).parentElement?.querySelector('.skeleton')?.classList.add('hidden')"
-                    />
+                    <!-- 占位 (padding-bottom: 133.33% = 3:4 比例) -->
+                    <div class="w-full pb-[133.33%]" />
+                    <!-- 有图片时：骨架屏 + 图片 -->
+                    <template v-if="char.image">
+                      <div class="absolute inset-0 skeleton bg-rose-100 dark:bg-rose-900/30" />
+                      <img 
+                        :src="char.image" 
+                        :alt="char.name"
+                        class="absolute inset-0 w-full h-full object-cover"
+                        loading="lazy"
+                        @load="($event.target as HTMLElement).parentElement?.querySelector('.skeleton')?.classList.add('hidden')"
+                      />
+                    </template>
+                    <!-- 无图片时：占位符 -->
                     <div v-else class="absolute inset-0 flex items-center justify-center bg-rose-50 dark:bg-rose-900/30">
                       <Users :size="24" class="text-rose-400 dark:text-rose-600" />
                     </div>