Soybean Admin清新優(yōu)雅的中后臺模版

Soybean Admin 是一個基于 Vue3、Vite3、TypeScript、NaiveUI、Pinia 和 UnoCSS 的清新優(yōu)雅的中后臺模版，它使用了最新流行的前端技術棧，內置豐富的主題配置，有著極高的代碼規(guī)范，基于文件的路由系統(tǒng)以及基于 Mock 的動態(tài)權限路由，開箱即用的中后臺前端解決方案，也可用于學習參考。

特性

• 最新流行技術棧：使用 Vue3/Vite 等前端前沿技術開發(fā), 使用高效率的 npm 包管理器 pnpm
• TypeScript: 應用程序級 JavaScript 的語言
• 主題：豐富可配置的主題、暗黑模式，基于原子 css 框架 - UnoCss 的動態(tài)主題顏色
• 代碼規(guī)范：豐富的規(guī)范插件及極高的代碼規(guī)范
• 文件路由系統(tǒng)：基于文件的路由系統(tǒng)，根據頁面文件自動生成路由聲明、路由導入和路由模塊
• 權限路由：提供前端靜態(tài)和后端動態(tài)兩種路由模式，基于 mock 的動態(tài)路由能快速實現后端動態(tài)路由
• 請求函數：基于 axios 的完善的請求函數封裝，提供 Promise 和 hooks 兩種請求函數，加入請求結果數據轉換的適配器

特性細節(jié)?

• 技術棧： Vue3 + Vite3 + TypeScript + NaiveUI + Pinia + UnoCss + Axios + ECharts + AntV G2 + @vueuse + iconify

• 嚴格的代碼規(guī)范：

  • 基于 eslint + prettier 抽離的 eslint 規(guī)則依賴提供代碼全面的格式規(guī)范，eslintrc 的 import/order 規(guī)則規(guī)范了導入依賴的順序
  • 基于 simple-git-hooks 和 lint-staged 對 git 提交代碼進行規(guī)范，提交的內容規(guī)范遵循 Angular 提交規(guī)范

    通過@soybeanjs/cli 提供的 git-commit 命令生成符合 Angular 提交規(guī)范的 commit，通過 git-commit-verify 命令校驗 commit 是否符合 Angular 提交規(guī)范

  • 應用設計模式優(yōu)化代碼：項目里面多次用到策略模式
  • 所有頁面使用 script-setup 寫法，并遵循約定的順序寫法
  • 目錄結構組織遵循特定規(guī)范，頁面的寫法嚴格遵循模塊思想，使得每個頁面的代碼結構清晰明了

• 權限路由：

  • 根據文件自動生成路由的類型和路由模塊數據
  • 動態(tài)的路由數據由 mock 生成，前端添加動態(tài)路由
  • 指定了 mock 路由的類型，方便快速對接后端
  • 菜單由動態(tài)路由數據生成，支持隱藏指定菜單，支持多級菜單，支持外鏈打開
  • 在多頁簽中的緩存的頁面會記錄滾動位置
  • 面包屑數據由當前路由和菜單數據生成

• 主題：

  • 支持各種主題顏色、暗黑模式和各種布局
  • UnoCss 引入各種主題顏色，直接通過 class 即可應用對應的顏色
  • 初始化加載適應主題顏色
  • 支持項目 logo 自適應主題顏色

• 請求函數：基于 axios 封裝

  • 請求實例：可創(chuàng)建多個不同的 baseUrl 的請求實例

  • 統(tǒng)一請求結果：將錯誤信息統(tǒng)一處理成特定格式，和請求成功的數據再按特定格式一起返回

    typescript

    /** 自定義的請求成功結果 */
    interface SuccessResult<T = any> {
    	/** 請求錯誤 */
    	error: null;
    	/** 請求數據 */
    	data: T;
    }
    /** 請求錯誤 */
    interface RequestError {
    	/** 請求服務的錯誤類型 */
    	type: RequestErrorType;
    	/** 錯誤碼 */
    	code: string | number;
    	/** 錯誤信息 */
    	msg: string;
    }
    /** 自定義的請求失敗結果 */
    interface FailedResult {
    	/** 請求錯誤 */
    	error: RequestError;
    	/** 請求數據 */
    	data: null;
    }
    /** 自定義的請求結果 */
    type RequestResult<T = any> = SuccessResult<T> | FailedResult;

  • 錯誤提示：智能提示錯誤，避免同一種錯誤在同一時間段顯示，通過指定錯誤碼不展示響應錯

  • token 刷新：無感刷新 token

  • 請求參數轉換：根據不同的 Content-Type 轉換數據，利用 qs 序列化數據，支持單文件和多文件上

  • 封裝的請求函數支持 Promise 和 hooks 兩種, hooks 的請求函數包含 loading 狀態(tài)

• 自定義組件

  • 布局組件soybean-admin-layout：

    • 分為 header、tab、sider、content、footer 五個部分，除了 content，其余都可以控制顯示隱藏，且可以自定義過度動畫
    • 支持 vertical 和 horizontal 兩種模式，結合局部的現實隱藏，為該項目提供了 4 種布局模式
    • 高性能組件，相比用 UI 組件構建的布局，該組件不用考慮很多因素，專注于當前的幾種布局模式

  • 多頁簽組件soybean-admin-tab：ChromeTab 和 ButtonTab

    • 支持主題顏色及暗黑模式
    • ChromeTab 類似于瀏覽器的標簽，樣式清新
    • 結合 BetterScroll，實現多頁簽組件的左右鼠標滑動(移動端左右觸摸滑動)，激活狀態(tài)的 Tab 自動居中

  • LoadingEmptyWrapper

    • 支持現實加載狀態(tài)、空狀態(tài)和網絡狀態(tài)的組件
    • 支持主題顏色及暗黑模式
    • 圖片文字大小通過屬性配置