@blueking/bkflow-canvas-editor 0.0.15 → 0.0.17
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 +537 -30
- package/dist/index.cjs.js +18 -18
- package/dist/index.esm.js +5741 -5308
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -64,14 +64,19 @@ npm install bkflow-canvas-editor
|
|
|
64
64
|
|
|
65
65
|
#### Props
|
|
66
66
|
|
|
67
|
-
| 参数
|
|
68
|
-
|
|
|
69
|
-
| `flowId`
|
|
70
|
-
| `apiConfig`
|
|
71
|
-
| `permissions`
|
|
72
|
-
| `thumbnail`
|
|
73
|
-
| `
|
|
74
|
-
| `
|
|
67
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
68
|
+
| ----------------- | ------------------------------------------ | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
|
|
69
|
+
| `flowId` | `string` | - | **必需**，流程 ID |
|
|
70
|
+
| `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置) |
|
|
71
|
+
| `permissions` | `{ canEdit?: boolean, canSave?: boolean }` | `{ canEdit: true, canSave: true }` | 权限配置对象，`canEdit`用来控制流程查看态时头部编辑按钮是否使用禁用样式，`canSave`用来控制流程编辑态时头部保存按钮是否可点击 |
|
|
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` 事件监听） |
|
|
75
80
|
|
|
76
81
|
#### Slots
|
|
77
82
|
|
|
@@ -106,22 +111,31 @@ npm install bkflow-canvas-editor
|
|
|
106
111
|
|
|
107
112
|
#### Props
|
|
108
113
|
|
|
109
|
-
| 参数
|
|
110
|
-
|
|
|
111
|
-
| `flowId`
|
|
112
|
-
| `apiConfig`
|
|
113
|
-
| `permissions`
|
|
114
|
-
| `
|
|
115
|
-
| `
|
|
116
|
-
| `
|
|
117
|
-
| `
|
|
114
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
115
|
+
| ----------------------- | ---------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- |
|
|
116
|
+
| `flowId` | `string` | - | **必需**，流程 ID |
|
|
117
|
+
| `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置) |
|
|
118
|
+
| `permissions` | `{ canEdit?: boolean }` | `{}` | 权限配置对象 |
|
|
119
|
+
| `enableDebug` | `boolean` | `false` | 是否启用调试功能，启用后显示可点击的调试按钮 |
|
|
120
|
+
| `enableVersion` | `boolean` | `false` | 是否开启流程版本功能，开启后会根据 `flowVersion` 的值获取对应版本的流程数据 |
|
|
121
|
+
| `flowVersion` | `string` | - | 流程版本号，仅在 `enableVersion` 为 `true` 时生效。为空时表示草稿版本，不为空时表示指定版本 |
|
|
122
|
+
| `onDebugConfirm` | `(formData: { name: string, variablesValue: Record<string, any> }) => Promise<void> \| void` | - | 调试面板确定按钮回调（可选） |
|
|
123
|
+
| `useCustomDebugConfirm` | `boolean` | `false` | 是否使用自定义回调替代调试面板原有逻辑。为 `true` 时只执行 `onDebugConfirm`，为 `false` 时在原有逻辑后执行 `onDebugConfirm` |
|
|
124
|
+
| `agentSelectPanelConfig` | `AgentSelectPanelConfig` | - | 智能体选择面板配置（可选），详见 [AgentSelectPanelConfig](#agentselectpanelconfig) |
|
|
125
|
+
| `onSave` | `(flowData: FlowTemplate) => void` | - | 保存回调（可选，也可以通过 `@save` 事件监听） |
|
|
126
|
+
| `onSaveSuccess` | `() => void` | - | 保存成功回调（可选，也可以通过 `@saveSuccess` 事件监听） |
|
|
127
|
+
| `onBack` | `() => void` | - | 返回按钮点击回调（可选，也可以通过 `@back` 事件监听） |
|
|
128
|
+
| `onBeforeLeave` | `(isEdited: boolean) => Promise<boolean>` | - | 离开前回调，返回 `false` 可阻止离开 |
|
|
129
|
+
| `defaultZoom` | `number` | `1` | x6 画布的默认缩放比例，用于控制画布的初始显示效果。取值范围建议在 0.25 到 1.5 之间 |
|
|
130
|
+
| `bkflowSaasUrl` | `string` | - | bkflow-saas-url，用于设置 `$.context.site_url` 的值，供插件内部使用 |
|
|
118
131
|
|
|
119
132
|
#### Slots
|
|
120
133
|
|
|
121
|
-
| 插槽名
|
|
122
|
-
|
|
|
123
|
-
| `header`
|
|
124
|
-
| `inputParams`
|
|
134
|
+
| 插槽名 | 作用域参数 | 说明 |
|
|
135
|
+
| ------------------------ | ---------- | ---------------------------- |
|
|
136
|
+
| `header` | - | 自定义头部内容 |
|
|
137
|
+
| `inputParams` | 见下方说明 | 自定义节点输入参数组件 |
|
|
138
|
+
| `debugCustomFormContent` | 见下方说明 | 自定义调试组件的表单内容插槽 |
|
|
125
139
|
|
|
126
140
|
##### inputParams 插槽作用域参数
|
|
127
141
|
|
|
@@ -135,6 +149,13 @@ npm install bkflow-canvas-editor
|
|
|
135
149
|
| `updateInputParams` | `(data: Record<string, PluginInputDataItem>) => void` | 更新节点输入参数的方法（暂存到节点配置面板，需点击确定按钮才会保存） |
|
|
136
150
|
| `updateNodeInputParams` | `(inputParams: Record<string, PluginInputDataItem>) => void` | 更新节点输入参数的方法（通过 edit 组件调用，暂存到节点配置面板，需点击确定按钮才会保存） |
|
|
137
151
|
|
|
152
|
+
##### debugCustomFormContent 插槽作用域参数
|
|
153
|
+
|
|
154
|
+
| 参数 | 类型 | 说明 |
|
|
155
|
+
| ---------------- | --------------------- | ---------- |
|
|
156
|
+
| `formData` | `{ name: string }` | 表单数据 |
|
|
157
|
+
| `variablesValue` | `Record<string, any>` | 变量值对象 |
|
|
158
|
+
|
|
138
159
|
#### Events
|
|
139
160
|
|
|
140
161
|
| 事件名 | 参数 | 说明 |
|
|
@@ -154,20 +175,59 @@ npm install bkflow-canvas-editor
|
|
|
154
175
|
|
|
155
176
|
---
|
|
156
177
|
|
|
178
|
+
### AgentSelectPanelConfig 类型
|
|
179
|
+
|
|
180
|
+
智能体选择面板配置类型，用于配置智能体选择面板中的按钮跳转链接和文本。
|
|
181
|
+
|
|
182
|
+
#### 类型定义
|
|
183
|
+
|
|
184
|
+
```typescript
|
|
185
|
+
interface AgentSelectPanelConfig {
|
|
186
|
+
applyUrl?: string; // "点击申请" 按钮跳转链接（可选）
|
|
187
|
+
resourceUrl?: string; // "智能体" 按钮跳转链接（可选）
|
|
188
|
+
buttonText?: string; // "智能体" 按钮文本（可选，默认为 "智能体"）
|
|
189
|
+
}
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
#### 使用示例
|
|
193
|
+
|
|
194
|
+
```vue
|
|
195
|
+
<template>
|
|
196
|
+
<FlowEdit
|
|
197
|
+
:flow-id="flowId"
|
|
198
|
+
:api-config="apiConfig"
|
|
199
|
+
:agent-select-panel-config="{
|
|
200
|
+
applyUrl: 'https://example.com/apply',
|
|
201
|
+
resourceUrl: 'https://example.com/agent',
|
|
202
|
+
buttonText: '创建智能体'
|
|
203
|
+
}"
|
|
204
|
+
/>
|
|
205
|
+
</template>
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
#### 说明
|
|
209
|
+
|
|
210
|
+
- 如果 `agentSelectPanelConfig` 未提供或某个字段未提供，组件将使用默认的路由跳转行为
|
|
211
|
+
- `buttonText` 默认值为 "智能体"
|
|
212
|
+
- 配置通过 Vue 的 provide/inject 机制全局提供，子组件可以直接通过 `useAgentSelectPanelConfig()` 获取
|
|
213
|
+
|
|
214
|
+
---
|
|
215
|
+
|
|
157
216
|
### FlowExecute 组件
|
|
158
217
|
|
|
159
218
|
流程执行组件，用于执行流程任务。
|
|
160
219
|
|
|
161
220
|
#### Props
|
|
162
221
|
|
|
163
|
-
| 参数 | 类型 | 默认值 | 说明
|
|
164
|
-
| ------------------ | ---------------------------------------------- | ------- |
|
|
165
|
-
| `flowId` | `string` | - | **必需**，流程 ID
|
|
166
|
-
| `show` | `boolean` | - | **必需**，是否显示执行面板
|
|
167
|
-
| `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置)
|
|
168
|
-
| `editable` | `boolean` | `true` | 是否可编辑
|
|
169
|
-
| `showFlowEntry` | `boolean` | `false` | 是否显示流程入口
|
|
170
|
-
| `
|
|
222
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
223
|
+
| ------------------ | ---------------------------------------------- | ------- | -------------------------------------------------- |
|
|
224
|
+
| `flowId` | `string` | - | **必需**，流程 ID |
|
|
225
|
+
| `show` | `boolean` | - | **必需**，是否显示执行面板 |
|
|
226
|
+
| `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置) |
|
|
227
|
+
| `editable` | `boolean` | `true` | 是否可编辑 |
|
|
228
|
+
| `showFlowEntry` | `boolean` | `false` | 是否显示流程入口 |
|
|
229
|
+
| `bkflowSaasUrl` | `string` | - | bkflow-saas-url，用于设置 `$.context.site_url` 的值，供插件内部使用 |
|
|
230
|
+
| `onExecuteSuccess` | `(taskId: string, templateId: string) => void` | - | 执行成功回调 |
|
|
171
231
|
|
|
172
232
|
#### Events
|
|
173
233
|
|
|
@@ -179,6 +239,48 @@ npm install bkflow-canvas-editor
|
|
|
179
239
|
|
|
180
240
|
---
|
|
181
241
|
|
|
242
|
+
### FlowDebug 组件
|
|
243
|
+
|
|
244
|
+
流程调试组件，用于调试流程任务。基于 `FlowExecute` 组件实现，但增加了自定义表单插槽和自定义确定按钮回调支持。
|
|
245
|
+
|
|
246
|
+
#### Props
|
|
247
|
+
|
|
248
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
249
|
+
| ------------------ | -------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- |
|
|
250
|
+
| `flowId` | `string` | - | **必需**，流程 ID |
|
|
251
|
+
| `show` | `boolean` | - | **必需**，是否显示调试面板 |
|
|
252
|
+
| `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置) |
|
|
253
|
+
| `editable` | `boolean` | `true` | 是否可编辑 |
|
|
254
|
+
| `showFlowEntry` | `boolean` | `false` | 是否显示流程入口 |
|
|
255
|
+
| `bkflowSaasUrl` | `string` | - | bkflow-saas-url，用于设置 `$.context.site_url` 的值，供插件内部使用 |
|
|
256
|
+
| `onConfirm` | `(formData: { name: string, variablesValue: Record<string, any> }) => Promise<void> \| void` | - | 自定义确定按钮回调（可选） |
|
|
257
|
+
| `useCustomConfirm` | `boolean` | `false` | 是否使用自定义回调替代原有逻辑。为 `true` 时只执行 `onConfirm`，为 `false` 时在原有逻辑后执行 `onConfirm` |
|
|
258
|
+
| `onExecuteSuccess` | `(taskId: string, templateId: string) => void` | - | 执行成功回调（可选，仅在 `useCustomConfirm` 为 `false` 时生效） |
|
|
259
|
+
|
|
260
|
+
#### Slots
|
|
261
|
+
|
|
262
|
+
| 插槽名 | 作用域参数 | 说明 |
|
|
263
|
+
| --------------------- | --------------------------------------------------------------------- | ------------------------------------ |
|
|
264
|
+
| `custom-form-content` | `{ formData: { name: string }, variablesValue: Record<string, any> }` | 自定义表单内容，位于请求参数表单下方 |
|
|
265
|
+
|
|
266
|
+
#### Events
|
|
267
|
+
|
|
268
|
+
| 事件名 | 参数 | 说明 |
|
|
269
|
+
| ------------- | ------------------------------------ | ------------------------------------------------------- |
|
|
270
|
+
| `confirm` | `taskId: string, templateId: string` | 执行确认时触发（仅在 `useCustomConfirm` 为 `false` 时） |
|
|
271
|
+
| `close` | - | 关闭面板时触发 |
|
|
272
|
+
| `update:show` | `show: boolean` | 显示状态更新时触发 |
|
|
273
|
+
|
|
274
|
+
#### 使用说明
|
|
275
|
+
|
|
276
|
+
- **自定义表单插槽**：可以在 `custom-form-content` 插槽中传入自定义的表单内容，插槽会接收 `formData` 和 `variablesValue` 作为作用域参数
|
|
277
|
+
- **自定义确定按钮回调**：
|
|
278
|
+
- 当 `useCustomConfirm` 为 `false`（默认）时，`onConfirm` 会在原有的执行逻辑（创建任务并执行）完成后调用
|
|
279
|
+
- 当 `useCustomConfirm` 为 `true` 时，点击确定按钮只会执行 `onConfirm` 回调，不会执行原有的创建和执行任务逻辑
|
|
280
|
+
- **表单验证**：无论使用哪种模式，都会先进行表单验证，验证通过后才会执行相应逻辑
|
|
281
|
+
|
|
282
|
+
---
|
|
283
|
+
|
|
182
284
|
## 使用示例
|
|
183
285
|
|
|
184
286
|
### 基础使用
|
|
@@ -365,6 +467,393 @@ npm install bkflow-canvas-editor
|
|
|
365
467
|
</script>
|
|
366
468
|
```
|
|
367
469
|
|
|
470
|
+
### 使用流程版本功能
|
|
471
|
+
|
|
472
|
+
当需要查看或编辑特定版本的流程时，可以使用版本功能：
|
|
473
|
+
|
|
474
|
+
```vue
|
|
475
|
+
<template>
|
|
476
|
+
<!-- 查看指定版本的流程 -->
|
|
477
|
+
<FlowView
|
|
478
|
+
:flow-id="flowId"
|
|
479
|
+
:api-config="apiConfig"
|
|
480
|
+
:enable-version="true"
|
|
481
|
+
:flow-version="'v1.0.0'" />
|
|
482
|
+
|
|
483
|
+
<!-- 查看草稿版本的流程 -->
|
|
484
|
+
<FlowView
|
|
485
|
+
:flow-id="flowId"
|
|
486
|
+
:api-config="apiConfig"
|
|
487
|
+
:enable-version="true" />
|
|
488
|
+
|
|
489
|
+
<!-- 编辑指定版本的流程 -->
|
|
490
|
+
<FlowEdit
|
|
491
|
+
:flow-id="flowId"
|
|
492
|
+
:api-config="apiConfig"
|
|
493
|
+
:enable-version="true"
|
|
494
|
+
:flow-version="'v1.0.0'" />
|
|
495
|
+
</template>
|
|
496
|
+
|
|
497
|
+
<script setup>
|
|
498
|
+
import { FlowView, FlowEdit } from 'bkflow-canvas-editor';
|
|
499
|
+
|
|
500
|
+
const flowId = '123';
|
|
501
|
+
const apiConfig = {
|
|
502
|
+
scopeData: {
|
|
503
|
+
scope_type: 'space',
|
|
504
|
+
scope_value: 123,
|
|
505
|
+
},
|
|
506
|
+
};
|
|
507
|
+
</script>
|
|
508
|
+
```
|
|
509
|
+
|
|
510
|
+
### 控制头部操作按钮显示
|
|
511
|
+
|
|
512
|
+
在 `FlowView` 组件中，可以通过 `showHeaderActions` props 控制头部操作按钮（编辑、执行流程、调试）的显示：
|
|
513
|
+
|
|
514
|
+
```vue
|
|
515
|
+
<template>
|
|
516
|
+
<!-- 隐藏头部操作按钮 -->
|
|
517
|
+
<FlowView
|
|
518
|
+
:flow-id="flowId"
|
|
519
|
+
:api-config="apiConfig"
|
|
520
|
+
:show-header-actions="false" />
|
|
521
|
+
</template>
|
|
522
|
+
|
|
523
|
+
<script setup>
|
|
524
|
+
import { FlowView } from 'bkflow-canvas-editor';
|
|
525
|
+
|
|
526
|
+
const flowId = '123';
|
|
527
|
+
const apiConfig = {
|
|
528
|
+
scopeData: {
|
|
529
|
+
scope_type: 'space',
|
|
530
|
+
scope_value: 123,
|
|
531
|
+
},
|
|
532
|
+
};
|
|
533
|
+
</script>
|
|
534
|
+
```
|
|
535
|
+
|
|
536
|
+
### 设置画布默认缩放比例
|
|
537
|
+
|
|
538
|
+
可以通过 `defaultZoom` props 控制 x6 画布的初始缩放比例，用于调整画布的默认显示效果：
|
|
539
|
+
|
|
540
|
+
```vue
|
|
541
|
+
<template>
|
|
542
|
+
<!-- 设置画布默认缩放为 80% -->
|
|
543
|
+
<FlowView
|
|
544
|
+
:flow-id="flowId"
|
|
545
|
+
:api-config="apiConfig"
|
|
546
|
+
:default-zoom="0.8" />
|
|
547
|
+
|
|
548
|
+
<!-- 设置画布默认缩放为 75% -->
|
|
549
|
+
<FlowEdit
|
|
550
|
+
:flow-id="flowId"
|
|
551
|
+
:api-config="apiConfig"
|
|
552
|
+
:default-zoom="0.75" />
|
|
553
|
+
</template>
|
|
554
|
+
|
|
555
|
+
<script setup>
|
|
556
|
+
import { FlowView, FlowEdit } from 'bkflow-canvas-editor';
|
|
557
|
+
|
|
558
|
+
const flowId = '123';
|
|
559
|
+
const apiConfig = {
|
|
560
|
+
scopeData: {
|
|
561
|
+
scope_type: 'space',
|
|
562
|
+
scope_value: 123,
|
|
563
|
+
},
|
|
564
|
+
};
|
|
565
|
+
</script>
|
|
566
|
+
```
|
|
567
|
+
|
|
568
|
+
> **注意**：`defaultZoom` 的取值范围建议在 0.25 到 1.5 之间，这是 x6 画布配置的最小和最大缩放比例限制。
|
|
569
|
+
|
|
570
|
+
### 设置 bkflow-saas-url
|
|
571
|
+
|
|
572
|
+
可以通过 `bkflowSaasUrl` props 设置 `$.context.site_url` 的值，供插件内部使用：
|
|
573
|
+
|
|
574
|
+
```vue
|
|
575
|
+
<template>
|
|
576
|
+
<FlowView
|
|
577
|
+
:flow-id="flowId"
|
|
578
|
+
:api-config="apiConfig"
|
|
579
|
+
:bkflow-saas-url="'https://example.com/bkflow'" />
|
|
580
|
+
|
|
581
|
+
<FlowEdit
|
|
582
|
+
:flow-id="flowId"
|
|
583
|
+
:api-config="apiConfig"
|
|
584
|
+
:bkflow-saas-url="'https://example.com/bkflow'" />
|
|
585
|
+
|
|
586
|
+
<FlowExecute
|
|
587
|
+
:flow-id="flowId"
|
|
588
|
+
:show="isExecuteShow"
|
|
589
|
+
:api-config="apiConfig"
|
|
590
|
+
:bkflow-saas-url="'https://example.com/bkflow'" />
|
|
591
|
+
|
|
592
|
+
<FlowDebug
|
|
593
|
+
:flow-id="flowId"
|
|
594
|
+
:show="isDebugShow"
|
|
595
|
+
:api-config="apiConfig"
|
|
596
|
+
:bkflow-saas-url="'https://example.com/bkflow'" />
|
|
597
|
+
</template>
|
|
598
|
+
|
|
599
|
+
<script setup>
|
|
600
|
+
import { FlowView, FlowEdit, FlowExecute, FlowDebug } from 'bkflow-canvas-editor';
|
|
601
|
+
|
|
602
|
+
const flowId = '123';
|
|
603
|
+
const isExecuteShow = ref(false);
|
|
604
|
+
const isDebugShow = ref(false);
|
|
605
|
+
const apiConfig = {
|
|
606
|
+
scopeData: {
|
|
607
|
+
scope_type: 'space',
|
|
608
|
+
scope_value: 123,
|
|
609
|
+
},
|
|
610
|
+
};
|
|
611
|
+
</script>
|
|
612
|
+
```
|
|
613
|
+
|
|
614
|
+
> **说明**：`bkflowSaasUrl` 会被设置到 `window.$.context.site_url` 中，供插件内部使用。如果不提供，`site_url` 默认为空字符串。
|
|
615
|
+
|
|
616
|
+
### 使用 FlowEdit 的调试功能
|
|
617
|
+
|
|
618
|
+
启用 FlowEdit 组件的调试功能，点击调试按钮会打开 FlowDebug 组件：
|
|
619
|
+
|
|
620
|
+
```vue
|
|
621
|
+
<template>
|
|
622
|
+
<FlowEdit
|
|
623
|
+
:flow-id="flowId"
|
|
624
|
+
:api-config="apiConfig"
|
|
625
|
+
:enable-debug="true"
|
|
626
|
+
:on-debug-confirm="handleDebugConfirm"
|
|
627
|
+
:use-custom-debug-confirm="false"
|
|
628
|
+
@save="handleSave">
|
|
629
|
+
<!-- 可选：自定义调试组件的表单内容 -->
|
|
630
|
+
<template #debugCustomFormContent="{ formData, variablesValue }">
|
|
631
|
+
<div class="custom-debug-form">
|
|
632
|
+
<h4>自定义调试参数</h4>
|
|
633
|
+
<bk-form-item label="调试模式">
|
|
634
|
+
<bk-select v-model="debugMode">
|
|
635
|
+
<bk-option label="快速调试" value="quick" />
|
|
636
|
+
<bk-option label="完整调试" value="full" />
|
|
637
|
+
</bk-select>
|
|
638
|
+
</bk-form-item>
|
|
639
|
+
</div>
|
|
640
|
+
</template>
|
|
641
|
+
</FlowEdit>
|
|
642
|
+
</template>
|
|
643
|
+
|
|
644
|
+
<script setup>
|
|
645
|
+
import { ref } from 'vue';
|
|
646
|
+
import { FlowEdit } from 'bkflow-canvas-editor';
|
|
647
|
+
|
|
648
|
+
const flowId = '123';
|
|
649
|
+
const debugMode = ref('quick');
|
|
650
|
+
const apiConfig = {
|
|
651
|
+
scopeData: {
|
|
652
|
+
scope_type: 'space',
|
|
653
|
+
scope_value: 123,
|
|
654
|
+
},
|
|
655
|
+
};
|
|
656
|
+
|
|
657
|
+
const handleSave = (flowData) => {
|
|
658
|
+
console.log('保存流程:', flowData);
|
|
659
|
+
};
|
|
660
|
+
|
|
661
|
+
// 调试面板确定按钮回调（在原有逻辑执行后调用）
|
|
662
|
+
const handleDebugConfirm = async (formData) => {
|
|
663
|
+
console.log('调试任务已创建并执行');
|
|
664
|
+
console.log('任务名称:', formData.name);
|
|
665
|
+
console.log('变量值:', formData.variablesValue);
|
|
666
|
+
};
|
|
667
|
+
</script>
|
|
668
|
+
```
|
|
669
|
+
|
|
670
|
+
#### 使用自定义调试回调（替代原有逻辑）
|
|
671
|
+
|
|
672
|
+
如果需要完全自定义调试面板的确定按钮行为，可以设置 `useCustomDebugConfirm` 为 `true`：
|
|
673
|
+
|
|
674
|
+
```vue
|
|
675
|
+
<template>
|
|
676
|
+
<FlowEdit
|
|
677
|
+
:flow-id="flowId"
|
|
678
|
+
:api-config="apiConfig"
|
|
679
|
+
:enable-debug="true"
|
|
680
|
+
:on-debug-confirm="handleCustomDebugConfirm"
|
|
681
|
+
:use-custom-debug-confirm="true"
|
|
682
|
+
@save="handleSave" />
|
|
683
|
+
</template>
|
|
684
|
+
|
|
685
|
+
<script setup>
|
|
686
|
+
import { FlowEdit } from 'bkflow-canvas-editor';
|
|
687
|
+
|
|
688
|
+
const flowId = '123';
|
|
689
|
+
const apiConfig = {
|
|
690
|
+
scopeData: {
|
|
691
|
+
scope_type: 'space',
|
|
692
|
+
scope_value: 123,
|
|
693
|
+
},
|
|
694
|
+
};
|
|
695
|
+
|
|
696
|
+
const handleSave = (flowData) => {
|
|
697
|
+
console.log('保存流程:', flowData);
|
|
698
|
+
};
|
|
699
|
+
|
|
700
|
+
// 自定义调试回调（替代原有创建和执行任务逻辑）
|
|
701
|
+
const handleCustomDebugConfirm = async (formData) => {
|
|
702
|
+
console.log('执行自定义调试逻辑');
|
|
703
|
+
console.log('任务名称:', formData.name);
|
|
704
|
+
console.log('变量值:', formData.variablesValue);
|
|
705
|
+
|
|
706
|
+
// 执行自定义逻辑，例如发送到调试服务
|
|
707
|
+
// await sendToDebugService(formData);
|
|
708
|
+
};
|
|
709
|
+
</script>
|
|
710
|
+
```
|
|
711
|
+
|
|
712
|
+
### 使用 FlowDebug 组件
|
|
713
|
+
|
|
714
|
+
#### 基础使用
|
|
715
|
+
|
|
716
|
+
```vue
|
|
717
|
+
<template>
|
|
718
|
+
<FlowDebug
|
|
719
|
+
:flow-id="flowId"
|
|
720
|
+
:show="isDebugShow"
|
|
721
|
+
:api-config="apiConfig"
|
|
722
|
+
@close="isDebugShow = false"
|
|
723
|
+
@update:show="isDebugShow = $event" />
|
|
724
|
+
</template>
|
|
725
|
+
|
|
726
|
+
<script setup>
|
|
727
|
+
import { ref } from 'vue';
|
|
728
|
+
import { FlowDebug } from 'bkflow-canvas-editor';
|
|
729
|
+
|
|
730
|
+
const flowId = '123';
|
|
731
|
+
const isDebugShow = ref(false);
|
|
732
|
+
const apiConfig = {
|
|
733
|
+
scopeData: {
|
|
734
|
+
scope_type: 'space',
|
|
735
|
+
scope_value: 123,
|
|
736
|
+
},
|
|
737
|
+
};
|
|
738
|
+
</script>
|
|
739
|
+
```
|
|
740
|
+
|
|
741
|
+
#### 使用自定义表单插槽
|
|
742
|
+
|
|
743
|
+
```vue
|
|
744
|
+
<template>
|
|
745
|
+
<FlowDebug :flow-id="flowId" :show="isDebugShow" :api-config="apiConfig" @close="isDebugShow = false">
|
|
746
|
+
<template #custom-form-content="{ formData, variablesValue }">
|
|
747
|
+
<div class="custom-debug-form">
|
|
748
|
+
<h4>自定义调试参数</h4>
|
|
749
|
+
<bk-form-item label="调试模式">
|
|
750
|
+
<bk-select v-model="debugMode">
|
|
751
|
+
<bk-option label="快速调试" value="quick" />
|
|
752
|
+
<bk-option label="完整调试" value="full" />
|
|
753
|
+
</bk-select>
|
|
754
|
+
</bk-form-item>
|
|
755
|
+
<bk-form-item label="调试备注">
|
|
756
|
+
<bk-input v-model="debugNote" placeholder="请输入调试备注" />
|
|
757
|
+
</bk-form-item>
|
|
758
|
+
</div>
|
|
759
|
+
</template>
|
|
760
|
+
</FlowDebug>
|
|
761
|
+
</template>
|
|
762
|
+
|
|
763
|
+
<script setup>
|
|
764
|
+
import { ref } from 'vue';
|
|
765
|
+
import { FlowDebug } from 'bkflow-canvas-editor';
|
|
766
|
+
|
|
767
|
+
const flowId = '123';
|
|
768
|
+
const isDebugShow = ref(false);
|
|
769
|
+
const debugMode = ref('quick');
|
|
770
|
+
const debugNote = ref('');
|
|
771
|
+
const apiConfig = {
|
|
772
|
+
scopeData: {
|
|
773
|
+
scope_type: 'space',
|
|
774
|
+
scope_value: 123,
|
|
775
|
+
},
|
|
776
|
+
};
|
|
777
|
+
</script>
|
|
778
|
+
```
|
|
779
|
+
|
|
780
|
+
#### 使用自定义确定按钮回调
|
|
781
|
+
|
|
782
|
+
```vue
|
|
783
|
+
<template>
|
|
784
|
+
<FlowDebug
|
|
785
|
+
:flow-id="flowId"
|
|
786
|
+
:show="isDebugShow"
|
|
787
|
+
:api-config="apiConfig"
|
|
788
|
+
:use-custom-confirm="true"
|
|
789
|
+
:on-confirm="handleCustomConfirm"
|
|
790
|
+
@close="isDebugShow = false" />
|
|
791
|
+
</template>
|
|
792
|
+
|
|
793
|
+
<script setup>
|
|
794
|
+
import { ref } from 'vue';
|
|
795
|
+
import { FlowDebug } from 'bkflow-canvas-editor';
|
|
796
|
+
|
|
797
|
+
const flowId = '123';
|
|
798
|
+
const isDebugShow = ref(false);
|
|
799
|
+
const apiConfig = {
|
|
800
|
+
scopeData: {
|
|
801
|
+
scope_type: 'space',
|
|
802
|
+
scope_value: 123,
|
|
803
|
+
},
|
|
804
|
+
};
|
|
805
|
+
|
|
806
|
+
// 自定义确定按钮回调
|
|
807
|
+
const handleCustomConfirm = async (formData) => {
|
|
808
|
+
console.log('任务名称:', formData.name);
|
|
809
|
+
console.log('变量值:', formData.variablesValue);
|
|
810
|
+
|
|
811
|
+
// 执行自定义逻辑，例如发送到调试服务
|
|
812
|
+
// await sendToDebugService(formData);
|
|
813
|
+
|
|
814
|
+
// 关闭面板
|
|
815
|
+
isDebugShow.value = false;
|
|
816
|
+
};
|
|
817
|
+
</script>
|
|
818
|
+
```
|
|
819
|
+
|
|
820
|
+
#### 使用额外回调（不替代原有逻辑）
|
|
821
|
+
|
|
822
|
+
```vue
|
|
823
|
+
<template>
|
|
824
|
+
<FlowDebug
|
|
825
|
+
:flow-id="flowId"
|
|
826
|
+
:show="isDebugShow"
|
|
827
|
+
:api-config="apiConfig"
|
|
828
|
+
:use-custom-confirm="false"
|
|
829
|
+
:on-confirm="handleAdditionalConfirm"
|
|
830
|
+
@close="isDebugShow = false" />
|
|
831
|
+
</template>
|
|
832
|
+
|
|
833
|
+
<script setup>
|
|
834
|
+
import { ref } from 'vue';
|
|
835
|
+
import { FlowDebug } from 'bkflow-canvas-editor';
|
|
836
|
+
|
|
837
|
+
const flowId = '123';
|
|
838
|
+
const isDebugShow = ref(false);
|
|
839
|
+
const apiConfig = {
|
|
840
|
+
scopeData: {
|
|
841
|
+
scope_type: 'space',
|
|
842
|
+
scope_value: 123,
|
|
843
|
+
},
|
|
844
|
+
};
|
|
845
|
+
|
|
846
|
+
// 额外回调：在原有执行逻辑完成后调用
|
|
847
|
+
const handleAdditionalConfirm = async (formData) => {
|
|
848
|
+
console.log('任务已创建并执行，执行额外逻辑');
|
|
849
|
+
console.log('任务名称:', formData.name);
|
|
850
|
+
console.log('变量值:', formData.variablesValue);
|
|
851
|
+
|
|
852
|
+
// 例如：记录调试日志、发送通知等
|
|
853
|
+
};
|
|
854
|
+
</script>
|
|
855
|
+
```
|
|
856
|
+
|
|
368
857
|
## API 配置
|
|
369
858
|
|
|
370
859
|
### FlowApiConfig
|
|
@@ -392,6 +881,8 @@ interface FlowApiConfig {
|
|
|
392
881
|
组件内部会自动实现所有 API 方法，包括：
|
|
393
882
|
|
|
394
883
|
- `fetchFlowDetail` - 获取流程详情
|
|
884
|
+
- `fetchFlowDraftDetail` - 获取流程草稿详情（可选，用于版本功能）
|
|
885
|
+
- `fetchFlowDetailByVersion` - 获取指定版本的流程详情（可选，用于版本功能）
|
|
395
886
|
- `fetchSpaceFlowConfig` - 获取空间配置
|
|
396
887
|
- `fetchSystemVariables` - 获取系统变量
|
|
397
888
|
- `saveFlow` - 保存流程（仅 FlowEdit）
|
|
@@ -407,6 +898,17 @@ interface FlowApiConfig {
|
|
|
407
898
|
|
|
408
899
|
所有 API 请求会自动合并 `scopeData` 到请求参数中。
|
|
409
900
|
|
|
901
|
+
### 流程版本功能说明
|
|
902
|
+
|
|
903
|
+
当 `enableVersion` 为 `true` 时，组件会使用版本相关的 API 来获取流程数据：
|
|
904
|
+
|
|
905
|
+
1. **总是先调用 `fetchFlowDetail`**：获取基础流程详情数据
|
|
906
|
+
2. **根据 `flowVersion` 的值决定是否调用版本接口**：
|
|
907
|
+
- 如果 `flowVersion` 不为空：调用 `fetchFlowDetailByVersion` 获取指定版本的 `name` 和 `pipeline_tree` 字段，覆盖基础数据
|
|
908
|
+
- 如果 `flowVersion` 为空：调用 `fetchFlowDraftDetail` 获取草稿版本的 `pipeline_tree` 字段，覆盖基础数据
|
|
909
|
+
|
|
910
|
+
这种设计确保了即使在使用版本功能时，也能获取到完整的流程基础信息，同时用版本特定的数据覆盖相应字段。
|
|
911
|
+
|
|
410
912
|
## 类型定义
|
|
411
913
|
|
|
412
914
|
所有类型定义都可以从包中导入：
|
|
@@ -425,6 +927,7 @@ import type {
|
|
|
425
927
|
PluginInputDataItem,
|
|
426
928
|
UniformApiPluginInputsItem,
|
|
427
929
|
PluginDetailCommon,
|
|
930
|
+
AgentSelectPanelConfig,
|
|
428
931
|
// ... 更多类型
|
|
429
932
|
} from 'bkflow-canvas-editor';
|
|
430
933
|
```
|
|
@@ -469,7 +972,11 @@ resolve: {
|
|
|
469
972
|
9. **API 配置类型说明**：
|
|
470
973
|
- 外部使用者只需要使用 `FlowApiConfig` 类型
|
|
471
974
|
- `FlowViewApiConfig` 和 `FlowEditApiConfig` 是组件内部使用的类型，通过 `useFlowApi` 自动转换
|
|
472
|
-
-
|
|
975
|
+
- `FlowExecute` 和 `FlowDebug` 组件可以直接接受 `FlowApiConfig` 类型，组件内部会自动处理
|
|
976
|
+
10. **调试功能**：
|
|
977
|
+
- `FlowEdit` 组件的 `enableDebug` props 默认为 `false`，设置为 `true` 后才会显示可点击的调试按钮
|
|
978
|
+
- 点击调试按钮会打开 `FlowDebug` 组件，该组件提供了与 `FlowExecute` 相同的交互，但支持自定义表单插槽和自定义确定按钮回调
|
|
979
|
+
- `FlowDebug` 组件的 `useCustomConfirm` 为 `false` 时，会先执行原有的创建和执行任务逻辑，然后执行 `onConfirm` 回调；为 `true` 时，只执行 `onConfirm` 回调
|
|
473
980
|
|
|
474
981
|
## License
|
|
475
982
|
|