perf: 滚动条增加三种尺寸

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

@@ -1071,33 +1071,68 @@ li{
   overflow-x: hidden !important;
 }
 .el-scrollbar__thumb {
-  background-color: #aaa;
+  background-color: #ccc;
   cursor: default;
 }
+.el-scrollbar__thumb:hover {
+  background-color: #bbb;
+}
+/*大中小三个尺寸，默认中*/
 .el-scrollbar__bar.is-vertical {
-  width: 11px;
+  width: 8px;
 }
 .el-scrollbar__bar.is-horizontal {
+  height: 8px;
+}
+/*.el-scrollbar__bar.is-vertical:hover {
+  width: 11px;
+}
+.el-scrollbar__bar.is-horizontal:hover {
+  height: 11px;
+}*/
+.el-scrollbar-large .el-scrollbar__bar.is-vertical {
+  width: 11px;
+}
+.el-scrollbar-large .el-scrollbar__bar.is-horizontal {
   height: 11px;
 }
+.el-scrollbar-normal .el-scrollbar__bar.is-vertical {
+  width: 8px;
+}
+.el-scrollbar-normal .el-scrollbar__bar.is-horizontal {
+  height: 8px;
+}
+/*.el-scrollbar-normal .el-scrollbar__bar.is-vertical:hover {
+  width: 11px;
+}
+.el-scrollbar-normal .el-scrollbar__bar.is-horizontal:hover {
+  height: 11px;
+}*/
+.el-scrollbar-small .el-scrollbar__bar.is-vertical {
+  width: 5px;
+}
+.el-scrollbar-small .el-scrollbar__bar.is-horizontal {
+  height: 5px;
+}
+/*.el-scrollbar-small .el-scrollbar__bar.is-vertical:hover {
+  width: 8px;
+}
+.el-scrollbar-small .el-scrollbar__bar.is-horizontal:hover {
+  height: 8px;
+}*/
 .new-search .el-scrollbar__bar.is-horizontal {
   height: 4px;
 }
 .new-search .el-scrollbar__view {
   height: calc(100% - 4px);
 }
-.app>.el-scrollbar__bar.is-vertical {
-  width: 5px;
-}
 .el-scrollbar__bar {
   border-radius: 6px;
 }
 .el-autocomplete-suggestion__wrap.el-scrollbar__wrap, .el-cascader-menu__wrap.el-scrollbar__wrap {
   margin-bottom: 0 !important;
 }
-.el-scrollbar__thumb:hover {
+
-  background-color: #999;
-}
 .right-box-form {
   width: calc(100% - 30px);
 }
@@ -1519,31 +1554,83 @@ li{
   background-color: rgba(255, 99, 71, .85);
 }
 
