加载失败: ${apiError.message}
`;
}
}
// 关闭 API 调用详情模态框
function closeApiCallDetailsModal() {
const modal = document.getElementById("apiCallDetailsModal");
if (modal) {
modal.classList.add("hidden");
}
}
// 渲染 API 调用详情到模态框
function renderApiCallDetails(
data,
container,
totalCalls,
successCalls,
failureCalls
) {
let summaryHtml = "";
// 只有在提供了这些统计数据时才显示概览
if (
totalCalls !== undefined &&
successCalls !== undefined &&
failureCalls !== undefined
) {
summaryHtml = `
加载失败: ${apiError.message}
`;
}
};
// 关闭密钥使用详情模态框
window.closeKeyUsageDetailsModal = function () {
const modal = document.getElementById("keyUsageDetailsModal");
if (modal) {
modal.classList.add("hidden");
}
};
// window.renderKeyUsageDetails 函数已被移入 showKeyUsageDetails 内部, 此处残留代码已删除。
// --- Key List Display & Pagination ---
/**
* Displays key list items for a specific type and page.
* @param {string} type 'valid' or 'invalid'
* @param {number} page Page number (1-based)
* @param {Array} keyItemsArray The array of li elements to paginate (e.g., filteredValidKeys, allInvalidKeys)
*/
function displayPage(type, page, keyItemsArray) {
const listElement = document.getElementById(`${type}Keys`);
const paginationControls = document.getElementById(
`${type}PaginationControls`
);
if (!listElement || !paginationControls) return;
// Update current page based on type
if (type === "valid") {
validCurrentPage = page;
// Read itemsPerPage from the select specifically for valid keys
const itemsPerPageSelect = document.getElementById("itemsPerPageSelect");
itemsPerPage = itemsPerPageSelect
? parseInt(itemsPerPageSelect.value, 10)
: 10;
} else {
invalidCurrentPage = page;
// For invalid keys, use a fixed itemsPerPage or the same global one
// itemsPerPage = 10; // Or read from a different select if needed
}
const totalItems = keyItemsArray.length;
const totalPages = Math.ceil(totalItems / itemsPerPage);
page = Math.max(1, Math.min(page, totalPages || 1)); // Ensure page is valid
// Update current page variable again after validation
if (type === "valid") {
validCurrentPage = page;
} else {
invalidCurrentPage = page;
}
const startIndex = (page - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
listElement.innerHTML = ""; // Clear current list content
const pageItems = keyItemsArray.slice(startIndex, endIndex);
if (pageItems.length > 0) {
pageItems.forEach((originalMasterItem) => {
const listItemClone = originalMasterItem.cloneNode(true);
// The checkbox's 'checked' state is cloned from the master item.
// Now, ensure the 'selected' class on the clone matches this cloned checkbox state.
const checkboxInClone = listItemClone.querySelector(".key-checkbox");
if (checkboxInClone) {
listItemClone.classList.toggle("selected", checkboxInClone.checked);
}
listElement.appendChild(listItemClone);
});
} else if (
totalItems === 0 &&
type === "valid" &&
(document.getElementById("failCountThreshold").value !== "0" ||
document.getElementById("keySearchInput").value !== "")
) {
// Handle empty state after filtering/searching for valid keys
const noMatchMsgId = "no-valid-keys-msg";
let noMatchMsg = listElement.querySelector(`#${noMatchMsgId}`);
if (!noMatchMsg) {
noMatchMsg = document.createElement("li");
noMatchMsg.id = noMatchMsgId;
noMatchMsg.className = "text-center text-gray-500 py-4 col-span-full";
noMatchMsg.textContent = "没有符合条件的有效密钥";
listElement.appendChild(noMatchMsg);
}
noMatchMsg.style.display = "";
} else if (totalItems === 0) {
// Handle empty state for initially empty lists
const emptyMsg = document.createElement("li");
emptyMsg.className = "text-center text-gray-500 py-4 col-span-full";
emptyMsg.textContent = `暂无${type === "valid" ? "有效" : "无效"}密钥`;
listElement.appendChild(emptyMsg);
}
setupPaginationControls(type, page, totalPages, keyItemsArray);
updateBatchActions(type); // Update batch actions based on the currently displayed page
// Re-attach event listeners for buttons inside the newly added list items if needed (using event delegation is better)
}
/**
* Sets up pagination controls.
* @param {string} type 'valid' or 'invalid'
* @param {number} currentPage Current page number
* @param {number} totalPages Total number of pages
* @param {Array} keyItemsArray The array of li elements being paginated
*/
function setupPaginationControls(type, currentPage, totalPages, keyItemsArray) {
const controlsContainer = document.getElementById(
`${type}PaginationControls`
);
if (!controlsContainer) return;
controlsContainer.innerHTML = "";
if (totalPages <= 1) {
return; // No controls needed for single/no page
}
// Base classes for all buttons (Tailwind for layout, custom for consistent styling)
const baseButtonClasses =
"pagination-button px-3 py-1 rounded text-sm transition-colors duration-150 ease-in-out";
// Define hover classes that work with the custom background by adjusting opacity or a border effect.
// Since .pagination-button defines a background, a hover effect might be a subtle border change or brightness.
// For simplicity, we can rely on CSS for hover effects on .pagination-button:hover
// const hoverClasses = "hover:border-purple-400"; // Example if you want JS to add specific hover behavior
// Previous Button
const prevButton = document.createElement("button");
prevButton.innerHTML = '