開源專案名稱：react-visual-editor

專案描述：

react-visual-editor 是一款基於umi block開源的工具類專案，開源時間為2020。2。22，其目的是為了解決不會React技術棧的人員可以透過元件拖拽生成React頁面與程式碼。 工具透過React合成事件對React元件做了拖拽屬性等的預設包裝使元件支援拖拽等功能，實現了元件視覺化隨意拖拽巢狀，並生成可執行的程式碼的功能。專案透過簡單的配置可以對接切換任何React元件庫，並且支援PC端與移動端多設配展示效果的切換。

目前實現功能：

1、任意拖拽巢狀：透過元件預覽面板拖拽元件到設計面板實現任意巢狀，設計面板中的元件也可以隨意拖拽巢狀。

2、實時預覽：設計面板中會實時渲染展示元件的真實效果，並且與真實頁面無異，可完美實現UI設計稿。

3、dom樹展示：或者說元件樹展示，頁面元件樹的展示，並實現dom節點實時追蹤效果與設計面板相互對映。

4、視覺化屬性配置：結合React特性和JS語法定製了一套屬性型別，並且型別與對映元件使其視覺化，實現了複雜資料結構的視覺化操作。

5、視覺化樣式配置：根據CSS樣式值與CSS屬性效果不同，做了部分CSS視覺化展示，實現了樣式值的改變實時對映到設計面板頁面中呈現樣式效果。

6、模板功能：可以在設計面板或者dom樹展示面板選中區域性或者整個頁面節點作為可複用的模板儲存，減少重複元件的配置，提高配置效率，減少重複工作。

7、元件約束：根據元件特性，可以配置元件的父元件約束與子元件約束，解決元件間的錯誤巢狀和報錯。

8、預覽與程式碼生成：實際上設計面板中的元件與原始元件可以說沒有區別，但是為了確保頁面真實效果，將配置好的頁面資訊又重新用原始元件解析渲染了一遍並展示在預覽彈窗中，並且做了解析生成頁面程式碼與樣式程式碼一併展示。

9、多平臺支援：工具實現了PC端與移動端多型號裝置的展示與切換，移動端裝置可透過簡單的配置做增刪。

10、元件庫替換：工具本身除了部分antd元件作為支撐UI展示外，不依賴其他元件庫，整體為一個可擴充套件的，元件庫插拔式框架，可透過簡單的配置，引入任何React元件庫或者自定義元件，使這些元件支援拖拽生成頁面。

未來功能實現：

1、程式碼線上編輯實時預覽。

2、程式碼解析生成專案所需要的頁面配置資訊，實現程式碼到配置資訊，以及配置資訊到程式碼的雙向對映。