Docs: Button,BackTop,Range,badge,Tag,Popover add en-US doc (#1399)

* feat: button国际化

* feat:  backTop add en-us doc

* feat: range add en-US doc

* feat: badge add en-US doc

* feat: tag add en-US doc

* feat: popover add en-US doc

Co-authored-by: lkjh3214 <13121007159@163.com>

src/packages/__VUE/backtop/demo.vue

@@ -1,33 +1,34 @@
 <template>
   <div class="demo" id="elId">
-    <h2>基本用法</h2>
-    <div class="text-data">我是测试数据1</div>
-    <div class="text-data">我是测试数据2</div>
-    <div class="text-data">我是测试数据3</div>
-    <div class="text-data">我是测试数据4</div>
-    <div class="text-data">我是测试数据5</div>
-    <div class="text-data">我是测试数据6</div>
-    <div class="text-data">我是测试数据7</div>
-    <div class="text-data">我是测试数据8</div>
-    <div class="text-data">我是测试数据9</div>
-    <div class="text-data">我是测试数据10</div>
-    <div class="text-data">我是测试数据11</div>
-    <div class="text-data">我是测试数据12</div>
-    <div class="text-data">我是测试数据13</div>
-    <div class="text-data">我是测试数据14</div>
-    <div class="text-data">我是测试数据15</div>
-    <div class="text-data">我是测试数据16</div>
-    <div class="text-data">我是测试数据17</div>
-    <div class="text-data">我是测试数据18</div>
-    <div class="text-data">我是测试数据19</div>
-    <div class="text-data">我是测试数据20</div>
-    <div class="text-data">我是测试数据21</div>
-    <div class="text-data">我是测试数据22</div>
-    <div class="text-data">我是测试数据23</div>
-    <div class="text-data">我是测试数据24</div>
+    <h2>{{ translate('title') }}</h2>
+    <div class="text-data">{{ translate('content') }}1</div>
+    <div class="text-data">{{ translate('content') }}2</div>
+    <div class="text-data">{{ translate('content') }}3</div>
+    <div class="text-data">{{ translate('content') }}4</div>
+    <div class="text-data">{{ translate('content') }}5</div>
+    <div class="text-data">{{ translate('content') }}6</div>
+    <div class="text-data">{{ translate('content') }}7</div>
+    <div class="text-data">{{ translate('content') }}8</div>
+    <div class="text-data">{{ translate('content') }}9</div>
+    <div class="text-data">{{ translate('content') }}10</div>
+    <div class="text-data">{{ translate('content') }}11</div>
+    <div class="text-data">{{ translate('content') }}12</div>
+    <div class="text-data">{{ translate('content') }}13</div>
+    <div class="text-data">{{ translate('content') }}14</div>
+    <div class="text-data">{{ translate('content') }}15</div>
+    <div class="text-data">{{ translate('content') }}16</div>
+    <div class="text-data">{{ translate('content') }}17</div>
+    <div class="text-data">{{ translate('content') }}18</div>
+    <div class="text-data">{{ translate('content') }}19</div>
+    <div class="text-data">{{ translate('content') }}20</div>
+    <div class="text-data">{{ translate('content') }}21</div>
+    <div class="text-data">{{ translate('content') }}22</div>
+    <div class="text-data">{{ translate('content') }}23</div>
+    <div class="text-data">{{ translate('content') }}24</div>
     <nut-backtop @click="handleClick" el-id="elId" :distance="100" :bottom="110">
       <view class="backtop-demo">
-        <nut-icon size="12px" class="nut-backtop-main" name="top"></nut-icon><view class="title">顶部</view>
+        <nut-icon size="12px" class="nut-backtop-main" name="top"></nut-icon
+        ><view class="title">{{ translate('backText') }}</view>
       </view>
     </nut-backtop>
     <nut-backtop @click="handleClick" el-id="elId" :distance="200" :bottom="50"></nut-backtop>
@@ -36,16 +37,21 @@
 
 <script>
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('backtop');
-
+const { createDemo, translate } = createComponent('backtop');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': { title: '基本用法', clg: '触发返回顶部', content: '我是测试数据', backText: '顶部' },
+  'en-US': { title: 'Basic Usage', clg: 'backtop', content: 'test data', backText: 'Top' }
+});
 export default createDemo({
   setup(props, { emit }) {
     const handleClick = () => {
-      console.log('触发返回顶部');
+      console.log(translate('clg'));
     };
 
     return {
-      handleClick
+      handleClick,
+      translate
     };
   }
 });

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

