feat(api,ui): 新增24h错误码最高Key统计与面板

- 新增 GET /api/stats/attention-keys 接口,统计最近24小时指定
  状态码(默认429)错误次数最多的 Key,仅统计内存中的 Key,
  支持 limit 与 status_code 参数
- StatsService 新增 get_attention_keys_last_24h,按 api_key 分组计数并
  降序返回
- UI 新增“值得注意的Key”卡片:支持 429/403/400 快捷切换、自定义状态码
  与数量限制,默认展示 429 前 10
- 列表项支持验证、查看 24h 详情、复制、删除等快捷操作
- 将 Chart.js 与页面脚本改为 defer,保证 DOM 就绪与执行顺序
- 修复:补充获取数量输入框引用,避免初始化未声明变量报错
- 其他:微调日志输出格式
This commit is contained in:
snaily
2025-08-18 06:28:48 +08:00
parent e9601ca76c
commit 1aa3d267bb
4 changed files with 198 additions and 5 deletions
+32 -4
View File
@@ -1109,9 +1109,9 @@ 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>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js" defer></script>
<!-- Load page script with defer to guarantee DOM is ready and keep execution order -->
<script src="/static/js/keys_status.js" defer></script>
{% endblock %} {% block content %}
<div class="container max-w-6xl mx-auto px-4">
<!-- Increased max-width -->
@@ -1276,7 +1276,35 @@ endblock %} {% block head_extra_styles %}
<div class="p-4 chart-container">
<canvas id="apiStatsChart"></canvas>
</div>
</div>
</div>
<!-- 值得注意的 Key 卡片(错误码统计,可切换) -->
<div class="stats-card chart-wide">
<div class="stats-card-header">
<h3 class="stats-card-title">
<i class="fas fa-exclamation-circle"></i>
<span>值得注意的Key24h内错误码最多)</span>
</h3>
<div class="flex items-center gap-2 text-xs">
<button id="attentionErr429" class="px-2 py-1 rounded bg-gray-200 hover:bg-gray-300 text-gray-700" title="429 Too Many Requests">429</button>
<button id="attentionErr403" class="px-2 py-1 rounded bg-gray-200 hover:bg-gray-300 text-gray-700" title="403 Forbidden">403</button>
<button id="attentionErr400" class="px-2 py-1 rounded bg-gray-200 hover:bg-gray-300 text-gray-700" title="400 Bad Request">400</button>
<div class="flex items-center gap-1 ml-2">
<input id="attentionErrCustom" type="number" min="100" max="599" placeholder="自定义" class="form-input h-7 w-20 px-2 py-1 text-xs border rounded focus:ring-primary-500 focus:border-primary-500" />
<button id="attentionErrGo" class="px-2 py-1 rounded bg-blue-500 hover:bg-blue-600 text-white" title="查询">查询</button>
</div>
<div class="flex items-center gap-1 ml-3">
<label for="attentionLimitInput" class="text-xs text-gray-600">数量</label>
<input id="attentionLimitInput" type="number" min="1" max="1000" value="10" class="form-input h-7 w-20 px-2 py-1 text-xs border rounded focus:ring-primary-500 focus:border-primary-500" />
</div>
</div>
</div>
<div class="p-4">
<ul id="attentionKeysList" class="space-y-2">
<li class="text-center text-gray-500 py-2">加载中...</li>
</ul>
</div>
</div>
</div>
<!-- 有效密钥区域 -->