mirror of
https://gitee.com/spark-store-project/spark-store
synced 2026-06-22 14:13:49 +08:00
feat: 添加APM安装确认弹窗并重构APM检查流程
1. 新增全局状态控制APM安装弹窗显示 2. 新建ApmInstallConfirmModal弹窗组件 3. 将主进程的APM安装弹窗逻辑迁移到前端Vue组件 4. 更新package.json版本到5.1.0 5. 简化安装和升级流程中的APM检查逻辑
This commit is contained in:
+28
@@ -152,6 +152,12 @@
|
||||
@success="onUninstallSuccess"
|
||||
/>
|
||||
|
||||
<ApmInstallConfirmModal
|
||||
:show="showApmInstallDialog"
|
||||
@close="closeApmInstallDialog"
|
||||
@confirm="confirmApmInstall"
|
||||
/>
|
||||
|
||||
<AboutModal :show="showAboutModal" @close="closeAboutModal" />
|
||||
|
||||
<SettingsModal :show="showSettingsModal" @close="closeSettingsModal" />
|
||||
@@ -173,6 +179,7 @@ import DownloadDetail from "./components/DownloadDetail.vue";
|
||||
import InstalledAppsModal from "./components/InstalledAppsModal.vue";
|
||||
import UpdateCenterModal from "./components/UpdateCenterModal.vue";
|
||||
import UninstallConfirmModal from "./components/UninstallConfirmModal.vue";
|
||||
import ApmInstallConfirmModal from "./components/ApmInstallConfirmModal.vue";
|
||||
import AboutModal from "./components/AboutModal.vue";
|
||||
import SettingsModal from "./components/SettingsModal.vue";
|
||||
import {
|
||||
@@ -181,6 +188,7 @@ import {
|
||||
currentAppSparkInstalled,
|
||||
currentAppApmInstalled,
|
||||
currentStoreMode,
|
||||
showApmInstallDialog,
|
||||
getHybridDefaultOrigin,
|
||||
loadPriorityConfig,
|
||||
} from "./global/storeConfig";
|
||||
@@ -964,6 +972,22 @@ const onUninstallSuccess = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const closeApmInstallDialog = () => {
|
||||
showApmInstallDialog.value = false;
|
||||
};
|
||||
|
||||
const confirmApmInstall = async () => {
|
||||
showApmInstallDialog.value = false;
|
||||
closeDetail();
|
||||
await nextTick();
|
||||
const apmApp = apps.value.find((a) => a.pkgname === "apm");
|
||||
if (apmApp) {
|
||||
openDetail(apmApp);
|
||||
} else {
|
||||
searchQuery.value = "apm";
|
||||
}
|
||||
};
|
||||
|
||||
const installCompleteCallback = (pkgname?: string) => {
|
||||
if (currentApp.value && (!pkgname || currentApp.value.pkgname === pkgname)) {
|
||||
checkAppInstalled(currentApp.value);
|
||||
@@ -1276,6 +1300,10 @@ onMounted(async () => {
|
||||
}
|
||||
});
|
||||
|
||||
window.ipcRenderer.on("trigger-apm-install-dialog", () => {
|
||||
showApmInstallDialog.value = true;
|
||||
});
|
||||
|
||||
window.ipcRenderer.on(
|
||||
"deep-link-install",
|
||||
(_event: IpcRendererEvent, pkgname: string) => {
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<Transition
|
||||
enter-active-class="duration-200 ease-out"
|
||||
enter-from-class="opacity-0 scale-95"
|
||||
enter-to-class="opacity-100 scale-100"
|
||||
leave-active-class="duration-150 ease-in"
|
||||
leave-from-class="opacity-100 scale-100"
|
||||
leave-to-class="opacity-0 scale-95"
|
||||
>
|
||||
<div
|
||||
v-if="show"
|
||||
class="fixed inset-0 z-[80] flex items-center justify-center bg-slate-900/70 p-4"
|
||||
@click.self="handleClose"
|
||||
>
|
||||
<div
|
||||
class="relative w-full max-w-lg overflow-hidden rounded-3xl border border-white/10 bg-white/95 p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
|
||||
>
|
||||
<div class="mb-6 flex items-center gap-4">
|
||||
<div
|
||||
class="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-brand/20 to-brand/10 shadow-inner dark:from-brand/20 dark:to-brand/10"
|
||||
>
|
||||
<i class="fas fa-box-open text-2xl text-brand"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white">
|
||||
需要安装 APM
|
||||
</h3>
|
||||
<p class="text-sm text-slate-500 dark:text-slate-400">
|
||||
APM 是星火应用商店的软件包兼容工具,此应用使用星火 APM 提供支持。
|
||||
</p>
|
||||
<p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
|
||||
是否前往商店安装
|
||||
<span class="font-semibold text-slate-700 dark:text-slate-200"
|
||||
>APM</span
|
||||
>
|
||||
?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end gap-3">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
|
||||
@click="handleClose"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-brand to-brand-dark px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-brand/30 transition hover:-translate-y-0.5"
|
||||
@click="handleConfirm"
|
||||
>
|
||||
<i class="fas fa-download"></i>
|
||||
前往安装
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
show: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "close"): void;
|
||||
(e: "confirm"): void;
|
||||
}>();
|
||||
|
||||
const handleClose = () => {
|
||||
emit("close");
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
emit("confirm");
|
||||
};
|
||||
</script>
|
||||
@@ -11,6 +11,7 @@ export const APM_STORE_STATS_BASE_URL: string =
|
||||
export const currentApp = ref<App | null>(null);
|
||||
export const currentAppSparkInstalled = ref(false);
|
||||
export const currentAppApmInstalled = ref(false);
|
||||
export const showApmInstallDialog = ref(false);
|
||||
|
||||
export const currentStoreMode = ref<StoreMode>("hybrid");
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@ import {
|
||||
currentApp,
|
||||
currentAppSparkInstalled,
|
||||
currentAppApmInstalled,
|
||||
showApmInstallDialog,
|
||||
} from "../global/storeConfig";
|
||||
import { APM_STORE_BASE_URL } from "../global/storeConfig";
|
||||
import { downloads, getNextDownloadId } from "../global/downloadStatus";
|
||||
@@ -28,14 +29,8 @@ export const handleInstall = async (appObj?: App) => {
|
||||
if (targetApp.origin === "apm") {
|
||||
const hasApm = await window.ipcRenderer.invoke("check-apm-available");
|
||||
if (!hasApm) {
|
||||
// 发送事件到主进程显示 APM 安装对话框
|
||||
const { success, cancelled } = await window.ipcRenderer.invoke(
|
||||
"show-apm-install-dialog",
|
||||
);
|
||||
if (!success || cancelled) {
|
||||
// 用户取消或未安装成功,不继续安装应用
|
||||
return;
|
||||
}
|
||||
showApmInstallDialog.value = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -119,14 +114,8 @@ export const handleUpgrade = async (app: App) => {
|
||||
if (app.origin === "apm") {
|
||||
const hasApm = await window.ipcRenderer.invoke("check-apm-available");
|
||||
if (!hasApm) {
|
||||
// 发送事件到主进程显示 APM 安装对话框
|
||||
const { success, cancelled } = await window.ipcRenderer.invoke(
|
||||
"show-apm-install-dialog",
|
||||
);
|
||||
if (!success || cancelled) {
|
||||
// 用户取消或未安装成功,不继续更新应用
|
||||
return;
|
||||
}
|
||||
showApmInstallDialog.value = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user