feat(frontend): 账号表格默认排序/持久化 + 自动刷新 + 更多菜单外部关闭

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

@@ -1,50 +1,78 @@
 <template>
   <Teleport to="body">
-    <div v-if="show && position" class="action-menu-content fixed z-[9999] w-52 overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:bg-dark-800" :style="{ top: position.top + 'px', left: position.left + 'px' }">
-      <div class="py-1">
-        <template v-if="account">
-          <button @click="$emit('test', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-dark-700">
-            <Icon name="play" size="sm" class="text-green-500" :stroke-width="2" />
-            {{ t('admin.accounts.testConnection') }}
-          </button>
-          <button @click="$emit('stats', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-dark-700">
-            <Icon name="chart" size="sm" class="text-indigo-500" />
-            {{ t('admin.accounts.viewStats') }}
-          </button>
-          <template v-if="account.type === 'oauth' || account.type === 'setup-token'">
-            <button @click="$emit('reauth', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm text-blue-600 hover:bg-gray-100 dark:hover:bg-dark-700">
-              <Icon name="link" size="sm" />
-              {{ t('admin.accounts.reAuthorize') }}
+    <div v-if="show && position">
+      <!-- Backdrop: click anywhere outside to close -->
+      <div class="fixed inset-0 z-[9998]" @click="emit('close')"></div>
+      <div
+        class="action-menu-content fixed z-[9999] w-52 overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:bg-dark-800"
+        :style="{ top: position.top + 'px', left: position.left + 'px' }"
+        @click.stop
+      >
+        <div class="py-1">
+          <template v-if="account">
+            <button @click="$emit('test', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-dark-700">
+              <Icon name="play" size="sm" class="text-green-500" :stroke-width="2" />
+              {{ t('admin.accounts.testConnection') }}
             </button>
-            <button @click="$emit('refresh-token', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm text-purple-600 hover:bg-gray-100 dark:hover:bg-dark-700">
-              <Icon name="refresh" size="sm" />
-              {{ t('admin.accounts.refreshToken') }}
+            <button @click="$emit('stats', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-dark-700">
+              <Icon name="chart" size="sm" class="text-indigo-500" />
+              {{ t('admin.accounts.viewStats') }}
+            </button>
+            <template v-if="account.type === 'oauth' || account.type === 'setup-token'">
+              <button @click="$emit('reauth', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm text-blue-600 hover:bg-gray-100 dark:hover:bg-dark-700">
+                <Icon name="link" size="sm" />
+                {{ t('admin.accounts.reAuthorize') }}
+              </button>
+              <button @click="$emit('refresh-token', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm text-purple-600 hover:bg-gray-100 dark:hover:bg-dark-700">
+                <Icon name="refresh" size="sm" />
+                {{ t('admin.accounts.refreshToken') }}
+              </button>
+            </template>
+            <div v-if="account.status === 'error' || isRateLimited || isOverloaded" class="my-1 border-t border-gray-100 dark:border-dark-700"></div>
+            <button v-if="account.status === 'error'" @click="$emit('reset-status', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm text-yellow-600 hover:bg-gray-100 dark:hover:bg-dark-700">
+              <Icon name="sync" size="sm" />
+              {{ t('admin.accounts.resetStatus') }}
+            </button>
+            <button v-if="isRateLimited || isOverloaded" @click="$emit('clear-rate-limit', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm text-amber-600 hover:bg-gray-100 dark:hover:bg-dark-700">
+              <Icon name="clock" size="sm" />
+              {{ t('admin.accounts.clearRateLimit') }}
             </button>
           </template>
-          <div v-if="account.status === 'error' || isRateLimited || isOverloaded" class="my-1 border-t border-gray-100 dark:border-dark-700"></div>
-          <button v-if="account.status === 'error'" @click="$emit('reset-status', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm text-yellow-600 hover:bg-gray-100 dark:hover:bg-dark-700">
-            <Icon name="sync" size="sm" />
-            {{ t('admin.accounts.resetStatus') }}
-          </button>
-          <button v-if="isRateLimited || isOverloaded" @click="$emit('clear-rate-limit', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm text-amber-600 hover:bg-gray-100 dark:hover:bg-dark-700">
-            <Icon name="clock" size="sm" />
-            {{ t('admin.accounts.clearRateLimit') }}
-          </button>
-        </template>
+        </div>
       </div>
     </div>
   </Teleport>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, watch, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { Icon } from '@/components/icons'
 import type { Account } from '@/types'
 
 const props = defineProps<{ show: boolean; account: Account | null; position: { top: number; left: number } | null }>()
