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

close #12

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>