@blueking/bkflow-canvas-editor 1.1.0-beta.1 → 1.1.0-beta.10

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 (25) hide show
  1. package/README.md +237 -42
  2. package/dist/advanced.cjs.js +1 -1
  3. package/dist/advanced.d.ts +387 -35
  4. package/dist/advanced.esm.js +1 -1
  5. package/dist/bkflow-canvas-editor_false-B70uLuHL.cjs +1 -0
  6. package/dist/bkflow-canvas-editor_false-BlC281Zg.cjs +1 -0
  7. package/dist/bkflow-canvas-editor_false-Casww7p4.js +5 -0
  8. package/dist/bkflow-canvas-editor_false-i9G8sqQi.js +5 -0
  9. package/dist/{composable-QLQKeBKC.js → composable-Cf47ka9M.js} +381 -192
  10. package/dist/composable-YlUVct40.cjs +1 -0
  11. package/dist/index-Bf3z3UZx.cjs +1 -0
  12. package/dist/index-C16qU3Yx.js +47169 -0
  13. package/dist/index-CKYqFEfP.cjs +1 -0
  14. package/dist/index-CyWnToNA.js +159 -0
  15. package/dist/index-DOcgB3JP.cjs +70 -0
  16. package/dist/index-Dm3eGl5T.js +504 -0
  17. package/dist/index-DoCdunh9.js +184 -0
  18. package/dist/index-DzvB2ICU.cjs +1 -0
  19. package/dist/index.cjs.js +1 -70
  20. package/dist/index.d.ts +817 -152
  21. package/dist/index.esm.js +38 -43048
  22. package/dist/style.css +1 -1
  23. package/dist/style.d.ts +2 -0
  24. package/package.json +18 -7
  25. package/dist/composable-CNiwlaFl.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,8 +38,9 @@ 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
- fetchUserApi: `${window.BK_COMPONENT_API_URL}/api/c/compapi/v2/usermanage/fs_list_users/`, // 用户查询 API（可选）
43
+ fetchUserApi: `${window.BK_COMPONENT_API_URL}/api/c/compapi/v2/usermanage/fs_list_users/`, // @deprecated 仅保留向后兼容，推荐使用 memberSelectorConfig
40
44
  // 可选：使用自定义 axios 实例
41
45
  // axiosInstance: customAxiosInstance,
42
46
  // 可选：axios 配置
@@ -46,6 +50,22 @@ npm install @blueking/bkflow-canvas-editor
46
50
  // },
47
51
  };
48
52
 
53
+ // 人员选择器配置（可选）
54
+ // legacy 模式：使用组件内置的 UserSelector
55
+ const memberSelectorConfig = {
56
+ mode: 'legacy',
57
+ fetchUserApi: `${window.BK_COMPONENT_API_URL}/api/c/compapi/v2/usermanage/fs_list_users/`,
58
+ };
59
+ // tenant 模式：使用 @blueking/bk-user-selector（需接入方单独安装该 npm 包）
60
+ // const memberSelectorConfig = {
61
+ // mode: 'tenant',
62
+ // tenantId: 'default',
63
+ // apiBaseUrl: 'https://bk-user.example.com',
64
+ // currentUserId: 'admin',
65
+ // enableMultiTenantMode: false,
66
+ // hasAvatar: false,
67
+ // };
68
+
49
69
  const handleEdit = () => {
50
70
  // 跳转到编辑页面
51
71
  };
@@ -64,27 +84,29 @@ npm install @blueking/bkflow-canvas-editor
64
84
 
65
85
  #### Props
66
86
 
67
- | 参数 | 类型 | 默认值 | 说明 |
68
- | ------------------- | ---------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------- |
69
- | `flowId` | `string` | - | **必需**，流程 ID |
70
- | `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置) |
71
- | `permissions` | `{ canEdit?: boolean }` | `{ canEdit: true }` | 权限配置对象，`canEdit` 控制头部编辑按钮是否使用禁用样式 |
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
- | `onExecuteSuccess` | `(taskId: number, templateId: number) => void` | - | 执行成功回调（可选） |
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` 跳转 |
81
102
 
