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

frontend/src/features/admin/api/paymentConfig.ts

@@ -92,6 +92,16 @@ export async function fetchPaymentConfig(id: number, includeSecret = false) {
   return data.data
 }
 
+export async function exportPaymentConfigBackup() {
+  const response = await apiClient.get<Blob>('/admin/payment-configs/export', {
+    responseType: 'blob',
+  })
+  return {
+    blob: response.data,
+    filename: readDownloadFilename(response.headers['content-disposition']) || fallbackBackupFilename(),
+  }
+}
+
 export async function createPaymentConfig(payload: CreatePaymentConfigRequest) {
   const { data } = await apiClient.post<ApiResponse<PaymentConfig>>('/admin/payment-configs', payload)
   return data.data
@@ -106,3 +116,15 @@ export async function deletePaymentConfig(id: number) {
   const { data } = await apiClient.delete<ApiResponse<{ message: string }>>(`/admin/payment-configs/${id}`)
   return data.data
 }
+
+function readDownloadFilename(contentDisposition: unknown) {
+  if (typeof contentDisposition !== 'string') return ''
+  const encoded = contentDisposition.match(/filename\*=UTF-8''([^;]+)/i)?.[1]
+  if (encoded) return decodeURIComponent(encoded)
+  return contentDisposition.match(/filename="?([^";]+)"?/i)?.[1] || ''
+}
+
+function fallbackBackupFilename() {
+  const stamp = new Date().toISOString().replace(/[-:]/g, '').replace(/\.\d{3}Z$/, '')
+  return `payment-config-backup-${stamp}.json`
+}

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;
 }