共计 2412 个字符，预计需要花费 7 分钟才能阅读完成。
首先先安利一波，由我开发并保护的后盾框架 Fantastic-admin 正式公布 Vue3 版本了，虽迟但到，欢送大家拜访链接体验。
回归正题
从题目就能够看出，后盾框架其实是一片 大红海 。去年我做过一个统计，在 Github 上搜寻 vue admin，能够搜到 1 万多个仓库，这后果阐明了什么？我认为阐明了两点：一， 仿佛任何人都能够写一套后盾框架 ；二， 但想从中怀才不遇却不容易。
去年我写过一篇文章，叫《我是如何设计后盾框架里那些精益求精的动画成果》，那会其实曾经隐约感觉到，仿佛做的好的、被人熟知的几个后盾框架，在性能和界面上曾经开始趋于同质化了，很难做出差别。所以那会的我尝试从动效切入，做点不一样的货色，去优化用户应用体验。
当然这是一个很容易被用户疏忽掉的细节，但我置信 细节决定成败，我也心愿应用的人在用这款产品的时候，能不经意的从一些小细节里发现亮点，内心里说一句「Cool~」，并且这大半年来我也再重复地优化已有的一些性能，尝试做到更好。借着这次大版本升级，也是时候能够和大家聊一聊了。
亮点
配置可视化
这是框架主题配置的界面，可能光看上图也感觉没什么特地的，那来看下下图，原先的配置界面。
没有比照就没有挫伤，配置可视化这一块是我以前做得有余的中央。
因为单纯的文字描述会带来想象力，想象力就会导致信息传播不精确。当配置项一多，大片的纯文字介绍和阐明，会减少用户的了解老本，这也是为什么在一些须要明确传播用意的中央，肯定会有配图，例如交通批示标记。
当然如果图片信息过于形象的话，成果反而不迭文字，所以我仍旧保留了文字描述信息。
截图中其实没用应用任何图片，全是用 CSS3 实现的噢~
全局搜寻
全局搜寻减少了对搜寻后果高低切换和回车进入的快捷键反对。
并且光标始终固定，并不会因为按高低键而扭转地位，不便批改搜寻内容，能够达到全程手齐全不来到键盘实现页面切换操作。
页面水印
局部后盾框架都有提供水印的个性，展现成果大同小异，但仿佛都有一个显著的问题，那就是忘了应用水印的初衷。
为什么要应用水印？无非是在一些特定的场景下，须要爱护零碎里的信息，不被随便截取并分享流传。
既然是爱护，那就不能太容易就被破解，而我看到的状况却是：
水印竟然能从控制台里轻松地被删除，那我是怎么做的呢，还是看图吧。
不论是删除 DOM 元素，还是批改款式，都会从新生成水印，防止水印被批改或删除。
对水印感兴趣的小伙伴能够深刻浏览这篇文章《前端水印实现计划》。
页面最大化
最大化的性能是借鉴了其它框架的思路，在此基础上，我减少了双击标签栏将以后标签页最大化的个性，尽管是个小小的扭转，但很合乎应用习惯。
这种性能的劣势在于，既扩充了页面可操作的面积，又不会像全屏性能那样，强制让人专一于以后页面而无奈进行其它任何操作。
标签页拖拽排序
对拖拽的过程进行了优化，不便比照，上面是 Vue2 版本里的标签页拖拽排序成果。
标签页合并
一般模式下，路由的每一次变动，都会主动创立一个标签页，如下图：
这就会导致频繁操作下，标签页数量会剧增。在大家都默认标签页就应该是这样的状况下，我思考标签页是否能够像浏览器的标签页一样，只在一个标签页里切换，于是一个新个性就进去了。
只需通过简略的配置，就能够实现标签页合并的性能。
页面缓存
这个话题堪称是陈词滥调了，在去年我就提供了一个解决方案，详见《一劳永逸，解决基于 keep-alive 的后盾多级路由缓存问题》。
大抵思路就是将多级路由主动解决成二级，并且保留原先多级路由的数据。相当于保护两份数据，原始数据用于侧边栏展现，而解决过的二级路由当做实在路由进行注册。从而彻底解决多级路由缓存这个坑人的问题。
但因为在 Vue2 版本里并不是强制开启，导致很多开发者如果没有仔细阅读文档的话，压根不晓得这一个性。
而在 Vue3 版本里，我将这个配置项做为了规范个性，并且做了针对性的优化，笼罩更多的应用场景。至于为什么不让用户抉择呢？原因无他，就是这个计划切实是太好用了。
表单展现模式一键切换
在做后盾开发的时候，咱们通常会应用路由跳转的形式去解决表单详情页，然而如果表单内容量较少呢？可能会改成弹窗或者抽屉的模式，置信这个工作量，一两个小时就过来了，而当业务内容减少，表单内容也开始减少，这时候如果又要改回原先路由跳转的形式，我去，那我必定当场解体了。
于是我开发了一个规范模块，只需批改其中一个参数，就能够疾速在 路由跳转 、 弹窗 和抽屉 这三种模式中疾速切换，并且代码无需调整，其外围就是把表单和承载的容器进行解耦。
文字依据背景主动变色
这是一个小 feature，所以就放到最初说了，因为后盾零碎的登录页的背景，会依据不同我的项目需要进行替换，这就可能会呈现一个问题，笼罩在背景图上的文字要如何设置色彩，万一文字色彩和背景色彩色值太靠近，就会导致文字无奈看清，须要手动再批改文字色彩。
为了节俭开发者的工夫，我一开始想的是应用文字暗影 text-shadow: 0 0 1px #000;，把 blur 值设置到最小 1px，看上去就像给文字加了个描边，而后再把文字色彩设置为暗影色彩的反色，例如暗影色彩是彩色，那文字色彩就是红色。这样哪怕是极其的纯白或纯黑背景，有文字暗影的保障，也能确保文字能看到。
但之后我发现了更好的计划，就是 mix-blend-mode 属性，当设置为 mix-blend-mode: difference; 时，成果如下：
完结
以上介绍的只是 Vue3 版本里比拟间接拿出来说的一些个性，还有更多个性大家能够自行去 Fantastic-admin 里应用体验。
最初
做为一款收费 + 付费双模式经营保护的后盾框架，去年我发文分享的时候，评论里有局部小伙伴语气都很激动，心愿往年的评论区能平心静气一点。
最初，用脱口秀里 Callback 的技巧，回应一下我那篇倍受争议的文章《别再吃力去找后盾的前端框架了，2021 年就用 Fantastic-admin 吧》：
2021 年都过半了，你还没用上 Fantastic-admin 吗！