Merge branch 'v4' of https://github.com/jdf2e/nutui into v4

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

@@ -60,33 +60,40 @@ app.use(Card);
 :::demo
 ```html
 <template>
-<nut-card
-:img-url="state.imgUrl"
-:title="state.title"
-:price="state.price"
-:vipPrice="state.vipPrice"
-:shopDesc="state.shopDesc"
-:delivery="state.delivery"
-:shopName="state.shopName"
->
-  <template #prolist>
-    <div class="search_prolist_attr">
-      <span class="word">word</span>
-      <span class="word">word</span>
-      <span class="word">word</span>
-    </div>
-  </template>
-  <template #tag>
-    <img
-        class="tag" 
+  <nut-card
+    :img-url="state.imgUrl"
+    :title="state.title"
+    :price="state.price"
+    :vipPrice="state.vipPrice"
+    :shopDesc="state.shopDesc"
+    :delivery="state.delivery"
+    :shopName="state.shopName"
+  >
+    <template #prolist>
+      <div class="search_prolist_attr">
+        <span class="word">word</span>
+        <span class="word">word</span>
+        <span class="word">word</span>
+      </div>
+    </template>
+    <template #price>
+      <span>price</span>
+    </template>
+    <template #origin>
+      <img
+        class="tag"
         src="https://img11.360buyimg.com/jdphoto/s58x28_jfs/t9451/359/415622649/15318/b0943e5d/59a78495N3bd2a9f8.png"
         alt=""
-    />
-  </template>
+      />
+    </template>
+    <template #shop-tag>
+      <div>shop</div>
+    </template>
     <template #footer>
-      <div class="customize">cuttom</div>
+      <div class="customize">footer</div>
     </template>
-</nut-card>
+  </nut-card>
+</template>
 </template>
 <script>
   import { reactive } from 'vue';
@@ -113,18 +120,17 @@ app.use(Card);
   margin: 3px 0 1px;
   height: 15px;
   overflow: hidden;
- 
 }
 .search_prolist_attr > span{
-    float: left;
-    padding: 0 5px;
-    border-radius: 1px;
-    font-size: 10px;
-    height: 15px;
-    line-height: 15px;
-    color: #999;
-    background-color: #f2f2f7;
-    margin-right: 5px;
+  float: left;
+  padding: 0 5px;
+  border-radius: 1px;
+  font-size: 10px;
+  height: 15px;
+  line-height: 15px;
+  color: #999;
+  background-color: #f2f2f7;
+  margin-right: 5px;
 }
 .tag {
   display: inline-block;

src/packages/__VUE/card/doc.md

@@ -21,16 +21,15 @@ app.use(Card);
 :::demo
 ```html
 <template>
- <nut-card
-  :img-url="state.imgUrl"
-  :title="state.title"
-  :price="state.price"
-  :vipPrice="state.vipPrice"
-  :shopDesc="state.shopDesc"
-  :delivery="state.delivery"
-  :shopName="state.shopName"
-  >
-</nut-card>
+  <nut-card
+    :img-url="state.imgUrl"
+    :title="state.title"
+    :price="state.price"
+    :vipPrice="state.vipPrice"
+    :shopDesc="state.shopDesc"
+    :delivery="state.delivery"
+    :shopName="state.shopName"
+  ></nut-card>
 </template>
 <script>
   import { reactive } from 'vue';
@@ -59,33 +58,39 @@ app.use(Card);
 :::demo
 ```html
 <template>
-<nut-card
-:img-url="state.imgUrl"
-:title="state.title"
-:price="state.price"
-:vipPrice="state.vipPrice"
-:shopDesc="state.shopDesc"
-:delivery="state.delivery"
-:shopName="state.shopName"
->
-  <template #prolist>
-    <div class="search_prolist_attr">
-      <span class="word">活鲜</span>
-      <span class="word">礼盒</span>
-      <span class="word">国产</span>
-    </div>
-  </template>
-  <template #tag>
-    <img
-        class="tag" 
+  <nut-card
+    :img-url="state.imgUrl"
+    :title="state.title"
+    :price="state.price"
+    :vipPrice="state.vipPrice"
+    :shopDesc="state.shopDesc"
+    :delivery="state.delivery"
+    :shopName="state.shopName"
+  >
+    <template #prolist>
+      <div class="search_prolist_attr">
+        <span class="word">活鲜</span>
+        <span class="word">礼盒</span>
+        <span class="word">国产</span>
+      </div>
+    </template>
+    <template #price>
+      <span>询价</span>
+    </template>
+    <template #origin>
+      <img
+        class="tag"
         src="https://img11.360buyimg.com/jdphoto/s58x28_jfs/t9451/359/415622649/15318/b0943e5d/59a78495N3bd2a9f8.png"
         alt=""
-    />
-  </template>
+      />
+    </template>
+    <template #shop-tag>
+      <div>自定义店铺介绍</div>
+    </template>
     <template #footer>
       <div class="customize">自定义</div>
     </template>
-</nut-card>
+  </nut-card>
 </template>
 <script>
   import { reactive } from 'vue';
@@ -112,18 +117,17 @@ app.use(Card);
   margin: 3px 0 1px;
   height: 15px;
   overflow: hidden;
- 
 }
 .search_prolist_attr > span{
-    float: left;
-    padding: 0 5px;
-    border-radius: 1px;
-    font-size: 10px;
-    height: 15px;
-    line-height: 15px;
-    color: #999;
-    background-color: #f2f2f7;
-    margin-right: 5px;
+  float: left;
+  padding: 0 5px;
+  border-radius: 1px;
+  font-size: 10px;
+  height: 15px;
+  line-height: 15px;
+  color: #999;
+  background-color: #f2f2f7;
+  margin-right: 5px;
 }
 .tag {
   display: inline-block;

src/packages/__VUE/card/doc.taro.md

@@ -59,33 +59,40 @@ app.use(Card);
 :::demo
 ```html
 <template>
