小优化

2026-08-23 15:11:17 +08:00
parent 176a7d3091
commit 0ffd045576
3 changed files with 88 additions and 2 deletions
@@ -0,0 +1,60 @@
+# 用户公开主页通知按钮改为纯图标+未读角标
+
+## 现状
+- 目标按钮: `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` 之后新增:
+  ```php
+  $unread_count = $is_own ? aksrt_get_user_unread_notification_count($user_id) : 0;
+  ```
+- 将消息按钮(144-149 行)整体替换为与用户中心一致的纯图标形式,类名沿用本文件 BEM 前缀:
+  ```php
+  <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`)完全一致:
+```css
+.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 兜底、不保留文字版本、不添加迁移逻辑。
@@ -177,6 +177,29 @@
  cursor: not-allowed;
 }

+.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;
+}
+
 .aksrt-author-hero__notice {
  display: flex;
  align-items: center;
@@ -56,6 +56,7 @@ if ($follower_count <= 0 && class_exists('\AKSRT\User\Follow')) {
 }

 $messages_url = function_exists('aksrt_get_messages_page_url') ? aksrt_get_messages_page_url() : '';
+$unread_count = $is_own ? aksrt_get_user_unread_notification_count($user_id) : 0;
 ?><div class="aksrt-author-hero<?php echo $show_cover ? '' : ' aksrt-author-hero--no-cover'; ?>">
 	<?php if ($show_cover) : ?>
 	<div class="aksrt-author-hero__cover">
@@ -142,9 +143,11 @@ $messages_url = function_exists('aksrt_get_messages_page_url') ? aksrt_get_messa
 					<span><?php esc_html_e('用户中心', 'aksrt'); ?></span>
 				</a>
 				<?php if ($show_message && $messages_url !== '') : ?>
-				<a href="<?php echo esc_url($messages_url); ?>" class="btn-ghost btn-sm">
+				<a href="<?php echo esc_url($messages_url); ?>" class="btn-ghost btn-sm btn-icon aksrt-author-hero__message-btn" aria-label="<?php esc_attr_e('消息通知', 'aksrt'); ?>" title="<?php esc_attr_e('消息通知', 'aksrt'); ?>">
 					<i class="fa fas fa-bell" aria-hidden="true"></i>
-					<span><?php esc_html_e('消息', 'aksrt'); ?></span>
+					<?php if ($unread_count > 0) : ?>
+					<span class="aksrt-author-hero__action-badge"><?php echo esc_html((string) $unread_count); ?></span>
+					<?php endif; ?>
 				</a>
 				<?php endif; ?>
 			<?php else : ?>