@blueking/bkflow-canvas-editor 0.0.7 → 0.0.9
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 +55 -32
- package/dist/index.cjs.js +15 -15
- package/dist/index.esm.js +6452 -6048
- package/dist/style.css +1 -1
- package/package.json +5 -4
package/README.md
CHANGED
|
@@ -69,6 +69,7 @@ npm install bkflow-canvas-editor
|
|
|
69
69
|
| `flowId` | `string` | - | **必需**，流程 ID |
|
|
70
70
|
| `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置) |
|
|
71
71
|
| `permissions` | `{ canEdit?: boolean, canSave?: boolean }` | `{ canEdit: true, canSave: true }` | 权限配置对象，`canEdit`用来控制流程查看态时头部编辑按钮是否使用禁用样式，`canSave`用来控制流程编辑态时头部保存按钮是否可点击 |
|
|
72
|
+
| `thumbnail` | `boolean` | `false` | 缩略图模式，启用后只显示画布内容，不显示顶部 header 和操作按钮，禁用节点点击事件 |
|
|
72
73
|
| `onEdit` | `() => void` | - | 编辑按钮点击回调（可选，也可以通过 `@edit` 事件监听） |
|
|
73
74
|
| `onBack` | `() => void` | - | 返回按钮点击回调（可选，也可以通过 `@back` 事件监听） |
|
|
74
75
|
|
|
@@ -81,14 +82,14 @@ npm install bkflow-canvas-editor
|
|
|
81
82
|
|
|
82
83
|
##### inputParams 插槽作用域参数
|
|
83
84
|
|
|
84
|
-
| 参数
|
|
85
|
-
|
|
|
86
|
-
| `node`
|
|
87
|
-
| `
|
|
88
|
-
| `inputs`
|
|
89
|
-
| `editable`
|
|
90
|
-
| `fullVariableList`
|
|
91
|
-
| `updateInputParams`
|
|
85
|
+
| 参数 | 类型 | 说明 |
|
|
86
|
+
| ------------------- | ----------------------------------------------------- | ------------------------------------------------------ |
|
|
87
|
+
| `node` | `Activity` | 当前节点数据 |
|
|
88
|
+
| `pluginDetail` | `PluginDetailCommon \| null` | 插件详情（统一类型，支持所有插件类型） |
|
|
89
|
+
| `inputs` | `UniformApiPluginInputsItem[]` | 输入参数表单配置列表 |
|
|
90
|
+
| `editable` | `boolean` | 是否可编辑 |
|
|
91
|
+
| `fullVariableList` | `{ key: string; name: string }[]` | 完整变量列表（系统变量 + 常量） |
|
|
92
|
+
| `updateInputParams` | `(data: Record<string, PluginInputDataItem>) => void` | 更新节点输入参数的方法（暂存，需点击确定按钮才会保存） |
|
|
92
93
|
|
|
93
94
|
#### Events
|
|
94
95
|
|
|
@@ -105,16 +106,15 @@ npm install bkflow-canvas-editor
|
|
|
105
106
|
|
|
106
107
|
#### Props
|
|
107
108
|
|
|
108
|
-
| 参数
|
|
109
|
-
|
|
|
110
|
-
| `flowId`
|
|
111
|
-
| `apiConfig`
|
|
112
|
-
| `permissions`
|
|
113
|
-
| `
|
|
114
|
-
| `
|
|
115
|
-
| `
|
|
116
|
-
| `
|
|
117
|
-
| `onBeforeLeave` | `(isEdited: boolean) => Promise<boolean>` | - | 离开前回调，返回 `false` 可阻止离开 |
|
|
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` 可阻止离开 |
|
|
118
118
|
|
|
119
119
|
#### Slots
|
|
120
120
|
|
|
@@ -125,15 +125,15 @@ npm install bkflow-canvas-editor
|
|
|
125
125
|
|
|
126
126
|
##### inputParams 插槽作用域参数
|
|
127
127
|
|
|
128
|
-
| 参数
|
|
129
|
-
|
|
|
130
|
-
| `node`
|
|
131
|
-
| `
|
|
132
|
-
| `inputs`
|
|
133
|
-
| `editable`
|
|
134
|
-
| `fullVariableList`
|
|
135
|
-
| `updateInputParams`
|
|
136
|
-
| `updateNodeInputParams`
|
|
128
|
+
| 参数 | 类型 | 说明 |
|
|
129
|
+
| ----------------------- | ------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
|
|
130
|
+
| `node` | `Activity` | 当前节点数据 |
|
|
131
|
+
| `pluginDetail` | `PluginDetailCommon \| null` | 插件详情（统一类型，支持所有插件类型） |
|
|
132
|
+
| `inputs` | `UniformApiPluginInputsItem[]` | 输入参数表单配置列表 |
|
|
133
|
+
| `editable` | `boolean` | 是否可编辑 |
|
|
134
|
+
| `fullVariableList` | `{ key: string; name: string }[]` | 完整变量列表（系统变量 + 常量） |
|
|
135
|
+
| `updateInputParams` | `(data: Record<string, PluginInputDataItem>) => void` | 更新节点输入参数的方法（暂存到节点配置面板，需点击确定按钮才会保存） |
|
|
136
|
+
| `updateNodeInputParams` | `(inputParams: Record<string, PluginInputDataItem>) => void` | 更新节点输入参数的方法（通过 edit 组件调用，暂存到节点配置面板，需点击确定按钮才会保存） |
|
|
137
137
|
|
|
138
138
|
#### Events
|
|
139
139
|
|
|
@@ -236,7 +236,7 @@ npm install bkflow-canvas-editor
|
|
|
236
236
|
<template
|
|
237
237
|
#inputParams="{
|
|
238
238
|
node,
|
|
239
|
-
|
|
239
|
+
pluginDetail,
|
|
240
240
|
inputs,
|
|
241
241
|
editable,
|
|
242
242
|
fullVariableList,
|
|
@@ -245,7 +245,7 @@ npm install bkflow-canvas-editor
|
|
|
245
245
|
}">
|
|
246
246
|
<CustomInputParams
|
|
247
247
|
:node="node"
|
|
248
|
-
:plugin-detail="
|
|
248
|
+
:plugin-detail="pluginDetail"
|
|
249
249
|
:inputs="inputs"
|
|
250
250
|
:editable="editable"
|
|
251
251
|
:full-variable-list="fullVariableList"
|
|
@@ -342,6 +342,29 @@ npm install bkflow-canvas-editor
|
|
|
342
342
|
</template>
|
|
343
343
|
```
|
|
344
344
|
|
|
345
|
+
### 使用缩略图模式
|
|
346
|
+
|
|
347
|
+
缩略图模式适用于只需要展示画布内容的场景，不显示顶部 header 和操作按钮，禁用节点点击事件：
|
|
348
|
+
|
|
349
|
+
```vue
|
|
350
|
+
<template>
|
|
351
|
+
<FlowView :flow-id="flowId" :api-config="apiConfig" :thumbnail="true" />
|
|
352
|
+
</template>
|
|
353
|
+
|
|
354
|
+
<script setup>
|
|
355
|
+
import { FlowView } from 'bkflow-canvas-editor';
|
|
356
|
+
import 'bkflow-canvas-editor/style';
|
|
357
|
+
|
|
358
|
+
const flowId = '123';
|
|
359
|
+
const apiConfig = {
|
|
360
|
+
scopeData: {
|
|
361
|
+
scope_type: 'space',
|
|
362
|
+
scope_value: 123,
|
|
363
|
+
},
|
|
364
|
+
};
|
|
365
|
+
</script>
|
|
366
|
+
```
|
|
367
|
+
|
|
345
368
|
## API 配置
|
|
346
369
|
|
|
347
370
|
### FlowApiConfig
|
|
@@ -372,7 +395,7 @@ interface FlowApiConfig {
|
|
|
372
395
|
- `fetchSpaceFlowConfig` - 获取空间配置
|
|
373
396
|
- `fetchSystemVariables` - 获取系统变量
|
|
374
397
|
- `saveFlow` - 保存流程（仅 FlowEdit）
|
|
375
|
-
- `
|
|
398
|
+
- `fetchPluginGroupList` - 获取插件分类列表（仅 FlowEdit）
|
|
376
399
|
- `fetchCategoryPlugins` - 获取分类插件（仅 FlowEdit）
|
|
377
400
|
- `fetchPluginDetail` - 获取插件详情（可选）
|
|
378
401
|
- `fetchApplyInstructionData` - 获取指令数据（可选）
|
|
@@ -393,7 +416,7 @@ import type {
|
|
|
393
416
|
FlowTemplate,
|
|
394
417
|
SpaceFlowConfig,
|
|
395
418
|
PluginGroupConfig,
|
|
396
|
-
|
|
419
|
+
PluginMetaItem,
|
|
397
420
|
UpdateFlowParams,
|
|
398
421
|
FlowApiConfig,
|
|
399
422
|
Variable,
|
|
@@ -401,7 +424,7 @@ import type {
|
|
|
401
424
|
Activity,
|
|
402
425
|
PluginInputDataItem,
|
|
403
426
|
UniformApiPluginInputsItem,
|
|
404
|
-
|
|
427
|
+
PluginDetailCommon,
|
|
405
428
|
// ... 更多类型
|
|
406
429
|
} from 'bkflow-canvas-editor';
|
|
407
430
|
```
|