评论区 Zibll 1:1 全量复刻计划

目标：将 AKSRT 评论区渲染层（DOM、类名、布局、CSS、交互行为）替换为与 Zibll 完全一致，不保留旧类名、不写兼容/迁移代码。现有 REST 后端（src/Core/CommentActions.php）保留，仅前端选择器随之更新。

参考源（Zibll 侧，只读对照）

zibll/template/comments.php（整体结构 L21–210）
zibll/inc/functions/zib-comments-list.php（zib_comments_list 回调 L14、分页 L569–678）
zibll/inc/functions/functions.php L1775 zib_get_input_expand_but()（表情/代码/图片/链接/快捷回复工具栏）
zibll/css/main.css L9411–9660（桌面端）+ L12470–12560（移动端）
zibll/js/comment.js（交互行为参照）
zibll/img/smilies/*.gif（约 100 个表情资源）

改动清单

1. 评论列表项 DOM — `inc/helpers/comments/item.php` 重写

输出 Zibll 原始结构（去掉所有 aksrt-comment__* 类）：

li.comment#comment-{id}（用 WP comment_class()，含 depth-N）
└ ul.list-inline > li.comt-main#div-comment-{id}
   ├ div.comment-header.mb10 > div.author-box.flex.ac
   │   ├ span.avatar-img.comt-avatar > img.avatar（含嵌套 ul.avatar-icontag 徽章位）
   │   ├ <name>（置顶 badge.badge-topping.jb-blue + a.text-ellipsis.font-bold / b.mr6 + 作者 badg）
   │   └ a.action.action-comment-like.muted-2-color.flex0.ml10（svg like + <count>）
   └ div.comment-footer
       ├ div.mb10.comment-content#comment-content-{id}
       └ div.comt-meta.muted-2-color
           ├ span.comt-author（time-ago，title=完整时间）· IP 属地 badg · span @父级作者
           ├ span.badge-approve > span.badg.c-red.badg-sm「待审核」
           ├ span.reply-link > a.comment-reply-link（data-commentid / data-postid）
           └ span.dropdown.drop-fixed-sm.padding-6（menu_2 ⋮ 菜单：置顶/编辑/通过/删除，wp-ajax-submit 类）
子级：li.comment > ul.children > li.comment…

保留 Zibll 的自定义语义标签 <name> <badge> <text> <count> 以确保 CSS 选择器 1:1 命中。置顶/点赞/神评等数据仍取自现有 inc/helpers/comments/actions.php。

2. 评论区外壳与表单 — `inc/helpers/aksrt-comments.php` + `comments/form-parts.php` 重写

外壳：div.theme-box#comments > div.box-body.notop > div.title-theme（+ <small>共N条</small>/抢沙发）> div.no_webshot.main-bg.theme-box.box-body.radius8.main-shadow
登录门槛：div.comment-signarea.text-center > h3 + 登录/注册按钮 + 社交登录（复用现有 oauth 输出，仅换外壳类名）
移动端假输入：div.flex.ac.jsb.virtual-input（fixed-input="#respond"）
表单 div#respond.mobile-fixed > form#commentform：
- div.flex.ac > div.comt-title.text-center.flex0.mr10（comt-avatar 60px + 昵称）+ div.comt-box.grow1
- div.action-text.mb10.em09.muted-2-color（回复@xxx）
- textarea.form-control.grin#comment（Ctrl+Enter 提交）
- div.comt-ctrl.relative：comt-tips（隐藏字段+nonce）、comt-tips-right（a.but.c-red#cancel-comment-reply-link 取消 + button.but.c-blue.pw-1em.comment-send#submit）、comt-tips-left（span.dropup#comment-user-info 游客姓名/邮箱/网址 line-form 下拉 + 工具栏）
工具栏按 Zibll zib_get_input_expand_but() 结构：span.dropup.relative > a.but.btn-input-expand.input-{smilie|code|image|link|quick}.mr6 + div.dropdown-menu（表情面板 div.dropdown-smilie.scroll-y.mini-scrollbar > a.smilie-icon[data-smilie] > img），按现有设置项开关
列表：div#postcomments > ol.commentlist.list-unstyled，过滤器 div.comment-filter.tab-nav-theme.flex.ac.jsb（最新/最热 + 只看作者）放在 commentlist 之前、#postcomments 内
分页：AJAX 模式 div.theme-pagination.lazyload.ias-pagenav.pagenav > div.order-ajax-next > a.ias-btn 加载更多；数字模式 div.pagenav + paginate_links（>8 页带 a.pag-jump 跳页 input）
空状态：zib_get_null() 同款 img/null.svg 结构

3. CSS 全量移植 — `assets/css/frontend/comments/`

把 zibll/css/main.css L9411–9660 与移动端 L12470–12560 规则逐条移植为新文件（按现有 shell/list/form/mobile 拆分或单文件 zibll-comment.css），选择器保持原样（#comments .comt-title、#postcomments .commentlist > .comment > .list-inline .comment-footer {margin-left:65px; margin-top:-25px}、.children {margin-left:86px}、.children .children {margin-left:23px}、.smilie-icon {width:30px!important} 等）
依赖的通用变量（--main-shadow/--main-border-color/--main-radius/--main-bg-color）与基础类（.avatar-img、.but、.badg、.line-form、.pagenav）核对 AKSRT 是否已有；缺的补进对应基础样式文件，值与 Zibll 一致
删除现有 comments/shell.css、comments/mobile-item.css、comment-tools.css 中所有旧评论样式与 --aksrt-comment-* 变量，无兼容层
保持 enqueue 结构（src/Core/ScriptsPart1b.php / ScriptsPart1c.php）指向新文件

4. JS 选择器对齐

assets/js/core/comments.js、comment-ajax.js、comment-tools.js、comment-fixed-input.js、comment-move-form.js：全部选择器改为 Zibll 目标（.commentlist、.comment-reply-link、#div-comment-{id}、.comment-send、#respond.mobile-fixed、[fixed-input] 等），提交后的局部插入逻辑改为 Zibll 同款（prepend 到 .children 或 .commentlist，slideDown，15s 冷却倒计时按钮禁用）
REST 端点与 nonce 机制不变；AJAX 分页/排序沿用现有 fragment 管线，仅换容器选择器

5. 资源（按用户确认）

删除 assets/img/smilies/ 中现有全部旧表情包资源，从 zibll/img/smilies/ 拷贝全套 gif 替换；content.php 的 [g=] 转换与 data-smilie 表情面板统一指向该目录的 Zibll 文件名列表
空状态 null.svg、点赞/置顶/菜单等 svg 图标按 Zibll 形状补齐到 assets/img/

6. 清理与验证

全库 grep aksrt-comment__、--aksrt-comment-、.comments-area（评论语境）确保零残留（用户中心页的评论条目不在本次范围）
检查 tests/widget-system/post-visual-contract.test.cjs 是否引用旧评论类名，如有则同步更新契约
php -l 校验全部改动 PHP 文件；运行 node --test tests/widget-system/post-visual-contract.test.cjs
桌面+移动端断点目测核对 Zibll 截图/本地对照环境（tests/visual/README.md）

不做的事

不写任何双路渲染、旧类名兼容或数据迁移代码
不动 src/Core/CommentActions.php REST 逻辑、管理后台 Vue 设置页（除非契约字段需对齐）
不动论坛/商铺评论（Zibll 中亦为独立模块）

6.7 KiB Raw Blame History Unescape Escape