转转用例平台系列 - 脑图组件2.0

原文链接

前言

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

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

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

---

一、组件介绍

1. 预览

升级前

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

image.png

升级后

image.png

右键节点菜单

image.png

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. 确定交互

   
   
   image.png

2. 提升用户交互效率

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

image.png

3. 支持个性化主题

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

贝塞尔（曲线）

image.png

无边框（下划线）

image.png

折线（简约）

image.png

暗色（下划线）

image.png

4. 导出到本地

• 无论是用例、还是任务，都支持导出当前页面。
• 支持格式：PNG、Json、Markdown、Svg等格式文件
  [图片上传失败...(image-471161-1656922248648)]

---

三、性能优化

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

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

存在问题

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

原因分析：

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

解决方案：

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

---

总结

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

感谢