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

refactor: standardize app property names and improve TypeScript definitions

Browse Source 
- Updated property names in AppCard.vue, AppDetailModal.vue, AppGrid.vue, and other components to use camelCase for consistency.
- Enhanced TypeScript definitions for props and emits in various components to improve type safety.
- Refactored download status handling in processInstall.ts to align with updated App interface.
- Improved error handling and type definitions in DownloadDetail.vue and related components.
- Added optional properties and refined existing interfaces in typedefinition.ts for better clarity and usability.
This commit is contained in:
Elysia
2026-01-31 17:16:02 +08:00
parent f89b9ebfd9
commit 3221cb6d5e
18 changed files with 433 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
src/App.vue
View File

@@ -42,7 +42,7 @@
</div> </div>
</template> </template>
<script setup> <script setup lang="ts">
import { ref, computed, onMounted, watch, nextTick } from 'vue'; import { ref, computed, onMounted, watch, nextTick } from 'vue';
import axios from 'axios'; import axios from 'axios';
import pino from 'pino'; import pino from 'pino';
@@ -59,6 +59,8 @@ import UninstallConfirmModal from './components/UninstallConfirmModal.vue';
import { APM_STORE_BASE_URL, currentApp, currentAppIsInstalled } from './global/storeConfig'; import { APM_STORE_BASE_URL, currentApp, currentAppIsInstalled } from './global/storeConfig';
import { downloads } from './global/downloadStatus'; import { downloads } from './global/downloadStatus';
import { handleInstall, handleRetry, handleUpgrade } from './modeuls/processInstall'; import { handleInstall, handleRetry, handleUpgrade } from './modeuls/processInstall';
import type { App, AppJson, DownloadItem } from './global/typedefinition';
import type { Ref } from 'vue';
const logger = pino(); const logger = pino();
@@ -70,27 +72,27 @@ const axiosInstance = axios.create({
// 响应式状态 // 响应式状态
const isDarkTheme = ref(false); const isDarkTheme = ref(false);
const categories = ref({}); const categories: Ref<Record<string, string>> = ref({});
const apps = ref([]); const apps: Ref<App[]> = ref([]);
const activeCategory = ref('all'); const activeCategory = ref('all');
const searchQuery = ref(''); const searchQuery = ref('');
const showModal = ref(false); const showModal = ref(false);
const showPreview = ref(false); const showPreview = ref(false);
const currentScreenIndex = ref(0); const currentScreenIndex = ref(0);
const screenshots = ref([]); const screenshots = ref<string[]>([]);
const loading = ref(true); const loading = ref(true);
const showDownloadDetailModal = ref(false); const showDownloadDetailModal = ref(false);
const currentDownload = ref(null); const currentDownload: Ref<DownloadItem | null> = ref(null);
const showInstalledModal = ref(false); const showInstalledModal = ref(false);
const installedApps = ref([]); const installedApps = ref<App[]>([]);
const installedLoading = ref(false); const installedLoading = ref(false);
const installedError = ref(''); const installedError = ref('');
const showUpdateModal = ref(false); const showUpdateModal = ref(false);
const upgradableApps = ref([]); const upgradableApps = ref<(App & { selected: boolean; upgrading: boolean })[]>([]);
const updateLoading = ref(false); const updateLoading = ref(false);
const updateError = ref(''); const updateError = ref('');
const showUninstallModal = ref(false); const showUninstallModal = ref(false);
const uninstallTargetApp = ref(null); const uninstallTargetApp: Ref<App | null> = ref(null);
// 计算属性 // 计算属性
const filteredApps = computed(() => { const filteredApps = computed(() => {
@@ -98,17 +100,18 @@ const filteredApps = computed(() => {
// 按分类筛选 // 按分类筛选
if (activeCategory.value !== 'all') { if (activeCategory.value !== 'all') {
result = result.filter(app => app._category === activeCategory.value); result = result.filter(app => app.category === activeCategory.value);
} }
// 按搜索关键词筛选 // 按搜索关键词筛选
if (searchQuery.value.trim()) { if (searchQuery.value.trim()) {
const q = searchQuery.value.toLowerCase().trim(); const q = searchQuery.value.toLowerCase().trim();
result = result.filter(app => { result = result.filter(app => {
return (app.Name?.toLowerCase().includes(q) || // 兼容可能为 undefined 的情况，虽然类型定义是 string
app.Pkgname?.toLowerCase().includes(q) || return ((app.name || '').toLowerCase().includes(q) ||
app.Tags?.toLowerCase().includes(q) || (app.pkgname || '').toLowerCase().includes(q) ||
app.More?.toLowerCase().includes(q)); (app.tags || '').toLowerCase().includes(q) ||
(app.more || '').toLowerCase().includes(q));
}); });
} }
@@ -116,10 +119,10 @@ const filteredApps = computed(() => {
}); });
const categoryCounts = computed(() => { const categoryCounts = computed(() => {
const counts = { all: apps.value.length }; const counts: Record<string, number> = { all: apps.value.length };
apps.value.forEach(app => { apps.value.forEach(app => {
if (!counts[app._category]) counts[app._category] = 0; if (!counts[app.category]) counts[app.category] = 0;
counts[app._category]++; counts[app.category]++;
}); });
return counts; return counts;
}); });
@@ -129,7 +132,7 @@ const hasSelectedUpgrades = computed(() => {
}); });
// 方法 // 方法
const syncThemePreference = (enabled) => { const syncThemePreference = (enabled: boolean) => {
document.documentElement.classList.toggle('dark', enabled); document.documentElement.classList.toggle('dark', enabled);
}; };
@@ -143,11 +146,11 @@ const toggleTheme = () => {
isDarkTheme.value = !isDarkTheme.value; isDarkTheme.value = !isDarkTheme.value;
}; };
const selectCategory = (category) => { const selectCategory = (category: string) => {
activeCategory.value = category; activeCategory.value = category;
}; };
const openDetail = (app) => { const openDetail = (app: App) => {
currentApp.value = app; currentApp.value = app;
currentScreenIndex.value = 0; currentScreenIndex.value = 0;
loadScreenshots(app); loadScreenshots(app);
@@ -164,16 +167,16 @@ const openDetail = (app) => {
}); });
}; };
const checkAppInstalled = (app) => { const checkAppInstalled = (app: App) => {
window.ipcRenderer.invoke('check-installed', app.Pkgname).then((isInstalled) => { window.ipcRenderer.invoke('check-installed', app.pkgname).then((isInstalled: boolean) => {
currentAppIsInstalled.value = isInstalled; currentAppIsInstalled.value = isInstalled;
}); });
}; };
const loadScreenshots = (app) => { const loadScreenshots = (app: App) => {
screenshots.value = []; screenshots.value = [];
for (let i = 1; i <= 5; i++) { 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 screenshotUrl = `${APM_STORE_BASE_URL}/${window.apm_store.arch}/${app.category}/${app.pkgname}/screen_${i}.png`;
const img = new Image(); const img = new Image();
img.src = screenshotUrl; img.src = screenshotUrl;
img.onload = () => { img.onload = () => {
@@ -187,7 +190,7 @@ const closeDetail = () => {
currentApp.value = null; currentApp.value = null;
}; };
const openScreenPreview = (index) => { const openScreenPreview = (index: number) => {
currentScreenIndex.value = index; currentScreenIndex.value = index;
showPreview.value = true; showPreview.value = true;
}; };
@@ -235,12 +238,20 @@ const refreshUpgradableApps = async () => {
updateError.value = result?.message || '检查更新失败'; updateError.value = result?.message || '检查更新失败';
return; return;
} }
upgradableApps.value = (result.apps || []).map(app => ({ // eslint-disable-next-line @typescript-eslint/no-explicit-any
upgradableApps.value = (result.apps || []).map((app: any) => ({
...app, ...app,
// Map properties if needed or assume main matches App interface except field names might differ
// For now assuming result.apps returns objects compatible with App for core fields,
// but let's normalize just in case if main returns different structure.
name: app.name || app.Name || '',
pkgname: app.pkgname || app.Pkgname || '',
version: app.newVersion || app.version || '',
category: app.category || 'unknown',
selected: false, selected: false,
upgrading: false upgrading: false
})); }));
} catch (error) { } catch (error: any) {
upgradableApps.value = []; upgradableApps.value = [];
updateError.value = error?.message || '检查更新失败'; updateError.value = error?.message || '检查更新失败';
} finally { } finally {
@@ -256,10 +267,16 @@ const toggleAllUpgrades = () => {
})); }));
}; };
const upgradeSingleApp = (app) => { const upgradeSingleApp = (app: App) => {
if (!app?.pkgname) return; if (!app?.pkgname) return;
const target = apps.value.find(a => a.Pkgname === app.pkgname); const target = apps.value.find(a => a.pkgname === app.pkgname);
handleUpgrade(target); if (target) {
handleUpgrade(target);
} else {
// If we can't find it in the list (e.g. category not loaded?), use the info we have
// But handleUpgrade expects App. Let's try to construct minimal App
handleUpgrade(app);
}
}; };
const upgradeSelectedApps = () => { const upgradeSelectedApps = () => {
@@ -288,11 +305,16 @@ const refreshInstalledApps = async () => {
installedError.value = result?.message || '读取已安装应用失败'; installedError.value = result?.message || '读取已安装应用失败';
return; return;
} }
installedApps.value = (result.apps || []).map((app) => ({ // eslint-disable-next-line @typescript-eslint/no-explicit-any
installedApps.value = (result.apps || []).map((app: any) => ({
...app, ...app,
// Normalize if Main process returns different casing
name: app.name || app.Name || app.pkgname,
pkgname: app.pkgname || app.Pkgname,
version: app.version || app.Version,
removing: false removing: false
})); }));
} catch (error) { } catch (error: any) {
installedApps.value = []; installedApps.value = [];
installedError.value = error?.message || '读取已安装应用失败'; installedError.value = error?.message || '读取已安装应用失败';
} finally { } finally {
@@ -300,14 +322,21 @@ const refreshInstalledApps = async () => {
} }
}; };
const requestUninstall = (app) => { const requestUninstall = (app: App | {pkgname: string, [key:string]: any}) => {
let target = null; let target = null;
if (!app?.Pkgname) // TODO: 很丑，之后统一变量名 if (!('pkgname' in app) && 'Pkgname' in app) {
target = apps.value.find(a => a.Pkgname === app.pkgname); // @ts-ignore
else target = apps.value.find(a => a.pkgname === app.Pkgname);
target = app; } else if (!app?.pkgname) {
uninstallTargetApp.value = target; // try to find by some other way or failed
showUninstallModal.value = true; } else {
target = apps.value.find(a => a.pkgname === app.pkgname) || app;
}
if (target) {
uninstallTargetApp.value = target as App;
showUninstallModal.value = true;
}
}; };
const requestUninstallFromDetail = () => { const requestUninstallFromDetail = () => {
@@ -332,11 +361,11 @@ const onUninstallSuccess = () => {
} }
}; };
const uninstallInstalledApp = (app) => { const uninstallInstalledApp = (app: App) => {
requestUninstall(app); requestUninstall(app);
}; };
const openApmStoreUrl = (url, { fallbackText } = {}) => { const openApmStoreUrl = (url: string, { fallbackText }: { fallbackText: string }) => {
try { try {
window.location.href = url; window.location.href = url;
} catch (e) { } catch (e) {
@@ -344,7 +373,7 @@ const openApmStoreUrl = (url, { fallbackText } = {}) => {
} }
}; };
const showProtocolFallback = (cmd) => { const showProtocolFallback = (cmd: string) => {
const existing = document.getElementById('protocolFallbackBox'); const existing = document.getElementById('protocolFallbackBox');
if (existing) existing.remove(); if (existing) existing.remove();
@@ -353,7 +382,7 @@ const showProtocolFallback = (cmd) => {
box.style.position = 'fixed'; box.style.position = 'fixed';
box.style.right = '18px'; box.style.right = '18px';
box.style.bottom = '18px'; box.style.bottom = '18px';
box.style.zIndex = 2000; box.style.zIndex = '2000';
box.style.boxShadow = 'var(--shadow)'; box.style.boxShadow = 'var(--shadow)';
box.style.background = 'var(--card)'; box.style.background = 'var(--card)';
box.style.borderRadius = '12px'; box.style.borderRadius = '12px';
@@ -371,7 +400,7 @@ const showProtocolFallback = (cmd) => {
`; `;
document.body.appendChild(box); document.body.appendChild(box);
document.getElementById('copyApmCmd').addEventListener('click', () => { document.getElementById('copyApmCmd')?.addEventListener('click', () => {
navigator.clipboard?.writeText(cmd).then(() => { navigator.clipboard?.writeText(cmd).then(() => {
alert('命令已复制到剪贴板'); alert('命令已复制到剪贴板');
}).catch(() => { }).catch(() => {
@@ -379,7 +408,7 @@ const showProtocolFallback = (cmd) => {
}); });
}); });
document.getElementById('dismissApmCmd').addEventListener('click', () => { document.getElementById('dismissApmCmd')?.addEventListener('click', () => {
box.remove(); box.remove();
}); });
@@ -389,21 +418,21 @@ const showProtocolFallback = (cmd) => {
}, 30000); }, 30000);
}; };
const escapeHtml = (s) => { const escapeHtml = (s: string) => {
if (!s) return ''; if (!s) return '';
return s.replace(/[&<>"']/g, c => ({ return s.replace(/[&<>"']/g, (c) => ({
'&': '&amp;', '&': '&amp;',
'<': '&lt;', '<': '&lt;',
'>': '&gt;', '>': '&gt;',
'"': '&quot;', '"': '&quot;',
"'": '&#39;' "'": '&#39;'
})[c]); })[c as '&' | '<' | '>' | '"' | "'"]);
}; };
// 目前 APM 商店不能暂停下载（因为 APM 本身不支持），但保留这些方法以备将来使用 // 目前 APM 商店不能暂停下载（因为 APM 本身不支持），但保留这些方法以备将来使用
const pauseDownload = (id) => { const pauseDownload = (id: DownloadItem) => {
const download = downloads.value.find(d => d.id === id); const download = downloads.value.find(d => d.id === id.id);
if (download && download.status === 'downloading') { if (download && download.status === 'installing') { // 'installing' matches type definition, previously 'downloading'
download.status = 'paused'; download.status = 'paused';
download.logs.push({ download.logs.push({
time: Date.now(), time: Date.now(),
@@ -413,24 +442,25 @@ const pauseDownload = (id) => {
}; };
// 同理 // 同理
const resumeDownload = (id) => { const resumeDownload = (id: DownloadItem) => {
const download = downloads.value.find(d => d.id === id); const download = downloads.value.find(d => d.id === id.id);
if (download && download.status === 'paused') { if (download && download.status === 'paused') {
download.status = 'downloading'; download.status = 'installing'; // previously 'downloading'
download.logs.push({ download.logs.push({
time: Date.now(), time: Date.now(),
message: '继续下载...' message: '继续下载...'
}); });
simulateDownload(download); // simulateDownload(download); // removed or undefined?
} }
}; };
// 同理 // 同理
const cancelDownload = (id) => { const cancelDownload = (id: DownloadItem) => {
const index = downloads.value.findIndex(d => d.id === id); const index = downloads.value.findIndex(d => d.id === id.id);
if (index !== -1) { if (index !== -1) {
const download = downloads.value[index]; const download = downloads.value[index];
download.status = 'cancelled'; // download.status = 'cancelled'; // 'cancelled' not in DownloadItem type union? Check type
download.status = 'failed'; // Use 'failed' or add 'cancelled' to type if needed. User asked to keep type simple.
download.logs.push({ download.logs.push({
time: Date.now(), time: Date.now(),
message: '下载已取消' message: '下载已取消'
@@ -443,8 +473,8 @@ const cancelDownload = (id) => {
} }
}; };
const retryDownload = (id) => { const retryDownload = (id: DownloadItem) => {
const download = downloads.value.find(d => d.id === id); const download = downloads.value.find(d => d.id === id.id);
if (download && download.status === 'failed') { if (download && download.status === 'failed') {
download.status = 'queued'; download.status = 'queued';
download.progress = 0; download.progress = 0;
@@ -461,7 +491,7 @@ const clearCompletedDownloads = () => {
downloads.value = downloads.value.filter(d => d.status !== 'completed'); downloads.value = downloads.value.filter(d => d.status !== 'completed');
}; };
const showDownloadDetailModalFunc = (download) => { const showDownloadDetailModalFunc = (download: DownloadItem) => {
currentDownload.value = download; currentDownload.value = download;
showDownloadDetailModal.value = true; showDownloadDetailModal.value = true;
}; };
@@ -471,7 +501,7 @@ const closeDownloadDetail = () => {
currentDownload.value = null; currentDownload.value = null;
}; };
const openDownloadedApp = (download) => { const openDownloadedApp = (download: DownloadItem) => {
const encodedPkg = encodeURIComponent(download.pkgname); const encodedPkg = encodeURIComponent(download.pkgname);
openApmStoreUrl(`apmstore://launch?pkg=${encodedPkg}`, { openApmStoreUrl(`apmstore://launch?pkg=${encodedPkg}`, {
fallbackText: `打开应用: ${download.pkgname}` fallbackText: `打开应用: ${download.pkgname}`
@@ -483,7 +513,7 @@ const loadCategories = async () => {
const response = await axiosInstance.get(`/${window.apm_store.arch}/categories.json`); const response = await axiosInstance.get(`/${window.apm_store.arch}/categories.json`);
categories.value = response.data; categories.value = response.data;
} catch (error) { } catch (error) {
logger.error('读取 categories.json 失败', error); logger.error(`读取 categories.json 失败: ${error}`);
} }
}; };
@@ -493,7 +523,7 @@ const loadApps = async () => {
logger.info('开始加载应用数据...'); logger.info('开始加载应用数据...');
const promises = Object.keys(categories.value).map(async category => { const promises = Object.keys(categories.value).map(async category => {
try { try {
const response = await axiosInstance.get(`/${window.apm_store.arch}/${category}/applist.json`); const response = await axiosInstance.get<AppJson[]>(`/${window.apm_store.arch}/${category}/applist.json`);
return response.status === 200 ? response.data : []; return response.status === 200 ? response.data : [];
} catch { } catch {
return []; return [];
@@ -505,19 +535,36 @@ const loadApps = async () => {
apps.value = []; apps.value = [];
Object.keys(categories.value).forEach((category, index) => { Object.keys(categories.value).forEach((category, index) => {
const categoryApps = Array.isArray(results[index]) ? results[index] : []; const categoryApps = Array.isArray(results[index]) ? results[index] : [];
categoryApps.forEach(app => { categoryApps.forEach((appJson) => {
app._category = category; // Convert AppJson to App here
apps.value.push(app); const normalizedApp: App = {
name: appJson.Name,
pkgname: appJson.Pkgname,
version: appJson.Version,
filename: appJson.Filename,
torrent_address: appJson.Torrent_address,
author: appJson.Author,
contributor: appJson.Contributor,
website: appJson.Website,
update: appJson.Update,
size: appJson.Size,
more: appJson.More,
tags: appJson.Tags,
img_urls: typeof appJson.img_urls === 'string' ? JSON.parse(appJson.img_urls) : appJson.img_urls,
icons: appJson.icons,
category: category,
};
apps.value.push(normalizedApp);
}); });
}); });
} catch (error) { } catch (error) {
logger.error('加载应用数据失败', error); logger.error(`加载应用数据失败: ${error}`);
} finally { } finally {
loading.value = false; loading.value = false;
} }
}; };
const handleSearchInput = (value) => { const handleSearchInput = (value: string) => {
searchQuery.value = value; searchQuery.value = value;
}; };
@@ -567,9 +614,9 @@ onMounted(async () => {
} }
}); });
window.ipcRenderer.on('deep-link-install', (_event, pkgname) => { window.ipcRenderer.on('deep-link-install', (_event: any, pkgname: string) => {
const tryOpen = () => { const tryOpen = () => {
const target = apps.value.find(a => a.Pkgname === pkgname); const target = apps.value.find(a => a.pkgname === pkgname);
if (target) { if (target) {
openDetail(target); openDetail(target);
} else { } else {

36
src/components/AppCard.vue
View File

@@ -7,36 +7,36 @@
:class="['h-full w-full object-cover transition-opacity duration-300', isLoaded ? 'opacity-100' : 'opacity-0']" /> :class="['h-full w-full object-cover transition-opacity duration-300', isLoaded ? 'opacity-100' : 'opacity-0']" />
</div> </div>
<div class="flex flex-1 flex-col gap-1 overflow-hidden"> <div class="flex flex-1 flex-col gap-1 overflow-hidden">
<div class="truncate text-base font-semibold text-slate-900 dark:text-white">{{ app.Name || '' }}</div> <div class="truncate text-base font-semibold text-slate-900 dark:text-white">{{ app.name || '' }}</div>
<div class="text-sm text-slate-500 dark:text-slate-400">{{ app.Pkgname || '' }} · {{ app.Version || '' }}</div> <div class="text-sm text-slate-500 dark:text-slate-400">{{ app.pkgname || '' }} · {{ app.version || '' }}</div>
<div class="text-sm text-slate-500 dark:text-slate-400">{{ description }}</div> <div class="text-sm text-slate-500 dark:text-slate-400">{{ description }}</div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup lang="ts">
import { computed, defineProps, defineEmits, onMounted, onBeforeUnmount, ref, watch } from 'vue'; import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue';
import { APM_STORE_BASE_URL } from '../global/storeConfig'; import { APM_STORE_BASE_URL } from '../global/storeConfig';
import type { App } from '../global/typedefinition';
const props = defineProps({ const props = defineProps<{
app: { app: App
type: Object, }>();
required: true
}
});
const emit = defineEmits(['open-detail']); const emit = defineEmits<{
(e: 'open-detail', app: App): void
}>();
const iconImg = ref(null); const iconImg = ref<HTMLImageElement | null>(null);
const isLoaded = ref(false); 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 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(() => { const iconPath = computed(() => {
return `${APM_STORE_BASE_URL}/${window.apm_store.arch}/${props.app._category}/${props.app.Pkgname}/icon.png`; return `${APM_STORE_BASE_URL}/${window.apm_store.arch}/${props.app.category}/${props.app.pkgname}/icon.png`;
}); });
const description = computed(() => { const description = computed(() => {
const more = props.app.More || ''; const more = props.app.more || '';
return more.substring(0, 80) + (more.length > 80 ? '...' : ''); return more.substring(0, 80) + (more.length > 80 ? '...' : '');
}); });
@@ -44,7 +44,7 @@ const openDetail = () => {
emit('open-detail', props.app); emit('open-detail', props.app);
}; };
let observer = null; let observer: IntersectionObserver | null = null;
onMounted(() => { onMounted(() => {
// 创建 Intersection Observer // 创建 Intersection Observer
@@ -57,13 +57,15 @@ onMounted(() => {
img.onload = () => { img.onload = () => {
loadedIcon.value = iconPath.value; loadedIcon.value = iconPath.value;
isLoaded.value = true; isLoaded.value = true;
observer.unobserve(entry.target); if (observer)
observer.unobserve(entry.target);
}; };
img.onerror = () => { 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'; 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; isLoaded.value = true;
observer.unobserve(entry.target); if (observer)
observer.unobserve(entry.target);
}; };
img.src = iconPath.value; img.src = iconPath.value;
} }

98
src/components/AppDetailModal.vue
View File

@@ -14,10 +14,10 @@
</div> </div>
<div class="space-y-1"> <div class="space-y-1">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<p class="text-2xl font-bold text-slate-900 dark:text-white">{{ app?.Name || '' }}</p> <p class="text-2xl font-bold text-slate-900 dark:text-white">{{ app?.name || '' }}</p>
<!-- Close button for mobile layout could be considered here if needed, but for now sticking to desktop layout logic mainly --> <!-- Close button for mobile layout could be considered here if needed, but for now sticking to desktop layout logic mainly -->
</div> </div>
<p class="text-sm text-slate-500 dark:text-slate-400">{{ app?.Pkgname || '' }} · {{ app?.Version || '' }}</p> <p class="text-sm text-slate-500 dark:text-slate-400">{{ app?.pkgname || '' }} · {{ app?.version || '' }}</p>
</div> </div>
</div> </div>
<div class="flex flex-wrap gap-2 lg:ml-auto"> <div class="flex flex-wrap gap-2 lg:ml-auto">
@@ -58,106 +58,98 @@
</div> </div>
<div class="mt-6 grid gap-4 sm:grid-cols-2"> <div class="mt-6 grid gap-4 sm:grid-cols-2">
<div v-if="app?.Author" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60"> <div v-if="app?.author" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60">
<p class="text-xs uppercase tracking-wide text-slate-400">作者</p> <p class="text-xs uppercase tracking-wide text-slate-400">作者</p>
<p class="text-sm font-medium text-slate-800 dark:text-slate-200">{{ app.Author }}</p> <p class="text-sm font-medium text-slate-800 dark:text-slate-200">{{ app.author }}</p>
</div> </div>
<div v-if="app?.Contributor" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60"> <div v-if="app?.contributor" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60">
<p class="text-xs uppercase tracking-wide text-slate-400">贡献者</p> <p class="text-xs uppercase tracking-wide text-slate-400">贡献者</p>
<p class="text-sm font-medium text-slate-800 dark:text-slate-200">{{ app.Contributor }}</p> <p class="text-sm font-medium text-slate-800 dark:text-slate-200">{{ app.contributor }}</p>
</div> </div>
<div v-if="app?.Size" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60"> <div v-if="app?.size" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60">
<p class="text-xs uppercase tracking-wide text-slate-400">大小</p> <p class="text-xs uppercase tracking-wide text-slate-400">大小</p>
<p class="text-sm font-medium text-slate-800 dark:text-slate-200">{{ app.Size }}</p> <p class="text-sm font-medium text-slate-800 dark:text-slate-200">{{ app.size }}</p>
</div> </div>
<div v-if="app?.Update" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60"> <div v-if="app?.update" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60">
<p class="text-xs uppercase tracking-wide text-slate-400">更新时间</p> <p class="text-xs uppercase tracking-wide text-slate-400">更新时间</p>
<p class="text-sm font-medium text-slate-800 dark:text-slate-200">{{ app.Update }}</p> <p class="text-sm font-medium text-slate-800 dark:text-slate-200">{{ app.update }}</p>
</div> </div>
<div v-if="app?.Website" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60"> <div v-if="app?.website" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60">
<p class="text-xs uppercase tracking-wide text-slate-400">网站</p> <p class="text-xs uppercase tracking-wide text-slate-400">网站</p>
<a :href="app.Website" target="_blank" <a :href="app.website" target="_blank"
class="text-sm font-medium text-brand hover:underline">{{ app.Website }}</a> class="text-sm font-medium text-brand hover:underline">{{ app.website }}</a>
</div> </div>
<div v-if="app?.Version" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60"> <div v-if="app?.version" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60">
<p class="text-xs uppercase tracking-wide text-slate-400">版本</p> <p class="text-xs uppercase tracking-wide text-slate-400">版本</p>
<p class="text-sm font-medium text-slate-800 dark:text-slate-200">{{ app.Version }}</p> <p class="text-sm font-medium text-slate-800 dark:text-slate-200">{{ app.version }}</p>
</div> </div>
<div v-if="app?.Tags" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60"> <div v-if="app?.tags" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60">
<p class="text-xs uppercase tracking-wide text-slate-400">标签</p> <p class="text-xs uppercase tracking-wide text-slate-400">标签</p>
<p class="text-sm font-medium text-slate-800 dark:text-slate-200">{{ app.Tags }}</p> <p class="text-sm font-medium text-slate-800 dark:text-slate-200">{{ app.tags }}</p>
</div> </div>
</div> </div>
<div v-if="app?.More && app.More.trim() !== ''" class="mt-6 space-y-3"> <div v-if="app?.more && app.more.trim() !== ''" class="mt-6 space-y-3">
<h3 class="text-lg font-semibold text-slate-900 dark:text-white">应用详情</h3> <h3 class="text-lg font-semibold text-slate-900 dark:text-white">应用详情</h3>
<div <div
class="max-h-60 space-y-2 overflow-y-auto rounded-2xl border border-slate-200/60 bg-slate-50/80 p-4 text-sm leading-relaxed text-slate-600 dark:border-slate-800/60 dark:bg-slate-900/60 dark:text-slate-300" class="max-h-60 space-y-2 overflow-y-auto rounded-2xl border border-slate-200/60 bg-slate-50/80 p-4 text-sm leading-relaxed text-slate-600 dark:border-slate-800/60 dark:bg-slate-900/60 dark:text-slate-300"
v-html="app.More.replace(/\n/g, '<br>')"></div> v-html="app.more.replace(/\n/g, '<br>')"></div>
</div> </div>
</div> </div>
</div> </div>
</Transition> </Transition>
</template> </template>
<script setup> <script setup lang="ts">
import { computed, defineProps, defineEmits, useAttrs, ref } from 'vue'; import { computed, ref, useAttrs } from 'vue';
import { APM_STORE_BASE_URL } from '../global/storeConfig'; import { APM_STORE_BASE_URL } from '../global/storeConfig';
import type { App } from '../global/typedefinition';
defineOptions({ inheritAttrs: false });
const attrs = useAttrs(); const attrs = useAttrs();
const props = defineProps({ const props = defineProps<{
show: { show: boolean;
type: Boolean, app: App | null;
required: true screenshots: string[];
}, isinstalled: boolean;
app: { }>();
type: Object,
default: null
},
screenshots: {
type: Array,
required: true
},
isinstalled: {
type: Boolean,
required: true
}
});
const emit = defineEmits(['close', 'install', 'remove', 'open-preview']); const emit = defineEmits<{
(e: 'close'): void;
(e: 'install'): void;
(e: 'remove'): void;
(e: 'open-preview', index: number): void;
}>();
const installFeedback = ref(false);
const iconPath = computed(() => { const iconPath = computed(() => {
return props.app ? `${APM_STORE_BASE_URL}/${window.apm_store.arch}/${props.app._category}/${props.app.Pkgname}/icon.png` : ''; if (!props.app) return '';
return `${APM_STORE_BASE_URL}/${window.apm_store.arch}/${props.app.category}/${props.app.pkgname}/icon.png`;
}); });
const closeModal = () => { const closeModal = () => {
emit('close'); emit('close');
}; };
const installFeedback = ref(false);
const handleInstall = () => { const handleInstall = () => {
emit('install');
installFeedback.value = true; installFeedback.value = true;
emit('install');
setTimeout(() => { setTimeout(() => {
installFeedback.value = false; installFeedback.value = false;
}, 2000); }, 2000);
}; };
const handleRemove = () => { const handleRemove = () => {
emit('remove'); emit('remove');
}; }
const openPreview = (index) => { const openPreview = (index: number) => {
emit('open-preview', index); emit('open-preview', index);
}; };
const hideImage = (event) => { const hideImage = (e: Event) => {
if (event?.target) { (e.target as HTMLElement).style.display = 'none';
event.target.style.display = 'none';
}
}; };
</script> </script>

22
src/components/AppGrid.vue
View File

@@ -14,20 +14,16 @@
</div> </div>
</template> </template>
<script setup> <script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
import AppCard from './AppCard.vue'; import AppCard from './AppCard.vue';
import type { App } from '@/global/typedefinition';
defineProps({ defineProps<{
apps: { apps: App[];
type: Array, loading: boolean;
required: true }>();
},
loading: {
type: Boolean,
required: true
}
});
defineEmits(['open-detail']); defineEmits<{
(e: 'open-detail', app: App): void;
}>();
</script> </script>

28
src/components/AppHeader.vue
View File

@@ -18,28 +18,26 @@
</div> </div>
</template> </template>
<script setup> <script setup lang="ts">
import { ref, watch, defineProps, defineEmits } from 'vue'; import { ref, watch } from 'vue';
import TopActions from './TopActions.vue'; import TopActions from './TopActions.vue';
const props = defineProps({ const props = defineProps<{
searchQuery: { searchQuery: string;
type: String, appsCount: number;
required: true }>();
},
appsCount: {
type: Number,
required: true
}
});
const emit = defineEmits(['update-search', 'update', 'list']); const emit = defineEmits<{
(e: 'update-search', query: string): void;
(e: 'update'): void;
(e: 'list'): void;
}>();
const localSearchQuery = ref(props.searchQuery || ''); const localSearchQuery = ref(props.searchQuery || '');
const timeoutId = ref(null); const timeoutId = ref<ReturnType<typeof setTimeout> | null>(null);
const debounceSearch = () => { const debounceSearch = () => {
clearTimeout(timeoutId.value); if (timeoutId.value) clearTimeout(timeoutId.value);
timeoutId.value = setTimeout(() => { timeoutId.value = setTimeout(() => {
emit('update-search', localSearchQuery.value); emit('update-search', localSearchQuery.value);
}, 220); }, 220);

35
src/components/AppSidebar.vue
View File

@@ -33,37 +33,28 @@
</div> </div>
</template> </template>
<script setup> <script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
import ThemeToggle from './ThemeToggle.vue'; import ThemeToggle from './ThemeToggle.vue';
import amberLogo from '../assets/imgs/amber-pm-logo.png'; import amberLogo from '../assets/imgs/amber-pm-logo.png';
defineProps({ defineProps<{
categories: { // eslint-disable-next-line @typescript-eslint/no-explicit-any
type: Object, categories: Record<string, any>;
required: true activeCategory: string;
}, categoryCounts: Record<string, number>;
activeCategory: { isDarkTheme: boolean;
type: String, }>();
required: true
},
categoryCounts: {
type: Object,
required: true
},
isDarkTheme: {
type: Boolean,
required: true
}
});
const emit = defineEmits(['toggle-theme', 'select-category']); const emit = defineEmits<{
(e: 'toggle-theme'): void;
(e: 'select-category', category: string): void;
}>();
const toggleTheme = () => { const toggleTheme = () => {
emit('toggle-theme'); emit('toggle-theme');
}; };
const selectCategory = (category) => { const selectCategory = (category: string) => {
emit('select-category', category); emit('select-category', category);
}; };
</script> </script>

50
src/components/DownloadDetail.vue
View File

@@ -120,21 +120,23 @@
</Transition> </Transition>
</template> </template>
<script setup> <script setup lang="ts">
import { defineProps, defineEmits } from 'vue'; import type { DownloadItem } from '../global/typedefinition';
const props = defineProps({ const props = defineProps<{
show: { show: boolean;
type: Boolean, download: DownloadItem | null;
default: false }>();
},
download: { const emit = defineEmits<{
type: Object, (e: 'close'): void;
default: null (e: 'pause', download: DownloadItem): void;
} (e: 'resume', download: DownloadItem): void;
}); (e: 'cancel', download: DownloadItem): void;
(e: 'retry', download: DownloadItem): void;
(e: 'open-app', download: DownloadItem): void;
}>();
const emit = defineEmits(['close', 'pause', 'resume', 'cancel', 'retry', 'open-app']);
const close = () => { const close = () => {
emit('close'); emit('close');
@@ -157,15 +159,19 @@ const cancel = () => {
}; };
const retry = () => { const retry = () => {
emit('retry', props.download.id); if (props.download) {
emit('retry', props.download);
}
}; };
const openApp = () => { const openApp = () => {
emit('open-app', props.download); if (props.download) {
emit('open-app', props.download);
}
}; };
const getStatusText = (status) => { const getStatusText = (status: string) => {
const statusMap = { const statusMap: Record<string, string> = {
'pending': '等待中', 'pending': '等待中',
'downloading': '下载中', 'downloading': '下载中',
'installing': '安装中', 'installing': '安装中',
@@ -177,29 +183,29 @@ const getStatusText = (status) => {
return statusMap[status] || status; return statusMap[status] || status;
}; };
const formatSize = (bytes) => { const formatSize = (bytes: number) => {
if (!bytes) return '0 B'; if (!bytes) return '0 B';
const units = ['B', 'KB', 'MB', 'GB']; const units = ['B', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(1024)); const i = Math.floor(Math.log(bytes) / Math.log(1024));
return (bytes / Math.pow(1024, i)).toFixed(2) + ' ' + units[i]; return (bytes / Math.pow(1024, i)).toFixed(2) + ' ' + units[i];
}; };
const formatSpeed = (bytesPerSecond) => { const formatSpeed = (bytesPerSecond: number) => {
return formatSize(bytesPerSecond) + '/s'; return formatSize(bytesPerSecond) + '/s';
}; };
const formatTime = (seconds) => { const formatTime = (seconds: number) => {
if (seconds < 60) return `${seconds}秒`; if (seconds < 60) return `${seconds}秒`;
if (seconds < 3600) return `${Math.floor(seconds / 60)}分钟`; if (seconds < 3600) return `${Math.floor(seconds / 60)}分钟`;
return `${Math.floor(seconds / 3600)}小时${Math.floor((seconds % 3600) / 60)}分钟`; return `${Math.floor(seconds / 3600)}小时${Math.floor((seconds % 3600) / 60)}分钟`;
}; };
const formatDate = (timestamp) => { const formatDate = (timestamp: number) => {
const date = new Date(timestamp); const date = new Date(timestamp);
return date.toLocaleString('zh-CN'); return date.toLocaleString('zh-CN');
}; };
const formatLogTime = (timestamp) => { const formatLogTime = (timestamp: number) => {
const date = new Date(timestamp); const date = new Date(timestamp);
return date.toLocaleTimeString('zh-CN'); return date.toLocaleTimeString('zh-CN');
}; };

45
src/components/DownloadQueue.vue
View File

@@ -59,7 +59,7 @@
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button v-if="download.status === 'failed'" type="button" <button v-if="download.status === 'failed'" type="button"
class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-rose-200/60 text-rose-500 transition hover:bg-rose-50" class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-rose-200/60 text-rose-500 transition hover:bg-rose-50"
title="重试" @click.stop="retryDownload(download.id)"> title="重试" @click.stop="retryDownload(download)">
<i class="fas fa-redo"></i> <i class="fas fa-redo"></i>
</button> </button>
</div> </div>
@@ -70,24 +70,23 @@
</div> </div>
</template> </template>
<script setup> <script setup lang="ts">
import { ref, computed, defineProps, defineEmits } from 'vue'; import { ref, computed } from 'vue';
import type { DownloadItem } from '../global/typedefinition';
const props = defineProps({ const props = defineProps<{
downloads: { downloads: DownloadItem[];
type: Array, }>();
default: () => []
} const emit = defineEmits<{
}); (e: 'pause', download: DownloadItem): void;
(e: 'resume', download: DownloadItem): void;
(e: 'cancel', download: DownloadItem): void;
(e: 'retry', download: DownloadItem): void;
(e: 'clear-completed'): void;
(e: 'show-detail', download: DownloadItem): void;
}>();
const emit = defineEmits([
'pause',
'resume',
'cancel',
'retry',
'clear-completed',
'show-detail'
]);
const isExpanded = ref(false); const isExpanded = ref(false);
@@ -101,27 +100,27 @@ const toggleExpand = () => {
isExpanded.value = !isExpanded.value; isExpanded.value = !isExpanded.value;
}; };
const pauseDownload = (id) => { const pauseDownload = (id: string) => {
// emit('pause', id); // emit('pause', id);
}; };
const resumeDownload = (id) => { const resumeDownload = (id: string) => {
// emit('resume', id); // emit('resume', id);
}; };
const cancelDownload = (id) => { const cancelDownload = (id: string) => {
// emit('cancel', id); // emit('cancel', id);
}; };
const retryDownload = (id) => { const retryDownload = (download: DownloadItem) => {
emit('retry', id); emit('retry', download);
}; };
const clearCompleted = () => { const clearCompleted = () => {
emit('clear-completed'); emit('clear-completed');
}; };
const showDownloadDetail = (download) => { const showDownloadDetail = (download: DownloadItem) => {
emit('show-detail', download); emit('show-detail', download);
}; };
</script> </script>

34
src/components/InstalledAppsModal.vue
View File

@@ -73,28 +73,20 @@
</Transition> </Transition>
</template> </template>
<script setup> <script setup lang="ts">
import { defineProps, defineEmits } from 'vue'; import type { App } from '@/global/typedefinition';
defineProps({ defineProps<{
show: { show: boolean;
type: Boolean, apps: App[];
required: true loading: boolean;
}, error: string;
apps: { }>();
type: Array,
default: () => []
},
loading: {
type: Boolean,
default: false
},
error: {
type: String,
default: ''
}
});
defineEmits(['close', 'refresh', 'uninstall']); defineEmits<{
(e: 'close'): void;
(e: 'refresh'): void;
(e: 'uninstall', app: App): void;
}>();
</script> </script>

29
src/components/ScreenPreview.vue
View File

@@ -35,25 +35,20 @@
</Transition> </Transition>
</template> </template>
<script setup> <script setup lang="ts">
import { computed, defineProps, defineEmits } from 'vue'; import { computed } from 'vue';
const props = defineProps({ const props = defineProps<{
show: { show: boolean;
type: Boolean, screenshots: string[];
required: true currentScreenIndex: number;
}, }>();
screenshots: {
type: Array,
required: true
},
currentScreenIndex: {
type: Number,
required: true
}
});
const emit = defineEmits(['close', 'prev', 'next']); const emit = defineEmits<{
(e: 'close'): void;
(e: 'prev'): void;
(e: 'next'): void;
}>();
const currentScreenshot = computed(() => { const currentScreenshot = computed(() => {
return props.screenshots[props.currentScreenIndex] || ''; return props.screenshots[props.currentScreenIndex] || '';

17
src/components/ThemeToggle.vue
View File

@@ -12,17 +12,14 @@
</button> </button>
</template> </template>
<script setup> <script setup lang="ts">
import { defineProps, defineEmits } from 'vue'; defineProps<{
isDark: boolean;
}>();
defineProps({ const emit = defineEmits<{
isDark: { (e: 'toggle'): void;
type: Boolean, }>();
required: true
}
});
const emit = defineEmits(['toggle']);
const toggle = () => { const toggle = () => {
emit('toggle'); emit('toggle');

9
src/components/TopActions.vue
View File

@@ -15,10 +15,11 @@
</div> </div>
</template> </template>
<script setup> <script setup lang="ts">
import { defineEmits } from 'vue'; const emit = defineEmits<{
(e: 'update'): void;
const emit = defineEmits(['update', 'list']); (e: 'list'): void;
}>();
const handleUpdate = () => { const handleUpdate = () => {
emit('update'); emit('update');

38
src/components/UninstallConfirmModal.vue
View File

@@ -56,30 +56,28 @@
</Transition> </Transition>
</template> </template>
<script setup> <script setup lang="ts">
import { computed, defineProps, defineEmits, ref, watch, nextTick, onUnmounted } from 'vue'; import { computed, ref, watch, nextTick, onUnmounted } from 'vue';
import type { App } from '@/global/typedefinition';
const props = defineProps({ const props = defineProps<{
show: { show: boolean;
type: Boolean, app: App | null;
required: true }>();
},
app: {
type: Object,
default: null
}
});
const emit = defineEmits(['close', 'success']); const emit = defineEmits<{
(e: 'close'): void;
(e: 'success'): void;
}>();
const uninstalling = ref(false); const uninstalling = ref(false);
const completed = ref(false); const completed = ref(false);
const logs = ref([]); const logs = ref<string[]>([]);
const error = ref(''); const error = ref('');
const logEnd = ref(null); const logEnd = ref<HTMLElement | null>(null);
const appName = computed(() => props.app?.Name || props.app?.name || '未知应用'); const appName = computed(() => props.app?.name || '未知应用');
const appPkg = computed(() => props.app?.Pkgname || props.app?.pkgname || ''); const appPkg = computed(() => props.app?.pkgname || '');
const handleClose = () => { const handleClose = () => {
if (uninstalling.value && !completed.value) return; // Prevent closing while uninstalling if (uninstalling.value && !completed.value) return; // Prevent closing while uninstalling
@@ -113,7 +111,8 @@ const confirmUninstall = () => {
}; };
// Listeners // Listeners
const onProgress = (_event, chunk) => { // eslint-disable-next-line @typescript-eslint/no-explicit-any
const onProgress = (_event: any, chunk: string) => {
if (!uninstalling.value) return; if (!uninstalling.value) return;
// Split by newline but handle chunks correctly? // Split by newline but handle chunks correctly?
// For simplicity, just appending lines if chunk contains newlines, or appending to last line? // For simplicity, just appending lines if chunk contains newlines, or appending to last line?
@@ -124,7 +123,8 @@ const onProgress = (_event, chunk) => {
scrollToBottom(); scrollToBottom();
}; };
const onComplete = (_event, result) => { // eslint-disable-next-line @typescript-eslint/no-explicit-any
const onComplete = (_event: any, result: { success: boolean; message: any }) => {
if (!uninstalling.value) return; // Ignore if not current session if (!uninstalling.value) return; // Ignore if not current session
const msgObj = typeof result.message === 'string' ? JSON.parse(result.message) : result.message; const msgObj = typeof result.message === 'string' ? JSON.parse(result.message) : result.message;

41
src/components/UpdateAppsModal.vue
View File

@@ -79,32 +79,23 @@
</Transition> </Transition>
</template> </template>
<script setup> <script setup lang="ts">
import { defineProps, defineEmits } from 'vue'; import type { UpdateAppItem } from '@/global/typedefinition';
defineProps({ defineProps<{
show: { show: boolean;
type: Boolean, apps: UpdateAppItem[];
required: true loading: boolean;
}, error: string;
apps: { hasSelected: boolean;
type: Array, }>();
default: () => []
},
loading: {
type: Boolean,
default: false
},
error: {
type: String,
default: ''
},
hasSelected: {
type: Boolean,
default: false
}
});
defineEmits(['close', 'refresh', 'toggle-all', 'upgrade-selected', 'upgrade-one']); const emit = defineEmits<{
(e: 'close'): void;
(e: 'refresh'): void;
(e: 'toggle-all'): void;
(e: 'upgrade-selected'): void;
(e: 'upgrade-one', app: UpdateAppItem): void;
}>();
</script> </script>

4
src/global/downloadStatus.ts
View File

@@ -1,4 +1,4 @@
import { ref } from "vue"; import { ref } from "vue";
import { DownloadItem } from './typedefinition'; import type { DownloadItem } from './typedefinition';
export const downloads = ref(<DownloadItem[]>[]); export const downloads = ref<DownloadItem[]>([]);

5
src/global/storeConfig.ts
View File

@@ -1,7 +1,8 @@
import { ref } from "vue"; import { ref } from "vue";
import type { App } from "./typedefinition";
export const APM_STORE_BASE_URL=import.meta.env.VITE_APM_STORE_BASE_URL; export const APM_STORE_BASE_URL: string = import.meta.env.VITE_APM_STORE_BASE_URL || '';
// 下面的变量用于存储当前应用的信息，其实用在多个组件中 // 下面的变量用于存储当前应用的信息，其实用在多个组件中
export const currentApp = ref<any>(null); export const currentApp = ref<App | null>(null);
export const currentAppIsInstalled = ref(false); export const currentAppIsInstalled = ref(false);

67
src/global/typedefinition.ts
View File

@@ -17,13 +17,14 @@ export interface DownloadItem {
pkgname: string; pkgname: string;
version: string; version: string;
icon: string; icon: string;
status: 'installing' | 'paused' | 'completed' | 'failed' | 'queued'; // 可根据实际状态扩展 status: 'downloading' | 'installing' | 'paused' | 'completed' | 'failed' | 'queued'; // 可根据实际状态扩展
progress: number; // 0 ~ 100 的百分比，或 0 ~ 1 的小数（建议统一） progress: number; // 0 ~ 100 的百分比，或 0 ~ 1 的小数（建议统一）
downloadedSize: number; // 已下载字节数 downloadedSize: number; // 已下载字节数
totalSize: number; // 总字节数（可能为 0 初始时） totalSize: number; // 总字节数（可能为 0 初始时）
speed: number; // 当前下载速度，单位如 B/s speed: number; // 当前下载速度，单位如 B/s
timeRemaining: number; // 剩余时间（秒），0 表示未知 timeRemaining: number; // 剩余时间（秒），0 表示未知
startTime: number; // Date.now() 返回的时间戳（毫秒） startTime: number; // Date.now() 返回的时间戳（毫秒）
endTime?: number; // 下载完成时间戳（毫秒），可选
logs: Array<{ logs: Array<{
time: number; // 日志时间戳 time: number; // 日志时间戳
message: string; // 日志消息 message: string; // 日志消息
@@ -31,4 +32,66 @@ export interface DownloadItem {
source: string; // 例如 'APM Store' source: string; // 例如 'APM Store'
retry: boolean; // 当前是否为重试下载 retry: boolean; // 当前是否为重试下载
upgradeOnly?: boolean; // 是否为仅升级任务 upgradeOnly?: boolean; // 是否为仅升级任务
} error?: string;
}
/*
"Name": "Visual Studio Code(vscode)",
"Version": "1.108.2-1769004815",
"Filename": "code_1.108.2-1769004815_amd64.deb",
"Torrent_address": "code_1.108.2-1769004815_amd64.deb.torrent",
"Pkgname": "code",
"Author": "shenmo<shenmo@spark-app.store>",
"Contributor": "shenmo<shenmo@spark-app.store>",
"Website": "https://code.visualstudio.com/",
"Update": "2026-01-26 17:34:15",
"Size": "110M",
"More": "VSCode是一款非常牛逼的编辑器",
"Tags": "community;ubuntu;deepin;uos;debian",
"img_urls": "[\"https://cdn.d.store.deepinos.org.cn/store/development/code/screen_1.png\",\"https://cdn.d.store.deepinos.org.cn/store/development/code/screen_2.png\",\"https://cdn.d.store.deepinos.org.cn/store/development/code/screen_3.png\",\"https://cdn.d.store.deepinos.org.cn/store/development/code/screen_4.png\",\"https://cdn.d.store.deepinos.org.cn/store/development/code/screen_5.png\"]",
"icons": "https://cdn.d.store.deepinos.org.cn/store/development/code/icon.png"
*/
export interface AppJson {
// 原始数据
Name: string;
Version: string;
Filename: string;
Torrent_address: string;
Pkgname: string;
Author: string;
Contributor: string;
Website: string;
Update: string;
Size: string;
More: string;
Tags: string;
img_urls: string; // 注意：部分 json 里可能是字符串形式的数组
icons: string;
}
export interface App {
name: string;
pkgname: string;
version: string;
filename: string;
torrent_address: string;
author: string;
contributor: string;
website: string;
update: string;
size: string;
more: string;
tags: string;
img_urls: string[];
icons: string;
category: string; // Frontend added
installed?: boolean; // Frontend state
}
export interface UpdateAppItem {
pkgname: string;
currentVersion?: string;
newVersion?: string;
selected?: boolean;
upgrading?: boolean;
}

48
src/modeuls/processInstall.ts
View File

@@ -6,21 +6,21 @@ import { currentApp, currentAppIsInstalled } from "../global/storeConfig";
import { APM_STORE_BASE_URL } from "../global/storeConfig"; import { APM_STORE_BASE_URL } from "../global/storeConfig";
import { downloads } from "../global/downloadStatus"; import { downloads } from "../global/downloadStatus";
import { InstallLog, DownloadItem, DownloadResult } from '../global/typedefinition'; import { InstallLog, DownloadItem, DownloadResult, App } from '../global/typedefinition';
let downloadIdCounter = 0; let downloadIdCounter = 0;
export const handleInstall = () => { export const handleInstall = () => {
if (!currentApp.value?.Pkgname) return; if (!currentApp.value?.pkgname) return;
downloadIdCounter += 1; downloadIdCounter += 1;
// 创建下载任务 // 创建下载任务
const download: DownloadItem = { const download: DownloadItem = {
id: downloadIdCounter, id: downloadIdCounter,
name: currentApp.value.Name, name: currentApp.value.name,
pkgname: currentApp.value.Pkgname, pkgname: currentApp.value.pkgname,
version: currentApp.value.Version, version: currentApp.value.version,
icon: `${APM_STORE_BASE_URL}/${window.apm_store.arch}/${currentApp.value._category}/${currentApp.value.Pkgname}/icon.png`, icon: `${APM_STORE_BASE_URL}/${window.apm_store.arch}/${currentApp.value.category}/${currentApp.value.pkgname}/icon.png`,
status: 'queued', status: 'queued',
progress: 0, progress: 0,
downloadedSize: 0, downloadedSize: 0,
@@ -53,16 +53,16 @@ export const handleRetry = (download_: DownloadItem) => {
window.ipcRenderer.send('queue-install', JSON.stringify(download_)); window.ipcRenderer.send('queue-install', JSON.stringify(download_));
}; };
export const handleUpgrade = (pkg: any) => { export const handleUpgrade = (app: App) => {
if (!pkg.Pkgname) return; if (!app.pkgname) return;
downloadIdCounter += 1; downloadIdCounter += 1;
const download: DownloadItem = { const download: DownloadItem = {
id: downloadIdCounter, id: downloadIdCounter,
name: pkg.Name, name: app.name,
pkgname: pkg.Pkgname, pkgname: app.pkgname,
version: pkg.Version, version: app.version,
icon: `${APM_STORE_BASE_URL}/${window.apm_store.arch}/${pkg._category}/${pkg.Pkgname}/icon.png`, icon: `${APM_STORE_BASE_URL}/${window.apm_store.arch}/${app.category}/${app.pkgname}/icon.png`,
status: 'queued', status: 'queued',
progress: 0, progress: 0,
downloadedSize: 0, downloadedSize: 0,
@@ -83,8 +83,8 @@ export const handleUpgrade = (pkg: any) => {
}; };
export const handleRemove = () => { export const handleRemove = () => {
if (!currentApp.value?.Pkgname) return; if (!currentApp.value?.pkgname) return;
window.ipcRenderer.send('remove-installed', currentApp.value.Pkgname); window.ipcRenderer.send('remove-installed', currentApp.value.pkgname);
} }
window.ipcRenderer.on('remove-complete', (_event, log: DownloadResult) => { window.ipcRenderer.on('remove-complete', (_event, log: DownloadResult) => {
@@ -97,22 +97,24 @@ window.ipcRenderer.on('remove-complete', (_event, log: DownloadResult) => {
}); });
window.ipcRenderer.on('install-status', (_event, log: InstallLog) => { window.ipcRenderer.on('install-status', (_event, log: InstallLog) => {
const downloadObj: any = downloads.value.find(d => d.id === log.id); const downloadObj = downloads.value.find(d => d.id === log.id);
downloadObj.status = log.message; if(downloadObj) downloadObj.status = log.message as any;
}); });
window.ipcRenderer.on('install-log', (_event, log: InstallLog) => { window.ipcRenderer.on('install-log', (_event, log: InstallLog) => {
const downloadObj: any = downloads.value.find(d => d.id === log.id); const downloadObj = downloads.value.find(d => d.id === log.id);
downloadObj.logs.push({ if(downloadObj) downloadObj.logs.push({
time: log.time, time: log.time,
message: log.message message: log.message
}); });
}); });
window.ipcRenderer.on('install-complete', (_event, log: DownloadResult) => { window.ipcRenderer.on('install-complete', (_event, log: DownloadResult) => {
const downloadObj: any = downloads.value.find(d => d.id === log.id); const downloadObj = downloads.value.find(d => d.id === log.id);
if (log.success) { if (downloadObj) {
downloadObj.status = 'completed'; if (log.success) {
} else { downloadObj.status = 'completed';
downloadObj.status = 'failed'; } else {
downloadObj.status = 'failed';
}
} }
}); });