From f1d5b73255e791fef3a781278d4ed43bf4c371d8 Mon Sep 17 00:00:00 2001
From: Zyy <zyycn@users.noreply.github.com>
Date: Tue, 27 Oct 2026 16:18:41 +0800
Subject: [PATCH] fix(ui): refine admin filters, quota colors and batch actions

Simplify group filters and keep date and platform controls aligned. Apply quota warning thresholds independently to each window and move account batch actions into a compact menu.

Co-authored-by: Codex <noreply@openai.com>
---
 .../account/account-usage-window/presenter.ts |   5 +-
 frontend/src/i18n/locales/en/groups.json      |   1 -
 frontend/src/i18n/locales/zh-Hans/groups.json |   1 -
 frontend/src/i18n/locales/zh-Hant/groups.json |   1 -
 .../accounts/components/AccountFilters.vue    | 109 +++++++++---------
 .../groups/components/AccountGroupFilters.vue |  12 +-
 .../groups/composables/useAccountGroups.ts    |   8 --
 frontend/src/views/groups/constants.ts        |  15 ---
 frontend/src/views/groups/index.vue           |   2 -
 frontend/src/views/usage/index.vue            |   6 +-
 10 files changed, 63 insertions(+), 97 deletions(-)

diff --git a/frontend/src/components/account/account-usage-window/presenter.ts b/frontend/src/components/account/account-usage-window/presenter.ts
index 42a5803b0..83c75aeaa 100644
--- a/frontend/src/components/account/account-usage-window/presenter.ts
+++ b/frontend/src/components/account/account-usage-window/presenter.ts
@@ -368,9 +368,10 @@ export function quotaWindowPresentation(window: AccountQuotaWindow, minimumWidth
 function quotaWindowTone(usedPercent: number | null): QuotaWindowTone {
   if (usedPercent === null)
     return 'unknown'
-  if (usedPercent >= 95)
+  // 每个窗口按自身的已用比例分档，剩余不足 30% / 10% 时分别预警
+  if (usedPercent > 90)
     return 'danger'
-  if (usedPercent >= 80)
+  if (usedPercent > 70)
     return 'warning'
   return 'success'
 }
diff --git a/frontend/src/i18n/locales/en/groups.json b/frontend/src/i18n/locales/en/groups.json
index 9abfcefc8..4d633540e 100644
--- a/frontend/src/i18n/locales/en/groups.json
+++ b/frontend/src/i18n/locales/en/groups.json
@@ -23,7 +23,6 @@
     "filters": {
       "searchAccountGroup": "Search account group",
       "searchGroupName": "Search group name",
-      "filterByGroupStatus": "Filter by group status",
       "deleteSelected": "Delete ({count})",
       "createGroup": "Create group"
     },
diff --git a/frontend/src/i18n/locales/zh-Hans/groups.json b/frontend/src/i18n/locales/zh-Hans/groups.json
index 67d79249e..e1cdc6734 100644
--- a/frontend/src/i18n/locales/zh-Hans/groups.json
+++ b/frontend/src/i18n/locales/zh-Hans/groups.json
@@ -23,7 +23,6 @@
     "filters": {
       "searchAccountGroup": "搜索账号分组",
       "searchGroupName": "搜索分组名称",
-      "filterByGroupStatus": "按分组状态筛选",
       "deleteSelected": "删除 ({count})",
       "createGroup": "创建分组"
     },
diff --git a/frontend/src/i18n/locales/zh-Hant/groups.json b/frontend/src/i18n/locales/zh-Hant/groups.json
index f48545820..3d7672793 100644
--- a/frontend/src/i18n/locales/zh-Hant/groups.json
+++ b/frontend/src/i18n/locales/zh-Hant/groups.json
@@ -23,7 +23,6 @@
     "filters": {
       "searchAccountGroup": "搜索賬號分組",
       "searchGroupName": "搜索分組名稱",
-      "filterByGroupStatus": "按分組狀態篩選",
       "deleteSelected": "刪除 ({count})",
       "createGroup": "創建分組"
     },
diff --git a/frontend/src/views/accounts/components/AccountFilters.vue b/frontend/src/views/accounts/components/AccountFilters.vue
index 36ea29133..c0ee75a89 100644
--- a/frontend/src/views/accounts/components/AccountFilters.vue
+++ b/frontend/src/views/accounts/components/AccountFilters.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { AccountGroupRef } from '@/api'
 
-import { ZButton, ZInput, ZSelect } from '@codex-proxy/ui'
-import { Download, ListTodo, Pencil, Search, Trash2, Upload } from '@lucide/vue'
+import { ZButton, ZIconButton, ZInput, ZMenuItem, ZPopover, ZSelect } from '@codex-proxy/ui'
+import { Download, ListTodo, MoreHorizontal, Pencil, Search, Trash2, Upload } from '@lucide/vue'
 
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -94,61 +94,62 @@ const groupOptions = computed(() => [
     </div>
 
     <div
-      class="grid w-full grid-cols-2 gap-2 xl:flex xl:w-auto xl:flex-wrap xl:shrink-0 xl:self-end xl:items-center xl:justify-end xl:ml-auto"
+      class="flex w-full min-w-0 flex-wrap items-center justify-end gap-2 xl:ml-auto xl:w-auto xl:shrink-0 xl:self-end"
     >
-      <ZButton
-        v-if="selectedCount > 0"
-        type="default" variant="solid"
-        class="w-full whitespace-nowrap xl:w-auto"
-        @click="emit('editSelected')"
-      >
-        <Pencil class="size-4 text-cp-link" />
-        {{ t('accounts.filters.editSelected', { count: selectedCount }) }}
-      </ZButton>
-      <ZButton
-        v-if="selectedCount > 0"
-        type="danger" variant="plain"
-        class="w-full whitespace-nowrap xl:w-auto"
-        :disabled="batchDeleting"
-        @click="emit('deleteSelected')"
-      >
-        <Trash2 class="size-4" />
-        {{ t('accounts.filters.deleteSelected', { count: selectedCount }) }}
-      </ZButton>
-      <ZButton
-        v-if="selectedCount > 0"
-        type="default" variant="solid"
-        class="w-full whitespace-nowrap xl:w-auto"
-        :loading="exportingAccounts"
-        :disabled="Boolean(exportDisabledReason)"
-        :title="exportDisabledReason || undefined"
-        :aria-description="exportDisabledReason || undefined"
-        @click="emit('exportSelected')"
-      >
-        <template #icon>
-          <Download class="size-4" />
+      <ZPopover v-if="selectedCount > 0" placement="bottom-end">
+        <template #reference="{ open }">
+          <ZIconButton
+            variant="plain"
+            :aria-label="t('accounts.actions.moreActions')"
+            :pressed="open"
+            :aria-expanded="open"
+          >
+            <MoreHorizontal class="size-4.5" aria-hidden="true" />
+          </ZIconButton>
         </template>
-        {{ t('accounts.filters.exportSelected', { count: selectedCount }) }}
+
+        <template #default="{ close }">
+          <div class="w-32 p-1.5">
+            <ZMenuItem @click="(close(), emit('editSelected'))">
+              <template #icon>
+                <Pencil class="size-3.5 text-cp-text-quaternary" />
+              </template>
+              {{ t('accounts.filters.editSelected', { count: selectedCount }) }}
+            </ZMenuItem>
+            <ZMenuItem
+              :loading="exportingAccounts"
+              :disabled="Boolean(exportDisabledReason)"
+              :title="exportDisabledReason || undefined"
+              :aria-description="exportDisabledReason || undefined"
+              @click="(close(), emit('exportSelected'))"
+            >
+              <template #icon>
+                <Download class="size-3.5 text-cp-text-quaternary" />
+              </template>
+              {{ t('accounts.filters.exportSelected', { count: selectedCount }) }}
+            </ZMenuItem>
+            <ZMenuItem
+              type="danger"
+              :loading="batchDeleting"
+              @click="(close(), emit('deleteSelected'))"
+            >
+              <template #icon>
+                <Trash2 class="size-3.5" />
+              </template>
+              {{ t('accounts.filters.deleteSelected', { count: selectedCount }) }}
+            </ZMenuItem>
+          </div>
+        </template>
+      </ZPopover>
+      <ZButton v-if="hasImportTasks" class="whitespace-nowrap" @click="emit('importTasks')">
+        <ListTodo class="size-4" />
+        {{ t('accounts.filters.importTasks') }} <span v-if="activeImportCount" class="font-mono text-cp-link">{{ activeImportCount }}</span>
+      </ZButton>
+      <slot name="actions" />
+      <ZButton type="primary" class="whitespace-nowrap" @click="emit('create')">
+        <Upload class="size-4" />
+        {{ t('accounts.filters.importAccount') }}
       </ZButton>
-      <div
-        class="col-span-2 flex min-w-0 flex-wrap items-center justify-end gap-2"
-        :class="selectedCount > 0 ? 'w-full xl:w-auto' : 'justify-self-end'"
-      >
-        <ZButton v-if="hasImportTasks" class="whitespace-nowrap" @click="emit('importTasks')">
-          <ListTodo class="size-4" />
-          {{ t('accounts.filters.importTasks') }} <span v-if="activeImportCount" class="font-mono text-cp-link">{{ activeImportCount }}</span>
-        </ZButton>
-        <slot name="actions" />
-        <ZButton
-          type="primary"
-          class="whitespace-nowrap"
-          :class="selectedCount > 0 ? 'flex-1 xl:flex-none' : undefined"
-          @click="emit('create')"
-        >
-          <Upload class="size-4" />
-          {{ t('accounts.filters.importAccount') }}
-        </ZButton>
-      </div>
     </div>
   </div>
 </template>
diff --git a/frontend/src/views/groups/components/AccountGroupFilters.vue b/frontend/src/views/groups/components/AccountGroupFilters.vue
index 57dd7a05f..a739a6d1e 100644
--- a/frontend/src/views/groups/components/AccountGroupFilters.vue
+++ b/frontend/src/views/groups/components/AccountGroupFilters.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { ZButton, ZInput, ZSelect } from '@codex-proxy/ui'
+import { ZButton, ZInput } from '@codex-proxy/ui'
 
 import { Plus, Search, Trash2 } from '@lucide/vue'
 
 import { useI18n } from 'vue-i18n'
-import { accountGroupStatusOptions } from '../constants'
 
 defineProps<{
   batchDeleting: boolean
@@ -19,14 +18,13 @@ const emit = defineEmits<{
 const { t } = useI18n({ useScope: 'global' })
 
 const search = defineModel<string>('search', { required: true })
-const status = defineModel<string>('status', { required: true })
 </script>
 
 <template>
   <div class="flex w-full flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
     <ZInput
       v-model="search"
-      class="min-w-0 sm:w-80 sm:flex-1 sm:basis-64"
+      class="min-w-0 sm:w-80 sm:flex-none"
       :aria-label="t('groups.filters.searchAccountGroup')"
       :placeholder="t('groups.filters.searchGroupName')"
     >
@@ -34,12 +32,6 @@ const status = defineModel<string>('status', { required: true })
         <Search class="size-4.5 text-cp-text-tertiary" />
       </template>
     </ZInput>
-    <ZSelect
-      v-model="status"
-      :options="accountGroupStatusOptions"
-      :aria-label="t('groups.filters.filterByGroupStatus')"
-      class="w-40"
-    />
     <div class="flex max-w-full shrink-0 flex-wrap items-center justify-end gap-2 sm:ml-auto">
       <ZButton
         v-if="selectedCount > 0"
diff --git a/frontend/src/views/groups/composables/useAccountGroups.ts b/frontend/src/views/groups/composables/useAccountGroups.ts
index 3a3115abf..aefcb5d09 100644
--- a/frontend/src/views/groups/composables/useAccountGroups.ts
+++ b/frontend/src/views/groups/composables/useAccountGroups.ts
@@ -30,7 +30,6 @@ export interface AccountGroupFormValue {
 
 export function useAccountGroups() {
   const searchQuery = shallowRef('')
-  const statusQuery = shallowRef('')
   const showFormModal = shallowRef(false)
   const showDeleteModal = shallowRef(false)
   const showBatchDeleteModal = shallowRef(false)
@@ -56,9 +55,6 @@ export function useAccountGroups() {
         page,
         pageSize,
         search: searchQuery.value.trim() || undefined,
-        enabled: statusQuery.value
-          ? statusQuery.value === 'enabled'
-          : undefined,
       }, options),
   })
 
@@ -308,9 +304,6 @@ export function useAccountGroups() {
     }, 250)
     onCleanup(() => clearTimeout(timer))
   })
-  watch(statusQuery, () => {
-    void query.reloadFromStart()
-  })
   onMounted(() => {
     void Promise.all([
       query.execute(),
@@ -323,7 +316,6 @@ export function useAccountGroups() {
     loading: query.loading,
     pagination,
     searchQuery,
-    statusQuery,
     showFormModal,
     showDeleteModal,
     showBatchDeleteModal,
diff --git a/frontend/src/views/groups/constants.ts b/frontend/src/views/groups/constants.ts
index 2a9201fab..e2db9f1fd 100644
--- a/frontend/src/views/groups/constants.ts
+++ b/frontend/src/views/groups/constants.ts
@@ -62,18 +62,3 @@ export const accountGroupColumns = computed(() => (defineTableColumns<AccountGro
     size: 'lg',
   },
 ])))
-
-export const accountGroupStatusOptions = computed(() => ([
-  {
-    label: t('common.status.all'),
-    value: '',
-  },
-  {
-    label: t('common.status.enabled'),
-    value: 'enabled',
-  },
-  {
-    label: t('common.status.disabled'),
-    value: 'disabled',
-  },
-]))
diff --git a/frontend/src/views/groups/index.vue b/frontend/src/views/groups/index.vue
index ca2691695..ce1763b51 100644
--- a/frontend/src/views/groups/index.vue
+++ b/frontend/src/views/groups/index.vue
@@ -18,7 +18,6 @@ const {
   loading,
   pagination,
   searchQuery,
-  statusQuery,
   showFormModal,
   showDeleteModal,
   showBatchDeleteModal,
@@ -64,7 +63,6 @@ const { allSelected, indeterminate, selectedRowKeys, toggleSelection, toggleAll
       <template #header>
         <AccountGroupFilters
           v-model:search="searchQuery"
-          v-model:status="statusQuery"
           :batch-deleting="batchDeleting"
           :selected-count="selectedIds.size"
           @create="openCreate"
diff --git a/frontend/src/views/usage/index.vue b/frontend/src/views/usage/index.vue
index 6eeba473c..7e0af99ab 100644
--- a/frontend/src/views/usage/index.vue
+++ b/frontend/src/views/usage/index.vue
@@ -78,9 +78,9 @@ watch(timeRange, () => {
 
 <template>
   <div class="@container w-full">
-    <ZPageHeader :title="t('navigation.usage')" :description="t('usage.page.description')">
+    <ZPageHeader class="justify-end" :title="t('navigation.usage')" :description="t('usage.page.description')">
       <template #actions>
-        <div class="flex w-[100cqw] max-w-[100cqw] flex-wrap items-center justify-end gap-2 @min-[28rem]:w-auto">
+        <div class="flex w-[100cqw] max-w-[100cqw] flex-wrap items-center justify-end gap-2 @min-[21rem]:flex-nowrap @min-[28rem]:w-auto">
           <ZDatePicker
             v-model="timeRange"
             type="daterange"
@@ -89,7 +89,7 @@ watch(timeRange, () => {
             :disabled-date="disabledDate"
             single-panel
             :aria-label="t('usage.page.dateRangeLabel')"
-            class="min-w-0 w-full @min-[28rem]:w-60"
+            class="min-w-0 flex-1 basis-full @min-[21rem]:basis-auto @min-[28rem]:w-60 @min-[28rem]:flex-none @max-[28rem]:[&>div]:gap-1.5 @max-[28rem]:[&>div]:px-2"
           />
           <ProviderFilter
             v-model="providerQuery"