這是一篇關於 Fantastic-admin 這款後臺管理框架的年終總結。

不過與其說是年終總結，更像是一場回顧，看看這一年 Fantastic-admin 都做了哪些與眾不同的功能，也給大家提供一些創造思路。或許有些功能，你可以在自己的項目里實現。

以下按 commit 時間順序彙總：

可閱讀時間

這是一個將傳統日期轉化為一個可閱讀的時間，在管理系統一些對時效性有要求的模塊會有幫助，例如審核模塊。

403 無許可權訪問

大部分（幾乎所有）同類產品都沒有做 403 頁面的支持，它們的做法是直接將沒有許可權的路由剔除掉，所以無論是訪問一個不存在的路由，還是訪問一個無許可權的路由，都會進入 404 頁面。

同時也實現了許可權變更後，側邊導航菜單動態更新，你可以看上圖最左側導航的變化（當許可權變更後，從3個變成了2個）。這也是同類產品無法實現的效果，因為技術方案限制，它們必須刷新瀏覽器才能實現。

如果你對這個功能的技術實現思路，可以閱讀《這樣在管理後臺里實現 403 頁面實在是太優雅了》這篇文章以及評論，因為評論中給予我了一個新的思路，所以目前的實現方案和文章中介紹的稍微有點不同。

標簽欄持久化

雖然 Vue 提供了 SPA 的使用體驗，但在實際使用場景中，總會有各種各樣的怪異情況發生，導致用戶需要整體刷新頁面。

這時候標簽欄持久化就提供了很好的使用體驗，之前訪問過的標簽頁都會被保留，無需再從導航菜單中翻找並重新打開。

標簽欄的數據跟隨當前賬號並存放在本地 sessionStorage 里，當然框架也提供了簡單的配置，可以將數據存放到 localStorage 里。

頁面切換動效

這是一個比較剋制的動效，當然整個框架內提供的動效都是比較剋制的，我並沒有提供太多“酷炫”的切換動效，因為那樣就有點喧賓奪主了。

像那種頁面反轉、旋轉的切換動效，持續時間太短在性能較差的電腦上可能會掉幀，但持續時間太長又會影響用戶體驗。

如果你對 Fantastic-admin 內使用到了哪些動效感興趣，可以閱讀《我是如何設計後臺框架里那些錦上添花的動畫效果》這篇文章，不過時間過去有點久了，文章和現在正在使用的動效會有點差異。

用戶偏好設置

框架將一部分與開發模式無關的配置項提取出來，提供了一個偏好設置模塊。只需替換後端介面，就能實現用戶自定義使用習慣，而不是每次登錄都是系統提供的預設配置。

收藏夾

用戶可以將導航中常用的模塊添加進收藏夾，方便快速訪問。這在一些功能模塊超級多的大型系統里特別實用，節省了翻找導航的時間。

收藏夾的數據預設跟隨當前賬號存放在 localStorage 里，當然框架也提供了簡單的配置，可以將數據和介面對接，存放到後端資料庫。

儲物箱

這是一個比較 “抽象” 的組件，它的功能是能存放各種數據，僅此而已，數據跟隨頁面存放在本地 localStorage 內。

一個比較經典的場景就是有一個具有N多篩選項的列表頁，而你又經常需要輸入不同條件去查詢結果，這時候這個組件就派上用場了，可以實現一個篩選條件的常用模版，將常用的篩選條件保存下來，方便下次可以一鍵切換。

你如果感興趣，可以點這裡去實際操作體驗一番。

明暗切換過渡動效

申明：該創意並非我原創

在實現這個效果後，我也嘗試在 VitePress 里實現了這一效果，並提交了 pr ，很幸運，我的前端開發偶像 antfu 當時也在推特宣傳了一番。雖然最後 VitePress 團隊處於各種考慮，並沒有合併我的 pr 將這一特性作為預設設置，而是作為一個自定義功能，收錄到了[文檔](擴展預設主題 | VitePress)中。但也因為這個 pr ，我發現社區很多工具都借鑒並集成了這個創意，比如 nuxt devtools ，也算是我對開源社區的一點點小貢獻吧。

Hello, 所有UI組件庫們

這是今年濃墨重彩的一次更新，徹底從一款基於 Element Plus 的後臺管理框架，變成了一款通用的後臺管理框架。因為之前專門寫過一篇文章，這裡就不多介紹了，感興趣的可以閱讀《用1100天做一款通用的管理後臺框架》。

支持拼音搜索

一點小優化，支持拼音和拼音首字母快捷搜索。

新視窗打開

有時候我們確實需要多開一個頁面，可能是用來對比不同頁面內的展示信息，於是就在標簽頁上增加了這一功能。

同時在導航菜單處，按住 Ctrl/Command + 滑鼠點擊，也支持在新視窗打開，這個不起眼的功能，我發現有很多同類產品是不支持的。

工具欄自定義佈局

原先工具欄只能控制功能模塊的開啟/關閉，現在支持自定義佈局。

導航欄自動收起

導航欄本身有提供展開/收起的配置，但發現實際使用中，有人會希望能有臨時展開的功能，於是開發了這一特性。

標簽欄動效調整

給其中一種風格做了動效調整，當標簽頁寬度設置為自適應時，動效過渡會更靈動。

個人的年終總結呢？

很奇怪對吧，為什麼不是我個人的年終總結？其實是因為我很少給自己設立各種目標，包括做這款產品也一樣。因為我發現目標一旦達成了，它也就消失了，這就導致需要不停設立新的目標，結果就是被目標趕著前進，這會讓我感覺有點本末倒置，忽略做這件事的初心。（當然工作中被迫還是需要設立目標，以結果為導向）

相反，我做這款產品更多是遵循自己的信念和熱愛，我從中提升技能、實踐想法、學習營銷，至於能走到哪一步，我沒有一個清晰的目標，但我知道只要我一直在進步，這就夠了。

所以我覺得我更像在打磨一款藝術品，我經常不按照大多數同類產品的做法去做功能，你能在這款產品里看到很多我的奇思妙想。當然最終結果也還不錯，幸運得到了很多人的賞識，這也讓我和我的家人在物質生活上變得更好，很感謝這一年新增的 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 年我也會繼續深耕這款產品，提供更多有趣又實用的新特性，那就一起拭目以待吧！

最後祝所有看到這裡的大伙們，新年快樂，功不唐捐！