运行日志支持分页显示，修改布局

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;
+                }
             </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');