# zz-mind-react

> ZZCase用例平台-脑图组件React版本

Latest version **0.2.1** (published 2022-08-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install zz-mind-react
pnpm add zz-mind-react
yarn add zz-mind-react
bun add zz-mind-react
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2022-08-30 |
| First published | 2022-06-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 358.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wangbin |
| Maintainers | wangbin_ |
| Keywords | zz-mind-react, zz-mind-vue |

## Links

- npm: https://www.npmjs.com/package/zz-mind-react
- npm.io page: https://npm.io/package/zz-mind-react

## Recent versions

- 0.2.1 (latest) — 2022-08-30
- 0.1.1 — 2022-06-30
- 0.1.0 — 2022-06-29
- 0.0.2 — 2022-06-17
- 0.0.1 — 2022-06-17

## README

# zz-mind-react

# 更新日志
### 2022-8-30（0.2.1）
1. 新增快捷键侧边栏文档，整体布局优化；
2. 新增选中节点粘贴图片；
3. 新增批量替换节点内容；
4. 新增节点实时统计；
5. 新增图标设置；
6. 右键菜单优化；
7. 其他修复...

# 介绍
> 1、zz-mind-react 是一款基于百度脑图（kityminder-editor）二次开发的思维导图编辑器，主要面向于测试用例平台。
> 
> 2、基础能力介绍：
> - 全新布局和样式，支持右键菜单
> - 导出（图片、Markdown、json 等）
> - 工具箱 (用例搜索、批量替换、节点信息等)
> - 收起时展示节点数
> - 自定义主题
> - 支持层级限制
> - 用例规范模式
> - 详细的快捷键文档
> - ...

![在这里插入图片描述](https://img-blog.csdnimg.cn/42efaeb87d6e4cd5a6c924bbfd5e4673.png)


# 安装
```shell
npm install zz-mind-react
```


# 使用

```javascript
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  |



---
**标签组数据格式：**

```json
{
    "1": {"title": "系统标签", "enableRule": true,  "tags": ["系统标签", "若开启规则", "非用例节点", "不可标记"]},
    "2": {"title": "公共标签", "enableRule": false, "tags": ["示例标签"]},
    "3": {"title": "业务标签", "enableRule": false, "tags": ["示例标签"]},
    "4": {"title": "其他标签", "enableRule": false, "tags": ["示例标签"]}
}

```


**uploadImageProps：**

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

---
_Source: https://npm.io/package/zz-mind-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._