feat(comments): 评论区按 Zibll 1:1 全量复刻

- 评论项/表单/工具栏/筛选/分页/空状态 DOM 全部替换为 zibll 原始类名
  (li.comment、comt-main、comt-meta、list-inline、dropup 工具栏、
  theme-pagination/pagenav、post_ajax_loader 骨架等)
- 移植 zibll main.css L9412–9751 桌面 + 移动端评论样式,
  缺失基础组件(title-theme/dropdown-menu/line-form/tab-nav-theme 等)
  以 #comments 作用域补齐
- 删除全部 aksrt-comment__* 旧类名与旧样式,无兼容层
- JS 选择器对齐 zibll DOM:片段整块替换 #postcomments、骨架加载、
  跳页输入、prepend 插入、addComment onclick 剥离,
  移除 WP comment-reply enqueue 避免双 moveForm
- 表情资源替换为 zibll 全套 gif(内容逐字节一致,git 无差异)
- REST 后端 (CommentActions) 不变

验证:php -l 全部通过;5 个改动 JS 语法校验通过;
node --test tests/widget-system/post-visual-contract.test.cjs 12/12 通过
This commit is contained in:
kate522 committed 2026-08-22 13:29:51 +08:00
1 parent 251fe86527
commit e1f176429b
15 files changed
+1286 -1439

No files matched your search

+23 -25
View File
@@ -5,11 +5,11 @@
* Edit uses moveForm (#respond) via comment-move-form.js — not inline textarea.
* Submit owned by assets/js/core/comments.js (single submit contract).
*
* Markup (aksrt_comment_callback):
* li.aksrt-comment[data-comment-id]
* .comment-header .aksrt-comment__like[data-comment-action=like]
* Markup (aksrt_comment_callback, zibll DOM):
* li.comment#comment-{id}
* .comment-header .action-comment-like[data-comment-action=like] > count
* .comment-content#comment-content-{id}
* .comt-meta [data-comment-action=pin|approve|hold|spam|delete]
* .comt-meta [data-comment-action=pin|approve|hold|delete]
*
* @package AKSRT
*/
@@ -19,8 +19,8 @@
if (!window.aksrtData) return;
var COMMENT_SELECTOR = '.aksrt-comment, .comment';
var CONTENT_SELECTOR = '.aksrt-comment__text, .comment-content';
var COMMENT_SELECTOR = 'li.comment';
var CONTENT_SELECTOR = '.comment-content';
var REST_BASE = (aksrtData.siteUrl || '').replace(/\/$/, '') + '/wp-json/aksrt/v1';
var REST_NONCE = aksrtData.restNonce || '';
@@ -48,6 +48,10 @@
var commentEl = actionBtn.closest(COMMENT_SELECTOR);
if (!commentEl) return;
// 操作后收起 ⋮ 菜单
var openMenu = actionBtn.closest('span.dropdown.open');
if (openMenu) openMenu.classList.remove('open');
var commentId = getCommentId(commentEl);
if (!commentId) return;
@@ -75,14 +79,9 @@
var count = (result.data && result.data.count) || 0;
btn.setAttribute('data-active', active ? '1' : '0');
btn.setAttribute('aria-pressed', active ? 'true' : 'false');
btn.classList.toggle('is-active', active);
var icon = btn.querySelector('i');
if (icon) { icon.classList.toggle('fa', active); icon.classList.toggle('fa', !active); }
var countEl = btn.querySelector('.aksrt-comment__like-count');
if (countEl) {
countEl.textContent = String(count);
if (count > 0) { countEl.removeAttribute('hidden'); } else { countEl.setAttribute('hidden', ''); }
}
btn.classList.toggle('actived', active);
var countEl = btn.querySelector('count');
if (countEl) countEl.textContent = String(count);
})
.catch(function () { notyf('网络错误', 'danger'); })
.finally(function () { btn.dataset.busy = ''; });
@@ -103,7 +102,7 @@
});
setTimeout(function () {
commentEl.remove();
var countEl = document.querySelector('.comments-count');
var countEl = document.querySelector('#comments .title-theme small');
if (countEl) {
var m = (countEl.textContent || '').match(/(\d+)/);
if (m) {
@@ -134,8 +133,7 @@
if (!result.success) { notyf((result.data && result.data.message) || result.message || '操作失败', 'danger'); return; }
var pinned = !!(result.data && result.data.pinned);
btn.setAttribute('data-pinned', pinned ? '1' : '0');
btn.innerHTML = '<i class="fa fas fa-thumbtack" aria-hidden="true"></i> ' + (pinned ? '取消置顶' : '置顶');
commentEl.classList.toggle('aksrt-comment--pinned', pinned);
btn.innerHTML = '<i class="fa fa-thumbtack mr10 fa-fw" aria-hidden="true"></i>' + (pinned ? '取消置顶' : '设置置顶');
syncPinnedBadge(commentEl, pinned);
notyf(result.message || (pinned ? '评论已置顶。' : '已取消置顶。'), 'success');
})
@@ -143,15 +141,15 @@
}
function syncPinnedBadge(commentEl, pinned) {
var header = commentEl.querySelector('.aksrt-comment__header, .comment-header');
if (!header) return;
var badge = header.querySelector('.aksrt-comment__badge--pinned');
var name = commentEl.querySelector('.comment-header name');
if (!name) return;
var badge = name.querySelector('badge.badge-topping');
if (pinned && !badge) {
badge = document.createElement('span');
badge.className = 'aksrt-comment__badge aksrt-comment__badge--pinned';
badge.innerHTML = '<i class="fa fas fa-thumbtack" aria-hidden="true"></i> 置顶';
var time = header.querySelector('.aksrt-comment__time');
header.insertBefore(badge, time || null);
badge = document.createElement('badge');
badge.className = 'badge-topping jb-blue mr6 flex0';
badge.title = '置顶评论';
badge.innerHTML = '<i class="fa fa-thumbtack" aria-hidden="true"></i>';
name.insertBefore(badge, name.firstChild);
} else if (!pinned && badge) {
badge.remove();
}