82
103
  #### Slots
83
104
 
84
- | 插槽名 | 作用域参数 | 说明 |
85
- | ------------- | ---------- | ---------------------- |
86
- | `header` | - | 自定义头部内容 |
87
- | `inputParams` | 见下方说明 | 自定义节点输入参数组件 |
105
+ | 插槽名 | 作用域参数 | 说明 |
106
+ | ------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
107
+ | `header` | - | 自定义头部内容 |
108
+ | `inputParams` | 见下方说明 | 自定义节点输入参数组件 |
109
+ | `customFormContent` | `customFormData`、`additionalTaskParams`、`updateCustomFormData`、`updateAdditionalTaskParams` | 创建任务侧滑自定义额外表单项；`additionalTaskParams` 会合并进创建请求 |
88
110
 
89
111
  ##### inputParams 插槽作用域参数
90
112
 
@@ -130,7 +152,8 @@ npm install @blueking/bkflow-canvas-editor
130
152
  | `defaultZoom` | `number` | `1` | x6 画布的默认缩放比例，用于控制画布的初始显示效果。取值范围建议在 0.25 到 1.5 之间 |
131
153
  | `bkflowSaasUrl` | `string` | - | bkflow-saas-url，用于设置 `$.context.site_url` 的值，供插件内部使用 |
132
154
  | `enableThirdPlugin` | `boolean` | `true` | 是否启用第三方插件。设置为 `false` 时，将不加载第三方插件列表和详情，只显示内置插件 |
133
- | `quickAdd` | `QuickAddConfig` | - | 透传给底层画布的 quick-add 配置；默认启用，可自定义绑定端口、插入方向或显式关闭 |
155
+ | `quickAdd` | `QuickAddConfig`（来自 `@blueking/flow-canvas`） | - | 透传给底层画布的 quick-add 配置；默认启用，可自定义绑定端口、插入方向或显式关闭 |
156
+ | `hideTrigger` | `boolean` | `false` | 是否隐藏基础信息中的触发器配置表单 |
134
157
 
135
158
  #### Slots
136
159
 
@@ -176,6 +199,10 @@ npm install @blueking/bkflow-canvas-editor
176
199
  | ----------------------- | -------------------------------------------------- | ---------------------- | ---------------------------------------------------------- |
177
200
  | `updateNodeInputParams` | `inputParams: Record<string, PluginInputDataItem>` | `void` | 更新当前打开节点的输入参数（暂存，需点击确定按钮才会保存） |
178
201
  | `isFlowEdited` | - | `ComputedRef<boolean>` | 流程是否已编辑（只读） |
202
+ | `openGlobalVariables` | - | `void` | 打开全局变量面板 |
203
+ | `zoomToFit` | `options?: ZoomToFitOptions` | `void` | 自适应画布视口 |
204
+ | `centerContent` | - | `void` | 居中画布内容 |
205
+ | `getZoom` | - | `number` | 获取当前缩放比例 |
179
206
 
180
207
  ---
181
208
 
