4.0 KiB
4.0 KiB
复刻 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/namemarkup(渲染链路与搜索页用户列表完全一致)。 - 子切换复刻 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-followingclass +「已关注」文案。消除每次进页"全部显示关注→异步闪变"的问题。搜索页同样受益。
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 列/单列、关注按钮初始状态、子切换、空状态、分页。