-/*滚动条相关*/
+/*滚动条相关, 11px/8px/5px, 默认8px*/
-.ps__thumb-y {
+.ps__rail-y:hover > .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y,
+.ps__rail-y.ps--clicking .ps__thumb-y,
+.ps__thumb-y,
+.ps__rail-y  {
+  width: 8px;
+}
+.ps__rail-x:hover > .ps__thumb-x,
+.ps__rail-x:focus > .ps__thumb-x,
+.ps__rail-x.ps--clicking .ps__thumb-x,
+.ps__rail-x,
+.ps__thumb-x {
+  height: 8px;
+}
+.ps-scroll-small.ps__rail-y:hover > .ps__thumb-y,
+.ps-scroll-small.ps__rail-y:focus > .ps__thumb-y,
+.ps-scroll-small.ps__rail-y.ps--clicking .ps__thumb-y,
+.ps-scroll-small .ps__thumb-y,
+.ps-scroll-small .ps__rail-y  {
+  width: 5px;
+}
+.ps-scroll-small.ps__rail-x:hover > .ps__thumb-x,
+.ps-scroll-small.ps__rail-x:focus > .ps__thumb-x,
+.ps-scroll-small.ps__rail-x.ps--clicking .ps__thumb-x,
+.ps-scroll-small .ps__rail-x,
+.ps-scroll-small .ps__thumb-x {
+  height: 5px;
+}
+.ps-scroll-normal.ps__rail-y:hover > .ps__thumb-y,
+.ps-scroll-normal.ps__rail-y:focus > .ps__thumb-y,
+.ps-scroll-normal.ps__rail-y.ps--clicking .ps__thumb-y,
+.ps-scroll-normal .ps__thumb-y,
+.ps-scroll-normal .ps__rail-y  {
+  width: 8px;
+}
+.ps-scroll-normal.ps__rail-x:hover > .ps__thumb-x,
+.ps-scroll-normal.ps__rail-x:focus > .ps__thumb-x,
+.ps-scroll-normal.ps__rail-x.ps--clicking .ps__thumb-x,
+.ps-scroll-normal .ps__rail-x,
+.ps-scroll-normal .ps__thumb-x {
+  height: 8px;
+}
+.ps-scroll-large.ps__rail-y:hover > .ps__thumb-y,
+.ps-scroll-large.ps__rail-y:focus > .ps__thumb-y,
+.ps-scroll-large.ps__rail-y.ps--clicking .ps__thumb-y,
+.ps-scroll-large .ps__thumb-y,
+.ps-scroll-large .ps__rail-y  {
   width: 11px;
 }
-.ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y {
+.ps-scroll-large.ps__rail-x:hover > .ps__thumb-x,
-  width: 11px;
+.ps-scroll-large.ps__rail-x:focus > .ps__thumb-x,
+.ps-scroll-large.ps__rail-x.ps--clicking .ps__thumb-x,
+.ps-scroll-large .ps__rail-x,
+.ps-scroll-large .ps__thumb-x {
+  height: 11px;
 }
 .ps__thumb-y {
-  right: 0px;
+  right: 0;
-  background-color: #888;
+  background-color: #bbb;
 }
-.ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x {
+.ps__thumb-x {
-  height: 6px;
+  bottom: 0;
+}
+.ps__rail-y:hover > .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y,
+.ps__rail-y.ps--clicking .ps__thumb-y,
+.ps__rail-x:hover > .ps__thumb-x,
+.ps__rail-x:focus > .ps__thumb-x,
+.ps__rail-x.ps--clicking .ps__thumb-x{
+  background-color: #bbb;
 }
 .ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, .ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking {
   background-color: transparent;
 }
-.ps__rail-y {
-  width: 6px;
-}
-.ps__rail-x {
-  height: 6px;
-}
 .el-table__fixed-right {
-  right: 0px !important;
+  right: 0 !important;
 }
 .asset .ps__rail-y {
   z-index: 2000;

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

@@ -143,7 +143,7 @@
           </el-dropdown>
         </div>
         <!--tree-->
-        <el-scrollbar class="mib-browser-tree" ref="treeScrollbar">
+        <el-scrollbar class="el-scrollbar-normal mib-browser-tree" ref="treeScrollbar">
           <el-tree
             ref="walkTree"
             highlight-current
@@ -171,7 +171,7 @@
         <!--拖拽区-->
         <div class="tree-detail-resize" @mousedown="treeDetailResize"></div>
         <!--detail-->
-        <el-scrollbar class="mib-browser-detail" ref="detailScrollbar">
+        <el-scrollbar class="el-scrollbar-normal mib-browser-detail" ref="detailScrollbar">
           <div class="mib-browser-detail-row">
             <div>Name</div>
             <div>{{currentWalk.name}}</div>
@@ -218,7 +218,7 @@
           </span>
         </div>
         <pl-table :row-height="28" use-virtual :datas="resultData" border :empty-text="$t('config.mib.noData')"
-                  class="mib-browser-table nz-table" style="width: 100%;height: calc(100% - 31px)" v-loading="loading" v-scrollBar:el-table :pagination-show="false">
+                  class="mib-browser-table nz-table" style="width: 100%;height: calc(100% - 31px)" v-loading="loading" v-scrollBar:el-table="'large'" :pagination-show="false">
           <pl-table-column label="Name/OID" v-slot="{row}">
             <div class="too-long-split" @click="searchParam.oid = row.oid">{{row.name ? row.name : row.oid}}</div>
           </pl-table-column>
@@ -554,7 +554,7 @@
           )
         } catch (e) {}
         return out
-      },
+      }
     },
     mounted() {
       this.getWalkData();

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

@@ -104,7 +104,7 @@
           border
           class="nz-table endpoint-table"
           :height="mainTableHeight"
-          v-scrollBar:el-table
+          v-scrollBar:el-table="'normal'"
           v-show="mainResizeShow"
           ref="endpointTable"
           style="width: 100%;">

nezha-fronted/src/tools.js

@@ -125,14 +125,13 @@ export const scrollBar = {
           el = el.querySelector(".el-cascader__tags");
           !el && console.warn("未发现className为el-cascader__tags的dom");
         }
-
         el.classList.add("ps");
-        el.addEventListener("ps-scroll-y", () =>
+        el.addEventListener("ps-scroll-y", () => {
-          el.classList.add("ps")
+          el.classList.add("ps");
-        );
+        });
-        el.addEventListener("ps-scroll-x", () =>
+        el.addEventListener("ps-scroll-x", () => {
-          el.classList.add("ps")
+          el.classList.add("ps");
-        );
+        });
         //el上挂一份属性
         el_scrollBar(el);
       });
@@ -148,10 +147,17 @@ export const scrollBar = {
     }
   },
   componentUpdated(el, binding, vnode, oldVnode) {
-    const { arg } = binding;
+    const { arg, value } = binding;
     if (arg === "el-table") {
       el = el.querySelector(".el-table__body-wrapper");
       !el && console.warn("未发现className为el-table__body-wrapper的dom");
+      // 滚动条尺寸  large/normal/small 默认normal
+      vnode.context.$nextTick(() => {
+        if (value) {
+          el.querySelector(".ps__rail-x").classList.add("ps-scroll-" + value);
+          el.querySelector(".ps__rail-y").classList.add("ps-scroll-" + value);
+        }
+      });
     } else if (arg === "el-dropdown") {
       el = el.querySelector(".el-dropdown-menu");
       !el && console.warn("未发现className为el-dropdown-menu的dom");
@@ -165,6 +171,7 @@ export const scrollBar = {
       el = el.querySelector(".table-scroll");
       !el && console.warn("未发现className为table-scroll的dom");
     }
+
     setTimeout(() => {
       el.classList.add("ps");
       el.classList.add("ps--active-y");