@@ -224,25 +251,31 @@ interface SelectPanelConfig {
224
251
 
225
252
  #### Props
226
253
 
227
- | 参数 | 类型 | 默认值 | 说明 |
228
- | ------------------ | ---------------------------------------------- | ------- | ------------------------------------------------------------------- |
229
- | `flowId` | `string` | - | **必需**，流程 ID |
230
- | `show` | `boolean` | - | **必需**，是否显示执行面板 |
231
- | `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置) |
232
- | `editable` | `boolean` | `true` | 是否可编辑 |
233
- | `showFlowEntry` | `boolean` | `false` | 是否显示流程入口 |
234
- | `bkflowSaasUrl` | `string` | - | bkflow-saas-url，用于设置 `$.context.site_url` 的值，供插件内部使用 |
235
- | `onExecuteSuccess` | `(taskId: number, templateId: number) => void` | - | 执行成功回调 |
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` |
236
269
 
237
270
  #### Events
238
271
 
239
- | 事件名 | 参数 | 说明 |
240
- | -------------- | ------------------------------------ | ------------------------ |
241
- | `confirm` | `taskId: number, templateId: number` | 执行确认时触发 |
242
- | `close` | - | 关闭面板时触发 |
243
- | `update:show` | `show: boolean` | 显示状态更新时触发 |
244
- | `before-close` | - | 面板关闭前触发 |
245
- | `view-flow` | - | 点击查看排障流程按钮触发 |
272
+ | 事件名 | 参数 | 说明 |
273
+ | -------------- | -------------------------------------- | ------------------------ |
274
+ | `confirm` | `result: FlowTaskExecuteSuccessResult` | 执行确认时触发 |
275
+ | `close` | - | 关闭面板时触发 |
276
+ | `update:show` | `show: boolean` | 显示状态更新时触发 |
277
+ | `before-close` | - | 面板关闭前触发 |
278
+ | `view-flow` | - | 点击查看排障流程按钮触发 |
246
279
 
247
280
  ---
248
281
 
@@ -324,6 +357,95 @@ interface SelectPanelConfig {
324
357
 
325
358
  ---
326
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
+ #### 权限矩阵
411
+
412
+ `permissions` 默认拒绝，四种组合如下：
413
+
414
+ | `canEdit` | `canDebug` | 效果 |
415
+ | --------- | ---------- | ---------------------------------------------------------- |
416
+ | `false` | `false` | 纯只读查看，无保存、无调试入口，且**不请求任何调试接口** |
417
+ | `true` | `false` | 可编辑与保存，无调试入口 |
418
+ | `false` | `true` | 只读画布 + 全流程/单节点调试（调试期间流程本就不可编辑） |
419
+ | `true` | `true` | 可编辑、保存与完整调试；调试运行中锁定编辑（画布转 `view`）|
420
+
421
+ `permissions.canExecute` 独立控制头部“执行流程”按钮。流程存在未保存修改时，确认保存成功后才会打开创建任务侧滑；`customFormContent` 插槽与 `FlowView` 一致。
422
+
423
+ #### 调试能力
424
+
425
+ - **全流程调试**：头部调试入口填写全局输入后启动，前端按 2500ms（失败退避 5000ms）轮询 `/context/`，可随时终止。
426
+ - **单节点 real**：节点详情「调试配置」Tab 内直接以真实逻辑同步执行单步，完成后刷新 `context`。
427
+ - **单节点 Mock**：配置 Mock 输出参数后执行（内部顺序：保存 Mock → 单步执行 mock）；执行时跳过该节点并以 Mock 输出替代实际输出，Mock 节点在后续全流程中保留 `MOCK` 标签。
428
+ - **取消 Mock**：清除节点的持久 Mock 配置。
429
+ - **终止**：仅全流程运行中可终止；单步为同步调试，无终止。
430
+ - **保存联动**：`canDebug` 且 `context` 空闲时，保存成功后会查询 `reset_impact` 并自动清理失效节点的调试结果。
431
+
432
+ #### 调试 API 契约（`canDebug=true` 必需）
433
+
434
+ 消费方若传入完整的 api 配置对象（而非仅 `scopeData`），当 `canDebug=true` 时**必须**一并提供以下调试方法，否则触发调试会在调用点抛错：
435
+
436
+ `fetchDebugContext`、`fetchDebugInputSchema`、`fetchDebugResetImpact`、`updateNodeDebugMock`、`runNodeDebugStep`、`runGlobalDebug`、`terminateDebug`、`resetDebugResult`（签名见 `DebugApiServices`）。
437
+
438
+ 约定：
439
+
440
+ - 前端以 `debug_context`（后端 `build_context_view`）为**唯一事实源**，不新增 `node_input_values` 接口。`active_*`（当前持锁任务）与 `last_*`（最近一次运行）按顶层 `status` 分支选用。
441
+ - 建议后端在 `debug_context` 透出 `mock_outputs` / `mock_error` / `outputs`，否则刷新后 Mock 输出与「输出结果/重新编辑」回填会缺数据。
442
+ - 调试接口与普通接口同源：走后端 python 包 bkflow_sdk `TemplateViewSet` 的 `/bkflow/template/debug_*`，全站信封 `{result, data, message}`。走内置 `useFlowApi()` 时自动获得全部调试方法。
443
+ - 调试仍使用**独立的 Axios 实例**，**不复用**共享的自动 toast 拦截器：成功解信封取 `data`、`result:false` 时 reject，交由调试控制器统一处理（锁定冲突刷新、缺失变量在节点 UI 展示）。锁定/幂等语义由 `code`/`message` 识别（具体码值联调确认）。
444
+
445
+ > **Deprecated**：`FlowMockDebug` 已废弃，请改用 `FlowDetail` 并开启 `permissions.canDebug`。`FlowMockDebug` 将在下个大版本移除。
446
+
447
+ ---
448
+
327
449
  ## 使用示例
328
450
 
329
451
  ### 基础使用
@@ -348,6 +470,7 @@ interface SelectPanelConfig {
348
470
  scopeData: {
349
471
  scope_type: 'space',
350
472
  scope_value: 123,
473
+ space_id: 123,
351
474
  },
352
475
  };
353
476
 
@@ -411,6 +534,7 @@ interface SelectPanelConfig {
411
534
  scopeData: {
412
535
  scope_type: "space",
413
536
  scope_value: 123,
537
+ space_id: 123,
414
538
  },
415
539
  };
416
540
 
@@ -443,6 +567,7 @@ interface SelectPanelConfig {
443
567
  scopeData: {
444
568
  scope_type: 'space',
445
569
  scope_value: 123,
570
+ space_id: 123,
446
571
  },
447
572
  };
448
573
  </script>
@@ -498,6 +623,7 @@ interface SelectPanelConfig {
498
623
 
499
624
  <script setup>
500
625
  import { FlowView } from 'bkflow-canvas-editor';
626
+ import '@blueking/flow-canvas/style';
501
627
  import 'bkflow-canvas-editor/style';
502
628
 
503
629
  const flowId = '123';
@@ -505,6 +631,7 @@ interface SelectPanelConfig {
505
631
  scopeData: {
506
632
  scope_type: 'space',
507
633
  scope_value: 123,
634
+ space_id: 123,
508
635
  },
509
636
  };
510
637
  </script>
@@ -547,6 +674,7 @@ interface SelectPanelConfig {
547
674
  scopeData: {
548
675
  scope_type: 'space',
549
676
  scope_value: 123,
677
+ space_id: 123,
550
678
  },
551
679
  };
552
680
  </script>
@@ -570,6 +698,7 @@ interface SelectPanelConfig {
570
698
  scopeData: {
571
699
  scope_type: 'space',
572
700
  scope_value: 123,
701
+ space_id: 123,
573
702
  },
574
703
  };
575
704
  </script>
@@ -596,6 +725,7 @@ interface SelectPanelConfig {
596
725
  scopeData: {
597
726
  scope_type: 'space',
598
727
  scope_value: 123,
728
+ space_id: 123,
599
729
  },
600
730
  };
601
731
  </script>
@@ -666,6 +796,7 @@ interface SelectPanelConfig {
666
796
  scopeData: {
667
797
  scope_type: 'space',
668
798
  scope_value: 123,
799
+ space_id: 123,
669
800
  },
670
801
  };
671
802
  </script>
@@ -690,6 +821,7 @@ interface SelectPanelConfig {
690
821
  scopeData: {
691
822
  scope_type: 'space',
692
823
  scope_value: 123,
824
+ space_id: 123,
693
825
  },
694
826
  };
695
827
  </script>
@@ -742,6 +874,7 @@ interface SelectPanelConfig {
742
874
  scopeData: {
743
875
  scope_type: 'space',
744
876
  scope_value: 123,
877
+ space_id: 123,
745
878
  },
746
879
  };
747
880
 
@@ -781,6 +914,7 @@ interface SelectPanelConfig {
781
914
  scopeData: {
782
915
  scope_type: 'space',
783
916
  scope_value: 123,
917
+ space_id: 123,
784
918
  },
785
919
  };
786
920
 
@@ -824,6 +958,7 @@ interface SelectPanelConfig {
824
958
  scopeData: {
825
959
  scope_type: 'space',
826
960
  scope_value: 123,
961
+ space_id: 123,
827
962
  },
828
963
  };
829
964
  </script>
@@ -863,6 +998,7 @@ interface SelectPanelConfig {
863
998
  scopeData: {
864
999
  scope_type: 'space',
865
1000
  scope_value: 123,
1001
+ space_id: 123,
866
1002
  },
867
1003
  };
868
1004
  </script>
@@ -891,6 +1027,7 @@ interface SelectPanelConfig {
891
1027
  scopeData: {
892
1028
  scope_type: 'space',
893
1029
  scope_value: 123,
1030
+ space_id: 123,
894
1031
  },
895
1032
  };
896
1033
 
@@ -931,6 +1068,7 @@ interface SelectPanelConfig {
931
1068
  scopeData: {
932
1069
  scope_type: 'space',
933
1070
  scope_value: 123,
1071
+ space_id: 123,
934
1072
  },
935
1073
  };
936
1074
 
@@ -977,6 +1115,7 @@ interface SelectPanelConfig {
977
1115
  scopeData: {
978
1116
  scope_type: 'space',
979
1117
  scope_value: 123,
1118
+ space_id: 123,
980
1119
  },
981
1120
  };
982
1121
  </script>
@@ -1002,15 +1141,68 @@ interface FlowApiConfig {
1002
1141
  scopeData: {
1003
1142
  scope_type: string;
1004
1143
  scope_value: number;
1144
+ /** 业务方传入的空间 ID，调试接口专用，语义独立于 scope_value */
1145
+ space_id: number;
1005
1146
  };
1006
- /** 用户查询 API 地址（可选） */
1147
+ /**
1148
+ * 用户查询 API 地址
1149
+ * @deprecated 请改用 FlowEdit/FlowView/FlowCreateTask 的 memberSelectorConfig prop。
1150
+ * 仅保留以后兼容旧版本。
1151
+ */
1007
1152
  fetchUserApi?: string;
1008
1153
  /** 是否启用第三方插件（可选，默认为 true） */
1009
1154
  enableThirdPlugin?: boolean;
1010
1155
  }
1011
1156
  ```
1012
1157
 
1013
- `FlowApiConfig` 是常规场景下推荐传入的初始化配置。组件内部会基于它自动创建完整的 API 方法集合，包括：
1158
+ ### MemberSelectorConfig
1159
+
1160
+ `FlowEdit` / `FlowView` / `FlowCreateTask` 组件提供可选的 `memberSelectorConfig` prop，用于控制人员选择器的行为。未传入时默认为 `{ mode: 'legacy' }`。
1161
+
1162
+ ```typescript
1163
+ type MemberSelectorConfig =
1164
+ | {
1165
+ /** legacy 模式：使用组件内置的 UserSelector */
1166
+ mode?: 'legacy';
1167
+ /** 用户查询 API 地址 */
1168
+ fetchUserApi?: string;
1169
+ }
1170
+ | {
1171
+ /** tenant 模式：使用多租户人员选择器 @blueking/bk-user-selector */
1172
+ mode: 'tenant';
1173
+ /** 租户 ID（必填） */
1174
+ tenantId: string;
1175
+ /** bk-user 服务的 API 基础地址（必填） */
1176
+ apiBaseUrl: string;
1177
+ /** 当前登录用户 ID */
1178
+ currentUserId?: string;
1179
+ /** 是否启用跨租户搜索，默认 false */
1180
+ enableMultiTenantMode?: boolean;
1181
+ /** 是否展示头像，默认 false */
1182
+ hasAvatar?: boolean;
1183
+ /** 头像 CDN 基础地址 */
1184
+ avatarBaseUrl?: string;
1185
+ /** 最近选择的用户 ID 列表 */
1186
+ recentUserIds?: string[];
1187
+ };
1188
+ ```
1189
+
1190
+ 使用示例：
1191
+
1192
+ ```vue
1193
+ <FlowEdit
1194
+ :flow-id="flowId"
1195
+ :api-config="apiConfig"
1196
+ :member-selector-config="{
1197
+ mode: 'tenant',
1198
+ tenantId: 'default',
1199
+ apiBaseUrl: 'https://bk-user.example.com',
1200
+ }" />
1201
+ ```
1202
+
1203
+ > 提示：选择 `tenant` 模式时，接入方需安装可选 peer 依赖 `@blueking/bk-user-selector`。它仅在 tenant 模式下被动态加载，legacy 模式下未安装也不会报错。
1204
+
1205
+ 组件内部会自动实现所有 API 方法，包括：
1014
1206
 
1015
1207
  - `fetchFlowDetail` - 获取流程详情
1016
1208
  - `fetchFlowDraftDetail` - 获取流程草稿详情（可选，用于版本功能）
@@ -1027,6 +1219,7 @@ interface FlowApiConfig {
1027
1219
  - `fetchFlowOperateRecord` - 获取操作记录（可选）
1028
1220
  - `createFlowTask` - 创建流程任务（可选）
1029
1221
  - `executeFlowTask` - 执行流程任务（可选）
1222
+ - `revokeFlowTask` - 强制终止流程任务（可选）
1030
1223
 
1031
1224
  所有 API 请求会自动合并 `scopeData` 到请求参数中。
1032
1225
 
@@ -1049,6 +1242,7 @@ const baseConfig: FlowApiConfig = {
1049
1242
  scopeData: {
1050
1243
  scope_type: 'space',
1051
1244
  scope_value: 123,
1245
+ space_id: 123,
1052
1246
  },
1053
1247
  fetchUserApi: `${window.BK_COMPONENT_API_URL}/api/c/compapi/v2/usermanage/fs_list_users/`,
1054
1248
  };
@@ -1106,10 +1300,11 @@ import type {
1106
1300
  UniformApiPluginInputsItem,
1107
1301
  PluginDetailCommon,
1108
1302
  SelectPanelConfig,
1109
- QuickAddConfig,
1110
- InsertDirection,
1111
1303
  // ... 更多类型
1112
1304
  } from 'bkflow-canvas-editor';
1305
+
1306
+ // 引擎类型从 @blueking/flow-canvas 导入，本包不再再导出
1307
+ import type { QuickAddConfig, InsertDirection } from '@blueking/flow-canvas';
1113
1308
  ```
1114
1309
 
1115
1310
  高级集成场景下，还可以从 `@blueking/bkflow-canvas-editor/advanced` 导入完整 API 类型和 `useFlowApi`：
@@ -1150,7 +1345,7 @@ resolve: {
1150
1345
  4. **自动合并 scopeData**：所有 API 请求会自动合并 `scopeData` 到请求参数中（GET 请求合并到 params，POST/PUT 请求合并到请求体）
1151
1346
  5. **权限检查**：权限检查通过 `permissions` props 传入布尔值
1152
1347
  6. **路由跳转**：路由跳转需要通过事件回调处理，组件内部不直接使用 vue-router
1153
- 7. **样式引入**：样式文件需要单独引入：`import 'bkflow-canvas-editor/style'`
1348
+ 7. **样式引入**：需分别引入引擎与业务样式：`import '@blueking/flow-canvas/style'` 与 `import 'bkflow-canvas-editor/style'`
1154
1349
  8. **输入参数更新机制**：
1155
1350
  - 使用 `inputParams` 插槽时，通过 `updateInputParams` 或 `updateNodeInputParams` 方法更新的数据会暂存到节点配置面板
1156
1351
  - 用户需要点击节点配置面板的"确定"按钮，数据才会真正保存到流程中
package/dist/advanced.cjs.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./composable-CNiwlaFl.cjs");exports.PLUGIN_GROUP_ICON_MAP=e.PLUGIN_GROUP_ICON_MAP;exports.useFlowApi=e.useFlowApi;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./composable-YlUVct40.cjs");exports.PLUGIN_GROUP_ICON_MAP=e.PLUGIN_GROUP_ICON_MAP;exports.useFlowApi=e.useFlowApi;