Grow Admin 中后台框架简介

953 阅读4分钟

简介

Grow Admin是开源的中后台模版,使用目前较新的主流技术栈开发,是一款开箱即用的中台前端/设计解决方案,具有轻松构建规范且美观的系统,丰富的布局模式,具有高可配性,满足您的各类布局需求。

主要技术栈

特性

  • 最新技术栈:使用 Vue3/vite2 等前端前沿技术开发
  • TypeScript: 应用程序级 JavaScript 的语言
  • 主题:可配置的主题
  • 国际化:内置完善的国际化方案
  • Mock 数据 内置 Mock 数据方案
  • 权限 内置完善的动态路由权限生成方案
  • 组件 二次封装了多个常用的组件

页面功能

  • 菜单模式(左侧/顶部)
  • 动态路由菜单(前端路由权限控制)
  • 主题(深色/浅色)基于taillwindCSSelemtn-plus的特性,黑暗主题/自定义组件
  • 支持多页签,持久化,拖拽,关闭,固定
  • 面包屑,图标,子菜单下拉联动展示,菜单搜索等功能
  • 包括工作台,数据分析数据报表页面(可拖动,控制组件大小)
  • 部分echarts组件
  • 封装了全新的查询面板和控制表头控制组件
  • 随机组件名称(避免相同页面打开,且使用的相同组件,刷新受影响)
  • 水印

功能内容

  1. 总览
    1. 主题变更
    2. 多语言
    3. 项目文档(待开发,文档与项目本身剥离)
  2. 用户登录
    1. 账号密码登录(待完善,完善密码规则)
    2. 手机号码登录
    3. 扫码登录(需要完善)
    4. 第三方登录(暂不支持,后续通过配置方式支持)
    5. 忘记密码
  3. 系统页面
    1. 动态路由注册
    2. 前端路由权限(待完善)
    3. 菜单搜索
    4. 消息管理(待完善,对接socket)
    5. 系统帮助(使用MD文档可以对每个开发模块进行介绍)
    6. 用户资料
    7. 动态菜单
  4. 通用组件
    1. 自定义表头
    2. 自定义查询条件
    3. Dialog(,支持全屏,可拖动,限制在屏幕内)
  5. 系统模块
    1. 工作台
    2. Dashboard
      1. 分析页面
      2. 数据报表
    3. 列表页面
      1. 普通列表
      2. 虚拟列表
      3. 卡片列表(支持无限加载封装方法支持)
    4. 功能
      1. 引导
      2. 标签操作(通过Hooks支持)
      3. 下载Excel(待完善,只完成本地导出)
      4. 消息示例
      5. 打印
      6. 图片预览(需要支持放大,缩小,旋转,上一张,下一张等)
      7. 全屏(Hooks实现)
      8. 导入Excel
      9. Socket连接(,封装Class方法)
    5. 页面
      1. 表单页
        1. 基础表单(表单验证)
        2. 分步表单
      2. 详情(封装统一组件用于展示内容,类似ElForm)
      3. 个人详情(支持编辑)
      4. 动态表单
    6. 组件
      1. 图片裁剪
      2. 数字动画
      3. 编辑器
        1. JSON编辑器
        2. Markdown编辑器
        3. 富文本(支持预览)
        4. 代码编辑器(支持预览)
      4. 二维码组件
      5. 密码强度组件(页面未添加,组件开发完成)
      6. 分屏组件(可以拖动)
      7. 拖拽
      8. 拖拽排序
    7. 系统管理
      1. 账号管理(开发中...)
      2. 角色管理
      3. 菜单管理
      4. 部门管理
      5. 人员管理
    8. 自动化工具
      1. 页面设计器
      2. 流程引擎
      3. 规则引擎
      4. 配置表格(可视化配置表头)
      5. 配置Echarts(生成JSON配置)
      6. 小程序(通过表格转化成Echarts)

内置组件

  1. PageLayout - 表格页面开发基础布局
  2. 查询面板 - 可自定义添加查询条件,查询条件可通过json进行配置
  3. 控制表头 - 通过json条件控制表头显示隐藏
  4. 按钮组 - 可通过json配置配置对应的按钮操作

image.png

image.png

image.png

image.png

预览

Grow Admin

项目地址

GitHub: Grow Admin

安装使用

  • 拉取项目代码
git clone https://github.com/ZhQuella/grow_up_admin.git
  • 安装依赖
cd grow_up_admin

yarn
  • 运行
yarn dev
  • 打包
yarn build

未来构想

  1. 添加菜单管理
  2. 添加角色管理
  3. 添加表单设计器
  4. 添加流程引擎
  5. 按钮权限支持
  6. Excel导出(支持多级表头)
  7. 在线用户聊天(临时)

交流

Grow-Admin开源免费的项目,在帮助开发者更方便地进行中大型管理系统开发,同时也提供私聊我获得交流群二维码使用问题欢迎在群内提问。由于功能未完善暂时不提供给企业使用。