61 lines
2.8 KiB
JavaScript
61 lines
2.8 KiB
JavaScript
// Filename: frontend/js/pages/logs/logList.js
|
|
|
|
class LogList {
|
|
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> 加载日志中...</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">没有找到相关的日志记录。</td></tr>`;
|
|
return;
|
|
}
|
|
|
|
const logsHtml = logs.map(log => this.createLogRowHtml(log)).join('');
|
|
this.container.innerHTML = logsHtml;
|
|
}
|
|
|
|
createLogRowHtml(log) {
|
|
// [后端协作点] 假设后端未来会提供 GroupDisplayName 和 APIKeyName
|
|
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">成功</span>`
|
|
: `<span class="inline-flex items-center rounded-md bg-destructive/10 px-2 py-1 text-xs font-medium text-destructive">${log.ErrorCode || '失败'}</span>`;
|
|
|
|
// 使用 toLocaleString 格式化时间，更符合用户本地习惯
|
|
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 ? '' : '未知错误')}</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="查看详情">
|
|
<i class="fas fa-ellipsis-h h-4 w-4"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
}
|
|
|
|
export default LogList;
|