@blueking/bkflow-canvas-editor 1.0.0-beta.6 → 1.0.0-beta.8

package/README.md

@@ -69,10 +69,10 @@ npm install @blueking/bkflow-canvas-editor
 | `flowId`            | `string`                                       | -                   | **必需**，流程 ID                                                                           |
 | `apiConfig`         | `FlowApiConfig`                                | -                   | **必需**，API 配置对象，详见 [API 配置](#api-配置)                                          |
 | `permissions`       | `{ canEdit?: boolean }`                        | `{ canEdit: true }` | 权限配置对象，`canEdit` 控制头部编辑按钮是否使用禁用样式                                    |
-| `thumbnail`         | `boolean`                                      | `false`             | 缩略图模式，启用后只显示画布内容，不显示顶部 header 和操作按钮，禁用节点点击事件            |
+| `thumbnail`         | `boolean`                                      | `false`             | 小地图模式，启用后只显示画布内容，不显示顶部 header 和操作按钮，禁用节点点击事件            |
 | `enableVersion`     | `boolean`                                      | `false`             | 是否开启流程版本功能，开启后会根据 `flowVersion` 的值获取对应版本的流程数据                 |
 | `flowVersion`       | `string`                                       | -                   | 流程版本号，仅在 `enableVersion` 为 `true` 时生效。为空时表示草稿版本，不为空时表示指定版本 |
-| `showHeaderActions` | `boolean`                                      | `true`              | 是否显示头部操作按钮（编辑、执行流程、调试），仅在非缩略图模式下生效                        |
+| `showHeaderActions` | `boolean`                                      | `true`              | 是否显示头部操作按钮（编辑、执行流程、调试），仅在非小地图模式下生效                        |
 | `defaultZoom`       | `number`                                       | `1`                 | x6 画布的默认缩放比例，用于控制画布的初始显示效果。取值范围建议在 0.25 到 1.5 之间          |
 | `bkflowSaasUrl`     | `string`                                       | -                   | bkflow-saas-url，用于设置 `$.context.site_url` 的值，供插件内部使用                         |
 | `onEdit`            | `() => void`                                   | -                   | 编辑按钮点击回调（可选，也可以通过 `@edit` 事件监听）                                       |
@@ -218,9 +218,9 @@ interface SelectPanelConfig {
 
 ---
 
-### FlowExecute 组件
+### FlowCreateTask 组件
 
-流程执行组件，用于执行流程任务。
+创建任务组件，用于填写参数并创建、触发执行流程任务。
 
 #### Props
 
@@ -246,9 +246,41 @@ interface SelectPanelConfig {
 
 ---
 
+### FlowExecute 组件
+
+流程执行视图组件，在任务执行页面嵌入只读画布，内置节点和连线在不同执行状态（未执行、成功、失败、执行中）下的样式效果。
+
+#### Props
+
+| 参数            | 类型                  | 默认值 | 说明                                                  |
+| --------------- | --------------------- | ------ | ----------------------------------------------------- |
+| `pipelineTree`  | `PipelineTree`        | -      | **必需**，任务使用的流程模板数据                      |
+| `nodeStates`    | `TaskExecutionStates` | `{}`   | 节点执行状态映射 `Record<nodeId, { status }>`         |
+| `defaultZoom`   | `number`              | `1`    | 默认缩放比例                                          |
+| `apiConfig`     | `FlowApiConfig`       | -      | **必需**，API 配置对象                                |
+| `bkflowSaasUrl` | `string`              | -      | bkflow SaaS 地址                                      |
+| `onBack`        | `() => void`          | -      | 返回回调                                              |
+
+#### Events
+
+| 事件名       | 参数            | 说明                 |
+| ------------ | --------------- | -------------------- |
+| `back`       | -               | 点击返回按钮触发     |
+| `node-click` | `CanvasUiEvent` | 点击节点时触发       |
+| `ui-event`   | `CanvasUiEvent` | 画布交互事件透传     |
+
+#### Slots
+
+| 插槽名   | 说明                 |
+| -------- | -------------------- |
+| `header` | 完全替换默认标题区   |
+| `extend` | 标题栏右侧扩展区域  |
+
+---
+
 ### FlowDebug 组件
 
-流程调试组件，用于调试流程任务。基于 `FlowExecute` 组件实现，但增加了自定义表单插槽、自定义确定按钮回调及版本控制支持。
+流程调试组件，用于调试流程任务。基于 `FlowCreateTask` 组件实现，但增加了自定义表单插槽、自定义确定按钮回调及版本控制支持。
 
 #### Props
 
@@ -455,9 +487,9 @@ interface SelectPanelConfig {
 </template>
 ```
 
-### 使用缩略图模式
+### 使用小地图模式
 
-缩略图模式适用于只需要展示画布内容的场景，不显示顶部 header 和操作按钮，禁用节点点击事件：
+小地图模式适用于只需要展示画布内容的场景，不显示顶部 header 和操作按钮，禁用节点点击事件：
 
 ```vue
 <template>
@@ -610,7 +642,7 @@ interface SelectPanelConfig {
 
   <FlowEdit :flow-id="flowId" :api-config="apiConfig" :bkflow-saas-url="'https://example.com/bkflow'" />
 
-  <FlowExecute
+  <FlowCreateTask
     :flow-id="flowId"
     :show="isExecuteShow"
     :api-config="apiConfig"
@@ -625,7 +657,7 @@ interface SelectPanelConfig {
 
 <script setup>
   import { ref } from 'vue';
-  import { FlowView, FlowEdit, FlowExecute, FlowDebug } from 'bkflow-canvas-editor';
+  import { FlowView, FlowEdit, FlowCreateTask, FlowExecute, FlowDebug } from 'bkflow-canvas-editor';
 
   const flowId = '123';
   const isExecuteShow = ref(false);
@@ -1076,10 +1108,10 @@ resolve: {
 9. **API 配置类型说明**：
    - 外部使用者只需要使用 `FlowApiConfig` 类型
    - `FlowViewApiConfig` 和 `FlowEditApiConfig` 是组件内部使用的类型，通过 `useFlowApi` 自动转换
-   - `FlowExecute` 和 `FlowDebug` 组件可以直接接受 `FlowApiConfig` 类型，组件内部会自动处理
+   - `FlowCreateTask` 和 `FlowDebug` 组件可以直接接受 `FlowApiConfig` 类型，组件内部会自动处理
 10. **调试功能**：
     - `FlowEdit` 组件的 `enableDebug` props 默认为 `false`，设置为 `true` 后才会显示可点击的调试按钮
-    - 点击调试按钮会打开 `FlowDebug` 组件，该组件提供了与 `FlowExecute` 相同的交互，但支持自定义表单插槽和自定义确定按钮回调
+    - 点击调试按钮会打开 `FlowDebug` 组件，该组件提供了与 `FlowCreateTask` 相同的交互，但支持自定义表单插槽和自定义确定按钮回调
     - `FlowDebug` 组件的 `useCustomConfirm` 为 `false` 时，会先执行原有的创建和执行任务逻辑，然后执行 `onConfirm` 回调；为 `true` 时，只执行 `onConfirm` 回调
 11. **版本控制**：
     - FlowView、FlowEdit、FlowDebug 三个组件均支持 `enableVersion` 和 `flowVersion` props

package/dist/advanced.d.ts

@@ -1,5 +1,7 @@
 import { AxiosInstance, AxiosRequestConfig } from 'axios';
 
+type NodeExecutionStatus = 'CREATED' | 'RUNNING' | 'FINISHED' | 'FAILED' | 'SUSPENDED' | 'REVOKED';
+
 type PortOrientation = 'Top' | 'Right' | 'Bottom' | 'Left';
 
 type GatewayType = 'ExclusiveGateway' | 'ParallelGateway' | 'ConditionalParallelGateway' | 'ConvergeGateway';
@@ -60,6 +62,7 @@ interface Activity {
     seconds: number;
     action: string;
   };
+  status?: NodeExecutionStatus;
 }
 
 interface StartEvent {
@@ -69,6 +72,7 @@ interface StartEvent {
   outgoing: string;
   type: 'EmptyStartEvent';
   labels: [];
+  status?: NodeExecutionStatus;
 }
 
 interface EndEvent {
@@ -78,6 +82,7 @@ interface EndEvent {
   outgoing: string;
   type: 'EmptyEndEvent';
   labels: [];
+  status?: NodeExecutionStatus;
 }
 
 interface GatewayCondition {
@@ -100,6 +105,7 @@ interface Gateway {
   extra_info?: {
     parse_lang?: 'boolrule' | 'FEEL' | 'MAKO';
   };
+  status?: NodeExecutionStatus;
 }
 
 interface Flow {
@@ -222,7 +228,7 @@ interface NodeConfigData {
   id: string;
   type: string;
   name: string;
-  status?: string;
+  status?: NodeExecutionStatus;
   component?: Record<string, any>;
   error_ignorable?: boolean;
   isSkipped?: boolean;