0.2.1 • Published 2 years ago
zz-mind-react v0.2.1
zz-mind-react
更新日志
2022-8-30（0.2.1）
- 新增快捷键侧边栏文档，整体布局优化；
- 新增选中节点粘贴图片；
- 新增批量替换节点内容；
- 新增节点实时统计；
- 新增图标设置；
- 右键菜单优化；
- 其他修复...
介绍
1、zz-mind-react 是一款基于百度脑图（kityminder-editor）二次开发的思维导图编辑器，主要面向于测试用例平台。
2、基础能力介绍：
- 全新布局和样式，支持右键菜单
- 导出（图片、Markdown、json 等）
- 工具箱 (用例搜索、批量替换、节点信息等)
- 收起时展示节点数
- 自定义主题
- 支持层级限制
- 用例规范模式
- 详细的快捷键文档
- ...
安装
npm install zz-mind-react使用
import ZZMind from 'zz-mind-react';
const App = (props) => {
const [minder, setMinder] = useState(null)
useEffect(() => {
console.log("minder => ", minder)
}, [minder])
return (
<ZZMind
type="edit"
caseRule={0}
maxLevel={10}
editorStyle={{ height: '100vh' }}
/>
)
}API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 脑图模式 preview 预览；execute 执行; edit 编辑状态 | string | false |
| mindKey | 脑图ID 多个脑图同时存在时必传 | string | 无 |
| onRef | Ref | Function(Ref) | |
| mindData | 脑图Json数据 | Json string | 空节点 |
| caseRule | 用例规则 0 关闭 1开启 | number | 0 |
| maxLevel | 最大层级限制 | number | 10 |
| editorStyle | 脑图样式，宽高等 | object | { height: '100vh' } |
| spinning | 脑图loading效果 | Boolean | false |
| defaultLock | 不传则不显示锁定按钮，默认锁定case建议编辑状态使用 | Boolean | |
| hiddenHeader | 隐藏顶部菜单栏 | Boolean | false |
| tagsGroupData | 标签组数据 | object | |
| caseTitle | 用例标题 | ReactNode | 无 |
| caseHeaderExtraContent | 顶部右侧区域扩展 | ReactNode | 无 |
| defaultEnableAnimation | 默认动画 | Boolean | false |
| onMinder | minder对象回调 | Function(minder) | |
| onSave | 快捷键保存 C+S 回调 (脑图Json数据) | Function(jsonData) | |
| onResultChange | 执行用例回调 | Function (resultType, resultValue) | |
| contentChangeCallBack | 内容变更回调 | Function() | |
| parentBug | 提bug 回调 ，可用于打开弹窗或其他行为 | Function() | |
| onReloadFunc | 刷新数据回调 | Function() | |
| uploadImageProps | 上传图片配置 | object | uploadImageProps |
标签组数据格式：
{
"1": {"title": "系统标签", "enableRule": true, "tags": ["系统标签", "若开启规则", "非用例节点", "不可标记"]},
"2": {"title": "公共标签", "enableRule": false, "tags": ["示例标签"]},
"3": {"title": "业务标签", "enableRule": false, "tags": ["示例标签"]},
"4": {"title": "其他标签", "enableRule": false, "tags": ["示例标签"]}
}uploadImageProps：
uploadImageProps: {
// 上传图片配置项 uploadSuccess 上传成功后回调，返回图片的绝对url
uploadUrl: 'https://XXXXXX/media/picture/upload',
// 上传图片的参数
uploadData: (file) => ({multipartFile: file, path: '/caseweb/', businessType: 'caseweb'}),
// 上传成功的回调，有些上传成功后不会返回完整的图片url，会将返回值写入脑图节点中。
uploadSuccess: (res) => {
return 'https:/XXXXXX' + res.respData
}
}