通知列表

Notification List

消息中心的那一列:谁在什么时候发了什么,未读的有红点,看完能一键全标已读。

全平台通用个人空间内容区组件

大白话说明

通知列表按时间倒序排所有系统消息:每行图标区分类型,标题一行、正文一行省略,未读行加粗带红点。顶部给「全部已读」,重要的通知(待处理事项)和广播通知最好分开两组。

什么时候用

产品有系统消息、互动消息需要归档查看时;纯聊天产品用会话列表,不是它。

什么时候不用

只有两三种通知且总量很少时,一页列表足矣,别提前做分组和筛选的复杂度。

细节与变体

  • 红点只表示「没看过」,处理完待办要用待办自己的状态,别和未读混用
  • 时间显示相对时间(3 分钟前),超过一周切绝对日期
  • 空状态要说明「有新消息会放这里」,配一个安静的插画

配套效果见下方「可用效果」。

配套提示词(点开填空、复制)

可用效果

参考实现(开源)

  • Ant Design(蚂蚁) ↗ MIT · 免费(MIT)

    国内中后台的事实标准:表格、表单、列表都是行业参照物。

  • shadcn-admin 后台模板 ↗ MIT · 免费(MIT)

    shadcn/ui 拼出的完整后台:仪表盘、设置、聊天页都有,拆开就是现成的页面范式。