转转用例平台系列 – 脑图组件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
• 渲染示意图如下：

总结

1. 本次升级重构踩坑不少，肝了不少的夜晚，头也越发的秃了，但是从更多的角度而言，这也是一次锻炼和挑战。
2. 开发用例平台时，部分设计角度更应该站在用户的角度。比如，页面布局，排版，功能交互。流程指引等等。
3. 测试平台不同于测试工具，更多的价值要体现在产研效能上，而不是单单产品本身。ZZcase从立项到现在，已经沉淀了不少，后续会慢慢分享我们从零开始的一些经验和介绍。

感谢阅读，转转QA公众号

ZZQA