前言
目前市面上關於 Angular Material 的後臺框架比較少，大多都是收費主題，而且都不太好用。
很多人都說 Material 是一個面向 C 端的框架，其實在使用其它框架做管理系統的時候，我發現 Material 的元件基本已經夠用了，其它不足的地方可以配合一些優秀的第三方庫。另外，Material 的確是一個高質量的元件庫，不管是設計思路還是使用方式，都近乎完美。
經過一個多月的設計與思考，我開發了這款基於 Angular Material 的中後臺管理框架，初期架構設計已經完成，在接下來的版本中會提供 schematics 支援及 vscode snippet 工具。同時，為了彌補 Material 的不足以及更好的發揮框架的優勢，我建立了另外一個專案以擴充套件 Material 的元件庫。
因為目前還沒有完善的文件，所以本篇文章會簡單介紹一下框架的使用。
目錄結構
先看一下目錄結構，這個目錄結構遵循了 Angular 的最佳實踐，儘量保證結構的規範化與合理性。
├── src
│ ├── app
│ │ ├── core # 核心模組
│ │ │ ├── interceptors # HTTP 攔截器
│ │ │ │ └── default.interceptor.ts
│ │ │ ├── services
│ │ │ │ ├── settings.service.ts # 頁面佈局配置
│ │ │ │ ├── menu.service.ts # 選單配置
│ │ │ │ └── startup.service.ts # 初始化專案配置
│ │ │ └── core.module.ts # 核心模組檔案
│ │ ├── routes
│ │ │ ├── ** # 業務目錄
│ │ │ ├── routes-routing.module.ts # 業務路由註冊口
│ │ │ └── routes.module.ts # 業務路由模組
│ │ ├── shared # 共享模組
│ │ │ └── shared.module.ts # 共享模組檔案
│ │ ├── theme # 主題目錄
│ │ │ ├── admin-layout # admin 佈局
│ │ │ ├── auth-layout # 登陸註冊佈局
│ │ | └── theme.module.ts # 主題模組
│ │ ├── app.component.ts # 根元件
│ │ └── app.module.ts # 根模組
│ │ └── material.module.ts # Material 元件模組
│ ├── assets # 本地靜態資源
│ ├── environments # 環境變數配置
│ ├── styles # 樣式目錄
│ │ ├── component # 公用元件樣式
│ │ ├── helpers # 工具類
│ │ ├── mixins # mixins
│ │ ├── plugins # 第三方庫樣式
│ │ ├── **
│ │ ├── theme # 主題核心樣式
│ │ └── app.scss # 主題樣式入口檔案
└── └── style.scss # 樣式主入口檔案響應式佈局系統
框架的響應式佈局系統採用了 Angular 官方提供的 flex-layout，包含 flex 以及 grid，確實非常好用。
但是關於列間距問題稍微有點坑，雖然 flex-layout 新增 fxLayoutGap="10px grid" 這樣看似完美的方案，但是還是不太好用，除非每一個元素塊都包含在 fxFlex 中。最終我還是使用業界比較普遍的 margin 負值的方式。需要在 fxLayout 上面新增 .matero-row，在 fxFlex 上面新增 .matero-col，當然這也不是必須的，在某些情況下使用 grid 方式可能更簡單。
配置佈局
通過在 settings 服務中傳入配置物件可以配置頁面的佈局，比如
// 配置選項介面
export interface Defaults {
showHeader?: boolean;
headerPos?: 'fixed' | 'static' | 'above';
navPos?: 'side' | 'top';
sidenavCollapsed?: boolean;
sidenavOpened?: boolean;
showUserPanel?: boolean;
dir?: 'ltr' | 'rtl';
}
// 預設配置選項
const defaults: Defaults = {
showHeader: true,
headerPos: 'fixed',
navPos: 'side',
sidenavCollapsed: false,
sidenavOpened: true,
showUserPanel: true,
dir: 'ltr',
};
// 設定佈局，注入服務，初始化資料後可以執行如下方法
this.settings.setLayout(options)目前關於配置佈局的設計還沒有想好，後期可能會在根模組進行全域性配置，個人覺得更好的方式還是直接調整 layout 的模板，不要使用上面這種配置方式。
配置選單
以下是選單的型別定義
export interface Tag {
color: string; // Background Color
value: string;
}
export interface ChildrenItem {
state: string;
name: string;
type: 'link' | 'sub' | 'extLink' | 'extTabLink';
children?: ChildrenItem[];
}
export interface Menu {
state: string;
name: string;
type: 'link' | 'sub' | 'extLink' | 'extTabLink';
icon: string;
label?: Tag;
badge?: Tag;
children?: ChildrenItem[];
}選單服務會注入到根元件，通過 getAll() 可以獲取到全部選單，同樣是在初始化資料後通過 set() 方法設定好選單。以下是選單的配置示例：
{
"menu": [{
"state": "dashboard",
"name": "Dashboard",
"type": "link",
"icon": "dashboard",
"badge": {
"color": "red-500",
"value": "5"
}
},
{
"state": "design",
"name": "Design",
"type": "sub",
"icon": "color_lens",
"children": [{
"state": "colors",
"name": "Color System",
"type": "link"
},
{
"state": "icons",
"name": "Icons",
"type": "link"
}
]
},
...顏色系統
在預覽頁面，大家可以看到很豐富的顏色，而 Material 本身只有三種主色，通過顏色系統也可以很容易更換顏色。
顏色系統是通過 Material 的官方色值用 sass 生成的，Material 的顏色定義如下，包括主體色系以及對應的對比色系：
red: {
50: '#FFEBEE',
100: '#FFCDD2',
200: '#EF9A9A',
300: '#E57373',
400: '#EF5350',
500: '#F44336',
600: '#E53935',
700: '#D32F2F',
800: '#C62828',
900: '#B71C1C',
A100: '#FF8A80',
A200: '#FF5252',
A400: '#FF1744',
A700: '#D50000',
contrast: {
50: 'dark',
100: 'dark',
200: 'dark',
300: 'dark',
400: 'light',
500: 'light',
600: 'light',
700: 'light',
800: 'light',
900: 'light',
A100: 'dark',
A200: 'light',
A400: 'light',
A700: 'light',
},
}可以直接使用 class 新增顏色，比如背景色可以用 .bg-red-500，文字色則是 .text-red-500，與之對應的對比色可以是 .text-light，.text-dark
輔助類
Helper 編寫延續了 snack-helper 的設計原則，非常簡單，可以參見原始碼，在此不過多闡述，感興趣的朋友可以閱讀我之前寫的文章 如何編寫通用的 Helper Class
開發計劃
目前框架只完成了一期規劃，後面的路還有很長，首先會支援 schematics，可以使用 ng add 來新增專案，同時也會提供 vscode 工具包，最後還希望廣大 ng 愛好者可以加入到專案中來，共建 ng 生態。