Soybean Admin 清新优雅的中后台模版开源项目

我要开发同款
匿名用户2023年07月28日
106阅读
开发技术JavaScriptHTML/CSS
所属分类后台管理系统(模板)、Web应用开发
授权协议MIT

作品详情

SoybeanAdmin 是一个基于Vue3、Vite3、TypeScript、NaiveUI、Pinia和UnoCSS的清新优雅的中后台模版,它使用了最新流行的前端技术栈,内置丰富的主题配置,有着极高的代码规范,基于文件的路由系统以及基于Mock的动态权限路由,开箱即用的中后台前端解决方案,也可用于学习参考。

特性最新流行技术栈:使用Vue3/Vite等前端前沿技术开发,使用高效率的npm包管理器pnpmTypeScript:应用程序级JavaScript的语言主题:丰富可配置的主题、暗黑模式,基于原子css框架-UnoCss的动态主题颜色代码规范:丰富的规范插件及极高的代码规范文件路由系统:基于文件的路由系统,根据页面文件自动生成路由声明、路由导入和路由模块权限路由:提供前端静态和后端动态两种路由模式,基于mock的动态路由能快速实现后端动态路由请求函数:基于axios的完善的请求函数封装,提供Promise和hooks两种请求函数,加入请求结果数据转换的适配器特性细节​技术栈:Vue3+Vite3+TypeScript+NaiveUI+Pinia+UnoCss+Axios+ECharts+AntVG2+@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/**自定义的请求成功结果*/interfaceSuccessResult<T=any>{/**请求错误*/error:null;/**请求数据*/data:T;}/**请求错误*/interfaceRequestError{/**请求服务的错误类型*/type:RequestErrorType;/**错误码*/code:string|number;/**错误信息*/msg:string;}/**自定义的请求失败结果*/interfaceFailedResult{/**请求错误*/error:RequestError;/**请求数据*/data:null;}/**自定义的请求结果*/typeRequestResult<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

支持现实加载状态、空状态和网络状态的组件支持主题颜色及暗黑模式图片文字大小通过属性配置
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论