前语
转转用例渠道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），更多干货实践，欢迎交流共享~
