feat(App): 添加上传进度列表排序功能

- 引入 computed 属性用于对进度列表进行排序
- 按照上传状态优先级排序:已完成 > 未开始 > 上传中
- 将排序后的列表绑定到模板中的进度显示组件
- 优化用户体验,让完成和未开始的文件更易识别
This commit is contained in:
2026-04-27 23:50:40 +08:00
parent f96f23360c
commit b050c36904
+13 -2
View File
@@ -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>