chore: sidenavbar 使用名称变更

src/config.json

@@ -406,7 +406,7 @@
         },
         {
           "version": "3.1.15",
-          "name": "SideNavBar",
+          "name": "SideNavbar",
           "type": "component",
           "cName": "侧边栏导航",
           "desc": "垂直展示的导航栏，用于内容选择和切换",
@@ -418,7 +418,7 @@
         },
         {
           "version": "3.1.15",
-          "name": "SideNavBarItem",
+          "name": "SideNavbarItem",
           "type": "component",
           "cName": "侧边栏导航子组件",
           "desc": "",
@@ -431,7 +431,7 @@
         },
         {
           "version": "3.1.15",
-          "name": "SubSideNavBar",
+          "name": "SubSideNavbar",
           "type": "component",
           "cName": "侧边栏导航子组件",
           "desc": "",

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

@@ -22,26 +22,26 @@ afterAll(() => {
 });
 
 const template = `
-<nut-sidenavbar offset="30">
-  <nut-subsidenavbar title="智能城市AI" ikey="6">
-    <nut-subsidenavbar title="人体识别1" ikey="9" :open="false">
-      <nut-sidenavbaritem ikey="10" title="人体检测1"></nut-sidenavbaritem>
-      <nut-sidenavbaritem ikey="11" title="细粒度人像分割1"></nut-sidenavbaritem>
-    </nut-subsidenavbar>
-    <nut-subsidenavbar title="人体识别2" ikey="12">
-      <nut-sidenavbaritem ikey="13" title="人体检测2"></nut-sidenavbaritem>
-      <nut-sidenavbaritem ikey="14" title="细粒度人像分割2"></nut-sidenavbaritem>
-    </nut-subsidenavbar>
-  </nut-subsidenavbar>
-</nut-sidenavbar>
+<nut-side-navbar offset="30">
+  <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-sub-side-navbar>
+    <nut-sub-side-navbar title="人体识别2" ikey="12">
+      <nut-side-navbar-item ikey="13" title="人体检测2"></nut-side-navbar-item>
+      <nut-side-navbar-item ikey="14" title="细粒度人像分割2"></nut-side-navbar-item>
+    </nut-sub-side-navbar>
+  </nut-sub-side-navbar>
+</nut-side-navbar>
 `;
 
 test('render offset props', async () => {
   const wrapper = mount({
     components: {
-      'nut-sidenavbar': SideNavBar,
-      'nut-sidenavbaritem': SideNavBarItem,
-      'nut-subsidenavbar': SubSideNavBar
+      'nut-side-navbar': SideNavBar,
+      'nut-side-navbar-item': SideNavBarItem,
+      'nut-sub-side-navbar': SubSideNavBar
     },
     template,
     setup: () => {}
@@ -59,9 +59,9 @@ test('render offset props', async () => {
 test('render subsidenavbar open props', async () => {
   const wrapper = mount({
     components: {
-      'nut-sidenavbar': SideNavBar,
-      'nut-sidenavbaritem': SideNavBarItem,
-      'nut-subsidenavbar': SubSideNavBar
+      'nut-side-navbar': SideNavBar,
+      'nut-side-navbar-item': SideNavBarItem,
+      'nut-sub-side-navbar': SubSideNavBar
     },
     template,
     setup: () => {}
@@ -77,9 +77,9 @@ test('render subsidenavbar open props', async () => {
 test('subsidenavbar trigger click', async () => {
   const wrapper = mount({
     components: {
-      'nut-sidenavbar': SideNavBar,
-      'nut-sidenavbaritem': SideNavBarItem,
-      'nut-subsidenavbar': SubSideNavBar
+      'nut-side-navbar': SideNavBar,
+      'nut-side-navbar-item': SideNavBarItem,
+      'nut-sub-side-navbar': SubSideNavBar
     },
     template,
     setup: () => {}

src/packages/__VUE/sidenavbar/demo.vue

@@ -7,18 +7,18 @@
       >
     </nut-cell>
     <nut-popup position="right" v-model:visible="show1" :style="{ width, height }">
-      <nut-sidenavbar>
-        <nut-subsidenavbar :title="translate('title1')" ikey="6">
-          <nut-subsidenavbar :title="translate('title2')" ikey="9">
-            <nut-sidenavbaritem ikey="10" :title="translate('title3')"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="11" :title="translate('title4')"></nut-sidenavbaritem>
-          </nut-subsidenavbar>
-          <nut-subsidenavbar :title="translate('title16')" ikey="12">
-            <nut-sidenavbaritem ikey="13" :title="translate('title5')"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="14" :title="translate('title6')"></nut-sidenavbaritem>
-          </nut-subsidenavbar>
-        </nut-subsidenavbar>
-      </nut-sidenavbar>
+      <nut-side-navbar>
+        <nut-sub-side-navbar :title="translate('title1')" ikey="6">
+          <nut-sub-side-navbar :title="translate('title2')" ikey="9">
+            <nut-side-navbar-item ikey="10" :title="translate('title3')"></nut-side-navbar-item>
+            <nut-side-navbar-item ikey="11" :title="translate('title4')"></nut-side-navbar-item>
+          </nut-sub-side-navbar>
+          <nut-sub-side-navbar :title="translate('title16')" ikey="12">
+            <nut-side-navbar-item ikey="13" :title="translate('title5')"></nut-side-navbar-item>
+            <nut-side-navbar-item ikey="14" :title="translate('title6')"></nut-side-navbar-item>
+          </nut-sub-side-navbar>
+        </nut-sub-side-navbar>
+      </nut-side-navbar>
     </nut-popup>
     <nut-cell @click="handleClick2">
       <span
@@ -26,16 +26,16 @@
       >
     </nut-cell>
     <nut-popup position="left" v-model:visible="show2" :style="{ width, height }">
-      <nut-sidenavbar>
-        <nut-subsidenavbar :title="translate('title7')" ikey="3" :open="false">
-          <nut-sidenavbaritem ikey="4" :title="translate('title8')"></nut-sidenavbaritem>
-          <nut-sidenavbaritem ikey="5" :title="translate('title9')"></nut-sidenavbaritem>
-        </nut-subsidenavbar>
-        <nut-subsidenavbar :title="translate('title10')" ikey="12">
-          <nut-sidenavbaritem ikey="13" :title="translate('title11')"></nut-sidenavbaritem>
-          <nut-sidenavbaritem ikey="14" :title="translate('title12')"></nut-sidenavbaritem>
-        </nut-subsidenavbar>
-      </nut-sidenavbar>
+      <nut-side-navbar>
+        <nut-sub-side-navbar :title="translate('title7')" ikey="3" :open="false">
+          <nut-side-navbar-item ikey="4" :title="translate('title8')"></nut-side-navbar-item>
+          <nut-side-navbar-item ikey="5" :title="translate('title9')"></nut-side-navbar-item>
+        </nut-sub-side-navbar>
+        <nut-sub-side-navbar :title="translate('title10')" ikey="12">
+          <nut-side-navbar-item ikey="13" :title="translate('title11')"></nut-side-navbar-item>
+          <nut-side-navbar-item ikey="14" :title="translate('title12')"></nut-side-navbar-item>
+        </nut-sub-side-navbar>
+      </nut-side-navbar>
     </nut-popup>
     <h2>{{ translate('nest') }}</h2>
     <div>
@@ -45,33 +45,33 @@
         >
       </nut-cell>
       <nut-popup position="right" v-model:visible="show3" :style="{ width, height }">
-        <nut-sidenavbar :show="show3">
-          <nut-sidenavbaritem
+        <nut-side-navbar :show="show3">
+          <nut-side-navbar-item
             ikey="1"
             :title="translate('title13')"
             @click="handleClick4(translate('title13'))"
-          ></nut-sidenavbaritem>
-          <nut-sidenavbaritem ikey="2" :title="translate('title10')"></nut-sidenavbaritem>
-          <nut-subsidenavbar :title="translate('title7')" ikey="3" :open="false">
-            <nut-sidenavbaritem ikey="4" :title="translate('title8')"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="5" :title="translate('title9')"></nut-sidenavbaritem>
-          </nut-subsidenavbar>
-          <nut-subsidenavbar :title="translate('title1')" ikey="6">
-            <nut-sidenavbaritem ikey="7" :title="translate('title14')"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="8" :title="translate('title15')"></nut-sidenavbaritem>
-            <nut-subsidenavbar :title="translate('title2')" ikey="9">
-              <nut-sidenavbaritem ikey="10" :title="translate('title3')"></nut-sidenavbaritem>
-              <nut-sidenavbaritem ikey="11" :title="translate('title4')"></nut-sidenavbaritem>
-            </nut-subsidenavbar>
-          </nut-subsidenavbar>
-          <nut-subsidenavbar :title="translate('title10')" ikey="12">
-            <nut-sidenavbaritem ikey="13" :title="translate('title11')"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="14" :title="translate('title12')"></nut-sidenavbaritem>
-          </nut-subsidenavbar>
-          <nut-subsidenavbar v-for="item in navs" :key="item.id" :title="item.name" :ikey="item.id">
-            <nut-sidenavbaritem v-for="citem in item.arr" :key="citem.id" :title="citem.name"></nut-sidenavbaritem>
-          </nut-subsidenavbar>
-        </nut-sidenavbar>
+          ></nut-side-navbar-item>
+          <nut-side-navbar-item ikey="2" :title="translate('title10')"></nut-side-navbar-item>
+          <nut-sub-side-navbar :title="translate('title7')" ikey="3" :open="false">
+            <nut-side-navbar-item ikey="4" :title="translate('title8')"></nut-side-navbar-item>
+            <nut-side-navbar-item ikey="5" :title="translate('title9')"></nut-side-navbar-item>
+          </nut-sub-side-navbar>
+          <nut-sub-side-navbar :title="translate('title1')" ikey="6">
+            <nut-side-navbar-item ikey="7" :title="translate('title14')"></nut-side-navbar-item>
+            <nut-side-navbar-item ikey="8" :title="translate('title15')"></nut-side-navbar-item>
+            <nut-sub-side-navbar :title="translate('title2')" ikey="9">
+              <nut-side-navbar-item ikey="10" :title="translate('title3')"></nut-side-navbar-item>
+              <nut-side-navbar-item ikey="11" :title="translate('title4')"></nut-side-navbar-item>
+            </nut-sub-side-navbar>
+          </nut-sub-side-navbar>
+          <nut-sub-side-navbar :title="translate('title10')" ikey="12">
+            <nut-side-navbar-item ikey="13" :title="translate('title11')"></nut-side-navbar-item>
+            <nut-side-navbar-item ikey="14" :title="translate('title12')"></nut-side-navbar-item>
+          </nut-sub-side-navbar>
+          <nut-sub-side-navbar v-for="item in navs" :key="item.id" :title="item.name" :ikey="item.id">
+            <nut-side-navbar-item v-for="citem in item.arr" :key="citem.id" :title="citem.name"></nut-side-navbar-item>
+          </nut-sub-side-navbar>
+        </nut-side-navbar>
       </nut-popup>
     </div>
   </div>
@@ -80,7 +80,7 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo, translate } = createComponent('sidenavbar');
+const { createDemo, translate } = createComponent('side-navbar');
 import { Toast } from '@/packages/nutui.vue';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>

src/packages/__VUE/sidenavbar/doc.en-US.md

@@ -1,4 +1,4 @@
-# SideNavBar
+# SideNavbar
 
 ### Intro
 
@@ -9,14 +9,14 @@ For content selection and switching
 ``` javascript
 import { createApp } from 'vue';
 // vue
-import { SideNavBar, SubSideNavBar, SideNavBarItem } from '@nutui/nutui';
+import { SideNavbar, SubSideNavbar, SideNavbarItem } from '@nutui/nutui';
 // taro
-import { SideNavBar, SubSideNavBar, SideNavBarItem } from '@nutui/nutui-taro';
+import { SideNavbar, SubSideNavbar, SideNavbarItem } from '@nutui/nutui-taro';
 
 const app = createApp();
-app.use(SideNavBar);
-app.use(SubSideNavBar);
-app.use(SideNavBarItem);
+app.use(SideNavbar);
+app.use(SubSideNavbar);
+app.use(SideNavbarItem);
 ```
 
 ### Basic Usage
@@ -29,18 +29,18 @@ app.use(SideNavBarItem);
     <span><label>right</label></span>
   </nut-cell>
   <nut-popup position="right" v-model:visible="show1" :style="{ width, height }">
-    <nut-sidenavbar>
-      <nut-subsidenavbar title="Intelligent City Ai" ikey="6">
-        <nut-subsidenavbar title="Human body recognition 1" ikey="9">
-          <nut-sidenavbaritem ikey="10" title="Human testing 1"></nut-sidenavbaritem>
-          <nut-sidenavbaritem ikey="11" title="Fine grained portrait segment 1"></nut-sidenavbaritem>
-        </nut-subsidenavbar>
-        <nut-subsidenavbar title="Human body recognition 2" ikey="12">
-          <nut-sidenavbaritem ikey="13" title="Human testing 2"></nut-sidenavbaritem>
-          <nut-sidenavbaritem ikey="14" title="Fine grained portrait segment 2"></nut-sidenavbaritem>
-        </nut-subsidenavbar>
-      </nut-subsidenavbar>
-    </nut-sidenavbar>
+    <nut-side-navbar>
+      <nut-sub-side-navbar title="Intelligent City Ai" ikey="6">
+        <nut-sub-side-navbar title="Human body recognition 1" ikey="9">
+          <nut-side-navbar-item ikey="10" title="Human testing 1"></nut-side-navbar-item>
+          <nut-side-navbar-item ikey="11" title="Fine grained portrait segment 1"></nut-side-navbar-item>
+        </nut-sub-side-navbar>
+        <nut-sub-side-navbar title="Human body recognition 2" ikey="12">
+          <nut-side-navbar-item ikey="13" title="Human testing 2"></nut-side-navbar-item>
+          <nut-side-navbar-item ikey="14" title="Fine grained portrait segment 2"></nut-side-navbar-item>
+        </nut-sub-side-navbar>
+      </nut-sub-side-navbar>
+    </nut-side-navbar>
   </nut-popup>
 </template>
 <script lang="ts">
@@ -79,29 +79,29 @@ app.use(SideNavBarItem);
     <span><label>show</label></span>
   </nut-cell>
   <nut-popup position="right" v-model:visible="show3" :style="{ width, height }">
-    <nut-sidenavbar :show="show3">
-      <nut-sidenavbaritem ikey="1" title="Face recognition" @click="handleClick4('Face recognition')"></nut-sidenavbaritem>
-      <nut-sidenavbaritem ikey="2" title="natural language processing"></nut-sidenavbaritem>
-      <nut-subsidenavbar title="image understanding" ikey="3" :open="false">
-        <nut-sidenavbaritem ikey="4" title="Dish identification"></nut-sidenavbaritem>
-        <nut-sidenavbaritem ikey="5" title="Photo shopping"></nut-sidenavbaritem>
-      </nut-subsidenavbar>
-      <nut-subsidenavbar title="Intelligent City Ai" ikey="6">
-        <nut-sidenavbaritem ikey="7" title="Enterprise risk early warning model"></nut-sidenavbaritem>
-        <nut-sidenavbaritem ikey="8" title="Water quality inspection"></nut-sidenavbaritem>
-        <nut-subsidenavbar title="Human body recognition" ikey="9">
-          <nut-sidenavbaritem ikey="10" title="Human testing"></nut-sidenavbaritem>
-          <nut-sidenavbaritem ikey="11" title="Fine grained portrait segment"></nut-sidenavbaritem>
-        </nut-subsidenavbar>
-      </nut-subsidenavbar>
-      <nut-subsidenavbar title="natural language processing" ikey="12">
-        <nut-sidenavbaritem ikey="13" title="lexical analysis"></nut-sidenavbaritem>
-        <nut-sidenavbaritem ikey="14" title="Syntactic analysis"></nut-sidenavbaritem>
-      </nut-subsidenavbar>
-      <nut-subsidenavbar v-for="item in navs" :key="item.id" :title="item.name" :ikey="item.id">
-        <nut-sidenavbaritem v-for="citem in item.arr" :key="citem.id" :title="citem.name"></nut-sidenavbaritem>
-      </nut-subsidenavbar>
-    </nut-sidenavbar>
+    <nut-side-navbar :show="show3">
+      <nut-side-navbar-item ikey="1" title="Face recognition" @click="handleClick4('Face recognition')"></nut-side-navbar-item>
+      <nut-side-navbar-item ikey="2" title="natural language processing"></nut-side-navbar-item>
+      <nut-sub-side-navbar title="image understanding" ikey="3" :open="false">
+        <nut-side-navbar-item ikey="4" title="Dish identification"></nut-side-navbar-item>
+        <nut-side-navbar-item ikey="5" title="Photo shopping"></nut-side-navbar-item>
+      </nut-sub-side-navbar>
+      <nut-sub-side-navbar title="Intelligent City Ai" ikey="6">
+        <nut-side-navbar-item ikey="7" title="Enterprise risk early warning model"></nut-side-navbar-item>
+        <nut-side-navbar-item ikey="8" title="Water quality inspection"></nut-side-navbar-item>
+        <nut-sub-side-navbar title="Human body recognition" ikey="9">
+          <nut-side-navbar-item ikey="10" title="Human testing"></nut-side-navbar-item>
+          <nut-side-navbar-item ikey="11" title="Fine grained portrait segment"></nut-side-navbar-item>
+        </nut-sub-side-navbar>
+      </nut-sub-side-navbar>
+      <nut-sub-side-navbar title="natural language processing" ikey="12">
+        <nut-side-navbar-item ikey="13" title="lexical analysis"></nut-side-navbar-item>
+        <nut-side-navbar-item ikey="14" title="Syntactic analysis"></nut-side-navbar-item>
+      </nut-sub-side-navbar>
+      <nut-sub-side-navbar v-for="item in navs" :key="item.id" :title="item.name" :ikey="item.id">
+        <nut-side-navbar-item v-for="citem in item.arr" :key="citem.id" :title="citem.name"></nut-side-navbar-item>
+      </nut-sub-side-navbar>
+    </nut-side-navbar>
   </nut-popup>
 </template>
 <script lang="ts">
@@ -151,13 +151,13 @@ app.use(SideNavBarItem);
 
 ## API
 
-### SideNavBar Props
+### SideNavbar Props
 
 | Attribute                   | Description                                                             | Type    | Default |
 |------------------------|----------------------------------------------------------------|---------|------|
 | offset                 | Navigation indent width                                                    | Number、String  | `15`
 
-### SubSideNavBar Props
+### SubSideNavbar Props
 
 | Attribute                   | Description                                                             | Type    | Default |
 |------------------------|----------------------------------------------------------------|---------|------|
@@ -165,7 +165,7 @@ app.use(SideNavBarItem);
 | ikey                 | Navigation unique identifier                                                    | String、Number  | ``
 | open                 | Whether navigation is expanded by default                                                    | Boolean  | `true`
 
-### SideNavBarItem Props
+### SideNavbarItem Props
 
 | Attribute                   | Description                                                             | Type    | Default |
 |------------------------|----------------------------------------------------------------|---------|------|
@@ -173,13 +173,13 @@ app.use(SideNavBarItem);
 | ikey                 | Navigation unique identifier                                                    | String、Number  | ``
 
 
-### SubSideNavBar Events
+### SubSideNavbar Events
 
 | Event  | Description     | Arguments    |
 |-------|----------|-------------|
 | title-click | Navigation Click | - |
 
-### SideNavBarItem Events
+### SideNavbarItem Events
 
 | Event  | Description     | Arguments    |
 |-------|----------|-------------|

src/packages/__VUE/sidenavbar/doc.md

@@ -1,4 +1,4 @@
-# SideNavBar 侧边栏导航
+# SideNavbar 侧边栏导航
 
 ### 介绍
 
@@ -9,14 +9,14 @@
 ``` javascript
 import { createApp } from 'vue';
 // vue
-import { SideNavBar, SubSideNavBar, SideNavBarItem } from '@nutui/nutui';
+import { SideNavbar, SubSideNavbar, SideNavbarItem } from '@nutui/nutui';
 // taro
-import { SideNavBar, SubSideNavBar, SideNavBarItem } from '@nutui/nutui-taro';
+import { SideNavbar, SubSideNavbar, SideNavbarItem } from '@nutui/nutui-taro';
 
 const app = createApp();
-app.use(SideNavBar);
-app.use(SubSideNavBar);
-app.use(SideNavBarItem);
+app.use(SideNavbar);
+app.use(SubSideNavbar);
+app.use(SideNavbarItem);
 ```
 
 ### 基础用法
@@ -29,18 +29,18 @@ app.use(SideNavBarItem);
     <span><label>右侧</label></span>
   </nut-cell>
   <nut-popup position="right" v-model:visible="show1" :style="{ width, height }">
-    <nut-sidenavbar>
-      <nut-subsidenavbar title="智能城市AI" ikey="6">
-        <nut-subsidenavbar title="人体识别1" ikey="9">
-          <nut-sidenavbaritem ikey="10" title="人体检测1"></nut-sidenavbaritem>
-          <nut-sidenavbaritem ikey="11" title="细粒度人像分割1"></nut-sidenavbaritem>
-        </nut-subsidenavbar>
-        <nut-subsidenavbar title="人体识别2" ikey="12">
-          <nut-sidenavbaritem ikey="13" title="人体检测2"></nut-sidenavbaritem>
-          <nut-sidenavbaritem ikey="14" title="细粒度人像分割2"></nut-sidenavbaritem>
-        </nut-subsidenavbar>
-      </nut-subsidenavbar>
-    </nut-sidenavbar>
+    <nut-side-navbar>
+      <nut-sub-side-navbar title="智能城市AI" ikey="6">
+        <nut-sub-side-navbar title="人体识别1" ikey="9">
+          <nut-side-navbar-item ikey="10" title="人体检测1"></nut-side-navbar-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>
+          <nut-side-navbar-item ikey="14" title="细粒度人像分割2"></nut-side-navbar-item>
+        </nut-sub-side-navbar>
+      </nut-sub-side-navbar>
+    </nut-side-navbar>
   </nut-popup>
 </template>
 <script lang="ts">
@@ -79,29 +79,29 @@ app.use(SideNavBarItem);
     <span><label>显示</label></span>
   </nut-cell>
   <nut-popup position="right" v-model:visible="show3" :style="{ width, height }">
-    <nut-sidenavbar :show="show3">
-      <nut-sidenavbaritem ikey="1" title="人脸识别" @click="handleClick4('人脸识别')"></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-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>
-      <nut-subsidenavbar title="自然语言处理" ikey="12">
-        <nut-sidenavbaritem ikey="13" title="词法分析"></nut-sidenavbaritem>
-        <nut-sidenavbaritem ikey="14" title="句法分析"></nut-sidenavbaritem>
-      </nut-subsidenavbar>
-      <nut-subsidenavbar v-for="item in navs" :key="item.id" :title="item.name" :ikey="item.id">
-        <nut-sidenavbaritem v-for="citem in item.arr" :key="citem.id" :title="citem.name"></nut-sidenavbaritem>
-      </nut-subsidenavbar>
-    </nut-sidenavbar>
+    <nut-side-navbar :show="show3">
+      <nut-side-navbar-item ikey="1" title="人脸识别" @click="handleClick4('人脸识别')"></nut-side-navbar-item>
+      <nut-side-navbar-item ikey="2" title="自然语言处理"></nut-side-navbar-item>
+      <nut-sub-side-navbar title="图像理解" ikey="3" :open="false">
+        <nut-side-navbar-item ikey="4" title="菜品识别"></nut-side-navbar-item>
+        <nut-side-navbar-item ikey="5" title="拍照购"></nut-side-navbar-item>
+      </nut-sub-side-navbar>
+      <nut-sub-side-navbar title="智能城市AI" ikey="6">
+        <nut-side-navbar-item ikey="7" title="企业风险预警模型"></nut-side-navbar-item>
+        <nut-side-navbar-item ikey="8" title="水质量检测"></nut-side-navbar-item>
+        <nut-sub-side-navbar title="人体识别" ikey="9">
+          <nut-side-navbar-item ikey="10" title="人体检测"></nut-side-navbar-item>
+          <nut-side-navbar-item ikey="11" title="细粒度人像分割"></nut-side-navbar-item>
+        </nut-sub-side-navbar>
+      </nut-sub-side-navbar>
+      <nut-sub-side-navbar title="自然语言处理" ikey="12">
+        <nut-side-navbar-item ikey="13" title="词法分析"></nut-side-navbar-item>
+        <nut-side-navbar-item ikey="14" title="句法分析"></nut-side-navbar-item>
+      </nut-sub-side-navbar>
+      <nut-sub-side-navbar v-for="item in navs" :key="item.id" :title="item.name" :ikey="item.id">
+        <nut-side-navbar-item v-for="citem in item.arr" :key="citem.id" :title="citem.name"></nut-side-navbar-item>
+      </nut-sub-side-navbar>
+    </nut-side-navbar>
   </nut-popup>
 </template>
 <script lang="ts">
@@ -151,13 +151,13 @@ app.use(SideNavBarItem);
 
 ## API
 
-### SideNavBar Props
+### SideNavbar Props
 
 | 字段                   | 说明                                                             | 类型    | 默认值 |
 |------------------------|----------------------------------------------------------------|---------|------|
 | offset                 | 导航缩进宽度                                                    | Number、String  | `15`
 
-### SubSideNavBar Props
+### SubSideNavbar Props
 
 | 字段                   | 说明                                                             | 类型    | 默认值 |
 |------------------------|----------------------------------------------------------------|---------|------|
@@ -165,7 +165,7 @@ app.use(SideNavBarItem);
 | ikey                 | 导航唯一标识                                                    | String、Number  | ``
 | open                 | 导航是否默认展开                                                    | Boolean  | `true`
 
-### SideNavBarItem Props
+### SideNavbarItem Props
 
 | 字段                   | 说明                                                             | 类型    | 默认值 |
 |------------------------|----------------------------------------------------------------|---------|------|
@@ -173,13 +173,13 @@ app.use(SideNavBarItem);
 | ikey                 | 导航唯一标识                                                    | String、Number  | ``
 
 
-### SubSideNavBar Events
+### SubSideNavbar Events
 
 | 名称  | 说明     | 回调参数    |
 |-------|----------|-------------|
 | title-click | 导航点击 | - |
 
-### SideNavBarItem Events
+### SideNavbarItem Events
 
 | 名称  | 说明     | 回调参数    |
 |-------|----------|-------------|

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

@@ -11,7 +11,7 @@
 import { computed, onMounted, reactive, ref, toRefs, Ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 // import { createIntersectionObserver, IntersectionObserver } from '@tarojs/taro';
-const { componentName, create } = createComponent('sidenavbar');
+const { componentName, create } = createComponent('side-navbar');
 export default create({
   props: {
     offset: {
@@ -28,7 +28,7 @@ export default create({
     });
 
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-sidenavbar';
       return {
         [prefixCls]: true
       };

src/packages/__VUE/sidenavbar/index.vue

@@ -10,7 +10,7 @@
 <script lang="ts">
 import { computed, onMounted, reactive, ref, toRefs, Ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('sidenavbar');
+const { componentName, create } = createComponent('side-navbar');
 export default create({
   props: {
     offset: {
@@ -27,7 +27,7 @@ export default create({
     });
 
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-sidenavbar';
       return {
         [prefixCls]: true
       };

src/packages/__VUE/sidenavbaritem/index.vue

@@ -8,7 +8,7 @@
 <script lang="ts">
 import { computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('sidenavbaritem');
+const { componentName, create } = createComponent('side-navbar-item');
 export default create({
   props: {
     title: {
@@ -23,7 +23,7 @@ export default create({
   emits: ['click'],
   setup: (props: any, context: any) => {
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-sidenavbaritem';
       return {
         [prefixCls]: true
       };

src/packages/__VUE/subsidenavbar/index.vue

@@ -12,7 +12,7 @@
 <script lang="ts">
 import { computed, onMounted, reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('subsidenavbar');
+const { componentName, create } = createComponent('sub-side-navbar');
 export default create({
   props: {
     title: {
@@ -35,7 +35,7 @@ export default create({
     });
 
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-subsidenavbar';
       return {
         [prefixCls]: true
       };

src/sites/mobile-taro/vue/src/nav/pages/sidenavbar/index.config.ts

@@ -1,3 +1,3 @@
 export default {
-  navigationBarTitleText: 'SideNavBar'
+  navigationBarTitleText: 'SideNavbar'
 };

src/sites/mobile-taro/vue/src/nav/pages/sidenavbar/index.vue

@@ -5,33 +5,33 @@
       <span><label>右侧</label></span>
     </nut-cell>
     <nut-popup position="right" v-model:visible="show1" :style="{ width, height }">
-      <nut-sidenavbar>
-        <nut-subsidenavbar title="智能城市AI" ikey="6">
-          <nut-subsidenavbar title="人体识别1" ikey="9">
-            <nut-sidenavbaritem ikey="10" title="人体检测1"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="11" title="细粒度人像分割1"></nut-sidenavbaritem>
-          </nut-subsidenavbar>
-          <nut-subsidenavbar title="人体识别2" ikey="12">
-            <nut-sidenavbaritem ikey="13" title="人体检测2"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="14" title="细粒度人像分割2"></nut-sidenavbaritem>
-          </nut-subsidenavbar>
-        </nut-subsidenavbar>
-      </nut-sidenavbar>
+      <nut-side-navbar>
+        <nut-sub-side-navbar title="智能城市AI" ikey="6">
+          <nut-sub-side-navbar title="人体识别1" ikey="9">
+            <nut-side-navbar-item ikey="10" title="人体检测1"></nut-side-navbar-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>
+            <nut-side-navbar-item ikey="14" title="细粒度人像分割2"></nut-side-navbar-item>
+          </nut-sub-side-navbar>
+        </nut-sub-side-navbar>
+      </nut-side-navbar>
     </nut-popup>
     <nut-cell @click="handleClick2">
       <span><label>左侧</label></span>
     </nut-cell>
     <nut-popup position="left" v-model:visible="show2" :style="{ width, height }">
-      <nut-sidenavbar>
-        <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-subsidenavbar>
-      </nut-sidenavbar>
+      <nut-side-navbar>
+        <nut-sub-side-navbar title="图像理解" ikey="3" :open="false">
+          <nut-side-navbar-item ikey="4" title="菜品识别"></nut-side-navbar-item>
+          <nut-side-navbar-item ikey="5" title="拍照购"></nut-side-navbar-item>
+        </nut-sub-side-navbar>
+        <nut-sub-side-navbar title="自然语言处理" ikey="12">
+          <nut-side-navbar-item ikey="13" title="词法分析"></nut-side-navbar-item>
+          <nut-side-navbar-item ikey="14" title="句法分析"></nut-side-navbar-item>
+        </nut-sub-side-navbar>
+      </nut-side-navbar>
     </nut-popup>
     <h2>导航嵌套（建议最多三层）,点击第一条回调</h2>
     <div>
@@ -39,26 +39,26 @@
         <span><label>显示</label></span>
       </nut-cell>
       <nut-popup position="right" v-model:visible="show3" :style="{ width, height }">
-        <nut-sidenavbar :show="show3">
-          <nut-sidenavbaritem ikey="1" title="人脸识别" @click="handleClick4('人脸识别')"></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-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>
-          <nut-subsidenavbar title="自然语言处理" ikey="12">
-            <nut-sidenavbaritem ikey="13" title="词法分析"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="14" title="句法分析"></nut-sidenavbaritem>
-          </nut-subsidenavbar>
-        </nut-sidenavbar>
+        <nut-side-navbar :show="show3">
+          <nut-side-navbar-item ikey="1" title="人脸识别" @click="handleClick4('人脸识别')"></nut-side-navbar-item>
+          <nut-side-navbar-item ikey="2" title="云存自然语言处理"></nut-side-navbar-item>
+          <nut-sub-side-navbar title="图像理解" ikey="3" :open="false">
+            <nut-side-navbar-item ikey="4" title="菜品识别"></nut-side-navbar-item>
+            <nut-side-navbar-item ikey="5" title="拍照购"></nut-side-navbar-item>
+          </nut-sub-side-navbar>
+          <nut-sub-side-navbar title="智能城市AI" ikey="6">
+            <nut-side-navbar-item ikey="7" title="企业风险预警模型"></nut-side-navbar-item>
+            <nut-side-navbar-item ikey="8" title="水质量检测"></nut-side-navbar-item>
+            <nut-sub-side-navbar title="人体识别" ikey="9">
+              <nut-side-navbar-item ikey="10" title="人体检测"></nut-side-navbar-item>
+              <nut-side-navbar-item ikey="11" title="细粒度人像分割"></nut-side-navbar-item>
+            </nut-sub-side-navbar>
+          </nut-sub-side-navbar>
+          <nut-sub-side-navbar title="自然语言处理" ikey="12">
+            <nut-side-navbar-item ikey="13" title="词法分析"></nut-side-navbar-item>
+            <nut-side-navbar-item ikey="14" title="句法分析"></nut-side-navbar-item>
+          </nut-sub-side-navbar>
+        </nut-side-navbar>
       </nut-popup>
     </div>
   </div>