perf: 调整top按钮样式，并增加置顶动画

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

@@ -20,6 +20,9 @@ Created by iconfont
   />
     <missing-glyph />
     
+    <glyph glyph-name="top" unicode="&#59006;" d="M792.748 296.597l-257.312 259.001c-5.7 5.73-13.683 8.998-23.437 8.998s-16.541-3.881-21.63-8.971l-261.758-260.585c-11.205-11.174-11.231-29.313-0.031-40.513 13.731-13.731 34.927-5.614 40.544-0.056l214.226 213.168v-372.648c0-15.844 12.835-28.653 28.649-28.653 15.817 0 28.653 12.813 28.653 28.653v374.053l211.469-212.845c5.587-5.617 12.981-8.453 20.311-8.453 7.337 0 14.615 2.784 20.202 8.338 11.257 11.148 11.288 29.313 0.113 40.514v0 0zM827.161 644.365h-630.316c-15.817 0-28.653 12.835-28.653 28.645 0 15.818 12.835 28.653 28.653 28.653h630.316c15.84 0 28.645-12.835 28.645-28.653 0-15.81-12.805-28.645-28.645-28.645v0 0zM827.161 644.365z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="chart" unicode="&#59266;" d="M105.71 318.35v-232a25 25 0 1 1 50 0v232a25 25 0 0 1-50 0zM352.71 443.86v-357.48a25 25 0 0 1 50 0V443.86a25 25 0 0 1-50 0zM599.71 281v-194.62a25 25 0 0 1 50 0V281a25 25 0 0 1-50 0zM871.71 61.379999999999995a25 25 0 0 1 25 25v362a25 25 0 0 1-50 0v-362a25 25 0 0 1 25-25zM842.2 611.25a25 25 0 0 1 25-24.72h0.28a25 25 0 0 1 24.72 25.28l-1.72 155.07v0.23c0 0.47 0 0.94-0.07 1.4v0.34a25 25 0 0 1-0.53 3.36v0.16a26.32 26.32 0 0 1-1 3.3v0.07a24.75 24.75 0 0 1-1.48 3.12s0 0.08-0.07 0.13c-0.27 0.47-0.56 0.93-0.85 1.38l-0.05 0.07c-0.3 0.45-0.62 0.9-0.95 1.33l-0.19 0.24q-0.42 0.54-0.87 1l-0.2 0.24c-0.35 0.38-0.7 0.75-1.07 1.12l-0.28 0.26q-0.47 0.45-1 0.87l-0.26 0.23c-0.41 0.34-0.82 0.67-1.25 1l-0.22 0.16q-0.62 0.43-1.26 0.84l-0.14 0.09c-0.49 0.31-1 0.6-1.52 0.88a24.52 24.52 0 0 1-5.07 2c-0.57 0.15-1.14 0.28-1.72 0.4h-0.12c-0.49 0.09-1 0.17-1.48 0.23h-0.35c-0.53 0.06-1.06 0.11-1.6 0.13H698a25 25 0 0 1 0-50h102.8L566.38 528.54l-155.94 145.1a25 25 0 0 1-30.95 2.46l-262.7-176.16a25 25 0 1 1 27.84-41.52l246.25 165.12 158.27-147.27a25 25 0 0 1 33.85-0.2l258.09 234.59zM922.72-55a25 25 0 0 1 0 50H98a25 25 0 0 1 0-50z"  horiz-adv-x="1024" />
 
     

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

@@ -144,10 +144,22 @@ li{
   line-height: 16px;
   position: relative;
 }
