fix(layout): align scrollbar and navbar behavior (#626)

src/@core/scss/libs/perfect-scrollbar.scss

@@ -33,16 +33,3 @@ $ps-track-size: 0.5rem;
 .ps__rail-y:hover > .ps__thumb-y {
   inline-size: $ps-hover-size;
 }
-
-// 滚动条只反馈实际滚动状态，鼠标经过容器或键盘聚焦不应让轨道常驻。
-.ps:hover > .ps__rail-x,
-.ps:hover > .ps__rail-y,
-.ps--focus > .ps__rail-x,
-.ps--focus > .ps__rail-y {
-  opacity: 0 !important;
-}
-
-.ps.ps--scrolling-x > .ps__rail-x,
-.ps.ps--scrolling-y > .ps__rail-y {
-  opacity: 0.6 !important;
-}

src/@layouts/components/VerticalNavLayout.vue

@@ -213,7 +213,7 @@ export default defineComponent({
     // 单独提升顶栏图层可避免导航栏短暂上移到安全区下方。
     backface-visibility: hidden;
     block-size: var(--layout-navbar-block-size);
-    inline-size: calc(100vw - variables.$layout-vertical-nav-width - 0.5rem);
+    inline-size: calc(100% - variables.$layout-vertical-nav-width);
     inset-block-start: 0;
     transform: translate3d(0, 0, 0);
 
@@ -277,7 +277,7 @@ export default defineComponent({
   }
 
   &.layout-vertical-nav-collapsed .layout-navbar {
-    inline-size: calc(100vw - variables.$layout-vertical-nav-collapsed-width - 0.5rem);
+    inline-size: calc(100% - variables.$layout-vertical-nav-collapsed-width);
   }
 
   &.layout-vertical-nav-collapsed .layout-vertical-nav:not(.overlay-nav) {

src/styles/__tests__/glassOverlayMaterial.spec.ts

@@ -61,7 +61,6 @@ describe('glass overlay material styles', () => {
     expect(mainBackplateRule).toBeDefined()
     expect(mainBackplateRule).not.toMatch(/transition:\s*clip-path/u)
     expect(overlayBackplateRule).toMatch(/transition:\s*clip-path 0\.25s ease-in-out/u)
-    expect(styles).toMatch(/\.layout-vertical-nav \.ps__rail-y\s*\{[\s\S]*?inset-inline-end:\s*0\.5rem !important;/)
   })
 
   it('shares the same light frost when glass navbars overlap scrolled content', () => {

src/styles/common.scss

@@ -1420,32 +1420,25 @@ html[data-theme='transparent'].transparent-glass-realtime .v-theme--transparent
   }
 }
 
-// 滚动条样式
+// 原生滚动条沿用浏览器的几何与显隐行为，只统一窄宽度和主题色。
-::-webkit-scrollbar {
+@supports (scrollbar-width: thin) {
-  block-size: 4px;
+  * {
-  inline-size: 4px;
+    scrollbar-color: rgba(var(--v-theme-perfect-scrollbar-thumb), 60%) transparent;
-  opacity: 0;
+    scrollbar-width: thin;
-  transition: opacity 0.3s;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 2px;
-  background: rgb(var(--v-theme-perfect-scrollbar-thumb));
-  box-shadow: inset 0 0 10px rgba(0, 0, 0, 20%);
-
-  @media (hover) {
-    &:hover {
-      background: #a1a1a1;
-    }
   }
 }
 
-*:hover::-webkit-scrollbar {
+// 旧版 WebKit 不支持标准滚动条属性，仅保留基础几何与主题色。
-  opacity: 1;
+@supports not (scrollbar-width: thin) {
-}
+  ::-webkit-scrollbar {
+    block-size: 4px;
+    inline-size: 4px;
+  }
 
-*:active::-webkit-scrollbar {
+  ::-webkit-scrollbar-thumb {
-  opacity: 1;
+    border-radius: 2px;
+    background: rgb(var(--v-theme-perfect-scrollbar-thumb));
+  }
 }
 
 // 组件样式

src/styles/themes/glass.scss

@@ -491,25 +491,6 @@ html[data-theme='glass'] {
     }
   }
 
-  // 滚动条与导航材质边界保持间距，避免窄轨道参与全高背板的合成。
-  .layout-vertical-nav .ps__rail-y {
-    inset-inline-end: 0.5rem !important;
-    transition: opacity 120ms linear;
-  }
-
-  .layout-vertical-nav .ps__thumb-y,
-  .layout-vertical-nav .ps__rail-y:focus > .ps__thumb-y,
-  .layout-vertical-nav .ps__rail-y:hover > .ps__thumb-y,
-  .layout-vertical-nav .ps__rail-y.ps--clicking .ps__thumb-y {
-    background-color: rgba(255, 255, 255, 28%) !important;
-    inline-size: 2px !important;
-    inset-inline-end: 0.1875rem;
-  }
-
-  .layout-vertical-nav .nav-items.ps--scrolling-y > .ps__rail-y {
-    opacity: 0.42;
-  }
-
   .layout-vertical-nav .nav-link > .router-link-exact-active {
     border: var(--glass-nav-active-border);
     background: var(--glass-nav-active-background) !important;

src/views/dashboard/AnalyticsScheduler.vue

@@ -183,6 +183,7 @@ useDataRefresh(
   flex: 1 1 auto;
   min-block-size: 0;
   overscroll-behavior: contain;
+  scrollbar-width: none;
 }
 
 .background-task-item {
@@ -242,8 +243,10 @@ useDataRefresh(
   min-block-size: 0;
 }
 
-.card-list::-webkit-scrollbar {
+@supports not (scrollbar-width: none) {
-  display: none;
+  .card-list::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 @keyframes background-task-rotate {

src/views/dashboard/MediaServerLatest.vue

@@ -229,9 +229,12 @@ onActivated(() => {
   flex-direction: column;
   min-block-size: 0;
   overflow: auto;
+  scrollbar-width: none;
 }
 
-.dashboard-media-content::-webkit-scrollbar {
+@supports not (scrollbar-width: none) {
-  display: none;
+  .dashboard-media-content::-webkit-scrollbar {
+    display: none;
+  }
 }
 </style>

src/views/dashboard/MediaServerLibrary.vue

@@ -185,9 +185,12 @@ onActivated(() => {
   flex-direction: column;
   min-block-size: 0;
   overflow: auto;
+  scrollbar-width: none;
 }
 
-.dashboard-media-content::-webkit-scrollbar {
+@supports not (scrollbar-width: none) {
-  display: none;
+  .dashboard-media-content::-webkit-scrollbar {
+    display: none;
+  }
 }
 </style>

src/views/dashboard/MediaServerPlaying.vue

@@ -229,9 +229,12 @@ onActivated(() => {
   flex-direction: column;
   min-block-size: 0;
   overflow: auto;
+  scrollbar-width: none;
 }
 
-.dashboard-media-content::-webkit-scrollbar {
+@supports not (scrollbar-width: none) {
-  display: none;
+  .dashboard-media-content::-webkit-scrollbar {
+    display: none;
+  }
 }
 </style>