From eef12cb90076ef0b3886dd862b885f2308c029d9 Mon Sep 17 00:00:00 2001
From: IanShaw027 <131567472+IanShaw027@users.noreply.github.com>
Date: Mon, 5 Jan 2026 01:00:00 +0800
Subject: [PATCH] =?UTF-8?q?refactor(frontend):=20=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E5=B7=A5=E5=85=B7=E6=9D=A1?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=92=8C=E6=93=8D=E4=BD=9C=E5=88=97=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 修复内容

### 1. 统一操作列按钮样式
- 所有操作列按钮统一为"图标+文字"垂直排列样式
- UsersView: 编辑和更多按钮添加文字标签
- 与 AccountsView、GroupsView 等页面保持一致

### 2. 统一顶部工具条布局（6个管理页面）
- 使用 flex + justify-between 布局
- 左侧：模糊搜索框、筛选器（可多行排列）
- 右侧：刷新、创建等操作按钮（靠右对齐）
- 响应式：宽度不够时右侧按钮自动换行到上一行

### 3. 修复的页面
- AccountsView: 合并 actions/filters 到单行工具条
- UsersView: 标准左右分栏，操作列添加文字
- GroupsView: 新增搜索框，左右分栏布局
- ProxiesView: 左右分栏，响应式布局
- SubscriptionsView: 新增用户模糊搜索，左右分栏
- UsageView: 补齐所有筛选项，左右分栏

### 4. 新增功能
- GroupsView: 新增分组名称/描述模糊搜索
- SubscriptionsView: 新增用户模糊搜索功能
- UsageView: 补齐 API Key 搜索筛选

### 5. 国际化
- 新增相关搜索框的 placeholder 文案（中英文）

## 技术细节
- 使用 flex-wrap-reverse 实现响应式换行
- 左侧筛选区使用 flex-wrap 支持多行
- 右侧按钮区使用 ml-auto + justify-end 保持右对齐
- 移动端使用 w-full sm:w-* 响应式宽度

## 验证结果
- ✅ TypeScript 类型检查通过
- ✅ 所有页面布局统一
- ✅ 响应式布局正常工作
---
 .../admin/account/AccountTableActions.vue     |  10 +-
 .../admin/account/AccountTableFilters.vue     |  16 +-
 .../components/admin/usage/UsageFilters.vue   | 368 ++++++++++++++++--
 frontend/src/i18n/locales/en.ts               |   2 +
 frontend/src/i18n/locales/zh.ts               |   2 +
 frontend/src/views/admin/AccountsView.vue     |  22 +-
 frontend/src/views/admin/GroupsView.vue       | 124 ++++--
 frontend/src/views/admin/ProxiesView.vue      | 158 ++++----
 .../src/views/admin/SubscriptionsView.vue     | 286 ++++++++++----
 frontend/src/views/admin/UsersView.vue        | 103 +++--
 10 files changed, 826 insertions(+), 265 deletions(-)

diff --git a/frontend/src/components/admin/account/AccountTableActions.vue b/frontend/src/components/admin/account/AccountTableActions.vue
index 9832873e..035c9f83 100644
--- a/frontend/src/components/admin/account/AccountTableActions.vue
+++ b/frontend/src/components/admin/account/AccountTableActions.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="flex justify-end gap-3">
-    <button @click="$emit('refresh')" :disabled="loading" class="btn btn-secondary"><svg :class="['h-5 w-5', loading ? 'animate-spin' : '']" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" /></svg></button>
-    <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>
+  <div class="flex max-w-full flex-wrap justify-end gap-3">
+    <button @click="$emit('refresh')" :disabled="loading" class="btn btn-secondary flex-shrink-0"><svg :class="['h-5 w-5', loading ? 'animate-spin' : '']" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" /></svg></button>
+    <button @click="$emit('sync')" class="btn btn-secondary flex-shrink-0">{{ t('admin.accounts.syncFromCrs') }}</button>
+    <button @click="$emit('create')" class="btn btn-primary flex-shrink-0">{{ t('admin.accounts.createAccount') }}</button>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'; defineProps(['loading']); defineEmits(['refresh', 'sync', 'create']); const { t } = useI18n()
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/admin/account/AccountTableFilters.vue b/frontend/src/components/admin/account/AccountTableFilters.vue
index 7d40c31e..3721acc6 100644
--- a/frontend/src/components/admin/account/AccountTableFilters.vue
+++ b/frontend/src/components/admin/account/AccountTableFilters.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-    <div class="relative max-w-md flex-1">
-      <SearchInput 
-        :model-value="searchQuery" 
-        :placeholder="t('admin.accounts.searchAccounts')" 
+  <div class="flex flex-wrap items-start gap-3">
+    <div class="min-w-0 flex-1">
+      <SearchInput
+        :model-value="searchQuery"
+        :placeholder="t('admin.accounts.searchAccounts')"
         @update:model-value="$emit('update:searchQuery', $event)"
         @search="$emit('change')"
       />
     </div>
-    <div class="flex gap-3">
-      <Select v-model="filters.platform" :options="pOpts" @change="$emit('change')" />
-      <Select v-model="filters.status" :options="sOpts" @change="$emit('change')" />
+    <div class="flex flex-wrap items-center gap-3">
+      <Select v-model="filters.platform" class="w-40 flex-shrink-0" :options="pOpts" @change="$emit('change')" />
+      <Select v-model="filters.status" class="w-40 flex-shrink-0" :options="sOpts" @change="$emit('change')" />
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/admin/usage/UsageFilters.vue b/frontend/src/components/admin/usage/UsageFilters.vue
index c9dd0d94..d6077ec5 100644
--- a/frontend/src/components/admin/usage/UsageFilters.vue
+++ b/frontend/src/components/admin/usage/UsageFilters.vue
@@ -1,35 +1,353 @@
 <template>
