---
tagName: ai-portal.running-flow
displayName: WrappedAiPortalRunningFlow
description: 运行中的流程视图构件，以泳道方式展示各阶段的活动及其运行状态。
category: ""
source: "@next-bricks/ai-portal"
---

# ai-portal.running-flow

> 运行中的流程视图构件，以泳道方式展示各阶段的活动及其运行状态（completed、working、input-required 等）。

## Props

| 属性 | 类型          | 必填 | 默认值 | 说明                                         |
| ---- | ------------- | ---- | ------ | -------------------------------------------- |
| spec | `FlowStage[]` | 否   | -      | 流程阶段配置数据，每个阶段包含名称和活动列表 |

## Events

| 事件           | detail                   | 说明                                       |
| -------------- | ------------------------ | ------------------------------------------ |
| activity.click | `string` — 活动的 taskId | 点击活动时触发，仅当活动有 taskId 时可触发 |

## Examples

### 基础使用

以泳道方式展示多阶段流程及各活动状态。

```yaml preview
brick: ai-portal.running-flow
properties:
  spec:
    - name: Requirement
      serviceFlowActivities:
        - name: Requirement collects
          state: completed
        - name: Requirement documents
          state: input-required
    - name: Sprint Planning
      serviceFlowActivities:
        - name: planning
          state: working
        - name: sprinting
```

### 带点击事件

配置 taskId 后活动可点击，点击时触发 activity.click 事件。

```yaml preview
brick: ai-portal.running-flow
properties:
  spec:
    - name: 需求阶段
      serviceFlowActivities:
        - name: 需求收集
          taskId: "task-001"
          state: completed
          startTime: 1757800000
          endTime: 1757810000
        - name: 需求评审
          taskId: "task-002"
          state: working
          startTime: 1757810000
    - name: 开发阶段
      serviceFlowActivities:
        - name: 编码实现
          taskId: "task-003"
events:
  activity.click:
    action: console.log
    args:
      - "活动点击，taskId:"
      - "<% EVENT.detail %>"
```