絕了！低代碼/零代碼頁面設計器和代碼生成器

真正的大師,永遠都懷着一顆學徒的心！

一、項目簡介

低代碼/零代碼頁面設計器和代碼生成器

二、實作功能

1. 無限嵌套布局支援：CraftDesigner 提供了無限嵌套布局的功能，這意味着您可以在頁面中建立任意深度的布局結構。無論您需要多少層嵌套，CraftDesigner 都能滿足您的需求，讓您設計出更加複雜且具有層次感的頁面。
2. 支援原生 HTML 标簽拖拽布局：CraftDesigner 不僅支援原生的 HTML 标簽，還可以通過簡單的拖拽操作來布局這些标簽。這意味着您可以輕松地将各種 HTML 元素放置到頁面中，并通過拖拽來調整它們的位置和大小，進而實作自定義的布局效果。
3. 支援任意 React 元件拖拽布局：除了原生 HTML 标簽外，CraftDesigner 還支援任意 React 元件的拖拽布局，包括開源元件和自定義元件，而且無需對現有元件進行修改。這意味着您可以在頁面中使用各種現成的 React 元件，或者自己開發的元件，來實作更加豐富和個性化的布局效果。
4. 支援 iframe 嵌入元件：如果您需要在頁面中嵌入其他網頁或應用程式，CraftDesigner 也提供了對 iframe 的支援。您可以輕松地将 iframe 放置到頁面中，并設定相應的屬性來加載指定的網頁内容，進而實作與外部資源的內建和互動。
5. 支援 ECharts 圖形拖拽布局：CraftDesigner 還內建了對 ECharts 圖形的支援，您可以通過簡單的拖拽操作來布局和配置各種圖形元件，進而快速建立各種資料可視化效果。
6. 頁面序列化成 JSON 資料：CraftDesigner 設計的頁面可以輕松序列化成 JSON 資料，而不是生成代碼。這意味着您可以将整個頁面的布局結構和配置資訊儲存為一個 JSON 對象，友善存儲、傳輸和後續處理，同時也可以随時導入到 CraftDesigner 中進行編輯和調整。
7. CraftDesigner 作為普通 React 元件：CraftDesigner 本身也是一個普通的 React 元件，可以被輕松地內建到任意 React 項目中。無論您是正在開發新項目，還是想要為現有項目添加可視化布局功能，都可以通過簡單的引入和配置來使用 CraftDesigner。
8. 服務端無關，隻輸出和輸入 JSON 資料：CraftDesigner 的設計是服務端無關的，它隻負責處理頁面的布局和配置，不涉及任何與後端相關的邏輯。這意味着您可以在任何環境下使用 CraftDesigner，隻需要輸入和輸出 JSON 資料即可，而不受限于特定的後端技術棧或架構。

三、技術選型

craft.js

Ant Design

React

storybook

react-markdown

四、界面展示











五、源碼位址

私信回複：98