-<nut-card
-:img-url="state.imgUrl"
-:title="state.title"
-:price="state.price"
-:vipPrice="state.vipPrice"
-:shopDesc="state.shopDesc"
-:delivery="state.delivery"
-:shopName="state.shopName"
->
-  <template #prolist>
-    <div class="search_prolist_attr">
-      <span class="word">活鲜</span>
-      <span class="word">礼盒</span>
-      <span class="word">国产</span>
-    </div>
-  </template>
-  <template #tag>
-    <img
-        class="tag" 
+<template>
+  <nut-card
+    :img-url="state.imgUrl"
+    :title="state.title"
+    :price="state.price"
+    :vipPrice="state.vipPrice"
+    :shopDesc="state.shopDesc"
+    :delivery="state.delivery"
+    :shopName="state.shopName"
+  >
+    <template #prolist>
+      <div class="search_prolist_attr">
+        <span class="word">活鲜</span>
+        <span class="word">礼盒</span>
+        <span class="word">国产</span>
+      </div>
+    </template>
+    <template #price>
+      <span>询价</span>
+    </template>
+    <template #origin>
+      <img
+        class="tag"
         src="https://img11.360buyimg.com/jdphoto/s58x28_jfs/t9451/359/415622649/15318/b0943e5d/59a78495N3bd2a9f8.png"
         alt=""
-    />
-  </template>
+      />
+    </template>
+    <template #shop-tag>
+      <div>自定义店铺介绍</div>
+    </template>
     <template #footer>
       <div class="customize">自定义</div>
     </template>
-</nut-card>
+  </nut-card>
 </template>
 <script>
   import { reactive } from 'vue';
@@ -112,18 +119,17 @@ app.use(Card);
   margin: 3px 0 1px;
   height: 15px;
   overflow: hidden;
- 
 }
 .search_prolist_attr > span{
-    float: left;
-    padding: 0 5px;
-    border-radius: 1px;
-    font-size: 10px;
-    height: 15px;
-    line-height: 15px;
-    color: #999;
-    background-color: #f2f2f7;
-    margin-right: 5px;
+  float: left;
+  padding: 0 5px;
+  border-radius: 1px;
+  font-size: 10px;
+  height: 15px;
+  line-height: 15px;
+  color: #999;
+  background-color: #f2f2f7;
+  margin-right: 5px;
 }
 .tag {
   display: inline-block;

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

@@ -182,5 +182,5 @@ Here are all the base variables:
 | Attribute  | Description                                                          | Type   | Default |
 |------------|----------------------------------------------------------------------|--------|---------|
 | theme      | Theme style, set to `dark` to enable dark mode, take effect globally | string | -       |
-| theme-vars | Customized theme variable, partially effective                       | object | -       |
-| tag        | HTML Tag of root element                                             | string | div     |
+| theme-vars | Customized theme variable                     | object | -       |
+| tag        | HTML Tag of root element                                             | string | `div`     |

src/packages/__VUE/configprovider/doc.md

@@ -55,12 +55,12 @@ app.use(ConfigProvider);
 
 ### 主题定制
 
-NutUI组件可以通过 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)
-来组织样式，通过覆盖这些 CSS 变量，可以实现定制主题、动态切换主题等效果。
+`NutUI` 组件可以通过 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)
+来组织样式，通过覆盖这些 `CSS` 变量，可以实现定制主题、动态切换主题等功能。
 
 #### 示例
 
-这些变量的默认值被定义在 `:root` 节点上，HTML 里的所有子节点都可以访问到这些变量：
+这些变量的默认值被定义在 `:root` 节点上，`HTML` 里的所有子节点都可以访问到这些变量：
 
 ```css
 :root {
@@ -71,7 +71,7 @@ NutUI组件可以通过 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/We
 
 #### 通过 CSS 覆盖
 
-你可以直接在代码中覆盖这些 CSS 变量，Button 组件的样式会随之发生改变：
+你可以直接在代码中覆盖这些 `CSS` 变量，`Button` 组件的样式会随之发生改变：
 
 ```css
 /* 添加这段样式后，Primary Button 会变成绿色 */
@@ -81,7 +81,7 @@ NutUI组件可以通过 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/We
 ```
 
 #### 通过 ConfigProvider 覆盖
-ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 ConfigProvider 组件，并通过 theme-vars 属性来配置一些主题变量
+`ConfigProvider` 组件提供了覆盖 `CSS` 变量的能力，你需要在根节点包裹一个 `ConfigProvider` 组件，并通过 `theme-vars` 属性来配置一些主题变量
 :::demo
 
 ```html
