perf: project、module弹框样式调整及字段校验

1.未完成版

nezha-fronted/src/assets/css/font/iconfont.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="icon_shezhi" unicode="&#60301;" d="M482.88 784l-17.28-90.688-20.64-4.512a309.696 309.696 0 0 1-99.776-41.088l-18.688-11.84-73.28 55.04-44.64-44.64 51.904-76.416-11.392-17.76a310.016 310.016 0 0 1-41.568-99.584l-4.8-21.6-90.72-12.896v-63.104l90.688-17.312 4.512-20.64a309.984 309.984 0 0 1 41.088-99.776l11.84-18.688-55.04-73.28 44.64-44.64 76.416 51.904 17.76-11.392a310.016 310.016 0 0 1 99.584-41.568l21.6-4.8 12.896-90.72h63.104l17.312 90.688 20.64 4.512a309.984 309.984 0 0 1 99.776 41.088l18.688 11.84 73.28-55.04 44.64 44.64-51.904 76.416 11.392 17.76a310.016 310.016 0 0 1 41.568 99.584l4.8 21.6 90.72 12.896V413.12l-90.688 17.312-4.512 20.64a309.984 309.984 0 0 1-41.088 99.776l-11.84 18.688 55.04 73.28-44.64 44.64-76.416-51.904-17.76 11.392a310.144 310.144 0 0 1-99.584 41.568l-21.6 4.8-12.896 90.72H482.88zM410.56 746.144l19.424 101.856h171.584l14.624-102.624c28-8.064 54.848-19.328 80.128-33.568l85.792 58.304 121.344-121.344-62.272-82.88c14.08-25.408 25.152-52.352 32.96-80.416l101.888-19.424v-171.584l-102.624-14.624a373.92 373.92 0 0 0-33.568-80.128l58.304-85.792-121.344-121.344-82.88 62.272c-25.408-14.08-52.352-25.152-80.416-32.96l-19.424-101.888h-171.584l-14.624 102.624a373.92 373.92 0 0 0-80.128 33.568L241.92-2.112l-121.344 121.344 62.272 82.88a373.824 373.824 0 0 0-32.96 80.416L48 301.952v171.584l102.624 14.624c8.064 27.968 19.328 54.848 33.568 80.128L125.888 654.08l121.344 121.344 82.88-62.272a373.856 373.856 0 0 0 80.416 32.96zM512 192a192 192 0 1 0 0 384 192 192 0 0 0 0-384z m0 64a128 128 0 1 1 0 256 128 128 0 0 1 0-256z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="fangkuai1" unicode="&#60699;" d="M128 768v-768h768V768H128zM96 832h832a32 32 0 0 0 32-32v-832a32 32 0 0 0-32-32H96a32 32 0 0 0-32 32V800a32 32 0 0 0 32 32zM239.936 341.44v85.632h545.408v-85.6z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="yingwenyuyan1" unicode="&#58989;" d="M1022.013328 59.338536h-46.452917v-92.910591c0-51.310987-41.605946-92.909005-92.912176-92.909005H92.902663C41.594847-126.477889 0-84.883042 0-33.568884V616.803667c0 51.312573 41.593261 92.90742 92.902663 92.907419h46.457674V802.626434c0 51.318915 41.594847 92.90742 92.915347 92.90742h789.73923c51.314158 0 92.915347-41.588505 92.915347-92.90742v-650.372551c-0.003171-51.318915-41.602775-92.915347-92.916933-92.915347zM92.902663 663.259755c-25.653908 0-46.451332-20.797424-46.451331-46.456088v-650.372551c0-25.653908 20.797424-46.457674 46.451331-46.457674H882.64982c25.653908 0 46.451332 20.803766 46.451332 46.457674V616.803667c0 25.658665-20.797424 46.456088-46.451332 46.456088H92.902663z m975.568339 139.366679c0 25.658665-20.797424 46.451332-46.457674 46.451331H232.274099c-25.661836 0-46.459259-20.792667-46.459259-46.451331v-92.915348H882.64982c51.309402 0 92.918519-41.594847 92.918519-92.907419v-511.005872h46.451332c25.653908 0 46.451332 20.803766 46.451331 46.456088V802.632776v-0.006342zM184.4164 492.941905h245.828812v-77.094909h-152.599529v-71.857897h129.679079v-78.133432h-129.679079v-82.289112h158.324886V105.453735H184.4164V492.941905zM512.705562 492.941905h94.798959l96.34961-185.421628 38.017887-85.935835h2.609786c-5.2164 41.154069-12.511433 96.877592-12.511434 143.227449V492.941905H820.512821v-387.489756h-94.800546l-95.816871 186.970693-38.019472 84.897312h-2.6082c4.177877-43.232702 11.98028-96.346439 11.98028-143.22745v-128.640555h-88.544036V492.941905z"  horiz-adv-x="1116" />
+
+    
+    <glyph glyph-name="zhongwenyuyan1" unicode="&#58991;" d="M1022.013328 59.338536h-46.452917v-92.910591c0-51.310987-41.605946-92.909005-92.912176-92.909005H92.902663C41.594847-126.477889 0-84.883042 0-33.568884V616.803667c0 51.312573 41.593261 92.90742 92.902663 92.907419h46.457674V802.626434c0 51.318915 41.594847 92.90742 92.915347 92.90742h789.73923c51.314158 0 92.915347-41.588505 92.915347-92.90742v-650.372551c-0.003171-51.318915-41.602775-92.915347-92.916933-92.915347zM92.902663 663.259755c-25.653908 0-46.451332-20.797424-46.451331-46.456088v-650.372551c0-25.653908 20.797424-46.457674 46.451331-46.457674H882.64982c25.653908 0 46.451332 20.803766 46.451332 46.457674V616.803667c0 25.658665-20.797424 46.456088-46.451332 46.456088H92.902663z m975.568339 139.366679c0 25.658665-20.797424 46.451332-46.457674 46.451331H232.274099c-25.661836 0-46.459259-20.792667-46.459259-46.451331v-92.915348H882.64982c51.309402 0 92.918519-41.594847 92.918519-92.907419v-511.005872h46.451332c25.653908 0 46.451332 20.803766 46.451331 46.456088V802.632776v-0.006342zM687.591329 443.506602v-240.671076h-70.808274v21.763012h-89.33046v-141.616549h-71.260151v141.616549h-88.859557v-24.08106h-67.567447V443.506602h156.427004v79.137074h71.260151v-79.137074h160.138734z m-231.398885-152.734299v86.541508h-88.859557v-86.541508h88.859557z m160.590611 0v86.541508h-89.33046v-86.541508h89.33046z"  horiz-adv-x="1116" />
+
+    
+    <glyph glyph-name="eyuPy" unicode="&#58996;" d="M1022.01344 59.3408h-46.45376v-92.91264c0-51.31264-41.60512-92.90752-92.90752-92.90752H92.9024C41.59488-126.47936 0-84.88448 0-33.56672V616.80128c0 51.31264 41.59488 92.90752 92.9024 92.90752h46.45888V802.62656C139.36128 853.94432 180.95616 895.53408 232.27392 895.53408h789.73952c51.31776 0 92.91776-41.58976 92.91776-92.90752v-650.37312c0-51.31776-41.6-92.91264-92.91776-92.91264zM92.9024 663.26016a46.45376 46.45376 0 0 1-46.44864-46.45888v-650.368c0-25.65632 20.79744-46.45888 46.44864-46.45888h789.74976c25.6512 0 46.44864 20.80256 46.44864 46.45888V616.80128a46.45376 46.45376 0 0 1-46.44864 46.45888H92.9024z m975.5648 139.3664a46.44864 46.44864 0 0 1-46.45376 46.45376H232.27392a46.44864 46.44864 0 0 1-46.45888-46.45376v-92.91776h696.832c51.31264 0 92.92288-41.59488 92.92288-92.90752v-511.0016h46.44864a46.45888 46.45888 0 0 1 46.45376 46.45376V802.63168v-0.00512zM171.90912 499.61984h188.25216c41.00096 0 71.7056-9.74848 92.12416-29.25056 20.41856-19.49696 30.62272-47.24736 30.62272-83.2512 0-36.99712-11.12064-65.91488-33.37216-86.74816-22.25152-20.83328-56.20736-31.24736-101.87776-31.24736H285.66016V133.12H171.90912V499.61984z m113.75104-156.25216h27.7504c21.83168 0 37.16608 3.79392 45.99808 11.37664 8.83712 7.58272 13.25056 17.29024 13.25056 29.12768 0 11.49952-3.83488 21.248-11.49952 29.25056-7.66464 7.99744-22.08256 11.99616-43.24864 11.99616h-32.25088v-81.75104z m220.25216 55.24992h107.49952l54.74816-176.74752 50.74944 176.74752h100.2496l-105.24672-283.7504c-12.00128-32.3328-24.25344-54.16448-36.75136-65.49504-17.664-16-44.58496-24.00256-80.75264-24.00256-14.66368 0-37.32992 1.9968-67.9936 6.00064l-8.00256 70.99904c14.66368-4.66432 30.99648-6.99904 48.9984-6.99904 12.00128 0 21.7088 2.74944 29.12256 8.24832 7.41888 5.504 13.71136 15.3344 18.87744 29.50144L505.9072 398.6176z"  horiz-adv-x="1116" />
+
+    
+
+
+  </font>
+</defs></svg>

