feat(update-center): 添加加载状态处理及UI优化

为更新中心添加加载状态管理,包括:
- 在打开和刷新操作时显示加载状态
- 禁用刷新按钮防止重复操作
- 添加加载中的动画效果和提示文本
- 优化加载时的UI显示
This commit is contained in:
2026-04-16 14:00:33 +08:00
parent e72553d570
commit 42046caf2c
6 changed files with 122 additions and 19 deletions
+27 -9
View File
@@ -22,6 +22,7 @@
:selected-count="selectedCount"
:all-selected="store.allSelected.value"
:some-selected="store.someSelected.value"
:loading="store.loading.value"
@refresh="store.refresh"
@start-selected="emit('request-start-selected')"
@request-close="store.requestClose"
@@ -42,16 +43,33 @@
</p>
</div>
<div class="flex min-h-0 flex-1">
<UpdateCenterList
:items="store.filteredItems.value"
:tasks="store.snapshot.value.tasks"
:selected-task-keys="store.selectedTaskKeys.value"
@toggle-selection="emit('toggle-selection', $event)"
@ignore-item="store.ignoreItem"
@unignore-item="store.unignoreItem"
/>
<div
v-if="store.loading.value && store.filteredItems.value.length === 0"
class="flex min-h-0 flex-1 items-center justify-center p-6"
>
<div class="flex flex-col items-center gap-3 text-slate-500 dark:text-slate-400">
<i class="fas fa-circle-notch fa-spin text-3xl"></i>
<p class="text-sm">正在检查更新</p>
</div>
</div>
<template v-else>
<div
v-if="store.loading.value && store.filteredItems.value.length > 0"
class="border-b border-slate-200/70 px-6 py-2 text-center text-xs text-slate-400 dark:border-slate-800/70 dark:text-slate-500"
>
正在刷新更新列表
</div>
<div class="flex min-h-0 flex-1">
<UpdateCenterList
:items="store.filteredItems.value"
:tasks="store.snapshot.value.tasks"
:selected-task-keys="store.selectedTaskKeys.value"
@toggle-selection="emit('toggle-selection', $event)"
@ignore-item="store.ignoreItem"
@unignore-item="store.unignoreItem"
/>
</div>
</template>
<UpdateCenterMigrationConfirm
:show="store.showMigrationConfirm.value"