优化流式传输&fix bugs

This commit is contained in:
XOF
2025-11-25 16:58:15 +08:00
parent e026d8f324
commit ad1e6180cf
18 changed files with 1135 additions and 156 deletions

View File

@@ -5,17 +5,19 @@ 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';
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,
@@ -26,33 +28,106 @@ class LogsPage {
status_codes: new Set(),
},
selectedLogIds: new Set(),
currentView: 'error',
};
this.elements = {
tableBody: document.getElementById('logs-table-body'),
selectedCount: document.querySelector('.flex-1.text-sm span.font-semibold:nth-child(1)'),
totalCount: document.querySelector('.flex-1.text-sm span:last-child'),
pageSizeSelect: document.querySelector('[data-component="custom-select-v2"] select'),
pageInfo: document.querySelector('.flex.w-\\[100px\\]'),
paginationBtns: document.querySelectorAll('[data-pagination-controls] button'),
selectAllCheckbox: document.querySelector('thead .table-head-cell input[type="checkbox"]'),
searchInput: document.getElementById('log-search-input'),
errorTypeFilterBtn: document.getElementById('filter-error-type-btn'),
errorCodeFilterBtn: document.getElementById('filter-error-code-btn'),
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'),
};
this.initialized = !!this.elements.tableBody;
this.initialized = !!this.elements.contentContainer;
if (this.initialized) {
this.logList = new LogList(this.elements.tableBody, dataStore);
const selectContainer = document.querySelector('[data-component="custom-select-v2"]');
if (selectContainer) { new CustomSelectV2(selectContainer); }
this.logList = null;
this.systemLogTerminal = null;
this.debouncedLoadAndRender = debounce(() => this.loadAndRenderLogs(), 300);
}
}
async init() {
if (!this.initialized) return;
this._initPermanentEventListeners();
await this.loadGroupsOnce();
this.state.currentView = null;
this.switchToView('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;
}
this.state.currentView = viewName;
this.elements.contentContainer.innerHTML = '';
if (viewName === 'error') {
this.elements.errorFilters.classList.remove('hidden');
this.elements.systemControls.classList.add('hidden');
const template = this.elements.errorTemplate.content.cloneNode(true);
this.elements.contentContainer.appendChild(template);
requestAnimationFrame(() => {
this._initErrorLogView();
});
} else if (viewName === 'system') {
this.elements.errorFilters.classList.add('hidden');
this.elements.systemControls.classList.remove('hidden');
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.logList = new LogList(this.elements.tableBody, dataStore);
const selectContainer = document.querySelector('[data-component="custom-select-v2"]');
if (selectContainer) { new CustomSelectV2(selectContainer); }
this.initFilterPopovers();
this.initEventListeners();
await this.loadGroupsOnce();
await this.loadAndRenderLogs();
this.loadAndRenderLogs();
}
_initSystemLogView() {
this.systemLogTerminal = new SystemLogTerminal(
this.elements.contentContainer,
this.elements.systemControls
);
Swal.fire({
title: '实时系统日志',
text: '您即将连接到实时日志流。这会与服务器建立一个持续的连接。',
icon: 'info',
confirmButtonText: '我明白了,开始连接',
showCancelButton: true,
cancelButtonText: '取消',
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 = [