Adminlab: 基于 Vue3.x 的 Web 管理后台高效开发工具,已适配 Quasar 与 ElementPlus

1,571 阅读2分钟

WX20220215-113851.png

Adminlab

  • Adminlab 是什么?

对管理后台一些常见的业务逻辑、交互做了一些高度封装,避免千篇一律的重复编码工作,提高维护效率,打磨交互细节。

相关组件支持多种 UI 框架。

  • 支持哪些 UI 框架?

目前内置了对 QuasarElementPlus 的支持,以后会支持更多的框架。

未来将支持开发者自行任意适配任何基于 Vue3.X 版本的 UI 框架或自定义组件,请见 适配说明

  • 具体能为大家提供什么样的帮助?

目前主要是围绕表格提供助力,通过 JSON 配置自动渲染表单与表格 (查看演示)

表格

  • 接管 loading 态

  • 加载失败提示以及重试功能

  • 保证多次触发请求时数据的正确性

  • 多种类型定义,比如时间戳格式化、链接、进度、状态映射、图片、头像等

  • 支持组合展示,比如用户信息(头像 + 昵称)

  • 内置编辑操作,打开编辑弹层并自动填充对应行的表单数据

  • 内置删除操作,弹出询问框,执行删除动作

  • 内置复制操作,打开新建弹层并自动填充对应行的表单数据

  • 快速生成操作按钮

chrome-capture-2022-1-15 (1).gif

分页

  • 接管分页事件(页码与分页大小改变),触发后自动刷新页面数据

  • 在删除操作成功后,根据页码与数据状态自动调整当前页码

表单

  • 根据配置自动转化为对应的组件(输入框、下拉框、日期选择框等等)

  • 快速配置表单联动以及动态表单

  • 基于 Grid 布局,可快速适配移动端,以及轻松自定义复杂布局

表单弹层

用于新增数据、编辑数据

  • 接管 loading 态

  • 自动生成表单

chrome-capture-2022-1-15.gif

搜索

  • 自动生成表单

  • 内容修改后,提交数据触发获取数据操作

  • 可自动对提交的数据处理:布尔转数字(为适应GET请求)、字符串首尾去空格

chrome-capture-2022-1-15 (2).gif

工具条

  • 内置新增按钮,用于打开新增弹层

  • 内置刷新按钮,用于当前页的数据

  • 内置重置按钮,用于重置搜索框的数据

chrome-capture-2022-1-15 (3).gif

仓库地址

欢迎大家多提意见以及建议,让这个刚刚起步的工具得以更好的为大家提高开发体验。