From b050c36904ed5bb51c50d0f0251e2622c026b03d Mon Sep 17 00:00:00 2001
From: YGXB_net <ygxb-net@outlook.com>
Date: Mon, 27 Apr 2026 23:50:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(App):=20=E6=B7=BB=E5=8A=A0=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E8=BF=9B=E5=BA=A6=E5=88=97=E8=A1=A8=E6=8E=92=E5=BA=8F?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 引入 computed 属性用于对进度列表进行排序
- 按照上传状态优先级排序：已完成 > 未开始 > 上传中
- 将排序后的列表绑定到模板中的进度显示组件
- 优化用户体验，让完成和未开始的文件更易识别
---
 frontend/src/App.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 241ec98..c713076 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {ref, nextTick, watch} from 'vue'
+import {ref, nextTick, watch, computed} from 'vue'
 import {ElMessage} from 'element-plus'
 import {ElMessageBox} from 'element-plus'
 import {SelectPath, GetConfig, WriteConfig, StartUpload, StopUpload} from '../wailsjs/go/main/App';
@@ -31,6 +31,17 @@ const progressList = ref<FileProgress[]>([
   // {name: '测试文件1.txt', uploaded: 100, total: 500, percentage: 20},
 ])
 
+const sortedProgressList = computed(() => {
+  return [...progressList.value].sort((a, b) => {
+    const getPriority = (item: FileProgress) => {
+      if (item.percentage === 100) return 2
+      if (item.percentage === 0) return 1
+      return 0
+    }
+    return getPriority(a) - getPriority(b)
+  })
+})
+
 const addLog = (msg: string) => {
   logOutput.value.push(`[${new Date().toLocaleString()}]` + msg)
   nextTick(() => {
@@ -171,7 +182,7 @@ EventsOn("is-run", (run) => {
       <div class="form-item">
         <label>上传进度</label>
         <div class="progress-list">
-          <div v-for="(item, index) in progressList" :key="index" class="progress-item">
+          <div v-for="(item, index) in sortedProgressList" :key="index" class="progress-item">
             <span class="file-name">{{ item.name }}</span>
             <el-progress :percentage="item.percentage" :status="item.percentage === 100 ? 'success' : undefined"/>
             <span class="progress-text">{{ item.uploaded }}/{{ item.total }}</span>