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

语言: CN / TW / HK

前言

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

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

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

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

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

  • 欢迎大家体验和使用。

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


一、组件介绍

1. 预览

升级前

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

图片

升级后

图片

右键节点菜单

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

图片

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),更多干货实践,欢迎交流分享~