<script lang="ts" setup>
|
import { DatabaseBackup } from '../../../../../icons/src';
|
import { VbenIconButton } from '../../../../../@core/ui-kit/shadcn-ui/src';
|
import { useVbenModal } from '../../../../../@core/ui-kit/popup-ui/src';
|
import { backupDatabase } from '../../../../../../api/system/database';
|
import { ref } from 'vue';
|
|
const isDownloading = ref(false);
|
const downloadProgress = ref(0);
|
|
const [Modal, modalApi] = useVbenModal({
|
onConfirm: async () => {
|
modalApi.close();
|
try {
|
isDownloading.value = true;
|
downloadProgress.value = 0;
|
await backupDatabase((progressEvent) => {
|
if (progressEvent.total) {
|
downloadProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total);
|
}
|
});
|
} catch (error: any) {
|
// Ignore if it's the Blob being thrown by the response interceptor
|
if (!(error instanceof Blob) && !(error?.response?.data instanceof Blob)) {
|
console.error('Backup failed:', error);
|
}
|
} finally {
|
isDownloading.value = false;
|
downloadProgress.value = 0;
|
}
|
},
|
});
|
|
function handleOpen() {
|
modalApi.open();
|
}
|
</script>
|
|
<template>
|
<div class="relative">
|
<VbenIconButton
|
v-access:code="['system:database:backup']"
|
class="hover:animate-[shrink_0.3s_ease-in-out]"
|
@click="handleOpen"
|
>
|
<DatabaseBackup class="size-4 text-foreground" />
|
</VbenIconButton>
|
|
<Modal
|
title="提示"
|
content-class="px-8 min-h-10"
|
footer-class="border-none mb-3 mr-3"
|
header-class="border-none"
|
>
|
确认要下载数据库的备份文件吗？
|
</Modal>
|
|
<teleport to="body">
|
<div
|
v-if="isDownloading"
|
class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm"
|
>
|
<div class="flex flex-col items-center space-y-4 rounded-lg bg-background p-6 shadow-lg">
|
<div class="size-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
|
<p class="text-lg font-medium text-foreground">正在下载备份: {{ downloadProgress }}%</p>
|
</div>
|
</div>
|
</teleport>
|
</div>
|
</template>
|
