From 747b91d0ecce27e31ecc2fecc652416927fdb575 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=A4=E5=A4=A7=E7=BE=8A?= <gdy666@foxmail.com>
Date: Tue, 7 May 2024 15:10:07 +0800
Subject: [PATCH] chore: Optimize upload indicator display

---
 .../src/components/prompts/UploadFiles.vue    | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/prompts/UploadFiles.vue b/frontend/src/components/prompts/UploadFiles.vue
index 48a9e1d4..37b89fe1 100644
--- a/frontend/src/components/prompts/UploadFiles.vue
+++ b/frontend/src/components/prompts/UploadFiles.vue
@@ -8,13 +8,13 @@
       <div class="card-title">
         <h2>{{ $t("prompts.uploadFiles", { files: filesInUploadCount }) }}</h2>
         <div class="upload-info">
-          <div class="upload-speed">{{ uploadSpeed.toFixed(2) }} MB/s</div>
-          <div class="upload-eta">{{ formattedETA }} remaining</div>
+          <div class="upload-speed">{{ getUploadSpeedText() }}</div>
+          <div class="upload-eta">{{ getUploadEtaText() }}</div>
           <div class="upload-percentage">
-            {{ getProgressDecimal }}% Completed
+            {{ getUploadPercentageText() }}
           </div>
           <div class="upload-fraction">
-            {{ getTotalProgressBytes }} / {{ getTotalSize }}
+            {{ getUploadFractionText() }}
           </div>
         </div>
         <button
@@ -70,6 +70,8 @@ export default {
   data: function () {
     return {
       open: false,
+      padMaxLen:19,
+      padChar:'\u00A0',
     };
   },
   computed: {
@@ -105,6 +107,22 @@ export default {
     toggle: function () {
       this.open = !this.open;
     },
+    getUploadFractionText:function(){
+      let str = this.getTotalProgressBytes+'/'+this.getTotalSize
+      return str.padEnd(this.padMaxLen,this.padChar)
+    },
+    getUploadPercentageText:function(){
+      let str =  this.getProgressDecimal +'% Completed'
+      return  str.padEnd(this.padMaxLen,this.padChar)
+    },
+    getUploadEtaText:function(){
+      let str = this.formattedETA+ " remaining"
+      return str.padEnd(this.padMaxLen,this.padChar)
+    },
+    getUploadSpeedText:function(){
+      let str = this.uploadSpeed.toFixed(2)+ " MB/s"
+      return str.padEnd(this.padMaxLen,this.padChar)
+    },
     abortAll() {
       if (confirm(this.$t("upload.abortUpload"))) {
         abortAllUploads();