diff --git a/Release/database/XNSim.db b/Release/database/XNSim.db index a1da5ef..55db87a 100644 Binary files a/Release/database/XNSim.db and b/Release/database/XNSim.db differ diff --git a/XNSimHtml/components/update-history.js b/XNSimHtml/components/update-history.js index 5048140..baf289a 100644 --- a/XNSimHtml/components/update-history.js +++ b/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.accessLevel = 0; // 默认权限级别 + this.pageSize = 10; + this.totalPages = 1; } connectedCallback() { @@ -83,83 +84,55 @@ class UpdateHistory extends HTMLElement { return; } - // 计算总页数 - const totalPages = Math.ceil(this.versions.length / this.itemsPerPage); + this.totalPages = Math.ceil(this.versions.length / this.pageSize); + const startIndex = (this.currentPage - 1) * this.pageSize; + const endIndex = Math.min(startIndex + this.pageSize, this.versions.length); + const currentPageVersions = this.versions.slice(startIndex, endIndex); - // 确保当前页在有效范围内 - if (this.currentPage < 1) this.currentPage = 1; - if (this.currentPage > totalPages) this.currentPage = totalPages; - - // 计算当前页显示的记录 - 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 = '
'; - - currentPageItems.forEach(version => { - const hasNote = Boolean(version.note); - - html += ` -
-
-
+ let html = ` +
+ ${currentPageVersions.map(version => ` +
+
v${version.verNum} ${version.title} ${version.date} ${version.time} 作者: ${version.author || '未知用户'}
+ ${version.note ? ` + + ` : ''}
- ${hasNote ? ` - + ${version.note ? ` +
${version.note}
` : ''}
- ${hasNote ? ` -
${version.note}
- ` : ''} -
- `; - }); - - html += '
'; - - // 添加分页控制 - if (totalPages > 1) { - html += ` - - `; - } - + `).join('')} +
+ + `; + 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 = '
加载失败,请稍后重试
'; @@ -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; + }
@@ -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); \ No newline at end of file