';
-
- currentPageItems.forEach(version => {
- const hasNote = Boolean(version.note);
-
- html += `
-
-
+
+ `;
+
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