upd: price、avatar、navbar国际化+navbar能力补齐+官网顶部获取组件名称 (#1320)

* fix: 修改input单元测试

* fix: 增加avatar group

* fix: 更新input md

* fix: avatar能力补齐

* fix: avatar能力补齐、适配taro

* feat: 迁移 AddressList、Category 组件，适配taro

* fix: 修改input md

* fix: 解决avatar组价不在一个div下的问题

* fix: 增加商品分类、地址列表在线编辑

* fix: 修复input taro 只读、修改value的问题

* fix: clearfix

* fix: clearfix

* fix: 增加issue

* feat: 头部修改

* fix: 删除指南导航

* fix: 隐藏demo底部栏,修改高度

* feat: avatar 国际化

* feat: price国际化

* feat: navbar国际化+占位

* feat: navbar 补齐+单元测试

* fix: 修复taro input异步赋值问题

* Merge remote-tracking branch 'upstream/next' into next

* fix: navbar新加props增加版本号

* fix: navbar新加props增加版本号

* fix: navbar新加props增加版本号

* Merge branch 'next' of https://github.com/ailululu/nutui into next

* Merge branch 'next' of https://github.com/ailululu/nutui into next

* fix: 缩进

* fix: 缩进2

Co-authored-by: richard1015 <51844712@qq.com>

src/packages/__VUE/addresslist/addresslist.json

@@ -0,0 +1,16 @@
+{
+  "data": [{
+    "testid": 3,
+    "testaddressName": "姓名",
+    "phone": "123****4567",
+    "defaultAddress": false,
+    "fullAddress": "北京市通州区测试测试测试测试测试测试测试测试测试"
+  },
+  {
+    "testid": 4,
+    "testaddressName": "姓名",
+    "phone": "123****4567",
+    "defaultAddress": true,
+    "fullAddress": "北京市通州区测试测试测试测试测试测试测试测试测试"
+  }]
+}

src/packages/__VUE/addresslist/demo.vue

@@ -47,6 +47,7 @@ const { createDemo } = createComponent('addresslist');
 export default createDemo({
   props: {},
   setup() {
+    // const data = ref([]);
     const data = ref([
       {
         testid: 3,
@@ -68,6 +69,22 @@ export default createDemo({
       addressDetail: 'testaddressDetail',
       addressName: 'testaddressName'
     });
+    // onMounted(() => {
+    //   setTimeout(() => {
+    //     getData();
+    //   }, 500);
+    // });
+
+    // const getData = () => {
+    //   fetch('//storage.360buyimg.com/nutui/3x/addresslist.js')
+    //     .then((response) => response.json())
+    //     .then((res) => {
+    //       console.log('res', res)
+    //       data.value = res.data;
+    //       console.log('data', data.value)
+    //     })
+    //     .catch((err) => console.log('Oh, error', err));
+    // };
     const itemClick = () => {
       console.log('点击了地址哦～');
     };

src/packages/__VUE/addresslist/index.vue

@@ -65,7 +65,7 @@
   </div>
 </template>
 <script lang="ts">
-import { toRefs, reactive, onMounted, ref } from 'vue';
+import { toRefs, reactive, onMounted, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('addresslist');
 import LongPressShell from './components/LongPressShell.vue';
@@ -122,6 +122,7 @@ export default create({
     });
     //磨平参数差异
     const trowelData = () => {
+      console.log('props.data', props.data);
       if (Object.keys(props.dataMapOptions).length > 0 && props.data.length > 0) {
         dataArray.value = props.data.map((item, index) => {
           return floatData(dataInfo, item, props.dataMapOptions);
@@ -129,6 +130,13 @@ export default create({
       }
     };
 
+    // 监听props.data的变更重新渲染列表
+    watch(
+      () => props.data,
+      () => trowelData(),
+      { deep: true }
+    );
+
     const clickDelIcon = (event, item) => {
       emit('handelDelIcon', event, item);
       event.stopPropagation();

src/packages/__VUE/avatar/demo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo full">
-    <h2>支持三种尺寸：small、normal、large</h2>
+    <h2>{{ translate('title1') }}</h2>
     <nut-cell>
       <nut-avatar
         size="large"
@@ -18,12 +18,12 @@
       >
       </nut-avatar>
     </nut-cell>
-    <h2>支持两种形状：square、round</h2>
+    <h2>{{ translate('title2') }}</h2>
     <nut-cell>
       <nut-avatar icon="my" shape="square"></nut-avatar>
       <nut-avatar icon="my" shape="round"></nut-avatar>
     </nut-cell>
-    <h2>支持三种类型：图片、Icon 以及字符</h2>
+    <h2>{{ translate('title3') }}</h2>
     <nut-cell>
       <nut-avatar
         url="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
@@ -32,12 +32,12 @@
       <nut-avatar icon="my"></nut-avatar>
       <nut-avatar>N</nut-avatar>
     </nut-cell>
-    <h2>Icon 和字符型可以自定义图标颜色及背景色</h2>
+    <h2>{{ translate('title4') }}</h2>
     <nut-cell>
       <nut-avatar class="demo-avatar" icon="my" color="#fff" bg-color="#FA2C19"></nut-avatar>
       <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
     </nut-cell>
-    <h2>带徽标的头像</h2>
+    <h2>{{ translate('title5') }}</h2>
     <nut-cell>
       <nut-badge value="8">
         <nut-avatar icon="my" shape="square"></nut-avatar>
@@ -46,7 +46,7 @@
         <nut-avatar icon="my" shape="square"></nut-avatar>
       </nut-badge>
     </nut-cell>
-    <h2>头像组合展现</h2>
+    <h2>{{ translate('title6') }}</h2>
     <nut-cell>
       <nut-avatar-group span="-4">
         <nut-avatar
@@ -69,7 +69,7 @@
         <nut-avatar icon="my"></nut-avatar>
       </nut-avatar-group>
     </nut-cell>
-    <h2>组合头像可控制层级方向</h2>
+    <h2>{{ translate('title7') }}</h2>
     <nut-cell>
       <nut-avatar-group max-count="3" zIndex="right" max-content="...">
         <nut-avatar
@@ -82,7 +82,7 @@
       </nut-avatar-group>
     </nut-cell>
 
-    <h2>点击头像触发事件</h2>
+    <h2>{{ translate('title8') }}</h2>
     <nut-cell>
       <nut-avatar icon="my" @active-avatar="handleClick"></nut-avatar>
     </nut-cell>
@@ -90,17 +90,40 @@
 </template>
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('avatar');
+const { createDemo, translate } = createComponent('cell');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    title1: '支持三种尺寸：small、normal、large',
+    title2: '支持两种形状：square、round',
+    title3: '支持三种类型：图片、Icon 以及字符',
+    title4: 'Icon 和字符型可以自定义颜色及背景色',
+    title5: '带徽标的头像',
+    title6: '头像组合展现',
+    title7: '组合头像可控制层级方向',
+    title8: '点击头像触发事件'
+  },
+  'en-US': {
+    title1: 'Support three sizes：small、normal、large',
+    title2: 'Support two shapes：square、round',
+    title3: 'Support three types：picture、icon、letter',
+    title4: 'Icon and letter types can have custom colors and background colors',
+    title5: 'Avatar with badge',
+    title6: 'Avatar group display',
+    title7: 'Avatar group to control hierarchy direction',
+    title8: 'Click on the avatar to trigger the event'
+  }
+});
 export default createDemo({
   props: {},
   setup() {
     const handleClick = () => {
-      console.log('触发点击头像');
+      console.log('Click Test');
     };
     const onError = () => {
-      console.log('触发error头像');
+      console.log('Error Test');
     };
-    return { handleClick, onError };
+    return { handleClick, onError, translate };
   }
 });
 </script>

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

@@ -0,0 +1,227 @@
+# Avatar
+
+### Intro
+
+Avatars can be used to represent people or objects. It supports images, Icons, or letters.
+
+### Install
+
+```javascript
+import { createApp } from 'vue';
+// vue
+import { Avatar, Icon } from '@nutui/nutui';
+// taro
+import { Avatar, Icon } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Avatar);
+app.use(Icon);
+```
+
+### Size
+
+Support three sizes：small、normal、large
+
+:::demo
+
+```html
+<template>
+  <nut-avatar
+    size="large"
+    icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+  ></nut-avatar>
+  <nut-avatar
+    size="normal"
+    icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+  ></nut-avatar>
+  <nut-avatar
+    size="small"
+    icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+  ></nut-avatar>
+</template>
+```
+
+:::
+
+### Shape
+
+Support two shapes：square、round
+
+:::demo
+
+```html
+<template>
+  <nut-avatar icon="my" shape="square"></nut-avatar>
+  <nut-avatar icon="my" shape="round"></nut-avatar>
+</template>
+```
+
+:::
+
+### Type
+
+Support three types：picture、icon、letter
+
+:::demo
+
+```html
+<template>
+  <nut-avatar
+    url="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+  >
+  </nut-avatar>
+  <nut-avatar icon="my"></nut-avatar>
+  <nut-avatar>N</nut-avatar>
+</template>
+```
+
+:::
+
+### Custom colors and background colors
+
+Icon and letter types can have custom colors and background colors
+
+:::demo
+
+```html
+<template>
+  <nut-avatar class="demo-avatar" icon="my" color="#fff" bg-color="#FA2C19"></nut-avatar>
+  <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
+</template>
+```
+
+:::
+
+### Avatar with badge
+
+:::demo
+
+```html
+<template>
+  <nut-badge value="8">
+    <nut-avatar icon="my" shape="square"></nut-avatar>
+  </nut-badge>
+  <nut-badge dot>
+    <nut-avatar icon="my" shape="square"></nut-avatar>
+  </nut-badge>
+</template>
+```
+
+:::
+
+## Avatar group display
+
+:::demo
+
+```html
+<template>
+  <nut-avatar-group span="-4">
+    <nut-avatar
+      url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
+    >
+    </nut-avatar>
+    <nut-avatar icon="my"></nut-avatar>
+    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
+  </nut-avatar-group>
+  <nut-avatar-group
+    max-count="3"
+    max-color="#fff"
+    max-bgColor="#498ff2"
+  >
+    <nut-avatar
+      url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
+    >
+    </nut-avatar>
+    <nut-avatar icon="my"></nut-avatar>
+    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
+    <nut-avatar icon="my"></nut-avatar>
+  </nut-avatar-group>
+</template>
+```
+
+:::
+
+## Avatar group to control hierarchy direction
+
+:::demo
+
+```html
+<template>
+  <nut-avatar-group
+    max-count="3"
+    zIndex="right"
+    max-content="..."
+  >
+    <nut-avatar
+      url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
+    >
+    </nut-avatar>
+    <nut-avatar icon="my"></nut-avatar>
+    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
+    <nut-avatar icon="my"></nut-avatar>
+  </nut-avatar-group>
+</template>
+```
+
+:::
+
+## Click on the avatar to trigger the event
+
+:::demo
+
+```html
+<template>
+  <nut-cell>
+    <nut-avatar icon="my" @active-avatar="handleClick"></nut-avatar>
+  </nut-cell>
+</template>
+<script lang="ts">
+  import { reactive } from 'vue';
+  export default {
+    setup() {
+      const handleClick = () => {
+        console.log('触发点击头像');
+      };
+
+      return {
+        handleClick
+      };
+    }
+  }
+</script>
+```
+
+:::
+
+
+### avatar Prop
+
+| Attribute | Description                                                        | Type   | Default |
+| -------- | ------------------------------------------------------------------- | ------ | ------ |
+| size     | The size of the avatar，eg `large`、`normal`、`small`，and numbers   | String ｜ Number | normal |
+| shape    | The shape of avatar，eg `square`、`round `    | String | round  |
+| color    | The colors of Icon and letter types        | String | #666   |
+| bg-color | The background colors of Icon and letter types      | String | #eee   |
+| url      | The address of the image for an image avatar or image element     | String | -   |
+| alt      | This attribute defines the alternative text describing the image     | String | -   |
+| icon     | Custom icon type for an icon avatar, Refer to the name attribute of Icon component  | String | -     |
+
+### avatarGroup Prop
+
+| Attribute     | Description                               | Type   | Default |
+| -------- | ---------------------------------------------------------------- | ------ | ------ |
+| max-count     | Max avatars to show   | String ｜ Number | - |
+| max-content  | When the number of avatars exceeds, a avatar folding element will appear，The content of this element can be `...`、`more`、`+N` | String | +N |
+| size         | The size of the avatar，eg `large`、`normal`、`small`，支持直接输入数字   | String ｜ Number | normal  |
+| shape        | The shape of avatar，eg `square`、`round`            | String | round  |
+| max-color    | The colors of Icon and letter types     | String | #666 |
+| max-bgColor  | The background colors of Icon and letter types        | String | #eee   |
+| span         | Distance between avatars            | String | -8   |
+| zIndex       | Hierarchy direction between avatar group，eg `left`、`right`  | String | left     |
+
+### avatar Events
+
+| Attribute     | Description                   | Arguments |
+| ------------- | ----------------------------- | --------- |
+| active-avatar | Emitted when cell is clicked  |  event    |
+| onError       | Handler when img load error   |  event    |

src/packages/__VUE/avatar/doc.md

@@ -79,7 +79,7 @@ app.use(Icon);
 
 ### 自定义颜色及背景色
 
-Icon 和字符型可以自定义图标颜色及背景色
+Icon 和字符型可以自定义颜色及背景色
 
 :::demo
 
@@ -194,33 +194,33 @@ Icon 和字符型可以自定义图标颜色及背景色
 :::
 
 
-### Prop
+### avatar Prop
 
-| 字段     | 说明                                                             | 类型   | 默认值 |
-| -------- | ---------------------------------------------------------------- | ------ | ------ |
-| size     | 设置头像的大小，可选值为：large、normal、small，支持直接输入数字   | String | normal |
-| shape    | 设置头像的形状，可选值为：square、round            | String | round  |
-| bg-color | 设置 Icon、字符类型头像的背景色                    | String | #eee   |
-| color    | 设置 Icon、字符类型头像的颜色                     | String | #666   |
-| url      | 设置图片类型头像的地址                           | String | -   |
-| alt      | 设置图片类型头像无法显示时的替代文本                | String | -   |
-| icon     | 设置 Icon 类型头像图标, 类似 Icon 组件的 name 属性  | String | -     |
+| 字段     | 说明                                                        | 类型   | 默认值 |
+| -------- | --------------------------------------------------------- | ------ | ------ |
+| size     | 头像的大小，可选值为：`large`、`normal`、`small`，支持输入数字   | String ｜ Number | normal |
+| shape    | 头像的形状，可选值为：`square`、`round `                      | String | round  |
+| color    | Icon、字符类型头像的颜色                                     | String | #666   |
+| bg-color | Icon、字符类型头像的背景色                                    | String | #eee   |
+| url      | 图片类型头像的地址                                           | String | -   |
+| alt      | 图片类型头像无法显示时的替代文本                               | String | -   |
+| icon     | Icon 类型头像图标, 类似 Icon 组件的 name 属性                 | String | -     |
 
-### avatarGroup
+### avatarGroup Prop
 
 | 字段     | 说明                                                             | 类型   | 默认值 |
 | -------- | ---------------------------------------------------------------- | ------ | ------ |
-| maxCount     | 显示的最大头像个数   | Number、String | - |
-| max-content  | 头像数量超出时，会出现一个头像折叠元素。该元素内容可为...、more、+N。默认为 +N | 
-| size         | 设置头像的大小，可选值为：large、normal、small，支持直接输入数字   | String | +N |
-| shape        | 设置头像的形状，可选值为：square、round            | String | round  |
-| max-bgColor  | 设置 Icon、字符类型头像的背景色                    | String | #eee   |
-| max-color    | 设置 Icon、字符类型头像的颜色                   | String | #666 |
-| span         | 设置头像之间的间距               | String | -8   |
-| zIndex       | 头像之间的层级关系，可选值为：left、right  | String | left     |
-### Events
-
-| 字段             | 说明         | 类型     | 回调参数 |
-| ---------------- | ------------ | -------- | -------- |
-| active-avatar | 点击头像触发事件    | Function | event    |
-| onError       | 图片加载失败的事件   | Function | event    |
+| max-count    | 显示的最大头像个数   | String ｜ Number | - |
+| max-content  | 头像数量超出时，会出现一个头像折叠元素，该元素内容可为`...`、`more`、`+N` | String | +N |
+| size         | 头像的大小，可选值为：`large`、`normal`、`small`，支持直接输入数字   | String ｜ Number | normal |
+| shape        | 头像的形状，可选值为：`square`、`round`        | String | round  |
+| max-color    | Icon、字符类型头像的颜色                   | String | #666 |
+| max-bgColor  | Icon、字符类型头像的背景色                    | String | #eee   |
+| span         | 头像之间的间距               | String | -8   |
+| zIndex       | 组合头像之间的层级方向，可选值为：`left`、`right`  | String | left     |
+### avatar Events
+
+| 字段             | 说明         | 回调参数 |
+| ---------------- | ------------ | -------- |
+| active-avatar | 点击头像触发事件    | event    |
+| onError       | 图片加载失败的事件   | event    |

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

@@ -320,8 +320,8 @@ export default create({
         value = props.formatter(value);
       }
 
-      if (inputRef && inputRef.value && inputRef.value.value && inputRef.value.value !== value) {
-        inputRef.value.value = value;
+      if (inputRef && inputRef.value && inputRef.value !== value) {
+        inputRef.value = value;
       }
 
       if (value !== props.modelValue) {

src/packages/__VUE/navbar/__test__/__snapshots__/navbar.spec.ts.snap

@@ -1,8 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render left slot correctly 1`] = `"<view class=\\"nut-navbar__left\\"><i class=\\"nutui-iconfont nut-icon nut-icon-left\\" style=\\"color: rgb(151, 151, 151);\\" src=\\"\\"></i>Custom Left</view>"`;
+exports[`should render left slot correctly 1`] = `
+"<view class=\\"nut-navbar__left\\"><i class=\\"nutui-iconfont nut-icon nut-icon-left\\" style=\\"color: rgb(151, 151, 151);\\" src=\\"\\"></i>
+  <!--v-if-->Custom Left
+</view>"
+`;
+
+exports[`should render placeholder element when using placeholder prop 1`] = `
+"<view class=\\"nut-navbar--placeholder\\">
+  <view class=\\"nut-navbar nut-navbar--fixed\\" style=\\"z-index: 10;\\">
+    <view class=\\"nut-navbar__left\\"><i class=\\"nutui-iconfont nut-icon nut-icon-left\\" style=\\"color: rgb(151, 151, 151);\\" src=\\"\\"></i>
+      <!--v-if-->
+    </view>
+    <view class=\\"nut-navbar__title\\">
+      <!--v-if-->
+      <!--v-if-->
+    </view>
+    <view class=\\"nut-navbar__right\\">
+      <!--v-if-->
+    </view>
+  </view>
+</view>"
+`;
 
-exports[`should render left slot correctly 2`] = `
+exports[`should render right slot correctly 1`] = `
 "<view class=\\"nut-navbar__right\\">
   <!--v-if-->Custom Right
 </view>"

src/packages/__VUE/navbar/__test__/navbar.spec.ts

@@ -19,11 +19,10 @@ test('should render left slot correctly', () => {
       left: () => 'Custom Left'
     }
   });
-
   expect(wrapper.find('.nut-navbar__left').html()).toMatchSnapshot();
 });
 
-test('should render left slot correctly', () => {
+test('should render right slot correctly', () => {
   const wrapper = mount(NavBar, {
     slots: {
       right: () => 'Custom Right'
@@ -43,13 +42,64 @@ test('should render title slot correctly', () => {
   expect(wrapper.find('.nut-navbar__title').html()).toMatchSnapshot();
 });
 
+test('should left-text', () => {
+  const wrapper = mount(NavBar, {
+    props: {
+      leftText: 'left'
+    }
+  });
+
+  const label = wrapper.find('.nut-navbar__left .nut-navbar__text');
+  expect(label.text()).toBe('left');
+});
+
+test('should desc', () => {
+  const wrapper = mount(NavBar, {
+    props: {
+      desc: 'desc'
+    }
+  });
+
+  const label = wrapper.find('.nut-navbar__right .nut-navbar__text');
+  expect(label.text()).toBe('desc');
+});
+
+test('should render placeholder element when using placeholder prop', async () => {
+  const wrapper = mount(NavBar, {
+    props: {
+      fixed: true,
+      placeholder: true
+    }
+  });
+  expect(wrapper.find('.nut-navbar--placeholder').html()).toMatchSnapshot();
+});
+
+test('should emit click-left event when clicking left text', () => {
+  const wrapper = mount(NavBar, {
+    props: {
+      leftText: 'left'
+    }
+  });
+
+  wrapper.find('.nut-navbar__left').trigger('click');
+  expect(wrapper.emitted('on-click-back')).toBeTruthy();
+});
+
 test('should emit click-right event when clicking right text', () => {
   const wrapper = mount(NavBar, {
     props: {
       desc: 'right'
     }
   });
-
-  wrapper.find('.right_text').trigger('click');
+  wrapper.find('.nut-navbar__right').trigger('click');
   expect(wrapper.emitted('on-click-right')).toBeTruthy();
 });
+
+test('should change z-index when using z-index prop', () => {
+  const wrapper = mount(NavBar, {
+    props: {
+      zIndex: 100
+    }
+  });
+  expect((wrapper.element as HTMLElement).style.zIndex).toEqual('100');
+});

src/packages/__VUE/navbar/demo.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="demo full">
-    <h2>基础用法</h2>
-
-    <nut-navbar @on-click-back="back" @on-click-title="title" title="订单详情">
+    <h2>{{ translate('title1') }}</h2>
+    <nut-navbar @on-click-back="back" @on-click-title="title" :title="translate('navTitle1')">
       <template #left>
-        <div>返回</div>
+        <div>{{ translate('back') }}</div>
       </template>
       <template #right>
         <nut-icon class="right" name="share-n"></nut-icon>
@@ -15,8 +14,8 @@
       @on-click-back="back"
       @on-click-title="title"
       @on-click-right="rightClick"
-      title="浏览记录"
-      desc="清空"
+      :title="translate('navTitle2')"
+      :desc="translate('desc1')"
     ></nut-navbar>
 
     <nut-navbar
@@ -25,21 +24,21 @@
       @on-click-title="title"
       @on-click-icon="icon"
       @on-click-right="rightClick"
-      title="购物车"
+      :title="translate('navTitle3')"
       titIcon="cart2"
-      desc="编辑"
+      :desc="translate('desc2')"
     >
       <template #right>
         <nut-icon class="right" name="more-x"></nut-icon>
       </template>
     </nut-navbar>
 
-    <h2>自定义导航栏中间内容</h2>
-    <nut-navbar @on-click-back="back" @on-click-title="title" @on-click-right="rightClick" desc="编辑">
+    <h2>{{ translate('title2') }}</h2>
+    <nut-navbar @on-click-back="back" @on-click-title="title" @on-click-right="rightClick" :desc="translate('desc2')">
       <template #content>
         <nut-tabs v-model="tab1value" @click="changeTab">
-          <nut-tabpane title="商品"> </nut-tabpane>
-          <nut-tabpane title="店铺"> </nut-tabpane>
+          <nut-tabpane :title="translate('tab1')"> </nut-tabpane>
+          <nut-tabpane :title="translate('tab2')"> </nut-tabpane>
         </nut-tabs>
       </template>
 
@@ -48,14 +47,13 @@
       </template>
     </nut-navbar>
 
-    <h2>多tab切换导航</h2>
+    <h2>{{ translate('title3') }}</h2>
     <nut-navbar @on-click-back="back">
       <template #content>
         <nut-tabs v-model="tab2value" @click="changeTabList">
-          <nut-tabpane title="商品"> </nut-tabpane>
-          <nut-tabpane title="评价"> </nut-tabpane>
-          <nut-tabpane title="详情"> </nut-tabpane>
-          <nut-tabpane title="推荐"> </nut-tabpane>
+          <nut-tabpane :title="translate('tab1')"> </nut-tabpane>
+          <nut-tabpane :title="translate('tab2')"> </nut-tabpane>
+          <nut-tabpane :title="translate('tab3')"> </nut-tabpane>
         </nut-tabs>
       </template>
       <template #icons>
@@ -72,7 +70,38 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('navbar');
+const { createDemo, translate } = createComponent('navbar');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    title1: '基础用法',
+    back: '返回',
+    navTitle1: '订单详情',
+    navTitle2: '浏览记录',
+    desc1: '清空',
+    navTitle3: '购物车',
+    desc2: '编辑',
+    title2: '自定义导航栏中间内容',
+    tab1: '标题1',
+    tab2: '标题2',
+    tab3: '标题3',
+    title3: '多 tab 切换导航'
+  },
+  'en-US': {
+    title1: 'Basic Usage',
+    back: 'Back',
+    navTitle1: 'Order details',
+    navTitle2: 'Browsing history',
+    desc1: 'Clear',
+    navTitle3: 'Cart',
+    desc2: 'Edit',
+    title2: 'Customize the middle content of the navigation bar',
+    tab1: 'Title1',
+    tab2: 'Title2',
+    tab3: 'Title3',
+    title3: 'Multi-tab switching navigation'
+  }
+});
 export default createDemo({
   setup({}) {
     const tab1value = ref(0);
@@ -100,6 +129,7 @@ export default createDemo({
     };
 
     return {
+      translate,
       tab1value,
       tab2value,
       ...methods

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

@@ -0,0 +1,217 @@
+# NavBar
+
+### 介绍 
+
+Provide navigation function, often used at the top of the page.
+
+### 安装
+
+```javascript
+
+import { createApp } from 'vue';
+// vue
+import { Navbar,Icon,Tabs, TabPane } from '@nutui/nutui';
+// taro
+import { Navbar,Icon,Tabs, TabPane } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Navbar);
+app.use(Icon);
+app.use(Tabs);
+app.use(TabPane);
+```
+
+### Basic Usage
+
+:::demo
+```html
+<template>
+  <nut-navbar @on-click-back="back" @on-click-title="title" title="Order details">
+    <template #left>
+      <div>Back</div>
+    </template>
+    <template #right>
+      <nut-icon class="right" name="share-n"></nut-icon>
+    </template>
+  </nut-navbar>
+
+  <nut-navbar
+    @on-click-back="back"
+    @on-click-title="title"
+    @on-click-right="rightClick"
+    title="Browsing history"
+    desc="Clear"
+  ></nut-navbar>
+
+  <nut-navbar
+    :left-show="false"
+    @on-click-back="back"
+    @on-click-title="title"
+    @on-click-icon="icon"
+    @on-click-right="rightClick"
+    title="Cart"
+    titIcon="cart2"
+    desc="Edit"
+  >
+    <template #right>
+      <nut-icon class="right" name="more-x"></nut-icon>
+    </template>
+  </nut-navbar>
+</template>
+
+<script lang="ts">
+  import { ref } from 'vue';
+  export default {
+  setup() {
+    const methods = {
+      back() {
+        alert('Click Back');
+      },
+      title() {
+        alert('Click Title');
+      },
+      rightClick() {
+        alert('Click Right');
+      }
+    };
+
+    return {
+      ...methods,
+    };
+  }
+}
+</script>
+
+```
+:::
+
+### Customize the middle content of the navigation bar
+
+:::demo
+```html
+<template>
+  <nut-navbar
+    @on-click-back="back"
+    @on-click-title="title"
+    @on-click-right="rightClick"
+    desc="Edit"
+  >
+    <template #content>
+      <nut-tabs v-model="tab1value" @click="changeTab">
+        <nut-tabpane title="Title1"> </nut-tabpane>
+        <nut-tabpane title="Title2"> </nut-tabpane>
+      </nut-tabs>
+    </template>
+
+    <template #right>
+      <nut-icon class="right" name="more-x"></nut-icon>
+    </template>
+  </nut-navbar>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+  setup() {
+    const tab1value = ref(0);
+    const methods = {
+      back() {
+        alert('Click Back');
+      },
+      title() {
+        alert('Click Title');
+      },
+      rightClick() {
+        alert('Click Right');
+      },
+      changeTab(tab: any) {
+        tab1value.value = tab.paneKey as number;
+      },
+    };
+
+    return {
+      tab1value,
+      ...methods
+    };
+  }
+}
+</script>
+```
+:::
+
+### Multi-tab switching navigation
+
+:::demo
+```html
+<template>
+  <nut-navbar @on-click-back="back" >
+    <template #content>
+      <nut-tabs v-model="tab2value" @click="changeTabList">
+        <nut-tabpane title="Title1"> </nut-tabpane>
+        <nut-tabpane title="Title2"> </nut-tabpane>
+        <nut-tabpane title="Title3"> </nut-tabpane>
+      </nut-tabs>
+    </template>
+    <template #icons>
+      <nut-icon class="icon" name="share"></nut-icon>
+    </template>
+
+    <template #right>
+      <nut-icon class="right" name="horizontal-n"></nut-icon>
+    </template>
+  </nut-navbar>
+</template>
+
+<script lang="ts">
+  import { ref } from 'vue';
+  export default {
+    setup() {
+    const tab2value = ref(0);
+    const methods = {
+      back() {
+        alert('Click Back');
+      },
+      changeTabList(tab: any) {
+        tab2value.value = tab.paneKey as number;
+      }
+    };
+    return {
+      tab2value,
+      ...methods
+    };
+  }
+}
+</script>
+
+```
+:::
+
+### Prop  
+
+|  Attribute          | Description                                   | Type    | Default |
+|---------------------|-----------------------------------------------|---------|---------|
+| title               | Title                                         | String  | -       |
+| left-text `v3.1.21` | Left Text                                     | String  | -       |
+| desc                | Desc                                          | String  | -       |
+| left-show           | Whether to show the left arrow                | Boolean | false   |
+| tit-icon            | Insert icon in title                          | String  | -       | 
+| border `v3.1.21`    | Whether to show bottom border                     | Boolean  | false  |
+| fixed               | Is it pinned to the top                       | Boolean | false    |
+| placeholder `v3.1.21` | Whether to generate a placeholder element when fixed   | Boolean  | false   |
+| safe-area-inset-top | Whether to enable top safety zone adaptation  | Boolean | false    |
+| z-index `v3.1.21` | Z-index                                            | Number ｜ String  | -       |
+
+### Event
+| Attribute       | Description              | Arguments    |
+|-----------------|-------------------------|-------------|
+| on-click-title  | Click page title event  | event:Event |
+| on-click-icon   | Click the page title icon event | event:Event |
+| on-click-right  | Click right button event | event:Event |
+| on-click-back   | Click left Icon event   | event:Event |
+
+### Slot
+| Attribute  | Description     | 
+|-------|----------|
+| left | 自定义左侧内容 |
+| right | 自定义右侧内容 |
+| content |  自定义导航栏中间内容 |

src/packages/__VUE/navbar/doc.md

@@ -2,7 +2,7 @@
 
 ### 介绍 
 
-提供导航功能。
+提供导航功能，常用于页面顶部。
 
 ### 安装
 
@@ -65,13 +65,13 @@ app.use(TabPane);
   setup() {
     const methods = {
       back() {
-        alert('header头部， 点击返回');
+        alert('Click Back');
       },
       title() {
-        alert('header头部， 点击title');
+        alert('Click Title');
       },
       rightClick() {
-        alert('右侧点击事件');
+        alert('Click Right');
       }
     };
 
@@ -85,7 +85,7 @@ app.use(TabPane);
 ```
 :::
 
-### 设置slot:content可以自定义导航栏中间内容
+### 自定义导航栏中间内容
 
 :::demo
 ```html
@@ -98,8 +98,8 @@ app.use(TabPane);
   >
     <template #content>
       <nut-tabs v-model="tab1value" @click="changeTab">
-        <nut-tabpane title="商品"> </nut-tabpane>
-        <nut-tabpane title="店铺"> </nut-tabpane>
+        <nut-tabpane title="标题1"> </nut-tabpane>
+        <nut-tabpane title="标题2"> </nut-tabpane>
       </nut-tabs>
     </template>
 
@@ -115,14 +115,14 @@ export default {
   setup() {
     const tab1value = ref(0);
     const methods = {
-      back () {
-        alert('header头部， 点击返回');
+      back() {
+        alert('Click Back');
       },
-      title () {
-        alert('header头部， 点击title');
+      title() {
+        alert('Click Title');
       },
       rightClick() {
-        alert('右侧点击事件');
+        alert('Click Right');
       },
       changeTab(tab: any) {
         tab1value.value = tab.paneKey as number;
@@ -139,7 +139,7 @@ export default {
 ```
 :::
 
-### 多tab切换导航及增加右侧按钮
+### 多 tab 切换导航
 
 :::demo
 ```html
@@ -147,10 +147,9 @@ export default {
   <nut-navbar @on-click-back="back" >
     <template #content>
       <nut-tabs v-model="tab2value" @click="changeTabList">
-        <nut-tabpane title="商品"> </nut-tabpane>
-        <nut-tabpane title="评价"> </nut-tabpane>
-        <nut-tabpane title="详情"> </nut-tabpane>
-        <nut-tabpane title="推荐"> </nut-tabpane>
+        <nut-tabpane title="标题1"> </nut-tabpane>
+        <nut-tabpane title="标题2"> </nut-tabpane>
+        <nut-tabpane title="标题3"> </nut-tabpane>
       </nut-tabs>
     </template>
     <template #icons>
@@ -170,7 +169,7 @@ export default {
     const tab2value = ref(0);
     const methods = {
       back() {
-        alert('header头部， 点击返回');
+        alert('Click Back');
       },
       changeTabList(tab: any) {
         tab2value.value = tab.paneKey as number;
@@ -189,14 +188,19 @@ export default {
 
 ### Prop  
 
-| 字段            | 说明                                                                                           | 类型    | 默认值  |
-|-----------------|------------------------------------------------------------------------------------------------|---------|---------|
-| title           | 标题名称                                                                                       | String  | -       |
-| desc            | 右侧描述                                                                                       | String  | -       |
-| left-show        | 是否展示左侧箭头                                                                               | Boolean | false   |
-| tit-icon         | 标题中插入icon                                                                                    | String  |-|                                          
-| fixed           | 是否固定到顶部                                                                                       | Boolean  | false       |
-| safe-area-inset-top           | 是否开启顶部安全区适配                                                                                       | Boolean  | false       |
+| 字段            | 说明                                                    | 类型    | 默认值  |
+|-----------------|--------------------------------------------------------|---------|---------|
+| title           | 标题名称                                                 | String  | -       |
+| left-text `v3.1.21`       | 左侧文案                                                 | String  | -       |
+| desc            | 右侧描述                                                 | String  | -       |
+| left-show       | 是否展示左侧箭头                                          | Boolean | false   |
+| tit-icon        | 标题中插入icon                                           | String  | -       |
+| border `v3.1.21`          | 是否显示下边框                                            | Boolean  | false  |
+| fixed           | 是否固定到顶部                                            | Boolean  | false    |
+| placeholder `v3.1.21`     | 固定在顶部时，是否在标签位置生成一个等高的占位元素              | Boolean  | false   |
+| safe-area-inset-top   | 是否开启顶部安全区适配                                | Boolean  | false   |
+| z-index `v3.1.21` | 导航栏 z-index                                            | Number ｜ String  | -       |
+
 
 ### Event
 | 名称  | 说明     | 回调参数    |
@@ -204,7 +208,7 @@ export default {
 | on-click-title | 点击页面标题事件 | event:Event |
 | on-click-icon | 点击页面标题icon事件 | event:Event |
 | on-click-right | 点击右侧按钮事件 | event:Event |
-| on-click-back | 左侧图标返回点击事件 | event:Event |
+| on-click-back | 点击左侧图标事件 | event:Event |
 
 ### Slot
 | 名称  | 说明     | 回调参数    |

src/packages/__VUE/navbar/index.scss

@@ -14,12 +14,19 @@
   &:active::before {
     opacity: 0.1;
   }
+  &--border {
+    border-bottom: 1px solid #eee;
+  }
   &--fixed {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
   }
+  &--placeholder {
+    display: inline-block;
+    width: 100%;
+  }
   &--safe-area-inset-top {
     padding-top: constant(safe-area-inset-top);
     padding-top: env(safe-area-inset-top);
@@ -54,7 +61,7 @@
     display: flex;
     justify-content: center;
     .title {
-      width: $navbar-title-width;
+      min-width: $navbar-title-width;
       font-size: $navbar-title-font;
       font-weight: $navbar-title-font-weight;
       color: $navbar-title-font-color;

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

@@ -1,31 +1,51 @@
 <template>
-  <view :class="classes">
-    <view class="nut-navbar__left">
-      <nut-icon v-if="leftShow" color="#979797" name="left" @click="handleLeft"></nut-icon>
+  <view v-if="fixed && placeholder" class="nut-navbar--placeholder" :style="{ height: navHeight + 'px' }">
+    <view :class="classes" :style="styles" ref="navBarHtml">
+      <view class="nut-navbar__left" @click="handleLeft">
+        <nut-icon v-if="leftShow" color="#979797" name="left"></nut-icon>
+        <view v-if="leftText" class="nut-navbar__text">{{ leftText }}</view>
+        <slot name="left"></slot>
+      </view>
+      <view class="nut-navbar__title">
+        <view v-if="title" class="title" @click="handleCenter">{{ title }}</view>
+        <nut-icon v-if="titIcon" class="icon" :name="titIcon" @click="handleCenterIcon"></nut-icon>
+        <slot name="content"></slot>
+      </view>
+      <view class="nut-navbar__right" @click="handleRight">
+        <view v-if="desc" class="nut-navbar__text">{{ desc }}</view>
+        <slot name="right"></slot>
+      </view>
+    </view>
+  </view>
+  <view v-else :class="classes" :style="styles">
+    <view class="nut-navbar__left" @click="handleLeft">
+      <nut-icon v-if="leftShow" color="#979797" name="left"></nut-icon>
+      <view v-if="leftText" class="nut-navbar__text">{{ leftText }}</view>
       <slot name="left"></slot>
     </view>
     <view class="nut-navbar__title">
-      <view v-if="title" @click="handleCenter">{{ title }}</view>
+      <view v-if="title" class="title" @click="handleCenter">{{ title }}</view>
       <nut-icon v-if="titIcon" class="icon" :name="titIcon" @click="handleCenterIcon"></nut-icon>
       <slot name="content"></slot>
     </view>
-
-    <view class="nut-navbar__right">
-      <view v-if="desc" class="right_text" @click="handleRight">{{ desc }}</view>
+    <view class="nut-navbar__right" @click="handleRight">
+      <view v-if="desc" class="nut-navbar__text">{{ desc }}</view>
       <slot name="right"></slot>
     </view>
   </view>
 </template>
 
 <script lang="ts">
-import { computed, toRefs } from 'vue';
+import { onMounted, computed, toRefs, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import Taro from '@tarojs/taro';
 const { componentName, create } = createComponent('navbar');
 export default create({
   props: {
     leftShow: { type: Boolean, default: true }, //左侧  是否显示返回icon
     title: { type: String, default: '' }, //中间  文字标题
     titIcon: { type: String, default: '' }, //中间  标题icon
+    leftText: { type: String, default: '' }, //左侧文字
     desc: { type: String, default: '' }, //右侧   按钮文字
     fixed: {
       type: Boolean,
@@ -34,20 +54,56 @@ export default create({
     safeAreaInsetTop: {
       type: Boolean,
       default: false
+    },
+    border: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      // 生成一个等高的占位元素
+      type: Boolean,
+      default: true
+    },
+    zIndex: {
+      type: [Number, String],
+      default: 10
     }
   },
   emits: ['on-click-back', 'on-click-title', 'on-click-icon', 'on-click-right'],
   setup(props, { emit }) {
-    const { fixed, safeAreaInsetTop } = toRefs(props);
+    const { border, fixed, safeAreaInsetTop, placeholder, zIndex } = toRefs(props);
+    let navHeight = ref(0);
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
+        [`${prefixCls}--border`]: border.value,
         [`${prefixCls}--fixed`]: fixed.value,
         [`${prefixCls}--safe-area-inset-top`]: safeAreaInsetTop.value
       };
     });
 
+    const styles = computed(() => {
+      return {
+        zIndex: zIndex.value
+      };
+    });
+
+    onMounted(() => {
+      if (fixed.value && placeholder.value) {
+        setTimeout(async () => {
+          const query = Taro.createSelectorQuery();
+          query
+            .select('.navBarHtml')
+            .boundingClientRect((rec: any) => {
+              navHeight.value = rec.height;
+              console.log('navBarHtml', navHeight);
+            })
+            .exec();
+        }, 100);
+      }
+    });
+
     function handleLeft() {
       emit('on-click-back');
     }
@@ -64,7 +120,9 @@ export default create({
     }
 
     return {
+      navHeight,
       classes,
+      styles,
       handleLeft,
       handleCenter,
       handleCenterIcon,

src/packages/__VUE/navbar/index.vue

@@ -1,25 +1,42 @@
 <template>
-  <view :class="classes">
-    <view class="nut-navbar__left">
-      <nut-icon v-if="leftShow" color="#979797" name="left" @click="handleLeft"></nut-icon>
+  <view v-if="fixed && placeholder" class="nut-navbar--placeholder" ref="navBarWrap">
+    <view :class="classes" :style="styles" ref="navBarHtml">
+      <view class="nut-navbar__left" @click="handleLeft">
+        <nut-icon v-if="leftShow" color="#979797" name="left"></nut-icon>
+        <view v-if="leftText" class="nut-navbar__text">{{ leftText }}</view>
+        <slot name="left"></slot>
+      </view>
+      <view class="nut-navbar__title">
+        <view v-if="title" class="title" @click="handleCenter">{{ title }}</view>
+        <nut-icon v-if="titIcon" class="icon" :name="titIcon" @click="handleCenterIcon"></nut-icon>
+        <slot name="content"></slot>
+      </view>
+      <view class="nut-navbar__right" @click="handleRight">
+        <view v-if="desc" class="nut-navbar__text">{{ desc }}</view>
+        <slot name="right"></slot>
+      </view>
+    </view>
+  </view>
+  <view v-else :class="classes" :style="styles">
+    <view class="nut-navbar__left" @click="handleLeft">
+      <nut-icon v-if="leftShow" color="#979797" name="left"></nut-icon>
+      <view v-if="leftText" class="nut-navbar__text">{{ leftText }}</view>
       <slot name="left"></slot>
     </view>
-
     <view class="nut-navbar__title">
       <view v-if="title" class="title" @click="handleCenter">{{ title }}</view>
       <nut-icon v-if="titIcon" class="icon" :name="titIcon" @click="handleCenterIcon"></nut-icon>
       <slot name="content"></slot>
     </view>
-
-    <view class="nut-navbar__right">
-      <view v-if="desc" class="right_text" @click="handleRight">{{ desc }}</view>
+    <view class="nut-navbar__right" @click="handleRight">
+      <view v-if="desc" class="nut-navbar__text">{{ desc }}</view>
       <slot name="right"></slot>
     </view>
   </view>
 </template>
 
 <script lang="ts">
-import { computed, toRefs } from 'vue';
+import { onMounted, computed, toRefs, ref, nextTick } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('navbar');
 export default create({
@@ -27,6 +44,7 @@ export default create({
     leftShow: { type: Boolean, default: true }, //左侧  是否显示返回icon
     title: { type: String, default: '' }, //中间  文字标题
     titIcon: { type: String, default: '' }, //中间  标题icon
+    leftText: { type: String, default: '' }, //左侧文字
     desc: { type: String, default: '' }, //右侧   按钮文字
     fixed: {
       type: Boolean,
@@ -35,20 +53,52 @@ export default create({
     safeAreaInsetTop: {
       type: Boolean,
       default: false
+    },
+    border: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      // 生成一个等高的占位元素
+      type: Boolean,
+      default: true
+    },
+    zIndex: {
+      type: [Number, String],
+      default: 10
     }
   },
   emits: ['on-click-back', 'on-click-title', 'on-click-icon', 'on-click-right'],
   setup(props, { emit }) {
-    const { fixed, safeAreaInsetTop } = toRefs(props);
+    const { border, fixed, safeAreaInsetTop, placeholder, zIndex } = toRefs(props);
+    const navBarWrap = ref(null);
+    const navBarHtml = ref(null);
+    let navHeight = ref(0);
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
+        [`${prefixCls}--border`]: border.value,
         [`${prefixCls}--fixed`]: fixed.value,
         [`${prefixCls}--safe-area-inset-top`]: safeAreaInsetTop.value
       };
     });
 
+    const styles = computed(() => {
+      return {
+        zIndex: zIndex.value
+      };
+    });
+
+    onMounted(() => {
+      if (fixed.value && placeholder.value) {
+        nextTick(() => {
+          navHeight = navBarHtml?.value?.getBoundingClientRect().height;
+          navBarWrap.value.style.height = navHeight + 'px';
+        });
+      }
+    });
+
     function handleLeft() {
       emit('on-click-back');
     }
@@ -65,7 +115,10 @@ export default create({
     }
 
     return {
+      navBarWrap,
+      navBarHtml,
       classes,
+      styles,
       handleLeft,
       handleCenter,
       handleCenterIcon,

src/packages/__VUE/price/demo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo">
-    <nut-cell-group title="基本用法 small normal large">
+    <nut-cell-group :title="translate('title1')">
       <nut-cell>
         <nut-price :price="0" size="small" :need-symbol="true" :thousands="true" />
       </nut-cell>
@@ -11,23 +11,23 @@
         <nut-price :price="0" size="large" :need-symbol="true" :thousands="true" />
       </nut-cell>
     </nut-cell-group>
-    <h2>不保留小数</h2>
+    <h2>{{ translate('title2') }}</h2>
     <nut-cell>
       <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" />
     </nut-cell>
-    <h2>调整 symbol 符号位置</h2>
-    <nut-cell>
-      <nut-price :price="8888.01" position="after" symbol="元" size="normal" :need-symbol="true" :thousands="true" />
-    </nut-cell>
-    <h2>有人民币符号，无千位分隔</h2>
+    <h2>{{ translate('title3') }}</h2>
     <nut-cell>
       <nut-price :price="10010.01" size="normal" :need-symbol="true" :thousands="false" />
     </nut-cell>
-    <h2>带人民币符号，有千位分隔，保留小数点后三位</h2>
+    <h2>{{ translate('title4') }}</h2>
     <nut-cell>
       <nut-price :price="15213.1221" size="normal" :decimal-digits="3" :need-symbol="true" :thousands="true" />
     </nut-cell>
-    <h2>异步随机变更</h2>
+    <h2>{{ translate('title5') }}</h2>
+    <nut-cell>
+      <nut-price :price="8888.01" position="after" symbol="元" size="normal" :need-symbol="true" :thousands="true" />
+    </nut-cell>
+    <h2>{{ translate('title6') }}</h2>
     <nut-cell>
       <nut-price :price="price" size="normal" :decimal-digits="3" :need-symbol="true" :thousands="true" />
     </nut-cell>
@@ -37,7 +37,26 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 import { ref } from 'vue';
-const { createDemo } = createComponent('price');
+const { createDemo, translate } = createComponent('price');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    title1: '支持三种尺寸：small、normal、large',
+    title2: '不保留小数',
+    title3: '有人民币符号，无千位分隔',
+    title4: '有人民币符号，有千位分隔，保留小数点后三位',
+    title5: '调整 symbol 符号位置',
+    title6: '异步随机变更'
+  },
+  'en-US': {
+    title1: 'Support three sizes：small、normal、large',
+    title2: 'No decimals',
+    title3: 'With RMB symbol, no thousands separator',
+    title4: 'With RMB symbol, separated by thousands, keep three decimal places',
+    title5: 'Adjust the symbol position',
+    title6: 'Asynchronous random changes'
+  }
+});
 export default createDemo({
   setup() {
     const price = ref(0);
@@ -45,7 +64,8 @@ export default createDemo({
       price.value = Math.random() * 10000000;
     }, 1000);
     return {
-      price
+      price,
+      translate
     };
   }
 });

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

@@ -0,0 +1,119 @@
+# Price
+
+### Intro
+
+It is used to apply different styles to the parts before and after the decimal point of the commodity price value, and also supports functions such as the RMB symbol, thousands separator, and setting the number of decimal points.
+
+### Install
+
+```javascript
+import { createApp } from 'vue';
+//vue
+import { Price } from '@nutui/nutui';
+//taro
+import { Price } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Price);
+
+```
+
+
+### Support three sizes：small、normal、large
+
+:::demo
+
+``` html
+<template>
+    <nut-price :price="0" size="small" :need-symbol="false" :thousands="true" />
+    <nut-price :price="0" size="normal" :need-symbol="false" :thousands="true" />
+    <nut-price :price="0" size="large" :need-symbol="false" :thousands="true" />
+</template>
+```
+
+:::
+
+### No decimals
+
+:::demo
+
+``` html
+<template>
+    <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" />
+</template>
+```
+
+:::
+
+### With RMB symbol, no thousands separator
+
+:::demo
+
+``` html
+
+<template>
+    <nut-price :price="10010.01" :need-symbol="true" :thousands="false" />
+</template>
+```
+:::
+### With RMB symbol, separated by thousands, keep three decimal places
+
+:::demo
+
+``` html
+<template>
+    <nut-price :price="15213.1221" :decimal-digits="3" :need-symbol="true" :thousands="true" />
+</template>
+```
+
+:::
+
+### Adjust the symbol position
+
+:::demo
+
+``` html
+<template>
+    <nut-price :price="8888.01" position="after" symbol="元" size="normal" :need-symbol="true" :thousands="true" />
+</template>
+```
+
+:::
+### Asynchronous random changes
+
+:::demo
+
+``` html
+<template>
+    <nut-price :price="price" :decimal-digits="3" :need-symbol="true" :thousands="true" />
+</template>
+
+
+<script lang="ts">
+    import { ref } from 'vue';
+    export default {
+        setup() {
+            const price = ref(0);
+            setInterval(() => {
+                price.value = Math.random()*10000000;
+            }, 1000);
+            return {
+                price
+            };
+        }
+    }
+</script>
+```
+:::
+
+### Prop
+
+| Attribute      | Description                                                | Type            | Default |
+|----------------|------------------------------------------------------------|------------------|--------|
+| price          | Price                                                      | Number ｜ String | 0       |
+| need-symbol    | Add symbol                                                 | Boolean          | true   |
+| symbol         | Symbol type                                                | String           | &yen;  |
+| decimal-digits | Decimal digits                                             | Number ｜ String | 2      |
+| thousands      | Thousands separation                                       | Boolean          | false  |
+| position       | The symbol appear before or after the price，`before`、`after` | String           | before |
+| size           | Size，`large`、`normal`、`small`                            | String           | large |

src/packages/__VUE/price/doc.md

@@ -45,36 +45,36 @@ app.use(Price);
 
 :::
 
-### 调整 symbol 符号位置
+### 有人民币符号，无千位分隔
 
 :::demo
 
 ``` html
+
 <template>
-    <nut-price :price="8888.01" position="after" symbol="元" size="normal" :need-symbol="true" :thousands="true" />
+    <nut-price :price="10010.01" :need-symbol="true" :thousands="false" />
 </template>
 ```
-
 :::
-
-### 有人民币符号，无千位分隔
+### 带人民币符号，有千位分隔，保留小数点后三位
 
 :::demo
 
 ``` html
-
 <template>
-    <nut-price :price="10010.01" :need-symbol="true" :thousands="false" />
+    <nut-price :price="15213.1221" :decimal-digits="3" :need-symbol="true" :thousands="true" />
 </template>
 ```
+
 :::
-### 带人民币符号，有千位分隔，保留小数点后三位
+
+### 调整 symbol 符号位置
 
 :::demo
 
 ``` html
 <template>
-    <nut-price :price="15213.1221" :decimal-digits="3" :need-symbol="true" :thousands="true" />
+    <nut-price :price="8888.01" position="after" symbol="元" size="normal" :need-symbol="true" :thousands="true" />
 </template>
 ```
 
@@ -110,10 +110,10 @@ app.use(Price);
 
 | 字段           | 说明                                    | 类型    | 默认值 |
 |----------------|-----------------------------------------|---------|--------|
-| price          | 价格数量                                | Number  | 0      |
-| need-symbol    | 是否需要加上 symbol 符号                | Boolean | true   |
-| symbol         | 符号类型                                | String  | &yen;  |
-| decimal-digits | 小数位位数                              | Number  | 2      |
-| thousands      | 是否按照千分号形式显示                  | Boolean | false  |
-| position       | 符号显示在(价格)前或者后(before、after) | String  | before |
-| size           | 价格尺寸(large、normal、small)          | String  | large |
+| price          | 价格数量                                | Number ｜ String | 0      |
+| need-symbol    | 是否需要加上 symbol 符号                 | Boolean          | true   |
+| symbol         | 符号类型                                | String           | &yen;  |
+| decimal-digits | 小数位位数                              | Number ｜ String  | 2     |
+| thousands      | 是否按照千分号形式显示                    | Boolean          | false  |
+| position       | 符号显示在价格前或者后，`before`、`after`  | String           | before |
+| size           | 价格尺寸，`large`、`normal`、`small`     | String           | large |

src/sites/doc/views/Index.vue

@@ -96,7 +96,7 @@ export default defineComponent({
 
     const isShow = () => {
       // return !excludeTaro.includes(route.path);
-      return route.path != '/zh-CN/';
+      return route.path != 'zh-CN/' || 'zh-TW/' || 'en-US/';
     };
 
     const isShowTaroDoc = computed(() => {
@@ -151,9 +151,17 @@ export default defineComponent({
     // 获得组件名称
     const componentTitle = (to?: any) => {
       if (to?.path) {
-        state.componentName.name = to.path.split('/zh-CN/')[1];
+        ['zh-CN/', 'zh-TW/', 'en-US/'].map((file) => {
+          if (to.path.includes(file)) {
+            state.componentName.name = to.path.split(file)[1];
+          }
+        });
       } else {
-        state.componentName.name = route.path.split('/zh-CN/')[1];
+        ['zh-CN/', 'zh-TW/', 'en-US/'].map((file) => {
+          if (route.path.includes(file)) {
+            state.componentName.name = route.path.split(file)[1];
+          }
+        });
       }
       nav.forEach((item: any) => {
         item.packages.forEach((sItem: any) => {

src/sites/mobile-taro/vue/project.config.json

@@ -1,51 +1,51 @@
 {
-    "miniprogramRoot": "dist/",
-    "projectname": "%40nutui%2Fnutui-taro-mobile",
-    "description": "nutui-taro-vue",
-    "appid": "wxf2b976b67dab3882",
-    "setting": {
-        "urlCheck": true,
-        "es6": false,
-        "enhance": true,
-        "postcss": true,
-        "preloadBackgroundData": false,
-        "minified": true,
-        "newFeature": false,
-        "coverView": true,
-        "nodeModules": false,
-        "autoAudits": false,
-        "showShadowRootInWxmlPanel": true,
-        "scopeDataCheck": false,
-        "uglifyFileName": false,
-        "checkInvalidKey": true,
-        "checkSiteMap": true,
-        "uploadWithSourceMap": true,
-        "compileHotReLoad": false,
-        "lazyloadPlaceholderEnable": false,
-        "useMultiFrameRuntime": true,
-        "useApiHook": true,
-        "useApiHostProcess": true,
-        "babelSetting": {
-            "ignore": [],
-            "disablePlugins": [],
-            "outputPath": ""
-        },
-        "enableEngineNative": false,
-        "useIsolateContext": false,
-        "userConfirmedBundleSwitch": false,
-        "packNpmManually": false,
-        "packNpmRelationList": [],
-        "minifyWXSS": true,
-        "disableUseStrict": false,
-        "minifyWXML": true,
-        "showES6CompileOption": false,
-        "useCompilerPlugins": false
-    },
-    "compileType": "miniprogram",
-    "simulatorType": "wechat",
-    "simulatorPluginLibVersion": {},
-    "libVersion": "2.17.3",
-    "condition": {
-        "miniprogram": {}
-    }
+	"miniprogramRoot": "dist/",
+	"projectname": "%40nutui%2Fnutui-taro-mobile",
+	"description": "nutui-taro-vue",
+	"appid": "wxf2b976b67dab3882",
+	"setting": {
+		"urlCheck": true,
+		"es6": false,
+		"enhance": true,
+		"postcss": true,
+		"preloadBackgroundData": false,
+		"minified": true,
+		"newFeature": false,
+		"coverView": true,
+		"nodeModules": false,
+		"autoAudits": false,
+		"showShadowRootInWxmlPanel": true,
+		"scopeDataCheck": false,
+		"uglifyFileName": false,
+		"checkInvalidKey": true,
+		"checkSiteMap": true,
+		"uploadWithSourceMap": true,
+		"compileHotReLoad": false,
+		"lazyloadPlaceholderEnable": false,
+		"useMultiFrameRuntime": true,
+		"useApiHook": true,
+		"useApiHostProcess": true,
+		"babelSetting": {
+				"ignore": [],
+				"disablePlugins": [],
+				"outputPath": ""
+		},
+		"enableEngineNative": false,
+		"useIsolateContext": false,
+		"userConfirmedBundleSwitch": false,
+		"packNpmManually": false,
+		"packNpmRelationList": [],
+		"minifyWXSS": true,
+		"disableUseStrict": false,
+		"minifyWXML": true,
+		"showES6CompileOption": false,
+		"useCompilerPlugins": false
+	},
+	"compileType": "miniprogram",
+	"simulatorType": "wechat",
+	"simulatorPluginLibVersion": {},
+	"libVersion": "2.17.3",
+	"condition": {
+			"miniprogram": {}
+	}
 }

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

@@ -32,7 +32,7 @@
       <nut-avatar icon="my"></nut-avatar>
       <nut-avatar>N</nut-avatar>
     </nut-cell>
-    <h2>Icon 和字符型可以自定义图标颜色及背景色</h2>
+    <h2>Icon 和字符型可以自定义颜色及背景色</h2>
     <nut-cell>
       <nut-avatar class="demo-avatar" icon="my" color="#fff" bg-color="#FA2C19"></nut-avatar>
       <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>

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

@@ -2,7 +2,7 @@
   <div class="demo full">
     <h2>基础用法</h2>
 
-    <nut-navbar @on-click-back="back" @on-click-title="title" title="订单详情">
+    <nut-navbar fixed placeholder @on-click-back="back" @on-click-title="title" title="订单详情">
       <template #left>
         <div>返回</div>
       </template>