diff --git a/packages/nutui-taro-demo/src/app.scss b/packages/nutui-taro-demo/src/app.scss
index 1453e68174..d6346f9a34 100644
--- a/packages/nutui-taro-demo/src/app.scss
+++ b/packages/nutui-taro-demo/src/app.scss
@@ -4,6 +4,7 @@ page {
 
 page,
 #app {
+  font-size: 14px;
   min-width: 100vw;
   .demo {
     box-sizing: border-box;
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/avatar/badge.vue b/packages/nutui-taro-demo/src/exhibition/pages/avatar/badge.vue
new file mode 100644
index 0000000000..ed3f9a6f9e
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/avatar/badge.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-badge value="8">
+    <nut-avatar shape="square"><My /></nut-avatar>
+  </nut-badge>
+  <span style="margin-right: 10px"></span>
+  <nut-badge dot>
+    <nut-avatar shape="square"><My /></nut-avatar>
+  </nut-badge>
+</template>
+<script setup lang="ts">
+import { My } from '@nutui/icons-vue-taro';
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/avatar/basic.vue b/packages/nutui-taro-demo/src/exhibition/pages/avatar/basic.vue
new file mode 100644
index 0000000000..14db3db015
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/avatar/basic.vue
@@ -0,0 +1,9 @@
+<template>
+  <nut-avatar> <img :src="url" /> </nut-avatar>
+  <nut-avatar> <My /> </nut-avatar>
+  <nut-avatar> 王 </nut-avatar>
+</template>
+<script setup lang="ts">
+import { My } from '@nutui/icons-vue-taro';
+const url = 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png';
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/avatar/click.vue b/packages/nutui-taro-demo/src/exhibition/pages/avatar/click.vue
new file mode 100644
index 0000000000..83786d1499
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/avatar/click.vue
@@ -0,0 +1,9 @@
+<template>
+  <nut-avatar @click="click"><My /></nut-avatar>
+</template>
+<script setup lang="ts">
+import { My } from '@nutui/icons-vue-taro';
+const click = () => {
+  console.log('click');
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/avatar/color.vue b/packages/nutui-taro-demo/src/exhibition/pages/avatar/color.vue
new file mode 100644
index 0000000000..d264d1f652
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/avatar/color.vue
@@ -0,0 +1,9 @@
+<template>
+  <nut-avatar bg-color="red">
+    <My color="white" />
+  </nut-avatar>
+  <nut-avatar color="white" bg-color="blue">小明</nut-avatar>
+</template>
+<script setup lang="ts">
+import { My } from '@nutui/icons-vue-taro';
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/avatar/count.vue b/packages/nutui-taro-demo/src/exhibition/pages/avatar/count.vue
new file mode 100644
index 0000000000..637f0d83c6
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/avatar/count.vue
@@ -0,0 +1,16 @@
+<template>
+  <nut-button size="mini" @click="count++">+1</nut-button>
+  <nut-button size="mini" @click="count--">-1</nut-button>
+  <nut-avatar-group max-count="4" z-index="right">
+    <nut-avatar v-for="i in count" :key="i">
+      <My v-if="i % 2 == 0" />
+      <img v-else :src="url" />
+    </nut-avatar>
+  </nut-avatar-group>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { My } from '@nutui/icons-vue-taro';
+const count = ref(4);
+const url = 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png';
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/avatar/group.vue b/packages/nutui-taro-demo/src/exhibition/pages/avatar/group.vue
new file mode 100644
index 0000000000..ad31116356
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/avatar/group.vue
@@ -0,0 +1,17 @@
+<template>
+  <nut-avatar-group span="-4">
+    <nut-avatar><img :src="url" /></nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
+  </nut-avatar-group>
+  <nut-avatar-group max-count="3" max-color="#fff" max-bg-color="#498ff2">
+    <nut-avatar><img :src="url" /></nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+  </nut-avatar-group>
+</template>
+<script setup lang="ts">
+import { My } from '@nutui/icons-vue-taro';
+const url = 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png';
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/avatar/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/avatar/index.vue
index 56a5ace6d3..bd6a22ca9c 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/avatar/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/avatar/index.vue
@@ -1,139 +1,67 @@
 <template>
-  <Demo class="full avatar-demo">
-    <h2>支持三种尺寸：small、normal、large</h2>
-    <nut-cell>
-      <nut-avatar size="large">
-        <img
-          src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-        />
-      </nut-avatar>
-      <nut-avatar size="normal">
-        <img
-          src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-        />
-      </nut-avatar>
-      <nut-avatar size="small">
-        <img
-          src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-        />
-      </nut-avatar>
-    </nut-cell>
-    <h2>支持两种形状：square、round</h2>
-    <nut-cell>
-      <nut-avatar shape="square"><My /></nut-avatar>
-      <nut-avatar shape="round"><My /></nut-avatar>
-    </nut-cell>
-    <h2>支持三种类型：图片、Icon 以及字符</h2>
-    <nut-cell>
-      <nut-avatar>
-        <img
-          src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-        />
-      </nut-avatar>
-      <nut-avatar><My /></nut-avatar>
-      <nut-avatar>王</nut-avatar>
-    </nut-cell>
-    <h2>Icon 和字符型可以自定义颜色及背景色</h2>
-    <nut-cell>
-      <nut-avatar class="demo-avatar" bg-color="#FA2C19"><My color="#fff" /></nut-avatar>
-      <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-    </nut-cell>
-    <h2>带徽标的头像</h2>
-    <nut-cell>
-      <nut-badge value="8">
-        <nut-avatar shape="square"><My /></nut-avatar>
-      </nut-badge>
-      <nut-badge dot>
-        <nut-avatar shape="square"><My /></nut-avatar>
-      </nut-badge>
-    </nut-cell>
-    <h2>头像组合展现</h2>
-    <nut-cell>
-      <nut-avatar-group span="-4">
-        <nut-avatar>
-          <img
-            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-          />
-        </nut-avatar>
-        <nut-avatar><My /></nut-avatar>
-        <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-      </nut-avatar-group>
-    </nut-cell>
+  <Demo class="bg-w">
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <nut-cell>
-      <nut-avatar-group max-count="3" max-color="#fff" max-bg-color="#498ff2">
-        <nut-avatar>
-          <img
-            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-          />
-        </nut-avatar>
-        <nut-avatar><My /></nut-avatar>
-        <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-        <nut-avatar><My /></nut-avatar>
-      </nut-avatar-group>
-    </nut-cell>
-    <h2>组合头像可控制层级方向</h2>
-    <nut-cell>
-      <nut-avatar-group max-count="3" z-index="right" max-content="...">
-        <nut-avatar>
-          <img
-            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-          />
-        </nut-avatar>
-        <nut-avatar><My /></nut-avatar>
-        <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-        <nut-avatar><My /></nut-avatar>
-      </nut-avatar-group>
-    </nut-cell>
+    <h2>{{ t('size') }}</h2>
+    <Size />
 
-    <h2>点击头像触发事件</h2>
-    <nut-cell>
-      <nut-avatar @click="handleClick"><My /></nut-avatar>
-    </nut-cell>
+    <h2>{{ t('shape') }}</h2>
+    <Shape />
 
-    <h2 class="demo-avatar-group-title">动态添加头像<nut-button size="mini" @click="addAvatar">添加</nut-button></h2>
-    <nut-cell>
-      <nut-avatar-group max-count="4" z-index="right">
-        <nut-avatar v-for="i in avatarCount" :key="i">
-          <My v-if="i % 2 == 0" />
-          <img
-            v-else
-            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-          />
-        </nut-avatar>
-      </nut-avatar-group>
-    </nut-cell>
+    <h2>{{ t('color') }}</h2>
+    <Color />
+
+    <h2>{{ t('badge') }}</h2>
+    <Badge />
+
+    <h2>{{ t('group') }}</h2>
+    <Group />
+
+    <h2>{{ t('zindex') }}</h2>
+    <Zindex />
+
+    <h2>{{ t('click') }}</h2>
+    <Click />
+
+    <h2>{{ t('count') }}</h2>
+    <Count />
   </Demo>
 </template>
 <script setup lang="ts">
-import { My } from '@nutui/icons-vue-taro';
-import { ref } from 'vue';
-const handleClick = () => {
-  console.log('触发点击头像');
-};
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Size from './size.vue';
+import Shape from './shape.vue';
+import Color from './color.vue';
+import Badge from './badge.vue';
+import Click from './click.vue';
+import Group from './group.vue';
+import Zindex from './zindex.vue';
+import Count from './count.vue';
 
-const avatarCount = ref(4);
-const addAvatar = () => {
-  avatarCount.value += 1;
-};
-</script>
-<style lang="scss">
-.avatar-demo {
-  .nut-cell {
-    align-items: flex-end;
-    border-radius: 0;
-    & > view {
-      margin-right: 30px;
-    }
-  }
-  .demo-avatar {
-    color: #fff;
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    size: '尺寸',
+    shape: '形状',
+    color: '自定义颜色',
+    badge: '带徽标的头像',
+    group: '头像组合展现',
+    zindex: '组合头像可控制层级方向',
+    click: '点击事件',
+    count: '动态修改数量'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    size: 'Size',
+    shape: 'Shape',
+    color: 'Color',
+    badge: 'Avatar with Badge',
+    group: 'Avatar group display',
+    zindex: 'Avatar group to control hierarchy direction',
+    click: 'Click Event',
+    count: 'Dynamically change count'
   }
-  .demo-avatar-group-title {
-    display: flex;
-    align-items: center;
-    row-gap: 8px;
-    column-gap: 8px;
-  }
-}
-</style>
+});
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/avatar/shape.vue b/packages/nutui-taro-demo/src/exhibition/pages/avatar/shape.vue
new file mode 100644
index 0000000000..dc830da4b4
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/avatar/shape.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-avatar shape="square"><My /></nut-avatar>
+  <nut-avatar shape="round"><My /></nut-avatar>
+</template>
+<script setup lang="ts">
+import { My } from '@nutui/icons-vue-taro';
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/avatar/size.vue b/packages/nutui-taro-demo/src/exhibition/pages/avatar/size.vue
new file mode 100644
index 0000000000..fabb7f4753
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/avatar/size.vue
@@ -0,0 +1,14 @@
+<template>
+  <nut-avatar size="large">
+    <img :src="url" />
+  </nut-avatar>
+  <nut-avatar size="normal">
+    <img :src="url" />
+  </nut-avatar>
+  <nut-avatar size="small">
+    <img :src="url" />
+  </nut-avatar>
+</template>
+<script setup lang="ts">
+const url = 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png';
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/avatar/zindex.vue b/packages/nutui-taro-demo/src/exhibition/pages/avatar/zindex.vue
new file mode 100644
index 0000000000..71d6eb80ad
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/avatar/zindex.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-avatar-group max-count="3" z-index="right" max-content="...">
+    <nut-avatar><img :src="url" /></nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+  </nut-avatar-group>
+</template>
+<script setup lang="ts">
+import { My } from '@nutui/icons-vue-taro';
+const url = 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png';
+</script>
diff --git a/src/packages/__VUE/avatar/demo.vue b/src/packages/__VUE/avatar/demo.vue
deleted file mode 100644
index bee447782e..0000000000
--- a/src/packages/__VUE/avatar/demo.vue
+++ /dev/null
@@ -1,191 +0,0 @@
-<template>
-  <div class="demo full">
-    <h2>{{ translate('title1') }}</h2>
-    <nut-cell>
-      <nut-avatar size="large">
-        <img
-          src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-        />
-      </nut-avatar>
-      <nut-avatar size="normal">
-        <img
-          src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-        />
-      </nut-avatar>
-      <nut-avatar size="small">
-        <img
-          src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-        />
-      </nut-avatar>
-    </nut-cell>
-    <h2>{{ translate('title2') }}</h2>
-    <nut-cell>
-      <nut-avatar shape="square">
-        <My />
-      </nut-avatar>
-      <nut-avatar shape="round">
-        <My />
-      </nut-avatar>
-    </nut-cell>
-    <h2>{{ translate('title3') }}</h2>
-    <nut-cell>
-      <nut-avatar>
-        <img
-          src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-        />
-      </nut-avatar>
-      <nut-avatar>
-        <My />
-      </nut-avatar>
-      <nut-avatar>王</nut-avatar>
-    </nut-cell>
-    <h2>{{ translate('title4') }}</h2>
-    <nut-cell>
-      <nut-avatar class="demo-avatar" bg-color="#FA2C19">
-        <My color="#fff" />
-      </nut-avatar>
-      <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-    </nut-cell>
-    <h2>{{ translate('title5') }}</h2>
-    <nut-cell>
-      <nut-badge value="8">
-        <nut-avatar shape="square">
-          <My />
-        </nut-avatar>
-      </nut-badge>
-      <nut-badge dot>
-        <nut-avatar shape="square">
-          <My />
-        </nut-avatar>
-      </nut-badge>
-    </nut-cell>
-    <h2>{{ translate('title6') }}</h2>
-    <nut-cell>
-      <nut-avatar-group span="-4">
-        <nut-avatar>
-          <img
-            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-          />
-        </nut-avatar>
-        <nut-avatar>
-          <My />
-        </nut-avatar>
-        <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-      </nut-avatar-group>
-    </nut-cell>
-
-    <nut-cell>
-      <nut-avatar-group max-count="3" max-color="#fff" max-bg-color="#498ff2">
-        <nut-avatar>
-          <img
-            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-          />
-        </nut-avatar>
-        <nut-avatar>
-          <My />
-        </nut-avatar>
-        <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-        <nut-avatar>
-          <My />
-        </nut-avatar>
-      </nut-avatar-group>
-    </nut-cell>
-    <h2>{{ translate('title7') }}</h2>
-    <nut-cell>
-      <nut-avatar-group max-count="3" z-index="right" max-content="...">
-        <nut-avatar>
-          <img
-            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-          />
-        </nut-avatar>
-        <nut-avatar>
-          <My />
-        </nut-avatar>
-        <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-        <nut-avatar>
-          <My />
-        </nut-avatar>
-      </nut-avatar-group>
-    </nut-cell>
-
-    <h2>{{ translate('title8') }}</h2>
-    <nut-cell>
-      <nut-avatar @click="handleClick">
-        <My />
-      </nut-avatar>
-    </nut-cell>
-
-    <h2 class="demo-avatar-group-title"
-      >{{ translate('title9') }}<nut-button size="mini" @click="addAvatar">{{ translate('add') }}</nut-button></h2
-    >
-    <nut-cell>
-      <nut-avatar-group max-count="4" z-index="right">
-        <nut-avatar v-for="i in avatarCount" :key="i">
-          <My v-if="i % 2 == 0" />
-          <img
-            v-else
-            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-          />
-        </nut-avatar>
-      </nut-avatar-group>
-    </nut-cell>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { My } from '@nutui/icons-vue';
-const translate = useTranslate({
-  'zh-CN': {
-    title1: '支持三种尺寸：large、normal、small',
-    title2: '支持两种形状：square、round',
-    title3: '支持三种类型：图片、Icon 以及字符',
-    title4: 'Icon 和字符型可以自定义颜色及背景色',
-    title5: '带徽标的头像',
-    title6: '头像组合展现',
-    title7: '组合头像可控制层级方向',
-    title8: '点击头像触发事件',
-    title9: '动态添加头像',
-    add: '添加'
-  },
-  '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',
-    title9: 'Dynamically adding avatars',
-    add: 'add'
-  }
-});
-const handleClick = () => {
-  console.log('Click Test');
-};
-const avatarCount = ref(4);
-const addAvatar = () => {
-  avatarCount.value += 1;
-};
-</script>
-<style lang="scss" scoped>
-.nut-cell {
-  align-items: flex-end;
-  border-radius: 0;
-
-  & > view {
-    margin-right: 30px;
-  }
-}
-
-.demo-avatar {
-  color: #fff;
-}
-.demo-avatar-group-title {
-  display: flex;
-  align-items: center;
-  row-gap: 8px;
-  column-gap: 8px;
-}
-</style>
diff --git a/src/packages/__VUE/avatar/demo/badge.vue b/src/packages/__VUE/avatar/demo/badge.vue
new file mode 100644
index 0000000000..5453baddbb
--- /dev/null
+++ b/src/packages/__VUE/avatar/demo/badge.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-badge value="8">
+    <nut-avatar shape="square"><My /></nut-avatar>
+  </nut-badge>
+  <span style="margin-right: 10px"></span>
+  <nut-badge dot>
+    <nut-avatar shape="square"><My /></nut-avatar>
+  </nut-badge>
+</template>
+<script setup lang="ts">
+import { My } from '@nutui/icons-vue';
+</script>
diff --git a/src/packages/__VUE/avatar/demo/basic.vue b/src/packages/__VUE/avatar/demo/basic.vue
new file mode 100644
index 0000000000..39c5445529
--- /dev/null
+++ b/src/packages/__VUE/avatar/demo/basic.vue
@@ -0,0 +1,9 @@
+<template>
+  <nut-avatar> <img :src="url" /> </nut-avatar>
+  <nut-avatar> <My /> </nut-avatar>
+  <nut-avatar> 王 </nut-avatar>
+</template>
+<script setup lang="ts">
+import { My } from '@nutui/icons-vue';
+const url = 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png';
+</script>
diff --git a/src/packages/__VUE/avatar/demo/click.vue b/src/packages/__VUE/avatar/demo/click.vue
new file mode 100644
index 0000000000..96f6bf3425
--- /dev/null
+++ b/src/packages/__VUE/avatar/demo/click.vue
@@ -0,0 +1,9 @@
+<template>
+  <nut-avatar @click="click"><My /></nut-avatar>
+</template>
+<script setup lang="ts">
+import { My } from '@nutui/icons-vue';
+const click = () => {
+  console.log('click');
+};
+</script>
diff --git a/src/packages/__VUE/avatar/demo/color.vue b/src/packages/__VUE/avatar/demo/color.vue
new file mode 100644
index 0000000000..e025f9d018
--- /dev/null
+++ b/src/packages/__VUE/avatar/demo/color.vue
@@ -0,0 +1,9 @@
+<template>
+  <nut-avatar bg-color="red">
+    <My color="white" />
+  </nut-avatar>
+  <nut-avatar color="white" bg-color="blue">小明</nut-avatar>
+</template>
+<script setup lang="ts">
+import { My } from '@nutui/icons-vue';
+</script>
diff --git a/src/packages/__VUE/avatar/demo/count.vue b/src/packages/__VUE/avatar/demo/count.vue
new file mode 100644
index 0000000000..cd65f0a467
--- /dev/null
+++ b/src/packages/__VUE/avatar/demo/count.vue
@@ -0,0 +1,16 @@
+<template>
+  <nut-button size="mini" @click="count++">+1</nut-button>
+  <nut-button size="mini" @click="count--">-1</nut-button>
+  <nut-avatar-group max-count="4" z-index="right">
+    <nut-avatar v-for="i in count" :key="i">
+      <My v-if="i % 2 == 0" />
+      <img v-else :src="url" />
+    </nut-avatar>
+  </nut-avatar-group>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { My } from '@nutui/icons-vue';
+const count = ref(4);
+const url = 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png';
+</script>
diff --git a/src/packages/__VUE/avatar/demo/group.vue b/src/packages/__VUE/avatar/demo/group.vue
new file mode 100644
index 0000000000..584b2d1ac6
--- /dev/null
+++ b/src/packages/__VUE/avatar/demo/group.vue
@@ -0,0 +1,17 @@
+<template>
+  <nut-avatar-group span="-4">
+    <nut-avatar><img :src="url" /></nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
+  </nut-avatar-group>
+  <nut-avatar-group max-count="3" max-color="#fff" max-bg-color="#498ff2">
+    <nut-avatar><img :src="url" /></nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+  </nut-avatar-group>
+</template>
+<script setup lang="ts">
+import { My } from '@nutui/icons-vue';
+const url = 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png';
+</script>
diff --git a/src/packages/__VUE/avatar/demo/index.vue b/src/packages/__VUE/avatar/demo/index.vue
new file mode 100644
index 0000000000..c53f37dcb1
--- /dev/null
+++ b/src/packages/__VUE/avatar/demo/index.vue
@@ -0,0 +1,67 @@
+<template>
+  <Demo class="bg-w">
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('size') }}</h2>
+    <Size />
+
+    <h2>{{ t('shape') }}</h2>
+    <Shape />
+
+    <h2>{{ t('color') }}</h2>
+    <Color />
+
+    <h2>{{ t('badge') }}</h2>
+    <Badge />
+
+    <h2>{{ t('group') }}</h2>
+    <Group />
+
+    <h2>{{ t('zindex') }}</h2>
+    <Zindex />
+
+    <h2>{{ t('click') }}</h2>
+    <Click />
+
+    <h2>{{ t('count') }}</h2>
+    <Count />
+  </Demo>
+</template>
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Size from './size.vue';
+import Shape from './shape.vue';
+import Color from './color.vue';
+import Badge from './badge.vue';
+import Click from './click.vue';
+import Group from './group.vue';
+import Zindex from './zindex.vue';
+import Count from './count.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    size: '尺寸',
+    shape: '形状',
+    color: '自定义颜色',
+    badge: '带徽标的头像',
+    group: '头像组合展现',
+    zindex: '组合头像可控制层级方向',
+    click: '点击事件',
+    count: '动态修改数量'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    size: 'Size',
+    shape: 'Shape',
+    color: 'Color',
+    badge: 'Avatar with Badge',
+    group: 'Avatar group display',
+    zindex: 'Avatar group to control hierarchy direction',
+    click: 'Click Event',
+    count: 'Dynamically change count'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/avatar/demo/shape.vue b/src/packages/__VUE/avatar/demo/shape.vue
new file mode 100644
index 0000000000..0913389e01
--- /dev/null
+++ b/src/packages/__VUE/avatar/demo/shape.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-avatar shape="square"><My /></nut-avatar>
+  <nut-avatar shape="round"><My /></nut-avatar>
+</template>
+<script setup lang="ts">
+import { My } from '@nutui/icons-vue';
+</script>
diff --git a/src/packages/__VUE/avatar/demo/size.vue b/src/packages/__VUE/avatar/demo/size.vue
new file mode 100644
index 0000000000..fabb7f4753
--- /dev/null
+++ b/src/packages/__VUE/avatar/demo/size.vue
@@ -0,0 +1,14 @@
+<template>
+  <nut-avatar size="large">
+    <img :src="url" />
+  </nut-avatar>
+  <nut-avatar size="normal">
+    <img :src="url" />
+  </nut-avatar>
+  <nut-avatar size="small">
+    <img :src="url" />
+  </nut-avatar>
+</template>
+<script setup lang="ts">
+const url = 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png';
+</script>
diff --git a/src/packages/__VUE/avatar/demo/zindex.vue b/src/packages/__VUE/avatar/demo/zindex.vue
new file mode 100644
index 0000000000..3a111e8ce2
--- /dev/null
+++ b/src/packages/__VUE/avatar/demo/zindex.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-avatar-group max-count="3" z-index="right" max-content="...">
+    <nut-avatar><img :src="url" /></nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+  </nut-avatar-group>
+</template>
+<script setup lang="ts">
+import { My } from '@nutui/icons-vue';
+const url = 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png';
+</script>
diff --git a/src/packages/__VUE/avatar/doc.en-US.md b/src/packages/__VUE/avatar/doc.en-US.md
index 58493934b3..8e2daa62a9 100644
--- a/src/packages/__VUE/avatar/doc.en-US.md
+++ b/src/packages/__VUE/avatar/doc.en-US.md
@@ -14,218 +14,74 @@ const app = createApp();
 app.use(Avatar);
 ```
 
-### Size
-
-Support three sizes：small、normal、large
-
-:::demo
-
-```vue
-<template>
-  <nut-avatar size="large">
-    <img
-      src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-    />
-  </nut-avatar>
-  <nut-avatar size="normal">
-    <img
-      src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-    />
-  </nut-avatar>
-  <nut-avatar size="small">
-    <img
-      src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-    />
-  </nut-avatar>
-</template>
-```
-
-:::
-
-### Shape
-
-Support two shapes：square、round
-
-:::demo
-
-```vue
-<template>
-  <nut-avatar shape="square"><My /></nut-avatar>
-  <nut-avatar shape="round"><My /></nut-avatar>
-</template>
-<script setup>
-import { My } from '@nutui/icons-vue';
-</script>
-```
-
-:::
+### Basic Usage
 
-### Type
+> demo: avatar basic
 
-Support three types：picture、icon、letter
-
-:::demo
+### Size
 
-```vue
-<template>
-  <nut-avatar>
-    <img
-      src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-    />
-  </nut-avatar>
-  <nut-avatar><My /></nut-avatar>
-  <nut-avatar>王</nut-avatar>
-</template>
-<script setup>
-import { My } from '@nutui/icons-vue';
-</script>
-```
+size: `small`, `normal`, `large`
 
-:::
+> demo: avatar size
 
-### Custom colors and background colors
+### Shape
 
-Icon and letter types can have custom colors and background colors
+shape: `square`, `round`
 
-:::demo
+> demo: avatar shape
 
-```vue
-<template>
-  <nut-avatar class="demo-avatar" bg-color="#FA2C19"><My color="#fff" /></nut-avatar>
-  <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-</template>
-<script setup>
-import { My } from '@nutui/icons-vue';
-</script>
-```
+### Color
 
-:::
+> demo: avatar color
 
 ### Avatar with badge
 
-:::demo
-
-```vue
-<template>
-  <nut-badge value="8">
-    <nut-avatar shape="square"><My /></nut-avatar>
-  </nut-badge>
-  <nut-badge dot>
-    <nut-avatar shape="square"><My /></nut-avatar>
-  </nut-badge>
-</template>
-<script setup>
-import { My } from '@nutui/icons-vue';
-</script>
-```
+> demo: avatar badge
 
-:::
-
-### Avatar group display
-
-:::demo
-
-```vue
-<template>
-  <nut-avatar-group span="-4">
-    <nut-avatar>
-      <img
-        src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-      />
-    </nut-avatar>
-    <nut-avatar><My /></nut-avatar>
-    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-  </nut-avatar-group>
-  <nut-avatar-group max-count="3" max-color="#fff" max-bgColor="#498ff2">
-    <nut-avatar>
-      <img
-        src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-      />
-    </nut-avatar>
-    <nut-avatar><My /></nut-avatar>
-    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-    <nut-avatar><My /></nut-avatar>
-  </nut-avatar-group>
-</template>
-<script setup>
-import { My } from '@nutui/icons-vue';
-</script>
-```
+### AvatarGroup
 
-:::
-
-### Avatar group to control hierarchy direction
-
-:::demo
-
-```vue
-<template>
-  <nut-avatar-group max-count="3" zIndex="right" max-content="...">
-    <nut-avatar>
-      <img
-        src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-      />
-    </nut-avatar>
-    <nut-avatar><My /></nut-avatar>
-    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-    <nut-avatar><My /></nut-avatar>
-  </nut-avatar-group>
-</template>
-<script setup>
-import { My } from '@nutui/icons-vue';
-</script>
-```
+> demo: avatar group
 
-:::
+### AvatarGroup Direction
 
-### Click on the avatar to trigger the event
+> demo: avatar zindex
 
-:::demo
+### Click Event
 
-```vue
-<template>
-  <nut-cell>
-    <nut-avatar @click="handleClick"><My /></nut-avatar>
-  </nut-cell>
-</template>
-<script setup>
-import { My } from '@nutui/icons-vue';
-const handleClick = () => {
-  console.log('触发点击头像');
-};
-</script>
-```
+> demo: avatar click
+
+### Dynamically change count
 
-:::
+> demo: avatar count
 
 ## API
 
 ### Avatar Props
 
-| Attribute | Description                                                        | Type             | Default  |
-| --------- | ------------------------------------------------------------------ | ---------------- | -------- |
-| size      | The size of the avatar，eg `large`、`normal`、`small`，and numbers | string \| number | `normal` |
-| shape     | shape of avatar，eg `square`、`round `                             | string           | `round`  |
-| color     | color of text                                                      | string           | `#666`   |
-| bg-color  | background color                                                   | string           | `#eee`   |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| size | The size of the avatar，eg `large`、`normal`、`small`，and numbers | string \| number | `normal` |
+| shape | shape of avatar，eg `square`、`round ` | string | `round` |
+| color | color of text | string | `#666` |
+| bg-color | background color | string | `#eee` |
 
 ### AvatarGroup Props
 
