From 68f003976e2801ce756e015535e96e313e862a15 Mon Sep 17 00:00:00 2001
From: shaw <shaw-wei@foxmail.com>
Date: Sat, 29 Nov 2025 11:20:07 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=9B=BA=E5=AE=9A=E5=88=97=E5=AE=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/ActionDropdown.vue  |  174 ++
 web/admin-spa/src/views/AccountsView.vue      | 2269 +++++++++--------
 web/admin-spa/src/views/ApiKeysView.vue       |  274 +-
 3 files changed, 1672 insertions(+), 1045 deletions(-)
 create mode 100644 web/admin-spa/src/components/common/ActionDropdown.vue

diff --git a/web/admin-spa/src/components/common/ActionDropdown.vue b/web/admin-spa/src/components/common/ActionDropdown.vue
new file mode 100644
index 00000000..64ba3423
--- /dev/null
+++ b/web/admin-spa/src/components/common/ActionDropdown.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="relative">
+    <!-- 触发器按钮 -->
+    <button
+      ref="triggerRef"
+      class="flex h-8 w-8 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-600 transition-all duration-200 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+      :class="[
+        isOpen &&
+          'border-blue-400 bg-blue-50 text-blue-600 dark:border-blue-500 dark:bg-blue-900/30 dark:text-blue-400'
+      ]"
+      title="更多操作"
+      @click.stop="toggleDropdown"
+    >
+      <i class="fas fa-ellipsis-v text-sm"></i>
+    </button>
+
+    <!-- 下拉菜单 - 使用 Teleport 避免被父容器裁剪 -->
+    <Teleport to="body">
+      <transition
+        enter-active-class="transition duration-200 ease-out"
+        enter-from-class="transform scale-95 opacity-0"
+        enter-to-class="transform scale-100 opacity-100"
+        leave-active-class="transition duration-150 ease-in"
+        leave-from-class="transform scale-100 opacity-100"
+        leave-to-class="transform scale-95 opacity-0"
+      >
+        <div
+          v-if="isOpen"
+          ref="dropdownRef"
+          class="fixed z-[9999] min-w-[140px] overflow-hidden rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-600 dark:bg-gray-800"
+          :style="dropdownStyle"
+        >
+          <button
+            v-for="action in actions"
+            :key="action.key"
+            class="flex w-full items-center gap-2 whitespace-nowrap px-3 py-2 text-left text-sm transition-colors duration-150"
+            :class="getActionClass(action)"
+            @click.stop="handleAction(action)"
+          >
+            <i :class="['fas', action.icon, 'w-4 text-center text-xs']"></i>
+            <span>{{ action.label }}</span>
+          </button>
+        </div>
+      </transition>
+    </Teleport>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+
+defineProps({
+  actions: {
+    type: Array,
+    required: true
+    // 格式: [{ key: 'edit', label: '编辑', icon: 'fa-edit', color: 'blue', handler: () => {} }]
+  }
+})
+
+const emit = defineEmits(['action'])
+
+const isOpen = ref(false)
+const triggerRef = ref(null)
+const dropdownRef = ref(null)
+const dropdownStyle = ref({})
+
+const getActionClass = (action) => {
+  const colorMap = {
+    purple: 'text-purple-600 hover:bg-purple-50 dark:text-purple-400 dark:hover:bg-purple-900/20',
+    indigo: 'text-indigo-600 hover:bg-indigo-50 dark:text-indigo-400 dark:hover:bg-indigo-900/20',
+    blue: 'text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/20',
+    green: 'text-green-600 hover:bg-green-50 dark:text-green-400 dark:hover:bg-green-900/20',
+    orange: 'text-orange-600 hover:bg-orange-50 dark:text-orange-400 dark:hover:bg-orange-900/20',
+    red: 'text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20',
+    gray: 'text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-700'
+  }
+  return colorMap[action.color] || colorMap.gray
+}
+
+const toggleDropdown = async () => {
+  isOpen.value = !isOpen.value
+  if (isOpen.value) {
+    await nextTick()
+    updateDropdownPosition()
+  }
+}
+
+const closeDropdown = () => {
+  isOpen.value = false
+}
+
+const handleAction = (action) => {
+  closeDropdown()
+  if (action.handler) {
+    action.handler()
+  }
+  emit('action', action.key)
+}
+
+const updateDropdownPosition = () => {
+  if (!triggerRef.value || !isOpen.value) return
+
+  const trigger = triggerRef.value.getBoundingClientRect()
+  const dropdownHeight = 200 // 预估高度
+  const dropdownWidth = 160 // 预估宽度
+  const spaceBelow = window.innerHeight - trigger.bottom
+  const spaceAbove = trigger.top
+  const spaceRight = window.innerWidth - trigger.right
+  const spaceLeft = trigger.left
+
+  let top, left
+
+  // 计算垂直位置
+  if (spaceBelow >= dropdownHeight || spaceBelow >= spaceAbove) {
+    top = trigger.bottom + 4
+  } else {
+    top = trigger.top - dropdownHeight - 4
+  }
+
+  // 计算水平位置 - 优先显示在左侧（因为按钮在右侧固定列）
+  if (spaceLeft >= dropdownWidth) {
+    left = trigger.left - dropdownWidth + trigger.width
+  } else if (spaceRight >= dropdownWidth) {
+    left = trigger.left
+  } else {
+    left = window.innerWidth - dropdownWidth - 10
+  }
+
+  // 确保不超出边界
+  if (left < 10) left = 10
+  if (top < 10) top = 10
+
+  dropdownStyle.value = {
+    top: `${top}px`,
+    left: `${left}px`
+  }
+}
+
+const handleScroll = () => {
+  if (isOpen.value) {
+    updateDropdownPosition()
+  }
+}
+
+const handleResize = () => {
+  if (isOpen.value) {
+    closeDropdown()
+  }
+}
+
+const handleClickOutside = (event) => {
+  if (!triggerRef.value || !isOpen.value) return
+
+  if (!triggerRef.value.contains(event.target)) {
+    if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
+      closeDropdown()
+    } else if (!dropdownRef.value) {
+      closeDropdown()
+    }
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll, true)
+  window.addEventListener('resize', handleResize)
+  document.addEventListener('click', handleClickOutside)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', handleScroll, true)
+  window.removeEventListener('resize', handleResize)
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
diff --git a/web/admin-spa/src/views/AccountsView.vue b/web/admin-spa/src/views/AccountsView.vue
index 4808c560..85a89725 100644
--- a/web/admin-spa/src/views/AccountsView.vue
+++ b/web/admin-spa/src/views/AccountsView.vue
@@ -161,1062 +161,1102 @@
       </div>
 
       <!-- 桌面端表格视图 -->
-      <div v-else class="table-container hidden md:block">
-        <table class="w-full table-fixed">
-          <thead class="bg-gray-50/80 backdrop-blur-sm dark:bg-gray-700/80">
-            <tr>
-              <th v-if="shouldShowCheckboxes" class="w-[50px] px-3 py-4 text-left">
-                <div class="flex items-center">
-                  <input
-                    v-model="selectAllChecked"
-                    class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-                    :indeterminate="isIndeterminate"
-                    type="checkbox"
-                    @change="handleSelectAll"
-                  />
-                </div>
-              </th>
-              <th
-                class="w-[22%] min-w-[180px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
-                @click="sortAccounts('name')"
-              >
-                名称
-                <i
-                  v-if="accountsSortBy === 'name'"
-                  :class="[
-                    'fas',
-                    accountsSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down',
-                    'ml-1'
-                  ]"
-                />
-                <i v-else class="fas fa-sort ml-1 text-gray-400" />
-              </th>
-              <th
-                class="w-[15%] min-w-[120px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
-                @click="sortAccounts('platform')"
-              >
-                平台/类型
-                <i
-                  v-if="accountsSortBy === 'platform'"
-                  :class="[
-                    'fas',
-                    accountsSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down',
-                    'ml-1'
-                  ]"
-                />
-                <i v-else class="fas fa-sort ml-1 text-gray-400" />
-              </th>
-              <th
-                class="w-[12%] min-w-[110px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
-                @click="sortAccounts('expiresAt')"
-              >
-                到期时间
-                <i
-                  v-if="accountsSortBy === 'expiresAt'"
-                  :class="[
-                    'fas',
-                    accountsSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down',
-                    'ml-1'
-                  ]"
-                />
-                <i v-else class="fas fa-sort ml-1 text-gray-400" />
-              </th>
-              <th
-                class="w-[12%] min-w-[100px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
-                @click="sortAccounts('status')"
-              >
-                状态
-                <i
-                  v-if="accountsSortBy === 'status'"
-                  :class="[
-                    'fas',
-                    accountsSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down',
-                    'ml-1'
-                  ]"
-                />
-                <i v-else class="fas fa-sort ml-1 text-gray-400" />
-              </th>
-              <th
-                class="w-[8%] min-w-[80px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
-                @click="sortAccounts('priority')"
-              >
-                优先级
-                <i
-                  v-if="accountsSortBy === 'priority'"
-                  :class="[
-                    'fas',
-                    accountsSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down',
-                    'ml-1'
-                  ]"
-                />
-                <i v-else class="fas fa-sort ml-1 text-gray-400" />
-              </th>
-              <th
-                class="w-[10%] min-w-[100px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
-              >
-                代理
-              </th>
-              <th
-                class="w-[10%] min-w-[90px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
-              >
-                今日使用
-              </th>
-              <th
-                class="w-[10%] min-w-[100px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
-              >
-                <div class="flex items-center gap-2">
-                  <span>会话窗口</span>
-                  <el-tooltip placement="top">
-                    <template #content>
-                      <div
-                        class="w-[260px] space-y-3 text-xs leading-relaxed text-white dark:text-gray-800"
-                      >
-                        <div class="space-y-2">
-                          <div class="text-sm font-semibold text-white dark:text-gray-900">
-                            Claude 系列
-                          </div>
-                          <div class="text-gray-200 dark:text-gray-600">
-                            会话窗口进度表示 5 小时窗口的时间推移，颜色提示当前调度状态。
-                          </div>
-                          <div class="space-y-1 pt-1 text-gray-200 dark:text-gray-600">
-                            <div class="flex items-center gap-2">
-                              <div
-                                class="h-2 w-16 rounded bg-gradient-to-r from-blue-500 to-indigo-600"
-                              ></div>
-                              <span class="font-medium text-white dark:text-gray-900"
-                                >正常：请求正常处理</span
-                              >
-                            </div>
-                            <div class="flex items-center gap-2">
-                              <div
-                                class="h-2 w-16 rounded bg-gradient-to-r from-yellow-500 to-orange-500"
-                              ></div>
-                              <span class="font-medium text-white dark:text-gray-900"
-                                >警告：接近限制</span
-                              >
-                            </div>
-                            <div class="flex items-center gap-2">
-                              <div
-                                class="h-2 w-16 rounded bg-gradient-to-r from-red-500 to-red-600"
-                              ></div>
-                              <span class="font-medium text-white dark:text-gray-900"
-                                >拒绝：达到速率限制</span
-                              >
-                            </div>
-                          </div>
-                        </div>
-                        <div class="h-px bg-gray-200 dark:bg-gray-600/50"></div>
-                        <div class="space-y-2">
-                          <div class="text-sm font-semibold text-white dark:text-gray-900">
-                            OpenAI
-                          </div>
-                          <div class="text-gray-200 dark:text-gray-600">
-                            进度条分别展示 5h 与周限窗口的额度使用比例，颜色含义与上方保持一致。
-                          </div>
-                          <div class="space-y-1 text-gray-200 dark:text-gray-600">
-                            <div class="flex items-start gap-2">
-                              <i class="fas fa-clock mt-[2px] text-[10px] text-blue-500"></i>
-                              <span class="font-medium text-white dark:text-gray-900"
-                                >5h 窗口：5小时使用量进度，到达重置时间后会自动归零。</span
-                              >
-                            </div>
-                            <div class="flex items-start gap-2">
-                              <i class="fas fa-history mt-[2px] text-[10px] text-emerald-500"></i>
-                              <span class="font-medium text-white dark:text-gray-900"
-                                >周限窗口：7天使用量进度，重置时同样回到 0%。</span
-                              >
-                            </div>
-                            <div class="flex items-start gap-2">
-                              <i
-                                class="fas fa-info-circle mt-[2px] text-[10px] text-indigo-500"
-                              ></i>
-                              <span class="font-medium text-white dark:text-gray-900"
-                                >当“重置剩余”为 0 时，进度条与百分比会同步清零。</span
-                              >
-                            </div>
-                          </div>
-                        </div>
-                        <div class="h-px bg-gray-200 dark:bg-gray-600/50"></div>
-                        <div class="space-y-2">
-                          <div class="text-sm font-semibold text-white dark:text-gray-900">
-                            Claude OAuth 账户
-                          </div>
-                          <div class="text-gray-200 dark:text-gray-600">
-                            展示三个窗口的使用率（utilization百分比），颜色含义同上。
-                          </div>
-                          <div class="space-y-1 text-gray-200 dark:text-gray-600">
-                            <div class="flex items-start gap-2">
-                              <i class="fas fa-clock mt-[2px] text-[10px] text-indigo-500"></i>
-                              <span class="font-medium text-white dark:text-gray-900"
-                                >5h 窗口：5小时滑动窗口的使用率。</span
-                              >
-                            </div>
-                            <div class="flex items-start gap-2">
-                              <i
-                                class="fas fa-calendar-alt mt-[2px] text-[10px] text-emerald-500"
-                              ></i>
-                              <span class="font-medium text-white dark:text-gray-900"
-                                >7d 窗口：7天总限额的使用率。</span
-                              >
-                            </div>
-                            <div class="flex items-start gap-2">
-                              <i class="fas fa-gem mt-[2px] text-[10px] text-purple-500"></i>
-                              <span class="font-medium text-white dark:text-gray-900"
-                                >Sonnet窗口：7天Sonnet模型专用限额。</span
-                              >
-                            </div>
-                            <div class="flex items-start gap-2">
-                              <i class="fas fa-sync-alt mt-[2px] text-[10px] text-blue-500"></i>
-                              <span class="font-medium text-white dark:text-gray-900"
-                                >到达重置时间后自动归零。</span
-                              >
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </template>
-                    <i
-                      class="fas fa-question-circle cursor-help text-xs text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400"
+      <div v-else class="table-wrapper hidden md:block">
+        <div class="table-container">
+          <table class="w-full">
+            <thead
+              class="sticky top-0 z-10 bg-gradient-to-b from-gray-50 to-gray-100/90 backdrop-blur-sm dark:from-gray-700 dark:to-gray-800/90"
+            >
+              <tr>
+                <th
+                  v-if="shouldShowCheckboxes"
+                  class="checkbox-column sticky left-0 z-20 min-w-[50px] px-3 py-4 text-left"
+                >
+                  <div class="flex items-center">
+                    <input
+                      v-model="selectAllChecked"
+                      class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                      :indeterminate="isIndeterminate"
+                      type="checkbox"
+                      @change="handleSelectAll"
                     />
