perf: 右侧内容min-width=1200及相关处理

1.右侧内容min-width=1200
2.浏览器窗体缩小后增加横向滚动条
3.增加project、asset左侧菜单滚动条
4.将table高度抽取为常量

nezha-fronted/src/App.vue

@@ -1,9 +1,11 @@
 <template>
+  <el-scrollbar class="app">
     <div id="app">
       <keep-alive>
         <router-view style="height: 100%"/>
       </keep-alive>
     </div>
+  </el-scrollbar>
 </template>
 
 <script>
@@ -22,6 +24,15 @@ export default {
 #app{
   height: 100%;
   width: 100%;
-    overflow: hidden;
+  min-width: 1400px;
 }
 </style>
+<style>
+  .app {
+    height: 100%;
+    overflow-y: hidden;
+  }
+  .app>.el-scrollbar__wrap>.el-scrollbar__view {
+    height: 100%;
+  }
+</style>

nezha-fronted/src/assets/stylus/main.scss

@@ -6,14 +6,13 @@ body {
 }
 html {
   height: 100%;
+  overflow: hidden;
 }
 li{
   list-style-type:none ;
 }
 .content-box {
-  height: 100%;
-  min-width: 1430px;
-  overflow-x: scroll;
+  height: calc(100% - 53px);
 }
 
 .nz-icon-gear:before {
@@ -149,8 +148,8 @@ li{
   bottom: 10px;
   right: 23px;
   border-radius: 5px;
-  height: 31px;
-  width: 35px;
+  height: 40px;
+  width: 40px;
   border: none;
   cursor: pointer;
   opacity: 0.5;
@@ -378,7 +377,7 @@ li{
   width: 200px;
   height: 100%;
   border-right: 1px solid #eeeeee;
-  padding: 0 16px 0 15px;
+  padding: 0 0 0 15px;
   box-sizing: border-box;
 }
 .sidebar-title {
@@ -387,7 +386,7 @@ li{
   font-size: 14px;
 }
 .sidebar-info {
-  height: calc(90vh - 55px);
+  height: 100%;
   width: 100%;
   padding-top: 24px;
   font-size: 14px;
@@ -413,6 +412,7 @@ li{
 .side-bar-menu-edit {
   line-height: 20px;
   float: right;
+  margin-right: 12px;
 }
 .side-bar-menu-edit>i, .sidebar-info-item .el-checkbox__label .checkbox-edit i {
   font-size: 12px;
@@ -441,7 +441,6 @@ li{
   margin-left: 201px;
   padding: 0 15px;
   background-color: $content-right-background-color;
-  overflow-x: scroll;
 }
 .content-right-option {
   cursor: pointer;
@@ -494,6 +493,9 @@ li{
 .nz-table.el-table::before {
   height: 0;
 }
+.nz-table .el-table__fixed-right::before, .nz-table .el-table__fixed::before {
+  height: 0;
+}
 .nz-table.el-table--border::after, .nz-table.el-table--group::after {
   width: 0;
 }

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

@@ -60,7 +60,7 @@ export default {
     float: left;
   }
   .pagination {
-    padding-top: 14px;
+    padding-top: 8px;
     text-align: center;
   }
 

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

@@ -552,10 +552,10 @@
 </style>
 
 <style lang="scss">
-  .el-pagination__total {
+  .right-box-edit-endpoint .el-pagination__total {
     float: left;
   }
-  .pagination {
+  right-box-edit-endpoint .pagination {
     padding-top: 12px;
     text-align: center;
   }
@@ -576,19 +576,19 @@
   .endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled):hover {
     color: #666;
   }
-  .el-pagination .el-pager li.btn-quicknext, .el-pager li.btn-quickprev {
+  .right-box-edit-endpoint .el-pagination .el-pager li.btn-quicknext, .right-box-edit-endpoint .el-pager li.btn-quickprev {
     line-height: 20px;
   }
-  .el-pagination .el-pager .more::before {
+  .right-box-edit-endpoint .el-pagination .el-pager .more::before {
     line-height: 20px;
   }
-  .el-pager li.number{
+  .right-box-edit-endpoint .el-pager li.number{
     font-family: NotoSansSC-Regular;
     color: #666666;
     letter-spacing: 0;
     font-weight:normal;
   }
-  .el-pager li.number.active{
+  .right-box-edit-endpoint .el-pager li.number.active{
     font-family: NotoSansSC-Regular;
     color: #FFFFFF;
     letter-spacing: 0;
@@ -599,17 +599,17 @@
     border-radius: 2px;
     border-radius: 2px;
   }
-  .el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
+  .right-box-edit-endpoint .el-pager li:hover, .right-box-edit-endpoint .el-pagination .btn-next:hover, .right-box-edit-endpoint .el-pagination .btn-prev:hover {
     font-family: NotoSansSC-Regular;
     color: #666666;
     letter-spacing: 0;
     font-weight:normal;
   }
-  .el-pagination__sizes .el-input .el-input__inner,.el-pagination__editor.el-input .el-input__inner{
+  .right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner, .right-box-edit-endpoint .el-pagination__editor.el-input .el-input__inner{
     height: 20px;
     border-color: rgba(154,154,154,0.20);
   }
-  .el-pagination__sizes .el-input .el-input__inner:hover{
+  .right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner:hover{
     border-color: rgba(154,154,154,0.20);
   }
 </style>

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

@@ -35,7 +35,7 @@
         border
         ref="alertRuleTable"
         tooltip-effect="light"
-        height="calc(100% - 125px)"
+        :height="$tableHeight.normal"
         v-scrollBar:el-table
         style="width: 100%;">
         <el-table-column

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

@@ -27,7 +27,7 @@
         border
         ref="alertListTable"
         tooltip-effect="light"
-        height="calc(100% - 125px)"
+        :height="$tableHeight.normal"
         v-scrollBar:el-table
         style="width: 100%;">
         <el-table-column

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

@@ -1,6 +1,7 @@
 <template>
   <div class="asset" ref="asset">
     <div class="content-left">
+      <el-scrollbar ref="leftScrollbar" style="height: 100%">
         <div class="sidebar-title">{{$t('asset.asset')}}</div>
         <div class="sidebar-info">
           <!--<div class="sidebar-info-header">ALL</div>-->
@@ -17,16 +18,17 @@
                 <span v-else>{{item.name}}</span>
               </div>
 
-<!--            <idc-config-box ref="idcConfigBox" :post-idc="item" placement="left" @after="getIDCOptionData" :button-class="'checkbox-edit'" :user-data="idcUserData">-->
-<!--              <template v-slot:optionZone>-->
-<!--                <span @click="closeAllPop">-->
-<!--                  <i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit')"></i>-->
-<!--                </span>-->
-<!--              </template>-->
-<!--            </idc-config-box>-->
+  <!--            <idc-config-box ref="idcConfigBox" :post-idc="item" placement="left" @after="getIDCOptionData" :button-class="'checkbox-edit'" :user-data="idcUserData">-->
+  <!--              <template v-slot:optionZone>-->
+  <!--                <span @click="closeAllPop">-->
+  <!--                  <i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit')"></i>-->
+  <!--                </span>-->
+  <!--              </template>-->
+  <!--            </idc-config-box>-->
             </el-checkbox>
           </el-checkbox-group>
         </div>
+      </el-scrollbar>
     </div>
 
     <div class="content-right">
@@ -50,7 +52,7 @@
 
       <el-table
         class="nz-table"
-        height="calc(100% - 125px)"
+        :height="$tableHeight.normal"
         style="width: 100%;"
         :data="tableData"
         v-scrollBar:el-table
@@ -346,7 +348,6 @@
           idcId: '',
           idcIds: ''
         },
-        tableHeight: document.documentElement.clientHeight - 200,
         tabShow: false,
         tabView: true,
         tagType: 'add',
@@ -782,10 +783,18 @@
             }
           });
         }
+        //resize时刷新左侧列表滚动条
+        let _this = this;
+        window.onresize = function() {
+          _this.$refs.leftScrollbar.update();
+        }
       });
       let localStorageTitle=localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path);
       this.tablelable = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;
       this.dropCol = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;
+    },
+    destroyed() {
+      window.onresize = null;
     }
   }
 </script>

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

@@ -35,7 +35,7 @@
         :data="tableData"
         border
         ref="accountTable"
-        height="calc(100% - 125px)"
+        :height="$tableHeight.normal"
         v-scrollBar:el-table
         style="width: 100%;">
         <el-table-column

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

@@ -164,7 +164,7 @@
           border
           ref="cabTable"
           v-scrollBar:el-table
-          height="calc(100% - 125px)"
+          :height="$tableHeight.normal"
           style="width: 100%;">
           <el-table-column
             :resizable="false"

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

@@ -30,7 +30,7 @@
           </div>
         </div>
       </div>
-      <el-table :data="tableData" border height="calc(100% - 125px)" style="width: 100%;" ref="promTable" class="nz-table" v-scrollBar:el-table>
+      <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="promTable" class="nz-table" v-scrollBar:el-table>
         <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
                          :key="`col-${index}`" :label="item.label">
           <template slot-scope="scope" :column="item">

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

@@ -31,7 +31,9 @@
 </style>
 <template>
   <div class="project">
+
     <div class="content-left">
+      <el-scrollbar ref="leftScrollbar" style="height: 100%">
         <div class="sidebar-title too-long-split">{{$t('project.project.project')}}：{{currentProject.name}}</div>
         <div class="sidebar-info">
           <div
@@ -50,6 +52,7 @@
             <div class="hid-div side-bar-menu-edit " @click.stop="toEditModule(item)" :id="'project-module-edit-'+item.id" ><i class="nz-icon nz-icon-edit"></i></div>
           </div>
         </div>
+      </el-scrollbar>
     </div>
 
     <!--metrics-->
@@ -120,7 +123,7 @@
         :data="endpointTableData"
         border
         class="nz-table endpoint-table"
-        height="calc(100% - 125px)"
+        :height="$tableHeight.normal"
         v-scrollBar:el-table
         ref="endpointTable"
         style="width: 100%;">
@@ -230,7 +233,7 @@
         v-scrollBar:el-table
         class="nz-table endpoint-query-table"
         :header-cell-class-name="cellClass"
-        height="calc(100% - 92px)"
+        :height="$tableHeight.endpointQuery"
         @selection-change="selectChange"
         ref="metricInfoTab"
         style="width: 100%;">
@@ -1584,6 +1587,11 @@
           });
         }
       });
