技術(shù)棧：react+dva+less+umi+antd+node+ sortable
umi：組件庫設(shè)計考慮的一個重要的問題就是體積和渲染問題, 一旦組件庫變的越來越多, 那意味著頁面加載會非常慢,所以我們需要實現(xiàn)異步加載組件和代碼分割的能力, umi提供了這樣的功能,我們可以基于它提供的api去實現(xiàn)自己的額按需組件.
數(shù)據(jù)可視化： F2 是一個專注于移動萝嘁，開箱即用的可視化解決方案，完美支持 H5 環(huán)境同時兼容多種環(huán)境（Node, 小程序，Weex），完備的圖形語法理論，滿足你的各種可視化需求，專業(yè)的移動設(shè)計指引為你帶來最佳的移動端圖表體驗。
編輯器實現(xiàn)
編輯器的實現(xiàn)思路是：編輯器生成頁面JSON數(shù)據(jù)此改，服務(wù)端負(fù)責(zé)存取JSON數(shù)據(jù)，渲染時從服務(wù)端取數(shù)據(jù)JSON交給前端模板處理侄柔。
問題：我們采用了網(wǎng)格布局的方式來實現(xiàn)拖拽生成H5頁面或者Web app, 其好處就是靈活簡單, 用戶基本沒有任何使用成本, 在前端層也能做一定的橫向擴展, 但是存在幾個缺陷:
- 實現(xiàn)嵌套組件比較復(fù)雜
- 沒有層的概念
解決方案：
- 將智能布局改為自由布局, 即可以采用類似 react-resizable 的這種方案
- 基于自然流來實現(xiàn), 也就是抹去定位的概念, 完全基于元素在文檔的順序, 層級和定位的選擇權(quán)交給用戶
給予自然流布局實現(xiàn)拖拽生成頁面
自然流布局的好處就是我們不用通過定位的方式來限定元素的位置等信息, 而是以html文檔流的方式來布局元素, 并且用戶可以靈活的設(shè)置元素的層級(layer)和偏移(transform)
1. 簡單布局
2. 實現(xiàn)思路核心
畫布區(qū)拖拽布局實現(xiàn)-拖拽排序機制（通過排序的方式改變組件的位置從而實現(xiàn)自然流布局的頁面搭建.）
拖拽排序的庫可以使用 sortable