-                  </el-tooltip>
-                </div>
-              </th>
-              <th
-                class="w-[8%] min-w-[80px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
-              >
-                最后使用
-              </th>
-              <th
-                class="w-[15%] min-w-[180px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
-              >
-                操作
-              </th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-200/50 dark:divide-gray-600/50">
-            <tr v-for="account in paginatedAccounts" :key="account.id" class="table-row">
-              <td v-if="shouldShowCheckboxes" class="px-3 py-3">
-                <div class="flex items-center">
-                  <input
-                    v-model="selectedAccounts"
-                    class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-                    type="checkbox"
-                    :value="account.id"
-                    @change="updateSelectAllState"
-                  />
-                </div>
-              </td>
-              <td class="px-3 py-4">
-                <div class="flex items-center">
-                  <div
-                    class="mr-2 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-green-500 to-green-600"
-                  >
-                    <i class="fas fa-user-circle text-xs text-white" />
                   </div>
-                  <div class="min-w-0">
-                    <div class="flex items-center gap-2">
-                      <div
-                        class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100"
-                        :title="account.name"
-                      >
-                        {{ account.name }}
+                </th>
+                <th
+                  class="name-column sticky z-20 min-w-[180px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
+                  :class="shouldShowCheckboxes ? 'left-[50px]' : 'left-0'"
+                  @click="sortAccounts('name')"
+                >
+                  名称
+                  <i
+                    v-if="accountsSortBy === 'name'"
+                    :class="[
+                      'fas',
+                      accountsSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down',
+                      'ml-1'
+                    ]"
+                  />
+                  <i v-else class="fas fa-sort ml-1 text-gray-400" />
+                </th>
+                <th
+                  class="min-w-[220px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
+                  @click="sortAccounts('platform')"
+                >
+                  平台/类型
+                  <i
+                    v-if="accountsSortBy === 'platform'"
+                    :class="[
+                      'fas',
+                      accountsSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down',
+                      'ml-1'
+                    ]"
+                  />
+                  <i v-else class="fas fa-sort ml-1 text-gray-400" />
+                </th>
+                <th
+                  class="min-w-[110px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
+                  @click="sortAccounts('expiresAt')"
+                >
+                  到期时间
+                  <i
+                    v-if="accountsSortBy === 'expiresAt'"
+                    :class="[
+                      'fas',
+                      accountsSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down',
+                      'ml-1'
+                    ]"
+                  />
+                  <i v-else class="fas fa-sort ml-1 text-gray-400" />
+                </th>
+                <th
+                  class="w-[100px] min-w-[120px] max-w-[150px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
+                  @click="sortAccounts('status')"
+                >
+                  状态
+                  <i
+                    v-if="accountsSortBy === 'status'"
+                    :class="[
+                      'fas',
+                      accountsSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down',
+                      'ml-1'
+                    ]"
+                  />
+                  <i v-else class="fas fa-sort ml-1 text-gray-400" />
+                </th>
+                <th
+                  class="min-w-[80px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
+                  @click="sortAccounts('priority')"
+                >
+                  优先级
+                  <i
+                    v-if="accountsSortBy === 'priority'"
+                    :class="[
+                      'fas',
+                      accountsSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down',
+                      'ml-1'
+                    ]"
+                  />
+                  <i v-else class="fas fa-sort ml-1 text-gray-400" />
+                </th>
+                <th
+                  class="min-w-[150px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                >
+                  代理
+                </th>
+                <th
+                  class="min-w-[150px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                >
+                  今日使用
+                </th>
+                <th
+                  class="min-w-[210px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                >
+                  <div class="flex items-center gap-2">
+                    <span>会话窗口</span>
+                    <el-tooltip placement="top">
+                      <template #content>
+                        <div
+                          class="w-[260px] space-y-3 text-xs leading-relaxed text-white dark:text-gray-800"
+                        >
+                          <div class="space-y-2">
+                            <div class="text-sm font-semibold text-white dark:text-gray-900">
+                              Claude 系列
+                            </div>
+                            <div class="text-gray-200 dark:text-gray-600">
+                              会话窗口进度表示 5 小时窗口的时间推移，颜色提示当前调度状态。
+                            </div>
+                            <div class="space-y-1 pt-1 text-gray-200 dark:text-gray-600">
+                              <div class="flex items-center gap-2">
+                                <div
+                                  class="h-2 w-16 rounded bg-gradient-to-r from-blue-500 to-indigo-600"
+                                ></div>
+                                <span class="font-medium text-white dark:text-gray-900"
+                                  >正常：请求正常处理</span
+                                >
+                              </div>
+                              <div class="flex items-center gap-2">
+                                <div
+                                  class="h-2 w-16 rounded bg-gradient-to-r from-yellow-500 to-orange-500"
+                                ></div>
+                                <span class="font-medium text-white dark:text-gray-900"
+                                  >警告：接近限制</span
+                                >
+                              </div>
+                              <div class="flex items-center gap-2">
+                                <div
+                                  class="h-2 w-16 rounded bg-gradient-to-r from-red-500 to-red-600"
+                                ></div>
+                                <span class="font-medium text-white dark:text-gray-900"
+                                  >拒绝：达到速率限制</span
+                                >
+                              </div>
+                            </div>
+                          </div>
+                          <div class="h-px bg-gray-200 dark:bg-gray-600/50"></div>
+                          <div class="space-y-2">
+                            <div class="text-sm font-semibold text-white dark:text-gray-900">
+                              OpenAI
+                            </div>
+                            <div class="text-gray-200 dark:text-gray-600">
+                              进度条分别展示 5h 与周限窗口的额度使用比例，颜色含义与上方保持一致。
+                            </div>
+                            <div class="space-y-1 text-gray-200 dark:text-gray-600">
+                              <div class="flex items-start gap-2">
+                                <i class="fas fa-clock mt-[2px] text-[10px] text-blue-500"></i>
+                                <span class="font-medium text-white dark:text-gray-900"
+                                  >5h 窗口：5小时使用量进度，到达重置时间后会自动归零。</span
+                                >
+                              </div>
+                              <div class="flex items-start gap-2">
+                                <i class="fas fa-history mt-[2px] text-[10px] text-emerald-500"></i>
+                                <span class="font-medium text-white dark:text-gray-900"
+                                  >周限窗口：7天使用量进度，重置时同样回到 0%。</span
+                                >
+                              </div>
+                              <div class="flex items-start gap-2">
+                                <i
+                                  class="fas fa-info-circle mt-[2px] text-[10px] text-indigo-500"
+                                ></i>
+                                <span class="font-medium text-white dark:text-gray-900"
+                                  >当“重置剩余”为 0 时，进度条与百分比会同步清零。</span
+                                >
+                              </div>
+                            </div>
+                          </div>
+                          <div class="h-px bg-gray-200 dark:bg-gray-600/50"></div>
+                          <div class="space-y-2">
+                            <div class="text-sm font-semibold text-white dark:text-gray-900">
+                              Claude OAuth 账户
+                            </div>
+                            <div class="text-gray-200 dark:text-gray-600">
+                              展示三个窗口的使用率（utilization百分比），颜色含义同上。
+                            </div>
+                            <div class="space-y-1 text-gray-200 dark:text-gray-600">
+                              <div class="flex items-start gap-2">
+                                <i class="fas fa-clock mt-[2px] text-[10px] text-indigo-500"></i>
+                                <span class="font-medium text-white dark:text-gray-900"
+                                  >5h 窗口：5小时滑动窗口的使用率。</span
+                                >
+                              </div>
+                              <div class="flex items-start gap-2">
+                                <i
+                                  class="fas fa-calendar-alt mt-[2px] text-[10px] text-emerald-500"
+                                ></i>
+                                <span class="font-medium text-white dark:text-gray-900"
+                                  >7d 窗口：7天总限额的使用率。</span
+                                >
+                              </div>
+                              <div class="flex items-start gap-2">
+                                <i class="fas fa-gem mt-[2px] text-[10px] text-purple-500"></i>
+                                <span class="font-medium text-white dark:text-gray-900"
+                                  >Sonnet窗口：7天Sonnet模型专用限额。</span
+                                >
+                              </div>
+                              <div class="flex items-start gap-2">
+                                <i class="fas fa-sync-alt mt-[2px] text-[10px] text-blue-500"></i>
+                                <span class="font-medium text-white dark:text-gray-900"
+                                  >到达重置时间后自动归零。</span
+                                >
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </template>
+                      <i
+                        class="fas fa-question-circle cursor-help text-xs text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400"
+                      />
+                    </el-tooltip>
+                  </div>
+                </th>
+                <th
+                  class="min-w-[80px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                >
+                  最后使用
+                </th>
+                <th
+                  class="operations-column sticky right-0 z-20 min-w-[200px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                >
+                  操作
+                </th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200/50 dark:divide-gray-600/50">
+              <tr v-for="account in paginatedAccounts" :key="account.id" class="table-row">
+                <td
+                  v-if="shouldShowCheckboxes"
+                  class="checkbox-column sticky left-0 z-10 px-3 py-3"
+                >
+                  <div class="flex items-center">
+                    <input
+                      v-model="selectedAccounts"
+                      class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                      type="checkbox"
+                      :value="account.id"
+                      @change="updateSelectAllState"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="name-column sticky z-10 px-3 py-4"
+                  :class="shouldShowCheckboxes ? 'left-[50px]' : 'left-0'"
+                >
+                  <div class="flex items-center">
+                    <div
+                      class="mr-2 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-green-500 to-green-600"
+                    >
+                      <i class="fas fa-user-circle text-xs text-white" />
+                    </div>
+                    <div class="min-w-0">
+                      <div class="flex items-center gap-2">
+                        <div
+                          class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100"
+                          :title="account.name"
+                        >
+                          {{ account.name }}
+                        </div>
+                        <span
+                          v-if="account.accountType === 'dedicated'"
+                          class="inline-flex items-center rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-800"
+                        >
+                          <i class="fas fa-lock mr-1" />专属
+                        </span>
+                        <span
+                          v-else-if="account.accountType === 'group'"
+                          class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800"
+                        >
+                          <i class="fas fa-layer-group mr-1" />分组调度
+                        </span>
+                        <span
+                          v-else
+                          class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"
+                        >
+                          <i class="fas fa-share-alt mr-1" />共享
+                        </span>
                       </div>
-                      <span
-                        v-if="account.accountType === 'dedicated'"
-                        class="inline-flex items-center rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-800"
+                      <!-- 显示所有分组 - 换行显示 -->
+                      <div
+                        v-if="account.groupInfos && account.groupInfos.length > 0"
+                        class="my-2 flex flex-wrap items-center gap-2"
                       >
-                        <i class="fas fa-lock mr-1" />专属
+                        <span
+                          v-for="group in account.groupInfos"
+                          :key="group.id"
+                          class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-400"
+                          :title="`所属分组: ${group.name}`"
+                        >
+                          <i class="fas fa-folder mr-1" />{{ group.name }}
+                        </span>
+                      </div>
+                      <div
+                        class="truncate text-xs text-gray-500 dark:text-gray-400"
+                        :title="account.id"
+                      >
+                        {{ account.id }}
+                      </div>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-3 py-4">
+                  <div class="flex items-center gap-1">
+                    <!-- 平台图标和名称 -->
+                    <div
+                      v-if="account.platform === 'gemini'"
+                      class="flex items-center gap-1.5 rounded-lg border border-yellow-200 bg-gradient-to-r from-yellow-100 to-amber-100 px-2.5 py-1"
+                    >
+                      <i class="fas fa-robot text-xs text-yellow-700" />
+                      <span class="text-xs font-semibold text-yellow-800">Gemini</span>
+                      <span class="mx-1 h-4 w-px bg-yellow-300" />
+                      <span class="text-xs font-medium text-yellow-700">
+                        {{ getGeminiAuthType() }}
+                      </span>
+                    </div>
+                    <div
+                      v-else-if="account.platform === 'claude-console'"
+                      class="flex items-center gap-1.5 rounded-lg border border-purple-200 bg-gradient-to-r from-purple-100 to-pink-100 px-2.5 py-1"
+                    >
+                      <i class="fas fa-terminal text-xs text-purple-700" />
+                      <span class="text-xs font-semibold text-purple-800">Console</span>
+                      <span class="mx-1 h-4 w-px bg-purple-300" />
+                      <span class="text-xs font-medium text-purple-700">API Key</span>
+                    </div>
+                    <div
+                      v-else-if="account.platform === 'bedrock'"
+                      class="flex items-center gap-1.5 rounded-lg border border-orange-200 bg-gradient-to-r from-orange-100 to-red-100 px-2.5 py-1"
+                    >
+                      <i class="fab fa-aws text-xs text-orange-700" />
+                      <span class="text-xs font-semibold text-orange-800">Bedrock</span>
+                      <span class="mx-1 h-4 w-px bg-orange-300" />
+                      <span class="text-xs font-medium text-orange-700">AWS</span>
+                    </div>
+                    <div
+                      v-else-if="account.platform === 'openai'"
+                      class="flex items-center gap-1.5 rounded-lg border border-gray-700 bg-gray-100 bg-gradient-to-r from-gray-100 to-gray-100 px-2.5 py-1"
+                    >
+                      <div class="fa-openai" />
+                      <span class="text-xs font-semibold text-gray-950">OpenAi</span>
+                      <span class="mx-1 h-4 w-px bg-gray-400" />
+                      <span class="text-xs font-medium text-gray-950">{{
+                        getOpenAIAuthType()
+                      }}</span>
+                    </div>
+                    <div
+                      v-else-if="account.platform === 'azure_openai'"
+                      class="flex items-center gap-1.5 rounded-lg border border-blue-200 bg-gradient-to-r from-blue-100 to-cyan-100 px-2.5 py-1 dark:border-blue-700 dark:from-blue-900/20 dark:to-cyan-900/20"
+                    >
+                      <i class="fab fa-microsoft text-xs text-blue-700 dark:text-blue-400" />
+                      <span class="text-xs font-semibold text-blue-800 dark:text-blue-300"
+                        >Azure OpenAI</span
+                      >
+                      <span class="mx-1 h-4 w-px bg-blue-300 dark:bg-blue-600" />
+                      <span class="text-xs font-medium text-blue-700 dark:text-blue-400"
+                        >API Key</span
+                      >
+                    </div>
+                    <div
+                      v-else-if="account.platform === 'openai-responses'"
+                      class="flex items-center gap-1.5 rounded-lg border border-teal-200 bg-gradient-to-r from-teal-100 to-green-100 px-2.5 py-1 dark:border-teal-700 dark:from-teal-900/20 dark:to-green-900/20"
+                    >
+                      <i class="fas fa-server text-xs text-teal-700 dark:text-teal-400" />
+                      <span class="text-xs font-semibold text-teal-800 dark:text-teal-300"
+                        >OpenAI-Api</span
+                      >
+                      <span class="mx-1 h-4 w-px bg-teal-300 dark:bg-teal-600" />
+                      <span class="text-xs font-medium text-teal-700 dark:text-teal-400"
+                        >API Key</span
+                      >
+                    </div>
+                    <div
+                      v-else-if="
+                        account.platform === 'claude' || account.platform === 'claude-oauth'
+                      "
+                      class="flex items-center gap-1.5 rounded-lg border border-indigo-200 bg-gradient-to-r from-indigo-100 to-blue-100 px-2.5 py-1"
+                    >
+                      <i class="fas fa-brain text-xs text-indigo-700" />
+                      <span class="text-xs font-semibold text-indigo-800">{{
+                        getClaudeAccountType(account)
+                      }}</span>
+                      <span class="mx-1 h-4 w-px bg-indigo-300" />
+                      <span class="text-xs font-medium text-indigo-700">
+                        {{ getClaudeAuthType(account) }}
+                      </span>
+                    </div>
+                    <div
+                      v-else-if="account.platform === 'ccr'"
+                      class="flex items-center gap-1.5 rounded-lg border border-teal-200 bg-gradient-to-r from-teal-100 to-emerald-100 px-2.5 py-1 dark:border-teal-700 dark:from-teal-900/20 dark:to-emerald-900/20"
+                    >
+                      <i class="fas fa-code-branch text-xs text-teal-700 dark:text-teal-400" />
+                      <span class="text-xs font-semibold text-teal-800 dark:text-teal-300"
+                        >CCR</span
+                      >
+                      <span class="mx-1 h-4 w-px bg-teal-300 dark:bg-teal-600" />
+                      <span class="text-xs font-medium text-teal-700 dark:text-teal-300"
+                        >Relay</span
+                      >
+                    </div>
+                    <div
+                      v-else-if="account.platform === 'droid'"
+                      class="flex items-center gap-1.5 rounded-lg border border-cyan-200 bg-gradient-to-r from-cyan-100 to-sky-100 px-2.5 py-1 dark:border-cyan-700 dark:from-cyan-900/20 dark:to-sky-900/20"
+                    >
+                      <i class="fas fa-robot text-xs text-cyan-700 dark:text-cyan-400" />
+                      <span class="text-xs font-semibold text-cyan-800 dark:text-cyan-300"
+                        >Droid</span
+                      >
+                      <span class="mx-1 h-4 w-px bg-cyan-300 dark:bg-cyan-600" />
+                      <span class="text-xs font-medium text-cyan-700 dark:text-cyan-300">
+                        {{ getDroidAuthType(account) }}
                       </span>
                       <span
