From 749cf3d3bf59d0b70d48256369f358d5940da510 Mon Sep 17 00:00:00 2001
From: momen <vmomenv@gmail.com>
Date: Fri, 27 Feb 2026 23:25:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=BC=95=E5=85=A5=E6=87=92=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=EF=BC=8C=E9=98=B2=E6=AD=A2=E5=BC=B1=E7=BD=91=E6=83=85?=
 =?UTF-8?q?=E5=86=B5=E4=B8=8B=E6=97=A0=E6=B3=95=E6=AD=A3=E5=B8=B8=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E5=BA=94=E7=94=A8=E5=9B=BE=E6=A0=87=E6=88=96=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                       |  6 +-----
 src/components/AppDetailModal.vue | 27 ++++++++++++++++++++-------
 src/components/HomeView.vue       |  6 +++++-
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 077924e0..c4937498 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -349,11 +349,7 @@ const loadScreenshots = (app: App) => {
   screenshots.value = [];
   for (let i = 1; i <= 5; i++) {
     const screenshotUrl = `${APM_STORE_BASE_URL}/${window.apm_store.arch}/${app.category}/${app.pkgname}/screen_${i}.png`;
-    const img = new Image();
-    img.src = screenshotUrl;
-    img.onload = () => {
-      screenshots.value.push(screenshotUrl);
-    };
+    screenshots.value.push(screenshotUrl);
   }
 };
 
diff --git a/src/components/AppDetailModal.vue b/src/components/AppDetailModal.vue
index 7017bd67..ff578346 100644
--- a/src/components/AppDetailModal.vue
+++ b/src/components/AppDetailModal.vue
@@ -21,12 +21,15 @@
             <div
               class="flex h-20 w-20 items-center justify-center overflow-hidden rounded-3xl bg-gradient-to-b from-slate-100 to-slate-200 shadow-inner dark:from-slate-800 dark:to-slate-700"
             >
-              <img
-                v-if="app"
-                :src="iconPath"
-                alt="icon"
-                class="h-full w-full object-cover"
-              />
+                <img
+                  v-if="app"
+                  :src="iconPath"
+                  alt="icon"
+                  class="h-full w-full object-cover transition-opacity duration-300"
+                  :class="isIconLoaded ? 'opacity-100' : 'opacity-0'"
+                  loading="lazy"
+                  @load="isIconLoaded = true"
+                />
             </div>
             <div class="space-y-1">
               <div class="flex items-center gap-3">
@@ -108,7 +111,8 @@
             :key="index"
             :src="screen"
             alt="screenshot"
-            class="h-40 w-full cursor-pointer rounded-2xl border border-slate-200/60 object-cover shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:border-slate-800/60"
+            class="h-40 w-full cursor-pointer rounded-2xl border border-slate-200/60 object-cover shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg dark:border-slate-800/60"
+            loading="lazy"
             @click="openPreview(index)"
             @error="hideImage"
           />
@@ -229,6 +233,15 @@ const emit = defineEmits<{
 
 const appPkgname = computed(() => props.app?.pkgname);
 
+const isIconLoaded = ref(false);
+
+watch(
+  () => props.app,
+  () => {
+    isIconLoaded.value = false;
+  },
+);
+
 const activeDownload = computed(() => {
   return downloads.value.find((d) => d.pkgname === props.app?.pkgname);
 });
diff --git a/src/components/HomeView.vue b/src/components/HomeView.vue
index 668b3e53..ba95fd96 100644
--- a/src/components/HomeView.vue
+++ b/src/components/HomeView.vue
@@ -12,7 +12,11 @@
           class="flex flex-col items-start gap-2 rounded-2xl border border-slate-200/70 bg-white/90 p-4 shadow-sm hover:shadow-lg transition"
           :title="link.more"
         >
-          <img :src="computedImgUrl(link.imgUrl)" class="h-20 w-full object-contain" />
+          <img
+            :src="computedImgUrl(link.imgUrl)"
+            class="h-20 w-full object-contain"
+            loading="lazy"
+          />
           <div class="text-base font-semibold text-slate-900">{{ link.name }}</div>
           <div class="text-sm text-slate-500">{{ link.more }}</div>
         </a>