feat: first

.github/workflows/sync-desc.yml

@@ -13,13 +13,13 @@ jobs:
     runs-on: ubuntu-latest  
     steps:
       - uses: actions/checkout@v2 
-      # - run: yarn install
-      # - run: yarn copydocs
+      - run: yarn install
+      - run: yarn copydocs
       - name : Deploy 
         uses : JamesIves/github-pages-deploy-action@4.1.7 
         with :
           branch : docs_dev # action 应该部署到的分支。
-          folder : docs #操作应该部署的文件夹。
+          folder : site_docs #操作应该部署的文件夹。
           repository-name: jdf2e/nutui-docs
           token: ${{ secrets.GIT_ACTION }}
-          target-folder: docs_copy
+          target-folder: src/docs_vue

docs/docs_vue/docs/avatar/doc.md

@@ -1,73 +0,0 @@
-# Avatar 头像
-
-### 介绍
-
-用来代表用户或事物，支持图片、图标或字符展示。
-
-### 安装
-``` javascript
-import { createApp } from 'vue';
-// vue
-import { Avatar,Icon } from '@nutui/nutui';
-// taro
-import { Avatar,Icon } from '@nutui/nutui-taro';
-
-const app = createApp();
-app.use(Avatar);
-app.use(Icon);
-```
-
-
-### 基本用法
-
-内置 smal / normal / large 三种尺寸规格
-
-``` html
-<nut-avatar size="large" icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-></nut-avatar>
-<nut-avatar size="normal" icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-></nut-avatar>
-<nut-avatar size="small" icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-></nut-avatar>  
-```
-
-### 修改形状类型
-
-``` html
-<nut-avatar icon="my" shape="square"></nut-avatar>
-<nut-avatar icon="my" shape="round"></nut-avatar>
-```
-
-### 修改背景色
-
-``` html
-<nut-avatar icon="my" bg-color="#FA2C19" />
-```
-
-### 修改背景icon
-
-``` html
-<nut-avatar icon="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
-```
-
-### 设置头像的文本内容
-
-``` html
-<nut-avatar>N</nut-avatar>
-```
-
-
-### Prop
-
-| 字段     | 说明                                                                     | 类型   | 默认值 |
-|----------|--------------------------------------------------------------------------|--------|--------|
-| bg-color | 设置头像背景色                                                           | String | #eee   |
-| size     | 设置头像的大小，提供三种：large/normal/small，支持直接输入数字           | String | normal |
-| shape    | 设置头像的形状，默认是圆形，可以设置为square方形                         | String | round  |
-| icon     | 设置头像的icon图标, 类似Icon组件的name属性，支持名称和链接 | String | ''     |
-
-### Events
-
-| 字段     | 说明                 | 类型     | 回调参数 |
-|----------|----------------------|----------|----------|
-| active-avatarror | 点击触发事件 | Function | event    |

docs/docs_vue/docs/button/doc.md

