{"id":13495286,"url":"https://github.com/xiaoai7904/web_designer","last_synced_at":"2025-03-28T16:32:19.150Z","repository":{"id":36505517,"uuid":"177559735","full_name":"xiaoai7904/web_designer","owner":"xiaoai7904","description":"网页设计器图形化工具,通过拖拽组件进行页面排版和生成页面代码","archived":false,"fork":false,"pushed_at":"2023-10-13T10:15:36.000Z","size":30548,"stargazers_count":615,"open_issues_count":40,"forks_count":169,"subscribers_count":33,"default_branch":"master","last_synced_at":"2024-08-01T19:54:34.524Z","etag":null,"topics":["designer","drag-and-drop","element-ui","js","vue","vue-cli","vue-components","vue-router"],"latest_commit_sha":null,"homepage":"https://xiaoai7904.github.io/web_designer","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xiaoai7904.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-03-25T10:00:01.000Z","updated_at":"2024-07-30T01:44:53.000Z","dependencies_parsed_at":"2024-01-15T18:45:26.168Z","dependency_job_id":"3c5ab5a5-b23a-4d40-892a-20a0bd5e50a7","html_url":"https://github.com/xiaoai7904/web_designer","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoai7904%2Fweb_designer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoai7904%2Fweb_designer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoai7904%2Fweb_designer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoai7904%2Fweb_designer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xiaoai7904","download_url":"https://codeload.github.com/xiaoai7904/web_designer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222395797,"owners_count":16977625,"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":["designer","drag-and-drop","element-ui","js","vue","vue-cli","vue-components","vue-router"],"created_at":"2024-07-31T19:01:33.194Z","updated_at":"2024-10-31T10:30:57.543Z","avatar_url":"https://github.com/xiaoai7904.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","![Open Source Love svg3](https://badges.frapsoft.com/os/v3/open-source.svg?v=103)"],"sub_categories":[],"readme":"# Web Designer\n\n[在线预览](https://xiaoai7904.github.io/web_designer)\n\n### 项目部分截图\n\n- 页面设计区\n  ![](src/assets/2.png)\n- 页面预览\n  ![](src/assets/3.png)\n- 图表样式设置可视化配置\n  ![](src/assets/4.png)\n- 图表样式设置代码编辑\n  ![](src/assets/5.png)\n- 组件事件配置\n  ![](src/assets/6.png)\n- 组件联动事件配置\n  ![](src/assets/7.png)\n\n### 简介:\n\n- 项目使用了`Vue`进行开发\n- 网页设计器图形化工具,目前内置`ElementUi`组件库\n- 一键生成网页代码,支持进行二次开发\n- 通过拖拽左侧组件图标,放置中间画布区,进行页面排版,设计区右侧面板可以对组件属性进行设置\n- 点击右侧顶部保存按钮(数据保存在本地浏览器`localStorage`)可以进行数据保存\n- 点击右侧顶部预览按钮,可以对页面布局进行预览\n- 点击右侧顶部发布按钮,会调用设计器后台服务进行页面生成和代码生成,生成完成之后会在项目根目录生成`runtime/vue_cli_3.x-master`文件夹,里面的代码可以进行二次开发(基于 vue cli 3.x 版本)\n- 默认发布完成之后,会打开命令行工具进行项目初始化(`npm install`)和打开项目(`npm run serve`)\n\n### 项目运行\n\n```\n// 启用设计器\nnpm install\n// 启用设计器后台服务(至少node 8.x),用于发布模版和生成模版代码\ncd server/\nnpm install\nnpm run dev\n```\n\n### 项目目录结构\n\n```bash\n│\n├── README.md                           \u003c=  项目介绍\n├── src                                 \u003c=  项目主目录\n│   ├── assets                          \u003c=  静态资源\n│   ├── components                      \u003c=  公共组件\n│   │   ├── codeEditor                  \u003c=  代码编辑组件\n│   │   ├── componentsList              \u003c=  左侧组件列表组件\n│   │   ├── designerContent             \u003c=  中间设计区\n│   │   ├── draggableResizable          \u003c=  组件拖拽组件\n│   │   ├── itemList                    \u003c=  组件属性配置组件(参考下拉菜单,单选框,复现框属性配置)\n│   │   ├── pageAutoView                \u003c=  页面自适应组件\n│   │   ├── pageCanvas                  \u003c=  中间设计区\n│   │   ├── pageDialogView              \u003c=  系统弹窗代理组件\n│   │   ├── pageFormView                \u003c=  系统表单组合组件\n│   │   ├── pageIconsView               \u003c=  系统icon图标组件\n│   │   ├── pageSwitch                  \u003c=  系统开关组件\n│   │   ├── styleSetting                \u003c=  图表样式设置组件\n│   │   ├── index.js                    \u003c=  公共组件入口文件\n│   ├── directive                       \u003c=  系统内置指令\n│   │   ├── dragDialog                  \u003c=  拖拽弹窗\n│   │   ├── index.js                    \u003c=  指令入口文件\n│   ├── modules                         \u003c=  系统模块\n│   │   ├── configuration               \u003c=  组件配置\n│   │   ├── echartBase                  \u003c=  图表基类\n│   │   ├── http                        \u003c=  请求模块\n│   │   ├── observer                    \u003c=  事件监听模块\n│   │   ├── page                        \u003c=  页面基类\n│   │   ├── pageEventManage             \u003c=  页面事件处理模块\n│   │   ├── plugins                     \u003c=  组件基类\n│   │   ├── systemLoader                \u003c=  系统加载器\n│   │   ├── utils                       \u003c=  工具类\n│   │   ├── vuePropertyDecorator        \u003c=  vue属性装饰器\n│   ├── plguins                         \u003c=  系统内置组件\n│   ├── rumtimeComponents               \u003c=  运行态组件\n│   ├── styles                          \u003c=  系统样式\n│   ├── views                           \u003c=  页面\n│   │   ├── designerPage                \u003c=  设计器页面\n│   │   ├── preview                     \u003c=  预览页面\n│   ├── App.vue                         \u003c=  页面组件文件\n│   ├── main.js                         \u003c=  系统主入口文件\n│   ├── router.js                       \u003c=  路由配置文件\n│   ├── store.js                        \u003c=  数据管理\n├── server                              \u003c=  服务器主目录(详细参考 https://eggjs.org/zh-cn/)\n├── publilc                             \u003c=  项目静态文件目录\n│   ├── index.html                      \u003c=  项目主页面入口\n│   ├── favicon.ico                     \u003c=  浏览器页签logo\n├── vue.config.js                       \u003c=  vue打包,启动等配置(详细参数 https://cli.vuejs.org/zh/config/)\n├── package.js                          \u003c=  项目跟踪依赖关系和元数据配置文件\n│\n```\n\n### 文档\n\n- [事件设置功能手册](./functionManual/eventSetting.md)\n- [代码发布功能](./functionManual/release.md)\n\n### 后期版本规划\n\n- H5 页面生成器\n- 项目优化\n- ...\n\n### 更新日志\n\n- 2019-03-25 项目初始化\n- 2019-04-20 新增拖拽组件进行排版,修改页面,组件属性\n- 2019-04-23 新增排版辅助线和预览功能\n- 2019-04-24 新增 inputNumber,radio 组件\n- 2019-05-15 新增 icon 图标选择器,画布区支持复制(Ctrl + c),粘贴(Ctrl + v)\n- 2019-11-20 新增按钮,链接,日期,时间,评分,警告,面包屑,日历,复选框,折叠,颜色选择器,进度条,下拉菜单,滑块,Tag\n- 2019-11-28 新增表格,树形控件,菜单组件和 json 编辑器(基于 monaco-editor)\n- 2019-12-14 新增一键生成页面和代码(基于`Vue cli 3.x`)\n- 2020-03-11 新增容器组件和图表组件,图表组件样式支持可视化配置\n- 2020-07-26 新增组件事件配置和联动事件配置\n- 2020-10-13 运行态支持事件配置功能","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaoai7904%2Fweb_designer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxiaoai7904%2Fweb_designer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaoai7904%2Fweb_designer/lists"}