feat: sidenavbar样式修改，功能扩展

package.json

@@ -18,7 +18,7 @@
     "clean": "nutui-cli clean",
     "add": "nutui-cli add",
     "lint": "nutui-cli lint",
-    "test": "cross-env NODE_ENV=test nyc mocha-webpack --webpack-config node_modules/@nutui/cli/dist_cli/webpack/test.config.js  --require node_modules/@nutui/cli/dist_cli/test/setup.js src/packages/tab/__test__/**.spec.js",
+    "test": "cross-env NODE_ENV=test nyc mocha-webpack --webpack-config node_modules/@nutui/cli/dist_cli/webpack/test.config.js  --require node_modules/@nutui/cli/dist_cli/test/setup.js src/packages/sidenavbar/__test__/**.spec.js",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "test:watch": "npm run test --watch",
     "prettier:check": "prettier -l src/**/*.{ts,js,vue,scss}",

src/assets/svg/arrow-to-right.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.64;fill:#C8C8C8;}
+</style>
+<path class="st0" d="M5.2,2.1C5.4,1.9,5.7,1.9,6,2l0,0l5.6,5.6c0.2,0.2,0.2,0.6,0,0.8l0,0L6,14.1c-0.2,0.2-0.6,0.2-0.8,0
+	c-0.2-0.2-0.2-0.6,0-0.8l0,0l5.2-5.2L5.2,2.9C5,2.7,4.9,2.4,5.2,2.1L5.2,2.1z"/>
+</svg>

src/assets/svg/avatar.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" xml:space="preserve">
+<path d="M11.9,3c3.9,0,4.8,3.2,4.8,5.2v1.3l0,0c0,1.4-0.8,3.5-2.4,4.5l-0.2,0.1c3.2,0.9,5.6,3.6,5.6,6.8V21L4.1,21v-0.1
+	c0-3.2,2.4-6,5.6-6.8L9.6,14C8,12.9,7.2,10.9,7.2,9.5V8.2l0,0C7.1,6.2,8,3,11.9,3z"/>
+</svg>

src/assets/svg/nav.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<path id="path-1_1_" d="M12.5,1.3c5.1,0,9.3,4.2,9.3,9.3c0,2.4-0.9,4.6-2.5,6.3L19,17.2l-4.9,5.1
+	c-0.8,0.8-2.1,0.9-3,0.1l-5.1-5c-1.8-1.7-2.9-4.1-2.9-6.7C3.2,5.5,7.3,1.3,12.5,1.3z M12.5,7c-2,0-3.6,1.6-3.6,3.6s1.6,3.6,3.6,3.6
+	s3.6-1.6,3.6-3.6S14.5,7,12.5,7z"/>
+</svg>

src/assets/svg/set.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<path id="path-1_1_" d="M16.8,3c0.4,0,0.9,0.3,1.1,0.6l4.6,7.8c0.2,0.3,0.2,0.9,0,1.2l-4.6,7.8
+	c-0.2,0.3-0.7,0.6-1.1,0.6H7.5c-0.4,0-0.9-0.3-1.1-0.6l-4.6-7.8c-0.2-0.3-0.2-0.9,0-1.2l4.6-7.8C6.6,3.3,7.1,3,7.5,3H16.8z
+	 M12.2,8.2c-2.1,0-3.8,1.7-3.8,3.8s1.7,3.8,3.8,3.8S16,14.1,16,12S14.2,8.2,12.2,8.2z"/>
+</svg>

src/assets/svg/star.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<path d="M17.3,22.4c0.7,0.4,1.6,0.1,2-0.6c0.2-0.3,0.2-0.6,0.1-0.9l-1-5.7l4.2-4c0.6-0.6,0.6-1.5,0-2.1
+	c-0.2-0.2-0.5-0.4-0.9-0.4L16,7.6l-2.6-5.2c-0.4-0.7-1.3-1-2-0.7c-0.3,0.1-0.5,0.4-0.7,0.7L8.2,7.6L2.4,8.5C1.5,8.6,1,9.3,1.1,10.2
+	c0,0.3,0.2,0.6,0.4,0.9l4.2,4l-1,5.7c-0.1,0.8,0.4,1.6,1.2,1.7c0.3,0.1,0.7,0,0.9-0.1l5.2-2.7L17.3,22.4z"/>
+</svg>

