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 通过
2026-08-22 13:29:51 +08:00
parent 251fe86527
commit e1f176429b
15 changed files with 1286 additions and 1439 deletions
@@ -1,140 +1,10 @@
 /**
 * AKSRT Comment Tools
 *
- * 评论工具栏样式：表情、代码、图片上传、快捷回复。
- * 所有选择器均带 .comment- 或 .aksrt-comment- 命名空间。
+ * 评论内容中的代码块样式。工具栏（表情/代码/图片/快捷回复）的 UI
+ * 由 assets/css/frontend/comments/shell.css 按 zibll 选择器提供。
 */

-/* ========== 评论工具栏 ========== */
-.comment-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 8px;
-  margin-bottom: 8px;
-  background: var(--surface-secondary, #f8f9fa);
-  border: 1px solid var(--color-line, #e8e8e8);
-  border-radius: 8px;
-}
-
-.comment-toolbar__btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--text-secondary, #666);
-  font-size: 14px;
-  cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-
-.comment-toolbar__btn:hover {
-  background: var(--color-primary-soft, rgba(240, 68, 148, 0.08));
-  color: var(--color-primary);
-}
-
-.comment-toolbar__btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.comment-toolbar__separator {
-  width: 1px;
-  height: 20px;
-  margin: 0 4px;
-  background: var(--color-line, #e8e8e8);
-}
-
-/* Server-side toolbar gating (comment_smilie / comment_code / comment_img):
-   the .comment-toolbar__btn display rule outranks the UA [hidden] rule, so an
-   attribute-qualified selector is needed to honor the rendered hidden state. */
-.comment-toolbar__btn[hidden],
-.comment-toolbar__separator[hidden] {
-  display: none;
-}
-
-/* ========== 表情选择器 ========== */
-.comment-emoji-picker {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  z-index: 100;
-  width: 320px;
-  max-height: 240px;
-  padding: 12px;
-  background: var(--surface-page, #fff);
-  border: 1px solid var(--color-line, #e8e8e8);
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-  overflow-y: auto;
-}
-
-.comment-emoji-picker__grid {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  gap: 4px;
-}
-
-.comment-emoji-picker__item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font-size: 18px;
-  cursor: pointer;
-  transition: background-color 0.1s ease;
-}
-
-.comment-emoji-picker__item:hover {
-  background: var(--color-primary-soft, rgba(240, 68, 148, 0.08));
-}
-
-/* ========== 快捷回复 ========== */
-.comment-quick-reply {
-  padding: 8px 12px;
-  margin-top: 8px;
-  background: var(--surface-secondary, #f8f9fa);
-  border: 1px solid var(--color-line, #e8e8e8);
-  border-radius: 8px;
-}
-
-.comment-quick-reply__title {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-secondary, #666);
-}
-
-.comment-quick-reply__templates {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 6px;
-}
-
-.comment-quick-reply__template {
-  padding: 4px 10px;
-  border: 1px solid var(--color-line, #e8e8e8);
-  border-radius: 16px;
-  background: var(--surface-page, #fff);
-  font-size: 12px;
-  color: var(--text-secondary, #666);
-  cursor: pointer;
-  transition: border-color 0.15s ease, color 0.15s ease;
-}
-
-.comment-quick-reply__template:hover {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-}
-
 /* ========== 评论代码块 ========== */
 .comment-form textarea code,
 .comment-content code {