优化仪表盘自动刷新UI布局

- 调整Element Plus日期选择器宽度为400px，确保时间完整显示
- 重新设计自动刷新控制的样式和布局
- 统一控制栏所有元素的高度，保持视觉一致性
- 使用更精致的开关组件和优化的交互效果

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

web/admin-spa/src/components/apistats/ApiKeyInput.vue

@@ -3,10 +3,12 @@
     <!-- 标题区域 -->
     <div class="wide-card-title text-center mb-6">
       <h2 class="text-2xl font-bold mb-2">
-        <i class="fas fa-chart-line mr-3"></i>
+        <i class="fas fa-chart-line mr-3" />
         使用统计查询
       </h2>
-      <p class="text-base text-gray-600">查询您的 API Key 使用情况和统计数据</p>
+      <p class="text-base text-gray-600">
+        查询您的 API Key 使用情况和统计数据
+      </p>
     </div>
     
     <!-- 输入区域 -->
@@ -15,7 +17,7 @@
         <!-- API Key 输入 -->
         <div class="lg:col-span-3">
           <label class="block text-sm font-medium mb-2 text-gray-700">
-            <i class="fas fa-key mr-2"></i>
+            <i class="fas fa-key mr-2" />
             输入您的 API Key
           </label>
           <input 
@@ -23,8 +25,8 @@
             type="password" 
             placeholder="请输入您的 API Key (cr_...)"
             class="wide-card-input w-full"
-            @keyup.enter="queryStats"
             :disabled="loading"
+            @keyup.enter="queryStats"
           >
         </div>
         
@@ -34,12 +36,18 @@
             &nbsp;
           </label>
           <button 
-            @click="queryStats"
             :disabled="loading || !apiKey.trim()"
             class="btn btn-primary btn-query w-full h-full flex items-center justify-center gap-2"
+            @click="queryStats"
           >
-            <i v-if="loading" class="fas fa-spinner loading-spinner"></i>
-            <i v-else class="fas fa-search"></i>
+            <i
+              v-if="loading"
+              class="fas fa-spinner loading-spinner"
+            />
+            <i
+              v-else
+              class="fas fa-search"
+            />
             {{ loading ? '查询中...' : '查询统计' }}
           </button>
         </div>
@@ -47,7 +55,7 @@
       
       <!-- 安全提示 -->
       <div class="security-notice mt-4">
-        <i class="fas fa-shield-alt mr-2"></i>
+        <i class="fas fa-shield-alt mr-2" />
         您的 API Key 仅用于查询自己的统计数据，不会被存储或用于其他用途
       </div>
     </div>

web/admin-spa/src/components/apistats/LimitConfig.vue

@@ -3,7 +3,7 @@
     <!-- 限制配置 -->
     <div class="card p-6">
       <h3 class="text-xl font-bold mb-4 flex items-center text-gray-900">
-        <i class="fas fa-shield-alt mr-3 text-red-500"></i>
+        <i class="fas fa-shield-alt mr-3 text-red-500" />
         限制配置
       </h3>
       <div class="space-y-3">
@@ -19,8 +19,8 @@
           <span class="text-gray-600">速率限制</span>
           <span class="font-medium text-gray-900">
             {{ statsData.limits.rateLimitRequests > 0 && statsData.limits.rateLimitWindow > 0 
-                ? `${statsData.limits.rateLimitRequests}次/${statsData.limits.rateLimitWindow}分钟` 
-                : '无限制' }}
+              ? `${statsData.limits.rateLimitRequests}次/${statsData.limits.rateLimitWindow}分钟` 
+              : '无限制' }}
           </span>
         </div>
         <div class="flex justify-between items-center">
@@ -30,13 +30,18 @@
         <div class="flex justify-between items-center">
           <span class="text-gray-600">模型限制</span>
           <span class="font-medium text-gray-900">
-            <span v-if="statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0" 
-                  class="text-orange-600">
-              <i class="fas fa-exclamation-triangle mr-1"></i>
+            <span
+              v-if="statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0" 
+              class="text-orange-600"
+            >
+              <i class="fas fa-exclamation-triangle mr-1" />
               限制 {{ statsData.restrictions.restrictedModels.length }} 个模型
             </span>