src/packages/icon/icon.vue

@@ -2,7 +2,7 @@
   <i :class="['nut-icon', 'nut-icon-' + type]" v-html="icon" :style="{ height: size, width: size, color: color }"> </i>
 </template>
 <script>
-const types = ['top', 'action', 'cross', 'down', 'right', 'more', 'plus', 'search', 'trolley', 'tick', 'minus', 'circle-cross'];
+const types = ['top', 'action', 'cross', 'down', 'right', 'more', 'plus', 'search', 'trolley', 'tick', 'minus', 'circle-cross', 'avatar', 'nav', 'star', 'set'];
 
 export default {
   name: 'nut-icon',

src/packages/sidenavbar/__test__/sidenavbar.spec.js

@@ -1,7 +1,83 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, Mount } from '@vue/test-utils';
 import Vue from 'vue';
 import SideNavBar from '../sidenavbar.vue';
+import SubSideNavBar from '../../subsidenavbar/subsidenavbar.vue';
+import SideNavBarItem from '../../sidenavbaritem/sidenavbaritem.vue';
 
 describe('SideNavBar.vue', () => {
-    
+    const wrapper = shallowMount(SideNavBar, {
+        slots: {
+            default: [SubSideNavBar, SubSideNavBar]
+        },
+        propsData: {
+            offset: 30
+        }
+    });
+
+    const sub = shallowMount(SubSideNavBar, {
+        slots: {
+            default: [SideNavBarItem, SideNavBarItem, SideNavBarItem]
+        },
+        propsData: {
+            title: '菜单测试一',
+            ikey: 12,
+            open: false
+        }
+    })
+
+    const item = shallowMount(SideNavBarItem, {
+        propsData: {
+            title: '子菜单测试一',
+            ikey: 24
+        }
+    })
+
+    it('sidenavbar slots', () => {
+        return Vue.nextTick().then(function () {
+            expect(wrapper.findAll(".nut-subsidenavbar").length).toBe(2)
+        })
+    });
+
+    it('sidenavbar offset', () => {
+        return Vue.nextTick().then(function () {
+            expect(wrapper.findAll(".item-title").at(0).element.style.paddingLeft).toBe('30px')
+        })
+    });
+
+    it('subsidenavbar slots', () => {
+        return Vue.nextTick().then(function () {
+            expect(sub.findAll(".nut-sidenavbaritem").length).toBe(3)
+        })
+    });
+
+    it('subsidenavbar title', () => {
+        return Vue.nextTick().then(function () {
+            expect(sub.findAll(".sidenavbar-title").at(0).text()).toBe('菜单测试一')
+        })
+    });
+
+    it('subsidenavbar ikey', () => {
+        return Vue.nextTick().then(function () {
+            expect(sub.attributes().ikey).toBe('12')
+        })
+    });
+
+    it('subsidenavbar open', () => {
+        return Vue.nextTick().then(function () {
+            expect(sub.findAll(".sub-sidenavbar-list").at(0).element.style.height).toBe('0px')
+        })
+    });
+
+    it('sidenavbaritem title', () => {
+        return Vue.nextTick().then(function () {
+            expect(item.findAll(".item-title").at(0).text()).toBe('子菜单测试一')
+        })
+    });
+
+    it('sidenavbaritem ikey', () => {
+        return Vue.nextTick().then(function () {
+            expect(item.attributes().ikey).toBe('24')
+        })
+    });
+
 });

src/packages/sidenavbar/demo.vue

@@ -1,33 +1,61 @@
 <template>
   <div class="demo-list">
-    <h4>基本用法</h4>
+    <h4>基础样式</h4>
     <div>
-      <nut-cell :is-link="true" :show-icon="true" @click.native="showNav">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showNav3">
         <span slot="title">
