5

一款后台管理框架的年终总结 - 胡尐睿丶

 7 months ago
source link: https://www.cnblogs.com/hooray/p/18007738
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

这是一篇关于 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 的作者，不过赞助那天听闻他刚被裁员，不知是喜是悲。

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

IEXSuqZmaOrtHGj.png LzwpbBXKt5i3u8V.png TyUGZKAOgpwx3Jv.png
D8BLVNuTcpyqaCs.jpg

开启新的一年

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

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

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK