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
@@ -14,11 +14,12 @@
<div class="flex items-center gap-2">
<button
type="button"
class="inline-flex items-center gap-2 rounded-2xl border border-slate-200/70 px-4 py-2 text-sm font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
class="inline-flex items-center gap-2 rounded-2xl border border-slate-200/70 px-4 py-2 text-sm font-semibold text-slate-600 transition hover:bg-slate-50 disabled:opacity-40 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
:disabled="loading"
@click="$emit('refresh')"
>
<i class="fas fa-sync-alt"></i>
刷新
<i class="fas fa-sync-alt" :class="{ 'animate-spin': loading }"></i>
{{ loading ? "刷新中" : "刷新" }}
</button>
<button
type="button"
@@ -88,6 +89,7 @@ const props = defineProps<{
selectedCount: number;
allSelected: boolean;
someSelected: boolean;
loading?: boolean;
}>();
const emit = defineEmits<{