@blueking/bkflow-canvas-editor 0.0.26 → 0.0.28
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 +66 -95
- package/dist/index.cjs.js +17 -17
- package/dist/index.esm.js +2230 -2239
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -64,19 +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
|
-
| `enableVersion`
|
|
74
|
-
| `flowVersion`
|
|
75
|
-
| `showHeaderActions` | `boolean`
|
|
76
|
-
| `defaultZoom`
|
|
77
|
-
| `bkflowSaasUrl`
|
|
78
|
-
| `onEdit`
|
|
79
|
-
| `onBack`
|
|
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` 事件监听） |
|
|
80
80
|
|
|
81
81
|
#### Slots
|
|
82
82
|
|
|
@@ -111,24 +111,24 @@ npm install bkflow-canvas-editor
|
|
|
111
111
|
|
|
112
112
|
#### Props
|
|
113
113
|
|
|
114
|
-
| 参数
|
|
115
|
-
|
|
|
116
|
-
| `flowId`
|
|
117
|
-
| `apiConfig`
|
|
118
|
-
| `permissions`
|
|
119
|
-
| `enableDebug`
|
|
120
|
-
| `enableVersion`
|
|
121
|
-
| `flowVersion`
|
|
122
|
-
| `onDebugConfirm`
|
|
123
|
-
| `useCustomDebugConfirm`
|
|
124
|
-
| `agentSelectPanelConfig` | `AgentSelectPanelConfig`
|
|
125
|
-
| `onSave`
|
|
126
|
-
| `onSaveSuccess`
|
|
127
|
-
| `onBack`
|
|
128
|
-
| `onBeforeLeave` | `(isEdited: boolean) => Promise<boolean>`
|
|
129
|
-
| `defaultZoom`
|
|
130
|
-
| `bkflowSaasUrl`
|
|
131
|
-
| `
|
|
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` 的值，供插件内部使用 |
|
|
131
|
+
| `enableThirdPlugin` | `boolean` | `true` | 是否启用第三方插件。设置为 `false` 时，将不加载第三方插件列表和详情，只显示内置插件 |
|
|
132
132
|
|
|
133
133
|
#### Slots
|
|
134
134
|
|
|
@@ -184,9 +184,9 @@ npm install bkflow-canvas-editor
|
|
|
184
184
|
|
|
185
185
|
```typescript
|
|
186
186
|
interface AgentSelectPanelConfig {
|
|
187
|
-
applyUrl?: string;
|
|
188
|
-
resourceUrl?: string;
|
|
189
|
-
buttonText?: string;
|
|
187
|
+
applyUrl?: string; // "点击申请" 按钮跳转链接（可选）
|
|
188
|
+
resourceUrl?: string; // "智能体" 按钮跳转链接（可选）
|
|
189
|
+
buttonText?: string; // "智能体" 按钮文本（可选，默认为 "智能体"）
|
|
190
190
|
}
|
|
191
191
|
```
|
|
192
192
|
|
|
@@ -200,9 +200,8 @@ interface AgentSelectPanelConfig {
|
|
|
200
200
|
:agent-select-panel-config="{
|
|
201
201
|
applyUrl: 'https://example.com/apply',
|
|
202
202
|
resourceUrl: 'https://example.com/agent',
|
|
203
|
-
buttonText: '创建智能体'
|
|
204
|
-
}"
|
|
205
|
-
/>
|
|
203
|
+
buttonText: '创建智能体',
|
|
204
|
+
}" />
|
|
206
205
|
</template>
|
|
207
206
|
```
|
|
208
207
|
|
|
@@ -220,15 +219,15 @@ interface AgentSelectPanelConfig {
|
|
|
220
219
|
|
|
221
220
|
#### Props
|
|
222
221
|
|
|
223
|
-
| 参数 | 类型 | 默认值 | 说明
|
|
224
|
-
| ------------------ | ---------------------------------------------- | ------- |
|
|
225
|
-
| `flowId` | `string` | - | **必需**，流程 ID
|
|
226
|
-
| `show` | `boolean` | - | **必需**，是否显示执行面板
|
|
227
|
-
| `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置)
|
|
228
|
-
| `editable` | `boolean` | `true` | 是否可编辑
|
|
229
|
-
| `showFlowEntry` | `boolean` | `false` | 是否显示流程入口
|
|
222
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
223
|
+
| ------------------ | ---------------------------------------------- | ------- | ------------------------------------------------------------------- |
|
|
224
|
+
| `flowId` | `string` | - | **必需**，流程 ID |
|
|
225
|
+
| `show` | `boolean` | - | **必需**，是否显示执行面板 |
|
|
226
|
+
| `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置) |
|
|
227
|
+
| `editable` | `boolean` | `true` | 是否可编辑 |
|
|
228
|
+
| `showFlowEntry` | `boolean` | `false` | 是否显示流程入口 |
|
|
230
229
|
| `bkflowSaasUrl` | `string` | - | bkflow-saas-url，用于设置 `$.context.site_url` 的值，供插件内部使用 |
|
|
231
|
-
| `onExecuteSuccess` | `(taskId: string, templateId: string) => void` | - | 执行成功回调
|
|
230
|
+
| `onExecuteSuccess` | `(taskId: string, templateId: string) => void` | - | 执行成功回调 |
|
|
232
231
|
|
|
233
232
|
#### Events
|
|
234
233
|
|
|
@@ -253,7 +252,7 @@ interface AgentSelectPanelConfig {
|
|
|
253
252
|
| `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置) |
|
|
254
253
|
| `editable` | `boolean` | `true` | 是否可编辑 |
|
|
255
254
|
| `showFlowEntry` | `boolean` | `false` | 是否显示流程入口 |
|
|
256
|
-
| `bkflowSaasUrl` | `string` | - | bkflow-saas-url，用于设置 `$.context.site_url` 的值，供插件内部使用
|
|
255
|
+
| `bkflowSaasUrl` | `string` | - | bkflow-saas-url，用于设置 `$.context.site_url` 的值，供插件内部使用 |
|
|
257
256
|
| `onConfirm` | `(formData: { name: string, variablesValue: Record<string, any> }) => Promise<void> \| void` | - | 自定义确定按钮回调（可选） |
|
|
258
257
|
| `useCustomConfirm` | `boolean` | `false` | 是否使用自定义回调替代原有逻辑。为 `true` 时只执行 `onConfirm`，为 `false` 时在原有逻辑后执行 `onConfirm` |
|
|
259
258
|
| `onExecuteSuccess` | `(taskId: string, templateId: string) => void` | - | 执行成功回调（可选，仅在 `useCustomConfirm` 为 `false` 时生效） |
|
|
@@ -475,24 +474,13 @@ interface AgentSelectPanelConfig {
|
|
|
475
474
|
```vue
|
|
476
475
|
<template>
|
|
477
476
|
<!-- 查看指定版本的流程 -->
|
|
478
|
-
<FlowView
|
|
479
|
-
|
|
480
|
-
:api-config="apiConfig"
|
|
481
|
-
:enable-version="true"
|
|
482
|
-
:flow-version="'v1.0.0'" />
|
|
483
|
-
|
|
477
|
+
<FlowView :flow-id="flowId" :api-config="apiConfig" :enable-version="true" :flow-version="'v1.0.0'" />
|
|
478
|
+
|
|
484
479
|
<!-- 查看草稿版本的流程 -->
|
|
485
|
-
<FlowView
|
|
486
|
-
|
|
487
|
-
:api-config="apiConfig"
|
|
488
|
-
:enable-version="true" />
|
|
489
|
-
|
|
480
|
+
<FlowView :flow-id="flowId" :api-config="apiConfig" :enable-version="true" />
|
|
481
|
+
|
|
490
482
|
<!-- 编辑指定版本的流程 -->
|
|
491
|
-
<FlowEdit
|
|
492
|
-
:flow-id="flowId"
|
|
493
|
-
:api-config="apiConfig"
|
|
494
|
-
:enable-version="true"
|
|
495
|
-
:flow-version="'v1.0.0'" />
|
|
483
|
+
<FlowEdit :flow-id="flowId" :api-config="apiConfig" :enable-version="true" :flow-version="'v1.0.0'" />
|
|
496
484
|
</template>
|
|
497
485
|
|
|
498
486
|
<script setup>
|
|
@@ -515,10 +503,7 @@ interface AgentSelectPanelConfig {
|
|
|
515
503
|
```vue
|
|
516
504
|
<template>
|
|
517
505
|
<!-- 隐藏头部操作按钮 -->
|
|
518
|
-
<FlowView
|
|
519
|
-
:flow-id="flowId"
|
|
520
|
-
:api-config="apiConfig"
|
|
521
|
-
:show-header-actions="false" />
|
|
506
|
+
<FlowView :flow-id="flowId" :api-config="apiConfig" :show-header-actions="false" />
|
|
522
507
|
</template>
|
|
523
508
|
|
|
524
509
|
<script setup>
|
|
@@ -541,16 +526,10 @@ interface AgentSelectPanelConfig {
|
|
|
541
526
|
```vue
|
|
542
527
|
<template>
|
|
543
528
|
<!-- 设置画布默认缩放为 80% -->
|
|
544
|
-
<FlowView
|
|
545
|
-
|
|
546
|
-
:api-config="apiConfig"
|
|
547
|
-
:default-zoom="0.8" />
|
|
548
|
-
|
|
529
|
+
<FlowView :flow-id="flowId" :api-config="apiConfig" :default-zoom="0.8" />
|
|
530
|
+
|
|
549
531
|
<!-- 设置画布默认缩放为 75% -->
|
|
550
|
-
<FlowEdit
|
|
551
|
-
:flow-id="flowId"
|
|
552
|
-
:api-config="apiConfig"
|
|
553
|
-
:default-zoom="0.75" />
|
|
532
|
+
<FlowEdit :flow-id="flowId" :api-config="apiConfig" :default-zoom="0.75" />
|
|
554
533
|
</template>
|
|
555
534
|
|
|
556
535
|
<script setup>
|
|
@@ -574,22 +553,16 @@ interface AgentSelectPanelConfig {
|
|
|
574
553
|
|
|
575
554
|
```vue
|
|
576
555
|
<template>
|
|
577
|
-
<FlowView
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
<FlowEdit
|
|
583
|
-
:flow-id="flowId"
|
|
584
|
-
:api-config="apiConfig"
|
|
585
|
-
:bkflow-saas-url="'https://example.com/bkflow'" />
|
|
586
|
-
|
|
556
|
+
<FlowView :flow-id="flowId" :api-config="apiConfig" :bkflow-saas-url="'https://example.com/bkflow'" />
|
|
557
|
+
|
|
558
|
+
<FlowEdit :flow-id="flowId" :api-config="apiConfig" :bkflow-saas-url="'https://example.com/bkflow'" />
|
|
559
|
+
|
|
587
560
|
<FlowExecute
|
|
588
561
|
:flow-id="flowId"
|
|
589
562
|
:show="isExecuteShow"
|
|
590
563
|
:api-config="apiConfig"
|
|
591
564
|
:bkflow-saas-url="'https://example.com/bkflow'" />
|
|
592
|
-
|
|
565
|
+
|
|
593
566
|
<FlowDebug
|
|
594
567
|
:flow-id="flowId"
|
|
595
568
|
:show="isDebugShow"
|
|
@@ -616,14 +589,11 @@ interface AgentSelectPanelConfig {
|
|
|
616
589
|
|
|
617
590
|
### 禁用第三方插件
|
|
618
591
|
|
|
619
|
-
可以通过 `
|
|
592
|
+
可以通过 `enableThirdPlugin` props 控制是否加载第三方插件。当设置为 `false` 时，将不加载第三方插件列表和详情，只显示内置插件：
|
|
620
593
|
|
|
621
594
|
```vue
|
|
622
595
|
<template>
|
|
623
|
-
<FlowEdit
|
|
624
|
-
:flow-id="flowId"
|
|
625
|
-
:api-config="apiConfig"
|
|
626
|
-
:is-third-plugin-enabled="false" />
|
|
596
|
+
<FlowEdit :flow-id="flowId" :api-config="apiConfig" :is-third-plugin-enabled="false" />
|
|
627
597
|
</template>
|
|
628
598
|
|
|
629
599
|
<script setup>
|
|
@@ -640,12 +610,13 @@ interface AgentSelectPanelConfig {
|
|
|
640
610
|
```
|
|
641
611
|
|
|
642
612
|
> **说明**：
|
|
643
|
-
>
|
|
613
|
+
>
|
|
614
|
+
> - `enableThirdPlugin` 默认值为 `true`，即默认启用第三方插件
|
|
644
615
|
> - 当设置为 `false` 时：
|
|
645
616
|
> - 插件选择面板中的第三方插件标签将不会显示
|
|
646
617
|
> - 不会请求第三方插件列表和详情
|
|
647
618
|
> - 如果流程中已存在第三方插件节点，尝试打开节点配置时会提示错误
|
|
648
|
-
> - 也可以通过 `apiConfig.
|
|
619
|
+
> - 也可以通过 `apiConfig.enableThirdPlugin` 来设置，效果相同
|
|
649
620
|
|
|
650
621
|
### 使用 FlowEdit 的调试功能
|
|
651
622
|
|
|
@@ -736,7 +707,7 @@ interface AgentSelectPanelConfig {
|
|
|
736
707
|
console.log('执行自定义调试逻辑');
|
|
737
708
|
console.log('任务名称:', formData.name);
|
|
738
709
|
console.log('变量值:', formData.variablesValue);
|
|
739
|
-
|
|
710
|
+
|
|
740
711
|
// 执行自定义逻辑，例如发送到调试服务
|
|
741
712
|
// await sendToDebugService(formData);
|
|
742
713
|
};
|
|
@@ -910,7 +881,7 @@ interface FlowApiConfig {
|
|
|
910
881
|
/** 用户查询 API 地址（可选） */
|
|
911
882
|
fetchUserApi?: string;
|
|
912
883
|
/** 是否启用第三方插件（可选，默认为 true） */
|
|
913
|
-
|
|
884
|
+
enableThirdPlugin?: boolean;
|
|
914
885
|
}
|
|
915
886
|
```
|
|
916
887
|
|