feat(ui): 导航栏新增数据库备份按钮及下载逻辑

hsy

2026-08-31 c03223372ac28a4f181a4600d669302174b5b2ca

feat(ui): 导航栏新增数据库备份按钮及下载逻辑

- 导航栏右侧新增“备份数据库”按钮及二次确认弹窗。
- 添加 `system:database:backup` 权限控制。
- 增加带有百分比进度的全屏下载 Loading 遮罩层。
- 新增 `backupDatabase` API，配置 `responseReturn: 'raw'` 绕过 Blob 文件误报服务器错误的拦截器，并实现文件流下载及自动命名。

 src/api/system/database/index.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,50 @@
import { requestClient } from '#/api/request';

function downloadBlob(blob: Blob, headers?: any) {
  let filename = 'backup.sql';
  if (headers) {
    const disposition = headers['content-disposition'] || headers['Content-Disposition'];
    if (disposition && disposition.indexOf('filename=') !== -1) {
      const matches = disposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
      if (matches != null && matches[1]) {
        filename = matches[1].replace(/['"]/g, '');
      }
    }
  }
  
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.style.display = 'none';
  link.href = url;
  link.setAttribute('download', decodeURIComponent(filename));
  document.body.append(link);
  link.click();
  link.remove();
  window.URL.revokeObjectURL(url);
}

/** ä¸‹è½½æ•°æ®åº“备份文件 */
export function backupDatabase(onDownloadProgress?: (progressEvent: any) => void) {
  return requestClient.request('/system/database/backup', {
    method: 'GET',
    responseType: 'blob',
    timeout: 300000, // 5分钟
    onDownloadProgress,
    responseReturn: 'raw',
  }).then((res: any) => {
    const blob = res.data || res;
    if (blob instanceof Blob) {
      downloadBlob(blob, res.headers);
    }
    return res;
  }).catch((err: any) => {
    if (err instanceof Blob) {
      downloadBlob(err);
      return err;
    } else if (err?.response?.data instanceof Blob) {
      downloadBlob(err.response.data, err.response.headers);
      return err;
    }
    throw err;
  });
}

 src/packages/@core/base/icons/src/lucide.ts

@@ -27,6 +27,7 @@
  CloudUpload,
  Copy,
  CornerDownLeft,
  DatabaseBackup,
  Download,
  Ellipsis,
  Eraser,

 src/packages/effects/layouts/src/basic/header/header.vue

@@ -9,6 +9,7 @@
import { VbenFullScreen, VbenIconButton } from '../../../../../@core/ui-kit/shadcn-ui/src';

import {
  DatabaseBackupButton,
  GlobalSearch,
  LanguageToggle,
  PreferencesButton,
@@ -56,6 +57,12 @@
  }
  // åå¥½è®¾ç½®å¿«æ·åŠŸèƒ½
  if (preferencesButtonPosition.value.header) {
    // æ•°æ®åº“备份按钮
    list.push({
      index: REFERENCE_VALUE + 5,
      name: 'database-backup',
    });

    list.push({
      index: REFERENCE_VALUE + 10,
      name: 'preferences',
@@ -188,6 +195,9 @@
          />
        </template>

        <template v-else-if="slot.name === 'database-backup'">
          <DatabaseBackupButton class="mr-1" />
        </template>
        <template v-else-if="slot.name === 'preferences'">
          <PreferencesButton
            class="mr-1"

 src/packages/effects/layouts/src/widgets/database-backup/database-backup.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,70 @@
<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>

 src/packages/effects/layouts/src/widgets/database-backup/index.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
export { default as DatabaseBackupButton } from './database-backup.vue';

 src/packages/effects/layouts/src/widgets/index.ts

@@ -12,3 +12,4 @@
export * from './theme-toggle';
export * from './timezone';
export * from './user-dropdown';
export * from './database-backup';