用户公开主页通知按钮改为纯图标+未读角标

现状

目标按钮: templates/parts/user/author-hero.php:144-149(仅 $is_own 查看自己主页时输出),当前为铃铛图标 + "消息" 文字,无角标。
参照实现: 用户中心头部 inc/helpers/user-center-renderers/profile-header.php:87-94 — btn-ghost btn-sm btn-icon 纯图标按钮,带 aria-label/title,未读数 > 0 时输出角标 <span class="uc-header__action-badge">N</span>(不封顶 99)。
未读数函数: aksrt_get_user_unread_notification_count($user_id)(inc/modules/user-notifications.php:387),模块经 inc/bootstrap.php:78 无条件加载,可直接调用。
hero 卡片仅由 page-user-home.php 服务端静态渲染一次(DOM 无刷新只作用于 tab 面板),角标为静态服务端渲染,与用户中心行为一致。
.btn-icon / .btn-icon.btn-sm 样式已存在于 assets/css/core/buttons.css:129-136,全局可用;但 .uc-header__action-badge 样式在 user-center 路由 CSS 中,不会在公开主页加载,需在 assets/css/routes/user-home.css(该页直接入队,无构建步骤)新增。

修改内容

1. `templates/parts/user/author-hero.php`

在第 58 行 $messages_url 之后新增:

$unread_count = $is_own ? aksrt_get_user_unread_notification_count($user_id) : 0;

将消息按钮(144-149 行)整体替换为与用户中心一致的纯图标形式,类名沿用本文件 BEM 前缀:

<a href="..." class="btn-ghost btn-sm btn-icon aksrt-author-hero__message-btn" aria-label="消息通知" title="消息通知">
    <i class="fa fas fa-bell" aria-hidden="true"></i>
    <?php if ($unread_count > 0) : ?>
    <span class="aksrt-author-hero__action-badge"><?php echo esc_html((string) $unread_count); ?></span>
    <?php endif; ?>
</a>

删除原 <span>消息</span> 文字输出,不保留旧结构。

2. `assets/css/routes/user-home.css`

在 .aksrt-author-hero__follow-btn 样式附近(约 167 行后)新增,视觉与用户中心角标(user-center/shell.css:136-157)完全一致:

.aksrt-author-hero__message-btn {
  position: relative;
}

.aksrt-author-hero__action-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin: 0;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-error, #ef4444);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

验证

php -l templates/parts/user/author-hero.php
运行 node --test tests/widget-system/page-display-contract.test.cjs tests/widget-system/post-visual-contract.test.cjs(已确认两者均未断言该按钮标记,应保持通过)
桌面/移动端检查: 图标按钮为 28px 方形(.btn-icon.btn-sm),角标绝对定位右上角,移动端居中布局不受影响(角标不占布局空间)

不写 function_exists 兜底、不保留文字版本、不添加迁移逻辑。

2.9 KiB Raw Blame History

用户公开主页通知按钮改为纯图标+未读角标

现状

修改内容

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

2. assets/css/routes/user-home.css

验证

2.9 KiB

Raw Blame History

1. `templates/parts/user/author-hero.php`

2. `assets/css/routes/user-home.css`