这是一篇关于 Fantastic-admin 这款后台管理框架的年终总结。

不过与其说是年终总结,更像是一场回顾,看看这一年 Fantastic-admin 都做了哪些与众不同的功能,也给大家提供一些创造思路。或许有些功能,你可以在自己的项目里实现。

以下按 commit 时间顺序汇总:

可阅读时间

fantastic-admin.gitee.io_pro-example_.png

这是一个将传统日期转化为一个可阅读的时间,在管理系统一些对时效性有要求的模块会有帮助,例如审核模块。

403 无权限访问

Kapture 2024-01-02 at 21.29.41.gif

大部分(几乎所有)同类产品都没有做 403 页面的支持,它们的做法是直接将没有权限的路由剔除掉,所以无论是访问一个不存在的路由,还是访问一个无权限的路由,都会进入 404 页面。

同时也实现了权限变更后,侧边导航菜单动态更新,你可以看上图最左侧导航的变化(当权限变更后,从3个变成了2个)。这也是同类产品无法实现的效果,因为技术方案限制,它们必须刷新浏览器才能实现。

如果你对这个功能的技术实现思路,可以阅读《这样在管理后台里实现 403 页面实在是太优雅了》这篇文章以及评论,因为评论中给予我了一个新的思路,所以目前的实现方案和文章中介绍的稍微有点不同。

标签栏持久化

Kapture 2024-01-02 at 21.34.37.gif

虽然 Vue 提供了 SPA 的使用体验,但在实际使用场景中,总会有各种各样的怪异情况发生,导致用户需要整体刷新页面。

这时候标签栏持久化就提供了很好的使用体验,之前访问过的标签页都会被保留,无需再从导航菜单中翻找并重新打开。

标签栏的数据跟随当前账号并存放在本地 sessionStorage 里,当然框架也提供了简单的配置,可以将数据存放到 localStorage 里。

页面切换动效

Kapture 2024-01-02 at 21.44.47.gif

这是一个比较克制的动效,当然整个框架内提供的动效都是比较克制的,我并没有提供太多“酷炫”的切换动效,因为那样就有点喧宾夺主了。

像那种页面反转、旋转的切换动效,持续时间太短在性能较差的电脑上可能会掉帧,但持续时间太长又会影响用户体验。

如果你对 Fantastic-admin 内使用到了哪些动效感兴趣,可以阅读《我是如何设计后台框架里那些锦上添花的动画效果》这篇文章,不过时间过去有点久了,文章和现在正在使用的动效会有点差异。

用户偏好设置

localhost_9000_.png

框架将一部分与开发模式无关的配置项提取出来,提供了一个偏好设置模块。只需替换后端接口,就能实现用户自定义使用习惯,而不是每次登录都是系统提供的默认配置。

收藏夹

Kapture 2024-01-02 at 22.00.06.gif

用户可以将导航中常用的模块添加进收藏夹,方便快速访问。这在一些功能模块超级多的大型系统里特别实用,节省了翻找导航的时间。

收藏夹的数据默认跟随当前账号存放在 localStorage 里,当然框架也提供了简单的配置,可以将数据和接口对接,存放到后端数据库。

储物箱

Kapture 2024-01-02 at 22.07.23.gif

这是一个比较 “抽象” 的组件,它的功能是能存放各种数据,仅此而已,数据跟随页面存放在本地 localStorage 内。

一个比较经典的场景就是有一个具有N多筛选项的列表页,而你又经常需要输入不同条件去查询结果,这时候这个组件就派上用场了,可以实现一个筛选条件的常用模版,将常用的筛选条件保存下来,方便下次可以一键切换。

你如果感兴趣,可以点这里去实际操作体验一番。

明暗切换过渡动效

Kapture 2024-01-02 at 22.13.58.gif

申明:该创意并非我原创

在实现这个效果后,我也尝试在 VitePress 里实现了这一效果,并提交了 pr ,很幸运,我的前端开发偶像 antfu 当时也在推特宣传了一番。虽然最后 VitePress 团队处于各种考虑,并没有合并我的 pr 将这一特性作为默认设置,而是作为一个自定义功能,收录到了[文档](扩展默认主题 | VitePress)中。但也因为这个 pr ,我发现社区很多工具都借鉴并集成了这个创意,比如 nuxt devtools ,也算是我对开源社区的一点点小贡献吧。

