diff --git a/.env.example b/.env.example
index 62f7fcfb..4d77eb53 100644
--- a/.env.example
+++ b/.env.example
@@ -22,6 +22,12 @@ REDIS_PASSWORD=
 REDIS_DB=0
 REDIS_ENABLE_TLS=
 
+# 🔗 会话管理配置
+# 粘性会话TTL配置（小时），默认1小时
+STICKY_SESSION_TTL_HOURS=1
+# 续期阈值（分钟），默认0分钟（不续期）
+STICKY_SESSION_RENEWAL_THRESHOLD_MINUTES=0
+
 # 🎯 Claude API 配置
 CLAUDE_API_URL=https://api.anthropic.com/v1/messages
 CLAUDE_API_VERSION=2023-06-01
diff --git a/VERSION b/VERSION
index c4c90b95..64dbc165 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-1.1.131
+1.1.133
diff --git a/config/config.example.js b/config/config.example.js
index 433ecd1f..1fdcdf7c 100644
--- a/config/config.example.js
+++ b/config/config.example.js
@@ -32,6 +32,14 @@ const config = {
     enableTLS: process.env.REDIS_ENABLE_TLS === 'true'
   },
 
+  // 🔗 会话管理配置
+  session: {
+    // 粘性会话TTL配置（小时），默认1小时
+    stickyTtlHours: parseFloat(process.env.STICKY_SESSION_TTL_HOURS) || 1,
+    // 续期阈值（分钟），默认0分钟（不续期）
+    renewalThresholdMinutes: parseInt(process.env.STICKY_SESSION_RENEWAL_THRESHOLD_MINUTES) || 0
+  },
+
   // 🎯 Claude API配置
   claude: {
     apiUrl: process.env.CLAUDE_API_URL || 'https://api.anthropic.com/v1/messages',
diff --git a/src/models/redis.js b/src/models/redis.js
index 145f94cd..7ef64ebf 100644
--- a/src/models/redis.js
+++ b/src/models/redis.js
@@ -1356,9 +1356,12 @@ class RedisClient {
   }
 
   // 🔗 会话sticky映射管理
-  async setSessionAccountMapping(sessionHash, accountId, ttl = 3600) {
+  async setSessionAccountMapping(sessionHash, accountId, ttl = null) {
+    const appConfig = require('../../config/config')
+    // 从配置读取TTL（小时），转换为秒，默认1小时
+    const defaultTTL = ttl !== null ? ttl : (appConfig.session?.stickyTtlHours || 1) * 60 * 60
     const key = `sticky_session:${sessionHash}`
-    await this.client.set(key, accountId, 'EX', ttl)
+    await this.client.set(key, accountId, 'EX', defaultTTL)
   }
 
   async getSessionAccountMapping(sessionHash) {
@@ -1366,6 +1369,57 @@ class RedisClient {
     return await this.client.get(key)
   }
 
+  // 🚀 智能会话TTL续期：剩余时间少于阈值时自动续期
+  async extendSessionAccountMappingTTL(sessionHash) {
+    const appConfig = require('../../config/config')
+    const key = `sticky_session:${sessionHash}`
+
+    // 📊 从配置获取参数
+    const ttlHours = appConfig.session?.stickyTtlHours || 1 // 小时，默认1小时
+    const thresholdMinutes = appConfig.session?.renewalThresholdMinutes || 0 // 分钟，默认0（不续期）
+
+    // 如果阈值为0，不执行续期
+    if (thresholdMinutes === 0) {
+      return true
+    }
+
+    const fullTTL = ttlHours * 60 * 60 // 转换为秒
+    const renewalThreshold = thresholdMinutes * 60 // 转换为秒
+
+    try {
+      // 获取当前剩余TTL（秒）
+      const remainingTTL = await this.client.ttl(key)
+
+      // 键不存在或已过期
+      if (remainingTTL === -2) {
+        return false
+      }
+
+      // 键存在但没有TTL（永不过期，不需要处理）
+      if (remainingTTL === -1) {
+        return true
+      }
+
+      // 🎯 智能续期策略：仅在剩余时间少于阈值时才续期
+      if (remainingTTL < renewalThreshold) {
+        await this.client.expire(key, fullTTL)
+        logger.debug(
+          `🔄 Renewed sticky session TTL: ${sessionHash} (was ${Math.round(remainingTTL / 60)}min, renewed to ${ttlHours}h)`
+        )
+        return true
+      }
+
+      // 剩余时间充足，无需续期
+      logger.debug(
+        `✅ Sticky session TTL sufficient: ${sessionHash} (remaining ${Math.round(remainingTTL / 60)}min)`
+      )
+      return true
+    } catch (error) {
+      logger.error('❌ Failed to extend session TTL:', error)
+      return false
+    }
+  }
+
   async deleteSessionAccountMapping(sessionHash) {
     const key = `sticky_session:${sessionHash}`
     return await this.client.del(key)
diff --git a/src/routes/admin.js b/src/routes/admin.js
index b8db9666..590f20c1 100644
--- a/src/routes/admin.js
+++ b/src/routes/admin.js
@@ -122,7 +122,7 @@ router.get('/api-keys/:keyId/cost-debug', authenticateAdmin, async (req, res) =>
 // 获取所有API Keys
 router.get('/api-keys', authenticateAdmin, async (req, res) => {
   try {
-    const { timeRange = 'all' } = req.query // all, 7days, monthly
+    const { timeRange = 'all', startDate, endDate } = req.query // all, 7days, monthly, custom
     const apiKeys = await apiKeyService.getAllApiKeys()
 
     // 获取用户服务来补充owner信息
@@ -132,7 +132,32 @@ router.get('/api-keys', authenticateAdmin, async (req, res) => {
     const now = new Date()
     const searchPatterns = []
 
-    if (timeRange === 'today') {
+    if (timeRange === 'custom' && startDate && endDate) {
+      // 自定义日期范围
+      const redisClient = require('../models/redis')
+      const start = new Date(startDate)
+      const end = new Date(endDate)
+
+      // 确保日期范围有效
+      if (start > end) {
+        return res.status(400).json({ error: 'Start date must be before or equal to end date' })
+      }
+
+      // 限制最大范围为365天
+      const daysDiff = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1
+      if (daysDiff > 365) {
+        return res.status(400).json({ error: 'Date range cannot exceed 365 days' })
+      }
+
+      // 生成日期范围内每天的搜索模式
+      const currentDate = new Date(start)
+      while (currentDate <= end) {
+        const tzDate = redisClient.getDateInTimezone(currentDate)
+        const dateStr = `${tzDate.getUTCFullYear()}-${String(tzDate.getUTCMonth() + 1).padStart(2, '0')}-${String(tzDate.getUTCDate()).padStart(2, '0')}`
+        searchPatterns.push(`usage:daily:*:${dateStr}`)
+        currentDate.setDate(currentDate.getDate() + 1)
+      }
+    } else if (timeRange === 'today') {
       // 今日 - 使用时区日期
       const redisClient = require('../models/redis')
       const tzDate = redisClient.getDateInTimezone(now)
@@ -233,7 +258,7 @@ router.get('/api-keys', authenticateAdmin, async (req, res) => {
           apiKey.usage.total.formattedCost = CostCalculator.formatCost(totalCost)
         }
       } else {
-        // 7天或本月：重新计算统计数据
+        // 7天、本月或自定义日期范围：重新计算统计数据
         const tempUsage = {
           requests: 0,
           tokens: 0,
@@ -274,12 +299,28 @@ router.get('/api-keys', authenticateAdmin, async (req, res) => {
         const tzDate = redisClient.getDateInTimezone(now)
         const tzMonth = `${tzDate.getUTCFullYear()}-${String(tzDate.getUTCMonth() + 1).padStart(2, '0')}`
 
-        const modelKeys =
-          timeRange === 'today'
-            ? await client.keys(`usage:${apiKey.id}:model:daily:*:${tzToday}`)
-            : timeRange === '7days'
-              ? await client.keys(`usage:${apiKey.id}:model:daily:*:*`)
-              : await client.keys(`usage:${apiKey.id}:model:monthly:*:${tzMonth}`)
+        let modelKeys = []
+        if (timeRange === 'custom' && startDate && endDate) {
+          // 自定义日期范围：获取范围内所有日期的模型统计
+          const start = new Date(startDate)
+          const end = new Date(endDate)
+          const currentDate = new Date(start)
+
+          while (currentDate <= end) {
+            const tzDateForKey = redisClient.getDateInTimezone(currentDate)
+            const dateStr = `${tzDateForKey.getUTCFullYear()}-${String(tzDateForKey.getUTCMonth() + 1).padStart(2, '0')}-${String(tzDateForKey.getUTCDate()).padStart(2, '0')}`
+            const dayKeys = await client.keys(`usage:${apiKey.id}:model:daily:*:${dateStr}`)
+            modelKeys = modelKeys.concat(dayKeys)
+            currentDate.setDate(currentDate.getDate() + 1)
+          }
+        } else {
+          modelKeys =
+            timeRange === 'today'
+              ? await client.keys(`usage:${apiKey.id}:model:daily:*:${tzToday}`)
+              : timeRange === '7days'
+                ? await client.keys(`usage:${apiKey.id}:model:daily:*:*`)
+                : await client.keys(`usage:${apiKey.id}:model:monthly:*:${tzMonth}`)
+        }
 
         const modelStatsMap = new Map()
 
@@ -295,8 +336,8 @@ router.get('/api-keys', authenticateAdmin, async (req, res) => {
                 continue
               }
             }
-          } else if (timeRange === 'today') {
-            // today选项已经在查询时过滤了，不需要额外处理
+          } else if (timeRange === 'today' || timeRange === 'custom') {
+            // today和custom选项已经在查询时过滤了，不需要额外处理
           }
 
           const modelMatch = key.match(
@@ -619,7 +660,8 @@ router.post('/api-keys', authenticateAdmin, async (req, res) => {
       weeklyOpusCostLimit,
       tags,
       activationDays,
-      expirationMode
+      expirationMode,
+      icon
     })
 
     logger.success(`🔑 Admin created new API key: ${name}`)
@@ -655,7 +697,8 @@ router.post('/api-keys/batch', authenticateAdmin, async (req, res) => {
       weeklyOpusCostLimit,
       tags,
       activationDays,
-      expirationMode
+      expirationMode,
+      icon
     } = req.body
 
     // 输入验证
@@ -701,7 +744,8 @@ router.post('/api-keys/batch', authenticateAdmin, async (req, res) => {
           weeklyOpusCostLimit,
           tags,
           activationDays,
-          expirationMode
+          expirationMode,
+          icon
         })
 
         // 保留原始 API Key 供返回
@@ -3878,10 +3922,10 @@ router.get('/model-stats', authenticateAdmin, async (req, res) => {
         return res.status(400).json({ error: 'Start date must be before or equal to end date' })
       }
 
-      // 限制最大范围为31天
+      // 限制最大范围为365天
       const daysDiff = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1
-      if (daysDiff > 31) {
-        return res.status(400).json({ error: 'Date range cannot exceed 31 days' })
+      if (daysDiff > 365) {
+        return res.status(400).json({ error: 'Date range cannot exceed 365 days' })
       }
 
       // 生成日期范围内所有日期的搜索模式
@@ -4342,10 +4386,10 @@ router.get('/api-keys/:keyId/model-stats', authenticateAdmin, async (req, res) =
         return res.status(400).json({ error: 'Start date must be before or equal to end date' })
       }
 
-      // 限制最大范围为31天
+      // 限制最大范围为365天
       const daysDiff = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1
-      if (daysDiff > 31) {
-        return res.status(400).json({ error: 'Date range cannot exceed 31 days' })
+      if (daysDiff > 365) {
+        return res.status(400).json({ error: 'Date range cannot exceed 365 days' })
       }
 
       // 生成日期范围内所有日期的搜索模式
diff --git a/src/services/apiKeyService.js b/src/services/apiKeyService.js
index 7e7f5fde..3fc4b715 100644
--- a/src/services/apiKeyService.js
+++ b/src/services/apiKeyService.js
@@ -36,7 +36,8 @@ class ApiKeyService {
       weeklyOpusCostLimit = 0,
       tags = [],
       activationDays = 0, // 新增：激活后有效天数（0表示不使用此功能）
-      expirationMode = 'fixed' // 新增：过期模式 'fixed'(固定时间) 或 'activation'(首次使用后激活)
+      expirationMode = 'fixed', // 新增：过期模式 'fixed'(固定时间) 或 'activation'(首次使用后激活)
+      icon = '' // 新增：图标（base64编码）
     } = options
 
     // 生成简单的API Key (64字符十六进制)
@@ -78,7 +79,8 @@ class ApiKeyService {
       expiresAt: expirationMode === 'fixed' ? expiresAt || '' : '', // 固定模式才设置过期时间
       createdBy: options.createdBy || 'admin',
       userId: options.userId || '',
-      userUsername: options.userUsername || ''
+      userUsername: options.userUsername || '',
+      icon: icon || '' // 新增：图标（base64编码）
     }
 
     // 保存API Key数据并建立哈希映射
diff --git a/src/services/claudeAccountService.js b/src/services/claudeAccountService.js
index ee67b0ad..354e5df3 100644
--- a/src/services/claudeAccountService.js
+++ b/src/services/claudeAccountService.js
@@ -3,8 +3,8 @@ const crypto = require('crypto')
 const ProxyHelper = require('../utils/proxyHelper')
 const axios = require('axios')
 const redis = require('../models/redis')
-const logger = require('../utils/logger')
 const config = require('../../config/config')
+const logger = require('../utils/logger')
 const { maskToken } = require('../utils/tokenMask')
 const {
   logRefreshStart,
@@ -707,6 +707,8 @@ class ClaudeAccountService {
           // 验证映射的账户是否仍然可用
           const mappedAccount = activeAccounts.find((acc) => acc.id === mappedAccountId)
           if (mappedAccount) {
+            // 🚀 智能会话续期：剩余时间少于14天时自动续期到15天
+            await redis.extendSessionAccountMappingTTL(sessionHash)
             logger.info(
               `🎯 Using sticky session account: ${mappedAccount.name} (${mappedAccountId}) for session ${sessionHash}`
             )
@@ -733,7 +735,9 @@ class ClaudeAccountService {
 
       // 如果有会话哈希，建立新的映射
       if (sessionHash) {
-        await redis.setSessionAccountMapping(sessionHash, selectedAccountId, 3600) // 1小时过期
+        // 从配置获取TTL（小时），转换为秒
+        const ttlSeconds = (config.session?.stickyTtlHours || 1) * 60 * 60
+        await redis.setSessionAccountMapping(sessionHash, selectedAccountId, ttlSeconds)
         logger.info(
           `🎯 Created new sticky session mapping: ${sortedAccounts[0].name} (${selectedAccountId}) for session ${sessionHash}`
         )
@@ -827,6 +831,8 @@ class ClaudeAccountService {
               )
               await redis.deleteSessionAccountMapping(sessionHash)
             } else {
+              // 🚀 智能会话续期：剩余时间少于14天时自动续期到15天
+              await redis.extendSessionAccountMappingTTL(sessionHash)
               logger.info(
                 `🎯 Using sticky session shared account: ${mappedAccount.name} (${mappedAccountId}) for session ${sessionHash}`
               )
@@ -885,7 +891,9 @@ class ClaudeAccountService {
 
       // 如果有会话哈希，建立新的映射
       if (sessionHash) {
-        await redis.setSessionAccountMapping(sessionHash, selectedAccountId, 3600) // 1小时过期
+        // 从配置获取TTL（小时），转换为秒
+        const ttlSeconds = (config.session?.stickyTtlHours || 1) * 60 * 60
+        await redis.setSessionAccountMapping(sessionHash, selectedAccountId, ttlSeconds)
         logger.info(
           `🎯 Created new sticky session mapping for shared account: ${candidateAccounts[0].name} (${selectedAccountId}) for session ${sessionHash}`
         )
diff --git a/src/services/claudeRelayService.js b/src/services/claudeRelayService.js
index eed4e365..79123b89 100644
--- a/src/services/claudeRelayService.js
+++ b/src/services/claudeRelayService.js
@@ -211,19 +211,7 @@ class ClaudeRelayService {
         // 检查是否为5xx状态码
         else if (response.statusCode >= 500 && response.statusCode < 600) {
           logger.warn(`🔥 Server error (${response.statusCode}) detected for account ${accountId}`)
-          // 记录5xx错误
-          await claudeAccountService.recordServerError(accountId, response.statusCode)
-          // 检查是否需要标记为临时错误状态（连续3次500）
-          const errorCount = await claudeAccountService.getServerErrorCount(accountId)
-          logger.info(
-            `🔥 Account ${accountId} has ${errorCount} consecutive 5xx errors in the last 5 minutes`
-          )
-          if (errorCount > 10) {
-            logger.error(
-              `❌ Account ${accountId} exceeded 5xx error threshold (${errorCount} errors), marking as temp_error`
-            )
-            await claudeAccountService.markAccountTempError(accountId, sessionHash)
-          }
+          await this._handleServerError(accountId, response.statusCode, sessionHash)
         }
         // 检查是否为429状态码
         else if (response.statusCode === 429) {
@@ -764,7 +752,7 @@ class ClaudeRelayService {
         onRequest(req)
       }
 
-      req.on('error', (error) => {
+      req.on('error', async (error) => {
         console.error(': ❌ ', error)
         logger.error('❌ Claude API request error:', error.message, {
           code: error.code,
@@ -784,14 +772,19 @@ class ClaudeRelayService {
           errorMessage = 'Connection refused by Claude API server'
         } else if (error.code === 'ETIMEDOUT') {
           errorMessage = 'Connection timed out to Claude API server'
+
+          await this._handleServerError(accountId, 504, null, 'Network')
         }
 
         reject(new Error(errorMessage))
       })
 
-      req.on('timeout', () => {
+      req.on('timeout', async () => {
         req.destroy()
         logger.error('❌ Claude API request timeout')
+
+        await this._handleServerError(accountId, 504, null, 'Request')
+
         reject(new Error('Request timeout'))
       })
 
@@ -1013,19 +1006,7 @@ class ClaudeRelayService {
               logger.warn(
                 `🔥 [Stream] Server error (${res.statusCode}) detected for account ${accountId}`
               )
-              // 记录5xx错误
-              await claudeAccountService.recordServerError(accountId, res.statusCode)
-              // 检查是否需要标记为临时错误状态（连续3次500）
-              const errorCount = await claudeAccountService.getServerErrorCount(accountId)
-              logger.info(
-                `🔥 [Stream] Account ${accountId} has ${errorCount} consecutive 5xx errors in the last 5 minutes`
-              )
-              if (errorCount > 10) {
-                logger.error(
-                  `❌ [Stream] Account ${accountId} exceeded 5xx error threshold (${errorCount} errors), marking as temp_error`
-                )
-                await claudeAccountService.markAccountTempError(accountId, sessionHash)
-              }
+              await this._handleServerError(accountId, res.statusCode, sessionHash, '[Stream]')
             }
           }
 
@@ -1361,7 +1342,7 @@ class ClaudeRelayService {
         })
       })
 
-      req.on('error', (error) => {
+      req.on('error', async (error) => {
         logger.error('❌ Claude stream request error:', error.message, {
           code: error.code,
           errno: error.errno,
@@ -1408,9 +1389,10 @@ class ClaudeRelayService {
         reject(error)
       })
 
-      req.on('timeout', () => {
+      req.on('timeout', async () => {
         req.destroy()
         logger.error('❌ Claude stream request timeout')
+
         if (!responseStream.headersSent) {
           responseStream.writeHead(504, {
             'Content-Type': 'text/event-stream',
@@ -1510,7 +1492,7 @@ class ClaudeRelayService {
         })
       })
 
-      req.on('error', (error) => {
+      req.on('error', async (error) => {
         logger.error('❌ Claude stream request error:', error.message, {
           code: error.code,
           errno: error.errno,
@@ -1557,9 +1539,10 @@ class ClaudeRelayService {
         reject(error)
       })
 
-      req.on('timeout', () => {
+      req.on('timeout', async () => {
         req.destroy()
         logger.error('❌ Claude stream request timeout')
+
         if (!responseStream.headersSent) {
           responseStream.writeHead(504, {
             'Content-Type': 'text/event-stream',
@@ -1596,6 +1579,33 @@ class ClaudeRelayService {
     })
   }
 
+  // 🛠️ 统一的错误处理方法
+  async _handleServerError(accountId, statusCode, sessionHash = null, context = '') {
+    try {
+      await claudeAccountService.recordServerError(accountId, statusCode)
+      const errorCount = await claudeAccountService.getServerErrorCount(accountId)
+
+      // 根据错误类型设置不同的阈值和日志前缀
+      const isTimeout = statusCode === 504
+      const threshold = 3 // 统一使用3次阈值
+      const prefix = context ? `${context} ` : ''
+
+      logger.warn(
+        `⏱️ ${prefix}${isTimeout ? 'Timeout' : 'Server'} error for account ${accountId}, error count: ${errorCount}/${threshold}`
+      )
+
+      if (errorCount > threshold) {
+        const errorTypeLabel = isTimeout ? 'timeout' : '5xx'
+        logger.error(
+          `❌ ${prefix}Account ${accountId} exceeded ${errorTypeLabel} error threshold (${errorCount} errors), marking as temp_error`
+        )
+        await claudeAccountService.markAccountTempError(accountId, sessionHash)
+      }
+    } catch (handlingError) {
+      logger.error(`❌ Failed to handle ${context} server error:`, handlingError)
+    }
+  }
+
   // 🔄 重试逻辑
   async _retryRequest(requestFunc, maxRetries = 3) {
     let lastError
diff --git a/src/services/unifiedClaudeScheduler.js b/src/services/unifiedClaudeScheduler.js
index c373d1f5..7bceb040 100644
--- a/src/services/unifiedClaudeScheduler.js
+++ b/src/services/unifiedClaudeScheduler.js
@@ -177,6 +177,8 @@ class UnifiedClaudeScheduler {
             requestedModel
           )
           if (isAvailable) {
+            // 🚀 智能会话续期：剩余时间少于14天时自动续期到15天
+            await redis.extendSessionAccountMappingTTL(sessionHash)
             logger.info(
               `🎯 Using sticky session account: ${mappedAccount.accountId} (${mappedAccount.accountType}) for session ${sessionHash}`
             )
@@ -789,6 +791,8 @@ class UnifiedClaudeScheduler {
               requestedModel
             )
             if (isAvailable) {
+              // 🚀 智能会话续期：剩余时间少于14天时自动续期到15天
+              await redis.extendSessionAccountMappingTTL(sessionHash)
               logger.info(
                 `🎯 Using sticky session account from group: ${mappedAccount.accountId} (${mappedAccount.accountType}) for session ${sessionHash}`
               )
diff --git a/src/services/unifiedGeminiScheduler.js b/src/services/unifiedGeminiScheduler.js
index face2c81..27c2387f 100644
--- a/src/services/unifiedGeminiScheduler.js
+++ b/src/services/unifiedGeminiScheduler.js
@@ -61,6 +61,8 @@ class UnifiedGeminiScheduler {
             mappedAccount.accountType
           )
           if (isAvailable) {
+            // 🚀 智能会话续期：剩余时间少于14天时自动续期到15天
+            await redis.extendSessionAccountMappingTTL(sessionHash)
             logger.info(
               `🎯 Using sticky session account: ${mappedAccount.accountId} (${mappedAccount.accountType}) for session ${sessionHash}`
             )
@@ -382,6 +384,8 @@ class UnifiedGeminiScheduler {
               mappedAccount.accountType
             )
             if (isAvailable) {
+              // 🚀 智能会话续期：剩余时间少于14天时自动续期到15天
+              await redis.extendSessionAccountMappingTTL(sessionHash)
               logger.info(
                 `🎯 Using sticky session account from group: ${mappedAccount.accountId} (${mappedAccount.accountType}) for session ${sessionHash}`
               )
diff --git a/src/services/unifiedOpenAIScheduler.js b/src/services/unifiedOpenAIScheduler.js
index cbc7a8ff..99c21f32 100644
--- a/src/services/unifiedOpenAIScheduler.js
+++ b/src/services/unifiedOpenAIScheduler.js
@@ -90,6 +90,8 @@ class UnifiedOpenAIScheduler {
             mappedAccount.accountType
           )
           if (isAvailable) {
+            // 🚀 智能会话续期：剩余时间少于14天时自动续期到15天
+            await redis.extendSessionAccountMappingTTL(sessionHash)
             logger.info(
               `🎯 Using sticky session account: ${mappedAccount.accountId} (${mappedAccount.accountType}) for session ${sessionHash}`
             )
@@ -406,6 +408,8 @@ class UnifiedOpenAIScheduler {
               mappedAccount.accountType
             )
             if (isAvailable) {
+              // 🚀 智能会话续期：剩余时间少于14天时自动续期到15天
+              await redis.extendSessionAccountMappingTTL(sessionHash)
               logger.info(
                 `🎯 Using sticky session account from group: ${mappedAccount.accountId} (${mappedAccount.accountType})`
               )
diff --git a/web/admin-spa/package-lock.json b/web/admin-spa/package-lock.json
index 30b46f1e..c9726bcd 100644
--- a/web/admin-spa/package-lock.json
+++ b/web/admin-spa/package-lock.json
@@ -15,7 +15,9 @@
         "element-plus": "^2.4.4",
         "pinia": "^2.1.7",
         "vue": "^3.3.4",
-        "vue-router": "^4.2.5"
+        "vue-router": "^4.2.5",
+        "xlsx": "^0.18.5",
+        "xlsx-js-style": "^1.2.0"
       },
       "devDependencies": {
         "@playwright/test": "^1.55.0",
@@ -1366,6 +1368,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
@@ -1643,6 +1654,19 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
@@ -1710,6 +1734,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
@@ -1766,6 +1799,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2304,6 +2349,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/exit-on-epipe": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
+      "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/exsolve": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/exsolve/-/exsolve-1.0.7.tgz",
@@ -2379,6 +2433,12 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.3.11.tgz",
+      "integrity": "sha512-Rr5QlUeGN1mbOHlaqcSYMKVpPbgLy0AWT/W0EHxA6NGI12yO1jpoui2zBBvU2G824ltM6Ut8BFgfHSBGfkmS0A==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmmirror.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -2497,6 +2557,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmmirror.com/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -3804,6 +3873,18 @@
         }
       }
     },
+    "node_modules/printj": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
+      "integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "printj": "bin/printj.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -4083,6 +4164,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmmirror.com/string-width/-/string-width-5.1.2.tgz",
@@ -5126,6 +5219,24 @@
         "node": ">= 8"
       }
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmmirror.com/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -5244,6 +5355,95 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/xlsx-js-style": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/xlsx-js-style/-/xlsx-js-style-1.2.0.tgz",
+      "integrity": "sha512-DDT4FXFSWfT4DXMSok/m3TvmP1gvO3dn0Eu/c+eXHW5Kzmp7IczNkxg/iEPnImbG9X0Vb8QhROda5eatSR/97Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.2.0",
+        "cfb": "^1.1.4",
+        "codepage": "~1.14.0",
+        "commander": "~2.17.1",
+        "crc-32": "~1.2.0",
+        "exit-on-epipe": "~1.0.1",
+        "fflate": "^0.3.8",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/xlsx-js-style/node_modules/adler-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz",
+      "integrity": "sha512-/vUqU/UY4MVeFsg+SsK6c+/05RZXIHZMGJA+PX5JyWI0ZRcBpupnRuPLU/NXXoFwMYCPCoxIfElM2eS+DUXCqQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      },
+      "bin": {
+        "adler32": "bin/adler32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/xlsx-js-style/node_modules/codepage": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.14.0.tgz",
+      "integrity": "sha512-iz3zJLhlrg37/gYRWgEPkaFTtzmnEv1h+r7NgZum2lFElYQPi0/5bnmuDfODHxfp0INEfnRqyfyeIJDbb7ahRw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "commander": "~2.14.1",
+        "exit-on-epipe": "~1.0.1"
+      },
+      "bin": {
+        "codepage": "bin/codepage.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/xlsx-js-style/node_modules/codepage/node_modules/commander": {
+      "version": "2.14.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz",
+      "integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw==",
+      "license": "MIT"
+    },
+    "node_modules/xlsx-js-style/node_modules/commander": {
+      "version": "2.17.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
+      "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==",
+      "license": "MIT"
+    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
diff --git a/web/admin-spa/package.json b/web/admin-spa/package.json
index 4881e1b3..af353d80 100644
--- a/web/admin-spa/package.json
+++ b/web/admin-spa/package.json
@@ -18,7 +18,9 @@
     "element-plus": "^2.4.4",
     "pinia": "^2.1.7",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "xlsx": "^0.18.5",
+    "xlsx-js-style": "^1.2.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.55.0",
diff --git a/web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue b/web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue
index 7c19cdfc..4e78520f 100644
--- a/web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue
+++ b/web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue
@@ -110,19 +110,21 @@
               class="mb-1.5 block text-xs font-semibold text-gray-700 dark:text-gray-300 sm:mb-2 sm:text-sm"
               >名称 <span class="text-red-500">*</span></label
             >
-            <input
-              v-model="form.name"
-              class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
-              :class="{ 'border-red-500': errors.name }"
-              :placeholder="
-                form.createType === 'batch'
-                  ? '输入基础名称（将自动添加序号）'
-                  : '为您的 API Key 取一个名称'
-              "
-              required
-              type="text"
-              @input="errors.name = ''"
-            />
+            <div>
+              <input
+                v-model="form.name"
+                class="form-input flex-1 border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
+                :class="{ 'border-red-500': errors.name }"
+                :placeholder="
+                  form.createType === 'batch'
+                    ? '输入基础名称（将自动添加序号）'
+                    : '为您的 API Key 取一个名称'
+                "
+                required
+                type="text"
+                @input="errors.name = ''"
+              />
+            </div>
             <p v-if="errors.name" class="mt-1 text-xs text-red-500 dark:text-red-400">
               {{ errors.name }}
             </p>
diff --git a/web/admin-spa/src/components/apikeys/EditApiKeyModal.vue b/web/admin-spa/src/components/apikeys/EditApiKeyModal.vue
index 07d9eaa5..fda19ade 100644
--- a/web/admin-spa/src/components/apikeys/EditApiKeyModal.vue
+++ b/web/admin-spa/src/components/apikeys/EditApiKeyModal.vue
@@ -32,14 +32,16 @@
               class="mb-1.5 block text-xs font-semibold text-gray-700 dark:text-gray-300 sm:mb-3 sm:text-sm"
               >名称</label
             >
-            <input
-              v-model="form.name"
-              class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
-              maxlength="100"
-              placeholder="请输入API Key名称"
-              required
-              type="text"
-            />
+            <div>
+              <input
+                v-model="form.name"
+                class="form-input flex-1 border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
+                maxlength="100"
+                placeholder="请输入API Key名称"
+                required
+                type="text"
+              />
+            </div>
             <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 sm:mt-2">
               用于识别此 API Key 的用途
             </p>
diff --git a/web/admin-spa/src/components/apikeys/UsageDetailModal.vue b/web/admin-spa/src/components/apikeys/UsageDetailModal.vue
index 54593e11..93527223 100644
--- a/web/admin-spa/src/components/apikeys/UsageDetailModal.vue
+++ b/web/admin-spa/src/components/apikeys/UsageDetailModal.vue
@@ -6,7 +6,7 @@
 
       <!-- 模态框 -->
       <div
-        class="modal-content relative mx-auto flex max-h-[90vh] w-[95%] max-w-2xl flex-col p-4 sm:w-full sm:max-w-3xl sm:p-6 md:p-8"
+        class="modal-content relative mx-auto flex max-h-[90vh] w-[95%] max-w-5xl flex-col p-4 sm:w-full sm:p-6 md:p-8"
       >
         <!-- 标题栏 -->
         <div class="mb-4 flex items-center justify-between sm:mb-6">
diff --git a/web/admin-spa/src/views/ApiKeysView.vue b/web/admin-spa/src/views/ApiKeysView.vue
index c623d893..b3845b7f 100644
--- a/web/admin-spa/src/views/ApiKeysView.vue
+++ b/web/admin-spa/src/views/ApiKeysView.vue
@@ -55,8 +55,8 @@
         <!-- 活跃 API Keys Tab Panel -->
         <div v-if="activeTab === 'active'" class="tab-panel">
           <!-- 工具栏区域 - 添加 mb-4 增加与表格的间距 -->
-          <div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-            <!-- 筛选器组 -->
+          <div class="mb-4 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+            <!-- 左侧：查询筛选器组 -->
             <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:gap-3">
               <!-- 时间范围筛选 -->
               <div class="group relative min-w-[140px]">
@@ -64,12 +64,33 @@
                   class="absolute -inset-0.5 rounded-lg bg-gradient-to-r from-blue-500 to-purple-500 opacity-0 blur transition duration-300 group-hover:opacity-20"
                 ></div>
                 <CustomDropdown
-                  v-model="apiKeyStatsTimeRange"
+                  v-model="globalDateFilter.preset"
                   icon="fa-calendar-alt"
                   icon-color="text-blue-500"
-                  :options="timeRangeOptions"
+                  :options="timeRangeDropdownOptions"
                   placeholder="选择时间范围"
-                  @change="loadApiKeys()"
+                  @change="handleTimeRangeChange"
+                />
+              </div>
+
+              <!-- 自定义日期范围选择器 - 在选择自定义时显示 -->
+              <div v-if="globalDateFilter.type === 'custom'" class="flex items-center">
+                <el-date-picker
+                  class="api-key-date-picker custom-date-range-picker"
+                  :clearable="true"
+                  :default-time="defaultTime"
+                  :disabled-date="disabledDate"
+                  end-placeholder="结束日期"
+                  format="YYYY-MM-DD HH:mm:ss"
+                  :model-value="globalDateFilter.customRange"
+                  range-separator="至"
+                  size="small"
+                  start-placeholder="开始日期"
+                  style="width: 320px; height: 38px"
+                  type="datetimerange"
+                  :unlink-panels="false"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+                  @update:model-value="onGlobalCustomDateRangeChange"
                 />
               </div>
 
@@ -104,7 +125,7 @@
                 <div class="relative flex items-center">
                   <input
                     v-model="searchKeyword"
-                    class="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 pl-9 text-sm text-gray-700 placeholder-gray-400 shadow-sm transition-all duration-200 hover:border-gray-300 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 dark:hover:border-gray-500"
+                    class="w-full rounded-lg border border-gray-200 bg-white px-3 py-1.5 pl-9 text-sm text-gray-700 placeholder-gray-400 shadow-sm transition-all duration-200 hover:border-gray-300 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 dark:hover:border-gray-500"
                     :placeholder="isLdapEnabled ? '搜索名称或所有者...' : '搜索名称...'"
                     type="text"
                     @input="currentPage = 1"
@@ -119,7 +140,10 @@
                   </button>
                 </div>
               </div>
+            </div>
 
+            <!-- 右侧：操作按钮组 -->
+            <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:gap-3">
               <!-- 刷新按钮 -->
               <button
                 class="group relative flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-all duration-200 hover:border-gray-300 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:border-gray-500 sm:w-auto"
@@ -138,6 +162,27 @@
                 <span class="relative">刷新</span>
               </button>
 
+              <!-- 选择/取消选择按钮 -->
+              <button
+                class="flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-all duration-200 hover:border-gray-300 hover:bg-gray-50 hover:shadow-md dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                @click="toggleSelectionMode"
+              >
+                <i :class="showCheckboxes ? 'fas fa-times' : 'fas fa-check-square'"></i>
+                <span>{{ showCheckboxes ? '取消选择' : '选择' }}</span>
+              </button>
+
+              <!-- 导出数据按钮 -->
+              <button
+                class="group relative flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-all duration-200 hover:border-gray-300 hover:shadow-md dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:border-gray-500 sm:w-auto"
+                @click="exportToExcel"
+              >
+                <div
+                  class="absolute -inset-0.5 rounded-lg bg-gradient-to-r from-emerald-500 to-green-500 opacity-0 blur transition duration-300 group-hover:opacity-20"
+                ></div>
+                <i class="fas fa-file-excel relative text-emerald-500" />
+                <span class="relative">导出数据</span>
+              </button>
+
               <!-- 批量编辑按钮 - 移到刷新按钮旁边 -->
               <button
                 v-if="selectedApiKeys.length > 0"
@@ -163,16 +208,16 @@
                 <i class="fas fa-trash relative text-red-600 dark:text-red-400" />
                 <span class="relative">删除选中 ({{ selectedApiKeys.length }})</span>
               </button>
-            </div>
 
-            <!-- 创建按钮 - 独立在右侧 -->
-            <button
-              class="flex w-full items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 px-5 py-2.5 text-sm font-medium text-white shadow-md transition-all duration-200 hover:from-blue-600 hover:to-blue-700 hover:shadow-lg sm:w-auto"
-              @click.stop="openCreateApiKeyModal"
-            >
-              <i class="fas fa-plus"></i>
-              <span>创建新 Key</span>
-            </button>
+              <!-- 创建按钮 -->
+              <button
+                class="flex w-full items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 px-5 py-2 text-sm font-medium text-white shadow-md transition-all duration-200 hover:from-blue-600 hover:to-blue-700 hover:shadow-lg sm:w-auto"
+                @click.stop="openCreateApiKeyModal"
+              >
+                <i class="fas fa-plus"></i>
+                <span>创建新 Key</span>
+              </button>
+            </div>
           </div>
 
           <div v-if="apiKeysLoading" class="py-12 text-center">
@@ -191,236 +236,183 @@
           </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 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-[25%] min-w-[200px] 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('name')"
-                  >
-                    名称
-                    <i
-                      v-if="apiKeysSortBy === 'name'"
-                      :class="[
-                        'fas',
-                        apiKeysSortOrder === '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-[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-[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"
-                    @click="sortApiKeys('status')"
-                  >
-                    状态
-                    <i
-                      v-if="apiKeysSortBy === 'status'"
-                      :class="[
-                        'fas',
-                        apiKeysSortOrder === '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-[17%] min-w-[140px] 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>
-                      <span
-                        class="cursor-pointer rounded px-1.5 py-0.5 text-xs normal-case hover:bg-gray-100 dark:hover:bg-gray-600"
-                        @click="sortApiKeys('dailyCost')"
-                      >
-                        今日费用
-                        <i
-                          v-if="apiKeysSortBy === 'dailyCost'"
-                          :class="[
-                            'fas',
-                            apiKeysSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down',
-                            'ml-0.5 text-[10px]'
-                          ]"
-                        />
-                        <i v-else class="fas fa-sort ml-0.5 text-[10px] text-gray-400" />
-                      </span>
-                      <span
-                        class="cursor-pointer rounded px-1.5 py-0.5 text-xs normal-case hover:bg-gray-100 dark:hover:bg-gray-600"
-                        @click="sortApiKeys('totalCost')"
-                      >
-                        总费用
-                        <i
-                          v-if="apiKeysSortBy === 'totalCost'"
-                          :class="[
-                            'fas',
-                            apiKeysSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down',
-                            'ml-0.5 text-[10px]'
-                          ]"
-                        />
-                        <i v-else class="fas fa-sort ml-0.5 text-[10px] text-gray-400" />
-                      </span>
-                    </div>
-                  </th>
-                  <th
-                    class="w-[10%] min-w-[90px] 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')"
-                  >
-                    创建时间
-                    <i
-                      v-if="apiKeysSortBy === 'createdAt'"
-                      :class="[
-                        'fas',
-                        apiKeysSortOrder === '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-[90px] 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')"
-                  >
-                    过期时间
-                    <i
-                      v-if="apiKeysSortBy === 'expiresAt'"
-                      :class="[
-                        'fas',
-                        apiKeysSortOrder === '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-[20%] 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">
-                <template v-for="key in paginatedApiKeys" :key="key.id">
-                  <!-- API Key 主行 -->
-                  <tr class="table-row">
-                    <td class="px-3 py-4">
+          <div v-else class="table-wrapper hidden md:block">
+            <div class="table-container">
+              <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="selectedApiKeys"
-                          class="mr-3 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                          v-model="selectAllChecked"
+                          class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                          :indeterminate="isIndeterminate"
                           type="checkbox"
-                          :value="key.id"
-                          @change="updateSelectAllState"
+                          @change="handleSelectAll"
                         />
                       </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-blue-500 to-blue-600"
-                        >
-                          <i class="fas fa-key text-xs text-white" />
+                    </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"
+                      @click="sortApiKeys('name')"
+                    >
+                      名称
+                      <i
+                        v-if="apiKeysSortBy === 'name'"
+                        :class="[
+                          'fas',
+                          apiKeysSortOrder === '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] 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"
+                    >
+                      标签
+                    </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"
+                      @click="sortApiKeys('status')"
+                    >
+                      状态
+                      <i
+                        v-if="apiKeysSortBy === 'status'"
+                        :class="[
+                          'fas',
+                          apiKeysSortOrder === '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-[60px] cursor-pointer px-3 py-4 text-right 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('periodCost')"
+                    >
+                      费用
+                      <i
+                        v-if="apiKeysSortBy === 'periodCost'"
+                        :class="[
+                          'fas',
+                          apiKeysSortOrder === '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-[60px] cursor-pointer px-3 py-4 text-right 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('periodTokens')"
+                    >
+                      Token
+                      <i
+                        v-if="apiKeysSortBy === 'periodTokens'"
+                        :class="[
+                          'fas',
+                          apiKeysSortOrder === '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-[60px] cursor-pointer px-3 py-4 text-right 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('periodRequests')"
+                    >
+                      请求数
+                      <i
+                        v-if="apiKeysSortBy === 'periodRequests'"
+                        :class="[
+                          'fas',
+                          apiKeysSortOrder === '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-[9%] 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('lastUsedAt')"
+                    >
+                      最后使用
+                      <i
+                        v-if="apiKeysSortBy === 'lastUsedAt'"
+                        :class="[
+                          'fas',
+                          apiKeysSortOrder === '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-[9%] 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('createdAt')"
+                    >
+                      创建时间
+                      <i
+                        v-if="apiKeysSortBy === 'createdAt'"
+                        :class="[
+                          'fas',
+                          apiKeysSortOrder === '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-[9%] 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('expiresAt')"
+                    >
+                      过期时间
+                      <i
+                        v-if="apiKeysSortBy === 'expiresAt'"
+                        :class="[
+                          'fas',
+                          apiKeysSortOrder === '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-[27%] 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">
+                  <template v-for="key in paginatedApiKeys" :key="key.id">
+                    <!-- API Key 主行 -->
+                    <tr class="table-row">
+                      <td v-if="shouldShowCheckboxes" class="px-3 py-1.5">
+                        <div class="flex items-center">
+                          <input
+                            v-model="selectedApiKeys"
+                            class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                            type="checkbox"
+                            :value="key.id"
+                            @change="updateSelectAllState"
+                          />
                         </div>
+                      </td>
+                      <td class="px-3 py-1.5">
                         <div class="min-w-0">
+                          <!-- 名称 -->
                           <div
                             class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100"
                             :title="key.name"
                           >
                             {{ key.name }}
                           </div>
-                          <div
-                            class="truncate text-xs text-gray-500 dark:text-gray-400"
-                            :title="key.id"
-                          >
-                            {{ key.id }}
-                          </div>
-                          <!-- 账户绑定信息 -->
-                          <div class="mt-1.5 space-y-1">
-                            <!-- Claude 绑定 -->
-                            <div
-                              v-if="key.claudeAccountId || key.claudeConsoleAccountId"
-                              class="flex items-center gap-1 text-xs"
-                            >
-                              <span
-                                class="inline-flex items-center rounded bg-indigo-100 px-1.5 py-0.5 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300"
-                              >
-                                <i class="fas fa-brain mr-1 text-[10px]" />
-                                Claude
-                              </span>
-                              <span class="truncate text-gray-600 dark:text-gray-400">
-                                {{ getClaudeBindingInfo(key) }}
-                              </span>
-                            </div>
-                            <!-- Gemini 绑定 -->
-                            <div v-if="key.geminiAccountId" class="flex items-center gap-1 text-xs">
-                              <span
-                                class="inline-flex items-center rounded bg-yellow-100 px-1.5 py-0.5 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300"
-                              >
-                                <i class="fas fa-robot mr-1 text-[10px]" />
-                                Gemini
-                              </span>
-                              <span class="truncate text-gray-600 dark:text-gray-400">
-                                {{ getGeminiBindingInfo(key) }}
-                              </span>
-                            </div>
-                            <!-- OpenAI 绑定 -->
-                            <div v-if="key.openaiAccountId" class="flex items-center gap-1 text-xs">
-                              <span
-                                class="inline-flex items-center rounded bg-gray-100 px-1.5 py-0.5 text-gray-700 dark:bg-gray-700 dark:text-gray-300"
-                              >
-                                <i class="fa-openai mr-1 text-[10px]" />
-                                OpenAI
-                              </span>
-                              <span class="truncate text-gray-600 dark:text-gray-400">
-                                {{ getOpenAIBindingInfo(key) }}
-                              </span>
-                            </div>
-                            <!-- Bedrock 绑定 -->
-                            <div
-                              v-if="key.bedrockAccountId"
-                              class="flex items-center gap-1 text-xs"
-                            >
-                              <span
-                                class="inline-flex items-center rounded bg-orange-100 px-1.5 py-0.5 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300"
-                              >
-                                <i class="fas fa-cloud mr-1 text-[10px]" />
-                                Bedrock
-                              </span>
-                              <span class="truncate text-gray-600 dark:text-gray-400">
-                                {{ getBedrockBindingInfo(key) }}
-                              </span>
-                            </div>
-                            <!-- 无绑定时显示共享池 -->
-                            <div
-                              v-if="
-                                !key.claudeAccountId &&
-                                !key.claudeConsoleAccountId &&
-                                !key.geminiAccountId &&
-                                !key.openaiAccountId &&
-                                !key.bedrockAccountId
-                              "
-                              class="text-xs text-gray-500 dark:text-gray-400"
-                            >
-                              <i class="fas fa-share-alt mr-1" />
-                              使用共享池
-                            </div>
-                          </div>
                           <!-- 显示所有者信息 -->
                           <div
                             v-if="isLdapEnabled && key.ownerDisplayName"
@@ -430,524 +422,610 @@
                             {{ key.ownerDisplayName }}
                           </div>
                         </div>
-                      </div>
-                    </td>
-                    <td class="px-3 py-4">
-                      <div class="flex flex-wrap gap-1">
+                      </td>
+                      <!-- 所属账号列 -->
+                      <td class="px-3 py-1.5">
+                        <div class="space-y-1">
+                          <!-- Claude 绑定 -->
+                          <div
+                            v-if="key.claudeAccountId || key.claudeConsoleAccountId"
+                            class="flex items-center gap-1 text-xs"
+                          >
+                            <span
+                              class="inline-flex items-center rounded bg-indigo-100 px-1.5 py-0.5 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300"
+                            >
+                              <i class="fas fa-brain mr-1 text-[10px]" />
+                              Claude
+                            </span>
+                            <span class="truncate text-gray-600 dark:text-gray-400">
+                              {{ getClaudeBindingInfo(key) }}
+                            </span>
+                          </div>
+                          <!-- Gemini 绑定 -->
+                          <div v-if="key.geminiAccountId" class="flex items-center gap-1 text-xs">
+                            <span
+                              class="inline-flex items-center rounded bg-yellow-100 px-1.5 py-0.5 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300"
+                            >
+                              <i class="fas fa-robot mr-1 text-[10px]" />
+                              Gemini
+                            </span>
+                            <span class="truncate text-gray-600 dark:text-gray-400">
+                              {{ getGeminiBindingInfo(key) }}
+                            </span>
+                          </div>
+                          <!-- OpenAI 绑定 -->
+                          <div v-if="key.openaiAccountId" class="flex items-center gap-1 text-xs">
+                            <span
+                              class="inline-flex items-center rounded bg-gray-100 px-1.5 py-0.5 text-gray-700 dark:bg-gray-700 dark:text-gray-300"
+                            >
+                              <i class="fa-openai mr-1 text-[10px]" />
+                              OpenAI
+                            </span>
+                            <span class="truncate text-gray-600 dark:text-gray-400">
+                              {{ getOpenAIBindingInfo(key) }}
+                            </span>
+                          </div>
+                          <!-- Bedrock 绑定 -->
+                          <div v-if="key.bedrockAccountId" class="flex items-center gap-1 text-xs">
+                            <span
+                              class="inline-flex items-center rounded bg-orange-100 px-1.5 py-0.5 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300"
+                            >
+                              <i class="fas fa-cloud mr-1 text-[10px]" />
+                              Bedrock
+                            </span>
+                            <span class="truncate text-gray-600 dark:text-gray-400">
+                              {{ getBedrockBindingInfo(key) }}
+                            </span>
+                          </div>
+                          <!-- 共享池 -->
+                          <div
+                            v-if="
+                              !key.claudeAccountId &&
+                              !key.claudeConsoleAccountId &&
+                              !key.geminiAccountId &&
+                              !key.openaiAccountId &&
+                              !key.bedrockAccountId
+                            "
+                            class="text-xs text-gray-500 dark:text-gray-400"
+                          >
+                            <i class="fas fa-share-alt mr-1" />
+                            共享池
+                          </div>
+                        </div>
+                      </td>
+                      <!-- 标签列 -->
+                      <td class="px-3 py-1.5">
+                        <div class="flex flex-wrap gap-1">
+                          <span
+                            v-for="tag in key.tags || []"
+                            :key="tag"
+                            class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs text-blue-800 dark:bg-blue-900/30 dark:text-blue-300"
+                          >
+                            {{ tag }}
+                          </span>
+                          <span
+                            v-if="!key.tags || key.tags.length === 0"
+                            class="text-xs text-gray-400"
+                            >无标签</span
+                          >
+                        </div>
+                      </td>
+                      <td class="whitespace-nowrap px-3 py-1.5">
                         <span
-                          v-for="tag in key.tags || []"
-                          :key="tag"
-                          class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs text-blue-800 dark:bg-blue-900/30 dark:text-blue-300"
-                        >
-                          {{ tag }}
-                        </span>
-                        <span
-                          v-if="!key.tags || key.tags.length === 0"
-                          class="text-xs text-gray-400"
-                          >无标签</span
-                        >
-                      </div>
-                    </td>
-                    <td class="whitespace-nowrap px-3 py-4">
-                      <span
-                        :class="[
-                          'inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold',
-                          key.isActive
-                            ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
-                            : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'
-                        ]"
-                      >
-                        <div
                           :class="[
-                            'mr-2 h-2 w-2 rounded-full',
-                            key.isActive ? 'bg-green-500' : 'bg-red-500'
+                            'inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold',
+                            key.isActive
+                              ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
+                              : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'
                           ]"
-                        />
-                        {{ key.isActive ? '活跃' : '禁用' }}
-                      </span>
-                    </td>
-                    <td class="px-3 py-4">
-                      <div class="space-y-2">
-                        <!-- 今日使用统计 -->
-                        <div class="mb-2">
-                          <div class="mb-1 flex items-center justify-between text-sm">
-                            <span class="text-gray-600 dark:text-gray-400">今日请求</span>
-                            <span class="font-semibold text-gray-900 dark:text-gray-100"
-                              >{{ formatNumber(key.usage?.daily?.requests || 0) }}次</span
-                            >
-                          </div>
-                          <div class="flex items-center justify-between text-sm">
-                            <span class="text-gray-600 dark:text-gray-400">今日费用</span>
-                            <span class="font-semibold text-green-600"
-                              >${{ (key.dailyCost || 0).toFixed(4) }}</span
-                            >
-                          </div>
-                          <div class="flex items-center justify-between text-sm">
-                            <span class="text-gray-600 dark:text-gray-400">总费用</span>
-                            <span class="font-semibold text-blue-600"
-                              >${{ (key.totalCost || 0).toFixed(4) }}</span
-                            >
-                          </div>
-                          <div class="flex items-center justify-between text-sm">
-                            <span class="text-gray-600 dark:text-gray-400">最后使用</span>
-                            <span class="font-medium text-gray-700 dark:text-gray-300">{{
-                              formatLastUsed(key.lastUsedAt)
-                            }}</span>
-                          </div>
-                        </div>
+                        >
+                          <div
+                            :class="[
+                              'mr-2 h-2 w-2 rounded-full',
+                              key.isActive ? 'bg-green-500' : 'bg-red-500'
+                            ]"
+                          />
+                          {{ key.isActive ? '活跃' : '禁用' }}
+                        </span>
+                      </td>
+                      <!-- 费用 -->
+                      <td class="whitespace-nowrap px-3 py-1.5 text-right" style="font-size: 13px">
+                        <div class="space-y-2">
+                          <span
+                            class="font-medium text-blue-600 dark:text-blue-400"
+                            style="font-size: 13px"
+                          >
+                            ${{ getPeriodCost(key).toFixed(2) }}
+                          </span>
 
-                        <!-- 每日费用限制进度条 -->
-                        <div v-if="key.dailyCostLimit > 0" class="space-y-1">
-                          <div class="flex items-center justify-between text-xs">
-                            <span class="text-gray-500 dark:text-gray-400">每日费用</span>
-                            <span class="text-gray-700 dark:text-gray-300">
-                              ${{ (key.dailyCost || 0).toFixed(2) }} / ${{
-                                key.dailyCostLimit.toFixed(2)
-                              }}
+                          <!-- 每日费用限制进度条 -->
+                          <div v-if="key.dailyCostLimit > 0" class="space-y-1">
+                            <div class="flex items-center justify-between text-xs">
+                              <span class="text-gray-500 dark:text-gray-400">每日费用</span>
+                              <span class="text-gray-700 dark:text-gray-300">
+                                ${{ (key.dailyCost || 0).toFixed(2) }} / ${{
+                                  key.dailyCostLimit.toFixed(2)
+                                }}
+                              </span>
+                            </div>
+                            <div class="h-1.5 w-full rounded-full bg-gray-200 dark:bg-gray-700">
+                              <div
+                                class="h-1.5 rounded-full transition-all duration-300"
+                                :class="getDailyCostProgressColor(key)"
+                                :style="{ width: getDailyCostProgress(key) + '%' }"
+                              />
+                            </div>
+                          </div>
+
+                          <!-- Opus 周费用限制进度条 -->
+                          <div v-if="key.weeklyOpusCostLimit > 0" class="space-y-1">
+                            <div class="flex items-center justify-between text-xs">
+                              <span class="text-gray-500 dark:text-gray-400">Opus周费用</span>
+                              <span class="text-gray-700 dark:text-gray-300">
+                                ${{ (key.weeklyOpusCost || 0).toFixed(2) }} / ${{
+                                  key.weeklyOpusCostLimit.toFixed(2)
+                                }}
+                              </span>
+                            </div>
+                            <div class="h-1.5 w-full rounded-full bg-gray-200">
+                              <div
+                                class="h-1.5 rounded-full transition-all duration-300"
+                                :class="getWeeklyOpusCostProgressColor(key)"
+                                :style="{ width: getWeeklyOpusCostProgress(key) + '%' }"
+                              />
+                            </div>
+                          </div>
+
+                          <!-- 时间窗口限制进度条 -->
+                          <WindowCountdown
+                            v-if="key.rateLimitWindow > 0"
+                            :cost-limit="key.rateLimitCost"
+                            :current-cost="key.currentWindowCost"
+                            :current-requests="key.currentWindowRequests"
+                            :current-tokens="key.currentWindowTokens"
+                            :rate-limit-window="key.rateLimitWindow"
+                            :request-limit="key.rateLimitRequests"
+                            :show-progress="true"
+                            :show-tooltip="false"
+                            :token-limit="key.tokenLimit"
+                            :window-end-time="key.windowEndTime"
+                            :window-remaining-seconds="key.windowRemainingSeconds"
+                            :window-start-time="key.windowStartTime"
+                          />
+                        </div>
+                      </td>
+                      <!-- Token数量 -->
+                      <td class="whitespace-nowrap px-3 py-1.5 text-right" style="font-size: 13px">
+                        <div class="flex items-center justify-end gap-1">
+                          <span
+                            class="font-medium text-purple-600 dark:text-purple-400"
+                            style="font-size: 13px"
+                          >
+                            {{ formatTokenCount(getPeriodTokens(key)) }}
+                          </span>
+                        </div>
+                      </td>
+                      <!-- 请求数 -->
+                      <td class="whitespace-nowrap px-3 py-1.5 text-right" style="font-size: 13px">
+                        <div class="flex items-center justify-end gap-1">
+                          <span
+                            class="font-medium text-gray-900 dark:text-gray-100"
+                            style="font-size: 13px"
+                          >
+                            {{ formatNumber(getPeriodRequests(key)) }}
+                          </span>
+                          <span class="text-xs text-gray-500">次</span>
+                        </div>
+                      </td>
+                      <!-- 最后使用 -->
+                      <td
+                        class="whitespace-nowrap px-3 py-1.5 text-gray-700 dark:text-gray-300"
+                        style="font-size: 13px"
+                      >
+                        <span
+                          v-if="key.lastUsedAt"
+                          class="cursor-help"
+                          style="font-size: 13px"
+                          :title="new Date(key.lastUsedAt).toLocaleString('zh-CN')"
+                        >
+                          {{ formatLastUsed(key.lastUsedAt) }}
+                        </span>
+                        <span v-else class="text-gray-400" style="font-size: 13px">从未使用</span>
+                      </td>
+                      <!-- 创建时间 -->
+                      <td
+                        class="whitespace-nowrap px-3 py-1.5 text-gray-700 dark:text-gray-300"
+                        style="font-size: 13px"
+                      >
+                        {{ new Date(key.createdAt).toLocaleDateString() }}
+                      </td>
+                      <td
+                        class="whitespace-nowrap px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300"
+                      >
+                        <div class="inline-flex items-center gap-1.5">
+                          <!-- 未激活状态 -->
+                          <span
+                            v-if="key.expirationMode === 'activation' && !key.isActivated"
+                            class="inline-flex items-center text-blue-600 dark:text-blue-400"
+                            style="font-size: 13px"
+                          >
+                            <i class="fas fa-pause-circle mr-1 text-xs" />
+                            未激活 ({{ key.activationDays || 30 }}天)
+                          </span>
+                          <!-- 已设置过期时间 -->
+                          <span v-else-if="key.expiresAt">
+                            <span
+                              v-if="isApiKeyExpired(key.expiresAt)"
+                              class="inline-flex cursor-pointer items-center text-red-600 hover:underline"
+                              style="font-size: 13px"
+                              @click.stop="startEditExpiry(key)"
+                            >
+                              <i class="fas fa-exclamation-circle mr-1 text-xs" />
+                              已过期
                             </span>
-                          </div>
-                          <div class="h-1.5 w-full rounded-full bg-gray-200 dark:bg-gray-700">
-                            <div
-                              class="h-1.5 rounded-full transition-all duration-300"
-                              :class="getDailyCostProgressColor(key)"
-                              :style="{ width: getDailyCostProgress(key) + '%' }"
-                            />
-                          </div>
-                        </div>
-
-                        <!-- Opus 周费用限制进度条 -->
-                        <div v-if="key.weeklyOpusCostLimit > 0" class="space-y-1">
-                          <div class="flex items-center justify-between text-xs">
-                            <span class="text-gray-500 dark:text-gray-400">Opus周费用</span>
-                            <span class="text-gray-700 dark:text-gray-300">
-                              ${{ (key.weeklyOpusCost || 0).toFixed(2) }} / ${{
-                                key.weeklyOpusCostLimit.toFixed(2)
-                              }}
+                            <span
+                              v-else-if="isApiKeyExpiringSoon(key.expiresAt)"
+                              class="inline-flex cursor-pointer items-center text-orange-600 hover:underline"
+                              style="font-size: 13px"
+                              @click.stop="startEditExpiry(key)"
+                            >
+                              <i class="fas fa-clock mr-1 text-xs" />
+                              {{ formatExpireDate(key.expiresAt) }}
                             </span>
-                          </div>
-                          <div class="h-1.5 w-full rounded-full bg-gray-200">
-                            <div
-                              class="h-1.5 rounded-full transition-all duration-300"
-                              :class="getWeeklyOpusCostProgressColor(key)"
-                              :style="{ width: getWeeklyOpusCostProgress(key) + '%' }"
-                            />
-                          </div>
+                            <span
+                              v-else
+                              class="cursor-pointer text-gray-600 hover:underline dark:text-gray-400"
+                              style="font-size: 13px"
+                              @click.stop="startEditExpiry(key)"
+                            >
+                              {{ formatExpireDate(key.expiresAt) }}
+                            </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="startEditExpiry(key)"
+                          >
+                            <i class="fas fa-infinity mr-1 text-xs" />
+                            永不过期
+                          </span>
                         </div>
-
-                        <!-- 时间窗口限制进度条 -->
-                        <WindowCountdown
-                          v-if="key.rateLimitWindow > 0"
-                          :cost-limit="key.rateLimitCost"
-                          :current-cost="key.currentWindowCost"
-                          :current-requests="key.currentWindowRequests"
-                          :current-tokens="key.currentWindowTokens"
-                          :rate-limit-window="key.rateLimitWindow"
-                          :request-limit="key.rateLimitRequests"
-                          :show-progress="true"
-                          :show-tooltip="false"
-                          :token-limit="key.tokenLimit"
-                          :window-end-time="key.windowEndTime"
-                          :window-remaining-seconds="key.windowRemainingSeconds"
-                          :window-start-time="key.windowStartTime"
-                        />
-
-                        <!-- 查看详情按钮 -->
-                        <div class="pt-1">
+                      </td>
+                      <td class="whitespace-nowrap px-3 py-1.5" style="font-size: 13px">
+                        <div class="flex gap-1">
                           <button
-                            class="flex w-full items-center justify-center gap-1 rounded py-1 text-xs font-medium text-blue-600 transition-colors hover:bg-blue-50 hover:text-blue-800 dark:hover:bg-blue-900/20 dark:hover:text-blue-400"
+                            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>
+                          </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'
+                              ]"
+                            />
+                            <span class="ml-1 hidden xl:inline">模型</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"
+                            title="编辑"
+                            @click="openEditApiKeyModal(key)"
+                          >
+                            <i class="fas fa-edit" />
+                            <span class="ml-1 hidden xl:inline">编辑</span>
+                          </button>
+                          <button
+                            v-if="
+                              key.expiresAt &&
+                              (isApiKeyExpired(key.expiresAt) ||
+                                isApiKeyExpiringSoon(key.expiresAt))
+                            "
+                            class="rounded px-2 py-1 text-xs font-medium text-green-600 transition-colors hover:bg-green-50 hover:text-green-900 dark:hover:bg-green-900/20"
+                            title="续期"
+                            @click="openRenewApiKeyModal(key)"
+                          >
+                            <i class="fas fa-clock" />
+                            <span class="ml-1 hidden xl:inline">续期</span>
+                          </button>
+                          <button
+                            :class="[
+                              key.isActive
+                                ? 'text-orange-600 hover:bg-orange-50 hover:text-orange-900 dark:hover:bg-orange-900/20'
+                                : 'text-green-600 hover:bg-green-50 hover:text-green-900 dark:hover:bg-green-900/20',
+                              'rounded px-2 py-1 text-xs font-medium transition-colors'
+                            ]"
+                            :title="key.isActive ? '禁用' : '激活'"
+                            @click="toggleApiKeyStatus(key)"
+                          >
+                            <i :class="['fas', key.isActive ? 'fa-ban' : 'fa-check-circle']" />
+                            <span class="ml-1 hidden xl:inline">{{
+                              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"
+                            title="删除"
+                            @click="deleteApiKey(key.id)"
+                          >
+                            <i class="fas fa-trash" />
+                            <span class="ml-1 hidden xl:inline">删除</span>
                           </button>
                         </div>
-                      </div>
-                    </td>
-                    <td
-                      class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400"
-                    >
-                      {{ new Date(key.createdAt).toLocaleDateString() }}
-                    </td>
-                    <td class="whitespace-nowrap px-3 py-4 text-sm">
-                      <div class="inline-flex items-center gap-1.5">
-                        <!-- 未激活状态 -->
-                        <span
-                          v-if="key.expirationMode === 'activation' && !key.isActivated"
-                          class="inline-flex items-center text-blue-600 dark:text-blue-400"
-                        >
-                          <i class="fas fa-pause-circle mr-1" />
-                          未激活 ({{ key.activationDays || 30 }}天)
-                        </span>
-                        <!-- 已设置过期时间 -->
-                        <span v-else-if="key.expiresAt">
-                          <span
-                            v-if="isApiKeyExpired(key.expiresAt)"
-                            class="inline-flex items-center text-red-600"
-                          >
-                            <i class="fas fa-exclamation-circle mr-1" />
-                            已过期
-                          </span>
-                          <span
-                            v-else-if="isApiKeyExpiringSoon(key.expiresAt)"
-                            class="inline-flex items-center text-orange-600"
-                          >
-                            <i class="fas fa-clock mr-1" />
-                            {{ formatExpireDate(key.expiresAt) }}
-                          </span>
-                          <span v-else class="text-gray-600 dark:text-gray-400">
-                            {{ formatExpireDate(key.expiresAt) }}
-                          </span>
-                        </span>
-                        <!-- 永不过期 -->
-                        <span
-                          v-else
-                          class="inline-flex items-center text-gray-400 dark:text-gray-500"
-                        >
-                          <i class="fas fa-infinity mr-1" />
-                          永不过期
-                        </span>
-                        <button
-                          class="inline-flex h-6 w-6 items-center justify-center rounded-md text-gray-300 transition-all duration-200 hover:bg-blue-50 hover:text-blue-500 dark:hover:bg-blue-900/20"
-                          title="编辑过期时间"
-                          @click.stop="startEditExpiry(key)"
-                        >
-                          <svg
-                            class="h-3 w-3"
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                            ></path>
-                          </svg>
-                        </button>
-                      </div>
-                    </td>
-                    <td class="whitespace-nowrap px-3 py-4 text-sm">
-                      <div class="flex gap-1">
-                        <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'
-                            ]"
-                          />
-                          <span class="ml-1 hidden xl:inline">模型</span>
-                        </button>
-                        <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="copyApiStatsLink(key)"
-                        >
-                          <i class="fas fa-chart-bar" />
-                          <span class="ml-1 hidden xl:inline">统计</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"
-                          title="编辑"
-                          @click="openEditApiKeyModal(key)"
-                        >
-                          <i class="fas fa-edit" />
-                          <span class="ml-1 hidden xl:inline">编辑</span>
-                        </button>
-                        <button
-                          v-if="
-                            key.expiresAt &&
-                            (isApiKeyExpired(key.expiresAt) || isApiKeyExpiringSoon(key.expiresAt))
-                          "
-                          class="rounded px-2 py-1 text-xs font-medium text-green-600 transition-colors hover:bg-green-50 hover:text-green-900 dark:hover:bg-green-900/20"
-                          title="续期"
-                          @click="openRenewApiKeyModal(key)"
-                        >
-                          <i class="fas fa-clock" />
-                          <span class="ml-1 hidden xl:inline">续期</span>
-                        </button>
-                        <button
-                          :class="[
-                            key.isActive
-                              ? 'text-orange-600 hover:bg-orange-50 hover:text-orange-900 dark:hover:bg-orange-900/20'
-                              : 'text-green-600 hover:bg-green-50 hover:text-green-900 dark:hover:bg-green-900/20',
-                            'rounded px-2 py-1 text-xs font-medium transition-colors'
-                          ]"
-                          :title="key.isActive ? '禁用' : '激活'"
-                          @click="toggleApiKeyStatus(key)"
-                        >
-                          <i :class="['fas', key.isActive ? 'fa-ban' : 'fa-check-circle']" />
-                          <span class="ml-1 hidden xl:inline">{{
-                            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"
-                          title="删除"
-                          @click="deleteApiKey(key.id)"
-                        >
-                          <i class="fas fa-trash" />
-                          <span class="ml-1 hidden xl:inline">删除</span>
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
+                      </td>
+                    </tr>
 
-                  <!-- 模型统计展开区域 -->
-                  <tr v-if="key && key.id && expandedApiKeys[key.id]">
-                    <td class="bg-gray-50 px-3 py-4 dark:bg-gray-700" colspan="8">
-                      <div v-if="!apiKeyModelStats[key.id]" class="py-4 text-center">
-                        <div class="loading-spinner mx-auto" />
-                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">加载模型统计...</p>
-                      </div>
-                      <div class="space-y-4">
-                        <!-- 通用的标题和时间筛选器，无论是否有数据都显示 -->
-                        <div class="mb-4 flex items-center justify-between">
-                          <h5
-                            class="flex items-center text-sm font-semibold text-gray-700 dark:text-gray-300"
-                          >
-                            <i class="fas fa-chart-pie mr-2 text-indigo-500" />
-                            模型使用分布
-                          </h5>
-                          <div class="flex items-center gap-2">
-                            <span
-                              v-if="apiKeyModelStats[key.id] && apiKeyModelStats[key.id].length > 0"
-                              class="rounded-full bg-gray-100 px-2 py-1 text-xs text-gray-500 dark:bg-gray-700 dark:text-gray-400"
-                            >
-                              {{ apiKeyModelStats[key.id].length }} 个模型
-                            </span>
-
-                            <!-- API Keys日期筛选器 -->
-                            <div class="flex items-center gap-1">
-                              <!-- 快捷日期选择 -->
-                              <div class="flex gap-1 rounded bg-gray-100 p-1 dark:bg-gray-700">
-                                <button
-                                  v-for="option in getApiKeyDateFilter(key.id).presetOptions"
-                                  :key="option.value"
-                                  :class="[
-                                    'rounded px-2 py-1 text-xs font-medium transition-colors',
-                                    getApiKeyDateFilter(key.id).preset === option.value &&
-                                    getApiKeyDateFilter(key.id).type === 'preset'
-                                      ? 'bg-white text-blue-600 shadow-sm dark:bg-gray-800'
-                                      : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200'
-                                  ]"
-                                  @click="setApiKeyDateFilterPreset(option.value, key.id)"
-                                >
-                                  {{ option.label }}
-                                </button>
-                              </div>
-
-                              <!-- Element Plus 日期范围选择器 -->
-                              <el-date-picker
-                                class="api-key-date-picker"
-                                :clearable="true"
-                                :default-time="defaultTime"
-                                :disabled-date="disabledDate"
-                                end-placeholder="结束日期"
-                                format="YYYY-MM-DD HH:mm:ss"
-                                :model-value="getApiKeyDateFilter(key.id).customRange"
-                                range-separator="至"
-                                size="small"
-                                start-placeholder="开始日期"
-                                style="width: 280px"
-                                type="datetimerange"
-                                :unlink-panels="false"
-                                value-format="YYYY-MM-DD HH:mm:ss"
-                                @update:model-value="
-                                  (value) => onApiKeyCustomDateRangeChange(key.id, value)
-                                "
-                              />
-                            </div>
-                          </div>
-                        </div>
-
-                        <!-- 数据展示区域 -->
-                        <div
-                          v-if="apiKeyModelStats[key.id] && apiKeyModelStats[key.id].length === 0"
-                          class="py-8 text-center"
-                        >
-                          <div class="mb-3 flex items-center justify-center gap-2">
-                            <i class="fas fa-chart-line text-lg text-gray-400" />
-                            <p class="text-sm text-gray-500 dark:text-gray-400">暂无模型使用数据</p>
-                            <button
-                              class="ml-2 flex items-center gap-1 text-sm text-blue-500 transition-colors hover:text-blue-700"
-                              title="重置筛选条件并刷新"
-                              @click="resetApiKeyDateFilter(key.id)"
-                            >
-                              <i class="fas fa-sync-alt text-xs" />
-                              <span class="text-xs">刷新</span>
-                            </button>
-                          </div>
-                          <p class="text-xs text-gray-400">
-                            尝试调整时间范围或点击刷新重新加载数据
+                    <!-- 模型统计展开区域 -->
+                    <tr v-if="key && key.id && expandedApiKeys[key.id]">
+                      <td class="bg-gray-50 px-3 py-3 dark:bg-gray-700" colspan="12">
+                        <div v-if="!apiKeyModelStats[key.id]" class="py-4 text-center">
+                          <div class="loading-spinner mx-auto" />
+                          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+                            加载模型统计...
                           </p>
                         </div>
-                        <div
-                          v-else-if="
-                            apiKeyModelStats[key.id] && apiKeyModelStats[key.id].length > 0
-                          "
-                          class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"
-                        >
+                        <div class="space-y-4">
+                          <!-- 通用的标题和时间筛选器，无论是否有数据都显示 -->
+                          <div class="mb-4 flex items-center justify-between">
+                            <h5
+                              class="flex items-center text-sm font-semibold text-gray-700 dark:text-gray-300"
+                            >
+                              <i class="fas fa-chart-pie mr-2 text-indigo-500" />
+                              模型使用分布
+                            </h5>
+                            <div class="flex items-center gap-2">
+                              <span
+                                v-if="
+                                  apiKeyModelStats[key.id] && apiKeyModelStats[key.id].length > 0
+                                "
+                                class="rounded-full bg-gray-100 px-2 py-1 text-xs text-gray-500 dark:bg-gray-700 dark:text-gray-400"
+                              >
+                                {{ apiKeyModelStats[key.id].length }} 个模型
+                              </span>
+
+                              <!-- API Keys日期筛选器 -->
+                              <div class="flex items-center gap-1">
+                                <!-- 快捷日期选择 -->
+                                <div class="flex gap-1 rounded bg-gray-100 p-1 dark:bg-gray-700">
+                                  <button
+                                    v-for="option in getApiKeyDateFilter(key.id).presetOptions"
+                                    :key="option.value"
+                                    :class="[
+                                      'rounded px-2 py-1 text-xs font-medium transition-colors',
+                                      getApiKeyDateFilter(key.id).preset === option.value &&
+                                      getApiKeyDateFilter(key.id).type === 'preset'
+                                        ? 'bg-white text-blue-600 shadow-sm dark:bg-gray-800'
+                                        : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200'
+                                    ]"
+                                    @click="setApiKeyDateFilterPreset(option.value, key.id)"
+                                  >
+                                    {{ option.label }}
+                                  </button>
+                                </div>
+
+                                <!-- Element Plus 日期范围选择器 -->
+                                <el-date-picker
+                                  class="api-key-date-picker"
+                                  :clearable="true"
+                                  :default-time="defaultTime"
+                                  :disabled-date="disabledDate"
+                                  end-placeholder="结束日期"
+                                  format="YYYY-MM-DD HH:mm:ss"
+                                  :model-value="getApiKeyDateFilter(key.id).customRange"
+                                  range-separator="至"
+                                  size="small"
+                                  start-placeholder="开始日期"
+                                  style="width: 280px"
+                                  type="datetimerange"
+                                  :unlink-panels="false"
+                                  value-format="YYYY-MM-DD HH:mm:ss"
+                                  @update:model-value="
+                                    (value) => onApiKeyCustomDateRangeChange(key.id, value)
+                                  "
+                                />
+                              </div>
+                            </div>
+                          </div>
+
+                          <!-- 数据展示区域 -->
                           <div
-                            v-for="stat in apiKeyModelStats[key.id]"
-                            :key="stat.model"
-                            class="rounded-xl border border-gray-200 bg-gradient-to-br from-white to-gray-50 p-4 transition-all duration-200 hover:border-indigo-300 hover:shadow-lg dark:border-gray-600 dark:from-gray-800 dark:to-gray-700 dark:hover:border-indigo-500"
+                            v-if="apiKeyModelStats[key.id] && apiKeyModelStats[key.id].length === 0"
+                            class="py-8 text-center"
                           >
-                            <div class="mb-3 flex items-start justify-between">
-                              <div class="flex-1">
-                                <span
-                                  class="mb-1 block text-sm font-semibold text-gray-800 dark:text-gray-200"
-                                  >{{ stat.model }}</span
-                                >
-                                <span
-                                  class="rounded-full bg-blue-50 px-2 py-1 text-xs text-gray-500 dark:bg-blue-900/30 dark:text-gray-400"
-                                  >{{ stat.requests }} 次请求</span
-                                >
-                              </div>
+                            <div class="mb-3 flex items-center justify-center gap-2">
+                              <i class="fas fa-chart-line text-lg text-gray-400" />
+                              <p class="text-sm text-gray-500 dark:text-gray-400">
+                                暂无模型使用数据
+                              </p>
+                              <button
+                                class="ml-2 flex items-center gap-1 text-sm text-blue-500 transition-colors hover:text-blue-700"
+                                title="重置筛选条件并刷新"
+                                @click="resetApiKeyDateFilter(key.id)"
+                              >
+                                <i class="fas fa-sync-alt text-xs" />
+                                <span class="text-xs">刷新</span>
+                              </button>
                             </div>
+                            <p class="text-xs text-gray-400">
+                              尝试调整时间范围或点击刷新重新加载数据
+                            </p>
+                          </div>
+                          <div
+                            v-else-if="
+                              apiKeyModelStats[key.id] && apiKeyModelStats[key.id].length > 0
+                            "
+                            class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"
+                          >
+                            <div
+                              v-for="stat in apiKeyModelStats[key.id]"
+                              :key="stat.model"
+                              class="rounded-xl border border-gray-200 bg-gradient-to-br from-white to-gray-50 p-4 transition-all duration-200 hover:border-indigo-300 hover:shadow-lg dark:border-gray-600 dark:from-gray-800 dark:to-gray-700 dark:hover:border-indigo-500"
+                            >
+                              <div class="mb-3 flex items-start justify-between">
+                                <div class="flex-1">
+                                  <span
+                                    class="mb-1 block text-sm font-semibold text-gray-800 dark:text-gray-200"
+                                    >{{ stat.model }}</span
+                                  >
+                                  <span
+                                    class="rounded-full bg-blue-50 px-2 py-1 text-xs text-gray-500 dark:bg-blue-900/30 dark:text-gray-400"
+                                    >{{ stat.requests }} 次请求</span
+                                  >
+                                </div>
+                              </div>
 
-                            <div class="mb-3 space-y-2">
-                              <div class="flex items-center justify-between text-sm">
-                                <span class="flex items-center text-gray-600 dark:text-gray-400">
-                                  <i class="fas fa-coins mr-1 text-xs text-yellow-500" />
-                                  总Token:
-                                </span>
-                                <span class="font-semibold text-gray-900 dark:text-gray-100">{{
-                                  formatTokenCount(stat.allTokens)
-                                }}</span>
-                              </div>
-                              <div class="flex items-center justify-between text-sm">
-                                <span class="flex items-center text-gray-600 dark:text-gray-400">
-                                  <i class="fas fa-dollar-sign mr-1 text-xs text-green-500" />
-                                  费用:
-                                </span>
-                                <span class="font-semibold text-green-600">{{
-                                  calculateModelCost(stat)
-                                }}</span>
-                              </div>
-                              <div class="mt-2 border-t border-gray-100 pt-2 dark:border-gray-600">
-                                <div
-                                  class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"
-                                >
-                                  <span class="flex items-center">
-                                    <i class="fas fa-arrow-down mr-1 text-green-500" />
-                                    输入:
+                              <div class="mb-3 space-y-2">
+                                <div class="flex items-center justify-between text-sm">
+                                  <span class="flex items-center text-gray-600 dark:text-gray-400">
+                                    <i class="fas fa-coins mr-1 text-xs text-yellow-500" />
+                                    总Token:
                                   </span>
-                                  <span class="font-medium">{{
-                                    formatTokenCount(stat.inputTokens)
+                                  <span class="font-semibold text-gray-900 dark:text-gray-100">{{
+                                    formatTokenCount(stat.allTokens)
+                                  }}</span>
+                                </div>
+                                <div class="flex items-center justify-between text-sm">
+                                  <span class="flex items-center text-gray-600 dark:text-gray-400">
+                                    <i class="fas fa-dollar-sign mr-1 text-xs text-green-500" />
+                                    费用:
+                                  </span>
+                                  <span class="font-semibold text-green-600">{{
+                                    calculateModelCost(stat)
                                   }}</span>
                                 </div>
                                 <div
-                                  class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"
+                                  class="mt-2 border-t border-gray-100 pt-2 dark:border-gray-600"
                                 >
-                                  <span class="flex items-center">
-                                    <i class="fas fa-arrow-up mr-1 text-blue-500" />
-                                    输出:
-                                  </span>
-                                  <span class="font-medium">{{
-                                    formatTokenCount(stat.outputTokens)
-                                  }}</span>
-                                </div>
-                                <div
-                                  v-if="stat.cacheCreateTokens > 0"
-                                  class="flex items-center justify-between text-xs text-purple-600"
-                                >
-                                  <span class="flex items-center">
-                                    <i class="fas fa-save mr-1" />
-                                    缓存创建:
-                                  </span>
-                                  <span class="font-medium">{{
-                                    formatTokenCount(stat.cacheCreateTokens)
-                                  }}</span>
-                                </div>
-                                <div
-                                  v-if="stat.cacheReadTokens > 0"
-                                  class="flex items-center justify-between text-xs text-purple-600"
-                                >
-                                  <span class="flex items-center">
-                                    <i class="fas fa-download mr-1" />
-                                    缓存读取:
-                                  </span>
-                                  <span class="font-medium">{{
-                                    formatTokenCount(stat.cacheReadTokens)
-                                  }}</span>
+                                  <div
+                                    class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"
+                                  >
+                                    <span class="flex items-center">
+                                      <i class="fas fa-arrow-down mr-1 text-green-500" />
+                                      输入:
+                                    </span>
+                                    <span class="font-medium">{{
+                                      formatTokenCount(stat.inputTokens)
+                                    }}</span>
+                                  </div>
+                                  <div
+                                    class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"
+                                  >
+                                    <span class="flex items-center">
+                                      <i class="fas fa-arrow-up mr-1 text-blue-500" />
+                                      输出:
+                                    </span>
+                                    <span class="font-medium">{{
+                                      formatTokenCount(stat.outputTokens)
+                                    }}</span>
+                                  </div>
+                                  <div
+                                    v-if="stat.cacheCreateTokens > 0"
+                                    class="flex items-center justify-between text-xs text-purple-600"
+                                  >
+                                    <span class="flex items-center">
+                                      <i class="fas fa-save mr-1" />
+                                      缓存创建:
+                                    </span>
+                                    <span class="font-medium">{{
+                                      formatTokenCount(stat.cacheCreateTokens)
+                                    }}</span>
+                                  </div>
+                                  <div
+                                    v-if="stat.cacheReadTokens > 0"
+                                    class="flex items-center justify-between text-xs text-purple-600"
+                                  >
+                                    <span class="flex items-center">
+                                      <i class="fas fa-download mr-1" />
+                                      缓存读取:
+                                    </span>
+                                    <span class="font-medium">{{
+                                      formatTokenCount(stat.cacheReadTokens)
+                                    }}</span>
+                                  </div>
                                 </div>
                               </div>
-                            </div>
 
-                            <!-- 进度条 -->
-                            <div class="mt-3 h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700">
+                              <!-- 进度条 -->
                               <div
-                                class="h-2 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 transition-all duration-500"
-                                :style="{
-                                  width:
+                                class="mt-3 h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700"
+                              >
+                                <div
+                                  class="h-2 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 transition-all duration-500"
+                                  :style="{
+                                    width:
+                                      calculateApiKeyModelPercentage(
+                                        stat.allTokens,
+                                        apiKeyModelStats[key.id]
+                                      ) + '%'
+                                  }"
+                                />
+                              </div>
+                              <div class="mt-1 text-right">
+                                <span class="text-xs font-medium text-indigo-600">
+                                  {{
                                     calculateApiKeyModelPercentage(
                                       stat.allTokens,
                                       apiKeyModelStats[key.id]
-                                    ) + '%'
-                                }"
-                              />
-                            </div>
-                            <div class="mt-1 text-right">
-                              <span class="text-xs font-medium text-indigo-600">
-                                {{
-                                  calculateApiKeyModelPercentage(
-                                    stat.allTokens,
-                                    apiKeyModelStats[key.id]
-                                  )
-                                }}%
-                              </span>
+                                    )
+                                  }}%
+                                </span>
+                              </div>
                             </div>
                           </div>
-                        </div>
 
-                        <!-- 总计统计，仅在有数据时显示 -->
-                        <div
-                          v-if="apiKeyModelStats[key.id] && apiKeyModelStats[key.id].length > 0"
-                          class="mt-4 rounded-lg border border-indigo-100 bg-gradient-to-r from-indigo-50 to-purple-50 p-3 dark:border-indigo-700 dark:from-indigo-900/20 dark:to-purple-900/20"
-                        >
-                          <div class="flex items-center justify-between text-sm">
-                            <span
-                              class="flex items-center font-semibold text-gray-700 dark:text-gray-300"
-                            >
-                              <i class="fas fa-calculator mr-2 text-indigo-500" />
-                              总计统计
-                            </span>
-                            <div class="flex gap-4 text-xs">
-                              <span class="text-gray-600 dark:text-gray-400">
-                                总请求:
-                                <span class="font-semibold text-gray-800 dark:text-gray-200">{{
-                                  apiKeyModelStats[key.id].reduce(
-                                    (sum, stat) => sum + stat.requests,
-                                    0
-                                  )
-                                }}</span>
+                          <!-- 总计统计，仅在有数据时显示 -->
+                          <div
+                            v-if="apiKeyModelStats[key.id] && apiKeyModelStats[key.id].length > 0"
+                            class="mt-4 rounded-lg border border-indigo-100 bg-gradient-to-r from-indigo-50 to-purple-50 p-3 dark:border-indigo-700 dark:from-indigo-900/20 dark:to-purple-900/20"
+                          >
+                            <div class="flex items-center justify-between text-sm">
+                              <span
+                                class="flex items-center font-semibold text-gray-700 dark:text-gray-300"
+                              >
+                                <i class="fas fa-calculator mr-2 text-indigo-500" />
+                                总计统计
                               </span>
-                              <span class="text-gray-600 dark:text-gray-400">
-                                总Token:
-                                <span class="font-semibold text-gray-800 dark:text-gray-200">{{
-                                  formatTokenCount(
+                              <div class="flex gap-4 text-xs">
+                                <span class="text-gray-600 dark:text-gray-400">
+                                  总请求:
+                                  <span class="font-semibold text-gray-800 dark:text-gray-200">{{
                                     apiKeyModelStats[key.id].reduce(
-                                      (sum, stat) => sum + stat.allTokens,
+                                      (sum, stat) => sum + stat.requests,
                                       0
                                     )
-                                  )
-                                }}</span>
-                              </span>
+                                  }}</span>
+                                </span>
+                                <span class="text-gray-600 dark:text-gray-400">
+                                  总Token:
+                                  <span class="font-semibold text-gray-800 dark:text-gray-200">{{
+                                    formatTokenCount(
+                                      apiKeyModelStats[key.id].reduce(
+                                        (sum, stat) => sum + stat.allTokens,
+                                        0
+                                      )
+                                    )
+                                  }}</span>
+                                </span>
+                              </div>
                             </div>
                           </div>
                         </div>
-                      </div>
-                    </td>
-                  </tr>
-                </template>
-              </tbody>
-            </table>
+                      </td>
+                    </tr>
+                  </template>
+                </tbody>
+              </table>
+            </div>
           </div>
 
           <!-- 移动端卡片视图 -->
@@ -961,17 +1039,13 @@
               <div class="mb-3 flex items-start justify-between">
                 <div class="flex items-center gap-3">
                   <input
+                    v-if="shouldShowCheckboxes"
                     v-model="selectedApiKeys"
                     class="mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                     type="checkbox"
                     :value="key.id"
                     @change="updateSelectAllState"
                   />
-                  <div
-                    class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-blue-600"
-                  >
-                    <i class="fas fa-key text-sm text-white" />
-                  </div>
                   <div>
                     <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                       {{ key.name }}
@@ -1078,7 +1152,9 @@
                 <!-- 今日使用 -->
                 <div class="rounded-lg bg-gray-50 p-3 dark:bg-gray-700">
                   <div class="mb-2 flex items-center justify-between">
-                    <span class="text-xs text-gray-600 dark:text-gray-400">今日使用</span>
+                    <span class="text-xs text-gray-600 dark:text-gray-400">{{
+                      globalDateFilter.type === 'custom' ? '累计统计' : '今日使用'
+                    }}</span>
                     <button
                       class="text-xs text-blue-600 hover:text-blue-800"
                       @click="showUsageDetails(key)"
@@ -1095,7 +1171,7 @@
                     </div>
                     <div>
                       <p class="text-sm font-semibold text-green-600">
-                        ${{ (key.dailyCost || 0).toFixed(4) }}
+                        ${{ (key.dailyCost || 0).toFixed(2) }}
                       </p>
                       <p class="text-xs text-gray-500 dark:text-gray-400">费用</p>
                     </div>
@@ -1194,14 +1270,14 @@
               <!-- 操作按钮 -->
               <div class="mt-3 flex gap-2 border-t border-gray-100 pt-3 dark:border-gray-600">
                 <button
-                  class="flex flex-1 items-center justify-center gap-1 rounded-lg bg-blue-50 px-3 py-2 text-xs text-blue-600 transition-colors hover:bg-blue-100 dark:bg-blue-900/30 dark:hover:bg-blue-900/50"
+                  class="flex flex-1 items-center justify-center gap-1 rounded-lg bg-blue-50 px-3 py-1.5 text-xs text-blue-600 transition-colors hover:bg-blue-100 dark:bg-blue-900/30 dark:hover:bg-blue-900/50"
                   @click="showUsageDetails(key)"
                 >
                   <i class="fas fa-chart-line" />
                   查看详情
                 </button>
                 <button
-                  class="flex-1 rounded-lg bg-gray-50 px-3 py-2 text-xs text-gray-600 transition-colors hover:bg-gray-100 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+                  class="flex-1 rounded-lg bg-gray-50 px-3 py-1.5 text-xs text-gray-600 transition-colors hover:bg-gray-100 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
                   @click="openEditApiKeyModal(key)"
                 >
                   <i class="fas fa-edit mr-1" />
@@ -1212,7 +1288,7 @@
                     key.expiresAt &&
                     (isApiKeyExpired(key.expiresAt) || isApiKeyExpiringSoon(key.expiresAt))
                   "
-                  class="flex-1 rounded-lg bg-orange-50 px-3 py-2 text-xs text-orange-600 transition-colors hover:bg-orange-100 dark:bg-orange-900/30 dark:hover:bg-orange-900/50"
+                  class="flex-1 rounded-lg bg-orange-50 px-3 py-1.5 text-xs text-orange-600 transition-colors hover:bg-orange-100 dark:bg-orange-900/30 dark:hover:bg-orange-900/50"
                   @click="openRenewApiKeyModal(key)"
                 >
                   <i class="fas fa-clock mr-1" />
@@ -1223,7 +1299,7 @@
                     key.isActive
                       ? 'bg-orange-50 text-orange-600 hover:bg-orange-100 dark:bg-orange-900/30 dark:hover:bg-orange-900/50'
                       : 'bg-green-50 text-green-600 hover:bg-green-100 dark:bg-green-900/30 dark:hover:bg-green-900/50',
-                    'rounded-lg px-3 py-2 text-xs transition-colors'
+                    'rounded-lg px-3 py-1.5 text-xs transition-colors'
                   ]"
                   @click="toggleApiKeyStatus(key)"
                 >
@@ -1231,7 +1307,7 @@
                   {{ key.isActive ? '禁用' : '激活' }}
                 </button>
                 <button
-                  class="rounded-lg bg-red-50 px-3 py-2 text-xs text-red-600 transition-colors hover:bg-red-100 dark:bg-red-900/30 dark:hover:bg-red-900/50"
+                  class="rounded-lg bg-red-50 px-3 py-1.5 text-xs text-red-600 transition-colors hover:bg-red-100 dark:bg-red-900/30 dark:hover:bg-red-900/50"
                   @click="deleteApiKey(key.id)"
                 >
                   <i class="fas fa-trash" />
@@ -1363,162 +1439,244 @@
               </button>
             </div>
 
-            <div class="table-container">
-              <table class="w-full table-fixed">
-                <thead class="bg-gray-50/80 backdrop-blur-sm dark:bg-gray-700/80">
-                  <tr>
-                    <th
-                      class="w-[20%] 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
-                      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"
-                    >
-                      创建者
-                    </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"
-                    >
-                      创建时间
-                    </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"
-                    >
-                      删除者
-                    </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"
-                    >
-                      删除时间
-                    </th>
-                    <th
-                      class="w-[20%] 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="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>
-                  </tr>
-                </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-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-red-500 to-red-600"
-                        >
-                          <i class="fas fa-trash text-xs text-white" />
-                        </div>
-                        <div class="min-w-0">
+            <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">
+                    <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"
+                      >
+                        名称
+                      </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"
+                      >
+                        所属账号
+                      </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"
+                      >
+                        创建者
+                      </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"
+                      >
+                        创建时间
+                      </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-[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-[8%] min-w-[60px] 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"
+                      >
+                        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"
+                      >
+                        请求数
+                      </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"
+                      >
+                        最后使用
+                      </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"
+                      >
+                        操作
+                      </th>
+                    </tr>
+                  </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-1.5">
+                        <div class="flex items-center">
                           <div
-                            class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100"
-                            :title="key.name"
+                            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"
                           >
-                            {{ key.name }}
+                            <i class="fas fa-trash text-[10px] text-white" />
                           </div>
-                          <div
-                            class="truncate text-xs text-gray-500 dark:text-gray-400"
-                            :title="key.id"
-                          >
-                            {{ key.id }}
+                          <div class="min-w-0">
+                            <div
+                              class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100"
+                              :title="key.name"
+                            >
+                              {{ key.name }}
+                            </div>
                           </div>
                         </div>
-                      </div>
-                    </td>
-                    <td v-if="isLdapEnabled" class="px-3 py-4">
-                      <div class="text-sm">
-                        <span v-if="key.createdBy === 'admin'" class="text-blue-600">
-                          <i class="fas fa-user-shield mr-1" />
-                          管理员
-                        </span>
-                        <span v-else-if="key.userUsername" class="text-green-600">
-                          <i class="fas fa-user mr-1" />
-                          {{ key.userUsername }}
-                        </span>
-                        <span v-else class="text-gray-500 dark:text-gray-400">
-                          <i class="fas fa-question-circle mr-1" />
-                          未知
-                        </span>
-                      </div>
-                    </td>
-                    <td
-                      class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400"
-                    >
-                      {{ formatDate(key.createdAt) }}
-                    </td>
-                    <td class="px-3 py-4">
-                      <div class="text-sm">
-                        <span v-if="key.deletedByType === 'admin'" class="text-blue-600">
-                          <i class="fas fa-user-shield mr-1" />
-                          {{ key.deletedBy }}
-                        </span>
-                        <span v-else-if="key.deletedByType === 'user'" class="text-green-600">
-                          <i class="fas fa-user mr-1" />
-                          {{ key.deletedBy }}
-                        </span>
-                        <span v-else class="text-gray-500 dark:text-gray-400">
-                          <i class="fas fa-cog mr-1" />
-                          {{ key.deletedBy }}
-                        </span>
-                      </div>
-                    </td>
-                    <td
-                      class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400"
-                    >
-                      {{ formatDate(key.deletedAt) }}
-                    </td>
-                    <td class="px-3 py-4">
-                      <div class="text-sm">
-                        <div class="flex items-center justify-between">
-                          <span class="text-gray-600 dark:text-gray-400">请求</span>
-                          <span class="font-semibold text-gray-900 dark:text-gray-100">
-                            {{ formatNumber(key.usage?.total?.requests || 0) }}次
+                      </td>
+                      <!-- 所属账号 -->
+                      <td class="px-3 py-1.5">
+                        <div class="space-y-1">
+                          <!-- Claude OAuth 绑定 -->
+                          <div v-if="key.claudeAccountId" class="flex items-center gap-1 text-xs">
+                            <span
+                              class="inline-flex items-center rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300"
+                            >
+                              <i class="fas fa-robot mr-1 text-[10px]" />
+                              Claude OAuth
+                            </span>
+                          </div>
+                          <!-- Claude Console 绑定 -->
+                          <div
+                            v-else-if="key.claudeConsoleAccountId"
+                            class="flex items-center gap-1 text-xs"
+                          >
+                            <span
+                              class="inline-flex items-center rounded bg-green-100 px-1.5 py-0.5 text-green-700 dark:bg-green-900/30 dark:text-green-300"
+                            >
+                              <i class="fas fa-terminal mr-1 text-[10px]" />
+                              Claude Console
+                            </span>
+                          </div>
+                          <!-- Gemini 绑定 -->
+                          <div
+                            v-else-if="key.geminiAccountId"
+                            class="flex items-center gap-1 text-xs"
+                          >
+                            <span
+                              class="inline-flex items-center rounded bg-purple-100 px-1.5 py-0.5 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300"
+                            >
+                              <i class="fa-google mr-1 text-[10px]" />
+                              Gemini
+                            </span>
+                          </div>
+                          <!-- 共享池 -->
+                          <div v-else class="text-xs text-gray-500 dark:text-gray-400">
+                            <i class="fas fa-share-alt mr-1" />
+                            共享池
+                          </div>
+                        </div>
+                      </td>
+                      <!-- 创建者 -->
+                      <td v-if="isLdapEnabled" class="px-3 py-1.5">
+                        <div class="text-xs">
+                          <span v-if="key.createdBy === 'admin'" class="text-blue-600">
+                            <i class="fas fa-user-shield mr-1 text-xs" />
+                            管理员
+                          </span>
+                          <span v-else-if="key.userUsername" class="text-green-600">
+                            <i class="fas fa-user mr-1 text-xs" />
+                            {{ key.userUsername }}
+                          </span>
+                          <span v-else class="text-gray-500 dark:text-gray-400">
+                            <i class="fas fa-question-circle mr-1 text-xs" />
+                            未知
                           </span>
                         </div>
-                        <div class="flex items-center justify-between">
-                          <span class="text-gray-600 dark:text-gray-400">费用</span>
-                          <span class="font-semibold text-green-600">
-                            ${{ (key.usage?.total?.cost || 0).toFixed(4) }}
+                      </td>
+                      <!-- 创建时间 -->
+                      <td
+                        class="whitespace-nowrap px-3 py-1.5 text-gray-700 dark:text-gray-300"
+                        style="font-size: 13px"
+                      >
+                        {{ formatDate(key.createdAt) }}
+                      </td>
+                      <!-- 删除者 -->
+                      <td class="px-3 py-1.5">
+                        <div class="text-xs">
+                          <span v-if="key.deletedByType === 'admin'" class="text-blue-600">
+                            <i class="fas fa-user-shield mr-1 text-xs" />
+                            {{ key.deletedBy }}
+                          </span>
+                          <span v-else-if="key.deletedByType === 'user'" class="text-green-600">
+                            <i class="fas fa-user mr-1 text-xs" />
+                            {{ key.deletedBy }}
+                          </span>
+                          <span v-else class="text-gray-500 dark:text-gray-400">
+                            <i class="fas fa-cog mr-1 text-xs" />
+                            {{ key.deletedBy }}
                           </span>
                         </div>
-                        <div v-if="key.lastUsedAt" class="flex items-center justify-between">
-                          <span class="text-gray-600 dark:text-gray-400">最后使用</span>
-                          <span class="font-medium text-gray-700 dark:text-gray-300">
-                            {{ formatLastUsed(key.lastUsedAt) }}
-                          </span>
-                        </div>
-                        <div v-else class="text-xs text-gray-400">从未使用</div>
-                      </div>
-                    </td>
-                    <td class="px-3 py-4">
-                      <div class="flex items-center gap-2">
-                        <button
-                          v-if="key.canRestore"
-                          class="rounded-lg bg-green-50 px-3 py-1.5 text-xs font-medium text-green-600 transition-colors hover:bg-green-100 dark:bg-green-900/30 dark:text-green-400 dark:hover:bg-green-900/50"
-                          title="恢复 API Key"
-                          @click="restoreApiKey(key.id)"
+                      </td>
+                      <!-- 删除时间 -->
+                      <td
+                        class="whitespace-nowrap px-3 py-1.5 text-gray-700 dark:text-gray-300"
+                        style="font-size: 13px"
+                      >
+                        {{ formatDate(key.deletedAt) }}
+                      </td>
+                      <!-- 费用 -->
+                      <td class="whitespace-nowrap px-3 py-1.5 text-right" style="font-size: 13px">
+                        <span
+                          class="font-medium text-blue-600 dark:text-blue-400"
+                          style="font-size: 13px"
                         >
-                          <i class="fas fa-undo mr-1" />
-                          恢复
-                        </button>
-                        <button
-                          class="rounded-lg bg-red-50 px-3 py-1.5 text-xs font-medium text-red-600 transition-colors hover:bg-red-100 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50"
-                          title="彻底删除 API Key"
-                          @click="permanentDeleteApiKey(key.id)"
+                          ${{ (key.usage?.total?.cost || 0).toFixed(2) }}
+                        </span>
+                      </td>
+                      <!-- Token -->
+                      <td class="whitespace-nowrap px-3 py-1.5 text-right" style="font-size: 13px">
+                        <span
+                          class="font-medium text-purple-600 dark:text-purple-400"
+                          style="font-size: 13px"
                         >
-                          <i class="fas fa-times mr-1" />
-                          彻底删除
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
+                          {{ formatTokenCount(key.usage?.total?.tokens || 0) }}
+                        </span>
+                      </td>
+                      <!-- 请求数 -->
+                      <td class="whitespace-nowrap px-3 py-1.5 text-right" style="font-size: 13px">
+                        <div class="flex items-center justify-end gap-1">
+                          <span
+                            class="font-medium text-gray-900 dark:text-gray-100"
+                            style="font-size: 13px"
+                          >
+                            {{ formatNumber(key.usage?.total?.requests || 0) }}
+                          </span>
+                          <span class="text-xs text-gray-500">次</span>
+                        </div>
+                      </td>
+                      <!-- 最后使用 -->
+                      <td
+                        class="whitespace-nowrap px-3 py-1.5 text-gray-700 dark:text-gray-300"
+                        style="font-size: 13px"
+                      >
+                        <span v-if="key.lastUsedAt" style="font-size: 13px">
+                          {{ formatLastUsed(key.lastUsedAt) }}
+                        </span>
+                        <span v-else class="text-gray-400" style="font-size: 13px">从未使用</span>
+                      </td>
+                      <td class="px-3 py-1.5">
+                        <div class="flex items-center gap-2">
+                          <button
+                            v-if="key.canRestore"
+                            class="rounded-lg bg-green-50 px-3 py-1.5 text-xs font-medium text-green-600 transition-colors hover:bg-green-100 dark:bg-green-900/30 dark:text-green-400 dark:hover:bg-green-900/50"
+                            title="恢复 API Key"
+                            @click="restoreApiKey(key.id)"
+                          >
+                            <i class="fas fa-undo mr-1" />
+                            恢复
+                          </button>
+                          <button
+                            class="rounded-lg bg-red-50 px-3 py-1.5 text-xs font-medium text-red-600 transition-colors hover:bg-red-100 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50"
+                            title="彻底删除 API Key"
+                            @click="permanentDeleteApiKey(key.id)"
+                          >
+                            <i class="fas fa-times mr-1" />
+                            彻底删除
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
             </div>
           </div>
         </div>
@@ -1588,11 +1746,12 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, reactive, computed, onMounted, watch } from 'vue'
 import { showToast } from '@/utils/toast'
 import { apiClient } from '@/config/api'
 import { useClientsStore } from '@/stores/clients'
 import { useAuthStore } from '@/stores/auth'
+import * as XLSX from 'xlsx-js-style'
 import CreateApiKeyModal from '@/components/apikeys/CreateApiKeyModal.vue'
 import EditApiKeyModal from '@/components/apikeys/EditApiKeyModal.vue'
 import RenewApiKeyModal from '@/components/apikeys/RenewApiKeyModal.vue'
@@ -1616,14 +1775,49 @@ const isLdapEnabled = computed(() => authStore.oemSettings?.ldapEnabled || false
 const selectedApiKeys = ref([])
 const selectAllChecked = ref(false)
 const isIndeterminate = ref(false)
+const showCheckboxes = ref(false)
 const apiKeysLoading = ref(false)
 const apiKeyStatsTimeRange = ref('today')
 
+// 全局日期筛选器
+const globalDateFilter = reactive({
+  type: 'preset',
+  preset: 'today',
+  customStart: '',
+  customEnd: '',
+  customRange: null
+})
+
+// 是否应该显示多选框
+const shouldShowCheckboxes = computed(() => {
+  return showCheckboxes.value
+})
+
+// 切换选择模式
+const toggleSelectionMode = () => {
+  showCheckboxes.value = !showCheckboxes.value
+  // 关闭选择模式时清空已选项
+  if (!showCheckboxes.value) {
+    selectedApiKeys.value = []
+    selectAllChecked.value = false
+    isIndeterminate.value = false
+  }
+}
+
+// 时间范围下拉选项
+const timeRangeDropdownOptions = computed(() => [
+  { value: 'today', label: '今日', icon: 'fa-calendar-day' },
+  { value: '7days', label: '最近7天', icon: 'fa-calendar-week' },
+  { value: '30days', label: '最近30天', icon: 'fa-calendar-alt' },
+  { value: 'all', label: '全部时间', icon: 'fa-infinity' },
+  { value: 'custom', label: '自定义范围', icon: 'fa-calendar-check' }
+])
+
 // Tab management
 const activeTab = ref('active')
 const deletedApiKeys = ref([])
 const deletedApiKeysLoading = ref(false)
-const apiKeysSortBy = ref('dailyCost')
+const apiKeysSortBy = ref('periodCost')
 const apiKeysSortOrder = ref('desc')
 const expandedApiKeys = ref({})
 const apiKeyModelStats = ref({})
@@ -1650,14 +1844,6 @@ const availableTags = ref([])
 // 搜索相关
 const searchKeyword = ref('')
 
-// 下拉选项数据
-const timeRangeOptions = ref([
-  { value: 'today', label: '今日', icon: 'fa-clock' },
-  { value: '7days', label: '最近7天', icon: 'fa-calendar-week' },
-  { value: 'monthly', label: '本月', icon: 'fa-calendar' },
-  { value: 'all', label: '全部时间', icon: 'fa-infinity' }
-])
-
 const tagOptions = computed(() => {
   const options = [{ value: '', label: '所有标签', icon: 'fa-asterisk' }]
   availableTags.value.forEach((tag) => {
@@ -1729,13 +1915,26 @@ const sortedApiKeys = computed(() => {
     if (apiKeysSortBy.value === 'status') {
       aVal = a.isActive ? 1 : 0
       bVal = b.isActive ? 1 : 0
+    } else if (apiKeysSortBy.value === 'periodRequests') {
+      aVal = getPeriodRequests(a)
+      bVal = getPeriodRequests(b)
+    } else if (apiKeysSortBy.value === 'periodCost') {
+      aVal = calculatePeriodCost(a)
+      bVal = calculatePeriodCost(b)
+    } else if (apiKeysSortBy.value === 'periodTokens') {
+      aVal = getPeriodTokens(a)
+      bVal = getPeriodTokens(b)
     } else if (apiKeysSortBy.value === 'dailyCost') {
       aVal = a.dailyCost || 0
       bVal = b.dailyCost || 0
     } else if (apiKeysSortBy.value === 'totalCost') {
       aVal = a.totalCost || 0
       bVal = b.totalCost || 0
-    } else if (apiKeysSortBy.value === 'createdAt' || apiKeysSortBy.value === 'expiresAt') {
+    } else if (
+      apiKeysSortBy.value === 'createdAt' ||
+      apiKeysSortBy.value === 'expiresAt' ||
+      apiKeysSortBy.value === 'lastUsedAt'
+    ) {
       aVal = aVal ? new Date(aVal).getTime() : 0
       bVal = bVal ? new Date(bVal).getTime() : 0
     }
@@ -1867,10 +2066,26 @@ const loadAccounts = async () => {
 const loadApiKeys = async () => {
   apiKeysLoading.value = true
   try {
-    const data = await apiClient.get(`/admin/api-keys?timeRange=${apiKeyStatsTimeRange.value}`)
+    // 构建请求参数
+    let params = {}
+    if (
+      globalDateFilter.type === 'custom' &&
+      globalDateFilter.customStart &&
+      globalDateFilter.customEnd
+    ) {
+      params.startDate = globalDateFilter.customStart
+      params.endDate = globalDateFilter.customEnd
+      params.timeRange = 'custom'
+    } else if (globalDateFilter.preset === 'all') {
+      params.timeRange = 'all'
+    } else {
+      params.timeRange = globalDateFilter.preset
+    }
+
+    const queryString = new URLSearchParams(params).toString()
+    const data = await apiClient.get(`/admin/api-keys?${queryString}`)
     if (data.success) {
       apiKeys.value = data.data || []
-
       // 更新可用标签列表
       const tagsSet = new Set()
       apiKeys.value.forEach((key) => {
@@ -1919,6 +2134,17 @@ const formatNumber = (num) => {
   return num.toLocaleString('zh-CN')
 }
 
+// 格式化Token数量
+const formatTokenCount = (count) => {
+  if (!count && count !== 0) return '0'
+  if (count >= 1000000) {
+    return (count / 1000000).toFixed(1) + 'M'
+  } else if (count >= 1000) {
+    return (count / 1000).toFixed(1) + 'K'
+  }
+  return count.toString()
+}
+
 // 获取绑定账户名称
 const getBoundAccountName = (accountId) => {
   if (!accountId) return '未知账户'
@@ -2157,22 +2383,362 @@ const calculateModelCost = (stat) => {
   return '$0.000000'
 }
 
+// 获取日期范围内的请求数
+const getPeriodRequests = (key) => {
+  // 根据全局日期筛选器返回对应的请求数
+  if (globalDateFilter.type === 'custom') {
+    // 自定义日期范围
+    if (key.usage) {
+      if (key.usage['custom'] && key.usage['custom'].requests !== undefined) {
+        return key.usage['custom'].requests
+      }
+      if (key.usage.total && key.usage.total.requests !== undefined) {
+        return key.usage.total.requests
+      }
+    }
+    return 0
+  } else if (globalDateFilter.preset === 'today') {
+    return key.usage?.daily?.requests || 0
+  } else if (globalDateFilter.preset === '7days') {
+    // 使用 usage['7days'].requests
+    if (key.usage && key.usage['7days'] && key.usage['7days'].requests !== undefined) {
+      return key.usage['7days'].requests
+    }
+    return 0
+  } else if (globalDateFilter.preset === '30days') {
+    // 使用 usage['30days'].requests
+    if (key.usage) {
+      if (key.usage['30days'] && key.usage['30days'].requests !== undefined) {
+        return key.usage['30days'].requests
+      }
+      if (key.usage.monthly && key.usage.monthly.requests !== undefined) {
+        return key.usage.monthly.requests
+      }
+    }
+    return 0
+  } else if (globalDateFilter.preset === 'all') {
+    // 全部时间
+    if (key.usage && key.usage['all'] && key.usage['all'].requests !== undefined) {
+      return key.usage['all'].requests
+    }
+    return key.usage?.total?.requests || 0
+  } else {
+    // 默认返回
+    return key.usage?.total?.requests || 0
+  }
+}
+
+// 获取日期范围内的费用
+const getPeriodCost = (key) => {
+  // 根据全局日期筛选器返回对应的费用
+  if (globalDateFilter.type === 'custom') {
+    // 自定义日期范围，使用服务器返回的 usage['custom'].cost
+    if (key.usage) {
+      if (key.usage['custom'] && key.usage['custom'].cost !== undefined) {
+        return key.usage['custom'].cost
+      }
+      if (key.usage.total && key.usage.total.cost !== undefined) {
+        return key.usage.total.cost
+      }
+    }
+    return 0
+  } else if (globalDateFilter.preset === 'today') {
+    return key.dailyCost || 0
+  } else if (globalDateFilter.preset === '7days') {
+    // 使用 usage['7days'].cost
+    if (key.usage && key.usage['7days'] && key.usage['7days'].cost !== undefined) {
+      return key.usage['7days'].cost
+    }
+    return key.weeklyCost || key.periodCost || 0
+  } else if (globalDateFilter.preset === '30days') {
+    // 使用 usage['30days'].cost 或 usage.monthly.cost
+    if (key.usage) {
+      if (key.usage['30days'] && key.usage['30days'].cost !== undefined) {
+        return key.usage['30days'].cost
+      }
+      if (key.usage.monthly && key.usage.monthly.cost !== undefined) {
+        return key.usage.monthly.cost
+      }
+      if (key.usage.total && key.usage.total.cost !== undefined) {
+        return key.usage.total.cost
+      }
+    }
+    return key.monthlyCost || key.periodCost || 0
+  } else if (globalDateFilter.preset === 'all') {
+    // 全部时间，返回 usage['all'].cost 或 totalCost
+    if (key.usage && key.usage['all'] && key.usage['all'].cost !== undefined) {
+      return key.usage['all'].cost
+    }
+    return key.totalCost || 0
+  } else {
+    // 默认返回 usage.total.cost
+    return key.periodCost || key.totalCost || 0
+  }
+}
+
+// 获取日期范围内的token数量
+const getPeriodTokens = (key) => {
+  // 根据全局日期筛选器返回对应的token数量
+  if (globalDateFilter.type === 'custom') {
+    // 自定义日期范围
+    if (key.usage) {
+      if (key.usage['custom'] && key.usage['custom'].tokens !== undefined) {
+        return key.usage['custom'].tokens
+      }
+      if (key.usage.total && key.usage.total.tokens !== undefined) {
+        return key.usage.total.tokens
+      }
+    }
+    return 0
+  } else if (globalDateFilter.preset === 'today') {
+    return key.usage?.daily?.tokens || 0
+  } else if (globalDateFilter.preset === '7days') {
+    // 使用 usage['7days'].tokens
+    if (key.usage && key.usage['7days'] && key.usage['7days'].tokens !== undefined) {
+      return key.usage['7days'].tokens
+    }
+    return 0
+  } else if (globalDateFilter.preset === '30days') {
+    // 使用 usage['30days'].tokens 或 usage.monthly.tokens
+    if (key.usage) {
+      if (key.usage['30days'] && key.usage['30days'].tokens !== undefined) {
+        return key.usage['30days'].tokens
+      }
+      if (key.usage.monthly && key.usage.monthly.tokens !== undefined) {
+        return key.usage.monthly.tokens
+      }
+      if (key.usage.total && key.usage.total.tokens !== undefined) {
+        return key.usage.total.tokens
+      }
+    }
+    return 0
+  } else if (globalDateFilter.preset === 'all') {
+    // 全部时间
+    if (key.usage && key.usage['all'] && key.usage['all'].tokens !== undefined) {
+      return key.usage['all'].tokens
+    }
+    return key.usage?.total?.tokens || 0
+  } else {
+    // 默认返回
+    return key.usage?.total?.tokens || 0
+  }
+}
+
+// 获取日期范围内的输入token数量
+const getPeriodInputTokens = (key) => {
+  // 根据全局日期筛选器返回对应的输入token数量
+  if (globalDateFilter.type === 'custom') {
+    // 自定义日期范围
+    if (key.usage) {
+      if (key.usage['custom'] && key.usage['custom'].inputTokens !== undefined) {
+        return key.usage['custom'].inputTokens
+      }
+      if (key.usage.total && key.usage.total.inputTokens !== undefined) {
+        return key.usage.total.inputTokens
+      }
+    }
+    return 0
+  } else if (globalDateFilter.preset === 'today') {
+    return key.usage?.daily?.inputTokens || 0
+  } else if (globalDateFilter.preset === '7days') {
+    // 使用 usage['7days'].inputTokens
+    if (key.usage && key.usage['7days'] && key.usage['7days'].inputTokens !== undefined) {
+      return key.usage['7days'].inputTokens
+    }
+    return 0
+  } else if (globalDateFilter.preset === '30days') {
+    // 使用 usage['30days'].inputTokens 或 usage.monthly.inputTokens
+    if (key.usage) {
+      if (key.usage['30days'] && key.usage['30days'].inputTokens !== undefined) {
+        return key.usage['30days'].inputTokens
+      }
+      if (key.usage.monthly && key.usage.monthly.inputTokens !== undefined) {
+        return key.usage.monthly.inputTokens
+      }
+      if (key.usage.total && key.usage.total.inputTokens !== undefined) {
+        return key.usage.total.inputTokens
+      }
+    }
+    return 0
+  } else if (globalDateFilter.preset === 'all') {
+    // 全部时间
+    if (key.usage && key.usage['all'] && key.usage['all'].inputTokens !== undefined) {
+      return key.usage['all'].inputTokens
+    }
+    return key.usage?.total?.inputTokens || 0
+  } else {
+    // 默认返回
+    return key.usage?.total?.inputTokens || 0
+  }
+}
+
+// 获取日期范围内的输出token数量
+const getPeriodOutputTokens = (key) => {
+  // 根据全局日期筛选器返回对应的输出token数量
+  if (globalDateFilter.type === 'custom') {
+    // 自定义日期范围
+    if (key.usage) {
+      if (key.usage['custom'] && key.usage['custom'].outputTokens !== undefined) {
+        return key.usage['custom'].outputTokens
+      }
+      if (key.usage.total && key.usage.total.outputTokens !== undefined) {
+        return key.usage.total.outputTokens
+      }
+    }
+    return 0
+  } else if (globalDateFilter.preset === 'today') {
+    return key.usage?.daily?.outputTokens || 0
+  } else if (globalDateFilter.preset === '7days') {
+    // 使用 usage['7days'].outputTokens
+    if (key.usage && key.usage['7days'] && key.usage['7days'].outputTokens !== undefined) {
+      return key.usage['7days'].outputTokens
+    }
+    return 0
+  } else if (globalDateFilter.preset === '30days') {
+    // 使用 usage['30days'].outputTokens 或 usage.monthly.outputTokens
+    if (key.usage) {
+      if (key.usage['30days'] && key.usage['30days'].outputTokens !== undefined) {
+        return key.usage['30days'].outputTokens
+      }
+      if (key.usage.monthly && key.usage.monthly.outputTokens !== undefined) {
+        return key.usage.monthly.outputTokens
+      }
+      if (key.usage.total && key.usage.total.outputTokens !== undefined) {
+        return key.usage.total.outputTokens
+      }
+    }
+    return 0
+  } else if (globalDateFilter.preset === 'all') {
+    // 全部时间
+    if (key.usage && key.usage['all'] && key.usage['all'].outputTokens !== undefined) {
+      return key.usage['all'].outputTokens
+    }
+    return key.usage?.total?.outputTokens || 0
+  } else {
+    // 默认返回
+    return key.usage?.total?.outputTokens || 0
+  }
+}
+
+// 计算日期范围内的总费用（用于展开的详细统计）
+const calculatePeriodCost = (key) => {
+  // 如果没有展开，使用缓存的费用数据
+  if (!apiKeyModelStats.value[key.id]) {
+    return getPeriodCost(key)
+  }
+
+  // 计算所有模型的费用总和
+  const stats = apiKeyModelStats.value[key.id] || []
+  let totalCost = 0
+
+  stats.forEach((stat) => {
+    if (stat.cost !== undefined) {
+      totalCost += stat.cost
+    } else if (stat.formatted && stat.formatted.total) {
+      // 尝试从格式化的字符串中提取数字
+      const costStr = stat.formatted.total.replace('$', '').replace(',', '')
+      const cost = parseFloat(costStr)
+      if (!isNaN(cost)) {
+        totalCost += cost
+      }
+    }
+  })
+
+  return totalCost
+}
+
+// 处理时间范围下拉框变化
+const handleTimeRangeChange = (value) => {
+  setGlobalDateFilterPreset(value)
+}
+
+// 设置全局日期预设
+const setGlobalDateFilterPreset = (preset) => {
+  globalDateFilter.preset = preset
+
+  if (preset === 'custom') {
+    // 自定义选项，不自动设置日期，等待用户选择
+    globalDateFilter.type = 'custom'
+    // 如果没有自定义范围，设置默认为最近7天
+    if (!globalDateFilter.customRange) {
+      const today = new Date()
+      const startDate = new Date(today)
+      startDate.setDate(today.getDate() - 6)
+
+      const formatDate = (date) => {
+        return (
+          date.getFullYear() +
+          '-' +
+          String(date.getMonth() + 1).padStart(2, '0') +
+          '-' +
+          String(date.getDate()).padStart(2, '0') +
+          ' 00:00:00'
+        )
+      }
+
+      globalDateFilter.customRange = [formatDate(startDate), formatDate(today)]
+      globalDateFilter.customStart = startDate.toISOString().split('T')[0]
+      globalDateFilter.customEnd = today.toISOString().split('T')[0]
+    }
+  } else if (preset === 'all') {
+    // 全部时间选项
+    globalDateFilter.type = 'preset'
+    globalDateFilter.customStart = null
+    globalDateFilter.customEnd = null
+  } else {
+    // 预设选项（今日、7天或30天）
+    globalDateFilter.type = 'preset'
+    const today = new Date()
+    const startDate = new Date(today)
+
+    if (preset === 'today') {
+      // 今日：从今天开始到今天结束
+      startDate.setHours(0, 0, 0, 0)
+    } else if (preset === '7days') {
+      startDate.setDate(today.getDate() - 6)
+    } else if (preset === '30days') {
+      startDate.setDate(today.getDate() - 29)
+    }
+
+    globalDateFilter.customStart = startDate.toISOString().split('T')[0]
+    globalDateFilter.customEnd = today.toISOString().split('T')[0]
+  }
+
+  loadApiKeys()
+}
+
+// 全局自定义日期范围变化
+const onGlobalCustomDateRangeChange = (value) => {
+  if (value && value.length === 2) {
+    globalDateFilter.type = 'custom'
+    globalDateFilter.preset = 'custom'
+    globalDateFilter.customRange = value
+    globalDateFilter.customStart = value[0].split(' ')[0]
+    globalDateFilter.customEnd = value[1].split(' ')[0]
+    loadApiKeys()
+  } else if (value === null) {
+    // 清空时恢复默认今日
+    setGlobalDateFilterPreset('today')
+  }
+}
+
 // 初始化API Key的日期筛选器
 const initApiKeyDateFilter = (keyId) => {
   const today = new Date()
   const startDate = new Date(today)
-  startDate.setDate(today.getDate() - 6) // 7天前
+  startDate.setHours(0, 0, 0, 0) // 今日从0点开始
 
   apiKeyDateFilters.value[keyId] = {
     type: 'preset',
-    preset: '7days',
-    customStart: startDate.toISOString().split('T')[0],
+    preset: 'today',
+    customStart: today.toISOString().split('T')[0],
     customEnd: today.toISOString().split('T')[0],
     customRange: null,
     presetOptions: [
       { value: 'today', label: '今日', days: 1 },
       { value: '7days', label: '7天', days: 7 },
-      { value: '30days', label: '30天', days: 30 }
+      { value: '30days', label: '30天', days: 30 },
+      { value: 'custom', label: '自定义', days: -1 }
     ]
   }
 }
@@ -2193,25 +2759,52 @@ const setApiKeyDateFilterPreset = (preset, keyId) => {
 
   const option = filter.presetOptions.find((opt) => opt.value === preset)
   if (option) {
-    const today = new Date()
-    const startDate = new Date(today)
-    startDate.setDate(today.getDate() - (option.days - 1))
+    if (preset === 'custom') {
+      // 自定义选项，不自动设置日期，等待用户选择
+      filter.type = 'custom'
+      // 如果没有自定义范围，设置默认为最近7天
+      if (!filter.customRange) {
+        const today = new Date()
+        const startDate = new Date(today)
+        startDate.setDate(today.getDate() - 6)
 
-    filter.customStart = startDate.toISOString().split('T')[0]
-    filter.customEnd = today.toISOString().split('T')[0]
+        const formatDate = (date) => {
+          return (
+            date.getFullYear() +
+            '-' +
+            String(date.getMonth() + 1).padStart(2, '0') +
+            '-' +
+            String(date.getDate()).padStart(2, '0') +
+            ' 00:00:00'
+          )
+        }
 
-    const formatDate = (date) => {
-      return (
-        date.getFullYear() +
-        '-' +
-        String(date.getMonth() + 1).padStart(2, '0') +
-        '-' +
-        String(date.getDate()).padStart(2, '0') +
-        ' 00:00:00'
-      )
+        filter.customRange = [formatDate(startDate), formatDate(today)]
+        filter.customStart = startDate.toISOString().split('T')[0]
+        filter.customEnd = today.toISOString().split('T')[0]
+      }
+    } else {
+      // 预设选项
+      const today = new Date()
+      const startDate = new Date(today)
+      startDate.setDate(today.getDate() - (option.days - 1))
+
+      filter.customStart = startDate.toISOString().split('T')[0]
+      filter.customEnd = today.toISOString().split('T')[0]
+
+      const formatDate = (date) => {
+        return (
+          date.getFullYear() +
+          '-' +
+          String(date.getMonth() + 1).padStart(2, '0') +
+          '-' +
+          String(date.getDate()).padStart(2, '0') +
+          ' 00:00:00'
+        )
+      }
+
+      filter.customRange = [formatDate(startDate), formatDate(today)]
     }
-
-    filter.customRange = [formatDate(startDate), formatDate(today)]
   }
 
   loadApiKeyModelStats(keyId, true)
@@ -2223,7 +2816,7 @@ const onApiKeyCustomDateRangeChange = (keyId, value) => {
 
   if (value && value.length === 2) {
     filter.type = 'custom'
-    filter.preset = ''
+    filter.preset = 'custom'
     filter.customRange = value
     filter.customStart = value[0].split(' ')[0]
     filter.customEnd = value[1].split(' ')[0]
@@ -2244,15 +2837,15 @@ const disabledDate = (date) => {
 const resetApiKeyDateFilter = (keyId) => {
   const filter = getApiKeyDateFilter(keyId)
 
-  // 重置为默认的7天
+  // 重置为默认的今日
   filter.type = 'preset'
-  filter.preset = '7days'
+  filter.preset = 'today'
 
   const today = new Date()
   const startDate = new Date(today)
-  startDate.setDate(today.getDate() - 6)
+  startDate.setHours(0, 0, 0, 0) // 今日从0点开始
 
-  filter.customStart = startDate.toISOString().split('T')[0]
+  filter.customStart = today.toISOString().split('T')[0]
   filter.customEnd = today.toISOString().split('T')[0]
   filter.customRange = null
 
@@ -2376,6 +2969,7 @@ const toggleApiKeyStatus = async (key) => {
   }
 }
 
+// 更新API Key图标
 // 删除API Key
 const deleteApiKey = async (keyId) => {
   let confirmed = false
@@ -2615,40 +3209,6 @@ const updateSelectAllState = () => {
   }
 }
 
-// 复制API统计页面链接
-const copyApiStatsLink = (apiKey) => {
-  // 构建统计页面的完整URL
-  const baseUrl = window.location.origin
-  const statsUrl = `${baseUrl}/admin-next/api-stats?apiId=${apiKey.id}`
-
-  // 使用传统的textarea方法复制到剪贴板
-  const textarea = document.createElement('textarea')
-  textarea.value = statsUrl
-  textarea.style.position = 'fixed'
-  textarea.style.opacity = '0'
-  textarea.style.left = '-9999px'
-  document.body.appendChild(textarea)
-
-  textarea.select()
-  textarea.setSelectionRange(0, 99999) // 兼容移动端
-
-  try {
-    const successful = document.execCommand('copy')
-    if (successful) {
-      showToast(`已复制统计页面链接`, 'success')
-    } else {
-      showToast('复制失败，请手动复制', 'error')
-      console.log('统计页面链接:', statsUrl)
-    }
-  } catch (err) {
-    showToast('复制失败，请手动复制', 'error')
-    console.error('复制错误:', err)
-    console.log('统计页面链接:', statsUrl)
-  } finally {
-    document.body.removeChild(textarea)
-  }
-}
-
 // 开始编辑过期时间
 const startEditExpiry = (apiKey) => {
   editingExpiryKey.value = apiKey
@@ -2746,22 +3306,19 @@ const getWeeklyOpusCostProgressColor = (key) => {
   return 'bg-green-500'
 }
 
+// 获取总费用进度 - 暂时不用
+// const getTotalCostProgress = (key) => {
+//   if (!key.totalCostLimit || key.totalCostLimit === 0) return 0
+//   const percentage = ((key.totalCost || 0) / key.totalCostLimit) * 100
+//   return Math.min(percentage, 100)
+// }
+
 // 显示使用详情
 const showUsageDetails = (apiKey) => {
   selectedApiKeyForDetail.value = apiKey
   showUsageDetailModal.value = true
 }
 
-// 格式化Token数量（使用K/M单位）
-const formatTokenCount = (count) => {
-  if (count >= 1000000) {
-    return (count / 1000000).toFixed(1) + 'M'
-  } else if (count >= 1000) {
-    return (count / 1000).toFixed(1) + 'K'
-  }
-  return count.toString()
-}
-
 // 格式化最后使用时间
 const formatLastUsed = (dateString) => {
   if (!dateString) return '从未使用'
@@ -2781,6 +3338,204 @@ const clearSearch = () => {
   currentPage.value = 1
 }
 
+// 导出数据到Excel
+const exportToExcel = () => {
+  try {
+    // 准备导出的数据 - 简化版本
+    const exportData = sortedApiKeys.value.map((key) => {
+      // 获取当前时间段的数据
+      const periodRequests = getPeriodRequests(key)
+      const periodCost = calculatePeriodCost(key)
+      const periodTokens = getPeriodTokens(key)
+      const periodInputTokens = getPeriodInputTokens(key)
+      const periodOutputTokens = getPeriodOutputTokens(key)
+
+      // 基础数据
+      const baseData = {
+        名称: key.name || '',
+        标签: key.tags && key.tags.length > 0 ? key.tags.join(', ') : '无',
+        请求总数: periodRequests,
+        '总费用($)': periodCost.toFixed(2),
+        Token数: formatTokenCount(periodTokens),
+        输入Token: formatTokenCount(periodInputTokens),
+        输出Token: formatTokenCount(periodOutputTokens),
+        最后使用时间: key.lastUsedAt ? formatDate(key.lastUsedAt) : '从未使用'
+      }
+
+      // 添加分模型统计
+      const modelStats = {}
+
+      // 根据当前时间筛选条件获取对应的模型统计
+      let modelsData = null
+
+      if (globalDateFilter.preset === 'today') {
+        modelsData = key.usage?.daily?.models
+      } else if (globalDateFilter.preset === '7days') {
+        modelsData = key.usage?.weekly?.models
+      } else if (globalDateFilter.preset === '30days') {
+        modelsData = key.usage?.monthly?.models
+      } else if (globalDateFilter.preset === 'all') {
+        modelsData = key.usage?.total?.models
+      }
+
+      // 处理模型统计
+      if (modelsData) {
+        Object.entries(modelsData).forEach(([model, stats]) => {
+          // 简化模型名称，去掉前缀
+          let modelName = model
+          if (model.includes(':')) {
+            modelName = model.split(':').pop() // 取最后一部分
+          }
+          modelName = modelName.replace(/[:/]/g, '_')
+
+          modelStats[`${modelName}_请求数`] = stats.requests || 0
+          modelStats[`${modelName}_费用($)`] = (stats.cost || 0).toFixed(2)
+          modelStats[`${modelName}_Token`] = formatTokenCount(stats.totalTokens || 0)
+          modelStats[`${modelName}_输入Token`] = formatTokenCount(stats.inputTokens || 0)
+          modelStats[`${modelName}_输出Token`] = formatTokenCount(stats.outputTokens || 0)
+        })
+      }
+
+      return { ...baseData, ...modelStats }
+    })
+
+    // 创建工作簿
+    const wb = XLSX.utils.book_new()
+    const ws = XLSX.utils.json_to_sheet(exportData)
+
+    // 获取工作表范围
+    const range = XLSX.utils.decode_range(ws['!ref'])
+
+    // 设置列宽
+    const headers = Object.keys(exportData[0] || {})
+    const columnWidths = headers.map((header) => {
+      if (header === '名称') return { wch: 25 }
+      if (header === '标签') return { wch: 20 }
+      if (header === '最后使用时间') return { wch: 20 }
+      if (header.includes('费用')) return { wch: 15 }
+      if (header.includes('Token')) return { wch: 15 }
+      if (header.includes('请求')) return { wch: 12 }
+      return { wch: 15 }
+    })
+    ws['!cols'] = columnWidths
+
+    // 应用样式到标题行
+    for (let C = range.s.c; C <= range.e.c; ++C) {
+      const cellAddress = XLSX.utils.encode_cell({ r: 0, c: C })
+      if (!ws[cellAddress]) continue
+
+      const header = headers[C]
+      const isModelColumn = header && header.includes('_')
+
+      ws[cellAddress].s = {
+        fill: {
+          fgColor: { rgb: isModelColumn ? '70AD47' : '4472C4' }
+        },
+        font: {
+          color: { rgb: 'FFFFFF' },
+          bold: true,
+          sz: 12
+        },
+        alignment: {
+          horizontal: 'center',
+          vertical: 'center'
+        },
+        border: {
+          top: { style: 'thin', color: { rgb: '2F5597' } },
+          bottom: { style: 'thin', color: { rgb: '2F5597' } },
+          left: { style: 'thin', color: { rgb: '2F5597' } },
+          right: { style: 'thin', color: { rgb: '2F5597' } }
+        }
+      }
+    }
+
+    // 应用样式到数据行
+    for (let R = 1; R <= range.e.r; ++R) {
+      for (let C = range.s.c; C <= range.e.c; ++C) {
+        const cellAddress = XLSX.utils.encode_cell({ r: R, c: C })
+        if (!ws[cellAddress]) continue
+
+        const header = headers[C]
+        const value = ws[cellAddress].v
+
+        // 基础样式
+        const cellStyle = {
+          font: { sz: 11 },
+          border: {
+            top: { style: 'thin', color: { rgb: 'D3D3D3' } },
+            bottom: { style: 'thin', color: { rgb: 'D3D3D3' } },
+            left: { style: 'thin', color: { rgb: 'D3D3D3' } },
+            right: { style: 'thin', color: { rgb: 'D3D3D3' } }
+          }
+        }
+
+        // 偶数行背景色
+        if (R % 2 === 0) {
+          cellStyle.fill = { fgColor: { rgb: 'F2F2F2' } }
+        }
+
+        // 根据列类型设置对齐和特殊样式
+        if (header === '名称') {
+          cellStyle.alignment = { horizontal: 'left', vertical: 'center' }
+        } else if (header === '标签') {
+          cellStyle.alignment = { horizontal: 'left', vertical: 'center' }
+          if (value === '无') {
+            cellStyle.font = { ...cellStyle.font, color: { rgb: '999999' }, italic: true }
+          }
+        } else if (header === '最后使用时间') {
+          cellStyle.alignment = { horizontal: 'right', vertical: 'center' }
+          if (value === '从未使用') {
+            cellStyle.font = { ...cellStyle.font, color: { rgb: '999999' }, italic: true }
+          }
+        } else if (header && header.includes('费用')) {
+          cellStyle.alignment = { horizontal: 'right', vertical: 'center' }
+          cellStyle.font = { ...cellStyle.font, color: { rgb: '0066CC' }, bold: true }
+        } else if (header && (header.includes('Token') || header.includes('请求'))) {
+          cellStyle.alignment = { horizontal: 'right', vertical: 'center' }
+        }
+
+        ws[cellAddress].s = cellStyle
+      }
+    }
+
+    XLSX.utils.book_append_sheet(wb, ws, '用量统计')
+
+    // 生成文件名（包含时间戳和筛选条件）
+    const now = new Date()
+    const timestamp =
+      now.getFullYear() +
+      String(now.getMonth() + 1).padStart(2, '0') +
+      String(now.getDate()).padStart(2, '0') +
+      '_' +
+      String(now.getHours()).padStart(2, '0') +
+      String(now.getMinutes()).padStart(2, '0') +
+      String(now.getSeconds()).padStart(2, '0')
+
+    let timeRangeLabel = ''
+    if (globalDateFilter.type === 'preset') {
+      const presetLabels = {
+        today: '今日',
+        '7days': '最近7天',
+        '30days': '最近30天',
+        all: '全部时间'
+      }
+      timeRangeLabel = presetLabels[globalDateFilter.preset] || globalDateFilter.preset
+    } else {
+      timeRangeLabel = '自定义时间'
+    }
+
+    const filename = `API_Keys_用量统计_${timeRangeLabel}_${timestamp}.xlsx`
+
+    // 导出文件
+    XLSX.writeFile(wb, filename)
+
+    showToast(`成功导出 ${exportData.length} 条API Key用量数据`, 'success')
+  } catch (error) {
+    console.error('导出失败:', error)
+    showToast('导出失败，请重试', 'error')
+  }
+}
+
 // 监听筛选条件变化，重置页码和选中状态
 // 监听筛选条件变化（不包括搜索），清空选中状态
 watch([selectedTagFilter, apiKeyStatsTimeRange], () => {
@@ -2826,20 +3581,57 @@ onMounted(async () => {
   min-height: calc(100vh - 300px);
 }
 
-.table-container {
-  overflow-x: auto;
+.table-wrapper {
+  overflow: hidden;
   border-radius: 12px;
   border: 1px solid rgba(0, 0, 0, 0.05);
+  width: 100%;
+}
+
+.table-container {
+  overflow-x: hidden;
+  overflow-y: hidden;
+  margin: 0;
+  padding: 0;
+  max-width: 100%;
+}
+
+/* 防止表格内容溢出 */
+.table-container table {
+  min-width: 100%;
+  border-collapse: collapse;
+}
+
+.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;
 }
 
 .table-row {
-  transition: all 0.2s ease;
+  transition: background-color 0.2s ease;
 }
 
 .table-row:hover {
   background-color: rgba(0, 0, 0, 0.02);
 }
 
+.dark .table-row:hover {
+  background-color: rgba(255, 255, 255, 0.02);
+}
+
 .loading-spinner {
   width: 24px;
   height: 24px;
@@ -2865,4 +3657,19 @@ onMounted(async () => {
 .api-key-date-picker :deep(.el-range-separator) {
   @apply text-gray-500;
 }
+
+/* 自定义日期范围选择器高度对齐 */
+.custom-date-range-picker :deep(.el-input__wrapper) {
+  @apply h-[38px] rounded-lg border border-gray-200 bg-white shadow-sm transition-all duration-200 hover:border-gray-300 hover:shadow-md dark:border-gray-600 dark:bg-gray-800;
+}
+.custom-date-range-picker :deep(.el-input__inner) {
+  @apply h-full py-2 text-sm font-medium text-gray-700 dark:text-gray-200;
+}
+.custom-date-range-picker :deep(.el-input__prefix),
+.custom-date-range-picker :deep(.el-input__suffix) {
+  @apply flex items-center;
+}
+.custom-date-range-picker :deep(.el-range-separator) {
+  @apply mx-2 text-gray-500;
+}
 </style>