[web-app] 告警通知-接收人配置和消息策略配置。全局字体基础大小修改为12px

web-app/src/app/pojo/NoticeReceiver.ts

@@ -0,0 +1,14 @@
+export class NoticeReceiver {
+  id!: number;
+  name!: string;
+  // 通知信息方式: 0-手机短信 1-邮箱 2-webhook 3-微信公众号
+  type: number = 1;
+  phone!: string;
+  email!: number;
+  hookUrl!: string;
+  wechatId!: string;
+  creator!: string;
+  modifier!: string;
+  gmtCreate!: number;
+  gmtUpdate!: number;
+}

web-app/src/app/pojo/NoticeRule.ts

@@ -0,0 +1,13 @@
+export class NoticeRule {
+  id!: number;
+  name!: string;
+  receiverId!: string;
+  receiverName!: string;
+  enable: boolean = true;
+  // 是否转发所有
+  filterAll: boolean = true;
+  creator!: string;
+  modifier!: string;
+  gmtCreate!: number;
+  gmtUpdate!: number;
+}

web-app/src/app/routes/alert/alert-notice/alert-notice.component.html

@@ -1 +1,234 @@
-<p>alert-notice works!</p>
+<nz-divider></nz-divider>
+<nz-breadcrumb>
+  <nz-breadcrumb-item>
+    <a [routerLink]="['/']">
+      <i nz-icon nzType="home"></i>
+      <span>仪表盘</span>
+    </a>
+  </nz-breadcrumb-item>
+  <nz-breadcrumb-item>
+    <i nz-icon nzType="alert"></i>
+    <span>告警通知配置</span>
+  </nz-breadcrumb-item>
+</nz-breadcrumb>
+<nz-divider></nz-divider>
+
+<nz-tabset nzSize="large">
+  <nz-tab nzTitle="告警接收人">
+    <button nz-button nzType="primary" (click)="onNewNoticeReceiver()">
+      <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
+      新增接收人
+    </button>
+    <nz-table #fixedTable [nzData]="receivers"
+              nzFrontPagination ="false"
+              [nzLoading] = "receiverTableLoading"
+              [nzScroll]="{ x: '1150px', y: '1240px' }">
+      <thead>
+      <tr>
+        <th nzAlign="center">接收人</th>
+        <th nzAlign="center">通知方式</th>
+        <th nzAlign="center">配置</th>
+        <th nzAlign="center">最新修改时间</th>
+        <th nzAlign="center" nzRight>操作</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let data of fixedTable.data">
+       <td nzAlign="center">
+          <span>{{ data.name}}</span>
+        </td>
+        <td nzAlign="center">
+          <nz-tag *ngIf="data.type == 0" nzColor="red">
+            <i nz-icon nzType="notification" nzTheme="outline"></i>
+            <span>短信</span>
+          </nz-tag>
+          <nz-tag *ngIf="data.type == 1" nzColor="orange">
+            <i nz-icon nzType="notification" nzTheme="outline"></i>
+            <span>邮件</span>
+          </nz-tag>
+          <nz-tag *ngIf="data.type == 2" nzColor="yellow">
+            <i nz-icon nzType="notification" nzTheme="outline"></i>
+            <span>WebHook</span>
+          </nz-tag>
+          <nz-tag *ngIf="data.type == 3" nzColor="yellow">
+            <i nz-icon nzType="notification" nzTheme="outline"></i>
+            <span>微信公众号</span>
+          </nz-tag>
+        </td>
+        <td nzAlign="center">
+          <span *ngIf="data.type == 0">{{data.phone}}</span>
+          <span *ngIf="data.type == 1">{{data.email}}</span>
+          <span *ngIf="data.type == 2">{{data.hookUrl}}</span>
+          <span *ngIf="data.type == 3">{{data.wechatId}}</span>
+        </td>
+        <td nzAlign="center">{{ data.gmtUpdate? data.gmtUpdate : data.gmtCreate }}</td>
+        <td nzAlign="center" nzRight>
+          <button nz-button nzType="primary" (click)="onEditOneNoticeReceiver(data)">
+            <i nz-icon nzType="edit" nzTheme="outline"></i>
+          </button>
+          <button nz-button nzType="primary" (click)="onDeleteOneNoticeReceiver(data.id)">
+            <i nz-icon nzType="delete" nzTheme="outline"></i>
+          </button>
+        </td>
+      </tr>
+      </tbody>
+    </nz-table>
+  </nz-tab>
+  <nz-tab nzTitle="告警通知策略">
+    <button nz-button nzType="primary" (click)="onNewNoticeRule()">
+      <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
+      新增通知策略
+    </button>
+    <nz-table #ruleFixedTable [nzData]="rules"
+              nzFrontPagination ="false"
+              [nzLoading] = "ruleTableLoading"
+              [nzScroll]="{ x: '1150px', y: '1240px' }">
+      <thead>
+      <tr>
+        <th nzAlign="center">策略名称</th>
+        <th nzAlign="center">接收人</th>
+        <th nzAlign="center">转发所有</th>
+        <th nzAlign="center">最新修改时间</th>
+        <th nzAlign="center" nzRight>操作</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let data of ruleFixedTable.data">
+        <td nzAlign="center">
+          <span>{{ data.name}}</span>
+        </td>
+        <td nzAlign="center">
+          <span>{{ data.receiverName}}</span>
+        </td>
+        <td nzAlign="center">
+          <nz-tag *ngIf="data.filterAll" nzColor="green">
+            <span>是</span>
+          </nz-tag>
+          <nz-tag *ngIf="!data.filterAll" nzColor="orange">
+            <span>否</span>
+          </nz-tag>
+        </td>
+        <td nzAlign="center">{{ data.gmtUpdate? data.gmtUpdate : data.gmtCreate }}</td>
+        <td nzAlign="center" nzRight>
+          <button nz-button nzType="primary" (click)="onEditOneNoticeRule(data)">
+            <i nz-icon nzType="edit" nzTheme="outline"></i>
+          </button>
+          <button nz-button nzType="primary" (click)="onDeleteOneNoticeRule(data.id)">
+            <i nz-icon nzType="delete" nzTheme="outline"></i>
+          </button>
+        </td>
+      </tr>
+      </tbody>
+    </nz-table>
+  </nz-tab>
+</nz-tabset>
+
+
+<!-- 新增或修改通知接收人弹出框 -->
+<nz-modal
+  [(nzVisible)]="isManageReceiverModalVisible"
+  [nzTitle]="isManageReceiverModalAdd?'新增接收人' : '修改接收人'"
+  (nzOnCancel)="onManageReceiverModalCancel()"
+  (nzOnOk)="onManageReceiverModalOk()"
+  nzMaskClosable="false"
+  nzWidth="60%"
+  [nzOkLoading]="isManageReceiverModalOkLoading"
+>
+  <div *nzModalContent class = "-inner-content">
+    <form nz-form>
+      <nz-form-item>
+        <nz-form-label [nzSpan]="7" nzFor= 'name' nzRequired="true">接收人名称</nz-form-label>
+        <nz-form-control [nzSpan]="8">
+          <input [(ngModel)]="receiver.name" nz-input name="name" type="text" id="name">
+        </nz-form-control>
+      </nz-form-item >
+      <nz-form-item>
+        <nz-form-label nzSpan="7"
+                       nzRequired="true"
+                       nzFor= "type">通知方式
+        </nz-form-label>
+        <nz-form-control nzSpan="8">
+          <nz-select
+            [(ngModel)]="receiver.type"
+            nzAllowClear
+            nzPlaceHolder="Choose"
+            name="type" id="type"
+          >
+            <nz-option [nzValue]="0" nzDisabled nzLabel="短信"></nz-option>
+            <nz-option [nzValue]="1" nzLabel="邮箱"></nz-option>
+            <nz-option [nzValue]="2" nzLabel="WebHook"></nz-option>
+            <nz-option [nzValue]="3" nzDisabled nzLabel="微信公众号"></nz-option>
+          </nz-select>
+        </nz-form-control>
+      </nz-form-item>
+      <nz-form-item *ngIf="receiver.type === 0">
+        <nz-form-label [nzSpan]="7" nzFor= 'phone' [nzRequired]="receiver.type === 0">手机号</nz-form-label>
+        <nz-form-control [nzSpan]="8">
+          <input [(ngModel)]="receiver.phone" nz-input name="phone" type="tel" id="phone">
+        </nz-form-control>
+      </nz-form-item >
+      <nz-form-item *ngIf="receiver.type === 1">
+        <nz-form-label [nzSpan]="7" nzFor= 'email' [nzRequired]="receiver.type === 1">邮箱</nz-form-label>
+        <nz-form-control [nzSpan]="8">
+          <input [(ngModel)]="receiver.email" nz-input name="email" type="email" id="email">
+        </nz-form-control>
+      </nz-form-item >
+      <nz-form-item *ngIf="receiver.type === 2">
+        <nz-form-label [nzSpan]="7" nzFor= 'hookUrl' [nzRequired]="receiver.type === 2">URL地址</nz-form-label>
+        <nz-form-control [nzSpan]="8">
+          <input [(ngModel)]="receiver.hookUrl" nz-input name="hookUrl" type="url" id="hookUrl">
+        </nz-form-control>
+      </nz-form-item >
+      <nz-form-item *ngIf="receiver.type === 3">
+        <nz-form-label [nzSpan]="7" nzFor= 'wechatId' [nzRequired]="receiver.type === 3">微信OPENID</nz-form-label>
+        <nz-form-control [nzSpan]="8">
+          <input [(ngModel)]="receiver.wechatId" nz-input name="wechatId" type="text" id="wechatId">
+        </nz-form-control>
+      </nz-form-item >
+    </form>
+  </div>
+</nz-modal>
+
+<!-- 新增或修改通知策略弹出框 -->
+<nz-modal
+  [(nzVisible)]="isManageRuleModalVisible"
+  [nzTitle]="isManageRuleModalAdd?'新增策略' : '修改策略'"
+  (nzOnCancel)="onManageRuleModalCancel()"
+  (nzOnOk)="onManageRuleModalOk()"
+  nzMaskClosable="false"
+  nzWidth="60%"
+  [nzOkLoading]="isManageRuleModalOkLoading"
+>
+  <div *nzModalContent class = "-inner-content">
+    <form nz-form>
+      <nz-form-item>
+        <nz-form-label [nzSpan]="7" nzFor= 'rule_name' nzRequired="true">策略名称</nz-form-label>
+        <nz-form-control [nzSpan]="8">
+          <input [(ngModel)]="rule.name" nz-input name="rule_name" type="text" id="rule_name">
+        </nz-form-control>
+      </nz-form-item >
+      <nz-form-item>
+        <nz-form-label nzSpan="7" nzRequired="true" nzFor= "filterAll">全局默认</nz-form-label>
+        <nz-form-control nzSpan="8">
+          <nz-switch [(ngModel)]="rule.filterAll" name="filterAll" id="filterAll"></nz-switch>
+        </nz-form-control>
+      </nz-form-item >
+      <nz-form-item>
+        <nz-form-label nzSpan="7" nzRequired="true" nzFor= "receiver">全局默认</nz-form-label>
+        <nz-form-control nzSpan="8">
+          <nz-select
+            [(ngModel)]="rule.receiverId"
+            nzAllowClear
+            nzPlaceHolder="Choose"
+            name="receiver" id="receiver"
+          >
+            <!--todo 消息接收人选择-->
+            <nz-option [nzValue]="0" [nzLabel]="rule.receiverName"></nz-option>
+            <nz-option [nzValue]="1" [nzLabel]="rule.receiverName"></nz-option>
+            <nz-option [nzValue]="2" [nzLabel]="rule.receiverName"></nz-option>
+          </nz-select>
+        </nz-form-control>
+      </nz-form-item >
+    </form>
+  </div>
+</nz-modal>

