diff --git a/README.md b/README.md index 22ac8e9acc7e12c81421851d8bc5d881c7a0ba02..364910f6f9c4a325bae58e7d1947dbe93535160e 100644 --- a/README.md +++ b/README.md @@ -1,130 +1,74 @@ -# AK-Design 可视化低代码快速开发平台 - -AK-Design 是一个纯前端的`拖拽式`、`可视化`、`低代码`数据可视化设计器开发平台，主包括表单设计、列表页设计、流程设计、数据可视化大屏设计、数据统计设计 - -使用基于 Vue 3.x 的桌面端组件库 Elemnet-Plus ，使用广泛，扩展方便 - -通过可视化的操作，可轻松快速完成表单设计、列表页设计、流程管理设计、数据可视化大屏设计、数据统计设计等页面的创建 - -提供功能强大的各类组件，可适用在各种复杂的场景中 - -**代码简洁、大众化写法、完整的注释、轻量易上手** - -用于学习研究，欢迎交流，微信：**337547038** - -如果项目对你有所帮助，请点赞+关注，以防迷路 - -如果你对该项目感兴趣，欢迎加入项目建设中来 - -如果你有任何建议，请联系我或在评论区留言 - -### 接受需求功能定制(微信:337547038) - -### 演示地址 - -https://337547038.github.io/vue-form-design/ - -### 后端地址 - -https://github.com/337547038/ak-design-manage - -### 微信交流群 - -群人数超出限制无法扫码加入，需入群请加微信 *337547038* - - -## 表单设计 -一种可视化拖拽式表单设计编辑器，能够以图形化方式生成表单。通过它，可以以无需编写代码的方式来构建表单，并且可以为表单添加各种校验规则。 -设计器具有易用性，且能够为应用程序快速生成美观的表单，提高开发效率。 - -设计器的主要功能： - -- 提供功能强大丰富的各种表单组件 - -- 可以使用拖放方式添加表单元素 - -- 可以使用鼠标进行表单元素排序 - -- 可以设计器预设的校验规则 - -- 可以生成完整的表单视图 - -- 可以生成表单数据 - -- 可以根据表单数据自动生成UI - -- 可以根据表单模板快速生成表单 - -- 可以支持复杂交互控制 - -- 可以支持开发自定义组件 - -- 支持接口数据处理 - -... - -## 列表设计 +# AK-Design 可视化低代码快速开发平台 -列表设计器是一个可以帮助快速构建数据展示界面的工具，可以更加轻松地实现列表构建，提高我们的工作效率。简单的拖拽、调整列顺序、编辑列、设置样式等，生成自己想要的数据表格。 -还可从设计的表单里获取接口数据。 +## 项目简介 -列表设计器提供了丰富的配置项，你可以进行列的拖拽、设置列名、设置列宽、设置列样式等操作。同时，它还提供了丰富的配置项，充足的自定义能力，能够满足我们大部分的需求。 +AK-Design 是一个可视化低代码开发平台，支持通过拖拽快速构建表单、列表、流程、数据可视化大屏、数据统计等应用。平台具有高度的灵活性和扩展性，用户可以基于现有组件快速开发，也可以开发自定义组件来满足特定需求。 -## 流程设计 +--- -基于Vue3开发的简单审批流程设计器，旨在为用户提供一种高效、灵活且易用简单的审批流程构建解决方案。 +## 功能特性 -- 基于Vue3框架：利用Vue3的响应式原理和组件化开发模式，提升产品的性能和可维护性。 +- **可视化表单设计**：拖拽组件生成表单，支持校验规则、JSON 数据生成、UI 自动生成等。 +- **可视化列表设计**：通过拖拽和列调整，快速构建数据展示列表，支持从表单设计中获取接口数据。 +- **流程设计**：支持多人协作审批、自定义审批流程，适用于注册、申请等场景。 +- **数据可视化大屏设计**：提供图表、地图、轮播、背景边框等组件，支持图层管理、组件定位、样式调整等。 +- **数据统计设计**：支持接口数据与静态数据，实现高效的数据统计分析。 -- 灵活性：用户可以根据自身实际情况，自定义各类工作流程，包括产品设计、研发流程、人事流程等等。ak-design流程设计支持多条件设置， - 可以根据不同的条件分支执行不同的审批路径，确保流程的灵活性和适应性。 +--- -- 个性化定制：ak-design流程系统的设计流程管理功能允许用户根据自己的需求对设计流程进行个性化定制，无需依赖开发人员即可完成整个设计流程的规划和管理。 +## 技术栈 -- 拖拽式表单设计：ak-design流程的审批表单设计采用了“所见即所得”的拖拽式表单设计器，用户可以轻松创建和编辑表单，提高表单设计的效率和准确性。 +- Vue 3.5.x +- Vite 6.2.x +- Element Plus 2.9.x +- Node.js 20.18.x +- pnpm 10.8.x -- 交互体验：ak-design的流程设计注重用户体验，通过简洁明了的界面设计和流畅的操作流程，使用户能够快速上手并高效使用。 +--- -- 审批节点设置：管理员可以针对不同部门、不同岗位的员工设定不同的审批流程，并设置审批节点、抄送人员、审批条件等，确保流程能够顺利进行。 +## 启动项目 -- 流程监控：用户可以通过ak-design系统实时监控流程的执行情况，包括流程的当前状态、处理人员、处理时间等。 +### 克隆项目 -- 扩展性：系统支持定制化开发，用户可以根据自己的需求对系统进行扩展和定制，以满足企业不断变化的业务需求。 +```bash +git clone https://github.com/337547038/vue-form-design.git +``` -- 便捷性：ak-design流程设计注重便捷性，通过简化操作流程和提供智能提示等功能，使用户能够更快速地完成审批任务。 +### 安装依赖 -- 使用场景： +```bash +pnpm install +``` -- 企业内部审批：企业各部门需要进行各种申请和审批，如报销、请假、采购等，通过该流程可以快速搭建审批流程。 +### 运行项目 -- 团队协作审批：团队项目中进行任务分配、进度审核等需要多人协作的审批流程，该流程可以帮助团队高效协作。 +```bash +pnpm dev +``` -- 自定义审批：任何需要自定义审批的场景，如网站注册、会员申请等，都可以使用该流程进行快速搭建。 +### 使用 JSON 模拟数据 -- ... +默认在 GitHub 示例和本地访问时使用 JSON 模拟数据。 -## 数据可视化大屏设计 +### 使用后端接口数据 -提供一种简单易用的拖拽式数据可视化大屏设计方案。编辑器提供了丰富的组件库和多种样式配置选项，可以帮助用户快速搭建并定制属于自己的数据可视化大屏。 +访问后端库：[ak-design-manage](https://github.com/337547038/ak-design-manage) -包括图表组件、表格组件、进度条组件、地图组件、轮播组件、背景边框组件和常用辅助工具等，用户可以根据自己的需求选择和拖拽组件到画布中。 +### 打包项目 -- 编辑器页面基本功能，包括编辑、预览、导出、保存、生成json脚本 -- 图层功能：显示、隐藏、复制、锁定 -- 组件功能：缩放、旋转、拖动、复制、组合、拆分、对齐方式、删除、位置定位 -- 支持用户自定义组件 -- 支持接口数据和静态模拟数据 -- 支持键盘调整定位 +```bash +pnpm build +``` -## 数据统计设计 +--- -### 目录结构 +## 目录结构 ```text public - ├─mock 模拟数据 + └─mock 模拟数据 src ├─api 数据请求接口 ├─docs 使用说明文档 @@ -136,91 +80,40 @@ src ├─datasource 数据源设计 ├─flow 流程设计 └─form 表单设计 - ├─system 系统框架基本页面，导出vue文件示例 + ├─system 系统框架基本页面，导出 Vue 文件示例 └─task 流程任务 ``` -### 启动项目 - -```Bash - -# 克隆项目 -git clone https://github.com/337547038/vue-form-design.git - -# 安装依赖 -pnpm install - -# 运行项目 -pnpm dev - -# 使用json模拟数据 - -默认下github示例和localhost访问时使用json模拟数据。 - - -# 使用后端接口数据 - -可访问后端库https://github.com/337547038/ak-design-manage - -# 打包项目 -pnpm build - -``` - -### 开发环境 -| 名称 | 版本 | -|--------------|---------| -| node | 20.18.x | -| pnpm | 10.8.x | -| vite | 6.2.x | -| vue | 3.5.x | -| element-plus | 2.9.x | - -### 相关教程 - -[如何在本地调演示效果](https://www.bilibili.com/video/BV1xCYeeEEMS/?vd_source=bcdd3240479f23e6c5bf3c4159785b92) - -#### 表单相关 - -[radio checkbox select等下拉选项数据配置](https://www.bilibili.com/video/BV1f5LgzmEfH/?vd_source=bcdd3240479f23e6c5bf3c4159785b92) - -[创建数据源](https://www.bilibili.com/video/BV1M65KznExb/?vd_source=bcdd3240479f23e6c5bf3c4159785b92) - -[表单设计器](https://www.bilibili.com/video/BV1sS5Kz5EY9/?vd_source=bcdd3240479f23e6c5bf3c4159785b92) - -[列表设计器](https://www.bilibili.com/video/BV1Pm5Kz1ECQ/?vd_source=bcdd3240479f23e6c5bf3c4159785b92) - - -#### 流程相关 - -[创建流程-流程管理](https://www.bilibili.com/video/BV1usLBzyE5E/?vd_source=bcdd3240479f23e6c5bf3c4159785b92) - -[流程审批-流程管理](https://www.bilibili.com/video/BV18sLBzyEFp/?vd_source=bcdd3240479f23e6c5bf3c4159785b92) - -#### 可视化大屏相关 - -[数据大屏-大屏设计](https://www.bilibili.com/video/BV1hR7ZzkE4Z/?vd_source=bcdd3240479f23e6c5bf3c4159785b92) +--- -[数据大屏-大屏设计组件数据获取](https://www.bilibili.com/video/BV1em7Zz7Ed1//?vd_source=bcdd3240479f23e6c5bf3c4159785b92) +## 演示地址 +[https://337547038.github.io/vue-form-design/](https://337547038.github.io/vue-form-design/) -## 开源不易 感谢赞赏 +--- -感谢您对ak-design开源项目的关注，如果该项目对您有帮助，并愿意支持其持续发展，欢迎扫码赞助。 +## 后端地址 - +[https://github.com/337547038/ak-design-manage](https://github.com/337547038/ak-design-manage) +--- +## 开源不易，感谢支持 -## `Star` +- 如果项目对您有所帮助，请点赞+关注，以防迷路。 +- 欢迎加入项目建设中来。 +- 如有任何建议或需求功能定制，请联系微信：337547038。 -非常感谢留下星星的好心人，感谢您的支持 :heart: +--- -[![Stargazers for vue-form-design](https://bytecrank.com/nastyox/reporoster/php/stargazersSVG.php?user=337547038&repo=vue-form-design)](https://github.com/337547038/vue-form-design/stargazers) +## 相关教程 +- 表单设计教程 +- 流程设计教程 +- 数据可视化大屏教程 -## `Fork` +--- -瞧，那些 `小哥哥` 、`小姐姐` 认真 `学习` 的样子真滴是 `哎呦不错哦` :heart: +## 微信交流群 -[![Forkers repo roster for vue-form-design](https://reporoster.com/forks/337547038/vue-form-design)](https://github.com/337547038/vue-form-design/network/members) +群人数超出限制无法扫码加入，请添加微信：**337547038** 进群交流。 \ No newline at end of file