chore(side-navbar): modify class name

src/packages/__VUE/sidenavbar/__tests__/index.spec.ts

@@ -26,7 +26,7 @@ const template = `
   <nut-sub-side-navbar title="智能城市AI" ikey="6">
     <nut-sub-side-navbar title="人体识别1" ikey="9" :open="false">
       <nut-side-navbar-item ikey="10" title="人体检测1"></nut-side-navbar-item>
-      <nut-sidenavbar-item ikey="11" title="细粒度人像分割1"></nut-sidenavbar-item>
+      <nut-side-navbar-item ikey="11" title="细粒度人像分割1"></nut-side-navbar-item>
     </nut-sub-side-navbar>
     <nut-sub-side-navbar title="人体识别2" ikey="12">
       <nut-side-navbar-item ikey="13" title="人体检测2"></nut-side-navbar-item>
@@ -49,7 +49,7 @@ test('render offset props', async () => {
 
   await nextTick();
 
-  const subSideNavBar = wrapper.findAll('.nut-subsidenavbar__title');
+  const subSideNavBar = wrapper.findAll('.nut-sub-side-navbar__title');
 
   expect((subSideNavBar[0].element as HTMLElement).style.paddingLeft).toEqual('30px');
   expect((subSideNavBar[1].element as HTMLElement).style.paddingLeft).toEqual('60px');
@@ -69,7 +69,7 @@ test('render subsidenavbar open props', async () => {
 
   await nextTick();
 
-  const subSideNavBar = wrapper.findAll('.nut-subsidenavbar__list');
+  const subSideNavBar = wrapper.findAll('.nut-sub-side-navbar__list');
 
   expect((subSideNavBar[1].element as HTMLElement).style.height).toEqual('0px');
 });
@@ -87,8 +87,8 @@ test('subsidenavbar trigger click', async () => {
 
   await nextTick();
 
-  const subSideNavBarTitle = wrapper.findAll('.nut-subsidenavbar__title');
-  const subSideNavBarList = wrapper.findAll('.nut-subsidenavbar__list');
+  const subSideNavBarTitle = wrapper.findAll('.nut-sub-side-navbar__title');
+  const subSideNavBarList = wrapper.findAll('.nut-sub-side-navbar__list');
 
   await subSideNavBarTitle[0].trigger('click');
   await sleep(100);

src/packages/__VUE/sidenavbar/index.scss

@@ -1,4 +1,4 @@
-.nut-sidenavbar {
+.nut-side-navbar {
   height: 100%;
   overflow: auto;
   display: block;

src/packages/__VUE/sidenavbar/index.taro.vue

@@ -1,7 +1,7 @@
 <template>
   <view :class="classes">
-    <view class="nut-sidenavbar__content">
-      <view class="nut-sidenavbar__content__list" ref="list">
+    <view class="nut-side-navbar__content">
+      <view class="nut-side-navbar__content__list" ref="list">
         <slot></slot>
       </view>
     </view>
@@ -28,7 +28,7 @@ export default create({
     });
 
     const classes = computed(() => {
-      const prefixCls = 'nut-sidenavbar';
+      const prefixCls = componentName;
       return {
         [prefixCls]: true
       };
@@ -38,7 +38,7 @@ export default create({
       for (let i = 0; i < nodeList.length; i++) {
         let item = nodeList[i];
         item.children[0].style.paddingLeft = props.offset * level + 'px';
-        if (!item.className.includes('nut-sidenavbaritem')) {
+        if (!item.className.includes('nut-side-navbar-item')) {
           setPaddingLeft(Array.from(item.children[1].children), ++state.count);
         }
       }

src/packages/__VUE/sidenavbar/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view :class="classes">
-    <view class="nut-sidenavbar__content">
-      <view class="nut-sidenavbar__content__list" ref="list">
+    <view class="nut-side-navbar__content">
+      <view class="nut-side-navbar__content__list" ref="list">
         <slot></slot>
       </view>
     </view>
@@ -27,7 +27,7 @@ export default create({
     });
 
     const classes = computed(() => {
-      const prefixCls = 'nut-sidenavbar';
+      const prefixCls = componentName;
       return {
         [prefixCls]: true
       };
@@ -37,7 +37,7 @@ export default create({
       for (let i = 0; i < nodeList.length; i++) {
         let item = nodeList[i];
         item.children[0].style.paddingLeft = +props.offset * level + 'px';
-        if (!item.className.includes('nut-sidenavbaritem')) {
+        if (!item.className.includes('nut-side-navbar-item')) {
           setPaddingLeft(Array.from(item.children[1].children), ++state.count);
         }
       }

src/packages/__VUE/sidenavbaritem/index.scss

@@ -1,5 +1,5 @@
 .nut-theme-dark {
-  .nut-sidenavbaritem {
+  .nut-side-navbar-item {
     background-color: $dark-background2;
     &__title {
       background-color: $dark-background2;
@@ -7,11 +7,12 @@
     }
   }
 }
-.nut-sidenavbaritem {
+.nut-side-navbar-item {
   height: $sidenavbar-item-height;
   line-height: $sidenavbar-item-line-height;
   display: block;
   font-size: $sidenavbar-item-font-size;
+  background-color: $sidenavbar-item-title-bg-color;
   &__title {
     color: $sidenavbar-item-title-color;
     background-color: $sidenavbar-item-title-bg-color;

src/packages/__VUE/sidenavbaritem/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <view class="nut-sidenavbaritem" @click.stop="handleClick" :ikey="ikey">
-    <span class="nut-sidenavbaritem__title">
+  <view :class="classes" @click.stop="handleClick" :ikey="ikey">
+    <span class="nut-side-navbar-item__title">
       {{ title }}
     </span>
   </view>
@@ -23,7 +23,7 @@ export default create({
   emits: ['click'],
   setup: (props: any, context: any) => {
     const classes = computed(() => {
-      const prefixCls = 'nut-sidenavbaritem';
+      const prefixCls = componentName;
       return {
         [prefixCls]: true
       };

src/packages/__VUE/subsidenavbar/index.scss

@@ -1,5 +1,5 @@
 .nut-theme-dark {
-  .nut-subsidenavbar {
+  .nut-sub-side-navbar {
     background-color: $dark-background2;
     &__title {
       background-color: $dark-background3;
@@ -10,7 +10,7 @@
     }
   }
 }
-.nut-subsidenavbar {
+.nut-sub-side-navbar {
   display: grid;
   float: left;
   width: 100%;

src/packages/__VUE/subsidenavbar/index.vue

@@ -1,10 +1,10 @@
 <template>
   <view :class="classes" :ikey="ikey">
-    <view class="nut-subsidenavbar__title" @click.stop="handleClick">
-      <span class="nut-subsidenavbar__title__text">{{ title }}</span>
-      <span class="nut-subsidenavbar__title__icon"><nut-icon name="down-arrow" :class="direction"></nut-icon></span>
+    <view class="nut-sub-side-navbar__title" @click.stop="handleClick">
+      <span class="nut-sub-side-navbar__title__text">{{ title }}</span>
+      <span class="nut-sub-side-navbar__title__icon"><nut-icon name="down-arrow" :class="direction"></nut-icon></span>
     </view>
-    <view class="nut-subsidenavbar__list" :class="!direction ? 'nutFadeIn' : 'nutFadeOut'" :style="style">
+    <view class="nut-sub-side-navbar__list" :class="!direction ? 'nutFadeIn' : 'nutFadeOut'" :style="style">
       <slot></slot>
     </view>
   </view>
@@ -35,7 +35,7 @@ export default create({
     });
 
     const classes = computed(() => {
-      const prefixCls = 'nut-subsidenavbar';
+      const prefixCls = componentName;
       return {
         [prefixCls]: true
       };