refactor: improve code formatting and consistency across components

- Updated button and span elements in ThemeToggle.vue and TopActions.vue for better readability. - Enhanced UninstallConfirmModal.vue and UpdateAppsModal.vue with consistent indentation and spacing. - Refactored downloadStatus.ts and storeConfig.ts for improved code clarity. - Standardized string quotes and spacing in typedefinition.ts and processInstall.ts. - Ensured consistent use of arrow functions and improved variable declarations throughout the codebase.
2026-04-26 01:10:16 +08:00 · 2026-02-12 18:32:41 +08:00
parent e11740ad4c
commit 6622e70033
29 changed files with 1681 additions and 1042 deletions
--- a/electron/electron-env.d.ts
+++ b/electron/electron-env.d.ts
@@ -2,7 +2,7 @@

 declare namespace NodeJS {
  interface ProcessEnv {
-    VSCODE_DEBUG?: 'true'
+    VSCODE_DEBUG?: "true";
    /**
     * The built directory structure
     *
@@ -16,8 +16,8 @@ declare namespace NodeJS {
     * │ └── index.html    > Electron-Renderer
     * ```
     */
-    APP_ROOT: string
+    APP_ROOT: string;
    /** /dist/ or /public/ */
-    VITE_PUBLIC: string
+    VITE_PUBLIC: string;
  }
 }
--- a/electron/global.ts
+++ b/electron/global.ts
@@ -1,2 +1,2 @@
-import { ref } from 'vue';
-export const isLoaded = ref(false);
+import { ref } from "vue";
+export const isLoaded = ref(false);
--- a/electron/main/backend/install-manager.ts
+++ b/electron/main/backend/install-manager.ts
@@ -1,11 +1,11 @@
-import { ipcMain, WebContents } from 'electron';
-import { spawn, ChildProcess, exec } from 'node:child_process';
-import { promisify } from 'node:util';
-import pino from 'pino';
+import { ipcMain, WebContents } from "electron";
+import { spawn, ChildProcess, exec } from "node:child_process";
+import { promisify } from "node:util";
+import pino from "pino";

-import { ChannelPayload, InstalledAppInfo } from '../../typedefinition';
+import { ChannelPayload, InstalledAppInfo } from "../../typedefinition";

-const logger = pino({ 'name': 'install-manager' });
+const logger = pino({ name: "install-manager" });

 type InstallTask = {
  id: number;
@@ -16,67 +16,69 @@ type InstallTask = {
  webContents: WebContents | null;
 };

-const SHELL_CALLER_PATH = '/opt/apm-store/extras/shell-caller.sh';
+const SHELL_CALLER_PATH = "/opt/apm-store/extras/shell-caller.sh";

 export const tasks = new Map<number, InstallTask>();

 let idle = true; // Indicates if the installation manager is idle

 const checkSuperUserCommand = async (): Promise<string> => {
-  let superUserCmd = '';
+  let superUserCmd = "";
  const execAsync = promisify(exec);
  if (process.getuid && process.getuid() !== 0) {
-    const { stdout, stderr } = await execAsync('which /usr/bin/pkexec');
+    const { stdout, stderr } = await execAsync("which /usr/bin/pkexec");
    if (stderr) {
-      logger.error('没有找到 pkexec 命令');
+      logger.error("没有找到 pkexec 命令");
      return;
    }
    logger.info(`找到提升权限命令: ${stdout.trim()}`);
    superUserCmd = stdout.trim();

    if (superUserCmd.length === 0) {
-      logger.error('没有找到提升权限的命令 pkexec!');
+      logger.error("没有找到提升权限的命令 pkexec!");
    }
  }
  return superUserCmd;
-}
+};

 const runCommandCapture = async (execCommand: string, execParams: string[]) => {
-  return await new Promise<{ code: number; stdout: string; stderr: string }>((resolve) => {
-    const child = spawn(execCommand, execParams, {
-      shell: true,
-      env: process.env
-    });
+  return await new Promise<{ code: number; stdout: string; stderr: string }>(
+    (resolve) => {
+      const child = spawn(execCommand, execParams, {
+        shell: true,
+        env: process.env,
+      });

-    let stdout = '';
-    let stderr = '';
+      let stdout = "";
+      let stderr = "";

-    child.stdout?.on('data', (data) => {
-      stdout += data.toString();
-    });
+      child.stdout?.on("data", (data) => {
+        stdout += data.toString();
+      });

-    child.stderr?.on('data', (data) => {
-      stderr += data.toString();
-    });
+      child.stderr?.on("data", (data) => {
+        stderr += data.toString();
+      });

-    child.on('error', (err) => {
-      resolve({ code: -1, stdout, stderr: err.message });
-    });
+      child.on("error", (err) => {
+        resolve({ code: -1, stdout, stderr: err.message });
+      });

-    child.on('close', (code) => {
-      resolve({ code: typeof code === 'number' ? code : -1, stdout, stderr });
-    });
-  });
+      child.on("close", (code) => {
+        resolve({ code: typeof code === "number" ? code : -1, stdout, stderr });
+      });
+    },
+  );
 };

 const parseInstalledList = (output: string) => {
  const apps: Array<InstalledAppInfo> = [];
-  const lines = output.split('\n');
+  const lines = output.split("\n");
  for (const line of lines) {
    const trimmed = line.trim();
    if (!trimmed) continue;
-    if (trimmed.startsWith('Listing')) continue;
-    if (trimmed.startsWith('[INFO]')) continue;
+    if (trimmed.startsWith("Listing")) continue;
+    if (trimmed.startsWith("[INFO]")) continue;

    const match = trimmed.match(/^(\S+)\/\S+,\S+\s+(\S+)\s+(\S+)\s+\[(.+)\]$/);
    if (!match) continue;
@@ -85,32 +87,40 @@ const parseInstalledList = (output: string) => {
      version: match[2],
      arch: match[3],
      flags: match[4],
-      raw: trimmed
+      raw: trimmed,
    });
  }
  return apps;
 };

 const parseUpgradableList = (output: string) => {
-  const apps: Array<{ pkgname: string; newVersion: string; currentVersion: string; raw: string }> = [];
-  const lines = output.split('\n');
+  const apps: Array<{
+    pkgname: string;
+    newVersion: string;
+    currentVersion: string;
+    raw: string;
+  }> = [];
+  const lines = output.split("\n");
  for (const line of lines) {
    const trimmed = line.trim();
    if (!trimmed) continue;
-    if (trimmed.startsWith('Listing')) continue;
-    if (trimmed.startsWith('[INFO]')) continue;
-    if (trimmed.includes('=') && !trimmed.includes('/')) continue;
+    if (trimmed.startsWith("Listing")) continue;
+    if (trimmed.startsWith("[INFO]")) continue;
+    if (trimmed.includes("=") && !trimmed.includes("/")) continue;

-    if (!trimmed.includes('/')) continue;
+    if (!trimmed.includes("/")) continue;

    const tokens = trimmed.split(/\s+/);
    if (tokens.length < 2) continue;
    const pkgToken = tokens[0];
-    const pkgname = pkgToken.split('/')[0];
-    const newVersion = tokens[1] || '';
-    const currentMatch = trimmed.match(/\[(?:upgradable from|from):\s*([^\]\s]+)\]/i);
-    const currentToken = tokens[5] || '';
-    const currentVersion = currentMatch?.[1] || currentToken.replace('[', '').replace(']', '');
+    const pkgname = pkgToken.split("/")[0];
+    const newVersion = tokens[1] || "";
+    const currentMatch = trimmed.match(
+      /\[(?:upgradable from|from):\s*([^\]\s]+)\]/i,
+    );
+    const currentToken = tokens[5] || "";
+    const currentVersion =
+      currentMatch?.[1] || currentToken.replace("[", "").replace("]", "");

    if (!pkgname) continue;
    apps.push({ pkgname, newVersion, currentVersion, raw: trimmed });
@@ -119,30 +129,30 @@ const parseUpgradableList = (output: string) => {
 };

 // Listen for download requests from renderer process
