Merge remote-tracking branch 'origin/master'

# Conflicts:
#	manager/src/main/resources/templates/mailAlarm.html

common/src/main/java/com/usthe/common/support/valid/HostValid.java

@@ -21,7 +21,7 @@ import static java.lang.annotation.RetentionPolicy.RUNTIME;
 @Constraint(validatedBy = HostParamValidator.class)
 public @interface HostValid {
 
-    String message() default "Host value is invalid,must ipv4, ipv6 or domain";
+    String message() default "监控Host必须是ipv4,ipv6或域名";
 
     Class<?>[] groups() default {};
 

common/src/main/java/com/usthe/common/util/CommonUtil.java

@@ -62,4 +62,19 @@ public class CommonUtil {
         return m.find();
     }
 
+    /**
+     * 告警级别文字转换
+     * @param priority 告警级别
+     * @return 告警级别文字
+     */
+    public static String transferAlertPriority(byte priority) {
+        String priorityMsg = "警告告警";
+        switch (priority) {
+            case 0: priorityMsg = "紧急告警"; break;
+            case 1: priorityMsg = "严重告警"; break;
+            case 2: priorityMsg = "警告告警"; break;
+            default: break;
+        }
+        return priorityMsg;
+    }
 }

common/src/main/java/com/usthe/common/util/IpDomainUtil.java

