feat(ui): 更新密钥状态页面样式和交互

本次提交主要对密钥状态页面的样式进行了调整，增强了用户界面的可用性和视觉效果。

主要变更包括：

- **悬停效果**:
  - 调整了API调用统计项的悬停背景色，使其更暗以更好地融合主题。

- **密钥列表按钮样式**:
  - 更新了有效、无效、复制、详情和删除按钮的背景色和悬停效果，确保在不同状态下的视觉一致性。

- **状态标签样式**:
  - 调整了有效、失败和无效标签的颜色和样式，使其在密钥列表中更加醒目。

这些更改旨在提升用户体验，使密钥管理界面更加直观和美观。

app/templates/keys_status.html

@@ -183,6 +183,32 @@ endblock %} {% block head_extra_styles %}
     background-color: rgba(80, 130, 220, 0.35);
   }
 
+  /* 新增：调整API调用统计项的悬停背景色，使其更暗更融合主题 */
+  .stat-item.stat-warning:hover {
+    background-color: rgba(
+      200,
+      160,
+      20,
+      0.55
+    ) !important; /* 从 hover:bg-amber-100 调整 */
+  }
+  .stat-item.stat-info:hover {
+    background-color: rgba(
+      80,
+      130,
+      220,
+      0.55
+    ) !important; /* 从 hover:bg-blue-100 调整 */
+  }
+  .stat-item.stat-primary:hover {
+    background-color: rgba(
+      107,
+      70,
+      193,
+      0.6
+    ) !important; /* 从 hover:bg-indigo-100 调整 */
+  }
+
   /* 响应式调整 */
   @media (max-width: 640px) {
     .stats-dashboard {
@@ -326,7 +352,7 @@ endblock %} {% block head_extra_styles %}
   }
 
   .key-text {
-    color: #ffffff;
+    color: #e9d5ff !important; /* 修改API密钥颜色为淡紫色并确保优先 */
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
     font-weight: 500;
   }
@@ -528,6 +554,105 @@ endblock %} {% block head_extra_styles %}
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }
+
+  /* 新增：密钥列表内按钮背景和悬停颜色调整 */
+  /* 验证按钮 (绿色) */
+  #validKeys li button.bg-success-600,
+  #invalidKeys li button.bg-success-600 {
+    background-color: rgba(22, 163, 74, 0.65) !important;
+    border: 1px solid rgba(22, 163, 74, 0.85);
+  }
+  #validKeys li button.bg-success-600:hover,
+  #invalidKeys li button.bg-success-600:hover {
+    background-color: rgba(21, 128, 61, 0.75) !important;
+    border-color: rgba(21, 128, 61, 0.95);
+  }
+
+  /* 重置按钮 (蓝色) */
+  #validKeys li button.bg-blue-600,
+  #invalidKeys li button.bg-blue-600 {
+    background-color: rgba(37, 99, 235, 0.65) !important;
+    border: 1px solid rgba(37, 99, 235, 0.85);
+  }
+  #validKeys li button.bg-blue-600:hover,
+  #invalidKeys li button.bg-blue-600:hover {
+    background-color: rgba(29, 78, 216, 0.75) !important;
+    border-color: rgba(29, 78, 216, 0.95);
+  }
+
+  /* 复制按钮 (灰色) */
+  #validKeys li button.bg-slate-500,
+  #invalidKeys li button.bg-slate-500 {
+    background-color: rgba(100, 116, 139, 0.65) !important;
+    border: 1px solid rgba(100, 116, 139, 0.85);
+  }
+  #validKeys li button.bg-slate-500:hover,
+  #invalidKeys li button.bg-slate-500:hover {
+    background-color: rgba(71, 85, 105, 0.75) !important;
+    border-color: rgba(71, 85, 105, 0.95);
+  }
+
+  /* 详情按钮 (紫色) */
+  #validKeys li button.bg-purple-600,
+  #invalidKeys li button.bg-purple-600 {
+    background-color: rgba(
+      147,
+      51,
+      234,
+      0.6
+    ) !important; /* Tailwind purple-600 is 9333ea. Using purple-500 (a855f7) as base for rgba */
+    border: 1px solid rgba(147, 51, 234, 0.8);
+  }
+  #validKeys li button.bg-purple-600:hover,
+  #invalidKeys li button.bg-purple-600:hover {
+    background-color: rgba(
+      126,
+      34,
+      206,
+      0.7
+    ) !important; /* Tailwind purple-600 as base for hover */
+    border-color: rgba(126, 34, 206, 0.9);
+  }
+
+  /* 删除按钮 (红色) - HTML中使用 bg-red-800 */
+  #validKeys li button.bg-red-800,
+  #invalidKeys li button.bg-red-800 {
+    background-color: rgba(185, 28, 28, 0.65) !important; /* Based on red-700 */
+    border: 1px solid rgba(185, 28, 28, 0.85);
+  }
+  #validKeys li button.bg-red-800:hover,
+  #invalidKeys li button.bg-red-800:hover {
+    background-color: rgba(153, 27, 27, 0.75) !important; /* Based on red-800 */
+    border-color: rgba(153, 27, 27, 0.95);
+  }
+
+  /* 新增：密钥列表内状态标签颜色调整 */
+  /* 有效标签 (绿色) */
+  #validKeys li span.bg-success-50.text-success-600,
+  #invalidKeys li span.bg-success-50.text-success-600 {
+    background-color: rgba(16, 185, 129, 0.28) !important;
+    color: #86efac !important; /* Slightly lighter green for text */
+    border: 1px solid rgba(16, 185, 129, 0.45);
+  }
+
+  /* 失败计数标签 (黄色) */
+  #validKeys li span.bg-amber-50.text-amber-600,
+  #invalidKeys li span.bg-amber-50.text-amber-600 {
+    background-color: rgba(245, 158, 11, 0.28) !important;
+    color: #fde047 !important; /* Slightly lighter amber for text */
+    border: 1px solid rgba(245, 158, 11, 0.45);
+    position: absolute; /* 移动到右上角 */
+    top: 0.75rem; /* 配合li的p-3内边距 */
+    right: 0.75rem;
+    z-index: 5; /* 确保在其他元素之上 */
+  }
+
+  /* 无效标签 (红色) - for invalidKeys list */
+  #invalidKeys li span.bg-danger-50.text-danger-600 {
+    background-color: rgba(239, 68, 68, 0.28) !important;
+    color: #fca5a5 !important; /* Standard danger text color often works well */
+    border: 1px solid rgba(239, 68, 68, 0.45);
+  }
 </style>
 {% endblock %} {% block head_extra_scripts %}
 <!-- keys_status.js needs to be loaded in head because it might be used by inline scripts -->
@@ -840,9 +965,7 @@ endblock %} {% block head_extra_styles %}
                     <i class="fas fa-check mr-1"></i> 有效
                   </span>
                   <div class="flex items-center gap-1">
-                    <span
-                      class="key-text font-mono text-gray-700"
-                      data-full-key="{{ key }}"
+                    <span class="key-text font-mono" data-full-key="{{ key }}"
                       >{{ key[:4] + '...' + key[-4:] }}</span
                     >
                     <button
@@ -1022,9 +1145,7 @@ endblock %} {% block head_extra_styles %}
                     <i class="fas fa-times mr-1"></i> 无效
                   </span>
                   <div class="flex items-center gap-1">
-                    <span
-                      class="key-text font-mono text-gray-700"
-                      data-full-key="{{ key }}"
+                    <span class="key-text font-mono" data-full-key="{{ key }}"
                       >{{ key[:4] + '...' + key[-4:] }}</span
                     >
                     <button