fix(progress,card): resolve probleam

src/packages/__VUE/actionsheet/index.vue

@@ -1,12 +1,5 @@
 <template>
-  <nut-popup
-    :visible="visible"
-    :isWrapTeleport="isWrapTeleport"
-    position="bottom"
-    round
-    @click-overlay="close"
-    :closeOnClickOverlay="closeAbled"
-  >
+  <nut-popup :visible="visible" position="bottom" round @click-overlay="close" :closeOnClickOverlay="closeAbled">
     <view :class="classes">
       <view v-if="title" class="nut-action-sheet__title">{{ title }}</view>
       <slot></slot>
@@ -91,10 +84,6 @@ export default create({
       type: Array as PropType<menuItems[]>,
       default: () => []
     },
-    isWrapTeleport: {
-      type: Boolean,
-      default: true
-    },
     closeAbled: {
       type: Boolean,
       default: true

src/packages/__VUE/card/demo.vue

@@ -43,7 +43,7 @@
         <div>{{ translate('customShop') }}</div>
       </template>
       <template #price>
-        <span>询价</span>
+        <span>{{ translate('question') }}</span>
       </template>
       <template #origin>
         <img
@@ -89,7 +89,8 @@ const initTranslate = () =>
       customContent: '自定义',
       desc: '自营',
       delivery: '厂商配送',
-      shopName: '阳澄湖大闸蟹自营店>'
+      shopName: '阳澄湖大闸蟹自营店>',
+      question: '询价'
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -103,7 +104,8 @@ const initTranslate = () =>
       customContent: 'custom',
       desc: 'desc',
       delivery: 'delivery',
-      shopName: 'shopName>'
+      shopName: 'shopName>',
+      question: 'inquiry'
     }
   });
 export default createDemo({

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

@@ -56,7 +56,9 @@ app.use(Card);
 ```
 :::
 
-### Custom Content
+
+### Custom prolist
+
 :::demo
 ```html
 <template>
@@ -69,32 +71,16 @@ app.use(Card);
     :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 #shop-tag>
-      <div>shop</div>
-    </template>
-    <template #footer>
-      <div class="customize">footer</div>
-    </template>
+        <template #prolist>
+        <div class="search_prolist_attr">
+          <span class="word">tag</span>
+          <span class="word">tag</span>
+          <span class="word">tag</span>
+        </div>
+      </template>
+  
   </nut-card>
 </template>
-</template>
 <script>
   import { reactive } from 'vue';
   export default{
@@ -115,23 +101,71 @@ app.use(Card);
   }
 }
 </script>
-<style>
-.search_prolist_attr {
+<style lang="scss">
+  .search_prolist_attr {
   margin: 3px 0 1px;
   height: 15px;
   overflow: hidden;
+  > 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;
+  }
 }
-.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;
+</style>
+```
+:::
+### Custom Content
+
+:::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 #shop-tag>
+        <div>Custom Content</div>
+      </template>
+      <template #price>
+        <span>inquiry</span>
+      </template>
+      <template #origin>
+        <img
+          class="tag"
+          src="https://img11.360buyimg.com/jdphoto/s58x28_jfs/t9451/359/415622649/15318/b0943e5d/59a78495N3bd2a9f8.png"
+          alt=""
+        />
+      </template>
+    </nut-card>
+</template>
+<script>
+  import { reactive } from 'vue';
+  export default{
+    setup() {
+    const state = reactive({
+      imgUrl:'//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
+      title: 'title',
+      shopName: 'shopName>'
+    });
+    return {
+      state
+    };
+  }
 }
+</script>
+<style lang="scss">
 .tag {
   display: inline-block;
   vertical-align: middle;
@@ -139,13 +173,54 @@ app.use(Card);
   margin-left: 2px;
   height: 14px;
 }
+</style>
+```
+:::
+
+### 自定义右下角内容
+:::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 #footer>
+        <div class="customize">custom</div>
+      </template>
+  </nut-card>
+</template>
+<script>
+  import { reactive } from 'vue';
+  export default{
+    setup() {
+    const state = reactive({
+      imgUrl:
+        '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
+      title: 'title',
+      price: '388',
+      vipPrice: '378',
+      shopDesc: 'desc',
+      delivery: 'delivery',
+      shopName: 'shopName>'
+    });
+    return {
+      state
+    };
+  }
+}
+</script>
+<style lang="scss">
 .customize {
   font-size: 12px;
 }
 </style>
 
-```
-:::
 ## API
 ### Props  
 

src/packages/__VUE/card/doc.md

@@ -54,7 +54,8 @@ app.use(Card);
 ```
 :::
 
-### 自定义内容
+### 自定义商品标签
+
 :::demo
 ```html
 <template>
@@ -67,29 +68,14 @@ app.use(Card);
     :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 #shop-tag>
-      <div>自定义店铺介绍</div>
-    </template>
-    <template #footer>
-      <div class="customize">自定义</div>
-    </template>
+        <template #prolist>
+        <div class="search_prolist_attr">
+          <span class="word">活鲜</span>
+          <span class="word">礼盒</span>
+          <span class="word">国产</span>
+        </div>
+      </template>
+  
   </nut-card>
 </template>
 <script>
@@ -112,23 +98,75 @@ app.use(Card);
   }
 }
 </script>
-<style>
-.search_prolist_attr {
+<style lang="scss">
+  .search_prolist_attr {
   margin: 3px 0 1px;
   height: 15px;
   overflow: hidden;
+  > 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;
+  }
 }
-.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;
+</style>
+```
+:::
+### 自定义店铺介绍
+
+:::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 #shop-tag>
+        <div>自定义店铺介绍</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>
+    </nut-card>
+</template>
+<script>
+  import { reactive } from 'vue';
+  export default{
+    setup() {
+    const state = reactive({
+      imgUrl:'//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
+      title: '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
+      price: '388',
+      vipPrice: '378',
+      shopDesc: '自营',
+      delivery: '厂商配送',
+      shopName: '阳澄湖大闸蟹自营店>'
+    });
+    return {
+      state
+    };
+  }
 }
+</script>
+<style lang="scss">
 .tag {
   display: inline-block;
   vertical-align: middle;
@@ -136,11 +174,55 @@ app.use(Card);
   margin-left: 2px;
   height: 14px;
 }
+</style>
+```
+:::
+
+### 自定义右下角内容
+:::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 #footer>
+        <div class="customize">自定义右下角内容</div>
+      </template>
+  </nut-card>
+</template>
+<script>
+  import { reactive } from 'vue';
+  export default{
+    setup() {
+    const state = reactive({
+      imgUrl:
+        '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
+      title: '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
+      price: '388',
+      vipPrice: '378',
+      shopDesc: '自营',
+      delivery: '厂商配送',
+      shopName: '阳澄湖大闸蟹自营店>'
+    });
+    return {
+      state
+    };
+  }
+}
+</script>
+<style lang="scss">
 .customize {
   font-size: 12px;
 }
 </style>
 
+
 ```
 :::
 ## API

src/packages/__VUE/card/doc.taro.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';
@@ -55,11 +54,11 @@ app.use(Card);
 ```
 :::
 
-### 自定义内容
+### 自定义商品标签
+
 :::demo
 ```html
 <template>
-<template>
   <nut-card
     :img-url="state.imgUrl"
     :title="state.title"
@@ -69,29 +68,14 @@ app.use(Card);
     :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 #shop-tag>
-      <div>自定义店铺介绍</div>
-    </template>
-    <template #footer>
-      <div class="customize">自定义</div>
-    </template>
+        <template #prolist>
+        <div class="search_prolist_attr">
+          <span class="word">活鲜</span>
+          <span class="word">礼盒</span>
+          <span class="word">国产</span>
+        </div>
+      </template>
+  
   </nut-card>
 </template>
 <script>
@@ -114,23 +98,75 @@ app.use(Card);
   }
 }
 </script>
