0.2.1 • Published 4 years ago

zz-mind-react

Licence

MIT

Version

0.2.1

Deps

Size

359 kB

Vulns

Weekly

Summary Dependency Versions

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
            }
        }

Keywords

zz-mind-react zz-mind-vue