-  <div class="card p-6"><div class="flex flex-wrap items-end gap-4">
-    <div class="min-w-[200px] relative"><label class="input-label">{{ t('admin.usage.userFilter') }}</label>
-      <input v-model="userKW" type="text" class="input pr-8" :placeholder="t('admin.usage.searchUserPlaceholder')" @input="debounceSearch" @focus="showDD = true" />
-      <button v-if="modelValue.user_id" @click="clearUser" class="absolute right-2 top-9 text-gray-400">✕</button>
-      <div v-if="showDD && (results.length > 0 || userKW)" class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border bg-white shadow-lg dark:bg-gray-800">
-        <button v-for="u in results" :key="u.id" @click="selectUser(u)" class="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700"><span>{{ u.email }}</span><span class="ml-2 text-xs text-gray-400">#{{ u.id }}</span></button>
+  <div class="card p-6">
+    <!-- Toolbar: left filters (multi-line) + right actions -->
+    <div class="flex flex-wrap items-end justify-between gap-4">
+      <!-- Left: filters (allowed to wrap to multiple rows) -->
+      <div class="flex flex-1 flex-wrap items-end gap-4">
+        <!-- User Search -->
+        <div ref="userSearchRef" class="usage-filter-dropdown relative w-full sm:w-auto sm:min-w-[240px]">
+          <label class="input-label">{{ t('admin.usage.userFilter') }}</label>
+          <input
+            v-model="userKeyword"
+            type="text"
+            class="input pr-8"
+            :placeholder="t('admin.usage.searchUserPlaceholder')"
+            @input="debounceUserSearch"
+            @focus="showUserDropdown = true"
+          />
+          <button
+            v-if="filters.user_id"
+            type="button"
+            @click="clearUser"
+            class="absolute right-2 top-9 text-gray-400"
+            aria-label="Clear user filter"
+          >
+            ✕
+          </button>
+          <div
+            v-if="showUserDropdown && (userResults.length > 0 || userKeyword)"
+            class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border bg-white shadow-lg dark:bg-gray-800"
+          >
+            <button
+              v-for="u in userResults"
+              :key="u.id"
+              type="button"
+              @click="selectUser(u)"
+              class="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700"
+            >
+              <span>{{ u.email }}</span>
+              <span class="ml-2 text-xs text-gray-400">#{{ u.id }}</span>
+            </button>
+          </div>
+        </div>
+
+        <!-- API Key Search -->
+        <div ref="apiKeySearchRef" class="usage-filter-dropdown relative w-full sm:w-auto sm:min-w-[240px]">
+          <label class="input-label">{{ t('usage.apiKeyFilter') }}</label>
+          <input
+            v-model="apiKeyKeyword"
+            type="text"
+            class="input pr-8"
+            :placeholder="t('admin.usage.searchApiKeyPlaceholder')"
+            @input="debounceApiKeySearch"
+            @focus="showApiKeyDropdown = true"
+          />
+          <button
+            v-if="filters.api_key_id"
+            type="button"
+            @click="onClearApiKey"
+            class="absolute right-2 top-9 text-gray-400"
+            aria-label="Clear API key filter"
+          >
+            ✕
+          </button>
+          <div
+            v-if="showApiKeyDropdown && (apiKeyResults.length > 0 || apiKeyKeyword)"
+            class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border bg-white shadow-lg dark:bg-gray-800"
+          >
+            <button
+              v-for="k in apiKeyResults"
+              :key="k.id"
+              type="button"
+              @click="selectApiKey(k)"
+              class="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700"
+            >
+              <span class="truncate">{{ k.name || `#${k.id}` }}</span>
+              <span class="ml-2 text-xs text-gray-400">#{{ k.id }}</span>
+            </button>
+          </div>
+        </div>
+
+        <!-- Model Filter -->
+        <div class="w-full sm:w-auto sm:min-w-[220px]">
+          <label class="input-label">{{ t('usage.model') }}</label>
+          <Select v-model="filters.model" :options="modelOptions" searchable @change="emitChange" />
+        </div>
+
+        <!-- Account Filter -->
+        <div class="w-full sm:w-auto sm:min-w-[220px]">
+          <label class="input-label">{{ t('admin.usage.account') }}</label>
+          <Select v-model="filters.account_id" :options="accountOptions" searchable @change="emitChange" />
+        </div>
+
+        <!-- Stream Type Filter -->
+        <div class="w-full sm:w-auto sm:min-w-[180px]">
+          <label class="input-label">{{ t('usage.type') }}</label>
+          <Select v-model="filters.stream" :options="streamTypeOptions" @change="emitChange" />
+        </div>
+
+        <!-- Billing Type Filter -->
+        <div class="w-full sm:w-auto sm:min-w-[180px]">
+          <label class="input-label">{{ t('usage.billingType') }}</label>
+          <Select v-model="filters.billing_type" :options="billingTypeOptions" @change="emitChange" />
+        </div>
+
+        <!-- Group Filter -->
+        <div class="w-full sm:w-auto sm:min-w-[200px]">
+          <label class="input-label">{{ t('admin.usage.group') }}</label>
+          <Select v-model="filters.group_id" :options="groupOptions" searchable @change="emitChange" />
+        </div>
+
+        <!-- Date Range Filter -->
+        <div class="w-full sm:w-auto [&_.date-picker-trigger]:w-full">
+          <label class="input-label">{{ t('usage.timeRange') }}</label>
+          <DateRangePicker
+            :start-date="startDate"
+            :end-date="endDate"
+            @update:startDate="updateStartDate"
+            @update:endDate="updateEndDate"
+            @change="emitChange"
+          />
+        </div>
+      </div>
+
+      <!-- Right: actions -->
+      <div class="flex w-full flex-wrap items-center justify-end gap-3 sm:w-auto">
+        <button type="button" @click="$emit('reset')" class="btn btn-secondary">
+          {{ t('common.reset') }}
+        </button>
+        <button type="button" @click="$emit('export')" :disabled="exporting" class="btn btn-primary">
+          {{ t('usage.exportExcel') }}
+        </button>
       </div>
     </div>