-                        v-else-if="account.accountType === 'group'"
-                        class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800"
+                        v-if="isDroidApiKeyMode(account)"
+                        :class="getDroidApiKeyBadgeClasses(account)"
                       >
-                        <i class="fas fa-layer-group mr-1" />分组调度
+                        <i class="fas fa-key text-[9px]" />
+                        <span>x{{ getDroidApiKeyCount(account) }}</span>
+                      </span>
+                    </div>
+                    <div
+                      v-else-if="account.platform === 'gemini-api'"
+                      class="flex items-center gap-1.5 rounded-lg border border-amber-200 bg-gradient-to-r from-amber-100 to-yellow-100 px-2.5 py-1 dark:border-amber-700 dark:from-amber-900/20 dark:to-yellow-900/20"
+                    >
+                      <i class="fas fa-robot text-xs text-amber-700 dark:text-amber-400" />
+                      <span class="text-xs font-semibold text-amber-800 dark:text-amber-300"
+                        >Gemini-API</span
+                      >
+                      <span class="mx-1 h-4 w-px bg-amber-300 dark:bg-amber-600" />
+                      <span class="text-xs font-medium text-amber-700 dark:text-amber-400"
+                        >API Key</span
+                      >
+                    </div>
+                    <div
+                      v-else
+                      class="flex items-center gap-1.5 rounded-lg border border-gray-200 bg-gradient-to-r from-gray-100 to-gray-200 px-2.5 py-1"
+                    >
+                      <i class="fas fa-question text-xs text-gray-700" />
+                      <span class="text-xs font-semibold text-gray-800">未知</span>
+                    </div>
+                  </div>
+                </td>
+                <td class="whitespace-nowrap px-3 py-4">
+                  <div class="flex flex-col gap-1">
+                    <!-- 已设置过期时间 -->
+                    <span v-if="account.expiresAt">
+                      <span
+                        v-if="isExpired(account.expiresAt)"
+                        class="inline-flex cursor-pointer items-center text-red-600 hover:underline"
+                        style="font-size: 13px"
+                        @click.stop="startEditAccountExpiry(account)"
+                      >
+                        <i class="fas fa-exclamation-circle mr-1 text-xs" />
+                        已过期
+                      </span>
+                      <span
+                        v-else-if="isExpiringSoon(account.expiresAt)"
+                        class="inline-flex cursor-pointer items-center text-orange-600 hover:underline"
+                        style="font-size: 13px"
+                        @click.stop="startEditAccountExpiry(account)"
+                      >
+                        <i class="fas fa-clock mr-1 text-xs" />
+                        {{ formatExpireDate(account.expiresAt) }}
                       </span>
                       <span
                         v-else
-                        class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"
+                        class="cursor-pointer text-gray-600 hover:underline dark:text-gray-400"
+                        style="font-size: 13px"
+                        @click.stop="startEditAccountExpiry(account)"
                       >
-                        <i class="fas fa-share-alt mr-1" />共享
+                        {{ formatExpireDate(account.expiresAt) }}
                       </span>
-                    </div>
-                    <!-- 显示所有分组 - 换行显示 -->
-                    <div
-                      v-if="account.groupInfos && account.groupInfos.length > 0"
-                      class="my-2 flex flex-wrap items-center gap-2"
-                    >
-                      <span
-                        v-for="group in account.groupInfos"
-                        :key="group.id"
-                        class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-400"
-                        :title="`所属分组: ${group.name}`"
-                      >
-                        <i class="fas fa-folder mr-1" />{{ group.name }}
-                      </span>
-                    </div>
-                    <div
-                      class="truncate text-xs text-gray-500 dark:text-gray-400"
-                      :title="account.id"
-                    >
-                      {{ account.id }}
-                    </div>
-                  </div>
-                </div>
-              </td>
-              <td class="px-3 py-4">
-                <div class="flex items-center gap-1">
-                  <!-- 平台图标和名称 -->
-                  <div
-                    v-if="account.platform === 'gemini'"
-                    class="flex items-center gap-1.5 rounded-lg border border-yellow-200 bg-gradient-to-r from-yellow-100 to-amber-100 px-2.5 py-1"
-                  >
-                    <i class="fas fa-robot text-xs text-yellow-700" />
-                    <span class="text-xs font-semibold text-yellow-800">Gemini</span>
-                    <span class="mx-1 h-4 w-px bg-yellow-300" />
-                    <span class="text-xs font-medium text-yellow-700">
-                      {{ getGeminiAuthType() }}
-                    </span>
-                  </div>
-                  <div
-                    v-else-if="account.platform === 'claude-console'"
-                    class="flex items-center gap-1.5 rounded-lg border border-purple-200 bg-gradient-to-r from-purple-100 to-pink-100 px-2.5 py-1"
-                  >
-                    <i class="fas fa-terminal text-xs text-purple-700" />
-                    <span class="text-xs font-semibold text-purple-800">Console</span>
-                    <span class="mx-1 h-4 w-px bg-purple-300" />
-                    <span class="text-xs font-medium text-purple-700">API Key</span>
-                  </div>
-                  <div
-                    v-else-if="account.platform === 'bedrock'"
-                    class="flex items-center gap-1.5 rounded-lg border border-orange-200 bg-gradient-to-r from-orange-100 to-red-100 px-2.5 py-1"
-                  >
-                    <i class="fab fa-aws text-xs text-orange-700" />
-                    <span class="text-xs font-semibold text-orange-800">Bedrock</span>
-                    <span class="mx-1 h-4 w-px bg-orange-300" />
-                    <span class="text-xs font-medium text-orange-700">AWS</span>
-                  </div>
-                  <div
-                    v-else-if="account.platform === 'openai'"
-                    class="flex items-center gap-1.5 rounded-lg border border-gray-700 bg-gray-100 bg-gradient-to-r from-gray-100 to-gray-100 px-2.5 py-1"
-                  >
-                    <div class="fa-openai" />
-                    <span class="text-xs font-semibold text-gray-950">OpenAi</span>
-                    <span class="mx-1 h-4 w-px bg-gray-400" />
-                    <span class="text-xs font-medium text-gray-950">{{ getOpenAIAuthType() }}</span>
-                  </div>
-                  <div
-                    v-else-if="account.platform === 'azure_openai'"
-                    class="flex items-center gap-1.5 rounded-lg border border-blue-200 bg-gradient-to-r from-blue-100 to-cyan-100 px-2.5 py-1 dark:border-blue-700 dark:from-blue-900/20 dark:to-cyan-900/20"
-                  >
-                    <i class="fab fa-microsoft text-xs text-blue-700 dark:text-blue-400" />
-                    <span class="text-xs font-semibold text-blue-800 dark:text-blue-300"
-                      >Azure OpenAI</span
-                    >
-                    <span class="mx-1 h-4 w-px bg-blue-300 dark:bg-blue-600" />
-                    <span class="text-xs font-medium text-blue-700 dark:text-blue-400"
-                      >API Key</span
-                    >
-                  </div>
-                  <div
-                    v-else-if="account.platform === 'openai-responses'"
-                    class="flex items-center gap-1.5 rounded-lg border border-teal-200 bg-gradient-to-r from-teal-100 to-green-100 px-2.5 py-1 dark:border-teal-700 dark:from-teal-900/20 dark:to-green-900/20"
-                  >
-                    <i class="fas fa-server text-xs text-teal-700 dark:text-teal-400" />
-                    <span class="text-xs font-semibold text-teal-800 dark:text-teal-300"
-                      >OpenAI-Responses</span
-                    >
-                    <span class="mx-1 h-4 w-px bg-teal-300 dark:bg-teal-600" />
-                    <span class="text-xs font-medium text-teal-700 dark:text-teal-400"
-                      >API Key</span
-                    >
-                  </div>
-                  <div
-                    v-else-if="account.platform === 'claude' || account.platform === 'claude-oauth'"
-                    class="flex items-center gap-1.5 rounded-lg border border-indigo-200 bg-gradient-to-r from-indigo-100 to-blue-100 px-2.5 py-1"
-                  >
-                    <i class="fas fa-brain text-xs text-indigo-700" />
-                    <span class="text-xs font-semibold text-indigo-800">{{
-                      getClaudeAccountType(account)
-                    }}</span>
-                    <span class="mx-1 h-4 w-px bg-indigo-300" />
-                    <span class="text-xs font-medium text-indigo-700">
-                      {{ getClaudeAuthType(account) }}
-                    </span>
-                  </div>
-                  <div
-                    v-else-if="account.platform === 'ccr'"
-                    class="flex items-center gap-1.5 rounded-lg border border-teal-200 bg-gradient-to-r from-teal-100 to-emerald-100 px-2.5 py-1 dark:border-teal-700 dark:from-teal-900/20 dark:to-emerald-900/20"
-                  >
-                    <i class="fas fa-code-branch text-xs text-teal-700 dark:text-teal-400" />
-                    <span class="text-xs font-semibold text-teal-800 dark:text-teal-300">CCR</span>
-                    <span class="mx-1 h-4 w-px bg-teal-300 dark:bg-teal-600" />
-                    <span class="text-xs font-medium text-teal-700 dark:text-teal-300">Relay</span>
-                  </div>
-                  <div
-                    v-else-if="account.platform === 'droid'"
-                    class="flex items-center gap-1.5 rounded-lg border border-cyan-200 bg-gradient-to-r from-cyan-100 to-sky-100 px-2.5 py-1 dark:border-cyan-700 dark:from-cyan-900/20 dark:to-sky-900/20"
-                  >
-                    <i class="fas fa-robot text-xs text-cyan-700 dark:text-cyan-400" />
-                    <span class="text-xs font-semibold text-cyan-800 dark:text-cyan-300"
-                      >Droid</span
-                    >
-                    <span class="mx-1 h-4 w-px bg-cyan-300 dark:bg-cyan-600" />
-                    <span class="text-xs font-medium text-cyan-700 dark:text-cyan-300">
-                      {{ getDroidAuthType(account) }}
-                    </span>
-                    <span
-                      v-if="isDroidApiKeyMode(account)"
-                      :class="getDroidApiKeyBadgeClasses(account)"
-                    >
-                      <i class="fas fa-key text-[9px]" />
-                      <span>x{{ getDroidApiKeyCount(account) }}</span>
-                    </span>
-                  </div>
-                  <div
-                    v-else-if="account.platform === 'gemini-api'"
-                    class="flex items-center gap-1.5 rounded-lg border border-amber-200 bg-gradient-to-r from-amber-100 to-yellow-100 px-2.5 py-1 dark:border-amber-700 dark:from-amber-900/20 dark:to-yellow-900/20"
-                  >
-                    <i class="fas fa-robot text-xs text-amber-700 dark:text-amber-400" />
-                    <span class="text-xs font-semibold text-amber-800 dark:text-amber-300"
-                      >Gemini-API</span
-                    >
-                    <span class="mx-1 h-4 w-px bg-amber-300 dark:bg-amber-600" />
-                    <span class="text-xs font-medium text-amber-700 dark:text-amber-400"
-                      >API Key</span
-                    >
-                  </div>
-                  <div
-                    v-else
-                    class="flex items-center gap-1.5 rounded-lg border border-gray-200 bg-gradient-to-r from-gray-100 to-gray-200 px-2.5 py-1"
-                  >
-                    <i class="fas fa-question text-xs text-gray-700" />
-                    <span class="text-xs font-semibold text-gray-800">未知</span>
-                  </div>
-                </div>
-              </td>
-              <td class="whitespace-nowrap px-3 py-4">
-                <div class="flex flex-col gap-1">
-                  <!-- 已设置过期时间 -->
-                  <span v-if="account.expiresAt">
-                    <span
-                      v-if="isExpired(account.expiresAt)"
-                      class="inline-flex cursor-pointer items-center text-red-600 hover:underline"
-                      style="font-size: 13px"
-                      @click.stop="startEditAccountExpiry(account)"
-                    >
-                      <i class="fas fa-exclamation-circle mr-1 text-xs" />
-                      已过期
-                    </span>
-                    <span
-                      v-else-if="isExpiringSoon(account.expiresAt)"
-                      class="inline-flex cursor-pointer items-center text-orange-600 hover:underline"
-                      style="font-size: 13px"
-                      @click.stop="startEditAccountExpiry(account)"
-                    >
-                      <i class="fas fa-clock mr-1 text-xs" />
-                      {{ formatExpireDate(account.expiresAt) }}
                     </span>
