fix: scrollbar max-height & use path to active in service layout

demo/debugComponents/scrollbarDebug/case1.demo.vue

@@ -9,7 +9,7 @@
     >
       <!--EXAMPLE_START-->
       <div style="width: 400px; height: 300px;">
-        <n-scrollbar>
+        <n-scrollbar style="max-height: 200px;">
           <div style="background: linear-gradient(red, blue); width: 800px; height: 500px;">
             666
           </div>

demo/debugComponents/scrollbarDebug/index.vue

@@ -9,17 +9,17 @@
       </n-gradient-text>
     </div>
     <div class="n-doc-body">
-      <scaffold />
+      <case1 />
     </div>
   </div>
 </template>
 
 <script>
-import scaffold from './scaffold.demo.vue'
+import case1 from './case1.demo.vue'
 
 export default {
   components: {
-    scaffold
+    case1
   },
   data () {
     return {

demo/debugComponents/scrollbarDebug2/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <div style="height: 10px; width: 100%; background-color: red; min-width: 1000px;" />
+    <case2 />
+  </div>
+</template>
+
+<script>
+import case2 from './case2.demo.vue'
+
+export default {
+  components: {
+    case2
+  },
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+  }
+}
+</script>

demo/demo.vue

@@ -195,6 +195,10 @@ export default {
             {
               name: 'ScrollbarDebug',
               path: '/n-scrollbar-debug'
+            },
+            {
+              name: 'ScrollbarDebug2',
+              path: '/n-scrollbar-debug2'
             }
           ]
         }

demo/index.js

@@ -34,6 +34,7 @@ import timePickerDemo from './components/timePickerDemo'
 import confirmDemo from './components/confirmDemo'
 
 import scrollbarDebug from './debugComponents/scrollbarDebug'
+import scrollbarDebug2 from './debugComponents/scrollbarDebug2'
 import badgeDemo from './components/badgeDemo'
 import stepsDemo from './components/stepsDemo'
 import notificationDemo from './components/notificationDemo'
@@ -107,7 +108,9 @@ const routes = [
       { path: '/n-collapse', component: collapseDemo },
       { path: '/n-progress', component: progressDemo },
       { path: '/n-tag', component: tagDemo },
-      { path: '/n-timeline', component: timelineDemo }
+      { path: '/n-timeline', component: timelineDemo },
+      { path: '/n-scrollbar-debug2', component: scrollbarDebug2 }
+
     ]
   },
   {

packages/common/Scrollbar/src/main.vue

@@ -1,9 +1,6 @@
 <template>
   <div
     class="n-scrollbar"
-    :style="maxHeight === null ? {} : {
-      maxHeight: maxHeight + 'px'
-    }"
     @mouseenter="enterScrollWrapper"
     @mouseleave="leaveScrollWrapper"
     @dragstart.capture="handleDragStart"
@@ -11,9 +8,6 @@
     <div
       ref="scrollContainer"
       class="n-scrollbar-container"
-      :style="maxHeight === null ? {} : {
-        maxHeight: maxHeight + 'px'
-      }"
       @scroll="handleScroll"
     >
       <div
@@ -54,7 +48,8 @@
           :style="{
             height: scrollbarSize,
             width: horizontalScrollbarWidthPx,
-            left: horizontalScrollbarLeftPx
+            left: horizontalScrollbarLeftPx,
+            borderRadius: scrollbarBorderRadius
           }"
           @mousedown="handleHorizontalScrollMouseDown"
           @mouseup="handleHorizontalScrollMouseUp"
@@ -77,10 +72,6 @@ export default {
     duration: {
       type: Number,
       default: 0
-    },
-    maxHeight: {
-      type: Number,
-      default: null
     }
   },
   data () {

packages/nimbus/ServiceLayout/src/main.vue

@@ -40,7 +40,7 @@
             <div
               v-if="!item.childItems"
               class="n-nimbus-service-layout-drawer__item"
-              :class="{ 'n-nimbus-service-layout-drawer__item--active': activeItemName === item.name }"
+              :class="{ 'n-nimbus-service-layout-drawer__item--active': activeItemPath === item.path }"
               @click="makeActive(item)"
             >
               <div class="n-nimbus-service-layout-drawer-item__icon" />
@@ -52,7 +52,7 @@
               <div
                 class="n-nimbus-service-layout-drawer__item n-nimbus-service-layout-drawer__item--is-group-header"
                 :class="{
-                  'n-nimbus-service-layout-drawer__item--group-item-is-choosed': !!(1 + item.childItems.findIndex(item => item.name === activeItemName)),
+                  'n-nimbus-service-layout-drawer__item--group-item-is-choosed': !!(1 + item.childItems.findIndex(item => item.name === activeItemPath)),
                   'n-nimbus-service-layout-drawer__item--collapsed': item.isCollapsed
                 }"
                 @click="toggleGroupHeaderCollapse(item.name)"
@@ -74,7 +74,7 @@
                     v-for="childItem in item.childItems"
                     :key="childItem.name"
                     class="n-nimbus-service-layout-drawer__item n-nimbus-service-layout-drawer__item--is-group-item"
-                    :class="{ 'n-nimbus-service-layout-drawer__item--active': activeItemName === childItem.name }"
+                    :class="{ 'n-nimbus-service-layout-drawer__item--active': activeItemPath === childItem.path }"
                     @click="makeActive(childItem)"
                   >
                     <span>{{ childItem.name }}</span>
@@ -124,7 +124,7 @@ export default {
   data () {
     return {
       isCollapsed: false,
-      activeItemName: '',
+      activeItemPath: null,
       itemsWithCollapseStatus: this.items.map(item => ({
         ...item,
         isCollapsed: false
@@ -150,13 +150,13 @@ export default {
     syncActiveItemWithPath (path) {
       for (const item of this.items) {
         if (item.path === path) {
-          this.activeItemName = item.name
+          this.activeItemPath = item.path
           return
         }
         if (item.childItems) {
           for (const childItem of item.childItems) {
             if (childItem.path === path) {
-              this.activeItemName = childItem.name
+              this.activeItemPath = childItem.path
               return
             }
           }
@@ -167,7 +167,7 @@ export default {
       this.isCollapsed = !this.isCollapsed
     },
     makeActive (item) {
-      this.activeItemName = item.name
+      this.activeItemPath = item.path
       this.$emit('input', item.name)
       if (this.$router) {
         this.$router.push(item.path)

styles/Scrollbar.scss

@@ -44,6 +44,7 @@
   width: 100%;
   overflow: scroll;
   height: 100%;
+  max-height: inherit;
   scrollbar-width: none;
   &::-webkit-scrollbar {
     width: 0;