Files
wordpress-theme-aksrt/.zcode/plans/plan-sess_c9ca98f3-5ff7-43eb-a99a-534e80b09c65.md
T

4.0 KiB
Raw Blame History

复刻 Zibll 粉丝/关注用户列表(公开主页 follow TAB)

问题根源

templates/parts/user-home/panel-follow.php:46-65 手写的列表 markup(.uh-follow__list/item/avatar/name)在全仓库没有任何 CSS 定义,头像+用户名以内联文本堆叠显示。列表项也只有头像和用户名,没有 Zibll 的卡片结构。

关键事实:AKSRT 已 vendored Zibll 的 main.css(.author-minicard 卡片规则、工具类齐全),且 inc/helpers/aksrt-graphic-card.php:215 已有 aksrt_author_minicard() —— Zibll zib_author_card() 的移植版(42px 懒加载头像、用户名+勋章/认证/等级图标、逐项关注按钮、个性签名一行省略、默认文案"这家伙很懒,什么都没有写…"),搜索页在用。修复 = 粉丝/关注列表改走这条既有链路,不新写卡片样式。

改动清单

1. templates/parts/user-home/panel-follow.php(核心)

  • 列表循环改为 aksrt_author_minicard((int) $row['user_id']),删除手写的 .uh-follow__item/avatar/name markup(渲染链路与搜索页用户列表完全一致)。
  • 子切换复刻 Zibll 结构(zib-author.php:407-410):居中文字链接「粉丝 N | 关注 N」(list-inline splitters + 激活 focus-color / 非激活 muted-color),顺序改为粉丝在前、默认子列表改为粉丝(Zibll 逻辑:TAB 名"粉丝"、默认显示粉丝列表,zib_get_follow_user_list 默认 type='followed')。链接仍走现有 ?follow_sub=&follow_page= 路由。
  • 空状态图标换心形 SVG(见第 6 条),继续用 aksrt_render_profile_empty 组件(对齐 Zibll null-love 爱心语义)。
  • 分页保持 paginate_links 服务端翻页:Zibll 的 AJAX"加载更多"框架(post_ajax/ajax-next)未移植进 AKSRT(main.js 仅 27 行),且公开主页所有 TAB 统一为服务端渲染 + URL 参数翻页,不为此引入独立 AJAX 体系。

2. inc/helpers/aksrt-graphic-card.php — aksrt_author_minicard()

  • 关注按钮改为服务端渲染真实状态(复刻 Zibll 逻辑):已登录且 \AKSRT\User\Follow::is_following(current, target) 为真时输出 is-following class +「已关注」文案。消除每次进页"全部显示关注→异步闪变"的问题。搜索页同样受益。

3. templates/parts/user/author-hero.php

  • hero 关注按钮(L151-163)同样服务端渲染真实初始状态(is-following +「已关注」),与卡片按钮同一逻辑。

4. assets/js/follow.js

  • 删除逐按钮 /follow/status 轮询(L54-69):服务端已输出真值,不留双路。保留点击 toggle、updateFollowButton 状态切换、用户中心取关移除行、计数更新。

5. assets/css/routes/user-home.css — follow 区样式替换

  • .uh-follow__list { text-align: center; }:对齐 Zibll pane 的 text-center(卡片为 inline-block,自动 3 列居中换行,移动端单列规则 main.css 已有)。
  • 子切换:删除旧 pill 按钮样式块(L486-519),替换为 Zibll 风格的少量布局规则(居中、间距),颜色/激活态复用 vendored 工具类。
  • 同步删除不再被引用的 __subtab-count 等旧规则。

6. inc/helpers/aksrt-user-home.php

  • context 数组新增 svg_empty_follow(心形 stroke SVG,风格同现有 svg_empty_post 等)。

不做的事(明确排除)

  • 不引入 AJAX"加载更多"(无框架基础,破坏公开主页统一服务端分页架构)。
  • 不动数据层 src/User/Follow.php(get_user_list 已提供所需 user_id;徽章/签名由 minicard 自行取)。
  • 不写任何双路、兼容、迁移代码:旧的手写列表 markup 和 pill 子切换样式直接替换删除。

验证

  • php -l 检查全部改动的 PHP 文件。
  • node --test tests/widget-system/*.test.cjs 确认不破坏既有契约(无该面板专属测试)。
  • 桌面 + 移动宽度下目视核对:卡片 3 列/单列、关注按钮初始状态、子切换、空状态、分页。