@@ -0,0 +1,282 @@
+# BackTop
+
+### Intro
+
+Provides a quick return to the top function for long pages.
+
+### Install
+
+```javascript
+
+import { createApp } from 'vue';
+import { BackTop,Icon } from '@nutui/nutui';
+
+const app = createApp();
+app.use(BackTop);
+app.use(Icon);
+
+```
+
+### Basic Usage
+
+:::demo
+```html
+
+<template>
+  <div class="demo" id="elId">
+    <div class="text-data">test data1</div>
+    <div class="text-data">test data2</div>
+    <div class="text-data">test data3</div>
+    <div class="text-data">test data4</div>
+    <div class="text-data">test data5</div>
+    <div class="text-data">test data6</div>
+    <div class="text-data">test data7</div>
+    <div class="text-data">test data8</div>
+    <div class="text-data">test data9</div>
+    <div class="text-data">test data10</div>
+    <div class="text-data">test data11</div>
+    <div class="text-data">test data12</div>
+    <div class="text-data">test data13</div>
+    <div class="text-data">test data14</div>
+    <div class="text-data">test data15</div>
+    <div class="text-data">test data16</div>
+    <div class="text-data">test data17</div>
+    <div class="text-data">test data18</div>
+    <div class="text-data">test data19</div>
+    <div class="text-data">test data20</div>
+    <div class="text-data">test data21</div>
+    <div class="text-data">test data22</div>
+    <div class="text-data">test data23</div>
+    <div class="text-data">test data24</div>
+    <nut-backtop ></nut-backtop>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.demo {
+  .text-data {
+    margin: 0 auto;
+    margin-top: 15px;
+    margin-bottom: 20px;
+    padding-left: 16px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 46px;
+    background: rgba(255, 255, 255, 1);
+    border-radius: 7px;
+    box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
+    line-height: 19px;
+    font-size: 13px;
+    color: rgba(102, 102, 102, 1);
+  }
+}
+</style>
+
+```
+:::
+
+### Distance
+
+:::demo
+```html
+<template>
+  <div class="demo" id="elId">
+    <div class="text-data">test data1</div>
+    <div class="text-data">test data2</div>
+    <div class="text-data">test data3</div>
+    <div class="text-data">test data4</div>
+    <div class="text-data">test data5</div>
+    <div class="text-data">test data6</div>
+    <div class="text-data">test data7</div>
+    <div class="text-data">test data8</div>
+    <div class="text-data">test data9</div>
+    <div class="text-data">test data10</div>
+    <div class="text-data">test data11</div>
+    <div class="text-data">test data12</div>
+    <div class="text-data">test data13</div>
+    <div class="text-data">test data14</div>
+    <div class="text-data">test data15</div>
+    <div class="text-data">test data16</div>
+    <div class="text-data">test data17</div>
+    <div class="text-data">test data18</div>
+    <div class="text-data">test data19</div>
+    <div class="text-data">test data20</div>
+    <div class="text-data">test data21</div>
+    <div class="text-data">test data22</div>
+    <div class="text-data">test data23</div>
+    <div class="text-data">test data24</div>
+    <nut-backtop :distance="200" ></nut-backtop>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.demo {
+  .text-data {
+    margin: 0 auto;
+    margin-top: 15px;
+    margin-bottom: 20px;
+    padding-left: 16px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 46px;
+    background: rgba(255, 255, 255, 1);
+    border-radius: 7px;
+    box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
+    line-height: 19px;
+    font-size: 13px;
+    color: rgba(102, 102, 102, 1);
+  }
+}
+</style>
+```
+:::
+
+### Custom Style
+
+:::demo
+```html
+<template>
+  <div class="demo" id="elId">
+    <div class="text-data">test data1</div>
+    <div class="text-data">test data2</div>
+    <div class="text-data">test data3</div>
+    <div class="text-data">test data4</div>
+    <div class="text-data">test data5</div>
+    <div class="text-data">test data6</div>
+    <div class="text-data">test data7</div>
+    <div class="text-data">test data8</div>
+    <div class="text-data">test data9</div>
+    <div class="text-data">test data10</div>
+    <div class="text-data">test data11</div>
+    <div class="text-data">test data12</div>
+    <div class="text-data">test data13</div>
+    <div class="text-data">test data14</div>
+    <div class="text-data">test data15</div>
+    <div class="text-data">test data16</div>
+    <div class="text-data">test data17</div>
+    <div class="text-data">test data18</div>
+    <div class="text-data">test data19</div>
+    <div class="text-data">test data20</div>
+    <div class="text-data">test data21</div>
+    <div class="text-data">test data22</div>
+    <div class="text-data">test data23</div>
+    <div class="text-data">test data24</div>
+    <nut-backtop @click="handleClick" :distance="100" :bottom="90" ><div>无</div></nut-backtop>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.demo {
+  .text-data {
+    margin: 0 auto;
+    margin-top: 15px;
+    margin-bottom: 20px;
+    padding-left: 16px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 46px;
+    background: rgba(255, 255, 255, 1);
+    border-radius: 7px;
+    box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
+    line-height: 19px;
+    font-size: 13px;
+    color: rgba(102, 102, 102, 1);
+  }
+}
+</style>
+```
+:::
+
+### Click
+
+:::demo
+```html
+<template>
+  <div class="demo" id="elId">
+    <div class="text-data">test data1</div>
+    <div class="text-data">test data2</div>
+    <div class="text-data">test data3</div>
+    <div class="text-data">test data4</div>
+    <div class="text-data">test data5</div>
+    <div class="text-data">test data6</div>
+    <div class="text-data">test data7</div>
+    <div class="text-data">test data8</div>
+    <div class="text-data">test data9</div>
+    <div class="text-data">test data10</div>
+    <div class="text-data">test data11</div>
+    <div class="text-data">test data12</div>
+    <div class="text-data">test data13</div>
+    <div class="text-data">test data14</div>
+    <div class="text-data">test data15</div>
+    <div class="text-data">test data16</div>
+    <div class="text-data">test data17</div>
+    <div class="text-data">test data18</div>
+    <div class="text-data">test data19</div>
+    <div class="text-data">test data20</div>
+    <div class="text-data">test data21</div>
+    <div class="text-data">test data22</div>
+    <div class="text-data">test data23</div>
+    <div class="text-data">test data24</div>
+    <nut-backtop @click="handleClick" ></nut-backtop>
+  </div>
+</template>
+
+<script>
+  export default {
+    setup() {
+      const handleClick = () => {
+        console.log('backtop');
+      };
+
+      return {
+        handleClick
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+.demo {
+  .text-data {
+    margin: 0 auto;
+    margin-top: 15px;
+    margin-bottom: 20px;
+    padding-left: 16px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 46px;
+    background: rgba(255, 255, 255, 1);
+    border-radius: 7px;
+    box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
+    line-height: 19px;
+    font-size: 13px;
+    color: rgba(102, 102, 102, 1);
+  }
+}
+</style>
+```
+:::
+
+
+### API
+
+### Prop  
+
+| Attribute            | Description                 | Type    | Default  |
+|-----------------|------------------------------------------|---------|---------|
+| el-id           | Get the parent element of the listening element         | String | -       |
+| bottom         | Distance from bottom of page    | Number  | `20`       |
+| right        | Distance from the right side of the page      | Number |  `10`  |
+| distance     | How high to scroll the page vertically   | Number  | `200`      |
+| z-index         | Set the component z-index   | Number  | `10`       |  
+| is-animation         | Whether there is animation, mutually exclusive with the duration parameter   | Boolean  | `true`       |  
+| duration         | Set animation duration   | Number  | `1000`       |                                          
+
+### Event
+| Event  | Description     | Arguments    |
+|-------|----------|-------------|
+| click | Emitted when component is clicked | event: MouseEvent |

src/packages/__VUE/badge/demo.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="demo">
-    <h2>默认用法</h2>
+    <h2>{{ translate('title') }}</h2>
     <nut-row>
       <nut-badge :value="8">
         <nut-avatar icon="my" shape="square"></nut-avatar>
@@ -15,7 +15,7 @@
         <nut-avatar icon="my" shape="square"></nut-avatar>
       </nut-badge>
     </nut-row>
-    <h2>最大值</h2>
+    <h2>{{ translate('title1') }}</h2>
     <nut-row>
       <nut-badge :value="200" :max="9">
         <nut-avatar icon="my" shape="square"></nut-avatar>
@@ -28,7 +28,7 @@
       </nut-badge>
     </nut-row>
 
-    <h2>自定义颜色</h2>
+    <h2>{{ translate('title2') }}</h2>
     <nut-row>
       <nut-badge :value="8" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
         <nut-avatar icon="my" shape="square"></nut-avatar>
@@ -44,7 +44,7 @@
       </nut-badge>
     </nut-row>
 
-    <h2>自定义徽标内容</h2>
+    <h2>{{ translate('title3') }}</h2>
     <nut-row>
       <nut-badge>
         <template #icons>
@@ -66,7 +66,7 @@
       </nut-badge>
     </nut-row>
 
-    <h2>自定义位置</h2>
+    <h2>{{ translate('title4') }}</h2>
     <nut-row>
       <nut-badge :value="8" top="5" right="5">
         <nut-avatar icon="my" shape="square"></nut-avatar>
@@ -79,7 +79,7 @@
       </nut-badge>
     </nut-row>
 
-    <h2>独立展示</h2>
+    <h2>{{ translate('title5') }}</h2>
     <nut-row>
       <nut-badge :value="8"> </nut-badge>
       <nut-badge :value="76"> </nut-badge>
@@ -90,10 +90,32 @@
 
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('badge');
-
+const { createDemo, translate } = createComponent('badge');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    title: '基础用法',
+    title1: '最大值',
+    title2: '自定义颜色',
+    title3: '自定义徽标内容',
+    title4: '自定义位置',
+    title5: '独立展示'
+  },
+  'en-US': {
+    title: 'Basic Usage',
+    title1: 'Max',
+    title2: 'Custom Color',
+    title3: 'Custom Content',
+    title4: 'Custom Position ',
+    title5: 'Standalone'
+  }
+});
 export default createDemo({
-  setup() {}
+  setup() {
+    return {
+      translate
+    };
+  }
 });
 </script>
 

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

