@blueking/bkflow-canvas-editor 0.0.14 → 0.0.16
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 +359 -22
- package/dist/index.cjs.js +18 -18
- package/dist/index.esm.js +5352 -4988
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -106,22 +106,27 @@ npm install bkflow-canvas-editor
|
|
|
106
106
|
|
|
107
107
|
#### Props
|
|
108
108
|
|
|
109
|
-
| 参数
|
|
110
|
-
|
|
|
111
|
-
| `flowId`
|
|
112
|
-
| `apiConfig`
|
|
113
|
-
| `permissions`
|
|
114
|
-
| `
|
|
115
|
-
| `
|
|
116
|
-
| `
|
|
117
|
-
| `
|
|
109
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
110
|
+
| ----------------------- | ---------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- |
|
|
111
|
+
| `flowId` | `string` | - | **必需**，流程 ID |
|
|
112
|
+
| `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置) |
|
|
113
|
+
| `permissions` | `{ canEdit?: boolean }` | `{}` | 权限配置对象 |
|
|
114
|
+
| `enableDebug` | `boolean` | `false` | 是否启用调试功能，启用后显示可点击的调试按钮 |
|
|
115
|
+
| `onDebugConfirm` | `(formData: { name: string, variablesValue: Record<string, any> }) => Promise<void> \| void` | - | 调试面板确定按钮回调（可选） |
|
|
116
|
+
| `useCustomDebugConfirm` | `boolean` | `false` | 是否使用自定义回调替代调试面板原有逻辑。为 `true` 时只执行 `onDebugConfirm`，为 `false` 时在原有逻辑后执行 `onDebugConfirm` |
|
|
117
|
+
| `agentSelectPanelConfig` | `AgentSelectPanelConfig` | - | 智能体选择面板配置（可选），详见 [AgentSelectPanelConfig](#agentselectpanelconfig) |
|
|
118
|
+
| `onSave` | `(flowData: FlowTemplate) => void` | - | 保存回调（可选，也可以通过 `@save` 事件监听） |
|
|
119
|
+
| `onSaveSuccess` | `() => void` | - | 保存成功回调（可选，也可以通过 `@saveSuccess` 事件监听） |
|
|
120
|
+
| `onBack` | `() => void` | - | 返回按钮点击回调（可选，也可以通过 `@back` 事件监听） |
|
|
121
|
+
| `onBeforeLeave` | `(isEdited: boolean) => Promise<boolean>` | - | 离开前回调，返回 `false` 可阻止离开 |
|
|
118
122
|
|
|
119
123
|
#### Slots
|
|
120
124
|
|
|
121
|
-
| 插槽名
|
|
122
|
-
|
|
|
123
|
-
| `header`
|
|
124
|
-
| `inputParams`
|
|
125
|
+
| 插槽名 | 作用域参数 | 说明 |
|
|
126
|
+
| ------------------------ | ---------- | ---------------------------- |
|
|
127
|
+
| `header` | - | 自定义头部内容 |
|
|
128
|
+
| `inputParams` | 见下方说明 | 自定义节点输入参数组件 |
|
|
129
|
+
| `debugCustomFormContent` | 见下方说明 | 自定义调试组件的表单内容插槽 |
|
|
125
130
|
|
|
126
131
|
##### inputParams 插槽作用域参数
|
|
127
132
|
|
|
@@ -135,6 +140,13 @@ npm install bkflow-canvas-editor
|
|
|
135
140
|
| `updateInputParams` | `(data: Record<string, PluginInputDataItem>) => void` | 更新节点输入参数的方法（暂存到节点配置面板，需点击确定按钮才会保存） |
|
|
136
141
|
| `updateNodeInputParams` | `(inputParams: Record<string, PluginInputDataItem>) => void` | 更新节点输入参数的方法（通过 edit 组件调用，暂存到节点配置面板，需点击确定按钮才会保存） |
|
|
137
142
|
|
|
143
|
+
##### debugCustomFormContent 插槽作用域参数
|
|
144
|
+
|
|
145
|
+
| 参数 | 类型 | 说明 |
|
|
146
|
+
| ---------------- | --------------------- | ---------- |
|
|
147
|
+
| `formData` | `{ name: string }` | 表单数据 |
|
|
148
|
+
| `variablesValue` | `Record<string, any>` | 变量值对象 |
|
|
149
|
+
|
|
138
150
|
#### Events
|
|
139
151
|
|
|
140
152
|
| 事件名 | 参数 | 说明 |
|
|
@@ -154,20 +166,58 @@ npm install bkflow-canvas-editor
|
|
|
154
166
|
|
|
155
167
|
---
|
|
156
168
|
|
|
169
|
+
### AgentSelectPanelConfig 类型
|
|
170
|
+
|
|
171
|
+
智能体选择面板配置类型，用于配置智能体选择面板中的按钮跳转链接和文本。
|
|
172
|
+
|
|
173
|
+
#### 类型定义
|
|
174
|
+
|
|
175
|
+
```typescript
|
|
176
|
+
interface AgentSelectPanelConfig {
|
|
177
|
+
applyUrl?: string; // "点击申请" 按钮跳转链接（可选）
|
|
178
|
+
resourceUrl?: string; // "智能体" 按钮跳转链接（可选）
|
|
179
|
+
buttonText?: string; // "智能体" 按钮文本（可选，默认为 "智能体"）
|
|
180
|
+
}
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
#### 使用示例
|
|
184
|
+
|
|
185
|
+
```vue
|
|
186
|
+
<template>
|
|
187
|
+
<FlowEdit
|
|
188
|
+
:flow-id="flowId"
|
|
189
|
+
:api-config="apiConfig"
|
|
190
|
+
:agent-select-panel-config="{
|
|
191
|
+
applyUrl: 'https://example.com/apply',
|
|
192
|
+
resourceUrl: 'https://example.com/agent',
|
|
193
|
+
buttonText: '创建智能体'
|
|
194
|
+
}"
|
|
195
|
+
/>
|
|
196
|
+
</template>
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
#### 说明
|
|
200
|
+
|
|
201
|
+
- 如果 `agentSelectPanelConfig` 未提供或某个字段未提供，组件将使用默认的路由跳转行为
|
|
202
|
+
- `buttonText` 默认值为 "智能体"
|
|
203
|
+
- 配置通过 Vue 的 provide/inject 机制全局提供，子组件可以直接通过 `useAgentSelectPanelConfig()` 获取
|
|
204
|
+
|
|
205
|
+
---
|
|
206
|
+
|
|
157
207
|
### FlowExecute 组件
|
|
158
208
|
|
|
159
209
|
流程执行组件，用于执行流程任务。
|
|
160
210
|
|
|
161
211
|
#### Props
|
|
162
212
|
|
|
163
|
-
| 参数 | 类型 | 默认值 | 说明
|
|
164
|
-
| ------------------ | ---------------------------------------------- | ------- |
|
|
165
|
-
| `flowId` | `string` | - | **必需**，流程 ID
|
|
166
|
-
| `show` | `boolean` | - | **必需**，是否显示执行面板
|
|
167
|
-
| `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置)
|
|
168
|
-
| `editable` | `boolean` | `true` | 是否可编辑
|
|
169
|
-
| `showFlowEntry` | `boolean` | `false` | 是否显示流程入口
|
|
170
|
-
| `onExecuteSuccess` | `(taskId: string, templateId: string) => void` | - | 执行成功回调
|
|
213
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
214
|
+
| ------------------ | ---------------------------------------------- | ------- | -------------------------------------------------- |
|
|
215
|
+
| `flowId` | `string` | - | **必需**，流程 ID |
|
|
216
|
+
| `show` | `boolean` | - | **必需**，是否显示执行面板 |
|
|
217
|
+
| `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置) |
|
|
218
|
+
| `editable` | `boolean` | `true` | 是否可编辑 |
|
|
219
|
+
| `showFlowEntry` | `boolean` | `false` | 是否显示流程入口 |
|
|
220
|
+
| `onExecuteSuccess` | `(taskId: string, templateId: string) => void` | - | 执行成功回调 |
|
|
171
221
|
|
|
172
222
|
#### Events
|
|
173
223
|
|
|
@@ -179,6 +229,47 @@ npm install bkflow-canvas-editor
|
|
|
179
229
|
|
|
180
230
|
---
|
|
181
231
|
|
|
232
|
+
### FlowDebug 组件
|
|
233
|
+
|
|
234
|
+
流程调试组件，用于调试流程任务。基于 `FlowExecute` 组件实现，但增加了自定义表单插槽和自定义确定按钮回调支持。
|
|
235
|
+
|
|
236
|
+
#### Props
|
|
237
|
+
|
|
238
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
239
|
+
| ------------------ | -------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- |
|
|
240
|
+
| `flowId` | `string` | - | **必需**，流程 ID |
|
|
241
|
+
| `show` | `boolean` | - | **必需**，是否显示调试面板 |
|
|
242
|
+
| `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置) |
|
|
243
|
+
| `editable` | `boolean` | `true` | 是否可编辑 |
|
|
244
|
+
| `showFlowEntry` | `boolean` | `false` | 是否显示流程入口 |
|
|
245
|
+
| `onConfirm` | `(formData: { name: string, variablesValue: Record<string, any> }) => Promise<void> \| void` | - | 自定义确定按钮回调（可选） |
|
|
246
|
+
| `useCustomConfirm` | `boolean` | `false` | 是否使用自定义回调替代原有逻辑。为 `true` 时只执行 `onConfirm`，为 `false` 时在原有逻辑后执行 `onConfirm` |
|
|
247
|
+
| `onExecuteSuccess` | `(taskId: string, templateId: string) => void` | - | 执行成功回调（可选，仅在 `useCustomConfirm` 为 `false` 时生效） |
|
|
248
|
+
|
|
249
|
+
#### Slots
|
|
250
|
+
|
|
251
|
+
| 插槽名 | 作用域参数 | 说明 |
|
|
252
|
+
| --------------------- | --------------------------------------------------------------------- | ------------------------------------ |
|
|
253
|
+
| `custom-form-content` | `{ formData: { name: string }, variablesValue: Record<string, any> }` | 自定义表单内容，位于请求参数表单下方 |
|
|
254
|
+
|
|
255
|
+
#### Events
|
|
256
|
+
|
|
257
|
+
| 事件名 | 参数 | 说明 |
|
|
258
|
+
| ------------- | ------------------------------------ | ------------------------------------------------------- |
|
|
259
|
+
| `confirm` | `taskId: string, templateId: string` | 执行确认时触发（仅在 `useCustomConfirm` 为 `false` 时） |
|
|
260
|
+
| `close` | - | 关闭面板时触发 |
|
|
261
|
+
| `update:show` | `show: boolean` | 显示状态更新时触发 |
|
|
262
|
+
|
|
263
|
+
#### 使用说明
|
|
264
|
+
|
|
265
|
+
- **自定义表单插槽**：可以在 `custom-form-content` 插槽中传入自定义的表单内容，插槽会接收 `formData` 和 `variablesValue` 作为作用域参数
|
|
266
|
+
- **自定义确定按钮回调**：
|
|
267
|
+
- 当 `useCustomConfirm` 为 `false`（默认）时，`onConfirm` 会在原有的执行逻辑（创建任务并执行）完成后调用
|
|
268
|
+
- 当 `useCustomConfirm` 为 `true` 时，点击确定按钮只会执行 `onConfirm` 回调，不会执行原有的创建和执行任务逻辑
|
|
269
|
+
- **表单验证**：无论使用哪种模式，都会先进行表单验证，验证通过后才会执行相应逻辑
|
|
270
|
+
|
|
271
|
+
---
|
|
272
|
+
|
|
182
273
|
## 使用示例
|
|
183
274
|
|
|
184
275
|
### 基础使用
|
|
@@ -365,6 +456,247 @@ npm install bkflow-canvas-editor
|
|
|
365
456
|
</script>
|
|
366
457
|
```
|
|
367
458
|
|
|
459
|
+
### 使用 FlowEdit 的调试功能
|
|
460
|
+
|
|
461
|
+
启用 FlowEdit 组件的调试功能，点击调试按钮会打开 FlowDebug 组件：
|
|
462
|
+
|
|
463
|
+
```vue
|
|
464
|
+
<template>
|
|
465
|
+
<FlowEdit
|
|
466
|
+
:flow-id="flowId"
|
|
467
|
+
:api-config="apiConfig"
|
|
468
|
+
:enable-debug="true"
|
|
469
|
+
:on-debug-confirm="handleDebugConfirm"
|
|
470
|
+
:use-custom-debug-confirm="false"
|
|
471
|
+
@save="handleSave">
|
|
472
|
+
<!-- 可选：自定义调试组件的表单内容 -->
|
|
473
|
+
<template #debugCustomFormContent="{ formData, variablesValue }">
|
|
474
|
+
<div class="custom-debug-form">
|
|
475
|
+
<h4>自定义调试参数</h4>
|
|
476
|
+
<bk-form-item label="调试模式">
|
|
477
|
+
<bk-select v-model="debugMode">
|
|
478
|
+
<bk-option label="快速调试" value="quick" />
|
|
479
|
+
<bk-option label="完整调试" value="full" />
|
|
480
|
+
</bk-select>
|
|
481
|
+
</bk-form-item>
|
|
482
|
+
</div>
|
|
483
|
+
</template>
|
|
484
|
+
</FlowEdit>
|
|
485
|
+
</template>
|
|
486
|
+
|
|
487
|
+
<script setup>
|
|
488
|
+
import { ref } from 'vue';
|
|
489
|
+
import { FlowEdit } from 'bkflow-canvas-editor';
|
|
490
|
+
|
|
491
|
+
const flowId = '123';
|
|
492
|
+
const debugMode = ref('quick');
|
|
493
|
+
const apiConfig = {
|
|
494
|
+
scopeData: {
|
|
495
|
+
scope_type: 'space',
|
|
496
|
+
scope_value: 123,
|
|
497
|
+
},
|
|
498
|
+
};
|
|
499
|
+
|
|
500
|
+
const handleSave = (flowData) => {
|
|
501
|
+
console.log('保存流程:', flowData);
|
|
502
|
+
};
|
|
503
|
+
|
|
504
|
+
// 调试面板确定按钮回调（在原有逻辑执行后调用）
|
|
505
|
+
const handleDebugConfirm = async (formData) => {
|
|
506
|
+
console.log('调试任务已创建并执行');
|
|
507
|
+
console.log('任务名称:', formData.name);
|
|
508
|
+
console.log('变量值:', formData.variablesValue);
|
|
509
|
+
};
|
|
510
|
+
</script>
|
|
511
|
+
```
|
|
512
|
+
|
|
513
|
+
#### 使用自定义调试回调（替代原有逻辑）
|
|
514
|
+
|
|
515
|
+
如果需要完全自定义调试面板的确定按钮行为，可以设置 `useCustomDebugConfirm` 为 `true`：
|
|
516
|
+
|
|
517
|
+
```vue
|
|
518
|
+
<template>
|
|
519
|
+
<FlowEdit
|
|
520
|
+
:flow-id="flowId"
|
|
521
|
+
:api-config="apiConfig"
|
|
522
|
+
:enable-debug="true"
|
|
523
|
+
:on-debug-confirm="handleCustomDebugConfirm"
|
|
524
|
+
:use-custom-debug-confirm="true"
|
|
525
|
+
@save="handleSave" />
|
|
526
|
+
</template>
|
|
527
|
+
|
|
528
|
+
<script setup>
|
|
529
|
+
import { FlowEdit } from 'bkflow-canvas-editor';
|
|
530
|
+
|
|
531
|
+
const flowId = '123';
|
|
532
|
+
const apiConfig = {
|
|
533
|
+
scopeData: {
|
|
534
|
+
scope_type: 'space',
|
|
535
|
+
scope_value: 123,
|
|
536
|
+
},
|
|
537
|
+
};
|
|
538
|
+
|
|
539
|
+
const handleSave = (flowData) => {
|
|
540
|
+
console.log('保存流程:', flowData);
|
|
541
|
+
};
|
|
542
|
+
|
|
543
|
+
// 自定义调试回调（替代原有创建和执行任务逻辑）
|
|
544
|
+
const handleCustomDebugConfirm = async (formData) => {
|
|
545
|
+
console.log('执行自定义调试逻辑');
|
|
546
|
+
console.log('任务名称:', formData.name);
|
|
547
|
+
console.log('变量值:', formData.variablesValue);
|
|
548
|
+
|
|
549
|
+
// 执行自定义逻辑，例如发送到调试服务
|
|
550
|
+
// await sendToDebugService(formData);
|
|
551
|
+
};
|
|
552
|
+
</script>
|
|
553
|
+
```
|
|
554
|
+
|
|
555
|
+
### 使用 FlowDebug 组件
|
|
556
|
+
|
|
557
|
+
#### 基础使用
|
|
558
|
+
|
|
559
|
+
```vue
|
|
560
|
+
<template>
|
|
561
|
+
<FlowDebug
|
|
562
|
+
:flow-id="flowId"
|
|
563
|
+
:show="isDebugShow"
|
|
564
|
+
:api-config="apiConfig"
|
|
565
|
+
@close="isDebugShow = false"
|
|
566
|
+
@update:show="isDebugShow = $event" />
|
|
567
|
+
</template>
|
|
568
|
+
|
|
569
|
+
<script setup>
|
|
570
|
+
import { ref } from 'vue';
|
|
571
|
+
import { FlowDebug } from 'bkflow-canvas-editor';
|
|
572
|
+
|
|
573
|
+
const flowId = '123';
|
|
574
|
+
const isDebugShow = ref(false);
|
|
575
|
+
const apiConfig = {
|
|
576
|
+
scopeData: {
|
|
577
|
+
scope_type: 'space',
|
|
578
|
+
scope_value: 123,
|
|
579
|
+
},
|
|
580
|
+
};
|
|
581
|
+
</script>
|
|
582
|
+
```
|
|
583
|
+
|
|
584
|
+
#### 使用自定义表单插槽
|
|
585
|
+
|
|
586
|
+
```vue
|
|
587
|
+
<template>
|
|
588
|
+
<FlowDebug :flow-id="flowId" :show="isDebugShow" :api-config="apiConfig" @close="isDebugShow = false">
|
|
589
|
+
<template #custom-form-content="{ formData, variablesValue }">
|
|
590
|
+
<div class="custom-debug-form">
|
|
591
|
+
<h4>自定义调试参数</h4>
|
|
592
|
+
<bk-form-item label="调试模式">
|
|
593
|
+
<bk-select v-model="debugMode">
|
|
594
|
+
<bk-option label="快速调试" value="quick" />
|
|
595
|
+
<bk-option label="完整调试" value="full" />
|
|
596
|
+
</bk-select>
|
|
597
|
+
</bk-form-item>
|
|
598
|
+
<bk-form-item label="调试备注">
|
|
599
|
+
<bk-input v-model="debugNote" placeholder="请输入调试备注" />
|
|
600
|
+
</bk-form-item>
|
|
601
|
+
</div>
|
|
602
|
+
</template>
|
|
603
|
+
</FlowDebug>
|
|
604
|
+
</template>
|
|
605
|
+
|
|
606
|
+
<script setup>
|
|
607
|
+
import { ref } from 'vue';
|
|
608
|
+
import { FlowDebug } from 'bkflow-canvas-editor';
|
|
609
|
+
|
|
610
|
+
const flowId = '123';
|
|
611
|
+
const isDebugShow = ref(false);
|
|
612
|
+
const debugMode = ref('quick');
|
|
613
|
+
const debugNote = ref('');
|
|
614
|
+
const apiConfig = {
|
|
615
|
+
scopeData: {
|
|
616
|
+
scope_type: 'space',
|
|
617
|
+
scope_value: 123,
|
|
618
|
+
},
|
|
619
|
+
};
|
|
620
|
+
</script>
|
|
621
|
+
```
|
|
622
|
+
|
|
623
|
+
#### 使用自定义确定按钮回调
|
|
624
|
+
|
|
625
|
+
```vue
|
|
626
|
+
<template>
|
|
627
|
+
<FlowDebug
|
|
628
|
+
:flow-id="flowId"
|
|
629
|
+
:show="isDebugShow"
|
|
630
|
+
:api-config="apiConfig"
|
|
631
|
+
:use-custom-confirm="true"
|
|
632
|
+
:on-confirm="handleCustomConfirm"
|
|
633
|
+
@close="isDebugShow = false" />
|
|
634
|
+
</template>
|
|
635
|
+
|
|
636
|
+
<script setup>
|
|
637
|
+
import { ref } from 'vue';
|
|
638
|
+
import { FlowDebug } from 'bkflow-canvas-editor';
|
|
639
|
+
|
|
640
|
+
const flowId = '123';
|
|
641
|
+
const isDebugShow = ref(false);
|
|
642
|
+
const apiConfig = {
|
|
643
|
+
scopeData: {
|
|
644
|
+
scope_type: 'space',
|
|
645
|
+
scope_value: 123,
|
|
646
|
+
},
|
|
647
|
+
};
|
|
648
|
+
|
|
649
|
+
// 自定义确定按钮回调
|
|
650
|
+
const handleCustomConfirm = async (formData) => {
|
|
651
|
+
console.log('任务名称:', formData.name);
|
|
652
|
+
console.log('变量值:', formData.variablesValue);
|
|
653
|
+
|
|
654
|
+
// 执行自定义逻辑，例如发送到调试服务
|
|
655
|
+
// await sendToDebugService(formData);
|
|
656
|
+
|
|
657
|
+
// 关闭面板
|
|
658
|
+
isDebugShow.value = false;
|
|
659
|
+
};
|
|
660
|
+
</script>
|
|
661
|
+
```
|
|
662
|
+
|
|
663
|
+
#### 使用额外回调（不替代原有逻辑）
|
|
664
|
+
|
|
665
|
+
```vue
|
|
666
|
+
<template>
|
|
667
|
+
<FlowDebug
|
|
668
|
+
:flow-id="flowId"
|
|
669
|
+
:show="isDebugShow"
|
|
670
|
+
:api-config="apiConfig"
|
|
671
|
+
:use-custom-confirm="false"
|
|
672
|
+
:on-confirm="handleAdditionalConfirm"
|
|
673
|
+
@close="isDebugShow = false" />
|
|
674
|
+
</template>
|
|
675
|
+
|
|
676
|
+
<script setup>
|
|
677
|
+
import { ref } from 'vue';
|
|
678
|
+
import { FlowDebug } from 'bkflow-canvas-editor';
|
|
679
|
+
|
|
680
|
+
const flowId = '123';
|
|
681
|
+
const isDebugShow = ref(false);
|
|
682
|
+
const apiConfig = {
|
|
683
|
+
scopeData: {
|
|
684
|
+
scope_type: 'space',
|
|
685
|
+
scope_value: 123,
|
|
686
|
+
},
|
|
687
|
+
};
|
|
688
|
+
|
|
689
|
+
// 额外回调：在原有执行逻辑完成后调用
|
|
690
|
+
const handleAdditionalConfirm = async (formData) => {
|
|
691
|
+
console.log('任务已创建并执行，执行额外逻辑');
|
|
692
|
+
console.log('任务名称:', formData.name);
|
|
693
|
+
console.log('变量值:', formData.variablesValue);
|
|
694
|
+
|
|
695
|
+
// 例如：记录调试日志、发送通知等
|
|
696
|
+
};
|
|
697
|
+
</script>
|
|
698
|
+
```
|
|
699
|
+
|
|
368
700
|
## API 配置
|
|
369
701
|
|
|
370
702
|
### FlowApiConfig
|
|
@@ -425,6 +757,7 @@ import type {
|
|
|
425
757
|
PluginInputDataItem,
|
|
426
758
|
UniformApiPluginInputsItem,
|
|
427
759
|
PluginDetailCommon,
|
|
760
|
+
AgentSelectPanelConfig,
|
|
428
761
|
// ... 更多类型
|
|
429
762
|
} from 'bkflow-canvas-editor';
|
|
430
763
|
```
|
|
@@ -469,7 +802,11 @@ resolve: {
|
|
|
469
802
|
9. **API 配置类型说明**：
|
|
470
803
|
- 外部使用者只需要使用 `FlowApiConfig` 类型
|
|
471
804
|
- `FlowViewApiConfig` 和 `FlowEditApiConfig` 是组件内部使用的类型，通过 `useFlowApi` 自动转换
|
|
472
|
-
-
|
|
805
|
+
- `FlowExecute` 和 `FlowDebug` 组件可以直接接受 `FlowApiConfig` 类型，组件内部会自动处理
|
|
806
|
+
10. **调试功能**：
|
|
807
|
+
- `FlowEdit` 组件的 `enableDebug` props 默认为 `false`，设置为 `true` 后才会显示可点击的调试按钮
|
|
808
|
+
- 点击调试按钮会打开 `FlowDebug` 组件，该组件提供了与 `FlowExecute` 相同的交互，但支持自定义表单插槽和自定义确定按钮回调
|
|
809
|
+
- `FlowDebug` 组件的 `useCustomConfirm` 为 `false` 时，会先执行原有的创建和执行任务逻辑，然后执行 `onConfirm` 回调；为 `true` 时，只执行 `onConfirm` 回调
|
|
473
810
|
|
|
474
811
|
## License
|
|
475
812
|
|