MessageList · Pactor UI 资产库

元信息

字段	值
规范 ID	`component.message-list`
名称	MessageList
二级分类	AI 与会话（`ai-chat`）
用途	组织连续消息流和滚动定位
描述	中文惯用名：消息列表。

预览

静态结构：滚动列（overflow-y-auto gap-4，高度由外层约束）逐条渲染 ChatMessage；messages 变化自动滚到底部（autoScroll 可关）；onAction 统一上抛为 { id, action }。

DSL 结构

DslNode

{
  "type": "MessageList",
  "props": {
    "autoScroll": true,
    "messages": [
      {
        "id": "m1",
        "role": "user",
        "parts": [
          {
            "type": "text",
            "content": "帮我生成月报"
          }
        ]
      },
      {
        "id": "m2",
        "role": "assistant",
        "parts": [
          {
            "type": "text",
            "content": "已生成，点击下方卡片查看。"
          }
        ]
      }
    ]
  }
}

何时用

何时使用

组织连续消息流和滚动定位：会话区消息容器。

何时不用

单条消息：直接使用 ChatMessage。

变体

变体	视觉形态	适用场景
自动滚动（默认）	新消息滚到底	实时对话
关闭自动滚动	autoScroll=false	历史回放

API 属性

属性	类型	默认值	说明
`messages`	`MessageListItem[]`	[]	消息列表（ChatMessage props + 可选 id）
`autoScroll`	`boolean`	true	消息变化自动滚到底部
`onAction`	`event`	—	消息操作，传出 { id, action }（${event}）
`className / style`	`string / CSSProperties`	—	通用：根节点 class 合并 / 内联样式（高度由外层约束）

使用规范

必须给滚动高度（外层容器或 style），否则列表随内容撑高失去滚动。

正例

✓ 问答面板：MessageList（h-96）+ Composer 组成最小会话闭环。

反例

✕ 不约束高度直接放长消息流（页面整体滚动体验差）。

Design Token 映射

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

关联资产