web-app/src/app/routes/alert/alert-notice/alert-notice.component.ts

@@ -1,4 +1,13 @@
 import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute, Router} from "@angular/router";
+import {NzModalService} from "ng-zorro-antd/modal";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {NzMessageService} from "ng-zorro-antd/message";
+import {NoticeReceiverService} from "../../../service/notice-receiver.service";
+import {NoticeRuleService} from "../../../service/notice-rule.service";
+import {NoticeReceiver} from "../../../pojo/NoticeReceiver";
+import {finalize} from "rxjs/operators";
+import {NoticeRule} from "../../../pojo/NoticeRule";
 
 @Component({
   selector: 'app-alert-notice',
@@ -8,9 +17,209 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AlertNoticeComponent implements OnInit {
 
-  constructor() { }
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private modal: NzModalService,
+              private notifySvc: NzNotificationService,
+              private msg: NzMessageService,
+              private noticeReceiverSvc: NoticeReceiverService,
+              private noticeRuleSvc : NoticeRuleService) { }
+
+  receivers!: NoticeReceiver[];
+  receiverTableLoading: boolean = true;
+  rules!: NoticeRule[];
+  ruleTableLoading: boolean = true;
 
   ngOnInit(): void {
+    this.loadReceiversTable();
+    this.loadRulesTable();
+  }
+
+  loadReceiversTable() {
+    this.receiverTableLoading = true;
+    let receiverInit$ = this.noticeReceiverSvc.getReceivers()
+      .subscribe(message => {
+        this.receiverTableLoading = false;
+        if (message.code === 0) {
+          this.receivers = message.data;
+        } else {
+          console.warn(message.msg);
+        }
+        receiverInit$.unsubscribe();
+      }, error => {
+        this.receiverTableLoading = false;
+        receiverInit$.unsubscribe();
+      });
+  }
+  loadRulesTable() {
+    this.ruleTableLoading = true;
+    let rulesInit$ = this.noticeRuleSvc.getNoticeRules()
+      .subscribe(message => {
+        this.ruleTableLoading = false;
+        if (message.code === 0) {
+          this.rules = message.data;
+        } else {
+          console.warn(message.msg);
+        }
+        rulesInit$.unsubscribe();
+      }, error => {
+        this.ruleTableLoading = false;
+        rulesInit$.unsubscribe();
+      });
+  }
+
+  onDeleteOneNoticeReceiver(receiveId : number) {
+    const deleteReceiver$ = this.noticeReceiverSvc.deleteReceiver(receiveId)
+      .pipe(finalize(() => {
+        deleteReceiver$.unsubscribe();
+      }))
+      .subscribe(message => {
+        if (message.code === 0) {
+          this.notifySvc.success("删除成功！", "");
+          this.loadReceiversTable();
+        } else {
+          this.notifySvc.error("删除失败！", message.msg);
+        }
+      }, error => {
+        this.notifySvc.error("删除失败！", error.msg);
+      })
+  }
+
+  onDeleteOneNoticeRule(ruleId : number) {
+    const deleteRule$ = this.noticeRuleSvc.deleteNoticeRule(ruleId)
+      .pipe(finalize(() => {
+        deleteRule$.unsubscribe();
+      }))
+      .subscribe(message => {
+        if (message.code === 0) {
+          this.notifySvc.success("删除成功！", "");
+          this.loadRulesTable();
+        } else {
+          this.notifySvc.error("删除失败！", message.msg);
+        }
+      }, error => {
+        this.notifySvc.error("删除失败！", error.msg);
+      })
+  }
+
+  // start 新增或修改通知接收人弹出框
+  isManageReceiverModalVisible : boolean = false;
+  isManageReceiverModalAdd: boolean = true;
+  isManageReceiverModalOkLoading: boolean = false;
+  receiver!: NoticeReceiver;
+
+  onNewNoticeReceiver() {
+    this.receiver = new NoticeReceiver();
+    this.isManageReceiverModalVisible = true;
+    this.isManageReceiverModalAdd = true;
+  }
+  onEditOneNoticeReceiver(receiver : NoticeReceiver) {
+    this.receiver = receiver;
+    this.isManageReceiverModalVisible = true;
+    this.isManageReceiverModalAdd = false;
+  }
+
+  onManageReceiverModalCancel() {
+    this.isManageReceiverModalVisible = false;
+  }
+  onManageReceiverModalOk() {
+    this.isManageReceiverModalOkLoading = true;
+    if (this.isManageReceiverModalAdd) {
+      const modalOk$ = this.noticeReceiverSvc.newReceiver(this.receiver)
+        .pipe(finalize(() => {
+          modalOk$.unsubscribe();
+          this.isManageReceiverModalOkLoading = false;
+        }))
+        .subscribe(message => {
+          if (message.code === 0) {
+            this.isManageReceiverModalVisible = false;
+            this.notifySvc.success("新增成功！", "");
+            this.loadReceiversTable();
+          } else {
+            this.notifySvc.error("新增失败！", message.msg);
+          }
+        }, error => {
+          this.notifySvc.error("新增失败！", error.msg);
+        })
+    } else {
+      const modalOk$ = this.noticeReceiverSvc.editReceiver(this.receiver)
+        .pipe(finalize(() => {
+          modalOk$.unsubscribe();
+          this.isManageReceiverModalOkLoading = false;
+        }))
+        .subscribe(message => {
+          if (message.code === 0) {
+            this.isManageReceiverModalVisible = false;
+            this.notifySvc.success("修改成功！", "");
+            this.loadReceiversTable();
+          } else {
+            this.notifySvc.error("修改失败！", message.msg);
+          }
+        }, error => {
+          this.notifySvc.error("修改失败！", error.msg);
+        })
+    }
+  }
+
+  // start 新增或修改通知策略弹出框
+  isManageRuleModalVisible : boolean = false;
+  isManageRuleModalAdd: boolean = true;
+  isManageRuleModalOkLoading: boolean = false;
+  rule!: NoticeRule;
+
+  onNewNoticeRule() {
+    this.rule = new NoticeRule();
+    this.isManageRuleModalVisible = true;
+    this.isManageRuleModalAdd = true;
+  }
+
+  onEditOneNoticeRule(rule : NoticeRule) {
+    this.rule = rule;
+    this.isManageRuleModalVisible = true;
+    this.isManageRuleModalAdd = false;
+  }
+
+  onManageRuleModalCancel() {
+    this.isManageRuleModalVisible = false;
+  }
+
+  onManageRuleModalOk() {
+    this.isManageRuleModalOkLoading = true;
+    if (this.isManageRuleModalAdd) {
+      const modalOk$ = this.noticeRuleSvc.newNoticeRule(this.rule)
+        .pipe(finalize(() => {
+          modalOk$.unsubscribe();
+          this.isManageRuleModalOkLoading = false;
+        }))
+        .subscribe(message => {
+          if (message.code === 0) {
+            this.isManageRuleModalVisible = false;
+            this.notifySvc.success("新增成功！", "");
+            this.loadRulesTable();
+          } else {
+            this.notifySvc.error("新增失败！", message.msg);
+          }
+        }, error => {
+          this.notifySvc.error("新增失败！", error.msg);
+        })
+    } else {
+      const modalOk$ = this.noticeRuleSvc.editNoticeRule(this.rule)
+        .pipe(finalize(() => {
+          modalOk$.unsubscribe();
+          this.isManageRuleModalOkLoading = false;
+        }))
+        .subscribe(message => {
+          if (message.code === 0) {
+            this.isManageRuleModalVisible = false;
+            this.notifySvc.success("修改成功！", "");
+            this.loadRulesTable();
+          } else {
+            this.notifySvc.error("修改失败！", message.msg);
+          }
+        }, error => {
+          this.notifySvc.error("修改失败！", error.msg);
+        })
+    }
   }
 
 }

web-app/src/app/routes/alert/alert.module.ts

@@ -19,17 +19,17 @@ const COMPONENTS: Type<void>[] = [
 ];
 
 @NgModule({
-  imports: [
-    SharedModule,
-    AlertRoutingModule,
-    NzDividerModule,
-    NzBreadCrumbModule,
-    NzTagModule,
-    NzRadioModule,
-    NzSwitchModule,
-    NzCascaderModule,
-    NzTransferModule,
-  ],
+    imports: [
+        SharedModule,
+        AlertRoutingModule,
+        NzDividerModule,
+        NzBreadCrumbModule,
+        NzTagModule,
+        NzRadioModule,
+        NzSwitchModule,
+        NzCascaderModule,
+        NzTransferModule
+    ],
   declarations: COMPONENTS,
 })
 export class AlertModule { }

web-app/src/app/service/notice-receiver.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { NoticeReceiverService } from './notice-receiver.service';
+
+describe('NoticeReceiverService', () => {
+  let service: NoticeReceiverService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(NoticeReceiverService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

web-app/src/app/service/notice-receiver.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs";
+import {Message} from "../pojo/Message";
+import {NoticeReceiver} from "../pojo/NoticeReceiver";
+
+const notice_receiver_uri = '/notice/receiver';
+const notice_receivers_uri = '/notice/receivers';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NoticeReceiverService {
+
+  constructor(private http : HttpClient) { }
+
+  public newReceiver(body: NoticeReceiver) : Observable<Message<any>> {
+    return this.http.post<Message<any>>(notice_receiver_uri, body);
+  }
+
+  public editReceiver(body: NoticeReceiver) : Observable<Message<any>> {
+    return this.http.put<Message<any>>(notice_receiver_uri, body);
+  }
+  public deleteReceiver(receiverId: number) : Observable<Message<any>> {
+    return this.http.delete<Message<any>>(`${notice_receiver_uri}/${receiverId}`);
+  }
+
+  public getReceivers() : Observable<Message<NoticeReceiver[]>> {
+    return this.http.get<Message<NoticeReceiver[]>>(notice_receivers_uri);
+  }
+
+}

web-app/src/app/service/notice-rule.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { NoticeRuleService } from './notice-rule.service';
+
+describe('NoticeRuleService', () => {
+  let service: NoticeRuleService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(NoticeRuleService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

web-app/src/app/service/notice-rule.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import {Observable} from "rxjs";
+import {Message} from "../pojo/Message";
+import {HttpClient} from "@angular/common/http";
+import {NoticeRule} from "../pojo/NoticeRule";
+
+const notice_rule_uri = '/notice/rule';
+const notice_rules_uri = '/notice/rules';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NoticeRuleService {
+
+  constructor(private http : HttpClient) { }
+
+  public newNoticeRule(body: NoticeRule) : Observable<Message<any>> {
+    return this.http.post<Message<any>>(notice_rule_uri, body);
+  }
+
+  public editNoticeRule(body: NoticeRule) : Observable<Message<any>> {
+    return this.http.put<Message<any>>(notice_rule_uri, body);
+  }
+
+  public deleteNoticeRule(ruleId: number) : Observable<Message<any>> {
+    return this.http.delete<Message<any>>(`${notice_rule_uri}/${ruleId}`);
+  }
+
+  public getNoticeRules() : Observable<Message<NoticeRule[]>> {
+    return this.http.get<Message<NoticeRule[]>>(notice_rules_uri);
+  }
+}

web-app/src/assets/tmp/app-data.json

@@ -99,7 +99,7 @@
           "link": "/alert/setting"
         },
         {
-          "text": "告警转发",
+          "text": "告警通知",
           "i18n": "menu.alert.dispatch",
           "icon": "anticon-notification",
           "link": "/alert/notice"

web-app/src/assets/tmp/i18n/zh-CN.json

@@ -25,7 +25,7 @@
       "": "告警",
       "center": "告警中心",
       "setting": "告警配置",
-      "dispatch": "告警转发"
+      "dispatch": "告警通知"
     },
     "extras": {
       "": "更多",

web-app/src/styles/theme.less

@@ -8,6 +8,9 @@
 // The theme parameters can be generated at https://ng-alain.github.io/ng-alain/
 // @primary-color: #f50;
 @primary-color: #722ED1;
+@font-size-base: 12px;
+@nz-table-rep-padding-vertical: 2px;
+@nz-table-rep-padding-horizontal: 2px;
 @alain-default-header-hg: 52px;
 @alain-default-header-bg: #722ED1;
 @alain-default-header-padding: 8px;