Hello, 所有UI组件库们

这是今年浓墨重彩的一次更新,彻底从一款基于 Element Plus 的后台管理框架,变成了一款通用的后台管理框架。因为之前专门写过一篇文章,这里就不多介绍了,感兴趣的可以阅读《用1100天做一款通用的管理后台框架》。

支持拼音搜索

Kapture 2024-01-02 at 22.33.18.gif

一点小优化,支持拼音和拼音首字母快捷搜索。

新窗口打开

Snipaste_2024-01-02_23-28-48.png

有时候我们确实需要多开一个页面,可能是用来对比不同页面内的展示信息,于是就在标签页上增加了这一功能。

同时在导航菜单处,按住 Ctrl/Command + 鼠标点击,也支持在新窗口打开,这个不起眼的功能,我发现有很多同类产品是不支持的。

工具栏自定义布局

Kapture 2024-01-02 at 22.42.31.gif

原先工具栏只能控制功能模块的开启/关闭,现在支持自定义布局。

导航栏自动收起

Kapture 2024-01-02 at 22.48.52.gif

导航栏本身有提供展开/收起的配置,但发现实际使用中,有人会希望能有临时展开的功能,于是开发了这一特性。

标签栏动效调整

Kapture 2024-02-05 at 11.24.44.gif

Kapture 2024-02-05 at 11.31.37.gif

给其中一种风格做了动效调整,当标签页宽度设置为自适应时,动效过渡会更灵动。


个人的年终总结呢?

很奇怪对吧,为什么不是我个人的年终总结?其实是因为我很少给自己设立各种目标,包括做这款产品也一样。因为我发现目标一旦达成了,它也就消失了,这就导致需要不停设立新的目标,结果就是被目标赶着前进,这会让我感觉有点本末倒置,忽略做这件事的初心。(当然工作中被迫还是需要设立目标,以结果为导向)

相反,我做这款产品更多是遵循自己的信念和热爱,我从中提升技能、实践想法、学习营销,至于能走到哪一步,我没有一个清晰的目标,但我知道只要我一直在进步,这就够了。

所以我觉得我更像在打磨一款艺术品,我经常不按照大多数同类产品的做法去做功能,你能在这款产品里看到很多我的奇思妙想。当然最终结果也还不错,幸运得到了很多人的赏识,这也让我和我的家人在物质生活上变得更好,很感谢这一年新增的 100 多位付费用户。

差点忘了!

2022 年的时候,我以 Fantastic-admin 的名义赞助了 Element Plus 组织 4000 元,感谢 Element Plus 提供这么好的 UI 组件库。

2023 年框架有了大的更新(上面有提到),加上整年的收入勉强还行,所以我又以 Fantastic-admin 的名义赞助了 Vue 团队 15000 元。另外单独赞助了托尼 antfu 大佬,不管是框架中还是工作中,都用到太多他开发的项目了。还赞助了智子 sxzz ,因为框架侧边栏导航的实现,借鉴了 element-plus 的 el-menu 组件的实现思路,而 el-menu 组件最初就是智子写的。除了这些大家比较熟悉开源大佬,我也赞助了一些小工具作者,比如 vite-plugin-fake-server 的作者,不过赞助那天听闻他刚被裁员,不知是喜是悲。

这一年看到了一些令人唏嘘的新闻,愈发觉得做开源开发者不容易。我自知自己没有能力和运气去做开源,所以通过商业化赚了点钱后,也希望能回馈给开源作者一些实质性的鼓励。

开启新的一年

以上就是 2023 年 Fantastic-admin 新增的大部分特性,更多特性欢迎大家来官网自行体验一番,相信你会发现我们与其他产品的不同。

2024 年我也会继续深耕这款产品,提供更多有趣又实用的新特性,那就一起拭目以待吧!

最后祝所有看到这里的大伙们,新年快乐,功不唐捐!