feat: refine proxy export and toolbar layout

frontend/src/api/admin/proxies.ts

@@ -210,14 +210,24 @@ export async function batchDelete(ids: number[]): Promise<{
   return data
 }
 
-export async function exportData(filters?: {
-  protocol?: string
-  status?: 'active' | 'inactive'
-  search?: string
+export async function exportData(options?: {
+  ids?: number[]
+  filters?: {
+    protocol?: string
+    status?: 'active' | 'inactive'
+    search?: string
+  }
 }): Promise<AdminDataPayload> {
-  const { data } = await apiClient.get<AdminDataPayload>('/admin/proxies/data', {
-    params: filters
-  })
+  const params: Record<string, string> = {}
+  if (options?.ids && options.ids.length > 0) {
+    params.ids = options.ids.join(',')
+  } else if (options?.filters) {
+    const { protocol, status, search } = options.filters
+    if (protocol) params.protocol = protocol
+    if (status) params.status = status
+    if (search) params.search = search
+  }
+  const { data } = await apiClient.get<AdminDataPayload>('/admin/proxies/data', { params })
   return data
 }
 

frontend/src/components/admin/account/AccountTableActions.vue

@@ -6,6 +6,7 @@
     </button>
     <slot name="after"></slot>
     <button @click="$emit('sync')" class="btn btn-secondary">{{ t('admin.accounts.syncFromCrs') }}</button>
+    <slot name="beforeCreate"></slot>
     <button @click="$emit('create')" class="btn btn-primary">{{ t('admin.accounts.createAccount') }}</button>
     <slot name="afterCreate"></slot>
   </div>

frontend/src/i18n/locales/en.ts

@@ -1903,6 +1903,7 @@ export default {
       editProxy: 'Edit Proxy',
       deleteProxy: 'Delete Proxy',
       dataImport: 'Import',
+      dataExportSelected: 'Export Selected',
       dataImportTitle: 'Import Proxies',
       dataImportHint: 'Upload the exported proxy JSON file to import proxies in bulk.',
       dataImportWarning: 'Import will create or reuse proxies, keep their status, and trigger latency checks after completion.',

frontend/src/i18n/locales/zh.ts

@@ -2012,6 +2012,7 @@ export default {
       deleteConfirmMessage: "确定要删除代理 '{name}' 吗？",
       testProxy: '测试代理',
       dataImport: '导入',
+      dataExportSelected: '导出选中',
       dataImportTitle: '导入代理',
       dataImportHint: '上传代理导出的 JSON 文件以批量导入代理。',
       dataImportWarning: '导入将创建或复用代理，保留状态并在完成后自动触发延迟检测。',

frontend/src/views/admin/AccountsView.vue

@@ -96,7 +96,7 @@
                 </div>
               </div>
             </template>
-            <template #afterCreate>
+            <template #beforeCreate>
               <button @click="showImportData = true" class="btn btn-secondary">
                 {{ t('admin.accounts.dataImport') }}
               </button>

frontend/src/views/admin/ProxiesView.vue

@@ -2,47 +2,9 @@
   <AppLayout>
     <TablePageLayout>
       <template #filters>
-        <!-- Top Toolbar: Left (search + filters) / Right (actions) -->
-        <div class="flex flex-wrap items-start justify-between gap-4">
-          <!-- Left: Fuzzy search + filters (wrap to multiple lines) -->
-          <div class="flex flex-1 flex-wrap items-center gap-3">
-            <!-- Search -->
-            <div class="relative w-full sm:w-64">
-              <Icon
-                name="search"
-                size="md"
-                class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500"
-              />
-              <input
-                v-model="searchQuery"
-                type="text"
-                :placeholder="t('admin.proxies.searchProxies')"
-                class="input pl-10"
-                @input="handleSearch"
-              />
-            </div>
-
-            <!-- Filters -->
-            <div class="w-full sm:w-40">
-              <Select
-                v-model="filters.protocol"
-                :options="protocolOptions"
-                :placeholder="t('admin.proxies.allProtocols')"
-                @change="loadProxies"
-              />
-            </div>
-            <div class="w-full sm:w-36">
-              <Select
-                v-model="filters.status"
-                :options="statusOptions"
-                :placeholder="t('admin.proxies.allStatus')"
-                @change="loadProxies"
-              />
-            </div>
-          </div>
-
-          <!-- Right: Actions -->
-          <div class="ml-auto flex flex-wrap items-center justify-end gap-3">
+        <div class="space-y-3">
+          <!-- Row 1: Actions -->
+          <div class="flex flex-wrap items-center gap-3">
             <button
               @click="loadProxies"
               :disabled="loading"
@@ -73,13 +35,48 @@
               {{ t('admin.proxies.dataImport') }}
             </button>
             <button @click="showExportDataDialog = true" class="btn btn-secondary">
-              {{ t('admin.proxies.dataExport') }}
+              {{ selectedCount > 0 ? t('admin.proxies.dataExportSelected') : 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') }}
             </button>
           </div>
+
+          <!-- Row 2: Search + Filters -->
+          <div class="flex flex-wrap items-center gap-3">
+            <div class="relative w-full sm:w-64">
+              <Icon
+                name="search"
+                size="md"
+                class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500"
+              />
+              <input
+                v-model="searchQuery"
+                type="text"
+                :placeholder="t('admin.proxies.searchProxies')"
+                class="input pl-10"
+                @input="handleSearch"
+              />
+            </div>
+
+            <div class="w-full sm:w-40">
+              <Select
+                v-model="filters.protocol"
+                :options="protocolOptions"
+                :placeholder="t('admin.proxies.allProtocols')"
+                @change="loadProxies"
+              />
+            </div>
+            <div class="w-full sm:w-36">
+              <Select
+                v-model="filters.status"
+                :options="statusOptions"
+                :placeholder="t('admin.proxies.allStatus')"
+                @change="loadProxies"
+              />
+            </div>
+          </div>
         </div>
       </template>
 
@@ -1268,11 +1265,17 @@ 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 dataPayload = await adminAPI.proxies.exportData(
+      selectedCount.value > 0
+        ? { ids: Array.from(selectedProxyIds.value) }
+        : {
+            filters: {
+              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' })