-    <div class="min-w-[180px]"><label class="input-label">{{ t('usage.model') }}</label><Select v-model="filters.model" :options="mOpts" searchable @change="emitChange" /></div>
-    <div class="min-w-[150px]"><label class="input-label">{{ t('admin.usage.group') }}</label><Select v-model="filters.group_id" :options="gOpts" @change="emitChange" /></div>
-    <div><label class="input-label">{{ t('usage.timeRange') }}</label><DateRangePicker :start-date="startDate" :end-date="endDate" @update:startDate="$emit('update:startDate', $event)" @update:endDate="$emit('update:endDate', $event)" @change="emitChange" /></div>
-    <div class="ml-auto flex gap-3"><button @click="$emit('reset')" class="btn btn-secondary">{{ t('common.reset') }}</button><button @click="$emit('export')" :disabled="exporting" class="btn btn-primary">{{ t('usage.exportExcel') }}</button></div>
-  </div></div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'; import { useI18n } from 'vue-i18n'; import { adminAPI } from '@/api/admin'; import Select from '@/components/common/Select.vue'; import DateRangePicker from '@/components/common/DateRangePicker.vue'
-const props = defineProps(['modelValue', 'exporting', 'startDate', 'endDate']); const emit = defineEmits(['update:modelValue', 'update:startDate', 'update:endDate', 'change', 'reset', 'export'])
-const { t } = useI18n(); const filters = props.modelValue
-const userKW = ref(''); const results = ref<any[]>([]); const showDD = ref(false); let timeout: any = null
-const mOpts = ref<{value: string | null, label: string}[]>([{ value: null, label: t('admin.usage.allModels') }]); const gOpts = ref<any[]>([{ value: null, label: t('admin.usage.allGroups') }])
+import { ref, onMounted, onUnmounted, toRef, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { adminAPI } from '@/api/admin'
+import Select, { type SelectOption } from '@/components/common/Select.vue'
+import DateRangePicker from '@/components/common/DateRangePicker.vue'
+import type { SimpleApiKey, SimpleUser } from '@/api/admin/usage'
+
+type ModelValue = Record<string, any>
+
+interface Props {
+  modelValue: ModelValue
+  exporting: boolean
+  startDate: string
+  endDate: string
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits([
+  'update:modelValue',
+  'update:startDate',
+  'update:endDate',
+  'change',
+  'reset',
+  'export'
+])
+
+const { t } = useI18n()
+const filters = toRef(props, 'modelValue')
+
+const userSearchRef = ref<HTMLElement | null>(null)
+const apiKeySearchRef = ref<HTMLElement | null>(null)
+
+const userKeyword = ref('')
+const userResults = ref<SimpleUser[]>([])
+const showUserDropdown = ref(false)
+let userSearchTimeout: ReturnType<typeof setTimeout> | null = null
+
+const apiKeyKeyword = ref('')
+const apiKeyResults = ref<SimpleApiKey[]>([])
+const showApiKeyDropdown = ref(false)
+let apiKeySearchTimeout: ReturnType<typeof setTimeout> | null = null
+
+const modelOptions = ref<SelectOption[]>([{ value: null, label: t('admin.usage.allModels') }])
+const groupOptions = ref<SelectOption[]>([{ value: null, label: t('admin.usage.allGroups') }])
+const accountOptions = ref<SelectOption[]>([{ value: null, label: t('admin.usage.allAccounts') }])
+
+const streamTypeOptions = ref<SelectOption[]>([
+  { value: null, label: t('admin.usage.allTypes') },
+  { value: true, label: t('usage.stream') },
+  { value: false, label: t('usage.sync') }
+])
+
+const billingTypeOptions = ref<SelectOption[]>([
+  { value: null, label: t('admin.usage.allBillingTypes') },
+  { value: 1, label: t('usage.subscription') },
+  { value: 0, label: t('usage.balance') }
+])
+
 const emitChange = () => emit('change')
-const debounceSearch = () => { clearTimeout(timeout); timeout = setTimeout(async () => { if(!userKW.value) { results.value = []; return }; try { results.value = await adminAPI.usage.searchUsers(userKW.value) } catch {} }, 300) }
-const selectUser = (u: any) => { userKW.value = u.email; showDD.value = false; filters.user_id = u.id; emitChange() }
-const clearUser = () => { userKW.value = ''; results.value = []; filters.user_id = undefined; emitChange() }
+
+const updateStartDate = (value: string) => {
+  emit('update:startDate', value)
+  filters.value.start_date = value
+}
+
+const updateEndDate = (value: string) => {
+  emit('update:endDate', value)
+  filters.value.end_date = value
+}
+
+const debounceUserSearch = () => {
+  if (userSearchTimeout) clearTimeout(userSearchTimeout)
+  userSearchTimeout = setTimeout(async () => {
+    if (!userKeyword.value) {
+      userResults.value = []
+      return
+    }
+    try {
+      userResults.value = await adminAPI.usage.searchUsers(userKeyword.value)
+    } catch {
+      userResults.value = []
+    }
+  }, 300)
+}
+
+const debounceApiKeySearch = () => {
+  if (apiKeySearchTimeout) clearTimeout(apiKeySearchTimeout)
+  apiKeySearchTimeout = setTimeout(async () => {
+    if (!apiKeyKeyword.value) {
+      apiKeyResults.value = []
+      return
+    }
+    try {
+      apiKeyResults.value = await adminAPI.usage.searchApiKeys(
+        filters.value.user_id,
+        apiKeyKeyword.value
+      )
+    } catch {
+      apiKeyResults.value = []
+    }
+  }, 300)
+}
+
+const selectUser = (u: SimpleUser) => {
+  userKeyword.value = u.email
+  showUserDropdown.value = false
+  filters.value.user_id = u.id
+  clearApiKey()
+  emitChange()
+}
+
+const clearUser = () => {
+  userKeyword.value = ''
+  userResults.value = []
+  showUserDropdown.value = false
+  filters.value.user_id = undefined
+  clearApiKey()
+  emitChange()
+}
+
+const selectApiKey = (k: SimpleApiKey) => {
+  apiKeyKeyword.value = k.name || String(k.id)
+  showApiKeyDropdown.value = false
+  filters.value.api_key_id = k.id
+  emitChange()
+}
+
+const clearApiKey = () => {
+  apiKeyKeyword.value = ''
+  apiKeyResults.value = []
+  showApiKeyDropdown.value = false
+  filters.value.api_key_id = undefined
+}
+
+const onClearApiKey = () => {
+  clearApiKey()
+  emitChange()
+}
+
+const onDocumentClick = (e: MouseEvent) => {
+  const target = e.target as Node | null
+  if (!target) return
+
+  const clickedInsideUser = userSearchRef.value?.contains(target) ?? false
+  const clickedInsideApiKey = apiKeySearchRef.value?.contains(target) ?? false
+
+  if (!clickedInsideUser) showUserDropdown.value = false
+  if (!clickedInsideApiKey) showApiKeyDropdown.value = false
+}
+
+watch(
+  () => props.startDate,
+  (value) => {
+    filters.value.start_date = value
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.endDate,
+  (value) => {
+    filters.value.end_date = value
+  },
+  { immediate: true }
+)
+
+watch(
+  () => filters.value.user_id,
+  (userId) => {
+    if (!userId) {
+      userKeyword.value = ''
+      userResults.value = []
+    }
+  }
+)
+
+watch(
+  () => filters.value.api_key_id,
+  (apiKeyId) => {
+    if (!apiKeyId) {
+      apiKeyKeyword.value = ''
+      apiKeyResults.value = []
+    }
+  }
+)
+
 onMounted(async () => {
-  try { const [gs, ms] = await Promise.all([adminAPI.groups.list(1, 1000), adminAPI.dashboard.getModelStats({ start_date: props.startDate, end_date: props.endDate })])
-    gOpts.value.push(...gs.items.map((g: any) => ({ value: g.id, label: g.name })))
-    const unique = new Set<string>(); ms.models?.forEach((s: any) => s.model && unique.add(s.model))
-    mOpts.value.push(...Array.from(unique).sort().map(m => ({ value: m, label: m })))
-  } catch {}
-  document.addEventListener('click', (e) => { if(!(e.target as HTMLElement).closest('.relative')) showDD.value = false })
+  document.addEventListener('click', onDocumentClick)
+
+  try {
+    const [gs, ms, as] = await Promise.all([
+      adminAPI.groups.list(1, 1000),
+      adminAPI.dashboard.getModelStats({ start_date: props.startDate, end_date: props.endDate }),
+      adminAPI.accounts.list(1, 1000)
+    ])
+
+    groupOptions.value.push(...gs.items.map((g: any) => ({ value: g.id, label: g.name })))
+
+    accountOptions.value.push(...as.items.map((a: any) => ({ value: a.id, label: a.name })))
+
+    const uniqueModels = new Set<string>()
+    ms.models?.forEach((s: any) => s.model && uniqueModels.add(s.model))
+    modelOptions.value.push(
+      ...Array.from(uniqueModels)
+        .sort()
+        .map((m) => ({ value: m, label: m }))
+    )
+  } catch {
+    // Ignore filter option loading errors (page still usable)
+  }
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', onDocumentClick)
 })
 </script>
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 17205d07..ab576cc8 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -760,6 +760,7 @@ export default {
     groups: {
       title: 'Group Management',
       description: 'Manage API key groups and rate multipliers',
+      searchGroups: 'Search groups...',
       createGroup: 'Create Group',
       editGroup: 'Edit Group',
       deleteGroup: 'Delete Group',
@@ -1657,6 +1658,7 @@ export default {
       description: 'View and manage all user usage records',
       userFilter: 'User',
       searchUserPlaceholder: 'Search user by email...',
+      searchApiKeyPlaceholder: 'Search API key by name...',
       selectedUser: 'Selected',
       user: 'User',
       account: 'Account',
diff --git a/frontend/src/i18n/locales/zh.ts b/frontend/src/i18n/locales/zh.ts
index 7aa36daa..4d3d00f5 100644
--- a/frontend/src/i18n/locales/zh.ts
+++ b/frontend/src/i18n/locales/zh.ts
@@ -809,6 +809,7 @@ export default {
     groups: {
       title: '分组管理',
       description: '管理 API 密钥分组和费率配置',
+      searchGroups: '搜索分组...',
       createGroup: '创建分组',
       editGroup: '编辑分组',
       deleteGroup: '删除分组',
@@ -1803,6 +1804,7 @@ export default {
       description: '查看和管理所有用户的使用记录',
       userFilter: '用户',
       searchUserPlaceholder: '按邮箱搜索用户...',
+      searchApiKeyPlaceholder: '按名称搜索 API 密钥...',
       selectedUser: '已选择',
       user: '用户',
       account: '账户',
diff --git a/frontend/src/views/admin/AccountsView.vue b/frontend/src/views/admin/AccountsView.vue
index be12ac83..8f5bb920 100644
--- a/frontend/src/views/admin/AccountsView.vue
+++ b/frontend/src/views/admin/AccountsView.vue
@@ -1,8 +1,26 @@
 <template>
   <AppLayout>
     <TablePageLayout>
-      <template #actions><AccountTableActions :loading="loading" @refresh="load" @sync="showSync = true" @create="showCreate = true" /></template>
-      <template #filters><AccountTableFilters v-model:searchQuery="params.search" :filters="params" @change="reload" @update:searchQuery="debouncedReload" /></template>
+      <template #filters>
+        <div class="flex flex-wrap-reverse items-start justify-between gap-3">
+          <div class="min-w-0 flex-1">
+            <AccountTableFilters
+              v-model:searchQuery="params.search"
+              :filters="params"
+              @change="reload"
+              @update:searchQuery="debouncedReload"
+            />
+          </div>
+          <div class="flex-shrink-0">
+            <AccountTableActions
+              :loading="loading"
+              @refresh="load"
+              @sync="showSync = true"
+              @create="showCreate = true"
+            />
+          </div>
+        </div>
+      </template>
       <template #table>
         <AccountBulkActionsBar :selected-ids="selIds" @delete="handleBulkDelete" @edit="showBulkEdit = true" @clear="selIds = []" @select-page="selectPage" />
         <DataTable :columns="cols" :data="accounts" :loading="loading">
diff --git a/frontend/src/views/admin/GroupsView.vue b/frontend/src/views/admin/GroupsView.vue
index a231ee3e..f22d1e0d 100644
--- a/frontend/src/views/admin/GroupsView.vue
+++ b/frontend/src/views/admin/GroupsView.vue
@@ -1,49 +1,31 @@
 <template>
   <AppLayout>
     <TablePageLayout>
-      <template #actions>
-        <div class="flex justify-end gap-3">
-          <button
-            @click="loadGroups"
-            :disabled="loading"
-            class="btn btn-secondary"
-            :title="t('common.refresh')"
-          >
-            <svg
-              :class="['h-5 w-5', loading ? 'animate-spin' : '']"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              stroke-width="1.5"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
-              />
-            </svg>
-          </button>
-          <button
-            @click="showCreateModal = true"
-            class="btn btn-primary"
-            data-tour="groups-create-btn"
-          >
-            <svg
-              class="mr-2 h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              stroke-width="1.5"
-            >
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-            </svg>
-            {{ t('admin.groups.createGroup') }}
-          </button>
-        </div>
-      </template>
-
       <template #filters>
-        <div class="flex flex-wrap gap-3">
+        <div class="flex flex-col justify-between gap-4 lg:flex-row lg:items-start">
+          <!-- Left: fuzzy search + filters (can wrap to multiple lines) -->
+          <div class="flex flex-1 flex-wrap items-center gap-3">
+            <div class="relative w-full sm:w-72 lg:w-80">
+              <svg
+                class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+                />
+              </svg>
+              <input
+                v-model="searchQuery"
+                type="text"
+                :placeholder="t('admin.groups.searchGroups')"
+                class="input pl-10"
+              />
+            </div>
           <Select
             v-model="filters.platform"
             :options="platformFilterOptions"
@@ -65,11 +47,56 @@
             class="w-44"
             @change="loadGroups"
           />
+          </div>
+
+          <!-- Right: actions -->
+          <div class="flex w-full flex-shrink-0 flex-wrap items-center justify-end gap-3 lg:w-auto">
+            <button
+              @click="loadGroups"
+              :disabled="loading"
+              class="btn btn-secondary"
+              :title="t('common.refresh')"
+            >
+              <svg
+                :class="['h-5 w-5', loading ? 'animate-spin' : '']"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+                />
+              </svg>
+            </button>
+            <button
+              @click="showCreateModal = true"
+              class="btn btn-primary"
+              data-tour="groups-create-btn"
+            >
+              <svg
+                class="mr-2 h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M12 4.5v15m7.5-7.5h-15"
+                />
+              </svg>
+              {{ t('admin.groups.createGroup') }}
+            </button>
+          </div>
         </div>
       </template>
 
       <template #table>
-        <DataTable :columns="columns" :data="groups" :loading="loading">
+        <DataTable :columns="columns" :data="displayedGroups" :loading="loading">
           <template #cell-name="{ value }">
             <span class="font-medium text-gray-900 dark:text-white">{{ value }}</span>
           </template>
@@ -720,6 +747,7 @@ const subscriptionTypeOptions = computed(() => [
 
 const groups = ref<Group[]>([])
 const loading = ref(false)
+const searchQuery = ref('')
 const filters = reactive({
   platform: '',
   status: '',
@@ -734,6 +762,16 @@ const pagination = reactive({
 
 let abortController: AbortController | null = null
 
+const displayedGroups = computed(() => {
+  const q = searchQuery.value.trim().toLowerCase()
+  if (!q) return groups.value
+  return groups.value.filter((group) => {
+    const name = group.name?.toLowerCase?.() ?? ''
+    const description = group.description?.toLowerCase?.() ?? ''
+    return name.includes(q) || description.includes(q)
+  })
+})
+
 const showCreateModal = ref(false)
 const showEditModal = ref(false)
 const showDeleteDialog = ref(false)
diff --git a/frontend/src/views/admin/ProxiesView.vue b/frontend/src/views/admin/ProxiesView.vue
index 1a2239bb..9a41e950 100644
--- a/frontend/src/views/admin/ProxiesView.vue
+++ b/frontend/src/views/admin/ProxiesView.vue
@@ -1,82 +1,92 @@
 <template>
   <AppLayout>
     <TablePageLayout>
-      <template #actions>
-        <div class="flex justify-end gap-3">
-          <button
-          @click="loadProxies"
-          :disabled="loading"
-          class="btn btn-secondary"
-          :title="t('common.refresh')"
-        >
-          <svg
-            :class="['h-5 w-5', loading ? 'animate-spin' : '']"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="1.5"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
-            />
-          </svg>
-        </button>
-        <button @click="showCreateModal = true" class="btn btn-primary">
-          <svg
-            class="mr-2 h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="1.5"
-          >
-            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-          </svg>
-          {{ t('admin.proxies.createProxy') }}
-        </button>
-        </div>
-      </template>
-
       <template #filters>
-        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-          <div class="relative max-w-md flex-1">
-          <svg
-            class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
-            />
-          </svg>
-          <input
-            v-model="searchQuery"
-            type="text"
-            :placeholder="t('admin.proxies.searchProxies')"
-            class="input pl-10"
-            @input="handleSearch"
-          />
+        <!-- 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:flex-1 sm:min-w-[14rem] sm:max-w-md">
+              <svg
+                class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+                />
+              </svg>
+              <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>
-          <div class="flex flex-wrap gap-3">
-          <Select
-            v-model="filters.protocol"
-            :options="protocolOptions"
-            :placeholder="t('admin.proxies.allProtocols')"
-            class="w-40"
-            @change="loadProxies"
-          />
-          <Select
-            v-model="filters.status"
-            :options="statusOptions"
-            :placeholder="t('admin.proxies.allStatus')"
-            class="w-36"
-            @change="loadProxies"
-          />
+
+          <!-- Right: Actions -->
+          <div class="ml-auto flex flex-wrap items-center justify-end gap-3">
+            <button
+              @click="loadProxies"
+              :disabled="loading"
+              class="btn btn-secondary"
+              :title="t('common.refresh')"
+            >
+              <svg
+                :class="['h-5 w-5', loading ? 'animate-spin' : '']"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+                />
+              </svg>
+            </button>
+            <button @click="showCreateModal = true" class="btn btn-primary">
+              <svg
+                class="mr-2 h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M12 4.5v15m7.5-7.5h-15"
+                />
+              </svg>
+              {{ t('admin.proxies.createProxy') }}
+            </button>
           </div>
         </div>
       </template>
diff --git a/frontend/src/views/admin/SubscriptionsView.vue b/frontend/src/views/admin/SubscriptionsView.vue
index 4c83f1fe..dc05e57c 100644
--- a/frontend/src/views/admin/SubscriptionsView.vue
+++ b/frontend/src/views/admin/SubscriptionsView.vue
@@ -1,62 +1,143 @@
 <template>
   <AppLayout>
     <TablePageLayout>
-      <!-- Page Header Actions -->
-      <template #actions>
-      <div class="flex justify-end gap-3">
-        <button
-          @click="loadSubscriptions"
-          :disabled="loading"
-          class="btn btn-secondary"
-          :title="t('common.refresh')"
-        >
-          <svg
-            :class="['h-5 w-5', loading ? 'animate-spin' : '']"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="1.5"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
-            />
-          </svg>
-        </button>
-        <button @click="showAssignModal = true" class="btn btn-primary">
-          <svg
-            class="mr-2 h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="1.5"
-          >
-            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-          </svg>
-          {{ t('admin.subscriptions.assignSubscription') }}
-        </button>
-      </div>
-      </template>
-
-      <!-- Filters -->
       <template #filters>
-      <div class="flex flex-wrap gap-3">
-        <Select
-          v-model="filters.status"
-          :options="statusOptions"
-          :placeholder="t('admin.subscriptions.allStatus')"
-          class="w-40"
-          @change="loadSubscriptions"
-        />
-        <Select
-          v-model="filters.group_id"
-          :options="groupOptions"
-          :placeholder="t('admin.subscriptions.allGroups')"
-          class="w-48"
-          @change="loadSubscriptions"
-        />
-      </div>
+        <!-- Top Toolbar: Left (search + filters) / Right (actions) -->
+        <div class="flex flex-wrap items-start justify-between gap-4">
+          <!-- Left: Fuzzy user search + filters (wrap to multiple lines) -->
+          <div class="flex flex-1 flex-wrap items-center gap-3">
+            <!-- User Search -->
+            <div
+              class="relative w-full sm:flex-1 sm:min-w-[14rem] sm:max-w-md"
+              data-filter-user-search
+            >
+              <svg
+                class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+                />
+              </svg>
+              <input
+                v-model="filterUserKeyword"
+                type="text"
+                :placeholder="t('admin.users.searchUsers')"
+                class="input pl-10 pr-8"
+                @input="debounceSearchFilterUsers"
+                @focus="showFilterUserDropdown = true"
+              />
+              <button
+                v-if="selectedFilterUser"
+                @click="clearFilterUser"
+                type="button"
+                class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                :title="t('common.clear')"
+              >
+                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+
+              <!-- User Dropdown -->
+              <div
+                v-if="showFilterUserDropdown && (filterUserResults.length > 0 || filterUserKeyword)"
+                class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
+              >
+                <div
+                  v-if="filterUserLoading"
+                  class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400"
+                >
+                  {{ t('common.loading') }}
+                </div>
+                <div
+                  v-else-if="filterUserResults.length === 0 && filterUserKeyword"
+                  class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400"
+                >
+                  {{ t('common.noOptionsFound') }}
+                </div>
+                <button
+                  v-for="user in filterUserResults"
+                  :key="user.id"
+                  type="button"
+                  @click="selectFilterUser(user)"
+                  class="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
+                >
+                  <span class="font-medium text-gray-900 dark:text-white">{{ user.email }}</span>
+                  <span class="ml-2 text-gray-500 dark:text-gray-400">#{{ user.id }}</span>
+                </button>
+              </div>
+            </div>
+
+            <!-- Filters -->
+            <div class="w-full sm:w-40">
+              <Select
+                v-model="filters.status"
+                :options="statusOptions"
+                :placeholder="t('admin.subscriptions.allStatus')"
+                @change="applyFilters"
+              />
+            </div>
+            <div class="w-full sm:w-48">
+              <Select
+                v-model="filters.group_id"
+                :options="groupOptions"
+                :placeholder="t('admin.subscriptions.allGroups')"
+                @change="applyFilters"
+              />
+            </div>
+          </div>
+
+          <!-- Right: Actions -->
+          <div class="ml-auto flex flex-wrap items-center justify-end gap-3">
+            <button
+              @click="loadSubscriptions"
+              :disabled="loading"
+              class="btn btn-secondary"
+              :title="t('common.refresh')"
+            >
+              <svg
+                :class="['h-5 w-5', loading ? 'animate-spin' : '']"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+                />
+              </svg>
+            </button>
+            <button @click="showAssignModal = true" class="btn btn-primary">
+              <svg
+                class="mr-2 h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M12 4.5v15m7.5-7.5h-15"
+                />
+              </svg>
+              {{ t('admin.subscriptions.assignSubscription') }}
+            </button>
+          </div>
+        </div>
       </template>
 
       <!-- Subscriptions Table -->
@@ -338,7 +419,7 @@
       >
         <div>
           <label class="input-label">{{ t('admin.subscriptions.form.user') }}</label>
-          <div class="relative">
+          <div class="relative" data-assign-user-search>
             <input
               v-model="userSearchKeyword"
               type="text"
@@ -555,6 +636,14 @@ const groups = ref<Group[]>([])
 const loading = ref(false)
 let abortController: AbortController | null = null
 
+// Toolbar user filter (fuzzy search -> select user_id)
+const filterUserKeyword = ref('')
+const filterUserResults = ref<SimpleUser[]>([])
+const filterUserLoading = ref(false)
+const showFilterUserDropdown = ref(false)
+const selectedFilterUser = ref<SimpleUser | null>(null)
+let filterUserSearchTimeout: ReturnType<typeof setTimeout> | null = null
+
 // User search state
 const userSearchKeyword = ref('')
 const userSearchResults = ref<SimpleUser[]>([])
@@ -565,7 +654,8 @@ let userSearchTimeout: ReturnType<typeof setTimeout> | null = null
 
 const filters = reactive({
   status: '',
-  group_id: ''
+  group_id: '',
+  user_id: null as number | null
 })
 const pagination = reactive({
   page: 1,
@@ -604,6 +694,11 @@ const subscriptionGroupOptions = computed(() =>
     .map((g) => ({ value: g.id, label: g.name }))
 )
 
+const applyFilters = () => {
+  pagination.page = 1
+  loadSubscriptions()
+}
+
 const loadSubscriptions = async () => {
   if (abortController) {
     abortController.abort()
@@ -614,12 +709,18 @@ const loadSubscriptions = async () => {
 
   loading.value = true
   try {
-    const response = await adminAPI.subscriptions.list(pagination.page, pagination.page_size, {
-      status: (filters.status as any) || undefined,
-      group_id: filters.group_id ? parseInt(filters.group_id) : undefined
-    }, {
-      signal
-    })
+    const response = await adminAPI.subscriptions.list(
+      pagination.page,
+      pagination.page_size,
+      {
+        status: (filters.status as any) || undefined,
+        group_id: filters.group_id ? parseInt(filters.group_id) : undefined,
+        user_id: filters.user_id || undefined
+      },
+      {
+        signal
+      }
+    )
     if (signal.aborted || abortController !== requestController) return
     subscriptions.value = response.items
     pagination.total = response.total
@@ -646,6 +747,57 @@ const loadGroups = async () => {
   }
 }
 
+// Toolbar user filter search with debounce
+const debounceSearchFilterUsers = () => {
+  if (filterUserSearchTimeout) {
+    clearTimeout(filterUserSearchTimeout)
+  }
+  filterUserSearchTimeout = setTimeout(searchFilterUsers, 300)
+}
+
+const searchFilterUsers = async () => {
+  const keyword = filterUserKeyword.value.trim()
+
+  // Clear active user filter if user modified the search keyword
+  if (selectedFilterUser.value && keyword !== selectedFilterUser.value.email) {
+    selectedFilterUser.value = null
+    filters.user_id = null
+    applyFilters()
+  }
+
+  if (!keyword) {
+    filterUserResults.value = []
+    return
+  }
+
+  filterUserLoading.value = true
+  try {
+    filterUserResults.value = await adminAPI.usage.searchUsers(keyword)
+  } catch (error) {
+    console.error('Failed to search users:', error)
+    filterUserResults.value = []
+  } finally {
+    filterUserLoading.value = false
+  }
+}
+
+const selectFilterUser = (user: SimpleUser) => {
+  selectedFilterUser.value = user
+  filterUserKeyword.value = user.email
+  showFilterUserDropdown.value = false
+  filters.user_id = user.id
+  applyFilters()
+}
+
+const clearFilterUser = () => {
+  selectedFilterUser.value = null
+  filterUserKeyword.value = ''
+  filterUserResults.value = []
+  showFilterUserDropdown.value = false
+  filters.user_id = null
+  applyFilters()
+}
+
 // User search with debounce
 const debounceSearchUsers = () => {
   if (userSearchTimeout) {
@@ -856,9 +1008,8 @@ const formatResetTime = (windowStart: string, period: 'daily' | 'weekly' | 'mont
 // Handle click outside to close user dropdown
 const handleClickOutside = (event: MouseEvent) => {
   const target = event.target as HTMLElement
-  if (!target.closest('.relative')) {
-    showUserDropdown.value = false
-  }
+  if (!target.closest('[data-assign-user-search]')) showUserDropdown.value = false
+  if (!target.closest('[data-filter-user-search]')) showFilterUserDropdown.value = false
 }
 
 onMounted(() => {
@@ -869,6 +1020,9 @@ onMounted(() => {
 
 onUnmounted(() => {
   document.removeEventListener('click', handleClickOutside)
+  if (filterUserSearchTimeout) {
+    clearTimeout(filterUserSearchTimeout)
+  }
   if (userSearchTimeout) {
     clearTimeout(userSearchTimeout)
   }
diff --git a/frontend/src/views/admin/UsersView.vue b/frontend/src/views/admin/UsersView.vue
index 6e896ab9..ce685a15 100644
--- a/frontend/src/views/admin/UsersView.vue
+++ b/frontend/src/views/admin/UsersView.vue
@@ -3,11 +3,11 @@
     <TablePageLayout>
       <!-- Single Row: Search, Filters, and Actions -->
       <template #filters>
-        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <div class="flex w-full flex-wrap-reverse items-center justify-between gap-4">
           <!-- Left: Search + Active Filters -->
-          <div class="flex flex-1 flex-wrap items-center gap-3">
+          <div class="flex min-w-[280px] flex-1 flex-wrap content-start items-center gap-3">
             <!-- Search Box -->
-            <div class="relative w-64">
+            <div class="relative w-full sm:w-64">
               <svg
                 class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400"
                 fill="none"
@@ -31,7 +31,7 @@
             </div>
 
             <!-- Role Filter (visible when enabled) -->
-            <div v-if="visibleFilters.has('role')" class="w-32">
+            <div v-if="visibleFilters.has('role')" class="w-full sm:w-32">
               <Select
                 v-model="filters.role"
                 :options="[
@@ -44,7 +44,7 @@
             </div>
 
             <!-- Status Filter (visible when enabled) -->
-            <div v-if="visibleFilters.has('status')" class="w-32">
+            <div v-if="visibleFilters.has('status')" class="w-full sm:w-32">
               <Select
                 v-model="filters.status"
                 :options="[
@@ -58,7 +58,10 @@
 
             <!-- Dynamic Attribute Filters -->
             <template v-for="(value, attrId) in activeAttributeFilters" :key="attrId">
-              <div v-if="visibleFilters.has(`attr_${attrId}`)" class="relative">
+              <div
+                v-if="visibleFilters.has(`attr_${attrId}`)"
+                class="relative w-full sm:w-36"
+              >
                 <!-- Text/Email/URL/Textarea/Date type: styled input -->
                 <input
                   v-if="['text', 'textarea', 'email', 'url', 'date'].includes(getAttributeDefinition(Number(attrId))?.type || 'text')"
@@ -66,7 +69,7 @@
                   @input="(e) => updateAttributeFilter(Number(attrId), (e.target as HTMLInputElement).value)"
                   @keyup.enter="applyFilter"
                   :placeholder="getAttributeDefinitionName(Number(attrId))"
-                  class="input w-36"
+                  class="input w-full"
                 />
                 <!-- Number type: number input -->
                 <input
@@ -76,11 +79,11 @@
                   @input="(e) => updateAttributeFilter(Number(attrId), (e.target as HTMLInputElement).value)"
                   @keyup.enter="applyFilter"
                   :placeholder="getAttributeDefinitionName(Number(attrId))"
-                  class="input w-32"
+                  class="input w-full"
                 />
                 <!-- Select/Multi-select type -->
                 <template v-else-if="['select', 'multi_select'].includes(getAttributeDefinition(Number(attrId))?.type || '')">
-                  <div class="w-36">
+                  <div class="w-full">
                     <Select
                       :model-value="value"
                       :options="[
@@ -98,14 +101,14 @@
                   @input="(e) => updateAttributeFilter(Number(attrId), (e.target as HTMLInputElement).value)"
                   @keyup.enter="applyFilter"
                   :placeholder="getAttributeDefinitionName(Number(attrId))"
-                  class="input w-36"
+                  class="input w-full"
                 />
               </div>
             </template>
           </div>
 
           <!-- Right: Actions and Settings -->
-          <div class="flex items-center gap-3">
+          <div class="ml-auto flex max-w-full flex-wrap items-center justify-end gap-3">
             <!-- Refresh Button -->
             <button
               @click="loadUsers"
@@ -395,8 +398,7 @@
               <!-- Edit Button -->
               <button
                 @click="handleEdit(row)"
-                class="flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
-                :title="t('common.edit')"
+                class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
               >
                 <svg
                   class="h-4 w-4"
@@ -411,17 +413,60 @@
                     d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
                   />
                 </svg>
+                <span class="text-xs">{{ t('common.edit') }}</span>
+              </button>
+
+              <!-- Toggle Status Button (not for admin) -->
+              <button
+                v-if="row.role !== 'admin'"
+                @click="handleToggleStatus(row)"
+                :class="[
+                  'flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors',
+                  row.status === 'active'
+                    ? 'hover:bg-orange-50 hover:text-orange-600 dark:hover:bg-orange-900/20 dark:hover:text-orange-400'
+                    : 'hover:bg-green-50 hover:text-green-600 dark:hover:bg-green-900/20 dark:hover:text-green-400'
+                ]"
+              >
+                <svg
+                  v-if="row.status === 'active'"
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+                  />
+                </svg>
+                <svg
+                  v-else
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+                <span class="text-xs">{{ row.status === 'active' ? t('admin.users.disable') : t('admin.users.enable') }}</span>
               </button>
 
               <!-- More Actions Menu Trigger -->
               <button
                 :ref="(el) => setActionButtonRef(row.id, el)"
                 @click="openActionMenu(row)"
-                class="action-menu-trigger flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-dark-700 dark:hover:text-white"
+                class="action-menu-trigger flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-dark-700 dark:hover:text-white"
                 :class="{ 'bg-gray-100 text-gray-900 dark:bg-dark-700 dark:text-white': activeMenuId === row.id }"
               >
                 <svg
-                  class="h-5 w-5"
+                  class="h-4 w-4"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -433,6 +478,7 @@
                     d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
                   />
                 </svg>
+                <span class="text-xs">{{ t('common.more') }}</span>
               </button>
             </div>
           </template>
@@ -519,33 +565,6 @@
 
               <div class="my-1 border-t border-gray-100 dark:border-dark-700"></div>
 
-              <!-- Toggle Status (not for admin) -->
-              <button
-                v-if="user.role !== 'admin'"
-                @click="handleToggleStatus(user); closeActionMenu()"
-                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700"
-              >
-                <svg
-                  v-if="user.status === 'active'"
-                  class="h-4 w-4 text-orange-500"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
-                </svg>
-                <svg
-                  v-else
-                  class="h-4 w-4 text-green-500"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-                {{ user.status === 'active' ? t('admin.users.disable') : t('admin.users.enable') }}
-              </button>
-
               <!-- Delete (not for admin) -->
               <button
                 v-if="user.role !== 'admin'"