vue-codemirror 實現文字差異比對

因為 “基於百度腦圖的用例區別 diff” 由於主鍵 ID 變化導致比對不準，所以增加 Xmind 用例 Json 比對的功能


1、獲取兩個對比用例 Xmind JSON 內容，動態繫結 codemirror
2、輸出左右兩側差異的行號
3、差異的行號寫入下拉選擇，可以選擇行號，自動跳轉到有差異的行號處
4、當操作左側或者右側的豎向和橫向捲軸時候，另一側也同步滾動

前端元件調研：
①v-code-diff：優點：該元件可一次渲染所有差異（差異行有紅色和綠色的背景色），差異一目瞭然。缺點：文字量大時，例如 10000 行，頁面直接崩潰，所以該元件不適合資料量大的文字，最終被放棄
②vue-codemirror :優點:vue-codemirror 搭配 diff-match-patch 可進行大資料量的文字比對（幾百萬行也不在話下）。缺點：滾動渲染，不會一次渲染所有差異，而是滾動到哪裡，稍停片刻，或者緩慢滾動，才會看到差異（差異行有淡黃色背景色，差異文字有紅色和綠色波浪線）。所以，拖動捲軸過快時，可能差異還沒渲染出來，就已經滾動過去了，不能一目瞭然的知道有幾處差異。
3.解決方案：鑑於 vue-code-diff 對大資料量不不友好，直接 pass 掉。選用 vue-codemirror 搭配 diff-match-patch。為了改善 “滾動渲染，不會一次渲染所有差異，不能一目瞭然的知道有幾處差異” 的缺點，增加文字描述，示例如下：共 4 處差異，每處差異的開始行號為：2、589、2904、12328。這樣使用者可拖動捲軸到這些行，當滾動停止時，差異渲染出來，可看到這些行的具體差異。
核心程式碼：