Sender · Pactor UI 资产库

元信息

字段	值
规范 ID	`component.sender`
名称	Sender
二级分类	AI 与会话（`ai-chat`）
用途	表示消息发送方和角色信息
描述	中文惯用名：发送者。

预览

静态结构：flex 行（align=end 时 flex-row-reverse）= Avatar（size-7，fallback 取 name 首字符）+ 名称（font-medium）+ 角色 / 时间（text-xs muted）。

DSL 结构

DslNode

{
  "type": "Sender",
  "props": {
    "name": "Pactor 助手",
    "avatarText": "P",
    "role": "AI 助手",
    "time": "10:24",
    "align": "start"
  }
}

何时用

何时使用

表示消息发送方和角色信息：头像 + 名称 + 角色 + 时间。

何时不用

完整消息体：使用 ChatMessage（内部已含 Sender）。

变体

变体	视觉形态	适用场景
start（默认）	居左	助手 / 他人消息
end	居右反转	用户自己的消息

API 属性

属性	类型	默认值	说明
`name`	`string`	—	发送方名称
`avatar`	`string`	—	头像图片地址
`avatarText`	`string`	name 首字符	头像占位文本
`role`	`string`	—	角色说明（如「AI 助手」）
`time`	`string`	—	时间文本（已格式化）
`align`	`'start'	'end'`	'start'
`className / style`	`string / CSSProperties`	—	通用：根节点 class 合并 / 内联样式

使用规范

时间传已格式化文本，组件不做时区 / 格式换算。

正例

✓ 群聊场景：每条消息顶部 Sender 区分成员。

反例

✕ 把 Sender 当评论头部用（非会话场景用 Descriptions / Card 头）。

Design Token 映射

不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。

关联资产