From 9541817cf1cdc8564aa0c87ab1bc273e1d4b9703 Mon Sep 17 00:00:00 2001 From: jinchao <383321154@qq.com> Date: Wed, 7 May 2025 14:49:02 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BF=90=E8=A1=8C=E6=97=A5=E5=BF=97=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E5=88=86=E9=A1=B5=E6=98=BE=E7=A4=BA=EF=BC=8C=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- XNSimHtml/components/run-log.js | 196 +++++++++++++++++++++----------- 1 file changed, 127 insertions(+), 69 deletions(-) diff --git a/XNSimHtml/components/run-log.js b/XNSimHtml/components/run-log.js index ab5c6da..ec7be38 100644 --- a/XNSimHtml/components/run-log.js +++ b/XNSimHtml/components/run-log.js @@ -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; + }
-
-
运行日志
-
- -
-
暂无日志记录
@@ -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 {
`; - // 添加点击事件以展开/折叠日志内容 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 = ` + + `; + + 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 = '
加载中...
'; - // 模拟从文件读取内容 this.fetchLogContent(logPath).then(content => { - // 构建不含空白的HTML结构 let html = '
'; html += '
全部
'; html += '
信息
'; @@ -423,11 +485,9 @@ class RunLog extends HTMLElement { if (!content || content.length === 0) { html += '
日志为空
'; } 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');