feat: 优化滚动条样式 (#84)

src/layout/components/AppMain.vue

@@ -13,17 +13,21 @@ const key = computed(() => {
 
 <template>
   <section class="app-main">
-    <router-view v-slot="{ Component }">
+    <div class="app-scrollbar">
-      <transition name="el-fade-in" mode="out-in">
+      <router-view v-slot="{ Component }">
-        <keep-alive :include="tagsViewStore.cachedViews">
+        <transition name="el-fade-in" mode="out-in">
-          <component :is="Component" :key="key" />
+          <keep-alive :include="tagsViewStore.cachedViews">
-        </keep-alive>
+            <component :is="Component" :key="key" />
-      </transition>
+          </keep-alive>
-    </router-view>
+        </transition>
+      </router-view>
+    </div>
   </section>
 </template>
 
 <style lang="scss" scoped>
+@import "@/styles/mixins.scss";
+
 .app-main {
   min-height: calc(100vh - var(--v3-navigationbar-height));
   width: 100%;
@@ -32,6 +36,12 @@ const key = computed(() => {
   background-color: var(--v3-body-bg-color);
 }
 
+.app-scrollbar {
+  height: 100%;
+  overflow: auto;
+  @include scrollbar;
+}
+
 .fixed-header + .app-main {
   padding-top: var(--v3-navigationbar-height);
   height: 100vh;

src/styles/index.scss

@@ -8,6 +8,8 @@
 @import "./vxe-table.scss";
 // 注册多主题
 @import "./theme/register.scss";
+// mixin
+@import "./mixins.scss";
 
 // 业务页面几乎都应该在根元素上挂载 class="app-container"，以保持页面美观
 .app-container {
@@ -25,6 +27,7 @@ body {
   -webkit-font-smoothing: antialiased;
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial,
     sans-serif;
+  @include scrollbar();
 }
 
 #app {

src/styles/mixins.scss

@@ -5,3 +5,25 @@
     clear: both;
   }
 }
+
+@mixin scrollbar {
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px; // 也要兼容 height 样式
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 16px;
+    background-color: #d6d7d9;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: #c0c3c5;
+  }
+  &::-webkit-scrollbar-thumb:active {
+    background-color: #acafb2;
+  }
+  &::-webkit-scrollbar-button {
+    background: transparent;
+    height: 10px;
+  }
+}