refactor(widget): 将评论数统计移至评论表单下方
将评论总数统计从头部区域移动到主评论表单下方、评论列表上方,使布局更符合逻辑流。 同时更新相关选择器以正确获取评论数元素。
This commit is contained in:
@@ -301,7 +301,7 @@ export class CWDComments {
|
|||||||
existingSuccess.remove();
|
existingSuccess.remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 创建头部统计
|
// 创建头部点赞区域
|
||||||
let header = this.mountPoint.querySelector('.cwd-comments-header');
|
let header = this.mountPoint.querySelector('.cwd-comments-header');
|
||||||
if (!header) {
|
if (!header) {
|
||||||
header = document.createElement('div');
|
header = document.createElement('div');
|
||||||
@@ -318,16 +318,9 @@ export class CWDComments {
|
|||||||
<div>已有 <span class="cwd-like-count">0</span>人喜欢~ </div>
|
<div>已有 <span class="cwd-like-count">0</span>人喜欢~ </div>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="cwd-comments-count">
|
|
||||||
共 <span class="cwd-comments-count-number">0</span> 条评论
|
|
||||||
</h3>
|
|
||||||
`;
|
`;
|
||||||
this.mountPoint.appendChild(header);
|
this.mountPoint.appendChild(header);
|
||||||
}
|
}
|
||||||
const countEl = header.querySelector('.cwd-comments-count-number');
|
|
||||||
if (countEl) {
|
|
||||||
countEl.textContent = state.pagination.totalCount;
|
|
||||||
}
|
|
||||||
|
|
||||||
this._initLikeButton(header);
|
this._initLikeButton(header);
|
||||||
|
|
||||||
@@ -350,6 +343,25 @@ export class CWDComments {
|
|||||||
this.commentForm.render();
|
this.commentForm.render();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 创建评论数统计(放在主评论表单下方、评论列表上方)
|
||||||
|
let countHeading = this.mountPoint.querySelector('.cwd-comments-count');
|
||||||
|
if (!countHeading) {
|
||||||
|
countHeading = document.createElement('h3');
|
||||||
|
countHeading.className = 'cwd-comments-count';
|
||||||
|
countHeading.innerHTML = `
|
||||||
|
共 <span class="cwd-comments-count-number">0</span> 条评论
|
||||||
|
`;
|
||||||
|
if (this.formContainer && this.formContainer.parentNode === this.mountPoint) {
|
||||||
|
this.mountPoint.insertBefore(countHeading, this.formContainer.nextSibling);
|
||||||
|
} else {
|
||||||
|
this.mountPoint.appendChild(countHeading);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const countEl = this.mountPoint.querySelector('.cwd-comments-count-number');
|
||||||
|
if (countEl) {
|
||||||
|
countEl.textContent = state.pagination.totalCount;
|
||||||
|
}
|
||||||
|
|
||||||
// 创建评论列表
|
// 创建评论列表
|
||||||
if (!this.commentList) {
|
if (!this.commentList) {
|
||||||
const listContainer = document.createElement('div');
|
const listContainer = document.createElement('div');
|
||||||
@@ -460,9 +472,9 @@ export class CWDComments {
|
|||||||
existingSuccess.remove();
|
existingSuccess.remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 更新头部统计
|
// 更新点赞和评论数统计
|
||||||
const header = this.mountPoint?.querySelector('.cwd-comments-header');
|
const header = this.mountPoint?.querySelector('.cwd-comments-header');
|
||||||
const countEl = header?.querySelector('.cwd-comments-count-number');
|
const countEl = this.mountPoint?.querySelector('.cwd-comments-count-number');
|
||||||
if (countEl) {
|
if (countEl) {
|
||||||
countEl.textContent = state.pagination.totalCount;
|
countEl.textContent = state.pagination.totalCount;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user