社区应用 最新帖子 精华区 社区服务 会员列表 统计排行
  • 5250阅读
  • 2回复

[壁纸]一款清新优雅的中后台模板,内置丰富可配置的主题

楼层直达
z3960 
级别: FLY版主
发帖
864638
飞翔币
129760
威望
325947
飞扬币
3935841
信誉值
8

!HHbd |B_  
&28n1  
简介 A,#hYi=-,  
S1n 'r}z8  
g|l|)T.s  
Soybean Admin 是一个基于 Vue3、Vite3、TypeScript、NaiveUI、Pinia 和 UnoCSS 的清新优雅的中后台模版,它使用了最新的前端技术栈,内置丰富的主题配置,有着极高的代码规范,基于 mock 实现的动态权限路由,开箱即用的中后台前端解决方案,也可用于学习参考。 QJ-?6 7_i  
EC| b7  
特性 qxW 2q8QHo  
gbRdng7(}  
  • 最新技术栈: 使用 Vue3/vite2 等前端前沿技术开发, 使用高效率的 npm 包管理器 pnpm
  • TypeScript: 应用程序级 JavaScript 的语言
  • 主题: 丰富可配置的主题、暗黑模式,基于原子 css 框架 - UnoCss 的动态主题颜色
  • 代码规范: 丰富的规范插件及极高的代码规范
  • 权限路由: 基于文件的路由系统、基于 mock 的动态路由能快速实现后端动态路由
  • 请求函数: 基于 axios 的完善的请求函数封装,提供 Promise 和 hooks 两种请求函数,加入请求结果数据转换的适配器适配器
/-)|dP  
lf9_!`DGV  
特性细节 NBZ>xp[U  
Th//uI+  
} "ts  
q&wXs/$a  
技术栈: 6Bm2_B  
ed)!Snz   
Vue3 + Vite3 + TypeScript + NaiveUI + Pinia + UnoCss + Axios + ECharts + AntV G2 + @vueuse + iconify
OL"So u4  
/2!"_?<L  
严格的代码规范: U_,K_6vj  
;R?9|:7  
  • eslint + prettier + eslint-config-airbnb-base + eslint-plugin-vue + eslint-plugin-import + @typescript-eslint/eslint-plugin 等插件提供代码全面的格式规范,eslintrc 的 import/order 规则规范了导入依赖的顺序
  • husky + lint-staged + vuetsc + commitlint + commitizen 保证了提交的代码符合 eslint 规则和 TS 类型检测,提交的内容规范遵循了 angular 提交规范
  • 应用设计模式优化代码:项目里面多次用到策略模式替换 if else
  • 所有页面使用 script-setup 写法,并遵循特定顺序(用文档规范)
  • 目录结构组织遵循特定规范,页面的写法严格遵循模块思想,使得每个页面的代码结构清晰明了
ui6B  
<ByDT$E_  
权限路由: 9Fh(tzz  
IsCJdgG  
  • 根据文件自动生成路由的类型和路由模块数据
  • 动态的路由数据由 mock 生成,前端添加动态路由
  • 指定了 mock 路由的类型,方便快速对接后端
  • 菜单由动态路由数据生成,支持隐藏指定菜单,支持多级菜单,支持外链打开
  • 在多页签中的缓存的页面会记录滚动位置
  • 面包屑数据由当前路由和菜单数据生成
EMejvPnZO  
{ e %  
主题: ~d?\rj3=  
>taZw '  
  • 支持各种主题颜色、暗黑模式和各种布局
  • UnoCss 引入各种主题颜色,直接通过 class 即可应用对应的颜色
  • 初始化加载适应主题颜色
  • 支持项目 logo 自适应主题颜色
&9'JHF!l  
S\UM0G}v  
请求函数:基于 axios 封装 9wFQ<r  
+#<"o#gZ  
  • 请求实例: 可创建多个不同的 baseUrl 的请求实例
  • 统一请求结果: 将错误信息统一处理成特定格式,和请求成功的数据再按特定格式一起返回
/** 自定义的请求成功结果 */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 序列化数据,支持单文件和多文件上
{*C LWs4  
封装的请求函数支持 Promise 和 hooks 两种, hooks 的请求函数包含 loading 状态
p^``hP:J  
Q-N.23\1  
自定义组件 Rx=pk  
MXhRnVz"W  
DP_ bB(  
S.OGLLprp  
布局组件soybean-admin-layout: $T0|zPK5  
[%8+Fa~Wa  
  • 分为 header、tab、sider、content、footer 五个部分,除了 content,其余都可以控制显示隐藏,且可以自定义过度动画
  • 支持 vertical 和 horizontal 两种模式,结合局部的现实隐藏,为该项目提供了 4 种布局模式
  • 高性能组件,相比用 UI 组件构建的布局,该组件不用考虑很多因素,专注于当前的几种布局模式
Vkb&' rXw+  
Z;mDMvIu (  
多页签组件soybean-admin-tab:ChromeTab 和 ButtonTab 7e"(]NC84  
/_554q  
  • 支持主题颜色及暗黑模式
  • ChromeTab 类似于浏览器的标签,样式清新
  • 结合 BetterScroll,实现多页签组件的左右鼠标滑动(移动端左右触摸滑动),激活状态的 Tab 自动居中
Lsozl<@  
.*g;2.-qv&  
LoadingEmptyWrapper | Y1<P^  
i=<(fq  
  • 支持现实加载状态、空状态和网络状态的组件
  • 支持主题颜色及暗黑模式
  • 图片文字大小通过属性配置
ptuW}"F  
wB( igPi  
项目示例图 :PaFC{O)*  
%tzz3Y  
K`2a{`  
jWW2&cBm\  
L3~E*\cV  
*lG$B@;rc|  
HnqZ7%jeN  
0\U28zbMJw  
Z@8amT;Y  
c~|/,FZU'  
} q ? iJ?P  
g `B?bBg  
;SVF"Uo  
#UJ@P Dwil  
&4DV]9+g  
V*'9yk"  
Yazpfw 7'd  
<s#}`R.#2  
y K&)H+v  
t5N4d  
Urx gKTry  
8YN+ \  
Ahq^dx#o  
tZXtt=M w  
q#Qr@Jf  
}Gz"og*8  
项目源码 /HDX[R   
CsR~qQ 5  
XW Y0WDh:  
私信免费获取,关键字【学习】
 
我不喜欢说话却每天说最多的话,我不喜欢笑却总笑个不停,身边的每个人都说我的生活好快乐,于是我也就认为自己真的快乐。可是为什么我会在一大群朋友中突然地就沉默,为什么在人群中看到个相似的背影就难过,看见秋天树木疯狂地掉叶子我就忘记了说话,看见天色渐晚路上暖黄色的灯火就忘记了自己原来的方向。
srwam 
级别: 超级版主
发帖
779323
飞翔币
742197204
威望
31317923
飞扬币
8388607
信誉值
0

只看该作者 1 发表于: 2023-03-12
来看看
srwam 
级别: 超级版主
发帖
779323
飞翔币
742197204
威望
31317923
飞扬币
8388607
信誉值
0

只看该作者 2 发表于: 2023-03-12
了解一下 {@ , L