@@ -122,13 +122,14 @@ ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点
 ### 主题变量
 #### 基础变量
 
-NutUI 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变量会继承基础变量，因此在修改基础变量后，会影响所有相关的组件。
+`NutUI` 中的 `CSS` 变量分为 **基础变量** 和 **组件变量**。组件变量会继承基础变量，因此在修改基础变量后，会影响所有相关的组件。
 
 #### 修改变量
 
-- 基础变量中的主色调需要您使用十六进制色值来进行覆盖，请勿使用类似于`red`,`green`来进行覆盖
+- 基础变量中的主色调需要您使用十六进制色值来进行覆盖，请勿使用类似于 `red`,`green` 来进行覆盖
+
+- 基础变量和组件变量都能通过 `:root 选择器`和 `ConfigProvider 组件`，推荐您使用 `ConfigProvider 组件` 来修改主色调，因为部分组件的变量激活色的渐变色使用的是 `rgba`，使用 `:root 选择器` 修改主色调会有部分组件变量不生效：
 
-- 基础变量和组件变量都能通过 `:root 选择器`和 `ConfigProvider 组件`，推荐您使用`ConfigProvider 组件`来修改主色调，因为部分组件的变量激活色的渐变色使用的是`rgba`，使用`:root 选择器`修改主色调会有部分组件变量不生效：
 ```less
 // 如果您仍旧选择使用:root 选择器来进行修改主色调，您还需要修改以下3个组件变量色  primaryColor为设置的主色调
 
@@ -195,5 +196,5 @@ NutUI 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 | 参数       | 说明                                             | 类型   | 默认值 |
 |------------|--------------------------------------------------|--------|--------|
 | theme      | 主题风格，设置为 `dark` 来开启深色模式，全局生效 | string | -      |
-| theme-vars | 自定义主题变量，局部生效                         | object | -      |
-| tag        | 根节点对应的 HTML 标签名                         | string | div    |
+| theme-vars | 自定义主题变量                        | object | -      |
+| tag        | 根节点对应的 HTML 标签名                         | string | `div`    |

src/packages/__VUE/configprovider/doc.taro.md

@@ -55,35 +55,33 @@ app.use(ConfigProvider);
 
 ### 主题定制
 
-NutUI组件可以通过 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)
-来组织样式，通过覆盖这些 CSS 变量，可以实现定制主题、动态切换主题等效果。
+`NutUI` 组件可以通过 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)
+来组织样式，通过覆盖这些 `CSS` 变量，可以实现定制主题、动态切换主题等功能。
 
 #### 示例
 
-这些变量的默认值被定义在 `page` 节点上，HTML 里的所有子节点都可以访问到这些变量：
+这些变量的默认值被定义在 `page` 节点上：
 
 ```css
 page {
     --nut-primary-color: #fa2c19;
     --nut-primary-color-end: #fa6419;
-    --nut-help-color: #f5f5f5;
-    --nut-active-color: rgba(250, 44, 25, 0.15);
 }
 ```
 
 #### 通过 CSS 覆盖
 
-你可以直接在代码中覆盖这些 CSS 变量，Button 组件的样式会随之发生改变：
+你可以直接在代码中覆盖这些 `CSS` 变量，`Button` 组件的样式会随之发生改变：
 
 ```css
 /* 添加这段样式后，Primary Button 会变成绿色 */
