mirror of
https://github.com/snailyp/gemini-balance.git
synced 2026-05-18 20:57:37 +08:00
cd257a9406
为错误日志页面增加了按 ID 排序以及单条和批量删除日志的功能。
主要变更：
后端 (Python/FastAPI):
- `services.py`:
- `get_error_logs`: 添加 `sort_by` 和 `sort_order` 参数以支持排序。
- 新增 `delete_error_logs`: 实现基于 ID 列表的批量删除。
- 新增 `delete_error_log_by_id`: 实现基于单个 ID 的删除。
- `error_log_routes.py`:
- `GET /api/logs/errors`: 添加 `sortBy` 和 `sortOrder` 查询参数以支持前端排序请求。
- 新增 `DELETE /api/logs/errors`: 处理批量删除请求。
- 新增 `DELETE /api/logs/errors/{log_id}`: 处理单条删除请求。
- `connection.py`: 移除了不再使用的同步 SQLAlchemy Session 相关代码。
前端 (HTML/JavaScript):
- `error_logs.html`:
- 调整了搜索/操作区域布局，添加了批量删除按钮。
- ID 表头增加排序图标和点击事件。
- 表格行操作列添加了删除按钮。
- 新增了删除确认模态框。
- `error_logs.js`:
- 添加了处理 ID 排序点击的逻辑，更新排序状态并重新加载数据。
- 添加了处理单条和批量删除按钮点击的逻辑。
- 实现了删除确认模态框的显示/隐藏及确认逻辑。
- 修改 `loadErrorLogs` 以包含排序参数。
- 修改 `renderErrorLogs` 以添加行删除按钮和必要的 `data-log-id` 属性。
- 更新了全选/取消全选逻辑以同步批量删除按钮状态。
976 lines
40 KiB
JavaScript
976 lines
40 KiB
JavaScript
// 错误日志页面JavaScript (Updated for new structure, no Bootstrap)
|
||
|
||
// 页面滚动功能
|
||
function scrollToTop() {
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
}
|
||
|
||
function scrollToBottom() {
|
||
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
|
||
}
|
||
|
||
// Refresh function removed as the buttons are gone.
|
||
// If refresh functionality is needed elsewhere, it can be triggered directly by calling loadErrorLogs().
|
||
|
||
// 全局变量
|
||
let currentPage = 1;
|
||
let pageSize = 10;
|
||
// let totalPages = 1; // totalPages will be calculated dynamically based on API response if available, or based on fetched data length
|
||
let errorLogs = []; // Store fetched logs for details view
|
||
let currentSort = { // 新增：存储当前排序状态
|
||
field: 'id', // 默认按 ID 排序
|
||
order: 'desc' // 默认降序
|
||
};
|
||
let currentSearch = { // Store current search parameters
|
||
key: '',
|
||
error: '',
|
||
errorCode: '', // Added error code search
|
||
startDate: '',
|
||
endDate: ''
|
||
};
|
||
|
||
// DOM Elements Cache
|
||
let pageSizeSelector;
|
||
// let refreshBtn; // Removed, as the button is deleted
|
||
let tableBody;
|
||
let paginationElement;
|
||
let loadingIndicator;
|
||
let noDataMessage;
|
||
let errorMessage;
|
||
let logDetailModal;
|
||
let modalCloseBtns; // Collection of close buttons for the modal
|
||
let keySearchInput;
|
||
let errorSearchInput;
|
||
let errorCodeSearchInput; // Added error code input
|
||
let startDateInput;
|
||
let endDateInput;
|
||
let searchBtn;
|
||
let pageInput;
|
||
let goToPageBtn;
|
||
let selectAllCheckbox; // 新增：全选复选框
|
||
let copySelectedKeysBtn; // 新增：复制选中按钮
|
||
let deleteSelectedBtn; // 新增：批量删除按钮
|
||
let sortByIdHeader; // 新增：ID 排序表头
|
||
let sortIcon; // 新增：排序图标
|
||
let selectedCountSpan; // 新增：选中计数显示
|
||
let deleteConfirmModal; // 新增：删除确认模态框
|
||
let closeDeleteConfirmModalBtn; // 新增：关闭删除模态框按钮
|
||
let cancelDeleteBtn; // 新增：取消删除按钮
|
||
let confirmDeleteBtn; // 新增：确认删除按钮
|
||
let deleteConfirmMessage; // 新增：删除确认消息元素
|
||
let idsToDeleteGlobally = []; // 新增：存储待删除的ID
|
||
|
||
// 页面加载完成后执行
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Cache DOM elements
|
||
pageSizeSelector = document.getElementById('pageSize');
|
||
// refreshBtn = document.getElementById('refreshBtn'); // Removed
|
||
tableBody = document.getElementById('errorLogsTable');
|
||
paginationElement = document.getElementById('pagination');
|
||
loadingIndicator = document.getElementById('loadingIndicator');
|
||
noDataMessage = document.getElementById('noDataMessage');
|
||
errorMessage = document.getElementById('errorMessage');
|
||
logDetailModal = document.getElementById('logDetailModal');
|
||
// Get all elements that should close the modal
|
||
modalCloseBtns = document.querySelectorAll('#closeLogDetailModalBtn, #closeModalFooterBtn');
|
||
keySearchInput = document.getElementById('keySearch');
|
||
errorSearchInput = document.getElementById('errorSearch');
|
||
errorCodeSearchInput = document.getElementById('errorCodeSearch'); // Get error code input
|
||
startDateInput = document.getElementById('startDate');
|
||
endDateInput = document.getElementById('endDate');
|
||
searchBtn = document.getElementById('searchBtn');
|
||
pageInput = document.getElementById('pageInput');
|
||
goToPageBtn = document.getElementById('goToPageBtn');
|
||
selectAllCheckbox = document.getElementById('selectAllCheckbox'); // 新增
|
||
copySelectedKeysBtn = document.getElementById('copySelectedKeysBtn'); // 新增
|
||
deleteSelectedBtn = document.getElementById('deleteSelectedBtn'); // 新增
|
||
sortByIdHeader = document.getElementById('sortById'); // 新增
|
||
if (sortByIdHeader) {
|
||
sortIcon = sortByIdHeader.querySelector('i'); // 新增
|
||
}
|
||
selectedCountSpan = document.getElementById('selectedCount'); // 新增
|
||
deleteConfirmModal = document.getElementById('deleteConfirmModal'); // 新增
|
||
closeDeleteConfirmModalBtn = document.getElementById('closeDeleteConfirmModalBtn'); // 新增
|
||
cancelDeleteBtn = document.getElementById('cancelDeleteBtn'); // 新增
|
||
confirmDeleteBtn = document.getElementById('confirmDeleteBtn'); // 新增
|
||
deleteConfirmMessage = document.getElementById('deleteConfirmMessage'); // 新增
|
||
|
||
// Initialize page size selector
|
||
if (pageSizeSelector) {
|
||
pageSizeSelector.value = pageSize;
|
||
pageSizeSelector.addEventListener('change', function() {
|
||
pageSize = parseInt(this.value);
|
||
currentPage = 1; // Reset to first page
|
||
loadErrorLogs();
|
||
});
|
||
}
|
||
|
||
// Refresh button event listener removed
|
||
|
||
// Initialize search button
|
||
if (searchBtn) {
|
||
searchBtn.addEventListener('click', function() {
|
||
// Update search parameters from input fields
|
||
currentSearch.key = keySearchInput ? keySearchInput.value.trim() : '';
|
||
currentSearch.error = errorSearchInput ? errorSearchInput.value.trim() : '';
|
||
currentSearch.errorCode = errorCodeSearchInput ? errorCodeSearchInput.value.trim() : ''; // Get error code value
|
||
currentSearch.startDate = startDateInput ? startDateInput.value : '';
|
||
currentSearch.endDate = endDateInput ? endDateInput.value : '';
|
||
currentPage = 1; // Reset to first page on new search
|
||
loadErrorLogs();
|
||
});
|
||
}
|
||
|
||
// Initialize modal close buttons
|
||
if (logDetailModal && modalCloseBtns) {
|
||
modalCloseBtns.forEach(btn => {
|
||
btn.addEventListener('click', closeLogDetailModal);
|
||
});
|
||
// Optional: Close modal if clicking outside the content
|
||
logDetailModal.addEventListener('click', function(event) {
|
||
if (event.target === logDetailModal) {
|
||
closeLogDetailModal();
|
||
}
|
||
});
|
||
}
|
||
|
||
// Initial load of error logs
|
||
loadErrorLogs();
|
||
|
||
// Add event listeners for copy buttons inside the modal and table
|
||
setupCopyButtons(); // This will now also handle table copy buttons if called after render
|
||
|
||
// Add event listeners for bulk selection
|
||
setupBulkSelectionListeners(); // 新增：设置批量选择监听器
|
||
|
||
// 新增：为页码跳转按钮添加事件监听器
|
||
if (goToPageBtn && pageInput) {
|
||
goToPageBtn.addEventListener('click', function() {
|
||
const targetPage = parseInt(pageInput.value);
|
||
// 需要获取总页数来验证输入
|
||
// 暂时无法直接获取 totalPages，需要在 updatePagination 中存储或重新计算
|
||
// 简单的验证：必须是正整数
|
||
if (!isNaN(targetPage) && targetPage >= 1) {
|
||
// 理想情况下，应检查 targetPage <= totalPages
|
||
// 但 totalPages 可能未知，所以暂时只跳转
|
||
currentPage = targetPage;
|
||
loadErrorLogs();
|
||
pageInput.value = ''; // 清空输入框
|
||
} else {
|
||
showNotification('请输入有效的页码', 'error', 2000);
|
||
pageInput.value = ''; // 清空无效输入
|
||
}
|
||
});
|
||
// 允许按 Enter 键跳转
|
||
pageInput.addEventListener('keypress', function(event) {
|
||
if (event.key === 'Enter') {
|
||
goToPageBtn.click(); // 触发按钮点击
|
||
}
|
||
});
|
||
}
|
||
|
||
// 新增：为批量删除按钮添加事件监听器
|
||
if (deleteSelectedBtn) {
|
||
deleteSelectedBtn.addEventListener('click', handleDeleteSelected);
|
||
}
|
||
|
||
// 新增：为 ID 排序表头添加事件监听器
|
||
if (sortByIdHeader) {
|
||
sortByIdHeader.addEventListener('click', handleSortById);
|
||
}
|
||
|
||
// 新增：为删除确认模态框按钮添加事件监听器
|
||
if (closeDeleteConfirmModalBtn) {
|
||
closeDeleteConfirmModalBtn.addEventListener('click', hideDeleteConfirmModal);
|
||
}
|
||
if (cancelDeleteBtn) {
|
||
cancelDeleteBtn.addEventListener('click', hideDeleteConfirmModal);
|
||
}
|
||
if (confirmDeleteBtn) {
|
||
confirmDeleteBtn.addEventListener('click', handleConfirmDelete);
|
||
}
|
||
// Optional: Close modal if clicking outside the content
|
||
if (deleteConfirmModal) {
|
||
deleteConfirmModal.addEventListener('click', function(event) {
|
||
if (event.target === deleteConfirmModal) {
|
||
hideDeleteConfirmModal();
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
// 新增：显示删除确认模态框
|
||
function showDeleteConfirmModal(message) {
|
||
if (deleteConfirmModal && deleteConfirmMessage) {
|
||
deleteConfirmMessage.textContent = message;
|
||
deleteConfirmModal.classList.add('show');
|
||
document.body.style.overflow = 'hidden'; // Prevent body scrolling
|
||
}
|
||
}
|
||
|
||
// 新增：隐藏删除确认模态框
|
||
function hideDeleteConfirmModal() {
|
||
if (deleteConfirmModal) {
|
||
deleteConfirmModal.classList.remove('show');
|
||
document.body.style.overflow = ''; // Restore body scrolling
|
||
idsToDeleteGlobally = []; // 清空待删除ID
|
||
}
|
||
}
|
||
|
||
// 新增：处理确认删除按钮点击
|
||
function handleConfirmDelete() {
|
||
if (idsToDeleteGlobally.length > 0) {
|
||
performActualDelete(idsToDeleteGlobally);
|
||
}
|
||
hideDeleteConfirmModal(); // 关闭模态框
|
||
}
|
||
|
||
// Fallback copy function using document.execCommand
|
||
function fallbackCopyTextToClipboard(text) {
|
||
const textArea = document.createElement("textarea");
|
||
textArea.value = text;
|
||
|
||
// Avoid scrolling to bottom
|
||
textArea.style.top = "0";
|
||
textArea.style.left = "0";
|
||
textArea.style.position = "fixed";
|
||
|
||
document.body.appendChild(textArea);
|
||
textArea.focus();
|
||
textArea.select();
|
||
|
||
let successful = false;
|
||
try {
|
||
successful = document.execCommand('copy');
|
||
} catch (err) {
|
||
console.error('Fallback copy failed:', err);
|
||
successful = false;
|
||
}
|
||
|
||
document.body.removeChild(textArea);
|
||
return successful;
|
||
}
|
||
|
||
// Helper function to handle feedback after copy attempt (both modern and fallback)
|
||
function handleCopyResult(buttonElement, success) {
|
||
const originalIcon = buttonElement.querySelector('i').className; // Store original icon class
|
||
const iconElement = buttonElement.querySelector('i');
|
||
if (success) {
|
||
iconElement.className = 'fas fa-check text-success-500'; // Use checkmark icon class
|
||
showNotification('已复制到剪贴板', 'success', 2000);
|
||
} else {
|
||
iconElement.className = 'fas fa-times text-danger-500'; // Use error icon class
|
||
showNotification('复制失败', 'error', 3000);
|
||
}
|
||
setTimeout(() => { iconElement.className = originalIcon; }, success ? 2000 : 3000); // Restore original icon class
|
||
}
|
||
|
||
// Function to set up copy button listeners (using modern API with fallback) - Updated to handle table copy buttons
|
||
function setupCopyButtons(containerSelector = 'body') {
|
||
// Find buttons within the specified container (defaults to body)
|
||
const container = document.querySelector(containerSelector);
|
||
if (!container) return;
|
||
|
||
const copyButtons = container.querySelectorAll('.copy-btn');
|
||
copyButtons.forEach(button => {
|
||
// Remove existing listener to prevent duplicates if called multiple times
|
||
button.removeEventListener('click', handleCopyButtonClick);
|
||
// Add the listener
|
||
button.addEventListener('click', handleCopyButtonClick);
|
||
});
|
||
}
|
||
|
||
// Extracted click handler logic for reusability and removing listeners
|
||
function handleCopyButtonClick() {
|
||
const button = this; // 'this' refers to the button clicked
|
||
const targetId = button.getAttribute('data-target');
|
||
const textToCopyDirect = button.getAttribute('data-copy-text'); // For direct text copy (e.g., table key)
|
||
let textToCopy = '';
|
||
|
||
if (textToCopyDirect) {
|
||
textToCopy = textToCopyDirect;
|
||
} else if (targetId) {
|
||
const targetElement = document.getElementById(targetId);
|
||
if (targetElement) {
|
||
textToCopy = targetElement.textContent;
|
||
} else {
|
||
console.error('Target element not found:', targetId);
|
||
showNotification('复制出错：找不到目标元素', 'error');
|
||
return; // Exit if target element not found
|
||
}
|
||
} else {
|
||
console.error('No data-target or data-copy-text attribute found on button:', button);
|
||
showNotification('复制出错：未指定复制内容', 'error');
|
||
return; // Exit if no source specified
|
||
}
|
||
|
||
|
||
if (textToCopy) {
|
||
let copySuccess = false;
|
||
// Try modern clipboard API first (requires HTTPS or localhost)
|
||
if (navigator.clipboard && window.isSecureContext) {
|
||
navigator.clipboard.writeText(textToCopy).then(() => {
|
||
handleCopyResult(button, true); // Use helper for feedback
|
||
}).catch(err => {
|
||
console.error('Clipboard API failed, attempting fallback:', err);
|
||
// Attempt fallback if modern API fails
|
||
copySuccess = fallbackCopyTextToClipboard(textToCopy);
|
||
handleCopyResult(button, copySuccess); // Use helper for feedback
|
||
});
|
||
} else {
|
||
// Use fallback if modern API is not available or context is insecure
|
||
console.warn("Clipboard API not available or context insecure. Using fallback copy method.");
|
||
copySuccess = fallbackCopyTextToClipboard(textToCopy);
|
||
handleCopyResult(button, copySuccess); // Use helper for feedback
|
||
}
|
||
} else {
|
||
console.warn('No text found to copy for target:', targetId || 'direct text');
|
||
showNotification('没有内容可复制', 'warning');
|
||
}
|
||
} // End of handleCopyButtonClick function
|
||
|
||
// Function to set up copy button listeners (using modern API with fallback) - Updated to handle table copy buttons
|
||
function setupCopyButtons(containerSelector = 'body') {
|
||
// Find buttons within the specified container (defaults to body)
|
||
const container = document.querySelector(containerSelector);
|
||
if (!container) return;
|
||
|
||
const copyButtons = container.querySelectorAll('.copy-btn');
|
||
copyButtons.forEach(button => {
|
||
// Remove existing listener to prevent duplicates if called multiple times
|
||
button.removeEventListener('click', handleCopyButtonClick);
|
||
// Add the listener
|
||
button.addEventListener('click', handleCopyButtonClick);
|
||
});
|
||
}
|
||
|
||
// 新增：设置批量选择相关的事件监听器
|
||
function setupBulkSelectionListeners() {
|
||
if (selectAllCheckbox) {
|
||
selectAllCheckbox.addEventListener('change', handleSelectAllChange);
|
||
}
|
||
|
||
if (tableBody) {
|
||
// 使用事件委托处理行复选框的点击
|
||
tableBody.addEventListener('change', handleRowCheckboxChange);
|
||
}
|
||
|
||
if (copySelectedKeysBtn) {
|
||
copySelectedKeysBtn.addEventListener('click', handleCopySelectedKeys);
|
||
}
|
||
|
||
// 新增：为批量删除按钮添加事件监听器 (如果尚未添加)
|
||
// 通常在 DOMContentLoaded 中添加一次即可
|
||
// if (deleteSelectedBtn && !deleteSelectedBtn.hasListener) {
|
||
// deleteSelectedBtn.addEventListener('click', handleDeleteSelected);
|
||
// deleteSelectedBtn.hasListener = true; // 标记已添加
|
||
// }
|
||
}
|
||
|
||
// 新增：处理“全选”复选框变化的函数
|
||
function handleSelectAllChange() {
|
||
const isChecked = selectAllCheckbox.checked;
|
||
const rowCheckboxes = tableBody.querySelectorAll('.row-checkbox');
|
||
rowCheckboxes.forEach(checkbox => {
|
||
checkbox.checked = isChecked;
|
||
});
|
||
updateSelectedState();
|
||
}
|
||
|
||
// 新增：处理行复选框变化的函数 (事件委托)
|
||
function handleRowCheckboxChange(event) {
|
||
if (event.target.classList.contains('row-checkbox')) {
|
||
updateSelectedState();
|
||
}
|
||
}
|
||
|
||
// 新增：更新选中状态（计数、按钮状态、全选框状态）
|
||
function updateSelectedState() {
|
||
const rowCheckboxes = tableBody.querySelectorAll('.row-checkbox');
|
||
const selectedCheckboxes = tableBody.querySelectorAll('.row-checkbox:checked');
|
||
const selectedCount = selectedCheckboxes.length;
|
||
|
||
// 移除了数字显示，不再更新selectedCountSpan
|
||
// 仍然更新复制按钮的禁用状态
|
||
if (copySelectedKeysBtn) {
|
||
copySelectedKeysBtn.disabled = selectedCount === 0;
|
||
|
||
// 可选：根据选中项数量更新按钮标题属性
|
||
copySelectedKeysBtn.setAttribute('title', `复制${selectedCount}项选中密钥`);
|
||
}
|
||
// 新增：更新批量删除按钮的禁用状态
|
||
if (deleteSelectedBtn) {
|
||
deleteSelectedBtn.disabled = selectedCount === 0;
|
||
deleteSelectedBtn.setAttribute('title', `删除${selectedCount}项选中日志`);
|
||
}
|
||
|
||
// 更新“全选”复选框的状态
|
||
if (selectAllCheckbox) {
|
||
if (rowCheckboxes.length > 0 && selectedCount === rowCheckboxes.length) {
|
||
selectAllCheckbox.checked = true;
|
||
selectAllCheckbox.indeterminate = false;
|
||
} else if (selectedCount > 0) {
|
||
selectAllCheckbox.checked = false;
|
||
selectAllCheckbox.indeterminate = true; // 部分选中状态
|
||
} else {
|
||
selectAllCheckbox.checked = false;
|
||
selectAllCheckbox.indeterminate = false;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 新增：处理“复制选中密钥”按钮点击的函数
|
||
function handleCopySelectedKeys() {
|
||
const selectedCheckboxes = tableBody.querySelectorAll('.row-checkbox:checked');
|
||
const keysToCopy = [];
|
||
selectedCheckboxes.forEach(checkbox => {
|
||
const key = checkbox.getAttribute('data-key');
|
||
if (key) {
|
||
keysToCopy.push(key);
|
||
}
|
||
});
|
||
|
||
if (keysToCopy.length > 0) {
|
||
const textToCopy = keysToCopy.join('\n'); // 每行一个密钥
|
||
copyTextToClipboard(textToCopy, copySelectedKeysBtn); // 使用通用复制函数
|
||
} else {
|
||
showNotification('没有选中的密钥可复制', 'warning');
|
||
}
|
||
}
|
||
|
||
// 新增：通用的文本复制函数（结合现有逻辑）
|
||
function copyTextToClipboard(text, buttonElement = null) {
|
||
let copySuccess = false;
|
||
if (navigator.clipboard && window.isSecureContext) {
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
if (buttonElement) handleCopyResult(buttonElement, true);
|
||
else showNotification('已复制到剪贴板', 'success');
|
||
}).catch(err => {
|
||
console.error('Clipboard API failed, attempting fallback:', err);
|
||
copySuccess = fallbackCopyTextToClipboard(text);
|
||
if (buttonElement) handleCopyResult(buttonElement, copySuccess);
|
||
else showNotification(copySuccess ? '已复制到剪贴板' : '复制失败', copySuccess ? 'success' : 'error');
|
||
});
|
||
} else {
|
||
console.warn("Clipboard API not available or context insecure. Using fallback copy method.");
|
||
copySuccess = fallbackCopyTextToClipboard(text);
|
||
if (buttonElement) handleCopyResult(buttonElement, copySuccess);
|
||
else showNotification(copySuccess ? '已复制到剪贴板' : '复制失败', copySuccess ? 'success' : 'error');
|
||
}
|
||
}
|
||
|
||
// 修改：处理批量删除按钮点击的函数 - 改为显示模态框
|
||
function handleDeleteSelected() {
|
||
const selectedCheckboxes = tableBody.querySelectorAll('.row-checkbox:checked');
|
||
const logIdsToDelete = [];
|
||
selectedCheckboxes.forEach(checkbox => {
|
||
const logId = checkbox.getAttribute('data-log-id'); // 需要在渲染时添加 data-log-id
|
||
if (logId) {
|
||
logIdsToDelete.push(parseInt(logId));
|
||
}
|
||
});
|
||
|
||
if (logIdsToDelete.length === 0) {
|
||
showNotification('没有选中的日志可删除', 'warning');
|
||
return;
|
||
}
|
||
|
||
if (logIdsToDelete.length === 0) {
|
||
showNotification('没有选中的日志可删除', 'warning');
|
||
return;
|
||
}
|
||
|
||
// 存储待删除ID并显示模态框
|
||
idsToDeleteGlobally = logIdsToDelete;
|
||
const message = `确定要删除选中的 ${logIdsToDelete.length} 条日志吗？此操作不可恢复！`;
|
||
showDeleteConfirmModal(message);
|
||
}
|
||
|
||
// 新增：执行实际的删除操作（提取自原 handleDeleteSelected 和 handleDeleteLogRow）
|
||
async function performActualDelete(logIds) {
|
||
if (!logIds || logIds.length === 0) return;
|
||
|
||
const isSingleDelete = logIds.length === 1;
|
||
const url = isSingleDelete ? `/api/logs/errors/${logIds[0]}` : '/api/logs/errors';
|
||
const method = 'DELETE';
|
||
const body = isSingleDelete ? null : JSON.stringify({ ids: logIds });
|
||
const headers = isSingleDelete ? {} : { 'Content-Type': 'application/json' };
|
||
|
||
try {
|
||
// Rename 'response' to 'deleteResponse' and remove duplicate fetch
|
||
const deleteResponse = await fetch(url, {
|
||
method: method,
|
||
headers: headers,
|
||
body: body,
|
||
});
|
||
// Removed duplicate fetch call below
|
||
|
||
if (!deleteResponse.ok) {
|
||
let errorData;
|
||
try { errorData = await deleteResponse.json(); } catch (e) { /* ignore */ }
|
||
const actionText = isSingleDelete ? `删除该条日志` : `批量删除 ${logIds.length} 条日志`;
|
||
throw new Error(errorData?.detail || `${actionText}失败: ${deleteResponse.statusText}`);
|
||
}
|
||
|
||
const successMessage = isSingleDelete ? `成功删除该日志` : `成功删除 ${logIds.length} 条日志`;
|
||
showNotification(successMessage, 'success');
|
||
// 取消全选
|
||
if (selectAllCheckbox) selectAllCheckbox.checked = false;
|
||
// 重新加载当前页数据
|
||
loadErrorLogs();
|
||
} catch (error) {
|
||
console.error('批量删除错误日志失败:', error);
|
||
showNotification(`批量删除失败: ${error.message}`, 'error', 5000);
|
||
}
|
||
}
|
||
|
||
// 修改：处理单行删除按钮点击的函数 - 改为显示模态框
|
||
function handleDeleteLogRow(logId) {
|
||
if (!logId) return;
|
||
|
||
// 存储待删除ID并显示模态框
|
||
idsToDeleteGlobally = [parseInt(logId)]; // 存储为数组
|
||
// 使用通用确认消息，不显示具体ID
|
||
const message = `确定要删除这条日志吗？此操作不可恢复！`;
|
||
showDeleteConfirmModal(message);
|
||
}
|
||
|
||
// 新增：处理 ID 排序点击的函数
|
||
function handleSortById() {
|
||
if (currentSort.field === 'id') {
|
||
// 如果当前是按 ID 排序，切换顺序
|
||
currentSort.order = currentSort.order === 'asc' ? 'desc' : 'asc';
|
||
} else {
|
||
// 如果当前不是按 ID 排序，切换到按 ID 排序，默认为降序
|
||
currentSort.field = 'id';
|
||
currentSort.order = 'desc';
|
||
}
|
||
// 更新图标
|
||
updateSortIcon();
|
||
// 重新加载第一页数据
|
||
currentPage = 1;
|
||
loadErrorLogs();
|
||
}
|
||
|
||
// 新增：更新排序图标的函数
|
||
function updateSortIcon() {
|
||
if (!sortIcon) return;
|
||
// 移除所有可能的排序类
|
||
sortIcon.classList.remove('fa-sort', 'fa-sort-up', 'fa-sort-down', 'text-gray-400', 'text-primary-600');
|
||
|
||
if (currentSort.field === 'id') {
|
||
sortIcon.classList.add(currentSort.order === 'asc' ? 'fa-sort-up' : 'fa-sort-down');
|
||
sortIcon.classList.add('text-primary-600'); // 高亮显示
|
||
} else {
|
||
// 如果不是按 ID 排序，显示默认图标
|
||
sortIcon.classList.add('fa-sort', 'text-gray-400');
|
||
}
|
||
}
|
||
|
||
// 加载错误日志数据
|
||
async function loadErrorLogs() {
|
||
// 重置选择状态
|
||
if (selectAllCheckbox) selectAllCheckbox.checked = false;
|
||
if (selectAllCheckbox) selectAllCheckbox.indeterminate = false;
|
||
updateSelectedState(); // 更新按钮状态和计数
|
||
|
||
showLoading(true);
|
||
showError(false);
|
||
showNoData(false);
|
||
|
||
const offset = (currentPage - 1) * pageSize;
|
||
|
||
try {
|
||
// Construct the API URL with search and sort parameters
|
||
let apiUrl = `/api/logs/errors?limit=${pageSize}&offset=${offset}`;
|
||
// 添加排序参数
|
||
apiUrl += `&sort_by=${currentSort.field}&sort_order=${currentSort.order}`;
|
||
|
||
// 添加搜索参数
|
||
if (currentSearch.key) {
|
||
apiUrl += `&key_search=${encodeURIComponent(currentSearch.key)}`;
|
||
}
|
||
if (currentSearch.error) {
|
||
apiUrl += `&error_search=${encodeURIComponent(currentSearch.error)}`;
|
||
}
|
||
if (currentSearch.errorCode) { // Add error code to API request
|
||
apiUrl += `&error_code_search=${encodeURIComponent(currentSearch.errorCode)}`;
|
||
}
|
||
if (currentSearch.startDate) {
|
||
apiUrl += `&start_date=${encodeURIComponent(currentSearch.startDate)}`;
|
||
}
|
||
if (currentSearch.endDate) {
|
||
apiUrl += `&end_date=${encodeURIComponent(currentSearch.endDate)}`;
|
||
}
|
||
|
||
const response = await fetch(apiUrl);
|
||
if (!response.ok) {
|
||
// Try to get error message from response body
|
||
let errorData;
|
||
try {
|
||
errorData = await response.json();
|
||
} catch (e) {
|
||
// Ignore if response is not JSON
|
||
}
|
||
throw new Error(errorData?.detail || `网络响应异常: ${response.statusText}`);
|
||
}
|
||
const data = await response.json();
|
||
// API 现在返回 { logs: [], total: count }
|
||
if (data && Array.isArray(data.logs)) {
|
||
errorLogs = data.logs; // Store the list data (contains error_code)
|
||
renderErrorLogs(errorLogs);
|
||
updatePagination(errorLogs.length, data.total || -1);
|
||
} else {
|
||
throw new Error('无法识别的API响应格式');
|
||
}
|
||
|
||
|
||
showLoading(false);
|
||
|
||
if (errorLogs.length === 0) {
|
||
showNoData(true);
|
||
}
|
||
} catch (error) {
|
||
console.error('获取错误日志失败:', error);
|
||
showLoading(false);
|
||
showError(true, error.message); // Show specific error message
|
||
}
|
||
}
|
||
|
||
|
||
// 渲染错误日志表格
|
||
function renderErrorLogs(logs) {
|
||
if (!tableBody) return;
|
||
tableBody.innerHTML = ''; // Clear previous entries
|
||
|
||
// 重置全选复选框状态（在清空表格后）
|
||
if (selectAllCheckbox) {
|
||
selectAllCheckbox.checked = false;
|
||
selectAllCheckbox.indeterminate = false;
|
||
}
|
||
|
||
if (!logs || logs.length === 0) {
|
||
// Handled by showNoData
|
||
return;
|
||
}
|
||
|
||
const startIndex = (currentPage - 1) * pageSize; // Calculate starting index for the current page
|
||
|
||
logs.forEach((log, index) => { // Add index parameter to forEach
|
||
const row = document.createElement('tr');
|
||
const sequentialId = startIndex + index + 1; // Calculate sequential ID for the current page
|
||
// Format date
|
||
let formattedTime = 'N/A';
|
||
try {
|
||
const requestTime = new Date(log.request_time);
|
||
if (!isNaN(requestTime)) {
|
||
formattedTime = requestTime.toLocaleString('zh-CN', {
|
||
year: 'numeric', month: '2-digit', day: '2-digit',
|
||
hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
|
||
});
|
||
}
|
||
} catch (e) { console.error("Error formatting date:", e); }
|
||
|
||
|
||
// Display error code instead of truncated log
|
||
const errorCodeContent = log.error_code || '无';
|
||
|
||
// Mask the Gemini key for display in the table
|
||
const maskKey = (key) => {
|
||
if (!key || key.length < 8) return key || '无'; // Don't mask short keys or null
|
||
return `${key.substring(0, 4)}...${key.substring(key.length - 4)}`;
|
||
};
|
||
const maskedKey = maskKey(log.gemini_key);
|
||
const fullKey = log.gemini_key || ''; // Store the full key
|
||
|
||
row.innerHTML = `
|
||
<td class="text-center px-3 py-3"> <!-- Checkbox column -->
|
||
<input type="checkbox" class="row-checkbox form-checkbox h-4 w-4 text-primary-600 border-gray-300 rounded focus:ring-primary-500" data-key="${fullKey}" data-log-id="${log.id}"> <!-- 添加 data-log-id -->
|
||
</td>
|
||
<td>${sequentialId}</td> <!-- 显示从1开始的序号 -->
|
||
<td class="relative group" title="${fullKey}"> <!-- Added relative/group for button positioning -->
|
||
${maskedKey}
|
||
<!-- Added copy button for the key in the table row -->
|
||
<button class="copy-btn absolute top-1/2 right-2 transform -translate-y-1/2 bg-gray-200 hover:bg-gray-300 text-gray-600 p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity text-xs" data-copy-text="${log.gemini_key || ''}" title="复制完整密钥">
|
||
<i class="far fa-copy"></i>
|
||
</button>
|
||
</td>
|
||
<td>${log.error_type || '未知'}</td>
|
||
<td class="error-code-content" title="${log.error_code || ''}">${errorCodeContent}</td>
|
||
<td>${log.model_name || '未知'}</td>
|
||
<td>${formattedTime}</td>
|
||
<td>
|
||
<button class="btn-view-details mr-2" data-log-id="${log.id}"> <!-- 添加 mr-2 -->
|
||
<i class="fas fa-eye mr-1"></i>详情
|
||
</button>
|
||
<button class="btn-delete-row text-danger-600 hover:text-danger-800" data-log-id="${log.id}" title="删除此日志">
|
||
<i class="fas fa-trash-alt"></i>
|
||
</button>
|
||
</td>
|
||
`;
|
||
|
||
tableBody.appendChild(row);
|
||
});
|
||
|
||
// Add event listeners to new 'View Details' buttons
|
||
document.querySelectorAll('.btn-view-details').forEach(button => {
|
||
button.addEventListener('click', function() {
|
||
const logId = parseInt(this.getAttribute('data-log-id'));
|
||
showLogDetails(logId);
|
||
});
|
||
});
|
||
|
||
// 新增：为新渲染的删除按钮添加事件监听器
|
||
document.querySelectorAll('.btn-delete-row').forEach(button => {
|
||
button.addEventListener('click', function() {
|
||
const logId = this.getAttribute('data-log-id');
|
||
handleDeleteLogRow(logId);
|
||
});
|
||
});
|
||
|
||
// Re-initialize copy buttons specifically for the newly rendered table rows
|
||
setupCopyButtons('#errorLogsTable');
|
||
// Update selected state after rendering
|
||
updateSelectedState();
|
||
}
|
||
|
||
// 显示错误日志详情 (从 API 获取)
|
||
async function showLogDetails(logId) {
|
||
if (!logDetailModal) return;
|
||
|
||
// Show loading state in modal (optional)
|
||
// Clear previous content and show a spinner or message
|
||
document.getElementById('modalGeminiKey').textContent = '加载中...';
|
||
document.getElementById('modalErrorType').textContent = '加载中...';
|
||
document.getElementById('modalErrorLog').textContent = '加载中...';
|
||
document.getElementById('modalRequestMsg').textContent = '加载中...';
|
||
document.getElementById('modalModelName').textContent = '加载中...';
|
||
document.getElementById('modalRequestTime').textContent = '加载中...';
|
||
|
||
logDetailModal.classList.add('show');
|
||
document.body.style.overflow = 'hidden'; // Prevent body scrolling
|
||
|
||
try {
|
||
const response = await fetch(`/api/logs/errors/${logId}/details`);
|
||
if (!response.ok) {
|
||
let errorData;
|
||
try {
|
||
errorData = await response.json();
|
||
} catch (e) { /* ignore */ }
|
||
throw new Error(errorData?.detail || `获取日志详情失败: ${response.statusText}`);
|
||
}
|
||
const logDetails = await response.json();
|
||
|
||
// Format date
|
||
let formattedTime = 'N/A';
|
||
try {
|
||
const requestTime = new Date(logDetails.request_time);
|
||
if (!isNaN(requestTime)) {
|
||
formattedTime = requestTime.toLocaleString('zh-CN', {
|
||
year: 'numeric', month: '2-digit', day: '2-digit',
|
||
hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
|
||
});
|
||
}
|
||
} catch (e) { console.error("Error formatting date:", e); }
|
||
|
||
// Format request message (handle potential JSON)
|
||
let formattedRequestMsg = '无';
|
||
if (logDetails.request_msg) {
|
||
try {
|
||
if (typeof logDetails.request_msg === 'object' && logDetails.request_msg !== null) {
|
||
formattedRequestMsg = JSON.stringify(logDetails.request_msg, null, 2);
|
||
} else if (typeof logDetails.request_msg === 'string') {
|
||
// Try parsing if it looks like JSON, otherwise display as string
|
||
const trimmedMsg = logDetails.request_msg.trim();
|
||
if (trimmedMsg.startsWith('{') || trimmedMsg.startsWith('[')) {
|
||
formattedRequestMsg = JSON.stringify(JSON.parse(logDetails.request_msg), null, 2);
|
||
} else {
|
||
formattedRequestMsg = logDetails.request_msg;
|
||
}
|
||
} else {
|
||
formattedRequestMsg = String(logDetails.request_msg);
|
||
}
|
||
} catch (e) {
|
||
formattedRequestMsg = String(logDetails.request_msg); // Fallback
|
||
console.warn("Could not parse request_msg as JSON:", e);
|
||
}
|
||
}
|
||
|
||
// Populate modal content with fetched details
|
||
document.getElementById('modalGeminiKey').textContent = logDetails.gemini_key || '无';
|
||
document.getElementById('modalErrorType').textContent = logDetails.error_type || '未知';
|
||
document.getElementById('modalErrorLog').textContent = logDetails.error_log || '无'; // Full error log
|
||
document.getElementById('modalRequestMsg').textContent = formattedRequestMsg; // Full request message
|
||
document.getElementById('modalModelName').textContent = logDetails.model_name || '未知';
|
||
document.getElementById('modalRequestTime').textContent = formattedTime;
|
||
|
||
// Re-initialize copy buttons specifically for the modal after content is loaded
|
||
setupCopyButtons('#logDetailModal');
|
||
|
||
} catch (error) {
|
||
console.error('获取日志详情失败:', error);
|
||
// Show error in modal
|
||
document.getElementById('modalGeminiKey').textContent = '错误';
|
||
document.getElementById('modalErrorType').textContent = '错误';
|
||
document.getElementById('modalErrorLog').textContent = `加载失败: ${error.message}`;
|
||
document.getElementById('modalRequestMsg').textContent = '错误';
|
||
document.getElementById('modalModelName').textContent = '错误';
|
||
document.getElementById('modalRequestTime').textContent = '错误';
|
||
// Optionally show a notification
|
||
showNotification(`加载日志详情失败: ${error.message}`, 'error', 5000);
|
||
}
|
||
}
|
||
|
||
// Close Log Detail Modal
|
||
function closeLogDetailModal() {
|
||
if (logDetailModal) {
|
||
logDetailModal.classList.remove('show');
|
||
// Optional: Restore body scrolling
|
||
document.body.style.overflow = '';
|
||
}
|
||
}
|
||
|
||
|
||
// 更新分页控件
|
||
function updatePagination(currentItemCount, totalItems) {
|
||
if (!paginationElement) return;
|
||
paginationElement.innerHTML = ''; // Clear existing pagination
|
||
|
||
// Calculate total pages only if totalItems is known and valid
|
||
let totalPages = 1;
|
||
if (totalItems >= 0) {
|
||
totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
|
||
} else if (currentItemCount < pageSize && currentPage === 1) {
|
||
// If less items than page size fetched on page 1, assume it's the only page
|
||
totalPages = 1;
|
||
} else {
|
||
// If total is unknown and more items might exist, we can't build full pagination
|
||
// We can show Prev/Next based on current page and if items were returned
|
||
console.warn("Total item count unknown, pagination will be limited.");
|
||
// Basic Prev/Next for unknown total
|
||
addPaginationLink(paginationElement, '«', currentPage > 1, () => { currentPage--; loadErrorLogs(); });
|
||
addPaginationLink(paginationElement, currentPage.toString(), true, null, true); // Current page number (non-clickable)
|
||
addPaginationLink(paginationElement, '»', currentItemCount === pageSize, () => { currentPage++; loadErrorLogs(); }); // Next enabled if full page was returned
|
||
return; // Exit here for limited pagination
|
||
}
|
||
|
||
|
||
const maxPagesToShow = 5; // Max number of page links to show
|
||
let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
|
||
let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
|
||
|
||
// Adjust startPage if endPage reaches the limit first
|
||
if (endPage === totalPages) {
|
||
startPage = Math.max(1, endPage - maxPagesToShow + 1);
|
||
}
|
||
|
||
|
||
// Previous Button
|
||
addPaginationLink(paginationElement, '«', currentPage > 1, () => { currentPage--; loadErrorLogs(); });
|
||
|
||
// First Page Button
|
||
if (startPage > 1) {
|
||
addPaginationLink(paginationElement, '1', true, () => { currentPage = 1; loadErrorLogs(); });
|
||
if (startPage > 2) {
|
||
addPaginationLink(paginationElement, '...', false); // Ellipsis
|
||
}
|
||
}
|
||
|
||
// Page Number Buttons
|
||
for (let i = startPage; i <= endPage; i++) {
|
||
addPaginationLink(paginationElement, i.toString(), true, () => { currentPage = i; loadErrorLogs(); }, i === currentPage);
|
||
}
|
||
|
||
// Last Page Button
|
||
if (endPage < totalPages) {
|
||
if (endPage < totalPages - 1) {
|
||
addPaginationLink(paginationElement, '...', false); // Ellipsis
|
||
}
|
||
addPaginationLink(paginationElement, totalPages.toString(), true, () => { currentPage = totalPages; loadErrorLogs(); });
|
||
}
|
||
|
||
|
||
// Next Button
|
||
addPaginationLink(paginationElement, '»', currentPage < totalPages, () => { currentPage++; loadErrorLogs(); });
|
||
}
|
||
|
||
// Helper function to add pagination links
|
||
function addPaginationLink(parentElement, text, enabled, clickHandler, isActive = false) {
|
||
const pageItem = document.createElement('li');
|
||
// 移除 'page-item' 和 'active' 类，使用 Tailwind 类进行样式化
|
||
// pageItem.className = `page-item ${!enabled ? 'disabled' : ''} ${isActive ? 'active' : ''}`;
|
||
|
||
const pageLink = document.createElement('a');
|
||
// 使用 Tailwind 类进行样式化
|
||
pageLink.className = `px-3 py-1 rounded-md text-sm transition duration-150 ease-in-out ${
|
||
isActive
|
||
? 'bg-primary-600 text-white font-semibold shadow-md cursor-default' // 突出当前页样式
|
||
: enabled
|
||
? 'bg-white text-gray-700 hover:bg-primary-50 hover:text-primary-600 border border-gray-300' // 可点击页码样式
|
||
: 'bg-gray-100 text-gray-400 cursor-not-allowed border border-gray-200' // 禁用状态样式 (如 '...')
|
||
}`;
|
||
pageLink.href = '#'; // Prevent page jump
|
||
pageLink.innerHTML = text;
|
||
|
||
if (enabled && clickHandler) {
|
||
pageLink.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
clickHandler();
|
||
});
|
||
} else if (!enabled) {
|
||
pageLink.addEventListener('click', e => e.preventDefault()); // Prevent click on disabled or active
|
||
} else if (isActive) {
|
||
pageLink.addEventListener('click', e => e.preventDefault()); // Prevent click on active page
|
||
}
|
||
|
||
// 不再需要 li 元素，直接将 a 元素添加到父元素
|
||
// pageItem.appendChild(pageLink);
|
||
parentElement.appendChild(pageLink);
|
||
}
|
||
|
||
|
||
// 显示/隐藏状态指示器 (using 'active' class)
|
||
function showLoading(show) {
|
||
if (loadingIndicator) loadingIndicator.style.display = show ? 'block' : 'none';
|
||
}
|
||
|
||
function showNoData(show) {
|
||
if (noDataMessage) noDataMessage.style.display = show ? 'block' : 'none';
|
||
}
|
||
|
||
function showError(show, message = '加载错误日志失败，请稍后重试。') {
|
||
if (errorMessage) {
|
||
errorMessage.style.display = show ? 'block' : 'none';
|
||
if (show) {
|
||
// Update the error message content
|
||
const p = errorMessage.querySelector('p');
|
||
if (p) p.textContent = message;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Function to show temporary status notifications (like copy success)
|
||
function showNotification(message, type = 'success', duration = 3000) {
|
||
const notificationElement = document.getElementById('notification'); // Use the correct ID from base.html
|
||
if (!notificationElement) {
|
||
console.error("Notification element with ID 'notification' not found.");
|
||
return;
|
||
}
|
||
|
||
// Set message and type class
|
||
notificationElement.textContent = message;
|
||
// Remove previous type classes before adding the new one
|
||
notificationElement.classList.remove('success', 'error', 'warning', 'info');
|
||
notificationElement.classList.add(type); // Add the type class for styling
|
||
notificationElement.className = `notification ${type} show`; // Add 'show' class
|
||
|
||
// Hide after duration
|
||
setTimeout(() => {
|
||
notificationElement.classList.remove('show');
|
||
}, duration);
|
||
}
|
||
|
||
// Example Usage (if copy functionality is added later):
|
||
// showNotification('密钥已复制!', 'success');
|
||
// showNotification('复制失败!', 'error');
|