(ant-mind)
-mind软件定制开发供应商是一款基于html5的svg软件定制开发供应商进行设计与开发的一个软件定制开发供应商包含文档模式与思维导软件定制开发供应商图模式的一个纯js类库，软件定制开发供应商支持在当前主流的前端软件定制开发供应商框架中接入。
效果图：
如何使用
1、下载插件
官网地址：
2、导入项目
软件定制开发供应商将下载到的sdk软件定制开发供应商拷贝至项目工程目录，如拷贝至：
externalSdk/ant-mind/index.js
externalSdk/ant-mind/index.css
3、开发实践
3.1 原生js嵌入
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } #ant-mind { width: 100%; height: 100%; } </style> <link rel="stylesheet" type="text/css" href="/externalSdk/ant-mind/index.css"/> <script type="text/javascript" src="/externalSdk/ant-mind/index.js" defer></script> </head> <body> <div id="ant-mind"></div> </body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
const config = { mode: 'mind' };const mIns = new AntMind('#ant-mind', config);const mProps = { onAtSearch: (val) => { const userList = [ { id: '1', name: '张三', photo: '' }, { id: '2', name: '李四', photo: '' } ]; return Promise.resolve(userList); }};mIns.render([{ id: '1', name: '主要主题', type: 'p', // 根节点}], mProps);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
3.2 React嵌入
import './externalSdk/ant-mind/index.css';import React from 'react';import AntMind from './externalSdk/ant-mind';const MindView = () => { const mindRef = React.useRef(null); React.useLayoutEffect(() => { mindRef.current = new AntMind('#ant-mind', { mode: 'mind' }); }, []); React.useEffect(() => { const mIns = mindRef.current; const mProps = { onAtSearch: (val) => getUserList(val), }; mIns.render([{ id: '1', name: '主要主题', type: 'p', // 根节点 }], mProps); return () => { mIns?.destroy(); }; }, []); const getUserList = (searchValue) => { const userList = [ { id: '1', name: '张三', photo: '' }, { id: '2', name: '李四', photo: '' } ]; return Promise.resolve(userList); }; return <div id="ant-mind"></div>};export default MindView;- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
3.3 Vue2嵌入
<template> <div id="ant-mind" class="m-mind"></div></template><style scoped> .m-mind { width: 100%; height: 100%; }</style><script> import AntMind from '@/externalSdk/ant-mind'; import '@/externalSdk/ant-mind/index.css'; export default { data() { return { config: { mode: 'mind' } } }, mounted() { this.init() }, beforeDestroy() { this.mIns?.destroy(); }, methods: { init() { this.mIns = new AntMind('#ant-mind', this.config); this.getData().then(data => { this.mIns.render(data, { onAtSearch: (val) => this.getUserList(val) }); }); }, getData() { return Promise.resolve([ { id: 'task.1', editable: true, wbs: '2', milestone:"1", name: '任务01', fzr: 'x先生', type: 't', status: 2, beginTime: "2021-06-02", children: [] }, ]); }, getUserList(searchValue) { const userList = [ { id: '1', name: '张三', photo: '' }, { id: '2', name: '李四', photo: '' } ]; return Promise.resolve(userList); }, } }</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
数据格式（dataItem）
1、基础类型
type为p、i、t时，软件定制开发供应商通用的节点字段
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| id | 节点id - 必填 | string | 必填项 |
| name | 节点名称 | string | 必填项 |
| type | 节点类型 | p - 根节点、i - 二级根节点、t - 标准节点 | 必填项 |
| childCount | 一级子节点数量 | number | - |
| children | 子节点列表 | dataItem[] | - |
| excludes | 需过滤的不可操作项 | NodeOprKey[] | [] |
| parentId | 父节点id | string | - |
NodeOprKey：‘child’ | ‘sibling’ | ‘detail’ | ‘delete’ | ‘enter’ | ‘user’ | ‘move’ | ‘copy’ | ‘edit’;
2、根节点（type === p）
特殊性：
- 不可收起
- 固定不可操作项: [‘sibling’, ‘delete’, ‘enter’, ‘user’, ‘move’]
- 编辑时，不可@人员，不可快捷输入日期
3、二级根节点（type === i）
特殊性：
- 固定不可操作项: [ ‘user’]
- move时，只能移动到p类型节点下
- 编辑时，不可@人员，不可快捷输入日期
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| isNew | 是否是新增节点 | boolean | true |
4、标准节点（type === t）
特殊性：
- move时，不可移动到p节点下，支持移动到i、t类型的节点下移动
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| status | 节点状态 | string | - |
| milestone | 是否里程碑 | boolean | false |
| user | 人员 | object<{id, name}> | - |
| time | 日期 | YYYY/MM/DD HH:mm | - |
| timeStatus | 日期状态，当值为0时，当前日期临近截止日期时，日期显示橙色，超过截止日期时，日期显示红色；为当值为1时，日期颜色不随当前日期变化，显示灰色； | number | 0 |
| isNew | 是否是新增节点 | boolean | true |
配置相关
1、基础配置 - config
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| mode | 视图类型，mind - 思维导图，outline - 大纲视图 | string | mind |
| locale | 显示语言 - zh-CN、en-US、zh-TW | string | zh-CN |
| locales | 自定义语言包 | LocalesType | |
| eventDom | 键盘事件触发容器，容器内的键盘事件可监听 | HTMLElement|string | - |
| fullDom | 全屏容器，全屏时的元素 | HTMLElement|string | - |
| platform | 第三方平台，用于在企业微信下显示人名 | wx|dingtalk | - |
| status | 节点状态 | StatusAttributes[] | |
| pngSize | 导出图片的最大尺寸，建议设置为20M以内 | number | - |
| theme | 主题属性 | ThemeAttributes | |
| wrapper | 画布属性 | WrapperAttributes | |
| operation | 操作栏 | OperationAttributes |
2、状态属性配置 - Status
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| key | 状态的唯一值，必填项 | string | - |
| name | 状态名称 | string | - |
| color | 状态颜色，用于显示节点的图标颜色，必填项 | string | - |
3、主题属性配置 - Theme
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| backgroundColor | 背景色 | string | #F7F7F7 |
| color | 主题颜色，思维导图模式下，节点与子节点间收起展开的节点颜色 | string | #4983FF |
| maxWidth | 节点最大宽度 | number | 500 |
| line | 连线配置 | LineType | - |
| +color | 线条颜色 | string | #4983FF |
| +width | 线条宽度 | [number, number] | [2, 1] |
| +radius | 线条转角弧度 | number | 4 |
| p | 根节点主题 | PNode | - |
| +maxLength | 最大长度 | number | 100 |
| i | 二级根节点主题 | INode | - |
| +maxLength | 最大长度 | number | 30 |
| t | 子节点主题 | TNode | - |
| +maxLength | 最大长度 | number | 100 |
| +defaultTime | 默认结束时间 | HH:mm | 18:00 |
| nodes | 节点样式 | NodeStyle[] |
- 节点样式
// 一个长度为3的数组，[p, i, t]分别代表3种不同节点的绘制样式[ // 根节点 { // 节点间距 space: { x: 60, y: 16 }, // 节点样式 style: { wrap: true, color: '#333333', placeholderColor: '#CCCCCC', fontSize: 18, fontFamily: 'PingFang SC, Microsoft YaHei', fontWeight: 500, borderRadius: 6, borderWidth: 2, borderColor: '#CCCCCC', borderFocusColor: '#4983FF', borderHoverColor: '#92B5FF', backgroundColor: '#FFFFFF', } }, // 二级根节点 { space: { x: 40, y: 16 }, style: { wrap: true, color: '#333333', placeholderColor: '#CCCCCC', fontSize: 14, fontFamily: 'PingFang SC, Microsoft YaHei', fontWeight: 400, borderRadius: 4, borderWidth: 1, borderColor: '#CCCCCC', borderFocusColor: '#2867EC', borderHoverColor: '#92B5FF', backgroundColor: '#FFFFFF', } }, // 子节点样式 { // 节点文本偏移量，x,y为无icon情况的偏移量 transform: { x: 8, y: 8, icon: { size: 20, margin: 4 } }, space: { x: 40, y: 8 }, style: { wrap: true, color: '#333333', placeholderColor: '#CCCCCC', fontSize: 14, fontFamily: 'PingFang SC, Microsoft YaHei', fontWeight: 400, borderRadius: 2, borderWidth: 1, borderColor: 'transparent', borderFocusColor: '#2867EC', borderHoverColor: '#92B5FF', backgroundColor: 'transparent', } }]- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
4、画布属性配置 - Wrapper
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| scale | 画布缩放配置 | ScaleType | - |
| +min | 缩放的最小值 | number | 25 |
| +max | 缩放的最大值 | number | 200 |
| +size | 画布缩放值 | number | 100 |
| +step | 每次缩放的跨度 | number | 10 |
| +map | 画布缩放的可选项 | number[] | [25, 50, 75, 100, 125, 150, 175, 200] |
5、操作栏配置 - Operation
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| header | 顶部操作栏 | HeaderType | - |
| +show | 是否显示 | boolean | true |
| +excludes | 不显示的操作项 | HeaderAction[] | [] |
| node | 节点操作栏 | NodeType | - |
| +show | 是否显示 | boolean | true |
| batch | 批量操作栏 | BatchType | - |
| +show | 是否显示 | boolean | true |
| +excludes | 不显示的操作项 | BatchAction | [] |
| footer | 底部操作栏 | FooterType | - |
| +show | 是否显示 | boolean | true |
| +excludes | 不显示的操作项 | FooterAction | [] |
-
HeaderAction
mind - 脑图|outline - 大纲 |search - 搜索 |export - 导出 |shortcut - 快捷键
-
BatchAction
delete - 删除 | user - 人员
-
FooterAction
expand - 展开 | thumbnail - 缩略图 | center - 中心定位 | fullscreen - 全屏 | scale - 缩放
6、自定义语言 - Locales
{ 'shortcut': '快捷键', 'opr': '操作', 'opr.mind': '脑图模式', 'opr.outline': '文档模式', 'opr.undo': '撤回', 'opr.redo': '重做', 'opr.search': '查找', 'opr.export': '导出', 'opr.shortcut': '快捷键', 'opr.expand': '一键展开', 'opr.thumbnail': '导航器', 'opr.center': '定位到中心主题', 'opr.fullscreen': '全屏', 'opr.scale': '缩放比例', 'opr.reduce': '缩小', 'opr.enlarge': '放大', 'opr.user': '添加负责人', 'node': '节点', 'node.sibling': '插入同级节点', 'node.child': '插入子节点', 'node.delete': '删除节点', 'node.navigation': '任务导航', 'node.expand': '节点展开', 'node.fold': '节点折叠', 'node.edit': '编辑', 'node.cut': '剪切', 'node.copy': '复制', 'node.paste': '粘贴', 'canvas': '画布', 'canvas.reduce': '画布缩小', 'canvas.enlarge': '画布放大', 'expand.label': '展开至${num}级节点', 'search.placeholder': '搜索关键词', 'search.empty': '无搜索结果', 'empty.title': '无标题', 'p.placeholder': '项目名称', 'i.placeholder': '清单名称', 't.placeholder': '任务名称@负责人#计划截止时间', 't.detail': '任务详情', 't.delete': '删除任务', 'i.detail': '清单详情', 'i.delete': '删除清单', 'p.detail': '项目详情', 'p.delete': '删除项目', 'p.create': '新建清单', 'i.create': '新建任务', 't.create': '新建子任务', 'i.default': '默认清单', 't.default': '默认任务',}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
7、参数配置 - props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| maxChildCount | 最大子节点数，超过该数则不支持默认展开 | number | Infinity |
| foldKeys | 折叠的节点 | id[] | [] |
| limit | 每类节点的最小数量，小于或等于该数量不可删除 | LimitType | - |
| level | 数据层级，超过该层级后不可添加子节点 | number | Infinity |
| onAtSearch | 输入@时的，回调函数，用于搜索人员 | val => Promise<{id, name}[]> | - |
| onCopyData | 复制粘贴时触发, dataArr为复制后的节点列表，dataMap为复制后节点的<key, value>对象。 | ({ ids, pid }) => Promise<{dataArr, dataMap?}> | - |
| onDelete | 在删除节点时触发 | (dataItem[]) => Promise.resolve(reject) | - |
| onDetail | 在查看详情时触发 | (dataItem) => void | - |
| onEnter | 在切换根节点时触发 | (id) => void | - |
| onError | 复制移动过程中，在当前节点不能插入子节点时触发 | (type: ‘move’ | ‘copy’) => void | - |
| onExport | 在导出图片时触发，fn接收opts参数({ name, bgColor, maxSize })，并返回一个Promise，用以标记导出成功或失败的状态 | (fn) => void; | - |
| onItemChange | 在节点发生变化时触发 | (params, data) => Promise | - |
| onLoadData | 当节点的子节点数(childCount)大于0，但不存在children时，点击展开时触发 | (data) => Promise<{ dataArr, dataMap}> | - |
| onModeChange | 在切换视图模式时触发，可用于控制视图显示权限 | (mode: ‘mind’ |‘outline’) => Promise | - |
| onMoveData | 在移动节点时触发 | ({ ids, pid }) => Promise.resolve(reject) | - |
| onMultipleUser | 在批量操作中，需要修改节点的@人员时，可通过此方法来调用外部组件修改 | (ids) => void | - |
7.1 最小数量控制 - LimitType
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| i | 描述根节点下子节点的最小数量 | number | - |
| t | 描述除根节点外其他节点下子节点的最小数量 | number | - |
api相关
// 组件实例化const config = { mode: 'mind' };const mIns = new AntMind('#app', config);- 1
- 2
- 3
initProps（参数初始化）
const props = { limit: { 'i': 1 }, // 该参数设置，需要render后才能生效 foldKeys: [], // 其他参数};mIns.initProps(props);- 1
- 2
- 3
- 4
- 5
- 6
- 7
setConfig （配置设置）
// 浅更新mIns.setConfig({ mode: 'outline' });// 更新配置后，如果需要更新视图，则需要调用renderView方法mIns.renderView();- 1
- 2
- 3
- 4
render（渲染视图）
const props = { limit: { 'i': 1 }, foldKeys: [], // 其他回调方法};const data = [];mIns.render(data, props);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
handleUpdate（更新节点）
// id => 更新节点的id// type => 更新方式：delete、move、update// data => 最新的节点数据，在type === 'delete'时，可不传mindIns.handleUpdate(id, type, data);- 1
- 2
- 3
- 4
updateMatrix（位置更新）
// 在思维导图模式下，用于更新视图的偏移位置mIns.updateMatrix({ a: 1, // x轴缩放 b: 0, // 倾斜角度 c: 0, // 旋转角度 d: 1, // y轴缩放 e: 0, // x轴偏移量 f: 0 // y轴偏移量});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
destroy（事件注销）
// 在组件卸载时调用，用于注销组件涉及的浏览器事件mIns.destroy();- 1
- 2