80 lines
2.7 KiB
JavaScript
80 lines
2.7 KiB
JavaScript
// Filename: frontend/js/pages/logs/index.js
|
||
|
||
import { apiFetchJson } from '../../services/api.js';
|
||
import LogList from './logList.js';
|
||
|
||
class LogsPage {
|
||
constructor() {
|
||
this.state = {
|
||
logs: [],
|
||
pagination: { page: 1, pages: 1, total: 0, page_size: 20 }, // 包含 page_size
|
||
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(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;
|
||
|
||
// [假设] 由于当前响应不包含分页信息，我们基于请求和返回的数据来模拟
|
||
// TODO: 当后端API返回分页对象时，替换此处的模拟数据
|
||
this.state.pagination = {
|
||
page: this.state.filters.page,
|
||
page_size: this.state.filters.page_size,
|
||
total: responseData.data.length, // 这是一个不准确的临时值
|
||
pages: Math.ceil(responseData.data.length / this.state.filters.page_size) // 同样不准确
|
||
};
|
||
|
||
// [修改] 将分页状态传递给 render 方法
|
||
this.logList.render(this.state.logs, this.state.pagination);
|
||
|
||
} else {
|
||
console.error("API response for logs is incorrect:", responseData);
|
||
this.logList.render([], this.state.pagination);
|
||
}
|
||
} catch (error)
|
||
{
|
||
console.error("Failed to load logs:", error);
|
||
this.logList.render([], this.state.pagination);
|
||
} finally {
|
||
this.state.isLoading = false;
|
||
}
|
||
}
|
||
}
|
||
|
||
export default function() {
|
||
const page = new LogsPage();
|
||
page.init();
|
||
}
|