消息通知页应使用 .list-group 搭配状态管理，而非 Toast；需自定义 .is-read 类、用 button 包裹项并添加 aria-live，徽章须置于入口按钮内且动态重算未读数，展开收起需手动补全交互细节，动态加载须严格按创建→插入→初始化→刷新顺序执行。
消息通知页不是 Toast，得用 .list-group 搭配状态管理
Bootstrap 没有叫“通知页”的内置组件，所谓消息通知页（比如点击铃铛弹出的未读列表）本质是结构化消息容器，不是临时提示。直接套用 .toast 或 .alert 会导致语义错乱、无法持久化标记已读、不支持滚动和批量操作。
正确起点是 .list-group：它提供语义清晰的项列表、原生支持分隔线、可嵌套图标/时间戳/徽章，且 CSS 可控性强。但要注意三点：
- 别用
.active表示“已读”——.active在 Bootstrap 中语义是“当前选中项”，跟消息状态无关；应自定义类如.is-read或.notification-read - 每条通知项必须包裹在
<button type="button"></button>内，而非<a></a>或<div>，否则键盘 <code>Enter无法触发、屏幕阅读器识别为静态内容 - 所有按钮需加
role="alert"和aria-live="polite"（放在容器上），确保用户开启读屏时能听到“新消息：订单已发货”这类播报 - 徽章必须放在通知入口按钮内部，例如：
<button class="btn btn-link"><i class="bi-bell"></i><span class="badge bg-danger rounded-pill">3</span></button>—— 绝不能挂在.list-group容器上，否则展开后随页面滚动偏移 - 徽章数字不能靠 JS 变量硬编码累加；每次更新必须重算真实未读数：
document.querySelectorAll('.list-group-item:not(.is-read)').length，或从后端返回的unread_count字段同步 - 清空全部通知时，要三步同时做：移除所有
.is-read类、重置徽章文本为0、调用aria-live区域textContent = '已清除全部通知'触发播报 - 点击任意一条通知后，需主动调用：
bootstrap.Collapse.getInstance(document.getElementById('notification-collapse')).hide()，否则面板常驻不收 - 监听
keydown事件捕获Escape键，再执行同上 hide 方法；移动端则需额外监听 backdrop 点击（即面板外区域） - 避免对每个
.list-group-item单独绑定 click——用事件委托监听整个.list-group容器，防止内存泄漏 - 若通知项含异步操作（如标记已读 API 调用），收起动作应放在
then()后，而非点击瞬间，否则可能收起时请求还没完成 - 用
document.createElement('li')创建新项，设置class="list-group-item"和必要属性，**不要用innerHTML +=** —— 否则会销毁已有项的事件监听器和 ARIA 状态 - 插入后立即调用：
listGroupEl.appendChild(newItem)，再手动初始化该节点的交互（如为按钮绑定 click 处理函数） - 如果通知项里带
.toast或其他需要 Bootstrap 实例的子组件，必须在插入 DOM 后单独对其调用new bootstrap.Toast(...).show() - 最后统一刷新徽章：
updateUnreadBadge()，且确保该函数内使用querySelectorAll重新统计，而非依赖旧缓存值
未读徽章位置和更新逻辑最容易出错
右上角铃铛旁那个红点（.badge.bg-danger.rounded-pill）看着简单，实际常因 DOM 位置或数据不同步失效。
关键规则：
展开/收起面板要用 .collapse + 手动补交互细节
data-bs-toggle="collapse" 能实现基础展开收起，但默认不处理“点通知后自动关闭”或“ESC 键收起”，这些必须手写 JS 补全。
典型遗漏点：
动态加载通知时，DOM 插入和初始化顺序不能颠倒
从后端拉取新通知并追加到列表，不是把 HTML 字符串拼进去就完事。常见失败场景：新通知没动画、关不掉、点击无响应。
核心步骤链必须严格按序执行：
最易被忽略的是：通知页往往需要支持“下拉刷新”或“滚动到底部加载更多”，此时每批新增的通知都得走一遍上述完整链路，漏掉任一环，就会出现某几条消息无法标记已读、徽章数字卡死、或键盘焦点丢失的问题。
