feat(install): add metalink download support and progress tracking

close #12

src/App.vue

@@ -563,7 +563,9 @@ const cancelDownload = (id: DownloadItem) => {
   const index = downloads.value.findIndex((d) => d.id === id.id);
   if (index !== -1) {
     const download = downloads.value[index];
-    // download.status = 'cancelled'; // 'cancelled' not in DownloadItem type union? Check type
+    // 发送到主进程取消
+    window.ipcRenderer.send("cancel-install", download.id);
+
     download.status = "failed"; // Use 'failed' or add 'cancelled' to type if needed. User asked to keep type simple.
     download.logs.push({
       time: Date.now(),
@@ -572,7 +574,10 @@ const cancelDownload = (id: DownloadItem) => {
     // 延迟删除，让用户看到取消状态
     setTimeout(() => {
       logger.info(`删除下载: ${download.pkgname}`);
-      downloads.value.splice(index, 1);
+      // Remove from list only if it's still failed (user didn't retry immediately)
+      // Check index again
+      const idx = downloads.value.findIndex((d) => d.id === id.id);
+      if (idx !== -1) downloads.value.splice(idx, 1);
     }, 1000);
   }
 };

src/components/AppDetailModal.vue

@@ -203,6 +203,7 @@ import { computed, useAttrs } from "vue";
 import {
   useDownloadItemStatus,
   useInstallFeedback,
+  downloads,
 } from "../global/downloadStatus";
 import { APM_STORE_BASE_URL } from "../global/storeConfig";
 import type { App } from "../global/typedefinition";
@@ -225,6 +226,11 @@ const emit = defineEmits<{
 }>();
 
 const appPkgname = computed(() => props.app?.pkgname);
+
+const activeDownload = computed(() => {
+  return downloads.value.find((d) => d.pkgname === props.app?.pkgname);
+});
+
 const { installFeedback } = useInstallFeedback(appPkgname);
 const { isCompleted } = useDownloadItemStatus(appPkgname);
 const installBtnText = computed(() => {
@@ -232,7 +238,17 @@ const installBtnText = computed(() => {
     // TODO: 似乎有一个时间差，安装好了之后并不是立马就可以从已安装列表看见
     return "已安装";
   }
-  return installFeedback.value ? "已加入队列" : "安装";
+  if (installFeedback.value) {
+    const status = activeDownload.value?.status;
+    if (status === "downloading") {
+      return `下载中 ${(activeDownload.value?.progress || 0) * 100}%`;
+    }
+    if (status === "installing") {
+      return "安装中...";
+    }
+    return "已加入队列";
+  }
+  return "安装";
 });
 const iconPath = computed(() => {
   if (!props.app) return "";

src/components/DownloadDetail.vue

@@ -83,13 +83,13 @@
               <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 + '%' }"
+                  :style="{ width: downloadProgress + '%' }"
                 ></div>
               </div>
               <div
                 class="flex flex-wrap items-center justify-between text-sm text-slate-500 dark:text-slate-400"
               >
-                <span>{{ download.progress }}%</span>
+                <span>{{ downloadProgress }}%</span>
                 <span v-if="download.downloadedSize && download.totalSize">
                   {{ formatSize(download.downloadedSize) }} /
                   {{ formatSize(download.totalSize) }}
@@ -170,6 +170,19 @@
           </div>
 
           <div class="flex flex-wrap justify-end gap-3">
+            <button
+              v-if="
+                download.status === 'downloading' ||
+                download.status === 'queued' ||
+                download.status === 'paused'
+              "
+              type="button"
+              class="inline-flex items-center gap-2 rounded-2xl border border-rose-200/60 px-4 py-2 text-sm font-semibold text-rose-500 transition hover:bg-rose-50 dark:border-rose-500/30 dark:text-rose-400 dark:hover:bg-rose-900/20"
+              @click="cancel"
+            >
+              <i class="fas fa-times"></i>
+              取消下载
+            </button>
             <button
               v-if="download.status === 'failed'"
               type="button"
@@ -196,6 +209,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import type { DownloadItem } from "../global/typedefinition";
 
 const props = defineProps<{
@@ -220,6 +234,12 @@ const handleOverlayClick = () => {
   close();
 };
 
+const cancel = () => {
+  if (props.download) {
+    emit("cancel", props.download);
+  }
+};
+
 const retry = () => {
   if (props.download) {
     emit("retry", props.download);
@@ -286,4 +306,8 @@ const copyLogs = () => {
       prompt("请手动复制日志：", logsText);
     });
 };
+
+const downloadProgress = computed(() => {
+  return props.download ? Math.floor(props.download.progress * 100) : 0;
+});
 </script>

src/components/DownloadQueue.vue

@@ -86,7 +86,7 @@
               </p>
               <p class="text-xs text-slate-500 dark:text-slate-400">
                 <span v-if="download.status === 'downloading'"
-                  >下载中 {{ download.progress }}%</span
+                  >下载中 {{ Math.floor(download.progress * 100) }}%</span
                 >
                 <span v-else-if="download.status === 'installing'"
                   >安装中...</span
@@ -104,7 +104,7 @@
               >
                 <div
                   class="h-full rounded-full bg-brand"
-                  :style="{ width: `${download.progress}%` }"
+                  :style="{ width: `${download.progress * 100}%` }"
                 ></div>
               </div>
             </div>

src/global/typedefinition.ts

@@ -1,16 +1,20 @@
-export interface InstallLog {
+export interface InstallStatus {
   id: number;
-  success: boolean;
   time: number;
-  exitCode: number | null;
   message: string;
 }
 
-export interface DownloadResult extends InstallLog {
+export interface InstallLog extends InstallStatus {
   success: boolean;
   exitCode: number | null;
 }
 
+export interface DownloadResult extends InstallStatus {
+  success: boolean;
+  exitCode: number | null;
+  status: DownloadItemStatus | null;
+}
+
 export type DownloadItemStatus =
   | "downloading"
   | "installing"
@@ -26,7 +30,7 @@ export interface DownloadItem {
   version: string;
   icon: string;
   status: DownloadItemStatus;
-  progress: number; // 0 ~ 100 的百分比，或 0 ~ 1 的小数（建议统一）
+  progress: number; // 0 ~ 1 的小数
   downloadedSize: number; // 已下载字节数
   totalSize: number; // 总字节数（可能为 0 初始时）
   speed: number; // 当前下载速度，单位如 B/s
@@ -41,6 +45,8 @@ export interface DownloadItem {
   retry: boolean; // 当前是否为重试下载
   upgradeOnly?: boolean; // 是否为仅升级任务
   error?: string;
+  metalinkUrl?: string; // Metalink 下载链接
+  filename?: string; // 文件名
 }
 
 /*

src/modules/processInstall.ts

@@ -44,6 +44,8 @@ export const handleInstall = () => {
     logs: [{ time: Date.now(), message: "开始下载..." }],
     source: "APM Store",
     retry: false,
+    filename: currentApp.value.filename,
+    metalinkUrl: `${window.apm_store.arch}/${currentApp.value.category}/${currentApp.value.pkgname}/${currentApp.value.filename}.metalink`,
   };
 
   downloads.value.push(download);
@@ -114,6 +116,17 @@ 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-progress",
+  (_event, payload: { id: number; progress: number }) => {
+    const downloadObj = downloads.value.find((d) => d.id === payload.id);
+    if (downloadObj) {
+      downloadObj.progress = payload.progress;
+    }
+  },
+);
+
 window.ipcRenderer.on("install-log", (_event, log: InstallLog) => {
   const downloadObj = downloads.value.find((d) => d.id === log.id);
   if (downloadObj)