前言
轉(zhuǎn)轉(zhuǎn)用例平臺V5.0已經(jīng)在內(nèi)部發(fā)布使用。在這個(gè)版本里面：
- 接入了自動化用例平臺，融入用例腦圖。
- 重構(gòu)了腦圖組件。全新視圖和交互，讓頁面更簡約，更高效。
- 腦圖組件2.0已開源至 NPM ，組件使用文檔：zz-mind-react ，歡迎大家體驗(yàn)和使用。
這篇文章將主要介紹腦圖組件2.0
一、組件介紹
1. 預(yù)覽
升級前
- 不支持導(dǎo)出、頁面菜單過于臃腫、節(jié)點(diǎn)操作很繁瑣；
- 不支持右鍵菜單、沒有工具箱、主題單一；
- 不支持用例標(biāo)簽搜索等等問題
image.png
升級后
image.png
右鍵節(jié)點(diǎn)菜單
image.png
2. 介紹
2.1 新增三種腦圖模式
1、預(yù)覽模式，適用場景（用例草稿、用例Diff、任務(wù)執(zhí)行記錄等）
2、執(zhí)行模式，適用場景（執(zhí)行任務(wù)、用例復(fù)用等）
3、編輯模式，適用場景（用例設(shè)計(jì)、用例評審、用例模板等）
2.2 全新的布局和菜單交互
1、新增用例標(biāo)題組件。刪除臃腫的頂部Tab菜單項(xiàng)和按鈕。
2、新增全新的右鍵菜單。根據(jù)不同的腦圖模式和點(diǎn)擊對象，定制化展示。
3、新增全新的工具箱。用例搜索、主題樣式、節(jié)點(diǎn)信息、自動化用例
4、簡約布局，展示更多的內(nèi)容
5、顯示收起的節(jié)點(diǎn)數(shù)。
2.3 主題樣式和擴(kuò)展功能
1、新增4款簡約的定制化主題。
2、新增用例縮略圖。
3、優(yōu)化節(jié)點(diǎn)的選中效果和其他元素交互。
二、核心設(shè)計(jì)理念
1. 用例腦圖布局如何設(shè)計(jì)
遵循原則：高頻 > 重要 > 次要 > 低頻
- 確定展示內(nèi)容，進(jìn)行歸類。
- 確定核心內(nèi)容展示編輯區(qū)域。
- 根據(jù)和核心區(qū)域的交互，規(guī)劃整體分區(qū)
-
確定交互
image.png
2. 提升用戶交互效率
- 右鍵菜單交互無疑是效率最快，最容易理解的的交互方式。
- 針對不同的右鍵對象，對象狀態(tài)，渲染不同的菜單形式。提升操作效率。
- 自動調(diào)整位置。右鍵位置可能處于屏幕邊緣，菜單會出現(xiàn)溢出屏外的情況，這個(gè)時(shí)候我們需要去動態(tài)計(jì)算坐標(biāo)，將菜單外層Div進(jìn)行偏移。
image.png
3. 支持個(gè)性化主題
- 新增4款自定義主題
- 支持自定義背景色
- 主題預(yù)覽：
貝塞爾（曲線）
image.png
無邊框（下劃線）
image.png
折線（簡約）
image.png
暗色（下劃線）
image.png
4. 導(dǎo)出到本地
- 無論是用例、還是任務(wù)，都支持導(dǎo)出當(dāng)前頁面。
- 支持格式：PNG、Json、Markdown、Svg等格式文件
[圖片上傳失敗...(image-471161-1656922248648)]
三、性能優(yōu)化
（Kity繪圖）SVG 矢量圖渲染優(yōu)化
目前性能優(yōu)化仍在進(jìn)行中，經(jīng)過調(diào)研和源碼分析，這里把具體的方案和大家分享一下。
存在問題
- 用例節(jié)點(diǎn)數(shù)過多時(shí)，導(dǎo)入Json數(shù)據(jù)后，首次加載渲染會很慢。
- 頁面節(jié)點(diǎn)過多時(shí)，操作節(jié)點(diǎn)時(shí)，頁面就會開始出現(xiàn)卡頓。
原因分析：
- 用例節(jié)點(diǎn)過多時(shí)，需要重復(fù)繪制、布局、計(jì)算坐標(biāo)的時(shí)間就會很長。
- 對頁面進(jìn)行單個(gè)節(jié)點(diǎn)操作時(shí)，會導(dǎo)致整個(gè)svg矢量圖都重新繪制，造成頁面卡頓。
- 不可見的元素，節(jié)點(diǎn)，也需要消耗資源進(jìn)行繪制和重復(fù)繪制。
解決方案：
- 去除Svg里不渲染，但占位的dom，刪除已隱藏的dom
- 逐級展開節(jié)點(diǎn)，實(shí)時(shí)判斷當(dāng)前展開節(jié)點(diǎn)數(shù)，若過多則收起其他節(jié)點(diǎn)
- 收起節(jié)點(diǎn)時(shí)，移除所有子節(jié)點(diǎn)對應(yīng)的dom
- 渲染示意圖如下：
總結(jié)
- 本次升級重構(gòu)踩坑不少，肝了不少的夜晚。但是從更多的角度而言，這也是一次鍛煉和挑戰(zhàn)。
- 開發(fā)用例平臺時(shí)，部分設(shè)計(jì)角度更應(yīng)該站在用戶的角度。比如，頁面布局，排版，功能交互。流程指引等等。
- 測試平臺不同于測試工具，更多的價(jià)值要體現(xiàn)在產(chǎn)研效能上，而不是單單產(chǎn)品本身。ZZcase從立項(xiàng)到現(xiàn)在，已經(jīng)沉淀了不少，后續(xù)會慢慢分享我們從零開始的一些經(jīng)驗(yàn)和介紹。
感謝
