[webapp, docs]support en readme and webapp (#83)

* [docs]support en docs

* [docs]support en webapp

* [web-app]dashboard and monitor list i18n

* [web-app]i18n for monitor list

* [web-app]i18n for add edit monitor

* [web-app]i18n for monitor detail

* [web-app]i18n for login

* [web-app]i18n for alert center

* [web-app]i18n for alert notice

* [web-app]i18n for alert setting

* [web-app]i18n for notify

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

@@ -3,12 +3,12 @@
   <nz-breadcrumb-item>
     <a [routerLink]="['/']">
       <i nz-icon nzType="home"></i>
-      <span>仪表盘</span>
+      <span>{{ 'menu.dashboard' | i18n }}</span>
     </a>
   </nz-breadcrumb-item>
   <nz-breadcrumb-item>
     <i nz-icon nzType="alert"></i>
-    <span>告警中心</span>
+    <span>{{ 'menu.alert.center' | i18n }}</span>
   </nz-breadcrumb-item>
 </nz-breadcrumb>
 <nz-divider></nz-divider>
@@ -16,26 +16,28 @@
 <div>
   <button nz-button nzType="primary" (click)="onDeleteAlerts()">
     <i nz-icon nzType="delete" nzTheme="outline"></i>
-    删除告警
+    {{ 'alert.center.delete' | i18n }}
   </button>
   <button nz-button nzType="primary" (click)="onMarkReadAlerts()">
     <i nz-icon nzType="down-circle" nzTheme="outline"></i>
-    标记已处理
+    {{ 'alert.center.deal' | i18n }}
   </button>
   <button nz-button nzType="primary" (click)="onMarkUnReadAlerts()">
     <i nz-icon nzType="up-circle" nzTheme="outline"></i>
-    标记未处理
+    {{ 'alert.center.no-deal' | i18n }}
   </button>
-  <button nz-button nzType="primary" (click)="sync()" nz-tooltip nzTooltipTitle="刷新">
+  <button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
     <i nz-icon nzType="sync" nzTheme="outline"></i>
   </button>
 
-  <button style="margin-right: 25px; float: right" nz-button nzType="primary" (click)="onFilterSearchAlerts()"> 搜索 </button>
+  <button style="margin-right: 25px; float: right" nz-button nzType="primary" (click)="onFilterSearchAlerts()">
+    {{ 'common.search' | i18n }}
+  </button>
   <input
     style="margin-right: 5px; float: right; width: 150px; border-radius: 9px; text-align: center"
     nz-input
     type="text"
-    placeholder="搜索告警内容"
+    [placeholder]="'alert.center.search' | i18n"
     nzSize="default"
     (keyup.enter)="onFilterSearchAlerts()"
     [(ngModel)]="filterContent"
@@ -43,23 +45,24 @@
   <nz-select
     style="margin-right: 10px; float: right; width: 120px"
     nzAllowClear
-    [nzPlaceHolder]="'告警状态过滤'"
+    [nzPlaceHolder]="'alert.center.filter-status' | i18n"
     [(ngModel)]="filterStatus"
   >
-    <nz-option nzLabel="全部状态" nzValue="9"></nz-option>
-    <nz-option nzLabel="未处理" nzValue="0"></nz-option>
-    <nz-option nzLabel="已处理" nzValue="3"></nz-option>
+    <nz-option [nzLabel]="'alert.status.all' | i18n" nzValue="9"></nz-option>
+    <nz-option [nzLabel]="'alert.status.0' | i18n" nzValue="0"></nz-option>
+    <nz-option [nzLabel]="'alert.status.2' | i18n" nzValue="2"></nz-option>
+    <nz-option [nzLabel]="'alert.status.3' | i18n" nzValue="3"></nz-option>
   </nz-select>
   <nz-select
     style="margin-right: 10px; float: right; width: 120px"
     nzAllowClear
-    [nzPlaceHolder]="'告警级别过滤'"
+    [nzPlaceHolder]="'alert.center.filter-priority' | i18n"
     [(ngModel)]="filterPriority"
   >
-    <nz-option nzLabel="全部级别" nzValue="9"></nz-option>
-    <nz-option nzLabel="警告级别" nzValue="2"></nz-option>
-    <nz-option nzLabel="严重级别" nzValue="1"></nz-option>
-    <nz-option nzLabel="紧急级别" nzValue="0"></nz-option>
+    <nz-option [nzLabel]="'alert.priority.all' | i18n" nzValue="9"></nz-option>
+    <nz-option [nzLabel]="'alert.priority.2' | i18n" nzValue="2"></nz-option>
+    <nz-option [nzLabel]="'alert.priority.1' | i18n" nzValue="1"></nz-option>
+    <nz-option [nzLabel]="'alert.priority.0' | i18n" nzValue="0"></nz-option>
   </nz-select>
 </div>
 
@@ -81,13 +84,13 @@
   <thead>
     <tr>
       <th nzAlign="center" nzLeft nzWidth="4%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
-      <th nzAlign="center" nzLeft>告警指标</th>
-      <th nzAlign="center">所属监控</th>
-      <th nzAlign="center">级别</th>
-      <th nzAlign="center">告警内容</th>
-      <th nzAlign="center">状态</th>
-      <th nzAlign="center">告警时间</th>
-      <th nzAlign="center">操作</th>
+      <th nzAlign="center" nzLeft>{{ 'alert.center.target' | i18n }}</th>
+      <th nzAlign="center">{{ 'alert.center.monitor' | i18n }}</th>
+      <th nzAlign="center">{{ 'alert.center.priority' | i18n }}</th>
+      <th nzAlign="center">{{ 'alert.center.content' | i18n }}</th>
+      <th nzAlign="center">{{ 'alert.center.status' | i18n }}</th>
+      <th nzAlign="center">{{ 'alert.center.time' | i18n }}</th>
+      <th nzAlign="center">{{ 'common.edit' | i18n }}</th>
     </tr>
   </thead>
   <tbody>
@@ -102,30 +105,36 @@
       <td nzAlign="center">
         <nz-tag *ngIf="data.priority == 0" nzColor="red">
           <i nz-icon nzType="bell" nzTheme="outline"></i>
-          <span>紧急告警</span>
+          <span>{{ 'alert.priority.0' | i18n }}</span>
         </nz-tag>
         <nz-tag *ngIf="data.priority == 1" nzColor="orange">
           <i nz-icon nzType="bell" nzTheme="outline"></i>
-          <span>严重告警</span>
+          <span>{{ 'alert.priority.1' | i18n }}</span>
         </nz-tag>
         <nz-tag *ngIf="data.priority == 2" nzColor="yellow">
           <i nz-icon nzType="bell" nzTheme="outline"></i>
-          <span>警告告警</span>
+          <span>{{ 'alert.priority.2' | i18n }}</span>
         </nz-tag>
       </td>
       <td nzAlign="center">{{ data.content }}</td>
       <td nzAlign="center">
-        {{ data.status === 0 ? '未处理' : '已处理' }}
+        {{ 'alert.status.' + data.status | i18n }}
       </td>
       <td nzAlign="center">{{ data.gmtCreate | date: 'YYYY-MM-dd HH:mm:ss' }}</td>
       <td nzAlign="center">
-        <button nz-button nzType="primary" (click)="onDeleteOneAlert(data.id)" nz-tooltip nzTooltipTitle="删除告警">
+        <button nz-button nzType="primary" (click)="onDeleteOneAlert(data.id)" nz-tooltip [nzTooltipTitle]="'alert.center.delete' | i18n">
           <i nz-icon nzType="delete" nzTheme="outline"></i>
         </button>
-        <button nz-button nzType="primary" (click)="onMarkReadOneAlert(data.id)" nz-tooltip nzTooltipTitle="标记已处理">
+        <button nz-button nzType="primary" (click)="onMarkReadOneAlert(data.id)" nz-tooltip [nzTooltipTitle]="'alert.center.deal' | i18n">
           <i nz-icon nzType="down-circle" nzTheme="outline"></i>
         </button>
-        <button nz-button nzType="primary" (click)="onMarkUnReadOneAlert(data.id)" nz-tooltip nzTooltipTitle="标记未处理">
+        <button
+          nz-button
+          nzType="primary"
+          (click)="onMarkUnReadOneAlert(data.id)"
+          nz-tooltip
+          [nzTooltipTitle]="'alert.center.no-deal' | i18n"
+        >
           <i nz-icon nzType="up-circle" nzTheme="outline"></i>
         </button>
       </td>
@@ -133,4 +142,4 @@
   </tbody>
 </nz-table>
 
-<ng-template #rangeTemplate> 总量 {{ total }} </ng-template>
+<ng-template #rangeTemplate> {{ 'common.total' | i18n }} {{ total }} </ng-template>

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

@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
+import { I18NService } from '@core';
+import { ALAIN_I18N_TOKEN } from '@delon/theme';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
 import { NzTableQueryParams } from 'ng-zorro-antd/table';
@@ -12,7 +14,12 @@ import { AlertService } from '../../../service/alert.service';
   styles: []
 })
 export class AlertCenterComponent implements OnInit {
-  constructor(private notifySvc: NzNotificationService, private modal: NzModalService, private alertSvc: AlertService) {}
+  constructor(
+    private notifySvc: NzNotificationService,
+    private modal: NzModalService,
+    private alertSvc: AlertService,
+    @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService
+  ) {}
 
   pageIndex: number = 1;
   pageSize: number = 8;
@@ -87,13 +94,13 @@ export class AlertCenterComponent implements OnInit {
 
   onDeleteAlerts() {
     if (this.checkedAlertIds == null || this.checkedAlertIds.size === 0) {
-      this.notifySvc.warning('未选中任何待删除项！', '');
+      this.notifySvc.warning(this.i18nSvc.fanyi('alert.center.notify.no-delete'), '');
       return;
     }
     this.modal.confirm({
-      nzTitle: '请确认是否批量删除！',
-      nzOkText: '确定',
-      nzCancelText: '取消',
+      nzTitle: this.i18nSvc.fanyi('alert.center.confirm.delete-batch'),
+      nzOkText: this.i18nSvc.fanyi('common.button.ok'),
+      nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
       nzOkDanger: true,
       nzOkType: 'primary',
       nzOnOk: () => this.deleteAlerts(this.checkedAlertIds)
@@ -102,13 +109,13 @@ export class AlertCenterComponent implements OnInit {
 
   onMarkReadAlerts() {
     if (this.checkedAlertIds == null || this.checkedAlertIds.size === 0) {
-      this.notifySvc.warning('未选中任何待标记项！', '');
+      this.notifySvc.warning(this.i18nSvc.fanyi('alert.center.notify.no-mark'), '');
       return;
     }
     this.modal.confirm({
-      nzTitle: '请确认是否批量标记已处理！',
-      nzOkText: '确定',
-      nzCancelText: '取消',
+      nzTitle: this.i18nSvc.fanyi('alert.center.confirm.mark-done-batch'),
+      nzOkText: this.i18nSvc.fanyi('common.button.ok'),
+      nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
       nzOkDanger: true,
       nzOkType: 'primary',
       nzOnOk: () => this.updateAlertsStatus(this.checkedAlertIds, 3)
@@ -116,13 +123,13 @@ export class AlertCenterComponent implements OnInit {
   }
   onMarkUnReadAlerts() {
     if (this.checkedAlertIds == null || this.checkedAlertIds.size === 0) {
-      this.notifySvc.warning('未选中任何待标记项！', '');
+      this.notifySvc.warning(this.i18nSvc.fanyi('alert.center.notify.no-mark'), '');
       return;
     }
     this.modal.confirm({
-      nzTitle: '请确认是否批量标记未处理！',
-      nzOkText: '确定',
-      nzCancelText: '取消',
+      nzTitle: this.i18nSvc.fanyi('alert.center.confirm.mark-no-batch'),
+      nzOkText: this.i18nSvc.fanyi('common.button.ok'),
+      nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
       nzOkDanger: true,
       nzOkType: 'primary',
       nzOnOk: () => this.updateAlertsStatus(this.checkedAlertIds, 0)
@@ -133,9 +140,9 @@ export class AlertCenterComponent implements OnInit {
     let alerts = new Set<number>();
     alerts.add(alertId);
     this.modal.confirm({
-      nzTitle: '请确认是否删除！',
-      nzOkText: '确定',
-      nzCancelText: '取消',
+      nzTitle: this.i18nSvc.fanyi('common.confirm.delete'),
+      nzOkText: this.i18nSvc.fanyi('common.button.ok'),
+      nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
       nzOkDanger: true,
       nzOkType: 'primary',
       nzOnOk: () => this.deleteAlerts(alerts)
@@ -146,9 +153,9 @@ export class AlertCenterComponent implements OnInit {
     let alerts = new Set<number>();
     alerts.add(alertId);
     this.modal.confirm({
-      nzTitle: '请确认是否标记已处理！',
-      nzOkText: '确定',
-      nzCancelText: '取消',
+      nzTitle: this.i18nSvc.fanyi('alert.center.confirm.mark-done'),
+      nzOkText: this.i18nSvc.fanyi('common.button.ok'),
+      nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
       nzOkDanger: true,
       nzOkType: 'primary',
       nzOnOk: () => this.updateAlertsStatus(alerts, 3)
@@ -159,9 +166,9 @@ export class AlertCenterComponent implements OnInit {
     let alerts = new Set<number>();
     alerts.add(alertId);
     this.modal.confirm({
-      nzTitle: '请确认是否标记未处理！',
-      nzOkText: '确定',
-      nzCancelText: '取消',
+      nzTitle: this.i18nSvc.fanyi('alert.center.confirm.mark-no'),
+      nzOkText: this.i18nSvc.fanyi('common.button.ok'),
+      nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
       nzOkDanger: true,
       nzOkType: 'primary',
       nzOnOk: () => this.updateAlertsStatus(alerts, 0)
@@ -174,17 +181,17 @@ export class AlertCenterComponent implements OnInit {
       message => {
         deleteAlerts$.unsubscribe();
         if (message.code === 0) {
-          this.notifySvc.success('删除成功！', '');
+          this.notifySvc.success(this.i18nSvc.fanyi('common.notify.delete-success'), '');
           this.loadAlertsTable();
         } else {
           this.tableLoading = false;
-          this.notifySvc.error('删除失败！', message.msg);
+          this.notifySvc.error(this.i18nSvc.fanyi('common.notify.delete-fail'), message.msg);
         }
       },
       error => {
         this.tableLoading = false;
         deleteAlerts$.unsubscribe();
-        this.notifySvc.error('删除失败！', error.msg);
+        this.notifySvc.error(this.i18nSvc.fanyi('common.notify.delete-fail'), error.msg);
       }
     );
   }
@@ -195,17 +202,17 @@ export class AlertCenterComponent implements OnInit {
       message => {
         markAlertsStatus$.unsubscribe();
         if (message.code === 0) {
-          this.notifySvc.success('标记成功！', '');
+          this.notifySvc.success(this.i18nSvc.fanyi('common.notify.mark-success'), '');
           this.loadAlertsTable();
         } else {
           this.tableLoading = false;
-          this.notifySvc.error('标记失败！', message.msg);
+          this.notifySvc.error(this.i18nSvc.fanyi('common.notify.mark-fail'), message.msg);
         }
       },
       error => {
         this.tableLoading = false;
         markAlertsStatus$.unsubscribe();
-        this.notifySvc.error('标记失败！', error.msg);
+        this.notifySvc.error(this.i18nSvc.fanyi('common.notify.mark-fail'), error.msg);
       }
     );
   }

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

@@ -3,14 +3,14 @@
   <nz-breadcrumb-item>
     <a [routerLink]="['/']">
       <i nz-icon nzType="home"></i>
-      <span>仪表盘</span>
+      <span>{{ 'menu.dashboard' | i18n }}</span>
     </a>
   </nz-breadcrumb-item>
   <nz-breadcrumb-item>
     <i nz-icon nzType="alert"></i>
-    <span>告警通知配置</span>
+    <span>{{ 'menu.alert.dispatch' | i18n }}</span>
     <a href="https://tancloud.cn/docs/help/alert_email" target="_blank" style="float: right; margin-right: 5%">
-      <span>帮助&nbsp;</span>
+      <span>{{ 'common.button.help' | i18n }}&nbsp;</span>
       <i nz-icon nzType="question-circle" nzTheme="outline"></i>
     </a>
   </nz-breadcrumb-item>
@@ -18,12 +18,12 @@
 <nz-divider></nz-divider>
 
 <nz-tabset nzSize="large">
-  <nz-tab nzTitle="告警接收人">
+  <nz-tab [nzTitle]="'alert.notice.receiver' | i18n">
     <button nz-button nzType="primary" (click)="onNewNoticeReceiver()">
       <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
-      新增接收人
+      {{ 'alert.notice.receiver.new' | i18n }}
     </button>
-    <button nz-button nzType="primary" (click)="syncReceiver()" nz-tooltip nzTooltipTitle="刷新">
+    <button nz-button nzType="primary" (click)="syncReceiver()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
       <i nz-icon nzType="sync" nzTheme="outline"></i>
     </button>
     <nz-table
@@ -35,11 +35,11 @@
     >
       <thead>
         <tr>
-          <th nzAlign="center" nzWidth="10%">接收人</th>
-          <th nzAlign="center" nzWidth="20%">通知方式</th>
-          <th nzAlign="center" nzWidth="20%">配置</th>
-          <th nzAlign="center" nzWidth="20%">最新修改时间</th>
-          <th nzAlign="center" nzWidth="30%">操作</th>
+          <th nzAlign="center" nzWidth="10%">{{ 'alert.notice.receiver.people' | i18n }}</th>
+          <th nzAlign="center" nzWidth="20%">{{ 'alert.notice.receiver.type' | i18n }}</th>
+          <th nzAlign="center" nzWidth="20%">{{ 'alert.notice.receiver.setting' | i18n }}</th>
+          <th nzAlign="center" nzWidth="20%">{{ 'common.edit-time' | i18n }}</th>
+          <th nzAlign="center" nzWidth="30%">{{ 'common.edit' | i18n }}</th>
         </tr>
       </thead>
       <tbody>
@@ -50,11 +50,11 @@
           <td nzAlign="center">
             <nz-tag *ngIf="data.type == 0" nzColor="orange">
               <i nz-icon nzType="notification" nzTheme="outline"></i>
-              <span>短信</span>
+              <span>{{ 'alert.notice.type.sms' | i18n }}</span>
             </nz-tag>
             <nz-tag *ngIf="data.type == 1" nzColor="orange">
               <i nz-icon nzType="notification" nzTheme="outline"></i>
-              <span>邮件</span>
+              <span>{{ 'alert.notice.type.email' | i18n }}</span>
             </nz-tag>
             <nz-tag *ngIf="data.type == 2" nzColor="orange">
               <i nz-icon nzType="notification" nzTheme="outline"></i>
@@ -62,19 +62,19 @@
             </nz-tag>
             <nz-tag *ngIf="data.type == 3" nzColor="orange">
               <i nz-icon nzType="notification" nzTheme="outline"></i>
-              <span>微信公众号</span>
+              <span>{{ 'alert.notice.type.wechat' | i18n }}</span>
             </nz-tag>
             <nz-tag *ngIf="data.type == 4" nzColor="orange">
               <i nz-icon nzType="notification" nzTheme="outline"></i>
-              <span>企业微信机器人</span>
+              <span>{{ 'alert.notice.type.wework' | i18n }}</span>
             </nz-tag>
             <nz-tag *ngIf="data.type == 5" nzColor="orange">
               <i nz-icon nzType="notification" nzTheme="outline"></i>
-              <span>钉钉机器人</span>
+              <span>{{ 'alert.notice.type.ding' | i18n }}</span>
             </nz-tag>
             <nz-tag *ngIf="data.type == 6" nzColor="orange">
               <i nz-icon nzType="notification" nzTheme="outline"></i>
-              <span>飞书机器人</span>
+              <span>{{ 'alert.notice.type.fei-shu' | i18n }}</span>
             </nz-tag>
           </td>
           <td nzAlign="center">
@@ -88,10 +88,22 @@
           </td>
           <td nzAlign="center">{{ (data.gmtUpdate ? data.gmtUpdate : data.gmtCreate) | date: 'YYYY-MM-dd HH:mm:ss' }}</td>
           <td nzAlign="center">
-            <button nz-button nzType="primary" (click)="onEditOneNoticeReceiver(data)" nz-tooltip nzTooltipTitle="修改接收人">
+            <button
+              nz-button
+              nzType="primary"
+              (click)="onEditOneNoticeReceiver(data)"
+              nz-tooltip
+              [nzTooltipTitle]="'alert.notice.receiver.edit' | i18n"
+            >
               <i nz-icon nzType="edit" nzTheme="outline"></i>
             </button>
-            <button nz-button nzType="primary" (click)="onDeleteOneNoticeReceiver(data.id)" nz-tooltip nzTooltipTitle="删除接收人">
+            <button
+              nz-button
+              nzType="primary"
+              (click)="onDeleteOneNoticeReceiver(data.id)"
+              nz-tooltip
+              [nzTooltipTitle]="'alert.notice.receiver.delete' | i18n"
+            >
               <i nz-icon nzType="delete" nzTheme="outline"></i>
             </button>
           </td>
@@ -99,12 +111,12 @@
       </tbody>
     </nz-table>
   </nz-tab>
-  <nz-tab nzTitle="告警通知策略">
+  <nz-tab [nzTitle]="'alert.notice.rule' | i18n">
     <button nz-button nzType="primary" (click)="onNewNoticeRule()">
       <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
-      新增通知策略
+      {{ 'alert.notice.rule.new' | i18n }}
     </button>
-    <button nz-button nzType="primary" (click)="syncRule()" nz-tooltip nzTooltipTitle="刷新">
+    <button nz-button nzType="primary" (click)="syncRule()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
       <i nz-icon nzType="sync" nzTheme="outline"></i>
     </button>
     <nz-table
@@ -116,12 +128,12 @@
     >
       <thead>
         <tr>
-          <th nzAlign="center" nzWidth="15%">策略名称</th>
-          <th nzAlign="center" nzWidth="12%">接收人</th>
-          <th nzAlign="center" nzWidth="12%">转发所有</th>
-          <th nzAlign="center" nzWidth="15%">是否启用</th>
-          <th nzAlign="center" nzWidth="15%">最新修改时间</th>
-          <th nzAlign="center" nzWidth="25%">操作</th>
+          <th nzAlign="center" nzWidth="15%">{{ 'alert.notice.rule.name' | i18n }}</th>
+          <th nzAlign="center" nzWidth="12%">{{ 'alert.notice.receiver.people' | i18n }}</th>
+          <th nzAlign="center" nzWidth="12%">{{ 'alert.notice.rule.all' | i18n }}</th>
+          <th nzAlign="center" nzWidth="15%">{{ 'alert.notice.rule.enable' | i18n }}</th>
+          <th nzAlign="center" nzWidth="15%">{{ 'common.edit-time' | i18n }}</th>
+          <th nzAlign="center" nzWidth="25%">{{ 'common.edit' | i18n }}</th>
         </tr>
       </thead>
       <tbody>
@@ -134,26 +146,38 @@
           </td>
           <td nzAlign="center">
             <nz-tag *ngIf="data.filterAll" nzColor="green">
-              <span>是</span>
+              <span>{{ 'common.yes' | i18n }}</span>
             </nz-tag>
             <nz-tag *ngIf="!data.filterAll" nzColor="orange">
-              <span>否</span>
+              <span>{{ 'common.no' | i18n }}</span>
             </nz-tag>
           </td>
           <td nzAlign="center">
             <nz-tag *ngIf="data.enable" nzColor="green">
-              <span>开启</span>
+              <span>{{ 'common.enable' | i18n }}</span>
             </nz-tag>
             <nz-tag *ngIf="!data.enable" nzColor="orange">
-              <span>关闭</span>
+              <span>{{ 'common.disable' | i18n }}</span>
             </nz-tag>
           </td>
           <td nzAlign="center">{{ (data.gmtUpdate ? data.gmtUpdate : data.gmtCreate) | date: 'YYYY-MM-dd HH:mm:ss' }}</td>
           <td nzAlign="center">
-            <button nz-button nzType="primary" (click)="onEditOneNoticeRule(data)" nz-tooltip nzTooltipTitle="修改告警策略">
+            <button
+              nz-button
+              nzType="primary"
+              (click)="onEditOneNoticeRule(data)"
+              nz-tooltip
+              [nzTooltipTitle]="'alert.notice.rule.edit' | i18n"
+            >
               <i nz-icon nzType="edit" nzTheme="outline"></i>
             </button>
-            <button nz-button nzType="primary" (click)="onDeleteOneNoticeRule(data.id)" nz-tooltip nzTooltipTitle="删除告警策略">
+            <button
+              nz-button
+              nzType="primary"
+              (click)="onDeleteOneNoticeRule(data.id)"
+              nz-tooltip
+              [nzTooltipTitle]="'alert.notice.rule.delete' | i18n"
+            >
               <i nz-icon nzType="delete" nzTheme="outline"></i>
             </button>
           </td>
@@ -166,7 +190,7 @@
 <!-- 新增或修改通知接收人弹出框 -->
 <nz-modal
   [(nzVisible)]="isManageReceiverModalVisible"
-  [nzTitle]="isManageReceiverModalAdd ? '新增接收人' : '修改接收人'"
+  [nzTitle]="isManageReceiverModalAdd ? ('alert.notice.receiver.new' | i18n) : ('alert.notice.receiver.edit' | i18n)"
   (nzOnCancel)="onManageReceiverModalCancel()"
   (nzOnOk)="onManageReceiverModalOk()"
   nzMaskClosable="false"
@@ -176,27 +200,27 @@
   <div *nzModalContent class="-inner-content">
     <form nz-form #receiverForm="ngForm">
       <nz-form-item>
-        <nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true">接收人名称</nz-form-label>
+        <nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true">{{ 'alert.notice.receiver.people.name' | i18n }}</nz-form-label>
         <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
           <input [(ngModel)]="receiver.name" nz-input required 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-label nzSpan="7" nzRequired="true" nzFor="type">{{ 'alert.notice.receiver.type' | i18n }} </nz-form-label>
         <nz-form-control nzSpan="12" [nzErrorTip]="'validation.required' | i18n">
           <nz-select [(ngModel)]="receiver.type" nzPlaceHolder="Choose" required name="type" id="type">
-            <nz-option [nzValue]="0" nzDisabled nzLabel="短信"></nz-option>
-            <nz-option [nzValue]="1" nzLabel="邮箱"></nz-option>
+            <nz-option [nzValue]="0" nzDisabled [nzLabel]="'alert.notice.type.sms' | i18n"></nz-option>
+            <nz-option [nzValue]="1" [nzLabel]="'alert.notice.type.email' | i18n"></nz-option>
             <nz-option [nzValue]="2" nzLabel="WebHook"></nz-option>
-            <nz-option [nzValue]="3" nzDisabled nzLabel="微信公众号"></nz-option>
-            <nz-option [nzValue]="4" nzLabel="企业微信机器人"></nz-option>
-            <nz-option [nzValue]="5" nzLabel="钉钉机器人"></nz-option>
-            <nz-option [nzValue]="6" nzLabel="飞书机器人"></nz-option>
+            <nz-option [nzValue]="3" nzDisabled [nzLabel]="'alert.notice.type.wechat' | i18n"></nz-option>
+            <nz-option [nzValue]="4" [nzLabel]="'alert.notice.type.wework' | i18n"></nz-option>
+            <nz-option [nzValue]="5" [nzLabel]="'alert.notice.type.ding' | i18n"></nz-option>
+            <nz-option [nzValue]="6" [nzLabel]="'alert.notice.type.fei-shu' | i18n"></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-label [nzSpan]="7" nzFor="phone" [nzRequired]="receiver.type === 0">{{ 'alert.notice.type.phone' | i18n }}</nz-form-label>
         <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.phone.invalid' | i18n">
           <input
             [(ngModel)]="receiver.phone"
@@ -210,37 +234,45 @@
         </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-label [nzSpan]="7" nzFor="email" [nzRequired]="receiver.type === 1">{{ 'alert.notice.type.email' | i18n }}</nz-form-label>
         <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.email.invalid' | i18n">
           <input [(ngModel)]="receiver.email" nz-input [required]="receiver.type === 1" email 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-label [nzSpan]="7" nzFor="hookUrl" [nzRequired]="receiver.type === 2">{{ 'alert.notice.type.url' | i18n }}</nz-form-label>
         <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
           <input [(ngModel)]="receiver.hookUrl" nz-input [required]="receiver.type === 2" 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-label [nzSpan]="7" nzFor="wechatId" [nzRequired]="receiver.type === 3">{{
+          'alert.notice.type.wechat-id' | i18n
+        }}</nz-form-label>
         <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
           <input [(ngModel)]="receiver.wechatId" nz-input [required]="receiver.type === 3" name="wechatId" type="text" />
         </nz-form-control>
       </nz-form-item>
       <nz-form-item *ngIf="receiver.type === 4">
-        <nz-form-label [nzSpan]="7" nzFor="wechatId" [nzRequired]="receiver.type === 4">企业微信机器人KEY</nz-form-label>
+        <nz-form-label [nzSpan]="7" nzFor="wechatId" [nzRequired]="receiver.type === 4">{{
+          'alert.notice.type.wework-key' | i18n
+        }}</nz-form-label>
         <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
           <input [(ngModel)]="receiver.wechatId" nz-input [required]="receiver.type === 4" name="wechatId" type="text" />
         </nz-form-control>
       </nz-form-item>
       <nz-form-item *ngIf="receiver.type === 5">
-        <nz-form-label [nzSpan]="7" nzFor="accessToken" [nzRequired]="receiver.type === 5">机器人ACCESS_TOKEN</nz-form-label>
+        <nz-form-label [nzSpan]="7" nzFor="accessToken" [nzRequired]="receiver.type === 5">{{
+          'alert.notice.type.access-token' | i18n
+        }}</nz-form-label>
         <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
           <input [(ngModel)]="receiver.accessToken" nz-input [required]="receiver.type === 5" name="accessToken" type="text" />
         </nz-form-control>
       </nz-form-item>
       <nz-form-item *ngIf="receiver.type === 6">
-        <nz-form-label [nzSpan]="7" nzFor="wechatId" [nzRequired]="receiver.type === 6">飞书机器人KEY</nz-form-label>
+        <nz-form-label [nzSpan]="7" nzFor="wechatId" [nzRequired]="receiver.type === 6">{{
+          'alert.notice.type.fei-shu-key' | i18n
+        }}</nz-form-label>
         <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
           <input [(ngModel)]="receiver.wechatId" nz-input [required]="receiver.type === 6" name="wechatId" type="text" />
         </nz-form-control>
@@ -252,7 +284,7 @@
 <!-- 新增或修改通知策略弹出框 -->
 <nz-modal
   [(nzVisible)]="isManageRuleModalVisible"
-  [nzTitle]="isManageRuleModalAdd ? '新增策略' : '修改策略'"
+  [nzTitle]="isManageRuleModalAdd ? ('alert.notice.rule.new' | i18n) : ('alert.notice.rule.edit' | i18n)"
   (nzOnCancel)="onManageRuleModalCancel()"
   (nzOnOk)="onManageRuleModalOk()"
   nzMaskClosable="false"
@@ -262,19 +294,19 @@
   <div *nzModalContent class="-inner-content">
     <form nz-form #ruleForm="ngForm">
       <nz-form-item>
-        <nz-form-label [nzSpan]="7" nzFor="rule_name" nzRequired="true">策略名称</nz-form-label>
+        <nz-form-label [nzSpan]="7" nzFor="rule_name" nzRequired="true">{{ 'alert.notice.rule.name' | i18n }}</nz-form-label>
         <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
           <input [(ngModel)]="rule.name" nz-input required 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-label nzSpan="7" nzRequired="true" nzFor="filterAll">{{ 'alert.notice.rule.all' | i18n }}</nz-form-label>
         <nz-form-control nzSpan="8">
           <nz-switch [(ngModel)]="rule.filterAll" disabled 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-label nzSpan="7" nzRequired="true" nzFor="receiver">{{ 'alert.notice.receiver.people' | i18n }}</nz-form-label>
         <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
           <nz-select
             [(ngModel)]="rule.receiverId"
@@ -291,7 +323,7 @@
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
-        <nz-form-label nzSpan="7" nzRequired="true" nzFor="enable">是否启用</nz-form-label>
+        <nz-form-label nzSpan="7" nzRequired="true" nzFor="enable">{{ 'alert.notice.rule.enable' | i18n }}</nz-form-label>
         <nz-form-control nzSpan="8">
           <nz-switch [(ngModel)]="rule.enable" name="enable" id="enable"></nz-switch>
         </nz-form-control>

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

@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
+import { I18NService } from '@core';
+import { ALAIN_I18N_TOKEN } from '@delon/theme';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
 import { finalize } from 'rxjs/operators';
@@ -18,7 +20,8 @@ export class AlertNoticeComponent implements OnInit {
     private notifySvc: NzNotificationService,
     private noticeReceiverSvc: NoticeReceiverService,
     private modal: NzModalService,
-    private noticeRuleSvc: NoticeRuleService
+    private noticeRuleSvc: NoticeRuleService,
+    @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService
   ) {}
 
   receivers!: NoticeReceiver[];
@@ -78,9 +81,9 @@ export class AlertNoticeComponent implements OnInit {
 
   onDeleteOneNoticeReceiver(receiveId: number) {
     this.modal.confirm({
-      nzTitle: '请确认是否删除！',
-      nzOkText: '确定',
-      nzCancelText: '取消',
+      nzTitle: this.i18nSvc.fanyi('common.confirm.delete'),
+      nzOkText: this.i18nSvc.fanyi('common.button.ok'),
+      nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
       nzOkDanger: true,
       nzOkType: 'primary',
       nzOnOk: () => this.deleteOneNoticeReceiver(receiveId)
@@ -98,23 +101,23 @@ export class AlertNoticeComponent implements OnInit {
       .subscribe(
         message => {
           if (message.code === 0) {
-            this.notifySvc.success('删除成功！', '');
+            this.notifySvc.success(this.i18nSvc.fanyi('common.notify.delete-success'), '');
             this.loadReceiversTable();
           } else {
-            this.notifySvc.error('删除失败！', message.msg);
+            this.notifySvc.error(this.i18nSvc.fanyi('common.notify.delete-fail'), message.msg);
           }
         },
         error => {
-          this.notifySvc.error('删除失败！', error.msg);
+          this.notifySvc.error(this.i18nSvc.fanyi('common.notify.delete-fail'), error.msg);
         }
       );
   }
 
   onDeleteOneNoticeRule(ruleId: number) {
     this.modal.confirm({
-      nzTitle: '请确认是否删除！',
-      nzOkText: '确定',
-      nzCancelText: '取消',
+      nzTitle: this.i18nSvc.fanyi('common.confirm.delete'),
+      nzOkText: this.i18nSvc.fanyi('common.button.ok'),
+      nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
       nzOkDanger: true,
       nzOkType: 'primary',
       nzOnOk: () => this.deleteOneNoticeRule(ruleId)
@@ -132,14 +135,14 @@ export class AlertNoticeComponent implements OnInit {
       .subscribe(
         message => {
           if (message.code === 0) {
-            this.notifySvc.success('删除成功！', '');
+            this.notifySvc.success(this.i18nSvc.fanyi('common.notify.delete-success'), '');
             this.loadRulesTable();
           } else {
-            this.notifySvc.error('删除失败！', message.msg);
+            this.notifySvc.error(this.i18nSvc.fanyi('common.notify.delete-fail'), message.msg);
           }
         },
         error => {
-          this.notifySvc.error('删除失败！', error.msg);
+          this.notifySvc.error(this.i18nSvc.fanyi('common.notify.delete-fail'), error.msg);
         }
       );
   }
@@ -179,14 +182,14 @@ export class AlertNoticeComponent implements OnInit {
           message => {
             if (message.code === 0) {
               this.isManageReceiverModalVisible = false;
-              this.notifySvc.success('新增成功！', '');
+              this.notifySvc.success(this.i18nSvc.fanyi('common.notify.new-success'), '');
               this.loadReceiversTable();
             } else {
-              this.notifySvc.error('新增失败！', message.msg);
+              this.notifySvc.error(this.i18nSvc.fanyi('common.notify.new-fail'), message.msg);
             }
           },
           error => {
-            this.notifySvc.error('新增失败！', error.msg);
+            this.notifySvc.error(this.i18nSvc.fanyi('common.notify.new-fail'), error.msg);
           }
         );
     } else {
@@ -202,14 +205,14 @@ export class AlertNoticeComponent implements OnInit {
           message => {
             if (message.code === 0) {
               this.isManageReceiverModalVisible = false;
-              this.notifySvc.success('修改成功！', '');
+              this.notifySvc.success(this.i18nSvc.fanyi('common.notify.edit-success'), '');
               this.loadReceiversTable();
             } else {
-              this.notifySvc.error('修改失败！', message.msg);
+              this.notifySvc.error(this.i18nSvc.fanyi('common.notify.edit-fail'), message.msg);
             }
           },
           error => {
-            this.notifySvc.error('修改失败！', error.msg);
+            this.notifySvc.error(this.i18nSvc.fanyi('common.notify.edit-fail'), error.msg);
           }
         );
     }
@@ -310,14 +313,14 @@ export class AlertNoticeComponent implements OnInit {
           message => {
             if (message.code === 0) {
               this.isManageRuleModalVisible = false;
-              this.notifySvc.success('新增成功！', '');
+              this.notifySvc.success(this.i18nSvc.fanyi('common.notify.new-success'), '');
               this.loadRulesTable();
             } else {
-              this.notifySvc.error('新增失败！', message.msg);
+              this.notifySvc.error(this.i18nSvc.fanyi('common.notify.new-fail'), message.msg);
             }
           },
           error => {
-            this.notifySvc.error('新增失败！', error.msg);
+            this.notifySvc.error(this.i18nSvc.fanyi('common.notify.new-fail'), error.msg);
           }
         );
     } else {
@@ -333,14 +336,14 @@ export class AlertNoticeComponent implements OnInit {
           message => {
             if (message.code === 0) {
               this.isManageRuleModalVisible = false;
-              this.notifySvc.success('修改成功！', '');
+              this.notifySvc.success(this.i18nSvc.fanyi('common.notify.edit-success'), '');
               this.loadRulesTable();
             } else {
-              this.notifySvc.error('修改失败！', message.msg);
+              this.notifySvc.error(this.i18nSvc.fanyi('common.notify.edit-fail'), message.msg);
             }
           },
           error => {
-            this.notifySvc.error('修改失败！', error.msg);
+            this.notifySvc.error(this.i18nSvc.fanyi('common.notify.edit-fail'), error.msg);
           }
         );
     }

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

@@ -3,14 +3,14 @@
   <nz-breadcrumb-item>
     <a [routerLink]="['/']">
       <i nz-icon nzType="home"></i>
-      <span>仪表盘</span>
+      <span>{{ 'menu.dashboard' | i18n }}</span>
     </a>
   </nz-breadcrumb-item>
   <nz-breadcrumb-item>
     <i nz-icon nzType="alert"></i>
-    <span>告警阈值配置</span>
+    <span>{{ 'menu.alert.setting' | i18n }}</span>
     <a href="https://tancloud.cn/docs/help/alert_threshold" target="_blank" style="float: right; margin-right: 5%">
-      <span>帮助&nbsp;</span>
+      <span>{{ 'common.button.help' | i18n }}&nbsp;</span>
       <i nz-icon nzType="question-circle" nzTheme="outline"></i>
     </a>
   </nz-breadcrumb-item>
@@ -19,17 +19,17 @@
 
 <button nz-button nzType="primary" (click)="onNewAlertDefine()">
   <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
-  新增阈值
+  {{ 'alert.setting.new' | i18n }}
 </button>
 <button nz-button nzType="primary" (click)="onEditAlertDefine()">
   <i nz-icon nzType="edit" nzTheme="outline"></i>
-  编辑
+  {{ 'common.button.edit' | i18n }}
 </button>
 <button nz-button nzType="primary" (click)="onDeleteAlertDefines()">
   <i nz-icon nzType="delete" nzTheme="outline"></i>
-  删除
+  {{ 'common.button.delete' | i18n }}
 </button>
-<button nz-button nzType="primary" (click)="sync()" nz-tooltip nzTooltipTitle="刷新">
+<button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
   <i nz-icon nzType="sync" nzTheme="outline"></i>
 </button>
 
@@ -51,14 +51,14 @@
   <thead>
     <tr>
       <th nzAlign="center" nzLeft nzWidth="4%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
-      <th nzAlign="center" nzLeft>指标对象</th>
-      <th nzAlign="center">阈值触发表达式</th>
-      <th nzAlign="center">告警级别</th>
-      <th nzAlign="center">触发次数</th>
-      <th nzAlign="center">通知模版</th>
-      <th nzAlign="center">全局默认</th>
-      <th nzAlign="center">最新修改时间</th>
-      <th nzAlign="center">操作</th>
+      <th nzAlign="center" nzLeft>{{ 'alert.setting.target' | i18n }}</th>
+      <th nzAlign="center">{{ 'alert.setting.expr' | i18n }}</th>
+      <th nzAlign="center">{{ 'alert.priority' | i18n }}</th>
+      <th nzAlign="center">{{ 'alert.setting.times' | i18n }}</th>
+      <th nzAlign="center">{{ 'alert.setting.template' | i18n }}</th>
+      <th nzAlign="center">{{ 'alert.setting.default' | i18n }}</th>
+      <th nzAlign="center">{{ 'common.edit-time' | i18n }}</th>
+      <th nzAlign="center">{{ 'common.edit' | i18n }}</th>
     </tr>
   </thead>
   <tbody>
@@ -73,36 +73,54 @@
       <td nzAlign="center">
         <nz-tag *ngIf="data.priority == 0" nzColor="red">
           <i nz-icon nzType="bell" nzTheme="outline"></i>
-          <span>紧急告警</span>
+          <span>{{ 'alert.priority.0' | i18n }}</span>
         </nz-tag>
         <nz-tag *ngIf="data.priority == 1" nzColor="orange">
           <i nz-icon nzType="bell" nzTheme="outline"></i>
-          <span>严重告警</span>
+          <span>{{ 'alert.priority.1' | i18n }}</span>
         </nz-tag>
         <nz-tag *ngIf="data.priority == 2" nzColor="yellow">
           <i nz-icon nzType="bell" nzTheme="outline"></i>
-          <span>警告告警</span>
+          <span>{{ 'alert.priority.2' | i18n }}</span>
         </nz-tag>
       </td>
       <td nzAlign="center">{{ data.times }}</td>
       <td nzAlign="center">{{ data.template }}</td>
       <td nzAlign="center">
         <nz-tag *ngIf="data.preset" nzColor="green">
-          <span>是</span>
+          <span>{{ 'common.yes' | i18n }}</span>
         </nz-tag>
         <nz-tag *ngIf="!data.preset" nzColor="orange">
-          <span>否</span>
+          <span>{{ 'common.no' | i18n }}</span>
         </nz-tag>
       </td>
       <td nzAlign="center">{{ (data.gmtUpdate ? data.gmtUpdate : data.gmtCreate) | date: 'YYYY-MM-dd HH:mm:ss' }}</td>
       <td nzAlign="center">
-        <button nz-button nzType="primary" (click)="onOpenConnectModal(data.id, data.app)" nz-tooltip nzTooltipTitle="配置关联监控">
+        <button
+          nz-button
+          nzType="primary"
+          (click)="onOpenConnectModal(data.id, data.app)"
+          nz-tooltip
+          [nzTooltipTitle]="'alert.setting.connect' | i18n"
+        >
           <i nz-icon nzType="link" nzTheme="outline"></i>
         </button>
-        <button nz-button nzType="primary" (click)="onEditOneAlertDefine(data.id)" nz-tooltip nzTooltipTitle="修改告警配置">
+        <button
+          nz-button
+          nzType="primary"
+          (click)="onEditOneAlertDefine(data.id)"
+          nz-tooltip
+          [nzTooltipTitle]="'alert.setting.edit' | i18n"
+        >
           <i nz-icon nzType="edit" nzTheme="outline"></i>
         </button>
-        <button nz-button nzType="primary" (click)="onDeleteOneAlertDefine(data.id)" nz-tooltip nzTooltipTitle="删除告警配置">
+        <button
+          nz-button
+          nzType="primary"
+          (click)="onDeleteOneAlertDefine(data.id)"
+          nz-tooltip
+          [nzTooltipTitle]="'alert.setting.delete' | i18n"
+        >
           <i nz-icon nzType="delete" nzTheme="outline"></i>
         </button>
       </td>
@@ -110,12 +128,12 @@
   </tbody>
 </nz-table>
 
-<ng-template #rangeTemplate> 总量 {{ total }} </ng-template>
+<ng-template #rangeTemplate> {{ 'common.total' | i18n }} {{ total }} </ng-template>
 
 <!-- 新增或修改告警定义弹出框 -->
 <nz-modal
   [(nzVisible)]="isManageModalVisible"
-  [nzTitle]="isManageModalAdd ? '新增告警阈值' : '修改告警阈值'"
+  [nzTitle]="isManageModalAdd ? ('alert.setting.new' | i18n) : ('alert.setting.edit' | i18n)"
   (nzOnCancel)="onManageModalCancel()"
   (nzOnOk)="onManageModalOk()"
   nzMaskClosable="false"
@@ -125,7 +143,7 @@
   <div *nzModalContent class="-inner-content">
     <form nz-form #defineForm="ngForm">
       <nz-form-item>
-        <nz-form-label [nzSpan]="7" nzFor="target" nzRequired="true">指标对象</nz-form-label>
+        <nz-form-label [nzSpan]="7" nzFor="target" nzRequired="true">{{ 'alert.setting.target' | i18n }}</nz-form-label>
         <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
           <nz-cascader
             required
@@ -140,19 +158,19 @@
       <nz-form-item>
         <nz-col [nzSpan]="8" nzOffset="7">
           <nz-collapse>
-            <nz-collapse-panel [nzActive]="isManageModalAdd" nzHeader="支持的阈值触发表达式环境变量与操作符">
+            <nz-collapse-panel [nzActive]="isManageModalAdd" [nzHeader]="'alert.setting.expr.tip' | i18n">
               <nz-list nzSize="small" nzSplit="false">
                 <nz-list-item *ngIf="cascadeValues.length == 3">
-                  <code>{{ cascadeValues[2] }} : 选中的指标对象</code>
+                  <code>{{ cascadeValues[2] }} : {{ 'alert.setting.target.tip' | i18n }}</code>
                 </nz-list-item>
                 <nz-list-item *ngFor="let item of otherMetrics">
-                  <code>{{ item }} : 所属行其它指标对象</code>
+                  <code>{{ item }} : {{ 'alert.setting.target.other' | i18n }}</code>
                 </nz-list-item>
                 <nz-list-item *ngIf="otherMetrics.length != 0">
-                  <code>instance : 所属行实例</code>
+                  <code>instance : {{ 'alert.setting.target.instance' | i18n }}</code>
                 </nz-list-item>
                 <nz-list-item>
-                  <code>支持操作符函数 : equals(str1,str2), ==, <, <=, >, >=, !=, ( ), +, -, &&, ||</code>
+                  <code>{{ 'alert.setting.operator' | i18n }} : equals(str1,str2), ==, <, <=, >, >=, !=, ( ), +, -, &&, ||</code>
                 </nz-list-item>
               </nz-list>
             </nz-collapse-panel>
@@ -160,13 +178,8 @@
         </nz-col>
       </nz-form-item>
       <nz-form-item>
-        <nz-form-label
-          [nzSpan]="7"
-          nzFor="expr"
-          nzRequired="true"
-          nzTooltipTitle="根据此表达式来计算判断是否触发阈值,表达式环境变量和操作符见上方"
-        >
-          阈值触发表达式
+        <nz-form-label [nzSpan]="7" nzFor="expr" nzRequired="true" [nzTooltipTitle]="'alert.setting.expr.label' | i18n">
+          {{ 'alert.setting.expr' | i18n }}
         </nz-form-label>
         <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
           <nz-textarea-count [nzMaxCharacterCount]="100">
@@ -177,32 +190,27 @@
               nz-input
               name="expr"
               id="expr"
-              placeholder="根据此表达式计算判断是否触发阈值.&#10;示例: responseTime&gt;40"
+              [placeholder]="('alert.setting.expr.example' | i18n) + ': responseTime&gt;40'"
             >
             </textarea>
           </nz-textarea-count>
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
-        <nz-form-label
-          nzSpan="7"
-          nzRequired="true"
-          nzFor="priority"
-          nzTooltipTitle="触发阈值的告警级别,从低到高依次为:警告-warning，严重-critical，紧急-emergency"
-        >
-          告警级别
+        <nz-form-label nzSpan="7" nzRequired="true" nzFor="priority" [nzTooltipTitle]="'alert.setting.priority.tip' | i18n">
+          {{ 'alert.priority' | i18n }}
         </nz-form-label>
         <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
           <nz-select [(ngModel)]="define.priority" nzPlaceHolder="Choose" name="priority" id="priority">
-            <nz-option [nzValue]="0" nzLabel="紧急告警"></nz-option>
-            <nz-option [nzValue]="1" nzLabel="严重告警"></nz-option>
-            <nz-option [nzValue]="2" nzLabel="警告告警"></nz-option>
+            <nz-option [nzValue]="0" [nzLabel]="'alert.priority.0' | i18n"></nz-option>
+            <nz-option [nzValue]="1" [nzLabel]="'alert.priority.1' | i18n"></nz-option>
+            <nz-option [nzValue]="2" [nzLabel]="'alert.priority.2' | i18n"></nz-option>
           </nz-select>
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
-        <nz-form-label nzSpan="7" nzRequired="true" nzFor="duration" nzTooltipTitle="设置触发阈值多少次之后才会发送告警">
-          触发次数
+        <nz-form-label nzSpan="7" nzRequired="true" nzFor="duration" [nzTooltipTitle]="'alert.setting.times.tip' | i18n">
+          {{ 'alert.setting.times' | i18n }}
         </nz-form-label>
         <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
           <nz-input-number [(ngModel)]="define.times" [nzMin]="1" [nzMax]="10" [nzStep]="1" required name="duration" id="duration">
@@ -212,25 +220,25 @@
       <nz-form-item>
         <nz-col [nzSpan]="8" nzOffset="7">
           <nz-collapse>
-            <nz-collapse-panel [nzActive]="isManageModalAdd" nzHeader="支持的通知模版环境变量">
+            <nz-collapse-panel [nzActive]="isManageModalAdd" [nzHeader]="'alert.setting.template.tip' | i18n">
               <nz-list nzSize="small" nzSplit="false">
                 <nz-list-item>
-                  <code>&#36;&#123;app&#125; : 监控类型名称</code>
+                  <code>&#36;&#123;app&#125; : {{ 'alert.setting.template.monitor-type' | i18n }}</code>
                 </nz-list-item>
                 <nz-list-item>
-                  <code>&#36;&#123;metrics&#125; : 监控指标集合名称</code>
+                  <code>&#36;&#123;metrics&#125; : {{ 'alert.setting.template.metrics-name' | i18n }}</code>
                 </nz-list-item>
                 <nz-list-item *ngIf="cascadeValues.length == 3">
-                  <code>&#36;&#123;metric&#125; : 监控指标名称</code>
+                  <code>&#36;&#123;metric&#125; : {{ 'alert.setting.template.metric-name' | i18n }}</code>
                 </nz-list-item>
                 <nz-list-item *ngIf="cascadeValues.length == 3">
-                  <code>&#36;{{ '{' + cascadeValues[2] + '}' }} : 监控指标对象值</code>
+                  <code>&#36;{{ '{' + cascadeValues[2] + '}' }} : {{ 'alert.setting.template.metric-value' | i18n }}</code>
                 </nz-list-item>
                 <nz-list-item *ngFor="let item of otherMetrics">
-                  <code>&#36;{{ '{' + item + '}' }} : 所属行其它指标值</code>
+                  <code>&#36;{{ '{' + item + '}' }} : {{ 'alert.setting.template.other-value' | i18n }}</code>
                 </nz-list-item>
                 <nz-list-item>
-                  <code>&#36;&#123;instance&#125; : 所属行实例值</code>
+                  <code>&#36;&#123;instance&#125; : {{ 'alert.setting.template.instance-value' | i18n }}</code>
                 </nz-list-item>
               </nz-list>
             </nz-collapse-panel>
@@ -238,8 +246,8 @@
         </nz-col>
       </nz-form-item>
       <nz-form-item>
-        <nz-form-label [nzSpan]="7" nzFor="template" nzRequired="true" nzTooltipTitle="告警触发后发送的通知信息模版,模版环境变量见上方">
-          通知模版
+        <nz-form-label [nzSpan]="7" nzFor="template" nzRequired="true" [nzTooltipTitle]="'alert.setting.template.label' | i18n">
+          {{ 'alert.setting.template' | i18n }}
         </nz-form-label>
         <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
           <nz-textarea-count [nzMaxCharacterCount]="200">
@@ -250,20 +258,24 @@
               required
               name="template"
               id="template"
-              placeholder="请输入告警的通知模版.&#10;示例: ${app}.${metrics}.${metric}'s value is too high"
+              [placeholder]="'alert.setting.template.example' | i18n"
             >
             </textarea>
           </nz-textarea-count>
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
-        <nz-form-label nzSpan="7" nzFor="preset" nzTooltipTitle="此告警阈值配置是否应用于全局所有此类型监控"> 全局默认 </nz-form-label>
+        <nz-form-label nzSpan="7" nzFor="preset" [nzTooltipTitle]="'alert.setting.default.tip' | i18n">
+          {{ 'alert.setting.default' | i18n }}
+        </nz-form-label>
         <nz-form-control nzSpan="8">
           <nz-switch [(ngModel)]="define.preset" name="preset" id="preset"></nz-switch>
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
-        <nz-form-label nzSpan="7" nzRequired="true" nzFor="enable" nzTooltipTitle="此告警阈值配置开启生效或关闭"> 启用告警 </nz-form-label>
+        <nz-form-label nzSpan="7" nzRequired="true" nzFor="enable" [nzTooltipTitle]="'alert.setting.enable.tip' | i18n">
+          {{ 'alert.setting.enable' | i18n }}
+        </nz-form-label>
         <nz-form-control nzSpan="8">
           <nz-switch [(ngModel)]="define.enable" [ngModelOptions]="{ standalone: true }" name="enable" id="enable"></nz-switch>
         </nz-form-control>
@@ -276,7 +288,7 @@
 
 <nz-modal
   [(nzVisible)]="isConnectModalVisible"
-  nzTitle="告警定义关联监控"
+  [nzTitle]="'alert.setting.connect' | i18n"
   (nzOnCancel)="onConnectModalCancel()"
   (nzOnOk)="onConnectModalOk()"
   nzMaskClosable="false"
@@ -303,8 +315,8 @@
         <thead>
           <tr>
             <th [nzChecked]="stat.checkAll" [nzIndeterminate]="stat.checkHalf" (nzCheckedChange)="onItemSelectAll($event)"></th>
-            <th *ngIf="direction == 'left'">未关联监控</th>
-            <th *ngIf="direction == 'right'">已关联监控</th>
+            <th *ngIf="direction == 'left'">{{ 'alert.setting.connect.left' | i18n }}</th>
+            <th *ngIf="direction == 'right'">{{ 'alert.setting.connect.right' | i18n }}</th>
           </tr>
         </thead>
         <tbody>

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

@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
+import { I18NService } from '@core';
+import { ALAIN_I18N_TOKEN } from '@delon/theme';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
 import { NzTableQueryParams } from 'ng-zorro-antd/table';
@@ -25,7 +27,8 @@ export class AlertSettingComponent implements OnInit {
     private notifySvc: NzNotificationService,
     private appDefineSvc: AppDefineService,
     private monitorSvc: MonitorService,
-    private alertDefineSvc: AlertDefineService
+    private alertDefineSvc: AlertDefineService,
+    @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService
   ) {}
 
   pageIndex: number = 1;
@@ -98,7 +101,7 @@ export class AlertSettingComponent implements OnInit {
 
   onEditOneAlertDefine(alertDefineId: number) {
     if (alertDefineId == null) {
-      this.notifySvc.warning('未选中任何待编辑项！', '');
+      this.notifySvc.warning(this.i18nSvc.fanyi('common.notify.no-select-edit'), '');
       return;
     }
     this.editAlertDefine(alertDefineId);
@@ -107,11 +110,11 @@ export class AlertSettingComponent implements OnInit {
   onEditAlertDefine() {
     // 编辑时只能选中一个
     if (this.checkedDefineIds == null || this.checkedDefineIds.size === 0) {
-      this.notifySvc.warning('未选中任何待编辑项！', '');
+      this.notifySvc.warning(this.i18nSvc.fanyi('common.notify.no-select-edit'), '');
       return;
     }
     if (this.checkedDefineIds.size > 1) {
-      this.notifySvc.warning('只能对一个选中项进行编辑！', '');
+      this.notifySvc.warning(this.i18nSvc.fanyi('common.notify.one-select-edit'), '');
       return;
     }
     let alertDefineId = 0;
@@ -138,24 +141,24 @@ export class AlertSettingComponent implements OnInit {
             this.cascadeValues = [this.define.app, this.define.metric, this.define.field];
             this.cascadeOnChange(this.cascadeValues);
           } else {
-            this.notifySvc.error('查询此监控定义详情失败！', message.msg);
+            this.notifySvc.error(this.i18nSvc.fanyi('common.notify.monitor-fail'), message.msg);
           }
         },
         error => {
-          this.notifySvc.error('查询此监控定义详情失败！', error.msg);
+          this.notifySvc.error(this.i18nSvc.fanyi('common.notify.monitor-fail'), error.msg);
         }
       );
   }
 
   onDeleteAlertDefines() {
     if (this.checkedDefineIds == null || this.checkedDefineIds.size === 0) {
-      this.notifySvc.warning('未选中任何待删除项！', '');
+      this.notifySvc.warning(this.i18nSvc.fanyi('common.notify.no-select-delete'), '');
       return;
     }
     this.modal.confirm({
-      nzTitle: '请确认是否批量删除！',
-      nzOkText: '确定',
-      nzCancelText: '取消',
+      nzTitle: this.i18nSvc.fanyi('common.confirm.delete-batch'),
+      nzOkText: this.i18nSvc.fanyi('common.button.ok'),
+      nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
       nzOkDanger: true,
       nzOkType: 'primary',
       nzOnOk: () => this.deleteAlertDefines(this.checkedDefineIds)
@@ -166,9 +169,9 @@ export class AlertSettingComponent implements OnInit {
     let defineIds = new Set<number>();
     defineIds.add(alertDefineId);
     this.modal.confirm({
-      nzTitle: '请确认是否删除！',
-      nzOkText: '确定',
-      nzCancelText: '取消',
+      nzTitle: this.i18nSvc.fanyi('common.confirm.delete'),
+      nzOkText: this.i18nSvc.fanyi('common.button.ok'),
+      nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
       nzOkDanger: true,
       nzOkType: 'primary',
       nzOnOk: () => this.deleteAlertDefines(defineIds)
@@ -177,7 +180,7 @@ export class AlertSettingComponent implements OnInit {
 
   deleteAlertDefines(defineIds: Set<number>) {
     if (defineIds == null || defineIds.size == 0) {
-      this.notifySvc.warning('未选中任何待删除项！', '');
+      this.notifySvc.warning(this.i18nSvc.fanyi('common.notify.no-select-delete'), '');
       return;
     }
     this.tableLoading = true;
@@ -185,17 +188,17 @@ export class AlertSettingComponent implements OnInit {
       message => {
         deleteDefines$.unsubscribe();
         if (message.code === 0) {
-          this.notifySvc.success('删除成功！', '');
+          this.notifySvc.success(this.i18nSvc.fanyi('common.notify.delete-success'), '');
           this.loadAlertDefineTable();
         } else {
           this.tableLoading = false;
-          this.notifySvc.error('删除失败！', message.msg);
+          this.notifySvc.error(this.i18nSvc.fanyi('common.notify.delete-fail'), message.msg);
         }
       },
       error => {
         this.tableLoading = false;
         deleteDefines$.unsubscribe();
-        this.notifySvc.error('删除失败！', error.msg);
+        this.notifySvc.error(this.i18nSvc.fanyi('common.notify.delete-fail'), error.msg);
       }
     );
   }
@@ -242,7 +245,7 @@ export class AlertSettingComponent implements OnInit {
     }
     this.appHierarchies.forEach(hierarchy => {
       if (hierarchy.value == values[0]) {
-        hierarchy.children.forEach((metrics: { value: string; children: any[]}) => {
+        hierarchy.children.forEach((metrics: { value: string; children: any[] }) => {
           if (metrics.value == values[1]) {
             this.otherMetrics = [];
             metrics.children.forEach(item => {
@@ -276,14 +279,14 @@ export class AlertSettingComponent implements OnInit {
           message => {
             if (message.code === 0) {
               this.isManageModalVisible = false;
-              this.notifySvc.success('新增成功！', '');
+              this.notifySvc.success(this.i18nSvc.fanyi('common.notify.new-success'), '');
               this.loadAlertDefineTable();
             } else {
-              this.notifySvc.error('新增失败！', message.msg);
+              this.notifySvc.error(this.i18nSvc.fanyi('common.notify.new-fail'), message.msg);
             }
           },
           error => {
-            this.notifySvc.error('新增失败！', error.msg);
+            this.notifySvc.error(this.i18nSvc.fanyi('common.notify.new-fail'), error.msg);
           }
         );
     } else {
@@ -299,14 +302,14 @@ export class AlertSettingComponent implements OnInit {
           message => {
             if (message.code === 0) {
               this.isManageModalVisible = false;
-              this.notifySvc.success('修改成功！', '');
+              this.notifySvc.success(this.i18nSvc.fanyi('common.notify.edit-success'), '');
               this.loadAlertDefineTable();
             } else {
-              this.notifySvc.error('修改失败！', message.msg);
+              this.notifySvc.error(this.i18nSvc.fanyi('common.notify.edit-fail'), message.msg);
             }
           },
           error => {
-            this.notifySvc.error('修改失败！', error.msg);
+            this.notifySvc.error(this.i18nSvc.fanyi('common.notify.edit-fail'), error.msg);
           }
         );
     }
@@ -373,16 +376,16 @@ export class AlertSettingComponent implements OnInit {
         message => {
           this.isConnectModalOkLoading = false;
           if (message.code === 0) {
-            this.notifySvc.success('应用成功！', '');
+            this.notifySvc.success(this.i18nSvc.fanyi('common.notify.apply-success'), '');
             this.isConnectModalVisible = false;
             this.loadAlertDefineTable();
           } else {
-            this.notifySvc.error('应用失败！', message.msg);
+            this.notifySvc.error(this.i18nSvc.fanyi('common.notify.apply-fail'), message.msg);
           }
         },
         error => {
           this.isConnectModalOkLoading = false;
-          this.notifySvc.error('应用失败！', error.msg);
+          this.notifySvc.error(this.i18nSvc.fanyi('common.notify.apply-fail'), error.msg);
         }
       );
   }

web-app/src/app/routes/dashboard/dashboard.component.html

@@ -10,16 +10,19 @@
       </div>
       <div nz-col nzSpan="14" class="p-md text-white">
         <nz-tag class="mb-xs">
-          <span>正常 </span><span style="font-weight: bolder">{{ appCountService.availableSize }}</span>
+          <span>{{ 'monitor.status.available' | i18n }} </span
+          ><span style="font-weight: bolder">{{ appCountService.availableSize }}</span>
         </nz-tag>
         <nz-tag class="mb-xs">
-          <span>不可用 </span><span style="font-weight: bolder">{{ appCountService.unAvailableSize }}</span>
+          <span>{{ 'monitor.status.unavailable' | i18n }} </span
+          ><span style="font-weight: bolder">{{ appCountService.unAvailableSize }}</span>
         </nz-tag>
         <nz-tag class="mb-xs">
-          <span>不可达 </span><span style="font-weight: bolder">{{ appCountService.unReachableSize }}</span>
+          <span>{{ 'monitor.status.unreachable' | i18n }} </span
+          ><span style="font-weight: bolder">{{ appCountService.unReachableSize }}</span>
         </nz-tag>
         <nz-tag class="mb-xs">
-          <span>未监控 </span><span style="font-weight: bolder">{{ appCountService.unManageSize }}</span>
+          <span>{{ 'monitor.status.un-manage' | i18n }} </span><span style="font-weight: bolder">{{ appCountService.unManageSize }}</span>
         </nz-tag>
       </div>
     </div>
@@ -35,16 +38,16 @@
       </div>
       <div nz-col nzSpan="14">
         <nz-tag class="mb-xs">
-          <span>正常 </span><span style="font-weight: bolder">{{ appCountDb.availableSize }}</span>
+          <span>{{ 'monitor.status.available' | i18n }} </span><span style="font-weight: bolder">{{ appCountDb.availableSize }}</span>
         </nz-tag>
         <nz-tag class="mb-xs">
-          <span>不可用 </span><span style="font-weight: bolder">{{ appCountDb.unAvailableSize }}</span>
+          <span>{{ 'monitor.status.unavailable' | i18n }} </span><span style="font-weight: bolder">{{ appCountDb.unAvailableSize }}</span>
         </nz-tag>
         <nz-tag class="mb-xs">
-          <span>不可达 </span><span style="font-weight: bolder">{{ appCountDb.unReachableSize }}</span>
+          <span>{{ 'monitor.status.unreachable' | i18n }} </span><span style="font-weight: bolder">{{ appCountDb.unReachableSize }}</span>
         </nz-tag>
         <nz-tag class="mb-xs">
-          <span>未监控 </span><span style="font-weight: bolder">{{ appCountDb.unManageSize }}</span>
+          <span>{{ 'monitor.status.un-manage' | i18n }} </span><span style="font-weight: bolder">{{ appCountDb.unManageSize }}</span>
         </nz-tag>
       </div>
     </div>
@@ -60,16 +63,16 @@
       </div>
       <div nz-col nzSpan="14">
         <nz-tag class="mb-xs">
-          <span>正常 </span><span style="font-weight: bolder">{{ appCountOs.availableSize }}</span>
+          <span>{{ 'monitor.status.available' | i18n }} </span><span style="font-weight: bolder">{{ appCountOs.availableSize }}</span>
         </nz-tag>
         <nz-tag class="mb-xs">
-          <span>不可用 </span><span style="font-weight: bolder">{{ appCountOs.unAvailableSize }}</span>
+          <span>{{ 'monitor.status.unavailable' | i18n }} </span><span style="font-weight: bolder">{{ appCountOs.unAvailableSize }}</span>
         </nz-tag>
         <nz-tag class="mb-xs">
-          <span>不可达 </span><span style="font-weight: bolder">{{ appCountOs.unReachableSize }}</span>
+          <span>{{ 'monitor.status.unreachable' | i18n }} </span><span style="font-weight: bolder">{{ appCountOs.unReachableSize }}</span>
         </nz-tag>
         <nz-tag class="mb-xs">
-          <span>未监控 </span><span style="font-weight: bolder">{{ appCountOs.unManageSize }}</span>
+          <span>{{ 'monitor.status.un-manage' | i18n }} </span><span style="font-weight: bolder">{{ appCountOs.unManageSize }}</span>
         </nz-tag>
       </div>
     </div>
@@ -85,16 +88,16 @@
       </div>
       <div nz-col nzSpan="14">
         <nz-tag class="mb-xs">
-          <span>正常 </span><span style="font-weight: bolder">{{ appCountCustom.availableSize }}</span>
+          <span>{{ 'monitor.status.available' | i18n }} </span><span style="font-weight: bolder">{{ appCountCustom.availableSize }}</span>
         </nz-tag>
         <nz-tag class="mb-xs">
-          <span>不可用 </span><span style="font-weight: bolder">{{ appCountCustom.unAvailableSize }}</span>
+          <span>{{ 'monitor.status.unavailable' | i18n }} </span><span style="font-weight: bolder">{{ appCountCustom.unAvailableSize }}</span>
         </nz-tag>
         <nz-tag class="mb-xs">
-          <span>不可达 </span><span style="font-weight: bolder">{{ appCountCustom.unReachableSize }}</span>
+          <span>{{ 'monitor.status.unreachable' | i18n }} </span><span style="font-weight: bolder">{{ appCountCustom.unReachableSize }}</span>
         </nz-tag>
         <nz-tag class="mb-xs">
-          <span>未监控 </span><span style="font-weight: bolder">{{ appCountCustom.unManageSize }}</span>
+          <span>{{ 'monitor.status.un-manage' | i18n }} </span><span style="font-weight: bolder">{{ appCountCustom.unManageSize }}</span>
         </nz-tag>
       </div>
     </div>
@@ -114,21 +117,21 @@
 
 <div nz-row nzGutter="16" style="margin-top: 10px">
   <div nz-col nzXs="24" nzSm="24" nzMd="12" class="mb-md">
-    <nz-card nzHoverable nzTitle="最近告警列表" [nzExtra]="extraTemplate">
+    <nz-card nzHoverable [nzTitle]="'dashboard.alerts.title' | i18n" [nzExtra]="extraTemplate">
       <nz-timeline nzMode="left">
         <nz-timeline-item *ngFor="let alert of alerts; let i = index" [nzLabel]="(alert.gmtCreate | date: 'YYYY-MM-dd HH:mm:ss')?.trim()">
           <p style="font-weight: 400">
             <nz-tag *ngIf="alert.priority == 0" nzColor="red">
               <i nz-icon nzType="bell" nzTheme="outline"></i>
-              <span>紧急告警</span>
+              <span>{{ 'alert.priority.0' | i18n }}</span>
             </nz-tag>
             <nz-tag *ngIf="alert.priority == 1" nzColor="orange">
               <i nz-icon nzType="bell" nzTheme="outline"></i>
-              <span>严重告警</span>
+              <span>{{ 'alert.priority.1' | i18n }}</span>
             </nz-tag>
             <nz-tag *ngIf="alert.priority == 2" nzColor="yellow">
               <i nz-icon nzType="bell" nzTheme="outline"></i>
-              <span>警告告警</span>
+              <span>{{ 'alert.priority.2' | i18n }}</span>
             </nz-tag>
             <span>[{{ alert.monitorName }}] </span>
             {{ alert.content }}
@@ -162,5 +165,5 @@
 </div>
 
 <ng-template #extraTemplate>
-  <a [routerLink]="['/alert/center']">进入告警中心</a>
+  <a [routerLink]="['/alert/center']">{{ 'dashboard.alerts.enter' | i18n }}</a>
 </ng-template>

web-app/src/app/routes/dashboard/dashboard.component.ts

@@ -48,13 +48,13 @@ export class DashboardComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.appsCountTheme = {
       title: {
-        text: '监控总览',
-        subtext: '监控类型纳管数量分布',
+        text: this.i18nSvc.fanyi('dashboard.monitors.title'),
+        subtext: this.i18nSvc.fanyi('dashboard.monitors.sub-title'),
         left: 'center'
       },
       tooltip: {
         trigger: 'item',
-        formatter: '{a} <br/>{b} : {c}个监控 占比({d}%)'
+        formatter: `{a} <br/>{b} : {c}${this.i18nSvc.fanyi('dashboard.monitors.formatter')}({d}%)`
       },
       legend: {
         show: false,
@@ -66,7 +66,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
       calculable: true,
       series: [
         {
-          name: '总量',
+          name: this.i18nSvc.fanyi('dashboard.monitors.total'),
           type: 'pie',
           selectedMode: 'single',
           color: '#722ED1',
@@ -81,10 +81,10 @@ export class DashboardComponent implements OnInit, OnDestroy {
           labelLine: {
             show: false
           },
-          data: [{ value: 0, name: '监控总量' }]
+          data: [{ value: 0, name: this.i18nSvc.fanyi('dashboard.monitors.total') }]
         },
         {
-          name: '纳管数量分布',
+          name: this.i18nSvc.fanyi('dashboard.monitors.distribute'),
           type: 'pie',
           radius: ['45%', '65%'],
           labelLine: {
@@ -127,7 +127,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
     };
     this.alertsTheme = {
       title: {
-        subtext: '告警分布',
+        subtext: this.i18nSvc.fanyi('dashboard.alerts.distribute'),
         left: 'center'
       },
       tooltip: {
@@ -138,14 +138,14 @@ export class DashboardComponent implements OnInit, OnDestroy {
       },
       xAxis: {
         type: 'category',
-        data: ['警告告警', '严重告警', '紧急告警']
+        data: [this.i18nSvc.fanyi('alert.priority.2'), this.i18nSvc.fanyi('alert.priority.1'), this.i18nSvc.fanyi('alert.priority.0')]
       },
       yAxis: {
         type: 'value'
       },
       series: [
         {
-          name: '告警数量',
+          name: this.i18nSvc.fanyi('dashboard.alerts.num'),
           type: 'bar',
           data: [
             {
@@ -176,7 +176,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
     };
     this.alertsDealTheme = {
       title: {
-        subtext: '告警处理',
+        subtext: this.i18nSvc.fanyi('dashboard.alerts.deal'),
         left: 'center'
       },
       tooltip: {
@@ -184,7 +184,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
       },
       series: [
         {
-          name: '告警处理率',
+          name: this.i18nSvc.fanyi('dashboard.alerts.deal-percent'),
           type: 'gauge',
           progress: {
             show: true
@@ -196,7 +196,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
           data: [
             {
               value: 100,
-              name: '告警处理率'
+              name: this.i18nSvc.fanyi('dashboard.alerts.deal-percent')
             }
           ]
         }
@@ -279,7 +279,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
             }
           });
           // @ts-ignore
-          this.appsCountTheme.series[0].data = [{ value: total, name: '监控总量' }];
+          this.appsCountTheme.series[0].data = [{ value: total, name: this.i18nSvc.fanyi('dashboard.monitors.total') }];
           // @ts-ignore
           this.appsCountTheme.series[1].data = this.appsCountTableData;
           this.appsCountEChartOption = this.appsCountTheme;
@@ -397,7 +397,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
           this.alertsDealTheme.series[0].data = [
             {
               value: summary.rate,
-              name: '告警处理率'
+              name: this.i18nSvc.fanyi('dashboard.alerts.deal-percent')
             }
           ];
           this.alertsEChartOption = this.alertsTheme;

web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.ts

@@ -1,4 +1,6 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Inject, Input, OnInit } from '@angular/core';
+import { I18NService } from '@core';
+import { ALAIN_I18N_TOKEN } from '@delon/theme';
 import { EChartsOption } from 'echarts';
 import { finalize } from 'rxjs/operators';
 
@@ -32,7 +34,7 @@ export class MonitorDataChartComponent implements OnInit {
   echartsInstance!: any;
   // 查询历史数据时间段 默认最近6小时
   timePeriod: string = '6h';
-  constructor(private monitorSvc: MonitorService) {}
+  constructor(private monitorSvc: MonitorService, @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService) {}
 
   ngOnInit(): void {
     this.lineHistoryTheme = {
@@ -51,8 +53,8 @@ export class MonitorDataChartComponent implements OnInit {
           dataZoom: {
             yAxisIndex: 'none',
             title: {
-              zoom: '区域缩放',
-              back: '缩放还原'
+              zoom: this.i18nSvc.fanyi('monitors.detail.chart.zoom'),
+              back: this.i18nSvc.fanyi('monitors.detail.chart.back')
             },
             emphasis: {
               iconStyle: {
@@ -61,7 +63,7 @@ export class MonitorDataChartComponent implements OnInit {
             }
           },
           saveAsImage: {
-            title: '保存图片',
+            title: this.i18nSvc.fanyi('monitors.detail.chart.save'),
             emphasis: {
               iconStyle: {
                 textPosition: 'left'
@@ -70,7 +72,7 @@ export class MonitorDataChartComponent implements OnInit {
           },
           myPeriod1h: {
             show: true,
-            title: '查询近1小时',
+            title: this.i18nSvc.fanyi('monitors.detail.chart.query-1h'),
             icon: 'path://M827.871087 196.128913C743.498468 111.756293 631.321596 65.290005 512 65.290005c-119.319549 0-231.499491 46.465265-315.871087 130.837884S65.290005 392.680451 65.290005 512s46.465265 231.499491 130.837884 315.871087 196.551538 130.837884 315.871087 130.837884c119.321596 0 231.499491-46.465265 315.871087-130.837884S958.708971 631.319549 958.708971 512 912.243707 280.500509 827.871087 196.128913zM531.556405 917.246651l0-74.145697c0-11.31572-9.174963-20.491707-20.491707-20.491707-11.316743 0-20.491707 9.174963-20.491707 20.491707l0 74.059739C283.276738 906.322857 116.693746 739.164766 106.755396 531.634176l72.351841 0c11.31572 0 20.491707-9.174963 20.491707-20.491707 0-11.31572-9.174963-20.491707-20.491707-20.491707l-72.273047 0c10.769274-206.737528 177.01253-373.005342 383.740848-383.813502l0 72.346725c0 11.316743 9.174963 20.491707 20.491707 20.491707 11.31572 0 20.491707-9.17394 20.491707-20.491707L531.558451 106.752326c207.593012 9.901511 374.807385 176.539762 385.609405 383.89946l-74.142627 0c-11.316743 0-20.491707 9.174963-20.491707 20.491707 0 11.316743 9.174963 20.491707 20.491707 20.491707l74.220399 0C907.275555 739.78796 739.720422 907.317511 531.556405 917.246651z;M532.098757 503.118726 532.098757 258.240529c0-11.316743-9.174963-20.491707-20.491707-20.491707-11.31572 0-20.491707 9.17394-20.491707 20.491707l0 254.66612c0 7.858992 4.429893 14.677281 10.924817 18.114566L693.447539 722.42757c4.002151 4.000104 9.245572 6.001691 14.490016 6.001691s10.487865-2.001587 14.490016-6.001691c8.002254-8.002254 8.002254-20.977777 0-28.980032L532.098757 503.118726z',
             emphasis: {
               iconStyle: {
@@ -83,7 +85,7 @@ export class MonitorDataChartComponent implements OnInit {
           },
           myPeriod6h: {
             show: true,
-            title: '查询近6小时',
+            title: this.i18nSvc.fanyi('monitors.detail.chart.query-6h'),
             icon: 'path://M827.871087 196.128913C743.498468 111.756293 631.321596 65.290005 512 65.290005c-119.319549 0-231.499491 46.465265-315.871087 130.837884S65.290005 392.680451 65.290005 512s46.465265 231.499491 130.837884 315.871087 196.551538 130.837884 315.871087 130.837884c119.321596 0 231.499491-46.465265 315.871087-130.837884S958.708971 631.319549 958.708971 512 912.243707 280.500509 827.871087 196.128913zM531.556405 917.246651l0-74.145697c0-11.31572-9.174963-20.491707-20.491707-20.491707-11.316743 0-20.491707 9.174963-20.491707 20.491707l0 74.059739C283.276738 906.322857 116.693746 739.164766 106.755396 531.634176l72.351841 0c11.31572 0 20.491707-9.174963 20.491707-20.491707 0-11.31572-9.174963-20.491707-20.491707-20.491707l-72.273047 0c10.769274-206.737528 177.01253-373.005342 383.740848-383.813502l0 72.346725c0 11.316743 9.174963 20.491707 20.491707 20.491707 11.31572 0 20.491707-9.17394 20.491707-20.491707L531.558451 106.752326c207.593012 9.901511 374.807385 176.539762 385.609405 383.89946l-74.142627 0c-11.316743 0-20.491707 9.174963-20.491707 20.491707 0 11.316743 9.174963 20.491707 20.491707 20.491707l74.220399 0C907.275555 739.78796 739.720422 907.317511 531.556405 917.246651z;M532.098757 503.118726 532.098757 258.240529c0-11.316743-9.174963-20.491707-20.491707-20.491707-11.31572 0-20.491707 9.17394-20.491707 20.491707l0 254.66612c0 7.858992 4.429893 14.677281 10.924817 18.114566L693.447539 722.42757c4.002151 4.000104 9.245572 6.001691 14.490016 6.001691s10.487865-2.001587 14.490016-6.001691c8.002254-8.002254 8.002254-20.977777 0-28.980032L532.098757 503.118726z',
             emphasis: {
               iconStyle: {
@@ -96,7 +98,7 @@ export class MonitorDataChartComponent implements OnInit {
           },
           myPeriod1d: {
             show: true,
-            title: '查询近1天',
+            title: this.i18nSvc.fanyi('monitors.detail.chart.query-1d'),
             icon: 'path://M827.871087 196.128913C743.498468 111.756293 631.321596 65.290005 512 65.290005c-119.319549 0-231.499491 46.465265-315.871087 130.837884S65.290005 392.680451 65.290005 512s46.465265 231.499491 130.837884 315.871087 196.551538 130.837884 315.871087 130.837884c119.321596 0 231.499491-46.465265 315.871087-130.837884S958.708971 631.319549 958.708971 512 912.243707 280.500509 827.871087 196.128913zM531.556405 917.246651l0-74.145697c0-11.31572-9.174963-20.491707-20.491707-20.491707-11.316743 0-20.491707 9.174963-20.491707 20.491707l0 74.059739C283.276738 906.322857 116.693746 739.164766 106.755396 531.634176l72.351841 0c11.31572 0 20.491707-9.174963 20.491707-20.491707 0-11.31572-9.174963-20.491707-20.491707-20.491707l-72.273047 0c10.769274-206.737528 177.01253-373.005342 383.740848-383.813502l0 72.346725c0 11.316743 9.174963 20.491707 20.491707 20.491707 11.31572 0 20.491707-9.17394 20.491707-20.491707L531.558451 106.752326c207.593012 9.901511 374.807385 176.539762 385.609405 383.89946l-74.142627 0c-11.316743 0-20.491707 9.174963-20.491707 20.491707 0 11.316743 9.174963 20.491707 20.491707 20.491707l74.220399 0C907.275555 739.78796 739.720422 907.317511 531.556405 917.246651z;M532.098757 503.118726 532.098757 258.240529c0-11.316743-9.174963-20.491707-20.491707-20.491707-11.31572 0-20.491707 9.17394-20.491707 20.491707l0 254.66612c0 7.858992 4.429893 14.677281 10.924817 18.114566L693.447539 722.42757c4.002151 4.000104 9.245572 6.001691 14.490016 6.001691s10.487865-2.001587 14.490016-6.001691c8.002254-8.002254 8.002254-20.977777 0-28.980032L532.098757 503.118726z',
             emphasis: {
               iconStyle: {
@@ -109,7 +111,7 @@ export class MonitorDataChartComponent implements OnInit {
           },
           myPeriod1w: {
             show: true,
-            title: '查询近1周',
+            title: this.i18nSvc.fanyi('monitors.detail.chart.query-1w'),
             icon: 'path://M827.871087 196.128913C743.498468 111.756293 631.321596 65.290005 512 65.290005c-119.319549 0-231.499491 46.465265-315.871087 130.837884S65.290005 392.680451 65.290005 512s46.465265 231.499491 130.837884 315.871087 196.551538 130.837884 315.871087 130.837884c119.321596 0 231.499491-46.465265 315.871087-130.837884S958.708971 631.319549 958.708971 512 912.243707 280.500509 827.871087 196.128913zM531.556405 917.246651l0-74.145697c0-11.31572-9.174963-20.491707-20.491707-20.491707-11.316743 0-20.491707 9.174963-20.491707 20.491707l0 74.059739C283.276738 906.322857 116.693746 739.164766 106.755396 531.634176l72.351841 0c11.31572 0 20.491707-9.174963 20.491707-20.491707 0-11.31572-9.174963-20.491707-20.491707-20.491707l-72.273047 0c10.769274-206.737528 177.01253-373.005342 383.740848-383.813502l0 72.346725c0 11.316743 9.174963 20.491707 20.491707 20.491707 11.31572 0 20.491707-9.17394 20.491707-20.491707L531.558451 106.752326c207.593012 9.901511 374.807385 176.539762 385.609405 383.89946l-74.142627 0c-11.316743 0-20.491707 9.174963-20.491707 20.491707 0 11.316743 9.174963 20.491707 20.491707 20.491707l74.220399 0C907.275555 739.78796 739.720422 907.317511 531.556405 917.246651z;M532.098757 503.118726 532.098757 258.240529c0-11.316743-9.174963-20.491707-20.491707-20.491707-11.31572 0-20.491707 9.17394-20.491707 20.491707l0 254.66612c0 7.858992 4.429893 14.677281 10.924817 18.114566L693.447539 722.42757c4.002151 4.000104 9.245572 6.001691 14.490016 6.001691s10.487865-2.001587 14.490016-6.001691c8.002254-8.002254 8.002254-20.977777 0-28.980032L532.098757 503.118726z',
             emphasis: {
               iconStyle: {
@@ -122,7 +124,7 @@ export class MonitorDataChartComponent implements OnInit {
           },
           myPeriod4w: {
             show: true,
-            title: '查询近1月',
+            title: this.i18nSvc.fanyi('monitors.detail.chart.query-1m'),
             icon: 'path://M827.871087 196.128913C743.498468 111.756293 631.321596 65.290005 512 65.290005c-119.319549 0-231.499491 46.465265-315.871087 130.837884S65.290005 392.680451 65.290005 512s46.465265 231.499491 130.837884 315.871087 196.551538 130.837884 315.871087 130.837884c119.321596 0 231.499491-46.465265 315.871087-130.837884S958.708971 631.319549 958.708971 512 912.243707 280.500509 827.871087 196.128913zM531.556405 917.246651l0-74.145697c0-11.31572-9.174963-20.491707-20.491707-20.491707-11.316743 0-20.491707 9.174963-20.491707 20.491707l0 74.059739C283.276738 906.322857 116.693746 739.164766 106.755396 531.634176l72.351841 0c11.31572 0 20.491707-9.174963 20.491707-20.491707 0-11.31572-9.174963-20.491707-20.491707-20.491707l-72.273047 0c10.769274-206.737528 177.01253-373.005342 383.740848-383.813502l0 72.346725c0 11.316743 9.174963 20.491707 20.491707 20.491707 11.31572 0 20.491707-9.17394 20.491707-20.491707L531.558451 106.752326c207.593012 9.901511 374.807385 176.539762 385.609405 383.89946l-74.142627 0c-11.316743 0-20.491707 9.174963-20.491707 20.491707 0 11.316743 9.174963 20.491707 20.491707 20.491707l74.220399 0C907.275555 739.78796 739.720422 907.317511 531.556405 917.246651z;M532.098757 503.118726 532.098757 258.240529c0-11.316743-9.174963-20.491707-20.491707-20.491707-11.31572 0-20.491707 9.17394-20.491707 20.491707l0 254.66612c0 7.858992 4.429893 14.677281 10.924817 18.114566L693.447539 722.42757c4.002151 4.000104 9.245572 6.001691 14.490016 6.001691s10.487865-2.001587 14.490016-6.001691c8.002254-8.002254 8.002254-20.977777 0-28.980032L532.098757 503.118726z',
             emphasis: {
               iconStyle: {
@@ -135,7 +137,7 @@ export class MonitorDataChartComponent implements OnInit {
           },
           myRefresh: {
             show: true,
-            title: '刷新',
+            title: this.i18nSvc.fanyi('common.refresh'),
             icon: 'path://M663.881 339.763l274.021-0.742 0.058-13.271 0.699 0c-0.204-0.48-0.495-0.945-0.699-1.426L938.658 65l-23.776 0.044L914.3 280.41C835.9 151.374 694.321 65 532.342 65c-246.869 0-447 200.132-447 447 0 246.84 200.131 447 447 447 180.343 0 335.657-106.919 406.316-260.75l-33.176 0C836.948 835.027 695.456 929.2 532.342 929.2c-230.048 0-417.2-187.152-417.2-417.2s187.152-417.2 417.2-417.2c158.895 0 297.068 89.487 367.466 220.547l-235.868 0.64L663.881 339.763z',
             emphasis: {
               iconStyle: {
@@ -183,7 +185,7 @@ export class MonitorDataChartComponent implements OnInit {
     };
     if (this.unit != undefined || this.unit != null) {
       // @ts-ignore
-      this.lineHistoryTheme.title?.subtext = `单位 ${this.unit}`;
+      this.lineHistoryTheme.title?.subtext = `${this.i18nSvc.fanyi('monitors.detail.chart.unit')}  ${this.unit}`;
     }
     this.loadData();
   }
@@ -251,7 +253,7 @@ export class MonitorDataChartComponent implements OnInit {
           } else {
             this.eChartOption = this.lineHistoryTheme;
             this.eChartOption.title = {
-              text: `${this.metrics}.${this.metric}` + '\n\n\n' + '暂无数据',
+              text: `${`${this.metrics}.${this.metric}` + '\n\n\n'}${this.i18nSvc.fanyi('monitors.detail.chart.no-data')}`,
               textStyle: {
                 fontSize: 16,
                 fontFamily: 'monospace',

web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.html

@@ -17,8 +17,8 @@
   <nz-table #smallTable nzSize="small" nzNoResult="No Metrics Data" nzFrontPagination="false" [nzData]="valueRows">
     <thead>
       <tr>
-        <th style="text-align: center">属性</th>
-        <th style="text-align: center">值</th>
+        <th style="text-align: center">{{ 'common.name' | i18n }}</th>
+        <th style="text-align: center">{{ 'common.value' | i18n }}</th>
       </tr>
     </thead>
     <tbody>
@@ -33,17 +33,11 @@
 <ng-template #monitor_metrics_card_title>
   <p style="font-size: small; text-align: center; margin-bottom: 3px">{{ metrics }}</p>
   <div>
-    <a nz-popover [nzPopoverContent]="'最近采集时间 ' + (time | _date: 'yyyy-MM-dd HH:mm:ss')">
+    <a nz-popover [nzPopoverContent]="'Last Collect Time ' + (time | _date: 'yyyy-MM-dd HH:mm:ss')">
       <i nz-icon nzType="field-time" nzTheme="outline"></i
     ></a>
-    <i style="font-size: 0.3px; font-weight: normal; color: rgba(112,112,112,0.89)">采集时间:{{ time | _date: 'HH:mm:ss' }}</i>
+    <i style="font-size: 0.3px; font-weight: normal; color: rgba(112, 112, 112, 0.89)">
+      {{ 'monitors.collect.time' | i18n }}:{{ time | _date: 'HH:mm:ss' }}
+    </i>
   </div>
 </ng-template>
-
-<!--<nz-card *ngIf="!isTable" nzHoverable style="height:auto;margin-left: 14px;" [nzBordered]="true"-->
-<!--         [nzTitle]="monitor_metrics_card_title" >-->
-<!--  <div *ngFor="let field of fields;let i = index;" nz-row nzGutter="16">-->
-<!--    <div nz-col nzSpan="10"><p style="text-align: right">{{field.name}}</p></div>-->
-<!--    <div nz-col nzSpan="14"><p style="text-align: left">{{rowValues[i].origin}}</p></div>-->
-<!--  </div>-->
-<!--</nz-card>-->

web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html

@@ -3,20 +3,20 @@
   <nz-breadcrumb-item>
     <a [routerLink]="['/']">
       <i nz-icon nzType="home"></i>
-      <span>仪表盘</span>
+      <span>{{ 'menu.dashboard' | i18n }}</span>
     </a>
   </nz-breadcrumb-item>
   <nz-breadcrumb-item>
     <a [routerLink]="['/monitors']" [queryParams]="{ app: app ? app : '' }">
       <i nz-icon nzType="monitor"></i>
-      <span>监控列表</span>
+      <span>{{ 'monitors.list' | i18n }}</span>
     </a>
   </nz-breadcrumb-item>
   <nz-breadcrumb-item>
     <i nz-icon nzType="pie-chart"></i>
-    <span>{{ 'monitor.app.' + app | i18n }} 监控详情</span>
+    <span>{{ 'monitor.app.' + app | i18n }} {{ 'monitors.detail' | i18n }}</span>
     <a [href]="'https://tancloud.cn/docs/help/' + monitor.app" target="_blank" style="float: right; margin-right: 5%">
-      <span>帮助&nbsp;</span>
+      <span>{{ 'common.button.help' | i18n }} </span>
       <i nz-icon nzType="question-circle" nzTheme="outline"></i>
     </a>
   </nz-breadcrumb-item>
@@ -33,7 +33,9 @@
         >
       </div>
       <div nz-row nzGutter="16">
-        <div nz-col nzSpan="8"><p style="text-align: right">名称</p></div>
+        <div nz-col nzSpan="8"
+          ><p style="text-align: right">{{ 'monitors.detail.name' | i18n }}</p></div
+        >
         <div nz-col nzSpan="16"
           ><p style="text-align: left">{{ monitor?.name }}</p></div
         >
@@ -45,58 +47,66 @@
         >
       </div>
       <div nz-row nzGutter="16">
-        <div nz-col nzSpan="8"><p style="text-align: right">端口</p></div>
+        <div nz-col nzSpan="8"
+          ><p style="text-align: right">{{ 'monitors.detail.port' | i18n }}</p></div
+        >
         <div nz-col nzSpan="16"
           ><p style="text-align: left">{{ port }}</p></div
         >
       </div>
       <div nz-row nzGutter="16">
-        <div nz-col nzSpan="8"><p style="text-align: right">描述</p></div>
+        <div nz-col nzSpan="8"
+          ><p style="text-align: right">{{ 'monitors.detail.description' | i18n }}</p></div
+        >
         <div nz-col nzSpan="16"
           ><p style="text-align: left">{{ monitor?.description }}</p></div
         >
       </div>
       <div nz-row nzGutter="16">
-        <div nz-col nzSpan="8"><p style="text-align: right">状态</p></div>
+        <div nz-col nzSpan="8"
+          ><p style="text-align: right">{{ 'monitors.detail.status' | i18n }}</p></div
+        >
         <div nz-col nzSpan="16">
           <nz-tag *ngIf="monitor?.status == 0" nzColor="default">
             <i nz-icon nzType="robot" nzTheme="outline"></i>
-            <span>未监控</span>
+            <span>{{ 'monitor.status.un-manage' | i18n }}</span>
           </nz-tag>
           <nz-tag *ngIf="monitor?.status == 1" nzColor="success">
             <i nz-icon nzType="smile" nzTheme="outline"></i>
-            <span>正常监控</span>
+            <span>{{ 'monitor.status.available' | i18n }}</span>
           </nz-tag>
           <nz-tag *ngIf="monitor?.status == 2" nzColor="warning">
             <i nz-icon nzType="meh" nzTheme="outline"></i>
-            <span>监控不可用</span>
+            <span>{{ 'monitor.status.unavailable' | i18n }}</span>
           </nz-tag>
           <nz-tag *ngIf="monitor?.status == 3" nzColor="error">
             <i nz-icon nzType="frown" nzTheme="outline"></i>
-            <span>监控不可达</span>
-          </nz-tag>
-          <nz-tag *ngIf="monitor?.status == 4" nzColor="default">
-            <i nz-icon nzType="sync"></i>
-            <span>监控已挂起</span>
+            <span>{{ 'monitor.status.unreachable' | i18n }}</span>
           </nz-tag>
         </div>
       </div>
       <div nz-row nzGutter="16">
-        <div nz-col nzSpan="8"><p style="text-align: right">采集间隔</p></div>
+        <div nz-col nzSpan="8"
+          ><p style="text-align: right">{{ 'monitor.intervals' | i18n }}</p></div
+        >
         <div nz-col nzSpan="16"
           ><p style="text-align: left">{{ monitor?.intervals }}s</p></div
         >
       </div>
       <div nz-row nzGutter="16">
-        <div nz-col nzSpan="8"><p style="text-align: right">创建时间</p></div>
+        <div nz-col nzSpan="8"
+          ><p style="text-align: right">{{ 'common.new-time' | i18n }}</p></div
+        >
         <div nz-col nzSpan="16"
-          ><p style="text-align: left">{{ monitor?.gmtCreate | date: 'YYYY-MM-dd HH:mm:ss'  }}</p></div
+          ><p style="text-align: left">{{ monitor?.gmtCreate | date: 'YYYY-MM-dd HH:mm:ss' }}</p></div
         >
       </div>
       <div nz-row nzGutter="16">
-        <div nz-col nzSpan="8"><p style="text-align: right">更新时间</p></div>
+        <div nz-col nzSpan="8"
+          ><p style="text-align: right">{{ 'common.edit-time' | i18n }}</p></div
+        >
         <div nz-col nzSpan="16"
-          ><p style="text-align: left">{{ monitor?.gmtUpdate | date: 'YYYY-MM-dd HH:mm:ss'  }}</p></div
+          ><p style="text-align: left">{{ monitor?.gmtUpdate | date: 'YYYY-MM-dd HH:mm:ss' }}</p></div
         >
       </div>
     </nz-card>
@@ -107,7 +117,7 @@
         <nz-tab [nzTitle]="titleTemplate">
           <ng-template #titleTemplate>
             <i nz-icon nzType="pic-right" style="margin-left: 10px"></i>
-            监控实时数据详情
+            {{ 'monitors.detail.realtime' | i18n }}
           </ng-template>
           <div style="display: flex; justify-content: flex-start; flex-wrap: wrap">
             <div *ngFor="let metric of metrics; let i = index">
@@ -118,7 +128,7 @@
         <nz-tab [nzTitle]="title2Template" (nzClick)="initMetricChart()">
           <ng-template #title2Template>
             <i nz-icon nzType="pic-right" style="margin-left: 10px"></i>
-            监控历史图表详情
+            {{ 'monitors.detail.history' | i18n }}
           </ng-template>
           <div style="display: flex; justify-content: flex-start; flex-wrap: wrap">
             <div *ngFor="let item of chartMetrics; let i = index">
@@ -138,5 +148,5 @@
 </nz-layout>
 
 <ng-template #monitor_basic_card_title>
-  <p style="font-size: small; text-align: left; margin-bottom: 3px">监控基本属性</p>
+  <p style="font-size: small; text-align: left; margin-bottom: 3px">{{ 'monitors.detail.basic' | i18n }}</p>
 </ng-template>

web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html

@@ -3,20 +3,20 @@
   <nz-breadcrumb-item>
     <a [routerLink]="['/']">
       <i nz-icon nzType="home"></i>
-      <span>仪表盘</span>
+      <span>{{ 'menu.dashboard' | i18n }}</span>
     </a>
   </nz-breadcrumb-item>
   <nz-breadcrumb-item>
     <a [routerLink]="['/monitors']" [queryParams]="{ app: monitor.app ? monitor.app : '' }">
       <i nz-icon nzType="monitor"></i>
-      <span>监控列表</span>
+      <span>{{ 'monitors.list' | i18n }}</span>
     </a>
   </nz-breadcrumb-item>
   <nz-breadcrumb-item>
     <i nz-icon nzType="edit"></i>
-    <span>修改 {{ 'monitor.app.' + monitor.app | i18n }} 监控</span>
+    <span>{{ 'monitors.edit' | i18n }} {{ 'monitor.app.' + monitor.app | i18n }} {{ 'monitor' | i18n }}</span>
     <a [href]="'https://tancloud.cn/docs/help/' + monitor.app" target="_blank" style="float: right; margin-right: 5%">
-      <span>帮助&nbsp;</span>
+      <span>{{ 'common.button.help' | i18n }} </span>
       <i nz-icon nzType="question-circle" nzTheme="outline"></i>
     </a>
   </nz-breadcrumb-item>
@@ -27,17 +27,19 @@
   <div class="-inner-content">
     <form nz-form #editForm="ngForm">
       <nz-form-item>
-        <nz-form-label [nzSpan]="7" nzFor="host" nzRequired="true" nzTooltipTitle="被监控的对端IP或域名"> 监控Host </nz-form-label>
+        <nz-form-label [nzSpan]="7" nzFor="host" nzRequired="true" [nzTooltipTitle]="'monitor.host.tip' | i18n">
+          {{ 'monitor.host' | i18n }}
+        </nz-form-label>
         <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
-          <input [(ngModel)]="monitor.host" nz-input name="host" type="text" id="host" required placeholder="请输入域名或IP" />
+          <input [(ngModel)]="monitor.host" nz-input name="host" type="text" id="host" required [placeholder]="'monitor.host.tip' | i18n" />
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
-        <nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true" nzTooltipTitle="标识此监控的名称,名称需要保证唯一性">
-          监控名称
+        <nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true" [nzTooltipTitle]="'monitor.name.tip' | i18n">
+          {{ 'monitor.name' | i18n }}
         </nz-form-label>
         <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
-          <input [(ngModel)]="monitor.name" nz-input required name="name" type="text" id="name" placeholder="监控名称需要保证唯一性" />
+          <input [(ngModel)]="monitor.name" nz-input required name="name" type="text" id="name" [placeholder]="'monitor.name.tip' | i18n" />
         </nz-form-control>
       </nz-form-item>
 
@@ -163,7 +165,7 @@
       </nz-form-item>
 
       <nz-collapse [nzGhost]="true">
-        <nz-collapse-panel nzHeader="高级" [nzHeader]="extraColHeader" [nzShowArrow]="false">
+        <nz-collapse-panel [nzHeader]="extraColHeader" [nzShowArrow]="false">
           <nz-form-item *ngFor="let paramDefine of advancedParamDefines; let i = index">
             <nz-form-label
               *ngIf="paramDefine.field !== 'host' && paramDefine.type === 'text'"
@@ -296,8 +298,8 @@
         </nz-collapse-panel>
       </nz-collapse>
       <ng-template #extraColHeader>
-        <button style="top: -10px; margin-left: 40%" nz-button nzType="dashed" nz-tooltip nzTooltipTitle="设置高级可选参数">
-          <span>高级设置</span>
+        <button style="top: -10px; margin-left: 40%" nz-button nzType="dashed" nz-tooltip [nzTooltipTitle]="'monitors.advanced.tip' | i18n">
+          <span>{{ 'monitors.advanced' | i18n }}</span>
           <i nz-icon nzType="down-circle" nzTheme="outline"></i>
         </button>
       </ng-template>
@@ -305,7 +307,9 @@
       <nz-divider></nz-divider>
 
       <nz-form-item>
-        <nz-form-label nzSpan="7" nzFor="intervals" nzTooltipTitle="监控周期性采集数据间隔时间,单位秒"> 采集间隔 </nz-form-label>
+        <nz-form-label nzSpan="7" nzFor="intervals" [nzTooltipTitle]="'monitor.intervals.tip' | i18n">
+          {{ 'monitor.intervals' | i18n }}
+        </nz-form-label>
         <nz-form-control nzSpan="8">
           <nz-input-number [(ngModel)]="monitor.intervals" [nzMin]="10" [nzMax]="604800" [nzStep]="60" name="intervals" id="intervals">
           </nz-input-number>
@@ -313,14 +317,18 @@
       </nz-form-item>
 
       <nz-form-item>
-        <nz-form-label nzSpan="7" nzFor="detect" nzTooltipTitle="新增监控前是否先探测检查监控可用性"> 测试连接 </nz-form-label>
+        <nz-form-label nzSpan="7" nzFor="detect" [nzTooltipTitle]="'monitors.detect.tip' | i18n">
+          {{ 'monitors.detect' | i18n }}
+        </nz-form-label>
         <nz-form-control nzSpan="8">
           <nz-switch [(ngModel)]="detected" name="detect" id="detect"></nz-switch>
         </nz-form-control>
       </nz-form-item>
 
       <nz-form-item>
-        <nz-form-label [nzSpan]="7" nzFor="description" nzTooltipTitle="更多标识和描述此监控的备注信息"> 描述备注 </nz-form-label>
+        <nz-form-label [nzSpan]="7" nzFor="description" [nzTooltipTitle]="'monitor.description.tip' | i18n">
+          {{ 'monitor.description' | i18n }}
+        </nz-form-label>
         <nz-form-control [nzSpan]="8">
           <nz-textarea-count [nzMaxCharacterCount]="100">
             <textarea [(ngModel)]="monitor.description" rows="3" nz-input name="description" id="description"></textarea>
@@ -330,9 +338,9 @@
 
       <div nz-row>
         <div nz-col nzSpan="8" nzOffset="9">
-          <button nz-button nzType="primary" type="submit" (click)="onDetect(editForm.form)"> 测试 </button>
-          <button nz-button nzType="primary" type="submit" (click)="onSubmit(editForm.form)"> 确定 </button>
-          <button nz-button nzType="primary" type="reset" (click)="onCancel()"> 取消 </button>
+          <button nz-button nzType="primary" type="submit" (click)="onDetect(editForm.form)"> {{ 'common.button.detect' | i18n }} </button>
+          <button nz-button nzType="primary" type="submit" (click)="onSubmit(editForm.form)"> {{ 'common.button.ok' | i18n }} </button>
+          <button nz-button nzType="primary" type="reset" (click)="onCancel()"> {{ 'common.button.cancel' | i18n }} </button>
         </div>
       </div>
     </form>

web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
-import { TitleService } from '@delon/theme';
+import { I18NService } from '@core';
+import { ALAIN_I18N_TOKEN, TitleService } from '@delon/theme';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
 import { throwError } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
@@ -25,7 +26,8 @@ export class MonitorEditComponent implements OnInit {
     private route: ActivatedRoute,
     private router: Router,
     private titleSvc: TitleService,
-    private notifySvc: NzNotificationService
+    private notifySvc: NzNotificationService,
+    @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService
   ) {}
 
   paramDefines!: ParamDefine[];
@@ -64,8 +66,8 @@ export class MonitorEditComponent implements OnInit {
             this.detected = message.data.detected ? message.data.detected : true;
           } else {
             console.warn(message.msg);
-            this.notifySvc.error('查询异常，此监控不存在', message.msg);
-            return throwError('查询此监控异常');
+            this.notifySvc.error(this.i18nSvc.fanyi('monitors.not-found'), message.msg);
+            return throwError(this.i18nSvc.fanyi('monitors.not-found'));
           }
           return this.appDefineSvc.getAppParamsDefine(this.monitor.app);
         })
@@ -168,15 +170,15 @@ export class MonitorEditComponent implements OnInit {
       message => {
         this.isSpinning = false;
         if (message.code === 0) {
-          this.notifySvc.success('修改监控成功', '');
+          this.notifySvc.success(this.i18nSvc.fanyi('monitors.edit.success'), '');
           this.router.navigateByUrl(`/monitors?app=${this.monitor.app}`);
         } else {
-          this.notifySvc.error('修改监控失败', message.msg);
+          this.notifySvc.error(this.i18nSvc.fanyi('monitors.edit.failed'), message.msg);
         }
       },
       error => {
         this.isSpinning = false;
-        this.notifySvc.error('修改监控失败', error.error.msg);
+        this.notifySvc.error(this.i18nSvc.fanyi('monitors.edit.failed'), error.error.msg);
       }
     );
   }
@@ -217,14 +219,14 @@ export class MonitorEditComponent implements OnInit {
       message => {
         this.isSpinning = false;
         if (message.code === 0) {
-          this.notifySvc.success('探测成功', '');
+          this.notifySvc.success(this.i18nSvc.fanyi('monitors.detect.success'), '');
         } else {
-          this.notifySvc.error('探测失败', message.msg);
+          this.notifySvc.error(this.i18nSvc.fanyi('monitors.detect.failed'), message.msg);
         }
       },
       error => {
         this.isSpinning = false;
-        this.notifySvc.error('探测异常', error.error.msg);
+        this.notifySvc.error(this.i18nSvc.fanyi('monitors.detect.failed'), error.error.msg);
       }
     );
   }

web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html

@@ -3,12 +3,12 @@
   <nz-breadcrumb-item>
     <a [routerLink]="['/']">
       <i nz-icon nzType="home"></i>
-      <span>仪表盘</span>
+      <span>{{ 'menu.dashboard' | i18n }}</span>
     </a>
   </nz-breadcrumb-item>
   <nz-breadcrumb-item>
     <i nz-icon nzType="monitor"></i>
-    <span>{{ 'monitor.app.' + app | i18n }} 监控列表</span>
+    <span>{{ 'monitor.app.' + app | i18n }} {{ 'monitors.list' | i18n }}</span>
   </nz-breadcrumb-item>
 </nz-breadcrumb>
 <nz-divider></nz-divider>
@@ -17,35 +17,37 @@
   <button nz-button nzType="primary">
     <a routerLink="/monitors/new" [queryParams]="{ app: app }">
       <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
-      新增 {{ 'monitor.app.' + app | i18n }}
+      {{ 'monitors.new' | i18n }} {{ 'monitor.app.' + app | i18n }}
     </a>
   </button>
   <button nz-button nzType="primary" (click)="onEditMonitor()">
     <i nz-icon nzType="edit" nzTheme="outline"></i>
-    编辑
+    {{ 'monitors.edit' | i18n }}
   </button>
   <button nz-button nzType="primary" (click)="onDeleteMonitors()">
     <i nz-icon nzType="delete" nzTheme="outline"></i>
-    删除
+    {{ 'monitors.delete' | i18n }}
   </button>
   <button nz-button nzType="primary" (click)="onEnableManageMonitors()">
     <i nz-icon nzType="up-circle" nzTheme="outline"></i>
-    启用监控
+    {{ 'monitors.enable' | i18n }}
   </button>
   <button nz-button nzType="primary" (click)="onCancelManageMonitors()">
     <i nz-icon nzType="down-circle" nzTheme="outline"></i>
-    取消监控
+    {{ 'monitors.cancel' | i18n }}
   </button>
-  <button nz-button nzType="primary" (click)="sync()" nz-tooltip nzTooltipTitle="刷新">
+  <button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
     <i nz-icon nzType="sync" nzTheme="outline"></i>
   </button>
 
-  <button style="margin-right: 25px; float: right" nz-button nzType="primary" (click)="onFilterSearchMonitors()"> 搜索 </button>
+  <button style="margin-right: 25px; float: right" nz-button nzType="primary" (click)="onFilterSearchMonitors()">
+    {{ 'common.search' | i18n }}
+  </button>
   <input
     style="margin-right: 5px; float: right; width: 150px; border-radius: 9px; text-align: center"
     nz-input
     type="text"
-    placeholder="搜索监控"
+    [placeholder]="'monitors.search.placeholder' | i18n"
     nzSize="default"
     (keyup.enter)="onFilterSearchMonitors()"
     [(ngModel)]="filterContent"
@@ -53,14 +55,14 @@
   <nz-select
     style="margin-right: 10px; float: right; width: 120px"
     nzAllowClear
-    [nzPlaceHolder]="'监控状态过滤'"
+    [nzPlaceHolder]="'monitors.search.filter' | i18n"
     [(ngModel)]="filterStatus"
   >
-    <nz-option nzLabel="全部状态" nzValue="9"></nz-option>
-    <nz-option nzLabel="监控正常" nzValue="1"></nz-option>
-    <nz-option nzLabel="不可用" nzValue="2"></nz-option>
-    <nz-option nzLabel="不可达" nzValue="3"></nz-option>
-    <nz-option nzLabel="未监控" nzValue="0"></nz-option>
+    <nz-option [nzLabel]="'monitor.status.all' | i18n" nzValue="9"></nz-option>
+    <nz-option [nzLabel]="'monitor.status.available' | i18n" nzValue="1"></nz-option>
+    <nz-option [nzLabel]="'monitor.status.unavailable' | i18n" nzValue="2"></nz-option>
+    <nz-option [nzLabel]="'monitor.status.unreachable' | i18n" nzValue="3"></nz-option>
+    <nz-option [nzLabel]="'monitor.status.un-manage' | i18n" nzValue="0"></nz-option>
   </nz-select>
 </div>
 
@@ -82,12 +84,12 @@
   <thead>
     <tr>
       <th nzAlign="center" nzLeft nzWidth="4%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
-      <th nzAlign="center" nzLeft>监控名称</th>
-      <th nzAlign="center">监控状态</th>
-      <th nzAlign="center">监控Host</th>
-      <th nzAlign="center">监控类型</th>
-      <th nzAlign="center">最新修改时间</th>
-      <th nzAlign="center">操作</th>
+      <th nzAlign="center" nzLeft>{{ 'monitor.name' | i18n }}</th>
+      <th nzAlign="center">{{ 'monitor.status' | i18n }}</th>
+      <th nzAlign="center">{{ 'monitor.host' | i18n }}</th>
+      <th nzAlign="center">{{ 'monitor.app' | i18n }}</th>
+      <th nzAlign="center">{{ 'common.edit-time' | i18n }}</th>
+      <th nzAlign="center">{{ 'common.edit' | i18n }}</th>
     </tr>
   </thead>
   <tbody>
@@ -101,23 +103,19 @@
       <td nzAlign="center">
         <nz-tag *ngIf="data.status == 0" nzColor="default">
           <i nz-icon nzType="robot" nzTheme="outline"></i>
-          <span>未监控</span>
+          <span>{{ 'monitor.status.un-manage' | i18n }}</span>
         </nz-tag>
         <nz-tag *ngIf="data.status == 1" nzColor="success">
           <i nz-icon nzType="smile" nzTheme="outline"></i>
-          <span>正常监控</span>
+          <span>{{ 'monitor.status.available' | i18n }}</span>
         </nz-tag>
         <nz-tag *ngIf="data.status == 2" nzColor="warning">
           <i nz-icon nzType="meh" nzTheme="outline"></i>
-          <span>监控不可用</span>
+          <span>{{ 'monitor.status.unavailable' | i18n }}</span>
         </nz-tag>
         <nz-tag *ngIf="data.status == 3" nzColor="error">
           <i nz-icon nzType="frown" nzTheme="outline"></i>
-          <span>监控不可达</span>
-        </nz-tag>
-        <nz-tag *ngIf="data.status == 4" nzColor="default">
-          <i nz-icon nzType="sync"></i>
-          <span>监控已挂起</span>
+          <span>{{ 'monitor.status.unreachable' | i18n }}</span>
         </nz-tag>
       </td>
       <td nzAlign="center">{{ data.host }}</td>
@@ -129,16 +127,34 @@
       </td>
       <td nzAlign="center">{{ (data.gmtUpdate ? data.gmtUpdate : data.gmtCreate) | date: 'YYYY-MM-dd HH:mm:ss' }}</td>
       <td nzAlign="center">
-        <button nz-button nzType="primary" (click)="onEditOneMonitor(data.id)" nz-tooltip nzTooltipTitle="修改监控">
+        <button nz-button nzType="primary" (click)="onEditOneMonitor(data.id)" nz-tooltip [nzTooltipTitle]="'monitors.edit-monitor' | i18n">
           <i nz-icon nzType="edit" nzTheme="outline"></i>
         </button>
-        <button nz-button nzType="primary" (click)="onDeleteOneMonitor(data.id)" nz-tooltip nzTooltipTitle="删除监控">
+        <button
+          nz-button
+          nzType="primary"
+          (click)="onDeleteOneMonitor(data.id)"
+          nz-tooltip
+          [nzTooltipTitle]="'monitors.delete-monitor' | i18n"
+        >
           <i nz-icon nzType="delete" nzTheme="outline"></i>
         </button>
-        <button nz-button nzType="primary" (click)="onEnableManageOneMonitor(data.id)" nz-tooltip nzTooltipTitle="启用监控">
+        <button
+          nz-button
+          nzType="primary"
+          (click)="onEnableManageOneMonitor(data.id)"
+          nz-tooltip
+          [nzTooltipTitle]="'monitors.enable' | i18n"
+        >
           <i nz-icon nzType="up-circle" nzTheme="outline"></i>
         </button>
-        <button nz-button nzType="primary" (click)="onCancelManageOneMonitor(data.id)" nz-tooltip nzTooltipTitle="取消监控">
+        <button
+          nz-button
+          nzType="primary"
+          (click)="onCancelManageOneMonitor(data.id)"
+          nz-tooltip
+          [nzTooltipTitle]="'monitors.cancel' | i18n"
+        >
           <i nz-icon nzType="down-circle" nzTheme="outline"></i>
         </button>
       </td>
@@ -146,4 +162,4 @@
   </tbody>
 </nz-table>
 
-<ng-template #rangeTemplate> 总量 {{ total }} </ng-template>
+<ng-template #rangeTemplate> {{ 'common.total' | i18n }} {{ total }} </ng-template>

web-app/src/app/routes/monitor/monitor-list/monitor-list.component.ts

@@ -1,5 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { I18NService } from '@core';
+import { ALAIN_I18N_TOKEN } from '@delon/theme';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
@@ -20,7 +22,8 @@ export class MonitorListComponent implements OnInit {
     private modal: NzModalService,
     private notifySvc: NzNotificationService,
     private msg: NzMessageService,
-    private monitorSvc: MonitorService
+    private monitorSvc: MonitorService,
+    @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService
   ) {}
 
   app!: string;
@@ -102,7 +105,7 @@ export class MonitorListComponent implements OnInit {
 
   onEditOneMonitor(monitorId: number) {
     if (monitorId == null) {
-      this.notifySvc.warning('未选中任何待编辑项！', '');
+      this.notifySvc.warning(this.i18nSvc.fanyi('common.notify.no-select-edit'), '');
       return;
     }
     this.router.navigateByUrl(`/monitors/${monitorId}/edit`);
@@ -113,11 +116,11 @@ export class MonitorListComponent implements OnInit {
   onEditMonitor() {
     // 编辑时只能选中一个监控
     if (this.checkedMonitorIds == null || this.checkedMonitorIds.size === 0) {
-      this.notifySvc.warning('未选中任何待编辑项！', '');
+      this.notifySvc.warning(this.i18nSvc.fanyi('common.notify.no-select-edit'), '');
       return;
     }
     if (this.checkedMonitorIds.size > 1) {
-      this.notifySvc.warning('只能对一个选中项进行编辑！', '');
+      this.notifySvc.warning(this.i18nSvc.fanyi('common.notify.one-select-edit'), '');
       return;
     }
     let monitorId = 0;
@@ -129,9 +132,9 @@ export class MonitorListComponent implements OnInit {
     let monitors = new Set<number>();
     monitors.add(monitorId);
     this.modal.confirm({
-      nzTitle: '请确认是否删除！',
-      nzOkText: '确定',
-      nzCancelText: '取消',
+      nzTitle: this.i18nSvc.fanyi('common.confirm.delete'),
+      nzOkText: this.i18nSvc.fanyi('common.button.ok'),
+      nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
       nzOkDanger: true,
       nzOkType: 'primary',
       nzOnOk: () => this.deleteMonitors(monitors)
@@ -140,13 +143,13 @@ export class MonitorListComponent implements OnInit {
 
   onDeleteMonitors() {
     if (this.checkedMonitorIds == null || this.checkedMonitorIds.size === 0) {
-      this.notifySvc.warning('未选中任何待删除项！', '');
+      this.notifySvc.warning(this.i18nSvc.fanyi('common.notify.no-select-delete'), '');
       return;
     }
     this.modal.confirm({
-      nzTitle: '请确认是否批量删除！',
-      nzOkText: '确定',
-      nzCancelText: '取消',
+      nzTitle: this.i18nSvc.fanyi('common.confirm.delete-batch'),
+      nzOkText: this.i18nSvc.fanyi('common.button.ok'),
+      nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
       nzOkDanger: true,
       nzOkType: 'primary',
       nzOnOk: () => this.deleteMonitors(this.checkedMonitorIds)
@@ -155,7 +158,7 @@ export class MonitorListComponent implements OnInit {
 
   deleteMonitors(monitors: Set<number>) {
     if (monitors == null || monitors.size == 0) {
-      this.notifySvc.warning('未选中任何待删除项！', '');
+      this.notifySvc.warning(this.i18nSvc.fanyi('common.notify.no-select-delete'), '');
       return;
     }
     this.tableLoading = true;
@@ -163,30 +166,30 @@ export class MonitorListComponent implements OnInit {
       message => {
         deleteMonitors$.unsubscribe();
         if (message.code === 0) {
-          this.notifySvc.success('删除成功！', '');
+          this.notifySvc.success(this.i18nSvc.fanyi('common.notify.delete-success'), '');
           this.loadMonitorTable();
         } else {
           this.tableLoading = false;
-          this.notifySvc.error('删除失败！', message.msg);
+          this.notifySvc.error(this.i18nSvc.fanyi('common.notify.delete-fail'), message.msg);
         }
       },
       error => {
         this.tableLoading = false;
         deleteMonitors$.unsubscribe();
-        this.notifySvc.error('删除失败！', error.msg);
+        this.notifySvc.error(this.i18nSvc.fanyi('common.notify.delete-fail'), error.msg);
       }
     );
   }
 
   onCancelManageMonitors() {
     if (this.checkedMonitorIds == null || this.checkedMonitorIds.size === 0) {
-      this.notifySvc.warning('未选中任何待取消项！', '');
+      this.notifySvc.warning(this.i18nSvc.fanyi('common.notify.no-select-cancel'), '');
       return;
     }
     this.modal.confirm({
-      nzTitle: '请确认是否批量取消监控！',
-      nzOkText: '确定',
-      nzCancelText: '取消',
+      nzTitle: this.i18nSvc.fanyi('common.confirm.cancel-batch'),
+      nzOkText: this.i18nSvc.fanyi('common.button.ok'),
+      nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
       nzOkDanger: true,
       nzOkType: 'primary',
       nzOnOk: () => this.cancelManageMonitors(this.checkedMonitorIds)
@@ -197,9 +200,9 @@ export class MonitorListComponent implements OnInit {
     let monitors = new Set<number>();
     monitors.add(monitorId);
     this.modal.confirm({
-      nzTitle: '请确认是否取消监控！',
-      nzOkText: '确定',
-      nzCancelText: '取消',
+      nzTitle: this.i18nSvc.fanyi('common.confirm.cancel'),
+      nzOkText: this.i18nSvc.fanyi('common.button.ok'),
+      nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
       nzOkDanger: true,
       nzOkType: 'primary',
       nzOnOk: () => this.cancelManageMonitors(monitors)
@@ -212,30 +215,30 @@ export class MonitorListComponent implements OnInit {
       message => {
         cancelManage$.unsubscribe();
         if (message.code === 0) {
-          this.notifySvc.success('取消监控成功！', '');
+          this.notifySvc.success(this.i18nSvc.fanyi('common.notify.cancel-success'), '');
           this.loadMonitorTable();
         } else {
           this.tableLoading = false;
-          this.notifySvc.error('取消监控失败！', message.msg);
+          this.notifySvc.error(this.i18nSvc.fanyi('common.notify.cancel-fail'), message.msg);
         }
       },
       error => {
         this.tableLoading = false;
         cancelManage$.unsubscribe();
-        this.notifySvc.error('取消监控失败！', error.msg);
+        this.notifySvc.error(this.i18nSvc.fanyi('common.notify.cancel-fail'), error.msg);
       }
     );
   }
 
   onEnableManageMonitors() {
     if (this.checkedMonitorIds == null || this.checkedMonitorIds.size === 0) {
-      this.notifySvc.warning('未选中任何待启用监控项！', '');
+      this.notifySvc.warning(this.i18nSvc.fanyi('common.notify.no-select-enable'), '');
       return;
     }
     this.modal.confirm({
-      nzTitle: '请确认是否批量启用监控！',
-      nzOkText: '确定',
-      nzCancelText: '取消',
+      nzTitle: this.i18nSvc.fanyi('common.confirm.enable-batch'),
+      nzOkText: this.i18nSvc.fanyi('common.button.ok'),
+      nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
       nzOkDanger: true,
       nzOkType: 'primary',
       nzOnOk: () => this.enableManageMonitors(this.checkedMonitorIds)
@@ -246,9 +249,9 @@ export class MonitorListComponent implements OnInit {
     let monitors = new Set<number>();
     monitors.add(monitorId);
     this.modal.confirm({
-      nzTitle: '请确认是否启用监控！',
-      nzOkText: '确定',
-      nzCancelText: '取消',
+      nzTitle: this.i18nSvc.fanyi('common.confirm.enable'),
+      nzOkText: this.i18nSvc.fanyi('common.button.ok'),
+      nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
       nzOkDanger: true,
       nzOkType: 'primary',
       nzOnOk: () => this.enableManageMonitors(monitors)
@@ -261,17 +264,17 @@ export class MonitorListComponent implements OnInit {
       message => {
         enableManage$.unsubscribe();
         if (message.code === 0) {
-          this.notifySvc.success('启用监控成功！', '');
+          this.notifySvc.success(this.i18nSvc.fanyi('common.notify.enable-success'), '');
           this.loadMonitorTable();
         } else {
           this.tableLoading = false;
-          this.notifySvc.error('启用监控失败！', message.msg);
+          this.notifySvc.error(this.i18nSvc.fanyi('common.notify.enable-fail'), message.msg);
         }
       },
       error => {
         this.tableLoading = false;
         enableManage$.unsubscribe();
-        this.notifySvc.error('启用监控失败！', error.msg);
+        this.notifySvc.error(this.i18nSvc.fanyi('common.notify.enable-fail'), error.msg);
       }
     );
   }

web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html

@@ -3,20 +3,20 @@
   <nz-breadcrumb-item>
     <a [routerLink]="['/']">
       <i nz-icon nzType="home"></i>
-      <span>仪表盘</span>
+      <span>{{ 'menu.dashboard' | i18n }}</span>
     </a>
   </nz-breadcrumb-item>
   <nz-breadcrumb-item>
     <a [routerLink]="['/monitors']" [queryParams]="{ app: monitor.app ? monitor.app : '' }">
       <i nz-icon nzType="monitor"></i>
-      <span>监控列表</span>
+      <span>{{ 'monitors.list' | i18n }}</span>
     </a>
   </nz-breadcrumb-item>
   <nz-breadcrumb-item>
     <i nz-icon nzType="plus-circle"></i>
-    <span>新增 {{ 'monitor.app.' + monitor.app | i18n }} 监控</span>
+    <span>{{ 'monitors.new' | i18n }} {{ 'monitor.app.' + monitor.app | i18n }} {{ 'monitor' | i18n }}</span>
     <a [href]="'https://tancloud.cn/docs/help/' + monitor.app" target="_blank" style="float: right; margin-right: 5%">
-      <span>帮助&nbsp;</span>
+      <span>{{ 'common.button.help' | i18n }} </span>
       <i nz-icon nzType="question-circle" nzTheme="outline"></i>
     </a>
   </nz-breadcrumb-item>
@@ -27,7 +27,9 @@
   <div class="-inner-content">
     <form nz-form #newForm="ngForm">
       <nz-form-item>
-        <nz-form-label [nzSpan]="7" nzFor="host" nzRequired="true" nzTooltipTitle="被监控的对端IP或域名"> 监控Host </nz-form-label>
+        <nz-form-label [nzSpan]="7" nzFor="host" nzRequired="true" [nzTooltipTitle]="'monitor.host.tip' | i18n">
+          {{ 'monitor.host' | i18n }}
+        </nz-form-label>
         <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
           <input
             [(ngModel)]="monitor.host"
@@ -36,17 +38,17 @@
             type="text"
             id="host"
             required
-            placeholder="请输入域名或IP"
+            [placeholder]="'monitor.host.tip' | i18n"
             (ngModelChange)="onHostChange($event)"
           />
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
-        <nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true" nzTooltipTitle="标识此监控的名称,名称需要保证唯一性">
-          监控名称
+        <nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true" [nzTooltipTitle]="'monitor.name.tip' | i18n">
+          {{ 'monitor.name' | i18n }}
         </nz-form-label>
         <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
-          <input [(ngModel)]="monitor.name" nz-input required name="name" type="text" id="name" placeholder="监控名称需要保证唯一性" />
+          <input [(ngModel)]="monitor.name" nz-input required name="name" type="text" id="name" [placeholder]="'monitor.name.tip' | i18n" />
         </nz-form-control>
       </nz-form-item>
 
@@ -172,7 +174,7 @@
       </nz-form-item>
 
       <nz-collapse [nzGhost]="true">
-        <nz-collapse-panel nzHeader="高级" [nzHeader]="extraColHeader" [nzShowArrow]="false">
+        <nz-collapse-panel [nzHeader]="extraColHeader" [nzShowArrow]="false">
           <nz-form-item *ngFor="let paramDefine of advancedParamDefines; let i = index">
             <nz-form-label
               *ngIf="paramDefine.field !== 'host' && paramDefine.type === 'text'"
@@ -305,8 +307,8 @@
         </nz-collapse-panel>
       </nz-collapse>
       <ng-template #extraColHeader>
-        <button style="top: -10px; margin-left: 40%" nz-button nzType="dashed" nz-tooltip nzTooltipTitle="设置高级可选参数">
-          <span>高级设置</span>
+        <button style="top: -10px; margin-left: 40%" nz-button nzType="dashed" nz-tooltip [nzTooltipTitle]="'monitors.advanced.tip' | i18n">
+          <span>{{ 'monitors.advanced' | i18n }}</span>
           <i nz-icon nzType="down-circle" nzTheme="outline"></i>
         </button>
       </ng-template>
@@ -314,7 +316,9 @@
       <nz-divider></nz-divider>
 
       <nz-form-item>
-        <nz-form-label nzSpan="7" nzFor="intervals" nzTooltipTitle="监控周期性采集数据间隔时间,单位秒"> 采集间隔 </nz-form-label>
+        <nz-form-label nzSpan="7" nzFor="intervals" [nzTooltipTitle]="'monitor.intervals.tip' | i18n">
+          {{ 'monitor.intervals' | i18n }}
+        </nz-form-label>
         <nz-form-control nzSpan="8">
           <nz-input-number [(ngModel)]="monitor.intervals" [nzMin]="10" [nzMax]="604800" [nzStep]="60" name="intervals" id="intervals">
           </nz-input-number>
@@ -322,14 +326,18 @@
       </nz-form-item>
 
       <nz-form-item>
-        <nz-form-label nzSpan="7" nzFor="detect" nzTooltipTitle="新增监控前是否先探测检查监控可用性"> 测试连接 </nz-form-label>
+        <nz-form-label nzSpan="7" nzFor="detect" [nzTooltipTitle]="'monitors.detect.tip' | i18n">
+          {{ 'monitors.detect' | i18n }}
+        </nz-form-label>
         <nz-form-control nzSpan="8">
           <nz-switch [(ngModel)]="detected" name="detect" id="detect"></nz-switch>
         </nz-form-control>
       </nz-form-item>
 
       <nz-form-item>
-        <nz-form-label [nzSpan]="7" nzFor="description" nzTooltipTitle="更多标识和描述此监控的备注信息"> 描述备注 </nz-form-label>
+        <nz-form-label [nzSpan]="7" nzFor="description" [nzTooltipTitle]="'monitor.description.tip' | i18n">
+          {{ 'monitor.description' | i18n }}
+        </nz-form-label>
         <nz-form-control [nzSpan]="8">
           <nz-textarea-count [nzMaxCharacterCount]="100">
             <textarea [(ngModel)]="monitor.description" rows="3" nz-input name="description" id="description"></textarea>
@@ -339,9 +347,9 @@
 
       <div nz-row>
         <div nz-col nzSpan="8" nzOffset="9">
-          <button nz-button nzType="primary" type="submit" (click)="onDetect(newForm.form)"> 测试 </button>
-          <button nz-button nzType="primary" type="submit" (click)="onSubmit(newForm.form)"> 确定 </button>
-          <button nz-button nzType="primary" type="reset" (click)="onCancel()"> 取消 </button>
+          <button nz-button nzType="primary" type="submit" (click)="onDetect(newForm.form)"> {{ 'common.button.detect' | i18n }} </button>
+          <button nz-button nzType="primary" type="submit" (click)="onSubmit(newForm.form)"> {{ 'common.button.ok' | i18n }} </button>
+          <button nz-button nzType="primary" type="reset" (click)="onCancel()"> {{ 'common.button.cancel' | i18n }} </button>
         </div>
       </div>
     </form>

web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts

@@ -1,8 +1,8 @@
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { I18NService } from '@core';
-import { TitleService } from '@delon/theme';
+import { ALAIN_I18N_TOKEN, TitleService } from '@delon/theme';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
 import { switchMap } from 'rxjs/operators';
 
@@ -34,7 +34,7 @@ export class MonitorNewComponent implements OnInit {
     private router: Router,
     private notifySvc: NzNotificationService,
     private cdr: ChangeDetectorRef,
-    private i18n: I18NService,
+    @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService,
     private titleSvc: TitleService,
     private formBuilder: FormBuilder
   ) {
@@ -150,15 +150,15 @@ export class MonitorNewComponent implements OnInit {
       message => {
         this.isSpinning = false;
         if (message.code === 0) {
-          this.notifySvc.success('新增监控成功', '');
+          this.notifySvc.success(this.i18nSvc.fanyi('monitors.new.success'), '');
           this.router.navigateByUrl(`/monitors?app=${this.monitor.app}`);
         } else {
-          this.notifySvc.error('新增监控失败', message.msg);
+          this.notifySvc.error(this.i18nSvc.fanyi('monitors.new.failed'), message.msg);
         }
       },
       error => {
         this.isSpinning = false;
-        this.notifySvc.error('新增监控失败', error.error.msg);
+        this.notifySvc.error(this.i18nSvc.fanyi('monitors.new.failed'), error.error.msg);
       }
     );
   }
@@ -199,14 +199,14 @@ export class MonitorNewComponent implements OnInit {
       message => {
         this.isSpinning = false;
         if (message.code === 0) {
-          this.notifySvc.success('探测成功', '');
+          this.notifySvc.success(this.i18nSvc.fanyi('monitors.detect.success'), '');
         } else {
-          this.notifySvc.error('探测失败', message.msg);
+          this.notifySvc.error(this.i18nSvc.fanyi('monitors.detect.failed'), message.msg);
         }
       },
       error => {
         this.isSpinning = false;
-        this.notifySvc.error('探测异常', error.error.msg);
+        this.notifySvc.error(this.i18nSvc.fanyi('monitors.detect.failed'), error.error.msg);
       }
     );
   }

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

@@ -1,6 +1,7 @@
 import { NgModule, Type } from '@angular/core';
 import { SharedModule } from '@shared';
 import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
 import { NzLayoutModule } from 'ng-zorro-antd/layout';
 import { NzRadioModule } from 'ng-zorro-antd/radio';
@@ -16,7 +17,6 @@ import { MonitorEditComponent } from './monitor-edit/monitor-edit.component';
 import { MonitorListComponent } from './monitor-list/monitor-list.component';
 import { MonitorNewComponent } from './monitor-new/monitor-new.component';
 import { MonitorRoutingModule } from './monitor-routing.module';
-import { NzCollapseModule } from 'ng-zorro-antd/collapse';
 
 const COMPONENTS: Array<Type<void>> = [
   MonitorNewComponent,

web-app/src/app/routes/passport/lock/lock.component.html

@@ -7,11 +7,11 @@
       <nz-form-item>
         <nz-form-control [nzErrorTip]="'validation.password.required' | i18n">
           <nz-input-group nzSuffixIcon="lock">
-            <input type="text" nz-input formControlName="password" placeholder="输入任意解锁" />
+            <input type="text" nz-input formControlName="password" [placeholder]="'app.lock.placeholder' | i18n" />
           </nz-input-group>
         </nz-form-control>
       </nz-form-item>
-      <nz-row nzType="flex" nzAlign="middle">
+      <nz-row nzAlign="middle">
         <nz-col [nzOffset]="12" [nzSpan]="12" style="text-align: right">
           <button nz-button [disabled]="!f.valid" nzType="primary">{{ 'app.lock' | i18n }}</button>
         </nz-col>

web-app/src/app/routes/passport/login/login.component.html

@@ -3,16 +3,16 @@
     <nz-tab [nzTitle]="'app.login.tab-login-credentials' | i18n">
       <nz-alert *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert>
       <nz-form-item>
-        <nz-form-control nzErrorTip="请输入用户名">
+        <nz-form-control [nzErrorTip]="'app.login.message-need-identifier' | i18n">
           <nz-input-group nzSize="large" nzPrefixIcon="user">
-            <input nz-input formControlName="userName" placeholder="请输入用户名" />
+            <input nz-input formControlName="userName" [placeholder]="'app.login.message-need-identifier' | i18n" />
           </nz-input-group>
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
-        <nz-form-control nzErrorTip="请输入密码">
+        <nz-form-control [nzErrorTip]="'app.login.message-need-credential' | i18n">
           <nz-input-group nzSize="large" nzPrefixIcon="lock">
-            <input nz-input type="password" formControlName="password" placeholder="请输入密码" />
+            <input nz-input type="password" formControlName="password" [placeholder]="'app.login.message-need-credential' | i18n" />
           </nz-input-group>
         </nz-form-control>
       </nz-form-item>

web-app/src/app/routes/passport/login/login.component.ts

@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnDestroy, Optional } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
-import { StartupService } from '@core';
+import { I18NService, StartupService } from '@core';
 import { ReuseTabService } from '@delon/abc/reuse-tab';
-import { DA_SERVICE_TOKEN, ITokenService, SocialOpenType, SocialService } from '@delon/auth';
-import { SettingsService, _HttpClient } from '@delon/theme';
+import { DA_SERVICE_TOKEN, ITokenService, SocialService } from '@delon/auth';
+import { SettingsService, _HttpClient, ALAIN_I18N_TOKEN } from '@delon/theme';
 import { User } from '@delon/theme/src/services/settings/types';
 import { NzTabChangeEvent } from 'ng-zorro-antd/tabs';
 import { finalize } from 'rxjs/operators';
@@ -29,6 +29,7 @@ export class UserLoginComponent implements OnDestroy {
     @Inject(ReuseTabService)
     private reuseTabService: ReuseTabService,
     @Inject(DA_SERVICE_TOKEN) private tokenService: ITokenService,
+    @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService,
     private startupSrv: StartupService,
     private http: _HttpClient,
     private cdr: ChangeDetectorRef,
@@ -125,7 +126,7 @@ export class UserLoginComponent implements OnDestroy {
         let user: User = {
           name: this.userName.value,
           avatar: './assets/img/avatar.svg',
-          email: '管理员'
+          email: this.i18nSvc.fanyi('app.role.admin')
         };
         this.settingsService.setUser(user);
         // 重新获取 StartupService 内容，我们始终认为应用信息一般都会受当前用户授权范围而影响