Skip to content

操作列表 ActionList ​

用于展示 AI Agent 执行过程的组件,按顺序列出每一个操作及其状态,并支持展开详情与折叠。

基础使用 ​

在 ActionList 的默认插槽中放置 ActionListItem 即可渲染每一行,为每一行设置 index 作为标识,再通过 status、title 和 content 描述这一步操作。

Search the web
Found 12 sources about pixel rendering.
Read the sources
Reading page 3 of 12...
Write the summary
Waiting for the previous step to finish.
隐藏源代码

状态 ​

status 控制 ActionListItem 的状态,可选 'pending'(默认)、'running'、'success'、'warning'、'error' 和 'skipped'。节点图标与强调色都会跟随状态变化,其中 'running' 的图标会持续旋转。

也可以设置 color 传入自定义颜色,它会覆盖状态对应的颜色。

Pending
This step has not started yet.
Running
This step is being executed.
Success
This step finished successfully.
Warning
This step finished with a warning.
Error
This step failed.
Skipped
This step was skipped.
Custom color
A custom color overrides the color of the status.
隐藏源代码

展开详情 ​

当 ActionListItem 带有 detail 时,点击行标题即可展开详情。expandable 设为 false 可以让某一行始终保持收起,defaultExpanded 可以设置非受控模式下默认展开的行,expanded 则用于受控模式。

展开的行索引集合变化时会触发 expandedChange 事件。

animationDuration 控制展开与收起动画的时长。

Search the web
12 sources found
Kept the 12 most relevant pages of the query as candidates.
Read the sources
Page 3 of 12
Extracted the key points of every page and stored them as notes for the summary.
Write the summary
Waiting
Drafted a 200-word summary from the notes and asked the user to review it.
Keep this row closed
A detail is set, but expandable is false.
隐藏源代码

尺寸 ​

通过 size 属性设置 ActionList 的尺寸,可选 'small'、'medium'(默认)和 'large',节点的尺寸、字号和图标都会同步变化。

Plan the task
Done
Run the tools
In progress
Running......
Plan the task
Done
Run the tools
In progress
Running......
Plan the task
Done
Run the tools
In progress
Running......
隐藏源代码

间距 ​

通过 spacing 属性设置 ActionList 中各行之间的间距,传入数字时以像素为单位,也可以传入字符串作为 CSS 长度值。

ActionListItem 也支持 spacing 属性,设置后会覆盖 ActionList 的间距;未设置时沿用 ActionList 的间距。最后一行不会保留间距。

Search the web
ActionList sets spacing to 32.
Read the sources
Every row inherits it.
Write the summary
The last row keeps no spacing.
隐藏源代码

连接线 ​

通过 lineVariant 属性设置各行之间连接线的样式,可选 'solid'(默认)与 'dashed'。连接线从节点向下延伸,最后一行不会绘制连接线。

ActionListItem 也支持 lineVariant 属性,设置后会覆盖 ActionList 设置的样式。

Search the web
The `lineVariant` prop is dashed.
Read the sources
The row overrides the line variant with solid.
Write the summary
The last row draws no line.
隐藏源代码

折叠 ​

设置 collapsible 后,当行数超过 maxDisplayItems(默认为 3)时就会出现折叠入口。defaultCollapsed 与 collapsed 分别用于非受控和受控模式下的收起状态,foldPlacement 决定入口位于列表上方还是下方。

收起状态变化时会触发 collapsedChange 事件。

Show 3 more
Understand the request
The goal is clear.
Search the web
Found 6 sources.
Show 2 more
Understand the request
The goal is clear.
Search the web
Found 6 sources.
Read the sources
Reading page 2 of 6...
隐藏源代码

自定义插槽 ​

ActionListItem 提供 title、content 和 detail 插槽,分别用于自定义标题、补充内容与展开后的详情内容。

通过 ActionListItem 的 icon 插槽可以替换节点处的默认图标,插槽参数为当前的状态。

fold 插槽可以自定义折叠入口的内容,插槽参数为当前的收起状态、被隐藏的行数和总行数。

2 more steps
Search the web
Found 12 sources.
The detail slot renders anything, from styled text to another component.
Read the sources
The content slot sits next to the title.
Expanded through the detail slot.
Write the summary
Waiting for the previous step.
隐藏源代码

文本省略 ​

为 ActionListItem 设置 ellipsis 后,标题与内容会限制在一行内并以省略号截断。当标题本身已经超出一行时,内容会被隐藏,只保留标题。

Search the web for the latest pixel rendering articles
The content is hidden once the title alone overflows the row.
Read
Both the title and the content are truncated with an ellipsis.
Write the summary
隐藏源代码

数据驱动行 ​

除了使用默认插槽,也可以通过 items 属性传入行数据,由 ActionList 批量渲染 ActionListItem。每一项支持 index、status、title、content、detail、ellipsis、color、spacing、lineVariant 和 expandable,未设置的字段使用 ActionListItem 的默认值;items 与默认插槽同时存在时以 items 为准。