+                    <!-- 永不过期 -->
                     <span
                       v-else
-                      class="cursor-pointer text-gray-600 hover:underline dark:text-gray-400"
+                      class="inline-flex cursor-pointer items-center text-gray-400 hover:underline dark:text-gray-500"
                       style="font-size: 13px"
                       @click.stop="startEditAccountExpiry(account)"
                     >
-                      {{ formatExpireDate(account.expiresAt) }}
+                      <i class="fas fa-infinity mr-1 text-xs" />
+                      永不过期
                     </span>
-                  </span>
-                  <!-- 永不过期 -->
-                  <span
-                    v-else
-                    class="inline-flex cursor-pointer items-center text-gray-400 hover:underline dark:text-gray-500"
-                    style="font-size: 13px"
-                    @click.stop="startEditAccountExpiry(account)"
-                  >
-                    <i class="fas fa-infinity mr-1 text-xs" />
-                    永不过期
-                  </span>
-                </div>
-              </td>
-              <td class="whitespace-nowrap px-3 py-4">
-                <div class="flex flex-col gap-1">
-                  <span
-                    :class="[
-                      'inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold',
-                      account.status === 'blocked'
-                        ? 'bg-orange-100 text-orange-800'
-                        : account.status === 'unauthorized'
-                          ? 'bg-red-100 text-red-800'
-                          : account.status === 'temp_error'
-                            ? 'bg-orange-100 text-orange-800'
-                            : account.isActive
-                              ? 'bg-green-100 text-green-800'
-                              : 'bg-red-100 text-red-800'
-                    ]"
-                  >
-                    <div
+                  </div>
+                </td>
+                <td class="w-[100px] min-w-[100px] max-w-[100px] whitespace-nowrap px-3 py-4">
+                  <div class="flex flex-col gap-1">
+                    <span
                       :class="[
-                        'mr-2 h-2 w-2 rounded-full',
+                        'inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold',
                         account.status === 'blocked'
-                          ? 'bg-orange-500'
+                          ? 'bg-orange-100 text-orange-800'
                           : account.status === 'unauthorized'
-                            ? 'bg-red-500'
+                            ? 'bg-red-100 text-red-800'
                             : account.status === 'temp_error'
-                              ? 'bg-orange-500'
+                              ? 'bg-orange-100 text-orange-800'
                               : account.isActive
-                                ? 'bg-green-500'
-                                : 'bg-red-500'
+                                ? 'bg-green-100 text-green-800'
+                                : 'bg-red-100 text-red-800'
                       ]"
-                    />
-                    {{
-                      account.status === 'blocked'
-                        ? '已封锁'
-                        : account.status === 'unauthorized'
-                          ? '异常'
-                          : account.status === 'temp_error'
-                            ? '临时异常'
-                            : account.isActive
-                              ? '正常'
-                              : '异常'
-                    }}
-                  </span>
-                  <span
-                    v-if="
-                      (account.rateLimitStatus && account.rateLimitStatus.isRateLimited) ||
-                      account.rateLimitStatus === 'limited'
-                    "
-                    class="inline-flex items-center rounded-full bg-yellow-100 px-3 py-1 text-xs font-semibold text-yellow-800"
-                  >
-                    <i class="fas fa-exclamation-triangle mr-1" />
-                    限流中
+                    >
+                      <div
+                        :class="[
+                          'mr-2 h-2 w-2 rounded-full',
+                          account.status === 'blocked'
+                            ? 'bg-orange-500'
+                            : account.status === 'unauthorized'
+                              ? 'bg-red-500'
+                              : account.status === 'temp_error'
+                                ? 'bg-orange-500'
+                                : account.isActive
+                                  ? 'bg-green-500'
+                                  : 'bg-red-500'
+                        ]"
+                      />
+                      {{
+                        account.status === 'blocked'
+                          ? '已封锁'
+                          : account.status === 'unauthorized'
+                            ? '异常'
+                            : account.status === 'temp_error'
+                              ? '临时异常'
+                              : account.isActive
+                                ? '正常'
+                                : '异常'
+                      }}
+                    </span>
                     <span
                       v-if="
-                        account.rateLimitStatus &&
-                        typeof account.rateLimitStatus === 'object' &&
-                        account.rateLimitStatus.minutesRemaining > 0
+                        (account.rateLimitStatus && account.rateLimitStatus.isRateLimited) ||
+                        account.rateLimitStatus === 'limited'
                       "
-                      >({{ formatRateLimitTime(account.rateLimitStatus.minutesRemaining) }})</span
+                      class="inline-flex items-center rounded-full bg-yellow-100 px-3 py-1 text-xs font-semibold text-yellow-800"
                     >
-                  </span>
-                  <span
-                    v-if="account.schedulable === false"
-                    class="inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-700"
-                  >
-                    <i class="fas fa-pause-circle mr-1" />
-                    不可调度
-                    <el-tooltip
-                      v-if="getSchedulableReason(account)"
-                      :content="getSchedulableReason(account)"
-                      effect="dark"
-                      placement="top"
-                    >
-                      <i class="fas fa-question-circle ml-1 cursor-help text-gray-500" />
-                    </el-tooltip>
-                  </span>
-                  <span
-                    v-if="account.status === 'blocked' && account.errorMessage"
-                    class="mt-1 max-w-xs truncate text-xs text-gray-500 dark:text-gray-400"
-                    :title="account.errorMessage"
-                  >
-                    {{ account.errorMessage }}
-                  </span>
-                  <span
-                    v-if="account.accountType === 'dedicated'"
-                    class="text-xs text-gray-500 dark:text-gray-400"
-                  >
-                    绑定: {{ account.boundApiKeysCount || 0 }} 个API Key
-                  </span>
-                </div>
-              </td>
-              <td class="whitespace-nowrap px-3 py-4">
-                <div
-                  v-if="
-                    account.platform === 'claude' ||
-                    account.platform === 'claude-console' ||
-                    account.platform === 'bedrock' ||
-                    account.platform === 'gemini' ||
-                    account.platform === 'openai' ||
-                    account.platform === 'openai-responses' ||
-                    account.platform === 'azure_openai' ||
-                    account.platform === 'ccr' ||
-                    account.platform === 'droid' ||
-                    account.platform === 'gemini-api'
-                  "
-                  class="flex items-center gap-2"
-                >
-                  <div class="h-2 w-16 rounded-full bg-gray-200">
-                    <div
-                      class="h-2 rounded-full bg-gradient-to-r from-green-500 to-blue-600 transition-all duration-300"
-                      :style="{ width: 101 - (account.priority || 50) + '%' }"
-                    />
-                  </div>
-                  <span class="min-w-[20px] text-xs font-medium text-gray-700 dark:text-gray-200">
-                    {{ account.priority || 50 }}
-                  </span>
-                </div>
-                <div v-else class="text-sm text-gray-400">
-                  <span class="text-xs">N/A</span>
-                </div>
-              </td>
-              <td class="px-3 py-4 text-sm text-gray-600">
-                <div
-                  v-if="formatProxyDisplay(account.proxy)"
-                  class="break-all rounded bg-blue-50 px-2 py-1 font-mono text-xs"
-                  :title="formatProxyDisplay(account.proxy)"
-                >
-                  {{ formatProxyDisplay(account.proxy) }}
-                </div>
-                <div v-else class="text-gray-400">无代理</div>
-              </td>
-              <td class="whitespace-nowrap px-3 py-4 text-sm">
-                <div v-if="account.usage && account.usage.daily" class="space-y-1">
-                  <div class="flex items-center gap-2">
-                    <div class="h-2 w-2 rounded-full bg-blue-500" />
-                    <span class="text-sm font-medium text-gray-900 dark:text-gray-100"
-                      >{{ account.usage.daily.requests || 0 }} 次</span
-                    >
-                  </div>
-                  <div class="flex items-center gap-2">
-                    <div class="h-2 w-2 rounded-full bg-purple-500" />
-                    <span class="text-xs text-gray-600 dark:text-gray-300"
-                      >{{ formatNumber(account.usage.daily.allTokens || 0) }}M</span
-                    >
-                  </div>
-                  <div class="flex items-center gap-2">
-                    <div class="h-2 w-2 rounded-full bg-green-500" />
-                    <span class="text-xs text-gray-600 dark:text-gray-300"
-                      >${{ calculateDailyCost(account) }}</span
-                    >
-                  </div>
-                  <div
-                    v-if="account.usage.averages && account.usage.averages.rpm > 0"
-                    class="text-xs text-gray-500 dark:text-gray-400"
-                  >
-                    平均 {{ account.usage.averages.rpm.toFixed(2) }} RPM
-                  </div>
-                </div>
-                <div v-else class="text-xs text-gray-400">暂无数据</div>
-              </td>
-              <td class="whitespace-nowrap px-3 py-4">
-                <div v-if="account.platform === 'claude'" class="space-y-2">
-                  <!-- OAuth 账户：显示三窗口 OAuth usage -->
-                  <div v-if="isClaudeOAuth(account) && account.claudeUsage" class="space-y-2">
-                    <!-- 5小时窗口 -->
-                    <div class="rounded-lg bg-gray-50 p-2 dark:bg-gray-700/70">
-                      <div class="flex items-center gap-2">
-                        <span
-                          class="inline-flex min-w-[32px] justify-center rounded-full bg-indigo-100 px-2 py-0.5 text-[11px] font-medium text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-300"
-                        >
-                          5h
-                        </span>
-                        <div class="flex-1">
-                          <div class="flex items-center gap-2">
-                            <div class="h-2 flex-1 rounded-full bg-gray-200 dark:bg-gray-600">
-                              <div
-                                :class="[
-                                  'h-2 rounded-full transition-all duration-300',
-                                  getClaudeUsageBarClass(account.claudeUsage.fiveHour)
-                                ]"
-                                :style="{
-                                  width: getClaudeUsageWidth(account.claudeUsage.fiveHour)
-                                }"
-                              />
-                            </div>
-                            <span
-                              class="w-12 text-right text-xs font-semibold text-gray-800 dark:text-gray-100"
-                            >
-                              {{ formatClaudeUsagePercent(account.claudeUsage.fiveHour) }}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
-                        重置剩余 {{ formatClaudeRemaining(account.claudeUsage.fiveHour) }}
-                      </div>
-                    </div>
-                    <!-- 7天窗口 -->
-                    <div class="rounded-lg bg-gray-50 p-2 dark:bg-gray-700/70">
-                      <div class="flex items-center gap-2">
-                        <span
-                          class="inline-flex min-w-[32px] justify-center rounded-full bg-emerald-100 px-2 py-0.5 text-[11px] font-medium text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-300"
-                        >
-                          7d
-                        </span>
-                        <div class="flex-1">
-                          <div class="flex items-center gap-2">
-                            <div class="h-2 flex-1 rounded-full bg-gray-200 dark:bg-gray-600">
-                              <div
-                                :class="[
-                                  'h-2 rounded-full transition-all duration-300',
-                                  getClaudeUsageBarClass(account.claudeUsage.sevenDay)
-                                ]"
-                                :style="{
-                                  width: getClaudeUsageWidth(account.claudeUsage.sevenDay)
-                                }"
-                              />
-                            </div>
-                            <span
-                              class="w-12 text-right text-xs font-semibold text-gray-800 dark:text-gray-100"
-                            >
-                              {{ formatClaudeUsagePercent(account.claudeUsage.sevenDay) }}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
-                        重置剩余 {{ formatClaudeRemaining(account.claudeUsage.sevenDay) }}
-                      </div>
-                    </div>
-                    <!-- 7天Opus窗口 -->
-                    <div class="rounded-lg bg-gray-50 p-2 dark:bg-gray-700/70">
-                      <div class="flex items-center gap-2">
-                        <span
-                          class="inline-flex min-w-[32px] justify-center rounded-full bg-purple-100 px-2 py-0.5 text-[11px] font-medium text-purple-600 dark:bg-purple-500/20 dark:text-purple-300"
-                        >
-                          sonnet
-                        </span>
-                        <div class="flex-1">
-                          <div class="flex items-center gap-2">
-                            <div class="h-2 flex-1 rounded-full bg-gray-200 dark:bg-gray-600">
-                              <div
-                                :class="[
-                                  'h-2 rounded-full transition-all duration-300',
-                                  getClaudeUsageBarClass(account.claudeUsage.sevenDayOpus)
-                                ]"
-                                :style="{
-                                  width: getClaudeUsageWidth(account.claudeUsage.sevenDayOpus)
-                                }"
-                              />
-                            </div>
-                            <span
-                              class="w-12 text-right text-xs font-semibold text-gray-800 dark:text-gray-100"
-                            >
-                              {{ formatClaudeUsagePercent(account.claudeUsage.sevenDayOpus) }}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
-                        重置剩余 {{ formatClaudeRemaining(account.claudeUsage.sevenDayOpus) }}
-                      </div>
-                    </div>
-                  </div>
-                  <!-- Setup Token 账户：显示原有的会话窗口时间进度 -->
-                  <div
-                    v-else-if="
-                      !isClaudeOAuth(account) &&
-                      account.sessionWindow &&
-                      account.sessionWindow.hasActiveWindow
-                    "
-                    class="space-y-2"
-                  >
-                    <!-- 使用统计在顶部 -->
-                    <div
-                      v-if="account.usage && account.usage.sessionWindow"
-                      class="flex items-center gap-3 text-xs"
-                    >
-                      <div class="flex items-center gap-1">
-                        <div class="h-1.5 w-1.5 rounded-full bg-purple-500" />
-                        <span class="font-medium text-gray-900 dark:text-gray-100">
-                          {{ formatNumber(account.usage.sessionWindow.totalTokens) }}M
-                        </span>
-                      </div>
-                      <div class="flex items-center gap-1">
-                        <div class="h-1.5 w-1.5 rounded-full bg-green-500" />
-                        <span class="font-medium text-gray-900 dark:text-gray-100">
-                          ${{ formatCost(account.usage.sessionWindow.totalCost) }}
-                        </span>
-                      </div>
-                    </div>
-
-                    <!-- 进度条 -->
-                    <div class="flex items-center gap-2">
-                      <div class="h-2 w-24 rounded-full bg-gray-200 dark:bg-gray-700">
-                        <div
-                          :class="[
-                            'h-2 rounded-full transition-all duration-300',
-                            getSessionProgressBarClass(
-                              account.sessionWindow.sessionWindowStatus,
-                              account
-                            )
-                          ]"
-                          :style="{ width: account.sessionWindow.progress + '%' }"
-                        />
-                      </div>
+                      <i class="fas fa-exclamation-triangle mr-1" />
+                      限流中
                       <span