-ipcMain.on('queue-install', async (event, download_json) => {
+ipcMain.on("queue-install", async (event, download_json) => {
  const download = JSON.parse(download_json);
  const { id, pkgname } = download || {};

  if (!id || !pkgname) {
-    logger.warn('passed arguments missing id or pkgname');
+    logger.warn("passed arguments missing id or pkgname");
    return;
  }

  logger.info(`收到下载任务: ${id},  软件包名称: ${pkgname}`);
-  
+
  // 避免重复添加同一任务，但允许重试下载
  if (tasks.has(id) && !download.retry) {
-    tasks.get(id)?.webContents.send('install-log', {
+    tasks.get(id)?.webContents.send("install-log", {
      id,
      time: Date.now(),
-      message: `任务id： ${id} 已在列表中，忽略重复添加`
+      message: `任务id： ${id} 已在列表中，忽略重复添加`,
    });
-    tasks.get(id)?.webContents.send('install-complete', {
+    tasks.get(id)?.webContents.send("install-complete", {
      id: id,
      success: false,
      time: Date.now(),
      exitCode: -1,
-      message: `{"message":"任务id： ${id} 已在列表中，忽略重复添加","stdout":"","stderr":""}`
+      message: `{"message":"任务id： ${id} 已在列表中，忽略重复添加","stdout":"","stderr":""}`,
    });
    return;
  }
@@ -151,7 +161,7 @@ ipcMain.on('queue-install', async (event, download_json) => {

  // 开始组装安装命令
  const superUserCmd = await checkSuperUserCommand();
-  let execCommand = '';
+  let execCommand = "";
  const execParams = [];
  if (superUserCmd.length > 0) {
    execCommand = superUserCmd;
@@ -159,7 +169,7 @@ ipcMain.on('queue-install', async (event, download_json) => {
  } else {
    execCommand = SHELL_CALLER_PATH;
  }
-  execParams.push('apm', 'install', '-y', pkgname);
+  execParams.push("apm", "install", "-y", pkgname);

  const task: InstallTask = {
    id,
@@ -167,7 +177,7 @@ ipcMain.on('queue-install', async (event, download_json) => {
    execCommand,
    execParams,
    process: null,
-    webContents
+    webContents,
  };
  tasks.set(id, task);
  if (idle) processNextInQueue(0);
@@ -179,53 +189,53 @@ function processNextInQueue(index: number) {
  idle = false;
  const task = Array.from(tasks.values())[index];
  const webContents = task.webContents;
-  let stdoutData = '';
-  let stderrData = '';
+  let stdoutData = "";
+  let stderrData = "";

-  webContents.send('install-status', {
+  webContents.send("install-status", {
    id: task.id,
    time: Date.now(),
-    message: 'installing'
-  })
-  webContents.send('install-log', {
-    id: task.id,
-    time: Date.now(),
-    message: `开始执行: ${task.execCommand} ${task.execParams.join(' ')}`
+    message: "installing",
  });
-  logger.info(`启动安装命令: ${task.execCommand} ${task.execParams.join(' ')}`);
+  webContents.send("install-log", {
+    id: task.id,
+    time: Date.now(),
+    message: `开始执行: ${task.execCommand} ${task.execParams.join(" ")}`,
+  });
+  logger.info(`启动安装命令: ${task.execCommand} ${task.execParams.join(" ")}`);

  const child = spawn(task.execCommand, task.execParams, {
    shell: true,
-    env: process.env
+    env: process.env,
  });
  task.process = child;

  // 监听 stdout
-  child.stdout.on('data', (data) => {
+  child.stdout.on("data", (data) => {
    stdoutData += data.toString();
-    webContents.send('install-log', {
+    webContents.send("install-log", {
      id: task.id,
      time: Date.now(),
-      message: data.toString()
+      message: data.toString(),
    });
  });

  // 监听 stderr
-  child.stderr.on('data', (data) => {
+  child.stderr.on("data", (data) => {
    stderrData += data.toString();
-    webContents.send('install-log', {
+    webContents.send("install-log", {
      id: task.id,
      time: Date.now(),
-      message: data.toString()
+      message: data.toString(),
    });
  });
-  child.on('close', (code) => {
+  child.on("close", (code) => {
    const success = code === 0;
    // 拼接json消息
    const messageJSONObj = {
-      message: success ? '安装完成' : `安装失败，退出码 ${code}`,
+      message: success ? "安装完成" : `安装失败，退出码 ${code}`,
      stdout: stdoutData,
-      stderr: stderrData
+      stderr: stderrData,
    };

    if (success) {
@@ -234,42 +244,45 @@ function processNextInQueue(index: number) {
      logger.error(messageJSONObj);
    }

-    webContents.send('install-complete', {
+    webContents.send("install-complete", {
      id: task.id,
      success: success,
      time: Date.now(),
      exitCode: code,
-      message: JSON.stringify(messageJSONObj)
+      message: JSON.stringify(messageJSONObj),
    });
    tasks.delete(task.id);
    idle = true;
-    if (tasks.size > 0)
-      processNextInQueue(0);
+    if (tasks.size > 0) processNextInQueue(0);
  });
 }

-ipcMain.handle('check-installed', async (_event, pkgname: string) => {
+ipcMain.handle("check-installed", async (_event, pkgname: string) => {
  if (!pkgname) {
-    logger.warn('check-installed missing pkgname');
+    logger.warn("check-installed missing pkgname");
    return false;
  }
  let isInstalled = false;

  logger.info(`检查应用是否已安装: ${pkgname}`);

-  const child = spawn(SHELL_CALLER_PATH, ['apm', 'list', '--installed', pkgname], {
-    shell: true,
-    env: process.env
-  });
+  const child = spawn(
+    SHELL_CALLER_PATH,
+    ["apm", "list", "--installed", pkgname],
+    {
+      shell: true,
+      env: process.env,
+    },
+  );

-  let output = '';
-  
-  child.stdout.on('data', (data) => {
+  let output = "";
+
+  child.stdout.on("data", (data) => {
    output += data.toString();
  });
-  
+
  await new Promise<void>((resolve) => {
-    child.on('close', (code) => {
+    child.on("close", (code) => {
      if (code === 0 && output.includes(pkgname)) {
        isInstalled = true;
        logger.info(`应用已安装: ${pkgname}`);
@@ -282,16 +295,16 @@ ipcMain.handle('check-installed', async (_event, pkgname: string) => {
  return isInstalled;
 });

-ipcMain.on('remove-installed', async (_event, pkgname: string) => {
+ipcMain.on("remove-installed", async (_event, pkgname: string) => {
  const webContents = _event.sender;
  if (!pkgname) {
-    logger.warn('remove-installed missing pkgname');
+    logger.warn("remove-installed missing pkgname");
    return;
  }
  logger.info(`卸载已安装应用: ${pkgname}`);
-  
+
  const superUserCmd = await checkSuperUserCommand();
-  let execCommand = '';
+  let execCommand = "";
  const execParams = [];
  if (superUserCmd.length > 0) {
    execCommand = superUserCmd;
@@ -299,25 +312,29 @@ ipcMain.on('remove-installed', async (_event, pkgname: string) => {
  } else {
    execCommand = SHELL_CALLER_PATH;
  }
-  const child = spawn(execCommand, [...execParams, 'apm', 'remove', '-y', pkgname], {
-    shell: true,
-    env: process.env
-  });
-  let output = '';
-  
-  child.stdout.on('data', (data) => {
+  const child = spawn(
+    execCommand,
+    [...execParams, "apm", "remove", "-y", pkgname],
+    {
+      shell: true,
+      env: process.env,
+    },
+  );
+  let output = "";
+
+  child.stdout.on("data", (data) => {
    const chunk = data.toString();
    output += chunk;
-    webContents.send('remove-progress', chunk);
+    webContents.send("remove-progress", chunk);
  });

-  child.on('close', (code) => {
+  child.on("close", (code) => {
    const success = code === 0;
    // 拼接json消息
    const messageJSONObj = {
-      message: success ? '卸载完成' : `卸载失败，退出码 ${code}`,
+      message: success ? "卸载完成" : `卸载失败，退出码 ${code}`,
      stdout: output,
-      stderr: ''
+      stderr: "",
    };

    if (success) {
@@ -326,26 +343,28 @@ ipcMain.on('remove-installed', async (_event, pkgname: string) => {
      logger.error(messageJSONObj);
    }

-    webContents.send('remove-complete', {
+    webContents.send("remove-complete", {
      id: 0,
      success: success,
      time: Date.now(),
      exitCode: code,
-      message: JSON.stringify(messageJSONObj)
+      message: JSON.stringify(messageJSONObj),
    } satisfies ChannelPayload);
  });
 });

-ipcMain.handle('list-upgradable', async () => {
-  const { code, stdout, stderr } = await runCommandCapture(
-    SHELL_CALLER_PATH,
-    ['apm', 'list', '--upgradable']);
+ipcMain.handle("list-upgradable", async () => {
+  const { code, stdout, stderr } = await runCommandCapture(SHELL_CALLER_PATH, [
+    "apm",
+    "list",
+    "--upgradable",
+  ]);
  if (code !== 0) {
    logger.error(`list-upgradable failed: ${stderr || stdout}`);
    return {
      success: false,
      message: stderr || stdout || `list-upgradable failed with code ${code}`,
-      apps: []
+      apps: [],
    };
  }

@@ -353,20 +372,25 @@ ipcMain.handle('list-upgradable', async () => {
  return { success: true, apps };
 });

-ipcMain.handle('list-installed', async () => {
+ipcMain.handle("list-installed", async () => {
  const superUserCmd = await checkSuperUserCommand();
-  const execCommand = superUserCmd.length > 0 ? superUserCmd : SHELL_CALLER_PATH;
-  const execParams = superUserCmd.length > 0
-    ? [SHELL_CALLER_PATH, 'apm', 'list', '--installed']
-    : ['apm', 'list', '--installed'];
+  const execCommand =
+    superUserCmd.length > 0 ? superUserCmd : SHELL_CALLER_PATH;
+  const execParams =
+    superUserCmd.length > 0
+      ? [SHELL_CALLER_PATH, "apm", "list", "--installed"]
+      : ["apm", "list", "--installed"];

-  const { code, stdout, stderr } = await runCommandCapture(execCommand, execParams);
+  const { code, stdout, stderr } = await runCommandCapture(
+    execCommand,
+    execParams,
+  );
  if (code !== 0) {
    logger.error(`list-installed failed: ${stderr || stdout}`);
    return {
      success: false,
      message: stderr || stdout || `list-installed failed with code ${code}`,
-      apps: []
+      apps: [],
    };
  }

@@ -374,19 +398,24 @@ ipcMain.handle('list-installed', async () => {
  return { success: true, apps };
 });

-ipcMain.handle('uninstall-installed', async (_event, pkgname: string) => {
+ipcMain.handle("uninstall-installed", async (_event, pkgname: string) => {
  if (!pkgname) {
-    logger.warn('uninstall-installed missing pkgname');
-    return { success: false, message: 'missing pkgname' };
+    logger.warn("uninstall-installed missing pkgname");
+    return { success: false, message: "missing pkgname" };
  }

  const superUserCmd = await checkSuperUserCommand();
-  const execCommand = superUserCmd.length > 0 ? superUserCmd : SHELL_CALLER_PATH;
-  const execParams = superUserCmd.length > 0
-    ? [SHELL_CALLER_PATH, 'apm', 'remove', '-y', pkgname]
-    : ['apm', 'remove', '-y', pkgname];
+  const execCommand =
+    superUserCmd.length > 0 ? superUserCmd : SHELL_CALLER_PATH;
+  const execParams =
+    superUserCmd.length > 0
+      ? [SHELL_CALLER_PATH, "apm", "remove", "-y", pkgname]
+      : ["apm", "remove", "-y", pkgname];

-  const { code, stdout, stderr } = await runCommandCapture(execCommand, execParams);
+  const { code, stdout, stderr } = await runCommandCapture(
+    execCommand,
+    execParams,
+  );
  const success = code === 0;

  if (success) {
@@ -397,24 +426,28 @@ ipcMain.handle('uninstall-installed', async (_event, pkgname: string) => {

  return {
    success,
-    message: success ? '卸载完成' : (stderr || stdout || `卸载失败，退出码 ${code}`)
+    message: success
+      ? "卸载完成"
+      : stderr || stdout || `卸载失败，退出码 ${code}`,
  };
 });

-ipcMain.handle('launch-app', async (_event, pkgname: string) => {
+ipcMain.handle("launch-app", async (_event, pkgname: string) => {
  if (!pkgname) {
-    logger.warn('No pkgname provided for launch-app');
+    logger.warn("No pkgname provided for launch-app");
  }

  const execCommand = "/opt/apm-store/extras/host-spawn";
-  const execParams = ['/opt/apm-store/extras/apm-launcher', 'launch', pkgname ];
+  const execParams = ["/opt/apm-store/extras/apm-launcher", "launch", pkgname];

-  logger.info(`Launching app: ${pkgname} with command: ${execCommand} ${execParams.join(' ')}`);
+  logger.info(
+    `Launching app: ${pkgname} with command: ${execCommand} ${execParams.join(" ")}`,
+  );

  spawn(execCommand, execParams, {
    shell: false,
    env: process.env,
    detached: true,
-    stdio: 'ignore'
+    stdio: "ignore",
  }).unref();
-});
+});
--- a/electron/main/deeplink.ts
+++ b/electron/main/deeplink.ts
@@ -5,7 +5,7 @@
 import { app } from "electron";
 import pino from "pino";

-const logger = pino({ 'name': 'deeplink.ts' });
+const logger = pino({ name: "deeplink.ts" });
 type Query = Record<string, string>;
 export type Listener = (query: Query) => void;

@@ -52,13 +52,13 @@ export const deepLink = {
  on: (event: string, listener: Listener) => {
    const count = listeners.add(event, listener);
    logger.info(
-      `Deep link: listener added for event ${event}. Total event listeners: ${count}`
+      `Deep link: listener added for event ${event}. Total event listeners: ${count}`,
    );
  },
  off: (event: string, listener: Listener) => {
    const count = listeners.remove(event, listener);
    logger.info(
-      `Deep link: listener removed for event ${event}. Total event listeners: ${count}`
+      `Deep link: listener removed for event ${event}. Total event listeners: ${count}`,
    );
  },
  once: (event: string, listener: Listener) => {
@@ -72,7 +72,7 @@ export const deepLink = {

 export function handleCommandLine(commandLine: string[]) {
  const target = commandLine.find((arg) =>
-    protocols.some((protocol) => arg.startsWith(protocol + "://"))
+    protocols.some((protocol) => arg.startsWith(protocol + "://")),
  );
  if (!target) return;

--- a/electron/main/handle-url-scheme.ts
+++ b/electron/main/handle-url-scheme.ts
@@ -1,9 +1,9 @@
-import { BrowserWindow } from 'electron';
-import { deepLink } from './deeplink';
-import { isLoaded } from '../global';
-import pino from 'pino';
+import { BrowserWindow } from "electron";
+import { deepLink } from "./deeplink";
+import { isLoaded } from "../global";
+import pino from "pino";

-const logger = pino({ 'name': 'handle-url-scheme.ts' });
+const logger = pino({ name: "handle-url-scheme.ts" });

 const pendingActions: Array<() => void> = [];

@@ -24,22 +24,26 @@ new Promise<void>((resolve) => {
 });

 deepLink.on("event", (query) => {
-  logger.info(`Deep link: event "event" fired with query: ${JSON.stringify(query)}`);
+  logger.info(
+    `Deep link: event "event" fired with query: ${JSON.stringify(query)}`,
+  );
 });

 deepLink.on("action", (query) => {
-  logger.info(`Deep link: event "action" fired with query: ${JSON.stringify(query)}`);
-  
+  logger.info(
+    `Deep link: event "action" fired with query: ${JSON.stringify(query)}`,
+  );
+
  const action = () => {
    const win = BrowserWindow.getAllWindows()[0];
    if (!win) return;

-    if (query.cmd === 'update') {
-      win.webContents.send('deep-link-update');
+    if (query.cmd === "update") {
+      win.webContents.send("deep-link-update");
      if (win.isMinimized()) win.restore();
      win.focus();
-    } else if (query.cmd === 'list') {
-      win.webContents.send('deep-link-installed');
+    } else if (query.cmd === "list") {
+      win.webContents.send("deep-link-installed");
      if (win.isMinimized()) win.restore();
      win.focus();
    }
@@ -55,14 +59,16 @@ deepLink.on("action", (query) => {
 });

 deepLink.on("install", (query) => {
-  logger.info(`Deep link: event "install" fired with query: ${JSON.stringify(query)}`);
-  
+  logger.info(
+    `Deep link: event "install" fired with query: ${JSON.stringify(query)}`,
+  );
+
  const action = () => {
    const win = BrowserWindow.getAllWindows()[0];
    if (!win) return;

    if (query.pkg) {
-      win.webContents.send('deep-link-install', query.pkg);
+      win.webContents.send("deep-link-install", query.pkg);
      if (win.isMinimized()) win.restore();
      win.focus();
    }
--- a/electron/main/index.ts
+++ b/electron/main/index.ts
@@ -1,24 +1,23 @@
-import { app, BrowserWindow, ipcMain, Menu, shell, Tray } from 'electron'
-import { fileURLToPath } from 'node:url'
-import path from 'node:path'
-import os from 'node:os'
-import fs from 'node:fs'
-import pino from 'pino'
-import { handleCommandLine } from './deeplink.js'
-import { isLoaded } from '../global.js'
-import { tasks } from './backend/install-manager.js'
-
+import { app, BrowserWindow, ipcMain, Menu, shell, Tray } from "electron";
+import { fileURLToPath } from "node:url";
+import path from "node:path";
+import os from "node:os";
+import fs from "node:fs";
+import pino from "pino";
+import { handleCommandLine } from "./deeplink.js";
+import { isLoaded } from "../global.js";
+import { tasks } from "./backend/install-manager.js";

 // Assure single instance application
 if (!app.requestSingleInstanceLock()) {
  app.exit(0);
 }

-import './backend/install-manager.js'
-import './handle-url-scheme.js'
+import "./backend/install-manager.js";
+import "./handle-url-scheme.js";

-const logger = pino({ 'name': 'index.ts' });
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const logger = pino({ name: "index.ts" });
+const __dirname = path.dirname(fileURLToPath(import.meta.url));

 // The built directory structure
 //
@@ -30,38 +29,38 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url))
 // ├─┬ dist
 // │ └── index.html    > Electron-Renderer
 //
-process.env.APP_ROOT = path.join(__dirname, '../..')
+process.env.APP_ROOT = path.join(__dirname, "../..");

-export const MAIN_DIST = path.join(process.env.APP_ROOT, 'dist-electron')
-export const RENDERER_DIST = path.join(process.env.APP_ROOT, 'dist')
-export const VITE_DEV_SERVER_URL = process.env.VITE_DEV_SERVER_URL
+export const MAIN_DIST = path.join(process.env.APP_ROOT, "dist-electron");
+export const RENDERER_DIST = path.join(process.env.APP_ROOT, "dist");
+export const VITE_DEV_SERVER_URL = process.env.VITE_DEV_SERVER_URL;

 process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL
-  ? path.join(process.env.APP_ROOT, 'public')
-  : RENDERER_DIST
+  ? path.join(process.env.APP_ROOT, "public")
+  : RENDERER_DIST;

 // Disable GPU Acceleration for Windows 7
-if (os.release().startsWith('6.1')) app.disableHardwareAcceleration()
+if (os.release().startsWith("6.1")) app.disableHardwareAcceleration();

 // Set application name for Windows 10+ notifications
-if (process.platform === 'win32') app.setAppUserModelId(app.getName())
+if (process.platform === "win32") app.setAppUserModelId(app.getName());

 if (!app.requestSingleInstanceLock()) {
-  app.quit()
-  process.exit(0)
+  app.quit();
+  process.exit(0);
 }

-let win: BrowserWindow | null = null
-const preload = path.join(__dirname, '../preload/index.mjs')
-const indexHtml = path.join(RENDERER_DIST, 'index.html')
+let win: BrowserWindow | null = null;
+const preload = path.join(__dirname, "../preload/index.mjs");
+const indexHtml = path.join(RENDERER_DIST, "index.html");

 async function createWindow() {
  win = new BrowserWindow({
-    title: 'APM AppStore',
+    title: "APM AppStore",
    width: 1366,
    height: 768,
    autoHideMenuBar: true,
-    icon: path.join(process.env.VITE_PUBLIC, 'favicon.ico'),
+    icon: path.join(process.env.VITE_PUBLIC, "favicon.ico"),
    webPreferences: {
      preload,
      // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
@@ -71,30 +70,31 @@ async function createWindow() {
      // Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
      // contextIsolation: false,
    },
-  })
+  });

-  if (VITE_DEV_SERVER_URL) { // #298
-    win.loadURL(VITE_DEV_SERVER_URL)
+  if (VITE_DEV_SERVER_URL) {
+    // #298
+    win.loadURL(VITE_DEV_SERVER_URL);
    // Open devTool if the app is not packaged
-    win.webContents.openDevTools({mode:'detach'})
+    win.webContents.openDevTools({ mode: "detach" });
  } else {
-    win.loadFile(indexHtml)
+    win.loadFile(indexHtml);
  }

  // Test actively push message to the Electron-Renderer
-  win.webContents.on('did-finish-load', () => {
-    win?.webContents.send('main-process-message', new Date().toLocaleString())
-    logger.info('Renderer process is ready.');
-  })
+  win.webContents.on("did-finish-load", () => {
+    win?.webContents.send("main-process-message", new Date().toLocaleString());
+    logger.info("Renderer process is ready.");
+  });

  // Make all links open with the browser, not with the application
  win.webContents.setWindowOpenHandler(({ url }) => {
-    if (url.startsWith('https:')) shell.openExternal(url)
-    return { action: 'deny' }
-  })
+    if (url.startsWith("https:")) shell.openExternal(url);
+    return { action: "deny" };
+  });
  // win.webContents.on('will-navigate', (event, url) => { }) #344

-  win.on('close', (event) => {
+  win.on("close", (event) => {
    // 截获 close 默认行为
    event.preventDefault();
    // 点击关闭时触发close事件，我们按照之前的思路在关闭时，隐藏窗口，隐藏任务栏窗口
@@ -103,50 +103,52 @@ async function createWindow() {
      win.setSkipTaskbar(true);
    } else {
      // 如果没有下载任务，才允许关闭窗口
-      win.destroy()
+      win.destroy();
    }
-
-  })
+  });
 }

-ipcMain.on('renderer-ready', (event, args) => {
-  logger.info('Received renderer-ready event with args: ' + JSON.stringify(args));
+ipcMain.on("renderer-ready", (event, args) => {
+  logger.info(
+    "Received renderer-ready event with args: " + JSON.stringify(args),
+  );
  isLoaded.value = args.status;
  logger.info(`isLoaded set to: ${isLoaded.value}`);
-})
+});

 app.whenReady().then(() => {
-  createWindow()
-  handleCommandLine(process.argv)
-})
+  createWindow();
+  handleCommandLine(process.argv);
+});

-app.on('window-all-closed', () => {
-  win = null
-  if (process.platform !== 'darwin') app.quit()
-})
+app.on("window-all-closed", () => {
+  win = null;
+  if (process.platform !== "darwin") app.quit();
+});

-app.on('second-instance', () => {
+app.on("second-instance", () => {
  if (win) {
    // Focus on the main window if the user tried to open another
-    if (win.isMinimized()) win.restore()
-    win.focus()
+    if (win.isMinimized()) win.restore();
+    win.focus();
  }
-})
+});

-app.on('activate', () => {
-  const allWindows = BrowserWindow.getAllWindows()
+app.on("activate", () => {
+  const allWindows = BrowserWindow.getAllWindows();
  if (allWindows.length) {
-    allWindows[0].focus()
+    allWindows[0].focus();
  } else {
-    createWindow()
+    createWindow();
  }
-})
+});

 // 设置托盘
 // 获取图标路径
 function getIconPath() {
  let iconPath = "";
-    const iconFile = process.platform === "win32" ? "amber-pm-logo.ico" : "amber-pm-logo.png"; // 图标文件名，linux下需要png格式，不然会不显示
+  const iconFile =
+    process.platform === "win32" ? "amber-pm-logo.ico" : "amber-pm-logo.png"; // 图标文件名，linux下需要png格式，不然会不显示
  // 判断是否在打包模式
  if (app.isPackaged) {
    // 打包模式
@@ -170,31 +172,35 @@ function getIconPath() {

 let tray = null;
 app.whenReady().then(() => {
-    tray = new Tray(getIconPath());
-    const contextMenu = Menu.buildFromTemplate([{
-        label: '显示主界面',
-        click: () => { win.show() }
+  tray = new Tray(getIconPath());
+  const contextMenu = Menu.buildFromTemplate([
+    {
+      label: "显示主界面",
+      click: () => {
+        win.show();
+      },
    },
    {
-        label: '退出程序',
-        click: () => { win.destroy() }
+      label: "退出程序",
+      click: () => {
+        win.destroy();
+      },
+    },
+  ]);
+  tray.setToolTip("APM 应用商店");
+  tray.setContextMenu(contextMenu);
+  // 双击触发
+  tray.on("click", () => {
+    // 双击通知区图标实现应用的显示或隐藏
+    if (win.isVisible()) {
+      win.hide();
+      win.setSkipTaskbar(true);
+    } else {
+      win.show();
+      win.setSkipTaskbar(false);
    }
-    ]);
-    tray.setToolTip('APM 应用商店')
-    tray.setContextMenu(contextMenu)
-    // 双击触发
-    tray.on('click', () => {
-        // 双击通知区图标实现应用的显示或隐藏
-        if (win.isVisible()) {
-            win.hide();
-            win.setSkipTaskbar(true);
-        } else {
-            win.show();
-            win.setSkipTaskbar(false);
-        }
-    });
-})
-
+  });
+});

 // New window example arg: new windows url
 // ipcMain.handle('open-win', (_, arg) => {
--- a/electron/preload/index.ts
+++ b/electron/preload/index.ts
@@ -1,66 +1,70 @@
-import { ipcRenderer, contextBridge } from 'electron'
+import { ipcRenderer, contextBridge } from "electron";

 // --------- Expose some API to the Renderer process ---------
-contextBridge.exposeInMainWorld('ipcRenderer', {
+contextBridge.exposeInMainWorld("ipcRenderer", {
  on(...args: Parameters<typeof ipcRenderer.on>) {
-    const [channel, listener] = args
-    return ipcRenderer.on(channel, (event, ...args) => listener(event, ...args))
+    const [channel, listener] = args;
+    return ipcRenderer.on(channel, (event, ...args) =>
+      listener(event, ...args),
+    );
  },
  off(...args: Parameters<typeof ipcRenderer.off>) {
-    const [channel, ...omit] = args
-    return ipcRenderer.off(channel, ...omit)
+    const [channel, ...omit] = args;
+    return ipcRenderer.off(channel, ...omit);
  },
  send(...args: Parameters<typeof ipcRenderer.send>) {
-    const [channel, ...omit] = args
-    return ipcRenderer.send(channel, ...omit)
+    const [channel, ...omit] = args;
+    return ipcRenderer.send(channel, ...omit);
  },
  invoke(...args: Parameters<typeof ipcRenderer.invoke>) {
-    const [channel, ...omit] = args
-    return ipcRenderer.invoke(channel, ...omit)
+    const [channel, ...omit] = args;
+    return ipcRenderer.invoke(channel, ...omit);
  },

  // You can expose other APTs you need here.
  // ...
-})
+});

-contextBridge.exposeInMainWorld('apm_store', {
+contextBridge.exposeInMainWorld("apm_store", {
  arch: (() => {
    const arch = process.arch;
-    if (arch === 'x64') {
-      return 'amd64' + '-apm';
+    if (arch === "x64") {
+      return "amd64" + "-apm";
    } else {
-      return arch + '-apm';
+      return arch + "-apm";
    }
-  })()
+  })(),
 });

 // --------- Preload scripts loading ---------
-function domReady(condition: DocumentReadyState[] = ['complete', 'interactive']) {
+function domReady(
+  condition: DocumentReadyState[] = ["complete", "interactive"],
+) {
  return new Promise((resolve) => {
    if (condition.includes(document.readyState)) {
-      resolve(true)
+      resolve(true);
    } else {
-      document.addEventListener('readystatechange', () => {
+      document.addEventListener("readystatechange", () => {
        if (condition.includes(document.readyState)) {
-          resolve(true)
+          resolve(true);
        }
-      })
+      });
    }
-  })
+  });
 }

 const safeDOM = {
  append(parent: HTMLElement, child: HTMLElement) {
-    if (!Array.from(parent.children).find(e => e === child)) {
-      return parent.appendChild(child)
+    if (!Array.from(parent.children).find((e) => e === child)) {
+      return parent.appendChild(child);
    }
  },
  remove(parent: HTMLElement, child: HTMLElement) {
-    if (Array.from(parent.children).find(e => e === child)) {
-      return parent.removeChild(child)
+    if (Array.from(parent.children).find((e) => e === child)) {
+      return parent.removeChild(child);
    }
  },
-}
+};

 /**
 * https://tobiasahlin.com/spinkit
@@ -69,7 +73,7 @@ const safeDOM = {
 * https://matejkustec.github.io/SpinThatShit
 */
 function useLoading() {
-  const className = `loaders-css__square-spin`
+  const className = `loaders-css__square-spin`;
  const styleContent = `
@keyframes square-spin {
  25% { transform: perspective(100px) rotateX(180deg) rotateY(0); }
@@ -96,35 +100,34 @@ function useLoading() {
  background: #282c34;
  z-index: 9;
 }
-    `
-  const oStyle = document.createElement('style')
-  const oDiv = document.createElement('div')
+    `;
+  const oStyle = document.createElement("style");
+  const oDiv = document.createElement("div");

-  oStyle.id = 'app-loading-style'
-  oStyle.innerHTML = styleContent
-  oDiv.className = 'app-loading-wrap'
-  oDiv.innerHTML = `<div class="${className}"><div></div></div>`
+  oStyle.id = "app-loading-style";
+  oStyle.innerHTML = styleContent;
+  oDiv.className = "app-loading-wrap";
+  oDiv.innerHTML = `<div class="${className}"><div></div></div>`;

  return {
    appendLoading() {
-      safeDOM.append(document.head, oStyle)
-      safeDOM.append(document.body, oDiv)
+      safeDOM.append(document.head, oStyle);
+      safeDOM.append(document.body, oDiv);
    },
    removeLoading() {
-      safeDOM.remove(document.head, oStyle)
-      safeDOM.remove(document.body, oDiv)
+      safeDOM.remove(document.head, oStyle);
+      safeDOM.remove(document.body, oDiv);
    },
-  }
+  };
 }

 // ----------------------------------------------------------------------

-const { appendLoading, removeLoading } = useLoading()
-domReady().then(appendLoading)
+const { appendLoading, removeLoading } = useLoading();
+domReady().then(appendLoading);

 window.onmessage = (ev) => {
-  if (ev.data.payload === 'removeLoading')
-    removeLoading()
-}
+  if (ev.data.payload === "removeLoading") removeLoading();
+};

-setTimeout(removeLoading, 4999)
+setTimeout(removeLoading, 4999);
--- a/electron/typedefinition.ts
+++ b/electron/typedefinition.ts
@@ -1,14 +1,13 @@
 export interface InstalledAppInfo {
-    pkgname: string;
-    version: string;
-    arch: string;
-    flags: string;
-    raw: string;
+  pkgname: string;
+  version: string;
+  arch: string;
+  flags: string;
+  raw: string;
 }

-
 export type ChannelPayload = {
-    success: boolean;
-    message: string;
-    [k: string]: unknown;
-};
+  success: boolean;
+  message: string;
+  [k: string]: unknown;
+};
--- a/package.json
+++ b/package.json
@@ -27,7 +27,9 @@
    "build:rpm": "vue-tsc --noEmit && vite build --mode production && electron-builder --config electron-builder.yml --linux rpm",
    "build:deb": "vue-tsc --noEmit && vite build --mode production && electron-builder --config electron-builder.yml --linux deb",
    "preview": "vite preview --mode debug",
-    "lint": "eslint --ext .ts,.vue src electron"
+    "lint": "eslint --ext .ts,.vue src electron",
+    "lint:fix": "eslint --ext .ts,.vue src electron --fix",
+    "format": "prettier --write \"src/**/*.{ts,vue}\" \"electron/**/*.{ts,vue}\""
  },
  "devDependencies": {
    "@dotenvx/dotenvx": "^1.51.4",
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,67 +1,148 @@
 <template>
  <div
-    class="flex min-h-screen flex-col bg-slate-50 text-slate-900 transition-colors duration-300 dark:bg-slate-950 dark:text-slate-100 lg:flex-row">
+    class="flex min-h-screen flex-col bg-slate-50 text-slate-900 transition-colors duration-300 dark:bg-slate-950 dark:text-slate-100 lg:flex-row"
+  >
    <aside
-      class="w-full border-b border-slate-200/70 bg-white/80 px-5 py-6 backdrop-blur dark:border-slate-800/70 dark:bg-slate-900/70 lg:sticky lg:top-0 lg:flex lg:h-screen lg:w-72 lg:flex-col lg:border-b-0 lg:border-r">
-      <AppSidebar :categories="categories" :active-category="activeCategory" :category-counts="categoryCounts"
-        :is-dark-theme="isDarkTheme" @toggle-theme="toggleTheme" @select-category="selectCategory" />
+      class="w-full border-b border-slate-200/70 bg-white/80 px-5 py-6 backdrop-blur dark:border-slate-800/70 dark:bg-slate-900/70 lg:sticky lg:top-0 lg:flex lg:h-screen lg:w-72 lg:flex-col lg:border-b-0 lg:border-r"
+    >
+      <AppSidebar
+        :categories="categories"
+        :active-category="activeCategory"
+        :category-counts="categoryCounts"
+        :is-dark-theme="isDarkTheme"
+        @toggle-theme="toggleTheme"
+        @select-category="selectCategory"
+      />
    </aside>

    <main class="flex-1 px-4 py-6 lg:px-10">
-      <AppHeader :search-query="searchQuery" :apps-count="filteredApps.length" @update-search="handleSearchInput"
-        @update="handleUpdate" @list="handleList" />
-      <AppGrid :apps="filteredApps" :loading="loading" @open-detail="openDetail" />
+      <AppHeader
+        :search-query="searchQuery"
+        :apps-count="filteredApps.length"
+        @update-search="handleSearchInput"
+        @update="handleUpdate"
+        @list="handleList"
+      />
+      <AppGrid
+        :apps="filteredApps"
+        :loading="loading"
+        @open-detail="openDetail"
+      />
    </main>

-    <AppDetailModal data-app-modal="detail" :show="showModal" :app="currentApp" :screenshots="screenshots"
-      :isinstalled="currentAppIsInstalled" @close="closeDetail" @install="handleInstall" @remove="requestUninstallFromDetail"
-      @open-preview="openScreenPreview" @open-app="openDownloadedApp" />
+    <AppDetailModal
+      data-app-modal="detail"
+      :show="showModal"
+      :app="currentApp"
+      :screenshots="screenshots"
+      :isinstalled="currentAppIsInstalled"
+      @close="closeDetail"
+      @install="handleInstall"
+      @remove="requestUninstallFromDetail"
+      @open-preview="openScreenPreview"
+      @open-app="openDownloadedApp"
+    />

-    <ScreenPreview :show="showPreview" :screenshots="screenshots" :current-screen-index="currentScreenIndex"
-      @close="closeScreenPreview" @prev="prevScreen" @next="nextScreen" />
+    <ScreenPreview
+      :show="showPreview"
+      :screenshots="screenshots"
+      :current-screen-index="currentScreenIndex"
+      @close="closeScreenPreview"
+      @prev="prevScreen"
+      @next="nextScreen"
+    />

-    <DownloadQueue :downloads="downloads" @pause="pauseDownload" @resume="resumeDownload"
-      @cancel="cancelDownload" @retry="retryDownload" @clear-completed="clearCompletedDownloads"
-      @show-detail="showDownloadDetailModalFunc" />
+    <DownloadQueue
+      :downloads="downloads"
+      @pause="pauseDownload"
+      @resume="resumeDownload"
+      @cancel="cancelDownload"
+      @retry="retryDownload"
+      @clear-completed="clearCompletedDownloads"
+      @show-detail="showDownloadDetailModalFunc"
+    />

-    <DownloadDetail :show="showDownloadDetailModal" :download="currentDownload" @close="closeDownloadDetail"
-      @pause="pauseDownload" @resume="resumeDownload" @cancel="cancelDownload" @retry="retryDownload"
-      @open-app="openDownloadedApp" />
+    <DownloadDetail
+      :show="showDownloadDetailModal"
+      :download="currentDownload"
+      @close="closeDownloadDetail"
+      @pause="pauseDownload"
+      @resume="resumeDownload"
+      @cancel="cancelDownload"
+      @retry="retryDownload"
+      @open-app="openDownloadedApp"
+    />

-    <InstalledAppsModal :show="showInstalledModal" :apps="installedApps" :loading="installedLoading"
-      :error="installedError" @close="closeInstalledModal" @refresh="refreshInstalledApps"
-      @uninstall="uninstallInstalledApp" />
+    <InstalledAppsModal
+      :show="showInstalledModal"
+      :apps="installedApps"
+      :loading="installedLoading"
+      :error="installedError"
+      @close="closeInstalledModal"
+      @refresh="refreshInstalledApps"
+      @uninstall="uninstallInstalledApp"
+    />

-    <UpdateAppsModal :show="showUpdateModal" :apps="upgradableApps" :loading="updateLoading"
-      :error="updateError" :has-selected="hasSelectedUpgrades" @close="closeUpdateModal"
-      @refresh="refreshUpgradableApps" @toggle-all="toggleAllUpgrades"
-      @upgrade-selected="upgradeSelectedApps" @upgrade-one="upgradeSingleApp" />
+    <UpdateAppsModal
+      :show="showUpdateModal"
+      :apps="upgradableApps"
+      :loading="updateLoading"
+      :error="updateError"
+      :has-selected="hasSelectedUpgrades"
+      @close="closeUpdateModal"
+      @refresh="refreshUpgradableApps"
+      @toggle-all="toggleAllUpgrades"
+      @upgrade-selected="upgradeSelectedApps"
+      @upgrade-one="upgradeSingleApp"
+    />

-    <UninstallConfirmModal :show="showUninstallModal" :app="uninstallTargetApp" @close="closeUninstallModal"
-      @success="onUninstallSuccess" />
+    <UninstallConfirmModal
+      :show="showUninstallModal"
+      :app="uninstallTargetApp"
+      @close="closeUninstallModal"
+      @success="onUninstallSuccess"
+    />
  </div>
 </template>

 <script setup lang="ts">
-import { ref, computed, onMounted, watch, nextTick } from 'vue';
-import axios from 'axios';
-import pino from 'pino';
-import AppSidebar from './components/AppSidebar.vue';
-import AppHeader from './components/AppHeader.vue';
-import AppGrid from './components/AppGrid.vue';
-import AppDetailModal from './components/AppDetailModal.vue';
-import ScreenPreview from './components/ScreenPreview.vue';
-import DownloadQueue from './components/DownloadQueue.vue';
-import DownloadDetail from './components/DownloadDetail.vue';
-import InstalledAppsModal from './components/InstalledAppsModal.vue';
-import UpdateAppsModal from './components/UpdateAppsModal.vue';
-import UninstallConfirmModal from './components/UninstallConfirmModal.vue';
-import { APM_STORE_BASE_URL, currentApp, currentAppIsInstalled } from './global/storeConfig';
-import { downloads, removeDownloadItem, watchDownloadsChange } from './global/downloadStatus';
-import { handleInstall, handleRetry, handleUpgrade } from './modeuls/processInstall';
-import type { App, AppJson, DownloadItem, UpdateAppItem, ChannelPayload } from './global/typedefinition';
-import type { Ref } from 'vue';
-import type { IpcRendererEvent } from 'electron';
+import { ref, computed, onMounted, watch, nextTick } from "vue";
+import axios from "axios";
+import pino from "pino";
+import AppSidebar from "./components/AppSidebar.vue";
+import AppHeader from "./components/AppHeader.vue";
+import AppGrid from "./components/AppGrid.vue";
+import AppDetailModal from "./components/AppDetailModal.vue";
+import ScreenPreview from "./components/ScreenPreview.vue";
+import DownloadQueue from "./components/DownloadQueue.vue";
+import DownloadDetail from "./components/DownloadDetail.vue";
+import InstalledAppsModal from "./components/InstalledAppsModal.vue";
+import UpdateAppsModal from "./components/UpdateAppsModal.vue";
+import UninstallConfirmModal from "./components/UninstallConfirmModal.vue";
+import {
+  APM_STORE_BASE_URL,
+  currentApp,
+  currentAppIsInstalled,
+} from "./global/storeConfig";
+import {
+  downloads,
+  removeDownloadItem,
+  watchDownloadsChange,
+} from "./global/downloadStatus";
+import {
+  handleInstall,
+  handleRetry,
+  handleUpgrade,
+} from "./modeuls/processInstall";
+import type {
+  App,
+  AppJson,
+  DownloadItem,
+  UpdateAppItem,
+  ChannelPayload,
+} from "./global/typedefinition";
+import type { Ref } from "vue";
+import type { IpcRendererEvent } from "electron";
 const logger = pino();

 // Axios 全局配置
@@ -74,8 +155,8 @@ const axiosInstance = axios.create({
 const isDarkTheme = ref(false);
 const categories: Ref<Record<string, string>> = ref({});
 const apps: Ref<App[]> = ref([]);
-const activeCategory = ref('all');
-const searchQuery = ref('');
+const activeCategory = ref("all");
+const searchQuery = ref("");
 const showModal = ref(false);
 const showPreview = ref(false);
 const currentScreenIndex = ref(0);
@@ -86,11 +167,13 @@ const currentDownload: Ref<DownloadItem | null> = ref(null);
 const showInstalledModal = ref(false);
 const installedApps = ref<App[]>([]);
 const installedLoading = ref(false);
-const installedError = ref('');
+const installedError = ref("");
 const showUpdateModal = ref(false);
-const upgradableApps = ref<(App & { selected: boolean; upgrading: boolean })[]>([]);
+const upgradableApps = ref<(App & { selected: boolean; upgrading: boolean })[]>(
+  [],
+);
 const updateLoading = ref(false);
-const updateError = ref('');
+const updateError = ref("");
 const showUninstallModal = ref(false);
 const uninstallTargetApp: Ref<App | null> = ref(null);

@@ -99,19 +182,21 @@ const filteredApps = computed(() => {
  let result = [...apps.value];

  // 按分类筛选
-  if (activeCategory.value !== 'all') {
-    result = result.filter(app => app.category === activeCategory.value);
+  if (activeCategory.value !== "all") {
+    result = result.filter((app) => app.category === activeCategory.value);
  }

  // 按搜索关键词筛选
  if (searchQuery.value.trim()) {
    const q = searchQuery.value.toLowerCase().trim();
-    result = result.filter(app => {
+    result = result.filter((app) => {
      // 兼容可能为 undefined 的情况，虽然类型定义是 string
-      return ((app.name || '').toLowerCase().includes(q) ||
-        (app.pkgname || '').toLowerCase().includes(q) ||
-        (app.tags || '').toLowerCase().includes(q) ||
-        (app.more || '').toLowerCase().includes(q));
+      return (
+        (app.name || "").toLowerCase().includes(q) ||
+        (app.pkgname || "").toLowerCase().includes(q) ||
+        (app.tags || "").toLowerCase().includes(q) ||
+        (app.more || "").toLowerCase().includes(q)
+      );
    });
  }

@@ -120,7 +205,7 @@ const filteredApps = computed(() => {

 const categoryCounts = computed(() => {
  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;
    counts[app.category]++;
  });
@@ -128,17 +213,17 @@ const categoryCounts = computed(() => {
 });

 const hasSelectedUpgrades = computed(() => {
-  return upgradableApps.value.some(app => app.selected);
+  return upgradableApps.value.some((app) => app.selected);
 });

 // 方法
 const syncThemePreference = (enabled: boolean) => {
-  document.documentElement.classList.toggle('dark', enabled);
+  document.documentElement.classList.toggle("dark", enabled);
 };

 const initTheme = () => {
-  const savedTheme = localStorage.getItem('theme');
-  isDarkTheme.value = savedTheme === 'dark';
+  const savedTheme = localStorage.getItem("theme");
+  isDarkTheme.value = savedTheme === "dark";
  syncThemePreference(isDarkTheme.value);
 };

@@ -162,15 +247,19 @@ const openDetail = (app: App) => {

  // 确保模态框显示后滚动到顶部
  nextTick(() => {
-    const modal = document.querySelector('[data-app-modal="detail"] .modal-panel');
+    const modal = document.querySelector(
+      '[data-app-modal="detail"] .modal-panel',
+    );
    if (modal) modal.scrollTop = 0;
  });
 };

 const checkAppInstalled = (app: App) => {
-  window.ipcRenderer.invoke('check-installed', app.pkgname).then((isInstalled: boolean) => {
-    currentAppIsInstalled.value = isInstalled;
-  });
+  window.ipcRenderer
+    .invoke("check-installed", app.pkgname)
+    .then((isInstalled: boolean) => {
+      currentAppIsInstalled.value = isInstalled;
+    });
 };

 const loadScreenshots = (app: App) => {
@@ -230,12 +319,12 @@ const closeUpdateModal = () => {

 const refreshUpgradableApps = async () => {
  updateLoading.value = true;
-  updateError.value = '';
+  updateError.value = "";
  try {
-    const result = await window.ipcRenderer.invoke('list-upgradable');
+    const result = await window.ipcRenderer.invoke("list-upgradable");
    if (!result?.success) {
      upgradableApps.value = [];
-      updateError.value = result?.message || '检查更新失败';
+      updateError.value = result?.message || "检查更新失败";
      return;
    }
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -244,32 +333,34 @@ const refreshUpgradableApps = async () => {
      // 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',
+      name: app.name || app.Name || "",
+      pkgname: app.pkgname || app.Pkgname || "",
+      version: app.newVersion || app.version || "",
+      category: app.category || "unknown",
      selected: false,
-      upgrading: false
+      upgrading: false,
    }));
  } catch (error: unknown) {
    upgradableApps.value = [];
-    updateError.value = (error as Error)?.message || '检查更新失败';
+    updateError.value = (error as Error)?.message || "检查更新失败";
  } finally {
    updateLoading.value = false;
  }
 };

 const toggleAllUpgrades = () => {
-  const shouldSelectAll = !hasSelectedUpgrades.value || upgradableApps.value.some(app => !app.selected);
-  upgradableApps.value = upgradableApps.value.map(app => ({
+  const shouldSelectAll =
+    !hasSelectedUpgrades.value ||
+    upgradableApps.value.some((app) => !app.selected);
+  upgradableApps.value = upgradableApps.value.map((app) => ({
    ...app,
-    selected: shouldSelectAll ? true : false
+    selected: shouldSelectAll ? true : false,
  }));
 };

 const upgradeSingleApp = (app: UpdateAppItem) => {
  if (!app?.pkgname) return;
-  const target = apps.value.find(a => a.pkgname === app.pkgname);
+  const target = apps.value.find((a) => a.pkgname === app.pkgname);
  if (target) {
    handleUpgrade(target);
  } else {
@@ -278,28 +369,28 @@ const upgradeSingleApp = (app: UpdateAppItem) => {
    let minimalApp: App = {
      name: app.pkgname,
      pkgname: app.pkgname,
-      version: app.newVersion || '',
-      category: 'unknown',
-      tags: '',
-      more: '',
-      filename: '',
-      torrent_address: '',
-      author: '',
-      contributor: '',
-      website: '',
-      update: '',
-      size: '',
+      version: app.newVersion || "",
+      category: "unknown",
+      tags: "",
+      more: "",
+      filename: "",
+      torrent_address: "",
+      author: "",
+      contributor: "",
+      website: "",
+      update: "",
+      size: "",
      img_urls: [],
-      icons: '',
-      currentStatus: 'installed'
-    }
+      icons: "",
+      currentStatus: "installed",
+    };
    handleUpgrade(minimalApp);
  }
 };

 const upgradeSelectedApps = () => {
-  const selectedApps = upgradableApps.value.filter(app => app.selected);
-  selectedApps.forEach(app => {
+  const selectedApps = upgradableApps.value.filter((app) => app.selected);
+  selectedApps.forEach((app) => {
    upgradeSingleApp(app);
  });
 };
@@ -315,50 +406,50 @@ const closeInstalledModal = () => {

 const refreshInstalledApps = async () => {
  installedLoading.value = true;
-  installedError.value = '';
+  installedError.value = "";
  try {
-    const result = await window.ipcRenderer.invoke('list-installed');
+    const result = await window.ipcRenderer.invoke("list-installed");
    if (!result?.success) {
      installedApps.value = [];
-      installedError.value = result?.message || '读取已安装应用失败';
+      installedError.value = result?.message || "读取已安装应用失败";
      return;
    }
-      
-    installedApps.value = []
+
+    installedApps.value = [];
    for (const app of result.apps) {
-      let appInfo = apps.value.find(a => a.pkgname === app.pkgname);
+      let appInfo = apps.value.find((a) => a.pkgname === app.pkgname);
      if (appInfo) {
        appInfo.flags = app.flags;
        appInfo.arch = app.arch;
-        appInfo.currentStatus = 'installed';
+        appInfo.currentStatus = "installed";
      } else {
        // 如果在当前应用列表中找不到该应用，创建一个最小的 App 对象
        appInfo = {
          name: app.name || app.pkgname,
          pkgname: app.pkgname,
          version: app.version,
-          category: 'unknown',
-          tags: '',
-          more: '',
-          filename: '',
-          torrent_address: '',
-          author: '',
-          contributor: '',
-          website: '',
-          update: '',
-          size: '',
+          category: "unknown",
+          tags: "",
+          more: "",
+          filename: "",
+          torrent_address: "",
+          author: "",
+          contributor: "",
+          website: "",
+          update: "",
+          size: "",
          img_urls: [],
-          icons: '',
-          currentStatus: 'installed',
+          icons: "",
+          currentStatus: "installed",
          arch: app.arch,
-          flags: app.flags
+          flags: app.flags,
        };
      }
      installedApps.value.push(appInfo);
    }
  } catch (error: unknown) {
    installedApps.value = [];
-    installedError.value = (error as Error)?.message || '读取已安装应用失败';
+    installedError.value = (error as Error)?.message || "读取已安装应用失败";
  } finally {
    installedLoading.value = false;
  }
@@ -366,7 +457,7 @@ const refreshInstalledApps = async () => {

 const requestUninstall = (app: App) => {
  let target = null;
-  target = apps.value.find(a => a.pkgname === app.pkgname) || app;
+  target = apps.value.find((a) => a.pkgname === app.pkgname) || app;

  if (target) {
    uninstallTargetApp.value = target as App;
@@ -399,10 +490,10 @@ const onUninstallSuccess = () => {
 };

 const installCompleteCallback = () => {
-   if (currentApp.value) {
+  if (currentApp.value) {
    checkAppInstalled(currentApp.value);
  }
-}
+};

 watchDownloadsChange(installCompleteCallback);

@@ -412,24 +503,25 @@ const uninstallInstalledApp = (app: App) => {

 // 目前 APM 商店不能暂停下载（因为 APM 本身不支持），但保留这些方法以备将来使用
 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';
+  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(),
-      message: '下载已暂停'
+      message: "下载已暂停",
    });
  }
 };

 // 同理
 const resumeDownload = (id: DownloadItem) => {
-  const download = downloads.value.find(d => d.id === id.id);
-  if (download && download.status === 'paused') {
-    download.status = 'installing'; // previously 'downloading'
+  const download = downloads.value.find((d) => d.id === id.id);
+  if (download && download.status === "paused") {
+    download.status = "installing"; // previously 'downloading'
    download.logs.push({
      time: Date.now(),
-      message: '继续下载...'
+      message: "继续下载...",
    });
    // simulateDownload(download); // removed or undefined?
  }
@@ -437,14 +529,14 @@ const resumeDownload = (id: DownloadItem) => {

 // 同理
 const cancelDownload = (id: DownloadItem) => {
-  const index = downloads.value.findIndex(d => d.id === id.id);
+  const index = downloads.value.findIndex((d) => d.id === id.id);
  if (index !== -1) {
    const download = downloads.value[index];
    // 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.status = "failed"; // Use 'failed' or add 'cancelled' to type if needed. User asked to keep type simple.
    download.logs.push({
      time: Date.now(),
-      message: '下载已取消'
+      message: "下载已取消",
    });
    // 延迟删除，让用户看到取消状态
    setTimeout(() => {
@@ -455,21 +547,21 @@ const cancelDownload = (id: DownloadItem) => {
 };

 const retryDownload = (id: DownloadItem) => {
-  const download = downloads.value.find(d => d.id === id.id);
-  if (download && download.status === 'failed') {
-    download.status = 'queued';
+  const download = downloads.value.find((d) => d.id === id.id);
+  if (download && download.status === "failed") {
+    download.status = "queued";
    download.progress = 0;
    download.downloadedSize = 0;
    download.logs.push({
      time: Date.now(),
-      message: '重新开始下载...'
+      message: "重新开始下载...",
    });
    handleRetry(download);
  }
 };

 const clearCompletedDownloads = () => {
-  downloads.value = downloads.value.filter(d => d.status !== 'completed');
+  downloads.value = downloads.value.filter((d) => d.status !== "completed");
 };

 const showDownloadDetailModalFunc = (download: DownloadItem) => {
@@ -487,12 +579,14 @@ const openDownloadedApp = (pkgname: string) => {
  // openApmStoreUrl(`apmstore://launch?pkg=${encodedPkg}`, {
  //   fallbackText: `打开应用: ${download.pkgname}`
  // });
-  window.ipcRenderer.invoke('launch-app', pkgname);
+  window.ipcRenderer.invoke("launch-app", pkgname);
 };

 const loadCategories = async () => {
  try {
-    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;
  } catch (error) {
    logger.error(`读取 categories.json 失败: ${error}`);
@@ -502,10 +596,12 @@ const loadCategories = async () => {
 const loadApps = async () => {
  loading.value = true;
  try {
-    logger.info('开始加载应用数据...');
-    const promises = Object.keys(categories.value).map(async category => {
+    logger.info("开始加载应用数据...");
+    const promises = Object.keys(categories.value).map(async (category) => {
      try {
-        const response = await axiosInstance.get<AppJson[]>(`/${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 [];
@@ -532,10 +628,13 @@ const loadApps = async () => {
          size: appJson.Size,
          more: appJson.More,
          tags: appJson.Tags,
-          img_urls: typeof appJson.img_urls === 'string' ? JSON.parse(appJson.img_urls) : appJson.img_urls,
+          img_urls:
+            typeof appJson.img_urls === "string"
+              ? JSON.parse(appJson.img_urls)
+              : appJson.img_urls,
          icons: appJson.icons,
          category: category,
-          currentStatus: 'not-installed',
+          currentStatus: "not-installed",
        };
        apps.value.push(normalizedApp);
      });
@@ -559,19 +658,19 @@ onMounted(async () => {
  await loadApps();

  // 设置键盘导航
-  document.addEventListener('keydown', (e) => {
+  document.addEventListener("keydown", (e) => {
    if (showPreview.value) {
-      if (e.key === 'Escape') closeScreenPreview();
-      if (e.key === 'ArrowLeft') prevScreen();
-      if (e.key === 'ArrowRight') nextScreen();
+      if (e.key === "Escape") closeScreenPreview();
+      if (e.key === "ArrowLeft") prevScreen();
+      if (e.key === "ArrowRight") nextScreen();
    }
-    if (showModal.value && e.key === 'Escape') {
+    if (showModal.value && e.key === "Escape") {
      closeDetail();
    }
  });

  // Deep link Handlers
-  window.ipcRenderer.on('deep-link-update', () => {
+  window.ipcRenderer.on("deep-link-update", () => {
    if (loading.value) {
      const stop = watch(loading, (val) => {
        if (!val) {
@@ -584,7 +683,7 @@ onMounted(async () => {
    }
  });

-  window.ipcRenderer.on('deep-link-installed', () => {
+  window.ipcRenderer.on("deep-link-installed", () => {
    if (loading.value) {
      const stop = watch(loading, (val) => {
        if (!val) {
@@ -597,43 +696,48 @@ onMounted(async () => {
    }
  });

-  window.ipcRenderer.on('deep-link-install', (_event: IpcRendererEvent, pkgname: string) => {
-    const tryOpen = () => {
-      const target = apps.value.find(a => a.pkgname === pkgname);
-      if (target) {
-        openDetail(target);
-      } else {
-        logger.warn(`Deep link: app ${pkgname} not found`);
-      }
-    };
-
-    if (loading.value) {
-      const stop = watch(loading, (val) => {
-        if (!val) {
-          tryOpen();
-          stop();
+  window.ipcRenderer.on(
+    "deep-link-install",
+    (_event: IpcRendererEvent, pkgname: string) => {
+      const tryOpen = () => {
+        const target = apps.value.find((a) => a.pkgname === pkgname);
+        if (target) {
+          openDetail(target);
+        } else {
+          logger.warn(`Deep link: app ${pkgname} not found`);
        }
-      });
-    } else {
-      tryOpen();
-    }
-  });
+      };

-  window.ipcRenderer.on('remove-complete', (_event: IpcRendererEvent, payload: ChannelPayload) => {
-    const pkgname = currentApp.value?.pkgname
-    if(payload.success && pkgname){
-      removeDownloadItem(pkgname);
-    }
-  });
+      if (loading.value) {
+        const stop = watch(loading, (val) => {
+          if (!val) {
+            tryOpen();
+            stop();
+          }
+        });
+      } else {
+        tryOpen();
+      }
+    },
+  );

+  window.ipcRenderer.on(
+    "remove-complete",
+    (_event: IpcRendererEvent, payload: ChannelPayload) => {
+      const pkgname = currentApp.value?.pkgname;
+      if (payload.success && pkgname) {
+        removeDownloadItem(pkgname);
+      }
+    },
+  );

-  window.ipcRenderer.send('renderer-ready', { status: true });
-  logger.info('Renderer process is ready!');
+  window.ipcRenderer.send("renderer-ready", { status: true });
+  logger.info("Renderer process is ready!");
 });

 // 观察器
 watch(isDarkTheme, (newVal) => {
-  localStorage.setItem('theme', newVal ? 'dark' : 'light');
+  localStorage.setItem("theme", newVal ? "dark" : "light");
  syncThemePreference(newVal);
 });
 </script>
--- a/src/components/AppCard.vue
+++ b/src/components/AppCard.vue
@@ -1,47 +1,67 @@
 <template>
-  <div @click="openDetail"
-    class="group flex h-full cursor-pointer gap-4 rounded-2xl border border-slate-200/70 bg-white/90 p-4 shadow-sm transition hover:-translate-y-1 hover:border-brand/50 hover:shadow-lg dark:border-slate-800/60 dark:bg-slate-900/60">
+  <div
+    @click="openDetail"
+    class="group flex h-full cursor-pointer gap-4 rounded-2xl border border-slate-200/70 bg-white/90 p-4 shadow-sm transition hover:-translate-y-1 hover:border-brand/50 hover:shadow-lg dark:border-slate-800/60 dark:bg-slate-900/60"
+  >
    <div
-      class="flex h-16 w-16 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-b from-slate-100 to-slate-200 shadow-inner dark:from-slate-800 dark:to-slate-700">
-      <img ref="iconImg" :src="loadedIcon" alt="icon"
-        :class="['h-full w-full object-cover transition-opacity duration-300', isLoaded ? 'opacity-100' : 'opacity-0']" />
+      class="flex h-16 w-16 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-b from-slate-100 to-slate-200 shadow-inner dark:from-slate-800 dark:to-slate-700"
+    >
+      <img
+        ref="iconImg"
+        :src="loadedIcon"
+        alt="icon"
+        :class="[
+          'h-full w-full object-cover transition-opacity duration-300',
+          isLoaded ? 'opacity-100' : 'opacity-0',
+        ]"
+      />
    </div>
    <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="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="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">
+        {{ description }}
+      </div>
    </div>
  </div>
 </template>

 <script setup lang="ts">
-import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue';
-import { APM_STORE_BASE_URL } from '../global/storeConfig';
-import type { App } from '../global/typedefinition';
+import { computed, onMounted, onBeforeUnmount, ref, watch } from "vue";
+import { APM_STORE_BASE_URL } from "../global/storeConfig";
+import type { App } from "../global/typedefinition";

-const props = defineProps<{ 
-  app: App
+const props = defineProps<{
+  app: App;
 }>();

 const emit = defineEmits<{
-  (e: 'open-detail', app: App): void
+  (e: "open-detail", app: App): void;
 }>();

 const iconImg = ref<HTMLImageElement | null>(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 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 `${APM_STORE_BASE_URL}/${window.apm_store.arch}/${props.app.category}/${props.app.pkgname}/icon.png`;
 });

 const description = computed(() => {
-  const more = props.app.more || '';
-  return more.substring(0, 80) + (more.length > 80 ? '...' : '');
+  const more = props.app.more || "";
+  return more.substring(0, 80) + (more.length > 80 ? "..." : "");
 });

 const openDetail = () => {
-  emit('open-detail', props.app);
+  emit("open-detail", props.app);
 };

 let observer: IntersectionObserver | null = null;
@@ -57,24 +77,23 @@ onMounted(() => {
          img.onload = () => {
            loadedIcon.value = iconPath.value;
            isLoaded.value = true;
-            if (observer)
-              observer.unobserve(entry.target);
+            if (observer) 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';
+            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;
-            if (observer)
-              observer.unobserve(entry.target);
+            if (observer) observer.unobserve(entry.target);
          };
          img.src = iconPath.value;
        }
      });
    },
    {
-      rootMargin: '50px', // 提前50px开始加载
-      threshold: 0.01
-    }
+      rootMargin: "50px", // 提前50px开始加载
+      threshold: 0.01,
+    },
  );

  // 观察图标元素
@@ -85,7 +104,8 @@ onMounted(() => {

 // 当 app 变更时重置懒加载状态并重新观察
 watch(iconPath, () => {
-  loadedIcon.value = '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';
+  loadedIcon.value =
+    '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';
  isLoaded.value = false;
  if (observer && iconImg.value) {
    observer.unobserve(iconImg.value);
--- a/src/components/AppDetailModal.vue
+++ b/src/components/AppDetailModal.vue
@@ -1,107 +1,197 @@
 <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" v-bind="attrs"
-        class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-slate-900/70 p-4"
-        @click.self="closeModal">
-      <div class="modal-panel relative w-full max-w-4xl max-h-[85vh] overflow-y-auto scrollbar-nowidth rounded-3xl border border-white/10 bg-white/95 p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900">
+  <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"
+      v-bind="attrs"
+      class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-slate-900/70 p-4"
+      @click.self="closeModal"
+    >
+      <div
+        class="modal-panel relative w-full max-w-4xl max-h-[85vh] overflow-y-auto scrollbar-nowidth rounded-3xl border border-white/10 bg-white/95 p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
+      >
        <div class="flex flex-col gap-4 lg:flex-row lg:items-center">
          <div class="flex flex-1 items-center gap-4">
            <div
-              class="flex h-20 w-20 items-center justify-center overflow-hidden rounded-3xl bg-gradient-to-b from-slate-100 to-slate-200 shadow-inner dark:from-slate-800 dark:to-slate-700">
-              <img v-if="app" :src="iconPath" alt="icon" class="h-full w-full object-cover" />
+              class="flex h-20 w-20 items-center justify-center overflow-hidden rounded-3xl bg-gradient-to-b from-slate-100 to-slate-200 shadow-inner dark:from-slate-800 dark:to-slate-700"
+            >
+              <img
+                v-if="app"
+                :src="iconPath"
+                alt="icon"
+                class="h-full w-full object-cover"
+              />
            </div>
            <div class="space-y-1">
              <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 -->
              </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 class="flex flex-wrap gap-2 lg:ml-auto">
-            <button v-if="!isinstalled" type="button"
+            <button
+              v-if="!isinstalled"
+              type="button"
              class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-r px-4 py-2 text-sm font-semibold text-white shadow-lg disabled:opacity-40 transition hover:-translate-y-0.5"
-              :class="installFeedback ? 'from-emerald-500 to-emerald-600' : 'from-brand to-brand-dark'"
+              :class="
+                installFeedback
+                  ? 'from-emerald-500 to-emerald-600'
+                  : 'from-brand to-brand-dark'
+              "
              @click="handleInstall"
-              :disabled="installFeedback || isCompleted">
-              <i class="fas" :class="installFeedback ? 'fa-check' : 'fa-download'"></i>
+              :disabled="installFeedback || isCompleted"
+            >
+              <i
+                class="fas"
+                :class="installFeedback ? 'fa-check' : 'fa-download'"
+              ></i>
              <span>{{ installBtnText }}</span>
            </button>
            <template v-else>
-              <button type="button"
+              <button
+                type="button"
                class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-r from-brand to-brand-dark px-4 py-2 text-sm font-semibold text-white shadow-lg transition hover:-translate-y-0.5"
-                @click="emit('open-app', app?.pkgname || '')">
+                @click="emit('open-app', app?.pkgname || '')"
+              >
                <i class="fas fa-external-link-alt"></i>
                <span>打开</span>
              </button>
-              <button type="button"
+              <button
+                type="button"
                class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-r from-rose-500 to-rose-600 px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-rose-500/30 disabled:opacity-40 transition hover:-translate-y-0.5"
-                @click="handleRemove">
+                @click="handleRemove"
+              >
                <i class="fas fa-trash"></i>
                <span>卸载</span>
              </button>
            </template>
-            <button type="button"
+            <button
+              type="button"
              class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-200/70 text-slate-500 transition hover:text-slate-900 dark:border-slate-700"
-              @click="closeModal" aria-label="关闭">
+              @click="closeModal"
+              aria-label="关闭"
+            >
              <i class="fas fa-xmark"></i>
            </button>
          </div>
        </div>

        <div
-          class="mt-4 rounded-2xl border border-slate-200/60 bg-slate-50/70 px-4 py-3 text-sm text-slate-600 dark:border-slate-800/60 dark:bg-slate-900/60 dark:text-slate-300">
+          class="mt-4 rounded-2xl border border-slate-200/60 bg-slate-50/70 px-4 py-3 text-sm text-slate-600 dark:border-slate-800/60 dark:bg-slate-900/60 dark:text-slate-300"
+        >
          首次安装 APM 后需要重启系统以在启动器中看到应用入口。可前往
-          <a href="https://gitee.com/amber-ce/amber-pm/releases" target="_blank"
-            class="font-semibold text-brand hover:underline">APM Releases</a>
+          <a
+            href="https://gitee.com/amber-ce/amber-pm/releases"
+            target="_blank"
+            class="font-semibold text-brand hover:underline"
+            >APM Releases</a
+          >
          获取 APM。
        </div>

        <div v-if="screenshots.length" class="mt-6 grid gap-3 sm:grid-cols-2">
-          <img v-for="(screen, index) in screenshots" :key="index" :src="screen" alt="screenshot"
+          <img
+            v-for="(screen, index) in screenshots"
+            :key="index"
+            :src="screen"
+            alt="screenshot"
            class="h-40 w-full cursor-pointer rounded-2xl border border-slate-200/60 object-cover shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:border-slate-800/60"
-            @click="openPreview(index)" @error="hideImage" />
+            @click="openPreview(index)"
+            @error="hideImage"
+          />
        </div>

        <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-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 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-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 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-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 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-sm font-medium text-slate-800 dark:text-slate-200">{{ app.update }}</p>
+          <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-sm font-medium text-slate-800 dark:text-slate-200">
+              {{ app.update }}
+            </p>
          </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>
-            <a :href="app.website" target="_blank"
-              class="text-sm font-medium text-brand hover:underline">{{ app.website }}</a>
+            <a
+              :href="app.website"
+              target="_blank"
+              class="text-sm font-medium text-brand hover:underline"
+              >{{ app.website }}</a
+            >
          </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-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 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-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 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
            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>
@@ -109,10 +199,13 @@
 </template>

 <script setup lang="ts">
-import { computed,useAttrs } from 'vue';
-import { useDownloadItemStatus,useInstallFeedback } from '../global/downloadStatus';
-import { APM_STORE_BASE_URL } from '../global/storeConfig';
-import type { App } from '../global/typedefinition';
+import { computed, useAttrs } from "vue";
+import {
+  useDownloadItemStatus,
+  useInstallFeedback,
+} from "../global/downloadStatus";
+import { APM_STORE_BASE_URL } from "../global/storeConfig";
+import type { App } from "../global/typedefinition";

 const attrs = useAttrs();

@@ -124,46 +217,45 @@ const props = defineProps<{
 }>();

 const emit = defineEmits<{
-  (e: 'close'): void;
-  (e: 'install'): void;
-  (e: 'remove'): void;
-  (e: 'open-preview', index: number): void;
-  (e: 'open-app', pkgname: string ): void;
+  (e: "close"): void;
+  (e: "install"): void;
+  (e: "remove"): void;
+  (e: "open-preview", index: number): void;
+  (e: "open-app", pkgname: string): void;
 }>();

-
 const appPkgname = computed(() => props.app?.pkgname);
 const { installFeedback } = useInstallFeedback(appPkgname);
 const { isCompleted } = useDownloadItemStatus(appPkgname);
 const installBtnText = computed(() => {
  if (isCompleted.value) {
-  // TODO: 似乎有一个时间差，安装好了之后并不是立马就可以从已安装列表看见
+    // TODO: 似乎有一个时间差，安装好了之后并不是立马就可以从已安装列表看见
    return "已安装";
  }
  return installFeedback.value ? "已加入队列" : "安装";
 });
 const iconPath = computed(() => {
-  if (!props.app) return '';
+  if (!props.app) return "";
  return `${APM_STORE_BASE_URL}/${window.apm_store.arch}/${props.app.category}/${props.app.pkgname}/icon.png`;
 });

 const closeModal = () => {
-  emit('close');
+  emit("close");
 };

 const handleInstall = () => {
-  emit('install');
+  emit("install");
 };

 const handleRemove = () => {
-    emit('remove');
-}
+  emit("remove");
+};

 const openPreview = (index: number) => {
-  emit('open-preview', index);
+  emit("open-preview", index);
 };

 const hideImage = (e: Event) => {
-  (e.target as HTMLElement).style.display = 'none';
+  (e.target as HTMLElement).style.display = "none";
 };
 </script>
--- a/src/components/AppGrid.vue
+++ b/src/components/AppGrid.vue
@@ -1,22 +1,42 @@
 <template>
-  <div v-if="!loading" class="mt-6 grid gap-5 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-    <AppCard v-for="(app, index) in apps" :key="index" :app="app" @open-detail="$emit('open-detail', app)" />
+  <div
+    v-if="!loading"
+    class="mt-6 grid gap-5 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"
+  >
+    <AppCard
+      v-for="(app, index) in apps"
+      :key="index"
+      :app="app"
+      @open-detail="$emit('open-detail', app)"
+    />
  </div>
-  <div v-else class="mt-6 grid gap-5 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-    <div v-for="n in 8" :key="n"
-      class="flex gap-4 rounded-2xl border border-slate-200/60 bg-white/80 p-4 shadow-sm dark:border-slate-800/60 dark:bg-slate-900/50">
-      <div class="h-16 w-16 animate-pulse rounded-2xl bg-slate-200 dark:bg-slate-800"></div>
+  <div
+    v-else
+    class="mt-6 grid gap-5 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"
+  >
+    <div
+      v-for="n in 8"
+      :key="n"
+      class="flex gap-4 rounded-2xl border border-slate-200/60 bg-white/80 p-4 shadow-sm dark:border-slate-800/60 dark:bg-slate-900/50"
+    >
+      <div
+        class="h-16 w-16 animate-pulse rounded-2xl bg-slate-200 dark:bg-slate-800"
+      ></div>
      <div class="flex flex-1 flex-col justify-center gap-2">
-        <div class="h-4 w-2/3 animate-pulse rounded-full bg-slate-200 dark:bg-slate-800"></div>
-        <div class="h-3 w-1/2 animate-pulse rounded-full bg-slate-200/80 dark:bg-slate-800/80"></div>
+        <div
+          class="h-4 w-2/3 animate-pulse rounded-full bg-slate-200 dark:bg-slate-800"
+        ></div>
+        <div
+          class="h-3 w-1/2 animate-pulse rounded-full bg-slate-200/80 dark:bg-slate-800/80"
+        ></div>
      </div>
    </div>
  </div>
 </template>

 <script setup lang="ts">
-import AppCard from './AppCard.vue';
-import type { App } from '../global/typedefinition';
+import AppCard from "./AppCard.vue";
+import type { App } from "../global/typedefinition";

 defineProps<{
  apps: App[];
@@ -24,6 +44,6 @@ defineProps<{
 }>();

 defineEmits<{
-  (e: 'open-detail', app: App): void;
+  (e: "open-detail", app: App): void;
 }>();
 </script>
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -5,10 +5,16 @@
      <div class="w-full flex-1">
        <label for="searchBox" class="sr-only">搜索应用</label>
        <div class="relative">
-          <i class="fas fa-search pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
-          <input id="searchBox" v-model="localSearchQuery"
+          <i
+            class="fas fa-search pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"
+          ></i>
+          <input
+            id="searchBox"
+            v-model="localSearchQuery"
            class="w-full rounded-2xl border border-slate-200/70 bg-white/80 py-3 pl-12 pr-4 text-sm text-slate-700 shadow-sm outline-none transition placeholder:text-slate-400 focus:border-brand/50 focus:ring-4 focus:ring-brand/10 dark:border-slate-800/70 dark:bg-slate-900/60 dark:text-slate-200"
-            placeholder="搜索应用名 / 包名 / 标签" @input="debounceSearch" />
+            placeholder="搜索应用名 / 包名 / 标签"
+            @input="debounceSearch"
+          />
        </div>
      </div>
    </div>
@@ -19,8 +25,8 @@
 </template>

 <script setup lang="ts">
-import { ref, watch } from 'vue';
-import TopActions from './TopActions.vue';
+import { ref, watch } from "vue";
+import TopActions from "./TopActions.vue";

 const props = defineProps<{
  searchQuery: string;
@@ -28,22 +34,25 @@ const props = defineProps<{
 }>();

 const emit = defineEmits<{
-  (e: 'update-search', query: string): void;
-  (e: 'update'): void;
-  (e: 'list'): void;
+  (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<ReturnType<typeof setTimeout> | null>(null);

 const debounceSearch = () => {
  if (timeoutId.value) clearTimeout(timeoutId.value);
  timeoutId.value = setTimeout(() => {
-    emit('update-search', localSearchQuery.value);
+    emit("update-search", localSearchQuery.value);
  }, 220);
 };

-watch(() => props.searchQuery, (newVal) => {
-  localSearchQuery.value = newVal || '';
-});
+watch(
+  () => props.searchQuery,
+  (newVal) => {
+    localSearchQuery.value = newVal || "";
+  },
+);
 </script>
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -1,41 +1,71 @@
 <template>
  <div class="flex h-full flex-col gap-6">
    <div class="flex items-center gap-3">
-      <img :src="amberLogo" alt="Amber PM" class="h-11 w-11 rounded-2xl bg-white/70 p-2 shadow-sm ring-1 ring-slate-900/5 dark:bg-slate-800" />
+      <img
+        :src="amberLogo"
+        alt="Amber PM"
+        class="h-11 w-11 rounded-2xl bg-white/70 p-2 shadow-sm ring-1 ring-slate-900/5 dark:bg-slate-800"
+      />
      <div class="flex flex-col">
-        <span class="text-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400">APM Store</span>
-        <span class="text-lg font-semibold text-slate-900 dark:text-white">APM 客户端商店</span>
+        <span
+          class="text-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400"
+          >APM Store</span
+        >
+        <span class="text-lg font-semibold text-slate-900 dark:text-white"
+          >APM 客户端商店</span
+        >
      </div>
    </div>

    <ThemeToggle :is-dark="isDarkTheme" @toggle="toggleTheme" />

    <div class="flex-1 space-y-2 overflow-y-auto scrollbar-muted pr-2">
-      <button type="button" class="flex w-full items-center gap-3 rounded-2xl border border-transparent px-4 py-3 text-left text-sm font-medium text-slate-600 transition hover:border-brand/30 hover:bg-brand/5 hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 dark:text-slate-300 dark:hover:bg-slate-800"
-        :class="activeCategory === 'all' ? 'border-brand/40 bg-brand/10 text-brand dark:bg-brand/15' : ''"
-        @click="selectCategory('all')">
+      <button
+        type="button"
+        class="flex w-full items-center gap-3 rounded-2xl border border-transparent px-4 py-3 text-left text-sm font-medium text-slate-600 transition hover:border-brand/30 hover:bg-brand/5 hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 dark:text-slate-300 dark:hover:bg-slate-800"
+        :class="
+          activeCategory === 'all'
+            ? 'border-brand/40 bg-brand/10 text-brand dark:bg-brand/15'
+            : ''
+        "
+        @click="selectCategory('all')"
+      >
        <span>全部应用</span>
-        <span class="ml-auto rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-500 dark:bg-slate-800/70 dark:text-slate-300">{{ categoryCounts.all || 0 }}</span>
+        <span
+          class="ml-auto rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-500 dark:bg-slate-800/70 dark:text-slate-300"
+          >{{ categoryCounts.all || 0 }}</span
+        >
      </button>

-      <button v-for="(category, key) in categories" :key="key" type="button"
+      <button
+        v-for="(category, key) in categories"
+        :key="key"
+        type="button"
        class="flex w-full items-center gap-3 rounded-2xl border border-transparent px-4 py-3 text-left text-sm font-medium text-slate-600 transition hover:border-brand/30 hover:bg-brand/5 hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 dark:text-slate-300 dark:hover:bg-slate-800"
-        :class="activeCategory === key ? 'border-brand/40 bg-brand/10 text-brand dark:bg-brand/15' : ''"
-        @click="selectCategory(key)">
+        :class="
+          activeCategory === key
+            ? 'border-brand/40 bg-brand/10 text-brand dark:bg-brand/15'
+            : ''
+        "
+        @click="selectCategory(key)"
+      >
        <span class="flex flex-col">
          <span>
            <div class="text-left">{{ category.zh }}</div>
          </span>
        </span>
-        <span class="ml-auto rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-500 dark:bg-slate-800/70 dark:text-slate-300">{{ categoryCounts[key] || 0 }}</span>
+        <span
+          class="ml-auto rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-500 dark:bg-slate-800/70 dark:text-slate-300"
+          >{{ categoryCounts[key] || 0 }}</span
+        >
      </button>
    </div>
  </div>
 </template>

 <script setup lang="ts">
-import ThemeToggle from './ThemeToggle.vue';
-import amberLogo from '../assets/imgs/amber-pm-logo.png';
+import ThemeToggle from "./ThemeToggle.vue";
+import amberLogo from "../assets/imgs/amber-pm-logo.png";

 defineProps<{
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -46,15 +76,15 @@ defineProps<{
 }>();

 const emit = defineEmits<{
-  (e: 'toggle-theme'): void;
-  (e: 'select-category', category: string): void;
+  (e: "toggle-theme"): void;
+  (e: "select-category", category: string): void;
 }>();

 const toggleTheme = () => {
-  emit('toggle-theme');
+  emit("toggle-theme");
 };

 const selectCategory = (category: string) => {
-  emit('select-category', category);
+  emit("select-category", category);
 };
 </script>
--- a/src/components/DownloadDetail.vue
+++ b/src/components/DownloadDetail.vue
@@ -1,72 +1,123 @@
 <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"
+  <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-50 flex items-start justify-center bg-slate-900/70 px-4 py-10"
-      @click="handleOverlayClick">
-      <div class="scrollbar-nowidth scrollbar-thumb-slate-200 dark:scrollbar-thumb-slate-700 scrollbar-track-transparent w-full max-w-2xl max-h-[85vh] overflow-y-auto rounded-3xl border border-white/10 bg-white/95 p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
-        @click.stop>
+      @click="handleOverlayClick"
+    >
+      <div
+        class="scrollbar-nowidth scrollbar-thumb-slate-200 dark:scrollbar-thumb-slate-700 scrollbar-track-transparent w-full max-w-2xl max-h-[85vh] overflow-y-auto rounded-3xl border border-white/10 bg-white/95 p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
+        @click.stop
+      >
        <div class="flex items-start justify-between">
          <div>
-            <p class="text-2xl font-semibold text-slate-900 dark:text-white">下载详情</p>
-            <p class="text-sm text-slate-500 dark:text-slate-400">实时了解安装进度</p>
+            <p class="text-2xl font-semibold text-slate-900 dark:text-white">
+              下载详情
+            </p>
+            <p class="text-sm text-slate-500 dark:text-slate-400">
+              实时了解安装进度
+            </p>
          </div>
-          <button type="button"
+          <button
+            type="button"
            class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-200/60 text-slate-500 transition hover:text-slate-900 dark:border-slate-700"
-            @click="close">
+            @click="close"
+          >
            <i class="fas fa-xmark"></i>
          </button>
        </div>

        <div v-if="download" class="mt-6 space-y-6">
-          <div class="flex items-center gap-4 rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60">
-            <div class="h-16 w-16 overflow-hidden rounded-2xl bg-slate-100 dark:bg-slate-800">
-              <img :src="download.icon" :alt="download.name" class="h-full w-full object-cover" />
+          <div
+            class="flex items-center gap-4 rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60"
+          >
+            <div
+              class="h-16 w-16 overflow-hidden rounded-2xl bg-slate-100 dark:bg-slate-800"
+            >
+              <img
+                :src="download.icon"
+                :alt="download.name"
+                class="h-full w-full object-cover"
+              />
            </div>
            <div class="flex-1">
-              <p class="text-lg font-semibold text-slate-900 dark:text-white">{{ download.name }}</p>
-              <p class="text-sm text-slate-500 dark:text-slate-400">{{ download.pkgname }} · {{ download.version }}</p>
+              <p class="text-lg font-semibold text-slate-900 dark:text-white">
+                {{ download.name }}
+              </p>
+              <p class="text-sm text-slate-500 dark:text-slate-400">
+                {{ download.pkgname }} · {{ download.version }}
+              </p>
            </div>
          </div>

-          <div class="space-y-4 rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60">
+          <div
+            class="space-y-4 rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60"
+          >
            <div class="flex items-center justify-between">
              <span class="text-sm font-medium text-slate-500">状态</span>
              <span
                class="rounded-full px-3 py-1 text-xs font-semibold"
                :class="{
-                  'bg-blue-100 text-blue-700': download.status === 'downloading',
-                  'bg-amber-100 text-amber-600': download.status === 'installing',
-                  'bg-emerald-100 text-emerald-700': download.status === 'completed',
+                  'bg-blue-100 text-blue-700':
+                    download.status === 'downloading',
+                  'bg-amber-100 text-amber-600':
+                    download.status === 'installing',
+                  'bg-emerald-100 text-emerald-700':
+                    download.status === 'completed',
                  'bg-rose-100 text-rose-600': download.status === 'failed',
-                  'bg-slate-200 text-slate-600': download.status === 'paused'
-                }">
+                  'bg-slate-200 text-slate-600': download.status === 'paused',
+                }"
+              >
                {{ getStatusText(download.status) }}
              </span>
            </div>

            <div v-if="download.status === 'downloading'" class="space-y-3">
              <div class="h-2 rounded-full bg-slate-100 dark:bg-slate-800">
-                <div class="h-full rounded-full bg-brand" :style="{ width: download.progress + '%' }"></div>
+                <div
+                  class="h-full rounded-full bg-brand"
+                  :style="{ width: download.progress + '%' }"
+                ></div>
              </div>
-              <div class="flex flex-wrap items-center justify-between text-sm text-slate-500 dark:text-slate-400">
+              <div
+                class="flex flex-wrap items-center justify-between text-sm text-slate-500 dark:text-slate-400"
+              >
                <span>{{ download.progress }}%</span>
                <span v-if="download.downloadedSize && download.totalSize">
-                  {{ formatSize(download.downloadedSize) }} / {{ formatSize(download.totalSize) }}
+                  {{ formatSize(download.downloadedSize) }} /
+                  {{ formatSize(download.totalSize) }}
                </span>
              </div>
-              <div v-if="download.speed" class="flex flex-wrap gap-3 text-sm text-slate-500 dark:text-slate-300">
-                <span class="flex items-center gap-2"><i class="fas fa-tachometer-alt"></i>{{ formatSpeed(download.speed) }}</span>
-                <span v-if="download.timeRemaining">剩余 {{ formatTime(download.timeRemaining) }}</span>
+              <div
+                v-if="download.speed"
+                class="flex flex-wrap gap-3 text-sm text-slate-500 dark:text-slate-300"
+              >
+                <span class="flex items-center gap-2"
+                  ><i class="fas fa-tachometer-alt"></i
+                  >{{ formatSpeed(download.speed) }}</span
+                >
+                <span v-if="download.timeRemaining"
+                  >剩余 {{ formatTime(download.timeRemaining) }}</span
+                >
              </div>
            </div>
          </div>

-          <div class="rounded-2xl border border-slate-200/60 p-4 text-sm text-slate-600 dark:border-slate-800/60 dark:text-slate-300">
+          <div
+            class="rounded-2xl border border-slate-200/60 p-4 text-sm text-slate-600 dark:border-slate-800/60 dark:text-slate-300"
+          >
            <div class="flex justify-between py-1">
              <span class="text-slate-400">下载源</span>
-              <span class="font-medium text-slate-900 dark:text-white">{{ download.source || 'APM Store' }}</span>
+              <span class="font-medium text-slate-900 dark:text-white">{{
+                download.source || "APM Store"
+              }}</span>
            </div>
            <div v-if="download.startTime" class="flex justify-between py-1">
              <span class="text-slate-400">开始时间</span>
@@ -76,40 +127,64 @@
              <span class="text-slate-400">完成时间</span>
              <span>{{ formatDate(download.endTime) }}</span>
            </div>
-            <div v-if="download.error" class="flex justify-between py-1 text-rose-500">
+            <div
+              v-if="download.error"
+              class="flex justify-between py-1 text-rose-500"
+            >
              <span>错误信息</span>
              <span class="text-right">{{ download.error }}</span>
            </div>
          </div>

-          <div v-if="download.logs && download.logs.length" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60">
+          <div
+            v-if="download.logs && download.logs.length"
+            class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60"
+          >
            <div class="mb-3 flex items-center justify-between">
-              <span class="font-semibold text-slate-800 dark:text-slate-100">下载日志</span>
-              <button type="button"
+              <span class="font-semibold text-slate-800 dark:text-slate-100"
+                >下载日志</span
+              >
+              <button
+                type="button"
                class="inline-flex items-center gap-2 rounded-full border border-slate-200 px-3 py-1 text-xs font-medium text-slate-600 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300"
-                @click="copyLogs">
+                @click="copyLogs"
+              >
                <i class="fas fa-copy"></i>
                复制日志
              </button>
            </div>
-            <div class="max-h-48 space-y-2 overflow-y-auto rounded-2xl bg-slate-50/80 p-3 font-mono text-xs text-slate-600 dark:bg-slate-900/60 dark:text-slate-300">
-              <div v-for="(log, index) in download.logs" :key="index" class="flex gap-3">
-                <span class="text-slate-400">{{ formatLogTime(log.time) }}</span>
+            <div
+              class="max-h-48 space-y-2 overflow-y-auto rounded-2xl bg-slate-50/80 p-3 font-mono text-xs text-slate-600 dark:bg-slate-900/60 dark:text-slate-300"
+            >
+              <div
+                v-for="(log, index) in download.logs"
+                :key="index"
+                class="flex gap-3"
+              >
+                <span class="text-slate-400">{{
+                  formatLogTime(log.time)
+                }}</span>
                <span>{{ log.message }}</span>
              </div>
            </div>
          </div>

          <div class="flex flex-wrap justify-end gap-3">
-            <button v-if="download.status === 'failed'" type="button"
+            <button
+              v-if="download.status === 'failed'"
+              type="button"
              class="inline-flex items-center gap-2 rounded-2xl border border-rose-300/60 px-4 py-2 text-sm font-semibold text-rose-500 transition hover:bg-rose-50"
-              @click="retry">
+              @click="retry"
+            >
              <i class="fas fa-redo"></i>
              重试下载
            </button>
-            <button v-if="download.status === 'completed'" type="button"
+            <button
+              v-if="download.status === 'completed'"
+              type="button"
              class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-r from-brand to-brand-dark px-4 py-2 text-sm font-semibold text-white shadow-lg"
-              @click="openApp">
+              @click="openApp"
+            >
              <i class="fas fa-external-link-alt"></i>
              打开应用
            </button>
@@ -121,7 +196,7 @@
 </template>

 <script setup lang="ts">
-import type { DownloadItem } from '../global/typedefinition';
+import type { DownloadItem } from "../global/typedefinition";

 const props = defineProps<{
  show: boolean;
@@ -129,17 +204,16 @@ const props = defineProps<{
 }>();

 const emit = defineEmits<{
-  (e: 'close'): void;
-  (e: 'pause', download: DownloadItem): void;
-  (e: 'resume', download: DownloadItem): void;
-  (e: 'cancel', download: DownloadItem): void;
-  (e: 'retry', download: DownloadItem): void;
-  (e: 'open-app', download: string): void;
+  (e: "close"): void;
+  (e: "pause", download: DownloadItem): void;
+  (e: "resume", download: DownloadItem): void;
+  (e: "cancel", download: DownloadItem): void;
+  (e: "retry", download: DownloadItem): void;
+  (e: "open-app", download: string): void;
 }>();

-
 const close = () => {
-  emit('close');
+  emit("close");
 };

 const handleOverlayClick = () => {
@@ -148,38 +222,38 @@ const handleOverlayClick = () => {

 const retry = () => {
  if (props.download) {
-    emit('retry', props.download);
+    emit("retry", props.download);
  }
 };

 const openApp = () => {
  if (props.download) {
-    emit('open-app', props.download.pkgname);
+    emit("open-app", props.download.pkgname);
  }
 };

 const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
-    'pending': '等待中',
-    'downloading': '下载中',
-    'installing': '安装中',
-    'completed': '已完成',
-    'failed': '失败',
-    'paused': '已暂停',
-    'cancelled': '已取消'
+    pending: "等待中",
+    downloading: "下载中",
+    installing: "安装中",
+    completed: "已完成",
+    failed: "失败",
+    paused: "已暂停",
+    cancelled: "已取消",
  };
  return statusMap[status] || status;
 };

 const formatSize = (bytes: number) => {
-  if (!bytes) return '0 B';
-  const units = ['B', 'KB', 'MB', 'GB'];
+  if (!bytes) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
  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: number) => {
-  return formatSize(bytesPerSecond) + '/s';
+  return formatSize(bytesPerSecond) + "/s";
 };

 const formatTime = (seconds: number) => {
@@ -190,23 +264,26 @@ const formatTime = (seconds: number) => {

 const formatDate = (timestamp: number) => {
  const date = new Date(timestamp);
-  return date.toLocaleString('zh-CN');
+  return date.toLocaleString("zh-CN");
 };

 const formatLogTime = (timestamp: number) => {
  const date = new Date(timestamp);
-  return date.toLocaleTimeString('zh-CN');
+  return date.toLocaleTimeString("zh-CN");
 };

 const copyLogs = () => {
  if (!props.download?.logs) return;
  const logsText = props.download.logs
-    .map(log => `[${formatLogTime(log.time)}] ${log.message}`)
-    .join('\n');
-  navigator.clipboard?.writeText(logsText).then(() => {
-    alert('日志已复制到剪贴板');
-  }).catch(() => {
-    prompt('请手动复制日志：', logsText);
-  });
+    .map((log) => `[${formatLogTime(log.time)}] ${log.message}`)
+    .join("\n");
+  navigator.clipboard
+    ?.writeText(logsText)
+    .then(() => {
+      alert("日志已复制到剪贴板");
+    })
+    .catch(() => {
+      prompt("请手动复制日志：", logsText);
+    });
 };
 </script>
--- a/src/components/DownloadQueue.vue
+++ b/src/components/DownloadQueue.vue
@@ -1,65 +1,121 @@
 <template>
  <div
-    class="fixed inset-x-4 bottom-4 z-40 rounded-3xl border border-slate-200/70 bg-white/95 shadow-2xl backdrop-blur dark:border-slate-800/70 dark:bg-slate-900/90 sm:left-auto sm:right-6 sm:w-96">
-    <div class="flex items-center justify-between px-5 py-4" @click="toggleExpand">
-      <div class="flex items-center gap-2 text-sm font-semibold text-slate-700 dark:text-slate-200">
+    class="fixed inset-x-4 bottom-4 z-40 rounded-3xl border border-slate-200/70 bg-white/95 shadow-2xl backdrop-blur dark:border-slate-800/70 dark:bg-slate-900/90 sm:left-auto sm:right-6 sm:w-96"
+  >
+    <div
+      class="flex items-center justify-between px-5 py-4"
+      @click="toggleExpand"
+    >
+      <div
+        class="flex items-center gap-2 text-sm font-semibold text-slate-700 dark:text-slate-200"
+      >
        <i class="fas fa-download text-brand"></i>
        <span>下载队列</span>
-        <span v-if="downloads.length"
-          class="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-500 dark:bg-slate-800/70 dark:text-slate-300">
+        <span
+          v-if="downloads.length"
+          class="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-500 dark:bg-slate-800/70 dark:text-slate-300"
+        >
          ({{ activeDownloads }}/{{ downloads.length }})
        </span>
      </div>
      <div class="flex items-center gap-2">
-        <button v-if="downloads.length" type="button"
+        <button
+          v-if="downloads.length"
+          type="button"
          class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-200/70 text-slate-500 transition hover:text-slate-900 dark:border-slate-700 dark:text-slate-400"
-          title="清除已完成" @click.stop="clearCompleted">
+          title="清除已完成"
+          @click.stop="clearCompleted"
+        >
          <i class="fas fa-broom"></i>
        </button>
-        <button type="button"
+        <button
+          type="button"
          class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-200/70 text-slate-500 transition hover:text-slate-900 dark:border-slate-700 dark:text-slate-400"
-          @click.stop="toggleExpand">
-          <i class="fas" :class="isExpanded ? 'fa-chevron-down' : 'fa-chevron-up'"></i>
+          @click.stop="toggleExpand"
+        >
+          <i
+            class="fas"
+            :class="isExpanded ? 'fa-chevron-down' : 'fa-chevron-up'"
+          ></i>
        </button>
      </div>
    </div>

-    <Transition enter-active-class="duration-200 ease-out" enter-from-class="opacity-0 -translate-y-2"
-      enter-to-class="opacity-100 translate-y-0" leave-active-class="duration-150 ease-in"
-      leave-from-class="opacity-100 translate-y-0" leave-to-class="opacity-0 -translate-y-2">
+    <Transition
+      enter-active-class="duration-200 ease-out"
+      enter-from-class="opacity-0 -translate-y-2"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="duration-150 ease-in"
+      leave-from-class="opacity-100 translate-y-0"
+      leave-to-class="opacity-0 -translate-y-2"
+    >
      <div v-show="isExpanded" class="max-h-96 overflow-y-auto px-3 pb-4">
-        <div v-if="downloads.length === 0"
-          class="flex flex-col items-center justify-center rounded-2xl border border-dashed border-slate-200/80 px-4 py-12 text-slate-500 dark:border-slate-800/80 dark:text-slate-400">
+        <div
+          v-if="downloads.length === 0"
+          class="flex flex-col items-center justify-center rounded-2xl border border-dashed border-slate-200/80 px-4 py-12 text-slate-500 dark:border-slate-800/80 dark:text-slate-400"
+        >
          <i class="fas fa-inbox text-3xl"></i>
          <p class="mt-3 text-sm">暂无下载任务</p>
        </div>
        <div v-else class="space-y-2">
-          <div v-for="download in downloads" :key="download.id"
+          <div
+            v-for="download in downloads"
+            :key="download.id"
            class="flex cursor-pointer items-center gap-3 rounded-2xl border border-slate-200/70 bg-white/90 p-3 shadow-sm transition hover:border-brand/40 hover:shadow-lg dark:border-slate-800/70 dark:bg-slate-900"
-            :class="download.status === 'failed' ? 'border-rose-300/70 dark:border-rose-500/40' : ''"
-            @click="showDownloadDetail(download)">
-            <div class="h-12 w-12 overflow-hidden rounded-xl bg-slate-100 dark:bg-slate-800">
-              <img :src="download.icon" :alt="download.name" class="h-full w-full object-cover" />
+            :class="
+              download.status === 'failed'
+                ? 'border-rose-300/70 dark:border-rose-500/40'
+                : ''
+            "
+            @click="showDownloadDetail(download)"
+          >
+            <div
+              class="h-12 w-12 overflow-hidden rounded-xl bg-slate-100 dark:bg-slate-800"
+            >
+              <img
+                :src="download.icon"
+                :alt="download.name"
+                class="h-full w-full object-cover"
+              />
            </div>
            <div class="flex-1">
-              <p class="truncate text-sm font-semibold text-slate-800 dark:text-slate-100">{{ download.name }}</p>
+              <p
+                class="truncate text-sm font-semibold text-slate-800 dark:text-slate-100"
+              >
+                {{ download.name }}
+              </p>
              <p class="text-xs text-slate-500 dark:text-slate-400">
-                <span v-if="download.status === 'downloading'">下载中 {{ download.progress }}%</span>
-                <span v-else-if="download.status === 'installing'">安装中...</span>
+                <span v-if="download.status === 'downloading'"
+                  >下载中 {{ download.progress }}%</span
+                >
+                <span v-else-if="download.status === 'installing'"
+                  >安装中...</span
+                >
                <span v-else-if="download.status === 'completed'">已完成</span>
-                <span v-else-if="download.status === 'failed'">失败: {{ download.error }}</span>
+                <span v-else-if="download.status === 'failed'"
+                  >失败: {{ download.error }}</span
+                >
                <span v-else-if="download.status === 'paused'">已暂停</span>
                <span v-else>等待中...</span>
              </p>
-              <div v-if="download.status === 'downloading'"
-                class="mt-2 h-1.5 rounded-full bg-slate-100 dark:bg-slate-800">
-                <div class="h-full rounded-full bg-brand" :style="{ width: `${download.progress}%` }"></div>
+              <div
+                v-if="download.status === 'downloading'"
+                class="mt-2 h-1.5 rounded-full bg-slate-100 dark:bg-slate-800"
+              >
+                <div
+                  class="h-full rounded-full bg-brand"
+                  :style="{ width: `${download.progress}%` }"
+                ></div>
              </div>
            </div>
            <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"
-                title="重试" @click.stop="retryDownload(download)">
+                title="重试"
+                @click.stop="retryDownload(download)"
+              >
                <i class="fas fa-redo"></i>
              </button>
            </div>
@@ -71,28 +127,27 @@
 </template>

 <script setup lang="ts">
-import { ref, computed } from 'vue';
-import type { DownloadItem } from '../global/typedefinition';
+import { ref, computed } from "vue";
+import type { DownloadItem } from "../global/typedefinition";

 const props = defineProps<{
  downloads: DownloadItem[];
 }>();

 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;
+  (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 isExpanded = ref(false);

 const activeDownloads = computed(() => {
-  return props.downloads.filter(d => 
-    d.status === 'downloading' || d.status === 'installing'
+  return props.downloads.filter(
+    (d) => d.status === "downloading" || d.status === "installing",
  ).length;
 });

@@ -101,14 +156,14 @@ const toggleExpand = () => {
 };

 const retryDownload = (download: DownloadItem) => {
-  emit('retry', download);
+  emit("retry", download);
 };

 const clearCompleted = () => {
-  emit('clear-completed');
+  emit("clear-completed");
 };

 const showDownloadDetail = (download: DownloadItem) => {
-  emit('show-detail', download);
+  emit("show-detail", download);
 };
 </script>
--- a/src/components/InstalledAppsModal.vue
+++ b/src/components/InstalledAppsModal.vue
@@ -1,67 +1,108 @@
 <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-50 flex items-start justify-center bg-slate-900/70 px-4 py-10">
-      <div class="w-full max-w-4xl max-h-[85vh] overflow-y-auto scrollbar-nowidth scrollbar-thumb-slate-200 dark:scrollbar-thumb-slate-700 rounded-3xl border border-white/10 bg-white/95 p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900">
+  <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-50 flex items-start justify-center bg-slate-900/70 px-4 py-10"
+    >
+      <div
+        class="w-full max-w-4xl max-h-[85vh] overflow-y-auto scrollbar-nowidth scrollbar-thumb-slate-200 dark:scrollbar-thumb-slate-700 rounded-3xl border border-white/10 bg-white/95 p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
+      >
        <div class="flex items-start justify-between">
          <div>
-            <p class="text-2xl font-semibold text-slate-900 dark:text-white">已安装应用</p>
-            <p class="text-sm text-slate-500 dark:text-slate-400">来自本机 APM 安装列表</p>
+            <p class="text-2xl font-semibold text-slate-900 dark:text-white">
+              已安装应用
+            </p>
+            <p class="text-sm text-slate-500 dark:text-slate-400">
+              来自本机 APM 安装列表
+            </p>
          </div>
          <div class="flex items-center gap-3">
-            <button type="button"
+            <button
+              type="button"
              class="inline-flex items-center gap-2 rounded-2xl border border-slate-200/70 px-4 py-2 text-sm font-semibold text-slate-600 transition hover:bg-slate-50 disabled:opacity-40 dark:border-slate-700 dark:text-slate-200"
-              :disabled="loading" @click="$emit('refresh')">
+              :disabled="loading"
+              @click="$emit('refresh')"
+            >
              <i class="fas fa-sync-alt"></i>
              刷新
            </button>
-            <button type="button"
+            <button
+              type="button"
              class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-200/70 text-slate-500 transition hover:text-slate-900 dark:border-slate-700"
-              @click="$emit('close')" aria-label="关闭">
+              @click="$emit('close')"
+              aria-label="关闭"
+            >
              <i class="fas fa-xmark"></i>
            </button>
          </div>
        </div>

        <div class="mt-6 space-y-4">
-          <div v-if="loading"
-            class="rounded-2xl border border-dashed border-slate-200/80 px-4 py-10 text-center text-slate-500 dark:border-slate-800/80 dark:text-slate-400">
+          <div
+            v-if="loading"
+            class="rounded-2xl border border-dashed border-slate-200/80 px-4 py-10 text-center text-slate-500 dark:border-slate-800/80 dark:text-slate-400"
+          >
            正在读取已安装应用…
          </div>
-          <div v-else-if="error"
-            class="rounded-2xl border border-rose-200/70 bg-rose-50/60 px-4 py-6 text-center text-sm text-rose-600 dark:border-rose-500/40 dark:bg-rose-500/10">
+          <div
+            v-else-if="error"
+            class="rounded-2xl border border-rose-200/70 bg-rose-50/60 px-4 py-6 text-center text-sm text-rose-600 dark:border-rose-500/40 dark:bg-rose-500/10"
+          >
            {{ error }}
          </div>
-          <div v-else-if="apps.length === 0"
-            class="rounded-2xl border border-slate-200/70 px-4 py-10 text-center text-slate-500 dark:border-slate-800/70 dark:text-slate-400">
+          <div
+            v-else-if="apps.length === 0"
+            class="rounded-2xl border border-slate-200/70 px-4 py-10 text-center text-slate-500 dark:border-slate-800/70 dark:text-slate-400"
+          >
            暂无已安装应用
          </div>
          <div v-else class="space-y-3">
-            <div v-for="app in apps" :key="app.pkgname"
-              class="flex flex-col gap-3 rounded-2xl border border-slate-200/70 bg-white/90 p-4 shadow-sm dark:border-slate-800/70 dark:bg-slate-900/70 sm:flex-row sm:items-center sm:justify-between">
+            <div
+              v-for="app in apps"
+              :key="app.pkgname"
+              class="flex flex-col gap-3 rounded-2xl border border-slate-200/70 bg-white/90 p-4 shadow-sm dark:border-slate-800/70 dark:bg-slate-900/70 sm:flex-row sm:items-center sm:justify-between"
+            >
              <div>
                <div class="flex items-center gap-2">
-                  <p class="text-base font-semibold text-slate-900 dark:text-white">{{ app.pkgname }}</p>
-                  <span v-if="app.flags && app.flags.includes('automatic')"
-                    class="rounded-md bg-rose-100 px-2 py-0.5 text-[11px] font-semibold text-rose-600 dark:bg-rose-500/20 dark:text-rose-400">
+                  <p
+                    class="text-base font-semibold text-slate-900 dark:text-white"
+                  >
+                    {{ app.pkgname }}
+                  </p>
+                  <span
+                    v-if="app.flags && app.flags.includes('automatic')"
+                    class="rounded-md bg-rose-100 px-2 py-0.5 text-[11px] font-semibold text-rose-600 dark:bg-rose-500/20 dark:text-rose-400"
+                  >
                    依赖项
                  </span>
                </div>
-                <div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500 dark:text-slate-400">
+                <div
+                  class="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500 dark:text-slate-400"
+                >
                  <span>{{ app.version }}</span>
                  <span>·</span>
                  <span>{{ app.arch }}</span>
-                  <template v-if="app.flags && !app.flags.includes('automatic')">
+                  <template
+                    v-if="app.flags && !app.flags.includes('automatic')"
+                  >
                    <span>·</span>
                    <span>{{ app.flags }}</span>
                  </template>
                </div>
              </div>
-              <button type="button"
+              <button
+                type="button"
                class="inline-flex items-center gap-2 rounded-2xl border border-rose-300/60 px-4 py-2 text-sm font-semibold text-rose-600 transition hover:bg-rose-50 disabled:opacity-50"
-                :disabled="app.currentStatus === 'not-installed'" @click="$emit('uninstall', app)">
+                :disabled="app.currentStatus === 'not-installed'"
+                @click="$emit('uninstall', app)"
+              >
                <i class="fas fa-trash"></i>
                卸载
              </button>
@@ -74,7 +115,7 @@
 </template>

 <script setup lang="ts">
-import { App } from '../global/typedefinition';
+import { App } from "../global/typedefinition";

 defineProps<{
  show: boolean;
@@ -84,9 +125,8 @@ defineProps<{
 }>();

 defineEmits<{
-  (e: 'close'): void;
-  (e: 'refresh'): void;
-  (e: 'uninstall', app: App): void;
+  (e: "close"): void;
+  (e: "refresh"): void;
+  (e: "uninstall", app: App): void;
 }>();
 </script>
-
--- a/src/components/ScreenPreview.vue
+++ b/src/components/ScreenPreview.vue
@@ -1,34 +1,62 @@
 <template>
-  <Transition enter-active-class="duration-200 ease-out" enter-from-class="opacity-0"
-    enter-to-class="opacity-100" leave-active-class="duration-150 ease-in"
-    leave-from-class="opacity-100" leave-to-class="opacity-0">
-    <div v-if="show"
+  <Transition
+    enter-active-class="duration-200 ease-out"
+    enter-from-class="opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="duration-150 ease-in"
+    leave-from-class="opacity-100"
+    leave-to-class="opacity-0"
+  >
+    <div
+      v-if="show"
      class="fixed inset-0 z-[60] flex items-center justify-center bg-slate-900/80 px-4 py-10"
-      @click.self="closePreview">
+      @click.self="closePreview"
+    >
      <div class="relative w-full max-w-5xl">
-        <img :src="currentScreenshot" alt="应用截图预览"
-          class="max-h-[80vh] w-full rounded-3xl border border-slate-200/40 bg-black/40 object-contain shadow-2xl dark:border-slate-700" />
-        <div class="absolute inset-x-0 top-4 flex items-center justify-between px-6">
+        <img
+          :src="currentScreenshot"
+          alt="应用截图预览"
+          class="max-h-[80vh] w-full rounded-3xl border border-slate-200/40 bg-black/40 object-contain shadow-2xl dark:border-slate-700"
+        />
+        <div
+          class="absolute inset-x-0 top-4 flex items-center justify-between px-6"
+        >
          <div class="flex gap-3">
-            <button type="button"
+            <button
+              type="button"
              class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/80 text-slate-700 shadow-lg transition hover:bg-white disabled:cursor-not-allowed disabled:opacity-50"
-              @click="prevScreen" :disabled="currentScreenIndex === 0" aria-label="上一张">
+              @click="prevScreen"
+              :disabled="currentScreenIndex === 0"
+              aria-label="上一张"
+            >
              <i class="fas fa-chevron-left"></i>
            </button>
-            <button type="button"
+            <button
+              type="button"
              class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/80 text-slate-700 shadow-lg transition hover:bg-white disabled:cursor-not-allowed disabled:opacity-50"
-              @click="nextScreen" :disabled="currentScreenIndex === screenshots.length - 1" aria-label="下一张">
+              @click="nextScreen"
+              :disabled="currentScreenIndex === screenshots.length - 1"
+              aria-label="下一张"
+            >
              <i class="fas fa-chevron-right"></i>
            </button>
          </div>
-          <button type="button"
+          <button
+            type="button"
            class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/80 text-slate-700 shadow-lg transition hover:bg-white"
-            @click="closePreview" aria-label="关闭">
+            @click="closePreview"
+            aria-label="关闭"
+          >
            <i class="fas fa-times"></i>
          </button>
        </div>
-        <div class="absolute inset-x-0 bottom-6 flex items-center justify-center">
-          <span class="rounded-full bg-black/60 px-4 py-1 text-sm font-medium text-white">{{ previewCounterText }}</span>
+        <div
+          class="absolute inset-x-0 bottom-6 flex items-center justify-center"
+        >
+          <span
+            class="rounded-full bg-black/60 px-4 py-1 text-sm font-medium text-white"
+            >{{ previewCounterText }}</span
+          >
        </div>
      </div>
    </div>
@@ -36,7 +64,7 @@
 </template>

 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from "vue";

 const props = defineProps<{
  show: boolean;
@@ -45,13 +73,13 @@ const props = defineProps<{
 }>();

 const emit = defineEmits<{
-  (e: 'close'): void;
-  (e: 'prev'): void;
-  (e: 'next'): void;
+  (e: "close"): void;
+  (e: "prev"): void;
+  (e: "next"): void;
 }>();

 const currentScreenshot = computed(() => {
-  return props.screenshots[props.currentScreenIndex] || '';
+  return props.screenshots[props.currentScreenIndex] || "";
 });

 const previewCounterText = computed(() => {
@@ -59,14 +87,14 @@ const previewCounterText = computed(() => {
 });

 const closePreview = () => {
-  emit('close');
+  emit("close");
 };

 const prevScreen = () => {
-  emit('prev');
+  emit("prev");
 };

 const nextScreen = () => {
-  emit('next');
+  emit("next");
 };
 </script>
--- a/src/components/ThemeToggle.vue
+++ b/src/components/ThemeToggle.vue
@@ -1,13 +1,26 @@
 <template>
-  <button type="button"
+  <button
+    type="button"
    class="flex items-center justify-between rounded-2xl border border-slate-200/80 bg-white/70 px-4 py-3 text-sm font-medium text-slate-600 shadow-sm transition hover:border-brand/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 dark:border-slate-800/70 dark:bg-slate-900/60 dark:text-slate-300"
-    :aria-pressed="isDark" @click="toggle">
+    :aria-pressed="isDark"
+    @click="toggle"
+  >
    <span class="flex items-center gap-2">
-      <i class="fas" :class="isDark ? 'fa-moon text-amber-200' : 'fa-sun text-amber-400'"></i>
-      <span>{{ isDark ? '深色主题' : '浅色主题' }}</span>
+      <i
+        class="fas"
+        :class="isDark ? 'fa-moon text-amber-200' : 'fa-sun text-amber-400'"
+      ></i>
+      <span>{{ isDark ? "深色主题" : "浅色主题" }}</span>
    </span>
-    <span class="relative inline-flex h-6 w-12 items-center rounded-full bg-slate-300/80 transition dark:bg-slate-700">
-      <span :class="['inline-block h-4 w-4 rounded-full bg-white shadow transition', isDark ? 'translate-x-6' : 'translate-x-1']"></span>
+    <span
+      class="relative inline-flex h-6 w-12 items-center rounded-full bg-slate-300/80 transition dark:bg-slate-700"
+    >
+      <span
+        :class="[
+          'inline-block h-4 w-4 rounded-full bg-white shadow transition',
+          isDark ? 'translate-x-6' : 'translate-x-1',
+        ]"
+      ></span>
    </span>
  </button>
 </template>
@@ -18,10 +31,10 @@ defineProps<{
 }>();

 const emit = defineEmits<{
-  (e: 'toggle'): void;
+  (e: "toggle"): void;
 }>();

 const toggle = () => {
-  emit('toggle');
+  emit("toggle");
 };
 </script>
--- a/src/components/TopActions.vue
+++ b/src/components/TopActions.vue
@@ -1,14 +1,20 @@
 <template>
  <div class="flex flex-wrap gap-3">
-    <button type="button"
+    <button
+      type="button"
      class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-r from-brand to-brand-dark px-4 py-2 text-sm font-semibold text-white shadow-lg transition hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40"
-      @click="handleUpdate" title="启动 apm-update-tool">
+      @click="handleUpdate"
+      title="启动 apm-update-tool"
+    >
      <i class="fas fa-sync-alt"></i>
      <span>软件更新</span>
    </button>
-    <button type="button"
+    <button
+      type="button"
      class="inline-flex items-center gap-2 rounded-2xl bg-slate-900/90 px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-slate-900/40 transition hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-900/40 dark:bg-white/90 dark:text-slate-900"
-      @click="handleList" title="启动 apm-installer --list">
+      @click="handleList"
+      title="启动 apm-installer --list"
+    >
      <i class="fas fa-download"></i>
      <span>应用管理</span>
    </button>
@@ -17,15 +23,15 @@

 <script setup lang="ts">
 const emit = defineEmits<{
-  (e: 'update'): void;
-  (e: 'list'): void;
+  (e: "update"): void;
+  (e: "list"): void;
 }>();

 const handleUpdate = () => {
-  emit('update');
+  emit("update");
 };

 const handleList = () => {
-  emit('list');
+  emit("list");
 };
 </script>
--- a/src/components/UninstallConfirmModal.vue
+++ b/src/components/UninstallConfirmModal.vue
@@ -1,64 +1,100 @@
 <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-50 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">
-        
+  <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-50 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-rose-100 to-rose-50 shadow-inner dark:from-rose-900/30 dark:to-rose-800/20">
+          <div
+            class="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-rose-100 to-rose-50 shadow-inner dark:from-rose-900/30 dark:to-rose-800/20"
+          >
            <i class="fas fa-trash-alt text-2xl text-rose-500"></i>
          </div>
          <div>
-            <h3 class="text-xl font-bold text-slate-900 dark:text-white">卸载应用</h3>
+            <h3 class="text-xl font-bold text-slate-900 dark:text-white">
+              卸载应用
+            </h3>
            <p class="text-sm text-slate-500 dark:text-slate-400">
-              您确定要卸载 <span class="font-semibold text-slate-700 dark:text-slate-200">{{ appName }}</span> 吗？
+              您确定要卸载
+              <span class="font-semibold text-slate-700 dark:text-slate-200">{{
+                appName
+              }}</span>
+              吗？
            </p>
            <p class="text-xs text-slate-400 mt-1">{{ appPkg }}</p>
          </div>
        </div>

        <!-- Terminal Output -->
-        <div v-if="uninstalling || completed" 
-          class="mb-6 max-h-48 overflow-y-auto rounded-xl border border-slate-200/50 bg-slate-900 p-3 font-mono text-xs text-slate-300 shadow-inner scrollbar-muted dark:border-slate-700">
-          <div v-for="(line, index) in logs" :key="index" class="whitespace-pre-wrap break-all">{{ line }}</div>
+        <div
+          v-if="uninstalling || completed"
+          class="mb-6 max-h-48 overflow-y-auto rounded-xl border border-slate-200/50 bg-slate-900 p-3 font-mono text-xs text-slate-300 shadow-inner scrollbar-muted dark:border-slate-700"
+        >
+          <div
+            v-for="(line, index) in logs"
+            :key="index"
+            class="whitespace-pre-wrap break-all"
+          >
+            {{ line }}
+          </div>
          <div ref="logEnd"></div>
        </div>

-        <div v-if="error" class="mb-4 rounded-xl border border-rose-200/50 bg-rose-50 p-3 text-sm text-rose-600 dark:border-rose-900/30 dark:bg-rose-900/20 dark:text-rose-400">
+        <div
+          v-if="error"
+          class="mb-4 rounded-xl border border-rose-200/50 bg-rose-50 p-3 text-sm text-rose-600 dark:border-rose-900/30 dark:bg-rose-900/20 dark:text-rose-400"
+        >
          {{ error }}
        </div>

        <div class="flex items-center justify-end gap-3">
-          <button v-if="!uninstalling" type="button"
+          <button
+            v-if="!uninstalling"
+            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">
+            @click="handleClose"
+          >
            取消
          </button>
-          
-          <button v-if="!uninstalling && !completed" type="button"
+
+          <button
+            v-if="!uninstalling && !completed"
+            type="button"
            class="inline-flex items-center gap-2 rounded-xl bg-rose-500 px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-rose-500/30 transition hover:bg-rose-600 hover:-translate-y-0.5"
-            @click="confirmUninstall">
+            @click="confirmUninstall"
+          >
            <i class="fas fa-trash"></i>
            确认卸载
          </button>

-          <button v-if="completed" type="button"
+          <button
+            v-if="completed"
+            type="button"
            class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-800 dark:bg-slate-700 dark:hover:bg-slate-600"
-            @click="handleFinish">
+            @click="handleFinish"
+          >
            完成
          </button>
        </div>
-
      </div>
    </div>
  </Transition>
 </template>

 <script setup lang="ts">
-import { computed, ref, watch, nextTick, onUnmounted } from 'vue';
-import type { App } from '../global/typedefinition';
+import { computed, ref, watch, nextTick, onUnmounted } from "vue";
+import type { App } from "../global/typedefinition";

 const props = defineProps<{
  show: boolean;
@@ -66,55 +102,55 @@ const props = defineProps<{
 }>();

 const emit = defineEmits<{
-  (e: 'close'): void;
-  (e: 'success'): void;
+  (e: "close"): void;
+  (e: "success"): void;
 }>();

 const uninstalling = ref(false);
 const completed = ref(false);
 const logs = ref<string[]>([]);
-const error = ref('');
+const error = ref("");
 const logEnd = ref<HTMLElement | null>(null);

-const appName = computed(() => props.app?.name || '未知应用');
-const appPkg = computed(() => props.app?.pkgname || '');
+const appName = computed(() => props.app?.name || "未知应用");
+const appPkg = computed(() => props.app?.pkgname || "");

 const handleClose = () => {
  if (uninstalling.value && !completed.value) return; // Prevent closing while uninstalling
  reset();
-  emit('close');
+  emit("close");
 };

 const handleFinish = () => {
  reset();
-  emit('success'); // Parent should refresh list
-  emit('close'); 
+  emit("success"); // Parent should refresh list
+  emit("close");
 };

 const reset = () => {
  uninstalling.value = false;
  completed.value = false;
  logs.value = [];
-  error.value = '';
+  error.value = "";
 };

 const confirmUninstall = () => {
  if (!appPkg.value) {
-    error.value = '无效的包名';
+    error.value = "无效的包名";
    return;
  }
-  
+
  uninstalling.value = true;
-  logs.value = ['正在请求卸载: ' + appPkg.value + '...'];
-  
-  window.ipcRenderer.send('remove-installed', appPkg.value);
+  logs.value = ["正在请求卸载: " + appPkg.value + "..."];
+
+  window.ipcRenderer.send("remove-installed", appPkg.value);
 };

 // Listeners
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const onProgress = (_event: any, chunk: string) => {
  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?
  // Let's just push lines. The backend output might come in partial chunks.
  // A simple way is just to push the chunk and let CSS whitespace-pre-wrap handle it.
@@ -124,17 +160,23 @@ const onProgress = (_event: any, chunk: string) => {
 };

 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const onComplete = (_event: any, result: { success: boolean; message: any }) => {
+const onComplete = (
+  _event: any,
+  result: { success: boolean; message: any },
+) => {
  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;
+
  if (result.success) {
-    logs.value.push('\n[完成] ' + (msgObj.message || '卸载成功'));
+    logs.value.push("\n[完成] " + (msgObj.message || "卸载成功"));
    completed.value = true;
  } else {
-    logs.value.push('\n[错误] ' + (msgObj.message || '卸载失败'));
-    error.value = msgObj.message || '卸载失败';
+    logs.value.push("\n[错误] " + (msgObj.message || "卸载失败"));
+    error.value = msgObj.message || "卸载失败";
    // Allow trying again or closing?
    // We stay in "uninstalling" state visually or switch to completed=true but with error?
    // Let's set completed=true so user can click "Finish" (Close).
@@ -146,25 +188,27 @@ const onComplete = (_event: any, result: { success: boolean; message: any }) =>
 const scrollToBottom = () => {
  nextTick(() => {
    if (logEnd.value) {
-      logEnd.value.scrollIntoView({ behavior: 'smooth' });
+      logEnd.value.scrollIntoView({ behavior: "smooth" });
    }
  });
 };

-watch(() => props.show, (val) => {
-  if (val) {
-    // specific setup if needed
-    window.ipcRenderer.on('remove-progress', onProgress);
-    window.ipcRenderer.on('remove-complete', onComplete);
-  } else {
-    window.ipcRenderer.off('remove-progress', onProgress);
-    window.ipcRenderer.off('remove-complete', onComplete);
-  }
-});
+watch(
+  () => props.show,
+  (val) => {
+    if (val) {
+      // specific setup if needed
+      window.ipcRenderer.on("remove-progress", onProgress);
+      window.ipcRenderer.on("remove-complete", onComplete);
+    } else {
+      window.ipcRenderer.off("remove-progress", onProgress);
+      window.ipcRenderer.off("remove-complete", onComplete);
+    }
+  },
+);

 onUnmounted(() => {
-  window.ipcRenderer.off('remove-progress', onProgress);
-  window.ipcRenderer.off('remove-complete', onComplete);
+  window.ipcRenderer.off("remove-progress", onProgress);
+  window.ipcRenderer.off("remove-complete", onComplete);
 });
-
 </script>
--- a/src/components/UpdateAppsModal.vue
+++ b/src/components/UpdateAppsModal.vue
@@ -1,74 +1,118 @@
 <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-50 flex items-start justify-center bg-slate-900/70 px-4 py-10">
-      <div class="w-full max-w-4xl max-h-[85vh] overflow-y-auto scrollbar-nowidth rounded-3xl border border-white/10 bg-white/95 p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900">
+  <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-50 flex items-start justify-center bg-slate-900/70 px-4 py-10"
+    >
+      <div
+        class="w-full max-w-4xl max-h-[85vh] overflow-y-auto scrollbar-nowidth rounded-3xl border border-white/10 bg-white/95 p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
+      >
        <div class="flex flex-wrap items-center gap-3">
          <div class="flex-1">
-            <p class="text-2xl font-semibold text-slate-900 dark:text-white">软件更新</p>
-            <p class="text-sm text-slate-500 dark:text-slate-400">可更新的 APM 应用</p>
+            <p class="text-2xl font-semibold text-slate-900 dark:text-white">
+              软件更新
+            </p>
+            <p class="text-sm text-slate-500 dark:text-slate-400">
+              可更新的 APM 应用
+            </p>
          </div>
          <div class="flex flex-wrap gap-2">
-            <button type="button"
+            <button
+              type="button"
              class="inline-flex items-center gap-2 rounded-2xl border border-slate-200/70 px-4 py-2 text-sm font-semibold text-slate-600 transition hover:bg-slate-50 disabled:opacity-40 dark:border-slate-700 dark:text-slate-200"
-              :disabled="loading" @click="$emit('refresh')">
+              :disabled="loading"
+              @click="$emit('refresh')"
+            >
              <i class="fas fa-sync-alt"></i>
              刷新
            </button>
-            <button type="button"
+            <button
+              type="button"
              class="inline-flex items-center gap-2 rounded-2xl border border-slate-200/70 px-4 py-2 text-sm font-semibold text-slate-600 transition hover:bg-slate-50 disabled:opacity-40 dark:border-slate-700 dark:text-slate-200"
-              :disabled="loading || apps.length === 0" @click="$emit('toggle-all')">
+              :disabled="loading || apps.length === 0"
+              @click="$emit('toggle-all')"
+            >
              <i class="fas fa-check-square"></i>
              全选/全不选
            </button>
-            <button type="button"
+            <button
+              type="button"
              class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-r from-brand to-brand-dark px-4 py-2 text-sm font-semibold text-white shadow-lg disabled:opacity-40"
-              :disabled="loading || !hasSelected" @click="$emit('upgrade-selected')">
+              :disabled="loading || !hasSelected"
+              @click="$emit('upgrade-selected')"
+            >
              <i class="fas fa-upload"></i>
              更新选中
            </button>
-            <button type="button"
+            <button
+              type="button"
              class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-200/70 text-slate-500 transition hover:text-slate-900 dark:border-slate-700"
-              @click="$emit('close')" aria-label="关闭">
+              @click="$emit('close')"
+              aria-label="关闭"
+            >
              <i class="fas fa-xmark"></i>
            </button>
          </div>
        </div>

        <div class="mt-6 space-y-4">
-          <div v-if="loading"
-            class="rounded-2xl border border-dashed border-slate-200/80 px-4 py-10 text-center text-slate-500 dark:border-slate-800/80 dark:text-slate-400">
+          <div
+            v-if="loading"
+            class="rounded-2xl border border-dashed border-slate-200/80 px-4 py-10 text-center text-slate-500 dark:border-slate-800/80 dark:text-slate-400"
+          >
            正在检查可更新应用…
          </div>
-          <div v-else-if="error"
-            class="rounded-2xl border border-rose-200/70 bg-rose-50/60 px-4 py-6 text-center text-sm text-rose-600 dark:border-rose-500/40 dark:bg-rose-500/10">
+          <div
+            v-else-if="error"
+            class="rounded-2xl border border-rose-200/70 bg-rose-50/60 px-4 py-6 text-center text-sm text-rose-600 dark:border-rose-500/40 dark:bg-rose-500/10"
+          >
            {{ error }}
          </div>
-          <div v-else-if="apps.length === 0"
-            class="rounded-2xl border border-slate-200/70 px-4 py-10 text-center text-slate-500 dark:border-slate-800/70 dark:text-slate-400">
+          <div
+            v-else-if="apps.length === 0"
+            class="rounded-2xl border border-slate-200/70 px-4 py-10 text-center text-slate-500 dark:border-slate-800/70 dark:text-slate-400"
+          >
            暂无可更新应用
          </div>
          <div v-else class="space-y-3">
-            <label v-for="app in apps" :key="app.pkgname"
-              class="flex flex-col gap-3 rounded-2xl border border-slate-200/70 bg-white/90 p-4 shadow-sm dark:border-slate-800/70 dark:bg-slate-900/70 sm:flex-row sm:items-center sm:gap-4">
+            <label
+              v-for="app in apps"
+              :key="app.pkgname"
+              class="flex flex-col gap-3 rounded-2xl border border-slate-200/70 bg-white/90 p-4 shadow-sm dark:border-slate-800/70 dark:bg-slate-900/70 sm:flex-row sm:items-center sm:gap-4"
+            >
              <div class="flex items-start gap-3">
-                <input type="checkbox" class="mt-1 h-4 w-4 rounded border-slate-300 accent-brand focus:ring-brand"
-                  v-model="app.selected" :disabled="app.upgrading" />
+                <input
+                  type="checkbox"
+                  class="mt-1 h-4 w-4 rounded border-slate-300 accent-brand focus:ring-brand"
+                  v-model="app.selected"
+                  :disabled="app.upgrading"
+                />
                <div>
-                  <p class="font-semibold text-slate-900 dark:text-white">{{ app.pkgname }}</p>
+                  <p class="font-semibold text-slate-900 dark:text-white">
+                    {{ app.pkgname }}
+                  </p>
                  <p class="text-sm text-slate-500 dark:text-slate-400">
-                    当前 {{ app.currentVersion || '-' }} · 更新至 {{ app.newVersion || '-' }}
+                    当前 {{ app.currentVersion || "-" }} · 更新至
+                    {{ app.newVersion || "-" }}
                  </p>
                </div>
              </div>
              <div class="flex items-center gap-2 sm:ml-auto">
-                <button type="button"
+                <button
+                  type="button"
                  class="inline-flex items-center gap-2 rounded-2xl border border-slate-200/70 px-4 py-2 text-sm font-semibold text-slate-600 transition hover:bg-slate-50 disabled:opacity-40 dark:border-slate-700 dark:text-slate-200"
-                  :disabled="app.upgrading" @click.prevent="$emit('upgrade-one', app)">
+                  :disabled="app.upgrading"
+                  @click.prevent="$emit('upgrade-one', app)"
+                >
                  <i class="fas fa-arrow-up"></i>
-                  {{ app.upgrading ? '更新中…' : '更新' }}
+                  {{ app.upgrading ? "更新中…" : "更新" }}
                </button>
              </div>
            </label>
@@ -80,7 +124,7 @@
 </template>

 <script setup lang="ts">
-import type { UpdateAppItem } from '../global/typedefinition';
+import type { UpdateAppItem } from "../global/typedefinition";

 defineProps<{
  show: boolean;
@@ -92,11 +136,10 @@ defineProps<{

 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const emit = defineEmits<{
-  (e: 'close'): void;
-  (e: 'refresh'): void;
-  (e: 'toggle-all'): void;
-  (e: 'upgrade-selected'): void;
-  (e: 'upgrade-one', app: UpdateAppItem): void;
+  (e: "close"): void;
+  (e: "refresh"): void;
+  (e: "toggle-all"): void;
+  (e: "upgrade-selected"): void;
+  (e: "upgrade-one", app: UpdateAppItem): void;
 }>();
 </script>
-
--- a/src/global/downloadStatus.ts
+++ b/src/global/downloadStatus.ts
@@ -1,22 +1,22 @@
-import { computed,ComputedRef,ref,unref,watch } from "vue";
-import type { DownloadItem,DownloadItemStatus } from "./typedefinition";
+import { computed, ComputedRef, ref, unref, watch } from "vue";
+import type { DownloadItem, DownloadItemStatus } from "./typedefinition";

 export const downloads = ref<DownloadItem[]>([]);

-export function removeDownloadItem(pkgname:string) {
+export function removeDownloadItem(pkgname: string) {
  const list = downloads.value;
  for (let i = list.length - 1; i >= 0; i -= 1) {
    if (list[i].pkgname === pkgname) {
-      list.splice(i,1);
+      list.splice(i, 1);
    }
  }
 }

-export function watchDownloadsChange (cb: () => void) {
-  const statusById = new Map<number,DownloadItemStatus>();
+export function watchDownloadsChange(cb: () => void) {
+  const statusById = new Map<number, DownloadItemStatus>();

  for (const item of downloads.value) {
-    statusById.set(item.id,item.status);
+    statusById.set(item.id, item.status);
  }

  watch(
@@ -27,7 +27,7 @@ export function watchDownloadsChange (cb: () => void) {
        if (item.status === "completed" && prevStatus !== "completed") {
          cb();
        }
-        statusById.set(item.id,item.status);
+        statusById.set(item.id, item.status);
      }

      if (statusById.size > list.length) {
@@ -42,7 +42,7 @@ export function watchDownloadsChange (cb: () => void) {
  );
 }

-export function useDownloadItemStatus (
+export function useDownloadItemStatus(
  pkgname?: ComputedRef<string | undefined>,
 ) {
  const status: ComputedRef<DownloadItemStatus | undefined> = computed(() => {
@@ -63,7 +63,7 @@ export function useDownloadItemStatus (
  };
 }

-export function useInstallFeedback (pkgname?: ComputedRef<string | undefined>) {
+export function useInstallFeedback(pkgname?: ComputedRef<string | undefined>) {
  const installFeedback = computed(() => {
    const name = unref(pkgname);
    if (!name) return false;
--- a/src/global/storeConfig.ts
+++ b/src/global/storeConfig.ts
@@ -1,7 +1,8 @@
 import { ref } from "vue";
 import type { App } from "./typedefinition";

-export const APM_STORE_BASE_URL: string = 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<App | null>(null);
--- a/src/global/typedefinition.ts
+++ b/src/global/typedefinition.ts
@@ -1,40 +1,46 @@
 export interface InstallLog {
-    id: number;
-    success: boolean;
-    time: number;
-    exitCode: number | null;
-    message: string;
+  id: number;
+  success: boolean;
+  time: number;
+  exitCode: number | null;
+  message: string;
 }

 export interface DownloadResult extends InstallLog {
-    success: boolean;
-    exitCode: number | null;
+  success: boolean;
+  exitCode: number | null;
 }

-export type DownloadItemStatus = 'downloading' | 'installing' | 'paused' | 'completed' | 'failed' | 'queued'; // 可根据实际状态扩展
+export type DownloadItemStatus =
+  | "downloading"
+  | "installing"
+  | "paused"
+  | "completed"
+  | "failed"
+  | "queued"; // 可根据实际状态扩展

 export interface DownloadItem {
-    id: number;                     
-    name: string;
-    pkgname: string;
-    version: string;
-    icon: string;
-    status: DownloadItemStatus;
-    progress: number;               // 0 ~ 100 的百分比，或 0 ~ 1 的小数（建议统一）
-    downloadedSize: number;         // 已下载字节数
-    totalSize: number;              // 总字节数（可能为 0 初始时）
-    speed: number;                  // 当前下载速度，单位如 B/s
-    timeRemaining: number;          // 剩余时间（秒），0 表示未知
-    startTime: number;              // Date.now() 返回的时间戳（毫秒）
-    endTime?: number;             // 下载完成时间戳（毫秒），可选
-    logs: Array<{
-        time: number;                 // 日志时间戳
-        message: string;              // 日志消息
-    }>;
-    source: string;                 // 例如 'APM Store'
-    retry: boolean;                  // 当前是否为重试下载
-    upgradeOnly?: boolean;           // 是否为仅升级任务
-    error?: string;
+  id: number;
+  name: string;
+  pkgname: string;
+  version: string;
+  icon: string;
+  status: DownloadItemStatus;
+  progress: number; // 0 ~ 100 的百分比，或 0 ~ 1 的小数（建议统一）
+  downloadedSize: number; // 已下载字节数
+  totalSize: number; // 总字节数（可能为 0 初始时）
+  speed: number; // 当前下载速度，单位如 B/s
+  timeRemaining: number; // 剩余时间（秒），0 表示未知
+  startTime: number; // Date.now() 返回的时间戳（毫秒）
+  endTime?: number; // 下载完成时间戳（毫秒），可选
+  logs: Array<{
+    time: number; // 日志时间戳
+    message: string; // 日志消息
+  }>;
+  source: string; // 例如 'APM Store'
+  retry: boolean; // 当前是否为重试下载
+  upgradeOnly?: boolean; // 是否为仅升级任务
+  error?: string;
 }

 /*
@@ -54,68 +60,67 @@ export interface DownloadItem {
    "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;
+  // 原始数据
+  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
-    flags?: string; // Tags in apm packages manager, e.g. "automatic" for dependencies
-    arch?: string; // Architecture, e.g. "amd64", "arm64"
-    currentStatus: 'not-installed' | 'installed'; // Current installation status
+  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
+  flags?: string; // Tags in apm packages manager, e.g. "automatic" for dependencies
+  arch?: string; // Architecture, e.g. "amd64", "arm64"
+  currentStatus: "not-installed" | "installed"; // Current installation status
 }

 export interface UpdateAppItem {
-    pkgname: string;
-    currentVersion?: string;
-    newVersion?: string;
-    selected?: boolean;
-    upgrading?: boolean;
+  pkgname: string;
+  currentVersion?: string;
+  newVersion?: string;
+  selected?: boolean;
+  upgrading?: boolean;
 }

-
 /**************Below are type from main process ********************/
 export interface InstalledAppInfo {
-    pkgname: string;
-    version: string;
-    arch: string;
-    flags: string;
-    raw: string;
+  pkgname: string;
+  version: string;
+  arch: string;
+  flags: string;
+  raw: string;
 }

 /**
 * ipcSender传递的信息
 */
 export type ChannelPayload = {
-    success: boolean;
-    message: string;
-    [k: string]: unknown;
-};
+  success: boolean;
+  message: string;
+  [k: string]: unknown;
+};
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,15 +1,15 @@
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from "vue";
+import App from "./App.vue";

-import './3rdparty/fontawesome-free-6.7.2/css/all.min.css'
-import './assets/css/appstyle.css'
+import "./3rdparty/fontawesome-free-6.7.2/css/all.min.css";
+import "./assets/css/appstyle.css";

 // import './demos/ipc'
 // If you want use Node.js, the`nodeIntegration` needs to be enabled in the Main process.
 // import './demos/node'

 createApp(App)
-  .mount('#app')
+  .mount("#app")
  .$nextTick(() => {
-    postMessage({ payload: 'removeLoading' }, '*')
-  })
+    postMessage({ payload: "removeLoading" }, "*");
+  });
--- a/src/modeuls/processInstall.ts
+++ b/src/modeuls/processInstall.ts
@@ -1,21 +1,27 @@
 // window.ipcRenderer.on('main-process-message', (_event, ...args) => {
 //   console.log('[Receive Main-process message]:', ...args)
 // })
-import pino from 'pino';
+import pino from "pino";

 import { currentApp, currentAppIsInstalled } from "../global/storeConfig";
 import { APM_STORE_BASE_URL } from "../global/storeConfig";
 import { downloads } from "../global/downloadStatus";

-import { InstallLog, DownloadItem, DownloadResult, App, DownloadItemStatus } from '../global/typedefinition';
+import {
+  InstallLog,
+  DownloadItem,
+  DownloadResult,
+  App,
+  DownloadItemStatus,
+} from "../global/typedefinition";

 let downloadIdCounter = 0;
-const logger = pino({ name: 'processInstall.ts' });
+const logger = pino({ name: "processInstall.ts" });

 export const handleInstall = () => {
  if (!currentApp.value?.pkgname) return;

-  if (downloads.value.find(d => d.pkgname === currentApp.value?.pkgname)) {
+  if (downloads.value.find((d) => d.pkgname === currentApp.value?.pkgname)) {
    logger.info(`任务已存在，忽略重复添加: ${currentApp.value.pkgname}`);
    return;
  }
@@ -28,24 +34,22 @@ export const handleInstall = () => {
    pkgname: currentApp.value.pkgname,
    version: currentApp.value.version,
    icon: `${APM_STORE_BASE_URL}/${window.apm_store.arch}/${currentApp.value.category}/${currentApp.value.pkgname}/icon.png`,
-    status: 'queued',
+    status: "queued",
    progress: 0,
    downloadedSize: 0,
    totalSize: 0,
    speed: 0,
    timeRemaining: 0,
    startTime: Date.now(),
-    logs: [
-      { time: Date.now(), message: '开始下载...' }
-    ],
-    source: 'APM Store',
-    retry: false
+    logs: [{ time: Date.now(), message: "开始下载..." }],
+    source: "APM Store",
+    retry: false,
  };

  downloads.value.push(download);

  // Send to main process to start download
-  window.ipcRenderer.send('queue-install', JSON.stringify(download));
+  window.ipcRenderer.send("queue-install", JSON.stringify(download));

  // const encodedPkg = encodeURIComponent(currentApp.value.Pkgname);
  // openApmStoreUrl(`apmstore://install?pkg=${encodedPkg}`, {
@@ -55,15 +59,15 @@ export const handleInstall = () => {

 export const handleRetry = (download_: DownloadItem) => {
  if (!download_?.pkgname) return;
-  download_.retry = true;  
+  download_.retry = true;
  // Send to main process to start download
-  window.ipcRenderer.send('queue-install', JSON.stringify(download_));
+  window.ipcRenderer.send("queue-install", JSON.stringify(download_));
 };

 export const handleUpgrade = (app: App) => {
  if (!app.pkgname) return;

-  if (downloads.value.find(d => d.pkgname === app.pkgname)) {
+  if (downloads.value.find((d) => d.pkgname === app.pkgname)) {
    logger.info(`任务已存在，忽略重复添加: ${app.pkgname}`);
    return;
  }
@@ -75,58 +79,57 @@ export const handleUpgrade = (app: App) => {
    pkgname: app.pkgname,
    version: app.version,
    icon: `${APM_STORE_BASE_URL}/${window.apm_store.arch}/${app.category}/${app.pkgname}/icon.png`,
-    status: 'queued',
+    status: "queued",
    progress: 0,
    downloadedSize: 0,
    totalSize: 0,
    speed: 0,
    timeRemaining: 0,
    startTime: Date.now(),
-    logs: [
-      { time: Date.now(), message: '开始更新...' }
-    ],
-    source: 'APM Update',
+    logs: [{ time: Date.now(), message: "开始更新..." }],
+    source: "APM Update",
    retry: false,
-    upgradeOnly: true
+    upgradeOnly: true,
  };

  downloads.value.push(download);
-  window.ipcRenderer.send('queue-install', JSON.stringify(download));
+  window.ipcRenderer.send("queue-install", JSON.stringify(download));
 };

 export const handleRemove = () => {
  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) => {
  if (log.success) {
    currentAppIsInstalled.value = false;
  } else {
    currentAppIsInstalled.value = true;
-    console.error('卸载失败:', log.message);
+    console.error("卸载失败:", log.message);
  }
 });

-window.ipcRenderer.on('install-status', (_event, log: InstallLog) => {
-    const downloadObj = downloads.value.find(d => d.id === log.id);
-    if(downloadObj) downloadObj.status = log.message as DownloadItemStatus;
+window.ipcRenderer.on("install-status", (_event, log: InstallLog) => {
+  const downloadObj = downloads.value.find((d) => d.id === log.id);
+  if (downloadObj) downloadObj.status = log.message as DownloadItemStatus;
 });
-window.ipcRenderer.on('install-log', (_event, log: InstallLog) => {
-    const downloadObj = downloads.value.find(d => d.id === log.id);
-    if(downloadObj) downloadObj.logs.push({
-        time: log.time,
-        message: log.message
+window.ipcRenderer.on("install-log", (_event, log: InstallLog) => {
+  const downloadObj = downloads.value.find((d) => d.id === log.id);
+  if (downloadObj)
+    downloadObj.logs.push({
+      time: log.time,
+      message: log.message,
    });
 });

-window.ipcRenderer.on('install-complete', (_event, log: DownloadResult) => {
-    const downloadObj = downloads.value.find(d => d.id === log.id);
-    if (downloadObj) {
-      if (log.success) {
-          downloadObj.status = 'completed';
-      } else {
-          downloadObj.status = 'failed';
-      }
+window.ipcRenderer.on("install-complete", (_event, log: DownloadResult) => {
+  const downloadObj = downloads.value.find((d) => d.id === log.id);
+  if (downloadObj) {
+    if (log.success) {
+      downloadObj.status = "completed";
+    } else {
+      downloadObj.status = "failed";
    }
+  }
 });
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,14 +1,14 @@
 /* eslint-disable */
 /// <reference types="vite/client" />

-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }

 interface Window {
  // expose in the `electron/preload/index.ts`
-  ipcRenderer: import('electron').IpcRenderer
-  apm_store: any
+  ipcRenderer: import("electron").IpcRenderer;
+  apm_store: any;
 }