-<style>
-.search_prolist_attr {
+<style lang="scss">
+  .search_prolist_attr {
   margin: 3px 0 1px;
   height: 15px;
   overflow: hidden;
+  > 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;
+  }
 }
-.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;
+</style>
+```
+:::
+### 自定义店铺介绍
+
+:::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 #shop-tag>
+        <div>自定义店铺介绍</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>
+    </nut-card>
+</template>
+<script>
+  import { reactive } from 'vue';
+  export default{
+    setup() {
+    const state = reactive({
+      imgUrl:'//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
+      title: '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
+      price: '388',
+      vipPrice: '378',
+      shopDesc: '自营',
+      delivery: '厂商配送',
+      shopName: '阳澄湖大闸蟹自营店>'
+    });
+    return {
+      state
+    };
+  }
 }
+</script>
+<style lang="scss">
 .tag {
   display: inline-block;
   vertical-align: middle;
@@ -138,11 +174,55 @@ app.use(Card);
   margin-left: 2px;
   height: 14px;
 }
+</style>
+```
+:::
+
+### 自定义右下角内容
+:::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 #footer>
+        <div class="customize">自定义右下角内容</div>
+      </template>
+  </nut-card>
+</template>
+<script>
+  import { reactive } from 'vue';
+  export default{
+    setup() {
+    const state = reactive({
+      imgUrl:
+        '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
+      title: '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
+      price: '388',
+      vipPrice: '378',
+      shopDesc: '自营',
+      delivery: '厂商配送',
+      shopName: '阳澄湖大闸蟹自营店>'
+    });
+    return {
+      state
+    };
+  }
+}
+</script>
+<style lang="scss">
 .customize {
   font-size: 12px;
 }
 </style>
 
