feat: 添加APM安装确认弹窗并重构APM检查流程

1. 新增全局状态控制APM安装弹窗显示 2. 新建ApmInstallConfirmModal弹窗组件 3. 将主进程的APM安装弹窗逻辑迁移到前端Vue组件 4. 更新package.json版本到5.1.0 5. 简化安装和升级流程中的APM检查逻辑
2026-06-21 21:53:50 +08:00 · 2026-05-12 21:54:47 +08:00
parent 8c8b53fc29
commit 8a5f8d154f
6 changed files with 133 additions and 131 deletions
@@ -1,4 +1,4 @@
-import { BrowserWindow, dialog, ipcMain, WebContents } from "electron";
+import { ipcMain, WebContents } from "electron";
 import { spawn, ChildProcess, exec } from "node:child_process";
 import { promisify } from "node:util";
 import fs from "node:fs";
@@ -114,25 +114,6 @@ const checkSparkAvailable = async (): Promise<boolean> => {
  return found;
 };

-/** 提权执行 shell-caller aptss install apm 安装 APM，安装后需用户重启电脑 */
-const runInstallApm = async (superUserCmd: string): Promise<boolean> => {
-  const execCommand = superUserCmd || SHELL_CALLER_PATH;
-  const execParams = superUserCmd
-    ? [SHELL_CALLER_PATH, "aptss", "install", "apm"]
-    : [SHELL_CALLER_PATH, "aptss", "install", "apm"];
-  logger.info(`执行安装 APM: ${execCommand} ${execParams.join(" ")}`);
-  const { code, stdout, stderr } = await runCommandCapture(
-    execCommand,
-    execParams,
-  );
-  if (code !== 0) {
-    logger.error({ code, stdout, stderr }, "安装 APM 失败");
-    return false;
-  }
-  logger.info("安装 APM 完成");
-  return true;
-};
-
 const parseUpgradableList = (output: string) => {
  const apps: Array<{
    pkgname: string;
@@ -215,61 +196,23 @@ ipcMain.on("queue-install", async (event, download_json) => {
  const execParams = [];
  const downloadDir = `/tmp/spark-store/download/${pkgname}`;

-  // APM 应用：若本机没有 apm 命令，弹窗提示并可选提权安装 APM（安装后需重启电脑）
+  // APM 应用：若本机没有 apm 命令，通知前端弹窗引导安装 APM
  if (origin === "apm") {
    const hasApm = await checkApmAvailable();
    if (!hasApm) {
-      const win = BrowserWindow.fromWebContents(webContents);
-      const { response } = await dialog.showMessageBox(win ?? undefined, {
-        type: "question",
-        title: "需要安装 APM",
-        message: "此应用需要使用 APM 安装。",
-        detail:
-          "APM是星火应用商店的容器包管理器，安装APM后方可安装此应用，是否确认安装？",
-        buttons: ["确认", "取消"],
-        defaultId: 0,
-        cancelId: 1,
+      webContents.send("trigger-apm-install-dialog");
+      webContents.send("install-complete", {
+        id,
+        success: false,
+        time: Date.now(),
+        exitCode: -1,
+        message: JSON.stringify({
+          message: "未安装 APM，无法继续安装此应用",
+          stdout: "",
+          stderr: "",
+        }),
      });
-      if (response !== 0) {
-        webContents.send("install-complete", {
-          id,
-          success: false,
-          time: Date.now(),
-          exitCode: -1,
-          message: JSON.stringify({
-            message: "用户取消安装 APM，无法继续安装此应用",
-            stdout: "",
-            stderr: "",
-          }),
-        });
-        return;
-      }
-      const installApmOk = await runInstallApm(superUserCmd);
-      if (!installApmOk) {
-        webContents.send("install-complete", {
-          id,
-          success: false,
-          time: Date.now(),
-          exitCode: -1,
-          message: JSON.stringify({
-            message: "安装 APM 失败，请检查网络或权限后重试",
-            stdout: "",
-            stderr: "",
-          }),
-        });
-        return;
-      } else {
-        // 安装APM成功，提示用户已安装成功，需要重启后方可展示应用
-        await dialog.showMessageBox(win ?? undefined, {
-          type: "info",
-          title: "APM 安装成功",
-          message: "恭喜您，APM 已成功安装",
-          detail:
-            "恭喜您，APM 已成功安装！您的应用已在安装中～\n首次安装APM后，需要重启电脑后方可在启动器展示应用。您可在应用安装完毕后择机重启电脑\n若您需要立即使用应用，可在应用安装后先在应用商店中打开您的应用。",
-          buttons: ["确定"],
-          defaultId: 0,
-        });
-      }
+      return;
    }
  }

@@ -1089,51 +1032,11 @@ ipcMain.handle("check-spark-available", async () => {
 });

 // 显示 APM 安装对话框（在点击安装按钮时提前检查）
+// 前端已改为 Vue 弹窗，此后端处理仅作为兜底
 ipcMain.handle("show-apm-install-dialog", async (event) => {
  const webContents = event.sender;
-  const win = BrowserWindow.fromWebContents(webContents);
-  const superUserCmd = await checkSuperUserCommand();
-
-  const { response } = await dialog.showMessageBox(win ?? undefined, {
-    type: "question",
-    title: "需要安装 APM",
-    message: "此应用需要使用 APM 安装。",
-    detail:
-      "APM 是星火应用商店的软件包兼容工具，此应用使用星火 APM 提供支持，安装APM后方可安装此应用，是否确认安装？",
-    buttons: ["确认", "取消"],
-    defaultId: 0,
-    cancelId: 1,
-  });
-
-  if (response !== 0) {
-    return { success: false, cancelled: true };
-  }
-
-  const installApmOk = await runInstallApm(superUserCmd);
-  if (!installApmOk) {
-    await dialog.showMessageBox(win ?? undefined, {
-      type: "error",
-      title: "安装失败",
-      message: "安装 APM 失败",
-      detail: "请检查网络或权限后重试",
-      buttons: ["确定"],
-      defaultId: 0,
-    });
-    return { success: false, cancelled: false };
-  }
-
-  // 安装APM成功，提示用户已安装成功，需要重启后方可展示应用
-  await dialog.showMessageBox(win ?? undefined, {
-    type: "info",
-    title: "APM 安装成功",
-    message: "恭喜您，APM 已成功安装",
-    detail:
-      "恭喜您，APM 已成功安装！\n首次安装APM后，需要重启电脑后方可使用全部功能。您可在应用安装完毕后择机重启电脑。",
-    buttons: ["确定"],
-    defaultId: 0,
-  });
-
-  return { success: true, cancelled: false };
+  webContents.send("trigger-apm-install-dialog");
+  return { success: false, cancelled: true };
 });

 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1,6 +1,6 @@
 {
  "name": "spark-store",
-  "version": "5.0.1",
+  "version": "5.1.0",
  "main": "dist-electron/main/index.js",
  "description": "Client for Spark App Store",
  "author": "elysia-best <elysia-best@simplelinux.cn.eu.org>",
@@ -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;
    }
  }