Search the web
Found 12 sources about pixel rendering.
Kept the 12 most relevant pages of the query as candidates.
Read the sources
Reading page 3 of 12...
Write the summary
Waiting for the previous step to finish.
Ask the user to review
No status is set, so the row stays pending.
隐藏源代码

API ​

ActionListItemData ​

属性类型可选默认值描述版本
indexstring | number | symbol是ActionListItem 的标识。0.2.1
status'pending' | 'running' | 'success' | 'warning' | 'error' | 'skipped'是'pending'ActionListItem 的状态。0.2.1
titleValidContent是ActionListItem 的标题。0.2.1
contentValidContent是ActionListItem 的补充内容。0.2.1
detailValidContent是ActionListItem 展开后显示的详情内容。0.2.1
iconValidContent是ActionListItem 的图标。0.2.1
ellipsisboolean是falseActionListItem 的文本是否在超出一行时省略。0.2.1
colorstring是ActionListItem 的自定义颜色。0.2.1
spacingnumber | string是ActionListItem 的间距,会覆盖 ActionList 设置的间距。0.2.1
lineVariant'solid' | 'dashed'是'solid'ActionListItem 连接线的样式,会覆盖 ActionList 设置的样式。0.2.1
expandableboolean是ActionListItem 在带有详情内容时是否可展开。0.2.1
animationDurationnumber是250ActionListItemData 展开与收起动画的时长。0.2.1

ActionListProps ​

属性类型可选默认值描述版本
itemsActionListItemData[]是ActionList 的行数据,未提供时渲染默认插槽。0.2.1
size'small' | 'medium' | 'large'是'medium'ActionList 的尺寸。0.2.1
spacingnumber | string是ActionList 中各行之间的间距。0.2.1
lineVariant'solid' | 'dashed'是'solid'ActionList 中连接线的样式。0.2.1
animationDurationnumber是250ActionList 展开与收起动画的时长。0.2.1
expandedArray<number | string | symbol>是受控模式下展开的行索引集合。0.2.1
defaultExpandedArray<number | string | symbol>是非受控模式下默认展开的行索引集合。0.2.1
collapsibleboolean是false行数超过 maxDisplayItems 时是否提供折叠入口,行数取自 items 或默认插槽。0.2.1
maxDisplayItemsnumber是3收起状态下显示的行数。0.2.1
collapsedboolean | null是受控模式下的收起状态。0.2.1
defaultCollapsedboolean | null是非受控模式下默认的收起状态。0.2.1
foldPlacement'start' | 'end'是'start'折叠入口相对 ActionList 的位置。0.2.1

ActionListEvents ​

事件参数描述版本
update:expandedexpanded: Array<number | string | symbol>展开的行索引集合变化时触发。0.2.1
expandedChangeexpanded: Array<number | string | symbol>展开的行索引集合变化时触发,参数为该集合的副本。0.2.1
itemExpandedChangeindex: number | string | symbol, expanded: boolean某一行的展开状态变化时触发。0.2.1
update:collapsedcollapsed: boolean收起状态变化时触发。0.2.1
collapsedChangecollapsed: boolean收起状态变化时触发。0.2.1

ActionListSlots ​

插槽参数描述版本
defaultActionList 的行内容,用于放置 ActionListItem。0.2.1
foldcollapsed: boolean, hiddenCount: number, total: numberActionList 折叠入口的自定义内容。0.2.1

ActionListItemProps ​

属性类型可选默认值描述版本
indexnumber | string | symbol否ActionListItem 的标识。0.2.1
status'pending' | 'running' | 'success' | 'warning' | 'error' | 'skipped'是'pending'ActionListItem 的状态。0.2.1
titlestring是ActionListItem 的标题。0.2.1
contentstring是ActionListItem 的补充内容。0.2.1
detailstring是ActionListItem 展开后显示的详情内容。0.2.1
ellipsisboolean是falseActionListItem 的文本是否在超出一行时省略。0.2.1
spacingnumber | string是ActionListItem 的间距,会覆盖 ActionList 设置的间距。0.2.1
colorstring是ActionListItem 的自定义颜色。0.2.1
lineVariant'solid' | 'dashed'是'solid'ActionListItem 连接线的样式,会覆盖 ActionList 设置的样式。0.2.1
expandableboolean是trueActionListItem 在带有详情内容时是否可展开。0.2.1
animationDurationnumber是250ActionListItem 展开与收起动画的时长。0.2.1

ActionListItemEvents ​

事件参数描述版本
expandedChangeexpanded: booleanActionListItem 的展开状态变化时触发。0.2.1

ActionListItemSlots ​

插槽参数描述版本
detailActionListItem 展开后显示的详情内容。0.2.1
titleActionListItem 的标题。0.2.1
contentActionListItem 的补充内容。0.2.1
iconstatus: ActionItemStatusActionListItem 节点处的图标。0.2.1

ValidContent ​

ts
export type ValidContent = string | ((...args: any[]) => VNode | string | JSX.Element | null | void)