前言

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

• 接入了自动化用例平台，融入用例脑图。

• 重构了脑图组件。全新视图和交互，让页面更简约，更高效。

• [NPM]:https://www.npmjs.com/package/zz-mind-react
  

• 组件使用文档：https://blog.csdn.net/weixin_45877986/article/details/125517612
  

• 欢迎大家体验和使用。

这篇文章将主要介绍脑图组件 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 从立项到现在，已经沉淀了不少，后续会慢慢分享我们从零开始的一些经验和介绍。

感谢

作者：汪彬

> 转转研发中心及业界小伙伴们的技术学习交流平台，定期分享一线的实战经验及业界前沿的技术话题。> 关注公众号「转转技术」（综合性）、「大转转 FE」（专注于 FE）、「转转 QA」（专注于 QA），更多干货实践，欢迎交流分享~