{"id":21529063,"url":"https://github.com/newbeea/page-builder","last_synced_at":"2025-04-09T23:43:18.817Z","repository":{"id":43941902,"uuid":"383997892","full_name":"newbeea/page-builder","owner":"newbeea","description":"同时为运营人员和开发者服务的拖拽式lowcode页面生成器，使用vue3+vite+typescript搭建，支持html、vue代码生产，支持第三方组件、第三方控制面板","archived":false,"fork":false,"pushed_at":"2021-10-09T08:24:01.000Z","size":26018,"stargazers_count":48,"open_issues_count":3,"forks_count":14,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-24T01:35:36.236Z","etag":null,"topics":["draggable","draggable-layout","dsl","json-schema","lowcode","typescript","vite","vue3"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/newbeea.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":null,"support":null}},"created_at":"2021-07-08T04:12:43.000Z","updated_at":"2025-03-05T01:52:41.000Z","dependencies_parsed_at":"2022-09-13T04:40:18.064Z","dependency_job_id":null,"html_url":"https://github.com/newbeea/page-builder","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newbeea%2Fpage-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newbeea%2Fpage-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newbeea%2Fpage-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newbeea%2Fpage-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/newbeea","download_url":"https://codeload.github.com/newbeea/page-builder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248131467,"owners_count":21052819,"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":["draggable","draggable-layout","dsl","json-schema","lowcode","typescript","vite","vue3"],"created_at":"2024-11-24T01:55:42.683Z","updated_at":"2025-04-09T23:43:18.797Z","avatar_url":"https://github.com/newbeea.png","language":"Vue","readme":"\n# Page Builder\n\n## 简介\n同时为运营人员和开发者服务的拖拽式页面生成器\n#### 关键字\n\n页面编辑器、拖拽布局、lowcode、DSL、imgcook、vue3、vite\n## DEMO\n\u003chttps://page-builder.philxu.cn/\u003e (测试版本，不定期重置数据)\n### 主要功能\n- 拖拽式布局\n- 第三方组件市场，免编译安装到系统使用\n- 快捷样式设置\n- 第三方样式设置市场，可以使用或自研符合自己需求的快捷配置面板\n- 获取html，在cms后台编辑器或营销邮件系统中直接使用\n- 生成vue等语言对应vue、css代码，支持props，加快开发效率\n- 兼容imgcook schema，ai生成的json可兼容使用\n- 其他\n\n### 主要技术栈\n- vue3 + vite\n- typscript\n- midwayjs\n\n### 其他同类产品\n阿里的imgcook，侧重于AI识别，生成schemaPage Builder也参考了很多imgcook的交互，Page Builder侧重于页面构建，运营人员可以直接使用生成页面，侧重于活动页，免编译即可使用的第三方组件\n\n\n## 功能演示\n\n### 拖拽布局\n- 页面内拖拽（是否可drop，或左右是否可drop可以配置），有对应放置位置的辅助线\n- 从组件库拖入页面，组件库支持分组、预览、第三方组件、模板\n- 树状layout展示与拖拽，显示隐藏，删除\n\n![picture 2](./images/2abf313099042cd8e16168cc4e18398338945218427d543066ed002f00a3fcfd.gif)  \n\n### 预览模式\n- 编辑模式、预览模式切换\n- 支持pc、移动预览\n- 支持响应式预览（@media）\n\n![picture 11](./images/dd28a1f08c1e3e67eaa16ec0afa1480ee173ff6f3845ffd5af86680ddb29ef80.gif)  \n\n\n### 样式面板\n#### 快捷配置\n- 常用快捷布局设置\n- flex相关设置\n- width/height/margin/padding 快捷设置\n\n![picture 6](./images/7c251dfd2e4676e90b99a04ad5873f51440999fec0bfbd2b303f501675a5eb94.gif)  \n\n#### 字体设置\n- 设置内置字体\n- 上传新字体\n- 设置颜色、大小、weight等\n- 设置加粗、斜体、下划线等\n- 设置对齐方式\n\n![picture 7](./images/103792cd7c01a12788c33b8cc4e37b6f8ea671e9de576677a03cc228560b51f9.gif)  \n\n#### 编辑style json\n- 暂未支持面板修改的属性可以通过代码编辑器直接编辑style\n- 实时更新效果\n\n![picture 8](./images/56175abd0c43a3da9f8c2099cf6bd03e21341f5cfaba09aa31359a0c54829aee.gif)  \n\n#### 编辑css\n- 对于无法靠style json实现的样式，比如响应式@media query可以通过css编辑器添加\n- 实时更新效果\n\n![picture 9](./images/e899e24e086e4aa8b05767c445a1797727c8ca254fb8320d9dcd5201379159f1.gif)  \n\n#### 第三方面板\n- 对于内部需求，可以开发专属配置面板，比如一键设置button样式\n- 发布面板供内部或公开安装使用\n\n如下为第三方颜色配置面板\n![picture 10](./images/65ba1c64e8fef3df31ed8261ed040c9e9c5d26c28b2565e542e0cc19ba878476.gif)  \n\n### 属性设置\n- 设置组件的props\n- 支持输入框、Switch开关、下拉选择、图片上传（api地址、数据路径可配置）等属性设置方式\n\n![picture 12](./images/c00a542f6bb8144a370746ac4a7ba4b95671481aa18a49d93c202a92030195d8.gif)  \n\n\n### 组件系统\n\n#### 第三方组件\n- 发布组件（npm符合要求的组件或在组件模板基础开发的组件）\n- 使用组件\n- 账户系统完善后支持安装后使用，发布组件提供私有选项\n\n![picture 3](./images/e9045188a96fff090a0aa760da9929f383b4053248f645a4a8b2701f15dfe740.gif)  \n\n#### 模板组件\n- 可以将任意结构保存成模板组件，在组件库中使用\n- 保留了所有结构，可以继续调整\n\n![picture 4](./images/29007c320c2f6356336fe77e6f086c314e45a6743f5d7145a8206f8b8d605b4e.gif)  \n\n#### 导出组件\n- 选择任意结构导出组件代码\n- 勾选属性选择组件支持的props，支持重命名\n- 生成指定代码（目前支持vue2代码及对应css文件生成），可上传至npm或项目中直接使用\n\n![picture 13](./images/b24ffc7cb7ac2c2b85ed677b8c7922ce3b89c51f9f2a7d57b46fb07e999240c5.gif)  \n\n\n#### 包装组件\n- 支持包装组件库\n- 选择性暴露组件配置\n\n如下包装了element-ui的button，后续添加更多示例\n![picture 5](./images/e43154a4ba0d0637406c40c77411f71ea17054975ddaf9db99577223decf7236.gif)  \n\n### 其他\n#### schema json粘贴、编辑\n- 支持imgcook生成的schema直接粘贴生成页面\n\n![picture 14](./images/e48a3d199d362ba791fa58af06fb1e03bc0c2398ee61016d93bc63a8d7ded5e8.gif)  \n#### html 代码导出\n- 直接生成html代码，粘贴到其他系统（cms、email等）的html编辑器中\n\n## TODO\n- 账户系统\n- 更多组件\n- 更多内置面板\n- 发布组件到npm\n- undo、redo\n- 复制粘贴","funding_links":[],"categories":["优秀组件"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnewbeea%2Fpage-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnewbeea%2Fpage-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnewbeea%2Fpage-builder/lists"}