add speed per second

dogodo-cc · Aug 30, 2024 · 710060a · 710060a
1 parent 608a7c7
commit 710060a
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 1 deletion.
diff --git a/app-views/components.d.ts b/app-views/components.d.ts
@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     AButton: typeof import('ant-design-vue/es')['Button']
     AProgress: typeof import('ant-design-vue/es')['Progress']
+    ATag: typeof import('ant-design-vue/es')['Tag']
     Download: typeof import('./src/components/download.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
   }

diff --git a/app-views/src/components/download.vue b/app-views/src/components/download.vue
@@ -2,6 +2,7 @@
     <div class="download-demo">
         <div class="task" v-for="task in taskList" :key="task.url">
             <a-progress :percent="Math.ceil(task.percent * 100)"></a-progress>
+            <a-tag color="purple">{{ bytesToSize(task.bytesPerSecond) }}</a-tag>
             <a-button :type="task.isPause ? 'primary' : 'default'" @click="downloadTogglePause(task)">
                 {{ task.percent === 1 ? '完成' : (task.isPause ? '继续' : '暂停') }}</a-button>
         </div>
@@ -15,6 +16,13 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
+function bytesToSize(bytes: number): string {
+    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    if (bytes === 0) return '0';
+    let i = Math.floor(Math.log(bytes) / Math.log(1024));
+    return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + ' ' + units[i];
+}
+
 
 const url = 'https://www.90s.co/videos/hello.zip';
 const url2 = 'http://ftp.cocos.org/TestBuilds/Editor-3d/v3.8.4/CocosCreator-v3.8.4-win-082913.zip'
@@ -48,6 +56,7 @@ window.ipc.on('download-progress', (_, item: IDownloadItem) => {
     const task = taskList.value.find(v => v.url === item.url);
     if (task) {
         task.percent = item.percent;
+        task.bytesPerSecond = item.bytesPerSecond ?? 0;
     }
 })
 </script>

diff --git a/app/src/download/download-item.ts b/app/src/download/download-item.ts
@@ -52,6 +52,7 @@ export class DownloadItem extends DownloadItemEmitter implements IDownloadItem {
     isPause?: boolean;
     isWait?: boolean;
     isLoading?: boolean;
+    bytesPerSecond?: number;
 
     private abort?: () => void; // 缓存取消函数，用于暂停和取消等
     private chunkSize = 1 * 1024 * 1024;
@@ -98,6 +99,7 @@ export class DownloadItem extends DownloadItemEmitter implements IDownloadItem {
         this.isPause = false;
         this.isWait = false;
         this.isLoading = true;
+        this.bytesPerSecond = 0;
 
         ensureDir(this.downloadPath); // 每次下载都确保一下路径是存在的，避免创建文件的错误
         this.emit('download:start', this.pickItem());
@@ -129,6 +131,8 @@ export class DownloadItem extends DownloadItemEmitter implements IDownloadItem {
                 controller.abort();
             };
 
+            const startTime = Date.now();
+
             await axios({
                 url: this.url,
                 method: 'GET',
@@ -148,6 +152,8 @@ export class DownloadItem extends DownloadItemEmitter implements IDownloadItem {
                 })
                 .then(() => {
                     this.percent = currentChunkEnd / (this.contentLength - 1);
+                    const endTime = Date.now();
+                    this.bytesPerSecond = ((currentChunkEnd - downloadedSize) / (endTime - startTime)) * 1000;
                     this.emit('download:progress', this.pickItem());
                     this.download(currentChunkEnd + 1); // 因为 header:Range 那边是两边闭合，所以下一个起点需要 +1
                 })
@@ -167,12 +173,13 @@ export class DownloadItem extends DownloadItemEmitter implements IDownloadItem {
         this.isWait = false;
         this.isLoading = false;
         this.isPause = true;
+        this.bytesPerSecond = 0;
         this.emit('download:end', this.pickItem(), success, error);
     }
 
     // 用于传递数据的 item，需要剥离一些不可序列化的数据
     pickItem(): IDownloadItem {
-        const { url, file, contentLength, percent, isPause, isWait, isLoading } = this;
+        const { url, file, contentLength, percent, isPause, isWait, isLoading, bytesPerSecond } = this;
         return {
             url,
             file,
@@ -181,6 +188,7 @@ export class DownloadItem extends DownloadItemEmitter implements IDownloadItem {
             isPause,
             isWait,
             isLoading,
+            bytesPerSecond,
         };
     }
 

diff --git a/app/src/download/download.ts b/app/src/download/download.ts
@@ -89,4 +89,16 @@ export class DownloadManger {
             this.createTask(nextItem.url);
         }
     }
+
+    async clearTasks(removeFile = false) {
+        const allTaskItems = Object.values(this.downloadItemMap);
+        for (const v of allTaskItems) {
+            v.downloadPause();
+            v.removeAllListeners();
+            if (removeFile) {
+                await remove(v.file);
+            }
+            delete this.downloadItemMap[v.url];
+        }
+    }
 }
diff --git a/app/src/download/type.d.ts b/app/src/download/type.d.ts
@@ -3,6 +3,7 @@ export interface IDownloadItem {
     file: string; // 文件保存地址
     contentLength: number; // 文件大小
     percent: number; // 下载的进度
+    bytesPerSecond?: number; // 下载速度
     isPause?: boolean; // 暂停下载是用户交互控制的 比如手动暂停 或者 退出程序
     isWait?: boolean; // 等待是内部机制，不能同时下载超过一定数量
     isLoading?: boolean; // 是否正在下载（不能根据 !isPause && !isWait 推断，任务刚创建的时候，2 个都是 falsely）

diff --git a/global.d.ts b/global.d.ts
@@ -3,6 +3,7 @@ declare type IDownloadItem = {
     file: string;
     contentLength: number;
     percent: number;
+    bytesPerSecond?: number; // 下载速度
     isLoading: boolean;
     isPause?: boolean; // 暂停下载是用户交互控制的 比如手动暂停 或者 退出程序
     isWait?: boolean; // 等待是内部机制，不能同时下载超过一定数量