feat: 添加下拉菜单和批量操作功能

- 新增 /api/keys/all 端点获取所有密钥
- 添加下拉菜单界面,提供复制全部密钥和验证所有密钥选项
- 重构批量重置逻辑,改为逐个处理以提供更好的进度反馈
- 新增批量操作进度模态框,实时显示操作状态和日志
- 在验证模态框中添加批次大小配置选项
- 优化用户体验,提供更直观的批量操作界面
This commit is contained in:
snaily
2025-07-25 00:35:56 +08:00
parent 2270f6d998
commit 7af53de782
3 changed files with 536 additions and 111 deletions
+162 -1
View File
@@ -1026,6 +1026,69 @@ endblock %} {% block head_extra_styles %}
color: #fca5b3 !important;
}
/* End of API Call Details Modal Specific Styling Adjustments */
/* 下拉菜单样式 */
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
background-color: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
min-width: 200px;
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease-in-out;
}
.dropdown-menu.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
color: #374151;
text-decoration: none;
transition: all 0.2s ease-in-out;
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
font-size: 0.875rem;
}
.dropdown-item:hover {
background-color: rgba(59, 130, 246, 0.1);
color: #3b82f6;
}
.dropdown-item:first-child {
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
.dropdown-item:last-child {
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
.dropdown-item i {
width: 1rem;
text-align: center;
}
.dropdown-toggle {
position: relative;
}
</style>
{% endblock %} {% block head_extra_scripts %}
<!-- keys_status.js needs to be loaded in head because it might be used by inline scripts -->
@@ -1061,6 +1124,28 @@ endblock %} {% block head_extra_styles %}
>
<i class="fas fa-sync-alt"></i>
</button>
<!-- 下拉菜单按钮 -->
<div class="dropdown-toggle relative">
<button
id="dropdownMenuButton"
class="bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full w-8 h-8 flex items-center justify-center text-primary-600 transition-all duration-300"
onclick="toggleDropdownMenu()"
title="更多操作"
>
<i class="fas fa-ellipsis-v"></i>
</button>
<!-- 下拉菜单 -->
<div id="dropdownMenu" class="dropdown-menu">
<button class="dropdown-item" onclick="copyAllKeys()">
<i class="fas fa-copy"></i>
<span>复制全部密钥</span>
</button>
<button class="dropdown-item" onclick="verifyAllKeys()">
<i class="fas fa-check-double"></i>
<span>验证所有密钥</span>
</button>
</div>
</div>
</div>
<h1
@@ -1520,7 +1605,11 @@ endblock %} {% block head_extra_styles %}
</button>
</div>
<div class="mb-6">
<p style="color: #374151" id="verifyModalMessage"></p>
<p style="color: #374151" id="verifyModalMessage" class="mb-4"></p>
<div class="flex items-center gap-2">
<label for="batchSize" class="text-sm font-medium" style="color: #374151;">每批次验证数量:</label>
<input type="number" id="batchSize" value="10" min="1" class="form-input h-8 w-20 px-2 py-1 text-sm border rounded focus:ring-primary-500 focus:border-primary-500">
</div>
</div>
<div class="flex justify-end gap-3">
<button
@@ -1644,6 +1733,78 @@ endblock %} {% block head_extra_styles %}
</div>
</div>
<!-- 批量操作进度模态框 -->
<div
id="progressModal"
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"
>
<div
class="bg-white rounded-lg p-6 shadow-xl max-w-2xl w-full animate-fade-in"
style="
background-color: rgba(255, 255, 255, 0.98);
color: #374151;
border-color: rgba(0, 0, 0, 0.08);
"
>
<div class="flex items-center justify-between mb-4">
<h3
class="text-lg font-semibold text-gray-800"
id="progressModalTitle"
style="color: #1f2937; font-weight: 600"
>
批量操作进度
</h3>
<button
onclick="closeProgressModal()"
id="closeProgressModalBtn"
class="text-gray-500 hover:text-gray-700 focus:outline-none"
disabled
>
<i class="fas fa-times"></i>
</button>
</div>
<div class="mb-4">
<p id="progressStatusText" class="text-sm text-gray-600 mb-2">
准备开始...
</p>
<div class="w-full bg-gray-200 rounded-full h-4 dark:bg-gray-700">
<div
id="progressBar"
class="bg-primary-600 h-4 rounded-full transition-all duration-300"
style="width: 0%"
></div>
</div>
<p
id="progressPercentage"
class="text-center text-sm font-semibold mt-1"
style="color: #1f2937"
>
0%
</p>
</div>
<div
id="progressLog"
class="text-xs max-h-60 overflow-y-auto bg-gray-50 p-3 rounded border border-gray-200 space-y-1 font-mono"
style="
background-color: rgba(249, 250, 251, 0.95);
border-color: rgba(0, 0, 0, 0.08);
"
>
<!-- Log entries will be added here -->
</div>
<div class="flex justify-end gap-3 mt-6">
<button
id="progressModalCloseBtn"
onclick="closeProgressModal(true)"
class="px-4 py-1.5 text-sm font-medium bg-primary-700 hover:bg-primary-800 text-white rounded-lg transition-colors"
disabled
>
完成并刷新
</button>
</div>
</div>
</div>
<!-- 操作结果模态框 -->
<div
id="resultModal"