ThingsBoard添加主题定制功能

B站演示地址https://www.bilibili.com/video/bv1RV41177Gb
此文具体代码在文末语雀链接,需额外付费

效果演示

https://www.bilibili.com/video/bv1RV41177Gb

说明：由于CE版没有权限功能，所以不能主题定制功能不能细分到每个用户一套主题。
本文实现的是：定制主题绑定租户，租户管理员和客户用户继承所属租户的主题，且租户管理员可修改主题；不同租户下的租户管理员和客户用户登录后分别显示自己的主题。这个效果在视频中有演示。
后面会发布关于登录界面的主题定制功能，可为每个租户设置专有域名和对应的登录界面。俩者结合就可以做到，对租户界面的特有定制，不同租户都拥有属于自己的UI界面。

资料

ngrx/store
angular canDeactivate
angular canDeactivate CSDN介绍
angular FormBuilder
angular FormGroup
Material Design 组件库 for Angular
material design icons

思路

1. 新建菜单组件，ui-ngx/src/app/modules/home/pages/custom-ui/custom-ui.component.ts,scss,html
2. 添加菜单路由, ui-ngx/src/app/modules/home/pages/home-settings/home-settings-routing.module.ts
   
   其中：canDeactivate: [ConfirmOnExitGuard] 是离开页面时，做出逻辑判断，即下图效果。
   
   实现此效果需要在组件内实现HasDirtyFlag接口，并定义isDirty变量，值为true显示未保存提示，false不显示。自己根据表单控制。详细代码在文末。
   
3. 在模块声明组件，ui-ngx/src/app/modules/home/pages/home-settings/home-settings.module.ts
   
4. 组件表单内容构建，其中图片上传组件可以参考ThingsBoard图片上传组件功能拓展，采用的是tb源码内置的组件
   
5. 国际化，ui-ngx/src/assets/locale/locale.constant-zh_CN.json中加入国际化信息
6. 后端接口开发，无需额外建表，主题信息保存到租户的额外信息中。
7. 前端请求服务开发，为了方便，还是定义到了ui-ngx/src/app/core/http/dashboard.service.ts 和文章的位置一样
8. store相关开发，ui-ngx/src/app/core/core.state.ts，src/app/core/ui。
   1. 在app.component.ts初始化时请求当前登录用户对应租户的主题信息，没有则展示原始主题。并通过store订阅主题状态，改变则重新渲染。
   2. 登录成功后也需要请求一次后端主题信息，因为退出登录到重新登录，app组件不会再次初始化。
   3. home.component.ts也通过store订阅主题状态，用于改变logo和左下角的平台信息
      

具体代码

添加下面的代码即可实现此功能。
为减少文章篇幅，优化阅读体验，代码请滚动查看。
内容确实有点多，如果发现有整理遗漏的地方，请联系告知。

新建菜单组件

ui-ngx/src/app/modules/home/pages/custom-ui/下新建
custom-ui.component.ts

import {
    AfterViewInit, Component, OnInit } from '@angular/core';
import {
    FormBuilder, FormGroup } from '@angular/forms';
import {
    environment as env } from '@env/environment';
import {
    TranslateService } from '@ngx-translate/core';
import {
    DashboardService } from '@core/http/dashboard.service';
import {
    UIInfo } from '@shared/models/dashboard.models';
import {
    Store } from '@ngrx/store';
import {
    AppState } from '@core/core.state';
import {
    ActionTenantUIChangeAll } from '@core/ui/tenant-ui.actions';
import {
    HasDirtyFlag } from '@core/guards/confirm-on-exit.guard';
import {
    TenantUIState } from '@core/ui/tenant-ui.models';
import {
    PageComponent } from '@shared/components/page.component';
import {
    initialState } from '@core/ui/tenant-ui.reducer';

@Component({
   
  selector: 'tb-custom-ui',
  templateUrl: './custom-ui.component.html',
  styleUrls: <