107 lines
4.3 KiB
JavaScript
107 lines
4.3 KiB
JavaScript
import {
|
|
apiFetchJson
|
|
} from "./chunk-PLQL6WIO.js";
|
|
|
|
// frontend/js/pages/logs/logList.js
|
|
var LogList = class {
|
|
constructor(container) {
|
|
this.container = container;
|
|
if (!this.container) {
|
|
console.error("LogList: container element (tbody) not found.");
|
|
}
|
|
}
|
|
renderLoading() {
|
|
if (!this.container) return;
|
|
this.container.innerHTML = `<tr><td colspan="9" class="p-8 text-center text-muted-foreground"><i class="fas fa-spinner fa-spin mr-2"></i> \u52A0\u8F7D\u65E5\u5FD7\u4E2D...</td></tr>`;
|
|
}
|
|
render(logs) {
|
|
if (!this.container) return;
|
|
if (!logs || logs.length === 0) {
|
|
this.container.innerHTML = `<tr><td colspan="9" class="p-8 text-center text-muted-foreground">\u6CA1\u6709\u627E\u5230\u76F8\u5173\u7684\u65E5\u5FD7\u8BB0\u5F55\u3002</td></tr>`;
|
|
return;
|
|
}
|
|
const logsHtml = logs.map((log) => this.createLogRowHtml(log)).join("");
|
|
this.container.innerHTML = logsHtml;
|
|
}
|
|
createLogRowHtml(log) {
|
|
const groupName = log.GroupDisplayName || (log.GroupID ? `Group #${log.GroupID}` : "N/A");
|
|
const apiKeyName = log.APIKeyName || (log.KeyID ? `Key #${log.KeyID}` : "N/A");
|
|
const errorTag = log.IsSuccess ? `<span class="inline-flex items-center rounded-md bg-green-500/10 px-2 py-1 text-xs font-medium text-green-600">\u6210\u529F</span>` : `<span class="inline-flex items-center rounded-md bg-destructive/10 px-2 py-1 text-xs font-medium text-destructive">${log.ErrorCode || "\u5931\u8D25"}</span>`;
|
|
const requestTime = new Date(log.RequestTime).toLocaleString();
|
|
return `
|
|
<tr class="border-b border-b-border transition-colors hover:bg-muted/80" data-log-id="${log.ID}">
|
|
<td class="p-4 align-middle"><input type="checkbox" class="h-4 w-4 rounded border-zinc-300 text-blue-600 focus:ring-blue-500"></td>
|
|
<td class="p-4 align-middle font-mono text-muted-foreground">#${log.ID}</td>
|
|
<td class="p-4 align-middle font-medium font-mono">${apiKeyName}</td>
|
|
<td class="p-4 align-middle">${groupName}</td>
|
|
<td class="p-4 align-middle text-foreground">${log.ErrorMessage || (log.IsSuccess ? "" : "\u672A\u77E5\u9519\u8BEF")}</td>
|
|
<td class="p-4 align-middle">${errorTag}</td>
|
|
<td class="p-4 align-middle font-mono">${log.ModelName}</td>
|
|
<td class="p-4 align-middle text-muted-foreground text-xs">${requestTime}</td>
|
|
<td class="p-4 align-middle">
|
|
<button class="btn btn-ghost btn-icon btn-sm" aria-label="\u67E5\u770B\u8BE6\u60C5">
|
|
<i class="fas fa-ellipsis-h h-4 w-4"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
};
|
|
var logList_default = LogList;
|
|
|
|
// frontend/js/pages/logs/index.js
|
|
var LogsPage = class {
|
|
constructor() {
|
|
this.state = {
|
|
logs: [],
|
|
// [修正] 暂时将分页状态设为默认值，直到后端添加分页支持
|
|
pagination: { page: 1, pages: 1, total: 0 },
|
|
isLoading: true,
|
|
filters: { page: 1, page_size: 20 }
|
|
};
|
|
this.elements = {
|
|
tableBody: document.getElementById("logs-table-body")
|
|
};
|
|
this.initialized = !!this.elements.tableBody;
|
|
if (this.initialized) {
|
|
this.logList = new logList_default(this.elements.tableBody);
|
|
}
|
|
}
|
|
async init() {
|
|
if (!this.initialized) {
|
|
console.error("LogsPage: Could not initialize. Essential container element 'logs-table-body' is missing.");
|
|
return;
|
|
}
|
|
this.initEventListeners();
|
|
await this.loadAndRenderLogs();
|
|
}
|
|
initEventListeners() {
|
|
}
|
|
async loadAndRenderLogs() {
|
|
this.state.isLoading = true;
|
|
this.logList.renderLoading();
|
|
try {
|
|
const url = `/admin/logs?page=${this.state.filters.page}&page_size=${this.state.filters.page_size}`;
|
|
const responseData = await apiFetchJson(url);
|
|
if (responseData && responseData.success && Array.isArray(responseData.data)) {
|
|
this.state.logs = responseData.data;
|
|
this.logList.render(this.state.logs);
|
|
} else {
|
|
console.error("API response for logs is incorrect:", responseData);
|
|
this.logList.render([]);
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to load logs:", error);
|
|
} finally {
|
|
this.state.isLoading = false;
|
|
}
|
|
}
|
|
};
|
|
function logs_default() {
|
|
const page = new LogsPage();
|
|
page.init();
|
|
}
|
|
export {
|
|
logs_default as default
|
|
};
|