修复了更新记录无法分页显示的问题

XNSimHtml/components/update-history.js

@@ -3,9 +3,10 @@ class UpdateHistory extends HTMLElement {
         super();
         this.attachShadow({ mode: 'open' });
         this.versions = [];
+        this.accessLevel = 0;
         this.currentPage = 1;
-        this.itemsPerPage = 10; // 每页显示的记录数
+        this.pageSize = 10;
-        this.accessLevel = 0; // 默认权限级别
+        this.totalPages = 1;
     }
 
     connectedCallback() {
@@ -83,83 +84,55 @@ class UpdateHistory extends HTMLElement {
             return;
         }
         
-        // 计算总页数
+        this.totalPages = Math.ceil(this.versions.length / this.pageSize);
-        const totalPages = Math.ceil(this.versions.length / this.itemsPerPage);
+        const startIndex = (this.currentPage - 1) * this.pageSize;
+        const endIndex = Math.min(startIndex + this.pageSize, this.versions.length);
+        const currentPageVersions = this.versions.slice(startIndex, endIndex);
         
-        // 确保当前页在有效范围内
+        let html = `
-        if (this.currentPage < 1) this.currentPage = 1;
+            <div class="version-list">
-        if (this.currentPage > totalPages) this.currentPage = totalPages;
+                ${currentPageVersions.map(version => `
-        
-        // 计算当前页显示的记录
-        const startIndex = (this.currentPage - 1) * this.itemsPerPage;
-        const endIndex = Math.min(startIndex + this.itemsPerPage, this.versions.length);
-        const currentPageItems = this.versions.slice(startIndex, endIndex);
-        
-        let html = '<div class="version-timeline">';
-        
-        currentPageItems.forEach(version => {
-            const hasNote = Boolean(version.note);
-            
-            html += `
                     <div class="version-item" data-version="${version.verNum}">
                         <div class="version-header">
-                        <div class="version-header-left">
                             <div class="version-info">
                                 <span class="version-number">v${version.verNum}</span>
                                 <span class="version-title">${version.title}</span>
                                 <span class="version-date">${version.date} ${version.time}</span>
                                 <span class="version-author">作者: ${version.author || '未知用户'}</span>
                             </div>
-                        </div>
+                            ${version.note ? `
-                        ${hasNote ? `
                                 <button class="expand-btn" aria-label="展开详情">
                                     <img src="assets/icons/png/chevron-down_b.png" alt="展开">
                                 </button>
                             ` : ''}
                         </div>
-                    ${hasNote ? `
+                        ${version.note ? `
                             <div class="version-description">${version.note}</div>
                         ` : ''}
                     </div>
-            `;
+                `).join('')}
-        });
+            </div>
-        
-        html += '</div>';
-        
-        // 添加分页控制
-        if (totalPages > 1) {
-            html += `
             <div class="pagination">
-                    <div class="pagination-info">第 ${this.currentPage} 页，共 ${totalPages} 页</div>
+                <button class="pagination-btn" id="prevPage" ${this.currentPage === 1 ? 'disabled' : ''}>
-                    <div class="pagination-controls">
+                    上一页
-                        <button class="page-btn" data-action="first" ${this.currentPage === 1 ? 'disabled' : ''}>
-                            <img src="assets/icons/png/chevron-dleft_b.png" alt="首页">
                 </button>
-                        <button class="page-btn" data-action="prev" ${this.currentPage === 1 ? 'disabled' : ''}>
+                <span class="page-info">第 ${this.currentPage} 页 / 共 ${this.totalPages} 页</span>
-                            <img src="assets/icons/png/chevron-left_b.png" alt="上一页">
+                <button class="pagination-btn" id="nextPage" ${this.currentPage === this.totalPages ? 'disabled' : ''}>
+                    下一页
                 </button>
-                        <span class="page-indicator">${this.currentPage} / ${totalPages}</span>
-                        <button class="page-btn" data-action="next" ${this.currentPage === totalPages ? 'disabled' : ''}>
-                            <img src="assets/icons/png/chevron-right_b.png" alt="下一页">
-                        </button>
-                        <button class="page-btn" data-action="last" ${this.currentPage === totalPages ? 'disabled' : ''}>
-                            <img src="assets/icons/png/chevron-dright_b.png" alt="末页">
-                        </button>
-                    </div>
             </div>
         `;
-        }
 
         contentContainer.innerHTML = html;
 
         // 添加展开/收起事件
         this.addExpandListeners();
         
-        // 添加分页事件
-        this.addPaginationListeners();
-        
         // 更新添加按钮显示状态
         this.updateAddButton();
+        
+        // 添加分页按钮事件监听
+        this.addPaginationListeners();
     }
     
     addExpandListeners() {
@@ -194,38 +167,6 @@ class UpdateHistory extends HTMLElement {
         });
     }
     
-    addPaginationListeners() {
-        const pageButtons = this.shadowRoot.querySelectorAll('.page-btn');
-        
-        pageButtons.forEach(button => {
-            button.addEventListener('click', () => {
-                const action = button.getAttribute('data-action');
-                const totalPages = Math.ceil(this.versions.length / this.itemsPerPage);
-                
-                switch (action) {
-                    case 'first':
-                        this.currentPage = 1;
-                        break;
-                    case 'prev':
-                        if (this.currentPage > 1) {
-                            this.currentPage--;
-                        }
-                        break;
-                    case 'next':
-                        if (this.currentPage < totalPages) {
-                            this.currentPage++;
-                        }
-                        break;
-                    case 'last':
-                        this.currentPage = totalPages;
-                        break;
-                }
-                
-                this.renderVersions();
-            });
-        });
-    }
-    
     showError() {
         const contentContainer = this.shadowRoot.querySelector('#content');
         contentContainer.innerHTML = '<div class="error">加载失败，请稍后重试</div>';
@@ -245,15 +186,17 @@ class UpdateHistory extends HTMLElement {
                     background: white;
                     border-radius: 12px;
                     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-                    padding: 30px;
+                    padding: 25px;
                     position: relative;
+                    overflow: visible;
+                    min-height: 200px;
                 }
                 
                 .title-container {
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
-                    margin-bottom: 30px;
+                    margin-bottom: 25px;
                     padding-bottom: 15px;
                     border-bottom: 2px solid #eee;
                 }
@@ -292,14 +235,19 @@ class UpdateHistory extends HTMLElement {
                     height: 16px;
                 }
                 
-                .version-timeline {
+                .version-list {
                     position: relative;
                     padding-left: 30px;
+                    margin-bottom: 25px;
                 }
                 
                 .version-item {
                     position: relative;
-                    margin-bottom: 40px;
+                    margin-bottom: 30px;
+                }
+                
+                .version-item:last-child {
+                    margin-bottom: 0;
                 }
                 
                 .version-item::before {
@@ -320,7 +268,7 @@ class UpdateHistory extends HTMLElement {
                     position: absolute;
                     left: -23px;
                     top: 20px;
-                    bottom: -40px;
+                    bottom: -30px;
                     width: 2px;
                     background: #e2e8f0;
                 }
@@ -336,11 +284,6 @@ class UpdateHistory extends HTMLElement {
                     margin-bottom: 10px;
                 }
                 
-                .version-header-left {
-                    display: flex;
-                    align-items: center;
-                }
-                
                 .version-info {
                     display: flex;
                     align-items: center;
@@ -435,60 +378,6 @@ class UpdateHistory extends HTMLElement {
                     color: #e53e3e;
                 }
                 
-                /* 分页样式 */
-                .pagination {
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    margin-top: 30px;
-                    padding-top: 20px;
-                    border-top: 1px solid #eee;
-                }
-                
-                .pagination-info {
-                    color: #718096;
-                    font-size: 14px;
-                }
-                
-                .pagination-controls {
-                    display: flex;
-                    align-items: center;
-                    gap: 8px;
-                }
-                
-                .page-btn {
-                    background: none;
-                    border: 1px solid #ddd;
-                    border-radius: 4px;
-                    padding: 5px 10px;
-                    cursor: pointer;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    transition: all 0.3s;
-                }
-                
-                .page-btn:hover:not([disabled]) {
-                    background-color: #f8f9fa;
-                    border-color: #667eea;
-                }
-                
-                .page-btn:disabled {
-                    opacity: 0.5;
-                    cursor: not-allowed;
-                }
-                
-                .page-btn img {
-                    width: 16px;
-                    height: 16px;
-                }
-                
-                .page-indicator {
-                    padding: 0 10px;
-                    color: #2d3748;
-                    font-size: 14px;
-                }
-                
                 /* 对话框样式 */
                 .modal-overlay {
                     position: fixed;
@@ -613,6 +502,44 @@ class UpdateHistory extends HTMLElement {
                     opacity: 0.9;
                     transform: translateY(-1px);
                 }
+                
+                /* 分页样式 */
+                .pagination {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    margin-top: 30px;
+                    gap: 15px;
+                    padding: 15px 0;
+                }
+                
+                .pagination-btn {
+                    padding: 8px 16px;
+                    border: 1px solid #ddd;
+                    border-radius: 6px;
+                    background-color: white;
+                    color: #2d3748;
+                    cursor: pointer;
+                    transition: all 0.3s ease;
+                    min-width: 80px;
+                }
+                
+                .pagination-btn:hover:not(:disabled) {
+                    background-color: #f8f9fa;
+                    border-color: #667eea;
+                    color: #667eea;
+                }
+                
+                .pagination-btn:disabled {
+                    background-color: #f8f9fa;
+                    color: #a0aec0;
+                    cursor: not-allowed;
+                }
+                
+                .page-info {
+                    color: #4a5568;
+                    font-size: 14px;
+                }
             </style>
             
             <div class="container">
@@ -815,6 +742,30 @@ class UpdateHistory extends HTMLElement {
             alert('提交失败，请重试！');
         }
     }
+
+    // 添加分页按钮事件监听
+    addPaginationListeners() {
+        const prevButton = this.shadowRoot.getElementById('prevPage');
+        const nextButton = this.shadowRoot.getElementById('nextPage');
+
+        if (prevButton) {
+            prevButton.addEventListener('click', () => {
+                if (this.currentPage > 1) {
+                    this.currentPage--;
+                    this.renderVersions();
+                }
+            });
+        }
+
+        if (nextButton) {
+            nextButton.addEventListener('click', () => {
+                if (this.currentPage < this.totalPages) {
+                    this.currentPage++;
+                    this.renderVersions();
+                }
+            });
+        }
+    }
 }
 
 customElements.define('update-history', UpdateHistory);