-            <span v-else class="text-green-600">
-              <i class="fas fa-check-circle mr-1"></i>
+            <span
+              v-else
+              class="text-green-600"
+            >
+              <i class="fas fa-check-circle mr-1" />
               允许所有模型
             </span>
           </span>
@@ -44,13 +49,18 @@
         <div class="flex justify-between items-center">
           <span class="text-gray-600">客户端限制</span>
           <span class="font-medium text-gray-900">
-            <span v-if="statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0" 
-                  class="text-orange-600">
-              <i class="fas fa-exclamation-triangle mr-1"></i>
+            <span
+              v-if="statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0" 
+              class="text-orange-600"
+            >
+              <i class="fas fa-exclamation-triangle mr-1" />
               限制 {{ statsData.restrictions.allowedClients.length }} 个客户端
             </span>
-            <span v-else class="text-green-600">
-              <i class="fas fa-check-circle mr-1"></i>
+            <span
+              v-else
+              class="text-green-600"
+            >
+              <i class="fas fa-check-circle mr-1" />
               允许所有客户端
             </span>
           </span>
@@ -59,53 +69,63 @@
     </div>
 
     <!-- 详细限制信息 -->
-    <div v-if="(statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0) || 
-               (statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0)" 
-         class="card p-6 mt-6">
+    <div
+      v-if="(statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0) || 
+        (statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0)" 
+      class="card p-6 mt-6"
+    >
       <h3 class="text-xl font-bold mb-4 flex items-center text-gray-900">
-        <i class="fas fa-list-alt mr-3 text-amber-500"></i>
+        <i class="fas fa-list-alt mr-3 text-amber-500" />
         详细限制信息
       </h3>
       
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <!-- 模型限制详情 -->
-        <div v-if="statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0" 
-             class="bg-amber-50 border border-amber-200 rounded-lg p-4">
+        <div
+          v-if="statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0" 
+          class="bg-amber-50 border border-amber-200 rounded-lg p-4"
+        >
           <h4 class="font-bold text-amber-800 mb-3 flex items-center">
-            <i class="fas fa-robot mr-2"></i>
+            <i class="fas fa-robot mr-2" />
             受限模型列表
           </h4>
           <div class="space-y-2">
-            <div v-for="model in statsData.restrictions.restrictedModels" 
-                 :key="model" 
-                 class="bg-white rounded px-3 py-2 text-sm border border-amber-200">
-              <i class="fas fa-ban mr-2 text-red-500"></i>
+            <div
+              v-for="model in statsData.restrictions.restrictedModels" 
+              :key="model" 
+              class="bg-white rounded px-3 py-2 text-sm border border-amber-200"
+            >
+              <i class="fas fa-ban mr-2 text-red-500" />
               <span class="text-gray-800">{{ model }}</span>
             </div>
           </div>
           <p class="text-xs text-amber-700 mt-3">
-            <i class="fas fa-info-circle mr-1"></i>
+            <i class="fas fa-info-circle mr-1" />
             此 API Key 不能访问以上列出的模型
           </p>
         </div>
         
         <!-- 客户端限制详情 -->
-        <div v-if="statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0" 
-             class="bg-blue-50 border border-blue-200 rounded-lg p-4">
+        <div
+          v-if="statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0" 
+          class="bg-blue-50 border border-blue-200 rounded-lg p-4"
+        >
           <h4 class="font-bold text-blue-800 mb-3 flex items-center">
-            <i class="fas fa-desktop mr-2"></i>
+            <i class="fas fa-desktop mr-2" />
             允许的客户端
           </h4>
           <div class="space-y-2">
-            <div v-for="client in statsData.restrictions.allowedClients" 
-                 :key="client" 
-                 class="bg-white rounded px-3 py-2 text-sm border border-blue-200">
-              <i class="fas fa-check mr-2 text-green-500"></i>
+            <div
+              v-for="client in statsData.restrictions.allowedClients" 
+              :key="client" 
+              class="bg-white rounded px-3 py-2 text-sm border border-blue-200"
+            >
+              <i class="fas fa-check mr-2 text-green-500" />
               <span class="text-gray-800">{{ client }}</span>
             </div>
           </div>
           <p class="text-xs text-blue-700 mt-3">
