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

• 接入了自动化用例平台，融入用例脑图。
  
• 重构了脑图组件。全新视图和交互，让页面更简约，更高效。
  
• 脑图组件2.0已开源至 NPM ，组件使用文档：zz-mind-react ，欢迎各人体验和使用。
  

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

• 不支持导出、页面菜单过于痴肥、节点操纵很繁琐；
  
• 不支持右键菜单、没有工具箱、主题单一；
  
• 不支持用例标签搜刮等等标题
  

1、预览模式，实用场景（用例草稿、用例Diff、任务实行纪录等）
2、实行模式，实用场景（实行任务、用例复用等）
3、编辑模式，实用场景（用例操持、用例评审、用例模板等）

1、新增用例标题组件。删除痴肥的顶部Tab菜单项和按钮。
2、新增全新的右键菜单。根据差别的脑图模式和点击对象，定制化展示。
3、新增全新的工具箱。用例搜刮、主题样式、节点信息、自动化用例
4、简约结构，展示更多的内容
5、表现收起的节点数。

1、新增4款简约的定制化主题。
2、新增用例缩略图。
3、优化节点的选中结果和其他元素交互。

遵照原则：高频  >  紧张  >  次要  >  低频

• 确定展示内容，举行归类。
  
• 确定核心内容展示编辑地区。
  
• 根据和核心地区的交互，规划团体分区
  
• 确定交互
  
  
  

• 右键菜单交互无疑是效率最快，最容易明白的的交互方式。
  
• 针对差别的右键对象，对象状态，渲染差别的菜单情势。提拔操纵效率。
  
• 自动调解位置。右键位置大概处于屏幕边沿，菜单会出现溢出屏外的情况，这个时间我们必要去动态盘算坐标，将菜单外层Div举行偏移。
  

• 新增4款自界说主题
  
• 支持自界说配景致
  
• 主题预览：
  

• 无论是用例、照旧任务，都支持导出当前页面。
  
• 支持格式：PNG、Json、Markdown、Svg等格式文件
  [图片上传失败...(image-471161-1656922248648)]
  

如今性能优化仍在举行中，颠末调研和源码分析，这里把具体的方案和各人分享一下。

• 用例节点数过多时，导入Json数据后，初次加载渲染会很慢。
  
• 页面节点过多时，操纵节点时，页面就会开始出现卡顿。
  

• 用例节点过多时，必要重复绘制、结构、盘算坐标的时间就会很长。
  
• 对页面举行单个节点操纵时，会导致整个svg矢量图都重新绘制，造成页面卡顿。
  
• 不可见的元素，节点，也必要斲丧资源举行绘制和重复绘制。
  

• 去除Svg里不渲染，但占位的dom，删除已隐藏的dom
  
• 逐级睁开节点，实时判定当前睁开节点数，若过多则收起其他节点
  
• 收起节点时，移除全部子节点对应的dom
  
• 渲染示意图如下：
  

• 本次升级重构踩坑不少，肝了不少的夜晚。但是从更多的角度而言，这也是一次锻炼和挑衅。
  
• 开辟用例平台时，部门操持角度更应该站在用户的角度。好比，页面结构，排版，功能交互。流程指引等等。
  
• 测试平台差别于测试工具，更多的代价要体如今产研效能上，而不是单单产物本身。ZZcase从立项到如今，已经沉淀了不少，后续会渐渐分享我们从零开始的一些履历和介绍。
  

感谢