@blueking/bkflow-canvas-editor 1.1.0-beta.3 → 1.1.0-beta.31
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 +190 -41
- package/dist/advanced.cjs.js +1 -1
- package/dist/advanced.d.ts +439 -42
- package/dist/advanced.esm.js +6 -3
- package/dist/context-CctqyVR4.cjs +1 -0
- package/dist/{composable-gqC5C2k8.js → context-Ct82UNm-.js} +465 -259
- package/dist/index-BOWtxLy9.cjs +85 -0
- package/dist/index-B_qdBoef.js +234 -0
- package/dist/index-BrSlioLr.cjs +1 -0
- package/dist/index-BsR4XVBl.cjs +1 -0
- package/dist/index-BxwSbxVq.js +512 -0
- package/dist/index-CDDdrtU0.js +54789 -0
- package/dist/index-Dcyrt4No.cjs +1 -0
- package/dist/index-DgObHtuV.js +162 -0
- package/dist/index.cjs.js +1 -70
- package/dist/index.d.ts +928 -112
- package/dist/index.esm.js +39 -46192
- package/dist/style.css +1 -1
- package/dist/style.d.ts +2 -0
- package/package.json +12 -8
- package/dist/composable-B_bR5Gic.cjs +0 -1
package/README.md
CHANGED
|
@@ -5,9 +5,11 @@ bkflow流程编辑组件，支持流程的编辑、查看、调试以及创建
|
|
|
5
5
|
## 安装
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install @blueking/bkflow-canvas-editor
|
|
8
|
+
npm install @blueking/bkflow-canvas-editor @blueking/flow-canvas
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
+
`@blueking/flow-canvas` 是精确版本的 peerDependency，须与 editor 声明的版本一致；JS/CSS 均不打进 editor 产物。
|
|
12
|
+
|
|
11
13
|
## 使用
|
|
12
14
|
|
|
13
15
|
### 基础使用
|
|
@@ -24,6 +26,7 @@ npm install @blueking/bkflow-canvas-editor
|
|
|
24
26
|
|
|
25
27
|
<script setup>
|
|
26
28
|
import { FlowView } from 'bkflow-canvas-editor';
|
|
29
|
+
import '@blueking/flow-canvas/style';
|
|
27
30
|
import 'bkflow-canvas-editor/style';
|
|
28
31
|
import axios from 'axios';
|
|
29
32
|
|
|
@@ -35,6 +38,7 @@ npm install @blueking/bkflow-canvas-editor
|
|
|
35
38
|
scopeData: {
|
|
36
39
|
scope_type: 'space',
|
|
37
40
|
scope_value: 123,
|
|
41
|
+
space_id: 123,
|
|
38
42
|
}, // 作用域数据（必需）
|
|
39
43
|
fetchUserApi: `${window.BK_COMPONENT_API_URL}/api/c/compapi/v2/usermanage/fs_list_users/`, // @deprecated 仅保留向后兼容，推荐使用 memberSelectorConfig
|
|
40
44
|
// 可选：使用自定义 axios 实例
|
|
@@ -80,27 +84,29 @@ npm install @blueking/bkflow-canvas-editor
|
|
|
80
84
|
|
|
81
85
|
#### Props
|
|
82
86
|
|
|
83
|
-
| 参数 | 类型
|
|
84
|
-
| ------------------- |
|
|
85
|
-
| `flowId` | `string`
|
|
86
|
-
| `apiConfig` | `FlowApiConfig`
|
|
87
|
-
| `permissions` | `{ canEdit?: boolean }`
|
|
88
|
-
| `thumbnail` | `boolean`
|
|
89
|
-
| `enableVersion` | `boolean`
|
|
90
|
-
| `flowVersion` | `string`
|
|
91
|
-
| `showHeaderActions` | `boolean`
|
|
92
|
-
| `defaultZoom` | `number`
|
|
93
|
-
| `bkflowSaasUrl` | `string`
|
|
94
|
-
| `
|
|
95
|
-
| `
|
|
96
|
-
| `
|
|
87
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
88
|
+
| ------------------- | ------------------------------------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |
|
|
89
|
+
| `flowId` | `string` | - | **必需**，流程 ID |
|
|
90
|
+
| `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置) |
|
|
91
|
+
| `permissions` | `{ canEdit?: boolean }` | `{ canEdit: true }` | 权限配置对象，`canEdit` 控制头部编辑按钮是否使用禁用样式 |
|
|
92
|
+
| `thumbnail` | `boolean` | `false` | 小地图模式，启用后只显示画布内容，不显示顶部 header 和操作按钮，禁用节点点击事件 |
|
|
93
|
+
| `enableVersion` | `boolean` | `false` | 是否开启流程版本功能，开启后会根据 `flowVersion` 的值获取对应版本的流程数据 |
|
|
94
|
+
| `flowVersion` | `string` | - | 流程版本号，仅在 `enableVersion` 为 `true` 时生效。为空时表示草稿版本，不为空时表示指定版本 |
|
|
95
|
+
| `showHeaderActions` | `boolean` | `true` | 是否显示头部操作按钮（编辑、执行流程、调试），仅在非小地图模式下生效 |
|
|
96
|
+
| `defaultZoom` | `number` | `1` | x6 画布的默认缩放比例，用于控制画布的初始显示效果。取值范围建议在 0.25 到 1.5 之间 |
|
|
97
|
+
| `bkflowSaasUrl` | `string` | - | bkflow-saas-url，用于设置 `$.context.site_url` 的值，供插件内部使用 |
|
|
98
|
+
| `hideTrigger` | `boolean` | `false` | 是否隐藏基础信息中的触发器配置表单 |
|
|
99
|
+
| `onEdit` | `() => void` | - | 编辑按钮点击回调（可选，也可以通过 `@edit` 事件监听） |
|
|
100
|
+
| `onBack` | `() => void` | - | 返回按钮点击回调（可选，也可以通过 `@back` 事件监听） |
|
|
101
|
+
| `onExecuteSuccess` | `(result: FlowTaskExecuteSuccessResult) => void` | - | 执行成功回调（可选），参数含 `createResult`(create_task) 与 `executeResult`(operate_task)，用 `executeResult.data.url` 跳转 |
|
|
97
102
|
|
|
98
103
|
#### Slots
|
|
99
104
|
|
|
100
|
-
| 插槽名
|
|
101
|
-
|
|
|
102
|
-
| `header`
|
|
103
|
-
| `inputParams`
|
|
105
|
+
| 插槽名 | 作用域参数 | 说明 |
|
|
106
|
+
| ------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
|
|
107
|
+
| `header` | - | 自定义头部内容 |
|
|
108
|
+
| `inputParams` | 见下方说明 | 自定义节点输入参数组件 |
|
|
109
|
+
| `customFormContent` | `customFormData`、`additionalTaskParams`、`updateCustomFormData`、`updateAdditionalTaskParams` | 创建任务侧滑自定义额外表单项；`additionalTaskParams` 会合并进创建请求 |
|
|
104
110
|
|
|
105
111
|
##### inputParams 插槽作用域参数
|
|
106
112
|
|
|
@@ -146,7 +152,8 @@ npm install @blueking/bkflow-canvas-editor
|
|
|
146
152
|
| `defaultZoom` | `number` | `1` | x6 画布的默认缩放比例，用于控制画布的初始显示效果。取值范围建议在 0.25 到 1.5 之间 |
|
|
147
153
|
| `bkflowSaasUrl` | `string` | - | bkflow-saas-url，用于设置 `$.context.site_url` 的值，供插件内部使用 |
|
|
148
154
|
| `enableThirdPlugin` | `boolean` | `true` | 是否启用第三方插件。设置为 `false` 时，将不加载第三方插件列表和详情，只显示内置插件 |
|
|
149
|
-
| `quickAdd` | `QuickAddConfig
|
|
155
|
+
| `quickAdd` | `QuickAddConfig`（来自 `@blueking/flow-canvas`） | - | 透传给底层画布的 quick-add 配置；默认启用，可自定义绑定端口、插入方向或显式关闭 |
|
|
156
|
+
| `hideTrigger` | `boolean` | `false` | 是否隐藏基础信息中的触发器配置表单 |
|
|
150
157
|
|
|
151
158
|
#### Slots
|
|
152
159
|
|
|
@@ -192,6 +199,10 @@ npm install @blueking/bkflow-canvas-editor
|
|
|
192
199
|
| ----------------------- | -------------------------------------------------- | ---------------------- | ---------------------------------------------------------- |
|
|
193
200
|
| `updateNodeInputParams` | `inputParams: Record<string, PluginInputDataItem>` | `void` | 更新当前打开节点的输入参数（暂存，需点击确定按钮才会保存） |
|
|
194
201
|
| `isFlowEdited` | - | `ComputedRef<boolean>` | 流程是否已编辑（只读） |
|
|
202
|
+
| `openGlobalVariables` | - | `void` | 打开全局变量面板 |
|
|
203
|
+
| `zoomToFit` | `options?: ZoomToFitOptions` | `void` | 自适应画布视口 |
|
|
204
|
+
| `centerContent` | - | `void` | 居中画布内容 |
|
|
205
|
+
| `getZoom` | - | `number` | 获取当前缩放比例 |
|
|
195
206
|
|
|
196
207
|
---
|
|
197
208
|
|
|
@@ -240,25 +251,31 @@ interface SelectPanelConfig {
|
|
|
240
251
|
|
|
241
252
|
#### Props
|
|
242
253
|
|
|
243
|
-
| 参数 | 类型
|
|
244
|
-
| ------------------ |
|
|
245
|
-
| `flowId` | `string`
|
|
246
|
-
| `show` | `boolean`
|
|
247
|
-
| `apiConfig` | `FlowApiConfig`
|
|
248
|
-
| `editable` | `boolean`
|
|
249
|
-
| `showFlowEntry` | `boolean`
|
|
250
|
-
| `bkflowSaasUrl` | `string`
|
|
251
|
-
| `onExecuteSuccess` | `(
|
|
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
|
+
| `onExecuteSuccess` | `(result: FlowTaskExecuteSuccessResult) => void` | - | 执行成功回调，参数含 `createResult`(create_task) 与 `executeResult`(operate_task)，用 `executeResult.data.url` 跳转 |
|
|
263
|
+
|
|
264
|
+
#### Slots
|
|
265
|
+
|
|
266
|
+
| 插槽名 | Slot Props | 说明 |
|
|
267
|
+
| ------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
|
|
268
|
+
| `customFormContent` | `customFormData`、`additionalTaskParams`、`updateCustomFormData`、`updateAdditionalTaskParams` | 自定义额外表单项；`additionalTaskParams` 会合并进 `createFlowTask` |
|
|
252
269
|
|
|
253
270
|
#### Events
|
|
254
271
|
|
|
255
|
-
| 事件名 | 参数
|
|
256
|
-
| -------------- |
|
|
257
|
-
| `confirm` | `
|
|
258
|
-
| `close` | -
|
|
259
|
-
| `update:show` | `show: boolean`
|
|
260
|
-
| `before-close` | -
|
|
261
|
-
| `view-flow` | -
|
|
272
|
+
| 事件名 | 参数 | 说明 |
|
|
273
|
+
| -------------- | -------------------------------------- | ------------------------ |
|
|
274
|
+
| `confirm` | `result: FlowTaskExecuteSuccessResult` | 执行确认时触发 |
|
|
275
|
+
| `close` | - | 关闭面板时触发 |
|
|
276
|
+
| `update:show` | `show: boolean` | 显示状态更新时触发 |
|
|
277
|
+
| `before-close` | - | 面板关闭前触发 |
|
|
278
|
+
| `view-flow` | - | 点击查看排障流程按钮触发 |
|
|
262
279
|
|
|
263
280
|
---
|
|
264
281
|
|
|
@@ -340,6 +357,114 @@ interface SelectPanelConfig {
|
|
|
340
357
|
|
|
341
358
|
---
|
|
342
359
|
|
|
360
|
+
### FlowDetail 组件
|
|
361
|
+
|
|
362
|
+
统一的流程详情组件，将「查看 / 编辑 / 调试」收敛到一个入口，通过 `permissions` 精确控制能力。推荐新接入方使用 `FlowDetail` 替代 `FlowMockDebug`。
|
|
363
|
+
|
|
364
|
+
> `FlowDetail` 仅支持 Vue 3。`FlowEdit` / `FlowView` 的既有行为、Props/Emits 不受影响，可继续使用。
|
|
365
|
+
|
|
366
|
+
#### 安装与基础示例
|
|
367
|
+
|
|
368
|
+
```vue
|
|
369
|
+
<template>
|
|
370
|
+
<FlowDetail
|
|
371
|
+
:flow-id="flowId"
|
|
372
|
+
:api-config="apiConfig"
|
|
373
|
+
:permissions="{ canEdit: true, canDebug: true, canExecute: true }"
|
|
374
|
+
@save="handleSave"
|
|
375
|
+
@back="handleBack" />
|
|
376
|
+
</template>
|
|
377
|
+
|
|
378
|
+
<script setup>
|
|
379
|
+
import { FlowDetail } from '@blueking/bkflow-canvas-editor';
|
|
380
|
+
import '@blueking/flow-canvas/style';
|
|
381
|
+
import '@blueking/bkflow-canvas-editor/style';
|
|
382
|
+
|
|
383
|
+
const flowId = '2085';
|
|
384
|
+
const apiConfig = {
|
|
385
|
+
scopeData: { scope_type: 'space', scope_value: 171, space_id: 171 },
|
|
386
|
+
};
|
|
387
|
+
</script>
|
|
388
|
+
```
|
|
389
|
+
|
|
390
|
+
#### Props
|
|
391
|
+
|
|
392
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
393
|
+
| ------------- | --------------------------------------------- | ---------------------------------- | -------------------------------------------------------------------------- |
|
|
394
|
+
| `flowId` | `string` | - | **必需**，流程 ID |
|
|
395
|
+
| `apiConfig` | `FlowApiConfig \| FlowDetailApiConfig` | - | **必需**，API 配置对象；`canDebug=true` 时需一并提供调试方法（见下） |
|
|
396
|
+
| `permissions` | `Partial<FlowDetailPermissions>` | `{ canEdit: false, canDebug: false, canExecute: false }` | 权限配置，**默认全部拒绝**，需显式开启 |
|
|
397
|
+
| `onExecuteSuccess` | `(result: FlowTaskExecuteSuccessResult) => void` | - | 执行成功回调，参数与 `FlowView` 一致 |
|
|
398
|
+
| `enableVersion` / `flowVersion` | `boolean` / `string` | `false` / - | 流程版本功能，语义与 FlowView/FlowEdit 一致 |
|
|
399
|
+
| `defaultZoom` / `quickAdd` / `hideTrigger` / `bkflowSaasUrl` | 同 FlowEdit | - | 透传给内部画布与信息侧滑 |
|
|
400
|
+
|
|
401
|
+
#### Events
|
|
402
|
+
|
|
403
|
+
| 事件名 | 参数 | 说明 |
|
|
404
|
+
| ------------- | ------------------------ | -------------------------- |
|
|
405
|
+
| `save` | `flowData: FlowTemplate` | 显式保存成功后触发 |
|
|
406
|
+
| `saveSuccess` | - | 显式保存成功后触发 |
|
|
407
|
+
| `back` | - | 返回按钮点击时触发 |
|
|
408
|
+
| `createVariable` | `{ keyword, cursorIndex }` | 请求新建全局变量时触发 |
|
|
409
|
+
|
|
410
|
+
#### Slots
|
|
411
|
+
|
|
412
|
+
| 插槽名 | 作用域参数 | 说明 |
|
|
413
|
+
| ------------------ | ------------------------------------------- | ---------------------------------------------------------------------- |
|
|
414
|
+
| `header` | - | 自定义头部左侧标题区 |
|
|
415
|
+
| `headerActions` | `{ savePending, canMutateFlow }` | 头部右侧操作区追加宿主自定义按钮，排在内置「保存」「执行流程」之后 |
|
|
416
|
+
| `inputParams` | 见 `FlowView` | 自定义节点输入参数表单 |
|
|
417
|
+
| `customFormContent`| 见 `FlowView` | 自定义创建任务侧滑表单内容 |
|
|
418
|
+
|
|
419
|
+
#### 权限矩阵
|
|
420
|
+
|
|
421
|
+
`permissions` 默认拒绝，四种组合如下：
|
|
422
|
+
|
|
423
|
+
| `canEdit` | `canDebug` | 效果 |
|
|
424
|
+
| --------- | ---------- | ---------------------------------------------------------- |
|
|
425
|
+
| `false` | `false` | 纯只读查看，无保存、无调试入口，且**不请求任何调试接口** |
|
|
426
|
+
| `true` | `false` | 可编辑与保存，无调试入口 |
|
|
427
|
+
| `false` | `true` | 只读画布 + 全流程/单节点调试（调试期间流程本就不可编辑） |
|
|
428
|
+
| `true` | `true` | 可编辑、保存与完整调试；调试运行中锁定编辑（画布转 `view`）|
|
|
429
|
+
|
|
430
|
+
`permissions.canExecute` 独立控制头部“执行流程”按钮的显示，为 `false` 时按钮不渲染。流程存在未保存修改时，确认保存成功后才会打开创建任务侧滑；`customFormContent` 插槽与 `FlowView` 一致。
|
|
431
|
+
|
|
432
|
+
头部右侧按钮区在 `canEdit`、`canExecute` 均为 `false` 且未传 `headerActions` 插槽时整体不渲染。宿主若要按状态控制自定义按钮的显隐，可在插槽模板上直接加 `v-if`，插槽未传入时按钮区不会留下空白：
|
|
433
|
+
|
|
434
|
+
```vue
|
|
435
|
+
<FlowDetail :flow-id="flowId" :api-config="apiConfig" :permissions="permissions">
|
|
436
|
+
<template v-if="permissions.canEdit" #headerActions>
|
|
437
|
+
<bk-button @click="handleExitEdit">退出编辑</bk-button>
|
|
438
|
+
</template>
|
|
439
|
+
</FlowDetail>
|
|
440
|
+
```
|
|
441
|
+
|
|
442
|
+
#### 调试能力
|
|
443
|
+
|
|
444
|
+
- **全流程调试**：头部调试入口填写全局输入后启动，前端按 2500ms（失败退避 5000ms）轮询 `/context/`，可随时终止。
|
|
445
|
+
- **单节点 real**：节点详情「调试配置」Tab 内直接以真实逻辑同步执行单步，完成后刷新 `context`。
|
|
446
|
+
- **单节点 Mock**：配置 Mock 输出结果后执行（内部顺序：保存 Mock → 单步执行 mock）；执行时跳过该节点并以 Mock 输出替代实际输出，Mock 节点在后续全流程中保留 `MOCK` 标签。
|
|
447
|
+
- **取消 Mock**：清除节点的持久 Mock 配置。
|
|
448
|
+
- **终止**：全流程终止不传 `node_id`；单步调试进入运行/等待态时，传当前 `active_node_id` 终止该节点。
|
|
449
|
+
- **保存联动**：`canDebug` 且 `context` 空闲时，保存成功后会查询 `reset_impact` 并自动清理失效节点的调试结果。
|
|
450
|
+
|
|
451
|
+
#### 调试 API 契约（`canDebug=true` 必需）
|
|
452
|
+
|
|
453
|
+
消费方若传入完整的 api 配置对象（而非仅 `scopeData`），当 `canDebug=true` 时**必须**一并提供以下调试方法，组件初始化时会统一校验：
|
|
454
|
+
|
|
455
|
+
`fetchDebugContext`、`fetchDebugInputSchema`、`fetchDebugResetImpact`、`updateNodeDebugMock`、`runNodeDebugStep`、`runGlobalDebug`、`terminateDebug`、`resetDebugResult`（签名见 `DebugApiServices`）。
|
|
456
|
+
|
|
457
|
+
约定：
|
|
458
|
+
|
|
459
|
+
- 前端以 `debug_context`（后端 `build_context_view`）为**唯一事实源**，不新增 `node_input_values` 接口。`active_*`（当前持锁任务）与 `last_*`（最近一次运行）按顶层 `status` 分支选用。
|
|
460
|
+
- 建议后端在 `debug_context` 透出 `mock_outputs` / `mock_error` / `outputs`，否则刷新后 Mock 输出与「输出结果/重新编辑」回填会缺数据。
|
|
461
|
+
- 调试接口与普通接口同源：走后端 python 包 bkflow_sdk `TemplateViewSet` 的 `/bkflow/template/debug_*`，全站信封 `{result, data, message}`。走内置 `useFlowApi()` 时自动获得全部调试方法。
|
|
462
|
+
- 调试与普通接口共用同一 ApiClient：只在客户端边界解信封，并统一抛出 `ApiError`。调试请求的 `delegate` 仅转交 Message 呈现权，service/controller/page 不再重复解包或改造错误。
|
|
463
|
+
|
|
464
|
+
> **Deprecated**：`FlowMockDebug` 已废弃，请改用 `FlowDetail` 并开启 `permissions.canDebug`。`FlowMockDebug` 将在下个大版本移除。
|
|
465
|
+
|
|
466
|
+
---
|
|
467
|
+
|
|
343
468
|
## 使用示例
|
|
344
469
|
|
|
345
470
|
### 基础使用
|
|
@@ -364,6 +489,7 @@ interface SelectPanelConfig {
|
|
|
364
489
|
scopeData: {
|
|
365
490
|
scope_type: 'space',
|
|
366
491
|
scope_value: 123,
|
|
492
|
+
space_id: 123,
|
|
367
493
|
},
|
|
368
494
|
};
|
|
369
495
|
|
|
@@ -427,6 +553,7 @@ interface SelectPanelConfig {
|
|
|
427
553
|
scopeData: {
|
|
428
554
|
scope_type: "space",
|
|
429
555
|
scope_value: 123,
|
|
556
|
+
space_id: 123,
|
|
430
557
|
},
|
|
431
558
|
};
|
|
432
559
|
|
|
@@ -459,11 +586,14 @@ interface SelectPanelConfig {
|
|
|
459
586
|
scopeData: {
|
|
460
587
|
scope_type: 'space',
|
|
461
588
|
scope_value: 123,
|
|
589
|
+
space_id: 123,
|
|
462
590
|
},
|
|
463
591
|
};
|
|
464
592
|
</script>
|
|
465
593
|
```
|
|
466
594
|
|
|
595
|
+
外部 Axios 实例仍会通过组件的统一 ApiClient 边界，因此无论宿主拦截器返回 `AxiosResponse`、信封 body 或已解包 DTO，组件内部都获得业务 DTO。建议宿主拦截器不要再对 `{ result: false }` 弹业务 Message，否则无法保证跨边界的单次呈现。
|
|
596
|
+
|
|
467
597
|
### 监听流程编辑状态
|
|
468
598
|
|
|
469
599
|
```vue
|
|
@@ -514,6 +644,7 @@ interface SelectPanelConfig {
|
|
|
514
644
|
|
|
515
645
|
<script setup>
|
|
516
646
|
import { FlowView } from 'bkflow-canvas-editor';
|
|
647
|
+
import '@blueking/flow-canvas/style';
|
|
517
648
|
import 'bkflow-canvas-editor/style';
|
|
518
649
|
|
|
519
650
|
const flowId = '123';
|
|
@@ -521,6 +652,7 @@ interface SelectPanelConfig {
|
|
|
521
652
|
scopeData: {
|
|
522
653
|
scope_type: 'space',
|
|
523
654
|
scope_value: 123,
|
|
655
|
+
space_id: 123,
|
|
524
656
|
},
|
|
525
657
|
};
|
|
526
658
|
</script>
|
|
@@ -563,6 +695,7 @@ interface SelectPanelConfig {
|
|
|
563
695
|
scopeData: {
|
|
564
696
|
scope_type: 'space',
|
|
565
697
|
scope_value: 123,
|
|
698
|
+
space_id: 123,
|
|
566
699
|
},
|
|
567
700
|
};
|
|
568
701
|
</script>
|
|
@@ -586,6 +719,7 @@ interface SelectPanelConfig {
|
|
|
586
719
|
scopeData: {
|
|
587
720
|
scope_type: 'space',
|
|
588
721
|
scope_value: 123,
|
|
722
|
+
space_id: 123,
|
|
589
723
|
},
|
|
590
724
|
};
|
|
591
725
|
</script>
|
|
@@ -612,6 +746,7 @@ interface SelectPanelConfig {
|
|
|
612
746
|
scopeData: {
|
|
613
747
|
scope_type: 'space',
|
|
614
748
|
scope_value: 123,
|
|
749
|
+
space_id: 123,
|
|
615
750
|
},
|
|
616
751
|
};
|
|
617
752
|
</script>
|
|
@@ -682,6 +817,7 @@ interface SelectPanelConfig {
|
|
|
682
817
|
scopeData: {
|
|
683
818
|
scope_type: 'space',
|
|
684
819
|
scope_value: 123,
|
|
820
|
+
space_id: 123,
|
|
685
821
|
},
|
|
686
822
|
};
|
|
687
823
|
</script>
|
|
@@ -706,6 +842,7 @@ interface SelectPanelConfig {
|
|
|
706
842
|
scopeData: {
|
|
707
843
|
scope_type: 'space',
|
|
708
844
|
scope_value: 123,
|
|
845
|
+
space_id: 123,
|
|
709
846
|
},
|
|
710
847
|
};
|
|
711
848
|
</script>
|
|
@@ -758,6 +895,7 @@ interface SelectPanelConfig {
|
|
|
758
895
|
scopeData: {
|
|
759
896
|
scope_type: 'space',
|
|
760
897
|
scope_value: 123,
|
|
898
|
+
space_id: 123,
|
|
761
899
|
},
|
|
762
900
|
};
|
|
763
901
|
|
|
@@ -797,6 +935,7 @@ interface SelectPanelConfig {
|
|
|
797
935
|
scopeData: {
|
|
798
936
|
scope_type: 'space',
|
|
799
937
|
scope_value: 123,
|
|
938
|
+
space_id: 123,
|
|
800
939
|
},
|
|
801
940
|
};
|
|
802
941
|
|
|
@@ -840,6 +979,7 @@ interface SelectPanelConfig {
|
|
|
840
979
|
scopeData: {
|
|
841
980
|
scope_type: 'space',
|
|
842
981
|
scope_value: 123,
|
|
982
|
+
space_id: 123,
|
|
843
983
|
},
|
|
844
984
|
};
|
|
845
985
|
</script>
|
|
@@ -879,6 +1019,7 @@ interface SelectPanelConfig {
|
|
|
879
1019
|
scopeData: {
|
|
880
1020
|
scope_type: 'space',
|
|
881
1021
|
scope_value: 123,
|
|
1022
|
+
space_id: 123,
|
|
882
1023
|
},
|
|
883
1024
|
};
|
|
884
1025
|
</script>
|
|
@@ -907,6 +1048,7 @@ interface SelectPanelConfig {
|
|
|
907
1048
|
scopeData: {
|
|
908
1049
|
scope_type: 'space',
|
|
909
1050
|
scope_value: 123,
|
|
1051
|
+
space_id: 123,
|
|
910
1052
|
},
|
|
911
1053
|
};
|
|
912
1054
|
|
|
@@ -947,6 +1089,7 @@ interface SelectPanelConfig {
|
|
|
947
1089
|
scopeData: {
|
|
948
1090
|
scope_type: 'space',
|
|
949
1091
|
scope_value: 123,
|
|
1092
|
+
space_id: 123,
|
|
950
1093
|
},
|
|
951
1094
|
};
|
|
952
1095
|
|
|
@@ -993,6 +1136,7 @@ interface SelectPanelConfig {
|
|
|
993
1136
|
scopeData: {
|
|
994
1137
|
scope_type: 'space',
|
|
995
1138
|
scope_value: 123,
|
|
1139
|
+
space_id: 123,
|
|
996
1140
|
},
|
|
997
1141
|
};
|
|
998
1142
|
</script>
|
|
@@ -1018,6 +1162,8 @@ interface FlowApiConfig {
|
|
|
1018
1162
|
scopeData: {
|
|
1019
1163
|
scope_type: string;
|
|
1020
1164
|
scope_value: number;
|
|
1165
|
+
/** 业务方传入的空间 ID，调试接口专用，语义独立于 scope_value */
|
|
1166
|
+
space_id: number;
|
|
1021
1167
|
};
|
|
1022
1168
|
/**
|
|
1023
1169
|
* 用户查询 API 地址
|
|
@@ -1100,7 +1246,7 @@ type MemberSelectorConfig =
|
|
|
1100
1246
|
|
|
1101
1247
|
### 高级用法：传入完整 API 方法对象
|
|
1102
1248
|
|
|
1103
|
-
深度集成场景下，组件也支持直接传入“已处理好的 API 方法对象”。这类对象通常通过 `useFlowApi`
|
|
1249
|
+
深度集成场景下，组件也支持直接传入“已处理好的 API 方法对象”。这类对象通常通过 `useFlowApi` 生成，或在其基础上覆写单个方法。“已处理”的契约是：方法直接 resolve 类型声明中的业务 DTO，失败时 reject `Error`/`ApiError`，不要再返回 `AxiosResponse` 或 `{ result, data, message }` 信封。
|
|
1104
1250
|
|
|
1105
1251
|
- 常规场景：直接传 `FlowApiConfig`
|
|
1106
1252
|
- 高级场景：传 `useFlowApi(config)` 的返回值
|
|
@@ -1117,6 +1263,7 @@ const baseConfig: FlowApiConfig = {
|
|
|
1117
1263
|
scopeData: {
|
|
1118
1264
|
scope_type: 'space',
|
|
1119
1265
|
scope_value: 123,
|
|
1266
|
+
space_id: 123,
|
|
1120
1267
|
},
|
|
1121
1268
|
fetchUserApi: `${window.BK_COMPONENT_API_URL}/api/c/compapi/v2/usermanage/fs_list_users/`,
|
|
1122
1269
|
};
|
|
@@ -1127,7 +1274,8 @@ const apiConfig: FlowViewApiConfig = {
|
|
|
1127
1274
|
const res = await http.get(`/custom/template/${id}/detail/`, {
|
|
1128
1275
|
params: baseConfig.scopeData,
|
|
1129
1276
|
});
|
|
1130
|
-
|
|
1277
|
+
// 此处是宿主适配边界：返回 FlowTemplate，不返回 AxiosResponse/信封。
|
|
1278
|
+
return res.data.data;
|
|
1131
1279
|
},
|
|
1132
1280
|
};
|
|
1133
1281
|
```
|
|
@@ -1174,10 +1322,11 @@ import type {
|
|
|
1174
1322
|
UniformApiPluginInputsItem,
|
|
1175
1323
|
PluginDetailCommon,
|
|
1176
1324
|
SelectPanelConfig,
|
|
1177
|
-
QuickAddConfig,
|
|
1178
|
-
InsertDirection,
|
|
1179
1325
|
// ... 更多类型
|
|
1180
1326
|
} from 'bkflow-canvas-editor';
|
|
1327
|
+
|
|
1328
|
+
// 引擎类型从 @blueking/flow-canvas 导入，本包不再再导出
|
|
1329
|
+
import type { QuickAddConfig, InsertDirection } from '@blueking/flow-canvas';
|
|
1181
1330
|
```
|
|
1182
1331
|
|
|
1183
1332
|
高级集成场景下，还可以从 `@blueking/bkflow-canvas-editor/advanced` 导入完整 API 类型和 `useFlowApi`：
|
|
@@ -1218,7 +1367,7 @@ resolve: {
|
|
|
1218
1367
|
4. **自动合并 scopeData**：所有 API 请求会自动合并 `scopeData` 到请求参数中（GET 请求合并到 params，POST/PUT 请求合并到请求体）
|
|
1219
1368
|
5. **权限检查**：权限检查通过 `permissions` props 传入布尔值
|
|
1220
1369
|
6. **路由跳转**：路由跳转需要通过事件回调处理，组件内部不直接使用 vue-router
|
|
1221
|
-
7.
|
|
1370
|
+
7. **样式引入**：需分别引入引擎与业务样式：`import '@blueking/flow-canvas/style'` 与 `import 'bkflow-canvas-editor/style'`
|
|
1222
1371
|
8. **输入参数更新机制**：
|
|
1223
1372
|
- 使用 `inputParams` 插槽时，通过 `updateInputParams` 或 `updateNodeInputParams` 方法更新的数据会暂存到节点配置面板
|
|
1224
1373
|
- 用户需要点击节点配置面板的"确定"按钮，数据才会真正保存到流程中
|
package/dist/advanced.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./context-CctqyVR4.cjs");exports.PLUGIN_GROUP_ICON_MAP=e.PLUGIN_GROUP_ICON_MAP;exports.SOPS_PLUGIN_GROUP_NAME=e.SOPS_PLUGIN_GROUP_NAME;exports.provideVariableInputCreateVariable=e.provideVariableInputCreateVariable;exports.useFlowApi=e.useFlowApi;exports.useVariableInputCreateVariable=e.useVariableInputCreateVariable;
|