@@ -15,10 +15,13 @@ public class IpDomainUtil {
      * 域名校验正则
      */
     private static final Pattern DOMAIN_PATTERN =
-            Pattern.compile("^([hH][tT]{2}[pP]://|[hH][tT]{2}[pP][sS]://)?(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\\/])+$");
+            Pattern.compile("^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$");
 
     private static final String LOCALHOST = "localhost";
 
+    /**
+     * HTTP协议头校验规则
+     */
     private static final Pattern DOMAIN_SCHEMA = Pattern.compile("^([hH][tT]{2}[pP]://|[hH][tT]{2}[pP][sS]://){1}[^\\s]*");
 
     /**

common/src/test/java/com/usthe/common/util/IpDomainUtilTest.java

@@ -0,0 +1,39 @@
+package com.usthe.common.util;
+
+import org.junit.jupiter.api.Test;
+
+import static org.junit.jupiter.api.Assertions.assertFalse;
+import static org.junit.jupiter.api.Assertions.assertTrue;
+
+/**
+ * @author tom
+ * @date 2022/2/19 20:32
+ */
+class IpDomainUtilTest {
+
+    @Test
+    void validateIpDomain() {
+        assertTrue(IpDomainUtil.validateIpDomain("127.7.5.3"));
+        assertTrue(IpDomainUtil.validateIpDomain("255.255.4.3"));
+        assertTrue(IpDomainUtil.validateIpDomain("255.255.255.255"));
+        assertTrue(IpDomainUtil.validateIpDomain("tancloud.cn"));
+        assertTrue(IpDomainUtil.validateIpDomain("tancloud.com.cn"));
+        assertTrue(IpDomainUtil.validateIpDomain("student.dev.com.cn"));
+        assertTrue(IpDomainUtil.validateIpDomain("www.student.dev.com.cn"));
+        assertTrue(IpDomainUtil.validateIpDomain("www.baidu.com"));
+        assertTrue(IpDomainUtil.validateIpDomain("good.didi"));
+        assertFalse(IpDomainUtil.validateIpDomain("tmp"));
+        assertFalse(IpDomainUtil.validateIpDomain("good"));
+        assertFalse(IpDomainUtil.validateIpDomain("www.baidu.com."));
+        assertFalse(IpDomainUtil.validateIpDomain("good."));
+        assertFalse(IpDomainUtil.validateIpDomain(".good."));
+    }
+
+    @Test
+    void isHasSchema() {
+        assertTrue(IpDomainUtil.isHasSchema("http://www.baidu.com"));
+        assertTrue(IpDomainUtil.isHasSchema("https://www.baidu.com"));
+        assertFalse(IpDomainUtil.isHasSchema("www.baidu.com"));
+        assertFalse(IpDomainUtil.isHasSchema("https_www.baidu.com"));
+    }
+}

manager/src/main/java/com/usthe/manager/component/alerter/DispatchAlarm.java

@@ -11,6 +11,7 @@ import com.usthe.manager.service.MailService;
 import com.usthe.manager.service.MonitorService;
 import com.usthe.manager.service.NoticeConfigService;
 import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Value;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 import org.springframework.mail.javamail.JavaMailSender;
@@ -41,6 +42,9 @@ public class DispatchAlarm {
     private RestTemplate restTemplate;
     private MailService mailService;
 
+    @Value("${spring.mail.username}")
+    private String emailFromUser;
+
     public DispatchAlarm(AlerterWorkerPool workerPool, AlerterDataQueue dataQueue,
                          JavaMailSender javaMailSender, NoticeConfigService noticeConfigService,
                          AlertService alertService, MonitorService monitorService, RestTemplate restTemplate, MailService mailService) {
@@ -148,12 +152,12 @@ public class DispatchAlarm {
             MimeMessageHelper messageHelper = new MimeMessageHelper(mimeMessage,true,"UTF-8");
             messageHelper.setSubject("TanCloud探云-监控告警");
             //设置发件人Email
-            messageHelper.setFrom("gongchao@tancloud.cn");
+            messageHelper.setFrom(emailFromUser);
             //设定收件人Email
             messageHelper.setTo(receiver.getEmail());        
             messageHelper.setSentDate(new Date());
             //构建邮件模版
-            String process = mailService.buildHTMLTemplate(alert);
+            String process = mailService.buildAlertHtmlTemplate(alert);
             //设置邮件内容模版
             messageHelper.setText(process,true);   
             javaMailSender.send(mimeMessage);

manager/src/main/java/com/usthe/manager/service/MailService.java

@@ -11,7 +11,6 @@ import org.springframework.stereotype.Service;
  * @author 花城
  * @version 1.0
  * @date 2022/2/19 6:11 下午
- * @Description
  */
 public interface MailService {
 
@@ -20,5 +19,5 @@ public interface MailService {
      * @param alert     告警信息
      * @return          邮件内容
      */
-    String buildHTMLTemplate(Alert alert);
+    String buildAlertHtmlTemplate(Alert alert);
 }

manager/src/main/java/com/usthe/manager/service/impl/MailServiceImpl.java

@@ -1,9 +1,9 @@
 package com.usthe.manager.service.impl;
 
 import com.usthe.common.entity.alerter.Alert;
+import com.usthe.common.util.CommonUtil;
 import com.usthe.manager.service.MailService;
 import lombok.extern.slf4j.Slf4j;
-import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 import org.thymeleaf.TemplateEngine;
 import org.thymeleaf.context.Context;
@@ -16,7 +16,6 @@ import javax.annotation.Resource;
  * @author 花城
  * @version 1.0
  * @date 2022/2/19 6:13 下午
- * @Description
  */
 @Slf4j
 @Service
@@ -26,13 +25,13 @@ public class MailServiceImpl implements MailService {
     private TemplateEngine templateEngine;
 
     @Override
-    public String buildHTMLTemplate(final Alert alert) {
-        //引入thymeleaf上下文参数渲染页面
+    public String buildAlertHtmlTemplate(final Alert alert) {
+        // 引入thymeleaf上下文参数渲染页面
         Context context = new Context();
         context.setVariable("target",alert.getTarget());
-        context.setVariable("ID",alert.getMonitorId());
-        context.setVariable("name",alert.getMonitorName());
-        context.setVariable("priority",alert.getPriority());
+        context.setVariable("monitorId",alert.getMonitorId());
+        context.setVariable("monitorName",alert.getMonitorName());
+        context.setVariable("priority", CommonUtil.transferAlertPriority(alert.getPriority()));
         context.setVariable("content",alert.getContent());
         return templateEngine.process("mailAlarm", context);
     }

manager/src/main/resources/templates/mailAlarm.html

@@ -1,323 +1,887 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">
 <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <style type="text/css">
-        body {
-            font-family: sans-serif;
+        /*** BMEMBF Start ***/
+        /* CMS V4 Editor Test */
+        [name=bmeMainBody] {
+            min-height: 1000px;
         }
-    </style>
 
-    <style id="table">
+        @media only screen and (max-width: 480px) {
+            table.blk, table.tblText, .bmeHolder, .bmeHolder1, table.bmeMainColumn {
+                width: 100% !important;
+            }
+        }
 
-        * {
-            margin: 0;
-            padding: 0
+        @media only screen and (max-width: 480px) {
+            .bmeImageCard table.bmeCaptionTable td.tblCell {
+                padding: 0px 20px 20px 20px !important;
+            }
         }
 
-        a {
-            color: #576b95;
-            text-decoration: none
+        @media only screen and (max-width: 480px) {
+            .bmeImageCard table.bmeCaptionTable.bmeCaptionTableMobileTop td.tblCell {
+                padding: 20px 20px 0 20px !important;
+            }
         }
 
-        html {
-            line-height: 1.6;
+        @media only screen and (max-width: 480px) {
+            table.bmeCaptionTable td.tblCell {
+                padding: 10px !important;
+            }
         }
 
-        body {
-            margin: 0;
-            padding: 0 ;
-            font-size: 17px;
-            color: #333;
-            width:100%;
-            max-width:750px
+        @media only screen and (max-width: 480px) {
+            table.tblGtr {
+                padding-bottom: 20px !important;
+            }
         }
 
+        @media only screen and (max-width: 480px) {
+            td.blk_container, .blk_parent, .bmeLeftColumn, .bmeRightColumn, .bmeColumn1, .bmeColumn2, .bmeColumn3, .bmeBody {
+                display: table !important;
+                max-width: 600px !important;
+                width: 100% !important;
+            }
+        }
 
-        .view {
-            word-break: break-word;
-            cursor: text;
-            min-height: 440px;
-            word-wrap: break-word;
-            -webkit-hyphens: auto;
-            -ms-hyphens: auto;
-            hyphens: auto;
+        @media only screen and (max-width: 480px) {
+            table.container-table, .bmeheadertext, .container-table {
+                width: 95% !important;
+            }
         }
 
-        p {
-            clear: both
+        @media only screen and (max-width: 480px) {
+            .mobile-footer, .mobile-footer a {
+                font-size: 13px !important;
+                line-height: 18px !important;
+            }
+
+            .mobile-footer {
+                text-align: center !important;
+            }
+
+            table.share-tbl {
+                padding-bottom: 15px;
+                width: 100% !important;
+            }
+
+            table.share-tbl td {
+                display: block !important;
+                text-align: center !important;
+                width: 100% !important;
+            }
         }
 
-        img {
-            *zoom: 1;
-            max-width: 100%;
-            *max-width: 96%;
-            height: auto !important
+        @media only screen and (max-width: 480px) {
+            td.bmeShareTD, td.bmeSocialTD {
+                width: 100% !important;
+            }
         }
 
-        iframe {
-            width: 301px !important;
-            border: 0;
-            /*background-color: none;*/
+        @media only screen and (max-width: 480px) {
+            td.tdBoxedTextBorder {
+                width: auto !important;
+            }
         }
 
-        .selectTdClass {
-            background-color: #edf5fa !important
+        @media only screen and (max-width: 480px) {
+            th.tdBoxedTextBorder {
+                width: auto !important;
+            }
         }
 
-        table.noBorderTable td,
-        table.noBorderTable th,
-        table.noBorderTable caption {
-            border: 1px dashed #ddd !important
+        @media only screen and (max-width: 480px) {
+            table.blk, table[name=tblText], .bmeHolder, .bmeHolder1, table[name=bmeMainColumn] {
+                width: 100% !important;
+            }
         }
 
-        table {
-            margin-bottom: 10px;
-            border-collapse: collapse;
-            display: table;
+        @media only screen and (max-width: 480px) {
+            .bmeImageCard table.bmeCaptionTable td[name=tblCell] {
+                padding: 0px 20px 20px 20px !important;
+            }
         }
 
-        td,
-        th {
-            padding: 5px 10px;
-            border: 1px solid #DDD;
+        @media only screen and (max-width: 480px) {
+            .bmeImageCard table.bmeCaptionTable.bmeCaptionTableMobileTop td[name=tblCell] {
+                padding: 20px 20px 0 20px !important;
+            }
         }
 
-        caption {
-            border: 1px dashed #DDD;
-            border-bottom: 0;
-            padding: 3px;
-            text-align: center;
+        @media only screen and (max-width: 480px) {
+            table.bmeCaptionTable td[name=tblCell] {
+                padding: 10px !important;
+            }
         }
 
-        th {
-            border-top: 2px solid #BBB;
-            background: #F7F7F7;
+        @media only screen and (max-width: 480px) {
+            table[name=tblGtr] {
+                padding-bottom: 20px !important;
+            }
         }
 
+        @media only screen and (max-width: 480px) {
+            td.blk_container, .blk_parent, [name=bmeLeftColumn], [name=bmeRightColumn], [name=bmeColumn1], [name=bmeColumn2], [name=bmeColumn3], [name=bmeBody] {
+                display: table !important;
+                max-width: 600px !important;
+                width: 100% !important;
+            }
+        }
 
-        td p {
-            margin: 0;
-            padding: 0;
+        @media only screen and (max-width: 480px) {
+            table[class=container-table], .bmeheadertext, .container-table {
+                width: 95% !important;
+            }
         }
-    </style>
-    <style id="list">
-        ol,
-        ul {
-            margin: 0;
-            padding: 0;
-            -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-            width: 99.9%
+
+        @media only screen and (max-width: 480px) {
+            .mobile-footer, .mobile-footer a {
+                font-size: 13px !important;
+                line-height: 18px !important;
+            }
+
+            .mobile-footer {
+                text-align: center !important;
+            }
+
+            table[class="share-tbl"] {
+                padding-bottom: 15px;
+                width: 100% !important;
+            }
+
+            table[class="share-tbl"] td {
+                display: block !important;
+                text-align: center !important;
+                width: 100% !important;
+            }
         }
 
-        li {
-            clear: both;
+        @media only screen and (max-width: 480px) {
+            td[name=bmeShareTD], td[name=bmeSocialTD] {
+                width: 100% !important;
+            }
         }
 
-        .list-paddingleft-1 {
-            padding-left: 1.2em
+        @media only screen and (max-width: 480px) {
+            td[name=tdBoxedTextBorder] {
+                width: auto !important;
+            }
         }
 
-        .list-paddingleft-2 {
-            padding-left: 2.2em
+        @media only screen and (max-width: 480px) {
+            th[name=tdBoxedTextBorder] {
+                width: auto !important;
+            }
         }
 
-        .list-paddingleft-3 {
-            padding-left: 3.2em
+        @media only screen and (max-width: 480px) {
+            .bmeImageCard table.bmeImageTable {
+                height: auto !important;
+                width: 100% !important;
+                padding: 20px !important;
+                clear: both;
+                float: left !important;
+                border-collapse: separate;
+            }
         }
-    </style>
-    <style>
-        body :not(img) {
-            max-width: 100% !important;
-            word-wrap: break-word !important;
-            box-sizing: border-box !important;
+
+        @media only screen and (max-width: 480px) {
+            .bmeMblInline table.bmeImageTable {
+                height: auto !important;
+                width: 100% !important;
+                padding: 10px !important;
+                clear: both;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            .bmeMblInline table.bmeCaptionTable {
+                width: 100% !important;
+                clear: both;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            table.bmeImageTable {
+                height: auto !important;
+                width: 100% !important;
+                padding: 10px !important;
+                clear: both;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            table.bmeCaptionTable {
+                width: 100% !important;
+                clear: both;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            table.bmeImageContainer {
+                width: 100% !important;
+                clear: both;
+                float: left !important;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            table.bmeImageTable td {
+                padding: 0px !important;
+                height: auto;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            img.mobile-img-large {
+                width: 100% !important;
+                height: auto !important;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            img.bmeRSSImage {
+                max-width: 320px;
+                height: auto !important;
+            }
+        }
+
+        @media only screen and (min-width: 640px) {
+            img.bmeRSSImage {
+                max-width: 600px !important;
+                height: auto !important;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            .trMargin img {
+                height: 10px;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            div.bmefooter, div.bmeheader {
+                display: block !important;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            .tdPart {
+                width: 100% !important;
+                clear: both;
+                float: left !important;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            table.blk_parent1, table.tblPart {
+                width: 100% !important;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            .tblLine {
+                min-width: 100% !important;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            .bmeMblCenter img {
+                margin: 0 auto;
+            }
         }
 
-        body img {
-            max-width: 100% !important;
-            word-wrap: break-word !important;
+        @media only screen and (max-width: 480px) {
+            .bmeMblCenter, .bmeMblCenter div, .bmeMblCenter span {
+                text-align: center !important;
+                text-align: -webkit-center !important;
+            }
         }
 
-        body table {
-            box-sizing: content-box !important;
+        @media only screen and (max-width: 480px) {
+            .bmeNoBr br, .bmeImageGutterRow, .bmeMblStackCenter .bmeShareItem .tdMblHide {
+                display: none !important;
+            }
         }
 
-        body table * {
-            box-sizing: content-box !important;
+        @media only screen and (max-width: 480px) {
+            .bmeMblInline table.bmeImageTable, .bmeMblInline table.bmeCaptionTable, .bmeMblInline {
+                clear: none !important;
+                width: 50% !important;
+            }
         }
 
-        body p {
-            clear: both;
-            min-height: 1em;
+        @media only screen and (max-width: 480px) {
+            .bmeMblInlineHide, .bmeShareItem .trMargin {
+                display: none !important;
+            }
         }
 
-        .mpa-black-tech {
-            cursor: default;
-            user-select: none;
+        @media only screen and (max-width: 480px) {
+            .bmeMblInline table.bmeImageTable img, .bmeMblShareCenter.tblContainer.mblSocialContain, .bmeMblFollowCenter.tblContainer.mblSocialContain {
+                width: 100% !important;
+            }
         }
 
-        .mpa-dynamic-material {
-            cursor: default;
-            user-select: none;
+        @media only screen and (max-width: 480px) {
+            .bmeMblStack > .bmeShareItem {
+                width: 100% !important;
+                clear: both !important;
+            }
         }
+
+        @media only screen and (max-width: 480px) {
+            .bmeShareItem {
+                padding-top: 10px !important;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            .tdPart.bmeMblStackCenter, .bmeMblStackCenter .bmeFollowItemIcon {
+                padding: 0px !important;
+                text-align: center !important;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            .bmeMblStackCenter > .bmeShareItem {
+                width: 100% !important;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            td.bmeMblCenter {
+                border: 0 none transparent !important;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            .bmeLinkTable.tdPart td {
+                padding-left: 0px !important;
+                padding-right: 0px !important;
+                border: 0px none transparent !important;
+                padding-bottom: 15px !important;
+                height: auto !important;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            .tdMblHide {
+                width: 10px !important;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            .bmeShareItemBtn {
+                display: table !important;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            .bmeMblStack td {
+                text-align: left !important;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            .bmeMblStack .bmeFollowItem {
+                clear: both !important;
+                padding-top: 10px !important;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            .bmeMblStackCenter .bmeFollowItemText {
+                padding-left: 5px !important;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            .bmeMblStackCenter .bmeFollowItem {
+                clear: both !important;
+                align-self: center;
+                float: none !important;
+                padding-top: 10px;
+                margin: 0 auto;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            .tdPart > table {
+                width: 100% !important;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            .tdPart > table.bmeLinkContainer {
+                width: auto !important;
+            }
+        }
+
+        @media only screen and (max-width: 480px) {
+            .tdPart.mblStackCenter > table.bmeLinkContainer {
+                width: 100% !important;
+            }
+        }
+
+        .blk_parent:first-child, .blk_parent {
+            float: left;
+        }
+
+        .blk_parent:last-child {
+            float: right;
+        }
+
+        /*** BMEMBF END ***/
+
     </style>
+    <!--[if gte mso 9]>
+    <xml>
+        <o:OfficeDocumentSettings>
+            <o:AllowPNG/>
+            <o:PixelsPerInch>96</o:PixelsPerInch>
+        </o:OfficeDocumentSettings>
+    </xml>
+    <![endif]-->
 </head>
-<body class="view" spellcheck="false" style="cursor: text">
-<section style="display: flex; justify-content: center; align-items: center; width: 100%; max-width:750px">
-    <section style="width: 1000vw;">
-        <p>&ZeroWidthSpace;<br></p>
-        <section
-                style="display: flex;justify-content: center;align-items: center;width: 100%;">
-            <section
-                    style="display: flex; justify-content: flex-start; align-items: center; flex-direction: column; width: 100%; padding: 16px 6px 16px 12px; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0); background: url(https://pic.imgdb.cn/item/616572c82ab3f51d91208003.png) 0% 0% / 100% 100% no-repeat rgb(212, 234, 237);">
-                <section
-                        style="display: flex;justify-content: flex-start;align-items: center;flex-direction: column;width: 100%;">
-                    <section
-                            style="height: 0px;width: 52px;align-self: flex-start;z-index: 1;transform: translate(17px, -9px);">
-                        <img th:src="@{https://cdn.jsdelivr.net/gh/dromara/hertzbeat@gh-pages/img/tancloud-logo.svg}"
-                             style="display: block;">
-                    </section>
-                    <section
-                            style="display: flex; justify-content: flex-start; align-items: center; flex-direction: column; width: 100%; background: rgb(232, 232, 232); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);">
-                        <section
-                                style="background: rgb(255, 255, 255); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0); transform: translate(-5px, -5px); width: 100%;">
-                            <section
-                                    style="display: flex;justify-content: center;align-items: center;justify-content: space-between;">
-                                <section
-                                        style="width: 11px; height: 11px; border-width: 1px 0px 0px 1px; border-top-style: solid; border-left-style: solid; border-top-color: rgb(151, 151, 151); border-left-color: rgb(151, 151, 151); border-right-style: initial; border-right-color: initial; border-bottom-style: initial; border-bottom-color: initial; margin-left: 4px; margin-top: 4px;">
-                                    <br>
-                                </section>
-                                <section
-                                        style="width: 11px; height: 11px; border-width: 1px 1px 0px 0px; border-top-style: solid; border-right-style: solid; border-top-color: rgb(151, 151, 151); border-right-color: rgb(151, 151, 151); border-bottom-style: initial; border-bottom-color: initial; border-left-style: initial; border-left-color: initial; margin-right: 4px; margin-top: 4px;">
-                                    <br>
-                                </section>
-                            </section>
-                            <section
-                                    style="display: flex;justify-content: center;align-items: center;width: 100%;">
-                                <section style="width: 88px;margin: 0px 13px 0px 16px;"><img
-                                        th:src="@{https://cdn.jsdelivr.net/gh/dromara/hertzbeat@gh-pages/img/tancloud-brand.svg}"
-                                        style="display: block; width: 180px; height: 180px;">
-                                </section>
-                                <section style="padding-right: 12px;">
-                                    <section style="margin-top: 15px;">
-                                        <p
-                                                style="font-size: 14px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: bold;color: #B1B1B1;line-height: 20px;letter-spacing: 5px;">
-                                            TanCloud探云-监控告警
-                                        </p>
-                                    </section>
-                                    <section style="padding: 8px 0px 4px 0px;">
-                                        <p
-                                                style="font-size: 24px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: bold;color: #000000;line-height: 33px;letter-spacing: 2px;">
-                                            告警通知
-                                        </p>
-                                    </section>
-                                    <section style="margin-bottom: 15px;">
-                                        <p
-                                                style="font-size: 16px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: bold;color: #B1B1B1;line-height: 22px;">
-                                            Alarm notification
-                                        </p>
-                                    </section>
-                                </section>
-                            </section>
-                            <section
-                                    style="display: flex;justify-content: center;align-items: center;justify-content: space-between;">
-                                <section
-                                        style="width: 11px; height: 11px; border-width: 0px 0px 1px 1px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: rgb(151, 151, 151); border-left-color: rgb(151, 151, 151); border-top-style: initial; border-top-color: initial; border-right-style: initial; border-right-color: initial; margin-left: 4px; margin-bottom: 4px;">
-                                    <br>
-                                </section>
-                                <section
-                                        style="width: 11px; height: 11px; border-width: 0px 1px 1px 0px; border-right-style: solid; border-bottom-style: solid; border-right-color: rgb(151, 151, 151); border-bottom-color: rgb(151, 151, 151); border-top-style: initial; border-top-color: initial; border-left-style: initial; border-left-color: initial; margin-right: 4px; margin-bottom: 4px;">
-                                    <br>
-                                </section>
-                            </section>
-                        </section>
-                    </section>
-                    <section
-                            style="width: 100%; background: rgb(203, 221, 230); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0); margin-left: -8px; margin-top: 6px; z-index: 1;">
-                        <section
-                                style="background: rgb(227, 245, 255); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0); transform: translate(4px, 4px); text-align: center; padding: 12px 28px; white-space: nowrap;">
-                            <p
-                                    style="font-size: 16px;font-family: PingFangSC-Medium, PingFang SC;font-weight: bold;color: #000000;line-height: 22px;">
-                                TanCloud探云
-                            </p>
-                        </section>
-                    </section>
-                    <section
-                            style="width: 52px;height: 0px;z-index: 1;align-self: flex-end;transform: translate(-10px, -3px);">
-                        <img th:src="@{https://hertzbeat.com/img/icons/dromara.png}"
-                             style="display: block;">
-                    </section>
-                </section>
-            </section>
-        </section>
-        <p><br></p>
-        <section
-                style="display: flex;justify-content: center;align-items: center;width: 100%;padding:0;">
-            <section
-                    style="display: flex; justify-content: flex-start; align-items: center; flex-direction: column; width: 100%; padding: 16px; background: rgb(212, 234, 237); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);">
-                <section
-                        style="display: flex;justify-content: flex-start;align-items: center;flex-direction: column;width: 100%;">
-                    <section
-                            style="display: flex; justify-content: flex-start; align-items: center; flex-direction: column; width: 100%; background: rgb(232, 232, 232); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);">
-                        <section
-                                style="background: rgb(255, 255, 255); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0); transform: translate(-5px, -5px); width: 100%;">
-                            <section
-                                    style="display: flex;justify-content: center;align-items: center;justify-content: space-between;">
-                                <section
-                                        style="width: 11px; height: 11px; border-width: 1px 0px 0px 1px; border-top-style: solid; border-left-style: solid; border-top-color: rgb(151, 151, 151); border-left-color: rgb(151, 151, 151); border-right-style: initial; border-right-color: initial; border-bottom-style: initial; border-bottom-color: initial; margin-left: 4px; margin-top: 4px;">
-                                    <br>
-                                </section>
-                                <section
-                                        style="width: 11px; height: 11px; border-width: 1px 1px 0px 0px; border-top-style: solid; border-right-style: solid; border-top-color: rgb(151, 151, 151); border-right-color: rgb(151, 151, 151); border-bottom-style: initial; border-bottom-color: initial; border-left-style: initial; border-left-color: initial; margin-right: 4px; margin-top: 4px;">
-                                    <br>
-                                </section>
-                            </section>
-                            <section
-                                    style="display: flex;justify-content: center;align-items: center;width: 100%;padding: 6px 0px;">
-                                <section style="text-align: center;">
-                                    <p style="font-size: 14px; font-family: PingFangSC-Medium,PingFang SC; font-weight: bold; color: rgb(0, 0, 0); line-height: 22px; letter-spacing: 1px;text-align: left;padding-left: 5px;">
-                                        告警目标对象:<span th:text="${target}"></span><br>
-                                        &nbsp;&nbsp;&nbsp;&nbsp;所属监控ID:<span th:text="${ID}"></span><br>
-                                        &nbsp;&nbsp;&nbsp;&nbsp;所属监控名称:<span th:text="${name}"></span><br>
-                                        &nbsp;&nbsp;&nbsp;&nbsp;告警级别:<span th:text="${priority}"></span><br>
-                                        &nbsp;&nbsp;&nbsp;&nbsp;告警详情:<br>
-                                    <span th:text="${content}"></span><br>
-                                    </p>
-                                    <p
-                                            style="font-size: 14px; font-family: PingFangSC-Medium,PingFang SC; font-weight: bold; color: rgb(0, 0, 0); line-height: 22px; letter-spacing: 1px;">
-                                        <br>
-                                    </p>
-                                </section>
-                            </section>
-                            <section
-                                    style="display: flex;justify-content: center;align-items: center;justify-content: space-between;">
-                                <section
-                                        style="width: 11px; height: 11px; border-width: 0px 0px 1px 1px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: rgb(151, 151, 151); border-left-color: rgb(151, 151, 151); border-top-style: initial; border-top-color: initial; border-right-style: initial; border-right-color: initial; margin-left: 4px; margin-bottom: 4px;">
-                                    <br>
-                                </section>
-                                <section
-                                        style="width: 11px; height: 11px; border-width: 0px 1px 1px 0px; border-right-style: solid; border-bottom-style: solid; border-right-color: rgb(151, 151, 151); border-bottom-color: rgb(151, 151, 151); border-top-style: initial; border-top-color: initial; border-left-style: initial; border-left-color: initial; margin-right: 4px; margin-bottom: 4px;">
-                                    <br>
-                                </section>
-                            </section>
-                        </section>
-                    </section>
-                </section>
-            </section>
-        </section>
-        <p style="text-align: center"  ><a href="https://hertzbeat.com/">TanCloud探云&nbsp; </a><br></p>
-        <p><br></p>
-
-    </section>
-</section>
-</section>
-</section>
-</section>
-</section>
-</section>
+<body topmargin="0" leftmargin="0"
+      style="height: 100% !important; margin: 0; padding: 0; width: 100% !important;min-width: 100%;">
+<style type="text/css">
+    body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+    }
+
+    .blk_img_drop_link a {
+        color: #16a7e0;
+        cursor: pointer;
+        font-weight: 600;
+        margin-left: 5px;
+        text-decoration: underline;
+        text-transform: lowercase;
+    }
+
+    .blk_img_drop_link a:hover {
+        color: #72c2a1;
+    }
+
+    .blk_img_drop_link.no-dd span {
+        display: none;
+    }
+
+    .blk_img_drop_link.no-dd a {
+        font-size: 14px;
+        display: inline-block;
+        margin-left: 0;
+        padding: 0;
+    }
+
+    .ie8 .blk_img_drop_link.no-dd a {
+        padding-top: 20px;
+    }
+
+    @media screen {
+        @media (min-width: 0px) {
+        }
+    }
+</style>
+
+<table width="100%" cellspacing="0" cellpadding="0" border="0" name="bmeMainBody"
+       style="background-color: rgb(230, 230, 232);" bgcolor="#e6e6e8">
+    <tbody>
+    <tr>
+        <td width="100%" valign="top" align="center">
+            <table cellspacing="0" cellpadding="0" border="0" name="bmeMainColumnParentTable">
+                <tbody>
+                <tr>
+                    <td name="bmeMainColumnParent" style="border-collapse: separate;">
+                        <table name="bmeMainColumn" class="bmeHolder bmeMainColumn"
+                               style="max-width: 600px; overflow: visible;" cellspacing="0" cellpadding="0" border="0"
+                               align="center">
+                            <tbody>
+                            <tr id="section_1" class="flexible-section" data-columns="1"
+                                data-section-type="bmePreHeader">
+                                <td width="100%" class="blk_container bmeHolder" name="bmePreHeader" valign="top"
+                                    align="center"
+                                    style="color: rgb(56, 56, 56); background-color: rgb(230, 230, 232);   "
+                                    bgcolor="#e6e6e8">
+                                    <div id="dv_10" class="blk_wrapper" style="">
+                                        <table width="600" cellspacing="0" cellpadding="0" border="0" class="blk"
+                                               name="blk_boxtext">
+                                            <tbody>
+                                            <tr>
+                                                <td align="center" name="bmeBoxContainer"
+                                                    style="padding-left:20px; padding-right:20px; padding-top:20px; padding-bottom:20px;">
+                                                    <table cellspacing="0" cellpadding="0" width="100%" name="tblText"
+                                                           class="tblText" border="0">
+                                                        <tbody>
+                                                        <tr>
+                                                            <td valign="top" align="left"
+                                                                style="padding: 20px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 14px; color: rgb(56, 56, 56); border-width: 1px; border-style: solid; border-color: rgb(225, 225, 225);  border-collapse: collapse; word-break: break-word;"
+                                                                name="tblCell" class="tblCell">
+                                                                <div style="line-height: 150%; text-align: center;">
+                                                                    <span style="color: #a666ed; font-size: 30px; line-height: 150%;"><strong>TANCLOUD</strong></span>
+                                                                </div>
+                                                            </td>
+                                                        </tr>
+                                                        </tbody>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td width="100%" class="bmeHolder" valign="top" align="center"
+                                    name="bmeMainContentParent"
+                                    style="border-color: rgb(128, 128, 128); border-radius: 5px; border-collapse: separate; border-spacing: 0px;">
+                                    <table name="bmeMainContent"
+                                           style="border-radius: 5px; border-collapse: separate;border-spacing: 0px; overflow: hidden;"
+                                           width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
+                                        <tbody>
+                                        <tr id="section_2" class="flexible-section" data-columns="1">
+                                            <td width="100%" class="blk_container bmeHolder" name="bmeHeader"
+                                                valign="top" align="center"
+                                                style="background-color: rgb(255, 255, 255);   " bgcolor="#ffffff">
+                                            </td>
+                                        </tr>
+                                        <tr id="section_3" class="flexible-section" data-columns="1">
+                                            <td width="100%" class="blk_container bmeHolder bmeBody" name="bmeBody"
+                                                valign="top" align="center"
+                                                style="color: rgb(56, 56, 56); background-color: rgb(255, 255, 255);   "
+                                                bgcolor="#ffffff">
+                                                <div id="dv_1" class="blk_wrapper" style="">
+                                                    <table class="blk" name="blk_text" width="600" border="0"
+                                                           cellpadding="0" cellspacing="0">
+                                                        <tbody>
+                                                        <tr>
+                                                            <td>
+                                                                <table cellpadding="0" cellspacing="0" border="0"
+                                                                       width="100%" class="bmeContainerRow">
+                                                                    <tbody>
+                                                                    <tr>
+                                                                        <th valign="top" align="center" class="tdPart"
+                                                                            style="">
+                                                                            <table name="tblText" style="float: left;"
+                                                                                   align="left" border="0"
+                                                                                   cellpadding="0" cellspacing="0"
+                                                                                   class="tblText" width="600">
+                                                                                <tbody>
+                                                                                <tr>
+                                                                                    <td name="tblCell"
+                                                                                        style="padding: 20px; font-size: 14px; font-weight: 400; font-family: Arial, Helvetica, sans-serif; color: rgb(56, 56, 56); text-align: left; word-break: break-word;"
+                                                                                        align="left" valign="top"
+                                                                                        class="tblCell">
+                                                                                        <div style="line-height: 150%;">
+                                                                                            <span style="font-size: 30px; line-height: 150%;"><strong>告警通知</strong></span>
+                                                                                        </div>
+                                                                                    </td>
+                                                                                </tr>
+                                                                                </tbody>
+                                                                            </table>
+                                                                        </th>
+                                                                    </tr>
+                                                                    </tbody>
+                                                                </table>
+                                                            </td>
+                                                        </tr>
+                                                        </tbody>
+                                                    </table>
+                                                </div>
+
+                                                <div id="dv_3" class="blk_wrapper" style="">
+                                                    <table class="blk" name="blk_text" width="600" border="0"
+                                                           cellpadding="0" cellspacing="0">
+                                                        <tbody>
+                                                        <tr>
+                                                            <td>
+                                                                <table cellpadding="0" cellspacing="0" border="0"
+                                                                       width="100%" class="bmeContainerRow">
+                                                                    <tbody>
+                                                                    <tr>
+                                                                        <th valign="top" align="center" class="tdPart"
+                                                                            style="background-color: rgba(0, 0, 0, 0);">
+                                                                            <table name="tblText"
+                                                                                   style="float: left; background-color: rgba(0, 0, 0, 0);"
+                                                                                   align="left" border="0"
+                                                                                   cellpadding="0" cellspacing="0"
+                                                                                   class="tblText" width="600">
+                                                                                <tbody>
+                                                                                <tr>
+                                                                                    <td name="tblCell"
+                                                                                        style="padding: 20px; font-size: 14px; font-weight: 400; font-family: Arial, Helvetica, sans-serif; color: rgb(56, 56, 56); text-align: left; word-break: break-word;"
+                                                                                        align="left" valign="top"
+                                                                                        class="tblCell">
+                                                                                        <div style="line-height: 200%; font-size: 14px;">
+                                                                                            <table>
+                                                                                                <tr>
+                                                                                                    <td align="right"
+                                                                                                        style="padding-right: 10px; color: #817878; font-weight: 500;">
+                                                                                                        告警目标对象:
+                                                                                                    </td>
+                                                                                                    <td><span
+                                                                                                            th:text="${target}"></span>
+                                                                                                    </td>
+                                                                                                </tr>
+                                                                                                <tr>
+                                                                                                    <td align="right"
+                                                                                                        style="padding-right: 10px; color: #817878; font-weight: 500;">
+                                                                                                        所属监控ID:
+                                                                                                    </td>
+                                                                                                    <td>
+                                                                                                        <span th:text="${monitorId}"></span>
+                                                                                                    </td>
+                                                                                                </tr>
+                                                                                                <tr>
+                                                                                                    <td align="right"
+                                                                                                        style="padding-right: 10px; color: #817878; font-weight: 500;">
+                                                                                                        所属监控名称:
+                                                                                                    </td>
+                                                                                                    <td>
+                                                                                                        <span th:text="${monitorName}"></span>
+                                                                                                    </td>
+                                                                                                </tr>
+                                                                                                <tr>
+                                                                                                    <td align="right"
+                                                                                                        style="padding-right: 10px; color: #817878; font-weight: 500;">
+                                                                                                        告警级别:
+                                                                                                    </td>
+                                                                                                    <td><span
+                                                                                                            th:text="${priority}"></span>
+                                                                                                    </td>
+                                                                                                </tr>
+                                                                                            </table>
+                                                                                            <br><span
+                                                                                                th:text="${content}"></span>
+                                                                                        </div>
+                                                                                    </td>
+                                                                                </tr>
+                                                                                </tbody>
+                                                                            </table>
+                                                                        </th>
+                                                                    </tr>
+                                                                    </tbody>
+                                                                </table>
+                                                            </td>
+                                                        </tr>
+                                                        </tbody>
+                                                    </table>
+                                                </div>
+                                                <div id="dv_4" class="blk_wrapper" style="">
+                                                    <table class="blk" name="blk_button" width="600" border="0"
+                                                           cellpadding="0" cellspacing="0">
+                                                        <tbody>
+                                                        <tr>
+                                                            <td width="20"></td>
+                                                            <td align="center">
+                                                                <table width="100%" cellspacing="0" cellpadding="0"
+                                                                       border="0" class="tblContainer">
+                                                                    <tbody>
+                                                                    <tr>
+                                                                        <td height="10"></td>
+                                                                    </tr>
+                                                                    <tr>
+                                                                        <td align="left">
+                                                                            <table cellspacing="0" cellpadding="0"
+                                                                                   border="0" align="left"
+                                                                                   class="bmeButton"
+                                                                                   style="border-collapse: separate;">
+                                                                                <tbody>
+                                                                                <tr>
+                                                                                    <td class="bmeButtonText"
+                                                                                        style="border-radius: 5px; border-width: 0px; border-style: none; border-color: transparent; background-color: rgb(166, 102, 237); text-align: center; padding: 20px 40px; font-weight: bold; word-break: break-word;">
+                                                                                        <span style="font-family:Arial, Verdana; font-size:14px;color:#FFFFFF;"><a
+                                                                                                target="_blank"
+                                                                                                style="color:#FFFFFF;text-decoration:none;"
+                                                                                                href="https://console.tancloud.cn"
+                                                                                                data-link-type="web">登入控制台</a></span>
+                                                                                    </td>
+                                                                                </tr>
+                                                                                </tbody>
+                                                                            </table>
+                                                                        </td>
+                                                                    </tr>
+                                                                    <tr>
+                                                                        <td height="10"></td>
+                                                                    </tr>
+                                                                    </tbody>
+                                                                </table>
+                                                            </td>
+                                                            <td width="20"></td>
+                                                        </tr>
+                                                        </tbody>
+                                                    </table>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr id="section_4" class="flexible-section" data-columns="1">
+                                            <td width="100%" class="blk_container bmeHolder" name="bmePreFooter"
+                                                valign="top" align="center"
+                                                style="background-color: rgb(255, 255, 255);   " bgcolor="#ffffff">
+                                                <div id="dv_5" class="blk_wrapper">
+                                                    <table cellspacing="0" cellpadding="0" border="0" name="blk_divider"
+                                                           width="600" class="blk">
+                                                        <tbody>
+                                                        <tr>
+                                                            <td style="padding-top:10px; padding-bottom:10px;padding-left:20px;padding-right:20px;"
+                                                                class="tblCellMain">
+                                                                <table width="100%" cellspacing="0" cellpadding="0"
+                                                                       border="0"
+                                                                       style="border-top: 1px solid rgb(225, 225, 225); min-width: 1px;"
+                                                                       class="tblLine">
+                                                                    <tbody>
+                                                                    <tr>
+                                                                        <td><span></span></td>
+                                                                    </tr>
+                                                                    </tbody>
+                                                                </table>
+                                                            </td>
+                                                        </tr>
+                                                        </tbody>
+                                                    </table>
+                                                </div>
+                                                <div id="dv_6" class="blk_wrapper" style="">
+                                                    <table cellspacing="0" cellpadding="0" border="0" style=""
+                                                           name="blk_social_follow" width="600" class="blk">
+                                                        <tbody>
+                                                        <tr>
+                                                            <td class="tblCellMain"
+                                                                style="padding-top:10px; padding-bottom:10px; padding-left:20px; padding-right:20px;">
+                                                                <table class="tblContainer mblSocialContain"
+                                                                       cellspacing="0" cellpadding="0" border="0"
+                                                                       align="left" style="">
+                                                                    <tbody>
+                                                                    <tr>
+                                                                        <td class="tdItemContainer">
+                                                                            <table cellspacing="0" cellpadding="0"
+                                                                                   border="0" class="mblSocialContain"
+                                                                                   style="table-layout: auto;">
+                                                                                <tbody>
+                                                                                <tr>
+                                                                                    <td valign="top" name="bmeSocialTD">
+                                                                                        <!--[if gte mso 6]></td>
+                                                                                    <td align="left" valign="top">
+                                                                                        <![endif]-->
+                                                                                        <table cellspacing="0"
+                                                                                               cellpadding="0"
+                                                                                               border="0"
+                                                                                               class="bmeFollowItem"
+                                                                                               type="website"
+                                                                                               style="float:left;"
+                                                                                               align="left">
+                                                                                            <tbody>
+                                                                                            <tr>
+                                                                                                <td align="left"
+                                                                                                    valign="middle"
+                                                                                                    class="bmeFollowItemText"
+                                                                                                    style="padding-right:10px;font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; text-align: left;">
+                                                                                                    <a href="https://clt1416649.bmetrack.com/c/l?u=D77E008&amp;e=13E20B0&amp;c=159DC9&amp;t=1&amp;l=77D3334A&amp;email=JYL7PF5c87g0WhC3NaLnunzBjzlZ2TJR&amp;seq=2"
+                                                                                                       target="_blank"
+                                                                                                       style="text-decoration:none;">
+                                                                                                        <div style="font-family:Arial, Verdana; font-size:14px; font-weight:400; font-style:normal; text-decoration:none solid rgb(150,63,250);color:rgb(150,63,250);">
+                                                                                                            探云
+                                                                                                            tancloud.cn
+                                                                                                        </div>
+                                                                                                    </a></td>
+                                                                                            </tr>
+                                                                                            </tbody>
+                                                                                        </table>
+                                                                                        <!--[if gte mso 6]></td>
+                                                                                    <td align="left" valign="top">
+                                                                                        <![endif]-->
+                                                                                        <table cellspacing="0"
+                                                                                               cellpadding="0"
+                                                                                               border="0"
+                                                                                               class="bmeFollowItem"
+                                                                                               type="website"
+                                                                                               style="float:left;"
+                                                                                               align="left">
+                                                                                            <tbody>
+                                                                                            <tr>
+                                                                                                <td align="left"
+                                                                                                    valign="middle"
+                                                                                                    class="bmeFollowItemText"
+                                                                                                    style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; text-align: left;">
+                                                                                                    <a href="https://clt1416649.bmetrack.com/c/l?u=D77E009&amp;e=13E20B0&amp;c=159DC9&amp;t=1&amp;l=77D3334A&amp;email=JYL7PF5c87g0WhC3NaLnunzBjzlZ2TJR&amp;seq=2"
+                                                                                                       target="_blank"
+                                                                                                       style="text-decoration:none;">
+                                                                                                        <div style="font-family:Arial, Verdana; font-size:14px; font-weight:400; font-style:normal; text-decoration:none solid rgb(150,63,250);color:rgb(150,63,250);">
+                                                                                                            赫兹跳动
+                                                                                                            hertzbeat.com
+                                                                                                        </div>
+                                                                                                    </a></td>
+                                                                                            </tr>
+                                                                                            </tbody>
+                                                                                        </table>
+                                                                                    </td>
+                                                                                </tr>
+                                                                                </tbody>
+                                                                            </table>
+                                                                        </td>
+                                                                    </tr>
+                                                                    </tbody>
+                                                                </table>
+                                                            </td>
+                                                        </tr>
+                                                        </tbody>
+                                                    </table>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        </tbody>
+                                    </table>
+                                </td>
+                            </tr>
+                            <tr id="section_5" class="flexible-section" data-columns="1" data-section-type="bmeFooter">
+                                <td width="100%" class="blk_container bmeHolder" name="bmeFooter" valign="top"
+                                    align="center"
+                                    style="color: rgb(102, 102, 102); background-color: rgb(230, 230, 232);   "
+                                    bgcolor="#e6e6e8">
+                                    <div id="dv_7" class="blk_wrapper" style="">
+                                        <table width="600" cellspacing="0" cellpadding="0" border="0" class="blk"
+                                               name="blk_permission" style="">
+                                            <tbody>
+                                            <tr>
+                                                <td name="tblCell" class="tblCell"
+                                                    style="padding: 20px; word-break: break-word;" valign="top"
+                                                    align="left">
+                                                    <table cellpadding="0" cellspacing="0" border="0" width="100%">
+                                                        <tbody>
+                                                        <tr>
+                                                            <td name="bmePermissionText" style="text-align:left;"
+                                                                align="left"><span
+                                                                    style="font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 11px;line-height: 140%;">
+<br>如果您不想再接收TanCloud的「告警通知」邮件，或者需要设置其他人接收，<a target="_new" style="color:#16a7e0;"
+                                             href="https://console.tancloud.cn/alert/notice">点此设置订阅</a>。  If you do not wish to receive any more emails, you can <a
+                                                                    target="_new" style="color:#16a7e0;"
+                                                                    href="https://console.tancloud.cn/alert/notice">unsubscribe here</a>.</span>
+                                                            </td>
+                                                        </tr>
+                                                        </tbody>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </td>
+    </tr>
+    </tbody>
+</table>
 </body>
 </html>

web-app/README.md

@@ -4,6 +4,22 @@
 
 **面向开发者，易用友好的高性能监控云服务**
 
+## 本地启动
+
+### npm 方式
+1. 需要nodejs npm环境   
+   下载地址：https://nodejs.org/en/download
+2. 在前端工程目录web-app下执行 `npm install --registry=https://registry.npm.taobao.org`
+3. 全局安装angular-cli `npm install -g @angular/cli@12 --registry=https://registry.npm.taobao.org`
+4. 待本地后端启动后，在web-app目录下启动本地前端 `ng serve --open`
+
+### yarn 方式
+1. 需要nodejs npm环境   
+   下载地址：https://nodejs.org/en/download
+2. 安装yarn `npm install -g yarn`
+3. 在前端工程目录web-app下执行 `yarn install`
+4. 全局安装angular-cli `npm install -g @angular/cli@12 --registry=https://registry.npm.taobao.org`
+5. 待本地后端启动后，在web-app目录下启动本地前端 `ng serve --open`
 
 ## 编译打包  
 
@@ -15,4 +31,4 @@ manager目录下执行
 
 ```mvn package```
 
-生成的安装包在 manager/target/hertz-beta-1.0.tar.gz 
+生成的安装包在 manager/target/hertz-beta.tar.gz