手机端通知列表页必须使用 .list-group 而非 .toast，因其语义正确、滚动友好、适配触摸；需用 .notification-read 控制已读状态，徽章须挂于入口按钮内并实时同步未读数，点击后自动收起面板且支持 ESC 键关闭。
消息列表页必须用 .list-group 而不是 .toast
Toast 是瞬时提示，不适合做“可滚动、可标记、可清空”的通知列表页；手机端通知页本质是结构化数据展示，.list-group 才是语义正确、滚动友好、适配触摸的容器。直接套用 Toast 容器（如 .toast-container）会导致内容被裁剪、无法滑动、点击区域错位——尤其在 iOS Safari 中常见。
关键点：
-
.list-group必须包裹在.container-fluid或无 padding 的父容器里，避免默认.container在小屏下左右留白过大 - 每条通知用
.list-group-item，但绝不能加.active—— 这会触发导航高亮逻辑，和“已读/未读”无关 - 用自定义类名如
.notification-read控制视觉状态，例如：.notification-read { opacity: 0.7; font-weight: normal; } - 时间戳统一用
2 小时前，别用.text-secondary—— 后者在深色模式下可能对比度不足
未读徽章位置和同步逻辑最容易出错
手机端空间紧张，右上角红点徽章（.badge.bg-danger.rounded-pill）如果挂错位置，轻则偏移，重则随页面滚动“飞走”。它必须放在通知入口按钮内（比如顶部导航栏的铃铛图标旁），而不是列表容器上。
同步未读数不能靠 JS 变量累加：
- 每次加载或刷新列表后，应重新统计：
document.querySelectorAll('.list-group-item:not(.notification-read)').length - 用户点击某条通知时，立即加
.notification-read类，并同步更新徽章文本：badgeEl.textContent = count - 清空全部时，不仅要移除 DOM，还要遍历所有
.list-group-item移除.notification-read类，再设徽章为"0" - 徽章尺寸需微调：手机端建议
font-size: 0.625rem; padding: 0.125rem 0.375rem;，否则在 iPhone 小屏上显得臃肿
点击通知项后要自动收起面板 + 支持返回键
手机端没有鼠标悬停，用户点开通知列表后，期望点击任一项就跳转并收起面板。Bootstrap 原生 .collapse 不处理这个逻辑，必须补 JS。
实操要点：
- 列表容器加
data-bs-toggle="collapse" data-bs-target="#notifications-collapse" - 监听
.list-group-item的 click 事件，调用：bootstrap.Collapse.getInstance(document.getElementById('notifications-collapse')).hide() - 监听
keydown捕获 ESC 键：if (e.key === 'Escape') { collapse.hide(); } - 别忘了给每个
.list-group-item包一层—— 触摸反馈更明确，且避免标签在 iOS 上触发两次点击
移动端适配细节：字体、间距、可访问性
手机端手指操作精度有限，CSS 微调比桌面端更重要。以下参数直接影响可用性：
-
.list-group-item内部行高至少1.6，避免文字挤在一起；padding-block: 1rem（而非0.75rem）提升点击热区 - 图标用
配合 Bootstrap Icons，别用自定义 SVG —— 后者容易在部分 Android WebView 中渲染异常 - 每条通知必须有
role="region" aria-label="新消息：订单已发货"，屏幕阅读器才能准确播报 - 禁用
user-select: none—— 用户可能想长按复制通知里的订单号或链接 - 清空按钮放在列表底部，固定定位（
position-sticky bottom-0），但需加z-index: 1000避免被键盘遮挡
手机端通知列表页的复杂点不在结构，而在状态同步与交互闭环：未读数是否实时、点击后是否收起、键盘/触屏是否一致、屏幕阅读器能否理解当前上下文——这些地方一漏，用户就会觉得“卡”“反应慢”“找不到已读项”。
