Ng-Matero：基於 Angular Material 搭建的中後臺管理框架

Ng-Matero 0.1 已發佈，添加 schamatics，支持 ng add

前言

目前市面上關於 Angular Material 的後臺框架比較少，大多都是收費主題，並且都不太好用。

不少人都說 Material 是一個面向 C 端的框架，其實在使用其它框架作管理系統的時候，我發現 Material 的組件基本已經夠用了，其它不足的地方能夠配合一些優秀的第三方庫。另外，Material 的確是一個高質量的組件庫，不論是設計思路仍是使用方式，都近乎完美。

通過一個多月的設計與思考，我開發了這款基於 Angular Material 的中後臺管理框架，初期架構設計已經完成，在接下來的版本中會提供 schematics 支持及 vscode snippet 工具。同時，爲了彌補 Material 的不足以及更好的發揮框架的優點，我建立了另一個項目以擴展 Material 的組件庫。

由於目前尚未完善的文檔，因此本篇文章會簡單介紹一下框架的使用。

Github： github.com/ng-matero/n…

預覽地址： ng-matero.github.io/ng-matero/

目錄結構

先看一下目錄結構，這個目錄結構遵循了 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="16px grid" 這樣看似完美的方案，可是仍是不太好用，除非每個元素塊都包含在 fxFlex 中。最終我仍是使用業界比較廣泛的 margin 負值的方式。須要在 fxLayout 上面添加 .matero-row，在 fxFlex 上面添加 .matero-col，固然這也不是必須的，在某些狀況下使用 grid 方式可能更簡單。

<div class="matero-row" fxLayout="row wrap">
    <div class="matero-col" fxFlex.gt-sm="60" fxFlex="100">
    ...
    </div>
</div>
複製代碼

<div fxLayout="row wrap" fxLayoutGap="16px grid">
    <div fxFlex.gt-sm="60" fxFlex="100">
    ...
    </div>
</div>
複製代碼

配置佈局

經過在 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

頁面標題

框架默認提供了 page-header 和 breadcrumb 兩個通用組件，其中 page-header 默認包含 breadcrumb，能夠經過設置 showBreadCrumb="false" 關閉面包屑，另外能夠經過 title 和 subtitle 設置標題和副標題，page-header 一樣支持顏色系統，能夠直接添加顏色類來改變頁面標題部分的顏色，以下：

<page-header class="bg-purple-500"></page-header>
複製代碼

輔助類

Helper 編寫延續了 snack-helper 的設計原則，很是簡單，能夠參見源碼，在此不過多闡述，感興趣的朋友能夠閱讀我以前寫的文章 如何編寫通用的 Helper Class

開發計劃

目前框架只完成了一期規劃，後面的路還有很長，首先會支持 schematics，可使用 ng add 來添加項目，同時也會提供 vscode 工具包，最後還但願廣大 ng 愛好者能夠加入到項目中來，共建 ng 生態。