feat(admin): 添加 S3 备份列表查看、下载和删除功能

- 在数据管理页面添加“查看备份”按钮，用于打开备份列表弹窗 - 新增 S3BackupModal 组件，展示备份文件列表，支持下载和删除操作 - 扩展 S3 工具类，支持列出、获取和删除 S3 对象 - 新增后端 API 接口：获取备份列表、删除备份、下载备份文件 - 为所有支持的语言添加相应的国际化文本
2026-02-12 16:26:50 +08:00
parent 1c416ce93e
commit 3cfa5f1f6a
21 changed files with 737 additions and 29 deletions
--- a/cwd-admin/src/api/admin.ts
+++ b/cwd-admin/src/api/admin.ts
@@ -408,3 +408,21 @@ export function saveS3Settings(data: S3SettingsResponse): Promise<{ message: str
 export function triggerS3Backup(): Promise<{ message: string; file: string }> {
 	return post<{ message: string; file: string }>('/admin/backup/s3', {});
 }
+
+export type S3BackupItem = {
+	key: string;
+	size: number;
+	lastModified: string;
+};
+
+export function fetchS3BackupList(): Promise<{ files: S3BackupItem[] }> {
+	return get<{ files: S3BackupItem[] }>('/admin/backup/s3/list');
+}
+
+export function deleteS3Backup(key: string): Promise<{ message: string }> {
+	return del<{ message: string }>(`/admin/backup/s3?key=${encodeURIComponent(key)}`);
+}
+
+export function downloadS3BackupUrl(key: string): string {
+	return `/admin/backup/s3/download?key=${encodeURIComponent(key)}`;
+}
--- a/cwd-admin/src/locales/ar.json
+++ b/cwd-admin/src/locales/ar.json
@@ -130,7 +130,15 @@
        "saving": "جارٍ الحفظ...",
        "backup": "النسخ الاحتياطي إلى S3 الآن",
        "backingUp": "جارٍ النسخ الاحتياطي...",
-        "success": "نجح النسخ الاحتياطي! الملف: {file}"
+        "success": "نجح النسخ الاحتياطي! الملف: {file}",
+        "viewBackups": "عرض النسخ الاحتياطية",
+        "loadingBackups": "جارٍ التحميل...",
+        "backupListTitle": "قائمة نسخ S3 الاحتياطية",
+        "emptyBackupList": "لا توجد ملفات نسخ احتياطي",
+        "download": "تحميل",
+        "delete": "حذف",
+        "confirmDelete": "هل أنت متأكد من أنك تريد حذف النسخ الاحتياطي {file}؟",
+        "deleteSuccess": "تم الحذف بنجاح"
      }
    },
    "logs": {
--- a/cwd-admin/src/locales/de.json
+++ b/cwd-admin/src/locales/de.json
@@ -130,7 +130,15 @@
        "saving": "Speichert...",
        "backup": "Jetzt zu S3 sichern",
        "backingUp": "Sichere...",
-        "success": "Backup erfolgreich! Datei: {file}"
+        "success": "Backup erfolgreich! Datei: {file}",
+        "viewBackups": "Backups anzeigen",
+        "loadingBackups": "Laden...",
+        "backupListTitle": "S3 Backup-Liste",
+        "emptyBackupList": "Keine Backup-Dateien",
+        "download": "Herunterladen",
+        "delete": "Löschen",
+        "confirmDelete": "Sind Sie sicher, dass Sie das Backup {file} löschen möchten?",
+        "deleteSuccess": "Erfolgreich gelöscht"
      }
    },
    "logs": {
--- a/cwd-admin/src/locales/en-US.json
+++ b/cwd-admin/src/locales/en-US.json
@@ -130,7 +130,15 @@
        "saving": "Saving...",
        "backup": "Backup to S3 Now",
        "backingUp": "Backing up...",
-        "success": "Backup successful! File: {file}"
+        "success": "Backup successful! File: {file}",
+        "viewBackups": "View Backups",
+        "loadingBackups": "Loading...",
+        "backupListTitle": "S3 Backup List",
+        "emptyBackupList": "No backup files",
+        "download": "Download",
+        "delete": "Delete",
+        "confirmDelete": "Are you sure you want to delete backup {file}?",
+        "deleteSuccess": "Deleted successfully"
      }
    },
    "logs": {
--- a/cwd-admin/src/locales/es.json
+++ b/cwd-admin/src/locales/es.json
@@ -130,7 +130,15 @@
        "saving": "Guardando...",
        "backup": "Copiar a S3 Ahora",
        "backingUp": "Copiando...",
-        "success": "¡Copia de seguridad exitosa! Archivo: {file}"
+        "success": "¡Copia de seguridad exitosa! Archivo: {file}",
+        "viewBackups": "Ver copias de seguridad",
+        "loadingBackups": "Cargando...",
+        "backupListTitle": "Lista de copias de seguridad S3",
+        "emptyBackupList": "No hay archivos de copia de seguridad",
+        "download": "Descargar",
+        "delete": "Eliminar",
+        "confirmDelete": "¿Estás seguro de que quieres eliminar la copia de seguridad {file}?",
+        "deleteSuccess": "Eliminado exitosamente"
      }
    },
    "logs": {
--- a/cwd-admin/src/locales/fr.json
+++ b/cwd-admin/src/locales/fr.json
@@ -130,7 +130,15 @@
        "saving": "Sauvegarde...",
        "backup": "Sauvegarder vers S3 Maintenant",
        "backingUp": "Sauvegarde en cours...",
-        "success": "Sauvegarde réussie ! Fichier: {file}"
+        "success": "Sauvegarde réussie ! Fichier: {file}",
+        "viewBackups": "Voir les sauvegardes",
+        "loadingBackups": "Chargement...",
+        "backupListTitle": "Liste des sauvegardes S3",
+        "emptyBackupList": "Aucun fichier de sauvegarde",
+        "download": "Télécharger",
+        "delete": "Supprimer",
+        "confirmDelete": "Êtes-vous sûr de vouloir supprimer la sauvegarde {file} ?",
+        "deleteSuccess": "Supprimé avec succès"
      }
    },
    "logs": {
--- a/cwd-admin/src/locales/hi.json
+++ b/cwd-admin/src/locales/hi.json
@@ -130,7 +130,15 @@
        "saving": "सहेजा जा रहा है...",
        "backup": "अभी S3 पर बैकअप करें",
        "backingUp": "बैकअप हो रहा है...",
-        "success": "बैकअप सफल! फ़ाइल: {file}"
+        "success": "बैकअप सफल! फ़ाइल: {file}",
+        "viewBackups": "बैकअप देखें",
+        "loadingBackups": "लोड हो रहा है...",
+        "backupListTitle": "S3 बैकअप सूची",
+        "emptyBackupList": "कोई बैकअप फ़ाइल नहीं",
+        "download": "डाउनलोड",
+        "delete": "हटाएं",
+        "confirmDelete": "क्या आप वाकई बैकअप {file} हटाना चाहते हैं?",
+        "deleteSuccess": "सफलतापूर्वक हटाया गया"
      }
    },
    "logs": {
--- a/cwd-admin/src/locales/id.json
+++ b/cwd-admin/src/locales/id.json
@@ -130,7 +130,15 @@
        "saving": "Menyimpan...",
        "backup": "Cadangkan ke S3 Sekarang",
        "backingUp": "Mencadangkan...",
-        "success": "Cadangan berhasil! File: {file}"
+        "success": "Cadangan berhasil! File: {file}",
+        "viewBackups": "Lihat Cadangan",
+        "loadingBackups": "Memuat...",
+        "backupListTitle": "Daftar Cadangan S3",
+        "emptyBackupList": "Tidak ada file cadangan",
+        "download": "Unduh",
+        "delete": "Hapus",
+        "confirmDelete": "Apakah Anda yakin ingin menghapus cadangan {file}?",
+        "deleteSuccess": "Berhasil dihapus"
      }
    },
    "logs": {
--- a/cwd-admin/src/locales/it.json
+++ b/cwd-admin/src/locales/it.json
@@ -130,7 +130,15 @@
        "saving": "Salvataggio...",
        "backup": "Backup su S3 Ora",
        "backingUp": "Backup in corso...",
-        "success": "Backup riuscito! File: {file}"
+        "success": "Backup riuscito! File: {file}",
+        "viewBackups": "Visualizza Backup",
+        "loadingBackups": "Caricamento...",
+        "backupListTitle": "Lista Backup S3",
+        "emptyBackupList": "Nessun file di backup",
+        "download": "Scarica",
+        "delete": "Elimina",
+        "confirmDelete": "Sei sicuro di voler eliminare il backup {file}?",
+        "deleteSuccess": "Eliminato con successo"
      }
    },
    "logs": {
--- a/cwd-admin/src/locales/ja.json
+++ b/cwd-admin/src/locales/ja.json
@@ -130,7 +130,15 @@
        "saving": "保存中...",
        "backup": "今すぐ S3 にバックアップ",
        "backingUp": "バックアップ中...",
-        "success": "バックアップ成功！ファイル: {file}"
+        "success": "バックアップ成功！ファイル: {file}",
+        "viewBackups": "バックアップを表示",
+        "loadingBackups": "読み込み中...",
+        "backupListTitle": "S3 バックアップ一覧",
+        "emptyBackupList": "バックアップファイルがありません",
+        "download": "ダウンロード",
+        "delete": "削除",
+        "confirmDelete": "バックアップ {file} を削除してもよろしいですか？",
+        "deleteSuccess": "削除しました"
      }
    },
    "logs": {
--- a/cwd-admin/src/locales/ko.json
+++ b/cwd-admin/src/locales/ko.json
@@ -130,7 +130,15 @@
        "saving": "저장 중...",
        "backup": "지금 S3에 백업",
        "backingUp": "백업 중...",
-        "success": "백업 성공! 파일: {file}"
+        "success": "백업 성공! 파일: {file}",
+        "viewBackups": "백업 보기",
+        "loadingBackups": "로딩 중...",
+        "backupListTitle": "S3 백업 목록",
+        "emptyBackupList": "백업 파일 없음",
+        "download": "다운로드",
+        "delete": "삭제",
+        "confirmDelete": "백업 {file}을(를) 삭제하시겠습니까?",
+        "deleteSuccess": "삭제 성공"
      }
    },
    "logs": {
--- a/cwd-admin/src/locales/nl.json
+++ b/cwd-admin/src/locales/nl.json
@@ -130,7 +130,15 @@
        "saving": "Opslaan...",
        "backup": "Nu naar S3 back-uppen",
        "backingUp": "Back-uppen...",
-        "success": "Back-up geslaagd! Bestand: {file}"
+        "success": "Back-up geslaagd! Bestand: {file}",
+        "viewBackups": "Back-ups bekijken",
+        "loadingBackups": "Laden...",
+        "backupListTitle": "S3 Back-up lijst",
+        "emptyBackupList": "Geen back-up bestanden",
+        "download": "Downloaden",
+        "delete": "Verwijderen",
+        "confirmDelete": "Weet u zeker dat u back-up {file} wilt verwijderen?",
+        "deleteSuccess": "Succesvol verwijderd"
      }
    },
    "logs": {
--- a/cwd-admin/src/locales/pt.json
+++ b/cwd-admin/src/locales/pt.json
@@ -130,7 +130,15 @@
        "saving": "Salvando...",
        "backup": "Fazer Backup para S3 Agora",
        "backingUp": "Fazendo Backup...",
-        "success": "Backup bem-sucedido! Arquivo: {file}"
+        "success": "Backup bem-sucedido! Arquivo: {file}",
+        "viewBackups": "Ver Backups",
+        "loadingBackups": "Carregando...",
+        "backupListTitle": "Lista de Backups S3",
+        "emptyBackupList": "Nenhum arquivo de backup",
+        "download": "Baixar",
+        "delete": "Excluir",
+        "confirmDelete": "Tem certeza de que deseja excluir o backup {file}?",
+        "deleteSuccess": "Excluído com sucesso"
      }
    },
    "logs": {
--- a/cwd-admin/src/locales/ru.json
+++ b/cwd-admin/src/locales/ru.json
@@ -130,7 +130,15 @@
        "saving": "Сохранение...",
        "backup": "Сделать бэкап в S3",
        "backingUp": "Бэкап...",
-        "success": "Бэкап успешен! Файл: {file}"
+        "success": "Бэкап успешен! Файл: {file}",
+        "viewBackups": "Просмотр бэкапов",
+        "loadingBackups": "Загрузка...",
+        "backupListTitle": "Список бэкапов S3",
+        "emptyBackupList": "Нет файлов бэкапов",
+        "download": "Скачать",
+        "delete": "Удалить",
+        "confirmDelete": "Вы уверены, что хотите удалить бэкап {file}?",
+        "deleteSuccess": "Успешно удалено"
      }
    },
    "logs": {
--- a/cwd-admin/src/locales/zh-CN.json
+++ b/cwd-admin/src/locales/zh-CN.json
@@ -130,7 +130,15 @@
        "saving": "保存中...",
        "backup": "立即备份到 S3",
        "backingUp": "正在备份...",
-        "success": "备份成功！文件: {file}"
+        "success": "备份成功！文件: {file}",
+        "viewBackups": "查看备份",
+        "loadingBackups": "加载中...",
+        "backupListTitle": "S3 备份列表",
+        "emptyBackupList": "暂无备份文件",
+        "download": "下载",
+        "delete": "删除",
+        "confirmDelete": "确定要删除备份 {file} 吗？",
+        "deleteSuccess": "删除成功"
      }
    },
    "logs": {
--- a/cwd-admin/src/locales/zh-TW.json
+++ b/cwd-admin/src/locales/zh-TW.json
@@ -130,7 +130,15 @@
        "saving": "保存中...",
        "backup": "立即備份到 S3",
        "backingUp": "正在備份...",
-        "success": "備份成功！文件: {file}"
+        "success": "備份成功！文件: {file}",
+        "viewBackups": "查看備份",
+        "loadingBackups": "加載中...",
+        "backupListTitle": "S3 備份列表",
+        "emptyBackupList": "暫無備份文件",
+        "download": "下載",
+        "delete": "刪除",
+        "confirmDelete": "確定要刪除備份 {file} 嗎？",
+        "deleteSuccess": "刪除成功"
      }
    },
    "logs": {
--- a/cwd-admin/src/views/DataView/components/S3BackupModal.vue
+++ b/cwd-admin/src/views/DataView/components/S3BackupModal.vue
@@ -0,0 +1,314 @@
+<template>
+  <div v-if="visible" class="modal-overlay" @click.self="handleClose">
+    <div class="modal s3-backup-modal">
+      <div class="modal-header">
+        <h3 class="modal-title">{{ t("data.sections.s3.backupListTitle") }}</h3>
+        <button class="modal-close" @click="handleClose">&times;</button>
+      </div>
+      <div class="modal-content">
+        <div v-if="loading" class="loading">
+          <div class="loading-spinner"></div>
+          <div class="loading-text">{{ t("data.sections.s3.loadingBackups") }}</div>
+        </div>
+        <div v-else-if="backups.length === 0" class="empty-backup-list">
+          {{ t("data.sections.s3.emptyBackupList") }}
+        </div>
+        <div v-else class="backup-list">
+          <div v-for="item in backups" :key="item.key" class="backup-item">
+            <div class="backup-info">
+              <div class="backup-name" :title="item.key">{{ item.key }}</div>
+              <div class="backup-meta">
+                <span class="backup-size">{{ formatFileSize(item.size) }}</span>
+                <span class="backup-date">{{ new Date(item.lastModified).toLocaleString() }}</span>
+              </div>
+            </div>
+            <div class="backup-actions">
+              <button
+                class="backup-btn download"
+                @click="handleDownload(item.key)"
+                :title="t('data.sections.s3.download')"
+              >
+                <svg viewBox="0 0 24 24" width="16" height="16">
+                  <path fill="currentColor" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
+                </svg>
+              </button>
+              <button
+                class="backup-btn delete"
+                @click="handleDelete(item.key)"
+                :disabled="deletingKey === item.key"
+                :title="t('data.sections.s3.delete')"
+              >
+                <svg v-if="deletingKey !== item.key" viewBox="0 0 24 24" width="16" height="16">
+                  <path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
+                </svg>
+                <span v-else class="loading-spinner small"></span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
+import {
+  fetchS3BackupList,
+  deleteS3Backup,
+  downloadS3BackupUrl,
+  S3BackupItem,
+} from "../../../api/admin";
+
+const props = defineProps<{
+  visible: boolean;
+  onClose?: () => void;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const { t } = useI18n();
+
+const loading = ref(false);
+const backups = ref<S3BackupItem[]>([]);
+const deletingKey = ref<string | null>(null);
+
+const handleClose = () => {
+  if (loading.value || deletingKey.value) {
+    return;
+  }
+  emit("close");
+};
+
+const handleDownload = (key: string) => {
+  const url = downloadS3BackupUrl(key);
+  window.open(url, "_blank");
+};
+
+const handleDelete = async (key: string) => {
+  if (!confirm(t("data.sections.s3.confirmDelete", { file: key }))) {
+    return;
+  }
+
+  deletingKey.value = key;
+  try {
+    await deleteS3Backup(key);
+    backups.value = backups.value.filter((item) => item.key !== key);
+  } catch (e: any) {
+    console.error("Delete error:", e);
+  } finally {
+    deletingKey.value = null;
+  }
+};
+
+const fetchBackups = async () => {
+  if (!props.visible) return;
+
+  loading.value = true;
+  try {
+    const res = await fetchS3BackupList();
+    backups.value = res.files;
+  } catch (e: any) {
+    console.error("Fetch backups error:", e);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+};
+
+watch(
+  () => props.visible,
+  (newVal) => {
+    if (newVal) {
+      fetchBackups();
+    } else {
+      backups.value = [];
+    }
+  }
+);
+</script>
+
+<style scoped lang="less">
+.s3-backup-modal {
+  max-width: 600px;
+  width: 90%;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: 5px;
+}
+
+.modal-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.modal-close:hover {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+.modal-content {
+  overflow-y: auto;
+  flex: 1;
+}
+
+.loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  gap: 8px;
+}
+
+.loading-spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--border-color);
+  border-top-color: var(--primary-color);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loading-spinner.small {
+  width: 14px;
+  height: 14px;
+}
+
+.loading-text {
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
+.empty-backup-list {
+  text-align: center;
+  padding: 40px;
+  color: var(--text-secondary);
+}
+
+.backup-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.backup-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--bg-secondary);
+  gap: 12px;
+}
+
+.backup-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.backup-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 4px;
+}
+
+.backup-meta {
+  display: flex;
+  gap: 12px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.backup-size {
+  background: var(--bg-primary);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.backup-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.backup-btn {
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+  transition: all 0.2s;
+}
+
+.backup-btn:hover:not(:disabled) {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+  border-color: var(--border-hover);
+}
+
+.backup-btn.download:hover {
+  color: var(--primary-color);
+}
+
+.backup-btn.delete:hover {
+  color: #ef4444;
+}
+
+.backup-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
--- a/cwd-admin/src/views/DataView/index.vue
+++ b/cwd-admin/src/views/DataView/index.vue
@@ -162,6 +162,13 @@
            s3BackingUp ? t("data.sections.s3.backingUp") : t("data.sections.s3.backup")
          }}
        </button>
