@blueking/bkflow-canvas-editor 0.0.1 → 0.0.3-7.beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +672 -66
- package/dist/index.cjs.js +49 -15
- package/dist/index.esm.js +38125 -0
- package/dist/style.css +1 -0
- package/package.json +13 -6
- package/dist/bkflow-canvas-editor.css +0 -1
- package/dist/index.es.js +0 -12189
package/README.md
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
# bkflow-canvas-editor
|
|
2
2
|
|
|
3
|
-
bkflow
|
|
3
|
+
bkflow流程编辑组件，支持流程的编辑、查看、调试以及创建并执行任务。
|
|
4
4
|
|
|
5
5
|
## 安装
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install bkflow-canvas-editor
|
|
8
|
+
npm install @blueking/bkflow-canvas-editor
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
## 使用
|
|
@@ -64,13 +64,20 @@ npm install bkflow-canvas-editor
|
|
|
64
64
|
|
|
65
65
|
#### Props
|
|
66
66
|
|
|
67
|
-
| 参数
|
|
68
|
-
|
|
|
69
|
-
| `flowId`
|
|
70
|
-
| `apiConfig`
|
|
71
|
-
| `permissions`
|
|
72
|
-
| `
|
|
73
|
-
| `
|
|
67
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
68
|
+
| ------------------- | ---------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------- |
|
|
69
|
+
| `flowId` | `string` | - | **必需**，流程 ID |
|
|
70
|
+
| `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置) |
|
|
71
|
+
| `permissions` | `{ canEdit?: boolean }` | `{ canEdit: true }` | 权限配置对象，`canEdit` 控制头部编辑按钮是否使用禁用样式 |
|
|
72
|
+
| `thumbnail` | `boolean` | `false` | 缩略图模式，启用后只显示画布内容，不显示顶部 header 和操作按钮，禁用节点点击事件 |
|
|
73
|
+
| `enableVersion` | `boolean` | `false` | 是否开启流程版本功能，开启后会根据 `flowVersion` 的值获取对应版本的流程数据 |
|
|
74
|
+
| `flowVersion` | `string` | - | 流程版本号，仅在 `enableVersion` 为 `true` 时生效。为空时表示草稿版本，不为空时表示指定版本 |
|
|
75
|
+
| `showHeaderActions` | `boolean` | `true` | 是否显示头部操作按钮（编辑、执行流程、调试），仅在非缩略图模式下生效 |
|
|
76
|
+
| `defaultZoom` | `number` | `1` | x6 画布的默认缩放比例，用于控制画布的初始显示效果。取值范围建议在 0.25 到 1.5 之间 |
|
|
77
|
+
| `bkflowSaasUrl` | `string` | - | bkflow-saas-url，用于设置 `$.context.site_url` 的值，供插件内部使用 |
|
|
78
|
+
| `onEdit` | `() => void` | - | 编辑按钮点击回调（可选，也可以通过 `@edit` 事件监听） |
|
|
79
|
+
| `onBack` | `() => void` | - | 返回按钮点击回调（可选，也可以通过 `@back` 事件监听） |
|
|
80
|
+
| `onExecuteSuccess` | `(taskId: number, templateId: number) => void` | - | 执行成功回调（可选） |
|
|
74
81
|
|
|
75
82
|
#### Slots
|
|
76
83
|
|
|
@@ -81,14 +88,14 @@ npm install bkflow-canvas-editor
|
|
|
81
88
|
|
|
82
89
|
##### inputParams 插槽作用域参数
|
|
83
90
|
|
|
84
|
-
| 参数
|
|
85
|
-
|
|
|
86
|
-
| `node`
|
|
87
|
-
| `
|
|
88
|
-
| `inputs`
|
|
89
|
-
| `editable`
|
|
90
|
-
| `fullVariableList`
|
|
91
|
-
| `updateInputParams`
|
|
91
|
+
| 参数 | 类型 | 说明 |
|
|
92
|
+
| ------------------- | ----------------------------------------------------- | ------------------------------------------------------ |
|
|
93
|
+
| `node` | `Activity` | 当前节点数据 |
|
|
94
|
+
| `pluginDetail` | `PluginDetailCommon \| null` | 插件详情（统一类型，支持所有插件类型） |
|
|
95
|
+
| `inputs` | `UniformApiPluginInputsItem[]` | 输入参数表单配置列表 |
|
|
96
|
+
| `editable` | `boolean` | 是否可编辑 |
|
|
97
|
+
| `fullVariableList` | `{ key: string; name: string }[]` | 完整变量列表（系统变量 + 常量） |
|
|
98
|
+
| `updateInputParams` | `(data: Record<string, PluginInputDataItem>) => void` | 更新节点输入参数的方法（暂存，需点击确定按钮才会保存） |
|
|
92
99
|
|
|
93
100
|
#### Events
|
|
94
101
|
|
|
@@ -105,43 +112,60 @@ npm install bkflow-canvas-editor
|
|
|
105
112
|
|
|
106
113
|
#### Props
|
|
107
114
|
|
|
108
|
-
| 参数
|
|
109
|
-
|
|
|
110
|
-
| `flowId`
|
|
111
|
-
| `apiConfig`
|
|
112
|
-
| `permissions`
|
|
113
|
-
| `
|
|
114
|
-
| `
|
|
115
|
-
| `
|
|
116
|
-
| `
|
|
117
|
-
| `
|
|
115
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
116
|
+
| ----------------------- | -------------------------------------------------------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |
|
|
117
|
+
| `flowId` | `string` | - | **必需**，流程 ID |
|
|
118
|
+
| `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置) |
|
|
119
|
+
| `permissions` | `{ canSave?: boolean }` | `{ canSave: true }` | 权限配置对象，`canSave` 控制头部保存按钮是否可点击 |
|
|
120
|
+
| `enableDebug` | `boolean` | `false` | 是否启用调试功能，启用后显示可点击的调试按钮 |
|
|
121
|
+
| `enableVersion` | `boolean` | `false` | 是否开启流程版本功能，开启后会根据 `flowVersion` 的值获取对应版本的流程数据 |
|
|
122
|
+
| `flowVersion` | `string` | - | 流程版本号，仅在 `enableVersion` 为 `true` 时生效。为空时表示草稿版本，不为空时表示指定版本 |
|
|
123
|
+
| `onDebugConfirm` | `(formData: { name: string, variablesValue: Record<string, any> }) => Promise<void> \| void` | - | 调试面板确定按钮回调（可选） |
|
|
124
|
+
| `useCustomDebugConfirm` | `boolean` | `false` | 是否使用自定义回调替代调试面板原有逻辑。为 `true` 时只执行 `onDebugConfirm`，为 `false` 时在原有逻辑后执行 `onDebugConfirm` |
|
|
125
|
+
| `selectPanelConfig` | `SelectPanelConfig` | - | 插件选择面板配置（可选），详见 [SelectPanelConfig](#selectpanelconfig) |
|
|
126
|
+
| `onSave` | `(flowData: FlowTemplate) => void` | - | 保存回调（可选，也可以通过 `@save` 事件监听） |
|
|
127
|
+
| `onSaveSuccess` | `() => void` | - | 保存成功回调（可选，也可以通过 `@saveSuccess` 事件监听） |
|
|
128
|
+
| `onBack` | `() => void` | - | 返回按钮点击回调（可选，也可以通过 `@back` 事件监听） |
|
|
129
|
+
| `onBeforeLeave` | `(isEdited: boolean) => Promise<boolean>` | - | 离开前回调，返回 `false` 可阻止离开 |
|
|
130
|
+
| `defaultZoom` | `number` | `1` | x6 画布的默认缩放比例，用于控制画布的初始显示效果。取值范围建议在 0.25 到 1.5 之间 |
|
|
131
|
+
| `bkflowSaasUrl` | `string` | - | bkflow-saas-url，用于设置 `$.context.site_url` 的值，供插件内部使用 |
|
|
132
|
+
| `enableThirdPlugin` | `boolean` | `true` | 是否启用第三方插件。设置为 `false` 时，将不加载第三方插件列表和详情，只显示内置插件 |
|
|
118
133
|
|
|
119
134
|
#### Slots
|
|
120
135
|
|
|
121
|
-
| 插槽名
|
|
122
|
-
|
|
|
123
|
-
| `header`
|
|
124
|
-
| `inputParams`
|
|
136
|
+
| 插槽名 | 作用域参数 | 说明 |
|
|
137
|
+
| ------------------------ | ---------- | ---------------------------- |
|
|
138
|
+
| `header` | - | 自定义头部内容 |
|
|
139
|
+
| `inputParams` | 见下方说明 | 自定义节点输入参数组件 |
|
|
140
|
+
| `debugCustomFormContent` | 见下方说明 | 自定义调试组件的表单内容插槽 |
|
|
125
141
|
|
|
126
142
|
##### inputParams 插槽作用域参数
|
|
127
143
|
|
|
128
|
-
| 参数
|
|
129
|
-
|
|
|
130
|
-
| `node`
|
|
131
|
-
| `
|
|
132
|
-
| `inputs`
|
|
133
|
-
| `editable`
|
|
134
|
-
| `fullVariableList`
|
|
135
|
-
| `updateInputParams`
|
|
136
|
-
| `updateNodeInputParams`
|
|
144
|
+
| 参数 | 类型 | 说明 |
|
|
145
|
+
| ----------------------- | ------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
|
|
146
|
+
| `node` | `Activity` | 当前节点数据 |
|
|
147
|
+
| `pluginDetail` | `PluginDetailCommon \| null` | 插件详情（统一类型，支持所有插件类型） |
|
|
148
|
+
| `inputs` | `UniformApiPluginInputsItem[]` | 输入参数表单配置列表 |
|
|
149
|
+
| `editable` | `boolean` | 是否可编辑 |
|
|
150
|
+
| `fullVariableList` | `{ key: string; name: string }[]` | 完整变量列表（系统变量 + 常量） |
|
|
151
|
+
| `updateInputParams` | `(data: Record<string, PluginInputDataItem>) => void` | 更新节点输入参数的方法（暂存到节点配置面板，需点击确定按钮才会保存） |
|
|
152
|
+
| `updateNodeInputParams` | `(inputParams: Record<string, PluginInputDataItem>) => void` | 更新节点输入参数的方法（通过 edit 组件调用，暂存到节点配置面板，需点击确定按钮才会保存） |
|
|
153
|
+
|
|
154
|
+
##### debugCustomFormContent 插槽作用域参数
|
|
155
|
+
|
|
156
|
+
| 参数 | 类型 | 说明 |
|
|
157
|
+
| ---------------- | --------------------- | ---------- |
|
|
158
|
+
| `formData` | `{ name: string }` | 表单数据 |
|
|
159
|
+
| `variablesValue` | `Record<string, any>` | 变量值对象 |
|
|
137
160
|
|
|
138
161
|
#### Events
|
|
139
162
|
|
|
140
|
-
| 事件名
|
|
141
|
-
|
|
|
142
|
-
| `save`
|
|
143
|
-
| `saveSuccess`
|
|
144
|
-
| `back`
|
|
163
|
+
| 事件名 | 参数 | 说明 |
|
|
164
|
+
| ------------------ | ------------------------ | ---------------------------------- |
|
|
165
|
+
| `save` | `flowData: FlowTemplate` | 保存时触发，参数为流程数据 |
|
|
166
|
+
| `saveSuccess` | - | 保存成功时触发 |
|
|
167
|
+
| `back` | - | 点击返回按钮时触发 |
|
|
168
|
+
| `debugBeforeClose` | - | 调试面板关闭前触发，用于清理数据 |
|
|
145
169
|
|
|
146
170
|
#### 暴露的方法
|
|
147
171
|
|
|
@@ -154,28 +178,116 @@ npm install bkflow-canvas-editor
|
|
|
154
178
|
|
|
155
179
|
---
|
|
156
180
|
|
|
181
|
+
### SelectPanelConfig 类型
|
|
182
|
+
|
|
183
|
+
插件选择面板配置类型，用于配置插件选择面板中的按钮跳转链接和文本。
|
|
184
|
+
|
|
185
|
+
#### 类型定义
|
|
186
|
+
|
|
187
|
+
```typescript
|
|
188
|
+
interface SelectPanelConfig {
|
|
189
|
+
agentApplyUrl?: string; // 智能体插件分组，"点击申请" 按钮跳转链接（可选）
|
|
190
|
+
agentResourceUrl?: string; // "智能体" 按钮跳转链接（可选）
|
|
191
|
+
agentButtonText?: string; // "智能体" 按钮文本（可选，默认为 "智能体"）
|
|
192
|
+
knowledgebaseResourceUrl?: string; // 知识库插件分组，"知识库" 按钮跳转链接（可选）
|
|
193
|
+
}
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
#### 使用示例
|
|
197
|
+
|
|
198
|
+
```vue
|
|
199
|
+
<template>
|
|
200
|
+
<FlowEdit
|
|
201
|
+
:flow-id="flowId"
|
|
202
|
+
:api-config="apiConfig"
|
|
203
|
+
:select-panel-config="{
|
|
204
|
+
agentApplyUrl: 'https://example.com/apply',
|
|
205
|
+
agentResourceUrl: 'https://example.com/agent',
|
|
206
|
+
agentButtonText: '创建智能体',
|
|
207
|
+
knowledgebaseResourceUrl: 'https://example.com/knowledgebase',
|
|
208
|
+
}" />
|
|
209
|
+
</template>
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
#### 说明
|
|
213
|
+
|
|
214
|
+
- 如果 `selectPanelConfig` 未提供或某个字段未提供，组件将使用默认的路由跳转行为
|
|
215
|
+
- `agentButtonText` 默认值为 "智能体"
|
|
216
|
+
- 配置通过 Vue 的 provide/inject 机制全局提供，子组件可以直接通过 `useSelectPanelConfig()` 获取
|
|
217
|
+
|
|
218
|
+
---
|
|
219
|
+
|
|
157
220
|
### FlowExecute 组件
|
|
158
221
|
|
|
159
222
|
流程执行组件，用于执行流程任务。
|
|
160
223
|
|
|
161
224
|
#### Props
|
|
162
225
|
|
|
163
|
-
| 参数 | 类型 | 默认值 | 说明
|
|
164
|
-
| ------------------ | ---------------------------------------------- | ------- |
|
|
165
|
-
| `flowId` | `string` | - | **必需**，流程 ID
|
|
166
|
-
| `show` | `boolean` | - | **必需**，是否显示执行面板
|
|
167
|
-
| `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置)
|
|
168
|
-
| `editable` | `boolean` | `true` | 是否可编辑
|
|
169
|
-
| `showFlowEntry` | `boolean` | `false` | 是否显示流程入口
|
|
170
|
-
| `
|
|
226
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
227
|
+
| ------------------ | ---------------------------------------------- | ------- | ------------------------------------------------------------------- |
|
|
228
|
+
| `flowId` | `string` | - | **必需**，流程 ID |
|
|
229
|
+
| `show` | `boolean` | - | **必需**，是否显示执行面板 |
|
|
230
|
+
| `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置) |
|
|
231
|
+
| `editable` | `boolean` | `true` | 是否可编辑 |
|
|
232
|
+
| `showFlowEntry` | `boolean` | `false` | 是否显示流程入口 |
|
|
233
|
+
| `bkflowSaasUrl` | `string` | - | bkflow-saas-url，用于设置 `$.context.site_url` 的值，供插件内部使用 |
|
|
234
|
+
| `onExecuteSuccess` | `(taskId: number, templateId: number) => void` | - | 执行成功回调 |
|
|
235
|
+
|
|
236
|
+
#### Events
|
|
237
|
+
|
|
238
|
+
| 事件名 | 参数 | 说明 |
|
|
239
|
+
| -------------- | ------------------------------------ | ------------------------ |
|
|
240
|
+
| `confirm` | `taskId: number, templateId: number` | 执行确认时触发 |
|
|
241
|
+
| `close` | - | 关闭面板时触发 |
|
|
242
|
+
| `update:show` | `show: boolean` | 显示状态更新时触发 |
|
|
243
|
+
| `before-close` | - | 面板关闭前触发 |
|
|
244
|
+
| `view-flow` | - | 点击查看排障流程按钮触发 |
|
|
245
|
+
|
|
246
|
+
---
|
|
247
|
+
|
|
248
|
+
### FlowDebug 组件
|
|
249
|
+
|
|
250
|
+
流程调试组件，用于调试流程任务。基于 `FlowExecute` 组件实现，但增加了自定义表单插槽、自定义确定按钮回调及版本控制支持。
|
|
251
|
+
|
|
252
|
+
#### Props
|
|
253
|
+
|
|
254
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
255
|
+
| ------------------ | -------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- |
|
|
256
|
+
| `flowId` | `string` | - | **必需**，流程 ID |
|
|
257
|
+
| `show` | `boolean` | - | **必需**，是否显示调试面板 |
|
|
258
|
+
| `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置) |
|
|
259
|
+
| `editable` | `boolean` | `true` | 是否可编辑 |
|
|
260
|
+
| `showFlowEntry` | `boolean` | `false` | 是否显示流程入口 |
|
|
261
|
+
| `bkflowSaasUrl` | `string` | - | bkflow-saas-url，用于设置 `$.context.site_url` 的值，供插件内部使用 |
|
|
262
|
+
| `onConfirm` | `(formData: { name: string, variablesValue: Record<string, any> }) => Promise<void> \| void` | - | 自定义确定按钮回调（可选） |
|
|
263
|
+
| `useCustomConfirm` | `boolean` | `false` | 是否使用自定义回调替代原有逻辑。为 `true` 时只执行 `onConfirm`，为 `false` 时在原有逻辑后执行 `onConfirm` |
|
|
264
|
+
| `onExecuteSuccess` | `(taskId: number, templateId: number) => void` | - | 执行成功回调（可选，仅在 `useCustomConfirm` 为 `false` 时生效） |
|
|
265
|
+
| `enableVersion` | `boolean` | `false` | 是否开启流程版本功能，开启后会根据 `flowVersion` 的值获取对应版本的流程数据 |
|
|
266
|
+
| `flowVersion` | `string` | - | 流程版本号，仅在 `enableVersion` 为 `true` 时生效。为空时表示草稿版本，不为空时表示指定版本 |
|
|
267
|
+
|
|
268
|
+
#### Slots
|
|
269
|
+
|
|
270
|
+
| 插槽名 | 作用域参数 | 说明 |
|
|
271
|
+
| --------------------- | --------------------------------------------------------------------- | ------------------------------------ |
|
|
272
|
+
| `custom-form-content` | `{ formData: { name: string }, variablesValue: Record<string, any> }` | 自定义表单内容，位于请求参数表单下方 |
|
|
171
273
|
|
|
172
274
|
#### Events
|
|
173
275
|
|
|
174
|
-
| 事件名
|
|
175
|
-
|
|
|
176
|
-
| `confirm`
|
|
177
|
-
| `close`
|
|
178
|
-
| `update:show`
|
|
276
|
+
| 事件名 | 参数 | 说明 |
|
|
277
|
+
| -------------- | ------------------------------------ | ------------------------------------------------------- |
|
|
278
|
+
| `confirm` | `taskId: number, templateId: number` | 执行确认时触发（仅在 `useCustomConfirm` 为 `false` 时） |
|
|
279
|
+
| `close` | - | 关闭面板时触发 |
|
|
280
|
+
| `update:show` | `show: boolean` | 显示状态更新时触发 |
|
|
281
|
+
| `before-close` | - | 面板关闭前触发，用于清理数据 |
|
|
282
|
+
|
|
283
|
+
#### 使用说明
|
|
284
|
+
|
|
285
|
+
- **自定义表单插槽**：可以在 `custom-form-content` 插槽中传入自定义的表单内容，插槽会接收 `formData` 和 `variablesValue` 作为作用域参数
|
|
286
|
+
- **自定义确定按钮回调**：
|
|
287
|
+
- 当 `useCustomConfirm` 为 `false`（默认）时，`onConfirm` 会在原有的执行逻辑（创建任务并执行）完成后调用
|
|
288
|
+
- 当 `useCustomConfirm` 为 `true` 时，点击确定按钮只会执行 `onConfirm` 回调，不会执行原有的创建和执行任务逻辑
|
|
289
|
+
- **表单验证**：无论使用哪种模式，都会先进行表单验证，验证通过后才会执行相应逻辑
|
|
290
|
+
- **版本控制**：当 `enableVersion` 为 `true` 时，会使用与 FlowView/FlowEdit 相同的版本数据获取逻辑，确保调试时使用正确版本的流程数据
|
|
179
291
|
|
|
180
292
|
---
|
|
181
293
|
|
|
@@ -188,7 +300,7 @@ npm install bkflow-canvas-editor
|
|
|
188
300
|
<FlowEdit
|
|
189
301
|
:flow-id="flowId"
|
|
190
302
|
:api-config="apiConfig"
|
|
191
|
-
:permissions="{
|
|
303
|
+
:permissions="{ canSave: true }"
|
|
192
304
|
@save="handleSave"
|
|
193
305
|
@save-success="handleSaveSuccess"
|
|
194
306
|
@back="handleBack" />
|
|
@@ -230,13 +342,13 @@ npm install bkflow-canvas-editor
|
|
|
230
342
|
ref="flowEditRef"
|
|
231
343
|
:flow-id="flowId"
|
|
232
344
|
:api-config="apiConfig"
|
|
233
|
-
:permissions="{
|
|
345
|
+
:permissions="{ canSave: true }"
|
|
234
346
|
@save="handleSave">
|
|
235
347
|
<!-- 自定义输入参数组件 -->
|
|
236
348
|
<template
|
|
237
349
|
#inputParams="{
|
|
238
350
|
node,
|
|
239
|
-
|
|
351
|
+
pluginDetail,
|
|
240
352
|
inputs,
|
|
241
353
|
editable,
|
|
242
354
|
fullVariableList,
|
|
@@ -245,7 +357,7 @@ npm install bkflow-canvas-editor
|
|
|
245
357
|
}">
|
|
246
358
|
<CustomInputParams
|
|
247
359
|
:node="node"
|
|
248
|
-
:plugin-detail="
|
|
360
|
+
:plugin-detail="pluginDetail"
|
|
249
361
|
:inputs="inputs"
|
|
250
362
|
:editable="editable"
|
|
251
363
|
:full-variable-list="fullVariableList"
|
|
@@ -342,6 +454,472 @@ npm install bkflow-canvas-editor
|
|
|
342
454
|
</template>
|
|
343
455
|
```
|
|
344
456
|
|
|
457
|
+
### 使用缩略图模式
|
|
458
|
+
|
|
459
|
+
缩略图模式适用于只需要展示画布内容的场景，不显示顶部 header 和操作按钮，禁用节点点击事件：
|
|
460
|
+
|
|
461
|
+
```vue
|
|
462
|
+
<template>
|
|
463
|
+
<FlowView :flow-id="flowId" :api-config="apiConfig" :thumbnail="true" />
|
|
464
|
+
</template>
|
|
465
|
+
|
|
466
|
+
<script setup>
|
|
467
|
+
import { FlowView } from 'bkflow-canvas-editor';
|
|
468
|
+
import 'bkflow-canvas-editor/style';
|
|
469
|
+
|
|
470
|
+
const flowId = '123';
|
|
471
|
+
const apiConfig = {
|
|
472
|
+
scopeData: {
|
|
473
|
+
scope_type: 'space',
|
|
474
|
+
scope_value: 123,
|
|
475
|
+
},
|
|
476
|
+
};
|
|
477
|
+
</script>
|
|
478
|
+
```
|
|
479
|
+
|
|
480
|
+
### 使用流程版本功能
|
|
481
|
+
|
|
482
|
+
当需要查看、编辑或调试特定版本的流程时，可以使用版本功能：
|
|
483
|
+
|
|
484
|
+
```vue
|
|
485
|
+
<template>
|
|
486
|
+
<!-- 查看指定版本的流程 -->
|
|
487
|
+
<FlowView :flow-id="flowId" :api-config="apiConfig" :enable-version="true" :flow-version="'v1.0.0'" />
|
|
488
|
+
|
|
489
|
+
<!-- 查看草稿版本的流程 -->
|
|
490
|
+
<FlowView :flow-id="flowId" :api-config="apiConfig" :enable-version="true" />
|
|
491
|
+
|
|
492
|
+
<!-- 编辑指定版本的流程 -->
|
|
493
|
+
<FlowEdit :flow-id="flowId" :api-config="apiConfig" :enable-version="true" :flow-version="'v1.0.0'" />
|
|
494
|
+
|
|
495
|
+
<!-- 调试草稿版本的流程 -->
|
|
496
|
+
<FlowDebug :flow-id="flowId" :show="isDebugShow" :api-config="apiConfig" :enable-version="true" />
|
|
497
|
+
|
|
498
|
+
<!-- 调试指定版本的流程 -->
|
|
499
|
+
<FlowDebug
|
|
500
|
+
:flow-id="flowId"
|
|
501
|
+
:show="isDebugShow"
|
|
502
|
+
:api-config="apiConfig"
|
|
503
|
+
:enable-version="true"
|
|
504
|
+
:flow-version="'v1.0.0'" />
|
|
505
|
+
</template>
|
|
506
|
+
|
|
507
|
+
<script setup>
|
|
508
|
+
import { ref } from 'vue';
|
|
509
|
+
import { FlowView, FlowEdit, FlowDebug } from 'bkflow-canvas-editor';
|
|
510
|
+
|
|
511
|
+
const flowId = '123';
|
|
512
|
+
const isDebugShow = ref(false);
|
|
513
|
+
const apiConfig = {
|
|
514
|
+
scopeData: {
|
|
515
|
+
scope_type: 'space',
|
|
516
|
+
scope_value: 123,
|
|
517
|
+
},
|
|
518
|
+
};
|
|
519
|
+
</script>
|
|
520
|
+
```
|
|
521
|
+
|
|
522
|
+
### 控制头部操作按钮显示
|
|
523
|
+
|
|
524
|
+
在 `FlowView` 组件中，可以通过 `showHeaderActions` props 控制头部操作按钮（编辑、执行流程、调试）的显示：
|
|
525
|
+
|
|
526
|
+
```vue
|
|
527
|
+
<template>
|
|
528
|
+
<!-- 隐藏头部操作按钮 -->
|
|
529
|
+
<FlowView :flow-id="flowId" :api-config="apiConfig" :show-header-actions="false" />
|
|
530
|
+
</template>
|
|
531
|
+
|
|
532
|
+
<script setup>
|
|
533
|
+
import { FlowView } from 'bkflow-canvas-editor';
|
|
534
|
+
|
|
535
|
+
const flowId = '123';
|
|
536
|
+
const apiConfig = {
|
|
537
|
+
scopeData: {
|
|
538
|
+
scope_type: 'space',
|
|
539
|
+
scope_value: 123,
|
|
540
|
+
},
|
|
541
|
+
};
|
|
542
|
+
</script>
|
|
543
|
+
```
|
|
544
|
+
|
|
545
|
+
### 设置画布默认缩放比例
|
|
546
|
+
|
|
547
|
+
可以通过 `defaultZoom` props 控制 x6 画布的初始缩放比例，用于调整画布的默认显示效果：
|
|
548
|
+
|
|
549
|
+
```vue
|
|
550
|
+
<template>
|
|
551
|
+
<!-- 设置画布默认缩放为 80% -->
|
|
552
|
+
<FlowView :flow-id="flowId" :api-config="apiConfig" :default-zoom="0.8" />
|
|
553
|
+
|
|
554
|
+
<!-- 设置画布默认缩放为 75% -->
|
|
555
|
+
<FlowEdit :flow-id="flowId" :api-config="apiConfig" :default-zoom="0.75" />
|
|
556
|
+
</template>
|
|
557
|
+
|
|
558
|
+
<script setup>
|
|
559
|
+
import { FlowView, FlowEdit } from 'bkflow-canvas-editor';
|
|
560
|
+
|
|
561
|
+
const flowId = '123';
|
|
562
|
+
const apiConfig = {
|
|
563
|
+
scopeData: {
|
|
564
|
+
scope_type: 'space',
|
|
565
|
+
scope_value: 123,
|
|
566
|
+
},
|
|
567
|
+
};
|
|
568
|
+
</script>
|
|
569
|
+
```
|
|
570
|
+
|
|
571
|
+
> **注意**：`defaultZoom` 的取值范围建议在 0.25 到 1.5 之间，这是 x6 画布配置的最小和最大缩放比例限制。
|
|
572
|
+
|
|
573
|
+
### 设置 bkflow-saas-url
|
|
574
|
+
|
|
575
|
+
可以通过 `bkflowSaasUrl` props 设置 `$.context.site_url` 的值，供插件内部使用：
|
|
576
|
+
|
|
577
|
+
```vue
|
|
578
|
+
<template>
|
|
579
|
+
<FlowView :flow-id="flowId" :api-config="apiConfig" :bkflow-saas-url="'https://example.com/bkflow'" />
|
|
580
|
+
|
|
581
|
+
<FlowEdit :flow-id="flowId" :api-config="apiConfig" :bkflow-saas-url="'https://example.com/bkflow'" />
|
|
582
|
+
|
|
583
|
+
<FlowExecute
|
|
584
|
+
:flow-id="flowId"
|
|
585
|
+
:show="isExecuteShow"
|
|
586
|
+
:api-config="apiConfig"
|
|
587
|
+
:bkflow-saas-url="'https://example.com/bkflow'" />
|
|
588
|
+
|
|
589
|
+
<FlowDebug
|
|
590
|
+
:flow-id="flowId"
|
|
591
|
+
:show="isDebugShow"
|
|
592
|
+
:api-config="apiConfig"
|
|
593
|
+
:bkflow-saas-url="'https://example.com/bkflow'" />
|
|
594
|
+
</template>
|
|
595
|
+
|
|
596
|
+
<script setup>
|
|
597
|
+
import { ref } from 'vue';
|
|
598
|
+
import { FlowView, FlowEdit, FlowExecute, FlowDebug } from 'bkflow-canvas-editor';
|
|
599
|
+
|
|
600
|
+
const flowId = '123';
|
|
601
|
+
const isExecuteShow = ref(false);
|
|
602
|
+
const isDebugShow = ref(false);
|
|
603
|
+
const apiConfig = {
|
|
604
|
+
scopeData: {
|
|
605
|
+
scope_type: 'space',
|
|
606
|
+
scope_value: 123,
|
|
607
|
+
},
|
|
608
|
+
};
|
|
609
|
+
</script>
|
|
610
|
+
```
|
|
611
|
+
|
|
612
|
+
> **说明**：`bkflowSaasUrl` 会被设置到 `window.$.context.site_url` 中，供插件内部使用。如果不提供，`site_url` 默认为空字符串。
|
|
613
|
+
|
|
614
|
+
### 禁用第三方插件
|
|
615
|
+
|
|
616
|
+
可以通过 `enableThirdPlugin` props 控制是否加载第三方插件。当设置为 `false` 时，将不加载第三方插件列表和详情，只显示内置插件：
|
|
617
|
+
|
|
618
|
+
```vue
|
|
619
|
+
<template>
|
|
620
|
+
<FlowEdit :flow-id="flowId" :api-config="apiConfig" :enable-third-plugin="false" />
|
|
621
|
+
</template>
|
|
622
|
+
|
|
623
|
+
<script setup>
|
|
624
|
+
import { FlowEdit } from 'bkflow-canvas-editor';
|
|
625
|
+
|
|
626
|
+
const flowId = '123';
|
|
627
|
+
const apiConfig = {
|
|
628
|
+
scopeData: {
|
|
629
|
+
scope_type: 'space',
|
|
630
|
+
scope_value: 123,
|
|
631
|
+
},
|
|
632
|
+
};
|
|
633
|
+
</script>
|
|
634
|
+
```
|
|
635
|
+
|
|
636
|
+
> **说明**：
|
|
637
|
+
>
|
|
638
|
+
> - `enableThirdPlugin` 默认值为 `true`，即默认启用第三方插件
|
|
639
|
+
> - 当设置为 `false` 时：
|
|
640
|
+
> - 插件选择面板中的第三方插件标签将不会显示
|
|
641
|
+
> - 不会请求第三方插件列表和详情
|
|
642
|
+
> - 如果流程中已存在第三方插件节点，尝试打开节点配置时会提示错误
|
|
643
|
+
> - 也可以通过 `apiConfig.enableThirdPlugin` 来设置，效果相同
|
|
644
|
+
|
|
645
|
+
### 使用 FlowEdit 的调试功能
|
|
646
|
+
|
|
647
|
+
启用 FlowEdit 组件的调试功能，点击调试按钮会打开 FlowDebug 组件：
|
|
648
|
+
|
|
649
|
+
```vue
|
|
650
|
+
<template>
|
|
651
|
+
<FlowEdit
|
|
652
|
+
:flow-id="flowId"
|
|
653
|
+
:api-config="apiConfig"
|
|
654
|
+
:enable-debug="true"
|
|
655
|
+
:on-debug-confirm="handleDebugConfirm"
|
|
656
|
+
:use-custom-debug-confirm="false"
|
|
657
|
+
@save="handleSave">
|
|
658
|
+
<!-- 可选：自定义调试组件的表单内容 -->
|
|
659
|
+
<template #debugCustomFormContent="{ formData, variablesValue }">
|
|
660
|
+
<div class="custom-debug-form">
|
|
661
|
+
<h4>自定义调试参数</h4>
|
|
662
|
+
<bk-form-item label="调试模式">
|
|
663
|
+
<bk-select v-model="debugMode">
|
|
664
|
+
<bk-option label="快速调试" value="quick" />
|
|
665
|
+
<bk-option label="完整调试" value="full" />
|
|
666
|
+
</bk-select>
|
|
667
|
+
</bk-form-item>
|
|
668
|
+
</div>
|
|
669
|
+
</template>
|
|
670
|
+
</FlowEdit>
|
|
671
|
+
</template>
|
|
672
|
+
|
|
673
|
+
<script setup>
|
|
674
|
+
import { ref } from 'vue';
|
|
675
|
+
import { FlowEdit } from 'bkflow-canvas-editor';
|
|
676
|
+
|
|
677
|
+
const flowId = '123';
|
|
678
|
+
const debugMode = ref('quick');
|
|
679
|
+
const apiConfig = {
|
|
680
|
+
scopeData: {
|
|
681
|
+
scope_type: 'space',
|
|
682
|
+
scope_value: 123,
|
|
683
|
+
},
|
|
684
|
+
};
|
|
685
|
+
|
|
686
|
+
const handleSave = (flowData) => {
|
|
687
|
+
console.log('保存流程:', flowData);
|
|
688
|
+
};
|
|
689
|
+
|
|
690
|
+
// 调试面板确定按钮回调（在原有逻辑执行后调用）
|
|
691
|
+
const handleDebugConfirm = async (formData) => {
|
|
692
|
+
console.log('调试任务已创建并执行');
|
|
693
|
+
console.log('任务名称:', formData.name);
|
|
694
|
+
console.log('变量值:', formData.variablesValue);
|
|
695
|
+
};
|
|
696
|
+
</script>
|
|
697
|
+
```
|
|
698
|
+
|
|
699
|
+
#### 使用自定义调试回调（替代原有逻辑）
|
|
700
|
+
|
|
701
|
+
如果需要完全自定义调试面板的确定按钮行为，可以设置 `useCustomDebugConfirm` 为 `true`：
|
|
702
|
+
|
|
703
|
+
```vue
|
|
704
|
+
<template>
|
|
705
|
+
<FlowEdit
|
|
706
|
+
:flow-id="flowId"
|
|
707
|
+
:api-config="apiConfig"
|
|
708
|
+
:enable-debug="true"
|
|
709
|
+
:on-debug-confirm="handleCustomDebugConfirm"
|
|
710
|
+
:use-custom-debug-confirm="true"
|
|
711
|
+
@save="handleSave" />
|
|
712
|
+
</template>
|
|
713
|
+
|
|
714
|
+
<script setup>
|
|
715
|
+
import { FlowEdit } from 'bkflow-canvas-editor';
|
|
716
|
+
|
|
717
|
+
const flowId = '123';
|
|
718
|
+
const apiConfig = {
|
|
719
|
+
scopeData: {
|
|
720
|
+
scope_type: 'space',
|
|
721
|
+
scope_value: 123,
|
|
722
|
+
},
|
|
723
|
+
};
|
|
724
|
+
|
|
725
|
+
const handleSave = (flowData) => {
|
|
726
|
+
console.log('保存流程:', flowData);
|
|
727
|
+
};
|
|
728
|
+
|
|
729
|
+
// 自定义调试回调（替代原有创建和执行任务逻辑）
|
|
730
|
+
const handleCustomDebugConfirm = async (formData) => {
|
|
731
|
+
console.log('执行自定义调试逻辑');
|
|
732
|
+
console.log('任务名称:', formData.name);
|
|
733
|
+
console.log('变量值:', formData.variablesValue);
|
|
734
|
+
|
|
735
|
+
// 执行自定义逻辑，例如发送到调试服务
|
|
736
|
+
// await sendToDebugService(formData);
|
|
737
|
+
};
|
|
738
|
+
</script>
|
|
739
|
+
```
|
|
740
|
+
|
|
741
|
+
### 使用 FlowDebug 组件
|
|
742
|
+
|
|
743
|
+
#### 基础使用
|
|
744
|
+
|
|
745
|
+
```vue
|
|
746
|
+
<template>
|
|
747
|
+
<FlowDebug
|
|
748
|
+
:flow-id="flowId"
|
|
749
|
+
:show="isDebugShow"
|
|
750
|
+
:api-config="apiConfig"
|
|
751
|
+
@close="isDebugShow = false"
|
|
752
|
+
@update:show="isDebugShow = $event" />
|
|
753
|
+
</template>
|
|
754
|
+
|
|
755
|
+
<script setup>
|
|
756
|
+
import { ref } from 'vue';
|
|
757
|
+
import { FlowDebug } from 'bkflow-canvas-editor';
|
|
758
|
+
|
|
759
|
+
const flowId = '123';
|
|
760
|
+
const isDebugShow = ref(false);
|
|
761
|
+
const apiConfig = {
|
|
762
|
+
scopeData: {
|
|
763
|
+
scope_type: 'space',
|
|
764
|
+
scope_value: 123,
|
|
765
|
+
},
|
|
766
|
+
};
|
|
767
|
+
</script>
|
|
768
|
+
```
|
|
769
|
+
|
|
770
|
+
#### 使用自定义表单插槽
|
|
771
|
+
|
|
772
|
+
```vue
|
|
773
|
+
<template>
|
|
774
|
+
<FlowDebug :flow-id="flowId" :show="isDebugShow" :api-config="apiConfig" @close="isDebugShow = false">
|
|
775
|
+
<template #custom-form-content="{ formData, variablesValue }">
|
|
776
|
+
<div class="custom-debug-form">
|
|
777
|
+
<h4>自定义调试参数</h4>
|
|
778
|
+
<bk-form-item label="调试模式">
|
|
779
|
+
<bk-select v-model="debugMode">
|
|
780
|
+
<bk-option label="快速调试" value="quick" />
|
|
781
|
+
<bk-option label="完整调试" value="full" />
|
|
782
|
+
</bk-select>
|
|
783
|
+
</bk-form-item>
|
|
784
|
+
<bk-form-item label="调试备注">
|
|
785
|
+
<bk-input v-model="debugNote" placeholder="请输入调试备注" />
|
|
786
|
+
</bk-form-item>
|
|
787
|
+
</div>
|
|
788
|
+
</template>
|
|
789
|
+
</FlowDebug>
|
|
790
|
+
</template>
|
|
791
|
+
|
|
792
|
+
<script setup>
|
|
793
|
+
import { ref } from 'vue';
|
|
794
|
+
import { FlowDebug } from 'bkflow-canvas-editor';
|
|
795
|
+
|
|
796
|
+
const flowId = '123';
|
|
797
|
+
const isDebugShow = ref(false);
|
|
798
|
+
const debugMode = ref('quick');
|
|
799
|
+
const debugNote = ref('');
|
|
800
|
+
const apiConfig = {
|
|
801
|
+
scopeData: {
|
|
802
|
+
scope_type: 'space',
|
|
803
|
+
scope_value: 123,
|
|
804
|
+
},
|
|
805
|
+
};
|
|
806
|
+
</script>
|
|
807
|
+
```
|
|
808
|
+
|
|
809
|
+
#### 使用自定义确定按钮回调
|
|
810
|
+
|
|
811
|
+
```vue
|
|
812
|
+
<template>
|
|
813
|
+
<FlowDebug
|
|
814
|
+
:flow-id="flowId"
|
|
815
|
+
:show="isDebugShow"
|
|
816
|
+
:api-config="apiConfig"
|
|
817
|
+
:use-custom-confirm="true"
|
|
818
|
+
:on-confirm="handleCustomConfirm"
|
|
819
|
+
@close="isDebugShow = false" />
|
|
820
|
+
</template>
|
|
821
|
+
|
|
822
|
+
<script setup>
|
|
823
|
+
import { ref } from 'vue';
|
|
824
|
+
import { FlowDebug } from 'bkflow-canvas-editor';
|
|
825
|
+
|
|
826
|
+
const flowId = '123';
|
|
827
|
+
const isDebugShow = ref(false);
|
|
828
|
+
const apiConfig = {
|
|
829
|
+
scopeData: {
|
|
830
|
+
scope_type: 'space',
|
|
831
|
+
scope_value: 123,
|
|
832
|
+
},
|
|
833
|
+
};
|
|
834
|
+
|
|
835
|
+
// 自定义确定按钮回调
|
|
836
|
+
const handleCustomConfirm = async (formData) => {
|
|
837
|
+
console.log('任务名称:', formData.name);
|
|
838
|
+
console.log('变量值:', formData.variablesValue);
|
|
839
|
+
|
|
840
|
+
// 执行自定义逻辑，例如发送到调试服务
|
|
841
|
+
// await sendToDebugService(formData);
|
|
842
|
+
|
|
843
|
+
// 关闭面板
|
|
844
|
+
isDebugShow.value = false;
|
|
845
|
+
};
|
|
846
|
+
</script>
|
|
847
|
+
```
|
|
848
|
+
|
|
849
|
+
#### 使用额外回调（不替代原有逻辑）
|
|
850
|
+
|
|
851
|
+
```vue
|
|
852
|
+
<template>
|
|
853
|
+
<FlowDebug
|
|
854
|
+
:flow-id="flowId"
|
|
855
|
+
:show="isDebugShow"
|
|
856
|
+
:api-config="apiConfig"
|
|
857
|
+
:use-custom-confirm="false"
|
|
858
|
+
:on-confirm="handleAdditionalConfirm"
|
|
859
|
+
@close="isDebugShow = false" />
|
|
860
|
+
</template>
|
|
861
|
+
|
|
862
|
+
<script setup>
|
|
863
|
+
import { ref } from 'vue';
|
|
864
|
+
import { FlowDebug } from 'bkflow-canvas-editor';
|
|
865
|
+
|
|
866
|
+
const flowId = '123';
|
|
867
|
+
const isDebugShow = ref(false);
|
|
868
|
+
const apiConfig = {
|
|
869
|
+
scopeData: {
|
|
870
|
+
scope_type: 'space',
|
|
871
|
+
scope_value: 123,
|
|
872
|
+
},
|
|
873
|
+
};
|
|
874
|
+
|
|
875
|
+
// 额外回调：在原有执行逻辑完成后调用
|
|
876
|
+
const handleAdditionalConfirm = async (formData) => {
|
|
877
|
+
console.log('任务已创建并执行，执行额外逻辑');
|
|
878
|
+
console.log('任务名称:', formData.name);
|
|
879
|
+
console.log('变量值:', formData.variablesValue);
|
|
880
|
+
|
|
881
|
+
// 例如：记录调试日志、发送通知等
|
|
882
|
+
};
|
|
883
|
+
</script>
|
|
884
|
+
```
|
|
885
|
+
|
|
886
|
+
#### 使用版本控制的调试
|
|
887
|
+
|
|
888
|
+
```vue
|
|
889
|
+
<template>
|
|
890
|
+
<!-- 调试草稿版本的流程 -->
|
|
891
|
+
<FlowDebug
|
|
892
|
+
:flow-id="flowId"
|
|
893
|
+
:show="isDebugShow"
|
|
894
|
+
:api-config="apiConfig"
|
|
895
|
+
:enable-version="true"
|
|
896
|
+
@close="isDebugShow = false" />
|
|
897
|
+
|
|
898
|
+
<!-- 调试指定版本的流程 -->
|
|
899
|
+
<FlowDebug
|
|
900
|
+
:flow-id="flowId"
|
|
901
|
+
:show="isDebugShow"
|
|
902
|
+
:api-config="apiConfig"
|
|
903
|
+
:enable-version="true"
|
|
904
|
+
:flow-version="'v1.0.0'"
|
|
905
|
+
@close="isDebugShow = false" />
|
|
906
|
+
</template>
|
|
907
|
+
|
|
908
|
+
<script setup>
|
|
909
|
+
import { ref } from 'vue';
|
|
910
|
+
import { FlowDebug } from 'bkflow-canvas-editor';
|
|
911
|
+
|
|
912
|
+
const flowId = '123';
|
|
913
|
+
const isDebugShow = ref(false);
|
|
914
|
+
const apiConfig = {
|
|
915
|
+
scopeData: {
|
|
916
|
+
scope_type: 'space',
|
|
917
|
+
scope_value: 123,
|
|
918
|
+
},
|
|
919
|
+
};
|
|
920
|
+
</script>
|
|
921
|
+
```
|
|
922
|
+
|
|
345
923
|
## API 配置
|
|
346
924
|
|
|
347
925
|
### FlowApiConfig
|
|
@@ -356,6 +934,8 @@ interface FlowApiConfig {
|
|
|
356
934
|
axiosInstance?: AxiosInstance;
|
|
357
935
|
/** axios 配置（可选，用于创建新的 axios 实例） */
|
|
358
936
|
axiosConfig?: AxiosRequestConfig;
|
|
937
|
+
/** CSRF cookie 名称（可选，用于创建新的 axios 实例时设置 xsrfCookieName） */
|
|
938
|
+
xsrfCookieName?: string;
|
|
359
939
|
/** 作用域数据（必需，由外部传入） */
|
|
360
940
|
scopeData: {
|
|
361
941
|
scope_type: string;
|
|
@@ -363,16 +943,20 @@ interface FlowApiConfig {
|
|
|
363
943
|
};
|
|
364
944
|
/** 用户查询 API 地址（可选） */
|
|
365
945
|
fetchUserApi?: string;
|
|
946
|
+
/** 是否启用第三方插件（可选，默认为 true） */
|
|
947
|
+
enableThirdPlugin?: boolean;
|
|
366
948
|
}
|
|
367
949
|
```
|
|
368
950
|
|
|
369
951
|
组件内部会自动实现所有 API 方法，包括：
|
|
370
952
|
|
|
371
953
|
- `fetchFlowDetail` - 获取流程详情
|
|
954
|
+
- `fetchFlowDraftDetail` - 获取流程草稿详情（可选，用于版本功能）
|
|
955
|
+
- `fetchFlowDetailByVersion` - 获取指定版本的流程详情（可选，用于版本功能）
|
|
372
956
|
- `fetchSpaceFlowConfig` - 获取空间配置
|
|
373
957
|
- `fetchSystemVariables` - 获取系统变量
|
|
374
958
|
- `saveFlow` - 保存流程（仅 FlowEdit）
|
|
375
|
-
- `
|
|
959
|
+
- `fetchPluginGroupList` - 获取插件分类列表（仅 FlowEdit）
|
|
376
960
|
- `fetchCategoryPlugins` - 获取分类插件（仅 FlowEdit）
|
|
377
961
|
- `fetchPluginDetail` - 获取插件详情（可选）
|
|
378
962
|
- `fetchApplyInstructionData` - 获取指令数据（可选）
|
|
@@ -384,6 +968,19 @@ interface FlowApiConfig {
|
|
|
384
968
|
|
|
385
969
|
所有 API 请求会自动合并 `scopeData` 到请求参数中。
|
|
386
970
|
|
|
971
|
+
### 流程版本功能说明
|
|
972
|
+
|
|
973
|
+
当 `enableVersion` 为 `true` 时，FlowView、FlowEdit 和 FlowDebug 组件会使用版本相关的 API 来获取流程数据：
|
|
974
|
+
|
|
975
|
+
1. **总是先调用 `fetchFlowDetail`**：获取基础流程详情数据
|
|
976
|
+
2. **根据 `flowVersion` 的值决定是否调用版本接口**：
|
|
977
|
+
- 如果 `flowVersion` 不为空：调用 `fetchFlowDetailByVersion` 获取指定版本的 `name` 和 `pipeline_tree` 字段，覆盖基础数据
|
|
978
|
+
- 如果 `flowVersion` 为空：调用 `fetchFlowDraftDetail` 获取草稿版本的 `pipeline_tree` 字段，覆盖基础数据
|
|
979
|
+
|
|
980
|
+
这种设计确保了即使在使用版本功能时，也能获取到完整的流程基础信息，同时用版本特定的数据覆盖相应字段。
|
|
981
|
+
|
|
982
|
+
> **注意**：FlowEdit 组件会将 `enableVersion` 和 `flowVersion` 自动透传给内嵌的 FlowDebug 组件，因此在 FlowEdit 中启用版本功能后，调试面板也会自动使用对应版本的流程数据。
|
|
983
|
+
|
|
387
984
|
## 类型定义
|
|
388
985
|
|
|
389
986
|
所有类型定义都可以从包中导入：
|
|
@@ -393,7 +990,7 @@ import type {
|
|
|
393
990
|
FlowTemplate,
|
|
394
991
|
SpaceFlowConfig,
|
|
395
992
|
PluginGroupConfig,
|
|
396
|
-
|
|
993
|
+
PluginMetaItem,
|
|
397
994
|
UpdateFlowParams,
|
|
398
995
|
FlowApiConfig,
|
|
399
996
|
Variable,
|
|
@@ -401,7 +998,8 @@ import type {
|
|
|
401
998
|
Activity,
|
|
402
999
|
PluginInputDataItem,
|
|
403
1000
|
UniformApiPluginInputsItem,
|
|
404
|
-
|
|
1001
|
+
PluginDetailCommon,
|
|
1002
|
+
SelectPanelConfig,
|
|
405
1003
|
// ... 更多类型
|
|
406
1004
|
} from 'bkflow-canvas-editor';
|
|
407
1005
|
```
|
|
@@ -446,7 +1044,15 @@ resolve: {
|
|
|
446
1044
|
9. **API 配置类型说明**：
|
|
447
1045
|
- 外部使用者只需要使用 `FlowApiConfig` 类型
|
|
448
1046
|
- `FlowViewApiConfig` 和 `FlowEditApiConfig` 是组件内部使用的类型，通过 `useFlowApi` 自动转换
|
|
449
|
-
-
|
|
1047
|
+
- `FlowExecute` 和 `FlowDebug` 组件可以直接接受 `FlowApiConfig` 类型，组件内部会自动处理
|
|
1048
|
+
10. **调试功能**：
|
|
1049
|
+
- `FlowEdit` 组件的 `enableDebug` props 默认为 `false`，设置为 `true` 后才会显示可点击的调试按钮
|
|
1050
|
+
- 点击调试按钮会打开 `FlowDebug` 组件，该组件提供了与 `FlowExecute` 相同的交互，但支持自定义表单插槽和自定义确定按钮回调
|
|
1051
|
+
- `FlowDebug` 组件的 `useCustomConfirm` 为 `false` 时，会先执行原有的创建和执行任务逻辑，然后执行 `onConfirm` 回调；为 `true` 时，只执行 `onConfirm` 回调
|
|
1052
|
+
11. **版本控制**：
|
|
1053
|
+
- FlowView、FlowEdit、FlowDebug 三个组件均支持 `enableVersion` 和 `flowVersion` props
|
|
1054
|
+
- FlowEdit 会自动将版本相关 props 透传给内嵌的 FlowDebug 组件
|
|
1055
|
+
- 版本功能依赖 `fetchFlowDraftDetail` 和 `fetchFlowDetailByVersion` 两个 API 方法
|
|
450
1056
|
|
|
451
1057
|
## License
|
|
452
1058
|
|