ConversationList · Pactor UI 资产库

元信息

字段	值
规范 ID	`component.conversation-list`
名称	ConversationList
二级分类	AI 与会话（`ai-chat`）
用途	浏览、搜索和管理历史会话
描述	中文惯用名：会话列表。

预览

静态结构：列 = 可选搜索框（searchable，按 title / description 过滤）+ 会话行（title truncate + description + time，激活 bg-accent，悬浮删除按钮 onDelete 阻止冒泡）；激活态非受控或受控（activeId + onSelect）；空结果显示「无匹配会话」。会话的存储与加载由调用方负责。

DSL 结构

DslNode

{
  "type": "ConversationList",
  "props": {
    "searchable": true,
    "activeId": "c-01",
    "items": [
      {
        "id": "c-01",
        "title": "Q3 经营分析",
        "description": "最后消息：已生成月报",
        "time": "10:24"
      },
      {
        "id": "c-02",
        "title": "会议纪要整理",
        "time": "昨天"
      }
    ]
  },
  "events": {
    "onSelect": {
      "action": "setState",
      "params": {
        "activeConversation": "${event}"
      }
    }
  }
}

何时用

何时使用

浏览、搜索和管理历史会话：会话侧栏。

何时不用

通用导航菜单：使用 Menu。

变体

变体	视觉形态	适用场景
基础列表	标题 + 摘要 + 时间	会话侧栏
可搜索	顶部搜索框	会话量大时
可管理	悬浮删除	会话管理

API 属性

属性	类型	默认值	说明
`items`	`ConversationItemData[]`	[]	会话：{ id, title, description?, time? }
`activeId`	`string`	—	受控当前会话 id；提供时切换仅经 onSelect 上报
`searchable`	`boolean`	false	是否展示搜索框
`onSelect`	`event`	—	选择事件，传出会话 id（${event}）
`onDelete`	`event`	—	删除事件（行悬浮删除钮）
`className / style`	`string / CSSProperties`	—	通用：根节点 class 合并 / 内联样式

使用规范

删除等破坏性操作配合 Popconfirm 二次确认（在 onDelete 闭环里做）。

正例

✓ 会话侧栏：searchable + activeId 受控，切换加载对应消息流。

反例

✕ 把 ConversationList 当站点导航（应使用 Menu）。

Design Token 映射

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

关联资产