-| 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，<br />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    | color of text                                                                                                                          | string           | `#666`   |
-| max-bg-color | background color                                                                                                                       | string           | `#eee`   |
-| span         | Distance between avatars                                                                                                               | string           | `-8`     |
-| zIndex       | Hierarchy direction between avatar group，eg `left`、`right`                                                                           | string           | `left`   |
+| 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，<br />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 | color of text | string | `#666` |
+| max-bg-color | background color | string | `#eee` |
+| span | Distance between avatars | string | `-8` |
+| zIndex | Hierarchy direction between avatar group，eg `left`、`right` | string | `left` |
 
 ### Avatar Slots
 
-| Name    | Description                        |
-| ------- | ---------------------------------- |
+| Name | Description |
+| --- | --- |
 | default | default slot for img, icon or text |
 
 ## Theming
@@ -234,13 +90,13 @@ const handleClick = () => {
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                          | Default Value |
-| ----------------------------- | ------------- |
-| --nut-actionsheet-light-color | _#f6f6f6_     |
-| --nut-avatar-square           | _5px_         |
-| --nut-avatar-large-width      | _60px_        |
-| --nut-avatar-large-height     | _60px_        |
-| --nut-avatar-small-width      | _32px_        |
-| --nut-avatar-small-height     | _32px_        |
-| --nut-avatar-normal-width     | _40px_        |
-| --nut-avatar-normal-height    | _40px_        |
+| Name | Default Value |
+| --- | --- |
+| --nut-actionsheet-light-color | _#f6f6f6_ |
+| --nut-avatar-square | _5px_ |
+| --nut-avatar-large-width | _60px_ |
+| --nut-avatar-large-height | _60px_ |
+| --nut-avatar-small-width | _32px_ |
+| --nut-avatar-small-height | _32px_ |
+| --nut-avatar-normal-width | _40px_ |
+| --nut-avatar-normal-height | _40px_ |
diff --git a/src/packages/__VUE/avatar/doc.md b/src/packages/__VUE/avatar/doc.md
index 2a37a75d21..1f68600728 100644
--- a/src/packages/__VUE/avatar/doc.md
+++ b/src/packages/__VUE/avatar/doc.md
@@ -16,216 +16,72 @@ app.use(Avatar);
 
 ### 基础用法
 
-支持三种尺寸：small、normal、large
-
-:::demo
-
-```vue
-<template>
-  <nut-avatar size="large">
-    <img
-      src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-    />
-  </nut-avatar>
-  <nut-avatar size="normal">
-    <img
-      src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-    />
-  </nut-avatar>
-  <nut-avatar size="small">
-    <img
-      src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-    />
-  </nut-avatar>
-</template>
-```
-
-:::
-
-### 头像形状
-
-支持两种形状：square、round
-
-:::demo
-
-```vue
-<template>
-  <nut-avatar shape="square"><My /></nut-avatar>
-  <nut-avatar shape="round"><My /></nut-avatar>
-</template>
-<script setup>
-import { My } from '@nutui/icons-vue';
-</script>
-```
-
-:::
-
-### 头像类型
+> demo: avatar basic
 
-支持三种类型：图片、Icon 以及字符
+### 尺寸
 
-:::demo
-
-```vue
-<template>
-  <nut-avatar>
-    <img
-      src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-    />
-  </nut-avatar>
-  <nut-avatar><My /></nut-avatar>
-  <nut-avatar>王</nut-avatar>
-</template>
-<script setup>
-import { My } from '@nutui/icons-vue';
-</script>
-```
+支持三种尺寸：small、normal、large
 
-:::
+> demo: avatar size
 
-### 自定义颜色及背景色
+### 形状
 
-Icon 和字符型可以自定义颜色及背景色
+支持两种形状：`square`、`round`
 
-:::demo
+> demo: avatar shape
 
-```vue
-<template>
-  <nut-avatar class="demo-avatar" bg-color="#FA2C19"><My color="#fff" /></nut-avatar>
-  <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-</template>
-<script setup>
-import { My } from '@nutui/icons-vue';
-</script>
-```
+### 自定义颜色
 
-:::
+> demo: avatar color
 
 ### 带徽标的头像
 
-:::demo
-
-```vue
-<template>
-  <nut-badge value="8">
-    <nut-avatar shape="square"><My /></nut-avatar>
-  </nut-badge>
-  <nut-badge dot>
-    <nut-avatar shape="square"><My /></nut-avatar>
-  </nut-badge>
-</template>
-<script setup>
-import { My } from '@nutui/icons-vue';
-</script>
-```
-
-:::
+> demo: avatar badge
 
 ### 头像组合展现
 
-:::demo
-
-```vue
-<template>
-  <nut-avatar-group span="-4">
-    <nut-avatar>
-      <img
-        src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-      />
-    </nut-avatar>
-    <nut-avatar><My /></nut-avatar>
-    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-  </nut-avatar-group>
-  <nut-avatar-group max-count="3" max-color="#fff" max-bgColor="#498ff2">
-    <nut-avatar>
-      <img
-        src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-      />
-    </nut-avatar>
-    <nut-avatar><My /></nut-avatar>
-    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-    <nut-avatar><My /></nut-avatar>
-  </nut-avatar-group>
-</template>
-<script setup>
-import { My } from '@nutui/icons-vue';
-</script>
-```
-
-:::
+> demo: avatar group
 
 ### 组合头像可控制层级方向
 
-:::demo
-
-```vue
-<template>
-  <nut-avatar-group max-count="3" zIndex="right" max-content="...">
-    <nut-avatar>
-      <img
-        src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-      />
-    </nut-avatar>
-    <nut-avatar><My /></nut-avatar>
-    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-    <nut-avatar><My /></nut-avatar>
-  </nut-avatar-group>
-</template>
-<script setup>
-import { My } from '@nutui/icons-vue';
-</script>
-```
+> demo: avatar zindex
 
-:::
+### 点击事件
 
-### 点击头像触发事件
+> demo: avatar click
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-avatar @click="handleClick"><My /></nut-avatar>
-  </nut-cell>
-</template>
-<script setup>
-import { My } from '@nutui/icons-vue';
-const handleClick = () => {
-  console.log('触发点击头像');
-};
-</script>
-```
+### 动态修改数量
 
-:::
+> demo: avatar count
 
 ## API
 
 ### Avatar Props
 
-| 参数     | 说明                                                           | 类型             | 默认值   |
-| -------- | -------------------------------------------------------------- | ---------------- | -------- |
-| size     | 头像的大小，可选值为：`large`、`normal`、`small`，支持输入数字 | string \| number | `normal` |
-| shape    | 头像的形状，可选值为：`square`、`round `                       | string           | `round`  |
-| color    | 字体颜色                                                       | string           | `#666`   |
-| bg-color | 背景色                                                         | string           | `#eee`   |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| size | 头像的大小，可选值为：`large`、`normal`、`small`，支持输入数字 | string \| number | `normal` |
+| shape | 头像的形状，可选值为：`square`、`round ` | string | `round` |
+| color | 字体颜色 | string | `#666` |
+| bg-color | 背景色 | string | `#eee` |
 
 ### AvatarGroup Props
 
-| 参数         | 说明                                                                      | 类型             | 默认值   |
-| ------------ | ------------------------------------------------------------------------- | ---------------- | -------- |
-| max-count    | 显示的最大头像个数                                                        | string \| number | -        |
-| max-content  | 头像数量超出时，会出现一个头像折叠元素，该元素内容可为`...`、`more`、`+N` | string           | `+N`     |
-| size         | 头像的大小，可选值为：`large`、`normal`、`small`，支持直接输入数字        | string \| number | `normal` |
-| shape        | 头像的形状，可选值为：`square`、`round`                                   | string           | `round`  |
-| max-color    | 头像折叠元素的字体颜色                                                    | string           | `#666`   |
-| max-bg-color | 头像折叠元素的背景色                                                      | string           | `#eee`   |
-| span         | 头像之间的间距                                                            | string           | `-8`     |
-| zIndex       | 组合头像之间的层级方向，可选值为：`left`、`right`                         | string           | `left`   |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| max-count | 显示的最大头像个数 | string \| number | - |
+| max-content | 头像数量超出时，会出现一个头像折叠元素，该元素内容可为`...`、`more`、`+N` | string | `+N` |
+| size | 头像的大小，可选值为：`large`、`normal`、`small`，支持直接输入数字 | string \| number | `normal` |
+| shape | 头像的形状，可选值为：`square`、`round` | string | `round` |
+| max-color | 头像折叠元素的字体颜色 | string | `#666` |
+| max-bg-color | 头像折叠元素的背景色 | string | `#eee` |
+| span | 头像之间的间距 | string | `-8` |
+| zIndex | 组合头像之间的层级方向，可选值为：`left`、`right` | string | `left` |
 
 ### Avatar Slots
 
-| 名称    | 描述                                   |
-| ------- | -------------------------------------- |
+| 名称 | 描述 |
+| --- | --- |
 | default | 默认插槽，可放置图片、图标、文本等元素 |
 
 ## 主题定制
@@ -234,13 +90,13 @@ const handleClick = () => {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件]()。
 
-| 名称                          | 默认值    |
-| ----------------------------- | --------- |
+| 名称 | 默认值 |
+| --- | --- |
 | --nut-actionsheet-light-color | _#f6f6f6_ |
-| --nut-avatar-square           | _5px_     |
-| --nut-avatar-large-width      | _60px_    |
-| --nut-avatar-large-height     | _60px_    |
-| --nut-avatar-small-width      | _32px_    |
-| --nut-avatar-small-height     | _32px_    |
-| --nut-avatar-normal-width     | _40px_    |
-| --nut-avatar-normal-height    | _40px_    |
+| --nut-avatar-square | _5px_ |
+| --nut-avatar-large-width | _60px_ |
+| --nut-avatar-large-height | _60px_ |
+| --nut-avatar-small-width | _32px_ |
+| --nut-avatar-small-height | _32px_ |
+| --nut-avatar-normal-width | _40px_ |
+| --nut-avatar-normal-height | _40px_ |
diff --git a/src/packages/__VUE/avatar/doc.taro.md b/src/packages/__VUE/avatar/doc.taro.md
index d20f008194..575ef6180d 100644
--- a/src/packages/__VUE/avatar/doc.taro.md
+++ b/src/packages/__VUE/avatar/doc.taro.md
@@ -16,216 +16,72 @@ app.use(Avatar);
 
 ### 基础用法
 
-支持三种尺寸：small、normal、large
-
-:::demo
-
-```vue
-<template>
-  <nut-avatar size="large">
-    <img
-      src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-    />
-  </nut-avatar>
-  <nut-avatar size="normal">
-    <img
-      src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-    />
-  </nut-avatar>
-  <nut-avatar size="small">
-    <img
-      src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-    />
-  </nut-avatar>
-</template>
-```
-
-:::
-
-### 头像形状
-
-支持两种形状：square、round
-
-:::demo
-
-```vue
-<template>
-  <nut-avatar shape="square"><My /></nut-avatar>
-  <nut-avatar shape="round"><My /></nut-avatar>
-</template>
-<script setup>
-import { My } from '@nutui/icons-vue-taro';
-</script>
-```
-
-:::
-
-### 头像类型
+> demo: avatar basic exhibition
 
-支持三种类型：图片、Icon 以及字符
+### 尺寸
 
-:::demo
-
-```vue
-<template>
-  <nut-avatar>
-    <img
-      src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-    />
-  </nut-avatar>
-  <nut-avatar><My /></nut-avatar>
-  <nut-avatar>王</nut-avatar>
-</template>
-<script setup>
-import { My } from '@nutui/icons-vue-taro';
-</script>
-```
+支持三种尺寸：small、normal、large
 
-:::
+> demo: avatar size exhibition
 
-### 自定义颜色及背景色
+### 形状
 
-Icon 和字符型可以自定义颜色及背景色
+支持两种形状：`square`、`round`
 
-:::demo
+> demo: avatar shape exhibition
 
-```vue
-<template>
-  <nut-avatar class="demo-avatar" bg-color="#FA2C19"><My color="#fff" /></nut-avatar>
-  <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-</template>
-<script setup>
-import { My } from '@nutui/icons-vue-taro';
-</script>
-```
+### 自定义颜色
 
-:::
+> demo: avatar color exhibition
 
 ### 带徽标的头像
 
-:::demo
-
-```vue
-<template>
-  <nut-badge value="8">
-    <nut-avatar shape="square"><My /></nut-avatar>
-  </nut-badge>
-  <nut-badge dot>
-    <nut-avatar shape="square"><My /></nut-avatar>
-  </nut-badge>
-</template>
-<script setup>
-import { My } from '@nutui/icons-vue-taro';
-</script>
-```
-
-:::
+> demo: avatar badge exhibition
 
 ### 头像组合展现
 
-:::demo
-
-```vue
-<template>
-  <nut-avatar-group span="-4">
-    <nut-avatar>
-      <img
-        src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-      />
-    </nut-avatar>
-    <nut-avatar><My /></nut-avatar>
-    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-  </nut-avatar-group>
-  <nut-avatar-group max-count="3" max-color="#fff" max-bgColor="#498ff2">
-    <nut-avatar>
-      <img
-        src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-      />
-    </nut-avatar>
-    <nut-avatar><My /></nut-avatar>
-    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-    <nut-avatar><My /></nut-avatar>
-  </nut-avatar-group>
-</template>
-<script setup>
-import { My } from '@nutui/icons-vue-taro';
-</script>
-```
-
-:::
+> demo: avatar group exhibition
 
 ### 组合头像可控制层级方向
 
-:::demo
-
-```vue
-<template>
-  <nut-avatar-group max-count="3" zIndex="right" max-content="...">
-    <nut-avatar>
-      <img
-        src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-      />
-    </nut-avatar>
-    <nut-avatar><My /></nut-avatar>
-    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
-    <nut-avatar><My /></nut-avatar>
-  </nut-avatar-group>
-</template>
-<script setup>
-import { My } from '@nutui/icons-vue-taro';
-</script>
-```
+> demo: avatar zindex exhibition
 
-:::
+### 点击事件
 
-### 点击头像触发事件
+> demo: avatar click exhibition
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-avatar @click="handleClick"><My /></nut-avatar>
-  </nut-cell>
-</template>
-<script setup>
-import { My } from '@nutui/icons-vue-taro';
-const handleClick = () => {
-  console.log('触发点击头像');
-};
-</script>
-```
+### 动态修改数量
 
-:::
+> demo: avatar count exhibition
 
 ## API
 
 ### Avatar Props
 
-| 参数     | 说明                                                           | 类型             | 默认值   |
-| -------- | -------------------------------------------------------------- | ---------------- | -------- |
-| size     | 头像的大小，可选值为：`large`、`normal`、`small`，支持输入数字 | string \| number | `normal` |
-| shape    | 头像的形状，可选值为：`square`、`round `                       | string           | `round`  |
-| color    | 字体颜色                                                       | string           | `#666`   |
-| bg-color | 背景色                                                         | string           | `#eee`   |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| size | 头像的大小，可选值为：`large`、`normal`、`small`，支持输入数字 | string \| number | `normal` |
+| shape | 头像的形状，可选值为：`square`、`round ` | string | `round` |
+| color | 字体颜色 | string | `#666` |
+| bg-color | 背景色 | string | `#eee` |
 
 ### AvatarGroup Props
 
-| 参数         | 说明                                                                      | 类型             | 默认值   |
-| ------------ | ------------------------------------------------------------------------- | ---------------- | -------- |
-| max-count    | 显示的最大头像个数                                                        | string \| number | -        |
-| max-content  | 头像数量超出时，会出现一个头像折叠元素，该元素内容可为`...`、`more`、`+N` | string           | `+N`     |
-| size         | 头像的大小，可选值为：`large`、`normal`、`small`，支持直接输入数字        | string \| number | `normal` |
-| shape        | 头像的形状，可选值为：`square`、`round`                                   | string           | `round`  |
-| max-color    | 头像折叠元素的字体颜色                                                    | string           | `#666`   |
-| max-bg-color | 头像折叠元素的背景色                                                      | string           | `#eee`   |
-| span         | 头像之间的间距                                                            | string           | `-8`     |
-| zIndex       | 组合头像之间的层级方向，可选值为：`left`、`right`                         | string           | `left`   |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| max-count | 显示的最大头像个数 | string \| number | - |
+| max-content | 头像数量超出时，会出现一个头像折叠元素，该元素内容可为`...`、`more`、`+N` | string | `+N` |
+| size | 头像的大小，可选值为：`large`、`normal`、`small`，支持直接输入数字 | string \| number | `normal` |
+| shape | 头像的形状，可选值为：`square`、`round` | string | `round` |
+| max-color | 头像折叠元素的字体颜色 | string | `#666` |
+| max-bg-color | 头像折叠元素的背景色 | string | `#eee` |
+| span | 头像之间的间距 | string | `-8` |
+| zIndex | 组合头像之间的层级方向，可选值为：`left`、`right` | string | `left` |
 
 ### Avatar Slots
 
-| 名称    | 描述                                   |
-| ------- | -------------------------------------- |
+| 名称 | 描述 |
+| --- | --- |
 | default | 默认插槽，可放置图片、图标、文本等元素 |
 
 ## 主题定制
@@ -234,13 +90,13 @@ const handleClick = () => {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件]()。
 
-| 名称                          | 默认值    |
-| ----------------------------- | --------- |
+| 名称 | 默认值 |
+| --- | --- |
 | --nut-actionsheet-light-color | _#f6f6f6_ |
-| --nut-avatar-square           | _5px_     |
-| --nut-avatar-large-width      | _60px_    |
-| --nut-avatar-large-height     | _60px_    |
-| --nut-avatar-small-width      | _32px_    |
-| --nut-avatar-small-height     | _32px_    |
-| --nut-avatar-normal-width     | _40px_    |
-| --nut-avatar-normal-height    | _40px_    |
+| --nut-avatar-square | _5px_ |
+| --nut-avatar-large-width | _60px_ |
+| --nut-avatar-large-height | _60px_ |
+| --nut-avatar-small-width | _32px_ |
+| --nut-avatar-small-height | _32px_ |
+| --nut-avatar-normal-width | _40px_ |
+| --nut-avatar-normal-height | _40px_ |