转转用例平台系列 - 脑图组件 2.0
前言
转转用例平台 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. 用例脑图布局如何设计
遵循原则:高频 > 重要 > 次要 > 低频
确定展示内容,进行归类。
确定核心内容展示编辑区域。
根据和核心区域的交互,规划整体分区
确定交互

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

3. 支持个性化主题
新增 4 款自定义主题
支持自定义背景色
主题预览:
贝塞尔(曲线)

无边框(下划线)

折线(简约)

暗色(下划线)

4. 导出到本地
无论是用例、还是任务,都支持导出当前页面。
支持格式:PNG、Json、Markdown、Svg 等格式文件

三、性能优化
(Kity 绘图)SVG 矢量图渲染优化
目前性能优化仍在进行中,经过调研和源码分析,这里把具体的方案和大家分享一下。
存在问题
用例节点数过多时,导入 Json 数据后,首次加载渲染会很慢。
页面节点过多时,操作节点时,页面就会开始出现卡顿。
原因分析:
用例节点过多时,需要重复绘制、布局、计算坐标的时间就会很长。
对页面进行单个节点操作时,会导致整个 svg 矢量图都重新绘制,造成页面卡顿。
不可见的元素,节点,也需要消耗资源进行绘制和重复绘制。
解决方案:
去除 Svg 里不渲染,但占位的 dom,删除已隐藏的 dom
逐级展开节点,实时判断当前展开节点数,若过多则收起其他节点
收起节点时,移除所有子节点对应的 dom
渲染示意图如下:

总结
本次升级重构踩坑不少,肝了不少的夜晚。但是从更多的角度而言,这也是一次锻炼和挑战。
开发用例平台时,部分设计角度更应该站在用户的角度。比如,页面布局,排版,功能交互。流程指引等等。
测试平台不同于测试工具,更多的价值要体现在产研效能上,而不是单单产品本身。ZZcase 从立项到现在,已经沉淀了不少,后续会慢慢分享我们从零开始的一些经验和介绍。
感谢
作者:汪彬
> 转转研发中心及业界小伙伴们的技术学习交流平台,定期分享一线的实战经验及业界前沿的技术话题。> 关注公众号「转转技术」(综合性)、「大转转 FE」(专注于 FE)、「转转 QA」(专注于 QA),更多干货实践,欢迎交流分享~
版权声明: 本文为 InfoQ 作者【转转技术团队】的原创文章。
原文链接:【http://xie.infoq.cn/article/0751d1d52a50b9af7870c4113】。
本文遵守【CC-BY 4.0】协议,转载请保留原文出处及本版权声明。
评论