nezha-fronted/src/assets/css/main.css

@@ -55,20 +55,6 @@ html {
 .right-child-box .line-100 {
   background: #DCDFE6;
 }
-/*侧滑文字*/
-.el-form-item .el-form-item__label{
-  font-size: 10px;
-  text-align : left;
-}
-/*侧滑输入框高度*/
-.el-input .el-input__inner{
-  line-height: 26px;
-  height: 26px;
-}
-/*侧滑输入框宽度*/
-.right-menu .el-form-item__content .el-input{
-  width: 90%;
-}
 /* begin--按钮组件*/
 .nz-btn {
   border-radius: 4px;
@@ -87,7 +73,7 @@ html {
   line-height: 18px;
   padding: 2px 12px;
 }
-.nz-btn.nz-btn-style-normal {
+.nz-btn.nz-btn-style-normal { /* 蓝色按钮 */
   background-color: #16b;
   background-image: linear-gradient(#2d8cec, #16b);
   border: 1px solid #0b4075;
@@ -95,7 +81,7 @@ html {
   color: #fff;
   text-shadow: 0 1px 1px rgba(0,0,0,.75);
 }
-.nz-btn.nz-btn-style-light {
+.nz-btn.nz-btn-style-light { /* 浅色按钮 */
   background-color: #dedede;
   background-image: linear-gradient(white,#dedede);
   border: 1px solid #b8b8b8;
@@ -103,6 +89,12 @@ html {
   color: #444;
   text-shadow: 0 1px 1px rgba(255,255,255,.75);
 }
+.nz-btn.nz-btn-size-small.nz-btn-style-square { /* 单图标无文字的情况下使用*/
+  padding: 2px 5px;
+}
+.nz-btn.nz-btn-size-normal.nz-btn-style-square { /* 单图标无文字的情况下使用*/
+  padding: 4px 6px;
+}
 .nz-btn.nz-btn-style-light:hover:not(.nz-btn-disabled) {
   background-image: linear-gradient(#dedede,#c5c5c5);
 }
@@ -269,7 +261,7 @@ html {
   border-radius: 8px;
   box-shadow: 0 0 15px #ccc;
   background-color: white;
-  padding: 0 20px;
+  padding: 0 0 0 20px;
 }
 
 /*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
@@ -284,46 +276,47 @@ html {
 /* begin--右侧弹框--顶部按钮*/
 .right-box-top-btns {
   text-align: center;
-}
-.right-box-top-btn {
-  text-align: center;
-  border-radius: 0 0 9px 9px;
   float: right;
-  color: #656565;
+  padding-right: 20px;
-  height: 30px;
+  padding-top: 5px;
-  font-size: 12px;
-  padding: 3px 8px 1px 8px;
-  border: 1px solid #aaaaaa;
-  border-top: none;
-  cursor: pointer;
-  margin-left: 20px;
-}
-.right-box-top-btn-full {
-  background-color: #656565;
-  border: 1px solid #656565;
-  border-top: none;
-  color: white;
 }
 /* end--右侧弹框--顶部按钮*/
 
 /* begin--右侧弹框--内容*/
 .right-box-title {
-  height: 30px;
+  height: 56px;
   line-height: 40px;
   text-align: left;
   display: inline-block;
+  font-weight: bold;
+}
+.right-box-form-box {
+  height: calc(100% - 63px);
+  width: 100%;
+}
+.right-box-form-box .el-scrollbar__wrap {
+  overflow-x: hidden !important;
 }
 .right-box-form {
-  margin-top: 30px;
+  width: calc(100% - 20px);
-  height: 100%;
+}
+.right-box-form .el-form-item {
+  margin-bottom: 15px;
+}
+.right-box-form .el-select {
+  width: 100%;
+}
+.right-box-form .el-form-item .el-form-item__label {
+  padding: 0;
+  font-size: 16px;
+  color: black;
+}
+.right-box-form .el-form-item__content {
+  line-height: 32px;
 }
 .right-box-form-row {
   margin-top: 16px;
 }
-.right-box-form-label {
-  margin-bottom: 8px;
-  text-align: left;
-}
 .right-box-form-content {
   line-height: 32px;
   text-align: left;
@@ -336,8 +329,56 @@ html {
   color: #d0d4dC;
   font-size: 14px;
   line-height: 20px;
-  min-height: 64px;
 }
+.right-box-form-param>label {
+  width: 100%;
+}
+.right-box-form-btns {
+  display: inline-block;
+  float: right;
+}
+/* start--param*/
+.param-box {
+  border: 1px solid #DCDFE6;
+  border-radius: 4px;
+  padding: 0 10px;
+}
+.param-box-endpoint {
+  height: 325px;
+}
+.param-box-module {
+  min-height: 225px;
+}
+.param-box-row {
+  padding: 7px 0 0 0;
+  position: relative;
+}
+.param-box-row:last-of-type {
+  padding-bottom: 7px;
+}
+.param-box-row>div {
+  display: inline-block;
+}
+.param-box-row-key, .param-box-row-value {
+  display: inline-block;
+  width: 43%;
+}
+.param-box-row-eq {
+  display: inline-block;
+  width: 22px;
+  text-align: center;
+  height: 32px;
+  line-height: 32px;
+  color: #c4c7cF;
+}
+.param-box-row-symbol {
+  display: inline-block;
+  padding-left: 3px;
+  font-size: 12px;
+  color: #DCDFE6;
+  cursor: pointer;
+}
+/* end--param*/
 .right-box-form-content .el-select {
   width: 100%;
 }
@@ -419,9 +460,10 @@ html {
   font-size: 13px;
 }
 /* end--endpoint->子弹框asset搜索框前缀和后缀*/
+
 /* begin--自定义可编辑的el-select下拉框样式*/
-.config-dropdown {
+.config-dropdown { /* 若宽度不合适，自行增加新类覆盖宽度 */
-  width: 520px;
+  width: 500px;
 }
 .config-dropdown-btn {
   display: inline-block;

nezha-fronted/src/assets/css/nzIcon.css

@@ -0,0 +1,37 @@
+@font-face {font-family: "nz-icon";
+  src: url('font/iconfont.eot?t=1577436728098'); /* IE9 */
+  src: url('font/iconfont.eot?t=1577436728098#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAU8AAsAAAAAC4wAAATwAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDSAqJbIgeATYCJAMYCw4ABCAFhG0HahvmCciemjwpESGwDZgsrYyxwfNTPDyule8nmexe5koEDoglsCWSVRXmXJWo8VVVQELv0Hv6l83JUA1896R0MHKXQcWlTes0e4D/YH9C+AQ8dfPHOq8N+N7k6As4oLHOA3nxhslYhnWgKyywH+6XepF4dJrPvh3IEZ9QZi0acJQ4Gmg3Fk0sCqipgWDOW2TXHqGDCTSLjUAdLqvhQIBCUQRUPBFNOhAQMio5lDDU1JQNy2ZqCegM0yd0GfDZvv34KykCSLpMWfH8vVIjKPhRvfW9p/yT2yYKiNqzg9qMjI2AQrxJdT7j7co32sqW9h58nASMG0rKj6fPmmfja/025v9/QlLFG8bVf3lkRSckogLlOI4/rehWUKQjZH40CIUfI0LHX40Q/PeNEmhri+1zgfgCpAHgN+6uyDpV3TskKKhM9YlWqIM0hkHh4/2FdMD08dyA09EAnIMid8FIDqB560dGcbn8wOOlAxHDDz6XDkb5OGZv/xiewtEb2Gg+jxt0omwQ5ngGHc7kEbc7DgFuYgTi8LEUjsZHsjjM74nHFL9Wi3l0svPui+99/J0H3b7xua//hrtlp2+4/k63n9J/nHL+dvXD3BTzdoT/x+0GFep1AxN7iuLIzXjftVc6Q8GulYdvxPms2sfN2zbXZ/nSK+fvDN+Pa+P1PMW8bUzJM3gxKekXDGjQi+4+gxCz4qWiT+0qptFqoDWcvgPoaCDrVb3LrrxHwzla2vxjym1a366F+Xmr0VcYxDMt+4Zso+cFeHPCr2VBfLJC0Vbc/lhWpJ1Kql5/5VBpW1B+myLl8JUDaRWXVFL0Y8UFteXnk/LmE8waqCK7goWVHMocMya3qfQEUe0Sgo9nmSg466ZcbqU6p2ZxXCNltVKNKs/kGz38nNyGigpfX13dYF8dTB5hu4L9IcoQ2OXqV7gvBvnfU7bTr7gn3JXsN5+luAKoEnJPyQFLcqa1a5Z7z0crjHD1DvV8zXb1sfkzMH3n8ezT+M8aK9Tz0wvTvhXLKqbWTW1aU/+nYnp397GByCvPv3rAlNYZ8EifGMh5+x9JGTC1pZ+nb7zwsTy8bVH5otbI4s+r6svry5bhVvwLt02Cqt7hxdcVx4y+0CVmUNpTeRerorySvDmS+4bfd0t/E4SPXGvavqR9RnOMAi5ND7/Dj+IYVY8RTAAwKt/I523dWZXvB+6Udu8pqngr5hu5/HIZmvNV9IWc8E0+j5CkvPBtVxFEv0VX6QCAcouW4KZaeJHOcVtYyl29eI+ukNA0/Aze6Z62pZ5VWum/U8/yIRlYBNnQSnTBb4RObydUQ/ug2aB8894MEm9RxrDeTAzCVHshmewrZFNdQRf8E+jM9haqqeENzdVQ77C3OkS6WCI6mRihfiwUDU6HoFlk2qlsIqZem04KSmwaJpJHjMBENiGaKScOIrWximeUKUmWBShITjssww5HbDYndElOCzHIrFmWXVlarZB2QazBaQe0QySEjowwgvTGgkQGTg6COb6Mjt18E8Kkl42OlNOnwI4REg9x7lAiVkIJdLnSUarPsdR7jGKSREZxASRQ5U52UBmyEzY16QS50uezIAxkLHONuEsWLRpLKKtk+1fbj/IMaJS1aqTIUaKLGgP92n/Ebo+ZjDOLgYLOYbL26sTE4LGiwzSaOMb2jtU5EkPGmZ1BnS+xAw1jAQA=') format('woff2'),
+  url('font/iconfont.woff?t=1577436728098') format('woff'),
+  url('font/iconfont.ttf?t=1577436728098') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('font/iconfont.svg?t=1577436728098#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.nz-icon {
+  font-family: "nz-icon" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.nz-icon-gear:before {
+  content: "\eb8d";
+}
+
+.nz-icon-minus-square:before {
+  content: "\ed1b";
+}
+
+.nz-icon-lang-en:before {
+  content: "\e66d";
+}
+
+.nz-icon-lang-cn:before {
+  content: "\e66f";
+}
+
+.nz-icon-python:before {
+  content: "\e674";
+}
+

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

@@ -23,7 +23,7 @@
             </el-menu-item>
           </template>
         </el-submenu>
-        <el-submenu index="1"  popper-class="nz-submenu">
+        <el-submenu index="1" popper-class="nz-submenu">
           <template slot="title">
             <div @click="jumpTo('dashboard')">{{$t('overall.dashboard')}}</div>
           </template>
@@ -43,85 +43,86 @@
             <el-menu-item :index="'2-' + index">
               <div @click="jumpToProject(item)">
                 <span>{{item.name}}</span>
-                <div @click.stop="toEditProject(item)" class="menu-edit"><i style="color: inherit" class="el-icon-edit-outline"></i></div>
+                <div @click.stop="toEditProject(item)" class="menu-edit"><i style="color: inherit"
+                                                                            class="el-icon-edit-outline"></i></div>
               </div>
             </el-menu-item>
           </template>
         </el-submenu>
-          <el-submenu index="3">
+        <el-submenu index="3" popper-class="nz-submenu">
-              <template slot="title">
+          <template slot="title">
-                  <div @click="jumpTo('asset')">{{$t('overall.asset')}}</div>
+            <div @click="jumpTo('asset')">{{$t('overall.asset')}}</div>
-              </template>
+          </template>
-              <template v-for="(item, index) in assetData">
+          <template v-for="(item, index) in assetData">
-                  <el-menu-item :index="'3-' + index">
+            <el-menu-item :index="'3-' + index">
-                      <div @click="jumpToAsset('asset',item.id)">
+              <div @click="jumpToAsset('asset',item.id)">
-                          <span>{{item.name}}</span>
+                <span>{{item.name}}</span>
-                          <el-popover
+                <el-popover
-                                  placement="bottom"
+                  placement="bottom"
-                                  v-model="item[item.name]"
+                  v-model="item[item.name]"
-                                  trigger="click"
+                  trigger="click"
-                          >
+                >
-                              <div class="pop-window-assetType-content">
+                  <div class="pop-window-assetType-content">
-                                  <div class="right-box-top-btns">
+                    <div class="right-box-top-btns">
-                                      <div class="right-box-top-btn right-box-top-btn-full"
+                      <div class="right-box-top-btn right-box-top-btn-full"
-                                           @click="item[item.name] = false">
+                           @click="item[item.name] = false">
-                                          <div class="right-box-btn-icon">
+                        <div class="right-box-btn-icon">
-                                              <i class="el-icon-close"></i>
+                          <i class="el-icon-close"></i>
-                                          </div>
+                        </div>
-                                          <span>{{$t('overall.esc')}}</span>
+                        <span>{{$t('overall.esc')}}</span>
-                                      </div>
-                                  </div>
-                                  <div class="pop-window">
-                                      <span style="display: block;padding-bottom: 20px">标题</span>
-                                      <div style="padding-top: 10px;padding-left: 20px">
-                                          <div>
-                                              <label style="font-size: 12px">DN name</label>
-                                              <input class='sidebar-pop-input' v-model="addIdcData.name"/>
-                                          </div>
-                                          <div style="padding-top: 40px">
-                                              <label style="font-size: 12px">Loaction</label>
-                                              <input class='sidebar-pop-input' v-model="addIdcData.location"/>
-                                          </div>
-                                          <div style="padding-top: 40px">
-                                              <label style="font-size: 12px;padding-right: 20px">负责人</label>
-                                              <select class='sidebar-pop-input-select'
-                                                      style="margin-left:-40px "
-                                                      v-model="addIdcData.principal"
-                                                      clearable>
-                                                  <option
-                                                          v-for="item in idcUserData"
-                                                          :key="item.key"
-                                                          :label="item.username"
-                                                          :value="item.userId"
-                                                  >
-                                                  </option>
-                                              </select>
-                                          </div>
-                                          <div style="padding-top: 40px">
-                                              <label style="font-size: 12px">Tel</label>
-                                              <input class='sidebar-pop-input' v-model="addIdcData.tel"/>
-                                          </div>
-                                      </div>
-                                  </div>
-                              </div>
-                              <div class="right-box-bottom-btns">
-                                  <div class="right-box-bottom-btn right-box-bottom-btn-cancel"
-                                       @click.stop="item[item.name]= false">
-                                      {{$t('overall.cancel')}}
-                                  </div>
-                                  <div class="right-box-bottom-btn right-box-bottom-btn-50"
-                                       @click="editData('idc',item.id)">
-                                      {{$t('overall.save')}}
-                                  </div>
-                              </div>
-                              <div @click.stop="getIDCOptionData(item.id)" slot="reference" class="menu-edit">
-                                  <i class="el-icon-edit-outline"></i>
-                              </div>
-                          </el-popover>
                       </div>
-                  </el-menu-item>
+                    </div>
-              </template>
+                    <div class="pop-window">
-          </el-submenu>
+                      <span style="display: block;padding-bottom: 20px">标题</span>
+                      <div style="padding-top: 10px;padding-left: 20px">
+                        <div>
+                          <label style="font-size: 12px">DN name</label>
+                          <input class='sidebar-pop-input' v-model="addIdcData.name"/>
+                        </div>
+                        <div style="padding-top: 40px">
+                          <label style="font-size: 12px">Loaction</label>
+                          <input class='sidebar-pop-input' v-model="addIdcData.location"/>
+                        </div>
+                        <div style="padding-top: 40px">
+                          <label style="font-size: 12px;padding-right: 20px">负责人</label>
+                          <select class='sidebar-pop-input-select'
+                                  style="margin-left:-40px "
+                                  v-model="addIdcData.principal"
+                                  clearable>
+                            <option
+                              v-for="item in idcUserData"
+                              :key="item.key"
+                              :label="item.username"
+                              :value="item.userId"
+                            >
+                            </option>
+                          </select>
+                        </div>
+                        <div style="padding-top: 40px">
+                          <label style="font-size: 12px">Tel</label>
+                          <input class='sidebar-pop-input' v-model="addIdcData.tel"/>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="right-box-bottom-btns">
+                    <div class="right-box-bottom-btn right-box-bottom-btn-cancel"
+                         @click.stop="item[item.name]= false">
+                      {{$t('overall.cancel')}}
+                    </div>
+                    <div class="right-box-bottom-btn right-box-bottom-btn-50"
+                         @click="editData('idc',item.id)">
+                      {{$t('overall.save')}}
+                    </div>
+                  </div>
+                  <div @click.stop="getIDCOptionData(item.id)" slot="reference" class="menu-edit">
+                    <i style="color: inherit" class="el-icon-edit-outline"></i>
+                  </div>
+                </el-popover>
+              </div>
+            </el-menu-item>
+          </template>
+        </el-submenu>
         <el-submenu index="4-0" popper-class="nz-submenu">
           <template slot="title">
             <div @click="jumpTo('alertList')">{{$t('overall.alert')}}</div>
@@ -206,7 +207,8 @@
 
     <project-box :project="editProject" @reload="projectReload" ref="projectBox"></project-box>
     <module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
-    <add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload="" ref="addEndpointBox"></add-endpoint-box>
+    <add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload=""
+                      ref="addEndpointBox"></add-endpoint-box>
     <alert-config-box :parentAlertRule="alertRule" @reload="" ref="alertConfigBox"></alert-config-box>
   </div>
 </template>
@@ -303,7 +305,15 @@
           this.editProject = {id: '', name: '', remark: ''};
         } else if (item.type == 2) {
           this.$refs.moduleBox.show(true);
-          this.editModule = {id: '', name: '', project: this.$store.state.currentProject, port: '', path: '', param: '', paramObj: []};
+          this.editModule = {
+            id: '',
+            name: '',
+            project: this.$store.state.currentProject,
+            port: '',
+            path: '',
+            param: '',
+            paramObj: []
+          };
         } else if (item.type == 3) {
           this.$refs.addEndpointBox.show(true);
           this.$refs.addEndpointBox.clearEndpoints();
@@ -359,7 +369,7 @@
               duration: 2000
             })
             this.$store.state.flushDataSign = true
-          }else{
+          } else {
             this.$notify({
               message: h('i', {style: 'color: teal'}, res.msg),
               duration: 2000
@@ -446,7 +456,7 @@
       }
     },
     watch: {
-      getIdcData:{
+      getIdcData: {
         handler(newVal, oldVal) {
           this.getAssetData()
         },
@@ -463,48 +473,60 @@
 </script>
 
 <style>
-  .el-menu.el-menu--horizontal{
+  .el-menu.el-menu--horizontal {
     border-bottom: 0px;
   }
+
   .el-submenu__title .el-submenu__icon-arrow {
     display: none;
   }
-  .el-menu--horizontal>.el-menu-item.is-active{
+
+  .el-menu--horizontal > .el-menu-item.is-active {
     border-bottom: 0px;
   }
-  .el-menu--horizontal>.el-submenu.is-active .el-submenu__title,
+
-  .el-menu--horizontal>.el-menu-item.is-active,
+  .el-menu--horizontal > .el-submenu.is-active .el-submenu__title,
+  .el-menu--horizontal > .el-menu-item.is-active,
   .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
     border-bottom: 0px;
     color: white;
   }
+
   .el-menu--horizontal.nz-submenu {
     border: 1px solid #bbbbbb;
     border-top: none;
   }
+
   .nz-submenu .el-menu--popup {
     background-color: white !important;
   }
+
   .nz-submenu .el-menu--popup .el-menu-item {
     background-color: white !important;
   }
+
   .nz-submenu .el-menu--popup-bottom-start {
     margin-top: 0;
   }
+
   .nz-submenu.el-menu--horizontal .el-menu .el-menu-item {
     padding: 0 20px;
     color: #444444 !important;
     transition: none;
   }
+
   .nz-submenu.el-menu--horizontal .el-menu .el-menu-item:hover {
     color: #ff9900 !important;
   }
+
   .el-submenu__title .el-icon-plus {
     color: white;
   }
-  .el-menu-item>div, .el-menu-item>div>div {
+
+  .el-menu-item > div, .el-menu-item > div > div {
     font-size: 15px;
   }
+
   .nz-menu-line {
     cursor: default;
     display: flex;
@@ -594,93 +616,98 @@
     opacity: .8;
   }
 
-  .nz-menu>li:first-of-type {
+  .nz-menu > li:first-of-type {
     position: fixed;
     left: 40%;
     top: 0;
   }
+
   .menu-create {
     line-height: 15px;
     text-align: center;
     padding-top: 15px;
   }
+
   .menu-create .el-icon-plus {
     font-size: 12px;
     line-height: 12px;
   }
+
   .menu-edit {
     line-height: 36px;
     float: right;
   }
+
   .pop-window-assetType-content {
-      padding: 1px 15px 15px 20px;
+    padding: 1px 15px 15px 20px;
   }
 
   .pop-window {
-      height: 370px;
+    height: 370px;
-      width: 400px;
+    width: 400px;
   }
+
   .sidebar-pop-input {
-      position: absolute;
+    position: absolute;
-      right: 50px;
+    right: 50px;
-      width: 200px;
+    width: 200px;
-      height: 26px;
+    height: 26px;
-      border-radius: 4px;
+    border-radius: 4px;
-      border: 1px solid #DCDFE6;
+    border: 1px solid #DCDFE6;
-      color: #606266;
+    color: #606266;
-      display: inline-block;
+    display: inline-block;
-      padding: 0px 15px;
+    padding: 0px 15px;
   }
 
   .sidebar-pop-input-select {
-      position: absolute;
+    position: absolute;
-      right: 83px;
+    right: 83px;
-      width: 200px;
+    width: 200px;
-      height: 26px;
+    height: 26px;
-      border-radius: 4px;
+    border-radius: 4px;
-      border: 1px solid #DCDFE6;
+    border: 1px solid #DCDFE6;
-      color: #606266;
+    color: #606266;
-      display: inline-block;
+    display: inline-block;
-      padding: 0px 15px;
+    padding: 0px 15px;
   }
 
   .right-box-top-btn {
-      border-radius: 0 0 9px 9px;
+    border-radius: 0 0 9px 9px;
-      float: right;
+    float: right;
-      color: #656565;
+    color: #656565;
-      height: 30px;
+    height: 30px;
-      font-size: 12px;
+    font-size: 12px;
-      padding: 3px 8px 1px 8px;
+    padding: 3px 8px 1px 8px;
-      border: 1px solid #aaaaaa;
+    border: 1px solid #aaaaaa;
-      border-top: none;
+    border-top: none;
-      cursor: pointer;
+    cursor: pointer;
-      margin-left: 20px;
+    margin-left: 20px;
   }
 
   .right-box-bottom-btns {
-      position: absolute;
+    position: absolute;
-      bottom: 0px;
+    bottom: 0px;
-      width: 100%;
+    width: 100%;
-      text-align: center;
+    text-align: center;
   }
 
   .right-box-bottom-btn-cancel {
-      background-color: #DADADA;
+    background-color: #DADADA;
-      color: #656565;
+    color: #656565;
-      width: 50%;
+    width: 50%;
-      border-bottom-left-radius: 8px;
+    border-bottom-left-radius: 8px;
   }
 
   .right-box-top-btn-full {
-      background-color: #656565;
+    background-color: #656565;
-      border: 1px solid #656565;
+    border: 1px solid #656565;
-      border-top: none;
+    border-top: none;
-      color: white;
+    color: white;
   }
 
   .right-box-bottom-btn-50 {
-      width: 50%;
+    width: 50%;
-      float: right;
+    float: right;
-      border-bottom-right-radius: 8px;
+    border-bottom-right-radius: 8px;
   }
 </style>

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

@@ -38,7 +38,15 @@ const en = {
       title:'MetricPreview',
     }
   },
+  validate: { //校验规则
+    required: 'Required',
+    number: 'Must be a number',
+    config: {
+      account: {
 
+      }
+    }
+  },
   search: {
     searchTip: 'Press Enter or click to search',
     recentSearch: 'Recent Searches',
@@ -257,7 +265,7 @@ const en = {
     severity: "Severity",
     description: "Desc",
     summary: "Summary",
-    startAt: "Time",
+    startAt: "Start Time",
     endAt: "End Time",
     list: {
       //表头

nezha-fronted/src/components/common/rightBox/editEndpointBox.vue

@@ -3,31 +3,18 @@
     <div class="right-box right-box-edit-endpoint" v-if="rightBox.show">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
-        <div class="right-box-top-btn right-box-top-btn-full" @click="esc">
+        <button type="button" v-if="rightBox.isEdit && endpoint.id != ''" @click="del" class="nz-btn nz-btn-size-normal nz-btn-style-light">
-          <div class="right-box-btn-icon">
+          <span class="top-tool-btn-txt">{{$t('overall.delete')}}</span>
-            <i class="el-icon-close"></i>
+        </button>
-          </div>
+        <button v-if="!rightBox.isEdit" type="button" @click="toEdit(true)" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
-          <span>{{$t('overall.esc')}}</span>
+          <span class="top-tool-btn-txt">{{$t('overall.edit')}}</span>
-        </div>
+        </button>
-        <div v-if="!rightBox.isEdit" class="right-box-top-btn right-box-top-btn-full" @click="toEdit(true)">
+        <button v-if="rightBox.isEdit" type="button" @click="save" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
-          <div class="right-box-btn-icon">
+          <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
-            <i class="el-icon-edit-outline"></i>
+        </button>
-          </div>
+        <button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
-          <span>{{$t('overall.edit')}}</span>
+          <span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
-        </div>
+        </button>
-        <div v-if="rightBox.isEdit" class="right-box-top-btn right-box-top-btn-full" @click="save">
-          <div class="right-box-btn-icon">
-            <i class="el-icon-edit-outline"></i>
-          </div>
-          <span v-if="rightBox.isEdit">{{$t('overall.save')}}</span>
-          <span v-else>{{$t('overall.edit')}}</span>
-        </div>
-        <div class="right-box-top-btn" v-if="rightBox.isEdit && endpoint.id != ''" @click="del">
-          <div class="right-box-btn-icon">
-            <i class="el-icon-delete"></i>
-          </div>
-          <span>{{$t('overall.delete')}}</span>
-        </div>
       </div>
       <!-- end--顶部按钮-->
 
@@ -36,6 +23,10 @@
       <!-- end--标题-->
 
       <!-- begin--表单-->
+      <!--<el-scrollbar class="right-box-form-box">
+        <el-form class="right-box-form" :model="module" label-position="top" :rules="rules" ref="moduleForm">
+        </el-form>
+      </el-scrollbar>-->
       <div class="right-box-form">
         <!--project-->
         <div class="right-box-form-row">
@@ -124,12 +115,6 @@
       </div>
       <!-- end--表单-->
 
-      <!-- begin--底部按钮-->
-      <div class="right-box-bottom-btns">
-        <div @click="esc" :class="{'right-box-bottom-btn-50': rightBox.isEdit}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div @click="save" v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{$t('overall.save')}}</div>
-      </div>
-      <!-- end--底部按钮-->
-
       <!-- begin--子弹框-->
       <transition name="right-sub-box">
         <div class="right-sub-box" @click.stop v-if="subBox.show">

nezha-fronted/src/components/common/rightBox/moduleBox.vue

@@ -3,11 +3,21 @@
     <div class="right-box right-box-module" v-if="rightBox.show">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
-        <div class="right-box-top-btn right-box-top-btn-full" @click="esc">
+        <button type="button" v-if="module.id != ''" @click="del" class="nz-btn nz-btn-size-normal nz-btn-style-light">
+          <span class="top-tool-btn-txt">{{$t('overall.delete')}}</span>
+        </button>
+        <button type="button" @click="save" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
+          <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
+        </button>
+
+        <button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
+          <span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
+        </button>
+        <!--<div class="right-box-top-btn" v-if="module.id != ''" @click="del">
           <div class="right-box-btn-icon">
-            <i class="el-icon-close"></i>
+            <i class="el-icon-delete"></i>
           </div>
-          <span>{{$t('overall.esc')}}</span>
+          <span>{{$t('overall.delete')}}</span>
         </div>
         <div class="right-box-top-btn right-box-top-btn-full" @click="save">
           <div class="right-box-btn-icon">
@@ -15,12 +25,12 @@
           </div>
           <span>{{$t('overall.save')}}</span>
         </div>
-        <div class="right-box-top-btn" v-if="module.id != ''" @click="del">
+        <div class="right-box-top-btn right-box-top-btn-full" @click="esc">
           <div class="right-box-btn-icon">
-            <i class="el-icon-delete"></i>
+            <i class="el-icon-close"></i>
           </div>
-          <span>{{$t('overall.delete')}}</span>
+          <span>{{$t('overall.esc')}}</span>
-        </div>
+        </div>-->
       </div>
       <!-- end--顶部按钮-->
 
@@ -29,78 +39,131 @@
       <!-- end--标题-->
 
       <!-- begin--表单-->
-      <div class="right-box-form">
+      <el-scrollbar class="right-box-form-box">
-        <!--project-->
+        <el-form class="right-box-form" :model="module" label-position="top" :rules="rules" ref="moduleForm">
-        <div class="right-box-form-row">
+          <el-form-item :label='$t("project.project.project")' prop="project">
-          <div class="right-box-form-label">{{$t("project.project.project")}}</div>
-          <div class="right-box-form-content">
             <el-select value-key="id" popper-class="config-dropdown" v-model="module.project" placeholder="" size="small">
               <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
             </el-select>
-          </div>
+          </el-form-item>
-        </div>
+          <el-form-item :label='$t("project.module.moduleName")' prop="name">
-        <!--name-->
-        <div class="right-box-form-row">
-          <div class="right-box-form-label">{{$t("project.module.moduleName")}}</div>
-          <div class="right-box-form-content">
             <el-input placeholder="" maxlength="64" show-word-limit v-model="module.name" size="small"></el-input>
-          </div>
+          </el-form-item>
-        </div>
+          <el-form-item :label='$t("project.module.description")' prop="remark">
-        <!--description-->
-        <div class="right-box-form-row">
-          <div class="right-box-form-label">{{$t("project.module.description")}}</div>
-          <div class="right-box-form-content">
             <el-input type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="module.remark" size="small"></el-input>
+          </el-form-item>
+          <div class="right-box-form-tip">
+            {{$t('project.module.tip.defaultEndpointSet')}}
+            <div class="line-100"></div>
+            {{$t('project.module.tip.relation')}}
           </div>
-        </div>
+          <el-form-item :label='$t("project.endpoint.port")' prop="port">
-        <!--tip-->
+            <el-input placeholder="" v-model.number="module.port" size="small"></el-input>
-        <div class="right-box-form-row">
+          </el-form-item>
-          <div class="right-box-form-content">
+          <el-form-item :label='$t("project.endpoint.path")' prop="path">
-            <div class="right-box-form-tip">
-              {{$t('project.module.tip.defaultEndpointSet')}}
-              <div class="line-100"></div>
-              {{$t('project.module.tip.relation')}}
-            </div>
-          </div>
-        </div>
-        <!--port-->
-        <div class="right-box-form-row">
-          <div class="right-box-form-label">{{$t("project.endpoint.port")}}</div>
-          <div class="right-box-form-content">
-            <el-input placeholder="" v-model="module.port" size="small"></el-input>
-          </div>
-        </div>
-        <!--path-->
-        <div class="right-box-form-row">
-          <div class="right-box-form-label">{{$t("project.endpoint.path")}}</div>
-          <div class="right-box-form-content">
             <el-input placeholder="" v-model="module.path" size="small"></el-input>
-          </div>
+          </el-form-item>
-        </div>
+          <el-form-item class="right-box-form-param">
-        <!--param-->
+            <template slot="label">
-        <div class="right-box-form-row">
+              <span>Label</span>
-          <div class="right-box-form-label">
+              <div class="right-box-form-btns">
-            {{$t("project.endpoint.param")}}
+                <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
-            <el-button class="param-btn param-btn-active margin-l-10" size="mini" @click="addParam"><i class="el-icon-plus"></i>{{$t('overall.add')}}</el-button>
+                <button type="button" @click="clearAllParam" class="nz-btn nz-btn-size-small nz-btn-style-light">
-            <el-button class="param-btn param-btn-clear" size="mini" @click="clearAllParam">{{$t('overall.clearAll')}}</el-button>
+                  <span class="top-tool-btn-txt">{{$t('overall.clearAll')}}</span>
-          </div>
+                </button>
-          <div class="right-box-form-content">
+                <button type="button" @click="addParam" class="nz-btn nz-btn-size-small nz-btn-style-normal">
+                  <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
+                </button>
+              </div>
+            </template>
             <div class="param-box param-box-module">
               <div class="param-box-row" v-for="(item, index) in module.paramObj">
-                <el-input placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
+                <el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
+                  <el-input placeholder="key" size="mini" v-model="item.key"></el-input>
+                </el-form-item>
                 <span class="param-box-row-eq">=</span>
-                <el-input placeholder="value" class="param-box-row-value" size="mini" v-model="item.value"></el-input>
+                <el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.value'">
-                <span class="param-box-row-symbol" @click="removeParam(index)"><i class="el-icon-minus"></i></span>
+                  <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
+                </el-form-item>
+                <span class="param-box-row-symbol" @click="removeParam(index)"><i class="nz-icon nz-icon-minus-square"></i></span>
               </div>
             </div>
+          </el-form-item>
+
+        </el-form>
+      </el-scrollbar>
+      <!--<div class='right-box-form'>
+      &lt;!&ndash;project&ndash;&gt;
+      <div class="right-box-form-row">
+        <div class="right-box-form-label">{{$t("project.project.project")}}</div>
+        <div class="right-box-form-content">
+          <el-select value-key="id" popper-class="config-dropdown" v-model="module.project" placeholder="" size="small">
+            <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
+          </el-select>
+        </div>
+      </div>
+      &lt;!&ndash;name&ndash;&gt;
+      <div class="right-box-form-row">
+        <div class="right-box-form-label">{{$t("project.module.moduleName")}}</div>
+        <div class="right-box-form-content">
+          <el-input placeholder="" maxlength="64" show-word-limit v-model="module.name" size="small"></el-input>
+        </div>
+      </div>
+      &lt;!&ndash;description&ndash;&gt;
+      <div class="right-box-form-row">
+        <div class="right-box-form-label">{{$t("project.module.description")}}</div>
+        <div class="right-box-form-content">
+          <el-input type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="module.remark" size="small"></el-input>
+        </div>
+      </div>
+      &lt;!&ndash;tip&ndash;&gt;
+      <div class="right-box-form-row">
+        <div class="right-box-form-content">
+          <div class="right-box-form-tip">
+            {{$t('project.module.tip.defaultEndpointSet')}}
+            <div class="line-100"></div>
+            {{$t('project.module.tip.relation')}}
+          </div>
+        </div>
+      </div>
+      &lt;!&ndash;port&ndash;&gt;
+      <div class="right-box-form-row">
+        <div class="right-box-form-label">{{$t("project.endpoint.port")}}</div>
+        <div class="right-box-form-content">
+          <el-input placeholder="" v-model="module.port" size="small"></el-input>
+        </div>
+      </div>
+      &lt;!&ndash;path&ndash;&gt;
+      <div class="right-box-form-row">
+        <div class="right-box-form-label">{{$t("project.endpoint.path")}}</div>
+        <div class="right-box-form-content">
+          <el-input placeholder="" v-model="module.path" size="small"></el-input>
+        </div>
+      </div>
+      &lt;!&ndash;param&ndash;&gt;
+      <div class="right-box-form-row">
+        <div class="right-box-form-label">
+          {{$t("project.endpoint.param")}}
+          <el-button class="param-btn param-btn-active margin-l-10" size="mini" @click="addParam"><i class="el-icon-plus"></i>{{$t('overall.add')}}</el-button>
+          <el-button class="param-btn param-btn-clear" size="mini" @click="clearAllParam">{{$t('overall.clearAll')}}</el-button>
+        </div>
+        <div class="right-box-form-content">
+          <div class="param-box param-box-module">
+            <div class="param-box-row" v-for="(item, index) in module.paramObj">
+              <el-input placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
+              <span class="param-box-row-eq">=</span>
+              <el-input placeholder="value" class="param-box-row-value" size="mini" v-model="item.value"></el-input>
+              <span class="param-box-row-symbol" @click="removeParam(index)"><i class="el-icon-minus"></i></span>
+            </div>
           </div>
         </div>
       </div>
+    </div>-->
 
       <!-- begin--底部按钮-->
-      <div class="right-box-bottom-btns">
+      <!--<div class="right-box-bottom-btns">
         <div @click="esc" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="save" class="right-box-bottom-btn right-box-bottom-btn-50">{{module.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
-      </div>
+      </div>-->
       <!-- end--底部按钮-->
     </div>
   </transition>
@@ -119,6 +182,17 @@
           show: false,
           title: ''
         },
+        rules: {
+          name: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+          project: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+          port: [
+            {type: 'number', message: this.$t('validate.number'), trigger: 'blur'}
+          ],
+        },
         projectList: [],
       }
     },
@@ -135,28 +209,35 @@
       /*保存*/
       save() {
         this.module.param = this.paramToJson(this.module.paramObj);
-        if (this.module.id) {
+        this.$refs.moduleForm.validate((valid) => {
-          this.$put('module', this.module).then(response => {
+          if (valid) {
-            if (response.code === 200) {
+            if (this.module.id) {
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+              this.$put('module', this.module).then(response => {
-              this.$emit("reload");
+                if (response.code === 200) {
-              this.rightBox.show = false;
+                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                  this.$emit("reload");
+                  this.rightBox.show = false;
+                } else {
+                  this.$message.error(response.msg);
+                }
+              });
             } else {
-              this.$message.error(response.msg);
+              this.module.projectId = this.module.project.id;
+              this.$post('module', this.module).then(response => {
+                if (response.code === 200) {
+                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                  this.$emit("reload");
+                  this.rightBox.show = false;
+                } else {
+                  this.$message.error(response.msg);
+                }
+              });
             }
-          });
+          } else {
-        } else {
+            console.log('error submit!!');
-          this.module.projectId = this.module.project.id;
+            return false;
-          this.$post('module', this.module).then(response => {
+          }
-            if (response.code === 200) {
+        });
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-              this.$emit("reload");
-              this.rightBox.show = false;
-            } else {
-              this.$message.error(response.msg);
-            }
-          });
-        }
       },
 
       /*删除*/
@@ -216,7 +297,7 @@
       paramToJson: function(param) {
         let tempParam = {};
         for (let i = 0; i < param.length; i++) {
-          eval('tempParam.' + param[i].key + '="' + param[i].value + '"');
+          eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"');
         }
         let jsonString = JSON.stringify(tempParam);
         if (jsonString == '{}') {
@@ -245,78 +326,4 @@
 </script>
 
 <style scoped>
-  /* start--param*/
-  .param-btn {
-    float: right;
-    height: 27px;
-    margin-top: -3px;
-  }
-  .param-btn-active {
-    background-color: #656565;
-    color: white;
-    border: 1px solid #656565;
-  }
-  .param-btn-active:hover, .param-btn-active:focus {
-    background-color: #656565;
-    color: white;
-  }
-  .param-btn-clear {
-    background-color: #D4D4D4;
-    border: 1px solid #D4D4D4;
-    color: white;
-  }
-  .param-btn-clear:hover, .param-btn-clear:focus {
-    background-color: #D4D4D4;
-    color: white;
-  }
-
-  .param-box {
-    border: 1px solid #DCDFE6;
-    border-radius: 4px;
-    padding: 0 10px;
-  }
-  .param-box-endpoint {
-    height: 325px;
-  }
-  .param-box-module {
-    height: 227px;
-  }
-  .param-box-row {
-    padding: 7px 0 0 0;
-    position: relative;
-  }
-  .param-box-row:last-of-type {
-    padding-bottom: 7px;
-  }
-  .param-box-row-key, .param-box-row-value {
-    display: inline-block;
-    width: 41.5%;
-  }
-  .param-box-row-eq {
-    display: inline-block;
-    width: 22px;
-    text-align: center;
-    height: 32px;
-    line-height: 32px;
-    color: #c4c7cF;
-  }
-  .param-box-row-symbol {
-    font-size: 12px;
-    color: #c4c7cF;
-    border: 1px solid #c4c7cF;
-    text-align: center;
-    height: 12px;
-    width: 14px;
-    display: inline-block;
-    position: absolute;
-    top: 17px;
-    right: 25px;
-    cursor: pointer;
-  }
-  .param-box-row-symbol>i {
-    position: absolute;
-    top: 1px;
-    right: 1px;
-  }
-  /* end--param*/
 </style>

nezha-fronted/src/components/common/rightBox/projectBox.vue

@@ -3,39 +3,31 @@
     <div class="right-box right-box-project" v-if="rightBox.show">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
-        <div class="right-box-top-btn right-box-top-btn-full" @click="esc">
+        <button type="button" v-if="project.id != ''" @click="del" class="nz-btn nz-btn-size-normal nz-btn-style-light">
-          <div class="right-box-btn-icon">
+          <span class="top-tool-btn-txt">{{$t('overall.delete')}}</span>
-            <i class="el-icon-close"></i>
+        </button>
-          </div>
+        <button type="button" @click="save" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
-          <span>{{$t('overall.esc')}}</span>
+          <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
-        </div>
+        </button>
-        <div class="right-box-top-btn right-box-top-btn-full" @click="save">
+        <button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
-          <div class="right-box-btn-icon">
+          <span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
-            <i class="el-icon-edit-outline"></i>
+        </button>
-          </div>
-          <span>{{$t('overall.save')}}</span>
-        </div>
-        <div class="right-box-top-btn" v-if="project.id != ''" @click="del">
-          <div class="right-box-btn-icon">
-            <i class="el-icon-delete"></i>
-          </div>
-          <span>{{$t('overall.delete')}}</span>
-        </div>
       </div>
       <!-- end--顶部按钮-->
 
       <!-- begin--标题-->
       <div class="right-box-title">{{rightBox.title}}</div>
       <!-- end--标题-->
-
+      <el-scrollbar class="right-box-form-box">
-      <el-form :model="project" label-position="top" class="right-box-form">
+        <el-form class="right-box-form" :model="project" label-position="top" :rules="rules" ref="projectForm">
-        <el-form-item :label='$t("project.project.projectName")' prop="name">
+          <el-form-item :label='$t("project.project.projectName")' prop="name">
-          <el-input maxlength="64" show-word-limit v-model="project.name"></el-input>
+            <el-input size="mini" maxlength="64" show-word-limit v-model="project.name"></el-input>
-        </el-form-item>
+          </el-form-item>
-        <el-form-item :label='$t("project.project.description")' prop="remark">
+          <el-form-item :label='$t("project.project.description")'>
-          <el-input type="textarea" maxlength="1024" show-word-limit v-model="project.remark"></el-input>
+            <el-input size="mini" type="textarea" maxlength="1024" show-word-limit v-model="project.remark"></el-input>
-        </el-form-item>
+          </el-form-item>
-      </el-form>
+        </el-form>
+      </el-scrollbar>
 
       <!--&lt;!&ndash; begin&#45;&#45;表单&ndash;&gt;
       <div class="right-box-form">
@@ -75,6 +67,11 @@
           show: false,
           title: '',
           isCreate: false
+        },
+        rules: {
+          name: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ]
         }
       }
     },
@@ -90,27 +87,34 @@
 
       /*保存*/
       save() {
-        if (this.project.id) {
+        this.$refs['projectForm'].validate((valid) => {
-          this.$put('project', this.project).then(response => {
+          if (valid) {
-            if (response.code === 200) {
+            if (this.project.id) {
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+              this.$put('project', this.project).then(response => {
-              this.$emit("reload");
+                if (response.code === 200) {
-              this.rightBox.show = false;
+                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                  this.$emit("reload");
+                  this.rightBox.show = false;
+                } else {
+                  this.$message.error(response.msg);
+                }
+              });
             } else {
-              this.$message.error(response.msg);
+              this.$post('project', this.project).then(response => {
+                if (response.code === 200) {
+                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                  this.$emit("reload");
+                  this.rightBox.show = false;
+                } else {
+                  this.$message.error(response.msg);
+                }
+              });
             }
-          });
+          } else {
-        } else {
+            console.log('error submit!!');
-          this.$post('project', this.project).then(response => {
+            return false;
-            if (response.code === 200) {
+          }
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+        });
-              this.$emit("reload");
-              this.rightBox.show = false;
-            } else {
-              this.$message.error(response.msg);
-            }
-          });
-        }
       },
 
       /*删除*/

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

@@ -152,8 +152,8 @@
                 no_condition: '',
                 //历史记录列表
                 history_once: [],
-                profileName:"",
+                name:"",
-                profileId:"",
+                id:"",
                 schedata:{
                     name:'',
                     isValid:1,
@@ -219,6 +219,9 @@
                         this.input_list = !this.input_list
                 },*/
               //dc
+              clearSearch() {
+                this.select_list = [];
+              },
               selectObject(column, selectItem, e) {
                 this.stop_click(e);
                 this.select_list.forEach(val=>{
@@ -371,7 +374,7 @@
             select() {
                 let objectInfo = {};
                 this.change_sreach_show = true;
-                this.profileName = '', this.profileId = '';
+                this.name = '', this.id = '';
                 if (this.input_sreach != '') {
                   this.select_list[this.sreach_num].val = this.input_sreach;
                     this.input_sreach = '';
@@ -389,10 +392,10 @@
                       }else if(route=='/system_PolicyConfigurationLog' || route=='/system_LoginLog'){
                         no_condition_str='modifyBy';
                       }else {
-                        no_condition_str='profileName';
+                        no_condition_str='name';
                       }
-                      if(no_condition_str=='profileName'){
+                      if(no_condition_str=='name'){
-                        this.select_list.push({name: this.select_title.name, id:2, type:'input',val:this.no_condition,label:'profileName'});
+                        this.select_list.push({name: this.select_title.name, id:2, type:'input',val:this.no_condition,label:'name'});
                         this.searchLabelList.forEach((val,ind)=>{
                           if(val.id == 2){
                             this.searchLabelList.splice(ind,1);
@@ -412,8 +415,8 @@
                             this.searchLabelList.splice(ind,1);
                           }
                         })
-                      }else if(no_condition_str=='profileId'){
+                      }else if(no_condition_str=='id'){
-                        this.select_list.push({name: this.select_title.Policy_ID, id:1, type:'input',val:this.no_condition,label:'profileId'});
+                        this.select_list.push({name: this.select_title.Policy_ID, id:1, type:'input',val:this.no_condition,label:'id'});
                         this.searchLabelList.forEach((val,ind)=>{
                           if(val.id == 1){
                             this.searchLabelList.splice(ind,1);
@@ -431,13 +434,13 @@
                     }else {
                       let no_condition_bool = false,no_condition_str = '',route = this.$route.path,bool = true;
                       if(route == '/Log_SesssionRecords'||route == '/Log_EventLogs'){
-                        no_condition_str = 'profileId';
+                        no_condition_str = 'id';
                       }else if(route == '/Device_DeviceList'){
                         no_condition_str = 'sn';
                       }else if(route=='/system_PolicyConfigurationLog' || route=='/system_UserManagement' || route=='/system_LoginLog'){
                         no_condition_str='modifyBy';
                       }else {
-                        no_condition_str='profileName';
+                        no_condition_str='name';
                       }
                         this.select_list.forEach(val => {
                             if(val.label==no_condition_str){
@@ -823,7 +826,7 @@
                     if (this.no_condition != '') {
                       this.change_sreach_show = true
                       if(this.select_list.length==0){
-                        this.select_list.push({name: 'Name', id:2, type:'input',val:this.no_condition,label:'profileName'})
+                        this.select_list.push({name: 'Name', id:2, type:'input',val:this.no_condition,label:'name'})
                         this.searchLabelList.forEach((val,ind)=>{
                           if(val.id == 2){
                             this.searchLabelList.splice(ind,1)
@@ -839,7 +842,7 @@
                           }
                         })
                         if(bool){
-                          this.select_list.push({name: 'Name', id:2, type:'input',val:this.no_condition,label:'profileName'})
+                          this.select_list.push({name: 'Name', id:2, type:'input',val:this.no_condition,label:'name'})
                           this.searchLabelList.forEach((val,ind)=>{
                             if(val.id == 2){
                               this.searchLabelList.splice(ind,1)

nezha-fronted/src/components/page/alert/list.vue

@@ -230,10 +230,6 @@ export default {
           label: this.$t("alert.alertName"),
           prop: 'alertName',
           show: true
-        }, {
-          label: this.$t("alert.startAt"),
-          prop: 'startAt',
-          show: true,
         }, {
           label: this.$t("alert.list.type"),
           prop: 'type',
@@ -258,6 +254,10 @@ export default {
           label: this.$t('alert.list.state'),
           prop: 'state',
           show: true,
+        }, {
+          label: this.$t("alert.startAt"),
+          prop: 'startAt',
+          show: true,
         }, {
           label: this.$t('alert.endAt'),
           prop: 'endAt',

nezha-fronted/src/components/page/asset/asset.vue

@@ -562,47 +562,7 @@ export default {
   }
 }
 </script>
-<style>
 
-.el-popover {
-    padding: 0;
-    border-radius: 10px;
-}
-
-.el-form-style .el-form-item {
-    margin-bottom: 0;
-}
-
-.el-form-style .el-form-item .el-form-item__content {
-    height: 25px;
-    font-size: 10px;
-}
-
-.el-checkbox.is-bordered + .el-checkbox.is-bordered {
-    margin-left: 0;
-    margin-top: 20px;
-}
-
-.el-divider--horizontal {
-    margin: 15px;
-}
-
-.el-checkbox-group {
-    padding-top: 10px;
-}
-
-.el-checkbox {
-    width: 270px;
-}
-
-.select-style .el-select .el-input .el-input__inner {
-    width: 400px
-}
-
-.el-scrollbar .el-input {
-    width: 200px
-}
-</style>
 <style scoped>
 .sidebar-pop-input {
     position: absolute;

nezha-fronted/src/components/page/asset/assetAddUnit.vue

@@ -1443,46 +1443,6 @@ export default {
 }
 </script>
 
-<style>
-.el-popover {
-    padding: 0px;
-    border-radius: 10px;
-}
-
-.el-form-style .el-form-item {
-    margin-bottom: 0px;
-}
-
-.el-form-style .el-form-item .el-form-item__content {
-    height: 25px;
-    font-size: 10px;
-}
-
-.el-checkbox.is-bordered + .el-checkbox.is-bordered {
-    margin-left: 0px;
-    margin-top: 20px;
-}
-
-.el-divider--horizontal {
-    margin: 15px;
-}
-
-.el-checkbox-group {
-    padding-top: 10px;
-}
-
-.el-checkbox {
-    width: 270px;
-}
-
-.select-style .el-select .el-input .el-input__inner {
-    width: 400px
-}
-
-.el-scrollbar .el-input {
-    width: 200px
-}
-</style>
 <style scoped>
 .sidebar-pop-input {
     position: absolute;

nezha-fronted/src/components/page/asset/assetEditUnit.vue

@@ -1500,46 +1500,6 @@ export default {
 }
 </script>
 
-<style>
-.el-popover {
-    padding: 0px;
-    border-radius: 10px;
-}
-
-.el-form-style .el-form-item {
-    margin-bottom: 0px;
-}
-
-.el-form-style .el-form-item .el-form-item__content {
-    height: 25px;
-    font-size: 10px;
-}
-
-.el-checkbox.is-bordered + .el-checkbox.is-bordered {
-    margin-left: 0px;
-    margin-top: 20px;
-}
-
-.el-divider--horizontal {
-    margin: 15px;
-}
-
-.el-checkbox-group {
-    padding-top: 10px;
-}
-
-.el-checkbox {
-    width: 270px;
-}
-
-.select-style .el-select .el-input .el-input__inner {
-    width: 400px
-}
-
-.el-scrollbar .el-input {
-    width: 200px
-}
-</style>
 <style scoped>
 
 .el-form-style {

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

@@ -43,13 +43,13 @@
         <div class="content-left">
             <div class="sidebar-title">Config</div>
             <div class="sidebar-info">
-                <div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">Account List</div>
+                <div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('config.account.account')}}</div>
-                <div class="sidebar-info-item" @click="jumpTo('promServer')">Prometheus Server</div>
+                <div class="sidebar-info-item" @click="jumpTo('promServer')">{{$t('config.promServer.promServerList')}}</div>
             </div>
         </div>
         <div class="content-right">
             <div class="top-tools">
-              <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
+              <button type="button" @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
                 <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
               </button>
               <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
@@ -203,14 +203,14 @@
                             </div>
                         </div>
                     </div>-->
-                    <div class="right-box-form-row">
+                  <!--<div class="right-box-form-row">
-                        <div class="right-box-form-label">{{$t('config.account.language')}}</div>
+                      <div class="right-box-form-label">{{$t('config.account.language')}}</div>
-                        <div class="right-box-form-content">
+                      <div class="right-box-form-content">
-                            <el-radio v-model="user.lang" label="en" :disabled="!rightBox.isEdit && user.lang != 'en'">English</el-radio>
+                          <el-radio v-model="user.lang" label="en" :disabled="!rightBox.isEdit && user.lang != 'en'">English</el-radio>
-                            <el-radio v-model="user.lang" label="zh" :disabled="!rightBox.isEdit && user.lang != 'zh'">中文</el-radio>
+                          <el-radio v-model="user.lang" label="zh" :disabled="!rightBox.isEdit && user.lang != 'zh'">中文</el-radio>
-                            <!--<el-radio v-model="user.lang" label="ru" disabled>русский（{{$t('config.account.notCurrentlySupport')}}）</el-radio>-->
+                          <el-radio v-model="user.lang" label="ru" disabled>русский（{{$t('config.account.notCurrentlySupport')}}）</el-radio>
                         </div>
-                    </div>
+                    </div>-->
                     <div class="right-box-form-row">
                         <div class="right-box-form-label">{{$t('config.account.enable')}}</div>
                         <div class="right-box-form-content">
@@ -276,22 +276,19 @@ export default {
           label: this.$t("config.account.account"),
           prop: 'username',
           show: true,
-          width: 240
         }, {
           label: 'E-mail',
           prop: 'email',
           show: true,
-          width: 240
+        }, /*{
-        }, {
           label: this.$t("config.account.language"),
           prop: 'lang',
           show: true,
           width: 200
-        }, {
+        },*/ {
           label: this.$t('config.account.receiver'),
           prop: 'receiver',
           show: false,
-          width: 240
         }, {
           label: this.$t('config.account.createTime'),
           prop: 'createTime',

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

@@ -65,7 +65,7 @@
         <div class="content-left">
             <div class="sidebar-title">{{$t('config.config')}}</div>
             <div class="sidebar-info">
-                <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')">{{$t('config.account.accountList')}}</div>
+                <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')">{{$t('config.account.account')}}</div>
                 <div class="sidebar-info-item sidebar-info-item-active">{{$t('config.promServer.promServerList')}}</div>
             </div>
         </div>

nezha-fronted/src/components/page/project/project.vue

@@ -63,7 +63,7 @@
         <button @click="toCreateEndpoint" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
           <span>{{$t('overall.add')}}</span>
         </button>
-        <div class="top-tool-search float-right"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch"></search-input></div>
+        <div class="top-tool-search float-right"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
       </div>
       <el-table
         :data="endpointTableData"
@@ -156,12 +156,6 @@
           total:0
         },
         metricsTableTitle: [
-          {
-            label: "ID",
-            prop: 'id',
-            show: true,
-            width: 100
-          },
           {
             label: this.$t("project.metrics.name"),
             prop: 'metric',
@@ -316,6 +310,9 @@
       //左侧module列表选中切换
       changeModule(module) {
         this.currentModule = module;
+        this.endpointSearchLabel = {moduleId: ''};
+        this.metricSearchLabel = {moduleId: ''};
+        this.$refs.projectSearch.clearSearch();
       },
 
       //弹出endpoint编辑页

nezha-fronted/src/main.js

@@ -1,4 +1,5 @@
 import "./assets/css/main.css";
+import "./assets/css/nzIcon.css";
 import 'element-ui/lib/theme-chalk/index.css';
 import ElementUI from 'element-ui';
 import 'xterm/dist/xterm.css'