+
 ```
 :::
 ## API
@@ -163,7 +243,7 @@ app.use(Card);
 
 | 事件名 | 说明     | 回调参数 |
 |----------|----------|----------|
-| click    | 点击事件 | event: MouseEvent    |
+| click    | 点击事件 | event: MouseEvent   |
 
 ### Slots
 

src/packages/__VUE/card/index.vue

@@ -34,7 +34,6 @@
 </template>
 
 <script lang="ts">
-import { computed, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import Price from '../price/index.vue';
 import Tag from '../tag/index.vue';
@@ -47,32 +46,25 @@ export default create({
 
   props: {
     imgUrl: {
-      type: String,
-      default: ''
+      type: String
     },
     title: {
-      type: String,
-      default: ''
+      type: String
     },
     price: {
-      type: String,
-      default: ''
+      type: String
     },
     vipPrice: {
-      type: String,
-      default: ''
+      type: String
     },
     shopDesc: {
-      type: String,
-      default: ''
+      type: String
     },
     delivery: {
-      type: String,
-      default: ''
+      type: String
     },
     shopName: {
-      type: String,
-      default: ''
+      type: String
     },
     isNeedPrice: {
       type: Boolean,

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

@@ -23,14 +23,14 @@ app.use(Ecard);
 <template>
   <nut-ecard
     v-model="money"
-    @inputChange="inputChange"
+    @input-change="inputChange"
     @change="change"
-    @changeStep="changeStep"
+    @change-step="changeStep"
     :data-list="dataList"
   ></nut-ecard>
 </template>
 <script>
-  import { reactive, toRefs } from 'vue';
+  import {ref, reactive, toRefs } from 'vue';
   export default {
     setup() {
       const dataList=reactive([
@@ -81,7 +81,7 @@ app.use(Ecard);
 | modelValue        | Price                | number | `0`            |
 | choose-text         | Main Title               | string |  `Select`   |
 | other-value-text        | Other Text   | string |         `Other Value`        |
-| data-list         | Ecard List| Array |        `[]`        |
+| data-list         | Ecard List| Array |        `DataList[]`        |
 | card-amount-min| Other Min Value     | number | `1`|
 | card-amount-max        | Other Max Value                      | number | `9999`            |
 | card-buy-min        | Choose Min Value                      | number | `9999`            |
@@ -97,6 +97,11 @@ app.use(Ecard);
 | input-change  | Triggered when the value changes |`value` |
 | change-step  | Triggered when the steps value changes | `value，modelValue` |
 
+### Data Structure of DataList 
+| key	 | Description           | Description     |
+|--------|----------------|--------------|
+| price  | price | string |
+
 ## Theming
 
 ### CSS Variables

src/packages/__VUE/ecard/doc.md

@@ -21,16 +21,18 @@ app.use(Ecard);
 
 ```html
 <template>
