转转用例平台系列 - 脑图组件2.0
2022-07-04 本文已影响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. 用例脑图布局如何设计
遵循原则：高频 > 重要 > 次要 > 低频
- 确定展示内容，进行归类。
- 确定核心内容展示编辑区域。
- 根据和核心区域的交互，规划整体分区
-
确定交互
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
- 渲染示意图如下：
总结
- 本次升级重构踩坑不少，肝了不少的夜晚。但是从更多的角度而言，这也是一次锻炼和挑战。
- 开发用例平台时，部分设计角度更应该站在用户的角度。比如，页面布局，排版，功能交互。流程指引等等。
- 测试平台不同于测试工具，更多的价值要体现在产研效能上，而不是单单产品本身。ZZcase从立项到现在，已经沉淀了不少，后续会慢慢分享我们从零开始的一些经验和介绍。
感谢
