feat(ui): 添加 API 调用趋势图及时间区间切换

- 在 keys_status 页面引入 Chart.js（CDN），新增“调用趋势图”卡片
- 支持 1分钟/1小时/24小时切换，默认展示 1小时
- 前端从 /api/stats/details?period= 拉取数据，按时间桶聚合成功/失败并绘制
- 调整样式与布局：图表卡片跨列显示，固定容器高度并适配小屏
- 便于可视化监控调用成功/失败趋势，辅助排障与容量评估

app/templates/keys_status.html

@@ -38,6 +38,18 @@ endblock %} {% block head_extra_styles %}
     }
   }
 
+  /* 让图表卡片在网格中占满整行 */
+  .stats-card.chart-wide {
+    grid-column: 1 / -1;
+  }
+  /* 图表容器固定高度，配合 Chart.js maintainAspectRatio:false */
+  .chart-container {
+    height: 300px;
+  }
+  @media (max-width: 640px) {
+    .chart-container { height: 220px; }
+  }
+
   /* 统计卡片样式 */
   .stats-card {
     background-color: rgba(255, 255, 255, 0.95);
@@ -1096,6 +1108,8 @@ endblock %} {% block head_extra_styles %}
   }
 </style>
 {% endblock %} {% block head_extra_scripts %}
+<!-- Chart.js for time-series chart -->
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
 <!-- keys_status.js needs to be loaded in head because it might be used by inline scripts -->
 <script src="/static/js/keys_status.js"></script>
 {% endblock %} {% block content %}
@@ -1245,7 +1259,25 @@ endblock %} {% block head_extra_styles %}
           </div>
         </div>
       </div>
+
+      <!-- 可切换时间区间的成功/失败图表卡片 -->
+      <div class="stats-card chart-wide">
+        <div class="stats-card-header">
+          <h3 class="stats-card-title">
+            <i class="fas fa-chart-bar"></i>
+            <span>调用趋势图</span>
+          </h3>
+          <div class="flex items-center gap-2 text-xs">
+            <button id="chartBtn1m" class="px-2 py-1 rounded bg-gray-200 hover:bg-gray-300 text-gray-700">1分钟</button>
+            <button id="chartBtn1h" class="px-2 py-1 rounded bg-gray-200 hover:bg-gray-300 text-gray-700">1小时</button>
+            <button id="chartBtn24h" class="px-2 py-1 rounded bg-gray-200 hover:bg-gray-300 text-gray-700">24小时</button>
+          </div>
+        </div>
+        <div class="p-4 chart-container">
+          <canvas id="apiStatsChart"></canvas>
+        </div>
     </div>
+  </div>
 
     <!-- 有效密钥区域 -->
     <div class="stats-card mb-6 animate-fade-in" style="animation-delay: 0.2s">