@@ -1,143 +0,0 @@
-# Button 按钮
-
-### 介绍
-
-按钮用于触发一个操作，如提交表单。
-
-### 安装
-
-``` javascript
-import { createApp } from 'vue';
-// vue
-import { Button } from '@nutui/nutui';
-// taro
-import { Button } from '@nutui/nutui-taro';
-
-const app = createApp();
-app.use(Button);
-```
-
-## 代码演示
-
-### 按钮类型
-
-按钮支持 `default`、`primary`、`info`、`warning`、`danger`、`success` 六种类型，默认为 `default`。
-
-```html
-<nut-button type="primary">主要按钮</nut-button>
-<nut-button type="info">信息按钮</nut-button>
-<nut-button type="default">默认按钮</nut-button>
-<nut-button type="danger">危险按钮</nut-button>
-<nut-button type="warning">警告按钮</nut-button>
-<nut-button type="success">成功按钮</nut-button>
-```
-
-### 朴素按钮
-
-通过 `plain` 属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
-
-```html
-<nut-button plain type="primary">朴素按钮</nut-button>
-<nut-button plain type="info">朴素按钮</nut-button>
-```
-
-### 禁用状态
-
-通过 `disabled` 属性来禁用按钮，禁用状态下按钮不可点击。
-
-```html
-<nut-button disabled type="primary">禁用状态</nut-button>
-<nut-button plain disabled type="info">禁用状态</nut-button>
-<nut-button plain disabled type="primary">禁用状态</nut-button>
-```
-
-### 按钮形状
-
-通过 `shape` 属性设置按钮形状，支持圆形、方形按钮，默认为圆形。
-
-```html
-<nut-button shape="square" type="primary">方形按钮</nut-button>
-<nut-button type="info">圆形按钮</nut-button>
-```
-
-### 加载状态
-
-```html
-<nut-button loading type="info"></nut-button>
-<nut-button loading type="warning">加载中...</nut-button>
-<nut-button :loading="isLoading" type="success" @click="changeLoading">Click me!</nut-button>
-```
-``` javascript
-  // ...
-  let isLoading = ref(false);
-  const changeLoading = () => {
-    isLoading.value = true;
-    setTimeout(() => {
-      isLoading.value = false;
-    }, 3000);
-  };
-
-  return {
-    isLoading,
-    changeLoading
-  };
-  // ...
-```
-
-### 图标按钮
-
-```html
-  <nut-button shape="square" plain type="primary" icon="star-fill"></nut-button>
-  <nut-button shape="square" type="primary" icon="star">收藏</nut-button>
-```
-
-### 按钮尺寸
-
-支持 `large`、`normal`、`small`、`mini` 四种尺寸，默认为 `normal`。
-
-```html
-<nut-button size="large" type="primary">大号按钮</nut-button>
-<nut-button type="primary">普通按钮</nut-button>
-<nut-button size="small" type="primary">小型按钮</nut-button>
-<nut-button size="mini" type="primary">小型按钮</nut-button>
-```
-
-### 块级元素
-
-按钮在默认情况下为行内块级元素，通过 `block` 属性可以将按钮的元素类型设置为块级元素，常用来实现通栏按钮。
-
-```html
-<nut-button block type="primary">块级元素</nut-button>
-```
-
-### 自定义颜色
-通过 color 属性可以自定义按钮的颜色。
-```html
-<nut-button color="#7232dd">单色按钮</nut-button>
-<nut-button color="#7232dd" plain>单色按钮</nut-button>
-<nut-button color="linear-gradient(to right, #ff6034, #ee0a24)">
-  渐变色按钮
-</nut-button>
-```
-## API
-
-### Props
-
-| 参数         | 说明                             | 类型   | 默认值           |
-|--------------|----------------------------------|--------|------------------|
-| type         | 类型，可选值为 `primary` `info` `warning` `danger` `success` | String |`default`         |
-| size        | 尺寸，可选值为 `large` `small` `mini`  | String | `normal`      |
-| shape         | 形状，可选值为 `square` | String | `round`             |
-| color | 按钮颜色，支持传入 linear-gradient 渐变色     | String | - |
-| plain          | 	是否为朴素按钮                       | Boolean | `false`             |
-| disabled          | 	是否禁用按钮                       | Boolean | `false`              |
-| block          | 是否为块级元素                        | Boolean | `false`               |
-| icon          | 按钮图标，同Icon组件name属性                        | String | -     |
-| loading          | 按钮loading状态                        | Boolean | `false`               |
-
-### Events
-
-| 事件名 | 说明           | 回调参数     |
-|--------|----------------|--------------|
-| click  | 点击按钮时触发 | event: MouseEvent |
-

docs/docs_vue/docs/cell/doc.md