-  <nut-ecard
-    v-model="money"
-    @inputChange="inputChange"
-    @change="change"
-    @changeStep="changeStep"
-    :data-list="dataList"
-  ></nut-ecard>
+  <nut-cell>
+    <nut-ecard
+      v-model="money"
+      @input-change="inputChange"
+      @change="change"
+      @change-step="changeStep"
+      :data-list="dataList"
+    ></nut-ecard>
+  </nut-cell>
 </template>
 <script>
-  import { reactive, toRefs } from 'vue';
+  import {ref, reactive, toRefs } from 'vue';
   export default {
     setup() {
       const dataList=reactive([
@@ -81,7 +83,7 @@ app.use(Ecard);
 | modelValue        | 购买电子卡所需价钱                    | number | `0`            |
 | choose-text         | 选择面值文案               | string |   `请选择电子卡面值`              |
 | other-value-text        | 其他面值文案   | string |         `其他面值`        |
-| data-list         | 电子卡面值列表| Array |        `[]`        |
+| data-list         | 电子卡面值列表| Array |        `DataList[]`        |
 | card-amount-min| 其它面值最小值     | number | `1` |
 | card-amount-max        | 其他面值最大值                      | number | `9999`            |
 | card-buy-min        | 购买数量最小值                      | number | `9999`            |
@@ -97,6 +99,10 @@ app.use(Ecard);
 | input-change  | 更改 `input` 框触发事件 |输入的数据 |
 | change-step  | 更改数量时触发 | 当前数量，当前选中的卡面值 |
 
+### DataList 数据结构
+| 键名	 | 说明           | 类型     |
+|--------|----------------|--------------|
+| price  | 每张电子卡价格 | string |
 ## 主题定制
 
 ### 样式变量

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

@@ -23,14 +23,14 @@ app.use(Ecard);
 <template>
   <nut-ecard
     v-model="money"
-    @inputChange="inputChange"
+    @input-change="inputChange"
     @change="change"
-    @changeStep="changeStep"
+    @change-step="changeStep"
     :data-list="dataList"
   ></nut-ecard>
 </template>
 <script>
-  import { reactive, toRefs } from 'vue';
+  import {ref, reactive, toRefs } from 'vue';
   export default {
     setup() {
       const dataList=reactive([
@@ -81,7 +81,7 @@ app.use(Ecard);
 | modelValue        | 购买电子卡所需价钱                    | number | `0`            |
 | choose-text         | 选择面值文案               | string |   `请选择电子卡面值`              |
 | other-value-text        | 其他面值文案   | string |         `其他面值`        |
-| data-list         | 电子卡面值列表| Array |        `[]`        |
+| data-list         | 电子卡面值列表| Array |        `DataList[]`        |
 | card-amount-min| 其它面值最小值     | number | `1` |
 | card-amount-max        | 其他面值最大值                      | number | `9999`            |
 | card-buy-min        | 购买数量最小值                      | number | `9999`            |
@@ -97,6 +97,10 @@ app.use(Ecard);
 | input-change  | 更改 `input` 框触发事件 | 输入的数据 |
 | change-step  | 更改数量时触发 | 当前数量，当前选中的卡面值 |
 
+### DataList 数据结构
+| 键名	 | 说明           | 类型     |
+|--------|----------------|--------------|
+| price  | 每张电子卡价格 | string |
 ## 主题定制
 
 ### 样式变量

src/packages/__VUE/numberkeyboard/doc.md

@@ -21,7 +21,7 @@ app.use(NumberKeyboard);
 :::demo
 ```html
 <template>
-    <nut-cell :isLink="true" @click="showKeyBoard" :showIcon="true" title="默认键盘"></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard"  title="默认键盘"></nut-cell>
     <nut-number-keyboard v-model:visible="visible" @input="input" @delete="onDelete" @close="close"> </nut-number-keyboard>
 </template>
 <script>
@@ -61,7 +61,7 @@ export default{
 :::demo
 ```html
 <template>
-    <nut-cell :isLink="true" @click="showKeyBoard" :showIcon="true" title="带右侧栏键盘"></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard"  title="带右侧栏键盘"></nut-cell>
      <nut-number-keyboard
       type="rightColumn"
       v-model:visible="visible"
@@ -108,7 +108,7 @@ export default{
 :::demo
 ```html
 <template>
-    <nut-cell :isLink="true" @click="showKeyBoard" :showIcon="true" title="随机数键盘"></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard"  title="随机数键盘"></nut-cell>
     <nut-number-keyboard
       type="rightColumn"
       v-model:visible="visible"
@@ -153,7 +153,7 @@ export default{
 :::demo
 ```html
 <template>
-     <nut-cell :isLink="true" @click="showKeyBoard(4)" :showIcon="true" title="带标题栏键盘"></nut-cell>
+     <nut-cell :isLink="true" @click="showKeyBoard(4)"  title="带标题栏键盘"></nut-cell>
     <nut-number-keyboard
       title="默认键盘"
       v-model:visible="visible"
@@ -197,7 +197,7 @@ export default{
 :::demo
 ```html
 <template>
-     <nut-cell :isLink="true" @click="showKeyBoard(4)" :showIcon="true" title="身份证键盘"></nut-cell>
+     <nut-cell :isLink="true" @click="showKeyBoard(4)"  title="身份证键盘"></nut-cell>
     <nut-number-keyboard
       v-model:visible="visible"
       :custom-key="customKey"
@@ -246,7 +246,6 @@ export default{
       desc-text-align="left"
       @click="showKeyBoard"
       :desc="value"
-      :showIcon="true"
       title="双向绑定："
     ></nut-cell>
      <nut-number-keyboard 

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

@@ -21,7 +21,7 @@ app.use(NumberKeyboard);
 :::demo
 ```html
 <template>
-    <nut-cell :isLink="true" @click="showKeyBoard" :showIcon="true" title="默认键盘"></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard"  title="默认键盘"></nut-cell>
     <nut-number-keyboard v-model:visible="visible" @input="input" @delete="onDelete" @close="close"> </nut-number-keyboard>
 </template>
 <script>
@@ -59,7 +59,7 @@ export default{
 :::demo
 ```html
 <template>
-    <nut-cell :isLink="true" @click="showKeyBoard" :showIcon="true" title="带右侧栏键盘"></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard"  title="带右侧栏键盘"></nut-cell>
      <nut-number-keyboard
       type="rightColumn"
       v-model:visible="visible"
@@ -104,7 +104,7 @@ export default{
 :::demo
 ```html
 <template>
-    <nut-cell :isLink="true" @click="showKeyBoard" :showIcon="true" title="随机数键盘"></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard"  title="随机数键盘"></nut-cell>
     <nut-number-keyboard
       type="rightColumn"
       v-model:visible="visible"
@@ -147,7 +147,7 @@ export default{
 :::demo
 ```html
 <template>
-     <nut-cell :isLink="true" @click="showKeyBoard(4)" :showIcon="true" title="带标题栏键盘"></nut-cell>
+     <nut-cell :isLink="true" @click="showKeyBoard(4)" title="带标题栏键盘"></nut-cell>
     <nut-number-keyboard
       title="默认键盘"
       v-model:visible="visible"
@@ -189,7 +189,7 @@ export default{
 :::demo
 ```html
 <template>
-     <nut-cell :isLink="true" @click="showKeyBoard(4)" :showIcon="true" title="身份证键盘"></nut-cell>
+     <nut-cell :isLink="true" @click="showKeyBoard(4)"  title="身份证键盘"></nut-cell>
     <nut-number-keyboard
       v-model:visible="visible"
       :custom-key="customKey"
@@ -236,7 +236,6 @@ export default{
       desc-text-align="left"
       @click="showKeyBoard"
       :desc="value"
-      :showIcon="true"
       title="双向绑定："
     ></nut-cell>
      <nut-number-keyboard 

src/packages/__VUE/progress/demo.vue

@@ -3,7 +3,7 @@
     <h2>{{ translate('basic') }}</h2>
     <div>
       <nut-cell>
-        <nut-progress percentage="30" />
+        <nut-progress percentage="120" />
       </nut-cell>
     </div>
 
@@ -19,12 +19,6 @@
         <nut-progress percentage="50" :show-text="false" stroke-height="24" />
       </nut-cell>
     </div>
-    <h2>{{ translate('showPercentage') }}</h2>
-    <div>
-      <nut-cell>
-        <nut-progress percentage="30" />
-      </nut-cell>
-    </div>
     <h2>{{ translate('showInsidePercentage') }}</h2>
     <div>
       <nut-cell>
@@ -104,13 +98,13 @@ const initTranslate = () =>
   useTranslate({
     'zh-CN': {
       basic: '基础用法',
-      customStyle: '线形进度条-设置颜色高度',
-      noShowPercentage: '百分比不显示',
-      showPercentage: '百分比外显',
-      showInsidePercentage: '百分比内显',
-      customContent: '百分比内显自定义',
-      customSize: '百分比内显自定义',
-      statusDisplay: '状态显示',
+      customStyle: '设置颜色高度',
+      noShowPercentage: '设置百分比不显示',
+      showPercentage: '设置百分比外显',
+      showInsidePercentage: '设置百分比内显',
+      customContent: '设置百分比内显自定义内容',
+      customSize: '自定义尺寸',
+      statusDisplay: '设置状态显示',
       dynamicChange: '动态改变',
       reduce: '减少',
       add: '增加'

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

@@ -162,7 +162,7 @@ app.use(Progress);
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| 名称                                    | 默认值                     |
+| Name                                    | Deault Value                     |
 | --------------------------------------- | -------------------------- |
 |  --nut-progress-inner-background-color| _linear-gradient(135deg,var(--nut-primary-color) 0%,var(--nut-primary-color-end) 100%)_  |
 |  --nut-progress-insidetext-background| _var(--nut-progress-inner-background-color)_  |
@@ -170,19 +170,15 @@ The component provides the following CSS variables, which can be used to customi
 |  --nut-progress-outer-border-radius| _12px_  |
 |  --nut-progress-insidetext-border-radius| _5px_  |
 |  --nut-progress-insidetext-padding| _3px 5px 3px 6px_  |
-|  --nut-progress-insidetext-top| _-42%_  |
 |  --nut-progress-small-height| _5px_  |
 |  --nut-progress-small-text-font-size| _7px_  |
 |  --nut-progress-small-text-line-height| _10px_  |
 |  --nut-progress-small-text-padding| _2px 4px_  |
-|  --nut-progress-small-text-top| _-100%_  |
 |  --nut-progress-base-height| _10px_  |
 |  --nut-progress-base-text-font-size| _9px_  |
 |  --nut-progress-base-text-line-height| _13px_  |
 |  --nut-progress-base-text-padding| _var(--nut-progress-insidetext-padding)_  |
-|  --nut-progress-base-text-top| _var(--nut-progress-insidetext-top)_  |
 |  --nut-progress-large-height| _15px_  |
 |  --nut-progress-large-text-font-size| _13px_  |
 |  --nut-progress-large-text-line-height| _18px_  |
 |  --nut-progress-large-text-padding| _var(--nut-progress-insidetext-padding)_  |
-|  --nut-progress-large-text-top| _var(--nut-progress-insidetext-top)_  |

src/packages/__VUE/progress/doc.md

@@ -26,13 +26,13 @@ app.use(Progress);
 </template>
 ```
 :::
-### 设置高度和颜色
+### 设置颜色高度
 
 :::demo
 ```html
 <template>
   <nut-cell>
-    <nut-progress percentage="30" stroke-color=" rgba(250,44,25,0.47)" stroke-width="20" text-color="red" />
+    <nut-progress percentage="30" stroke-color="rgba(250,44,25,0.47)" stroke-width="20" text-color="red" />
    </nut-cell>
 </template>
 ```
@@ -47,17 +47,6 @@ app.use(Progress);
 </template>
 ```
 :::
-### 设置百分比外显
-
-:::demo
-```html
-<template>
-  <nut-cell>
-     <nut-progress percentage="30" />
-  </nut-cell>
-</template>
-```
-:::
 
 ### 设置百分比内显
 :::demo
@@ -118,7 +107,7 @@ app.use(Progress);
         />
       </nut-cell>
       <nut-cell>
-        <nut-progress percentage="50" :stroke-width="strokeWidth" status="icon" />
+        <nut-progress percentage="50"  status="icon" />
       </nut-cell>
       <nut-cell>
         <nut-progress
@@ -134,6 +123,12 @@ app.use(Progress);
       </nut-cell>
     </div>
 </template>
+<script lang="ts">
+  import {Issue } from '@nutui/icons-vue';
+  export default{
+    components: {Issue},
+  }
+</script>
 ```
 :::
 ## API
@@ -171,19 +166,15 @@ app.use(Progress);
 |  --nut-progress-outer-border-radius| _12px_  |
 |  --nut-progress-insidetext-border-radius| _5px_  |
 |  --nut-progress-insidetext-padding| _3px 5px 3px 6px_  |
-|  --nut-progress-insidetext-top| _-42%_  |
 |  --nut-progress-small-height| _5px_  |
 |  --nut-progress-small-text-font-size| _7px_  |
 |  --nut-progress-small-text-line-height| _10px_  |
 |  --nut-progress-small-text-padding| _2px 4px_  |
-|  --nut-progress-small-text-top| _-100%_  |
 |  --nut-progress-base-height| _10px_  |
 |  --nut-progress-base-text-font-size| _9px_  |
 |  --nut-progress-base-text-line-height| _13px_  |
 |  --nut-progress-base-text-padding| _var(--nut-progress-insidetext-padding)_  |
-|  --nut-progress-base-text-top| _var(--nut-progress-insidetext-top)_  |
 |  --nut-progress-large-height| _15px_  |
 |  --nut-progress-large-text-font-size| _13px_  |
 |  --nut-progress-large-text-line-height| _18px_  |
 |  --nut-progress-large-text-padding| _var(--nut-progress-insidetext-padding)_  |
-|  --nut-progress-large-text-top| _var(--nut-progress-insidetext-top)_  |

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

@@ -47,17 +47,7 @@ app.use(Progress);
 </template>
 ```
 :::
-### 设置百分比外显
 
-:::demo
-```html
-<template>
-  <nut-cell>
-     <nut-progress percentage="30" />
-  </nut-cell>
-</template>
-```
-:::
 
 ### 设置百分比内显
 :::demo
@@ -87,7 +77,7 @@ app.use(Progress);
 ```
 :::
 
-### 自定义尺寸
+### 设置自定义尺寸
 
 内置 **small**，**base**，**large** 三种规格供使用。
 :::demo
@@ -163,7 +153,7 @@ app.use(Progress);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| Name | Default Value |
+| 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |
 |  --nut-progress-inner-background-color| _linear-gradient(135deg,var(--nut-primary-color) 0%,var(--nut-primary-color-end) 100%)_  |
 |  --nut-progress-insidetext-background| _var(--nut-progress-inner-background-color)_  |
@@ -171,19 +161,15 @@ app.use(Progress);
 |  --nut-progress-outer-border-radius| _12px_  |
 |  --nut-progress-insidetext-border-radius| _5px_  |
 |  --nut-progress-insidetext-padding| _3px 5px 3px 6px_  |
-|  --nut-progress-insidetext-top| _-42%_  |
 |  --nut-progress-small-height| _5px_  |
 |  --nut-progress-small-text-font-size| _7px_  |
 |  --nut-progress-small-text-line-height| _10px_  |
 |  --nut-progress-small-text-padding| _2px 4px_  |
-|  --nut-progress-small-text-top| _-100%_  |
 |  --nut-progress-base-height| _10px_  |
 |  --nut-progress-base-text-font-size| _9px_  |
 |  --nut-progress-base-text-line-height| _13px_  |
 |  --nut-progress-base-text-padding| _var(--nut-progress-insidetext-padding)_  |
-|  --nut-progress-base-text-top| _var(--nut-progress-insidetext-top)_  |
 |  --nut-progress-large-height| _15px_  |
 |  --nut-progress-large-text-font-size| _13px_  |
 |  --nut-progress-large-text-line-height| _18px_  |
 |  --nut-progress-large-text-padding| _var(--nut-progress-insidetext-padding)_  |
-|  --nut-progress-large-text-top| _var(--nut-progress-insidetext-top)_  |

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

@@ -2,7 +2,6 @@
   <div class="nut-progress">
     <div
       class="nut-progress-outer"
-      :id="'nut-progress-outer-taro-' + randRef"
       :class="[showText && !textInside ? 'nut-progress-outer-part' : '', size ? 'nut-progress-' + size : '']"
       :style="{ height: height }"
     >
@@ -106,11 +105,12 @@ export default create({
     const slotDefault = !!useSlots().default;
     const height = ref(props.strokeWidth + 'px');
     const insideText = ref();
-    const refRandomId = Math.random().toString(36).slice(-8);
-    const randRef = ref(refRandomId);
+    const percentage = computed(() => {
+      return props.percentage >= 100 ? 100 : props.percentage;
+    });
     const bgStyle = computed(() => {
       return {
-        width: props.percentage + '%',
+        width: percentage.value + '%',
         background: props.strokeColor || ''
       };
     });
@@ -125,10 +125,10 @@ export default create({
     });
     return {
       height,
+      percentage,
       bgStyle,
       textStyle,
       insideText,
-      randRef,
       slotDefault
     };
   }

src/packages/__VUE/progress/index.vue

@@ -102,9 +102,12 @@ export default create({
     const height = ref(props.strokeWidth + 'px');
     const progressOuter = ref();
     const insideText = ref();
+    const percentage = computed(() => {
+      return props.percentage >= 100 ? 100 : props.percentage;
+    });
     const bgStyle = computed(() => {
       return {
-        width: props.percentage + '%',
+        width: percentage.value + '%',
         background: props.strokeColor || ''
       };
     });
@@ -116,6 +119,7 @@ export default create({
     onMounted(() => {});
     return {
       height,
+      percentage,
       bgStyle,
       textStyle,
       progressOuter,

src/packages/__VUE/tabbaritem/index.scss

@@ -25,6 +25,10 @@
     flex-direction: column;
     align-items: center;
     position: relative;
+    .nut-icon {
+      width: 20px;
+      height: 20px;
+    }
 
     &_tips {
       position: absolute;

src/packages/styles/variables.scss

@@ -581,7 +581,7 @@ $badge-color: var(--nut-badge-color, #fff) !default;
 $badge-font-size: var(--nut-badge-font-size, $font-size-1) !default;
 $badge-border-radius: var(--nut-badge-border-radius, 14px) !default;
 $badge-padding: var(--nut-badge-padding, 0 5px) !default;
-$badge-content-transform: var(--nut-badge-content-transform, translateY(-50%) translateX(100%)) !default;
+$badge-content-transform: var(--nut-badge-content-transform, translate(50%, -50%)) !default;
 $badge-z-index: var(--nut-badge-z-index, 1) !default;
 $badge-dot-width: var(--nut-badge-dot-width, 7px) !default;
 $badge-dot-height: var(--nut-badge-dot-height, 7px) !default;

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

@@ -8,31 +8,25 @@
       </nut-cell>
     </div>
 
-    <h2>线形进度条-设置颜色高度</h2>
+    <h2>设置颜色高度</h2>
     <div>
       <nut-cell>
         <nut-progress percentage="30" stroke-color=" rgba(250,44,25,0.47)" stroke-width="20" text-color="red" />
       </nut-cell>
     </div>
-    <h2>线形进度条-百分比不显示</h2>
+    <h2>设置百分比不显示</h2>
     <div>
       <nut-cell>
         <nut-progress percentage="50" :show-text="false" stroke-height="24" />
       </nut-cell>
     </div>
-    <h2>线形进度条-百分比外显</h2>
-    <div>
-      <nut-cell>
-        <nut-progress percentage="30" />
-      </nut-cell>
-    </div>
-    <h2>线形进度条-百分比内显</h2>
+    <h2>设置百分比内显</h2>
     <div>
       <nut-cell>
         <nut-progress percentage="60" :text-inside="true" />
       </nut-cell>
     </div>
-    <h2>线形进度条-百分比内显自定义</h2>
+    <h2>设置百分比内显自定义内容</h2>
     <div>
       <nut-cell>
         <nut-progress percentage="60" :text-inside="true">
@@ -45,7 +39,7 @@
         </nut-progress>
       </nut-cell>
     </div>
-    <h2>线形进度条-自定义尺寸(内置"small","base","large"三种规格)</h2>
+    <h2>设置自定义尺寸</h2>
     <div>
       <nut-cell>
         <nut-progress percentage="30" size="small"> </nut-progress>
@@ -57,7 +51,7 @@
         <nut-progress percentage="70" size="large"> </nut-progress>
       </nut-cell>
     </div>
-    <h2>线形进度条-状态显示</h2>
+    <h2>设置状态显示</h2>
     <div>
       <nut-cell>
         <nut-progress