From 9e80ed0fa8008d3750583133e7520dc33fc9cb48 Mon Sep 17 00:00:00 2001
From: shaw <shaw-wei@foxmail.com>
Date: Sat, 7 Feb 2026 11:09:34 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E4=BC=98=E5=8C=96=E4=BB=A3?=
 =?UTF-8?q?=E7=90=86=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E6=A0=8F=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将筛选器和操作按钮合并到同一行显示
- 筛选器在左侧，操作按钮在右侧
- 添加响应式支持，窄屏时自动换行并简化按钮文字
---
 frontend/src/i18n/locales/en.ts          |  2 +
 frontend/src/i18n/locales/zh.ts          |  2 +
 frontend/src/style.css                   |  4 +
 frontend/src/views/admin/ProxiesView.vue | 94 ++++++++++++------------
 4 files changed, 56 insertions(+), 46 deletions(-)

diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 990e2ff7..34b58458 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -1913,6 +1913,8 @@ export default {
       editProxy: 'Edit Proxy',
       deleteProxy: 'Delete Proxy',
       dataImport: 'Import',
+      dataImportShort: 'Import',
+      dataExportShort: 'Export',
       dataExportSelected: 'Export Selected',
       dataImportTitle: 'Import Proxies',
       dataImportHint: 'Upload the exported proxy JSON file to import proxies in bulk.',
diff --git a/frontend/src/i18n/locales/zh.ts b/frontend/src/i18n/locales/zh.ts
index 9eba883a..85f76b3b 100644
--- a/frontend/src/i18n/locales/zh.ts
+++ b/frontend/src/i18n/locales/zh.ts
@@ -2022,6 +2022,8 @@ export default {
       deleteConfirmMessage: "确定要删除代理 '{name}' 吗？",
       testProxy: '测试代理',
       dataImport: '导入',
+      dataImportShort: '导入',
+      dataExportShort: '导出',
       dataExportSelected: '导出选中',
       dataImportTitle: '导入代理',
       dataImportHint: '上传代理导出的 JSON 文件以批量导入代理。',
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 16494f35..c1ee8ea5 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -114,6 +114,10 @@
     @apply rounded-lg px-3 py-1.5 text-xs;
   }
 
+  .btn-md {
+    @apply rounded-xl px-4 py-2 text-sm;
+  }
+
   .btn-lg {
     @apply rounded-2xl px-6 py-3 text-base;
   }
diff --git a/frontend/src/views/admin/ProxiesView.vue b/frontend/src/views/admin/ProxiesView.vue
index 2ae76ba4..bf1adf07 100644
--- a/frontend/src/views/admin/ProxiesView.vue
+++ b/frontend/src/views/admin/ProxiesView.vue
@@ -2,50 +2,10 @@
   <AppLayout>
     <TablePageLayout>
       <template #filters>
-        <div class="space-y-3">
-          <!-- Row 1: Actions -->
-          <div class="flex flex-wrap items-center gap-3">
-            <button
-              @click="loadProxies"
-              :disabled="loading"
-              class="btn btn-secondary"
-              :title="t('common.refresh')"
-            >
-              <Icon name="refresh" size="md" :class="loading ? 'animate-spin' : ''" />
-            </button>
-            <button
-              @click="handleBatchTest"
-              :disabled="batchTesting || loading"
-              class="btn btn-secondary"
-              :title="t('admin.proxies.testConnection')"
-            >
-              <Icon name="play" size="md" class="mr-2" />
-              {{ t('admin.proxies.testConnection') }}
-            </button>
-            <button
-              @click="openBatchDelete"
-              :disabled="selectedCount === 0"
-              class="btn btn-danger"
-              :title="t('admin.proxies.batchDeleteAction')"
-            >
-              <Icon name="trash" size="md" class="mr-2" />
-              {{ t('admin.proxies.batchDeleteAction') }}
-            </button>
-            <button @click="showImportData = true" class="btn btn-secondary">
-              {{ t('admin.proxies.dataImport') }}
-            </button>
-            <button @click="showExportDataDialog = true" class="btn btn-secondary">
-              {{ 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">
+        <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+          <!-- Search + Filters -->
+          <div class="flex flex-wrap items-center gap-2">
+            <div class="relative min-w-0 flex-1 lg:w-48 lg:flex-none">
               <Icon
                 name="search"
                 size="md"
@@ -60,7 +20,7 @@
               />
             </div>
 
-            <div class="w-full sm:w-40">
+            <div class="w-28 lg:w-36">
               <Select
                 v-model="filters.protocol"
                 :options="protocolOptions"
@@ -68,7 +28,7 @@
                 @change="loadProxies"
               />
             </div>
-            <div class="w-full sm:w-36">
+            <div class="w-24 lg:w-32">
               <Select
                 v-model="filters.status"
                 :options="statusOptions"
@@ -77,6 +37,48 @@
               />
             </div>
           </div>
+
+          <!-- Actions -->
+          <div class="flex flex-wrap items-center gap-2">
+            <button
+              @click="loadProxies"
+              :disabled="loading"
+              class="btn btn-secondary btn-sm lg:btn-md"
+              :title="t('common.refresh')"
+            >
+              <Icon name="refresh" size="md" :class="loading ? 'animate-spin' : ''" />
+            </button>
+            <button
+              @click="handleBatchTest"
+              :disabled="batchTesting || loading"
+              class="btn btn-secondary btn-sm lg:btn-md"
+              :title="t('admin.proxies.testConnection')"
+            >
+              <Icon name="play" size="md" class="lg:mr-2" />
+              <span class="hidden lg:inline">{{ t('admin.proxies.testConnection') }}</span>
+            </button>
+            <button
+              @click="openBatchDelete"
+              :disabled="selectedCount === 0"
+              class="btn btn-danger btn-sm lg:btn-md"
+              :title="t('admin.proxies.batchDeleteAction')"
+            >
+              <Icon name="trash" size="md" class="lg:mr-2" />
+              <span class="hidden lg:inline">{{ t('admin.proxies.batchDeleteAction') }}</span>
+            </button>
+            <button @click="showImportData = true" class="btn btn-secondary btn-sm lg:btn-md">
+              <span class="lg:hidden">{{ t('admin.proxies.dataImportShort') }}</span>
+              <span class="hidden lg:inline">{{ t('admin.proxies.dataImport') }}</span>
+            </button>
+            <button @click="showExportDataDialog = true" class="btn btn-secondary btn-sm lg:btn-md">
+              <span class="lg:hidden">{{ t('admin.proxies.dataExportShort') }}</span>
+              <span class="hidden lg:inline">{{ selectedCount > 0 ? t('admin.proxies.dataExportSelected') : t('admin.proxies.dataExport') }}</span>
+            </button>
+            <button @click="showCreateModal = true" class="btn btn-primary btn-sm lg:btn-md">
+              <Icon name="plus" size="md" class="lg:mr-2" />
+              <span class="hidden lg:inline">{{ t('admin.proxies.createProxy') }}</span>
+            </button>
+          </div>
         </div>
       </template>