@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.
Files changed (5) hide show
  1. package/README.md +537 -30
  2. package/dist/index.cjs.js +18 -18
  3. package/dist/index.esm.js +5741 -5308
  4. package/dist/style.css +1 -1
  5. 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` | `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
- | `onEdit` | `() => void` | - | 编辑按钮点击回调（可选，也可以通过 `@edit` 事件监听） |
74
- | `onBack` | `() => void` | - | 返回按钮点击回调（可选，也可以通过 `@back` 事件监听） |
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` | `string` | - | **必需**，流程 ID |
112
- | `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置) |
113
- | `permissions` | `{ canEdit?: boolean }` | `{}` | 权限配置对象 |
114
- | `onSave` | `(flowData: FlowTemplate) => void` | - | 保存回调（可选，也可以通过 `@save` 事件监听） |
115
- | `onSaveSuccess` | `() => void` | - | 保存成功回调（可选，也可以通过 `@saveSuccess` 事件监听） |
116
- | `onBack` | `() => void` | - | 返回按钮点击回调（可选，也可以通过 `@back` 事件监听） |
117
- | `onBeforeLeave` | `(isEdited: boolean) => Promise<boolean>` | - | 离开前回调，返回 `false` 可阻止离开 |
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-配置)。注意：需要通过 `useFlowApi` 转换后传入 |
168
- | `editable` | `boolean` | `true` | 是否可编辑 |
169
- | `showFlowEntry` | `boolean` | `false` | 是否显示流程入口 |
170
- | `onExecuteSuccess` | `(taskId: string, templateId: string) => void` | - | 执行成功回调 |
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
- - 如果直接使用 `FlowExecute` 组件，需要通过 `useFlowApi` 将 `FlowApiConfig` 转换后传入
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