前言
大言不惭的取了这个标题,但作为开发了 4 年多的 Fantastic-admin 的作者,回顾这一路走来,从一开始被指责抄袭,到现在拥有数百名付费用户和几十家付费企业。我认为我的开发理念应该是得到了大众的认可。
所以趁着 Fantastic-admin 发布 v5.0 之际,借由这篇文章回顾一下过去我做了哪些事。以及最近这一年,从 v4.0 到 v5.0 ,又带来了哪些改变。
叙叙旧
光听我在自夸,肯定有人不屑,那不妨先看看过去 Fantastic-admin 引领了哪些潮流?
仿 chrome 标签页样式
这个风格当然并非原创,我也是参考了 chrome 的标签页样式,但当时在 2020 年的后台框架里,Fantastic-admin还是第一个这么做的。
但是现在,vben / pure-admin / soybean-admin / shop-vite ,你叫得上名的,叫不上名的,几乎快成为大部分后台框架的标配了。
更直观的布局预览
我从 v2.0 开始就提供了这种更直观的布局预览,方便用户可以清楚的知道将使用哪种布局。
当然不仅仅这一处,和布局/样式相关的配置,我都尽量图形化、图标化,毕竟图案比起文字,更容易让人理解。
现在大部分后台框架,也都采用了这种方式,甚至直接借鉴了我的代码。
三方UI组件库可替换
我在 2023 年的时候提供了三方 UI 组件库可替换的特性,并且也专门整理了一篇文章《用1100天做一款通用的管理后台框架》,所以这里就不过多介绍了。
去年 vben 发布 5.0 的时候,发现他们也提供了这个特性,为此我还专门加了 vben 的作者。
因为当时我在设计这个方案的时候,也花了不少时间,所以当看到 vben 也提供了这个特性,这种开发理念上的默契,还是很让我感到开心的,并且也得到了 vben 作者的认可。
v4.0 -> v5.0
聊完了过去,那就来看看从 v4.0 到 v5.0 ,带来了哪些改变。
引入 shadcn-vue
2023 年 shadcn/ui 大火,我也是第一时间就关注到了,但很遗憾官方并没有提供 vue 的支持。
当时我在做三方 UI 组件库可替换的方案调研时,还没有出现 shadcn-vue,所以错过了 shadcn 。但用过 Fantastic-admin v4.0 的用户应该是能发现,虽然没有用上 shadcn ,但配色和样式和 shadcn 是非常相似了。
如今 shadcn-vue 也已经成熟可用,所以 v5.0 我直接引入了 shadcn-vue ,大量组件使用 shadcn-vue 进行了重新封装,并且还重写了登录界面,让替换 UI 组件库变得更容易了。
主题同步
用过 shadcn-vue 的应该都知道,shadcn-vue 提供的每一套主题,都包含了明暗两种配色。
但它并不支持明暗模式下分别使用不同的主题,所以我专门增加了主题同步的特性,当关闭同步时,可以在明暗模式下分别使用不同的主题。
登录过期弹窗
登录状态通常都有时效性,如果后端没有做 token 无感刷新,那么前端就可能出现用户在进行某个操作时,接口返回 token 过期,强制被登出并跳转到登录页。
针对在接口请求时触发登录过期,我专门增加了一个配置项,允许开发者可以开启登录过期弹窗,最大程度保留了当前操作的数据。
检查更新
虽然是web应用,刷新一下页面就可以看到最新版本,但如何通知用户刷新,也是一个问题。
所以我增加了一个最低成本的纯前端检查更新方案,当然如果有更复杂的场景,也提供的很方便的自定义。
全局预留插槽
大部分后台框架,核心功能都集中在了布局
组件上,如下:
这意味着开发者如果要增加一些个性化的功能,就需要直接修改到框架的核心代码。这不仅增加了开发者的心智负担,而且后续对框架升级或者迁移代码,也会变得非常麻烦。
所以我增加了预留插槽这个特性,只需要创建约定文件名的组件,就能在不侵入框架核心代码的情况下,给布局组件中各个位置插入自定义内容。
更多插槽请查看 |
导航栏面板模式
相对于传统导航栏需要层层展开,面板模式可以更直观的看到所有导航菜单。
更重要的一点是,无需修改任何配置,即可轻松在多种导航栏模式中切换。
小细节
除了上面这些能明显感知到变化的新特性,也有一些不起眼的小细节。
滚动遮罩
支持滚动的区域,超出部分都增加了一个淡出的遮罩,增强的用户交互体验。
其实从很早的版本就提供的类似的特性,只不过在 v5.0 中,将这这特性风格统一了,并且还封装成了一个独立的组件,方便开发者使用。
更合理的动效
主导航分别在顶部和侧边时,次导航的切换动效也做了区分。
你可以看到,当主导航在侧边时,从上到下依次点击,次导航的切换动效也是从底部向上滑入,反之亦然,就像你滑动鼠标滚轮一样符合直觉。
如果主导航在顶部时,次导航的切换动效则也变成了左右滑动。
总结
这篇文章介绍的功能还仅仅是 Fantastic-admin 众多功能里的冰山一角,如果你之前从未听说过 Fantastic-admin ,那么不妨来了解使用一下。
还是那句话,或许你正在使用其他的后台框架,或许你觉得后台框架大部分都大同小异,但我还是强烈建议你来了解一下 Fantastic-admin ,因为我依旧认为这是 2025 年最值得你上手使用的后台框架。