-page {
+:root {
   --nut-button-primary-background-color: green;
 }
 ```
 
 #### 通过 ConfigProvider 覆盖
-ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 ConfigProvider 组件，并通过 theme-vars 属性来配置一些主题变量
+`ConfigProvider` 组件提供了覆盖 `CSS` 变量的能力，你需要在根节点包裹一个 `ConfigProvider` 组件，并通过 `theme-vars` 属性来配置一些主题变量
 :::demo
 
 ```html
@@ -101,11 +99,11 @@ ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点
   export default {
     setup() {
       const range = ref(30);
-     const themeVars = {
+      const themeVars = {
           primaryColor:'#008000',
           primaryColorEnd:'#008000',
       };
-      // 当然，你也可以选择使用组件变量去替换，如果同时设置了基础变量和组件变量，组件变量会覆盖基础变量
+      // 当然，你也可以选择使用组件变量去替换，如果同时设置了基础变量和组件变量，组件变量会覆盖基础变量。
       //  const themeVars = {
       //   rangeBgColor: 'rgba(25,137,250,0.15)',
       //   rangeBarBgColor: '#0289fa',
@@ -124,28 +122,27 @@ ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点
 ### 主题变量
 #### 基础变量
 
-NutUI 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变量会继承基础变量，因此在修改基础变量后，会影响所有相关的组件。
+`NutUI` 中的 `CSS` 变量分为 **基础变量** 和 **组件变量**。组件变量会继承基础变量，因此在修改基础变量后，会影响所有相关的组件。
 
 #### 修改变量
-- 基础变量中的主色调需要您使用十六进制色值来进行覆盖，请勿使用类似于`red`,`green`来进行覆盖
-- 基础变量和组件变量都能通过 `page`和 `ConfigProvider 组件`，推荐您使用`ConfigProvider 组件`来修改主色调，因为部分组件的变量激活色使用的是`rgba`属性，使用`page`修改主色调会有部分组件变量不生效：
+
+- 基础变量中的主色调需要您使用十六进制色值来进行覆盖，请勿使用类似于 `red`,`green` 来进行覆盖
+
+- 基础变量和组件变量都能通过 `:root 选择器`和 `ConfigProvider 组件`，推荐您使用 `ConfigProvider 组件` 来修改主色调，因为部分组件的变量激活色的渐变色使用的是 `rgba`，使用 `:root 选择器` 修改主色调会有部分组件变量不生效：
+
 ```less
-// 如果您仍旧选择使用 page 来进行修改主色调，您还需要修改以下8个组件变量色
+// 如果您仍旧选择使用:root 选择器来进行修改主色调，您还需要修改以下3个组件变量色  primaryColor为设置的主色调
 
---nut-calendar-choose-color: rgba(primaryColor,0.09);
---nut-range-bg-color: rgba(primaryColor,0.5);
 --nut-address-region-tab-line: linear-gradient(90deg, primaryColor 0%, rgba(primaryColor,0.15) 100%)  ; 
---nut-radio-label-button-background: rgba(primaryColor,0.05);
---nut-timeselect-timedetail-item-cur-bg-color: rgba(primaryColor,0.15);
---nut-tabs-horizontal-tab-line-color: rgba(primaryColor,0.15);
+--nut-tabs-horizontal-tab-line-color: linear-gradient(180deg, primaryColor 0%, rgba(primaryColor,0.15) 100%);
 --nut-tabs-vertical-tab-line-color: linear-gradient(180deg, primaryColor 0%, rgba(primaryColor,0.15) 100%);
---nut-sku-item-active-bg: rgba(primaryColor,0.15);
 ```
 
 #### 变量列表
 
 下面是所有的基础变量：
 ```less
+  // 主色调
   --nut-primary-color: #fa2c19;
   --nut-primary-color-end: #fa6419;
   // 辅助色
@@ -199,5 +196,5 @@ NutUI 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 | 参数       | 说明                                             | 类型   | 默认值 |
 |------------|--------------------------------------------------|--------|--------|
 | theme      | 主题风格，设置为 `dark` 来开启深色模式，全局生效 | string | -      |
-| theme-vars | 自定义主题变量，局部生效                         | object | -      |
-| tag        | 根节点对应的 HTML 标签名                         | string | div    |
+| theme-vars | 自定义主题变量                   | object | -      |
+| tag        | 根节点对应的 HTML 标签名                         | string | `div`    |

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

@@ -112,10 +112,10 @@ User can custom divider style with style attribute.
 
 | Attribute         | Description                             | Type   | Default           |
 |--------------|----------------------------------|--------|------------------|
-| dashed         | 	Whether to use dashed border             | Boolean | false                |
-| hairline        | Whether to use hairline                         | Boolean | true                |
-| content-position        | Content position, can be set to left or right                       | String | center                |
-| direction         | The direction of divider             | String | 'horizontal'                |
+| dashed         | 	Whether to use dashed border             | boolean | `false`                |
+| hairline        | Whether to use hairline                         | boolean | `true`                |
+| content-position        | Content position, can be set to `left` or `right`                       | string | `center`                |
+| direction         | The direction of divider             | string | `horizontal`                |
 
 ### Slots
 

src/packages/__VUE/divider/doc.md

@@ -112,10 +112,10 @@ app.use(Divider);
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| dashed         | 是否使用虚线               | Boolean | false                |
-| hairline        | 是否使用 0.5px 线                         | Boolean | true                |
-| content-position        | 内容位置，可选值为left right                         | String | center                |
-| direction        | 水平还是垂直类型               | String | 'horizontal'                |
+| dashed         | 是否使用虚线               | boolean | `false`                |
+| hairline        | 是否使用 0.5px 线                         | boolean | `true`                |
+| content-position        | 内容位置，可选值为 `left`、`right`                         | string | `center`                |
+| direction        | 水平还是垂直类型               | string | `horizontal`                |
 
 ### Slots
 

src/packages/__VUE/divider/doc.taro.md

@@ -112,10 +112,10 @@ app.use(Divider);
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| dashed         | 是否使用虚线               | Boolean | false                |
-| hairline        | 是否使用 0.5px 线                         | Boolean | true                |
-| content-position        | 内容位置，可选值为left right                         | String | center                |
-| direction         | 水平还是垂直类型               | String | 'horizontal'                |
+| dashed         | 是否使用虚线               | boolean | `false`                |
+| hairline        | 是否使用 0.5px 线                         | boolean | `true`                |
+| content-position        | 内容位置，可选值为 `left`、`right`                         | string | `center`                |
+| direction         | 水平还是垂直类型               | string | `horizontal`                |
 
 ### Slots
 

src/packages/__VUE/form/doc.taro.md

@@ -369,8 +369,8 @@ setup(){
 | 参数                | 说明                                                             | 类型             | 默认值  |
 |---------------------|------------------------------------------------------------------|------------------|---------|
 | required            | 是否显示必填字段的标签旁边的红色星号                             | boolean          | `false` |
-| prop                | 表单域 v-model 字段， 在使用表单校验功能的情况下，该属性是必填的 | string           | -       |
-| rules               | 定义校验规则                                                     | FormItemRule []  | []      |
+| prop                | 表单域 v-model 字段， 在使用表单校验功能的情况下，该属性是必填的 | string           | `-`       |
+| rules               | 定义校验规则                                                     | FormItemRule []  | `[]`      |
 | label-width         | 表单项 label 宽度，默认单位为`px`                                | number \| string | `90px`  |
 | label-align         | 表单项 label 对齐方式，可选值为 `center` `right`                 | string           | `left`  |
 | body-align          | 右侧插槽对齐方式，可选值为 `center` `right`                      | string           | `left`  |

src/packages/__VUE/indicator/doc.taro.md

@@ -71,9 +71,9 @@ app.use(Indicator);
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| current  | 当前步骤               | number | 1              |
-| size       | 步骤长度                         | number | 3               |
-| block | 是否启用块级布局     | boolean | false |
+| current  | 当前步骤               | number | `1`              |
+| size       | 步骤长度                         | number | `3`               |
+| block | 是否启用块级布局     | boolean | `false` |
 | align | 对齐方式，仅在 `block` 为 `true` 时生效, 可选值 `left`, `right`, `center`| string | `left` |
 | fill-zero     | 单数前面是否补 0                      | boolean | `true`        |
 

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

@@ -386,11 +386,11 @@ export default {
 
 | Attribute                        | Description                                                         | Type                    | Default |
 |----------------------------------|---------------------------------------------------------------------|-------------------------|---------|
-| active-color                     | Active color of title and option                                    | String                  | #F2270C |
-| close-on-click-overlay | Whether to close when overlay is clicked                            | Boolean                 | true    |
-| scroll-fixed           | Whether to fixed when window is scrolled, fixed position can be set | Boolean、String、Number | false   |
-| title-class            | Custome title class                                                 | String                  | -       |
-| lock-scroll            | Whether the background is locked                                    | Boolean                 | true    |
+| active-color                     | Active color of title and option                                    | string                  | `#F2270C` |
+| close-on-click-overlay | Whether to close when overlay is clicked                            | boolean                 | `true`    |
+| scroll-fixed           | Whether to fixed when window is scrolled, fixed position can be set | boolean \| string \| number | `false`   |
+| title-class            | Custome title class                                                 | string                  | -       |
+| lock-scroll            | Whether the background is locked                                    | boolean                 | `true`    |
 ### Menu Slots
 | Name | Description |
 |-|-|
@@ -399,14 +399,14 @@ export default {
 
 | Attribute | Description                          | Type    | Default        |
 |-----------|--------------------------------------|---------|----------------|
-| title     | Item title                           | String  | 当前选中项文字 |
+| title     | Item title                           | string  | `当前选中项文字` |
 | options   | Options                              | Array   | -              |
-| disabled  | Whether to disable dropdown item     | Boolean | false          |
-| cols      | Display how many options in one line | Number  | 1              |
+| disabled  | Whether to disable dropdown item     | boolean | `false`          |
+| cols      | Display how many options in one line | number  | 1              |
 
-| direction           | Expand direction, can be set to up   | String  | 'down'         |
-| active-title-class   | Active custome title class           | String  | -              |
-| inactive-title-class | Inactive custome title class         | String  | -              |
+| direction           | Expand direction, can be set to up   | string  | `down`         |
+| active-title-class   | Active custome title class           | string  | -              |
+| inactive-title-class | Inactive custome title class         | string  | -              |
 
 
 ### MenuItem Slots

src/packages/__VUE/menu/doc.md

@@ -387,11 +387,11 @@ export default {
 
 | 参数                             | 说明                           | 类型                    | 默认值  |
 |----------------------------------|--------------------------------|-------------------------|---------|
-| active-color                     | 选项的选中态图标颜色           | String                  | #F2270C |
-| close-on-click-overlay | 是否在点击遮罩层后关闭菜单     | Boolean                 | true    |
-| scroll-fixed           | 滚动后是否固定，可设置固定位置 | Boolean、String、Number | false   |
-| title-class            | 自定义标题样式类               | String                  | -       |
-| lock-scroll            | 背景是否锁定                   | Boolean                 | true    |
+| active-color                     | 选项的选中态图标颜色           | string                  | `#F2270C` |
+| close-on-click-overlay | 是否在点击遮罩层后关闭菜单     | boolean                 | `true`    |
+| scroll-fixed           | 滚动后是否固定，可设置固定位置 | boolean \| string \| number | `false`   |
+| title-class            | 自定义标题样式类               | string                  | -       |
+| lock-scroll            | 背景是否锁定                   | boolean                 | `true`    |
 
 ### Menu Slots
 | 名称 | 说明 |
@@ -402,13 +402,13 @@ export default {
 
 | 参数                          | 说明                                    | 类型    | 默认值           |
 |-------------------------------|-----------------------------------------|---------|------------------|
-| title                         | 菜单项标题                              | String  | 当前选中项文字   |
+| title                         | 菜单项标题                              | string  | `当前选中项文字`   |
 | options                       | 选项数组                                | Array   | -                |
-| disabled                      | 是否禁用菜单                            | Boolean | false            |
-| cols                          | 可以设置一行展示多少列 options          | Number  | 1                |
-| direction          | 菜单展开方向，可选值为up                | String  | 'down'           |
-| active-title-class   | 选项选中时自定义标题样式类              | String  | -                |
-| inactive-title-class | 选项非选中时自定义标题样式类            | String  | -                |
+| disabled                      | 是否禁用菜单                            | boolean | `false`            |
+| cols                          | 可以设置一行展示多少列 options          | number  | 1                |
+| direction          | 菜单展开方向，可选值为up                | string  | `down`           |
+| active-title-class   | 选项选中时自定义标题样式类              | string  | -                |
+| inactive-title-class | 选项非选中时自定义标题样式类            | string  | -                |
 ### MenuItem Slots
 | 名称 | 说明 |
 |-|-|

src/packages/__VUE/menu/doc.taro.md

@@ -387,11 +387,11 @@ export default {
 
 | 参数                             | 说明                           | 类型                    | 默认值  |
 |----------------------------------|--------------------------------|-------------------------|---------|
-| active-color                     | 选项的选中态图标颜色           | String                  | #F2270C |
-| close-on-click-overlay | 是否在点击遮罩层后关闭菜单     | Boolean                 | true    |
-| scroll-fixed           | 滚动后是否固定，可设置固定位置 | Boolean、String、Number | false   |
-| title-class           | 自定义标题样式类               | String                  | -       |
-| lock-scroll           | 背景是否锁定                   | Boolean                 | true    |
+| active-color                     | 选项的选中态图标颜色           | string                  | `#F2270C` |
+| close-on-click-overlay | 是否在点击遮罩层后关闭菜单     | boolean                 | `true`    |
+| scroll-fixed           | 滚动后是否固定，可设置固定位置 | boolean \| string \| number | `false`   |
+| title-class           | 自定义标题样式类               | string                  | -       |
+| lock-scroll           | 背景是否锁定                   | boolean                 | `true`    |
 
 ### Menu Slots
 | 名称 | 说明 |
@@ -401,13 +401,13 @@ export default {
 
 | 参数                          | 说明                                    | 类型    | 默认值           |
 |-------------------------------|-----------------------------------------|---------|------------------|
-| title                         | 菜单项标题                              | String  | 当前选中项文字   |
+| title                         | 菜单项标题                              | string  | `当前选中项文字`   |
 | options                       | 选项数组                                | Array   | -                |
-| disabled                      | 是否禁用菜单                            | Boolean | false            |
-| cols                          | 可以设置一行展示多少列 options          | Number  | 1                |
-| direction          | 菜单展开方向，可选值为up                | String  | 'down'           |
-| active-title-class   | 选项选中时自定义标题样式类              | String  | -                |
-| inactive-title-class | 选项非选中时自定义标题样式类            | String  | -                |
+| disabled                      | 是否禁用菜单                            | boolean | `false`            |
+| cols                          | 可以设置一行展示多少列 options          | number  | 1                |
+| direction          | 菜单展开方向，可选值为up                | string  | `down`           |
+| active-title-class   | 选项选中时自定义标题样式类              | string  | -                |
+| inactive-title-class | 选项非选中时自定义标题样式类            | string  | -                |
 ### MenuItem Slots
 | 名称 | 说明 |
 |-|-|

src/packages/__VUE/uploader/doc.taro.md

@@ -12,7 +12,6 @@ import { Uploader } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Uploader);
-
 ```
 
 
@@ -59,6 +58,12 @@ app.use(Uploader);
 ``` html
 <nut-uploader :url="uploadUrl" :source-type="['camera']" ></nut-uploader>
 ```
+
+### 上传状态
+```html
+<nut-uploader :url="uploadUrl" @delete="onDelete"></nut-uploader>
+```
+
 ### 限制上传数量5个
 
 ``` html
@@ -70,7 +75,7 @@ app.use(Uploader);
 <nut-uploader :url="uploadUrl" multiple :maximize="1024 * 50" @oversize="onOversize"></nut-uploader>
 ```
 
-### 自定义 FormData headers
+### 自定义数据 FormData headers
 
 ``` html
 <nut-uploader :url="uploadUrl" :data="formData" :headers="formData" :with-Credentials="true"></nut-uploader>
@@ -230,37 +235,37 @@ setup() {
 
 | 字段              | 说明                                                                                                             | 类型                              | 默认值                    |
 |-------------------|------------------------------------------------------------------------------------------------------------------|-----------------------------------|---------------------------|
-| auto-upload       | 是否在选取文件后立即进行上传，false 时需要手动执行 ref submit 方法进行上传                                       | boolean                           | true                      |
-| name              | 发到后台的文件参数名                                                                                             | string                            | "file"                    |
-| url               | 上传服务器的接口地址                                                                                             | string                            | -                         |
-| v-model:file-list | 默认已经上传的文件列表                                                                                           | FileItem[]                        | []                        |
-| is-preview        | 是否上传成功后展示预览图                                                                                         | boolean                           | true                      |
-| is-deletable      | 是否展示删除按钮                                                                                                 | boolean                           | true                      |
-| method            | 上传请求的 http method                                                                                           | string                            | "post"                    |
-| list-type         | 上传列表的内建样式，支持两种基本样式 picture、list                                                               | string                            | "picture"                 |
-| source-type       | [选择图片的来源](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)           | string                            | ['album','camera']        |
-| maximize          | 可以设定最大上传文件的大小（字节）                                                                               | number \| string                  | 9                         |
-| maximum           | 文件上传数量限制                                                                                                 | number \| string                  | 1                         |
-| size-type         | 是否压缩所选文件[详细说明](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html) | string                            | ['original','compressed'] |
-| headers           | 设置上传的请求头部                                                                                               | object                            | {}                        |
-| data              | 附加上传的信息 formData                                                                                          | object                            | {}                        |
-| xhr-state         | 接口响应的成功状态（status）值                                                                                   | number                            | 200                       |
-| disabled          | 是否禁用文件上传                                                                                                 | boolean                           | false                     |
-| multiple          | 是否支持文件多选                                                                                                 | boolean                           | true                      |
-| timeout           | 超时时间，单位为毫秒                                                                                             | number \| string                  | 1000 * 30                 |
-| before-upload     | 上传前的函数需要返回一个`Promise`对象                                                                            | Function                          | null                      |
-| before-xhr-upload | 执行 Taro.uploadFile 上传时，自定义方式                                                                          | Function(Taro.uploadFile，option) | null                      |
+| auto-upload       | 是否在选取文件后立即进行上传，false 时需要手动执行 ref submit 方法进行上传                                       | boolean                           | `true`                      |
+| name              | 发到后台的文件参数名                                                                                             | string                            | `file`                    |
+| url               | 上传服务器的接口地址                                                                                             | string                            | `-`                         |
+| v-model:file-list | 默认已经上传的文件列表                                                                                           | FileItem[]                        | `[]`                        |
+| is-preview        | 是否上传成功后展示预览图                                                                                         | boolean                           | `true`                      |
+| is-deletable      | 是否展示删除按钮                                                                                                 | boolean                           | `true`                      |
+| method            | 上传请求的 http method                                                                                           | string                            | `post`                    |
+| list-type         | 上传列表的内建样式，支持两种基本样式 `picture`、`list`                                                               | string                            | `picture`                 |
+| source-type       | [选择图片的来源](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)           | string                            | `['album','camera']`        |
+| maximize          | 可以设定最大上传文件的大小（字节）                                                                               | number \| string                  | `9`                         |
+| maximum           | 文件上传数量限制                                                                                                 | number \| string                  | `1`                         |
+| size-type         | 是否压缩所选文件[详细说明](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html) | string                            | `['original','compressed']` |
+| headers           | 设置上传的请求头部                                                                                               | object                            | `{}`                        |
+| data              | 附加上传的信息 formData                                                                                          | object                            | `{}`                        |
+| xhr-state         | 接口响应的成功状态（status）值                                                                                   | number                            | `200`                       |
+| disabled          | 是否禁用文件上传                                                                                                 | boolean                           | `false`                     |
+| multiple          | 是否支持文件多选                                                                                                 | boolean                           | `true`                      |
+| timeout           | 超时时间，单位为毫秒                                                                                             | number \| string                  | `1000 * 30`                 |
+| before-upload     | 上传前的函数需要返回一个`Promise`对象                                                                            | Function                          | `null`                     |
+| before-xhr-upload | 执行 Taro.uploadFile 上传时，自定义方式                                                                          | Function(Taro.uploadFile，option) | `null`                      |
 
 
 ### FileItem
 
 | 名称     | 说明                                            | 默认值                          |
 |----------|-------------------------------------------------|---------------------------------|
-| status   | 文件状态值，可选'ready,uploading,success,error' | "ready"                         |
-| uid      | 文件的唯一标识                                  | new Date().getTime().toString() |
-| name     | 文件名称                                        | ""                              |
-| url      | 文件路径                                        | ""                              |
-| formData | 上传所需的data                                  | {}                              |
+| status   | 文件状态值，可选'ready,uploading,success,error' | `ready`                         |
+| uid      | 文件的唯一标识                                  | `new Date().getTime().toString()` |
+| name     | 文件名称                                        | `""`                              |
+| url      | 文件路径                                        | `""`                              |
+| formData | 上传所需的data                                  | `{}`                              |
 
 ### Events
 
@@ -291,8 +296,8 @@ setup() {
 
 | 方法名           | 说明                                                       | 参数  | 返回值 |
 |------------------|------------------------------------------------------------|-------|--------|
-| submit           | 手动上传模式，执行上传操作                                 | -     | -      |
-| clearUploadQueue | 清空已选择的文件队列（该方法一般配合在手动模式上传时使用） | index | -      |
+| submit           | 手动上传模式，执行上传操作                                 | -     | `-`      |
+| clearUploadQueue | 清空已选择的文件队列（该方法一般配合在手动模式上传时使用） | index | `-`      |
 
 ## 主题定制
 

src/sites/mobile-taro/vue/src/app.config.ts

@@ -110,7 +110,7 @@ const subPackages = [
 ];
 
 export default {
-  pages: ['pages/index/index'],
+  pages: ['pages/index/index', 'pages/index/layout'],
   subPackages,
   window: {
     backgroundTextStyle: 'light',

src/sites/mobile-taro/vue/src/business/pages/card/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="demo">
-    <h2>默认用法</h2>
+    <h2>基础用法</h2>
     <nut-card
       :img-url="state.imgUrl"
       :title="state.title"

src/sites/mobile-taro/vue/src/components/header.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="applets-demo-header">
+    <div class="back" @click="navigateTo">
+      <Left />
+    </div>
+    <div class="applets-icon">
+      <img
+        src="https://img13.360buyimg.com/imagetools/jfs/t1/67106/30/23857/9375/63b4df85Fce5fd959/35265019206515fe.png"
+      />
+    </div>
+    <div>{{ compName }}</div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Taro from '@tarojs/taro';
+import { Left } from '@nutui/icons-vue';
+export default defineComponent({
+  name: 'header',
+  components: {
+    Left
+  },
+  props: {
+    compName: {
+      type: String,
+      default: ''
+    }
+  },
+  setup() {
+    //返回demo页
+    const navigateTo = () => {
+      Taro.navigateTo({
+        url: `pages/index/index`
+      });
+    };
+
+    return { navigateTo };
+  }
+});
+</script>
+
+<style lang="scss">
+.applets-demo-header {
+  position: fixed;
+  z-index: 10;
+  left: 0;
+  right: 0;
+  height: 57px;
+  line-height: 57px;
+  text-align: center;
+  background: $white;
+  font-weight: bold;
+  font-size: 20px;
+  color: rgba(51, 51, 51, 1);
+  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.07);
+  .back {
+    position: absolute;
+    left: 0;
+    height: 100%;
+    width: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+  .applets-icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    > img {
+      width: 87px;
+      height: 36px;
+    }
+  }
+}
+</style>

src/sites/mobile-taro/vue/src/dentry/pages/form/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo full">
-    <h2>基本用法</h2>
+    <h2>基础用法</h2>
     <nut-form>
       <nut-form-item label="姓名">
         <nut-input v-model="basicData.name" class="nut-input-text" placeholder="请输入姓名" type="text" />

src/sites/mobile-taro/vue/src/exhibition/pages/badge/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="demo">
-    <h2>默认用法</h2>
+    <h2>基础用法</h2>
     <nut-row>
       <nut-badge :value="8">
         <nut-avatar shape="square"></nut-avatar>

src/sites/mobile-taro/vue/src/exhibition/pages/popover/index.vue

@@ -82,7 +82,7 @@
     >
     </nut-popover>
 
-    <h2>自定义对象</h2>
+    <h2>自定义目标元素</h2>
     <nut-button type="primary" shape="square" id="popid" @click="clickCustomHandle"> 自定义对象 </nut-button>
     <nut-popover
       v-model:visible="customTarget"

src/sites/mobile-taro/vue/src/exhibition/pages/tag/index.vue

@@ -46,7 +46,7 @@
       >
     </nut-cell-group>
 
-    <nut-cell-group title="自定义">
+    <nut-cell-group title="颜色自定义">
       <nut-cell title="背景颜色">
         <template v-slot:link>
           <nut-tag color="#FA685D">标签</nut-tag>

src/sites/mobile-taro/vue/src/layout/pages/grid/index.vue

@@ -81,3 +81,9 @@
     </nut-grid>
   </div>
 </template>
+<script lang="ts">
+import { Dongdong } from '@nutui/icons-vue-taro';
+export default {
+  components: { Dongdong }
+};
+</script>

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

@@ -17,7 +17,7 @@
         <ul>
           <template v-for="_package in reorder(_nav.packages)" :key="_package">
             <li v-if="_package.show && _package.exportEmpty !== false">
-              <a @click="navigateTo(_package.name.toLowerCase(), _nav.enName)">
+              <a @click="navigateTo(_package.name, _nav.enName)">
                 {{ _package.name }}
                 &nbsp;&nbsp;
                 {{ _package.cName }}
@@ -65,7 +65,8 @@ export default {
 
     const navigateTo = (name, enName) => {
       Taro.navigateTo({
-        url: `/${enName}/pages/${name}/index`
+        // url: `/${enName}/pages/${name}/index`
+        url: `/pages/index/layout?enName=${enName}&name=${name}`
       });
     };
 
@@ -81,7 +82,7 @@ export default {
 .index {
   height: 100%;
   width: 100%;
-  padding-top: 30px;
+  // padding-top: 30px;
 
   &-header {
     display: flex;

src/sites/mobile-taro/vue/src/pages/index/layout.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="index">
+    <Header :compName="compName" />
+    <iframe :src="src"></iframe>
+  </div>
+</template>
+
+<script lang="ts">
+import { getCurrentInstance } from '@tarojs/taro';
+import { ref, computed } from 'vue';
+import Header from '../../components/header.vue';
+export default {
+  name: 'NutUI',
+  components: {
+    Header
+  },
+  setup() {
+    let compName = ref('');
+
+    let $instance = getCurrentInstance();
+
+    compName.value = $instance.router?.params.name;
+
+    const src = computed(() => {
+      return `/#/${$instance.router?.params.enName}/pages/${$instance.router?.params.name}/index`;
+    });
+
+    return {
+      compName,
+      src
+    };
+  }
+};
+</script>
+<style lang="scss">
+.index {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow-y: auto;
+}
+iframe {
+  border: 0;
+  position: fixed;
+  top: 57px;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 57px);
+}
+</style>