-defineEmits(['close', 'test', 'stats', 'reauth', 'refresh-token', 'reset-status', 'clear-rate-limit'])
+const emit = defineEmits(['close', 'test', 'stats', 'reauth', 'refresh-token', 'reset-status', 'clear-rate-limit'])
 const { t } = useI18n()
 const isRateLimited = computed(() => props.account?.rate_limit_reset_at && new Date(props.account.rate_limit_reset_at) > new Date())
 const isOverloaded = computed(() => props.account?.overload_until && new Date(props.account.overload_until) > new Date())
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape') emit('close')
+}
+
+watch(
+  () => props.show,
+  (visible) => {
+    if (visible) {
+      window.addEventListener('keydown', handleKeydown)
+    } else {
+      window.removeEventListener('keydown', handleKeydown)
+    }
+  },
+  { immediate: true }
+)
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown)
+})
 </script>

frontend/src/components/common/DataTable.vue

@@ -279,18 +279,143 @@ interface Props {
   expandableActions?: boolean
   actionsCount?: number // 操作按钮总数，用于判断是否需要展开功能
   rowKey?: string | ((row: any) => string | number)
+  /**
+   * Default sort configuration (only applied when there is no persisted sort state)
+   */
+  defaultSortKey?: string
+  defaultSortOrder?: 'asc' | 'desc'
+  /**
+   * Persist sort state (key + order) to localStorage using this key.
+   * If provided, DataTable will load the stored sort state on mount.
+   */
+  sortStorageKey?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   loading: false,
   stickyFirstColumn: true,
   stickyActionsColumn: true,
-  expandableActions: true
+  expandableActions: true,
+  defaultSortOrder: 'asc'
 })
 
 const sortKey = ref<string>('')
 const sortOrder = ref<'asc' | 'desc'>('asc')
 const actionsExpanded = ref(false)
