craft-codeless-designer / craft-codeless-designer

🚀🚀🚀 一款基于 React 和 Craft.js 的低代码/零代码页面设计器和代码生成器。

CCD: Craft Codeless Designer

1.简介

Craft Codeless Designer 是一款可视化的低代码/零代码页面设计器，基于 craft.js 扩展而来。

🚀 在线实例

2.用法

• 在你的 React 项目中安装依赖： yarn add craft-codeless-designer
• 引用 <CraftDesigner> 组件

render() {
    //只要给 CraftDesigner 传递 pageData 参数，它自己会反序列化成页面。
    const pageData = this.state.pageEntity.pageData;
    return (
        <CraftDesigner
            onSaveData={this.onSaveData.bind(this)}
            onLoadData={this.loadData.bind(this)}
            onPreview={this.onPreview.bind(this)}
            pageData={pageData}
            ></CraftDesigner>
    );
}

完整的实例项目参见： https://github.com/craft-codeless-designer/craft-codeless-designer-demo

3.核心 API

<CraftDesigner> 是唯一的核心组件，它集成了所有功能。

<CraftDesigner> 核心 props 说明：

props	说明
onPreview	预览按钮回调函数
onDelete	删除按钮回调函数
onUndo	Undo 按钮回调函数
onRedo	Redo 按钮回调函数
onSaveData	保存 按钮回调函数
onLoadData	加载 按钮回调函数
onHelp	Help 按钮回调函数
showNavBar	是否渲染顶部导航条，默认为 true
showSiderBar	是否渲染侧边工具栏，默认为 true
componentTypes	组件类型列表， CraftDesigner 内置的组件已经全部添加在列表中
iconList	组件图标列表， CraftDesigner 内置的图标已经全部添加在列表中
pageData	页面数据，传递和修改 pageData 会触发 CraftDesigner 重新渲染页面
enabled	是否启用编辑状态，默认为 true ，如果需要进入预览状态，请把此配置项设置为 false

4.继续开发

• git clone 此项目
• yarn install
• npm start

此工程使用 storybook 编写测试用例和文档。

5.主要优点

• 支持无限嵌套布局，可以设计出结构非常复杂的页面
• 支持所有原生 HTML 标签拖拽布局
• 支持任意 React 组件拖拽布局，包括开源组件，无需对现有组件进行修改
• 支持 iframe 嵌入组件
• 支持 ECharts 图形拖拽布局
• 整个页面序列化成 JSON 数据，不生成代码
• CraftDesigner 自身也是一个普通的 React 组件，可以被随意集成到任意 React 项目中
• CraftDesigner 自身是服务端无关的，只输出和输入 JSON 数据

6.效果图

7.主要依赖

• craft.js
• Ant Design
• React
• storybook
• react-markdown

8.License

MIT licensed.

craft-codeless-designer's Issues

怎么支持组件间的交互？

比如我有一个button，点击以后希望refresh一个grid或者chart？