共计 3916 个字符，预计需要花费 10 分钟才能阅读完成。
前言
目前市面上关于 Angular Material 的后台框架比较少，大多都是收费主题，而且都不太好用。
很多人都说 Material 是一个面向 C 端的框架，其实在使用其它框架做管理系统的时候，我发现 Material 的组件基本已经够用了，其它不足的地方可以配合一些优秀的第三方库。另外，Material 的确是一个高质量的组件库，不管是设计思路还是使用方式，都近乎完美。
经过一个多月的设计与思考，我开发了这款基于 Angular Material 的中后台管理框架，初期架构设计已经完成，在接下来的版本中会提供 schematics 支持及 vscode snippet 工具。同时，为了弥补 Material 的不足以及更好的发挥框架的优势，我创建了另外一个项目以扩展 Material 的组件库。
因为目前还没有完善的文档，所以本篇文章会简单介绍一下框架的使用。
Github：https://github.com/ng-matero/…
预览地址：https://ng-matero.github.io/n…
目录结构
先看一下目录结构，这个目录结构遵循了 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 生态。
