From e6a3d9234b07b8fe8d156ed04ae83a082c133500 Mon Sep 17 00:00:00 2001
From: lanyeeee <1210347077@qq.com>
Date: Fri, 22 Nov 2024 05:23:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E7=AB=A0=E8=8A=82?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E6=9D=A1=E7=9A=84=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DownloadingList.vue | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/DownloadingList.vue b/src/components/DownloadingList.vue
index 9991538..4744552 100644
--- a/src/components/DownloadingList.vue
+++ b/src/components/DownloadingList.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import {onMounted, ref} from "vue";
+import {computed, onMounted, ref} from "vue";
 import {commands, Config, events} from "../bindings.ts";
 import {open} from "@tauri-apps/plugin-dialog";
 import {NProgress, useNotification} from "naive-ui";
@@ -30,6 +30,14 @@ const overallProgress = ref<ProgressData>({
 });
 const settingsDialogShowing = ref<boolean>(false);
 
+const sortedProgresses = computed(() => {
+  const progressesArray = Array.from(progresses.value.entries());
+  progressesArray.sort((a, b) => {
+    return b[1].total - a[1].total;
+  });
+  return progressesArray;
+});
+
 onMounted(async () => {
   await events.downloadChapterPendingEvent.listen(({payload}) => {
     let progressData: ProgressData = {
@@ -142,14 +150,14 @@ async function selectDownloadDir() {
         </n-progress>
         <span>{{ overallProgress.downloadedCount }}/{{ overallProgress.total }}</span>
       </div>
-      <div class="grid grid-cols-[2fr_1fr_3fr]"
-           v-for="[chapterId, {albumTitle,chapterTitle, percentage, downloadedCount, total}] in progresses"
+      <div class="grid grid-cols-[1fr_1fr_2fr]"
+           v-for="[chapterId, {albumTitle, chapterTitle, percentage, downloadedCount, total}] in sortedProgresses"
            :key="chapterId">
         <span class="mb-1! text-ellipsis whitespace-nowrap overflow-hidden">{{ albumTitle }}</span>
         <span class="mb-1! text-ellipsis whitespace-nowrap overflow-hidden">{{ chapterTitle }}</span>
-        <n-progress class="" :percentage="percentage">
-          <div v-if="total===0">等待中</div>
-          <div v-else>{{ downloadedCount }}/{{ total }}</div>
+        <span v-if="total===0">等待中</span>
+        <n-progress v-else :percentage="percentage">
+          {{ downloadedCount }}/{{ total }}
         </n-progress>
       </div>
     </div>