-                        class="min-w-[32px] text-xs font-medium text-gray-700 dark:text-gray-200"
+                        v-if="
+                          account.rateLimitStatus &&
+                          typeof account.rateLimitStatus === 'object' &&
+                          account.rateLimitStatus.minutesRemaining > 0
+                        "
+                        >({{ formatRateLimitTime(account.rateLimitStatus.minutesRemaining) }})</span
                       >
-                        {{ account.sessionWindow.progress }}%
-                      </span>
-                    </div>
-
-                    <!-- 时间信息 -->
-                    <div class="text-xs text-gray-600 dark:text-gray-400">
-                      <div>
-                        {{
-                          formatSessionWindow(
-                            account.sessionWindow.windowStart,
-                            account.sessionWindow.windowEnd
-                          )
-                        }}
-                      </div>
+                    </span>
+                    <span
+                      v-if="account.schedulable === false"
+                      class="inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-700"
+                    >
+                      <i class="fas fa-pause-circle mr-1" />
+                      不可调度
+                      <el-tooltip
+                        v-if="getSchedulableReason(account)"
+                        :content="getSchedulableReason(account)"
+                        effect="dark"
+                        placement="top"
+                      >
+                        <i class="fas fa-question-circle ml-1 cursor-help text-gray-500" />
+                      </el-tooltip>
+                    </span>
+                    <span
+                      v-if="account.status === 'blocked' && account.errorMessage"
+                      class="mt-1 max-w-xs truncate text-xs text-gray-500 dark:text-gray-400"
+                      :title="account.errorMessage"
+                    >
+                      {{ account.errorMessage }}
+                    </span>
+                    <span
+                      v-if="account.accountType === 'dedicated'"
+                      class="text-xs text-gray-500 dark:text-gray-400"
+                    >
+                      绑定: {{ account.boundApiKeysCount || 0 }} 个API Key
+                    </span>
+                  </div>
+                </td>
+                <td class="whitespace-nowrap px-3 py-4">
+                  <div
+                    v-if="
+                      account.platform === 'claude' ||
+                      account.platform === 'claude-console' ||
+                      account.platform === 'bedrock' ||
+                      account.platform === 'gemini' ||
+                      account.platform === 'openai' ||
+                      account.platform === 'openai-responses' ||
+                      account.platform === 'azure_openai' ||
+                      account.platform === 'ccr' ||
+                      account.platform === 'droid' ||
+                      account.platform === 'gemini-api'
+                    "
+                    class="flex items-center gap-2"
+                  >
+                    <div class="h-2 w-16 rounded-full bg-gray-200">
                       <div
-                        v-if="account.sessionWindow.remainingTime > 0"
-                        class="font-medium text-indigo-600 dark:text-indigo-400"
+                        class="h-2 rounded-full bg-gradient-to-r from-green-500 to-blue-600 transition-all duration-300"
+                        :style="{ width: 101 - (account.priority || 50) + '%' }"
+                      />
+                    </div>
+                    <span class="min-w-[20px] text-xs font-medium text-gray-700 dark:text-gray-200">
+                      {{ account.priority || 50 }}
+                    </span>
+                  </div>
+                  <div v-else class="text-sm text-gray-400">
+                    <span class="text-xs">N/A</span>
+                  </div>
+                </td>
+                <td class="px-3 py-4 text-sm text-gray-600">
+                  <div
+                    v-if="formatProxyDisplay(account.proxy)"
+                    class="break-all rounded bg-blue-50 px-2 py-1 font-mono text-xs"
+                    :title="formatProxyDisplay(account.proxy)"
+                  >
+                    {{ formatProxyDisplay(account.proxy) }}
+                  </div>
+                  <div v-else class="text-gray-400">无代理</div>
+                </td>
+                <td class="whitespace-nowrap px-3 py-4 text-sm">
+                  <div v-if="account.usage && account.usage.daily" class="space-y-1">
+                    <div class="flex items-center gap-2">
+                      <div class="h-2 w-2 rounded-full bg-blue-500" />
+                      <span class="text-sm font-medium text-gray-900 dark:text-gray-100"
+                        >{{ account.usage.daily.requests || 0 }} 次</span
                       >
-                        剩余 {{ formatRemainingTime(account.sessionWindow.remainingTime) }}
-                      </div>
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <div class="h-2 w-2 rounded-full bg-purple-500" />
+                      <span class="text-xs text-gray-600 dark:text-gray-300"
+                        >{{ formatNumber(account.usage.daily.allTokens || 0) }}M</span
+                      >
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <div class="h-2 w-2 rounded-full bg-green-500" />
+                      <span class="text-xs text-gray-600 dark:text-gray-300"
+                        >${{ calculateDailyCost(account) }}</span
+                      >
+                    </div>
+                    <div
+                      v-if="account.usage.averages && account.usage.averages.rpm > 0"
+                      class="text-xs text-gray-500 dark:text-gray-400"
+                    >
+                      平均 {{ account.usage.averages.rpm.toFixed(2) }} RPM
                     </div>
                   </div>
-                  <div v-else class="text-xs text-gray-400">暂无统计</div>
-                </div>
-                <!-- Claude Console: 显示每日额度和并发状态 -->
-                <div v-else-if="account.platform === 'claude-console'" class="space-y-3">
-                  <div>
-                    <template v-if="Number(account.dailyQuota) > 0">
-                      <div class="flex items-center justify-between text-xs">
-                        <span class="text-gray-600 dark:text-gray-300">额度进度</span>
-                        <span class="font-medium text-gray-700 dark:text-gray-200">
-                          {{ getQuotaUsagePercent(account).toFixed(1) }}%
-                        </span>
+                  <div v-else class="text-xs text-gray-400">暂无数据</div>
+                </td>
+                <td class="whitespace-nowrap px-3 py-4">
+                  <div v-if="account.platform === 'claude'" class="space-y-2">
+                    <!-- OAuth 账户：显示三窗口 OAuth usage -->
+                    <div v-if="isClaudeOAuth(account) && account.claudeUsage" class="space-y-2">
+                      <!-- 5小时窗口 -->
+                      <div class="rounded-lg bg-gray-50 p-2 dark:bg-gray-700/70">
+                        <div class="flex items-center gap-2">
+                          <span
+                            class="inline-flex min-w-[32px] justify-center rounded-full bg-indigo-100 px-2 py-0.5 text-[11px] font-medium text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-300"
+                          >
+                            5h
+                          </span>
+                          <div class="flex-1">
+                            <div class="flex items-center gap-2">
+                              <div class="h-2 flex-1 rounded-full bg-gray-200 dark:bg-gray-600">
+                                <div
+                                  :class="[
+                                    'h-2 rounded-full transition-all duration-300',
+                                    getClaudeUsageBarClass(account.claudeUsage.fiveHour)
+                                  ]"
+                                  :style="{
+                                    width: getClaudeUsageWidth(account.claudeUsage.fiveHour)
+                                  }"
+                                />
+                              </div>
+                              <span
+                                class="w-12 text-right text-xs font-semibold text-gray-800 dark:text-gray-100"
+                              >
+                                {{ formatClaudeUsagePercent(account.claudeUsage.fiveHour) }}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
+                          重置剩余 {{ formatClaudeRemaining(account.claudeUsage.fiveHour) }}
+                        </div>
                       </div>
+                      <!-- 7天窗口 -->
+                      <div class="rounded-lg bg-gray-50 p-2 dark:bg-gray-700/70">
+                        <div class="flex items-center gap-2">
+                          <span
+                            class="inline-flex min-w-[32px] justify-center rounded-full bg-emerald-100 px-2 py-0.5 text-[11px] font-medium text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-300"
+                          >
+                            7d
+                          </span>
+                          <div class="flex-1">
+                            <div class="flex items-center gap-2">
+                              <div class="h-2 flex-1 rounded-full bg-gray-200 dark:bg-gray-600">
+                                <div
+                                  :class="[
+                                    'h-2 rounded-full transition-all duration-300',
+                                    getClaudeUsageBarClass(account.claudeUsage.sevenDay)
+                                  ]"
+                                  :style="{
+                                    width: getClaudeUsageWidth(account.claudeUsage.sevenDay)
+                                  }"
+                                />
+                              </div>
+                              <span
+                                class="w-12 text-right text-xs font-semibold text-gray-800 dark:text-gray-100"
+                              >
+                                {{ formatClaudeUsagePercent(account.claudeUsage.sevenDay) }}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
+                          重置剩余 {{ formatClaudeRemaining(account.claudeUsage.sevenDay) }}
+                        </div>
+                      </div>
+                      <!-- 7天Opus窗口 -->
+                      <div class="rounded-lg bg-gray-50 p-2 dark:bg-gray-700/70">
+                        <div class="flex items-center gap-2">
+                          <span
+                            class="inline-flex min-w-[32px] justify-center rounded-full bg-purple-100 px-2 py-0.5 text-[11px] font-medium text-purple-600 dark:bg-purple-500/20 dark:text-purple-300"
+                          >
+                            sonnet
+                          </span>
+                          <div class="flex-1">
+                            <div class="flex items-center gap-2">
+                              <div class="h-2 flex-1 rounded-full bg-gray-200 dark:bg-gray-600">
+                                <div
+                                  :class="[
+                                    'h-2 rounded-full transition-all duration-300',
+                                    getClaudeUsageBarClass(account.claudeUsage.sevenDayOpus)
+                                  ]"
+                                  :style="{
+                                    width: getClaudeUsageWidth(account.claudeUsage.sevenDayOpus)
+                                  }"
+                                />
+                              </div>
+                              <span
+                                class="w-12 text-right text-xs font-semibold text-gray-800 dark:text-gray-100"
+                              >
+                                {{ formatClaudeUsagePercent(account.claudeUsage.sevenDayOpus) }}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
+                          重置剩余 {{ formatClaudeRemaining(account.claudeUsage.sevenDayOpus) }}
+                        </div>
+                      </div>
+                    </div>
+                    <!-- Setup Token 账户：显示原有的会话窗口时间进度 -->
+                    <div
+                      v-else-if="
+                        !isClaudeOAuth(account) &&
+                        account.sessionWindow &&
+                        account.sessionWindow.hasActiveWindow
+                      "
+                      class="space-y-2"
+                    >
+                      <!-- 使用统计在顶部 -->
+                      <div
+                        v-if="account.usage && account.usage.sessionWindow"
+                        class="flex items-center gap-3 text-xs"
+                      >
+                        <div class="flex items-center gap-1">
+                          <div class="h-1.5 w-1.5 rounded-full bg-purple-500" />
+                          <span class="font-medium text-gray-900 dark:text-gray-100">
+                            {{ formatNumber(account.usage.sessionWindow.totalTokens) }}M
+                          </span>
+                        </div>
+                        <div class="flex items-center gap-1">
+                          <div class="h-1.5 w-1.5 rounded-full bg-green-500" />
+                          <span class="font-medium text-gray-900 dark:text-gray-100">
+                            ${{ formatCost(account.usage.sessionWindow.totalCost) }}
+                          </span>
+                        </div>
+                      </div>
+
+                      <!-- 进度条 -->
                       <div class="flex items-center gap-2">
                         <div class="h-2 w-24 rounded-full bg-gray-200 dark:bg-gray-700">
                           <div
                             :class="[
                               'h-2 rounded-full transition-all duration-300',
-                              getQuotaBarClass(getQuotaUsagePercent(account))
+                              getSessionProgressBarClass(
+                                account.sessionWindow.sessionWindowStatus,
+                                account
+                              )
                             ]"
-                            :style="{ width: Math.min(100, getQuotaUsagePercent(account)) + '%' }"
+                            :style="{ width: account.sessionWindow.progress + '%' }"
                           />
                         </div>
                         <span
                           class="min-w-[32px] text-xs font-medium text-gray-700 dark:text-gray-200"
                         >
-                          ${{ formatCost(account.usage?.daily?.cost || 0) }} / ${{
-                            Number(account.dailyQuota).toFixed(2)
-                          }}
+                          {{ account.sessionWindow.progress }}%
                         </span>
                       </div>
-                      <div class="text-xs text-gray-600 dark:text-gray-400">
-                        剩余 ${{ formatRemainingQuota(account) }}
-                        <span class="ml-2 text-gray-400"
-                          >重置 {{ account.quotaResetTime || '00:00' }}</span
-                        >
-                      </div>
-                    </template>
-                    <template v-else>
-                      <div class="text-sm text-gray-400">
-                        <i class="fas fa-minus" />
-                      </div>
-                    </template>
-                  </div>
 
-                  <div class="space-y-1">
-                    <div class="flex items-center justify-between text-xs">
-                      <span class="text-gray-600 dark:text-gray-300">并发状态</span>
-                      <span
-                        v-if="Number(account.maxConcurrentTasks || 0) > 0"
-                        class="font-medium text-gray-700 dark:text-gray-200"
-                      >
-                        {{ getConsoleConcurrencyPercent(account).toFixed(0) }}%
-                      </span>
-                    </div>
-                    <div
-                      v-if="Number(account.maxConcurrentTasks || 0) > 0"
-                      class="flex items-center gap-2"
-                    >
-                      <div class="h-2 w-24 rounded-full bg-gray-200 dark:bg-gray-700">
+                      <!-- 时间信息 -->
+                      <div class="text-xs text-gray-600 dark:text-gray-400">
+                        <div>
+                          {{
+                            formatSessionWindow(
+                              account.sessionWindow.windowStart,
+                              account.sessionWindow.windowEnd
+                            )
+                          }}
+                        </div>
                         <div
-                          :class="[
-                            'h-2 rounded-full transition-all duration-300',
-                            getConcurrencyBarClass(getConsoleConcurrencyPercent(account))
-                          ]"
-                          :style="{
-                            width: Math.min(100, getConsoleConcurrencyPercent(account)) + '%'
-                          }"
-                        />
+                          v-if="account.sessionWindow.remainingTime > 0"
+                          class="font-medium text-indigo-600 dark:text-indigo-400"
+                        >
+                          剩余 {{ formatRemainingTime(account.sessionWindow.remainingTime) }}
+                        </div>
                       </div>
-                      <span
-                        :class="[
-                          'min-w-[48px] text-xs font-medium',
-                          getConcurrencyLabelClass(account)
-                        ]"
-                      >
-                        {{ Number(account.activeTaskCount || 0) }} /
-                        {{ Number(account.maxConcurrentTasks || 0) }}
-                      </span>
                     </div>
