From bc9da07d2cfa7f60dc58398b2024d689d40aba21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= <chenjinsong@zdjizhi.com>
Date: Fri, 13 Mar 2020 17:55:56 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=8F=B3=E4=BE=A7=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E8=BE=B9=E8=B7=9D=E5=87=8F=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.content-right右padding减小为5px
2.top按钮、顶部工具栏相应调整位置
3.asset列表还未调整
---
 nezha-fronted/src/assets/stylus/main.scss          |  9 ++++++---
 nezha-fronted/src/components/common/exportXLSX.vue |  5 ++++-
 nezha-fronted/src/components/page/alert/config.vue |  6 +++++-
 nezha-fronted/src/components/page/asset/asset.vue  |  2 +-
 .../src/components/page/config/account.vue         |  6 +++++-
 nezha-fronted/src/components/page/config/dc.vue    |  8 ++++++--
 nezha-fronted/src/components/page/config/model.vue |  6 +++++-
 .../src/components/page/config/promServer.vue      |  6 +++++-
 .../src/components/page/project/project.vue        | 14 ++------------
 nezha-fronted/src/main.js                          |  2 +-
 10 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 33a79bc36..15bf4e59f 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -146,7 +146,7 @@ li{
 .to-top {
   position: fixed;
   bottom: 10px;
-  right: 23px;
+  right: 5px;
   border-radius: 5px;
   height: 40px;
   width: 40px;
@@ -438,7 +438,7 @@ li{
 .content-right {
   height: 100%;
   margin-left: 201px;
-  padding: 0 15px;
+  padding: 0 5px;
   background-color: $content-right-background-color;
 }
 .content-right-option {
@@ -471,7 +471,7 @@ li{
 }
 .top-tools .top-tool-search {
   width: 260px;
-  margin: -1px 20px 0 0;
+  margin: -1px 0 0 0;
 }
 .top-tools .top-tool-btn-txt .nz-icon{
   display: inline-block;
@@ -1219,6 +1219,9 @@ li{
 .ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y {
   width: 6px;
 }
+.ps__thumb-y {
+  right: 0px;
+}
 .ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x {
   height: 6px;
 }
diff --git a/nezha-fronted/src/components/common/exportXLSX.vue b/nezha-fronted/src/components/common/exportXLSX.vue
index 9be3f4d7d..f6664dc39 100644
--- a/nezha-fronted/src/components/common/exportXLSX.vue
+++ b/nezha-fronted/src/components/common/exportXLSX.vue
@@ -286,6 +286,9 @@
     font-size: 12px;
     height: 24px;
   }
+  .dropdownBtn .el-button--mini:first-of-type {
+    right: 3px;
+  }
   .el-dropdown .el-button-group{
     display: block;
     position: relative;
@@ -296,7 +299,7 @@
     padding-right: 5px;
     border-left: none;
     top:0px;
-    left:2px;
+    left: -1px;
   }
   .footer:before{
     /*content: '';*/
diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue
index 88d92e1c6..10e0cca33 100644
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/nezha-fronted/src/components/page/alert/config.vue
@@ -21,7 +21,7 @@
         </div>
         <div>
           <button id="alert-add" @click="toAdd"  :title="$t('overall.createAlertRule')"
-                  class="nz-btn nz-btn-size-normal nz-btn-style-light float-right ">
+                  class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20">
                       <i class="nz-icon-create-square nz-icon"></i>
           </button>
           <div class="top-tool-search float-right">
@@ -359,6 +359,9 @@
         this.pageObj.pageSize = val;
         localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.getTableData();
+        this.$nextTick(() => {
+          this.gutterHandler(".nz-table");
+        });
       },
       search: function (searchObj) {
         this.searchLabel = {};
@@ -418,6 +421,7 @@
 
       this.getTableData();
       this.$nextTick(() => {
+        this.gutterHandler(".nz-table");
         //绑定滚动条事件，控制top按钮
         let el = this.$refs.alertRuleTable.$el.querySelector(".el-table__body-wrapper");
         if (el._ps_) {
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 76b040812..9c2f2c2d5 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -46,7 +46,7 @@
             </template>
           </export-excel>
 
-          <div class="top-tool-search float-left"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
+          <div class="top-tool-search float-left margin-r-20"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
         </div>
       </div>
 
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index 4145475a1..7738646fb 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -25,7 +25,7 @@
         <div></div>
         <div>
           <button type="button" @click="toAdd"  :title="$t('overall.createAccount')"
-                  class="nz-btn nz-btn-size-normal nz-btn-style-light float-right " id="account-add">
+                  class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" id="account-add">
                   <i class="nz-icon-create-square nz-icon"></i>
           </button>
           <div class="top-tool-search float-right">
@@ -495,6 +495,9 @@
         this.pageObj.pageSize = val;
         localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.getTableData();
+        this.$nextTick(() => {
+          this.gutterHandler(".nz-table");
+        });
       },
       search: function (searchObj) {
         this.searchLabel = {};
@@ -524,6 +527,7 @@
       this.getTableData();
       this.initReceiverData();
       this.$nextTick(() => {
+        this.gutterHandler(".nz-table");
         //绑定滚动条事件，控制top按钮
         let el = this.$refs.accountTable.$el.querySelector(".el-table__body-wrapper");
         if (el._ps_) {
diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue
index 6a7000dca..6696834aa 100644
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -56,7 +56,7 @@
           <div></div>
           <div>
             <button type="button" @click="toAdd" :title="$t('overall.createDatacenter')"
-                    class="nz-btn nz-btn-size-normal nz-btn-style-light float-right " id="dc-add">
+                    class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" id="dc-add">
               <i class="nz-icon-create-square nz-icon"></i>
             </button>
             <div class="top-tool-search float-right">
@@ -152,7 +152,7 @@
           </div>
           <div>
             <button type="button" @click="toAddCabinet" :title="$t('overall.createCabinet')"
-                    class="nz-btn nz-btn-size-normal nz-btn-style-light float-right " id="cab-add">
+                    class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" id="cab-add">
               <i class="nz-icon-create-square nz-icon"></i>
             </button>
             <div class="top-tool-search float-right">
@@ -496,6 +496,9 @@
         localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.pageObj.pageSize = val;
         this.getTableData();
+        this.$nextTick(() => {
+          this.gutterHandler(".nz-table");
+        });
       },
       search: function (searchObj) {
         this.searchLabel = {};
@@ -573,6 +576,7 @@
 
       this.getTableData();
       this.$nextTick(function(){
+        this.gutterHandler(".nz-table");
         this.getUserData();//绑定滚动条事件，控制top按钮
         let el = this.$refs.dcTable.$el.querySelector(".el-table__body-wrapper");
         if (el._ps_) {
diff --git a/nezha-fronted/src/components/page/config/model.vue b/nezha-fronted/src/components/page/config/model.vue
index 5d079b7e6..6c568f1d0 100644
--- a/nezha-fronted/src/components/page/config/model.vue
+++ b/nezha-fronted/src/components/page/config/model.vue
@@ -24,7 +24,7 @@
       <div class="top-tools">
         <div></div>
         <div>
-          <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right"  :title="$t('overall.createModel')"
+          <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20"  :title="$t('overall.createModel')"
                   id="model-add">
                     <i class="nz-icon-create-square nz-icon"></i>
           </button>
@@ -251,6 +251,9 @@
         this.pageObj.pageSize = val;
         localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.getTableData();
+        this.$nextTick(() => {
+          this.gutterHandler(".nz-table");
+        });
       },
       search: function (searchObj) {
         this.pageObj.pageNo = 1;
@@ -284,6 +287,7 @@
 
       this.getTableData();
       this.$nextTick(() => {
+        this.gutterHandler(".nz-table");
         //绑定滚动条事件，控制top按钮
         let el = this.$refs.modelTable.$el.querySelector(".el-table__body-wrapper");
         if (el._ps_) {
diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue
index 2548ed981..7bddfcd0e 100644
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -24,7 +24,7 @@
       <div class="top-tools">
         <div></div>
         <div>
-          <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right "  :title="$t('overall.createPrometheusServer')"
+          <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20"  :title="$t('overall.createPrometheusServer')"
                   id="prom-add">
                     <i class="nz-icon-create-square nz-icon"></i>
           </button>
@@ -563,6 +563,9 @@
         this.pageObj.pageSize = val;
         localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.getTableData();
+        this.$nextTick(() => {
+          this.gutterHandler(".nz-table");
+        });
       },
       search: function (searchObj) {
         this.pageObj.pageNo = 1;
@@ -655,6 +658,7 @@
       this.getIdcData();
       this.getUserData();
       this.$nextTick(() => {
+        this.gutterHandler(".nz-table");
         //绑定滚动条事件，控制top按钮
         let el = this.$refs.promTable.$el.querySelector(".el-table__body-wrapper");
         if (el._ps_) {
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index ec190d0ff..91ce72306 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -116,7 +116,7 @@
 <!--          <button @click="toCreateEndpoint" :title="$t('overall.createProject')"  class="nz-btn nz-btn-size-normal nz-btn-style-light float-right " id="project-add-ep">-->
 <!--            <i class="nz-icon-create-square nz-icon"></i>-->
 <!--          </button>-->
-          <div class="top-tool-search float-right"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
+          <div class="top-tool-search float-right margin-r-20"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
         </div>
       </div>
       <el-table
@@ -1563,16 +1563,6 @@
           }
         }
       }
-      /*gutterHandler() {
-        setTimeout(() => {
-          let gutterCol = document.querySelector(".endpoint-table col[name='gutter']");
-          if (gutterCol.attributes['width'].value != '0') {
-            gutterCol.attributes['width'].value = '10';
-            let bb = document.querySelector('.el-table__body');
-            document.querySelector('.endpoint-table .el-table__body').attributes['style'].value = "width: calc(100% - 10px)";
-          }
-        }, 10)
-      }*/
     },
     created() {
       this.currentProject = this.$store.state.currentProject;
@@ -1945,7 +1935,7 @@
   }
   .dropdownBtn .el-dropdown__caret-button{
     top:0px !important;
-    left:2px;
+    left: -1px;
   }
   .endpoint-query-table .el-loading-spinner .circular{
     width: 42px;
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index 26912bd58..fbbdd4633 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -100,7 +100,7 @@ Vue.prototype.gutterHandler = (tableClass) => {
     //console.info(gutterCol.attributes['width'].value)
     if (gutterCol.attributes['width'].value != '0') {
       //console.info(gutterCol)
-      gutterCol.attributes['width'].value = '10';
+      gutterCol.attributes['width'].value = '1';
       document.querySelector(tableClass + ' .el-table__body').attributes['style'].value = "width: calc(100% - 10px)";
     }
   }, 1000)