-            <i class="fas fa-info-circle mr-1"></i>
+            <i class="fas fa-info-circle mr-1" />
             此 API Key 只能被以上列出的客户端使用
           </p>
         </div>

web/admin-spa/src/components/apistats/ModelUsageStats.vue

@@ -2,19 +2,27 @@
   <div class="card p-6">
     <div class="mb-6">
       <h3 class="text-xl font-bold flex items-center text-gray-900">
-        <i class="fas fa-robot mr-3 text-indigo-500"></i>
+        <i class="fas fa-robot mr-3 text-indigo-500" />
         模型使用统计 <span class="text-sm font-normal text-gray-600 ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
       </h3>
     </div>
 
     <!-- 模型统计加载状态 -->
-    <div v-if="modelStatsLoading" class="text-center py-8">
-      <i class="fas fa-spinner loading-spinner text-2xl mb-2 text-gray-600"></i>
-      <p class="text-gray-600">加载模型统计数据中...</p>
+    <div
+      v-if="modelStatsLoading"
+      class="text-center py-8"
+    >
+      <i class="fas fa-spinner loading-spinner text-2xl mb-2 text-gray-600" />
+      <p class="text-gray-600">
+        加载模型统计数据中...
+      </p>
     </div>
 
     <!-- 模型统计数据 -->
-    <div v-else-if="modelStats.length > 0" class="space-y-4">
+    <div
+      v-else-if="modelStats.length > 0"
+      class="space-y-4"
+    >
       <div 
         v-for="(model, index) in modelStats" 
         :key="index"
@@ -22,39 +30,66 @@
       >
         <div class="flex justify-between items-start mb-3">
           <div>
-            <h4 class="font-bold text-lg text-gray-900">{{ model.model }}</h4>
-            <p class="text-gray-600 text-sm">{{ model.requests }} 次请求</p>
+            <h4 class="font-bold text-lg text-gray-900">
+              {{ model.model }}
+            </h4>
+            <p class="text-gray-600 text-sm">
+              {{ model.requests }} 次请求
+            </p>
           </div>
           <div class="text-right">
-            <div class="text-lg font-bold text-green-600">{{ model.formatted?.total || '$0.000000' }}</div>
-            <div class="text-sm text-gray-600">总费用</div>
+            <div class="text-lg font-bold text-green-600">
+              {{ model.formatted?.total || '$0.000000' }}
+            </div>
+            <div class="text-sm text-gray-600">
+              总费用
+            </div>
           </div>
         </div>
         
         <div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
           <div class="bg-gray-50 rounded p-2">
-            <div class="text-gray-600">输入 Token</div>
-            <div class="font-medium text-gray-900">{{ formatNumber(model.inputTokens) }}</div>
+            <div class="text-gray-600">
+              输入 Token
+            </div>
+            <div class="font-medium text-gray-900">
+              {{ formatNumber(model.inputTokens) }}
+            </div>
           </div>
           <div class="bg-gray-50 rounded p-2">
-            <div class="text-gray-600">输出 Token</div>
-            <div class="font-medium text-gray-900">{{ formatNumber(model.outputTokens) }}</div>
+            <div class="text-gray-600">
+              输出 Token
+            </div>
+            <div class="font-medium text-gray-900">
+              {{ formatNumber(model.outputTokens) }}
+            </div>
           </div>
           <div class="bg-gray-50 rounded p-2">
-            <div class="text-gray-600">缓存创建</div>
-            <div class="font-medium text-gray-900">{{ formatNumber(model.cacheCreateTokens) }}</div>
+            <div class="text-gray-600">
+              缓存创建
+            </div>
+            <div class="font-medium text-gray-900">
+              {{ formatNumber(model.cacheCreateTokens) }}
+            </div>
           </div>
           <div class="bg-gray-50 rounded p-2">
-            <div class="text-gray-600">缓存读取</div>
-            <div class="font-medium text-gray-900">{{ formatNumber(model.cacheReadTokens) }}</div>
+            <div class="text-gray-600">
+              缓存读取
+            </div>
+            <div class="font-medium text-gray-900">
+              {{ formatNumber(model.cacheReadTokens) }}
+            </div>
           </div>
         </div>
       </div>
     </div>
 
     <!-- 无模型数据 -->
