From 943c009ac6a6f513e247ecca6b996028f0740875 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 19 Aug 2023 17:46:28 +0800
Subject: [PATCH] fix plugin ui

---
 src/components/cards/PluginAppCard.vue | 6 +++++-
 src/components/cards/PluginCard.vue    | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/cards/PluginAppCard.vue b/src/components/cards/PluginAppCard.vue
index b7d05092..7330244a 100644
--- a/src/components/cards/PluginAppCard.vue
+++ b/src/components/cards/PluginAppCard.vue
@@ -16,6 +16,9 @@ const emit = defineEmits(['install'])
 // 提示框
 const $toast = useToast()
 
+// 图片是否加载完成
+const isImageLoaded = ref(false)
+
 // 安装插件
 async function installPlugin() {
   try {
@@ -51,12 +54,13 @@ async function installPlugin() {
     >
       <VAvatar
         size="128"
-        class="shadow"
+        :class="{ shadow: isImageLoaded }"
       >
         <VImg
           :src="`/plugin/${props.plugin?.plugin_icon}`"
           aspect-ratio="4/3"
           cover
+          @load="isImageLoaded = true"
         />
       </VAvatar>
     </div>
diff --git a/src/components/cards/PluginCard.vue b/src/components/cards/PluginCard.vue
index 564aa03c..57ea2f73 100644
--- a/src/components/cards/PluginCard.vue
+++ b/src/components/cards/PluginCard.vue
@@ -37,6 +37,9 @@ const pluginInfoDialog = ref(false)
 // 插件详情页面配置项
 let pluginPageItems = reactive([])
 
+// 图片是否加载完成
+const isImageLoaded = ref(false)
+
 // 调用API卸载插件
 async function uninstallPlugin() {
   try {
@@ -184,12 +187,13 @@ const dropdownItems = ref([
       </div>
       <VAvatar
         size="128"
-        class="shadow"
+        :class="{ shadow: isImageLoaded }"
       >
         <VImg
           :src="`/plugin/${props.plugin?.plugin_icon}`"
           aspect-ratio="4/3"
           cover
+          :class="{ shadow: isImageLoaded }"
         />
       </VAvatar>
     </div>