添加环境配置文件，更新 Vite 配置以支持本地代理，优化 AppCard 组件的懒加载逻辑

src/components/AppCard.vue

@@ -2,10 +2,11 @@
   <div class="card" @click="openDetail">
     <div class="icon">
       <img 
-        :data-src="iconPath" 
-        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%23f0f3f8'/%3E%3C/svg%3E" 
+        ref="iconImg"
+        :src="loadedIcon" 
         alt="icon" 
         class="lazy"
+        :class="{ 'loaded': isLoaded }"
       >
     </div>
     <div class="meta">
@@ -19,7 +20,8 @@
 </template>
 
 <script setup>
-import { computed, defineProps, defineEmits, onMounted } from 'vue';
+import { computed, defineProps, defineEmits, onMounted, onBeforeUnmount, ref } from 'vue';
+import { APM_STORE_ARCHITECTURE, APM_STORE_BASE_URL } from '../global/StoreConfig';
 
 const props = defineProps({
   app: {
@@ -30,8 +32,12 @@ const props = defineProps({
 
 const emit = defineEmits(['open-detail']);
 
+const iconImg = ref(null);
+const isLoaded = ref(false);
+const loadedIcon = ref('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Crect fill="%23f0f0f0" width="100" height="100"/%3E%3C/svg%3E');
+
 const iconPath = computed(() => {
-  return `./${props.app._category}/${props.app.Pkgname}/icon.png`;
+  return `${APM_STORE_BASE_URL}/${APM_STORE_ARCHITECTURE}/${props.app._category}/${props.app.Pkgname}/icon.png`;
 });
 
 const description = computed(() => {
@@ -43,15 +49,61 @@ const openDetail = () => {
   emit('open-detail', props.app);
 };
 
+let observer = null;
+
 onMounted(() => {
-  // 懒加载图片
-  const lazyImage = document.querySelector('.lazy');
-  if (window.observer && lazyImage) {
-    window.observer.observe(lazyImage);
+  // 创建 Intersection Observer
+  observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting && !isLoaded.value) {
+          // 图片进入视口，开始加载
+          const img = new Image();
+          img.onload = () => {
+            loadedIcon.value = iconPath.value;
+            isLoaded.value = true;
+            observer.unobserve(entry.target);
+          };
+          img.onerror = () => {
+            // 加载失败时使用默认图标
+            loadedIcon.value = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Crect fill="%23e0e0e0" width="100" height="100"/%3E%3Ctext x="50" y="50" text-anchor="middle" dy=".3em" fill="%23999" font-size="14"%3ENo Icon%3C/text%3E%3C/svg%3E';
+            isLoaded.value = true;
+            observer.unobserve(entry.target);
+          };
+          img.src = iconPath.value;
+        }
+      });
+    },
+    {
+      rootMargin: '50px', // 提前50px开始加载
+      threshold: 0.01
+    }
+  );
+
+  // 观察图标元素
+  if (iconImg.value) {
+    observer.observe(iconImg.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  // 清理 observer
+  if (observer && iconImg.value) {
+    observer.unobserve(iconImg.value);
   }
 });
 </script>
 
 <style scoped>
 /* 该组件样式已在全局样式中定义 */
+
+/* 懒加载过渡效果 */
+.lazy {
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.lazy.loaded {
+  opacity: 1;
+}
 </style>

src/components/AppDetailModal.vue

@@ -81,7 +81,7 @@
 
 <script setup>
 import { computed, defineProps, defineEmits } from 'vue';
-import { APM_STORE_BASE_URL } from '../global/StoreConfig';
+import { APM_STORE_ARCHITECTURE, APM_STORE_BASE_URL } from '../global/StoreConfig';
 
 const props = defineProps({
   show: {
@@ -101,7 +101,7 @@ const props = defineProps({
 const emit = defineEmits(['close', 'install', 'open-preview']);
 
 const iconPath = computed(() => {
-  return props.app ? `${APM_STORE_BASE_URL}/${props.app._category}/${props.app.Pkgname}/icon.png` : '';
+  return props.app ? `${APM_STORE_BASE_URL}/${APM_STORE_ARCHITECTURE}/${props.app._category}/${props.app.Pkgname}/icon.png` : '';
 });
 
 const closeModal = () => {