一款後臺管理框架的年終總結

来源:https://www.cnblogs.com/hooray/p/18007738
-Advertisement-
Play Games

與其說是年終總結,更像是一場回顧,看看這一年 Fantastic-admin 都做了哪些與眾不同的功能,也給大家提供一些創造思路。 ...


這是一篇關於 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 年我也會繼續深耕這款產品,提供更多有趣又實用的新特性,那就一起拭目以待吧!

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

新博客地址
hooray.github.io
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 響應式設計旨在編寫一套代碼,在不同設備上都能有良好的表現。響應式設計有兩種思路:桌面端優先和移動端優先,它們的區別是先實現一種佈局,再使用媒體查詢設置斷點,實現不同屏幕尺寸下的佈局,逐漸過渡到另一端。即由大到小和由小到大的區別。 ...
  • 當有多條衝突的CSS規則指向同一元素,則瀏覽器會計算特異性選擇更具體的規則。如果特異性相同,則按照代碼順序,靠後的規則覆蓋前面的規則。 ...
  • 背景:自動化部署系統主要可以集成到公司內部的管理系統中去,比如公司有多個項目,移動端H5,大屏網站,門戶網站等...每次發佈或者迭代都需要前端同事打包然後在交給運維或者後端同事放到伺服器上進行部署 ,如果有一個項目多個同事合作完成 還要走git合併流程,所以我們的目標就是不讓前端進行打包,開發完成代 ...
  • Web API SpeechSynthesis是一項強大的瀏覽器功能,它允許開發者將文本轉換為語音,並通過瀏覽器播放出來。本文將深入探討SpeechSynthesis的控制介面,包括其功能、用法和一個完整的JavaScript示例。 參考資料:SpeechSynthesis - Web API 介面 ...
  • 自己常用的 TS 寫法總結,應該會一直更新。可使用 TS線上編譯 校驗 TS 語法。 基本用法 普通 const num: number = 10 const isStop: boolean = false const title: string = '常用TS總結' const curName: ...
  • 追憶 上一節:零基礎入門Vue之影分身之術——列表渲染&渲染原理淺析 雖然我深知,大佬告訴我”先學應用層在瞭解底層,以應用層去理解底層“,但Vue的數據如何檢測的我不得不去學 否則,在寫代碼的時候,可能會出現我難以解釋的bug 對此,本篇文章,將記錄我對Vue檢測數據的理解 對於Vue檢測數據的實現 ...
  • 我們是袋鼠雲數棧 UED 團隊,致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神,探索前端道路,為社區積累並傳播經驗價值。 本文作者:佳嵐 The more your tests resemble the way your software is used, the more confide ...
  • 聽我說 從 條件渲染 那一篇,我學習到瞭如何用Vue對dom節點根據條件顯示 但單單有條件還不夠啊,有時候數據是一大坨一大坨的數據,如果Vue不提供咱要麼使用“v-html” 要麼就沒辦法實現 v-html又感覺太low了,Vue提供了另外的指令更好的實現,那便是:列表渲染 列表渲染:v-for 簡 ...
一周排行
    -Advertisement-
    Play Games
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...