-                    <div
-                      v-else
-                      class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-500 dark:bg-gray-700 dark:text-gray-300"
-                    >
-                      <i class="fas fa-infinity mr-1" />并发无限制
+                    <div v-else class="text-xs text-gray-400">暂无统计</div>
+                  </div>
+                  <!-- Claude Console: 显示每日额度和并发状态 -->
+                  <div v-else-if="account.platform === 'claude-console'" class="space-y-3">
+                    <div>
+                      <template v-if="Number(account.dailyQuota) > 0">
+                        <div class="flex items-center justify-between text-xs">
+                          <span class="text-gray-600 dark:text-gray-300">额度进度</span>
+                          <span class="font-medium text-gray-700 dark:text-gray-200">
+                            {{ getQuotaUsagePercent(account).toFixed(1) }}%
+                          </span>
+                        </div>
+                        <div class="flex items-center gap-2">
+                          <div class="h-2 w-24 rounded-full bg-gray-200 dark:bg-gray-700">
+                            <div
+                              :class="[
+                                'h-2 rounded-full transition-all duration-300',
+                                getQuotaBarClass(getQuotaUsagePercent(account))
+                              ]"
+                              :style="{ width: Math.min(100, getQuotaUsagePercent(account)) + '%' }"
+                            />
+                          </div>
+                          <span
+                            class="min-w-[32px] text-xs font-medium text-gray-700 dark:text-gray-200"
+                          >
+                            ${{ formatCost(account.usage?.daily?.cost || 0) }} / ${{
+                              Number(account.dailyQuota).toFixed(2)
+                            }}
+                          </span>
+                        </div>
+                        <div class="text-xs text-gray-600 dark:text-gray-400">
+                          剩余 ${{ formatRemainingQuota(account) }}
+                          <span class="ml-2 text-gray-400"
+                            >重置 {{ account.quotaResetTime || '00:00' }}</span
+                          >
+                        </div>
+                      </template>
+                      <template v-else>
+                        <div class="text-sm text-gray-400">
+                          <i class="fas fa-minus" />
+                        </div>
+                      </template>
+                    </div>
+
+                    <div class="space-y-1">
+                      <div class="flex items-center justify-between text-xs">
+                        <span class="text-gray-600 dark:text-gray-300">并发状态</span>
+                        <span
+                          v-if="Number(account.maxConcurrentTasks || 0) > 0"
+                          class="font-medium text-gray-700 dark:text-gray-200"
+                        >
+                          {{ getConsoleConcurrencyPercent(account).toFixed(0) }}%
+                        </span>
+                      </div>
+                      <div
+                        v-if="Number(account.maxConcurrentTasks || 0) > 0"
+                        class="flex items-center gap-2"
+                      >
+                        <div class="h-2 w-24 rounded-full bg-gray-200 dark:bg-gray-700">
+                          <div
+                            :class="[
+                              'h-2 rounded-full transition-all duration-300',
+                              getConcurrencyBarClass(getConsoleConcurrencyPercent(account))
+                            ]"
+                            :style="{
+                              width: Math.min(100, getConsoleConcurrencyPercent(account)) + '%'
+                            }"
+                          />
+                        </div>
+                        <span
+                          :class="[
+                            'min-w-[48px] text-xs font-medium',
+                            getConcurrencyLabelClass(account)
+                          ]"
+                        >
+                          {{ Number(account.activeTaskCount || 0) }} /
+                          {{ Number(account.maxConcurrentTasks || 0) }}
+                        </span>
+                      </div>
+                      <div
+                        v-else
+                        class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-500 dark:bg-gray-700 dark:text-gray-300"
+                      >
+                        <i class="fas fa-infinity mr-1" />并发无限制
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div v-else-if="account.platform === 'openai'" class="space-y-2">
-                  <div v-if="account.codexUsage" class="space-y-2">
-                    <div class="rounded-lg bg-gray-50 p-2 dark:bg-gray-700/70">
-                      <div class="flex items-center gap-2">
-                        <span
-                          class="inline-flex min-w-[32px] justify-center rounded-full bg-indigo-100 px-2 py-0.5 text-[11px] font-medium text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-300"
-                        >
-                          {{ getCodexWindowLabel('primary') }}
-                        </span>
-                        <div class="flex-1">
-                          <div class="flex items-center gap-2">
-                            <div class="h-2 flex-1 rounded-full bg-gray-200 dark:bg-gray-600">
-                              <div
-                                :class="[
-                                  'h-2 rounded-full transition-all duration-300',
-                                  getCodexUsageBarClass(account.codexUsage.primary)
-                                ]"
-                                :style="{
-                                  width: getCodexUsageWidth(account.codexUsage.primary)
-                                }"
-                              />
+                  <div v-else-if="account.platform === 'openai'" class="space-y-2">
+                    <div v-if="account.codexUsage" class="space-y-2">
+                      <div class="rounded-lg bg-gray-50 p-2 dark:bg-gray-700/70">
+                        <div class="flex items-center gap-2">
+                          <span
+                            class="inline-flex min-w-[32px] justify-center rounded-full bg-indigo-100 px-2 py-0.5 text-[11px] font-medium text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-300"
+                          >
+                            {{ getCodexWindowLabel('primary') }}
+                          </span>
+                          <div class="flex-1">
+                            <div class="flex items-center gap-2">
+                              <div class="h-2 flex-1 rounded-full bg-gray-200 dark:bg-gray-600">
+                                <div
+                                  :class="[
+                                    'h-2 rounded-full transition-all duration-300',
+                                    getCodexUsageBarClass(account.codexUsage.primary)
+                                  ]"
+                                  :style="{
+                                    width: getCodexUsageWidth(account.codexUsage.primary)
+                                  }"
+                                />
+                              </div>
+                              <span
+                                class="w-12 text-right text-xs font-semibold text-gray-800 dark:text-gray-100"
+                              >
+                                {{ formatCodexUsagePercent(account.codexUsage.primary) }}
+                              </span>
                             </div>
-                            <span
-                              class="w-12 text-right text-xs font-semibold text-gray-800 dark:text-gray-100"
-                            >
-                              {{ formatCodexUsagePercent(account.codexUsage.primary) }}
-                            </span>
                           </div>
                         </div>
+                        <div class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
+                          重置剩余 {{ formatCodexRemaining(account.codexUsage.primary) }}
+                        </div>
                       </div>
-                      <div class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
-                        重置剩余 {{ formatCodexRemaining(account.codexUsage.primary) }}
+                      <div class="rounded-lg bg-gray-50 p-2 dark:bg-gray-700/70">
+                        <div class="flex items-center gap-2">
+                          <span
+                            class="inline-flex min-w-[32px] justify-center rounded-full bg-blue-100 px-2 py-0.5 text-[11px] font-medium text-blue-600 dark:bg-blue-500/20 dark:text-blue-300"
+                          >
+                            {{ getCodexWindowLabel('secondary') }}
+                          </span>
+                          <div class="flex-1">
+                            <div class="flex items-center gap-2">
+                              <div class="h-2 flex-1 rounded-full bg-gray-200 dark:bg-gray-600">
+                                <div
+                                  :class="[
+                                    'h-2 rounded-full transition-all duration-300',
+                                    getCodexUsageBarClass(account.codexUsage.secondary)
+                                  ]"
+                                  :style="{
+                                    width: getCodexUsageWidth(account.codexUsage.secondary)
+                                  }"
+                                />
+                              </div>
+                              <span
+                                class="w-12 text-right text-xs font-semibold text-gray-800 dark:text-gray-100"
+                              >
+                                {{ formatCodexUsagePercent(account.codexUsage.secondary) }}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
+                          重置剩余 {{ formatCodexRemaining(account.codexUsage.secondary) }}
+                        </div>
                       </div>
                     </div>
-                    <div class="rounded-lg bg-gray-50 p-2 dark:bg-gray-700/70">
-                      <div class="flex items-center gap-2">
-                        <span
-                          class="inline-flex min-w-[32px] justify-center rounded-full bg-blue-100 px-2 py-0.5 text-[11px] font-medium text-blue-600 dark:bg-blue-500/20 dark:text-blue-300"
-                        >
-                          {{ getCodexWindowLabel('secondary') }}
-                        </span>
-                        <div class="flex-1">
-                          <div class="flex items-center gap-2">
-                            <div class="h-2 flex-1 rounded-full bg-gray-200 dark:bg-gray-600">
-                              <div
-                                :class="[
-                                  'h-2 rounded-full transition-all duration-300',
-                                  getCodexUsageBarClass(account.codexUsage.secondary)
-                                ]"
-                                :style="{
-                                  width: getCodexUsageWidth(account.codexUsage.secondary)
-                                }"
-                              />
-                            </div>
-                            <span
-                              class="w-12 text-right text-xs font-semibold text-gray-800 dark:text-gray-100"
-                            >
-                              {{ formatCodexUsagePercent(account.codexUsage.secondary) }}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
-                        重置剩余 {{ formatCodexRemaining(account.codexUsage.secondary) }}
-                      </div>
+                    <div v-else class="text-sm text-gray-400">
+                      <span class="text-xs">N/A</span>
                     </div>
                   </div>
                   <div v-else class="text-sm text-gray-400">
                     <span class="text-xs">N/A</span>
                   </div>
-                </div>
-                <div v-else class="text-sm text-gray-400">
-                  <span class="text-xs">N/A</span>
-                </div>
-              </td>
-              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-600 dark:text-gray-300">
-                {{ formatLastUsed(account.lastUsedAt) }}
-              </td>
-              <td class="whitespace-nowrap px-3 py-4 text-sm font-medium">
-                <div class="flex flex-wrap items-center gap-1">
-                  <button
-                    v-if="
-                      (account.platform === 'claude' ||
-                        account.platform === 'claude-console' ||
-                        account.platform === 'openai' ||
-                        account.platform === 'openai-responses' ||
-                        account.platform === 'gemini' ||
-                        account.platform === 'gemini-api' ||
-                        account.platform === 'ccr') &&
-                      (account.status === 'unauthorized' ||
-                        account.status !== 'active' ||
-                        account.rateLimitStatus?.isRateLimited ||
-                        account.rateLimitStatus === 'limited' ||
-                        !account.isActive)
-                    "
-                    :class="[
-                      'rounded px-2.5 py-1 text-xs font-medium transition-colors',
-                      account.isResetting
-                        ? 'cursor-not-allowed bg-gray-100 text-gray-400'
-                        : 'bg-yellow-100 text-yellow-700 hover:bg-yellow-200'
-                    ]"
-                    :disabled="account.isResetting"
-                    :title="account.isResetting ? '重置中...' : '重置所有异常状态'"
-                    @click="resetAccountStatus(account)"
-                  >
-                    <i :class="['fas fa-redo', account.isResetting ? 'animate-spin' : '']" />
-                    <span class="ml-1">重置状态</span>
-                  </button>
-                  <button
-                    :class="[
-                      'rounded px-2.5 py-1 text-xs font-medium transition-colors',
-                      account.isTogglingSchedulable
-                        ? 'cursor-not-allowed bg-gray-100 text-gray-400'
-                        : account.schedulable
-                          ? 'bg-green-100 text-green-700 hover:bg-green-200'
-                          : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                    ]"
-                    :disabled="account.isTogglingSchedulable"
-                    :title="account.schedulable ? '点击禁用调度' : '点击启用调度'"
-                    @click="toggleSchedulable(account)"
-                  >
-                    <i :class="['fas', account.schedulable ? 'fa-toggle-on' : 'fa-toggle-off']" />
-                    <span class="ml-1">{{ account.schedulable ? '调度' : '停用' }}</span>
-                  </button>
-                  <button
-                    v-if="canViewUsage(account)"
-                    class="rounded bg-indigo-100 px-2.5 py-1 text-xs font-medium text-indigo-700 transition-colors hover:bg-indigo-200"
-                    :title="'查看使用详情'"
-                    @click="openAccountUsageModal(account)"
-                  >
-                    <i class="fas fa-chart-line" />
-                    <span class="ml-1">详情</span>
-                  </button>
-                  <button
-                    v-if="canTestAccount(account)"
-                    class="rounded bg-cyan-100 px-2.5 py-1 text-xs font-medium text-cyan-700 transition-colors hover:bg-cyan-200 dark:bg-cyan-900/40 dark:text-cyan-300 dark:hover:bg-cyan-800/50"
-                    :title="'测试账户连通性'"
-                    @click="openAccountTestModal(account)"
-                  >
-                    <i class="fas fa-vial" />
-                    <span class="ml-1">测试</span>
-                  </button>
-                  <button
-                    class="rounded bg-blue-100 px-2.5 py-1 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-200"
-                    :title="'编辑账户'"
-                    @click="editAccount(account)"
-                  >
-                    <i class="fas fa-edit" />
-                    <span class="ml-1">编辑</span>
-                  </button>
-                  <button
-                    class="rounded bg-red-100 px-2.5 py-1 text-xs font-medium text-red-700 transition-colors hover:bg-red-200"
-                    :title="'删除账户'"
-                    @click="deleteAccount(account)"
-                  >
-                    <i class="fas fa-trash" />
-                    <span class="ml-1">删除</span>
-                  </button>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                </td>
+                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-600 dark:text-gray-300">
+                  {{ formatLastUsed(account.lastUsedAt) }}
+                </td>
+                <td
+                  class="operations-column sticky right-0 z-10 whitespace-nowrap px-3 py-4 text-sm font-medium"
+                >
+                  <!-- 大屏显示所有按钮 -->
+                  <div class="hidden items-center gap-1 2xl:flex">
+                    <button
+                      v-if="showResetButton(account)"
+                      :class="[
+                        'rounded px-2.5 py-1 text-xs font-medium transition-colors',
+                        account.isResetting
+                          ? 'cursor-not-allowed bg-gray-100 text-gray-400'
+                          : 'bg-yellow-100 text-yellow-700 hover:bg-yellow-200'
+                      ]"
+                      :disabled="account.isResetting"
+                      :title="account.isResetting ? '重置中...' : '重置所有异常状态'"
+                      @click="resetAccountStatus(account)"
+                    >
+                      <i :class="['fas fa-redo', account.isResetting ? 'animate-spin' : '']" />
+                      <span class="ml-1">重置状态</span>
+                    </button>
+                    <button
+                      :class="[
+                        'rounded px-2.5 py-1 text-xs font-medium transition-colors',
+                        account.isTogglingSchedulable
+                          ? 'cursor-not-allowed bg-gray-100 text-gray-400'
+                          : account.schedulable
+                            ? 'bg-green-100 text-green-700 hover:bg-green-200'
+                            : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                      ]"
+                      :disabled="account.isTogglingSchedulable"
+                      :title="account.schedulable ? '点击禁用调度' : '点击启用调度'"
+                      @click="toggleSchedulable(account)"
+                    >
+                      <i :class="['fas', account.schedulable ? 'fa-toggle-on' : 'fa-toggle-off']" />
+                      <span class="ml-1">{{ account.schedulable ? '调度' : '停用' }}</span>
+                    </button>
+                    <button
+                      v-if="canViewUsage(account)"
+                      class="rounded bg-indigo-100 px-2.5 py-1 text-xs font-medium text-indigo-700 transition-colors hover:bg-indigo-200"
+                      title="查看使用详情"
+                      @click="openAccountUsageModal(account)"
+                    >
+                      <i class="fas fa-chart-line" />
+                      <span class="ml-1">详情</span>
+                    </button>
+                    <button
+                      v-if="canTestAccount(account)"
+                      class="rounded bg-cyan-100 px-2.5 py-1 text-xs font-medium text-cyan-700 transition-colors hover:bg-cyan-200 dark:bg-cyan-900/40 dark:text-cyan-300 dark:hover:bg-cyan-800/50"
+                      title="测试账户连通性"
+                      @click="openAccountTestModal(account)"
+                    >
+                      <i class="fas fa-vial" />
+                      <span class="ml-1">测试</span>
+                    </button>
+                    <button
+                      class="rounded bg-blue-100 px-2.5 py-1 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-200"
+                      title="编辑账户"
+                      @click="editAccount(account)"
+                    >
+                      <i class="fas fa-edit" />
+                      <span class="ml-1">编辑</span>
+                    </button>
+                    <button
+                      class="rounded bg-red-100 px-2.5 py-1 text-xs font-medium text-red-700 transition-colors hover:bg-red-200"
+                      title="删除账户"
+                      @click="deleteAccount(account)"
+                    >
+                      <i class="fas fa-trash" />
+                      <span class="ml-1">删除</span>
+                    </button>
+                  </div>
+                  <!-- 小屏显示：2个快捷按钮 + 下拉菜单 -->
+                  <div class="flex items-center gap-1 2xl:hidden">
+                    <button
+                      :class="[
+                        'rounded px-2.5 py-1 text-xs font-medium transition-colors',
+                        account.isTogglingSchedulable
+                          ? 'cursor-not-allowed bg-gray-100 text-gray-400'
+                          : account.schedulable
+                            ? 'bg-green-100 text-green-700 hover:bg-green-200'
+                            : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                      ]"
+                      :disabled="account.isTogglingSchedulable"
+                      :title="account.schedulable ? '点击禁用调度' : '点击启用调度'"
+                      @click="toggleSchedulable(account)"
+                    >
+                      <i :class="['fas', account.schedulable ? 'fa-toggle-on' : 'fa-toggle-off']" />
+                      <span class="ml-1">{{ account.schedulable ? '调度' : '停用' }}</span>
+                    </button>
+                    <button
+                      class="rounded bg-blue-100 px-2.5 py-1 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-200"
+                      title="编辑账户"
+                      @click="editAccount(account)"
+                    >
+                      <i class="fas fa-edit" />
+                      <span class="ml-1">编辑</span>
+                    </button>
+                    <ActionDropdown :actions="getAccountActions(account)" />
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
 
       <!-- 移动端卡片视图 -->