-    <div v-else class="text-center py-8 text-gray-500">
-      <i class="fas fa-chart-pie text-3xl mb-3"></i>
+    <div
+      v-else
+      class="text-center py-8 text-gray-500"
+    >
+      <i class="fas fa-chart-pie text-3xl mb-3" />
       <p>暂无{{ statsPeriod === 'daily' ? '今日' : '本月' }}模型使用数据</p>
     </div>
   </div>

web/admin-spa/src/components/apistats/StatsOverview.vue

@@ -3,7 +3,7 @@
     <!-- API Key 基本信息 -->
     <div class="card p-6">
       <h3 class="text-xl font-bold mb-4 flex items-center text-gray-900">
-        <i class="fas fa-info-circle mr-3 text-blue-500"></i>
+        <i class="fas fa-info-circle mr-3 text-blue-500" />
         API Key 信息
       </h3>
       <div class="space-y-3">
@@ -13,8 +13,14 @@
         </div>
         <div class="flex justify-between items-center">
           <span class="text-gray-600">状态</span>
-          <span :class="statsData.isActive ? 'text-green-600' : 'text-red-600'" class="font-medium">
-            <i :class="statsData.isActive ? 'fas fa-check-circle' : 'fas fa-times-circle'" class="mr-1"></i>
+          <span
+            :class="statsData.isActive ? 'text-green-600' : 'text-red-600'"
+            class="font-medium"
+          >
+            <i
+              :class="statsData.isActive ? 'fas fa-check-circle' : 'fas fa-times-circle'"
+              class="mr-1"
+            />
             {{ statsData.isActive ? '活跃' : '已停用' }}
           </span>
         </div>
@@ -29,20 +35,32 @@
         <div class="flex justify-between items-center">
           <span class="text-gray-600">过期时间</span>
           <div v-if="statsData.expiresAt">
-            <div v-if="isApiKeyExpired(statsData.expiresAt)" class="text-red-600 font-medium">
-              <i class="fas fa-exclamation-circle mr-1"></i>
+            <div
+              v-if="isApiKeyExpired(statsData.expiresAt)"
+              class="text-red-600 font-medium"
+            >
+              <i class="fas fa-exclamation-circle mr-1" />
               已过期
             </div>
-            <div v-else-if="isApiKeyExpiringSoon(statsData.expiresAt)" class="text-orange-600 font-medium">
-              <i class="fas fa-clock mr-1"></i>
+            <div
+              v-else-if="isApiKeyExpiringSoon(statsData.expiresAt)"
+              class="text-orange-600 font-medium"
+            >
+              <i class="fas fa-clock mr-1" />
               {{ formatExpireDate(statsData.expiresAt) }}
             </div>
-            <div v-else class="text-gray-900 font-medium">
+            <div
+              v-else
+              class="text-gray-900 font-medium"
+            >
               {{ formatExpireDate(statsData.expiresAt) }}
             </div>
           </div>
-          <div v-else class="text-gray-400 font-medium">
-            <i class="fas fa-infinity mr-1"></i>
+          <div
+            v-else
+            class="text-gray-400 font-medium"
+          >
+            <i class="fas fa-infinity mr-1" />
             永不过期
           </div>
         </div>
@@ -52,25 +70,41 @@
     <!-- 使用统计概览 -->
     <div class="card p-6">
       <h3 class="text-xl font-bold mb-4 flex items-center text-gray-900">
-        <i class="fas fa-chart-bar mr-3 text-green-500"></i>
+        <i class="fas fa-chart-bar mr-3 text-green-500" />
         使用统计概览 <span class="text-sm font-normal text-gray-600 ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
       </h3>
       <div class="grid grid-cols-2 gap-4">
         <div class="stat-card text-center">
