操作列表 ActionList
用于展示 AI Agent 执行过程的组件,按顺序列出每一个操作及其状态,并支持展开详情与折叠。
基础使用
在 ActionList 的默认插槽中放置 ActionListItem 即可渲染每一行,为每一行设置 index 作为标识,再通过 status、title 和 content 描述这一步操作。
状态
status 控制 ActionListItem 的状态,可选 'pending'(默认)、'running'、'success'、'warning'、'error' 和 'skipped'。节点图标与强调色都会跟随状态变化,其中 'running' 的图标会持续旋转。
也可以设置 color 传入自定义颜色,它会覆盖状态对应的颜色。
展开详情
当 ActionListItem 带有 detail 时,点击行标题即可展开详情。expandable 设为 false 可以让某一行始终保持收起,defaultExpanded 可以设置非受控模式下默认展开的行,expanded 则用于受控模式。
展开的行索引集合变化时会触发 expandedChange 事件。
animationDuration 控制展开与收起动画的时长。
尺寸
通过 size 属性设置 ActionList 的尺寸,可选 'small'、'medium'(默认)和 'large',节点的尺寸、字号和图标都会同步变化。
间距
通过 spacing 属性设置 ActionList 中各行之间的间距,传入数字时以像素为单位,也可以传入字符串作为 CSS 长度值。
ActionListItem 也支持 spacing 属性,设置后会覆盖 ActionList 的间距;未设置时沿用 ActionList 的间距。最后一行不会保留间距。
连接线
通过 lineVariant 属性设置各行之间连接线的样式,可选 'solid'(默认)与 'dashed'。连接线从节点向下延伸,最后一行不会绘制连接线。
ActionListItem 也支持 lineVariant 属性,设置后会覆盖 ActionList 设置的样式。
折叠
设置 collapsible 后,当行数超过 maxDisplayItems(默认为 3)时就会出现折叠入口。defaultCollapsed 与 collapsed 分别用于非受控和受控模式下的收起状态,foldPlacement 决定入口位于列表上方还是下方。
收起状态变化时会触发 collapsedChange 事件。
自定义插槽
ActionListItem 提供 title、content 和 detail 插槽,分别用于自定义标题、补充内容与展开后的详情内容。
通过 ActionListItem 的 icon 插槽可以替换节点处的默认图标,插槽参数为当前的状态。
fold 插槽可以自定义折叠入口的内容,插槽参数为当前的收起状态、被隐藏的行数和总行数。
文本省略
为 ActionListItem 设置 ellipsis 后,标题与内容会限制在一行内并以省略号截断。当标题本身已经超出一行时,内容会被隐藏,只保留标题。
数据驱动行
除了使用默认插槽,也可以通过 items 属性传入行数据,由 ActionList 批量渲染 ActionListItem。每一项支持 index、status、title、content、detail、ellipsis、color、spacing、lineVariant 和 expandable,未设置的字段使用 ActionListItem 的默认值;items 与默认插槽同时存在时以 items 为准。
API
ActionListItemData
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| index | string | number | symbol | 是 | | ActionListItem 的标识。 | 0.2.1 |
| status | 'pending' | 'running' | 'success' | 'warning' | 'error' | 'skipped' | 是 | 'pending' | ActionListItem 的状态。 | 0.2.1 |
| title | ValidContent | 是 | | ActionListItem 的标题。 | 0.2.1 |
| content | ValidContent | 是 | | ActionListItem 的补充内容。 | 0.2.1 |
| detail | ValidContent | 是 | | ActionListItem 展开后显示的详情内容。 | 0.2.1 |
| icon | ValidContent | 是 | | ActionListItem 的图标。 | 0.2.1 |
| ellipsis | boolean | 是 | false | ActionListItem 的文本是否在超出一行时省略。 | 0.2.1 |
| color | string | 是 | | ActionListItem 的自定义颜色。 | 0.2.1 |
| spacing | number | string | 是 | | ActionListItem 的间距,会覆盖 ActionList 设置的间距。 | 0.2.1 |
| lineVariant | 'solid' | 'dashed' | 是 | 'solid' | ActionListItem 连接线的样式,会覆盖 ActionList 设置的样式。 | 0.2.1 |
| expandable | boolean | 是 | | ActionListItem 在带有详情内容时是否可展开。 | 0.2.1 |
| animationDuration | number | 是 | 250 | ActionListItemData 展开与收起动画的时长。 | 0.2.1 |
ActionListProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| items | ActionListItemData[] | 是 | | ActionList 的行数据,未提供时渲染默认插槽。 | 0.2.1 |
| size | 'small' | 'medium' | 'large' | 是 | 'medium' | ActionList 的尺寸。 | 0.2.1 |
| spacing | number | string | 是 | | ActionList 中各行之间的间距。 | 0.2.1 |
| lineVariant | 'solid' | 'dashed' | 是 | 'solid' | ActionList 中连接线的样式。 | 0.2.1 |
| animationDuration | number | 是 | 250 | ActionList 展开与收起动画的时长。 | 0.2.1 |
| expanded | Array<number | string | symbol> | 是 | | 受控模式下展开的行索引集合。 | 0.2.1 |
| defaultExpanded | Array<number | string | symbol> | 是 | | 非受控模式下默认展开的行索引集合。 | 0.2.1 |
| collapsible | boolean | 是 | false | 行数超过 maxDisplayItems 时是否提供折叠入口,行数取自 items 或默认插槽。 | 0.2.1 |
| maxDisplayItems | number | 是 | 3 | 收起状态下显示的行数。 | 0.2.1 |
| collapsed | boolean | null | 是 | | 受控模式下的收起状态。 | 0.2.1 |
| defaultCollapsed | boolean | null | 是 | | 非受控模式下默认的收起状态。 | 0.2.1 |
| foldPlacement | 'start' | 'end' | 是 | 'start' | 折叠入口相对 ActionList 的位置。 | 0.2.1 |
ActionListEvents
| 事件 | 参数 | 描述 | 版本 |
|---|---|---|---|
| update:expanded | expanded: Array<number | string | symbol> | 展开的行索引集合变化时触发。 | 0.2.1 |
| expandedChange | expanded: Array<number | string | symbol> | 展开的行索引集合变化时触发,参数为该集合的副本。 | 0.2.1 |
| itemExpandedChange | index: number | string | symbol, expanded: boolean | 某一行的展开状态变化时触发。 | 0.2.1 |
| update:collapsed | collapsed: boolean | 收起状态变化时触发。 | 0.2.1 |
| collapsedChange | collapsed: boolean | 收起状态变化时触发。 | 0.2.1 |
ActionListSlots
| 插槽 | 参数 | 描述 | 版本 |
|---|---|---|---|
| default | | ActionList 的行内容,用于放置 ActionListItem。 | 0.2.1 |
| fold | collapsed: boolean, hiddenCount: number, total: number | ActionList 折叠入口的自定义内容。 | 0.2.1 |
ActionListItemProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| index | number | string | symbol | 否 | | ActionListItem 的标识。 | 0.2.1 |
| status | 'pending' | 'running' | 'success' | 'warning' | 'error' | 'skipped' | 是 | 'pending' | ActionListItem 的状态。 | 0.2.1 |
| title | string | 是 | | ActionListItem 的标题。 | 0.2.1 |
| content | string | 是 | | ActionListItem 的补充内容。 | 0.2.1 |
| detail | string | 是 | | ActionListItem 展开后显示的详情内容。 | 0.2.1 |
| ellipsis | boolean | 是 | false | ActionListItem 的文本是否在超出一行时省略。 | 0.2.1 |
| spacing | number | string | 是 | | ActionListItem 的间距,会覆盖 ActionList 设置的间距。 | 0.2.1 |
| color | string | 是 | | ActionListItem 的自定义颜色。 | 0.2.1 |
| lineVariant | 'solid' | 'dashed' | 是 | 'solid' | ActionListItem 连接线的样式,会覆盖 ActionList 设置的样式。 | 0.2.1 |
| expandable | boolean | 是 | true | ActionListItem 在带有详情内容时是否可展开。 | 0.2.1 |
| animationDuration | number | 是 | 250 | ActionListItem 展开与收起动画的时长。 | 0.2.1 |
ActionListItemEvents
| 事件 | 参数 | 描述 | 版本 |
|---|---|---|---|
| expandedChange | expanded: boolean | ActionListItem 的展开状态变化时触发。 | 0.2.1 |
ActionListItemSlots
| 插槽 | 参数 | 描述 | 版本 |
|---|---|---|---|
| detail | | ActionListItem 展开后显示的详情内容。 | 0.2.1 |
| title | | ActionListItem 的标题。 | 0.2.1 |
| content | | ActionListItem 的补充内容。 | 0.2.1 |
| icon | status: ActionItemStatus | ActionListItem 节点处的图标。 | 0.2.1 |
ValidContent
export type ValidContent = string | ((...args: any[]) => VNode | string | JSX.Element | null | void)