前言
轉轉用例平臺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從立項到現在，已經沉淀了不少，后續會慢慢分享我們從零開始的一些經驗和介紹。
感謝
