From 0d164343747eab4bfae3a9669aa1e3fe7275f34b Mon Sep 17 00:00:00 2001
From: Elysia <a.elysia@proton.me>
Date: Sat, 17 Jan 2026 21:00:21 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=8E=AF=E5=A2=83=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E6=96=87=E4=BB=B6=EF=BC=8C=E6=9B=B4=E6=96=B0=20Vite?=
 =?UTF-8?q?=20=E9=85=8D=E7=BD=AE=E4=BB=A5=E6=94=AF=E6=8C=81=E6=9C=AC?=
 =?UTF-8?q?=E5=9C=B0=E4=BB=A3=E7=90=86=EF=BC=8C=E4=BC=98=E5=8C=96=20AppCar?=
 =?UTF-8?q?d=20=E7=BB=84=E4=BB=B6=E7=9A=84=E6=87=92=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.debug                        |  2 +
 .env.production                   |  1 +
 package.json                      |  7 +--
 src/App.vue                       |  3 --
 src/components/AppCard.vue        | 68 +++++++++++++++++++++++----
 src/components/AppDetailModal.vue |  4 +-
 src/global/StoreConfig.ts         |  2 +-
 vite.config.flat.txt              | 76 -------------------------------
 vite.config.ts                    | 32 ++++++++++---
 9 files changed, 96 insertions(+), 99 deletions(-)
 create mode 100644 .env.debug
 create mode 100644 .env.production
 delete mode 100644 vite.config.flat.txt

diff --git a/.env.debug b/.env.debug
new file mode 100644
index 00000000..430fb433
--- /dev/null
+++ b/.env.debug
@@ -0,0 +1,2 @@
+VITE_APM_STORE_LOCAL_MODE=true
+VITE_APM_STORE_BASE_URL=/local_amd64-apm
\ No newline at end of file
diff --git a/.env.production b/.env.production
new file mode 100644
index 00000000..48bc2f89
--- /dev/null
+++ b/.env.production
@@ -0,0 +1 @@
+VITE_APM_STORE_BASE_URL=https://erotica.spark-app.store
\ No newline at end of file
diff --git a/package.json b/package.json
index 728cac50..4061ac36 100644
--- a/package.json
+++ b/package.json
@@ -20,11 +20,12 @@
   },
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build && electron-builder",
-    "preview": "vite preview"
+    "dev": "vite --mode debug",
+    "build": "vue-tsc --noEmit && vite build --mode production && electron-builder",
+    "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",
diff --git a/src/App.vue b/src/App.vue
index 19fd7ad9..af6be223 100644
--- a/src/App.vue
+++ b/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);
   }
diff --git a/src/components/AppCard.vue b/src/components/AppCard.vue
index a7b03938..8089f6e0 100644
--- a/src/components/AppCard.vue
+++ b/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>
diff --git a/src/components/AppDetailModal.vue b/src/components/AppDetailModal.vue
index 6ab2ddf5..53015c53 100644
--- a/src/components/AppDetailModal.vue
+++ b/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 = () => {
diff --git a/src/global/StoreConfig.ts b/src/global/StoreConfig.ts
index 40b8575c..1ead053d 100644
--- a/src/global/StoreConfig.ts
+++ b/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';
\ No newline at end of file
diff --git a/vite.config.flat.txt b/vite.config.flat.txt
deleted file mode 100644
index 1ab23d59..00000000
--- a/vite.config.flat.txt
+++ /dev/null
@@ -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,
-  }
-})
diff --git a/vite.config.ts b/vite.config.ts
index 1260892b..e18afa37 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -62,13 +62,33 @@ export default defineConfig(({ command }) => {
         renderer: {},
       }),
     ],
-    server: process.env.VSCODE_DEBUG && (() => {
-      const url = new URL(pkg.debug.env.VITE_DEV_SERVER_URL)
-      return {
-        host: url.hostname,
-        port: +url.port,
+    server: (() => {
+      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, 
   }
 })