-.to-top.nz-btn {
+.to-top {
   position: fixed;
-  bottom: 26px;
+  top: 49%;
-  right: 20px;
+  right: 23px;
+  border-radius: 50%;
+  height: 40px;
+  width: 40px;
+  border: none;
+  cursor: pointer;
+  opacity: 0.3;
+  background-color: #e0e0e0;
+  outline: none;
+  z-index: 10;
+}
+.to-top:hover {
+  opacity: 1;
 }
 .nz-btn-metricbtn{
   height: 32px;

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

@@ -48,7 +48,7 @@ export default {
       this.list = this.$refs.page.$el.children[2].children;
       for (let i = 0; i < this.list.length; i++) {
         const element = this.list[i];
-        console.info(element)
+        //console.info(element)
       }
     },
   }

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

@@ -85,7 +85,7 @@
         </el-table-column>
       </el-table>
       <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-      <button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn" @click="toTop">TOP</button>
+      <button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
     </div>
     <alert-config-box :parentAlertRule="alertRule" @reload="getTableData" ref="alertConfigBox"></alert-config-box>
     <project-box :project="viewProjectData" ref="projectBox" @reload="getTableData"></project-box>
@@ -413,7 +413,7 @@
         let el = this.$refs.alertRuleTable.$el.querySelector(".el-table__body-wrapper");
         if (el._ps_) {
           el.addEventListener("ps-scroll-y", () => {
-            if (el._ps_.scrollbarYTop > 100) {
+            if (el._ps_.scrollbarYTop > 50) {
               this.showTopBtn = true;
             } else {
               this.showTopBtn = false;

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

@@ -92,7 +92,7 @@
         </el-table-column>
       </el-table>
       <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-      <button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn" @click="toTop()">TOP</button>
+      <button class="to-top" v-show="showTopBtn" @click="toTop()"><i class="nz-icon nz-icon-top"></i></button>
     </div>
     <alert-config-box :parentAlertRule="viewRuleData" @reload="getAlertList" ref="alertConfigBox"></alert-config-box>
     <project-box :project="viewProjectData" ref="projectBox" @reload="getAlertList"></project-box>
@@ -361,7 +361,7 @@
         let el = this.$refs.alertListTable.$el.querySelector(".el-table__body-wrapper");
         if (el._ps_) {
           el.addEventListener("ps-scroll-y", () => {
-            if (el._ps_.scrollbarYTop > 100) {
+            if (el._ps_.scrollbarYTop > 50) {
               this.showTopBtn = true;
             } else {
               this.showTopBtn = false;

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

@@ -180,7 +180,7 @@
         </el-table-column>
       </el-table>
       <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-      <button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn" @click="toTop">TOP</button>
+      <button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
     </div>
 
     <!--<asset-add-unit :add-unit-show='addUnitShow' @refreshData="flushData" ref="assetAddUnit"
@@ -774,7 +774,8 @@
         let el = this.$refs.assetTable.$el.querySelector(".el-table__body-wrapper");
         if (el._ps_) {
           el.addEventListener("ps-scroll-y", () => {
-            if (el._ps_.scrollbarYTop > 100) {
+            console.info(el._ps_.scrollbarYTop)
+            if (el._ps_.scrollbarYTop > 50) {
               this.showTopBtn = true;
             } else {
               this.showTopBtn = false;

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

@@ -84,7 +84,7 @@
         </el-table-column>
       </el-table>
       <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-      <button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn" @click="toTop">TOP</button>
+      <button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
     </div>
 
     <transition name="right-box">
@@ -517,7 +517,7 @@
         let el = this.$refs.accountTable.$el.querySelector(".el-table__body-wrapper");
         if (el._ps_) {
           el.addEventListener("ps-scroll-y", () => {
-            if (el._ps_.scrollbarYTop > 100) {
+            if (el._ps_.scrollbarYTop > 50) {
               this.showTopBtn = true;
             } else {
               this.showTopBtn = false;

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

@@ -126,7 +126,7 @@
           </el-table-column>
         </el-table>
         <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-        <button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn1" @click="toTop">TOP</button>
+        <button class="to-top" v-show="showTopBtn1" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
         <!--dc table end-->
       <element-set
         v-clickoutside="elementsetHide"
@@ -217,7 +217,7 @@
       </div>
       <!--cabinet table end-->
       <cabinet-box :cur-cabinet="curCabinet" :cur-idc="currentShowDc" ref="cabinetEditBox" @after="getCabinetDatas"></cabinet-box>
-      <button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn2" @click="toTop">TOP</button>
+      <button class="to-top" v-show="showTopBtn2" @click="toTop()"><i class="nz-icon nz-icon-top"></i></button>
     </div>
 </template>
 <script>

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

@@ -75,7 +75,7 @@
         </el-table-column>
       </el-table>
       <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-      <button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn" @click="toTop">TOP</button>
+      <button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
     </div>
 
     <transition name="right-box">
@@ -647,7 +647,7 @@
         let el = this.$refs.promTable.$el.querySelector(".el-table__body-wrapper");
         if (el._ps_) {
           el.addEventListener("ps-scroll-y", () => {
-            if (el._ps_.scrollbarYTop > 100) {
+            if (el._ps_.scrollbarYTop > 50) {
               this.showTopBtn = true;
             } else {
               this.showTopBtn = false;

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

@@ -85,7 +85,7 @@
           </div>
         </el-scrollbar>
        </div>
-      <button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn" @click="toTop('el', $refs.dashboardScrollbar.wrap)">TOP</button>
+      <button class="to-top" v-show="showTopBtn" @click="toTop('el', $refs.dashboardScrollbar.wrap)"><i class="nz-icon nz-icon-top"></i></button>
     </div>
 
     <panel-box :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>
@@ -552,7 +552,7 @@
         let _self = this;
         let scrollbarWrap = this.$refs.dashboardScrollbar.wrap;
         scrollbarWrap.onscroll = function() {
-          if (scrollbarWrap.scrollTop > 100) {
+          if (scrollbarWrap.scrollTop > 50) {
             _self.showTopBtn = true;
           } else {
             _self.showTopBtn = false;

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

@@ -165,7 +165,7 @@
         </el-table-column>
       </el-table>
       <Pagination v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
-      <button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn1" @click="toTop">TOP</button>
+      <button class="to-top" v-show="showTopBtn1" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
     </div>
 
     <!--endpoint query-->
@@ -265,7 +265,7 @@
           width="180">
         </el-table-column>
       </el-table>
-      <button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn2" @click="toTop">TOP</button>
+      <button class="to-top" v-show="showTopBtn2" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
     </div>
 
     <element-set
@@ -1537,7 +1537,7 @@
         let el = this.$refs.endpointTable.$el.querySelector(".el-table__body-wrapper");
         if (el._ps_) {
           el.addEventListener("ps-scroll-y", () => {
-            if (el._ps_.scrollbarYTop > 100) {
+            if (el._ps_.scrollbarYTop > 50) {
               this.showTopBtn1 = true;
             } else {
               this.showTopBtn1 = false;

nezha-fronted/src/main.js

@@ -65,11 +65,29 @@ Vue.prototype.$put = put;
 Vue.prototype.$delete = del;
 Vue.prototype.toTop = (type, wrap) => { //top按钮公共方法
   if (type == 'el') {
-    wrap.scrollTop = 0;
+    let currentTop = wrap.scrollTop;
+    let interval = currentTop/10;
+    let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
+      if (currentTop == 0) {
+        clearInterval(intervalFunc);
+      } else {
+        currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
+        wrap.scrollTop = currentTop;
+      }
+    }, 20);
   } else {
     let els = document.querySelectorAll(".el-table__body-wrapper");
     for (let i = 0; i < els.length; i++) {
-      els[i].scrollTop = 0;
+      let currentTop = els[i].scrollTop;
+      let interval = currentTop/10;
+      let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
+        if (currentTop == 0) {
+          clearInterval(intervalFunc);
+        } else {
+          currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
+          els[i].scrollTop = currentTop;
+        }
+      }, 20);
     }
   }
 };