转转用例平台之脑图组件2.0

转转用例平台系列 - 脑图组件2.0（基于React）

---

---

前言

转转用例平台V5.0已经在内部发布使用。在这个版本里面：

• 接入了自动化用例平台，融入用例脑图。
• 重构了脑图组件。全新视图和交互，让页面更简约，更高效。
• 脑图组件2.0已开源至 NPM ，组件使用文档：zz-mind-react ，欢迎大家体验和使用。

这篇文章将主要介绍脑图组件2.0

---

一、组件介绍

1. 预览

升级前

• 不支持导出、页面菜单过于臃肿、节点操作很繁琐；
• 不支持右键菜单、没有工具箱、主题单一；
• 不支持用例标签搜索等等问题

升级后

右键节点菜单

2. 介绍

2.1 新增三种脑图模式

1、预览模式，适用场景（用例草稿、用例Diff、任务执行记录等）
2、执行模式，适用场景（执行任务、用例复用等）
3、编辑模式，适用场景（用例设计、用例评审、用例模板等）

2.2 全新的布局和菜单交互

1、新增用例标题组件。删除臃肿的顶部Tab菜单项和按钮。
2、新增全新的右键菜单。根据不同的脑图模式和点击对象，定制化展示。
3、新增全新的工具箱。用例搜索、主题样式、节点信息、自动化用例
4、简约布局，展示更多的内容
5、显示收起的节点数。

2.3 主题样式和扩展功能

1、新增4款简约的定制化主题。
2、新增用例缩略图。
3、优化节点的选中效果和其他元素交互。

---

二、核心设计理念

1. 用例脑图布局如何设计

遵循原则：高频 > 重要 > 次要 > 低频

1. 确定展示内容，进行归类。
2. 确定核心内容展示编辑区域。
3. 根据和核心区域的交互，规划整体分区
4. 确定交互

2. 提升用户交互效率

• 右键菜单交互无疑是效率最快，最容易理解的的交互方式。
• 针对不同的右键对象，对象状态，渲染不同的菜单形式。提升操作效率。
• 自动调整位置。右键位置可能处于屏幕边缘，菜单会出现溢出屏外的情况，这个时候我们需要去动态计算坐标，将菜单外层Div进行偏移。

3. 支持个性化主题

• 新增4款自定义主题
• 支持自定义背景色
• 主题预览：

贝塞尔（曲线）

无边框（下划线）

简约（折线）

暗色主题

4. 导出到本地

• 无论是用例、还是任务，都支持导出当前页面。
• 支持格式：PNG、Json、Markdown、Svg等格式文件
  

---

三、性能优化

（Kity绘图）SVG 矢量图渲染优化

目前性能优化仍在进行中，经过调研和源码分析，这里把具体的方案和大家分享一下。

存在问题

• 用例节点数过多时，导入Json数据后，首次加载渲染会很慢。
• 页面节点过多时，操作节点时，页面就会开始出现卡顿。

原因分析：

• 用例节点过多时，需要重复绘制、布局、计算坐标的时间就会很长。
• 对页面进行单个节点操作时，会导致整个svg矢量图都重新绘制，造成页面卡顿。
• 不可见的元素，节点，也需要消耗资源进行绘制和重复绘制。

解决方案：

• 去除Svg里不渲染，但占位的dom，删除已隐藏的dom
• 逐级展开节点，实时判断当前展开节点数，若过多则收起其他节点
• 收起节点时，移除所有子节点对应的dom
• 渲染示意图如下：