@@ -1,138 +0,0 @@
-# Cell 单元格
-
-### 介绍
-
-列表项，可组成列表。
-
-### 安装
-
-``` javascript
-import { createApp } from 'vue';
-import { Cell,Icon } from '@nutui/nutui';
-
-const app = createApp();
-app.use(Cell).use(Icon);
-```
-
-
-### 基本用法
-
-``` html
-<nut-cell title="我是标题" desc="描述文字"></nut-cell>
-<nut-cell title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
-<nut-cell title="点击测试" @click="testClick"></nut-cell>
-<nut-cell title="圆角设置 0" round-radius="0"></nut-cell>
-```
-
-``` javascript
-// ...
-import { ref } from 'vue';
-import { Toast } from '@nutui/nutui';
-export default {
-  setup() {
-      const switchChecked = ref(true);
-      const testClick = (event) => {
-        Toast.text('点击事件')
-      };
-      return { testClick,switchChecked };
-  }
-}
-// ...
-```
-
-### 直接使用插槽
-
-``` html
- <nut-cell title="我是标题" desc="描述文字">
-  <div>自定义内容</div>
- </nut-cell>  
-```
-
-### 链接 | 分组用法
-
-``` html
-<nut-cell-group title="链接 | 分组用法" desc="使用 nut-cell-group 支持 title desc slots">
-  <nut-cell title="链接" is-link></nut-cell>
-  <nut-cell title="URL 跳转" desc="https://jd.com" is-link url="https://jd.com"></nut-cell>
-  <nut-cell title="路由跳转 ’/‘ " to="/"></nut-cell>
-</nut-cell-group>
-```
-
-### 自定义右侧箭头区域
-
-``` html
-<nut-cell-group title="自定义右侧箭头区域">
-  <nut-cell title="Switch">
-    <template v-slot:link>
-      <nut-switch v-model="switchChecked" />
-    </template>
-  </nut-cell>
-</nut-cell-group>
-```
-### 自定义左侧 Icon 区域
-
-``` html
-<nut-cell-group title="自定义左侧 Icon 区域">
-  <nut-cell title="图片">
-    <template v-slot:icon>
-      <img class="nut-icon" src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png" />
-    </template>
-  </nut-cell>
-</nut-cell-group>
-```
-
-### 单元格展示图标
-
-``` html
-<nut-cell title="姓名" icon="my" desc="张三"></nut-cell>
-```
-### 只展示 desc ，可通过 desc-text-align 调整内容位置
-
-``` html
-<nut-cell desc-text-align="left" desc="张三"></nut-cell>
-```
-
-## API
-
-### CellGroup Prop
-
-| 字段  | 说明     | 类型   | 默认值 |
-|-------|----------|--------|--------|
-| title | 分组标题 | String | -      |
-| desc  | 分组描述 | String | -      |
-
-### Cell Prop
-
-| 字段                   | 说明                                                                                           | 类型           | 默认值 |
-|------------------------|------------------------------------------------------------------------------------------------|----------------|--------|
-| title                  | 标题名称                                                                                       | String         | -      |
-| sub-title              | 左侧副标题                                                                                     | String         | -      |
-| desc                   | 右侧描述                                                                                       | String         | -      |
-| desc-text-align        | 右侧描述文本对齐方式 [text-align](https://www.w3school.com.cn/cssref/pr_text_text-align.asp)   | String         | right  |
-| is-link                | 是否展示右侧箭头并开启点击反馈                                                                 | Boolean        | false  |
-| icon                   | 左侧 [图标名称](#/icon) 或图片链接                                                             | String         | -      |
-| round-radius           | 圆角半径                                                                                       | Number         | 6px    |
-| url `小程序不支持`     | 点击后跳转的链接地址                                                                           | String         | -      |
-| to   `小程序不支持`    | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | String｜Object | -      |
-| replace `小程序不支持` | 是否在跳转时替换当前页面历史                                                                   | Boolean        | false  |
-
-### Cell Event
-
-| 名称  | 说明     | 回调参数    |
-|-------|----------|-------------|
-| click | 点击事件 | event:Event |
-
-
-## Cell Slots
-
-| 名称          | 说明                 |
-|---------------|----------------------|
-| icon `v3.1.4` | 自定义左侧`icon`区域 |
-| default       | 自定义内容           |
-| link          | 自定义右侧`link`区域 |
-
-## CellGroup Slots
-| 名称            | 说明                |
-|-----------------|---------------------|
-| title `v3.1.10` | 自定义`title`标题区域 |
-| desc `v3.1.12`  | 自定义`desc`描述区域  |

jd/copymd.js

@@ -1,6 +1,5 @@
-const computerBase = '';
-const vueBaseUrl = `${computerBase}..`;
-const reactBaseUrl = `${computerBase}nutui-react`;
+const vueBaseUrl = `..`;
+const targetBaseUrl = 'site_docs';
 const fse = require('fs-extra');
 const copyFile = (from, to) => {
   fse
@@ -15,21 +14,20 @@ const copyFile = (from, to) => {
 const copy = async (fromGit, type) => {
   let configPath = `src/config.json`;
   let configPkgPath = `package.json`;
-  let nutuiDocsConfigPath = `docs/docs_${type}/config.json`;
+  let nutuiDocsConfigPath = `${targetBaseUrl}/docs_${type}/config.json`;
 
   const exists = await fse.pathExists(configPath);
-  console.log(exists, configPath);
+
   if (exists) {
     const fromConfig = await fse.readJson(configPath);
 
     const fromPkgConfig = await fse.readJson(configPkgPath);
 
     const docsConfig = await fse.readJson(nutuiDocsConfigPath);
-    console.log(docsConfig);
+
     docsConfig.version = fromPkgConfig.version;
     docsConfig.nav = fromConfig.nav;
     docsConfig.docs = fromConfig.docs;
-    console.log(fromConfig.docs);
 
     fse
       .writeJson(nutuiDocsConfigPath, docsConfig, {
@@ -43,18 +41,15 @@ const copy = async (fromGit, type) => {
         if (item.show) {
           let cmpName = item.name.toLowerCase();
           let docpath = `src/packages/__VUE/${cmpName}/doc.md`;
-          if (type == 'react') {
-            docpath = `${fromGit}/src/packages/${cmpName}/doc.md`;
-          }
           let doctaropath = `src/packages/__VUE/${cmpName}/doc.taro.md`;
           fse.readFile(docpath, (err, data) => {
             if (!err) {
-              copyFile(docpath, `docs/docs_${type}/docs/${cmpName}/doc.md`);
+              copyFile(docpath, `${targetBaseUrl}/docs_${type}/docs/${cmpName}/doc.md`);
             }
           });
           fse.readFile(doctaropath, (err, data) => {
             if (!err) {
-              copyFile(doctaropath, `docs/docs_${type}/docs/${cmpName}/doc.taro.md`);
+              copyFile(doctaropath, `${targetBaseUrl}/docs_${type}/docs/${cmpName}/doc.taro.md`);
             }
           });
         }

docs/docs_vue/config.json

@@ -583,6 +583,41 @@
           "exportEmpty": true,
           "exportEmptyTaro": true,
           "author": "haiweilian"
+        },
+        {
+          "version": "3.1.15",
+          "name": "SideNavBar",
+          "type": "component",
+          "cName": "侧边栏导航",
+          "desc": "垂直展示的导航栏，用于内容选择和切换",
+          "sort": 14,
+          "taro": true,
+          "show": true,
+          "author": "szg2008"
+        },
+        {
+          "version": "3.1.15",
+          "name": "SideNavBarItem",
+          "type": "component",
+          "cName": "侧边栏导航子组件",
+          "desc": "",
+          "sort": 15,
+          "exportEmpty": true,
+          "taro": true,
+          "show": false,
+          "author": "szg2008"
+        },
+        {
+          "version": "3.1.15",
+          "name": "SubSideNavBar",
+          "type": "component",
+          "cName": "侧边栏导航子组件",
+          "desc": "",
+          "sort": 16,
+          "exportEmpty": true,
+          "taro": true,
+          "show": false,
+          "author": "szg2008"
         }
       ]
     },

site_docs/docs_vue/docs/avatar/doc.md

@@ -0,0 +1,110 @@
+# Avatar 头像
+
+### 介绍
+
+用来代表用户或事物，支持图片、图标或字符展示。
+
+### 安装
+
+```javascript
+import { createApp } from 'vue';
+// vue
+import { Avatar, Icon } from '@nutui/nutui';
+// taro
+import { Avatar, Icon } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Avatar);
+app.use(Icon);
+```
+
+### 基本用法
+
+内置 smal / normal / large 三种尺寸规格
+
+:::demo
+
+```html
+<template>
+  <nut-avatar
+    size="large"
+    icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+  ></nut-avatar>
+  <nut-avatar
+    size="normal"
+    icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+  ></nut-avatar>
+  <nut-avatar
+    size="small"
+    icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+  ></nut-avatar>
+</template>
+```
+
+:::
+
+### 修改形状类型
+
+:::demo
+
+```html
+<template>
+  <nut-avatar icon="my" shape="square"></nut-avatar>
+  <nut-avatar icon="my" shape="round"></nut-avatar>
+</template>
+```
+
+:::
+
+### 修改背景色
+
+:::demo
+
+```html
+<template>
+  <nut-avatar icon="my" bg-color="#FA2C19" />
+</template>
+```
+
+:::
+
+### 修改背景 icon
+
+:::demo
+
+```html
+<template>
+  <nut-avatar
+    icon="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
+  />
+</template>
+```
+
+:::
+
+### 设置头像的文本内容
+
+:::demo
+
+```html
+<template>
+  <nut-avatar>N</nut-avatar>
+</template>
+```
+
+:::
+
+### Prop
+
+| 字段     | 说明                                                             | 类型   | 默认值 |
+| -------- | ---------------------------------------------------------------- | ------ | ------ |
+| bg-color | 设置头像背景色                                                   | String | #eee   |
+| size     | 设置头像的大小，提供三种：large/normal/small，支持直接输入数字   | String | normal |
+| shape    | 设置头像的形状，默认是圆形，可以设置为 square 方形               | String | round  |
+| icon     | 设置头像的 icon 图标, 类似 Icon 组件的 name 属性，支持名称和链接 | String | ''     |
+
+### Events
+
+| 字段             | 说明         | 类型     | 回调参数 |
+| ---------------- | ------------ | -------- | -------- |
+| active-avatarror | 点击触发事件 | Function | event    |

site_docs/docs_vue/docs/button/doc.md

@@ -0,0 +1,199 @@
+# Button 按钮
+
+### 介绍
+
+按钮用于触发一个操作，如提交表单。
+
+### 安装
+
+```javascript
+import { createApp } from 'vue';
+// vue
+import { Button } from '@nutui/nutui';
+// taro
+import { Button } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Button);
+```
+
+## 代码演示
+
+### 按钮类型
+
+按钮支持 `default`、`primary`、`info`、`warning`、`danger`、`success` 六种类型，默认为 `default`。
+
+:::demo
+
+```html
+<template>
+  <nut-button type="primary">主要按钮</nut-button>
+  <nut-button type="info">信息按钮</nut-button>
+  <nut-button type="default">默认按钮</nut-button>
+  <nut-button type="danger">危险按钮</nut-button>
+  <nut-button type="warning">警告按钮</nut-button>
+  <nut-button type="success">成功按钮</nut-button>
+</template>
+```
+
+:::
+
+### 朴素按钮
+
+通过 `plain` 属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
+
+:::demo
+
+```html
+<template>
+  <nut-button plain type="primary">朴素按钮</nut-button>
+  <nut-button plain type="info">朴素按钮</nut-button>
+</template>
+```
+
+:::
+
+### 禁用状态
+
+通过 `disabled` 属性来禁用按钮，禁用状态下按钮不可点击。
+
+:::demo
+
+```html
+<template>
+  <nut-button disabled type="primary">禁用状态</nut-button>
+  <nut-button plain disabled type="info">禁用状态</nut-button>
+  <nut-button plain disabled type="primary">禁用状态</nut-button>
+</template>
+```
+
+:::
+
+### 按钮形状
+
+通过 `shape` 属性设置按钮形状，支持圆形、方形按钮，默认为圆形。
+
+:::demo
+
+```html
+<template>
+  <nut-button shape="square" type="primary">方形按钮</nut-button>
+  <nut-button type="info">圆形按钮</nut-button>
+</template>
+```
+
+:::
+
+### 加载状态
+
+:::demo
+
+```html
+<template>
+  <nut-button loading type="info"></nut-button>
+  <nut-button loading type="warning">加载中...</nut-button>
+  <nut-button :loading="isLoading" type="success" @click="changeLoading">Click me!</nut-button>
+</template>
+
+<script>
+  import { ref } from 'vue';
+  export default {
+    setup(props) {
+      let isLoading = ref(false);
+      const changeLoading = () => {
+        isLoading.value = true;
+        setTimeout(() => {
+          isLoading.value = false;
+        }, 3000);
+      };
+      return {
+        isLoading,
+        changeLoading
+      };
+    }
+  };
+</script>
+```
+
+:::
+
+### 图标按钮
+
+:::demo
+
+```html
+<template>
+  <nut-button shape="square" plain type="primary" icon="star-fill"></nut-button>
+  <nut-button shape="square" type="primary" icon="star">收藏</nut-button>
+</template>
+```
+
+:::
+
+### 按钮尺寸
+
+支持 `large`、`normal`、`small`、`mini` 四种尺寸，默认为 `normal`。
+
+:::demo
+
+```html
+<template>
+  <nut-button size="large" type="primary">大号按钮</nut-button>
+  <nut-button type="primary">普通按钮</nut-button>
+  <nut-button size="small" type="primary">小型按钮</nut-button>
+  <nut-button size="mini" type="primary">小型按钮</nut-button>
+</template>
+```
+
+:::
+
+### 块级元素
+
+按钮在默认情况下为行内块级元素，通过 `block` 属性可以将按钮的元素类型设置为块级元素，常用来实现通栏按钮。
+
+:::demo
+
+```html
+<template>
+  <nut-button block type="primary">块级元素</nut-button>
+</template>
+```
+
+:::
+
+### 自定义颜色
+
+通过 color 属性可以自定义按钮的颜色。
+:::demo
+
+```html
+<template>
+  <nut-button color="#7232dd">单色按钮</nut-button>
+  <nut-button color="#7232dd" plain>单色按钮</nut-button>
+  <nut-button color="linear-gradient(to right, #ff6034, #ee0a24)"> 渐变色按钮 </nut-button>
+</template>
+```
+
+:::
+
+## API
+
+### Props
+
+| 参数     | 说明                                                         | 类型    | 默认值    |
+| -------- | ------------------------------------------------------------ | ------- | --------- |
+| type     | 类型，可选值为 `primary` `info` `warning` `danger` `success` | String  | `default` |
+| size     | 尺寸，可选值为 `large` `small` `mini`                        | String  | `normal`  |
+| shape    | 形状，可选值为 `square`                                      | String  | `round`   |
+| color    | 按钮颜色，支持传入 linear-gradient 渐变色                    | String  | -         |
+| plain    | 是否为朴素按钮                                               | Boolean | `false`   |
+| disabled | 是否禁用按钮                                                 | Boolean | `false`   |
+| block    | 是否为块级元素                                               | Boolean | `false`   |
+| icon     | 按钮图标，同 Icon 组件 name 属性                             | String  | -         |
+| loading  | 按钮 loading 状态                                            | Boolean | `false`   |
+
+### Events
+
+| 事件名 | 说明           | 回调参数          |
+| ------ | -------------- | ----------------- |
+| click  | 点击按钮时触发 | event: MouseEvent |

site_docs/docs_vue/docs/cell/doc.md

@@ -0,0 +1,193 @@
+# Cell 单元格
+
+### 介绍
+
+列表项，可组成列表。
+
+### 安装
+
+```javascript
+import { createApp } from 'vue';
+import { Cell, Icon } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Cell).use(Icon);
+```
+
+### 基本用法
+
+:::demo
+
+```html
+<template>
+  <nut-cell title="我是标题" desc="描述文字"></nut-cell>
+  <nut-cell title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
+  <nut-cell title="点击测试" @click="testClick"></nut-cell>
+  <nut-cell title="圆角设置 0" round-radius="0"></nut-cell>
+</template>
+<script>
+  import { ref } from 'vue';
+  import { Toast } from '@nutui/nutui';
+  export default {
+    setup() {
+      const switchChecked = ref(true);
+      const testClick = (event) => {
+        Toast.text('点击事件');
+      };
+      return { testClick, switchChecked };
+    }
+  };
+</script>
+```
+
+:::
+
+### 直接使用插槽
+
+:::demo
+
+```html
+<template>
+  <nut-cell title="我是标题" desc="描述文字">
+    <div>自定义内容</div>
+  </nut-cell>
+</template>
+```
+
+:::
+
+### 链接 | 分组用法
+
+:::demo
+
+```html
+<template>
+  <nut-cell-group title="链接 | 分组用法" desc="使用 nut-cell-group 支持 title desc slots">
+    <nut-cell title="链接" is-link></nut-cell>
+    <nut-cell title="URL 跳转" desc="https://m.jd.com" is-link url="https://m.jd.com"></nut-cell>
+    <nut-cell title="路由跳转 ’/‘ " to="/"></nut-cell>
+  </nut-cell-group>
+</template>
+```
+
+:::
+
+### 自定义右侧箭头区域
+
+:::demo
+
+```html
+<template>
+  <nut-cell-group title="自定义右侧箭头区域">
+    <nut-cell title="Switch">
+      <template v-slot:link>
+        <nut-switch v-model="switchChecked" />
+      </template>
+    </nut-cell>
+  </nut-cell-group>
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default {
+    setup() {
+      const testClick = (event: Event) => {
+        console.log('点击事件');
+      };
+      const switchChecked = ref(true);
+      return { testClick, switchChecked };
+    }
+  };
+</script>
+```
+
+:::
+
+### 自定义左侧 Icon 区域
+
+:::demo
+
+```html
+<template>
+  <nut-cell-group title="自定义左侧 Icon 区域">
+    <nut-cell title="图片">
+      <template v-slot:icon>
+        <img
+          class="nut-icon"
+          src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+        />
+      </template>
+    </nut-cell>
+  </nut-cell-group>
+</template>
+```
+
+:::
+
+### 单元格展示图标
+
+:::demo
+
+```html
+<template>
+  <nut-cell title="姓名" icon="my" desc="张三"></nut-cell>
+</template>
+```
+
+:::
+
+### 只展示 desc ，可通过 desc-text-align 调整内容位置
+
+:::demo
+
+```html
+<template>
+  <nut-cell desc-text-align="left" desc="张三"></nut-cell>
+</template>
+```
+
+:::
+
+## API
+
+### CellGroup Prop
+
+| 字段  | 说明     | 类型   | 默认值 |
+| ----- | -------- | ------ | ------ |
+| title | 分组标题 | String | -      |
+| desc  | 分组描述 | String | -      |
+
+### Cell Prop
+
+| 字段                   | 说明                                                                                           | 类型             | 默认值 |
+| ---------------------- | ---------------------------------------------------------------------------------------------- | ---------------- | ------ |
+| title                  | 标题名称                                                                                       | String           | -      |
+| sub-title              | 左侧副标题                                                                                     | String           | -      |
+| desc                   | 右侧描述                                                                                       | String           | -      |
+| desc-text-align        | 右侧描述文本对齐方式 [text-align](https://www.w3school.com.cn/cssref/pr_text_text-align.asp)   | String           | right  |
+| is-link                | 是否展示右侧箭头并开启点击反馈                                                                 | Boolean          | false  |
+| icon                   | 左侧 [图标名称](#/icon) 或图片链接                                                             | String           | -      |
+| round-radius           | 圆角半径                                                                                       | Number           | 6px    |
+| url `小程序不支持`     | 点击后跳转的链接地址                                                                           | String           | -      |
+| to `小程序不支持`      | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | String ｜ Object | -      |
+| replace `小程序不支持` | 是否在跳转时替换当前页面历史                                                                   | Boolean          | false  |
+
+### Cell Event
+
+| 名称  | 说明     | 回调参数    |
+| ----- | -------- | ----------- |
+| click | 点击事件 | event:Event |
+
+## Cell Slots
+
+| 名称          | 说明                 |
+| ------------- | -------------------- |
+| icon `v3.1.4` | 自定义左侧`icon`区域 |
+| default       | 自定义内容           |
+| link          | 自定义右侧`link`区域 |
+
+## CellGroup Slots
+
+| 名称            | 说明                  |
+| --------------- | --------------------- |
+| title `v3.1.10` | 自定义`title`标题区域 |
+| desc `v3.1.12`  | 自定义`desc`描述区域  |

site_docs/docs_vue/docs/sidenavbar/doc.md

@@ -0,0 +1,168 @@
+# SideNavBar 侧边栏导航
+
+### 介绍
+
+用于内容选择和切换
+
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+// vue
+import { SideNavBar, SubSideNavBar, SideNavBarItem } from '@nutui/nutui';
+// taro
+import { SideNavBar, SubSideNavBar, SideNavBarItem } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(SideNavBar).use(SubSideNavBar).use(SideNavBarItem);
+```
+
+### 基本用法
+
+``` html
+<nut-cell @click="handleClick1">
+  <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-popup>
+```
+``` ts
+setup() {
+  const state = reactive({
+    show1: false,
+    width: '80%',
+    height: '100%',
+  });
+
+  const handleClick1 = () => {
+    state.show1 = true;
+  };
+
+  return {
+    ...toRefs(state),
+    handleClick1
+  };
+}
+```
+
+### 嵌套（建议最多三层）
+> 小程序暂不支持异步加载
+
+``` html
+<nut-cell @click="handleClick3">
+  <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-popup>
+```
+``` ts
+setup() {
+  const state = reactive({
+    show3: false,
+    width: '80%',
+    height: '100%',
+    navs: [] as any[]
+  });
+
+  const handleClick3 = () => {
+    state.show3 = true;
+    setTimeout(() => {
+      state.navs = [
+        {
+          id: 16,
+          name: '异步abc16',
+          arr: [{ pid: 16, id: 17, name: 'abc16-id17' }]
+        },
+        {
+          id: 17,
+          name: '异步abc17',
+          arr: [{ pid: 17, id: 18, name: 'abc17-id18' }]
+        }
+      ];
+    }, 2000);
+  };
+
+  const handleClick4 = (msg: string) => {
+    Toast.text(msg)
+  }
+
+  return {
+    ...toRefs(state),
+    handleClick3,
+    handleClick4
+  };
+}
+```
+
+## API
+
+### SideNavBar
+
+| 字段                   | 说明                                                             | 类型    | 默认值 |
+|------------------------|----------------------------------------------------------------|---------|------|
+| offset                 | 导航缩进宽度                                                    | Number、String  | `15`
+
+### SubSideNavBar
+
+| 字段                   | 说明                                                             | 类型    | 默认值 |
+|------------------------|----------------------------------------------------------------|---------|------|
+| title                 | 导航标题                                                    | String  | ``
+| ikey                 | 导航唯一标识                                                    | String、Number  | ``
+| open                 | 导航是否默认展开                                                    | Boolean  | `true`
+
+### SideNavBarItem
+
+| 字段                   | 说明                                                             | 类型    | 默认值 |
+|------------------------|----------------------------------------------------------------|---------|------|
+| title                 | 导航标题                                                    | String  | `15`
+| ikey                 | 导航唯一标识                                                    | String、Number  | ``
+
+
+### SubSideNavBar Event
+
+| 名称  | 说明     | 回调参数    |
+|-------|----------|-------------|
+| title-click | 导航点击 | - |
+
+### SideNavBarItem Event
+
+| 名称  | 说明     | 回调参数    |
+|-------|----------|-------------|
+| click | 导航点击 | - |
+
+

docs/docs_vue/docs/switch/doc.md

@@ -115,14 +115,14 @@ export default {
 | disable        | 禁用状态         | Boolean | `false`               |
 | loading        | 加载状态         | Boolean | `false`               |
 | name        | [图标名称](#/icon)         | String | `loading`               |
-| color        | [图标颜色](#/icon)          | String | -               |
-| size        | [图标尺寸](#/icon)          | String、Number | `12px`               |
+| color        | [图标颜色](#/icon)，仅在`loading`状态下生效          | String | -               |
+| size        | [图标尺寸](#/icon)，仅在`loading`状态下生效          | String、Number | `12px`               |
 | active-color   | 打开时的背景颜色 | String  | `#fa2c19`    |
 | inactive-color | 关闭时的背景颜色 | String  | `#ebebeb` |
 | active-text    | 打开时文字描述   | String  | -                     |
 | inactive-text  | 关闭时文字描述   | String  | -                     |
-| active-value  | 打开时组件的值   | Boolean、String、Number  | true                     |
-| inactive-value  | 关闭组件的值   | Boolean、String、Number  | false                     |
+| active-value  | 打开时组件的值   | Boolean、String、Number  | `true`  |
+| inactive-value  | 关闭组件的值   | Boolean、String、Number  | `false`  |
 
 
 ### Events