一款清新优雅的中后台模板,内置丰富可配置的主题(强烈推荐)

简介: Soybean Admin 是一个基于 Vue3、Vite3、TypeScript、NaiveUI、Pinia 和 UnoCSS 的清新优雅的中后台模版,它使用了最新的前端技术栈,内置丰富的主题配置,有着极高的代码规范,基于 mock 实现的动态权限路由,开箱即用的中后台前端解决方案,也可用于学习参考。

简介

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

特性

  • 最新技术栈: 使用 Vue3/vite2 等前端前沿技术开发, 使用高效率的 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-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 写法,并遵循特定顺序(用文档规范)
  • 目录结构组织遵循特定规范,页面的写法严格遵循模块思想,使得每个页面的代码结构清晰明了

权限路由:

  • 根据文件自动生成路由的类型和路由模块数据
  • 动态的路由数据由 mock 生成,前端添加动态路由
  • 指定了 mock 路由的类型,方便快速对接后端
  • 菜单由动态路由数据生成,支持隐藏指定菜单,支持多级菜单,支持外链打开
  • 在多页签中的缓存的页面会记录滚动位置
  • 面包屑数据由当前路由和菜单数据生成

主题:

  • 支持各种主题颜色、暗黑模式和各种布局
  • UnoCss 引入各种主题颜色,直接通过 class 即可应用对应的颜色
  • 初始化加载适应主题颜色
  • 支持项目 logo 自适应主题颜色

请求函数:基于 axios 封装

  • 请求实例: 可创建多个不同的 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 序列化数据,支持单文件和多文件上

封装的请求函数支持 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

  • 支持现实加载状态、空状态和网络状态的组件
  • 支持主题颜色及暗黑模式
  • 图片文字大小通过属性配置

项目示例图

项目源码

可以点击此处来获取就可以了!

相关文章
|
4月前
|
JavaScript UED 前端开发
JSF 富文本编辑器横空出世,如魔法神器开启震撼富文本输入之旅!
【8月更文挑战第31天】在现代Web应用中,用户常需输入带样式、颜色及图片等功能的富文本。为此,JSF可集成如CKEditor等富文本编辑器,提供强大输入体验。首先选择合适编辑器并下载引入库文件,使用`&lt;textarea&gt;`与JavaScript实例化编辑器。后台通过`value`属性获取内容。此外,还需配置编辑器选项、处理特殊字符和进行充分测试以确保稳定性和安全性,提升用户体验。
43 0
|
6月前
|
前端开发 数据安全/隐私保护 SEO
一款基于WordPress开发的高颜值的自适应主题Puock
支持白天与暗黑模式 全局无刷新加载 支持博客与CMS布局 内置WP优化策略 一键全站变灰 网页压缩成一行 后台防恶意登录 内置出色的SEO功能 评论Ajax加载 文章点赞、打赏 支持Twemoji集成 支持QQ登录 丰富的广告位 丰富的小工具 自动百度链接提交 众多页面模板 支持评论可见 支持密码可见 支持Dplayer播放器 简约快捷的后台配置 更多功能,等你的提议
66 2
一款基于WordPress开发的高颜值的自适应主题Puock
|
6月前
|
PHP
一款小众清新的Typecho主题
DearLicy主题,一款小众化小清新风格的博客主题 主题支持Typecho所支持的所有版本PHP 简约、小众、优雅
53 0
一款小众清新的Typecho主题
|
6月前
|
搜索推荐
CSDN自定义模块全攻略,DIY系统原有样式打造出你的专属个性化主页!
CSDN自定义模块全攻略,DIY系统原有样式打造出你的专属个性化主页!
112 0
|
7月前
|
存储 JavaScript 搜索推荐
《VitePress 简易速速上手小册》第3章:主题定制与扩展(2024 最新版)
《VitePress 简易速速上手小册》第3章:主题定制与扩展(2024 最新版)
282 0
|
7月前
|
前端开发
前端知识笔记(二十)———简易弹窗制作
前端知识笔记(二十)———简易弹窗制作
77 0
|
人工智能 缓存 前端开发
别找了,很适合新手站长的wordpress 主题:puock 主题,支持博客风格,CMS 风格,企业风格
puock 主题的特点有三个,第一它集成了博客风格,CMS 风格,企业风格,这三种风格,你可以自由设置与选择;第二它的后台项目比较多,什么幻灯片与公告,全局的公告,CMS 布局,企业布局等等,可以说一个主题可以当三个用。
406 2
|
前端开发 JavaScript 程序员
推荐一些免费开源好看的bootstrap后台模板
推荐一些免费开源好看的bootstrap后台模板
662 0
|
搜索推荐
IDEA字体颜色、主题风格个性化 —— 手把手带你尽展个性
IDEA字体颜色、主题风格个性化 —— 手把手带你尽展个性
1231 0
|
数据可视化 定位技术 UED
「联系我们」页面设计指南(内附案例)
「联系我们」页面就是用户联系你的重要渠道,是网站寻求优秀合作伙伴的途径
2214 0
「联系我们」页面设计指南(内附案例)