🎉🎉🎉 清新优雅、高颜值且功能强大的后台管理系统 SoybeanAdmin 1.0 发布 🎉🎉🎉

1 阅读3分钟

历经6个月的重构,经过不断地打磨,SoybeanAdmin 1.0 终于发布了!

简介

SoybeanAdmin 是一个清新优雅、高颜值且功能强大的后台管理模板,基于最新的前端技术栈,包括 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS。它内置了丰富的主题配置和组件,代码规范严谨,实现了自动化的文件路由系统。此外,它还采用了基于 ApiFox 的在线Mock数据方案。SoybeanAdmin 为您提供了一站式的后台管理解决方案,无需额外配置,开箱即用。同样是一个快速学习前沿技术的最佳实践。

特性

  • 前沿技术应用:采用 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS 等最新流行的技术栈。
  • 清晰的项目架构:采用 pnpm monorepo 架构,结构清晰,优雅易懂。
  • 严格的代码规范:遵循 SoybeanJS 规范,集成了eslint, prettier 和 simple-git-hooks,保证代码的规范性。
  • TypeScript: 支持严格的类型检查,提高代码的可维护性。
  • 丰富的主题配置:内置丰富多样的主题配置,与 UI组件 和 UnoCSS 完美结合。
  • 内置国际化方案:轻松实现多语言支持。
  • 自动化文件路由系统:自动生成路由导入、声明和类型。更多细节请查看 Elegant Router
  • 灵活的权限路由:同时支持前端静态路由和后端动态路由。
  • 丰富的页面组件:内置多样页面和组件,包括403、404、500页面,以及布局组件、标签组件、主题配置组件等。
  • 命令行工具:内置高效的命令行工具,git提交、删除文件、发布等。
  • 移动端适配:完美支持移动端,实现自适应布局。

特性细节

  • 严格的代码规范

    • 集成 eslint, prettier 和 simple-git-hooks,保证代码的规范性。
    • 使用 @soybeanjs/eslint-config
    • 项目中的 Vue 文件全部使用 script-setup 写法
    • 严格遵循各种命名规范,如文件命名、变量命名、函数命名等,更多细节请查看 SoybeanJS 命名规范
    • 文件组织按照模块划分,可复用的组件放在全局的 components 文件夹下,页面的模块划分放在页面下的 modules 文件夹下。
    • 遵循函数编程的思想,尽量减少副作用,提高代码的可维护性。
  • 权限路由

    • 支持前端静态路由和后端动态路由。
    • 前端静态路由:在路由配置文件中配置路由,通过权限控制是否显示。
    • 后端动态路由:通过后端接口获取路由信息,实现动态路由。
    • 严谨的路由流程,保证路由的安全性,参考路由流程图

更多细节请查看 SoybeanAdmin 路由

  • 系统主题

    • 系统实现自己的主题配置层,再分别连接 UI组件 和 UnoCSS 的主题配置,实现主题的统一,完美兼容暗黑模式。
    • 主题颜色完美结合 UnoCSS,快速使用诸如 bg-primarytext-primary 等类名。
    • 提供丰富的主题配置,包括布局、主题颜色、页面元素属性控制等,详细见示例页面的主题配置抽屉。
  • TypeScript 最佳实践

    • 严格的类型检查,提高代码的可维护性。
    • 项目采用了TS的全局类型声明方式,快捷方便地使用全局类型。

更多技术细节请自行探索项目。

示例页面

我们热烈欢迎并感谢所有形式的贡献。如果您有任何想法或建议,欢迎通过提交 pull requests 或创建 GitHub issue 来分享。

预览地址:soybeanjs.cn/

文档地址:docs.soybeanjs.cn

Github 仓库:SoybeanAdmin

Gitee 仓库:SoybeanAdmin