perf: endpoint弹框/asset列表

1.endpoint弹框样式，包含校验
2.asset列表页（部分）

nezha-fronted/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "axios": "^0.19.0",
     "element-ui": "^2.13.0",
+    "node-sass": "^4.13.0",
     "vue": "^2.5.2",
     "vue-i18n": "^8.15.1",
     "vue-router": "^3.0.1",

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

@@ -174,21 +174,26 @@ html {
   width: 100%;
   padding-top: 10px;
 }
-.sidebar-info-item {
+.content-left .sidebar-info-item {
   line-height: 1.5rem;
   padding: 0 10px 0 10px;
   cursor: pointer;
   color: #444444;
   margin: 0 0 7px;
+  display: block;
 }
 .side-bar-menu-edit {
   line-height: 1.5rem;
   float: right;
 }
-.sidebar-info-item-active {
+.content-left .sidebar-info-item-active {
   border-left: 3px solid #e07700;
   font-weight: bold;
 }
+.content-left .el-checkbox-group .sidebar-info-item-active {
+  font-weight: bold;
+  border-left: none;
+}
 /* end--左侧列表*/
 
 /* begin--右侧内容*/
@@ -336,7 +341,7 @@ html {
 .right-box-add-endpoint .right-box-form {
   height: 100%;
 }
-.right-box-form .el-form-item {
+.right-box-form>.el-form-item {
   margin-bottom: 15px;
 }
 .right-box-form .el-select {
@@ -417,6 +422,9 @@ html {
   color: #DCDFE6;
   cursor: pointer;
 }
+.param-box .param-box-row .is-error {
+  padding-bottom: 10px;
+}
 /* end--param*/
 .right-box-form-content .el-select {
   width: 100%;

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

@@ -9,7 +9,7 @@
 
 .nz-icon {
   font-family: "nz-icon" !important;
-  font-size: 16px;
+  font-size: 14px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

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

@@ -501,6 +501,7 @@
 
   .nz-submenu .el-menu--popup-bottom-start {
     margin-top: 0;
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,.2);
   }
 
   .nz-submenu.el-menu--horizontal .el-menu .el-menu-item {

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

@@ -95,12 +95,13 @@
                 <button type="button" @click="coverEndpoint" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square module-info module-info-cover">{{$t('overall.cover')}}</button>
               </div>
               <!--endpoints-->
-              <div class="endpoints-box-endpoints">
+              <div class="endpoints-box-endpoints" :style="{borderColor: endpointTouch ? paramBorderColor : '#dcdfe6'}">
                 <el-table
                   :data="endpointList"
                   ref="endpointTable"
                   style="width: 100%;border-radius: 4px;"
                   height="calc(100% - 36px)"
+                  :row-class-name="setRowIndex"
                   empty-text=" ">
                   <el-table-column
                     type="selection"
@@ -119,6 +120,7 @@
                       <span v-if="title.prop == 'asset' && scope.row[title.prop]">{{scope.row[title.prop].host}}</span>
                       <span v-else-if="title.prop == 'param'">
                         <el-popover
+                          v-if="!scope.row.isEdit"
                           placement="bottom"
                           width="200"
                           trigger="hover"
@@ -127,10 +129,14 @@
                             <div v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}</div>
                           </div>
                           <span slot="reference">
-                            <span @mousedown.stop v-if="!scope.row.isEdit">{{scope.row.param.length > 8 ? scope.row.param.substring(0, 8) + '...' : scope.row.param}}</span>
+                            <span @mousedown.stop>{{scope.row.param.length > 8 ? scope.row.param.substring(0, 8) + '...' : scope.row.param}}</span>
-                            <span @mousedown.stop v-else @click.stop="showEditParamBox(true, scope.row, 2, $event)"><el-input disabled class="endpoint-info endpoint-info-param input-x-mini" v-model="scope.row.param"></el-input></span>
                           </span>
                         </el-popover>
+                        <span @mousedown.stop v-else @click.stop="showEditParamBox(true, scope.row, 2, $event)">
+                          <el-form-item :prop="'endpointList[' + scope.row.index + '].param'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
+                            <el-input readonly class="endpoint-info endpoint-info-param input-x-mini" v-model="scope.row.param"></el-input>
+                          </el-form-item>
+                        </span>
                       </span>
                       <span v-else-if="title.prop == 'path'">
                         <el-popover
@@ -138,33 +144,47 @@
                           width="100"
                           trigger="hover"
                           :content="scope.row[title.prop]"
+                          v-if="!scope.row.isEdit"
                         >
                           <span slot="reference">
-                          <span v-if="!scope.row.isEdit">{{scope.row.path.length > 5 ? scope.row.path.substring(0, 5) + '...' : scope.row.path}}</span>
+                            <span>{{scope.row.path.length > 5 ? scope.row.path.substring(0, 5) + '...' : scope.row.path}}</span>
-                          <span @mousedown.stop v-else><el-input class="endpoint-info input-x-mini" v-model="scope.row.path"></el-input></span>
                           </span>
                         </el-popover>
+                        <span @mousedown.stop v-else>
+                          <el-form-item :prop="'endpointList[' + scope.row.index + '].path'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
+                            <el-input class="endpoint-info input-x-mini" v-model="scope.row.path"></el-input>
+                          </el-form-item>
+                        </span>
                       </span>
                       <span v-else-if="title.prop == 'port'">
                         <span v-if="!scope.row.isEdit">{{scope.row.port}}</span>
-                      <span @mousedown.stop v-else><el-input class="endpoint-info input-x-mini" v-model="scope.row.port"></el-input></span>
+                        <span @mousedown.stop v-else>
+                          <el-form-item :prop="'endpointList[' + scope.row.index + '].port'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
+                            <el-input class="endpoint-info input-x-mini" v-model="scope.row.port"></el-input>
+                          </el-form-item>
+                        </span>
                       </span>
                       <span v-else-if="title.prop == 'host'">
                         <span v-if="!scope.row.isEdit">{{scope.row.host}}</span>
-                      <span @mousedown.stop v-else><el-input class="endpoint-info input-x-mini" v-model="scope.row.host"></el-input></span>
+                        <span @mousedown.stop v-else>
+                          <el-form-item :prop="'endpointList[' + scope.row.index + '].host'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
+                            <el-input class="endpoint-info input-x-mini" v-model="scope.row.host"></el-input>
+                          </el-form-item>
+                        </span>
                       </span>
                     </template>
                   </el-table-column>
                   <el-table-column label="" width="56">
                     <template slot-scope="scope" :column="title">
                       <div>
-                        <span v-if="!scope.row.isEdit" class="endpoint-box-row-symbol" @click="toEditEndpoint(scope.row)"><i class="el-icon-edit-outline"></i></span>
+                        <span v-if="!scope.row.isEdit" class="endpoint-box-row-symbol" @mousedown.stop @click="toEditEndpoint(scope.row)"><i class="el-icon-edit-outline"></i></span>
                         <span v-else class="endpoint-box-row-symbol" @mousedown.stop @click="editEndpoint(scope.row)"><i class="el-icon-check"></i></span>
                         <span class="endpoint-box-row-symbol" @click="removeEndpoint(scope.row)"><i class="nz-icon nz-icon-minus-square"></i></span>
                       </div>
                     </template>
                   </el-table-column>
                 </el-table>
+                <div class="el-form-item__error" :style="{opacity: endpointTouch && this.endpointList.length == 0 ? '1' : '0'}" style="left: unset; transition: all .2s">{{$t('validate.required')}}</div>
                 <div>
                   <button type="button" @click="clearSelection" class="nz-btn nz-btn-size-small nz-btn-style-light endpoints-clear-btn">{{$t('overall.clear')}}</button>
                   <span style="display: inline-block; font-size: 14px; float: right;line-height: 35px;padding-right: 15px;">All: {{this.endpointList.length}}</span>
@@ -214,10 +234,13 @@
             {required: true, message: this.$t('validate.required'), trigger: 'change'}
           ],
         },
-        endpointForm: {projectId: '', moduleId: '', endpointList:[]},
+        paramBorderColor: '#dcdfe6',
+        endpointTouch: false,
+        endpointForm: {projectId: '', moduleId: '', endpointList: []},
         currentModuleCopy: {},
         tempParamObj: [],
         tempEndpoint: {},
+        tempEndpoint2: {},
         rightBox: {show: false, title: this.$t('project.endpoint.createEndpoint'),isEdit: false},
         editParamBox: {show: false, top: 0, left: 0, type: 0}, //param编辑弹框
         moduleParamShow: false, //module默认参数param悬浮窗
@@ -247,12 +270,12 @@
           },{
             label: this.$t("project.endpoint.param"),
             prop: 'param',
-            width: 93,
+            width: 90,
             show: true,
           },{
             label: this.$t("project.endpoint.path"),
             prop: 'path',
-            width: 63,
+            width: 66,
             show: true,
           }
         ],
@@ -282,14 +305,15 @@
             this.tempParamObj = JSON.parse(JSON.stringify(obj.paramObj));
           }
         } else {
-          if (this.endpointList.length > 0) {
-            for (let i = 0; i < this.endpointList.length; i++) {
-              this.endpointList[i].isEdit = false;
-            }
-          }
           if (!this.editParamBox.show) {
             return;
           }
+          for (let i = 0; i < this.tempParamObj.length; i++) {
+            if (!this.tempParamObj[i].key || !this.tempParamObj[i].value) {
+              this.tempParamObj.splice(i, 1);
+              i--;
+            }
+          }
           if (this.editParamBox.type == 1) {
             this.currentModuleCopy.paramObj = this.tempParamObj;
             this.currentModuleCopy.param = this.paramToJson(this.tempParamObj);
@@ -311,6 +335,7 @@
       esc() {
         this.rightBox.show = false;
         this.editParamBox.show = false;
+        this.endpointTouch = false;
       },
 
       // 新增param
@@ -325,12 +350,26 @@
 
       //编辑endpoint
       toEditEndpoint(endpoint) {
-        console.info(1)
+        for (let i = 0; i < this.endpointList.length; i++) {
+          if (this.endpointList[i].isEdit) {
+            this.endpointList.splice(i, 1, JSON.parse(JSON.stringify(this.tempEndpoint2)));
+            this.endpointList[i].isEdit = false;
+            break;
+          }
+        }
         endpoint.isEdit = true;
+        this.tempEndpoint2 = JSON.parse(JSON.stringify(endpoint));
       },
       editEndpoint(endpoint) {
-        console.info(2)
+        this.$refs.addEndpointForm.validate((valid) => {
+          if (valid) {
             endpoint.isEdit = false;
+            this.tempEndpoint2 = {};
+          } else {
+            return false;
+          }
+        });
+
       },
 
       //移除endpoint
@@ -431,6 +470,9 @@
           moduleId: this.currentModuleCopy.id
         });
         this.assetList.splice(index, 1);