+
+type PersistedSortState = {
+  key: string
+  order: 'asc' | 'desc'
+}
+
+const collator = new Intl.Collator(undefined, {
+  numeric: true,
+  sensitivity: 'base'
+})
+
+const getSortableKeys = () => {
+  const keys = new Set<string>()
+  for (const col of props.columns) {
+    if (col.sortable) keys.add(col.key)
+  }
+  return keys
+}
+
+const normalizeSortKey = (candidate: string) => {
+  if (!candidate) return ''
+  const sortableKeys = getSortableKeys()
+  return sortableKeys.has(candidate) ? candidate : ''
+}
+
+const normalizeSortOrder = (candidate: any): 'asc' | 'desc' => {
+  return candidate === 'desc' ? 'desc' : 'asc'
+}
+
+const readPersistedSortState = (): PersistedSortState | null => {
+  if (!props.sortStorageKey) return null
+  try {
+    const raw = localStorage.getItem(props.sortStorageKey)
+    if (!raw) return null
+    const parsed = JSON.parse(raw) as Partial<PersistedSortState>
+    const key = normalizeSortKey(typeof parsed.key === 'string' ? parsed.key : '')
+    if (!key) return null
+    return { key, order: normalizeSortOrder(parsed.order) }
+  } catch (e) {
+    console.error('[DataTable] Failed to read persisted sort state:', e)
+    return null
+  }
+}
+
+const writePersistedSortState = (state: PersistedSortState) => {
+  if (!props.sortStorageKey) return
+  try {
+    localStorage.setItem(props.sortStorageKey, JSON.stringify(state))
+  } catch (e) {
+    console.error('[DataTable] Failed to persist sort state:', e)
+  }
+}
+
+const resolveInitialSortState = (): PersistedSortState | null => {
+  const persisted = readPersistedSortState()
+  if (persisted) return persisted
+
+  const key = normalizeSortKey(props.defaultSortKey || '')
+  if (!key) return null
+  return { key, order: normalizeSortOrder(props.defaultSortOrder) }
+}
+
+const applySortState = (state: PersistedSortState | null) => {
+  if (!state) return
+  sortKey.value = state.key
+  sortOrder.value = state.order
+}
+
+const isNullishOrEmpty = (value: any) => value === null || value === undefined || value === ''
+
+const toFiniteNumberOrNull = (value: any): number | null => {
+  if (typeof value === 'number') return Number.isFinite(value) ? value : null
+  if (typeof value === 'boolean') return value ? 1 : 0
+  if (typeof value === 'string') {
+    const trimmed = value.trim()
+    if (!trimmed) return null
+    const n = Number(trimmed)
+    return Number.isFinite(n) ? n : null
+  }
+  return null
+}
+
+const toSortableString = (value: any): string => {
+  if (value === null || value === undefined) return ''
+  if (typeof value === 'string') return value
+  if (typeof value === 'number' || typeof value === 'boolean') return String(value)
+  if (value instanceof Date) return value.toISOString()
+  try {
+    return JSON.stringify(value)
+  } catch {
+    return String(value)
+  }
+}
+
+const compareSortValues = (a: any, b: any): number => {
+  const aEmpty = isNullishOrEmpty(a)
+  const bEmpty = isNullishOrEmpty(b)
+  if (aEmpty && bEmpty) return 0
+  if (aEmpty) return 1
+  if (bEmpty) return -1
+
+  const aNum = toFiniteNumberOrNull(a)
+  const bNum = toFiniteNumberOrNull(b)
+  if (aNum !== null && bNum !== null) {
+    if (aNum === bNum) return 0
+    return aNum < bNum ? -1 : 1
+  }
+
+  const aStr = toSortableString(a)
+  const bStr = toSortableString(b)
+  const res = collator.compare(aStr, bStr)
+  if (res === 0) return 0
+  return res < 0 ? -1 : 1
+}
 const resolveRowKey = (row: any, index: number) => {
   if (typeof props.rowKey === 'function') {
     const key = props.rowKey(row)
@@ -334,15 +459,18 @@ const handleSort = (key: string) => {
 const sortedData = computed(() => {
   if (!sortKey.value || !props.data) return props.data
 
-  return [...props.data].sort((a, b) => {
-    const aVal = a[sortKey.value]
-    const bVal = b[sortKey.value]
+  const key = sortKey.value
+  const order = sortOrder.value
 
-    if (aVal === bVal) return 0
-
-    const comparison = aVal > bVal ? 1 : -1
-    return sortOrder.value === 'asc' ? comparison : -comparison
-  })
+  // Stable sort (tie-break with original index) to avoid jitter when values are equal.
+  return props.data
+    .map((row, index) => ({ row, index }))
+    .sort((a, b) => {
+      const cmp = compareSortValues(a.row?.[key], b.row?.[key])
+      if (cmp !== 0) return order === 'asc' ? cmp : -cmp
+      return a.index - b.index
+    })
+    .map(item => item.row)
 })
 
 const hasActionsColumn = computed(() => {
@@ -396,6 +524,51 @@ const getAdaptivePaddingClass = () => {
     return 'px-6' // 24px (原始值)
   }
 }
+
+// Init + keep persisted sort state consistent with current columns
+const didInitSort = ref(false)
+
+onMounted(() => {
+  const initial = resolveInitialSortState()
+  applySortState(initial)
+  didInitSort.value = true
+})
+
+watch(
+  () => props.columns,
+  () => {
+    // If current sort key is no longer sortable/visible, fall back to default/persisted.
+    const normalized = normalizeSortKey(sortKey.value)
+    if (!sortKey.value) {
+      const initial = resolveInitialSortState()
+      applySortState(initial)
+      return
+    }
+
+    if (!normalized) {
+      const fallback = resolveInitialSortState()
+      if (fallback) {
+        applySortState(fallback)
+      } else {
+        sortKey.value = ''
+        sortOrder.value = 'asc'
+      }
+    }
+  },
+  { deep: true }
+)
+
+watch(
+  [sortKey, sortOrder],
+  ([nextKey, nextOrder]) => {
+    if (!didInitSort.value) return
+    if (!props.sortStorageKey) return
+    const key = normalizeSortKey(nextKey)
+    if (!key) return
+    writePersistedSortState({ key, order: normalizeSortOrder(nextOrder) })
+  },
+  { flush: 'post' }
+)
 </script>
 
 <style scoped>

frontend/src/components/common/README.md

@@ -13,6 +13,9 @@ A generic data table component with sorting, loading states, and custom cell ren
 - `columns: Column[]` - Array of column definitions with key, label, sortable, and formatter
 - `data: any[]` - Array of data objects to display
 - `loading?: boolean` - Show loading skeleton
+- `defaultSortKey?: string` - Default sort key (only used if no persisted sort state)
+- `defaultSortOrder?: 'asc' | 'desc'` - Default sort order (default: `asc`)
+- `sortStorageKey?: string` - Persist sort state (key + order) to localStorage
 - `rowKey?: string | (row: any) => string | number` - Row key field or resolver (defaults to `row.id`, falls back to index)
 
 **Slots:**