diff --git a/.zcode/plans/plan-sess_059db36c-c073-4407-b8d4-b4f76e848ab1.md b/.zcode/plans/plan-sess_059db36c-c073-4407-b8d4-b4f76e848ab1.md new file mode 100644 index 00000000..1f4c3d70 --- /dev/null +++ b/.zcode/plans/plan-sess_059db36c-c073-4407-b8d4-b4f76e848ab1.md @@ -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 时输出角标 `N`(不封顶 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 + + ``` +- 删除原 `消息` 文字输出,不保留旧结构。 + +### 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 兜底、不保留文字版本、不添加迁移逻辑。 \ No newline at end of file diff --git a/assets/css/routes/user-home.css b/assets/css/routes/user-home.css index c5f9a861..6a049d7e 100644 --- a/assets/css/routes/user-home.css +++ b/assets/css/routes/user-home.css @@ -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; diff --git a/templates/parts/user/author-hero.php b/templates/parts/user/author-hero.php index 3813678f..eb7e099c 100644 --- a/templates/parts/user/author-hero.php +++ b/templates/parts/user/author-hero.php @@ -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; ?>