{"id":13783567,"url":"https://github.com/small-tou/antd-visual-editor","last_synced_at":"2026-01-25T18:30:16.700Z","repository":{"id":226291295,"uuid":"182378456","full_name":"small-tou/antd-visual-editor","owner":"small-tou","description":"ant-design 组件库实时可视化编辑器，实时生成 react 代码","archived":false,"fork":false,"pushed_at":"2022-01-20T16:57:20.000Z","size":1878,"stargazers_count":1,"open_issues_count":6,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-12T04:11:53.424Z","etag":null,"topics":["ant-design","antd","editor","react"],"latest_commit_sha":null,"homepage":"https://xinyu198736.github.io/antd-visual-editor/#/?_k=u97lci","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/small-tou.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2019-04-20T08:03:23.000Z","updated_at":"2024-03-06T11:10:42.000Z","dependencies_parsed_at":"2024-03-06T21:41:33.751Z","dependency_job_id":null,"html_url":"https://github.com/small-tou/antd-visual-editor","commit_stats":null,"previous_names":["small-tou/antd-visual-editor"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/small-tou%2Fantd-visual-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/small-tou%2Fantd-visual-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/small-tou%2Fantd-visual-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/small-tou%2Fantd-visual-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/small-tou","download_url":"https://codeload.github.com/small-tou/antd-visual-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239768927,"owners_count":19693763,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ant-design","antd","editor","react"],"created_at":"2024-08-03T19:00:25.021Z","updated_at":"2026-01-25T18:30:16.600Z","avatar_url":"https://github.com/small-tou.png","language":"JavaScript","readme":"# 一个 可视化实时渲染的 ant-design 页面搭建工具\n\n\u003e 此项目是上古项目（2017年），代码基本很难维护，现在发布出来仅供参考思路，感兴趣的可以根据原理重构一版，实现一个更完备的可视化编辑\n\n\n## 线上实例\n\nhttps://yu-tou.github.io/antd-visual-editor/\n\n托管在 github，第一次加载会比较慢\n\n截图：\n\n![](https://img.souche.com/0a3a88462435f20952346980e3ee4df5.png)\n\n## 运行\n\n```bash\nnpm run build;\nnpm run start;\n# （已修复）因为我不太懂 webpack ，不太会配置，这个项目修改代码后实时生效还有问题。。求 pr\n```\n\n## 特性\n\n* 可视化编辑，同时实时生成结果代码，还可以单独预览\n* 丰富的数据编辑能力，可以编辑组件的二维属性\n* 组件可嵌套\n* 自适应布局\n* 除了 antd 的组件，还有一些原生 html 元素可使用\n\n## 原理解析\n\n### 1.如何实现实时编辑\n\n第一步，抽象整个可视化工作台的数据表达，无非是放了一个什么组件在什么位置，这个组件的父组件是谁，这个组件的属性是什么\n\n如下图：\n\n![](https://img.souche.com/c1c1605094e3a8bcaa1118ce00f8fcc3.png)\n\n一个组件的基础定义：\n\n```\ntitle 组件名\ntype  组件类型（组件真实类名）\ncan_place 组件是否可以包含子组件\nchildren 组件的子组件，数组类型\nis_native 组件是否是原生 html 元素\nconfig  组件可用的配置信息\nprops 组件配置信息的值，包含样式和属性等\n```\n\n根据这些值，我们就可以渲染和编辑组件了，编辑组件后，\n会有一个大的表示画布当前状态的数据结构存储到 state 中，\n另外，有一个方法可以根据这个数据结构渲染出整个画布，\n所以每次有任何编辑动作之后，我们会触发 forceUpdate，重新绘制画布\n也就是说，添加组件，编辑属性，和画布的显示是分离的，中间由一个大的数据结构连接（就是图片里这个）\n\n### 2.如何反向生成 react 代码\n\n根据上图中的数据结构，反向遍历，可轻易的生成 React 代码\n\n### 3.如何定义组件可用的配置\n\n在 pages/coms/xxx 里面定义一个组件的可用配置，然后即可在主界面中选择组件后在右侧\"属性编辑区\"中编辑属性。\n\n来看看我们可以定义哪些属性吧\n\n以一个按钮为例\n\n```javascript\nexport default {\n    \"type\": \"Button\",\n    \"title\": \"按钮\",\n    \"props\": {\n        type: 'primary',  // 定义可以配置的 props\n        content: '按钮一只', // 定义可以配置的 props\n        style: {  // 定义可以配置的样式\n            margin: \"0px 10px 0px 0px\"\n        }\n    },\n    config: {   // 可用的配置项\n        type: {   // type 这个配置的描述\n            text: \"主题\",  // 配置的标题\n            enum: [       // 可用的枚举，配置时会显示成下拉框\n                'primary',\n                'default',\n                'dashed',\n                'danger'\n            ]\n        },\n        icon: {\n            text: \"图标\",\n        },\n        content: {\n            text: '文案',\n        },\n        style: {  // 可用的样式配置\n            width: {  \n                text: \"宽度\",\n            },\n            margin: {\n                text: \"外边距\",\n                type: \"4-value\" // 一种定制类型，会渲染成 4 个输入框\n            }\n        }\n    },\n}\n```\n\n这是最基本的配置项，只能适用于最基本的组件，但是遇到像 table 或者 Breadcrumb 这种组件就不行了\n\n### 4.高级配置（二维数据）\n\n以 Breadcrumb 为例，他有一个数据源的属性，数据源是一个数组+对象的混合表达，这种组件不少，应该如何定义呢\n\n```javascript\nexport default {\n  \"type\":\"Breadcrumb\",\n  \"title\":\"面包屑\",\n  props:{\n      routes:[  // 这里是数据源的属性，和默认值\n      {\n          breadcrumbName:\"一级目录\",\n          path:\"#\",\n        key:1\n      },\n      {\n          breadcrumbName:\"二级目录\",\n          path:\"#\",\n        key:2\n      }\n    ]\n  },\n  config:{\n      routes:{   // 如何表达这个属性应该如何配置\n          text:\"项目配置\",\n          enumobject:[{  // 一种新的类型，enumobject，对象枚举\n            key:1,  \n            dataIndex:\"breadcrumbName\",  // 枚举的对象的第一个 key 是什么\n            title:\"显示文本\",    // 枚举的对象的第一个 key 的文本描述\n            type:'String',      // 枚举的对象的第一个 key 的类型\n          },{\n            key:2,\n            dataIndex:\"path\",    // 枚举的对象的第二个 key 是什么\n            title:\"链接\",        // 枚举的对象的第二个 key 的文本描述\n            type:'String',      //枚举的对象的第二个 key 的类型\n          }]\n    }\n  }\n}\n```\n\n最终的属性编辑区：\n\n![](https://img.souche.com/397b944593c4506a2085955fffee09d7.png)\n\n即可边界对象枚举属性\n\n### 5.更复杂的组件\n\n大家会发现，table 这种组件和上述的组件都不太一样，首先看纯数据表格\n\n![](https://img.souche.com/6c17078da4321e4e2738941718fe17d8.png)\n\n其实这里还好，只是 table 有两个属性，一个表达列的数据，一个表达行的数据，我们只需要两个对象枚举即可\n\n```javascript\n{\n    config:{\n        columns:{\n          text:\"列管理\",\n          enumobject:[\n            {\n              title: '列文本',\n              dataIndex: 'title',\n              type:\"String\"\n            },\n            {\n              title: '列key',\n              dataIndex: 'dataIndex',\n              type:\"String\"\n            }\n          ]\n        },\n        dataSource:{\n          text:\"值管理\",\n          enumobject:{\n            type:'relative_props_object',\n            target:'columns'\n          }\n        }\n    }\n}\n```\n\n这里实现了一个 关联，可以把 dataSource 的配置和 columns 关联起来 (relative_props_object)\n\n### 6.更更复杂的表格\n\n如果只是数据，还好，\n但是 table 里可以还可以嵌套其他组件，每行每列，想想是不是头疼。。如下图\n\n![](https://img.souche.com/d201501fd416b798678a6d9f4ca44b6e.png)\n\ntable 的每个 column 其实可以定义内部显示的元素，我们在默认值里就给他塞一个空的 layout 进去，\n这样之后这里就会变成一个可以放置其他子元素的坑，具体不展开了，这里的逻辑比较复杂。\n\n\n","funding_links":[],"categories":["精选 LessCode 项目"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmall-tou%2Fantd-visual-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmall-tou%2Fantd-visual-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmall-tou%2Fantd-visual-editor/lists"}