Soybean Admin清新优雅的中后台模版
Soybean Admin 是一个基于 Vue3、Vite3、TypeScript、NaiveUI、Pinia 和 UnoCSS 的清新优雅的中后台模版,它使用了最新流行的前端技术栈,内置丰富的主题配置,有着极高的代码规范,基于文件的路由系统以及基于 Mock 的动态权限路由,开箱即用的中后台前端解决方案,也可用于学习参考。
特性
- 最新流行技术栈:使用 Vue3/Vite 等前端前沿技术开发, 使用高效率的 npm 包管理器 pnpm
- TypeScript: 应用程序级 JavaScript 的语言
- 主题:丰富可配置的主题、暗黑模式,基于原子 css 框架 - UnoCss 的动态主题颜色
- 代码规范:丰富的规范插件及极高的代码规范
- 文件路由系统:基于文件的路由系统,根据页面文件自动生成路由声明、路由导入和路由模块
- 权限路由:提供前端静态和后端动态两种路由模式,基于 mock 的动态路由能快速实现后端动态路由
- 请求函数:基于 axios 的完善的请求函数封装,提供 Promise 和 hooks 两种请求函数,加入请求结果数据转换的适配器
特性细节
-
技术栈: Vue3 + Vite3 + TypeScript + NaiveUI + Pinia + UnoCss + Axios + ECharts + AntV G2 + @vueuse + iconify
-
严格的代码规范:
- 基于 eslint + prettier 抽离的 eslint 规则依赖提供代码全面的格式规范,eslintrc 的 import/order 规则规范了导入依赖的顺序
- 基于 simple-git-hooks 和 lint-staged 对 git 提交代码进行规范,提交的内容规范遵循 Angular 提交规范
通过@soybeanjs/cli 提供的 git-commit 命令生成符合 Angular 提交规范的 commit,通过 git-commit-verify 命令校验 commit 是否符合 Angular 提交规范
- 应用设计模式优化代码:项目里面多次用到策略模式
- 所有页面使用 script-setup 写法,并遵循约定的顺序写法
- 目录结构组织遵循特定规范,页面的写法严格遵循模块思想,使得每个页面的代码结构清晰明了
-
权限路由:
- 根据文件自动生成路由的类型和路由模块数据
- 动态的路由数据由 mock 生成,前端添加动态路由
- 指定了 mock 路由的类型,方便快速对接后端
- 菜单由动态路由数据生成,支持隐藏指定菜单,支持多级菜单,支持外链打开
- 在多页签中的缓存的页面会记录滚动位置
- 面包屑数据由当前路由和菜单数据生成
-
主题:
- 支持各种主题颜色、暗黑模式和各种布局
- UnoCss 引入各种主题颜色,直接通过 class 即可应用对应的颜色
- 初始化加载适应主题颜色
- 支持项目 logo 自适应主题颜色
-
请求函数:基于 axios 封装
-
请求实例:可创建多个不同的 baseUrl 的请求实例
-
统一请求结果:将错误信息统一处理成特定格式,和请求成功的数据再按特定格式一起返回
typescript/** 自定义的请求成功结果 */ interface SuccessResult<T = any> { /** 请求错误 */ error: null; /** 请求数据 */ data: T; } /** 请求错误 */ interface RequestError { /** 请求服务的错误类型 */ type: RequestErrorType; /** 错误码 */ code: string | number; /** 错误信息 */ msg: string; } /** 自定义的请求失败结果 */ interface FailedResult { /** 请求错误 */ error: RequestError; /** 请求数据 */ data: null; } /** 自定义的请求结果 */ type RequestResult<T = any> = SuccessResult<T> | FailedResult;
-
错误提示:智能提示错误,避免同一种错误在同一时间段显示,通过指定错误码不展示响应错
-
token 刷新:无感刷新 token
-
请求参数转换:根据不同的 Content-Type 转换数据,利用 qs 序列化数据,支持单文件和多文件上
-
封装的请求函数支持 Promise 和 hooks 两种, hooks 的请求函数包含 loading 状态
-
-
自定义组件
-
布局组件soybean-admin-layout:
- 分为 header、tab、sider、content、footer 五个部分,除了 content,其余都可以控制显示隐藏,且可以自定义过度动画
- 支持 vertical 和 horizontal 两种模式,结合局部的现实隐藏,为该项目提供了 4 种布局模式
- 高性能组件,相比用 UI 组件构建的布局,该组件不用考虑很多因素,专注于当前的几种布局模式
-
多页签组件soybean-admin-tab:ChromeTab 和 ButtonTab
- 支持主题颜色及暗黑模式
- ChromeTab 类似于浏览器的标签,样式清新
- 结合 BetterScroll,实现多页签组件的左右鼠标滑动(移动端左右触摸滑动),激活状态的 Tab 自动居中
-
LoadingEmptyWrapper
- 支持现实加载状态、空状态和网络状态的组件
- 支持主题颜色及暗黑模式
- 图片文字大小通过属性配置
-
评论
End Admin后台框架模版
力求做一个通用、简约、实用、多功能并存的后台模版,支持移动设备,放弃老版浏览器,仅支持高大上浏览器(chrome、firefox)。IE暂不考虑。更重要的一点它是开源免费的。演示地址:http://e
End Admin后台框架模版
0
Smart Admin通用型中后台解决方案
SmartAdmin是一套互联网企业级的通用型中后台解决方案!使用最前沿的前后台技术栈SpringBoot和Vue,前后端分离,用一套漂亮的代码和一套整洁的代码规范,同时又让开发者节省大量的时间,减少
Smart Admin通用型中后台解决方案
0
AntD Admin中后台前端解决方案
AntDAdmin 一套优秀的中后台前端解决方案。特性国际化,源码中抽离翻译字段,按需加载语言包动态权限,不同权限对应不同菜单优雅美观,AntDesign设计体系Mock数据,本地数据调试使用1、下载
AntD Admin中后台前端解决方案
0
Pear Admin LayuiLayui Admin 后台模板
PearAdminLayui 是基于Layui的后台管理系统模板,扩展Layui原生UI样式,整合第三方开源组件,提供便捷快速的开发方式,延续LayuiAdmin的设计风格,持续完善的样式与组件的维护
Pear Admin LayuiLayui Admin 后台模板
0
Pear Admin LayuiLayui Admin 后台模板
Pear Admin Layui 是基于 Layui 的后台管理系统模板,扩展Layui原生UI样式
Pear Admin LayuiLayui Admin 后台模板
0
beego adminGolang版的admin后台
beegoadmin这是一个使用Golang开发得admin管理后台基于beego,jqueryeasyui,bootstarp的一个后台管理系统VERSION="0.1.0"这个系统是为了方便大家b
beego adminGolang版的admin后台
0