[开发]thread/show 全文直出 + CSS 折叠改造报告

👑Lv.11 元老 🌞 骨干会员
2026-10-26 01:50:53

本文由 FlintHub 开发文档归档发布。原始文档日期见标题前缀,来源:暂存20260913/thread_show全文直出折叠改造报告.md。

thread/show 全文直出 + CSS 折叠改造报告

实施时间:2026-09-12

实施方案:方案 B(删除服务端旧摘要链路)+ 方案 A(CSS 截断、Alpine 本地展开、htmx 局部翻页)

一、已修改文件

运行文件:

app/Controllers/ThreadController.php
app/Views/thread/show.php
assets/css/modern.css
assets/js/thread.js
sw.js

验证文件:

cli/_verify_thread_show_collapse.php

同步发布目录:

update/170/

update/170/ 当前包含 6 个逐字节同步文件:

app/Controllers/ThreadController.php
app/Views/thread/show.php
assets/css/modern.css
assets/js/thread.js
cli/_verify_thread_show_collapse.php
sw.js

二、方案 B:服务端旧摘要链路清理

已从 ThreadController::show() 删除:

  • Content::excerpt($threadContentRaw, 500) 调用;
  • $excerptData;
  • $threadNeedsExpand;
  • $excerptHtml;
  • $threadExcerpt;
  • _threadExcerpt / _threadNeedsExpand 视图传参。

保留:

  • Content::excerpt() 函数本身;
  • 主帖完整 Content::formatPostContent() 渲染;
  • reply_to_view 权限逻辑;
  • 列表页摘要逻辑;
  • /api/post/{id}/body 路由、权限校验和限流逻辑。

/api/post/{id}/body 当前不再被 thread/show 调用。由于用户指定的修改范围不包含 ApiController.php 和 index.php,本次没有改接口文件;该接口作为兼容旧调用的 legacy 接口保留。

三、方案 A:主帖全文直出 + CSS 折叠

已实现:

  • 主帖完整正文始终进入 HTML 源码;
  • 所有页码默认收起;
  • 折叠高度变量:--thread-body-collapsed-height: 600px;
  • 折叠状态 max-height + overflow: hidden;
  • 底部渐变使用 var(--mn-bg-card),兼容浅色和暗夜主题;
  • 页面源码中不再出现主帖正文 hx-get 动态加载。

四、Alpine 本地展开

主帖正文容器使用 Alpine:

  • x-data 保存 expanded 和 hasOverflow;
  • x-ref="threadBody" 测量正文高度;
  • x-on:click="expanded = !expanded" 只切换 class;
  • 展开文案显示“阅读全文”;
  • 收起文案显示“收起全文”;
  • 点击展开/收起不发送网络请求;
  • 主帖引用按钮与展开按钮同一操作栏,收起状态也可用;
  • reply_to_view 未授权状态不输出正文、折叠 class、Alpine、展开按钮或主帖引用数据属性,只保留锁定提示。

htmx 翻页后,外部 thread.js 继续保持 Alpine 的 expanded=false,但不替换主帖 DOM。

五、回复区局部翻页

回复区现在是:


分页请求返回完整页面时,htmx 只选取并替换 #replies:

  • 主帖区域不重刷;
  • 主帖 Alpine 状态不因 DOM 替换丢失;
  • URL 的 page 参数正常推送;
  • 回复列表和分页条一起更新。

六、零内联清理

thread/show.php 已清理:

  • 内联 <style>;
  • 内联 <script>;
  • style="";
  • onclick="";
  • onchange=""。

迁移内容:

  • 收藏/举报按钮排序 → assets/css/modern.css;
  • 图片查看、引用、滚动回复、附件文件名 → assets/js/thread.js 事件委托;
  • 回复删除确认 → Alpine x-on:submit.prevent;
  • 动态标题颜色 → CSS 类;
  • 灯箱关闭 → data-action + 外部事件委托。

七、验证实测结果

PHP 语法

app/Controllers/ThreadController.php       No syntax errors
app/Views/thread/show.php                   No syntax errors
cli/_verify_thread_show_collapse.php       No syntax errors
update/170 PHP 文件 3 个,错误 0 个

JavaScript 语法

assets/js/thread.js 通过 node --check

专项验证

cli/_verify_thread_show_collapse.php
通过 67 / 失败 0

前端烟囱回归

cli/smoke_frontend_flow.php
结果: 22 通过 / 0 失败

插件钩子重入回归

cli/_verify_plugin_hook_reinclude.php
通过 18 / 失败 0

发布副本校验

update/170/ 6 个文件均与源文件逐字节一致
无 .bak / .tmp / .orig / ~ 临时文件

八、缓存版本

sw.js: flinthub-static-v1.0.26 → flinthub-static-v1.0.27

version.php 保持原项目版本 V1.0.168,本次没有擅自修改应用版本号。

轻量级、高性能、零 MySQL 依赖的PHP社区系统。
| Views 2 | Replies 0

All Replies (0)

No replies yet

Please Log in