feat: add data import/export bundle

2026-02-05 17:46:08 +08:00
parent 6d0152c8e2
commit b4bd46d067
19 changed files with 1488 additions and 17 deletions
--- a/frontend/src/tests/integration/data-import.spec.ts
+++ b/frontend/src/tests/integration/data-import.spec.ts
@@ -0,0 +1,70 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ImportDataModal from '@/components/admin/account/ImportDataModal.vue'
+
+const showError = vi.fn()
+const showSuccess = vi.fn()
+
+vi.mock('@/stores/app', () => ({
+  useAppStore: () => ({
+    showError,
+    showSuccess
+  })
+}))
+
+vi.mock('@/api/admin', () => ({
+  adminAPI: {
+    accounts: {
+      importData: vi.fn()
+    }
+  }
+}))
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string) => key
+  })
+}))
+
+describe('ImportDataModal', () => {
+  beforeEach(() => {
+    showError.mockReset()
+    showSuccess.mockReset()
+  })
+
+  it('未选择文件时提示错误', async () => {
+    const wrapper = mount(ImportDataModal, {
+      props: { show: true },
+      global: {
+        stubs: {
+          BaseDialog: { template: '<div><slot /><slot name="footer" /></div>' }
+        }
+      }
+    })
+
+    await wrapper.find('form').trigger('submit')
+    expect(showError).toHaveBeenCalledWith('admin.accounts.dataImportSelectFile')
+  })
+
+  it('无效 JSON 时提示解析失败', async () => {
+    const wrapper = mount(ImportDataModal, {
+      props: { show: true },
+      global: {
+        stubs: {
+          BaseDialog: { template: '<div><slot /><slot name="footer" /></div>' }
+        }
+      }
+    })
+
+    const input = wrapper.find('input[type="file"]')
+    const file = new File(['invalid json'], 'data.json', { type: 'application/json' })
+    Object.defineProperty(input.element, 'files', {
+      value: [file]
+    })
+
+    await input.trigger('change')
+    await wrapper.find('form').trigger('submit')
+
+    expect(showError).toHaveBeenCalledWith('admin.accounts.dataImportParseFailed')
+  })
+})
--- a/frontend/src/api/admin/accounts.ts
+++ b/frontend/src/api/admin/accounts.ts
@@ -13,7 +13,9 @@ import type {
  WindowStats,
  ClaudeModel,
  AccountUsageStatsResponse,
-  TempUnschedulableStatus
+  TempUnschedulableStatus,
+  AdminDataPayload,
+  AdminDataImportResult
 } from '@/types'

 /**
@@ -347,6 +349,44 @@ export async function syncFromCrs(params: {
  return data
 }

+export async function exportData(options?: {
+  ids?: number[]
+  filters?: {
+    platform?: string
+    type?: string
+    status?: string
+    search?: string
+  }
+  includeProxies?: boolean
+}): Promise<AdminDataPayload> {
+  const params: Record<string, string> = {}
+  if (options?.ids && options.ids.length > 0) {
+    params.ids = options.ids.join(',')
+  } else if (options?.filters) {
+    const { platform, type, status, search } = options.filters
+    if (platform) params.platform = platform
+    if (type) params.type = type
+    if (status) params.status = status
+    if (search) params.search = search
+  }
+  if (options?.includeProxies === false) {
+    params.include_proxies = 'false'
+  }
+  const { data } = await apiClient.get<AdminDataPayload>('/admin/accounts/data', { params })
+  return data
+}
+
+export async function importData(payload: {
+  data: AdminDataPayload
+  skip_default_group_bind?: boolean
+}): Promise<AdminDataImportResult> {
+  const { data } = await apiClient.post<AdminDataImportResult>('/admin/accounts/data', {
+    data: payload.data,
+    skip_default_group_bind: payload.skip_default_group_bind
+  })
+  return data
+}
+
 export const accountsAPI = {
  list,
  getById,
@@ -370,7 +410,9 @@ export const accountsAPI = {
  batchCreate,
  batchUpdateCredentials,
  bulkUpdate,
-  syncFromCrs
+  syncFromCrs,
+  exportData,
+  importData
 }

 export default accountsAPI
--- a/frontend/src/api/admin/proxies.ts
+++ b/frontend/src/api/admin/proxies.ts
@@ -9,7 +9,8 @@ import type {
  ProxyAccountSummary,
  CreateProxyRequest,
  UpdateProxyRequest,
-  PaginatedResponse
+  PaginatedResponse,
+  AdminDataPayload
 } from '@/types'

 /**
@@ -208,6 +209,17 @@ export async function batchDelete(ids: number[]): Promise<{
  return data
 }

+export async function exportData(filters?: {
+  protocol?: string
+  status?: 'active' | 'inactive'
+  search?: string
+}): Promise<AdminDataPayload> {
+  const { data } = await apiClient.get<AdminDataPayload>('/admin/proxies/data', {
+    params: filters
+  })
+  return data
+}
+
 export const proxiesAPI = {
  list,
  getAll,
@@ -221,7 +233,8 @@ export const proxiesAPI = {
  getStats,
  getProxyAccounts,
  batchCreate,
-  batchDelete
+  batchDelete,
+  exportData
 }

 export default proxiesAPI
--- a/frontend/src/components/admin/account/AccountTableActions.vue
+++ b/frontend/src/components/admin/account/AccountTableActions.vue
@@ -7,6 +7,7 @@
    <slot name="after"></slot>
    <button @click="$emit('sync')" class="btn btn-secondary">{{ t('admin.accounts.syncFromCrs') }}</button>
    <button @click="$emit('create')" class="btn btn-primary">{{ t('admin.accounts.createAccount') }}</button>
+    <slot name="afterCreate"></slot>
  </div>
 </template>

--- a/frontend/src/components/admin/account/ImportDataModal.vue
+++ b/frontend/src/components/admin/account/ImportDataModal.vue
@@ -0,0 +1,168 @@
+<template>
+  <BaseDialog
+    :show="show"
+    :title="t('admin.accounts.dataImportTitle')"
+    width="normal"
+    close-on-click-outside
+    @close="handleClose"
+  >
+    <form id="import-data-form" class="space-y-4" @submit.prevent="handleImport">
+      <div class="text-sm text-gray-600 dark:text-dark-300">
+        {{ t('admin.accounts.dataImportHint') }}
+      </div>
+      <div
+        class="rounded-lg border border-amber-200 bg-amber-50 p-3 text-xs text-amber-600 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-400"
+      >
+        {{ t('admin.accounts.dataImportWarning') }}
+      </div>
+
+      <div>
+        <label class="input-label">{{ t('admin.accounts.dataImportFile') }}</label>
+        <input
+          type="file"
+          class="input"
+          accept="application/json,.json"
+          @change="handleFileChange"
+        />
+        <p v-if="fileName" class="mt-2 text-xs text-gray-500 dark:text-dark-400">
+          {{ fileName }}
+        </p>
+      </div>
+
+      <div
+        v-if="result"
+        class="space-y-2 rounded-xl border border-gray-200 p-4 dark:border-dark-700"
+      >
+        <div class="text-sm font-medium text-gray-900 dark:text-white">
+          {{ t('admin.accounts.dataImportResult') }}
+        </div>
+        <div class="text-sm text-gray-700 dark:text-dark-300">
+          {{ t('admin.accounts.dataImportResultSummary', result) }}
+        </div>
+
+        <div v-if="errorItems.length" class="mt-2">
+          <div class="text-sm font-medium text-red-600 dark:text-red-400">
+            {{ t('admin.accounts.dataImportErrors') }}
+          </div>
+          <div
+            class="mt-2 max-h-48 overflow-auto rounded-lg bg-gray-50 p-3 font-mono text-xs dark:bg-dark-800"
+          >
+            <div v-for="(item, idx) in errorItems" :key="idx" class="whitespace-pre-wrap">
+              {{ item.kind }} {{ item.name || item.proxy_key || '-' }} — {{ item.message }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+
+    <template #footer>
+      <div class="flex justify-end gap-3">
+        <button class="btn btn-secondary" type="button" :disabled="importing" @click="handleClose">
+          {{ t('common.cancel') }}
+        </button>
+        <button
+          class="btn btn-primary"
+          type="submit"
+          form="import-data-form"
+          :disabled="importing"
+        >
+          {{ importing ? t('admin.accounts.dataImporting') : t('admin.accounts.dataImportButton') }}
+        </button>
+      </div>
+    </template>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import BaseDialog from '@/components/common/BaseDialog.vue'
+import { adminAPI } from '@/api/admin'
+import { useAppStore } from '@/stores/app'
+import type { AdminDataImportResult } from '@/types'
+
+interface Props {
+  show: boolean
+}
+
+interface Emits {
+  (e: 'close'): void
+  (e: 'imported'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const { t } = useI18n()
+const appStore = useAppStore()
+
+const importing = ref(false)
+const file = ref<File | null>(null)
+const result = ref<AdminDataImportResult | null>(null)
+
+const fileName = computed(() => file.value?.name || '')
+
+const errorItems = computed(() => result.value?.errors || [])
+
+watch(
+  () => props.show,
+  (open) => {
+    if (open) {
+      file.value = null
+      result.value = null
+    }
+  }
+)
+
+const handleFileChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  file.value = target.files?.[0] || null
+}
+
+const handleClose = () => {
+  if (importing.value) return
+  emit('close')
+}
+
+const handleImport = async () => {
+  if (!file.value) {
+    appStore.showError(t('admin.accounts.dataImportSelectFile'))
+    return
+  }
+
+  importing.value = true
+  try {
+    const text = await file.value.text()
+    const dataPayload = JSON.parse(text)
+
+    const res = await adminAPI.accounts.importData({
+      data: dataPayload,
+      skip_default_group_bind: true
+    })
+
+    result.value = res
+
+    const msgParams: Record<string, unknown> = {
+      account_created: res.account_created,
+      account_failed: res.account_failed,
+      proxy_created: res.proxy_created,
+      proxy_reused: res.proxy_reused,
+      proxy_failed: res.proxy_failed,
+    }
+    if (res.account_failed > 0 || res.proxy_failed > 0) {
+      appStore.showError(t('admin.accounts.dataImportCompletedWithErrors', msgParams))
+    } else {
+      appStore.showSuccess(t('admin.accounts.dataImportSuccess', msgParams))
+      emit('imported')
+    }
+  } catch (error: any) {
+    if (error instanceof SyntaxError) {
+      appStore.showError(t('admin.accounts.dataImportParseFailed'))
+    } else {
+      appStore.showError(error?.message || t('admin.accounts.dataImportFailed'))
+    }
+  } finally {
+    importing.value = false
+  }
+}
+</script>
--- a/frontend/src/components/common/ConfirmDialog.vue
+++ b/frontend/src/components/common/ConfirmDialog.vue
@@ -2,6 +2,7 @@
  <BaseDialog :show="show" :title="title" width="narrow" @close="handleCancel">
    <div class="space-y-4">
      <p class="text-sm text-gray-600 dark:text-gray-400">{{ message }}</p>
+      <slot></slot>
    </div>

    <template #footer>
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -1188,6 +1188,28 @@ export default {
      refreshInterval30s: '30 seconds',
      autoRefreshCountdown: 'Auto refresh: {seconds}s',
      syncFromCrs: 'Sync from CRS',
+      dataExport: 'Export',
+      dataExportSelected: 'Export Selected',
+      dataExportIncludeProxies: 'Include proxies (unchecked = no proxy linkage on import)',
+      dataImport: 'Import',
+      dataExportConfirmMessage: 'The exported data contains sensitive account and proxy information. Store it securely.',
+      dataExportConfirm: 'Confirm Export',
+      dataExported: 'Data exported successfully',
+      dataExportFailed: 'Failed to export data',
+      dataImportTitle: 'Import Data',
+      dataImportHint: 'Upload the exported JSON file to import accounts and proxies.',
+      dataImportWarning: 'Import will create new accounts/proxies; groups must be bound manually. Ensure no conflicts in the target instance.',
+      dataImportFile: 'Data file',
+      dataImportButton: 'Start Import',
+      dataImporting: 'Importing...',
+      dataImportSelectFile: 'Please select a data file',
+      dataImportParseFailed: 'Failed to parse data file',
+      dataImportFailed: 'Data import failed',
+      dataImportResult: 'Import Result',
+      dataImportResultSummary: 'Proxies created {proxy_created}, reused {proxy_reused}, failed {proxy_failed}; Accounts created {account_created}, failed {account_failed}',
+      dataImportErrors: 'Error Details',
+      dataImportSuccess: 'Import completed: accounts {account_created}, failed {account_failed}',
+      dataImportCompletedWithErrors: 'Import completed with errors: account failed {account_failed}, proxy failed {proxy_failed}',
      syncFromCrsTitle: 'Sync Accounts from CRS',
      syncFromCrsDesc:
        'Sync accounts from claude-relay-service (CRS) into this system (CRS is called server-to-server).',
@@ -1879,6 +1901,11 @@ export default {
      createProxy: 'Create Proxy',
      editProxy: 'Edit Proxy',
      deleteProxy: 'Delete Proxy',
+      dataExport: 'Export',
+      dataExportConfirmMessage: 'The exported data contains sensitive proxy information. Store it securely.',
+      dataExportConfirm: 'Confirm Export',
+      dataExported: 'Data exported successfully',
+      dataExportFailed: 'Failed to export data',
      searchProxies: 'Search proxies...',
      allProtocols: 'All Protocols',
      allStatus: 'All Status',
--- a/frontend/src/i18n/locales/zh.ts
+++ b/frontend/src/i18n/locales/zh.ts
@@ -1273,6 +1273,28 @@ export default {
      refreshInterval30s: '30 秒',
      autoRefreshCountdown: '自动刷新：{seconds}s',
      syncFromCrs: '从 CRS 同步',
+      dataExport: '导出',
+      dataExportSelected: '导出选中',
+      dataExportIncludeProxies: '导出代理（取消后导入时不关联代理）',
+      dataImport: '导入',
+      dataExportConfirmMessage: '导出的数据包含账号与代理的敏感信息，请妥善保存。',
+      dataExportConfirm: '确认导出',
+      dataExported: '数据导出成功',
+      dataExportFailed: '数据导出失败',
+      dataImportTitle: '导入数据',
+      dataImportHint: '上传导出的 JSON 文件以批量导入账号与代理。',
+      dataImportWarning: '导入将创建新账号与代理，分组需手工绑定；请确认目标实例已有数据不会冲突。',
+      dataImportFile: '数据文件',
+      dataImportButton: '开始导入',
+      dataImporting: '导入中...',
+      dataImportSelectFile: '请选择数据文件',
+      dataImportParseFailed: '数据解析失败',
+      dataImportFailed: '数据导入失败',
+      dataImportResult: '导入结果',
+      dataImportResultSummary: '代理创建 {proxy_created}，复用 {proxy_reused}，失败 {proxy_failed}；账号创建 {account_created}，失败 {account_failed}',
+      dataImportErrors: '失败详情',
+      dataImportSuccess: '导入完成：账号 {account_created}，失败 {account_failed}',
+      dataImportCompletedWithErrors: '导入完成但有错误：账号失败 {account_failed}，代理失败 {proxy_failed}',
      syncFromCrsTitle: '从 CRS 同步账号',
      syncFromCrsDesc:
        '将 claude-relay-service（CRS）中的账号同步到当前系统（不会在浏览器侧直接请求 CRS）。',
@@ -1988,6 +2010,11 @@ export default {
      deleteProxy: '删除代理',
      deleteConfirmMessage: "确定要删除代理 '{name}' 吗？",
      testProxy: '测试代理',
+      dataExport: '导出',
+      dataExportConfirmMessage: '导出的数据包含代理的敏感信息，请妥善保存。',
+      dataExportConfirm: '确认导出',
+      dataExported: '数据导出成功',
+      dataExportFailed: '数据导出失败',
      columns: {
        name: '名称',
        protocol: '协议',
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -727,6 +727,56 @@ export interface UpdateProxyRequest {
  status?: 'active' | 'inactive'
 }

+export interface AdminDataPayload {
+  type: string
+  version: number
+  exported_at: string
+  proxies: AdminDataProxy[]
+  accounts: AdminDataAccount[]
+}
+
+export interface AdminDataProxy {
+  proxy_key: string
+  name: string
+  protocol: ProxyProtocol
+  host: string
+  port: number
+  username?: string | null
+  password?: string | null
+  status: 'active' | 'inactive'
+}
+
+export interface AdminDataAccount {
+  name: string
+  notes?: string | null
+  platform: AccountPlatform
+  type: AccountType
+  credentials: Record<string, unknown>
+  extra?: Record<string, unknown>
+  proxy_key?: string | null
+  concurrency: number
+  priority: number
+  rate_multiplier?: number | null
+  expires_at?: number | null
+  auto_pause_on_expired?: boolean
+}
+
+export interface AdminDataImportError {
+  kind: 'proxy' | 'account'
+  name?: string
+  proxy_key?: string
+  message: string
+}
+
+export interface AdminDataImportResult {
+  proxy_created: number
+  proxy_reused: number
+  proxy_failed: number
+  account_created: number
+  account_failed: number
+  errors?: AdminDataImportError[]
+}
+
 // ==================== Usage & Redeem Types ====================

 export type RedeemCodeType = 'balance' | 'concurrency' | 'subscription' | 'invitation'
--- a/frontend/src/views/admin/AccountsView.vue
+++ b/frontend/src/views/admin/AccountsView.vue
@@ -96,6 +96,14 @@
                </div>
              </div>
            </template>
+            <template #afterCreate>
+              <button @click="showImportData = true" class="btn btn-secondary">
+                {{ t('admin.accounts.dataImport') }}
+              </button>
+              <button @click="openExportDataDialog" class="btn btn-secondary">
+                {{ selIds.length ? t('admin.accounts.dataExportSelected') : t('admin.accounts.dataExport') }}
+              </button>
+            </template>
          </AccountTableActions>
        </div>
      </template>
@@ -218,9 +226,16 @@
    <AccountStatsModal :show="showStats" :account="statsAcc" @close="closeStatsModal" />
    <AccountActionMenu :show="menu.show" :account="menu.acc" :position="menu.pos" @close="menu.show = false" @test="handleTest" @stats="handleViewStats" @reauth="handleReAuth" @refresh-token="handleRefresh" @reset-status="handleResetStatus" @clear-rate-limit="handleClearRateLimit" />
    <SyncFromCrsModal :show="showSync" @close="showSync = false" @synced="reload" />
+    <ImportDataModal :show="showImportData" @close="showImportData = false" @imported="handleDataImported" />
    <BulkEditAccountModal :show="showBulkEdit" :account-ids="selIds" :proxies="proxies" :groups="groups" @close="showBulkEdit = false" @updated="handleBulkUpdated" />
    <TempUnschedStatusModal :show="showTempUnsched" :account="tempUnschedAcc" @close="showTempUnsched = false" @reset="handleTempUnschedReset" />
    <ConfirmDialog :show="showDeleteDialog" :title="t('admin.accounts.deleteAccount')" :message="t('admin.accounts.deleteConfirm', { name: deletingAcc?.name })" :confirm-text="t('common.delete')" :cancel-text="t('common.cancel')" :danger="true" @confirm="confirmDelete" @cancel="showDeleteDialog = false" />
+    <ConfirmDialog :show="showExportDataDialog" :title="t('admin.accounts.dataExport')" :message="t('admin.accounts.dataExportConfirmMessage')" :confirm-text="t('admin.accounts.dataExportConfirm')" :cancel-text="t('common.cancel')" @confirm="handleExportData" @cancel="showExportDataDialog = false">
+      <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
+        <input type="checkbox" class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500" v-model="includeProxyOnExport" />
+        <span>{{ t('admin.accounts.dataExportIncludeProxies') }}</span>
+      </label>
+    </ConfirmDialog>
  </AppLayout>
 </template>

@@ -242,6 +257,7 @@ import AccountTableActions from '@/components/admin/account/AccountTableActions.
 import AccountTableFilters from '@/components/admin/account/AccountTableFilters.vue'
 import AccountBulkActionsBar from '@/components/admin/account/AccountBulkActionsBar.vue'
 import AccountActionMenu from '@/components/admin/account/AccountActionMenu.vue'
+import ImportDataModal from '@/components/admin/account/ImportDataModal.vue'
 import ReAuthAccountModal from '@/components/admin/account/ReAuthAccountModal.vue'
 import AccountTestModal from '@/components/admin/account/AccountTestModal.vue'
 import AccountStatsModal from '@/components/admin/account/AccountStatsModal.vue'
@@ -265,6 +281,9 @@ const selIds = ref<number[]>([])
 const showCreate = ref(false)
 const showEdit = ref(false)
 const showSync = ref(false)
+const showImportData = ref(false)
+const showExportDataDialog = ref(false)
+const includeProxyOnExport = ref(true)
 const showBulkEdit = ref(false)
 const showTempUnsched = ref(false)
 const showDeleteDialog = ref(false)
@@ -279,6 +298,7 @@ const testingAcc = ref<Account | null>(null)
 const statsAcc = ref<Account | null>(null)
 const togglingSchedulable = ref<number | null>(null)
 const menu = reactive<{show:boolean, acc:Account|null, pos:{top:number, left:number}|null}>({ show: false, acc: null, pos: null })
+const exportingData = ref(false)

 // Column settings
 const showColumnDropdown = ref(false)
@@ -405,6 +425,8 @@ const isAnyModalOpen = computed(() => {
    showCreate.value ||
    showEdit.value ||
    showSync.value ||
+    showImportData.value ||
+    showExportDataDialog.value ||
    showBulkEdit.value ||
    showTempUnsched.value ||
    showDeleteDialog.value ||
@@ -633,6 +655,50 @@ const handleBulkToggleSchedulable = async (schedulable: boolean) => {
  }
 }
 const handleBulkUpdated = () => { showBulkEdit.value = false; selIds.value = []; reload() }
+const handleDataImported = () => { showImportData.value = false; reload() }
+const formatExportTimestamp = () => {
+  const now = new Date()
+  const pad2 = (value: number) => String(value).padStart(2, '0')
+  return `${now.getFullYear()}${pad2(now.getMonth() + 1)}${pad2(now.getDate())}${pad2(now.getHours())}${pad2(now.getMinutes())}${pad2(now.getSeconds())}`
+}
+const openExportDataDialog = () => {
+  includeProxyOnExport.value = true
+  showExportDataDialog.value = true
+}
+const handleExportData = async () => {
+  if (exportingData.value) return
+  exportingData.value = true
+  try {
+    const dataPayload = await adminAPI.accounts.exportData(
+      selIds.value.length > 0
+        ? { ids: selIds.value, includeProxies: includeProxyOnExport.value }
+        : {
+            includeProxies: includeProxyOnExport.value,
+            filters: {
+              platform: params.platform,
+              type: params.type,
+              status: params.status,
+              search: params.search
+            }
+          }
+    )
+    const timestamp = formatExportTimestamp()
+    const filename = `sub2api-account-${timestamp}.json`
+    const blob = new Blob([JSON.stringify(dataPayload, null, 2)], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = filename
+    link.click()
+    URL.revokeObjectURL(url)
+    appStore.showSuccess(t('admin.accounts.dataExported'))
+  } catch (error: any) {
+    appStore.showError(error?.message || t('admin.accounts.dataExportFailed'))
+  } finally {
+    exportingData.value = false
+    showExportDataDialog.value = false
+  }
+}
 const closeTestModal = () => { showTest.value = false; testingAcc.value = null }
 const closeStatsModal = () => { showStats.value = false; statsAcc.value = null }
 const closeReAuthModal = () => { showReAuth.value = false; reAuthAcc.value = null }
--- a/frontend/src/views/admin/ProxiesView.vue
+++ b/frontend/src/views/admin/ProxiesView.vue
@@ -69,6 +69,9 @@
              <Icon name="trash" size="md" class="mr-2" />
              {{ t('admin.proxies.batchDeleteAction') }}
            </button>
+            <button @click="showExportDataDialog = true" class="btn btn-secondary">
+              {{ t('admin.proxies.dataExport') }}
+            </button>
            <button @click="showCreateModal = true" class="btn btn-primary">
              <Icon name="plus" size="md" class="mr-2" />
              {{ t('admin.proxies.createProxy') }}
@@ -606,6 +609,15 @@
      @confirm="confirmBatchDelete"
      @cancel="showBatchDeleteDialog = false"
    />
+    <ConfirmDialog
+      :show="showExportDataDialog"
+      :title="t('admin.proxies.dataExport')"
+      :message="t('admin.proxies.dataExportConfirmMessage')"
+      :confirm-text="t('admin.proxies.dataExportConfirm')"
+      :cancel-text="t('common.cancel')"
+      @confirm="handleExportData"
+      @cancel="showExportDataDialog = false"
+    />

    <!-- Proxy Accounts Dialog -->
    <BaseDialog
@@ -733,8 +745,10 @@ const showCreateModal = ref(false)
 const showEditModal = ref(false)
 const showDeleteDialog = ref(false)
 const showBatchDeleteDialog = ref(false)
+const showExportDataDialog = ref(false)
 const showAccountsModal = ref(false)
 const submitting = ref(false)
+const exportingData = ref(false)
 const testingProxyIds = ref<Set<number>>(new Set())
 const batchTesting = ref(false)
 const selectedProxyIds = ref<Set<number>>(new Set())
@@ -1228,6 +1242,39 @@ const handleBatchTest = async () => {
  }
 }

+const formatExportTimestamp = () => {
+  const now = new Date()
+  const pad2 = (value: number) => String(value).padStart(2, '0')
+  return `${now.getFullYear()}${pad2(now.getMonth() + 1)}${pad2(now.getDate())}${pad2(now.getHours())}${pad2(now.getMinutes())}${pad2(now.getSeconds())}`
+}
+
+const handleExportData = async () => {
+  if (exportingData.value) return
+  exportingData.value = true
+  try {
+    const dataPayload = await adminAPI.proxies.exportData({
+      protocol: filters.protocol || undefined,
+      status: (filters.status || undefined) as 'active' | 'inactive' | undefined,
+      search: searchQuery.value || undefined
+    })
+    const timestamp = formatExportTimestamp()
+    const filename = `sub2api-proxy-${timestamp}.json`
+    const blob = new Blob([JSON.stringify(dataPayload, null, 2)], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = filename
+    link.click()
+    URL.revokeObjectURL(url)
+    appStore.showSuccess(t('admin.proxies.dataExported'))
+  } catch (error: any) {
+    appStore.showError(error?.message || t('admin.proxies.dataExportFailed'))
+  } finally {
+    exportingData.value = false
+    showExportDataDialog.value = false
+  }
+}
+
 const handleDelete = (proxy: Proxy) => {
  if ((proxy.account_count || 0) > 0) {
    appStore.showError(t('admin.proxies.deleteBlockedInUse'))