feat: refine proxy export and toolbar layout

2026-02-05 18:35:00 +08:00
parent ce9a247a9d
commit 0c660f8335
9 changed files with 186 additions and 64 deletions
--- a/backend/internal/handler/admin/admin_service_stub_test.go
+++ b/backend/internal/handler/admin/admin_service_stub_test.go
@@ -259,6 +259,12 @@ func (s *stubAdminService) GetAllProxiesWithAccountCount(ctx context.Context) ([
 }

 func (s *stubAdminService) GetProxy(ctx context.Context, id int64) (*service.Proxy, error) {
+	for i := range s.proxies {
+		proxy := s.proxies[i]
+		if proxy.ID == id {
+			return &proxy, nil
+		}
+	}
 	proxy := service.Proxy{ID: id, Name: "proxy", Status: service.StatusActive}
 	return &proxy, nil
 }
--- a/backend/internal/handler/admin/proxy_data.go
+++ b/backend/internal/handler/admin/proxy_data.go
@@ -2,6 +2,8 @@ package admin

 import (
 	"context"
+	"fmt"
+	"strconv"
 	"strings"
 	"time"

@@ -14,17 +16,32 @@ import (
 func (h *ProxyHandler) ExportData(c *gin.Context) {
 	ctx := c.Request.Context()

-	protocol := c.Query("protocol")
-	status := c.Query("status")
-	search := strings.TrimSpace(c.Query("search"))
-	if len(search) > 100 {
-		search = search[:100]
+	selectedIDs, err := parseProxyIDs(c)
+	if err != nil {
+		response.BadRequest(c, err.Error())
+		return
 	}

-	proxies, err := h.listProxiesFiltered(ctx, protocol, status, search)
-	if err != nil {
-		response.ErrorFrom(c, err)
-		return
+	var proxies []service.Proxy
+	if len(selectedIDs) > 0 {
+		proxies, err = h.getProxiesByIDs(ctx, selectedIDs)
+		if err != nil {
+			response.ErrorFrom(c, err)
+			return
+		}
+	} else {
+		protocol := c.Query("protocol")
+		status := c.Query("status")
+		search := strings.TrimSpace(c.Query("search"))
+		if len(search) > 100 {
+			search = search[:100]
+		}
+
+		proxies, err = h.listProxiesFiltered(ctx, protocol, status, search)
+		if err != nil {
+			response.ErrorFrom(c, err)
+			return
+		}
 	}

 	dataProxies := make([]DataProxy, 0, len(proxies))
@@ -168,6 +185,50 @@ func (h *ProxyHandler) ImportData(c *gin.Context) {
 	response.Success(c, result)
 }

+func (h *ProxyHandler) getProxiesByIDs(ctx context.Context, ids []int64) ([]service.Proxy, error) {
+	out := make([]service.Proxy, 0, len(ids))
+	for _, id := range ids {
+		proxy, err := h.adminService.GetProxy(ctx, id)
+		if err != nil {
+			return nil, err
+		}
+		if proxy == nil {
+			continue
+		}
+		out = append(out, *proxy)
+	}
+	return out, nil
+}
+
+func parseProxyIDs(c *gin.Context) ([]int64, error) {
+	values := c.QueryArray("ids")
+	if len(values) == 0 {
+		raw := strings.TrimSpace(c.Query("ids"))
+		if raw != "" {
+			values = []string{raw}
+		}
+	}
+	if len(values) == 0 {
+		return nil, nil
+	}
+
+	ids := make([]int64, 0, len(values))
+	for _, item := range values {
+		for _, part := range strings.Split(item, ",") {
+			part = strings.TrimSpace(part)
+			if part == "" {
+				continue
+			}
+			id, err := strconv.ParseInt(part, 10, 64)
+			if err != nil || id <= 0 {
+				return nil, fmt.Errorf("invalid proxy id: %s", part)
+			}
+			ids = append(ids, id)
+		}
+	}
+	return ids, nil
+}
+
 func (h *ProxyHandler) listProxiesFiltered(ctx context.Context, protocol, status, search string) ([]service.Proxy, error) {
 	page := 1
 	pageSize := dataPageCap
--- a/backend/internal/handler/admin/proxy_data_handler_test.go
+++ b/backend/internal/handler/admin/proxy_data_handler_test.go
@@ -75,6 +75,45 @@ func TestProxyExportDataRespectsFilters(t *testing.T) {
 	require.Equal(t, "https", resp.Data.Proxies[0].Protocol)
 }

+func TestProxyExportDataWithSelectedIDs(t *testing.T) {
+	router, adminSvc := setupProxyDataRouter()
+
+	adminSvc.proxies = []service.Proxy{
+		{
+			ID:       1,
+			Name:     "proxy-a",
+			Protocol: "http",
+			Host:     "127.0.0.1",
+			Port:     8080,
+			Username: "user",
+			Password: "pass",
+			Status:   service.StatusActive,
+		},
+		{
+			ID:       2,
+			Name:     "proxy-b",
+			Protocol: "https",
+			Host:     "10.0.0.2",
+			Port:     443,
+			Username: "u",
+			Password: "p",
+			Status:   service.StatusDisabled,
+		},
+	}
+
+	rec := httptest.NewRecorder()
+	req := httptest.NewRequest(http.MethodGet, "/api/v1/admin/proxies/data?ids=2", nil)
+	router.ServeHTTP(rec, req)
+	require.Equal(t, http.StatusOK, rec.Code)
+
+	var resp proxyDataResponse
+	require.NoError(t, json.Unmarshal(rec.Body.Bytes(), &resp))
+	require.Equal(t, 0, resp.Code)
+	require.Len(t, resp.Data.Proxies, 1)
+	require.Equal(t, "https", resp.Data.Proxies[0].Protocol)
+	require.Equal(t, "10.0.0.2", resp.Data.Proxies[0].Host)
+}
+
 func TestProxyImportDataReusesAndTriggersLatencyProbe(t *testing.T) {
 	router, adminSvc := setupProxyDataRouter()

--- a/frontend/src/api/admin/proxies.ts
+++ b/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
 }

--- a/frontend/src/components/admin/account/AccountTableActions.vue
+++ b/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>
--- a/frontend/src/i18n/locales/en.ts
+++ b/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.',
--- a/frontend/src/i18n/locales/zh.ts
+++ b/frontend/src/i18n/locales/zh.ts
@@ -2012,6 +2012,7 @@ export default {
      deleteConfirmMessage: "确定要删除代理 '{name}' 吗？",
      testProxy: '测试代理',
      dataImport: '导入',
+      dataExportSelected: '导出选中',
      dataImportTitle: '导入代理',
      dataImportHint: '上传代理导出的 JSON 文件以批量导入代理。',
      dataImportWarning: '导入将创建或复用代理，保留状态并在完成后自动触发延迟检测。',
--- a/frontend/src/views/admin/AccountsView.vue
+++ b/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>
--- a/frontend/src/views/admin/ProxiesView.vue
+++ b/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' })