723 lines
33 KiB
JavaScript
723 lines
33 KiB
JavaScript
// Filename: frontend/js/pages/logs/index.js
|
|
import { apiFetchJson } from '../../services/api.js';
|
|
import LogList from './logList.js';
|
|
import CustomSelectV2 from '../../components/customSelectV2.js';
|
|
import { debounce } from '../../utils/utils.js';
|
|
import FilterPopover from '../../components/filterPopover.js';
|
|
import { STATIC_ERROR_MAP, STATUS_CODE_MAP } from './logList.js';
|
|
import SystemLogTerminal from './systemLog.js';
|
|
import { initBatchActions } from './batchActions.js';
|
|
import flatpickr from '../../vendor/flatpickr.js';
|
|
import LogSettingsModal from './logSettingsModal.js';
|
|
|
|
const dataStore = {
|
|
groups: new Map(),
|
|
keys: new Map(),
|
|
};
|
|
|
|
class LogsPage {
|
|
constructor() {
|
|
this.state = {
|
|
logs: [],
|
|
pagination: { page: 1, pages: 1, total: 0, page_size: 20 },
|
|
isLoading: true,
|
|
filters: {
|
|
page: 1,
|
|
page_size: 20,
|
|
q: '',
|
|
key_ids: new Set(),
|
|
group_ids: new Set(),
|
|
error_types: new Set(),
|
|
status_codes: new Set(),
|
|
start_date: null,
|
|
end_date: null,
|
|
},
|
|
selectedLogIds: new Set(),
|
|
currentView: 'error',
|
|
};
|
|
this.elements = {
|
|
tabsContainer: document.querySelector('[data-sliding-tabs-container]'),
|
|
contentContainer: document.getElementById('log-content-container'),
|
|
errorFilters: document.getElementById('error-logs-filters'),
|
|
systemControls: document.getElementById('system-logs-controls'),
|
|
errorTemplate: document.getElementById('error-logs-template'),
|
|
systemTemplate: document.getElementById('system-logs-template'),
|
|
settingsBtn: document.querySelector('button[aria-label="日志设置"]'),
|
|
};
|
|
this.initialized = !!this.elements.contentContainer;
|
|
if (this.initialized) {
|
|
this.logList = null;
|
|
this.systemLogTerminal = null;
|
|
this.debouncedLoadAndRender = debounce(() => this.loadAndRenderLogs(), 300);
|
|
this.fp = null;
|
|
this.themeObserver = null;
|
|
this.settingsModal = null;
|
|
this.currentSettings = {};
|
|
}
|
|
}
|
|
|
|
async init() {
|
|
if (!this.initialized) return;
|
|
this._initPermanentEventListeners();
|
|
await this.loadCurrentSettings();
|
|
this._initSettingsModal();
|
|
await this.loadGroupsOnce();
|
|
this.state.currentView = null;
|
|
this.switchToView('error');
|
|
}
|
|
|
|
_initSettingsModal() {
|
|
if (!this.elements.settingsBtn) return;
|
|
this.settingsModal = new LogSettingsModal({
|
|
onSave: this.handleSaveSettings.bind(this)
|
|
});
|
|
this.elements.settingsBtn.addEventListener('click', () => {
|
|
|
|
const settingsForModal = {
|
|
log_level: this.currentSettings.log_level,
|
|
auto_cleanup: {
|
|
enabled: this.currentSettings.log_auto_cleanup_enabled,
|
|
retention_days: this.currentSettings.log_auto_cleanup_retention_days,
|
|
exec_time: this.currentSettings.log_auto_cleanup_time,
|
|
interval: 'daily',
|
|
}
|
|
};
|
|
this.settingsModal.open(settingsForModal);
|
|
});
|
|
}
|
|
|
|
async loadCurrentSettings() {
|
|
try {
|
|
const { success, data } = await apiFetchJson('/admin/settings');
|
|
if (success) {
|
|
this.currentSettings = data;
|
|
} else {
|
|
console.error('Failed to load settings from server.');
|
|
this.currentSettings = { log_auto_cleanup_time: '04:05' };
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load log settings:', error);
|
|
this.currentSettings = { log_auto_cleanup_time: '04:05' };
|
|
}
|
|
}
|
|
|
|
async handleSaveSettings(settingsData) {
|
|
const partialPayload = {
|
|
"log_level": settingsData.log_level,
|
|
"log_auto_cleanup_enabled": settingsData.auto_cleanup.enabled,
|
|
"log_auto_cleanup_time": settingsData.auto_cleanup.exec_time,
|
|
};
|
|
if (settingsData.auto_cleanup.enabled) {
|
|
let retentionDays = settingsData.auto_cleanup.retention_days;
|
|
if (retentionDays === null || retentionDays <= 0) {
|
|
retentionDays = 30;
|
|
}
|
|
partialPayload.log_auto_cleanup_retention_days = retentionDays;
|
|
}
|
|
|
|
console.log('Sending PARTIAL settings update to /admin/settings:', partialPayload);
|
|
try {
|
|
const { success, message } = await apiFetchJson('/admin/settings', {
|
|
method: 'PUT',
|
|
body: JSON.stringify(partialPayload)
|
|
});
|
|
if (!success) {
|
|
throw new Error(message || 'Failed to save settings');
|
|
}
|
|
|
|
Object.assign(this.currentSettings, partialPayload);
|
|
} catch (error) {
|
|
console.error('Error saving log settings:', error);
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
_initPermanentEventListeners() {
|
|
this.elements.tabsContainer.addEventListener('click', (event) => {
|
|
const tabItem = event.target.closest('[data-tab-target]');
|
|
if (!tabItem) return;
|
|
event.preventDefault();
|
|
const viewName = tabItem.dataset.tabTarget;
|
|
if (viewName) {
|
|
this.switchToView(viewName);
|
|
}
|
|
});
|
|
}
|
|
|
|
switchToView(viewName) {
|
|
if (this.state.currentView === viewName && this.elements.contentContainer.innerHTML !== '') return;
|
|
|
|
if (this.systemLogTerminal) {
|
|
this.systemLogTerminal.disconnect();
|
|
this.systemLogTerminal = null;
|
|
}
|
|
if (this.fp) {
|
|
this.fp.destroy();
|
|
this.fp = null;
|
|
}
|
|
if (this.themeObserver) {
|
|
this.themeObserver.disconnect();
|
|
this.themeObserver = null;
|
|
}
|
|
this.state.currentView = viewName;
|
|
this.elements.contentContainer.innerHTML = '';
|
|
const isErrorView = viewName === 'error';
|
|
this.elements.errorFilters.style.display = isErrorView ? 'flex' : 'none';
|
|
this.elements.systemControls.style.display = isErrorView ? 'none' : 'flex';
|
|
if (isErrorView) {
|
|
const template = this.elements.errorTemplate.content.cloneNode(true);
|
|
this.elements.contentContainer.appendChild(template);
|
|
requestAnimationFrame(() => {
|
|
this._initErrorLogView();
|
|
});
|
|
} else if (viewName === 'system') {
|
|
const template = this.elements.systemTemplate.content.cloneNode(true);
|
|
this.elements.contentContainer.appendChild(template);
|
|
requestAnimationFrame(() => {
|
|
this._initSystemLogView();
|
|
});
|
|
}
|
|
}
|
|
_initErrorLogView() {
|
|
this.elements.tableBody = document.getElementById('logs-table-body');
|
|
this.elements.selectedCount = document.querySelector('.flex-1.text-sm span.font-semibold:nth-child(1)');
|
|
this.elements.totalCount = document.querySelector('.flex-1.text-sm span:last-child');
|
|
this.elements.pageSizeSelect = document.querySelector('[data-component="custom-select-v2"] select');
|
|
this.elements.pageInfo = document.querySelector('.flex.w-\\[100px\\]');
|
|
this.elements.paginationBtns = document.querySelectorAll('[data-pagination-controls] button');
|
|
this.elements.selectAllCheckbox = document.querySelector('thead .table-head-cell input[type="checkbox"]');
|
|
this.elements.searchInput = document.getElementById('log-search-input');
|
|
this.elements.errorTypeFilterBtn = document.getElementById('filter-error-type-btn');
|
|
this.elements.errorCodeFilterBtn = document.getElementById('filter-error-code-btn');
|
|
this.elements.dateRangeFilterBtn = document.getElementById('filter-date-range-btn');
|
|
|
|
this.logList = new LogList(this.elements.tableBody, dataStore);
|
|
const selectContainer = document.querySelector('[data-component="custom-select-v2"]');
|
|
if (selectContainer) { new CustomSelectV2(selectContainer); }
|
|
|
|
this.initFilterPopovers();
|
|
this.initDateRangePicker();
|
|
this.initEventListeners();
|
|
this._observeThemeChanges();
|
|
initBatchActions(this);
|
|
this.loadAndRenderLogs();
|
|
}
|
|
|
|
_observeThemeChanges() {
|
|
const applyTheme = () => {
|
|
if (!this.fp || !this.fp.calendarContainer) return;
|
|
if (document.documentElement.classList.contains('dark')) {
|
|
this.fp.calendarContainer.classList.add('dark');
|
|
} else {
|
|
this.fp.calendarContainer.classList.remove('dark');
|
|
}
|
|
};
|
|
this.themeObserver = new MutationObserver((mutationsList) => {
|
|
for (const mutation of mutationsList) {
|
|
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
|
|
applyTheme();
|
|
}
|
|
}
|
|
});
|
|
this.themeObserver.observe(document.documentElement, { attributes: true });
|
|
|
|
applyTheme();
|
|
}
|
|
|
|
_initSystemLogView() {
|
|
this.systemLogTerminal = new SystemLogTerminal(
|
|
this.elements.contentContainer,
|
|
this.elements.systemControls
|
|
);
|
|
Swal.fire({
|
|
width: '20rem',
|
|
backdrop: `rgba(0,0,0,0.5)`,
|
|
heightAuto: false,
|
|
customClass: { popup: `swal2-custom-style ${document.documentElement.classList.contains('dark') ? 'swal2-dark' : ''}` },
|
|
title: '系统终端日志',
|
|
text: '您即将连接到实时系统日志流窗口。',
|
|
showCancelButton: true,
|
|
confirmButtonText: '确认',
|
|
cancelButtonText: '取消',
|
|
reverseButtons: false,
|
|
confirmButtonColor: 'rgba(31, 102, 255, 0.8)',
|
|
cancelButtonColor: '#6b7280',
|
|
focusConfirm: false,
|
|
focusCancel: false,
|
|
target: '#main-content-wrapper',
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
this.systemLogTerminal.connect();
|
|
} else {
|
|
const errorLogTab = Array.from(this.elements.tabsContainer.querySelectorAll('[data-tab-target="error"]'))[0];
|
|
if (errorLogTab) errorLogTab.click();
|
|
}
|
|
});
|
|
}
|
|
initFilterPopovers() {
|
|
const errorTypeOptions = [
|
|
...Object.values(STATUS_CODE_MAP).map(v => ({ value: v.type, label: v.type })),
|
|
...Object.values(STATIC_ERROR_MAP).map(v => ({ value: v.type, label: v.type }))
|
|
];
|
|
const uniqueErrorTypeOptions = Array.from(new Map(errorTypeOptions.map(item => [item.value, item])).values());
|
|
if (this.elements.errorTypeFilterBtn) {
|
|
new FilterPopover(this.elements.errorTypeFilterBtn, uniqueErrorTypeOptions, '筛选错误类型');
|
|
}
|
|
const statusCodeOptions = Object.keys(STATUS_CODE_MAP).map(code => ({ value: code, label: code }));
|
|
if (this.elements.errorCodeFilterBtn) {
|
|
new FilterPopover(this.elements.errorCodeFilterBtn, statusCodeOptions, '筛选状态码');
|
|
}
|
|
}
|
|
initDateRangePicker() {
|
|
if (!this.elements.dateRangeFilterBtn) return;
|
|
const buttonTextSpan = this.elements.dateRangeFilterBtn.querySelector('span');
|
|
const originalText = buttonTextSpan.textContent;
|
|
this.fp = flatpickr(this.elements.dateRangeFilterBtn, {
|
|
mode: 'range',
|
|
dateFormat: 'Y-m-d',
|
|
onClose: (selectedDates) => {
|
|
if (selectedDates.length === 2) {
|
|
const [start, end] = selectedDates;
|
|
end.setHours(23, 59, 59, 999);
|
|
this.state.filters.start_date = start.toISOString();
|
|
this.state.filters.end_date = end.toISOString();
|
|
const startDateStr = start.toISOString().split('T')[0];
|
|
const endDateStr = end.toISOString().split('T')[0];
|
|
|
|
buttonTextSpan.textContent = `${startDateStr} ~ ${endDateStr}`;
|
|
this.elements.dateRangeFilterBtn.classList.add('!border-primary', '!text-primary');
|
|
this.state.filters.page = 1;
|
|
this.loadAndRenderLogs();
|
|
}
|
|
},
|
|
onReady: (selectedDates, dateStr, instance) => {
|
|
if (document.documentElement.classList.contains('dark')) {
|
|
instance.calendarContainer.classList.add('dark');
|
|
}
|
|
const clearButton = document.createElement('button');
|
|
clearButton.textContent = '清除';
|
|
clearButton.className = 'button flatpickr-button flatpickr-clear-button';
|
|
clearButton.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
instance.clear();
|
|
|
|
this.state.filters.start_date = null;
|
|
this.state.filters.end_date = null;
|
|
buttonTextSpan.textContent = originalText;
|
|
this.elements.dateRangeFilterBtn.classList.remove('!border-primary', '!text-primary');
|
|
|
|
this.state.filters.page = 1;
|
|
this.loadAndRenderLogs();
|
|
instance.close();
|
|
});
|
|
instance.calendarContainer.appendChild(clearButton);
|
|
const nativeMonthSelect = instance.monthsDropdownContainer;
|
|
if (!nativeMonthSelect) return;
|
|
const monthYearContainer = nativeMonthSelect.parentElement;
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'custom-select-v2-container relative inline-block text-left';
|
|
|
|
wrapper.innerHTML = `
|
|
<button type="button" class="custom-select-trigger inline-flex justify-center items-center w-22 gap-x-1.5 rounded-md bg-transparent px-1 py-1 text-xs font-semibold text-foreground shadow-sm ring-0 ring-inset ring-input hover:bg-accent focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-offset-background focus:ring-primary" aria-haspopup="true">
|
|
<span class="truncate"></span>
|
|
</button>
|
|
`;
|
|
|
|
const template = document.createElement('template');
|
|
template.className = 'custom-select-panel-template';
|
|
|
|
template.innerHTML = `
|
|
<div class="custom-select-panel absolute z-1000 my-2 w-24 origin-top-right rounded-md bg-popover dark:bg-zinc-900 shadow-lg ring-1 ring-zinc-500/30 ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" tabindex="-1">
|
|
</div>
|
|
`;
|
|
nativeMonthSelect.classList.add('hidden');
|
|
wrapper.appendChild(nativeMonthSelect);
|
|
wrapper.appendChild(template);
|
|
monthYearContainer.prepend(wrapper);
|
|
const customSelect = new CustomSelectV2(wrapper);
|
|
instance.customMonthSelect = customSelect;
|
|
},
|
|
onMonthChange: (selectedDates, dateStr, instance) => {
|
|
if (instance.customMonthSelect) {
|
|
instance.customMonthSelect.updateTriggerText();
|
|
}
|
|
},
|
|
});
|
|
}
|
|
initEventListeners() {
|
|
if (this.elements.pageSizeSelect) {
|
|
this.elements.pageSizeSelect.addEventListener('change', (e) => this.changePageSize(parseInt(e.target.value, 10)));
|
|
}
|
|
if (this.elements.paginationBtns.length >= 4) {
|
|
this.elements.paginationBtns[0].addEventListener('click', () => this.goToPage(1));
|
|
this.elements.paginationBtns[1].addEventListener('click', () => this.goToPage(this.state.pagination.page - 1));
|
|
this.elements.paginationBtns[2].addEventListener('click', () => this.goToPage(this.state.pagination.page + 1));
|
|
this.elements.paginationBtns[3].addEventListener('click', () => this.goToPage(this.state.pagination.pages));
|
|
}
|
|
if (this.elements.selectAllCheckbox) {
|
|
this.elements.selectAllCheckbox.addEventListener('change', (event) => this.handleSelectAllChange(event));
|
|
}
|
|
if (this.elements.tableBody) {
|
|
this.elements.tableBody.addEventListener('click', (event) => {
|
|
const checkbox = event.target.closest('input[type="checkbox"]');
|
|
const actionButton = event.target.closest('button[data-action]');
|
|
if (checkbox) {
|
|
this.handleSelectionChange(checkbox);
|
|
} else if (actionButton) {
|
|
this._handleLogRowAction(actionButton);
|
|
}
|
|
});
|
|
}
|
|
if (this.elements.searchInput) {
|
|
this.elements.searchInput.addEventListener('input', (event) => this.handleSearchInput(event));
|
|
}
|
|
if (this.elements.errorTypeFilterBtn) {
|
|
this.elements.errorTypeFilterBtn.addEventListener('filter-change', (e) => this.handleFilterChange(e));
|
|
}
|
|
if (this.elements.errorCodeFilterBtn) {
|
|
this.elements.errorCodeFilterBtn.addEventListener('filter-change', (e) => this.handleFilterChange(e));
|
|
}
|
|
}
|
|
handleFilterChange(event) {
|
|
const { filterKey, selected } = event.detail;
|
|
if (filterKey === 'filter-error-type-btn') {
|
|
this.state.filters.error_types = selected;
|
|
} else if (filterKey === 'filter-error-code-btn') {
|
|
this.state.filters.status_codes = selected;
|
|
}
|
|
this.state.filters.page = 1;
|
|
this.loadAndRenderLogs();
|
|
}
|
|
handleSearchInput(event) {
|
|
const searchTerm = event.target.value.trim().toLowerCase();
|
|
this.state.filters.page = 1;
|
|
this.state.filters.q = '';
|
|
this.state.filters.key_ids = new Set();
|
|
this.state.filters.group_ids = new Set();
|
|
if (searchTerm === '') {
|
|
this.debouncedLoadAndRender();
|
|
return;
|
|
}
|
|
const matchedGroupIds = new Set();
|
|
dataStore.groups.forEach(group => {
|
|
if (group.display_name.toLowerCase().includes(searchTerm)) {
|
|
matchedGroupIds.add(group.id);
|
|
}
|
|
});
|
|
const matchedKeyIds = new Set();
|
|
dataStore.keys.forEach(key => {
|
|
if (key.APIKey && key.APIKey.toLowerCase().includes(searchTerm)) {
|
|
matchedKeyIds.add(key.ID);
|
|
}
|
|
});
|
|
if (matchedGroupIds.size > 0) this.state.filters.group_ids = matchedGroupIds;
|
|
if (matchedKeyIds.size > 0) this.state.filters.key_ids = matchedKeyIds;
|
|
if (matchedGroupIds.size === 0 && matchedKeyIds.size === 0) {
|
|
this.state.filters.q = searchTerm;
|
|
}
|
|
this.debouncedLoadAndRender();
|
|
}
|
|
handleSelectionChange(checkbox) {
|
|
const row = checkbox.closest('.table-row');
|
|
if (!row) return;
|
|
const logId = parseInt(row.dataset.logId, 10);
|
|
if (isNaN(logId)) return;
|
|
if (checkbox.checked) {
|
|
this.state.selectedLogIds.add(logId);
|
|
} else {
|
|
this.state.selectedLogIds.delete(logId);
|
|
}
|
|
this.syncSelectionUI();
|
|
}
|
|
handleSelectAllChange(event) {
|
|
const isChecked = event.target.checked;
|
|
this.state.logs.forEach(log => {
|
|
if (isChecked) {
|
|
this.state.selectedLogIds.add(log.ID);
|
|
} else {
|
|
this.state.selectedLogIds.delete(log.ID);
|
|
}
|
|
});
|
|
this.syncRowCheckboxes();
|
|
this.syncSelectionUI();
|
|
}
|
|
syncRowCheckboxes() {
|
|
const isAllChecked = this.elements.selectAllCheckbox.checked;
|
|
this.elements.tableBody.querySelectorAll('input[type="checkbox"]').forEach(cb => {
|
|
cb.checked = isAllChecked;
|
|
});
|
|
}
|
|
syncSelectionUI() {
|
|
if (!this.elements.selectAllCheckbox || !this.elements.selectedCount) return;
|
|
const selectedCount = this.state.selectedLogIds.size;
|
|
const visibleLogsCount = this.state.logs.length;
|
|
|
|
if (selectedCount === 0) {
|
|
this.elements.selectAllCheckbox.checked = false;
|
|
this.elements.selectAllCheckbox.indeterminate = false;
|
|
} else if (selectedCount < visibleLogsCount) {
|
|
this.elements.selectAllCheckbox.checked = false;
|
|
this.elements.selectAllCheckbox.indeterminate = true;
|
|
} else if (selectedCount === visibleLogsCount && visibleLogsCount > 0) {
|
|
this.elements.selectAllCheckbox.checked = true;
|
|
this.elements.selectAllCheckbox.indeterminate = false;
|
|
}
|
|
|
|
this.elements.selectedCount.textContent = selectedCount;
|
|
const hasSelection = selectedCount > 0;
|
|
const deleteSelectedBtn = document.getElementById('delete-selected-logs-btn');
|
|
if (deleteSelectedBtn) {
|
|
deleteSelectedBtn.disabled = !hasSelection;
|
|
}
|
|
}
|
|
|
|
async _handleLogRowAction(button) {
|
|
const action = button.dataset.action;
|
|
const row = button.closest('.table-row');
|
|
const isDarkMode = document.documentElement.classList.contains('dark');
|
|
if (!row) return;
|
|
const logId = parseInt(row.dataset.logId, 10);
|
|
const log = this.state.logs.find(l => l.ID === logId);
|
|
if (!log) {
|
|
Swal.fire({ toast: true, position: 'top-end', icon: 'error', title: '找不到日志数据', showConfirmButton: false, timer: 2000 });
|
|
return;
|
|
}
|
|
switch (action) {
|
|
case 'view-log-details': {
|
|
const detailsHtml = `
|
|
<div class="space-y-3 text-left text-sm p-2">
|
|
<div class="flex"><p class="w-24 font-semibold text-zinc-500 shrink-0">状态码</p><p class="font-mono text-zinc-800 dark:text-zinc-200">${log.StatusCode || 'N/A'}</p></div>
|
|
<div class="flex"><p class="w-24 font-semibold text-zinc-500 shrink-0">状态</p><p class="font-mono text-zinc-800 dark:text-zinc-200">${log.Status || 'N/A'}</p></div>
|
|
<div class="flex"><p class="w-24 font-semibold text-zinc-500 shrink-0">模型</p><p class="font-mono text-zinc-800 dark:text-zinc-200">${log.ModelName || 'N/A'}</p></div>
|
|
<div class="border-t border-zinc-200 dark:border-zinc-700 my-2"></div>
|
|
<div>
|
|
<p class="font-semibold text-zinc-500 mb-1">错误消息</p>
|
|
<div class="max-h-40 overflow-y-auto bg-zinc-100 dark:bg-zinc-800 p-2 rounded-md text-zinc-700 dark:text-zinc-300 wrap-break-word text-xs">
|
|
${log.ErrorMessage ? log.ErrorMessage.replace(/\n/g, '<br>') : '无错误消息。'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
Swal.fire({
|
|
target: '#main-content-wrapper',
|
|
width: '32rem',
|
|
backdrop: `rgba(0,0,0,0.5)`,
|
|
heightAuto: false,
|
|
customClass: {
|
|
popup: `swal2-custom-style rounded-xl ${document.documentElement.classList.contains('dark') ? 'swal2-dark' : ''}`,
|
|
title: 'text-lg font-bold',
|
|
htmlContainer: 'm-0 text-left',
|
|
},
|
|
title: '日志详情',
|
|
html: detailsHtml,
|
|
showCloseButton: false,
|
|
showConfirmButton: false,
|
|
});
|
|
break;
|
|
}
|
|
case 'copy-api-key': {
|
|
const key = dataStore.keys.get(log.KeyID);
|
|
if (key && key.APIKey) {
|
|
navigator.clipboard.writeText(key.APIKey).then(() => {
|
|
Swal.fire({ toast: true, position: 'top-end', customClass: { popup: `swal2-custom-style ${document.documentElement.classList.contains('dark') ? 'swal2-dark' : ''}` }, icon: 'success', title: 'API Key 已复制', showConfirmButton: false, timer: 1500 });
|
|
}).catch(err => {
|
|
Swal.fire({ toast: true, position: 'top-end', icon: 'error', title: '复制失败', text: err.message, showConfirmButton: false, timer: 2000 });
|
|
});
|
|
} else {
|
|
Swal.fire({ toast: true, position: 'top-end', icon: 'warning', title: '未找到完整的API Key', showConfirmButton: false, timer: 2000 });
|
|
return;
|
|
}
|
|
if (navigator.clipboard && window.isSecureContext) {
|
|
navigator.clipboard.writeText(key.APIKey).then(() => {
|
|
Swal.fire({ toast: true, position: 'top-end', icon: 'success', title: 'API Key 已复制', showConfirmButton: false, timer: 1500 });
|
|
}).catch(err => {
|
|
Swal.fire({ toast: true, position: 'top-end', icon: 'error', title: '复制失败', text: err.message, showConfirmButton: false, timer: 2000 });
|
|
});
|
|
} else {
|
|
// 如果不可用，则提供明确的错误提示
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: '复制失败',
|
|
text: '此功能需要安全连接 (HTTPS) 或在 localhost 环境下使用。',
|
|
target: '#main-content-wrapper',
|
|
customClass: { popup: `swal2-custom-style ${document.documentElement.classList.contains('dark') ? 'swal2-dark' : ''}` },
|
|
});
|
|
}
|
|
break;
|
|
}
|
|
case 'delete-log': {
|
|
Swal.fire({
|
|
width: '20rem',
|
|
backdrop: `rgba(0,0,0,0.5)`,
|
|
heightAuto: false,
|
|
customClass: { popup: `swal2-custom-style ${document.documentElement.classList.contains('dark') ? 'swal2-dark' : ''}` },
|
|
title: '确认删除',
|
|
text: `您确定要删除这条日志吗？此操作不可撤销。`,
|
|
showCancelButton: true,
|
|
confirmButtonText: '确认删除',
|
|
cancelButtonText: '取消',
|
|
reverseButtons: false,
|
|
confirmButtonColor: '#ef4444',
|
|
cancelButtonColor: '#6b7280',
|
|
focusCancel: true,
|
|
target: '#main-content-wrapper',
|
|
}).then(async (result) => {
|
|
if (result.isConfirmed) {
|
|
try {
|
|
const url = `/admin/logs?ids=${logId}`;
|
|
const { success, message } = await apiFetchJson(url, { method: 'DELETE' });
|
|
if (success) {
|
|
Swal.fire({ toast: true, position: 'top-end', icon: 'success', title: '删除成功', showConfirmButton: false, timer: 2000, timerProgressBar: true });
|
|
this.loadAndRenderLogs();
|
|
} else {
|
|
throw new Error(message || '删除失败，请稍后重试。');
|
|
}
|
|
} catch (error) {
|
|
Swal.fire({ icon: 'error', title: '操作失败', text: error.message, target: '#main-content-wrapper' });
|
|
}
|
|
}
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
changePageSize(newSize) {
|
|
this.state.filters.page_size = newSize;
|
|
this.state.filters.page = 1;
|
|
this.loadAndRenderLogs();
|
|
}
|
|
goToPage(page) {
|
|
if (page < 1 || page > this.state.pagination.pages || this.state.isLoading) return;
|
|
this.state.filters.page = page;
|
|
this.loadAndRenderLogs();
|
|
}
|
|
updatePaginationUI() {
|
|
const { page, pages, total } = this.state.pagination;
|
|
if (this.elements.pageInfo) {
|
|
this.elements.pageInfo.textContent = `第 ${page} / ${pages} 页`;
|
|
}
|
|
if (this.elements.totalCount) {
|
|
this.elements.totalCount.textContent = total;
|
|
}
|
|
|
|
if (this.elements.paginationBtns.length >= 4) {
|
|
const isFirstPage = page === 1;
|
|
const isLastPage = page === pages || pages === 0;
|
|
this.elements.paginationBtns[0].disabled = isFirstPage;
|
|
this.elements.paginationBtns[1].disabled = isFirstPage;
|
|
this.elements.paginationBtns[2].disabled = isLastPage;
|
|
this.elements.paginationBtns[3].disabled = isLastPage;
|
|
}
|
|
}
|
|
async loadGroupsOnce() {
|
|
if (dataStore.groups.size > 0) return;
|
|
try {
|
|
const { success, data } = await apiFetchJson("/admin/keygroups");
|
|
if (success && Array.isArray(data)) {
|
|
data.forEach(group => dataStore.groups.set(group.id, group));
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to load key groups:", error);
|
|
}
|
|
}
|
|
|
|
async loadAndRenderLogs() {
|
|
this.state.isLoading = true;
|
|
this.state.selectedLogIds.clear();
|
|
this.logList.renderLoading();
|
|
this.updatePaginationUI();
|
|
this.syncSelectionUI();
|
|
try {
|
|
const finalParams = {};
|
|
const { filters } = this.state;
|
|
|
|
Object.keys(filters).forEach(key => {
|
|
if (!(filters[key] instanceof Set)) {
|
|
finalParams[key] = filters[key];
|
|
}
|
|
});
|
|
// --- [MODIFIED] START: Combine all error-related filters into a single parameter for OR logic ---
|
|
const allErrorCodes = new Set();
|
|
const allStatusCodes = new Set(filters.status_codes);
|
|
if (filters.error_types.size > 0) {
|
|
filters.error_types.forEach(type => {
|
|
// Find matching static error codes (e.g., 'API_KEY_INVALID')
|
|
for (const [code, obj] of Object.entries(STATIC_ERROR_MAP)) {
|
|
if (obj.type === type) {
|
|
allErrorCodes.add(code);
|
|
}
|
|
}
|
|
// Find matching status codes (e.g., 400, 401)
|
|
for (const [code, obj] of Object.entries(STATUS_CODE_MAP)) {
|
|
if (obj.type === type) {
|
|
allStatusCodes.add(code);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Pass the combined codes to the backend. The backend will handle the OR logic.
|
|
if (allErrorCodes.size > 0) finalParams.error_codes = [...allErrorCodes].join(',');
|
|
if (allStatusCodes.size > 0) finalParams.status_codes = [...allStatusCodes].join(',');
|
|
// --- [MODIFIED] END ---
|
|
|
|
if (filters.key_ids.size > 0) finalParams.key_ids = [...filters.key_ids].join(',');
|
|
if (filters.group_ids.size > 0) finalParams.group_ids = [...filters.group_ids].join(',');
|
|
|
|
Object.keys(finalParams).forEach(key => {
|
|
if (finalParams[key] === '' || finalParams[key] === null || finalParams[key] === undefined) {
|
|
delete finalParams[key];
|
|
}
|
|
});
|
|
const query = new URLSearchParams(finalParams);
|
|
|
|
const { success, data } = await apiFetchJson(
|
|
`/admin/logs?${query.toString()}`,
|
|
{ cache: 'no-cache', noCache: true }
|
|
);
|
|
if (success && typeof data === 'object' && data.items) {
|
|
const { items, total, page, page_size } = data;
|
|
this.state.logs = items;
|
|
const totalPages = Math.ceil(total / page_size);
|
|
this.state.pagination = { page, page_size, total, pages: totalPages > 0 ? totalPages : 1 };
|
|
await this.enrichLogsWithKeyNames(items);
|
|
this.logList.render(this.state.logs, this.state.pagination, this.state.selectedLogIds);
|
|
} else {
|
|
this.state.logs = [];
|
|
this.state.pagination = { ...this.state.pagination, total: 0, pages: 1, page: 1 };
|
|
this.logList.render([], this.state.pagination);
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to load logs:", error);
|
|
this.state.logs = [];
|
|
this.state.pagination = { ...this.state.pagination, total: 0, pages: 1, page: 1 };
|
|
this.logList.render([], this.state.pagination);
|
|
} finally {
|
|
this.state.isLoading = false;
|
|
this.updatePaginationUI();
|
|
this.syncSelectionUI();
|
|
}
|
|
}
|
|
async enrichLogsWithKeyNames(logs) {
|
|
const missingKeyIds = [...new Set(
|
|
logs.filter(log => log.KeyID && !dataStore.keys.has(log.KeyID)).map(log => log.KeyID)
|
|
)];
|
|
if (missingKeyIds.length === 0) return;
|
|
try {
|
|
const idsQuery = missingKeyIds.join(',');
|
|
const { success, data } = await apiFetchJson(`/admin/apikeys?ids=${idsQuery}`);
|
|
if (success && Array.isArray(data)) {
|
|
data.forEach(key => dataStore.keys.set(key.ID, key));
|
|
}
|
|
} catch (error) {
|
|
console.error(`Failed to fetch key details:`, error);
|
|
}
|
|
}
|
|
}
|
|
|
|
export default function() {
|
|
const page = new LogsPage();
|
|
page.init();
|
|
}
|