首先先安利一波，由我開發並維護的後臺框架 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 裡使用體驗。