Ng-Matero：基于 Angular Material 搭建的中后台管理框架
<p><img src="https://img2020.cnblogs.com/blog/999445/202007/999445-20200711094747853-239256042.jpg" alt="" loading="lazy"></p><blockquote>
<p>Ng-Matero 0.1 已发布，添加 schamatics，支持 ng add</p>
</blockquote>
<h2 id="前言">前言</h2>
<p>目前市面上关于 Angular Material 的后台框架比较少，大多都是收费主题，而且都不太好用。</p>
<p>很多人都说 Material 是一个面向 C 端的框架，其实在使用其它框架做管理系统的时候，我发现 Material 的组件基本已经够用了，其它不足的地方可以配合一些优秀的第三方库。另外，Material 的确是一个高质量的组件库，不管是设计思路还是使用方式，都近乎完美。</p>
<p>经过一个多月的设计与思考，我开发了这款基于 Angular Material 的中后台管理框架，初期架构设计已经完成，在接下来的版本中会提供 schematics 支持及 vscode snippet 工具。同时，为了弥补 Material 的不足以及更好的发挥框架的优势，我创建了另外一个项目以扩展 Material 的组件库。</p>
<p>因为目前还没有完善的文档，所以本篇文章会简单介绍一下框架的使用。</p>
<blockquote>
<p>Github： https://github.com/ng-matero/ng-matero</p>
<p>预览地址： https://ng-matero.github.io/ng-matero/</p>
</blockquote>
<p><img src="https://img2018.cnblogs.com/blog/999445/201908/999445-20190801095112981-392973179.jpg" alt="" loading="lazy"></p>
<h2 id="目录结构">目录结构</h2>
<p>先看一下目录结构，这个目录结构遵循了 Angular 的最佳实践，尽量保证结构的规范化与合理性。</p>
<pre><code class="language-plain">├── 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 # 样式主入口文件
</code></pre>
<h2 id="响应式布局系统">响应式布局系统</h2>
<p>框架的响应式布局系统采用了 Angular 官方提供的 flex-layout，包含 flex 以及 grid，确实非常好用。</p>
<p>但是关于列间距问题稍微有点坑，虽然 flex-layout 增加了 <code>fxLayoutGap="16px grid"</code> 这样看似完美的方案，但是还是不太好用，除非每一个元素块都包含在 fxFlex 中。最终我还是使用业界比较普遍的 margin 负值的方式。需要在 fxLayout 上面添加 <code>.matero-row</code>，在 fxFlex 上面添加 <code>.matero-col</code>，当然这也不是必须的，在某些情况下使用 grid 方式可能更简单。</p>
<pre><code class="language-html"><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>
</code></pre>
<h2 id="配置布局">配置布局</h2>
<p>通过在 settings 服务中传入配置对象可以配置页面的布局，比如</p>
<pre><code class="language-js">// 配置选项接口
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)
</code></pre>
<p>目前关于配置布局的设计还没有想好，后期可能会在根模块进行全局配置，个人觉得更好的方式还是直接调整 layout 的模板，不要使用上面这种配置方式。</p>
<h2 id="配置菜单">配置菜单</h2>
<p>以下是菜单的类型定义</p>
<pre><code class="language-js">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[];
}
</code></pre>
<p>菜单服务会注入到根组件，通过 <code>getAll()</code> 可以获取到全部菜单，同样是在初始化数据后通过 <code>set()</code> 方法设置好菜单。以下是菜单的配置示例：</p>
<pre><code class="language-json">{
"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"
}]
}]
}
</code></pre>
<h2 id="颜色系统">颜色系统</h2>
<p><img src="https://img2018.cnblogs.com/blog/999445/201907/999445-20190710235022132-2118257866.jpg" alt="" loading="lazy"></p>
<p>在预览页面，大家可以看到很丰富的颜色，而 Material 本身只有三种主色，通过颜色系统也可以很容易更换颜色。</p>
<p>颜色系统是通过 Material 的官方色值用 sass 生成的，Material 的颜色定义如下，包括主体色值以及对应的对比色值：</p>
<pre><code class="language-json">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',
},
}
</code></pre>
<p>可以直接使用 class 添加颜色，比如背景色可以用 <code>.bg-red-500</code>，文本色则是 <code>.text-red-500</code>，与之对应的对比色可以是 <code>.text-light</code>，<code>.text-dark</code></p>
<h2 id="页面标题">页面标题</h2>
<p>框架默认提供了 <code>page-header</code> 和 <code>breadcrumb</code> 两个通用组件，其中 <code>page-header</code> 默认包含<code>breadcrumb</code>，可以通过设置 <code>showBreadCrumb="false"</code> 关闭面包屑，另外可以通过 <code>title</code> 和 <code>subtitle</code> 设置标题和副标题，<code>page-header</code> 同样支持颜色系统，可以直接添加颜色类来改变页面标题部分的颜色，如下：</p>
<pre><code class="language-html"><page-header class="bg-purple-500"></page-header>
</code></pre>
<h2 id="辅助类">辅助类</h2>
<p>Helper 编写延续了 snack-helper 的设计原则，非常简单，可以参见源码，在此不过多阐述，感兴趣的朋友可以阅读我之前写的文章 如何编写通用的 Helper Class</p>
<h2 id="开发计划">开发计划</h2>
<p>目前框架只完成了一期规划，后面的路还有很长，首先会支持 schematics，可以使用 <code>ng add</code> 来添加项目，同时也会提供 vscode 工具包，最后还希望广大 ng 爱好者可以加入到项目中来，共建 ng 生态。</p>
<p><img src="https://img2018.cnblogs.com/blog/999445/201909/999445-20190919105319134-685276492.jpg" alt="" loading="lazy"></p>
</div>
<div id="MySignature" role="contentinfo">
<div class="signature-main">
<p>感谢您的阅读，如果您对我的文章感兴趣，可以关注我的博客，我是叙帝利，下篇文章再见！</p>
<hr>
<p>高颜值的渐变编辑器组件，支持所有 CSS 渐变语法 https://github.com/acrodata/gradient-picker</p>
<p>一款小而美的颜色选择器组件 https://github.com/acrodata/color-picker</p>
<p>低代码平台必备轻量级 GUI 库 https://github.com/acrodata/gui</p>
<p>适用于 Angular 的 CodeMirror 6 组件 https://github.com/acrodata/code-editor</p>
<p>适用于 Angular 的水印组件（防删除，盲水印） https://github.com/acrodata/watermark</p>
<p>支持拖拽和缩放的弹窗组件 https://github.com/acrodata/rnd-dialog</p>
<p>开发低代码平台的必备拖拽库 https://github.com/ng-dnd/ng-dnd</p>
<p>基于 Angular Material 的中后台管理框架 https://github.com/ng-matero/ng-matero</p>
<p>Angular Material Extensions 扩展组件库 https://github.com/ng-matero/extensions</p>
<p>Unslider 轮播图插件纯 JS 实现 https://github.com/nzbin/unsliderjs</p>
<p>仿 Windows 照片查看器插件 https://github.com/nzbin/photoviewer</p>
<p>仿 Windows 照片查看器插件 jQuery 版 https://github.com/nzbin/magnify</p>
<p>完美替代 jQuery 的模块化 DOM 库 https://github.com/nzbin/domq</p>
<p>简化类名的轻量级 CSS 框架 https://github.com/nzbin/snack</p>
<p>与任意 UI 框架搭配使用的通用辅助类 https://github.com/nzbin/snack-helper</p>
<p>单元素纯 CSS 加载动画 https://github.com/nzbin/three-dots</p>
<p>有趣的 jQuery 卡片抽奖插件 https://github.com/nzbin/CardShow</p>
<p>悬疑科幻电影推荐 https://github.com/nzbin/movie-gallery</p>
<p>锻炼记忆力的小程序 https://github.com/nzbin/memory-stake</p>
</div><br><br>
来源：https://www.cnblogs.com/nzbin/p/11150811.html
頁:
[1]