-          <label>右侧</label>
+          <label>展示一级</label>
         </span>
       </nut-cell>
-      <nut-popup position="right" v-model="show1" :style="{ width, height }">
-        <nut-sidenavbar :show="show1">
-          <nut-subsidenavbar title="图像理解" ikey="3" :open="false">
-            <nut-sidenavbaritem ikey="4" title="菜品识别"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="5" title="拍照购"></nut-sidenavbaritem>
+      <nut-popup position="right" v-model="show3" :style="{ width, height }">
+        <nut-sidenavbar>
+          <nut-subsidenavbar title="菜单内容一" ikey="1" :open="false"></nut-subsidenavbar>
+          <nut-subsidenavbar title="菜单内容二" ikey="2"></nut-subsidenavbar>
+          <nut-subsidenavbar title="菜单内容三" ikey="3">
+              <div slot="desc" class="desc">这里是对菜单的解释说明</div>
           </nut-subsidenavbar>
-          <nut-subsidenavbar title="自然语言处理" ikey="12">
-            <nut-sidenavbaritem ikey="13" title="词法分析"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="14" title="句法分析"></nut-sidenavbaritem>
+          <nut-subsidenavbar title="菜单内容四" ikey="4">
+              <div slot="desc" class="desc">这里是对菜单的解释说明</div>
+              <a href="javascript:;" slot="oper" class="oper">操作</a>
           </nut-subsidenavbar>
         </nut-sidenavbar>
       </nut-popup>
     </div>
     <div>
-      <nut-cell :is-link="true" :show-icon="true" @click.native="showNav2">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showNav4">
         <span slot="title">
-          <label>左侧</label>
+          <label>展示icon</label>
         </span>
       </nut-cell>
-      <nut-popup position="left" v-model="show2" :style="{ width, height }">
+      <nut-popup position="right" v-model="show4" :style="{ width, height }">
         <nut-sidenavbar>
+          <nut-subsidenavbar title="菜单内容一" ikey="1" :open="false">
+              <nut-icon slot="icon" color="#6933ff" type="avatar"></nut-icon>
+          </nut-subsidenavbar>
+          <nut-subsidenavbar title="菜单内容二" ikey="2">
+              <nut-icon slot="icon" type="nav" color="#ff613e"></nut-icon>
+          </nut-subsidenavbar>
+          <nut-subsidenavbar title="菜单内容三" ikey="3">
+              <nut-icon slot="icon" type="star" color="#ffb600"></nut-icon>
+              <div slot="desc" class="desc">这里是对菜单的解释说明</div>
+          </nut-subsidenavbar>
+          <nut-subsidenavbar title="菜单内容四" ikey="4">
+              <nut-icon slot="icon" type="set" color="#2770f9"></nut-icon>
+              <div slot="desc" class="desc">这里是对菜单的解释说明</div>
+              <a href="javascript:;" slot="oper" class="oper">操作</a>
+          </nut-subsidenavbar>
+        </nut-sidenavbar>
+      </nut-popup>
+    </div>
+    <h4>多级展示</h4>
+    <div>
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showNav">
+        <span slot="title">
+          <label>右侧</label>
+        </span>
+      </nut-cell>
+      <nut-popup position="right" v-model="show1" :style="{ width, height }">
+        <nut-sidenavbar :show="show1">
           <nut-subsidenavbar title="图像理解" ikey="3" :open="false">
             <nut-sidenavbaritem ikey="4" title="菜品识别"></nut-sidenavbaritem>
             <nut-sidenavbaritem ikey="5" title="拍照购"></nut-sidenavbaritem>
@@ -39,15 +67,14 @@
         </nut-sidenavbar>
       </nut-popup>
     </div>
-    <h4>导航嵌套（建议最多三层）,点击第一条回调</h4>
     <div>
-      <nut-cell :is-link="true" :show-icon="true" @click.native="showNav3">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showNav5">
         <span slot="title">
-          <label>显示</label>
+          <label>异步</label>
         </span>
       </nut-cell>