+        <button
+          class="card-button secondary"
+          :disabled="false"
+          @click="handleViewS3Backups"
+        >
+          {{ t("data.sections.s3.viewBackups") }}
+        </button>
      </div>
    </div>

@@ -213,6 +220,12 @@
        </div>
      </div>
    </div>
+
+    <!-- S3 备份列表弹窗 -->
+    <S3BackupModal
+      :visible="showS3BackupModal"
+      @close="handleS3BackupModalClose"
+    />
  </div>
 </template>

@@ -231,8 +244,9 @@ import {
  fetchS3Settings,
  saveS3Settings,
  triggerS3Backup,
-  type S3SettingsResponse,
+  S3SettingsResponse,
 } from "../../api/admin";
+import S3BackupModal from "./components/S3BackupModal.vue";
 import { useSite } from "../../composables/useSite";

 const { t } = useI18n();
@@ -264,6 +278,7 @@ const s3Config = ref<S3SettingsResponse>({
 });
 const s3Saving = ref(false);
 const s3BackingUp = ref(false);
+const showS3BackupModal = ref(false);

 async function loadS3Config() {
  try {
@@ -298,6 +313,14 @@ async function handleS3Backup() {
  }
 }

+function handleViewS3Backups() {
+  showS3BackupModal.value = true;
+}
+
+function handleS3BackupModalClose() {
+  showS3BackupModal.value = false;
+}
+
 onMounted(() => {
  loadS3Config();
 });
@@ -552,4 +575,93 @@ function joinUrl(prefix: string, path: string): string {
  margin-bottom: 4px;
  color: var(--text-primary);
 }
+
+/* S3 备份弹窗样式 */
+.s3-backup-modal {
+  max-width: 600px;
+  width: 90%;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: 5px;
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.modal-close:hover {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+.modal-content {
+  overflow-y: auto;
+  flex: 1;
+}
+
+.empty-backup-list {
+  text-align: center;
+  padding: 40px;
+  color: var(--text-secondary);
+}
+
+.backup-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.backup-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--bg-secondary);
+  gap: 12px;
+}
+
+.backup-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.backup-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 4px;
+}
+
+.backup-meta {
+  display: flex;
+  gap: 12px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
 </style>