新增支付配置备份导出功能

frontend/src/features/admin/views/AdminPaymentConfigsView.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { computed, onMounted, ref } from 'vue'
-import { Plus, Refresh, View, Edit, Delete } from '@element-plus/icons-vue'
+import { Plus, Refresh, View, Edit, Delete, Download } from '@element-plus/icons-vue'
 
 import {
   fetchPaymentConfigs,
   deletePaymentConfig,
+  exportPaymentConfigBackup,
   type PaymentConfig,
 } from '@/features/admin/api/paymentConfig'
 import { formatDateTime } from '@/utils/time'
@@ -17,6 +18,7 @@ const configs = ref<PaymentConfig[]>([])
 const total = ref(0)
 const currentPage = ref(1)
 const pageSize = ref(20)
+const exporting = ref(false)
 
 const dialogVisible = ref(false)
 const dialogMode = ref<'create' | 'edit' | 'view'>('create')
@@ -110,6 +112,38 @@ async function handleDelete(row: PaymentConfig) {
   }
 }
 
+async function handleExportBackup() {
+  try {
+    await ElMessageBox.confirm('备份文件会包含支付密钥明文，请妥善保管。确定导出吗？', '导出支付配置备份', {
+      type: 'warning',
+      confirmButtonText: '导出',
+      cancelButtonText: '取消',
+    })
+
+    exporting.value = true
+    const { blob, filename } = await exportPaymentConfigBackup()
+    downloadBlob(blob, filename)
+    ElMessage.success('导出成功')
+  } catch (error: any) {
+    if (error !== 'cancel') {
+      ElMessage.error(readError(error, '导出备份失败'))
+    }
+  } finally {
+    exporting.value = false
+  }
+}
+
+function downloadBlob(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = filename
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  URL.revokeObjectURL(url)
+}
+
 function handleDialogClose() {
   dialogVisible.value = false
   currentConfig.value = null
@@ -187,6 +221,7 @@ function deleteDisabledReason(row: PaymentConfig) {
         <el-option v-for="opt in environmentOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
       </el-select>
       <el-button :icon="Refresh" @click="loadConfigs">刷新</el-button>
+      <el-button :icon="Download" :loading="exporting" @click="handleExportBackup">导出备份</el-button>
       <el-button type="primary" :icon="Plus" @click="handleCreate">新增配置</el-button>
     </div>
 
@@ -315,6 +350,8 @@ function deleteDisabledReason(row: PaymentConfig) {
 
 .filter-bar {
   display: flex;
+  align-items: center;
+  flex-wrap: wrap;
   gap: 12px;
   margin-bottom: 16px;
 }