MessageRow 消息行

会话消息行（组合行）：行布局所有者——负责头像槽、方向、header/footer 排布与发送态；可见表面由 oas-bubble（默认插槽内）提供。消息操作（复制/重试等）由 footer 插槽内组件派发，组件不管具体动作。

基础用法

双方对话（avatar + header + bubble + footer）

客客服小 O · 10:01您好，请问有什么可以帮您？引用转发我我 · 10:02想了解消息行的插槽结构。

示例代码

四个插槽：avatar（头像）、header（发送者名/时间）、默认（放 oas-bubble）、footer（操作/附加元数据）；空插槽自动收起。头像底对齐（长消息贴底，IM 通行细节）。

方向与逻辑属性（align）

align=start / end（RTL 自动镜像）

我RTL 容器内的我方消息——方向全部逻辑属性，自动镜像。客RTL 容器内的对方消息。

示例代码

align="end" 行方向翻转（flex-direction: row-reverse）+ 文本列逻辑对齐，无物理方向 CSS，RTL 容器下自动镜像。

发送状态（status）

sending / sent / delivered / read / error

发送中（spinner）。已发送（单勾）。已送达（双勾）。已读（双勾主色）。发送失败（圆叉 + danger 文本色）。

示例代码

status 是便利属性：渲染可见小字 + 装饰图标（文案走 locale，语义不单靠颜色传达；error 用 danger token 色作增强）。非法值/缺省不渲染状态区。重试等操作由宿主在 footer 插槽提供。

连续消息聚拢（grouped）

同发送者连续消息

客客服小 O · 10:01第一条：完整间距与头像。客第二条（grouped）：与上一条同发送者，行间距收拢。客第三条（grouped）：继续聚拢。

示例代码

与上一条同发送者时由宿主声明 grouped（布尔在场）——行间距收拢（走 --oas-message-gap 变量），视觉聚拢为一组。

API

oas-message-row

属性

属性	说明	类型	默认值
align	方向：start（对方，默认）/ end（我方）——逻辑属性实现（row-reverse + 逻辑对齐），RTL 自动镜像	—	—
grouped	布尔在场：与上一条同发送者的连续消息（宿主声明），行间距收拢（走 --oas-message-gap）	—	—
status	发送状态便利属性：sending / sent / delivered / read / error——渲染可见小字 + 装饰图标（文案走 locale，语义不单靠颜色；error 追加 danger 色作增强）；非法值/缺省不渲染状态区	MessageRowStatus	—

插槽

名称	说明
默认	消息内容（放 oas-bubble）
avatar	头像槽（底对齐，长消息贴底）
footer	尾部槽（操作/附加元数据，随方向对齐）
header	头部槽（发送者名/时间）

CSS 变量

CSS 变量	默认值
--oas-message-gap	var(--oas-space-4)

CSS 变量：--oas-message-gap（行间距，默认 var(--oas-space-4)）。部件：::part(row) / ::part(avatar) / ::part(main) / ::part(header) / ::part(content) / ::part(footer) / ::part(status)。事件：无（消息操作由 footer 插槽内组件派发）。