@@ -0,0 +1,231 @@
+# Badge
+
+### Intro
+
+A red dot, number or text appearing in the upper right corner of the icon or text indicates that there is new content or pending information.
+
+### Install
+
+```javascript
+
+import { createApp } from 'vue';
+// vue
+import { Badge } from '@nutui/nutui';
+// taro
+import { Badge } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Badge);
+
+```
+
+
+### Basic Usage
+
+:::demo
+```html
+<template>
+  <div class="demo">
+    <nut-badge :value="8">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge :value="76">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge value="NEW">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge dot>
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.demo{
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
+</style>
+
+```
+:::
+
+### Max
+
+:::demo
+```html
+<template>
+  <div class="demo">
+    <nut-badge :value="200" :max="9">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge :value="200" :max="20">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge :value="200" :max="99">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.demo{
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
+</style>
+
+```
+:::
+
+### Custom Color
+
+:::demo
+```html
+<template>
+  <div class="demo">
+    <nut-badge :value="8" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge :value="76" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge value="NEW" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge dot color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.demo{
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
+</style>
+
+```
+:::
+
+### Custom Content
+
+:::demo
+```html
+<template>
+  <div class="demo">
+    <nut-badge>
+      <template #icons>
+        <nut-icon name="Check" color="#ffffff" size="12"></nut-icon>
+      </template>
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge>
+      <template #icons>
+        <nut-icon name="link" color="#ffffff" size="12"></nut-icon>
+      </template>
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge>
+      <template #icons>
+        <nut-icon name="download" color="#ffffff" size="12"></nut-icon>
+      </template>
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.demo{
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
+</style>
+
+```
+:::
+
+### Custom Position 
+
+:::demo
+```html
+<template>
+  <div class="demo">
+    <nut-badge :value="8" top="5" right="5">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge :value="76" top="10" right="10">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge value="NEW">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+   </div>
+</template>
+
+<style lang="scss" scoped>
+.demo{
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
+</style>
+
+```
+:::
+
+### Standalone
+
+:::demo
+```html
+<template>
+  <div class="demo">
+    <nut-badge :value="8"> </nut-badge>
+    <nut-badge :value="76"> </nut-badge>
+    <nut-badge value="NEW"> </nut-badge>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.demo{
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
+</style>
+
+```
+:::
+
+
+### Prop  
+
+| Attribute | Description | Type | Default |
+|---------|--------------------------------------------|---------|-----------|
+| value   | content                                 | String  | -         |
+| max     | When value is a numeric value, the maximum value                     | Number  | `10000`   |
+| z-index | badge z-index                          | Number  | `10`      |
+| dot     | whether to dot                                 | Boolean | `false`   |
+| hidden  | whether to hide                                   | Boolean | `false`   |
+| top     | Up and down offset, support unit setting, for example: 5px | Number  | `0`       |
+| right   | Left and right offset, support unit setting, for example: 5px | Number  | `0`       |
+| color   |  badge background color    | String  | `#fa2c19` |
+
+### Slots
+
+| Name   | Description           |
+|---------|--------------|
+| default | Default slot |
+| icons | 	Icon slot |

src/packages/__VUE/badge/doc.md

@@ -21,7 +21,7 @@ app.use(Badge);
 
 ### 代码实例
 