-          <div class="text-3xl font-bold text-green-600">{{ formatNumber(currentPeriodData.requests) }}</div>
-          <div class="text-sm text-gray-600">{{ statsPeriod === 'daily' ? '今日' : '本月' }}请求数</div>
+          <div class="text-3xl font-bold text-green-600">
+            {{ formatNumber(currentPeriodData.requests) }}
+          </div>
+          <div class="text-sm text-gray-600">
+            {{ statsPeriod === 'daily' ? '今日' : '本月' }}请求数
+          </div>
         </div>
         <div class="stat-card text-center">
-          <div class="text-3xl font-bold text-blue-600">{{ formatNumber(currentPeriodData.allTokens) }}</div>
-          <div class="text-sm text-gray-600">{{ statsPeriod === 'daily' ? '今日' : '本月' }}Token数</div>
+          <div class="text-3xl font-bold text-blue-600">
+            {{ formatNumber(currentPeriodData.allTokens) }}
+          </div>
+          <div class="text-sm text-gray-600">
+            {{ statsPeriod === 'daily' ? '今日' : '本月' }}Token数
+          </div>
         </div>
         <div class="stat-card text-center">
-          <div class="text-3xl font-bold text-purple-600">{{ currentPeriodData.formattedCost || '$0.000000' }}</div>
-          <div class="text-sm text-gray-600">{{ statsPeriod === 'daily' ? '今日' : '本月' }}费用</div>
+          <div class="text-3xl font-bold text-purple-600">
+            {{ currentPeriodData.formattedCost || '$0.000000' }}
+          </div>
+          <div class="text-sm text-gray-600">
+            {{ statsPeriod === 'daily' ? '今日' : '本月' }}费用
+          </div>
         </div>
         <div class="stat-card text-center">
-          <div class="text-3xl font-bold text-yellow-600">{{ formatNumber(currentPeriodData.inputTokens) }}</div>
-          <div class="text-sm text-gray-600">{{ statsPeriod === 'daily' ? '今日' : '本月' }}输入Token</div>
+          <div class="text-3xl font-bold text-yellow-600">
+            {{ formatNumber(currentPeriodData.inputTokens) }}
+          </div>
+          <div class="text-sm text-gray-600">
+            {{ statsPeriod === 'daily' ? '今日' : '本月' }}输入Token
+          </div>
         </div>
       </div>
     </div>

web/admin-spa/src/components/apistats/TokenDistribution.vue

@@ -1,34 +1,34 @@
 <template>
   <div class="card p-6">
     <h3 class="text-xl font-bold mb-4 flex items-center text-gray-900">
-      <i class="fas fa-coins mr-3 text-yellow-500"></i>
+      <i class="fas fa-coins mr-3 text-yellow-500" />
       Token 使用分布 <span class="text-sm font-normal text-gray-600 ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
     </h3>
     <div class="space-y-3">
       <div class="flex justify-between items-center">
         <span class="text-gray-600 flex items-center">
-          <i class="fas fa-arrow-right mr-2 text-green-500"></i>
+          <i class="fas fa-arrow-right mr-2 text-green-500" />
           输入 Token
         </span>
         <span class="font-medium text-gray-900">{{ formatNumber(currentPeriodData.inputTokens) }}</span>
       </div>
       <div class="flex justify-between items-center">
         <span class="text-gray-600 flex items-center">
-          <i class="fas fa-arrow-left mr-2 text-blue-500"></i>
+          <i class="fas fa-arrow-left mr-2 text-blue-500" />
           输出 Token
         </span>
         <span class="font-medium text-gray-900">{{ formatNumber(currentPeriodData.outputTokens) }}</span>
       </div>
       <div class="flex justify-between items-center">
         <span class="text-gray-600 flex items-center">
-          <i class="fas fa-save mr-2 text-purple-500"></i>
+          <i class="fas fa-save mr-2 text-purple-500" />
           缓存创建 Token
         </span>
         <span class="font-medium text-gray-900">{{ formatNumber(currentPeriodData.cacheCreateTokens) }}</span>
       </div>
       <div class="flex justify-between items-center">
         <span class="text-gray-600 flex items-center">
-          <i class="fas fa-download mr-2 text-orange-500"></i>
+          <i class="fas fa-download mr-2 text-orange-500" />
           缓存读取 Token
         </span>
         <span class="font-medium text-gray-900">{{ formatNumber(currentPeriodData.cacheReadTokens) }}</span>