+      //resize时刷新左侧列表滚动条
+      let _this = this;
+      window.onresize = function() {
+        _this.$refs.leftScrollbar.update();
+      }
 
       this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
@@ -1631,6 +1639,9 @@
           temp.tableFilter();
         },100)
       },
+    },
+    destroyed() {
+      window.onresize = null;
     }
   }
 </script>

nezha-fronted/src/http.js

@@ -23,7 +23,7 @@ axios.interceptors.request.use(config => {
 axios.interceptors.response.use(
     response => {
       if(response.status === 200){
-        if(response.data.code == 101007) {
+        if(response.data.code == 518008) {
           window.location.href = "/";
           /*router.push({
             path: "/login"

nezha-fronted/src/main.js

@@ -63,6 +63,10 @@ Vue.prototype.$post = post;
 Vue.prototype.$get = get;
 Vue.prototype.$put = put;
 Vue.prototype.$delete = del;
+Vue.prototype.$tableHeight = { //列表页表格的高度
+  normal: 'calc(100% - 100px)',  //常规高度，特例在下方定义
+  endpointQuery: 'calc(100% - 60px)', //特例：endpoint query页，没有翻页组件
+};
 Vue.prototype.toTop = (type, wrap) => { //top按钮公共方法
   if (type == 'el') {
     let currentTop = wrap.scrollTop;