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

.env.debug

@@ -0,0 +1,2 @@
+VITE_APM_STORE_LOCAL_MODE=true
+VITE_APM_STORE_BASE_URL=/local_amd64-apm

.env.production

@@ -0,0 +1 @@
+VITE_APM_STORE_BASE_URL=https://erotica.spark-app.store

package.json

@@ -20,11 +20,12 @@
   },
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --mode debug",
-    "build": "vue-tsc --noEmit && vite build && electron-builder",
+    "build": "vue-tsc --noEmit && vite build --mode production && electron-builder",
-    "preview": "vite preview"
+    "preview": "vite preview --mode debug"
   },
   "devDependencies": {
+    "@dotenvx/dotenvx": "^1.51.4",
     "@vitejs/plugin-vue": "^5.0.4",
     "electron": "^39.2.7",
     "electron-builder": "^24.13.3",

src/App.vue

@@ -264,9 +264,6 @@ const loadCategories = async () => {
   try {
     const response = await axiosInstance.get(`/${APM_STORE_ARCHITECTURE}/categories.json`);
     categories.value = response.data;
-    // const response = await fetch('/amd64-apm/categories.json');
-    // const data = await response.data
-    // categories.value = data;
   } catch (error) {
     console.error('读取 categories.json 失败', error);
   }

src/components/AppCard.vue

@@ -2,10 +2,11 @@
   <div class="card" @click="openDetail">
     <div class="icon">
       <img 
-        :data-src="iconPath" 
+        ref="iconImg"
-        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" 
+        :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(() => {
-  // 懒加载图片
+  // 创建 Intersection Observer
-  const lazyImage = document.querySelector('.lazy');
+  observer = new IntersectionObserver(
-  if (window.observer && lazyImage) {
+    (entries) => {
-    window.observer.observe(lazyImage);
+      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 = () => {

src/global/StoreConfig.ts

@@ -1,2 +1,2 @@
-export const APM_STORE_BASE_URL='https://erotica.spark-app.store/';
+export const APM_STORE_BASE_URL=import.meta.env.VITE_APM_STORE_BASE_URL;
 export const APM_STORE_ARCHITECTURE='amd64-apm';

vite.config.flat.txt

@@ -1,76 +0,0 @@
-import { rmSync } from 'node:fs'
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import electron from 'vite-plugin-electron'
-import renderer from 'vite-plugin-electron-renderer'
-import pkg from './package.json'
-
-// https://vitejs.dev/config/
-export default defineConfig(({ command }) => {
-  rmSync('dist-electron', { recursive: true, force: true })
-
-  const isServe = command === 'serve'
-  const isBuild = command === 'build'
-  const sourcemap = isServe || !!process.env.VSCODE_DEBUG
-
-  return {
-    plugins: [
-      vue(),
-      electron([
-        {
-          // Main process entry file of the Electron App.
-          entry: 'electron/main/index.ts',
-          onstart({ startup }) {
-            if (process.env.VSCODE_DEBUG) {
-              console.log(/* For `.vscode/.debug.script.mjs` */'[startup] Electron App')
-            } else {
-              startup()
-            }
-          },
-          vite: {
-            build: {
-              sourcemap,
-              minify: isBuild,
-              outDir: 'dist-electron/main',
-              rollupOptions: {
-                // Some third-party Node.js libraries may not be built correctly by Vite, especially `C/C++` addons, 
-                // we can use `external` to exclude them to ensure they work correctly.
-                // Others need to put them in `dependencies` to ensure they are collected into `app.asar` after the app is built.
-                // Of course, this is not absolute, just this way is relatively simple. :)
-                external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}),
-              },
-            },
-          },
-        },
-        {
-          entry: 'electron/preload/index.ts',
-          onstart({ reload }) {
-            // Notify the Renderer process to reload the page when the Preload scripts build is complete, 
-            // instead of restarting the entire Electron App.
-            reload()
-          },
-          vite: {
-            build: {
-              sourcemap: sourcemap ? 'inline' : undefined, // #332
-              minify: isBuild,
-              outDir: 'dist-electron/preload',
-              rollupOptions: {
-                external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}),
-              },
-            },
-          },
-        }
-      ]),
-      // Use Node.js API in the Renderer process
-      renderer(),
-    ],
-    server: process.env.VSCODE_DEBUG && (() => {
-      const url = new URL(pkg.debug.env.VITE_DEV_SERVER_URL)
-      return {
-        host: url.hostname,
-        port: +url.port,
-      }
-    })(),
-    clearScreen: false,
-  }
-})

vite.config.ts

@@ -62,13 +62,33 @@ export default defineConfig(({ command }) => {
         renderer: {},
       }),
     ],
-    server: process.env.VSCODE_DEBUG && (() => {
+    server: (() => {
-      const url = new URL(pkg.debug.env.VITE_DEV_SERVER_URL)
+      if (process.env.VSCODE_DEBUG) {
+        const url = new URL(pkg.debug.env.VITE_DEV_SERVER_URL);
         return {
           host: url.hostname,
           port: +url.port,
+          proxy: {
+            '/local_amd64-apm': {
+              target: 'https://erotica.spark-app.store',
+              changeOrigin: true,
+              rewrite: (path) => path.replace(/^\/local_amd64-apm/, ''),
             }
-    })(),
+          }
+        }
+      } else {
+        return {
+          proxy: {
+            '/local_amd64-apm': {
+              target: 'https://erotica.spark-app.store',
+              changeOrigin: true,
+              rewrite: (path) => path.replace(/^\/local_amd64-apm/, ''),
+            }
+          }
+        }
+      }
+    }
+    )(),
     clearScreen: false, 
   }
 })