RichText
渲染富文本内容。中文惯用名：富文本。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.rich-text |
| 名称 | RichText |
| 二级分类 | 媒体与内容（media） |
| 用途 | 渲染富文本内容 |
| 描述 | 中文惯用名：富文本。 |
预览
静态结构：<div data-slot="rich-text">（text-sm leading-relaxed break-words）；html 先经 DOMPurify 白名单消毒（剔除 script / 内联事件 / javascript: URL），再 dangerouslySetInnerHTML 挂载。与 Markdown 的边界：RichText 渲染 HTML（消毒后），Markdown 走 AST 不碰原始 HTML。
DSL 结构
{
"type": "RichText",
"props": {
"html": "<p>富文本正文，<strong>加粗</strong>与<a href=\"#\">链接</a>。</p>"
}
}何时用
何时使用
- 渲染富文本内容：CMS 下发的 HTML、运营配置的公告、邮件模板预览。
何时不用
- Markdown 源内容：使用 Markdown（AST 渲染，样式更统一）。
- 用户输入的不可信内容要求高隔离：本组件虽经 DOMPurify 消毒，但仍渲染 HTML，敏感场景优先 Markdown。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 基础富文本 | 段落 + 内联格式 | 公告、简介 |
| 结构化 HTML | 标题 / 列表 / 表格 | CMS 内容 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
html | string | — | 富文本 HTML（渲染前经 DOMPurify 消毒） |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式 |
使用规范
- 内容源必须可信 + 消毒双保险：消毒是底线，不是放任任意 HTML 的理由。
- 富文本内联样式可能与站点皮肤冲突，重要内容优先 Markdown。
- 不支持脚本与交互（消毒会剔除），需要交互的内容改用 DSL 组件。
正例
- ✓ 系统公告：运营在 CMS 配置的富文本直接渲染。
- ✓ 邮件模板预览：HTML 模板消毒后内嵌展示。
反例
- ✕ 把富文本当作可执行视图（内嵌脚本会被剔除）。
- ✕ 用户评论区直接用 RichText（优先纯文本或 Markdown）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。