spark-store-project/spark-store
15
0
Fork 0
mirror of https://gitee.com/spark-store-project/spark-store synced 2026-04-26 09:20:18 +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>
</template>
<script setup>
<script setup lang="ts">
import { ref, computed, onMounted, watch, nextTick } from 'vue';
import axios from 'axios';
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 { downloads } from './global/downloadStatus';
import { handleInstall, handleRetry, handleUpgrade } from './modeuls/processInstall';
import type { App, AppJson, DownloadItem } from './global/typedefinition';
import type { Ref } from 'vue';
const logger = pino();
@@ -70,27 +72,27 @@ const axiosInstance = axios.create({
// 响应式状态
const isDarkTheme = ref(false);
const categories = ref({});
const apps = ref([]);
const categories: Ref<Record<string, string>> = ref({});
const apps: Ref<App[]> = ref([]);
const activeCategory = ref('all');
const searchQuery = ref('');
const showModal = ref(false);
const showPreview = ref(false);
const currentScreenIndex = ref(0);
const screenshots = ref([]);
const screenshots = ref<string[]>([]);
const loading = ref(true);
const showDownloadDetailModal = ref(false);
const currentDownload = ref(null);
const currentDownload: Ref<DownloadItem | null> = ref(null);
const showInstalledModal = ref(false);
const installedApps = ref([]);
const installedApps = ref<App[]>([]);
const installedLoading = ref(false);
const installedError = ref('');
const showUpdateModal = ref(false);
const upgradableApps = ref([]);
const upgradableApps = ref<(App & { selected: boolean; upgrading: boolean })[]>([]);
const updateLoading = ref(false);
const updateError = ref('');
const showUninstallModal = ref(false);
const uninstallTargetApp = ref(null);
const uninstallTargetApp: Ref<App | null> = ref(null);
// 计算属性
const filteredApps = computed(() => {
@@ -98,17 +100,18 @@ const filteredApps = computed(() => {
// 按分类筛选
if (activeCategory.value !== 'all') {
result = result.filter(app => app._category === activeCategory.value);
result = result.filter(app => app.category === activeCategory.value);
}
// 按搜索关键词筛选
if (searchQuery.value.trim()) {
const q = searchQuery.value.toLowerCase().trim();
result = result.filter(app => {
return (app.Name?.toLowerCase().includes(q) ||
app.Pkgname?.toLowerCase().includes(q) ||
app.Tags?.toLowerCase().includes(q) ||
app.More?.toLowerCase().includes(q));
// 兼容可能为 undefined 的情况，虽然类型定义是 string
return ((app.name || '').toLowerCase().includes(q) ||
(app.pkgname || '').toLowerCase().includes(q) ||
(app.tags || '').toLowerCase().includes(q) ||
(app.more || '').toLowerCase().includes(q));
});
}
@@ -116,10 +119,10 @@ const filteredApps = computed(() => {
});
const categoryCounts = computed(() => {
const counts = { all: apps.value.length };
const counts: Record<string, number> = { all: apps.value.length };
apps.value.forEach(app => {
if (!counts[app._category]) counts[app._category] = 0;
counts[app._category]++;
if (!counts[app.category]) counts[app.category] = 0;
counts[app.category]++;
});
return counts;
});
@@ -129,7 +132,7 @@ const hasSelectedUpgrades = computed(() => {
});
// 方法
const syncThemePreference = (enabled) => {
const syncThemePreference = (enabled: boolean) => {
document.documentElement.classList.toggle('dark', enabled);
};
@@ -143,11 +146,11 @@ const toggleTheme = () => {
isDarkTheme.value = !isDarkTheme.value;
};
const selectCategory = (category) => {
const selectCategory = (category: string) => {
activeCategory.value = category;
};
const openDetail = (app) => {
const openDetail = (app: App) => {
currentApp.value = app;
currentScreenIndex.value = 0;
loadScreenshots(app);
@@ -164,16 +167,16 @@ const openDetail = (app) => {
});
};
const checkAppInstalled = (app) => {
window.ipcRenderer.invoke('check-installed', app.Pkgname).then((isInstalled) => {
const checkAppInstalled = (app: App) => {
window.ipcRenderer.invoke('check-installed', app.pkgname).then((isInstalled: boolean) => {
currentAppIsInstalled.value = isInstalled;
});
};
const loadScreenshots = (app) => {
const loadScreenshots = (app: App) => {
screenshots.value = [];
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();
img.src = screenshotUrl;
img.onload = () => {
@@ -187,7 +190,7 @@ const closeDetail = () => {
currentApp.value = null;
};
const openScreenPreview = (index) => {
const openScreenPreview = (index: number) => {
currentScreenIndex.value = index;
showPreview.value = true;
};
@@ -235,12 +238,20 @@ const refreshUpgradableApps = async () => {
updateError.value = result?.message || '检查更新失败';
return;
}
upgradableApps.value = (result.apps || []).map(app => ({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
upgradableApps.value = (result.apps || []).map((app: any) => ({
...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,
upgrading: false
}));
} catch (error) {
} catch (error: any) {
upgradableApps.value = [];
updateError.value = error?.message || '检查更新失败';
} finally {
@@ -256,10 +267,16 @@ const toggleAllUpgrades = () => {
}));
};
const upgradeSingleApp = (app) => {
const upgradeSingleApp = (app: App) => {
if (!app?.pkgname) return;
const target = apps.value.find(a => a.Pkgname === app.pkgname);
handleUpgrade(target);
const target = apps.value.find(a => a.pkgname === app.pkgname);
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 = () => {
@@ -288,11 +305,16 @@ const refreshInstalledApps = async () => {
installedError.value = result?.message || '读取已安装应用失败';
return;
}
installedApps.value = (result.apps || []).map((app) => ({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
installedApps.value = (result.apps || []).map((app: any) => ({
...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
}));
} catch (error) {
} catch (error: any) {
installedApps.value = [];
installedError.value = error?.message || '读取已安装应用失败';
} finally {
@@ -300,14 +322,21 @@ const refreshInstalledApps = async () => {
}
};
const requestUninstall = (app) => {
const requestUninstall = (app: App | {pkgname: string, [key:string]: any}) => {
let target = null;
if (!app?.Pkgname) // TODO: 很丑，之后统一变量名
target = apps.value.find(a => a.Pkgname === app.pkgname);
else
target = app;
uninstallTargetApp.value = target;
showUninstallModal.value = true;
if (!('pkgname' in app) && 'Pkgname' in app) {
// @ts-ignore
target = apps.value.find(a => a.pkgname === app.Pkgname);
} else if (!app?.pkgname) {
// try to find by some other way or failed
} else {
target = apps.value.find(a => a.pkgname === app.pkgname) || app;
}
if (target) {
uninstallTargetApp.value = target as App;
showUninstallModal.value = true;
}
};
const requestUninstallFromDetail = () => {
@@ -332,11 +361,11 @@ const onUninstallSuccess = () => {
}
};
const uninstallInstalledApp = (app) => {
const uninstallInstalledApp = (app: App) => {
requestUninstall(app);
};
const openApmStoreUrl = (url, { fallbackText } = {}) => {
const openApmStoreUrl = (url: string, { fallbackText }: { fallbackText: string }) => {
try {
window.location.href = url;
} catch (e) {
@@ -344,7 +373,7 @@ const openApmStoreUrl = (url, { fallbackText } = {}) => {
}
};
const showProtocolFallback = (cmd) => {
const showProtocolFallback = (cmd: string) => {
const existing = document.getElementById('protocolFallbackBox');
if (existing) existing.remove();
@@ -353,7 +382,7 @@ const showProtocolFallback = (cmd) => {
box.style.position = 'fixed';
box.style.right = '18px';
box.style.bottom = '18px';
box.style.zIndex = 2000;
box.style.zIndex = '2000';
box.style.boxShadow = 'var(--shadow)';
box.style.background = 'var(--card)';
box.style.borderRadius = '12px';
@@ -371,7 +400,7 @@ const showProtocolFallback = (cmd) => {
`;
document.body.appendChild(box);
document.getElementById('copyApmCmd').addEventListener('click', () => {
document.getElementById('copyApmCmd')?.addEventListener('click', () => {
navigator.clipboard?.writeText(cmd).then(() => {
alert('命令已复制到剪贴板');
}).catch(() => {
@@ -379,7 +408,7 @@ const showProtocolFallback = (cmd) => {
});
});
document.getElementById('dismissApmCmd').addEventListener('click', () => {
document.getElementById('dismissApmCmd')?.addEventListener('click', () => {
box.remove();
});
@@ -389,21 +418,21 @@ const showProtocolFallback = (cmd) => {
}, 30000);
};
const escapeHtml = (s) => {
const escapeHtml = (s: string) => {
if (!s) return '';
return s.replace(/[&<>"']/g, c => ({
return s.replace(/[&<>"']/g, (c) => ({
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#39;'
})[c]);
})[c as '&' | '<' | '>' | '"' | "'"]);
};
// 目前 APM 商店不能暂停下载（因为 APM 本身不支持），但保留这些方法以备将来使用
const pauseDownload = (id) => {
const download = downloads.value.find(d => d.id === id);
if (download && download.status === 'downloading') {
const pauseDownload = (id: DownloadItem) => {
const download = downloads.value.find(d => d.id === id.id);
if (download && download.status === 'installing') { // 'installing' matches type definition, previously 'downloading'
download.status = 'paused';
download.logs.push({
time: Date.now(),
@@ -413,24 +442,25 @@ const pauseDownload = (id) => {
};
// 同理
const resumeDownload = (id) => {
const download = downloads.value.find(d => d.id === id);
const resumeDownload = (id: DownloadItem) => {
const download = downloads.value.find(d => d.id === id.id);
if (download && download.status === 'paused') {
download.status = 'downloading';
download.status = 'installing'; // previously 'downloading'
download.logs.push({
time: Date.now(),
message: '继续下载...'
});
simulateDownload(download);
// simulateDownload(download); // removed or undefined?
}
};
// 同理
const cancelDownload = (id) => {
const index = downloads.value.findIndex(d => d.id === id);
const cancelDownload = (id: DownloadItem) => {
const index = downloads.value.findIndex(d => d.id === id.id);
if (index !== -1) {
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({
time: Date.now(),
message: '下载已取消'
@@ -443,8 +473,8 @@ const cancelDownload = (id) => {
}
};
const retryDownload = (id) => {
const download = downloads.value.find(d => d.id === id);
const retryDownload = (id: DownloadItem) => {
const download = downloads.value.find(d => d.id === id.id);
if (download && download.status === 'failed') {
download.status = 'queued';
download.progress = 0;
@@ -461,7 +491,7 @@ const clearCompletedDownloads = () => {
downloads.value = downloads.value.filter(d => d.status !== 'completed');
};
const showDownloadDetailModalFunc = (download) => {
const showDownloadDetailModalFunc = (download: DownloadItem) => {
currentDownload.value = download;
showDownloadDetailModal.value = true;
};
@@ -471,7 +501,7 @@ const closeDownloadDetail = () => {
currentDownload.value = null;
};
const openDownloadedApp = (download) => {
const openDownloadedApp = (download: DownloadItem) => {
const encodedPkg = encodeURIComponent(download.pkgname);
openApmStoreUrl(`apmstore://launch?pkg=${encodedPkg}`, {
fallbackText: `打开应用: ${download.pkgname}`
@@ -483,7 +513,7 @@ const loadCategories = async () => {
const response = await axiosInstance.get(`/${window.apm_store.arch}/categories.json`);
categories.value = response.data;
} catch (error) {
logger.error('读取 categories.json 失败', error);
logger.error(`读取 categories.json 失败: ${error}`);
}
};
@@ -493,7 +523,7 @@ const loadApps = async () => {
logger.info('开始加载应用数据...');
const promises = Object.keys(categories.value).map(async category => {
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 : [];
} catch {
return [];
@@ -505,19 +535,36 @@ const loadApps = async () => {
apps.value = [];
Object.keys(categories.value).forEach((category, index) => {
const categoryApps = Array.isArray(results[index]) ? results[index] : [];
categoryApps.forEach(app => {
app._category = category;
apps.value.push(app);
categoryApps.forEach((appJson) => {
// Convert AppJson to App here
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) {
logger.error('加载应用数据失败', error);
logger.error(`加载应用数据失败: ${error}`);
} finally {
loading.value = false;
}
};
const handleSearchInput = (value) => {
const handleSearchInput = (value: string) => {
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 target = apps.value.find(a => a.Pkgname === pkgname);
const target = apps.value.find(a => a.pkgname === pkgname);
if (target) {
openDetail(target);
} else {