消息通知页应使用 .list-group 搭配状态管理，而非 Toast；需自定义 .is-read 类、用 button 包裹项并添加 aria-live，徽章须置于入口按钮内且动态重算未读数，展开收起需手动补全交互细节，动态加载须严格按创建→插入→初始化→刷新顺序执行。

消息通知页不是 Toast，得用 .list-group 搭配状态管理

Bootstrap 没有叫“通知页”的内置组件，所谓消息通知页（比如点击铃铛弹出的未读列表）本质是结构化消息容器，不是临时提示。直接套用 .toast 或 .alert 会导致语义错乱、无法持久化标记已读、不支持滚动和批量操作。

正确起点是 .list-group：它提供语义清晰的项列表、原生支持分隔线、可嵌套图标/时间戳/徽章，且 CSS 可控性强。但要注意三点：

• 别用 .active 表示“已读”——.active 在 Bootstrap 中语义是“当前选中项”，跟消息状态无关；应自定义类如 .is-read 或 .notification-read
• 每条通知项必须包裹在 内，而非 或
  ，否则键盘 Enter 无法触发、屏幕阅读器识别为静态内容
• 所有按钮需加 role="alert" 和 aria-live="polite"（放在容器上），确保用户开启读屏时能听到“新消息：订单已发货”这类播报

未读徽章位置和更新逻辑最容易出错

右上角铃铛旁那个红点（.badge.bg-danger.rounded-pill）看着简单，实际常因 DOM 位置或数据不同步失效。

关键规则：

• 徽章必须放在通知入口按钮内部，例如：3 —— 绝不能挂在 .list-group 容器上，否则展开后随页面滚动偏移
• 徽章数字不能靠 JS 变量硬编码累加；每次更新必须重算真实未读数：document.querySelectorAll('.list-group-item:not(.is-read)').length，或从后端返回的 unread_count 字段同步
• 清空全部通知时，要三步同时做：移除所有 .is-read 类、重置徽章文本为 0、调用 aria-live 区域 textContent = '已清除全部通知' 触发播报

展开/收起面板要用 .collapse + 手动补交互细节

data-bs-toggle="collapse" 能实现基础展开收起，但默认不处理“点通知后自动关闭”或“ESC 键收起”，这些必须手写 JS 补全。


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载

典型遗漏点：

• 点击任意一条通知后，需主动调用：bootstrap.Collapse.getInstance(document.getElementById('notification-collapse')).hide()，否则面板常驻不收
• 监听 keydown 事件捕获 Escape 键，再执行同上 hide 方法；移动端则需额外监听 backdrop 点击（即面板外区域）
• 避免对每个 .list-group-item 单独绑定 click——用事件委托监听整个 .list-group 容器，防止内存泄漏
• 若通知项含异步操作（如标记已读 API 调用），收起动作应放在 then() 后，而非点击瞬间，否则可能收起时请求还没完成

动态加载通知时，DOM 插入和初始化顺序不能颠倒

从后端拉取新通知并追加到列表，不是把 HTML 字符串拼进去就完事。常见失败场景：新通知没动画、关不掉、点击无响应。

核心步骤链必须严格按序执行：

• 用 document.createElement('li') 创建新项，设置 class="list-group-item" 和必要属性，**不要用 innerHTML +=** —— 否则会销毁已有项的事件监听器和 ARIA 状态
• 插入后立即调用：listGroupEl.appendChild(newItem)，再手动初始化该节点的交互（如为按钮绑定 click 处理函数）
• 如果通知项里带 .toast 或其他需要 Bootstrap 实例的子组件，必须在插入 DOM 后单独对其调用 new bootstrap.Toast(...).show()
• 最后统一刷新徽章：updateUnreadBadge()，且确保该函数内使用 querySelectorAll 重新统计，而非依赖旧缓存值

最易被忽略的是：通知页往往需要支持“下拉刷新”或“滚动到底部加载更多”，此时每批新增的通知都得走一遍上述完整链路，漏掉任一环，就会出现某几条消息无法标记已读、徽章数字卡死、或键盘焦点丢失的问题。