From 34df745d1ca3bdcc0862eb9101aaa87e2ba797f2 Mon Sep 17 00:00:00 2001
From: zhengkunwang <31820853+zhengkunwang223@users.noreply.github.com>
Date: Wed, 26 Feb 2025 18:16:54 +0800
Subject: [PATCH] style: Change wget page style (#8016)

---
 .../host/file-management/process/index.vue    | 77 ++++++++++++++++---
 1 file changed, 68 insertions(+), 9 deletions(-)

diff --git a/frontend/src/views/host/file-management/process/index.vue b/frontend/src/views/host/file-management/process/index.vue
index 8d5c944d6..c6ef2822d 100644
--- a/frontend/src/views/host/file-management/process/index.vue
+++ b/frontend/src/views/host/file-management/process/index.vue
@@ -6,15 +6,47 @@
         :before-close="handleClose"
         :title="$t('file.downloadProcess')"
     >
-        <div v-for="(value, index) in res" :key="index">
-            <span>{{ value['percent'] === 100 ? $t('file.downloadSuccess') : $t('file.downloading') }}</span>
-            <MsgInfo :info="value['name']" width="250" />
-            <el-progress v-if="value['total'] == 0" :percentage="100" :indeterminate="true" :duration="1" />
-            <el-progress v-else :text-inside="true" :stroke-width="15" :percentage="value['percent']"></el-progress>
-            <span>
-                {{ getFileSize(value['written']) }}/
-                <span v-if="value['total'] > 0">{{ getFileSize(value['total']) }}</span>
-            </span>
+        <div class="space-y-4 p-4">
+            <div
+                v-for="(value, index) in res"
+                :key="index"
+                class="bg-white rounded-lg p-4 shadow-sm border border-gray-100 transition-all duration-200 hover:shadow-md"
+                :class="{ completed: value.percent === 100 }"
+            >
+                <div class="flex items-center gap-3">
+                    <div class="flex-1">
+                        <MsgInfo :info="value.name" class="text-gray-700" />
+                        <div class="text-gray-500">
+                            {{ value.percent === 100 ? $t('file.downloadSuccess') : $t('file.downloading') }}
+                        </div>
+                    </div>
+                </div>
+
+                <div class="space-y-2">
+                    <div class="flex justify-end text-gray-500 mb-1">
+                        <span>{{ getFileSize(value.written) }}</span>
+                        <span v-if="value.total > 0" class="text-gray-400">/{{ getFileSize(value.total) }}</span>
+                    </div>
+                    <div class="w-full">
+                        <el-progress
+                            v-if="value.total === 0 && value.percent != 100"
+                            :percentage="100"
+                            :indeterminate="true"
+                            :duration="1"
+                            class="progress-bar"
+                            :stroke-width="8"
+                            :show-text="false"
+                        />
+                        <el-progress
+                            v-else
+                            :percentage="value.percent"
+                            :stroke-width="8"
+                            class="progress-bar"
+                            :status="value.percent === 100 ? 'success' : ''"
+                        />
+                    </div>
+                </div>
+            </div>
         </div>
     </el-dialog>
 </template>
@@ -108,3 +140,30 @@ const onOpen = () => {
     getKeys();
 };
 </script>
+<style type="scss" scoped>
+.download-item.completed {
+    @apply bg-green-50/50;
+}
+
+.progress-bar {
+    :deep(.el-progress-bar__outer) {
+        @apply rounded-full bg-gray-100;
+    }
+
+    :deep(.el-progress-bar__inner) {
+        @apply rounded-full transition-all duration-300;
+    }
+}
+
+@keyframes bounce {
+    0%,
+    100% {
+        transform: translateY(-10%);
+        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+    }
+    50% {
+        transform: translateY(0);
+        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+}
+</style>