72 lines
6.7 KiB
Markdown
72 lines
6.7 KiB
Markdown
# 评论区 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 中亦为独立模块） |