-      <nut-popup position="right" v-model="show3" :style="{ width, height }">
-        <nut-sidenavbar :show="show3">
+      <nut-popup position="right" v-model="show5" :style="{ width, height }">
+        <nut-sidenavbar :show="show5">
           <nut-sidenavbaritem ikey="1" title="人脸识别" @click="handleClick('人脸识别')"></nut-sidenavbaritem>
           <nut-sidenavbaritem ikey="2" title="云存自然语言处理"></nut-sidenavbaritem>
           <nut-subsidenavbar title="图像理解" ikey="3" :open="false">
@@ -81,8 +108,9 @@ export default {
   data() {
     return {
       show1: false,
-      show2: false,
       show3: false,
+      show4: false,
+      show5: false,
       width: '80%',
       height: '100%',
       navs: []
@@ -107,18 +135,33 @@ export default {
   methods: {
     showNav() {
       this.show1 = true;
-      this.show2 = false;
       this.show3 = false;
+      this.show4 = false;
+      this.show5 = false;
     },
     showNav2() {
       this.show1 = false;
-      this.show2 = true;
       this.show3 = false;
+      this.show4 = false;
+      this.show5 = false;
     },
     showNav3() {
       this.show1 = false;
-      this.show2 = false;
       this.show3 = true;
+      this.show4 = false;
+      this.show5 = false;
+    },
+    showNav4() {
+      this.show1 = false;
+      this.show3 = false;
+      this.show4 = true;
+      this.show5 = false;
+    },
+    showNav5() {
+      this.show1 = false;
+      this.show3 = false;
+      this.show4 = false;
+      this.show5 = true;
     },
     handleClick(str) {
       alert(str);
@@ -134,4 +177,20 @@ export default {
 .popup-box {
   z-index: 9999;
 }
+.desc{
+    color: #c8c8c8;
+    font-size: 13px;
+}
+.oper{
+    display: inline-block;
+    text-decoration: none;
+    width: 50px;
+    height: 28px;
+    line-height: 28px;
+    color: #fff;
+    font-size: 13px;
+    border-radius: 4px;
+    background-color: #e1251b;
+    text-align: center;
+}
 </style>

src/packages/sidenavbar/doc.md

@@ -5,49 +5,56 @@
 ## 基础用法
 
 ```html
-<nut-popup
-    position="right"
-    v-model="show1"
-    :style="{ width, height }"
->
-    <nut-sidenavbar :show="show1">
-        <nut-subsidenavbar title="图像理解" ikey="3" :open="false">
-            <nut-sidenavbaritem ikey="4" title="菜品识别"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="5" title="拍照购"></nut-sidenavbaritem>
+<nut-popup position="right" v-model="show3" :style="{ width, height }">
+    <nut-sidenavbar>
+        <nut-subsidenavbar title="菜单内容一" ikey="1" :open="false"></nut-subsidenavbar>
+        <nut-subsidenavbar title="菜单内容二" ikey="2"></nut-subsidenavbar>
+        <nut-subsidenavbar title="菜单内容三" ikey="3">
+            <div slot="desc" class="desc">这里是对菜单的解释说明</div>
         </nut-subsidenavbar>
-        <nut-subsidenavbar title="自然语言处理" ikey="12">
-            <nut-sidenavbaritem ikey="13" title="词法分析"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="14" title="句法分析"></nut-sidenavbaritem>
+        <nut-subsidenavbar title="菜单内容四" ikey="4">
+            <div slot="desc" class="desc">这里是对菜单的解释说明</div>
+            <a href="javascript:;" slot="oper" class="oper">操作</a>
         </nut-subsidenavbar>
     </nut-sidenavbar>
 </nut-popup>
 ```
 
-## 嵌套（建议最多三层）
+## 展示icon
+
 ```html
-<nut-popup
-    position="right"
-    v-model="show3"
-    :style="{ width, height }"
->
-    <nut-sidenavbar :show="show3">
-        <nut-sidenavbaritem ikey="1" title="人脸识别" @click="handleClick('人脸识别')"></nut-sidenavbaritem>
-        <nut-sidenavbaritem ikey="2" title="云存自然语言处理"></nut-sidenavbaritem>
-        <nut-subsidenavbar title="图像理解" ikey="3" :open="false">
-            <nut-sidenavbaritem ikey="4" title="菜品识别"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="5" title="拍照购"></nut-sidenavbaritem>
+<nut-popup position="right" v-model="show4" :style="{ width, height }">
+    <nut-sidenavbar>
+        <nut-subsidenavbar title="菜单内容一" ikey="1" :open="false">
+            <nut-icon slot="icon" color="#6933ff" type="avatar"></nut-icon>
         </nut-subsidenavbar>
-        <nut-subsidenavbar title="智能城市AI" ikey="6">
-            <nut-sidenavbaritem ikey="7" title="企业风险预警模型"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="8" title="水质量检测"></nut-sidenavbaritem>
-            <nut-subsidenavbar title="人体识别" ikey="9">
-                <nut-sidenavbaritem ikey="10" title="人体检测"></nut-sidenavbaritem>
-                <nut-sidenavbaritem ikey="11" title="细粒度人像分割"></nut-sidenavbaritem>
-            </nut-subsidenavbar>
+        <nut-subsidenavbar title="菜单内容二" ikey="2">
+            <nut-icon slot="icon" type="nav" color="#ff613e"></nut-icon>
+        </nut-subsidenavbar>
+        <nut-subsidenavbar title="菜单内容三" ikey="3">
+            <nut-icon slot="icon" type="star" color="#ffb600"></nut-icon>
+            <div slot="desc" class="desc">这里是对菜单的解释说明</div>
+        </nut-subsidenavbar>
+        <nut-subsidenavbar title="菜单内容四" ikey="4">
+            <nut-icon slot="icon" type="set" color="#2770f9"></nut-icon>
+            <div slot="desc" class="desc">这里是对菜单的解释说明</div>
+            <a href="javascript:;" slot="oper" class="oper">操作</a>
+        </nut-subsidenavbar>
+    </nut-sidenavbar>
+</nut-popup>
+```
+
+## 多级
+```html
+<nut-popup position="right" v-model="show1" :style="{ width, height }">
+    <nut-sidenavbar :show="show1">
+        <nut-subsidenavbar title="图像理解" ikey="3" :open="false">
+        <nut-sidenavbaritem ikey="4" title="菜品识别"></nut-sidenavbaritem>
+        <nut-sidenavbaritem ikey="5" title="拍照购"></nut-sidenavbaritem>
         </nut-subsidenavbar>
         <nut-subsidenavbar title="自然语言处理" ikey="12">
-            <nut-sidenavbaritem ikey="13" title="词法分析"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="14" title="句法分析"></nut-sidenavbaritem>
+        <nut-sidenavbaritem ikey="13" title="词法分析"></nut-sidenavbaritem>
+        <nut-sidenavbaritem ikey="14" title="句法分析"></nut-sidenavbaritem>
         </nut-subsidenavbar>
     </nut-sidenavbar>
 </nut-popup>
@@ -60,6 +67,7 @@ export default {
     return {
         show1: false,
         show3: false,
+        show4: false,
         width: '80%',
         height: '100%'
     };
@@ -71,10 +79,17 @@ export default {
     showNav() {
         this.show1 = true
         this.show3 = false
+        this.show4 = false
     },
     showNav3() {
         this.show1 = false
         this.show3 = true
+        this.show4 = false
+    },
+    showNav4() {
+        this.show1 = false
+        this.show3 = false
+        this.show4 = true
     },
     handleClick(str) {
         alert(str)
@@ -99,7 +114,7 @@ export default {
 ## SubSideNavBar Event
 | 字段 | 说明 | 回调参数
 | ----- | ----- | -----
-| titleClick | 导航点击 | 无
+| title-click | 导航点击 | 无
 
 ## SideNavBarItem
 | 字段 | 说明 | 类型 | 默认值

src/packages/sidenavbar/sidenavbar.vue

@@ -13,22 +13,24 @@ export default {
   props: {
     offset: {
       type: [String, Number],
-      default: 15
+      default: 20
     }
   },
   mounted() {
-    this.observer = new MutationObserver(
-      function(mutations) {
-        this.handleSlots();
-      }.bind(this)
-    );
+    this.handleSlots();
+    // this.observer = new MutationObserver(
+    //   function(mutations) {
+    //     this.count = 1
+    //     this.handleSlots();
+    //   }.bind(this)
+    // );
 
-    this.observer.observe(this.$refs.list, {
-      attributes: true,
-      childList: true,
-      characterData: true,
-      subtree: true
-    });
+    // this.observer.observe(this.$refs.list, {
+    //   attributes: true,
+    //   childList: true,
+    //   characterData: true,
+    //   subtree: true
+    // });
   },
   data() {
     return {
@@ -51,12 +53,13 @@ export default {
     setPaddingLeft(nodeList, level = 1) {
       for (let i = 0; i < nodeList.length; i++) {
         let item = nodeList[i];
+        console.log(this.offset)
         item.children[0].style.paddingLeft = this.offset * level + 'px';
-        if (item.className !== 'nut-sidenavbaritem') {
+        if (!item.className.includes('nut-sidenavbaritem')) {
           this.setPaddingLeft(Array.from(item.children[1].children), ++this.count);
         }
       }
-      this.count = 1;
+      this.count--
     }
   }
 };

src/packages/sidenavbaritem/sidenavbaritem.scss

@@ -1,8 +1,9 @@
 .nut-sidenavbaritem {
-  height: 40px;
-  line-height: 40px;
+  height: 48px;
+  line-height: 48px;
   .item-title {
-    color: $title-color;
+    color: $text-black-2;
     background-color: #fff;
+    text-decoration: none;
   }
 }

src/packages/subsidenavbar/subsidenavbar.scss

@@ -4,21 +4,30 @@
   width: 100%;
   position: relative;
   .item-title {
-    display: block;
+    display: flex;
     width: 100%;
-    height: 40px;
+    height: 48px;
     position: relative;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     box-sizing: border-box;
-    border-bottom: 1px solid $light-color;
-    color: $title-color;
-    font-size: $font-size-large;
-    background-color: $light-color;
+    border: 0;
+    color: $text-black-2;
+    font-size: $font-size-body-normal;
+    background-color: #fff;
+    align-items: center;
+    .subsidenavbar-icon {
+        margin-right: 10px;
+    }
     .sidenavbar-title {
-      line-height: 40px;
-      color: $title-color;
+      display: flex;
+      width: 80%;
+      height: 100%;
+      flex-flow: column;
+      color: $text-black-2;
+      text-decoration: none;
+      justify-content: center;
     }
   }
   .sidenavbar-icon {

src/packages/subsidenavbar/subsidenavbar.vue

@@ -1,8 +1,15 @@
 <template>
   <div class="nut-subsidenavbar sidenavbar-item" :ikey="ikey">
     <div class="item-title" @click.stop="handleClick">
-      <a href="javascript:;" class="sidenavbar-title">{{ title }}</a>
-      <span class="sidenavbar-icon"><nut-icon type="down" :class="direction"></nut-icon></span>
+      <span v-if="$slots.icon" class="subsidenavbar-icon"><slot name="icon"></slot></span>
+      <a href="javascript:;" class="sidenavbar-title">
+        {{ title }}
+        <slot name="desc"></slot>
+      </a>
+      <span class="sidenavbar-icon">
+          <span v-if="$slots.oper"><slot name="oper"></slot></span>
+          <nut-icon v-if="!$slots.oper" type="self" :url="require('../../assets/svg/arrow-to-right.svg')"></nut-icon>
+      </span>
     </div>
     <div class="sub-sidenavbar-list" :class="!direction ? 'nutFadeIn' : 'nutFadeOut'" :style="{ height: !direction ? 'auto' : 0 }">
       <slot></slot>
@@ -36,7 +43,7 @@ export default {
   },
   methods: {
     handleClick() {
-      this.$emit('titleClick');
+      this.$emit('title-click');
       this.direction = !this.direction ? 'up' : '';
     }
   }