+        this.endpointTouch = true;
+        this.endpointForm.projectId = this.currentProject.id;
+        this.endpointForm.moduleId = this.currentModuleCopy.id;
       },
 
       //将param转为json字符串格式
@@ -471,6 +513,11 @@
       save() {
         this.endpointForm.projectId = this.currentProject.id;
         this.endpointForm.moduleId = this.currentModuleCopy.id;
+        if (this.endpointList.length == 0) {
+          this.endpointTouch = true;
+          this.$refs.addEndpointForm.validate();
+          return false;
+        }
         this.$refs.addEndpointForm.validate((valid) => {
           if (valid) {
             this.$post('endpoint', this.endpointList).then(response => {
@@ -528,6 +575,10 @@
       clearEndpoints() {
         this.getAssetList();
         this.endpointList = [];
+      },
+
+      setRowIndex({row, rowIndex}) {
+        row.index = rowIndex;
       }
     },
     computed: {
@@ -543,12 +594,23 @@
       this.getAssetList();
     },
     watch: {
+      endpointList(n, o) {
+        this.endpointForm.endpointList = n;
+        if (n.length > 0) {
+          this.paramBorderColor = '#dcdfe6';
+        } else {
+          this.paramBorderColor = '#F56C6C';
+        }
+
+      },
       currentProject(n, o) {
+        this.endpointForm.projectId = n.id;
         this.getModuleList(n.id);
       },
       currentModule: {
         immediate: true,
         handler(n, o) {
+          this.endpointForm.moduleId = n.id;
           this.currentModuleCopy = JSON.parse(JSON.stringify(n));
         }
       },
@@ -616,7 +678,7 @@
 
   /* begin--小盒子*/
   .right-child-boxes {
-    height: calc(100% - 196px);
+    height: calc(100% - 216px);
     position: relative;
   }
   .endpoint-to-right-symbol {
@@ -695,6 +757,7 @@
     border: 1px solid #dcdfe6;
     height: calc(100% - 39px);
     margin-top: 6px;
+    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
   }
   .endpoint-param-pop{
     max-height: 200px;
@@ -840,4 +903,11 @@
   .endpoint-info-param.el-input.is-disabled .el-input__inner:hover, .endpoint-info-param.el-input.is-disabled .el-input__inner:hover {
     border-color: #c0c4cc;
   }
+
+  .endpoints-box-endpoints .el-form-item {
+    margin-bottom: 0;
+  }
+  .endpoints-box-endpoints .el-form-item.is-error {
+    margin-bottom: 22px;
+  }
 </style>

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

@@ -41,7 +41,7 @@
       <!-- 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-item :label='$t("project.project.project")' prop="project.id">
+          <el-form-item :label='$t("project.project.project")' prop="project">
             <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>
@@ -187,7 +187,7 @@
             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
           ],
           project: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+            {required: true, message: this.$t('validate.required'), trigger: 'change'}
           ],
           port: [
             {type: 'number', message: this.$t('validate.number'), trigger: 'blur'}

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

@@ -1,13 +1,12 @@
 <template>
   <div class="asset">
     <div class="content-left">
-            <div class="sidebar-title">
+      <div class="sidebar-title">Asset</div>
-                <div>Asset</div>
       <div class="sidebar-info">
-                    <div class="sidebar-info-header">ALL</div>
+        <!--<div class="sidebar-info-header">ALL</div>-->
-                    <div class="sidebar-info-footer">
         <el-checkbox-group v-model="checkList" size="small" @change="getSingleAsset(checkList)">
-                            <el-checkbox v-for="(item,key) in checkListData" :key="key" border :label=item.id>
+          <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': checkList.indexOf(item.id) != -1}"
+                       v-for="(item,key) in checkListData" :key="key" :label=item.id>
             {{item.name}}
             <el-popover
               placement="left"
@@ -74,25 +73,18 @@
         </el-checkbox-group>
       </div>
     </div>
-            </div>
-        </div>
     <div class="content-right">
-            <div>
+      <div class="top-tools">
-                <button style="float: right;margin-top: 10px;width: 100px;height: 32px;margin-left: 10px"
+        <button @click.stop="tagShow('showAdd')" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
-                        @click.stop="tagShow('showAdd')">+ADD
+          <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
         </button>
-                <el-input
+        <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
-                        type="text"
-                        :placeholder="$t('overall.search')"
-                        size="small"
-                        style="width: 200px;float: right;padding-top: 10px"
-                >
-                </el-input>
       </div>
-            <div>
       <el-table
-                        :height="tableHeight"
+        height="calc(100% - 65px)"
-                        :data="this.tableData"
+        style="width: 100%;"
+        :data="tableData"
+        border
       >
         <el-table-column
           v-for="(item, index) in tableTitle"
@@ -197,11 +189,10 @@
                        ref="assetEditUnit"></asset-edit-unit>
     </div>
   </div>
-    </div>
 </template>
 
 <script>
-export default {
+  export default {
     name: "asset",
     data() {
       return {
@@ -560,11 +551,11 @@ export default {
         this.tableHeight = document.documentElement.clientHeight - 200;
       }
     }
-}
+  }
 </script>
 
 <style scoped>
-.sidebar-pop-input {
+  .sidebar-pop-input {
     position: absolute;
     right: 50px;
     width: 200px;
@@ -574,9 +565,9 @@ export default {
     color: #606266;
     display: inline-block;
     padding: 0px 15px;
-}
+  }
 
-.sidebar-pop-input-select {
+  .sidebar-pop-input-select {
     position: absolute;
     right: 83px;
     width: 200px;
@@ -586,54 +577,16 @@ export default {
     color: #606266;
     display: inline-block;
     padding: 0 15px;
-}
+  }
 
-.content-left {
-    float: left;
-    width: 370px;
-    height: 100%;
-}
 
-.content-right {
+  .checkbox-edit {
-    margin-left: 370px;
-}
-
-.sidebar-title {
-    padding-left: 30px;
-    padding-top: 20px;
-}
-
-.sidebar-info {
-
-    margin-top: 20px;
-    border: 1px solid #acacac;
-    border-radius: 8px;
-    height: calc(90vh - 55px);
-    width: calc(100% - 8px);
-}
-
-.sidebar-info-header {
-    background: #acacac;
-    text-align: center;
-    line-height: 50px;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-    height: 60px;
-    width: 100%;
-}
-
-.sidebar-info-footer {
-    padding-top: 15px;
-    padding-left: 15px;
-}
-
-.checkbox-edit {
     position: absolute;
-    top: 8px;
+    right: 10px;
-    left: 230px;
+    font-size: 16px;
-}
+  }
 
-.tab-input-square {
+  .tab-input-square {
     border: 1px solid #aaaaaa;
     height: 25px;
     width: 65px;
@@ -642,19 +595,19 @@ export default {
     margin-top: 6px;
     line-height: 23px;
     color: #aaaaaa;
-}
+  }
 
-.account-list-option {
+  .account-list-option {
     cursor: pointer;
     display: inline-block;
     margin-right: 6px;
-}
+  }
 
-.right-box-top-btns {
+  .right-box-top-btns {
     text-align: center;
-}
+  }
 
-.right-box-top-btn {
+  .right-box-top-btn {
     border-radius: 0 0 9px 9px;
     float: right;
     color: #656565;
@@ -665,86 +618,102 @@ export default {
     border-top: none;
     cursor: pointer;
     margin-left: 20px;
-}
+  }
 
-.right-box-top-btn-full {
+  .right-box-top-btn-full {
     background-color: #656565;
     border: 1px solid #656565;
     border-top: none;
     color: white;
-}
+  }
 
 
-.pop-window {
+  .pop-window {
     height: 370px;
     width: 400px;
-}
+  }
 
-.pop-window-assetType-content {
+  .pop-window-assetType-content {
     padding: 1px 15px 15px 20px;
-}
+  }
 
-.rm-c-list span:hover {
+  .rm-c-list span:hover {
     background-color: #888;
     color: #fff;
-}
+  }
 
-.right-box-bottom-btn {
+  .right-box-bottom-btn {
     display: inline-block;
     background-color: #656565;
     color: white;
     line-height: 35px;
     cursor: pointer;
     text-align: center;
-}
+  }
 
-.right-box-bottom-btns {
+  .right-box-bottom-btns {
     position: absolute;
     bottom: 0px;
     width: 100%;
     text-align: center;
-}
+  }
 
-.right-box-bottom-btn-cancel {
+  .right-box-bottom-btn-cancel {
     background-color: #DADADA;
     color: #656565;
     width: 50%;
     border-bottom-left-radius: 8px;
-}
+  }
 
-.right-box-bottom-btn-50 {
+  .right-box-bottom-btn-50 {
     width: 50%;
     float: right;
     border-bottom-right-radius: 8px;
-}
+  }
 
-.activeColor {
+  .activeColor {
     background-color: #409EFF;
-}
+  }
 
-@keyframes slide-in-from-right {
+  @keyframes slide-in-from-right {
     from {
       right: -800px
     }
     to {
       right: 0
     }
-}
+  }
 
-@keyframes slide-out-to-right {
+  @keyframes slide-out-to-right {
     from {
       right: 0
     }
     to {
       right: -800px
     }
-}
+  }
 
-.right-box-enter-active {
+  .right-box-enter-active {
     animation: slide-in-from-right 0.4s;
-}
+  }
 
-.right-box-leave-active {
+  .right-box-leave-active {
     animation: slide-out-to-right 0.4s;
-}
+  }
+</style>
+<style>
+  .asset .content-left .el-checkbox__input.is-focus .el-checkbox__inner,
+  .asset .content-left .el-checkbox__input .el-checkbox__inner:hover,
+  .asset .content-left .el-checkbox__input.is-checked .el-checkbox__inner,
+  .asset .content-left .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    border-color: #e07700;
+  }
+
+  .asset .content-left .el-checkbox__input.is-checked + .el-checkbox__label {
+    color: #444;
+  }
+
+  .asset .content-left .el-checkbox__input.is-checked .el-checkbox__inner, .asset .content-left .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    background-color: #e07700;
+  }
 </style>

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

@@ -471,7 +471,6 @@
 <style scoped  lang="scss">
   .project {
     height: 100%;
-    background: $color-red;
   }
   .content-right-option {
     cursor: pointer;