-### 基本用法
+### 基础用法
 
 :::demo
 ```html

src/packages/__VUE/button/demo.vue

@@ -1,60 +1,63 @@
 <template>
   <div class="demo">
-    <h2>按钮类型</h2>
+    <h2>{{ translate('title') }}</h2>
     <div class="demo-button-row">
-      <nut-button type="primary">主要按钮</nut-button>
-      <nut-button type="info">信息按钮</nut-button>
-      <nut-button type="default">默认按钮</nut-button>
+      <nut-button type="primary">{{ translate('primary') }}</nut-button>
+      <nut-button type="info">{{ translate('info') }}</nut-button>
+      <nut-button type="default">{{ translate('default') }}</nut-button>
     </div>
     <div class="demo-button-row2">
-      <nut-button type="danger">危险按钮</nut-button>
-      <nut-button type="warning">警告按钮</nut-button>
-      <nut-button type="success">成功按钮</nut-button>
+      <nut-button type="danger">{{ translate('danger') }}</nut-button>
+      <nut-button type="warning">{{ translate('warning') }}</nut-button>
+      <nut-button type="success">{{ translate('success') }}</nut-button>
     </div>
-    <h2>朴素按钮</h2>
+    <h2>{{ translate('title1') }}</h2>
     <div class="demo-button-row2">
-      <nut-button plain type="primary">朴素按钮</nut-button>
-      <nut-button plain type="info">朴素按钮</nut-button>
+      <nut-button plain type="primary">{{ translate('plain') }}</nut-button>
+      <nut-button plain type="info">{{ translate('plain') }}</nut-button>
     </div>
-    <h2>禁用状态</h2>
+
+    <h2>{{ translate('title2') }}</h2>
     <div class="demo-button-row2">
-      <nut-button disabled type="primary">禁用状态</nut-button>
-      <nut-button plain disabled type="info">禁用状态</nut-button>
-      <nut-button plain disabled type="primary">禁用状态</nut-button>
+      <nut-button disabled type="primary">{{ translate('disabled') }}</nut-button>
+      <nut-button plain disabled type="info">{{ translate('disabled') }}</nut-button>
+      <nut-button plain disabled type="primary">{{ translate('disabled') }}</nut-button>
     </div>
-    <h2>按钮形状</h2>
+    <h2>{{ translate('title3') }}</h2>
     <div class="demo-button-row2">
-      <nut-button shape="square" type="primary">方形按钮</nut-button>
-      <nut-button type="info">圆形按钮</nut-button>
+      <nut-button shape="square" type="primary"> {{ translate('square') }}</nut-button>
+      <nut-button type="info"> {{ translate('round') }}</nut-button>
     </div>
-    <h2>加载状态</h2>
+    <h2>{{ translate('title4') }}</h2>
     <div class="demo-button-row2">
       <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>
+      <nut-button loading type="warning">{{ translate('loading') }}</nut-button>
+      <nut-button :loading="isLoading" type="success" @click="changeLoading">{{
+        translate('changeLoading')
+      }}</nut-button>
     </div>
-    <h2>图标按钮</h2>
+    <h2>{{ translate('title5') }}</h2>
     <div class="demo-button-row2">
       <nut-button shape="square" plain type="primary" icon="star-fill"></nut-button>
-      <nut-button shape="square" type="primary" icon="star">收藏</nut-button>
+      <nut-button shape="square" type="primary" icon="star">{{ translate('star') }}</nut-button>
     </div>
 
-    <h2>按钮尺寸</h2>
+    <h2>{{ translate('title7') }}</h2>
     <div class="demo-button-row2">
-      <nut-button size="large" type="primary" style="margin-bottom: 10px">大号按钮</nut-button>
-      <nut-button type="primary">普通按钮</nut-button>
-      <nut-button size="small" type="primary">小型按钮</nut-button>
-      <nut-button size="mini" type="primary">迷你按钮</nut-button>
+      <nut-button size="large" type="primary" style="margin-bottom: 10px">{{ translate('large') }}</nut-button>
+      <nut-button type="primary">{{ translate('normal') }}</nut-button>
+      <nut-button size="small" type="primary">{{ translate('small') }}</nut-button>
+      <nut-button size="mini" type="primary">{{ translate('mini') }}</nut-button>
     </div>
-    <h2>块级元素</h2>
+    <h2>{{ translate('title8') }}</h2>
     <div class="demo-button-row2">
-      <nut-button block type="primary">块级元素</nut-button>
+      <nut-button block type="primary">{{ translate('block') }}</nut-button>
     </div>
-    <h2>自定义颜色</h2>
+    <h2>{{ translate('title9') }}</h2>
     <div class="demo-button-row2">
-      <nut-button color="#7232dd">单色按钮</nut-button>
-      <nut-button color="#7232dd" plain>单色按钮</nut-button>
-      <nut-button color="linear-gradient(to right, #ff6034, #ee0a24)"> 渐变按钮 </nut-button>
+      <nut-button color="#7232dd">{{ translate('pure') }}</nut-button>
+      <nut-button color="#7232dd" plain>{{ translate('pure') }}</nut-button>
+      <nut-button color="linear-gradient(to right, #ff6034, #ee0a24)"> {{ translate('gradient') }} </nut-button>
     </div>
   </div>
 </template>
@@ -62,7 +65,75 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('button');
+const { createDemo, translate } = createComponent('button');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    title: '按钮类型',
+    title1: '朴素按钮',
+    title2: '禁用状态',
+    title3: '按钮形状',
+    title4: '加载状态',
+    title5: '图标按钮',
+    title6: '自定义图标',
+    title7: '按钮尺寸',
+    title8: '块级元素',
+    title9: '自定义颜色',
+    primary: '主要按钮',
+    info: '信息按钮',
+    default: '默认按钮',
+    danger: '危险按钮',
+    warning: '警告按钮',
+    success: '成功按钮',
+    plain: '朴素按钮',
+    disabled: '禁用状态',
+    square: '方形按钮',
+    round: '圆形按钮',
+    loading: '加载中...',
+    changeLoading: 'Click me!',
+    star: '收藏',
+    large: '大号按钮',
+    normal: '普通按钮',
+    small: '小型按钮',
+    mini: '迷你按钮',
+    block: '块级元素',
+    pure: '单色按钮',
+    gradient: '渐变色按钮'
+  },
+  'en-US': {
+    title: 'Type',
+    title1: 'Plain',
+    title2: 'Disabled',
+    title3: 'Shape',
+    title4: 'Loading',
+    title5: 'Icon',
+    title6: 'Custom Icon',
+    title7: 'Size',
+    title8: 'Block',
+    title9: 'Custom Color',
+    primary: 'Primary',
+    info: 'Info',
+    default: 'Default',
+    danger: 'Danger',
+    warning: 'Warning',
+    success: 'Success',
+    plain: 'Plain',
+    disabled: 'Disabled',
+    square: 'Square',
+    round: 'Round',
+    loading: 'Loading...',
+    changeLoading: 'Click me!',
+    star: 'Star',
+    large: 'Large',
+    normal: 'Normal',
+    small: 'Small',
+    mini: 'Mini',
+    block: 'Block Element',
+    pure: 'Pure',
+    gradient: 'Gradient'
+  }
+});
+
 export default createDemo({
   props: {},
   setup(props) {
@@ -76,7 +147,8 @@ export default createDemo({
 
     return {
       isLoading,
-      changeLoading
+      changeLoading,
+      translate
     };
   }
 });

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

@@ -0,0 +1,212 @@
+# Button
+
+### Intro
+
+Buttons are used to trigger an action, such as submitting a form.
+
+### Install
+
+```javascript
+import { createApp } from 'vue';
+// vue
+import { Button } from '@nutui/nutui';
+// taro
+import { Button } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Button);
+```
+
+## Code demonstration
+
+### Type
+
+The button supports six types: `default`, `primary`, `info`, `warning`, `danger`, `success`, the default is `default`.
+
+:::demo
+
+```html
+<template>
+  <nut-button type="primary">Primary</nut-button>
+  <nut-button type="info">Info</nut-button>
+  <nut-button type="default">Default</nut-button>
+  <nut-button type="danger">Danger</nut-button>
+  <nut-button type="warning">Warning</nut-button>
+  <nut-button type="success">Success</nut-button>
+</template>
+```
+
+:::
+
+### Plain
+
+The button is set as a plain button through the `plain` property, the text of the plain button is the button color, and the background is white.
+
+:::demo
+
+```html
+<template>
+  <nut-button plain type="primary">Plain</nut-button>
+  <nut-button plain type="info">Plain</nut-button>
+</template>
+```
+
+:::
+
+### Disabled
+
+The button is disabled through the `disabled` property, and the button cannot be clicked in the disabled state.
+
+:::demo
+
+```html
+<template>
+  <nut-button disabled type="primary">Disabled</nut-button>
+  <nut-button plain disabled type="info">Disabled</nut-button>
+  <nut-button plain disabled type="primary">Disabled</nut-button>
+</template>
+```
+
+:::
+
+### Shape
+
+Set the button shape through the `shape` property, support circle and square buttons, the default is circle.
+
+:::demo
+
+```html
+<template>
+  <nut-button shape="square" type="primary">Square</nut-button>
+  <nut-button type="info">Round</nut-button>
+</template>
+```
+
+:::
+
+### Loading
+
+:::demo
+
+```html
+<template>
+  <nut-button loading type="info"></nut-button>
+  <nut-button loading type="warning">Loading...</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>
+```
+
+:::
+
+### Icon
+
+:::demo
+
+```html
+<template>
+  <nut-button shape="square" plain type="primary" icon="star-fill"></nut-button>
+  <nut-button shape="square" type="primary" icon="star">Star</nut-button>
+</template>
+```
+
+:::
+
+#### Custom Icon
+
+Refer to the custom icon in the `Icon` component description, where `icon-font-class-name` corresponds to the `font-class-name` of the Icon component, and `icon-class-prefix` corresponds to the `class-prefix` of the Icon component .
+
+```html
+<template>
+  <nut-button shape="square" plain type="primary" icon-font-class-name="iconfont" icon-class-prefix="icon" icon="close"></nut-button>
+</template>
+```
+
+### Size
+
+Support `large`, `normal`, `small`, `mini` four sizes, the default is `normal`.
+
+:::demo
+
+```html
+<template>
+  <nut-button size="large" type="primary">Large</nut-button>
+  <nut-button type="primary">Normal</nut-button>
+  <nut-button size="small" type="primary">Small</nut-button>
+  <nut-button size="mini" type="primary">Mini</nut-button>
+</template>
+```
+
+:::
+
+### Block
+
+By default, the button is an inline block-level element. The `block` attribute can set the element type of the button to a block-level element, which is often used to implement banner buttons.
+
+:::demo
+
+```html
+<template>
+  <nut-button block type="primary">Block Element</nut-button>
+</template>
+```
+
+:::
+
+### Custom Color
+
+The color of the button can be customized through the color property.
+
+:::demo
+
+```html
+<template>
+  <nut-button color="#7232dd">Pure</nut-button>
+  <nut-button color="#7232dd" plain>Pure</nut-button>
+  <nut-button color="linear-gradient(to right, #ff6034, #ee0a24)"> Gradient </nut-button>
+</template>
+```
+
+:::
+
+## API
+
+### Prop
+
+| Attribute     | Description                                                         | Type    | Default    |
+| -------- | ------------------------------------------------------------ | ------- | --------- |
+| type     | Can be set to  `primary` `info` `warning` `danger` `success` | String  | `default` |
+| size     | 	Can be set to `large` `small` `mini`                        | String  | `normal`  |
+| shape    | Can be set to `square`                                      | String  | `round`   |
+| color    | Button color, support incoming linear-gradient gradient color                    | String  | -         |
+| plain    | Whether to be plain button     | Boolean | `false`   |
+| disabled | Whether to disable button         | Boolean | `false`   |
+| block    | Whether to set display block      | Boolean | `false`   |
+| icon     | Left Icon                     | String  | -         |
+| icon-font-class-name`v3.1.17` | Custom icon font base class name    | String | `nutui-iconfont` |
+| icon-class-prefix `v3.1.17`   | Custom icon class name prefix for using custom icons           | String | `nut-icon`       |
+| loading  | Whether to show loading status     | Boolean | `false`   |
+
+### Event
+
+| Event | Description           | Arguments          |
+| ------ | -------------- | ----------------- |
+| click  | Emitted when component is clicked | event: MouseEvent |

src/packages/__VUE/button/doc.md

@@ -151,7 +151,7 @@ app.use(Button);
   <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>
+  <nut-button size="mini" type="primary">迷你按钮</nut-button>
 </template>
 ```
 

src/packages/__VUE/popover/demo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo">
-    <h2>基础用法</h2>
+    <h2>{{ translate('title1') }}</h2>
 
     <nut-row type="flex">
       <nut-col :span="8">
@@ -11,42 +11,42 @@
           @choose="chooseItem"
         >
           <template #reference>
-            <nut-button type="primary" shape="square">明朗风格</nut-button>
+            <nut-button type="primary" shape="square">{{ translate('light') }}</nut-button>
           </template>
         </nut-popover>
       </nut-col>
       <nut-col :span="8">
         <nut-popover v-model:visible="visible.darkTheme" theme="dark" :list="iconItemList">
           <template #reference>
-            <nut-button type="primary" shape="square">暗黑风格</nut-button>
+            <nut-button type="primary" shape="square">{{ translate('dark') }}</nut-button>
           </template>
         </nut-popover>
       </nut-col>
     </nut-row>
 
-    <h2>选项配置</h2>
+    <h2>{{ translate('title2') }}</h2>
 
     <nut-row type="flex">
       <nut-col :span="8">
         <nut-popover v-model:visible="visible.showIcon" theme="dark" :list="itemList">
           <template #reference>
-            <nut-button type="primary" shape="square">展示图标</nut-button>
+            <nut-button type="primary" shape="square">{{ translate('showIcon') }}</nut-button>
           </template>
         </nut-popover>
       </nut-col>
       <nut-col :span="8">
         <nut-popover v-model:visible="visible.disableAction" :list="itemListDisabled">
           <template #reference>
-            <nut-button type="primary" shape="square">禁用选项</nut-button>
+            <nut-button type="primary" shape="square">{{ translate('disableAction') }}</nut-button>
           </template>
         </nut-popover>
       </nut-col>
     </nut-row>
 
