运行日志支持分页显示，修改布局
This commit is contained in:
parent
c70eca3b13
commit
9541817cf1
@ -5,6 +5,11 @@ class RunLog extends HTMLElement {
|
||||
this.logFiles = [];
|
||||
this.expandedLogs = new Set();
|
||||
this.logDir = '/log'; // 直接设置日志目录路径
|
||||
// 添加分页相关的状态变量
|
||||
this.currentPage = 1;
|
||||
this.pageSize = 10; // 每页显示10个日志文件
|
||||
this.totalPages = 1;
|
||||
this.currentLogContent = []; // 存储当前日志文件的所有内容
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
@ -35,50 +40,6 @@ class RunLog extends HTMLElement {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.log-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.log-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.log-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.log-action-button {
|
||||
background-color: transparent;
|
||||
color: #333;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.log-action-button img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.log-action-button:hover {
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.log-list {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
@ -224,16 +185,72 @@ class RunLog extends HTMLElement {
|
||||
padding: 32px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
gap: 8px;
|
||||
background-color: #f5f5f5;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.pagination-button {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #d9d9d9;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.pagination-button:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.pagination-button:disabled {
|
||||
cursor: not-allowed;
|
||||
color: #d9d9d9;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.pagination-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.log-action-button {
|
||||
padding: 6px;
|
||||
border: 1px solid #d9d9d9;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.log-action-button img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.log-action-button:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
<div class="run-log-container">
|
||||
<div class="log-header">
|
||||
<div class="log-title">运行日志</div>
|
||||
<div class="log-actions">
|
||||
<button class="log-action-button" id="refreshLog">
|
||||
<img src="assets/icons/png/refresh_b.png" alt="刷新">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="log-list" id="logList">
|
||||
<div class="no-logs">暂无日志记录</div>
|
||||
</div>
|
||||
@ -242,10 +259,7 @@ class RunLog extends HTMLElement {
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// 设置按钮事件
|
||||
this.shadowRoot.getElementById('refreshLog').addEventListener('click', () => {
|
||||
this.loadLogFileList();
|
||||
});
|
||||
// 移除顶部刷新按钮的事件监听，因为按钮已经被移除
|
||||
}
|
||||
|
||||
loadLogFileList() {
|
||||
@ -344,9 +358,19 @@ class RunLog extends HTMLElement {
|
||||
return;
|
||||
}
|
||||
|
||||
// 计算总页数
|
||||
this.totalPages = Math.ceil(this.logFiles.length / this.pageSize);
|
||||
|
||||
// 获取当前页的日志文件
|
||||
const start = (this.currentPage - 1) * this.pageSize;
|
||||
const end = start + this.pageSize;
|
||||
const currentPageFiles = this.logFiles.slice(start, end);
|
||||
|
||||
// 清空列表
|
||||
logListElement.innerHTML = '';
|
||||
|
||||
this.logFiles.forEach(logFile => {
|
||||
// 渲染当前页的日志文件
|
||||
currentPageFiles.forEach(logFile => {
|
||||
const logItemElement = document.createElement('div');
|
||||
logItemElement.className = 'log-item';
|
||||
logItemElement.dataset.path = logFile.path;
|
||||
@ -356,7 +380,6 @@ class RunLog extends HTMLElement {
|
||||
logItemElement.classList.add('expanded');
|
||||
}
|
||||
|
||||
// 更新按钮样式，使用图标替代文本
|
||||
const iconSrc = isExpanded ? 'assets/icons/png/chevron-up_b.png' : 'assets/icons/png/chevron-down_b.png';
|
||||
const iconAlt = isExpanded ? '收起' : '展开';
|
||||
|
||||
@ -373,7 +396,6 @@ class RunLog extends HTMLElement {
|
||||
<div class="log-item-content"></div>
|
||||
`;
|
||||
|
||||
// 添加点击事件以展开/折叠日志内容
|
||||
const toggleBtn = logItemElement.querySelector('.log-item-toggle');
|
||||
const toggleImg = toggleBtn.querySelector('img');
|
||||
const content = logItemElement.querySelector('.log-item-content');
|
||||
@ -382,14 +404,12 @@ class RunLog extends HTMLElement {
|
||||
const isExpanded = logItemElement.classList.contains('expanded');
|
||||
|
||||
if (isExpanded) {
|
||||
// 收起日志内容
|
||||
logItemElement.classList.remove('expanded');
|
||||
this.expandedLogs.delete(logFile.path);
|
||||
content.innerHTML = ''; // 清空内容，释放资源
|
||||
content.innerHTML = '';
|
||||
toggleImg.src = 'assets/icons/png/chevron-down_b.png';
|
||||
toggleImg.alt = '展开';
|
||||
} else {
|
||||
// 展开日志内容，读取文件
|
||||
logItemElement.classList.add('expanded');
|
||||
this.expandedLogs.add(logFile.path);
|
||||
this.loadLogContent(logFile.path, content);
|
||||
@ -398,21 +418,63 @@ class RunLog extends HTMLElement {
|
||||
}
|
||||
});
|
||||
|
||||
// 如果已展开，则加载内容
|
||||
if (isExpanded) {
|
||||
this.loadLogContent(logFile.path, content);
|
||||
}
|
||||
|
||||
logListElement.appendChild(logItemElement);
|
||||
});
|
||||
|
||||
// 添加分页控制器和刷新按钮
|
||||
const paginationHtml = `
|
||||
<div class="pagination">
|
||||
<button class="pagination-button" id="prevPage" ${this.currentPage === 1 ? 'disabled' : ''}>
|
||||
上一页
|
||||
</button>
|
||||
<span class="pagination-info">
|
||||
第 ${this.currentPage} 页 / 共 ${this.totalPages} 页
|
||||
</span>
|
||||
<button class="pagination-button" id="nextPage" ${this.currentPage === this.totalPages ? 'disabled' : ''}>
|
||||
下一页
|
||||
</button>
|
||||
<div class="pagination-actions">
|
||||
<button class="log-action-button" id="refreshLog" title="刷新">
|
||||
<img src="assets/icons/png/refresh_b.png" alt="刷新">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
logListElement.insertAdjacentHTML('beforeend', paginationHtml);
|
||||
|
||||
// 添加分页按钮事件监听
|
||||
const prevButton = logListElement.querySelector('#prevPage');
|
||||
const nextButton = logListElement.querySelector('#nextPage');
|
||||
const refreshButton = logListElement.querySelector('#refreshLog');
|
||||
|
||||
prevButton.addEventListener('click', () => {
|
||||
if (this.currentPage > 1) {
|
||||
this.currentPage--;
|
||||
this.renderLogList();
|
||||
}
|
||||
});
|
||||
|
||||
nextButton.addEventListener('click', () => {
|
||||
if (this.currentPage < this.totalPages) {
|
||||
this.currentPage++;
|
||||
this.renderLogList();
|
||||
}
|
||||
});
|
||||
|
||||
refreshButton.addEventListener('click', () => {
|
||||
this.loadLogFileList();
|
||||
});
|
||||
}
|
||||
|
||||
loadLogContent(logPath, contentElement) {
|
||||
contentElement.innerHTML = '<div style="padding: 8px;">加载中...</div>';
|
||||
|
||||
// 模拟从文件读取内容
|
||||
this.fetchLogContent(logPath).then(content => {
|
||||
// 构建不含空白的HTML结构
|
||||
let html = '<div class="log-filters">';
|
||||
html += '<div class="log-filter active" data-level="all">全部</div>';
|
||||
html += '<div class="log-filter" data-level="info">信息</div>';
|
||||
@ -423,11 +485,9 @@ class RunLog extends HTMLElement {
|
||||
if (!content || content.length === 0) {
|
||||
html += '<div style="padding: 8px;">日志为空</div>';
|
||||
} else {
|
||||
// 解析日志内容并应用样式
|
||||
content.forEach(line => {
|
||||
let className = 'log-message';
|
||||
|
||||
// 根据日志级别添加相应的类
|
||||
if (line.includes('[INFO]')) {
|
||||
className += ' info';
|
||||
} else if (line.includes('[WARNING]')) {
|
||||
@ -447,9 +507,7 @@ class RunLog extends HTMLElement {
|
||||
const filterElements = contentElement.querySelectorAll('.log-filter');
|
||||
filterElements.forEach(filter => {
|
||||
filter.addEventListener('click', () => {
|
||||
// 移除所有活动状态
|
||||
filterElements.forEach(f => f.classList.remove('active'));
|
||||
// 添加活动状态到当前过滤器
|
||||
filter.classList.add('active');
|
||||
|
||||
const level = filter.getAttribute('data-level');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user