spark-store-project/spark-store
15
0
Fork 0
mirror of https://gitee.com/spark-store-project/spark-store synced 2026-04-26 01:10:16 +08:00
Code Issues 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Elysia
2026-01-17 21:00:21 +08:00
parent a5b3d1278c
commit 0d16434374
9 changed files with 96 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.debug Normal file
View File

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

1
.env.production Normal file
View File

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

7
package.json
View File

@@ -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",

3
src/App.vue
View File

@@ -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);
}

68
src/components/AppCard.vue
View File

@@ -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>

4
src/components/AppDetailModal.vue
View File

@@ -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 = () => {

2
src/global/StoreConfig.ts
View File

@@ -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';

76
vite.config.flat.txt
View File

@@ -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,
}
})

26
vite.config.ts
View File

@@ -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)
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,
}
})