@@ -1824,6 +1864,7 @@ import AccountExpiryEditModal from '@/components/accounts/AccountExpiryEditModal
 import AccountTestModal from '@/components/accounts/AccountTestModal.vue'
 import ConfirmModal from '@/components/common/ConfirmModal.vue'
 import CustomDropdown from '@/components/common/CustomDropdown.vue'
+import ActionDropdown from '@/components/common/ActionDropdown.vue'
 
 // 使用确认弹窗
 const { showConfirmModal, confirmOptions, showConfirm, handleConfirm, handleCancel } = useConfirm()
@@ -2010,6 +2051,76 @@ const accountMatchesKeyword = (account, normalizedKeyword) => {
 
 const canViewUsage = (account) => !!account && supportedUsagePlatforms.includes(account.platform)
 
+// 判断是否显示重置状态按钮
+const showResetButton = (account) => {
+  const supportedPlatforms = [
+    'claude',
+    'claude-console',
+    'openai',
+    'openai-responses',
+    'gemini',
+    'gemini-api',
+    'ccr'
+  ]
+  return (
+    supportedPlatforms.includes(account.platform) &&
+    (account.status === 'unauthorized' ||
+      account.status !== 'active' ||
+      account.rateLimitStatus?.isRateLimited ||
+      account.rateLimitStatus === 'limited' ||
+      !account.isActive)
+  )
+}
+
+// 获取账户操作菜单项（用于小屏下拉菜单）
+const getAccountActions = (account) => {
+  const actions = []
+
+  // 重置状态（仅在需要时显示）
+  if (showResetButton(account)) {
+    actions.push({
+      key: 'reset',
+      label: '重置状态',
+      icon: 'fa-redo',
+      color: 'orange',
+      handler: () => resetAccountStatus(account)
+    })
+  }
+
+  // 查看详情
+  if (canViewUsage(account)) {
+    actions.push({
+      key: 'usage',
+      label: '详情',
+      icon: 'fa-chart-line',
+      color: 'indigo',
+      handler: () => openAccountUsageModal(account)
+    })
+  }
+
+  // 测试账户
+  if (canTestAccount(account)) {
+    actions.push({
+      key: 'test',
+      label: '测试',
+      icon: 'fa-vial',
+      color: 'blue',
+      handler: () => openAccountTestModal(account)
+    })
+  }
+
+  // 删除
+  actions.push({
+    key: 'delete',
+    label: '删除',
+    icon: 'fa-trash',
+    color: 'red',
+    handler: () => deleteAccount(account)
+  })
+
+  return actions
+}
+
 const openAccountUsageModal = async (account) => {
   if (!canViewUsage(account)) {
     showToast('该账户类型暂不支持查看详情', 'warning')
@@ -4018,19 +4129,11 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.table-container {
-  border-radius: 12px;
-  border: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.table-row {
-  transition: all 0.2s ease;
-}
-
-.table-row:hover {
-  background-color: rgba(0, 0, 0, 0.02);
+.accounts-container {
+  min-height: calc(100vh - 300px);
 }
 
+/* 加载动画 */
 .loading-spinner {
   width: 24px;
   height: 24px;
@@ -4048,10 +4151,68 @@ onMounted(() => {
     transform: rotate(360deg);
   }
 }
-.accounts-container {
-  min-height: calc(100vh - 300px);
+
+/* 表格外层包装器 - 圆角和边框 */
+.table-wrapper {
+  overflow: hidden;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
 }
 
+.dark .table-wrapper {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+/* 表格内层容器 - 横向滚动 */
+.table-container {
+  overflow-x: auto;
+  overflow-y: hidden;
+  margin: 0;
+  padding: 0;
+  max-width: 100%;
+  position: relative;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 防止表格内容溢出，保证横向滚动 */
+.table-container table {
+  min-width: 1400px;
+  border-collapse: collapse;
+  table-layout: auto;
+}
+
+/* 滚动条样式 */
+.table-container::-webkit-scrollbar {
+  height: 8px;
+}
+
+.table-container::-webkit-scrollbar-track {
+  background: #f3f4f6;
+  border-radius: 4px;
+}
+
+.table-container::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 4px;
+}
+
+.table-container::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}
+
+.dark .table-container::-webkit-scrollbar-track {
+  background: #374151;
+}
+
+.dark .table-container::-webkit-scrollbar-thumb {
+  background: #4b5563;
+}
+
+.dark .table-container::-webkit-scrollbar-thumb:hover {
+  background: #6b7280;
+}
+
+/* 表格行样式 */
 .table-row {
   transition: all 0.2s ease;
 }
@@ -4059,4 +4220,106 @@ onMounted(() => {
 .table-row:hover {
   background-color: rgba(0, 0, 0, 0.02);
 }
+
+.dark .table-row:hover {
+  background-color: rgba(255, 255, 255, 0.02);
+}
+
+/* 表头左侧固定列背景 */
+.table-container thead .checkbox-column,
+.table-container thead .name-column {
+  z-index: 30;
+  background: linear-gradient(to bottom, #f9fafb, rgba(243, 244, 246, 0.9));
+}
+
+.dark .table-container thead .checkbox-column,
+.dark .table-container thead .name-column {
+  background: linear-gradient(to bottom, #374151, rgba(31, 41, 55, 0.9));
+}
+
+/* 表头右侧操作列背景 */
+.table-container thead .operations-column {
+  z-index: 30;
+  background: linear-gradient(to bottom, #f9fafb, rgba(243, 244, 246, 0.9));
+}
+
+.dark .table-container thead .operations-column {
+  background: linear-gradient(to bottom, #374151, rgba(31, 41, 55, 0.9));
+}
+
+/* tbody 中的左侧固定列背景处理 */
+.table-container tbody tr:nth-child(odd) .checkbox-column,
+.table-container tbody tr:nth-child(odd) .name-column {
+  background-color: #ffffff;
+}
+
+.table-container tbody tr:nth-child(even) .checkbox-column,
+.table-container tbody tr:nth-child(even) .name-column {
+  background-color: rgba(249, 250, 251, 0.7);
+}
+
+.dark .table-container tbody tr:nth-child(odd) .checkbox-column,
+.dark .table-container tbody tr:nth-child(odd) .name-column {
+  background-color: rgba(31, 41, 55, 0.4);
+}
+
+.dark .table-container tbody tr:nth-child(even) .checkbox-column,
+.dark .table-container tbody tr:nth-child(even) .name-column {
+  background-color: rgba(55, 65, 81, 0.3);
+}
+
+/* hover 状态下的左侧固定列背景 */
+.table-container tbody tr:hover .checkbox-column,
+.table-container tbody tr:hover .name-column {
+  background-color: rgba(239, 246, 255, 0.6);
+}
+
+.dark .table-container tbody tr:hover .checkbox-column,
+.dark .table-container tbody tr:hover .name-column {
+  background-color: rgba(30, 58, 138, 0.2);
+}
+
+/* 名称列右侧阴影（分隔效果） */
+.table-container tbody .name-column {
+  box-shadow: 8px 0 12px -8px rgba(15, 23, 42, 0.16);
+}
+
+.dark .table-container tbody .name-column {
+  box-shadow: 8px 0 12px -8px rgba(30, 41, 59, 0.45);
+}
+
+/* tbody 中的操作列背景处理 */
+.table-container tbody tr:nth-child(odd) .operations-column {
+  background-color: #ffffff;
+}
+
+.table-container tbody tr:nth-child(even) .operations-column {
+  background-color: rgba(249, 250, 251, 0.7);
+}
+
+.dark .table-container tbody tr:nth-child(odd) .operations-column {
+  background-color: rgba(31, 41, 55, 0.4);
+}
+
+.dark .table-container tbody tr:nth-child(even) .operations-column {
+  background-color: rgba(55, 65, 81, 0.3);
+}
+
+/* hover 状态下的操作列背景 */
+.table-container tbody tr:hover .operations-column {
+  background-color: rgba(239, 246, 255, 0.6);
+}
+
+.dark .table-container tbody tr:hover .operations-column {
+  background-color: rgba(30, 58, 138, 0.2);
+}
+
+/* 操作列左侧阴影 */
+.table-container tbody .operations-column {
+  box-shadow: -8px 0 12px -8px rgba(15, 23, 42, 0.16);
+}
+
+.dark .table-container tbody .operations-column {
+  box-shadow: -8px 0 12px -8px rgba(30, 41, 59, 0.45);
+}
 </style>
diff --git a/web/admin-spa/src/views/ApiKeysView.vue b/web/admin-spa/src/views/ApiKeysView.vue
index d68fe6d3..c190d4c7 100644
--- a/web/admin-spa/src/views/ApiKeysView.vue
+++ b/web/admin-spa/src/views/ApiKeysView.vue
@@ -253,12 +253,15 @@
           <!-- 桌面端表格视图 -->
           <div v-else class="table-wrapper hidden md:block">
             <div class="table-container">
-              <table class="w-full table-fixed">
+              <table class="w-full">
                 <thead
                   class="sticky top-0 z-10 bg-gradient-to-b from-gray-50 to-gray-100/90 backdrop-blur-sm dark:from-gray-700 dark:to-gray-800/90"
                 >
                   <tr>
-                    <th v-if="shouldShowCheckboxes" class="w-[50px] px-3 py-4 text-left">
+                    <th
+                      v-if="shouldShowCheckboxes"
+                      class="checkbox-column sticky left-0 z-20 min-w-[50px] px-3 py-4 text-left"
+                    >
                       <div class="flex items-center">
                         <input
                           v-model="selectAllChecked"
@@ -270,7 +273,8 @@
                       </div>
                     </th>
                     <th
-                      class="w-[14%] min-w-[120px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
+                      class="name-column sticky z-20 min-w-[140px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
+                      :class="shouldShowCheckboxes ? 'left-[50px]' : 'left-0'"
                       @click="sortApiKeys('name')"
                     >
                       名称
@@ -285,17 +289,17 @@
                       <i v-else class="fas fa-sort ml-1 text-gray-400" />
                     </th>
                     <th
-                      class="w-[15%] min-w-[120px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                      class="min-w-[140px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
                     >
                       所属账号
                     </th>
                     <th
-                      class="w-[10%] min-w-[80px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                      class="min-w-[100px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
                     >
                       标签
                     </th>
                     <th
-                      class="w-[6%] min-w-[60px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
+                      class="min-w-[80px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
                       @click="sortApiKeys('status')"
                     >
                       状态
@@ -310,7 +314,7 @@
                       <i v-else class="fas fa-sort ml-1 text-gray-400" />
                     </th>
                     <th
-                      class="w-[4%] min-w-[40px] px-3 py-4 text-right text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                      class="min-w-[70px] px-3 py-4 text-right text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
                       :class="{
                         'cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600': canSortByCost,
                         'cursor-not-allowed opacity-60': !canSortByCost
@@ -331,22 +335,22 @@
                       <i v-else class="fas fa-clock ml-1 text-gray-400" title="索引更新中" />
                     </th>
                     <th
-                      class="w-[14%] min-w-[120px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                      class="min-w-[180px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
                     >
                       限制
                     </th>
                     <th
-                      class="w-[5%] min-w-[45px] px-3 py-4 text-right text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                      class="min-w-[80px] px-3 py-4 text-right text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
                     >
                       Token
                     </th>
                     <th
-                      class="w-[5%] min-w-[45px] px-3 py-4 text-right text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                      class="min-w-[80px] px-3 py-4 text-right text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
                     >
                       请求数
                     </th>
                     <th
-                      class="w-[8%] min-w-[70px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
+                      class="min-w-[100px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
                       @click="sortApiKeys('lastUsedAt')"
                     >
                       最后使用
@@ -361,7 +365,7 @@
                       <i v-else class="fas fa-sort ml-1 text-gray-400" />
                     </th>
                     <th
-                      class="w-[8%] min-w-[70px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
+                      class="min-w-[100px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
                       @click="sortApiKeys('createdAt')"
                     >
                       创建时间
@@ -376,7 +380,7 @@
                       <i v-else class="fas fa-sort ml-1 text-gray-400" />
                     </th>
                     <th
-                      class="w-[8%] min-w-[70px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
+                      class="min-w-[100px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
                       @click="sortApiKeys('expiresAt')"
                     >
                       过期时间
@@ -391,7 +395,7 @@
                       <i v-else class="fas fa-sort ml-1 text-gray-400" />
                     </th>
                     <th
-                      class="operations-column sticky right-0 w-[23%] min-w-[200px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                      class="operations-column sticky right-0 min-w-[120px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
                     >
                       操作
                     </th>
@@ -410,7 +414,10 @@
                         'hover:bg-blue-50/60 hover:shadow-sm dark:hover:bg-blue-900/20'
                       ]"
                     >
-                      <td v-if="shouldShowCheckboxes" class="px-3 py-3">
+                      <td
+                        v-if="shouldShowCheckboxes"
+                        class="checkbox-column sticky left-0 z-10 px-3 py-3"
+                      >
                         <div class="flex items-center">
                           <input
                             v-model="selectedApiKeys"
@@ -421,7 +428,10 @@
                           />
                         </div>
                       </td>
-                      <td class="px-3 py-3">
+                      <td
+                        class="name-column sticky z-10 px-3 py-3"
+                        :class="shouldShowCheckboxes ? 'left-[50px]' : 'left-0'"
+                      >
                         <div class="min-w-0">
                           <!-- 名称 -->
                           <div
@@ -854,14 +864,15 @@
                         class="operations-column operations-cell whitespace-nowrap px-3 py-3"
                         style="font-size: 13px"
                       >
-                        <div class="flex gap-1">
+                        <!-- 大屏幕：展开所有按钮 -->
+                        <div class="hidden gap-1 2xl:flex">
                           <button
                             class="rounded px-2 py-1 text-xs font-medium text-purple-600 transition-colors hover:bg-purple-50 hover:text-purple-900 dark:hover:bg-purple-900/20"
                             title="查看详细统计"
                             @click="showUsageDetails(key)"
                           >
                             <i class="fas fa-chart-line" />
-                            <span class="ml-1 hidden xl:inline">详情</span>
+                            <span class="ml-1">详情</span>
                           </button>
                           <button
                             v-if="key && key.id"
@@ -875,7 +886,7 @@
                                 expandedApiKeys[key.id] ? 'fa-chevron-up' : 'fa-chevron-down'
                               ]"
                             />
-                            <span class="ml-1 hidden xl:inline">模型</span>
+                            <span class="ml-1">模型</span>
                           </button>
                           <button
                             class="rounded px-2 py-1 text-xs font-medium text-blue-600 transition-colors hover:bg-blue-50 hover:text-blue-900 dark:hover:bg-blue-900/20"
@@ -883,7 +894,7 @@
                             @click="openEditApiKeyModal(key)"
                           >
                             <i class="fas fa-edit" />
-                            <span class="ml-1 hidden xl:inline">编辑</span>
+                            <span class="ml-1">编辑</span>
                           </button>
                           <button
                             v-if="
@@ -896,7 +907,7 @@
                             @click="openRenewApiKeyModal(key)"
                           >
                             <i class="fas fa-clock" />
-                            <span class="ml-1 hidden xl:inline">续期</span>
+                            <span class="ml-1">续期</span>
                           </button>
                           <button
                             :class="[
@@ -909,9 +920,7 @@
                             @click="toggleApiKeyStatus(key)"
                           >
                             <i :class="['fas', key.isActive ? 'fa-ban' : 'fa-check-circle']" />
-                            <span class="ml-1 hidden xl:inline">{{
-                              key.isActive ? '禁用' : '激活'
-                            }}</span>
+                            <span class="ml-1">{{ key.isActive ? '禁用' : '激活' }}</span>
                           </button>
                           <button
                             class="rounded px-2 py-1 text-xs font-medium text-red-600 transition-colors hover:bg-red-50 hover:text-red-900 dark:hover:bg-red-900/20"
@@ -919,9 +928,35 @@
                             @click="deleteApiKey(key.id)"
                           >
                             <i class="fas fa-trash" />
-                            <span class="ml-1 hidden xl:inline">删除</span>
+                            <span class="ml-1">删除</span>
                           </button>
                         </div>
+                        <!-- 小屏幕：常用按钮 + 下拉菜单 -->
+                        <div class="flex items-center gap-1 2xl:hidden">
+                          <!-- 始终显示的快捷按钮 -->
+                          <button
+                            class="rounded px-2 py-1 text-xs font-medium text-purple-600 transition-colors hover:bg-purple-50 hover:text-purple-900 dark:hover:bg-purple-900/20"
+                            title="查看详细统计"
+                            @click="showUsageDetails(key)"
+                          >
+                            <i class="fas fa-chart-line" />
+                          </button>
+                          <button
+                            v-if="key && key.id"
+                            class="rounded px-2 py-1 text-xs font-medium text-indigo-600 transition-colors hover:bg-indigo-50 hover:text-indigo-900 dark:hover:bg-indigo-900/20"
+                            title="模型使用分布"
+                            @click="toggleApiKeyModelStats(key.id)"
+                          >
+                            <i
+                              :class="[
+                                'fas',
+                                expandedApiKeys[key.id] ? 'fa-chevron-up' : 'fa-chevron-down'
+                              ]"
+                            />
+                          </button>
+                          <!-- 更多操作下拉菜单 -->
+                          <ActionDropdown :actions="getApiKeyActions(key)" />
+                        </div>
                       </td>
                     </tr>
 
@@ -1722,62 +1757,64 @@
 
             <div class="table-wrapper">
               <div class="table-container">
-                <table class="w-full table-fixed">
-                  <thead class="bg-gray-50/80 backdrop-blur-sm dark:bg-gray-700/80">
+                <table class="w-full">
+                  <thead
+                    class="sticky top-0 z-10 bg-gradient-to-b from-gray-50 to-gray-100/90 backdrop-blur-sm dark:from-gray-700 dark:to-gray-800/90"
+                  >
                     <tr>
                       <th
-                        class="w-[14%] min-w-[120px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                        class="name-column sticky left-0 z-20 min-w-[140px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
                       >
                         名称
                       </th>
                       <th
-                        class="w-[15%] min-w-[120px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                        class="min-w-[140px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
                       >
                         所属账号
                       </th>
                       <th
                         v-if="isLdapEnabled"
-                        class="w-[15%] min-w-[120px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                        class="min-w-[120px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
                       >
                         创建者
                       </th>
                       <th
-                        class="w-[15%] min-w-[120px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                        class="min-w-[120px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
                       >
                         创建时间
                       </th>
                       <th
-                        class="w-[10%] min-w-[90px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                        class="min-w-[100px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
                       >
                         删除者
                       </th>
                       <th
-                        class="w-[10%] min-w-[90px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                        class="min-w-[100px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
                       >
                         删除时间
                       </th>
                       <th
-                        class="w-[8%] min-w-[60px] px-3 py-4 text-right text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                        class="min-w-[70px] px-3 py-4 text-right text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
                       >
                         费用
                       </th>
                       <th
-                        class="w-[8%] min-w-[60px] px-3 py-4 text-right text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                        class="min-w-[80px] px-3 py-4 text-right text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
                       >
                         Token
                       </th>
                       <th
-                        class="w-[8%] min-w-[60px] px-3 py-4 text-right text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                        class="min-w-[80px] px-3 py-4 text-right text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
                       >
                         请求数
                       </th>
                       <th
-                        class="w-[9%] min-w-[80px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                        class="min-w-[100px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
                       >
                         最后使用
                       </th>
                       <th
-                        class="operations-column sticky right-0 w-[15%] min-w-[160px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                        class="operations-column sticky right-0 min-w-[140px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
                       >
                         操作
                       </th>
@@ -1785,7 +1822,7 @@
                   </thead>
                   <tbody class="divide-y divide-gray-200/50 dark:divide-gray-600/50">
                     <tr v-for="key in deletedApiKeys" :key="key.id" class="table-row">
-                      <td class="px-3 py-3">
+                      <td class="name-column sticky left-0 z-10 px-3 py-3">
                         <div class="flex items-center">
                           <div
                             class="mr-2 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-red-500 to-red-600"
@@ -2074,6 +2111,7 @@ import ExpiryEditModal from '@/components/apikeys/ExpiryEditModal.vue'
 import UsageDetailModal from '@/components/apikeys/UsageDetailModal.vue'
 import LimitProgressBar from '@/components/apikeys/LimitProgressBar.vue'
 import CustomDropdown from '@/components/common/CustomDropdown.vue'
+import ActionDropdown from '@/components/common/ActionDropdown.vue'
 
 // 响应式数据
 const clientsStore = useClientsStore()
@@ -3705,6 +3743,50 @@ const handleRenewSuccess = () => {
   loadApiKeys()
 }
 
+// 获取API Key的操作菜单项（用于ActionDropdown）
+const getApiKeyActions = (key) => {
+  const actions = [
+    {
+      key: 'edit',
+      label: '编辑',
+      icon: 'fa-edit',
+      color: 'blue',
+      handler: () => openEditApiKeyModal(key)
+    }
+  ]
+
+  // 如果需要续期
+  if (key.expiresAt && (isApiKeyExpired(key.expiresAt) || isApiKeyExpiringSoon(key.expiresAt))) {
+    actions.push({
+      key: 'renew',
+      label: '续期',
+      icon: 'fa-clock',
+      color: 'green',
+      handler: () => openRenewApiKeyModal(key)
+    })
+  }
+
+  // 激活/禁用
+  actions.push({
+    key: 'toggle',
+    label: key.isActive ? '禁用' : '激活',
+    icon: key.isActive ? 'fa-ban' : 'fa-check-circle',
+    color: key.isActive ? 'orange' : 'green',
+    handler: () => toggleApiKeyStatus(key)
+  })
+
+  // 删除
+  actions.push({
+    key: 'delete',
+    label: '删除',
+    icon: 'fa-trash',
+    color: 'red',
+    handler: () => deleteApiKey(key.id)
+  })
+
+  return actions
+}
+
 // 切换API Key状态（激活/禁用）
 const toggleApiKeyStatus = async (key) => {
   let confirmed = true
@@ -4689,6 +4771,10 @@ onUnmounted(() => {
   position: relative;
 }
 
+.dark .table-wrapper {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
 .table-container {
   overflow-x: auto;
   overflow-y: hidden;
@@ -4696,12 +4782,14 @@ onUnmounted(() => {
   padding: 0;
   max-width: 100%;
   position: relative;
+  -webkit-overflow-scrolling: touch;
 }
 
 /* 防止表格内容溢出，保证横向滚动 */
 .table-container table {
-  min-width: 1200px;
+  min-width: 1400px;
   border-collapse: collapse;
+  table-layout: auto;
 }
 
 .table-container::-webkit-scrollbar {
@@ -4722,6 +4810,18 @@ onUnmounted(() => {
   background: #9ca3af;
 }
 
+.dark .table-container::-webkit-scrollbar-track {
+  background: #374151;
+}
+
+.dark .table-container::-webkit-scrollbar-thumb {
+  background: #4b5563;
+}
+
+.dark .table-container::-webkit-scrollbar-thumb:hover {
+  background: #6b7280;
+}
+
 .table-row {
   transition: background-color 0.2s ease;
 }
@@ -4738,13 +4838,43 @@ onUnmounted(() => {
 .operations-column {
   position: sticky;
   right: 0;
-  background: inherit;
-  background-color: inherit;
   z-index: 12;
 }
 
+/* 确保操作列在浅色模式下有正确的背景 */
 .table-container thead .operations-column {
   z-index: 30;
+  background: linear-gradient(to bottom, #f9fafb, rgba(243, 244, 246, 0.9));
+}
+
+.dark .table-container thead .operations-column {
+  background: linear-gradient(to bottom, #374151, rgba(31, 41, 55, 0.9));
+}
+
+/* tbody 中的操作列背景处理 */
+.table-container tbody tr:nth-child(odd) .operations-column {
+  background-color: #ffffff;
+}
+
+.table-container tbody tr:nth-child(even) .operations-column {
+  background-color: rgba(249, 250, 251, 0.7);
+}
+
+.dark .table-container tbody tr:nth-child(odd) .operations-column {
+  background-color: rgba(31, 41, 55, 0.4);
+}
+
+.dark .table-container tbody tr:nth-child(even) .operations-column {
+  background-color: rgba(55, 65, 81, 0.3);
+}
+
+/* hover 状态下的操作列背景 */
+.table-container tbody tr:hover .operations-column {
+  background-color: rgba(239, 246, 255, 0.6);
+}
+
+.dark .table-container tbody tr:hover .operations-column {
+  background-color: rgba(30, 58, 138, 0.2);
 }
 
 .table-container tbody .operations-column {
@@ -4755,6 +4885,66 @@ onUnmounted(() => {
   box-shadow: -8px 0 12px -8px rgba(30, 41, 59, 0.45);
 }
 
+/* 固定左侧列（复选框和名称列）*/
+.checkbox-column,
+.name-column {
+  position: sticky;
+  z-index: 12;
+}
+
+/* 表头左侧固定列背景 */
+.table-container thead .checkbox-column,
+.table-container thead .name-column {
+  z-index: 30;
+  background: linear-gradient(to bottom, #f9fafb, rgba(243, 244, 246, 0.9));
+}
+
+.dark .table-container thead .checkbox-column,
+.dark .table-container thead .name-column {
+  background: linear-gradient(to bottom, #374151, rgba(31, 41, 55, 0.9));
+}
+
+/* tbody 中的左侧固定列背景处理 */
+.table-container tbody tr:nth-child(odd) .checkbox-column,
+.table-container tbody tr:nth-child(odd) .name-column {
+  background-color: #ffffff;
+}
+
+.table-container tbody tr:nth-child(even) .checkbox-column,
+.table-container tbody tr:nth-child(even) .name-column {
+  background-color: rgba(249, 250, 251, 0.7);
+}
+
+.dark .table-container tbody tr:nth-child(odd) .checkbox-column,
+.dark .table-container tbody tr:nth-child(odd) .name-column {
+  background-color: rgba(31, 41, 55, 0.4);
+}
+
+.dark .table-container tbody tr:nth-child(even) .checkbox-column,
+.dark .table-container tbody tr:nth-child(even) .name-column {
+  background-color: rgba(55, 65, 81, 0.3);
+}
+
+/* hover 状态下的左侧固定列背景 */
+.table-container tbody tr:hover .checkbox-column,
+.table-container tbody tr:hover .name-column {
+  background-color: rgba(239, 246, 255, 0.6);
+}
+
+.dark .table-container tbody tr:hover .checkbox-column,
+.dark .table-container tbody tr:hover .name-column {
+  background-color: rgba(30, 58, 138, 0.2);
+}
+
+/* 名称列右侧阴影（分隔效果） */
+.table-container tbody .name-column {
+  box-shadow: 8px 0 12px -8px rgba(15, 23, 42, 0.16);
+}
+
+.dark .table-container tbody .name-column {
+  box-shadow: 8px 0 12px -8px rgba(30, 41, 59, 0.45);
+}
+
 .loading-spinner {
   width: 24px;
   height: 24px;