-    <h2>自定义内容</h2>
+    <h2>{{ translate('title3') }}</h2>
     <nut-popover v-model:visible="visible.Customized" location="bottom-start">
       <template #reference>
-        <nut-button type="primary" shape="square">自定义内容</nut-button>
+        <nut-button type="primary" shape="square">{{ translate('content') }}</nut-button>
       </template>
 
       <template #content>
@@ -59,7 +59,7 @@
       </template>
     </nut-popover>
 
-    <h2>位置自定义</h2>
+    <h2>{{ translate('title4') }}</h2>
 
     <nut-row type="flex" justify="center">
       <nut-col :span="24" style="text-align: center">
@@ -85,8 +85,33 @@
 <script lang="ts">
 import { reactive, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('popover');
+const { createDemo, translate } = createComponent('popover');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
 
+useTranslate({
+  'zh-CN': {
+    title: '基础用法',
+    title1: '选项配置',
+    title2: '自定义内容',
+    title3: '位置自定义',
+    light: '明朗风格',
+    dark: '暗黑风格',
+    showIcon: '展示图标',
+    disableAction: '禁用选项',
+    content: '自定义内容'
+  },
+  'en-US': {
+    title: 'Basic Usage',
+    title1: 'Option Configuration',
+    title2: 'Custom Content',
+    title3: 'Custom Location',
+    light: 'light',
+    dark: 'dark',
+    showIcon: 'show icon',
+    disableAction: 'disabled',
+    content: 'custom content'
+  }
+});
 export default createDemo({
   setup() {
     const visible = ref({
@@ -119,84 +144,84 @@ export default createDemo({
 
     const iconItemList = reactive([
       {
-        name: '选项一'
+        name: 'option1'
       },
       {
-        name: '选项二'
+        name: 'option2'
       },
       {
-        name: '选项三'
+        name: 'option3'
       }
     ]);
 
     const positionList = reactive([
       {
-        name: '选项一'
+        name: 'option1'
       },
       {
-        name: '选项二'
+        name: 'option2'
       }
     ]);
 
     const itemList = reactive([
       {
-        name: '选项一',
+        name: 'option1',
         icon: 'my2'
       },
       {
-        name: '选项二',
+        name: 'option2',
         icon: 'cart2'
       },
       {
-        name: '选项三',
+        name: 'option3',
         icon: 'location2'
       }
     ]);
 
     const itemListDisabled = reactive([
       {
-        name: '选项一',
+        name: 'option1',
         disabled: true
       },
       {
-        name: '选项二',
+        name: 'option2',
         disabled: true
       },
       {
-        name: '选项三'
+        name: 'option3'
       }
     ]);
 
     const selfContent = reactive([
       {
         name: 'service',
-        desc: '选项一'
+        desc: 'option1'
       },
       {
         name: 'notice',
-        desc: '选项二'
+        desc: 'option2'
       },
       {
         name: 'location',
-        desc: '选项三'
+        desc: 'option3'
       },
       {
         name: 'category',
-        desc: '选项四'
+        desc: 'option4'
       },
       {
         name: 'scan2',
-        desc: '选项五'
+        desc: 'option5'
       },
       {
         name: 'message',
-        desc: '选项六'
+        desc: 'option6'
       }
     ]);
 
     const chooseItem = (item: unknown, index: number) => {
       console.log(item, index);
-      alert('选择项');
+      alert('selected');
     };
 
     return {
@@ -208,7 +233,8 @@ export default createDemo({
       chooseItem,
       position,
       curPostion,
-      positionList
+      positionList,
+      translate
     };
   }
 });

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

@@ -0,0 +1,323 @@
+# Popover
+
+### Intro
+
+Click or hover over the element to pop up the bubble card overlay.
+
+### Install
+
+```javascript
+
+import { createApp } from 'vue';
+// vue
+import { Popover, Popup } from '@nutui/nutui';
+// taro
+import { Popover, Popup } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Popover);
+
+```
+
+
+### Basic Usage
+
+Popover supports both light and dark styles. The default is light style. Set the theme property to `dark` to switch to dark style.
+
+:::demo
+```html
+<template>
+  <nut-popover v-model:visible="visible.lightTheme" :list="iconItemList">
+    <template #reference>
+      <nut-button type="primary" shape="square">Light</nut-button>
+    </template>
+  </nut-popover>
+
+  <nut-popover v-model:visible="visible.darkTheme" theme="dark" :list="iconItemList">
+    <template #reference>
+      <nut-button type="primary" shape="square">Dark</nut-button>
+    </template>
+  </nut-popover>
+</template>
+<script>
+import { reactive, ref } from 'vue';
+export default {
+  setup() {
+    const visible = ref({
+      darkTheme: false,
+      lightTheme: false,
+    });
+    const iconItemList = reactive([
+      { name: 'option1' },
+      { name: 'option2' },
+      { name: 'option3' }
+    ]);
+    return {
+        visible,
+        iconItemList,
+      };
+    }
+}
+</script>
+
+```
+:::
+
+### Option Configuration
+
+In the list array, an option can be disabled via the `disabled` field.
+
+:::demo
+```html
+<template>
+  <nut-popover v-model:visible="visible.showIcon" theme="dark" :list="itemList">
+    <template #reference>
+      <nut-button type="primary" shape="square">Show Icon</nut-button>
+    </template>
+  </nut-popover>
+
+  <nut-popover v-model:visible="visible.disableAction" :list="itemListDisabled">
+    <template #reference>
+      <nut-button type="primary" shape="square">Disabled</nut-button>
+    </template>
+  </nut-popover>
+</template>
+
+<script>
+import { reactive, ref } from 'vue';
+export default {
+  setup() {
+    const visible = ref({
+      showIcon: false,
+      disableAction: false,
+    });
+
+    const itemList = reactive([
+      {
+        name: 'option1',
+        icon: 'my2'
+      },{
+        name: 'option2',
+        icon: 'cart2'
+      },{
+        name: 'option3',
+        icon: 'location2'
+      }
+    ]);
+
+    const itemListDisabled = reactive([
+      {
+        name: 'option1',
+        disabled: true
+      },{
+        name: 'option2',
+        disabled: true
+      },{
+        name: 'option3'
+      }
+    ]);
+
+    return {
+        itemList,
+        visible,
+        itemListDisabled,
+      };
+    }
+}
+</script>
+
+
+```
+:::
+
+
+### Custom Content
+
+Customize the content in the slot named content.
+
+:::demo
+```html
+<template>
+  <nut-popover v-model:visible="visible.Customized">
+    <template #reference>
+      <nut-button type="primary" shape="square">custom content</nut-button>
+    </template>
+
+    <template #content>
+      <div class="self-content">
+        <div class="self-content-item" v-for="(item, index) in selfContent" :key="index">
+          <nut-icon :name="item.name" size="15"></nut-icon>
+        <div class="self-content-desc">{{ item.desc }}</div>
+        </div>
+      </div>
+    </template>
+  </nut-popover>
+</template>
+
+
+<script>
+import { reactive, ref } from 'vue';
+export default {
+  setup() {
+    const visible = ref({
+      Customized: false,
+    });
+    const selfContent = reactive([
+      {
+        name: 'service',
+        desc: 'option1'
+      },
+      {
+        name: 'notice',
+        desc: 'option2'
+      },
+      {
+        name: 'location',
+        desc: 'option3'
+      },
+      {
+        name: 'category',
+        desc: 'option4'
+      },
+      {
+        name: 'scan2',
+        desc: 'option5'
+      },
+      {
+        name: 'message',
+        desc: 'option6'
+      }
+    ]);
+
+    return {
+      visible,
+      selfContent,
+    };
+  }
+}
+</script>
+
+<style lang="scss">
+.self-content {
+  width: 195px;
+  display: flex;
+  flex-wrap: wrap;
+  &-item {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+  &-desc {
+    margin-top: 5px;
+    width: 60px;
+    font-size: 10px;
+    text-align: center;
+  }
+}
+</style>
+
+
+```
+:::
+
+### Placement
+
+Use the location property to control where the bubble pops up. optional value
+
+```
+top           # Top middle 
+left          # Left middle 
+right         # Right middle 
+bottom        # Bottom middle 
+```
+New since `v3.1.21`
+```
+top-start     # Top left
+top-end       # Top right 
+left-start    # Left top
+left-end      # Left bottom
+right-start   # Right top
+right-end     # Right bottom
+bottom-start  # Bottom left
+bottom-end    # Bottom right
+```
+
+
+:::demo
+```html
+<template>
+  <nut-popover v-model:visible="visible" location="top" theme="dark" :list="iconItemList">
+    <template #reference>
+      <div class="brick"></div>
+    </template>
+  </nut-popover>
+</template>
+
+<script lang="ts">
+import { reactive, ref } from 'vue';
+export default {
+  setup() {
+    const visible = ref(false);
+
+    const iconItemList = reactive([
+        {
+          name: 'option1'
+        },
+        {
+          name: 'option2'
+        }]);
+
+      return {
+        iconItemList,
+        visible,
+      };
+    }
+};
+</script>
+
+```
+:::
+
+
+
+### Prop  
+
+| Attribute | Description | Type | Default |
+|----------------|---------------------------------|---------|------------|
+| list          | list of options                          | List[]   | []        |
+| visible      | whether to show                 | boolean  | false     |
+| theme          | Theme style, can be set to `dark` `light`          | string   | `light`   |
+| location       | pop-up location  | string   | `bottom`  |
+| offset `v3.1.21`       | the offset of the occurrence position  | [number, number]   | [0, 12]  |
+| show-arrow `v3.1.21`       | whether to show small arrows  | boolean  | true  |
+| custom-class `v3.1.21`       | custom class   | string  | ''  |
+
+### List data structure  
+
+The List property is an array of objects, each object in the array is configured with a column, and the object can contain the following values:
+
+| Key            | Description                 | Type      | Default  |
+|----------------|----------------------|----------|--------|
+| name           | option text               | string   | -      |
+| icon           | `nut-icon` name      | string   | -      |
+| disabled       | whether to disable          | boolean  | false  | 
+| className `v3.1.21`      | Add extra class names for corresponding options          | string/Array/object  | -  | 
+
+
+### Slots
+
+| Name   | Description           |
+|---------|--------------|
+| content | Customize Bubble Component Menu Content |
+| reference | The content of the element that triggers the Popover to display |
+
+### Events
+
+| Event     | Description    | 
+|---------|--------------|
+| choose | Triggered when an option is clicked |
+| open   | Triggered when the menu is opened |
+| close  | Fired when the menu is closed |

src/packages/__VUE/range/demo.vue

@@ -1,34 +1,34 @@
 <template>
   <div class="demo">
-    <h2>基础用法</h2>
+    <h2>{{ translate('title') }}</h2>
     <nut-cell class="cell">
       <nut-range v-model="value1" @change="onChange"></nut-range>
     </nut-cell>
-    <h2>双滑块</h2>
+    <h2>{{ translate('title1') }}</h2>
     <nut-cell class="cell">
       <nut-range range v-model="value2" @change="onChange"></nut-range>
     </nut-cell>
-    <h2>指定范围</h2>
+    <h2>{{ translate('title2') }}</h2>
     <nut-cell class="cell">
       <nut-range v-model="value3" :max="10" :min="-10" @change="onChange"></nut-range>
     </nut-cell>
-    <h2>设置步长</h2>
+    <h2>{{ translate('title3') }}</h2>
     <nut-cell class="cell">
       <nut-range v-model="value4" :step="5" @change="onChange"></nut-range>
     </nut-cell>
-    <h2>隐藏范围</h2>
+    <h2>{{ translate('title4') }}</h2>
     <nut-cell class="cell">
       <nut-range hidden-range v-model="value5" @change="onChange"></nut-range>
     </nut-cell>
-    <h2>隐藏标签</h2>
+    <h2>{{ translate('title5') }}</h2>
     <nut-cell class="cell">
       <nut-range hidden-tag v-model="value6" @change="onChange"></nut-range>
     </nut-cell>
-    <h2>禁用</h2>
+    <h2>{{ translate('title6') }}</h2>
     <nut-cell class="cell">
       <nut-range disabled v-model="value7"></nut-range>
     </nut-cell>
-    <h2>自定义样式</h2>
+    <h2>{{ translate('title7') }}</h2>
     <nut-cell class="cell">
       <nut-range
         v-model="value8"
@@ -38,7 +38,7 @@
         active-color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
       ></nut-range>
     </nut-cell>
-    <h2>自定义按钮</h2>
+    <h2>{{ translate('title8') }}</h2>
     <nut-cell class="cell">
       <nut-range v-model="value9" @change="onChange">
         <template #button>
@@ -47,7 +47,7 @@
       </nut-range>
     </nut-cell>
 
-    <h2>垂直方向</h2>
+    <h2>{{ translate('title9') }}</h2>
     <nut-cell class="vertical_div">
       <view class="div">
         <nut-range v-model="value10" @change="onChange" :vertical="true"></nut-range>
@@ -56,7 +56,7 @@
         <nut-range range v-model="value11" @change="onChange" :vertical="true"></nut-range>
       </view>
     </nut-cell>
-    <h2>刻度标记</h2>
+    <h2>{{ translate('title10') }}</h2>
     <nut-cell class="cell">
       <nut-range v-model="value12" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
     </nut-cell>
@@ -86,7 +86,37 @@
 import { toRefs, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { Toast } from '@/packages/nutui.vue';
-const { createDemo } = createComponent('range');
+const { createDemo, translate } = createComponent('range');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+
+useTranslate({
+  'zh-CN': {
+    title: '基础用法',
+    title1: '双滑块',
+    title2: '指定范围',
+    title3: '设置步长',
+    title4: '隐藏范围',
+    title5: '隐藏标签',
+    title6: '禁用',
+    title7: '自定义样式',
+    title8: '自定义按钮',
+    title9: '垂直方向',
+    title10: '刻度标记'
+  },
+  'en-US': {
+    title: 'Basic Usage',
+    title1: 'Dual thumb',
+    title2: 'Range',
+    title3: 'Step Size',
+    title4: 'Hidden Range',
+    title5: 'Hidden Tag',
+    title6: 'Disabled',
+    title7: 'Custom Style',
+    title8: 'Custom Button',
+    title9: 'Vertical',
+    title10: 'Marks'
+  }
+});
 export default createDemo({
   props: {},
   setup() {
@@ -116,10 +146,11 @@ export default createDemo({
       }
     });
 
-    const onChange = (value: number) => Toast.text('当前值：' + value);
+    const onChange = (value: number) => Toast.text('value：' + value);
     return {
       ...toRefs(state),
-      onChange
+      onChange,
+      translate
     };
   }
 });

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

@@ -0,0 +1,412 @@
+# Range
+
+### Intro
+  
+Slide the input bar to select a value within a given range.
+
+### Install
+
+```javascript
+import { createApp } from 'vue';
+//vue
+import { Range } from '@nutui/nutui';
+//taro
+import { Range } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Range);
+```
+
+### Basic Usage
+:::demo
+
+```html
+<template>
+  <nut-cell :style="{padding: '40px 18px'}">
+    <nut-range v-model="value" @change="onChange"></nut-range>
+  </nut-cell>
+</template>
+
+<script lang="ts">
+  import { ref } from 'vue';
+  import { Toast } from '@nutui/nutui';
+  export default {
+    setup() {
+      const value = ref(40);
+      const onChange = (value) => Toast.text('value：' + value);
+      return {
+        value,
+        onChange,
+      };
+    },
+  };
+</script>
+
+```
+:::
+
+### Dual thumb
+:::demo
+```html
+<template>
+  <nut-cell :style="{padding: '40px 18px'}">
+    <nut-range range v-model="value" @change="onChange"></nut-range>
+  </nut-cell>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+    const value = ref([20, 80]);
+    const onChange = (value) => Toast.text('value：' + value);
+    return {
+      value,
+      onChange,
+    };
+  },
+};
+</script>
+```
+:::
+### Range
+:::demo
+```html
+<template>
+  <nut-cell :style="{padding: '40px 18px'}">
+    <nut-range v-model="value" :max="10" :min="-10" @change="onChange" />
+  </nut-cell>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+    const value = ref(0);
+    const onChange = (value) => Toast.text('value：' + value);
+    return {
+      value,
+      onChange,
+    };
+  },
+};
+</script>
+```
+:::
+### Step Size
+:::demo
+```html
+<template>
+  <nut-cell :style="{padding: '40px 18px'}">
+    <nut-range v-model="value" :step="5" @change="onChange"></nut-range>
+  </nut-cell>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+    const value = ref(20);
+    const onChange = (value) => Toast.text('value：' + value);
+    return {
+      value,
+      onChange,
+    };
+  },
+};
+</script>
+```
+:::
+### Hidden Range
+:::demo
+```html
+<template>
+  <nut-cell :style="{padding: '40px 18px'}">
+    <nut-range v-model="value" hidden-range @change="onChange"></nut-range>
+  </nut-cell>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+    const value = ref(30);
+    const onChange = (value) => Toast.text('value：' + value);
+    return {
+      value,
+      onChange,
+    };
+  },
+};
+</script>
+```
+:::
+### Hidden Tag
+:::demo
+```html
+<template>
+  <nut-cell :style="{padding: '40px 18px'}">
+    <nut-range v-model="value" :hidden-tag="true" @change="onChange"></nut-range>
+  </nut-cell>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+    const value = ref(40);
+    const onChange = (value) => Toast.text('value：' + value);
+    return {
+      value,
+      onChange,
+    };
+  },
+};
+</script>
+```
+:::
+
+### Disabled
+:::demo
+```html
+<template>
+  <nut-cell :style="{padding: '40px 18px'}">
+    <nut-range v-model="value" disabled @change="onChange"></nut-range>
+  </nut-cell>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+    const value = ref(50);
+    const onChange = (value) => Toast.text('value：' + value);
+    return {
+      value,
+      onChange,
+    };
+  },
+};
+</script>
+```
+:::
+### Custom Style
+:::demo
+```html
+<template>
+  <nut-cell :style="{padding: '40px 18px'}">
+    <nut-range
+      v-model="value"
+      inactive-color="rgba(163,184,255,1)"
+      button-color="rgba(52,96,250,1)"
+      active-color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%"
+      @change="onChange">
+    </nut-range>
+  </nut-cell>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+    const value = ref(40);
+    const onChange = (value) => Toast.text('value：' + value);
+    return {
+      value,
+      onChange,
+    };
+  },
+};
+</script>
+```
+:::
+
+### Custom Button
+:::demo
+```html
+<style>
+  .custom-button {
+    width: 26px;
+    color: #fff;
+    font-size: 10px;
+    line-height: 18px;
+    text-align: center;
+    background-color: #ee0a24;
+    border-radius: 100px;
+  }
+</style>
+<template>
+  <nut-cell :style="{padding: '40px 18px'}">
+   <nut-range v-model="value" @change="onChange">
+      <template #button>
+        <div class="custom-button">{{ value }}</div>
+      </template>
+    </nut-range>
+  </nut-cell>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+    const value = ref(60);
+    const onChange = (value) => Toast.text('value：' + value);
+    return {
+      value,
+      onChange,
+    };
+  },
+};
+</script>
+```
+:::
+### Vertical
+:::demo
+```html
+<style>
+
+.vertical_div {
+  height: 180px;
+  padding: 10px;
+  .div {
+    width: 150px;
+  }
+}
+</style>
+<template>
+  <nut-cell class="vertical_div">
+    <div class="div">
+      <nut-range v-model="value10" @change="onChange" :vertical="true"></nut-range>
+    </div>
+    <div class="div">
+      <nut-range range v-model="value11" @change="onChange" :vertical="true"></nut-range>
+    </div>
+  </nut-cell>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+    const value10 = ref(20);
+    const value11 = ref([20,80]);
+    const onChange = (value) => Toast.text('value：' + value);
+    return {
+      value,
+      onChange,
+    };
+  },
+};
+</script>
+```
+:::
+
+### Marks
+:::demo
+```html
+<style>
+.vertical_div {
+  height: 180px;
+  padding: 10px;
+  .div {
+    width: 150px;
+  }
+}
+</style>
+<template>
+  <div >
+    <nut-cell class="cell">
+      <nut-range v-model="value12" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
+    </nut-cell>
+    <nut-cell class="cell">
+      <nut-range range v-model="value13" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
+    </nut-cell>
+    <nut-cell class="vertical_div">
+      <div class="div">
+        <nut-range v-model="value14" @change="onChange" :vertical="true" :marks="marks" :hiddenRange="true"></nut-range>
+      </div>
+      <div class="div">
+        <nut-range
+          range
+          v-model="value15"
+          @change="onChange"
+          :vertical="true"
+          :marks="marks"
+          :hiddenRange="true"
+        ></nut-range>
+      </div>
+    </nut-cell>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+    const value12 = ref(20);
+    const value13 = ref([20,80]);
+    const marks=ref({
+      0: 0,
+      20: 20,
+      40: 40,
+      60: 60,
+      80: 80,
+      100: 100
+    });
+    const onChange = (value) => Toast.text('value：' + value);
+    return {
+      value,
+      onChange,
+    };
+  },
+};
+</script>
+```
+:::
+
+
+  ## API
+  
+  ### Props
+  
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model | current progress percentage | Number、Number[] | `0` |
+| range | Whether to enable dual slider mode | Boolean | `false` |
+| max | maximum  | Number、String | `100` |
+| min | minimum  | Number、String | `0` |
+| step | step size | Number、String | `1` |
+| disabled | Whether to disable the slider | Boolean | `false` |
+| vertical | Whether to display vertically | Boolean | `false` |
+| hidden-range | whether to hide range values | Boolean | `false` |
+| hidden-tag | whether to hide the label | Boolean | `false` |
+| active-color | progress bar active color | String | `rgba(250, 44, 25, 1)` |
+| inactive-color | Progress bar inactive color | String | `rgba(255, 163, 154, 1)` |
+| button-color | button color | String | `rgba(250, 44, 25, 1)` |
+| marks | scale mark | Object{key:number} | {} |
+
+  
+### Events
+
+| Event             | Description                     | Arguments        |
+| ------------------ | ------------------------ | --------------- |
+| change             | Triggered when the progress changes and the drag is over | value: progress |
+| drag-start         | Triggered when dragging starts           | -               |
+| drag-end           | Triggered when the drag is over           | -               |
+
+### Slots
+
+| Name   | Description           |
+| ------ | -------------- |
+| button | custom slide button |
+

src/packages/__VUE/range/doc.md

@@ -231,11 +231,7 @@ export default {
 :::
 
 ### 自定义按钮
-```html
-
-
 
-```
 :::demo
 ```html
 <style>
@@ -276,6 +272,7 @@ export default {
 ```
 :::
 
+### 垂直方向
 :::demo
 ```html
 <style>
@@ -316,7 +313,7 @@ export default {
 </script>
 ```
 :::
-
+### 刻度标记
 :::demo
 ```html
 <style>

src/packages/__VUE/tag/demo.vue

@@ -1,65 +1,65 @@
 <template>
   <div class="demo">
-    <nut-cell-group title="基础用法">
-      <nut-cell title="primary 类型">
+    <nut-cell-group :title="translate('title')">
+      <nut-cell :title="translate('type1')">
         <template v-slot:link>
-          <nut-tag type="primary" @click="click">标签</nut-tag>
+          <nut-tag type="primary" @click="click">{{ translate('tag') }}</nut-tag>
         </template>
       </nut-cell>
-      <nut-cell title="success 类型">
+      <nut-cell :title="translate('type2')">
         <template v-slot:link>
-          <nut-tag type="success">标签</nut-tag>
+          <nut-tag type="success">{{ translate('tag') }}</nut-tag>
         </template>
       </nut-cell>
-      <nut-cell title="danger 类型">
+      <nut-cell :title="translate('type3')">
         <template v-slot:link>
-          <nut-tag type="danger">标签</nut-tag>
+          <nut-tag type="danger">{{ translate('tag') }}</nut-tag>
         </template>
       </nut-cell>
-      <nut-cell title="warning 类型">
+      <nut-cell :title="translate('type4')">
         <template v-slot:link>
-          <nut-tag type="warning">标签</nut-tag>
+          <nut-tag type="warning">{{ translate('tag') }}</nut-tag>
         </template>
       </nut-cell>
     </nut-cell-group>
 
-    <nut-cell-group title="样式风格">
-      <nut-cell title="空心样式">
+    <nut-cell-group :title="translate('title1')">
+      <nut-cell :title="translate('plain')">
         <template v-slot:link>
-          <nut-tag plain>标签</nut-tag>
+          <nut-tag plain>{{ translate('tag') }}</nut-tag>
         </template>
       </nut-cell>
-      <nut-cell title="圆角样式">
+      <nut-cell :title="translate('round')">
         <template v-slot:link>
-          <nut-tag round type="primary">标签</nut-tag>
+          <nut-tag round type="primary">{{ translate('tag') }}</nut-tag>
         </template>
       </nut-cell>
-      <nut-cell title="标记样式">
+      <nut-cell :title="translate('mark')">
         <template v-slot:link>
-          <nut-tag mark type="primary">标签</nut-tag>
+          <nut-tag mark type="primary">{{ translate('tag') }}</nut-tag>
         </template>
       </nut-cell>
-      <nut-cell title="可关闭标签">
+      <nut-cell :title="translate('closeable')">
         <template v-slot:link>
-          <nut-tag v-if="show" closeable @close="close" type="primary">标签</nut-tag>
+          <nut-tag v-if="show" closeable @close="close" type="primary">{{ translate('tag') }}</nut-tag>
         </template>
       </nut-cell>
     </nut-cell-group>
 
-    <nut-cell-group title="自定义">
-      <nut-cell title="背景颜色">
+    <nut-cell-group :title="translate('title2')">
+      <nut-cell :title="translate('bgColor')">
         <template v-slot:link>
-          <nut-tag color="#FA685D">标签</nut-tag>
+          <nut-tag color="#FA685D">{{ translate('tag') }}</nut-tag>
         </template>
       </nut-cell>
-      <nut-cell title="文字颜色">
+      <nut-cell :title="translate('textColor')">
         <template v-slot:link>
-          <nut-tag color="#E9E9E9" textColor="#999999">标签</nut-tag>
+          <nut-tag color="#E9E9E9" textColor="#999999">{{ translate('tag') }}</nut-tag>
         </template>
       </nut-cell>
-      <nut-cell title="空心颜色">
+      <nut-cell :title="translate('plaincolor')">
         <template v-slot:link>
-          <nut-tag color="#FA2400" plain>标签</nut-tag>
+          <nut-tag color="#FA2400" plain>{{ translate('tag') }}</nut-tag>
         </template>
       </nut-cell>
     </nut-cell-group>
@@ -69,8 +69,45 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('tag');
+const { createDemo, translate } = createComponent('tag');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
 
+useTranslate({
+  'zh-CN': {
+    title: '基础用法',
+    title1: '样式风格',
+    title2: '颜色自定义',
+    type1: 'primary 类型',
+    type2: 'success 类型',
+    type3: 'danger 类型',
+    type4: 'warning 类型',
+    plain: '空心样式',
+    round: '圆角样式',
+    mark: '标记样式',
+    closeable: '可关闭标签',
+    tag: '标签',
+    bgColor: '背景颜色',
+    textColor: '文字颜色',
+    plaincolor: '空心颜色'
+  },
+  'en-US': {
+    title: 'Basic Usage',
+    title1: 'Style',
+    title2: 'Custom Color',
+    type1: 'primary',
+    type2: 'success',
+    type3: 'danger',
+    type4: 'warning',
+    plain: 'plain',
+    round: 'round',
+    mark: 'mark',
+    closeable: 'closeable',
+    tag: 'Tag',
+    bgColor: 'background color',
+    textColor: 'text color',
+    plaincolor: 'plain color'
+  }
+});
 export default createDemo({
   setup() {
     const show = ref(true);
@@ -85,7 +122,8 @@ export default createDemo({
     return {
       close,
       click,
-      show
+      show,
+      translate
     };
   }
 });

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

@@ -0,0 +1,161 @@
+# Tag
+
+### Intro
+
+Labels for tagging and classification.
+
+### Install
+
+```javascript
+
+import { createApp } from 'vue';
+// vue
+import { Tag } from '@nutui/nutui';
+// taro
+import { Tag } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Tag);
+
+```
+
+### Basic Usage
+
+:::demo
+```html
+<template>
+ <nut-cell-group title="Basic Usage">
+    <nut-cell title="primary">
+      <template v-slot:link>
+        <nut-tag type="primary">Tag</nut-tag>
+      </template>
+    </nut-cell>
+    <nut-cell title="success">
+      <template v-slot:link>
+        <nut-tag type="success">Tag</nut-tag>
+      </template>
+    </nut-cell>
+    <nut-cell title="danger">
+      <template v-slot:link>
+        <nut-tag type="danger">Tag</nut-tag>
+      </template>
+    </nut-cell>
+    <nut-cell title="warning">
+      <template v-slot:link>
+        <nut-tag type="warning">Tag</nut-tag>
+      </template>
+    </nut-cell>
+  </nut-cell-group>
+</template>
+
+```
+:::
+
+### Style 
+
+:::demo
+```html
+<template>
+  <nut-cell-group title="Style">
+    <nut-cell title="plain">
+      <template v-slot:link>
+        <nut-tag plain>Tag</nut-tag>
+      </template>
+    </nut-cell>
+    <nut-cell title="round">
+      <template v-slot:link>
+        <nut-tag round type="primary">Tag</nut-tag>
+      </template>
+    </nut-cell>
+    <nut-cell title="mark">
+      <template v-slot:link>
+        <nut-tag mark type="primary">Tag</nut-tag>
+      </template>
+    </nut-cell>
+    <nut-cell title="closeable">
+      <template v-slot:link>
+        <nut-tag v-if="show" closeable @close="close" type="primary">Tag</nut-tag>
+      </template>
+    </nut-cell>
+  </nut-cell-group>
+</template>
+
+
+<script lang="ts">
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const show = ref(true);
+    const close = () => {
+      show.value = false;
+    };
+
+    return {
+      close,
+      show
+    };
+  }
+};
+</script>
+
+
+
+```
+:::
+
+
+### Custom Color
+
+:::demo
+```html
+<template>
+  <nut-cell-group title="Custom Color">
+    <nut-cell title="background color">
+      <template v-slot:link>
+        <nut-tag color="#FA685D">Tag</nut-tag>
+      </template>
+    </nut-cell>
+    <nut-cell title="text color">
+      <template v-slot:link>
+        <nut-tag color="#E9E9E9" textColor="#999999">Tag</nut-tag>
+      </template>
+    </nut-cell>
+    <nut-cell title="plain color">
+      <template v-slot:link>
+        <nut-tag color="#FA2400" plain>Tag</nut-tag>
+      </template>
+    </nut-cell>
+  </nut-cell-group>
+</template>
+
+```
+:::
+
+
+
+### Prop  
+
+| Attribute | Description | Type | Default |
+|------------|--------------------------------------------------|---------|-----------|
+| type       | Label type，can be set `primary` `success` `danger` `warning` | String  | `default` |
+| color      | Label color                                         | String  | -         |
+| text-color | Text color, which takes precedence over the color attribute| String  | `white`   |
+| plain      | Whether it is plain | Boolean | `false`   |
+| round      | Whether it is round                                   | Boolean | `false`   |
+| mark       | Whether it is mark                                   | Boolean | `false`   |
+| closeable  | Whether it is a closeable tag       | Boolean | `false`   |
+
+
+### Slots
+
+| Name   | Description           |
+|---------|--------------|
+| default | Label display content |
+
+### Event
+
+| Event             | Description                     | Arguments        |
+|----------|----------|----------|
+| click    | click event | event    |
+| close    | close event | event    |

src/packages/__VUE/tag/doc.md

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