跳到主要内容

卡片和正文

站内消息编辑器包含正文编辑和卡片外观配置。正文用于说明消息内容,卡片决定消息在站内消息中的展示方式。

正文编辑器​

正文编辑器支持以下富文本工具:

工具说明
正文、标题 2、标题 3设置文本层级。标准卡片正文以一行 H3 标题开头,其余内容按段落行排列
加粗、斜体、下划线、删除线强调重要内容
文字颜色、高亮给片段设置颜色或高亮。标准属性标签使用灰色 #8c8c8c
行内代码、代码块、引用块标记短技术值和引用内容
无序列表、有序列表、任务列表创建列表内容
分割线、表格分隔内容段落或插入表格
左对齐、居中、右对齐设置段落对齐方式
链接、图片添加可点击链接或插入图片
字段变量插入动态表单数据

正文建议保持简短,便于快速阅读。主要动作应放在卡片底部,不要隐藏在长文本里。

标准正文写法​

内置消息和推荐写法都遵循三条规则:

  1. 正文第一行是 H3 标题,说明事件本身,例如 ### 审批超时提醒
  2. 其余每行写成一个属性:{color:#8c8c8c}标签{/color}: 值
  3. 一行一个属性;单个换行在渲染时就是换行
### 审批超时提醒
{color:#8c8c8c}所属表单{/color}: {{record.data.formName}}
{color:#8c8c8c}所属记录{/color}: {{record.data.title}}
{color:#8c8c8c}当前节点{/color}: {{record.data.currentNode}}

这行 H3 标题属于正文自身的标题,字号与正文一致但加粗,和顶部标题文案不是同一个东西。

不要在正文里自己画卡片:卡片底色、图标背景、底部区域和它们之间的间距都属于卡片配置,不属于消息文本。

卡片类型​

卡片类型适用场景
文本卡所有站内消息;正文承载内容,底部区域承载操作

顶部信息​

配置项说明
图标设置卡片图标或自定义 SVG
图标背景色填充图标的圆角背景,这是唯一可配置的卡片颜色;图标本身会在深色和浅色之间自动切换
标题文案设置卡片标题,字号与正文一致并加粗显示,始终展示

正文设置​

配置项说明
显示正文关闭后卡片只显示顶部信息和底部,不显示任何正文内容,适合很短的提示
正文显示行数限制正文显示 1–20 行,超出部分在最后一行显示省略号;留空表示不限制

卡片配色​

卡片固定使用两种颜色:浅色模式 #F9FAFB,深色模式 #171717。文字和正文会自动切换为对应的对比色,无需配置区域颜色。可在预览区切换浅色/深色查看两种效果。