fix

2026-08-22 16:56:36 +08:00
parent 9375b1c30c
commit 51d65c694b
2 changed files with 137 additions and 0 deletions
@@ -0,0 +1,72 @@
+# 评论区 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 中亦为独立模块）
@@ -0,0 +1,65 @@
+# assets/vendor 全量迁移 + 全仓去 zibll 化
+
+## 目标布局（类型归位，`git mv` 保留历史）
+
+| 源 | 目标 | 说明 |
+|---|---|---|
+| `assets/vendor/fontawesome5/` | `assets/fontawesome5/` | css/ + webfonts/ 原结构，`../webfonts` 相对引用不变 |
+| `assets/vendor/zibll/css/`（22 文件） | `assets/css/` 顶层 | bootstrap/animate/swiper/main 等，无命名冲突；`main(.min).css` 的 `url(../img/playing.svg)` 迁后恰好仍指向 `assets/img`，无需改 |
+| `assets/vendor/zibll/js/**` | `assets/js/runtime/**` | **必须子目录**：assets/js 已有 14 个同名自有文件（author/sign-register/page-navs…）和一个 enlighter/ 目录 |
+| `assets/vendor/zibll/img/captcha/` | `assets/img/captcha/` | slidercaptcha.js 运行时按 `_win.uri + '/img/captcha/'` 拼接，新 uri=assets 根后自然命中 |
+| `assets/vendor/zibll/img/{medal,smilies}` | 与 `assets/img/` 哈希比对 | 相同跳过、缺失补齐；**内容不同时以当前实际渲染源为准**（medal/smilies 保现有，user_t.jpg/slider-bg.jpg 以 vendor 版覆盖，因 PHP 默认值当前渲染的是 vendor 版） |
+| `assets/vendor/zibll/img/playing.svg` 等散图 | `assets/img/` | |
+| `assets/vendor/zibll/fonts/`（孤儿 2 文件） | `assets/fonts/` | 按"全部迁移"保留 |
+| `js/libs/{DPlayer,dash.all,flv,hls,vanilla-tilt}.min.js` | **不迁移**（智能去重） | 先哈希验证与 `assets/widgets/third-party/` 字节一致（探索已确认大小一致）；loader.js paths 改指 `'../widgets/third-party/DPlayer.min'` 等（相对 baseUrl）；若任一哈希不符则该文件照常迁入 `runtime/libs/` |
+
+完成后删除 `assets/vendor/`。
+
+## 运行时切换（核心链路 `_win.uri`）
+
+PHP 将 `'uri'` 从 `…/assets/vendor/zibll` 改为 `…/assets`，loader（改造版 RequireJS）以 `baseUrl = _win.uri + '/js'` 解析懒加载模块：
+
+1. `assets/js/runtime/loader.js`：`baseUrl` 改为 `_win.uri + '/js/runtime'`（paths 表 `'libs/swiper.min'`、`'enlighter/enlighterjs.min'` 等相对值全部随之命中，无需逐条改，除 5 个去重库改 `../widgets/third-party/`）
+2. `main.js` + `main.min.js`：enlighter CSS 注入 `_win.uri + '/js/enlighter/…'` → `'/js/runtime/enlighter/…'`（swiper CSS 注入 `/css/swiper.min.css` 迁后自然命中，不改）
+3. 已核实的死引用（`/css/dplayer.min.css` 404、`/action/action.php`、`/yiyan/…`、paths 中 `shop—main`）保持原状不修不扩
+
+## PHP 引用切换（7 个文件）
+
+- `src/Core/ScriptsPart1b.php:16-17,23,38-41`、`src/Core/ScriptsPart1c.php:35-42,53`：新变量 `$runtime_uri = $base_uri . '/assets'`、`$fa5_uri = $base_uri . '/assets/fontawesome5'`；jquery/bootstrap/loader/main 路径改 `assets/js/runtime/…`
+- `inc/core-hooks/part-3.php:52`、`src/Admin/Admin.php:116`：FA5 新路径
+- `src/Admin/PageConfigMetaBox.php:275,277`、`src/Settings/DisplayPageGroups.php:96,98`、`src/Admin/Schema/SchemaPageDisplay.php:77,123,138,163,190`：`assets/vendor/zibll/img/` → `assets/img/`
+
+## 全仓去 zibll 清扫（用户已确认含功能性标识符）
+
+先跑全仓盘点（排除 .git、composer vendor、node_modules、tests/visual、assets/admin/build）：`zibll/Zibll、zib__、zib_ajax、zibllblock、wp-block-zibllblock、.zib-、_zb、Qinver、zibll.com、子比`，产出替换映射并核对目标名无既有冲突（如 `aksrt_ajax`）。统一替换规则：
+
+- **品牌头注释**：`@Author: Qinver / @Url: zibll.com / @Project: Zibll子比主题` → `@package AKSRT`；swiper 内 `//zibll : 修改内容` 等注释中性化；`main.js:4866` 的 `console.log(' Zibll Theme …')` 及 min 等价物删除
+- **功能性标识符重命名**（生产端+消费端原子同步，含 min 文件 sed，改后 diff 抽查只允许替换点变化）：
+  - `zibllblock/*` → `aksrtblock/*`；`zibll_block_cat/var` → `aksrt_block_cat/var`；`.wp-block-zibllblock-*` → `.wp-block-aksrtblock-*`（⚠️ 数据库已发布内容中的旧块名将无法渲染，用户已接受且明确不写兼容层）
+  - `'zibll' + type` localStorage 键 → `'aksrt' + type`（游客点赞记录重置，已接受）
+  - `zib__()` i18n 函数 → `aksrt__()`（先定位定义处，全量替换所有调用，含各 .min.js）
+  - `zib_ajax` 等运行时函数按盘点结果同步改名
+- **AKSRT 自有资产**：`assets/css/frontend/zibll-utilities.css → legacy-utilities.css`、`zibll-compat-vars.css → compat-vars.css`、`footer/zibll-shell.css → footer/shell.css`（含 enqueue_module 调用、handle 派生、测试引用）；`.zib-widget`(19处)/`.zib-slider` → `.aksrt-widget`/`.aksrt-slider`（CSS + PHP 输出标记 + vendor js 选择器同步）
+- **PHP 变量/注释**：`$zibll_uri` 等改名；所触及文件注释中 Zibll 措辞改写为"legacy runtime"
+- **admin SPA**：Vue 源内用户可见 zibll 文案改写后 `cd assets/admin && npm run build`
+- **例外保留**：`tests/visual/`（docker-compose.zibll.yml、zibll-Caddyfile、baseline）指向外部真实 Zibll 对照主题，属产品名引用，不改
+
+## 测试同步
+
+- `tests/navigation/zibll-navigation-contract.test.cjs`（本地未跟踪）：所有 vendor 路径 → 新路径；walk 根改 `assets/js/runtime`（js）与 `assets/css` 顶层（css）；新增断言 `assets/vendor` 目录不存在；文件更名 `legacy-navigation-contract.test.cjs`
+- `tests/widget-system/{post-visual,toast,page-display,lazyload}-contract.test.cjs`：loader/main 读取路径更新；toast 的 `$zibll_loader_version`/`$zibll_runtime_version` 正则同步新变量名；lazyload `sourceFiles` skip 列表把 `'vendor'` 换成/加上 `'runtime'` 保持语义
+- 其他 widget-system 测试中引用 zibll 路径/字样的断言同步更新
+
+## 验证与收尾
+
+1. `php -l` 逐个检查所有改动 PHP
+2. `node --test tests/widget-system/post-visual-contract.test.cjs` 等全部受影响 contract 测试 + 更名后的 navigation 测试
+3. grep 审计：全仓（按上述排除项）`zibll|Qinver|子比|zib__` 零残留；`assets/vendor` 零引用
+4. 手工 QA 清单：首页/文章页/评论区、FA 图标、滑块验证码图、勋章、enlighter 高亮、DPlayer 视频播放
+5. 不主动提交；建议单原子 commit：`refactor(assets): vendor 资产迁入标准目录并全仓去除 zibll 标识`（移动+切换+清扫+测试必须同 commit 才能保持可用）
+
+## 风险提示（用户已确认接受）
+
+- 数据库中已存 `zibllblock/*` 块的旧文章渲染损坏（无兼容层）
+- 游客 localStorage 点赞/收藏记录重置
+- min 文件 sed 属精细操作，逐文件 diff 验证