修复了更新记录无法分页显示的问题
This commit is contained in:
parent
9541817cf1
commit
2d1f54218f
Binary file not shown.
@ -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 = '<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">
|
||||
let html = `
|
||||
<div class="version-list">
|
||||
${currentPageVersions.map(version => `
|
||||
<div class="version-item" data-version="${version.verNum}">
|
||||
<div class="version-header">
|
||||
<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>
|
||||
${version.note ? `
|
||||
<button class="expand-btn" aria-label="展开详情">
|
||||
<img src="assets/icons/png/chevron-down_b.png" alt="展开">
|
||||
</button>
|
||||
` : ''}
|
||||
</div>
|
||||
${hasNote ? `
|
||||
<button class="expand-btn" aria-label="展开详情">
|
||||
<img src="assets/icons/png/chevron-down_b.png" alt="展开">
|
||||
</button>
|
||||
${version.note ? `
|
||||
<div class="version-description">${version.note}</div>
|
||||
` : ''}
|
||||
</div>
|
||||
${hasNote ? `
|
||||
<div class="version-description">${version.note}</div>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
html += '</div>';
|
||||
|
||||
// 添加分页控制
|
||||
if (totalPages > 1) {
|
||||
html += `
|
||||
<div class="pagination">
|
||||
<div class="pagination-info">第 ${this.currentPage} 页，共 ${totalPages} 页</div>
|
||||
<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' : ''}>
|
||||
<img src="assets/icons/png/chevron-left_b.png" alt="上一页">
|
||||
</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>
|
||||
`;
|
||||
}
|
||||
|
||||
`).join('')}
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<button class="pagination-btn" id="prevPage" ${this.currentPage === 1 ? 'disabled' : ''}>
|
||||
上一页
|
||||
</button>
|
||||
<span class="page-info">第 ${this.currentPage} 页 / 共 ${this.totalPages} 页</span>
|
||||
<button class="pagination-btn" id="nextPage" ${this.currentPage === this.totalPages ? 'disabled' : ''}>
|
||||
下一页
|
||||
</button>
|
||||
</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);
|
||||
Loading…
x
Reference in New Issue
Block a user