feat(App): 添加上传进度列表排序功能
- 引入 computed 属性用于对进度列表进行排序 - 按照上传状态优先级排序:已完成 > 未开始 > 上传中 - 将排序后的列表绑定到模板中的进度显示组件 - 优化用户体验,让完成和未开始的文件更易识别
This commit is contained in:
+13
-2
@@ -1,5 +1,5 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import {ref, nextTick, watch} from 'vue'
|
import {ref, nextTick, watch, computed} from 'vue'
|
||||||
import {ElMessage} from 'element-plus'
|
import {ElMessage} from 'element-plus'
|
||||||
import {ElMessageBox} from 'element-plus'
|
import {ElMessageBox} from 'element-plus'
|
||||||
import {SelectPath, GetConfig, WriteConfig, StartUpload, StopUpload} from '../wailsjs/go/main/App';
|
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},
|
// {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) => {
|
const addLog = (msg: string) => {
|
||||||
logOutput.value.push(`[${new Date().toLocaleString()}]` + msg)
|
logOutput.value.push(`[${new Date().toLocaleString()}]` + msg)
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
@@ -171,7 +182,7 @@ EventsOn("is-run", (run) => {
|
|||||||
<div class="form-item">
|
<div class="form-item">
|
||||||
<label>上传进度</label>
|
<label>上传进度</label>
|
||||||
<div class="progress-list">
|
<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>
|
<span class="file-name">{{ item.name }}</span>
|
||||||
<el-progress :percentage="item.percentage" :status="item.percentage === 100 ? 'success' : undefined"/>
|
<el-progress :percentage="item.percentage" :status="item.percentage === 100 ? 'success' : undefined"/>
|
||||||
<span class="progress-text">{{ item.uploaded }}/{{ item.total }}</span>
|
<span class="progress-text">{{ item.uploaded }}/{{ item.total }}</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user