---
tagName: ai-portal.stage-flow
displayName: WrappedAiPortalStageFlow
description: 阶段流程编辑器构件，支持以泳道方式展示和编辑服务流的阶段与活动。
category: ""
source: "@next-bricks/ai-portal"
---

# ai-portal.stage-flow

> 阶段流程编辑器构件，支持以泳道方式展示和编辑服务流的阶段与活动。

## Props

| 属性        | 类型           | 必填 | 默认值 | 说明                                             |
| ----------- | -------------- | ---- | ------ | ------------------------------------------------ |
| spec        | `Stage[]`      | 否   | -      | 阶段流程配置数据，每个阶段包含名称和活动列表     |
| aiEmployees | `AIEmployee[]` | 否   | -      | AI 员工列表，用于在活动中显示分配的员工名称      |
| readOnly    | `boolean`      | 否   | -      | 是否为只读模式，只读时不显示编辑、添加、删除操作 |

## Events

| 事件          | detail                                                                                  | 说明                       |
| ------------- | --------------------------------------------------------------------------------------- | -------------------------- |
| change        | `Stage[]` — 更新后的阶段列表                                                            | 流程阶段数据发生变化时触发 |
| add.activity  | `{ stage: Stage }` — { stage: 所属阶段数据 }                                            | 点击添加活动按钮时触发     |
| edit.activity | `EditActivityDetail` — { stage: 所属阶段, activity: 活动数据, activityIndex: 活动索引 } | 点击活动进行编辑时触发     |

## Methods

| 方法           | 参数                                                                    | 返回值 | 说明                     |
| -------------- | ----------------------------------------------------------------------- | ------ | ------------------------ |
| addActivity    | `(stage: Stage, activity: FlowActivity) => void`                        | `void` | 向指定阶段添加活动       |
| editActivity   | `(stage: Stage, activity: FlowActivity, activityIndex: number) => void` | `void` | 编辑指定阶段中的某个活动 |
| deleteActivity | `(stage: Stage, activityIndex: number) => void`                         | `void` | 删除指定阶段中的某个活动 |

## Examples

### 基础使用

以泳道方式展示服务流的阶段和活动，支持分配 AI 员工。

```yaml preview
brick: ai-portal.stage-flow
properties:
  spec:
    - name: Requirement
      serviceFlowActivities:
        - name: Requirement collects
          aiEmployeeId: "employee-001"
        - name: Requirement documents
          aiEmployeeId: "employee-001"
    - name: Sprint Planning
  aiEmployees:
    - employeeId: "employee-001"
      name: "Samuel"
events:
  change:
    action: console.log
    args:
      - "流程变更:"
      - "<% EVENT.detail %>"
  add.activity:
    action: console.log
    args:
      - "添加活动:"
      - "<% EVENT.detail %>"
  edit.activity:
    action: console.log
    args:
      - "编辑活动:"
      - "<% EVENT.detail %>"
```

### 只读模式

设置 readOnly 后不显示编辑、添加、删除操作。

```yaml preview
brick: ai-portal.stage-flow
properties:
  readOnly: true
  spec:
    - name: 需求阶段
      serviceFlowActivities:
        - name: 需求收集
          aiEmployeeId: "employee-001"
        - name: 需求评审
          aiEmployeeId: "employee-002"
    - name: 开发阶段
      serviceFlowActivities:
        - name: 编码实现
          aiEmployeeId: "employee-001"
  aiEmployees:
    - employeeId: "employee-001"
      name: "Alice"
    - employeeId: "employee-002"
      name: "Bob"
```

### 使用方法调用

通过方法调用动态添加、编辑、删除活动。

```yaml preview
- brick: ai-portal.stage-flow
  ref: stageFlow
  properties:
    spec:
      - name: 阶段一
        serviceFlowActivities:
          - name: 活动A
  events:
    change:
      action: console.log
      args:
        - "<% EVENT.detail %>"
- brick: eo-button
  properties:
    textContent: 添加活动
  events:
    click:
      method: addActivity
      ref: stageFlow
      args:
        - name: 阶段一
        - name: 新活动B
```