perf:explore样式调整 & config-system-email host校验修改

nezha-fronted/src/components/common/header.vue

@@ -32,7 +32,7 @@
       </el-menu-item>
       <el-submenu index="1" popper-class="nz-submenu">
         <template slot="title">
-          <div @click="jumpTo('overview')" :class ="(activeIndex == 'overview' ||activeIndex == 'panel' || activeIndex == 'metricPreview') ? 'menu-active' :'' " >
+          <div @click="jumpTo('overview')" :class ="(activeIndex == 'overview' ||activeIndex == 'panel' || activeIndex == 'explore') ? 'menu-active' :'' " >
             {{$t('overall.dashboard')}}
           </div>
         </template>

nezha-fronted/src/components/common/js/validate.js

@@ -1,6 +1,6 @@
 import vm from '../../../main'
 import ca from "element-ui/src/locale/lang/ca";
-
+//ipv4 ip校验
 export function host(rule, value, callback) {
   if(!value || value.trim() ==''){
     callback();
@@ -14,6 +14,23 @@ export function host(rule, value, callback) {
     }
   }, 100)
 }
+export function hostPlus(rule,value,callback){
+  if(!value || value.trim() ==''){
+    callback();
+  }
+  const ipv4 = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\:\d{0,5})?$/
+  const ipv6 = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/
+  const domin = /^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
+
+  setTimeout(() => {
+    if (ipv4.test(value) || ipv6.test(value) || domin.test(value)) {
+      callback()
+    } else {
+      callback(new Error(vm.$t('validate.host')))
+    }
+  }, 100)
+
+}
 
 export function phone(rule, value, callback) {
   const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/

nezha-fronted/src/components/common/language/en.js

@@ -311,7 +311,7 @@ const en = {
     positiveInteger:'Positive integer',
     email:'Invalid email',//'不合法的E-mail地址'
     tel:'Invalid phone number',//'不合法的电话号码'
-    host:'Invalid IP',//'不合法的IP'
+    host:'Invalid Host',//'不合法的Host'
     domain:'Invalid domain',
     usize:'Must be number(1 - 49)',
     fileSize:'File exceed max size',//File exceed max size.

nezha-fronted/src/components/page/config/system.vue

@@ -198,7 +198,7 @@
 <script>
     import {positiveInteger} from '../../common/js/validate'
     import {port} from '../../common/js/validate'
-    import {domain} from '../../common/js/validate'
+    import {hostPlus} from '../../common/js/validate'
     import {host} from '../../common/js/validate'
     import {uSize} from '../../common/js/validate'
     import bus from '../../../libs/bus';
@@ -281,7 +281,7 @@
             emailRules:{
               email_smtp_host: [
                 {required:true,message:this.$t('validate.required'),trigger:'blur'},
-                {validator:domain,trigger: 'blur'}
+                {validator:hostPlus,trigger: 'blur'}
               ],
               email_smtp_port: [
                 {required:true,message:this.$t('validate.required'),trigger:'blur'},
@@ -390,7 +390,7 @@
                 this.$put('/sysConfig',postParam).then(response=>{
                   if(response.code == 200){
                     this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-                    this.resetForm(formName);
+                    // this.resetForm(formName);
                     setTimeout(()=> {
                       this.querySetInfo(type);
                     },200)

nezha-fronted/src/components/page/dashboard/explore/explore.vue

@@ -84,7 +84,8 @@
               <div class="introduce-view right-margin" v-show="showIntroduce">
                 <div class="info-room">
                   <div class="col-md-9 doc-content">
-                    <h2 class="page-header">Query examples<a class="header-anchor" href="https://prometheus.io/docs/prometheus/latest/querying/examples/" target="_blank"><i style="font-size: 16px;" class="nz-icon nz-icon-link1"></i></a></h2>
+                    <h1 class="page-header">Query examples<a class="header-anchor" href="https://prometheus.io/docs/prometheus/latest/querying/examples/" target="_blank"><i style="font-size: 16px;" class="nz-icon nz-icon-link1"></i></a></h1>
+                    <div class="content-divider"></div>
                     <h2 >
                       Simple time series selection
                     </h2>
@@ -614,11 +615,17 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
     line-height: 1.5;
   }
 
+  .doc-content .content-divider{
+    height: 1px;
+    width:100%;
+    border-bottom: 2px solid #C0C4CC;
+    margin: 5px 0px;
+  }
+
   .doc-content > h1 {
     color: #e6522c;
     font-size: 30px;
     text-transform: uppercase;
-    margin: 0px 0 10px 0;
   }
 
   .doc-content > h1 a {
@@ -634,10 +641,14 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
     display: inline-block !important;
     margin: 15px 55px;
   }
+  .doc-content > h1 {
+    color: #e6522c;
+    font-size: 22px;
+  }
 
   .doc-content > h2 {
     color: #e6522c;
-    font-size: 22px;
+    font-size: 18px;
   }
 
   .doc-content > h2 code {