@blueking/bkflow-canvas-editor 0.0.8 → 0.0.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.
- package/README.md +45 -21
- package/dist/index.cjs.js +15 -15
- package/dist/index.esm.js +6050 -5914
- package/dist/style.css +1 -1
- package/package.json +4 -3
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
|
|
|
@@ -124,15 +125,15 @@ npm install bkflow-canvas-editor
|
|
|
124
125
|
|
|
125
126
|
##### inputParams 插槽作用域参数
|
|
126
127
|
|
|
127
|
-
| 参数
|
|
128
|
-
|
|
|
129
|
-
| `node`
|
|
130
|
-
| `
|
|
131
|
-
| `inputs`
|
|
132
|
-
| `editable`
|
|
133
|
-
| `fullVariableList`
|
|
134
|
-
| `updateInputParams`
|
|
135
|
-
| `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 组件调用，暂存到节点配置面板，需点击确定按钮才会保存） |
|
|
136
137
|
|
|
137
138
|
#### Events
|
|
138
139
|
|
|
@@ -235,7 +236,7 @@ npm install bkflow-canvas-editor
|
|
|
235
236
|
<template
|
|
236
237
|
#inputParams="{
|
|
237
238
|
node,
|
|
238
|
-
|
|
239
|
+
pluginDetail,
|
|
239
240
|
inputs,
|
|
240
241
|
editable,
|
|
241
242
|
fullVariableList,
|
|
@@ -244,7 +245,7 @@ npm install bkflow-canvas-editor
|
|
|
244
245
|
}">
|
|
245
246
|
<CustomInputParams
|
|
246
247
|
:node="node"
|
|
247
|
-
:plugin-detail="
|
|
248
|
+
:plugin-detail="pluginDetail"
|
|
248
249
|
:inputs="inputs"
|
|
249
250
|
:editable="editable"
|
|
250
251
|
:full-variable-list="fullVariableList"
|
|
@@ -341,6 +342,29 @@ npm install bkflow-canvas-editor
|
|
|
341
342
|
</template>
|
|
342
343
|
```
|
|
343
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
|
+
|
|
344
368
|
## API 配置
|
|
345
369
|
|
|
346
370
|
### FlowApiConfig
|
|
@@ -371,7 +395,7 @@ interface FlowApiConfig {
|
|
|
371
395
|
- `fetchSpaceFlowConfig` - 获取空间配置
|
|
372
396
|
- `fetchSystemVariables` - 获取系统变量
|
|
373
397
|
- `saveFlow` - 保存流程（仅 FlowEdit）
|
|
374
|
-
- `
|
|
398
|
+
- `fetchPluginGroupList` - 获取插件分类列表（仅 FlowEdit）
|
|
375
399
|
- `fetchCategoryPlugins` - 获取分类插件（仅 FlowEdit）
|
|
376
400
|
- `fetchPluginDetail` - 获取插件详情（可选）
|
|
377
401
|
- `fetchApplyInstructionData` - 获取指令数据（可选）
|
|
@@ -400,7 +424,7 @@ import type {
|
|
|
400
424
|
Activity,
|
|
401
425
|
PluginInputDataItem,
|
|
402
426
|
UniformApiPluginInputsItem,
|
|
403
|
-
|
|
427
|
+
PluginDetailCommon,
|
|
404
428
|
// ... 更多类型
|
|
405
429
|
} from 'bkflow-canvas-editor';
|
|
406
430
|
```
|