系统通知样式

系统通知是 content.type==="system" 的消息，渲染为居中的 .system-message > .system-text，不带头像与气泡。系统通知落在 conversationType=4、targetId=system 的系统会话；客户端用 getSystemMessages() 读取，审核拒绝产生的 message.blocked 也走同一形态。

概念​

项行为
消息结构{type:"system",text:"...",systemType?:"system_notification"|"broadcast"}
DOM.message-item.system-message > .system-text（无头像/气泡/meta）
读取RIM.getSystemMessages({limit,beforeSeq})
会话conversationType=4、targetId="system"
审核联动message.blocked 系统通知（reject 后发送给发送者）
管理端GET /api/admin/apps/{appkey}/messages?conversationType=4&targetId=system
  • 系统消息没有发送状态/已读人数语义，不显示 msg-meta。
  • 系统通知仍会进入会话未读；ChatView 的自动已读逻辑按会话生效。
  • 广播（message.broadcast）与系统通知不同：前者不进入个人会话历史。

前置条件​

  • 已按 快速开始 完成 init 与 connect，页面能收发消息。
  • 使用 @ni-paas/im-web/imkit（浏览器原生 ESM，无第三方依赖）；自定义代码只调用 IMKit/IMLib 公开入口。
  • 已引入默认样式：调用 ensureStyles()，或自行加载 IMKit 样式表。
  • 自托管版无“UI 主题商店/付费皮肤”；所有自定义均为本地代码（不适用项）。

步骤​

  1. 读取系统会话

    连接后调用 client.getSystemMessages({limit:20})，把返回消息交给 ChatView（conversationType=4,targetId="system"）或 MessageBubble 渲染。

  2. 覆盖样式

    针对 .system-message/.system-text 设置字号、颜色、背景与圆角；不要依赖内联样式。

  3. 处理审核通知

    收到 message.blocked 后刷新系统会话或追加消息；提示用户消息已被屏蔽。

  4. 标记已读

    进入系统会话后按普通会话逻辑清除未读；系统消息本身没有回执。

参数表​

API / 选择器参数说明
client.getSystemMessages(options){limit?:1-100,beforeSeq?}返回系统会话消息
ChatView{conversationType:4,targetId:"system"}复用聊天视图渲染
MessageBubble{message,isMine:false}单条渲染
CSS.system-message、.system-text样式覆盖点

示例​

读取并渲染系统通知​

JavaScript
import { ChatView, ensureStyles } from '@ni-paas/im-web/imkit';

ensureStyles();

const chat = new ChatView({
  conversationType: 4,
  targetId: 'system',
  currentUserId: 'alice',
  showReadCount: false,
  autoReadReceipt: false, // 系统消息没有回执语义
});
chat.mount(document.getElementById('system-host'));

const result = await client.getSystemMessages({ limit: 20 });
if (result.code === 0) {
  chat.setMessages(result.data.slice().reverse()); // 接口倒序，视图按时间正序
}

// 实时到达：把新系统消息追加到视图
client.addEventListener('messages', (payload) => {
  const list = payload && payload.messages ? payload.messages : [];
  for (const message of list) {
    if (message.conversationType === 4 && message.targetId === 'system') {
      chat.appendMessage(message);
    }
  }
});

系统通知样式覆盖​

JavaScript
.system-message {
  display: flex;
  justify-content: center;
  padding: 10px 16px;
}
.system-message .system-text {
  max-width: 82%;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--imkit-text-secondary);
  background: color-mix(in srgb, var(--imkit-text) 8%, transparent);
  text-align: center;
}
/* 审核拒绝通知可用文案前缀区分（message.blocked） */
.system-message .system-text[data-kind="blocked"] {
  color: var(--imkit-danger);
}

常见问题​

系统通知能带头像/气泡吗？​

内置渲染固定为居中文本；需要卡片形态请改用 custom 消息自行渲染。

getSystemMessages 返回顺序？​

接口按时间倒序返回；渲染前一般需要 reverse() 成正序。

系统会话未读怎么清？​

与普通会话一致：进入会话后调用清除未读/发送已读逻辑；系统消息本身没有已读回执。

如何区分审核拒绝通知？​

服务端发送的是 message.blocked 系统通知；可按文本或 content.systemType 判断，必要时在业务层加标记。

相关链接​