Repository: Tencent/tdesign-mobile-vue
Pull request #348 (2022-09-12 14:26:18)

test: add test for sticky


### 🤔 这个 PR 的性质是？

- [x] 测试用例

### 🔗 相关 Issue

<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->
https://github.com/Tencent/tdesign-mobile-vue/issues/271?target=sticky

### 📝 更新日志


- fix(sticky): 添加组件单元测试


### ☑️ 请求合并前的自查清单

⚠️ 请自检并全部**勾选全部选项**。⚠️

- [✅] 文档已补充或无须补充
- [✅] 代码演示已提供或无须提供
- [✅] TypeScript 定义已补充或无须补充
- [✅ ] Changelog 已提供或无须提供


4xii: #271 
github-actions[bot]: <a href="https://preview-pr348-tdesign-mobile-vue.surge.sh"><img height="96" alt="完成" src="https://user-images.githubusercontent.com/15634204/150816437-9f5bb788-cd67-4cbc-9897-b82d74e9aa65.png" /></a>
<!-- [工作流地址](https://github.com/Tencent/tdesign-mobile-vue/actions/runs/3042014851) -->
<!-- AUTO_PREVIEW_HOOK -->

Patch:
diff --git a/src/avatar/avatar.md b/src/avatar/avatar.md
index 261e9ade..ecab6bad 100644
--- a/src/avatar/avatar.md
+++ b/src/avatar/avatar.md
@@ -5,7 +5,7 @@
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-ImageProps | Object | - | 【开发中】透传至 Image 组件 | N
+imageProps | Object | - | 透传至 Image 组件 | N
 alt | String | - | 头像替换文本，仅当图片加载失败时有效 | N
 badgeProps | Object | - | 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/avatar/type.ts) | N
 hideOnLoadFailed | Boolean | false | 加载失败时隐藏图片 | N
diff --git a/src/avatar/avatar.vue b/src/avatar/avatar.vue
index fab16a17..4f1f4798 100644
--- a/src/avatar/avatar.vue
+++ b/src/avatar/avatar.vue
@@ -1,7 +1,13 @@
 <template>
   <div :class="avatarClass" :style="customSize">
     <div :class="`${name}__inner`">
-      <img v-if="image && !hideOnLoadFailed" :src="image" :alt="alt" :style="customSize" @error="handleImgLoadError" />
+      <t-image
+        v-if="image && !hideOnLoadFailed"
+        :style="customSize"
+        v-bind="customImageProps"
+        @load="handleImgLoadCompleted"
+        @error="handleImgLoadError"
+      />
       <div v-else-if="iconContent !== undefined" :class="`${name}__icon`">
         <t-node :content="iconContent"></t-node>
       </div>
@@ -26,6 +32,7 @@
 <script lang="ts">
 import { computed, toRefs, defineComponent, getCurrentInstance, inject, ref, SetupContext } from 'vue';
 import TBadge from '../badge';
+import TImage from '../image';
 import config from '../config';
 import AvatarProps from './props';
 import { TdAvatarGroupProps } from './type';
@@ -37,15 +44,15 @@ const name = `${prefix}-avatar`;
 
 export default defineComponent({
   name,
-  components: { TNode, TBadge },
+  components: { TNode, TBadge, TImage },
   props: AvatarProps,
   emits: ['error'],
   setup(props, context: SetupContext) {
     const emitEvent = useEmitEvent(props, context.emit);
     const internalInstance = getCurrentInstance();
     const avatarGroupProps = inject('avatarGroup', {}) as TdAvatarGroupProps;
-    const avatarContent = computed(() => renderContent(internalInstance, 'default', 'content'));
     const iconContent = computed(() => renderTNode(internalInstance, 'icon'));
+    const avatarContent = computed(() => renderContent(internalInstance, 'default', 'content'));
     const sizeValue = ref(props.size || (avatarGroupProps && avatarGroupProps.size));
     const avatarClass = computed(() => [
       `${name}`,
@@ -64,18 +71,32 @@ export default defineComponent({
           }
         : {};
     });
-    const handleImgLoadError = (e: Event) => {
+    const handleImgLoadCompleted = (e: any) => {
+      emitEvent('load', e);
+    };
+    const handleImgLoadError = (e: any) => {
       emitEvent('error', e);
     };
 
+    const baseImageProps = {
+      src: props.image,
+      alt: props.alt,
+    };
+    const customImageProps = computed(() => ({
+      ...props.imageProps,
+      ...baseImageProps,
+    }));
+
     return {
       name,
       ...toRefs(props),
-      avatarContent,
       iconContent,
+      avatarContent,
       avatarClass,
       customSize,
+      handleImgLoadCompleted,
       handleImgLoadError,
+      customImageProps,
     };
   },
 });
diff --git a/src/avatar/demos/action.vue b/src/avatar/demos/action.vue
new file mode 100644
index 00000000..c0d7f1fd
--- /dev/null
+++ b/src/avatar/demos/action.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="tdesign-demo-block">
+    <div class="avatar-group-demo">
+      <t-avatar-group cascading="left-up" :max="5" size="small" :collapse-avatar="userAddIcon">
+        <t-avatar v-for="(url, index) in imageList" :key="index" shape="circle" :image="url"></t-avatar>
+      </t-avatar-group>
+    </div>
+    <div class="avatar-group-demo">
+      <t-avatar-group cascading="left-up" :max="5" size="40px">
+        <template #collapseAvatar>
+          <user-add-icon style="font-size: 20px"></user-add-icon>
+        </template>
+        <t-avatar v-for="(url, index) in imageList" :key="index" shape="circle" :image="url"></t-avatar>
+      </t-avatar-group>
+    </div>
+    <div class="avatar-group-demo">
+      <t-avatar-group cascading="left-up" :max="5">
+        <template #collapseAvatar>
+          <user-add-icon style="font-size: 24px"></user-add-icon>
+        </template>
+        <t-avatar v-for="(url, index) in imageList" :key="index" shape="circle" :image="url"></t-avatar>
+      </t-avatar-group>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { h, ref } from 'vue';
+import { UserAddIcon } from 'tdesign-icons-vue-next';
+
+const userAddIcon = () => h(UserAddIcon);
+const imageList = ref([
+  'https://tdesign.gtimg.com/mobile/demos/avatar_1.png',
+  'https://tdesign.gtimg.com/mobile/demos/avatar_2.png',
+  'https://tdesign.gtimg.com/mobile/demos/avatar_3.png',
+  'https://tdesign.gtimg.com/mobile/demos/avatar_4.png',
+  'https://tdesign.gtimg.com/mobile/demos/avatar_5.png',
+  'https://tdesign.gtimg.com/mobile/demos/avatar_1.png',
+  'https://tdesign.gtimg.com/mobile/demos/avatar_2.png',
+  'https://tdesign.gtimg.com/mobile/demos/avatar_3.png',
+  'https://tdesign.gtimg.com/mobile/demos/avatar_4.png',
+  'https://tdesign.gtimg.com/mobile/demos/avatar_5.png',
+]);
+</script>
+
+<style lang="less">
+.avatar-group-demo {
+  margin-left: 16px;
+  margin-bottom: 16px;
+}
+</style>
diff --git a/src/avatar/demos/adjust.vue b/src/avatar/demos/adjust.vue
index bc59fcc9..a10ec3e8 100644
--- a/src/avatar/demos/adjust.vue
+++ b/src/avatar/demos/adjust.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="tdesign-demo-block">
-    <div class="tdesign-demo-avatar">
+    <div class="avatar-demo">
       <t-avatar>陈</t-avatar>
       <t-avatar>陈晚</t-avatar>
       <t-avatar>陈晚晚</t-avatar>
@@ -8,12 +8,12 @@
   </div>
 </template>
 
-<script lang="ts" setup></script>
-
-<style lang="less" scoped>
-.tdesign-demo-avatar {
+<style lang="less">
+.avatar-demo {
+  margin-left: 16px;
+  margin-bottom: 16px;
   .t-avatar {
-    margin-right: 40px;
+    margin-right: 20px;
   }
 }
 </style>
diff --git a/src/avatar/demos/exhibition.vue b/src/avatar/demos/exhibition.vue
new file mode 100644
index 00000000..59b8b87b
--- /dev/null
+++ b/src/avatar/demos/exhibition.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="tdesign-demo-block">
+    <div class="avatar-group-demo">
+      <t-avatar-group cascading="right-up" :max="5" size="small">
+        <t-avatar v-for="(url, index) in imageList" :key="index" shape="circle" :image="url"></t-avatar>
+      </t-avatar-group>
+    </div>
+    <div class="avatar-group-demo">
+      <t-avatar-group cascading="right-up" :max="5" size="40px">
+        <t-avatar v-for="(url, index) in imageList" :key="index" shape="circle" :image="url"></t-avatar>
+      </t-avatar-group>
+    </div>
+    <div class="avatar-group-demo">
+      <t-avatar-group cascading="right-up" :max="5">
+        <t-avatar v-for="(url, index) in imageList" :key="index" shape="circle" :image="url"></t-avatar>
+      </t-avatar-group>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const imageList = ref([
+  'https://tdesign.gtimg.com/mobile/demos/avatar_1.png',
+  'https://tdesign.gtimg.com/mobile/demos/avatar_2.png',
+  'https://tdesign.gtimg.com/mobile/demos/avatar_3.png',
+  'https://tdesign.gtimg.com/mobile/demos/avatar_4.png',
+  'https://tdesign.gtimg.com/mobile/demos/avatar_5.png',
+  'https://tdesign.gtimg.com/mobile/demos/avatar_1.png',
+  'https://tdesign.gtimg.com/mobile/demos/avatar_2.png',
+  'https://tdesign.gtimg.com/mobile/demos/avatar_3.png',
+  'https://tdesign.gtimg.com/mobile/demos/avatar_4.png',
+  'https://tdesign.gtimg.com/mobile/demos/avatar_5.png',
+]);
+</script>
+
+<style lang="less">
+.avatar-group-demo {
+  margin-left: 16px;
+  margin-bottom: 16px;
+}
+</style>
diff --git a/src/avatar/demos/mobile.vue b/src/avatar/demos/mobile.vue
index f7b89d70..052fe6cd 100644
--- a/src/avatar/demos/mobile.vue
+++ b/src/avatar/demos/mobile.vue
@@ -3,170 +3,23 @@
     <h1 class="title">Avatar 头像</h1>
     <p class="summary">用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。</p>
     <tdesign-demo-block title="01 头像类型" summary="头像样式可为默认头像、微信头像圆形、方形、自定义文字">
-      <div class="avatar-demo">
-        <t-avatar :icon="userIcon"></t-avatar>
-        <t-avatar
-          image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-          alt="示例图片"
-          :hide-on-load-failed="false"
-        ></t-avatar>
-        <t-avatar>
-          <template #icon>
-            <img src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png" alt="示例图片" />
-          </template>
-        </t-avatar>
-        <t-avatar image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png" shape="round"></t-avatar>
-        <t-avatar class="custom">A</t-avatar>
-      </div>
+      <shapeDemo />
     </tdesign-demo-block>
     <tdesign-demo-block title="02 特殊类型" summary="纯展示 从上往下">
-      <div class="avatar-group-demo">
-        <t-avatar-group cascading="right-up" :max="5" size="small">
-          <t-avatar v-for="(url, index) in imageList" :key="index" shape="circle" :image="url"></t-avatar>
-        </t-avatar-group>
-      </div>
-      <div class="avatar-group-demo">
-        <t-avatar-group cascading="right-up" :max="5" size="40px">
-          <t-avatar v-for="(url, index) in imageList" :key="index" shape="circle" :image="url"></t-avatar>
-        </t-avatar-group>
-      </div>
-      <div class="avatar-group-demo">
-        <t-avatar-group cascading="right-up" :max="5">
-          <t-avatar v-for="(url, index) in imageList" :key="index" shape="circle" :image="url"></t-avatar>
-        </t-avatar-group>
-      </div>
+      <exhibitionDemo />
     </tdesign-demo-block>
     <tdesign-demo-block summary="带操作 从下往上">
-      <div class="avatar-group-demo">
-        <t-avatar-group cascading="left-up" :max="5" size="small" :collapse-avatar="userAddIcon">
-          <t-avatar v-for="(url, index) in imageList" :key="index" shape="circle" :image="url"></t-avatar>
-        </t-avatar-group>
-      </div>
-      <div class="avatar-group-demo">
-        <t-avatar-group cascading="left-up" :max="5" size="40px">
-          <template #collapseAvatar>
-            <user-add-icon style="font-size: 20px"></user-add-icon>
-          </template>
-          <t-avatar v-for="(url, index) in imageList" :key="index" shape="circle" :image="url"></t-avatar>
-        </t-avatar-group>
-      </div>
-      <div class="avatar-group-demo">
-        <t-avatar-group cascading="left-up" :max="5">
-          <template #collapseAvatar>
-            <user-add-icon style="font-size: 24px"></user-add-icon>
-          </template>
-          <t-avatar v-for="(url, index) in imageList" :key="index" shape="circle" :image="url"></t-avatar>
-        </t-avatar-group>
-      </div>
+      <actionDemo />
     </tdesign-demo-block>
     <tdesign-demo-block title="03 规格" summary="头像大小尺寸">
-      <div class="avatar-demo">
-        <t-avatar shape="circle" size="large" :icon="userIcon"></t-avatar>
-        <t-avatar shape="circle" size="medium" :icon="userIcon"></t-avatar>
-        <t-avatar shape="circle" size="small" :icon="userIcon"></t-avatar>
-      </div>
-      <div class="avatar-demo">
-        <t-avatar
-          shape="circle"
-          size="large"
-          image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-          alt="示例图片"
-          :badge-props="{ count: 10 }"
-        ></t-avatar>
-        <t-avatar
-          shape="circle"
-          size="medium"
-          image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-          alt="示例图片"
-          :badge-props="{ count: 10 }"
-        ></t-avatar>
-        <t-avatar
-          shape="circle"
-          size="small"
-          image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-          alt="示例图片"
-          :badge-props="{ dot: true }"
-        ></t-avatar>
-      </div>
-      <div class="avatar-demo">
-        <t-avatar
-          shape="round"
-          size="large"
-          image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-          alt="示例图片"
-          :badge-props="{ count: 10 }"
-        ></t-avatar>
-        <t-avatar
-          shape="round"
-          size="medium"
-          image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-          alt="示例图片"
-          :badge-props="{ count: 10 }"
-        ></t-avatar>
-        <t-avatar
-          shape="round"
-          size="small"
-          image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-          alt="示例图片"
-          :badge-props="{ dot: true }"
-        ></t-avatar>
-      </div>
-      <div class="avatar-demo">
-        <t-avatar shape="circle" size="large" class="custom">A</t-avatar>
-        <t-avatar shape="circle" size="medium" class="custom">A</t-avatar>
-        <t-avatar shape="circle" size="small" class="custom">A</t-avatar>
-      </div>
+      <sizeDemo />
     </tdesign-demo-block>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, h, ref } from 'vue';
-import { UserAddIcon, UserIcon } from 'tdesign-icons-vue-next';
-
-export default defineComponent({
-  components: {
-    UserAddIcon,
-  },
-  setup() {
-    const userIcon = () => h(UserIcon);
-    const userAddIcon = () => h(UserAddIcon);
-    const errorConsole = () => {
-      console.log('error console');
-    };
-    const imageList = ref([
-      'https://tdesign.gtimg.com/mobile/demos/avatar_1.png',
-      'https://tdesign.gtimg.com/mobile/demos/avatar_2.png',
-      'https://tdesign.gtimg.com/mobile/demos/avatar_3.png',
-      'https://tdesign.gtimg.com/mobile/demos/avatar_4.png',
-      'https://tdesign.gtimg.com/mobile/demos/avatar_5.png',
-      'https://tdesign.gtimg.com/mobile/demos/avatar_1.png',
-      'https://tdesign.gtimg.com/mobile/demos/avatar_2.png',
-      'https://tdesign.gtimg.com/mobile/demos/avatar_3.png',
-      'https://tdesign.gtimg.com/mobile/demos/avatar_4.png',
-      'https://tdesign.gtimg.com/mobile/demos/avatar_5.png',
-    ]);
-    return { userIcon, userAddIcon, imageList, errorConsole };
-  },
-});
+<script lang="ts" setup>
+import shapeDemo from './shape.vue';
+import sizeDemo from './size.vue';
+import exhibitionDemo from './exhibition.vue';
+import actionDemo from './action.vue';
 </script>
-
-<style lang="less">
-.avatar-demo {
-  margin-left: 16px;
-  margin-bottom: 16px;
-  .t-avatar {
-    margin-right: 20px;
-  }
-  .custom {
-    .t-avatar__inner {
-      background-color: #0052d9;
-      color: #fff;
-    }
-  }
-}
-.avatar-group-demo {
-  margin-left: 16px;
-  margin-bottom: 16px;
-}
-</style>
diff --git a/src/avatar/demos/shape.vue b/src/avatar/demos/shape.vue
index 35f5302f..adc182be 100644
--- a/src/avatar/demos/shape.vue
+++ b/src/avatar/demos/shape.vue
@@ -1,10 +1,42 @@
 <template>
-  <div>
-    <div class="tdesign-demo-block">
-      <t-avatar shape="circle">U</t-avatar>
-      <t-avatar shape="round">U</t-avatar>
+  <div class="tdesign-demo-block">
+    <div class="avatar-demo">
+      <t-avatar :icon="userIcon"></t-avatar>
+      <t-avatar
+        image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+        alt="示例图片"
+        :hide-on-load-failed="false"
+      ></t-avatar>
+      <t-avatar>
+        <template #icon>
+          <img src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png" alt="示例图片" />
+        </template>
+      </t-avatar>
+      <t-avatar image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png" shape="round"></t-avatar>
+      <t-avatar class="custom">A</t-avatar>
     </div>
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { h } from 'vue';
+import { UserIcon } from 'tdesign-icons-vue-next';
+
+const userIcon = () => h(UserIcon);
+</script>
+
+<style lang="less">
+.avatar-demo {
+  margin-left: 16px;
+  margin-bottom: 16px;
+  .t-avatar {
+    margin-right: 20px;
+  }
+  .custom {
+    .t-avatar__inner {
+      background-color: #0052d9;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/avatar/demos/size.vue b/src/avatar/demos/size.vue
index 35b31902..cd348f95 100644
--- a/src/avatar/demos/size.vue
+++ b/src/avatar/demos/size.vue
@@ -1,29 +1,83 @@
 <template>
   <div class="tdesign-demo-avatar">
-    <div class="tdesign-demo-block">
-      <t-avatar size="small">U</t-avatar>
-      <t-avatar size="medium">U</t-avatar>
-      <t-avatar size="large">U</t-avatar>
-      <t-avatar size="88px">U</t-avatar>
+    <div class="avatar-demo">
+      <t-avatar shape="circle" size="large" :icon="userIcon"></t-avatar>
+      <t-avatar shape="circle" size="medium" :icon="userIcon"></t-avatar>
+      <t-avatar shape="circle" size="small" :icon="userIcon"></t-avatar>
     </div>
-    <div class="tdesign-demo-block">
-      <t-avatar shape="round" size="small">U</t-avatar>
-      <t-avatar shape="round" size="medium">U</t-avatar>
-      <t-avatar shape="round" size="large">U</t-avatar>
-      <t-avatar shape="round" size="88px">U</t-avatar>
+    <div class="avatar-demo">
+      <t-avatar
+        shape="circle"
+        size="large"
+        image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+        alt="示例图片"
+        :badge-props="{ count: 10 }"
+      ></t-avatar>
+      <t-avatar
+        shape="circle"
+        size="medium"
+        image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+        alt="示例图片"
+        :badge-props="{ count: 10 }"
+      ></t-avatar>
+      <t-avatar
+        shape="circle"
+        size="small"
+        image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+        alt="示例图片"
+        :badge-props="{ dot: true }"
+      ></t-avatar>
+    </div>
+    <div class="avatar-demo">
+      <t-avatar
+        shape="round"
+        size="large"
+        image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+        alt="示例图片"
+        :badge-props="{ count: 10 }"
+      ></t-avatar>
+      <t-avatar
+        shape="round"
+        size="medium"
+        image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+        alt="示例图片"
+        :badge-props="{ count: 10 }"
+      ></t-avatar>
+      <t-avatar
+        shape="round"
+        size="small"
+        image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+        alt="示例图片"
+        :badge-props="{ dot: true }"
+      ></t-avatar>
+    </div>
+    <div class="avatar-demo">
+      <t-avatar shape="circle" size="large" class="custom">A</t-avatar>
+      <t-avatar shape="circle" size="medium" class="custom">A</t-avatar>
+      <t-avatar shape="circle" size="small" class="custom">A</t-avatar>
     </div>
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { h } from 'vue';
+import { UserIcon } from 'tdesign-icons-vue-next';
 
-<style lang="less" scoped>
-.tdesign-demo-avatar {
-  .tdesign-demo-avatar-block:first-child {
-    margin-bottom: 40px;
-  }
+const userIcon = () => h(UserIcon);
+</script>
+
+<style lang="less">
+.avatar-demo {
+  margin-left: 16px;
+  margin-bottom: 16px;
   .t-avatar {
-    margin-right: 40px;
+    margin-right: 20px;
+  }
+  .custom {
+    .t-avatar__inner {
+      background-color: #0052d9;
+      color: #fff;
+    }
   }
 }
 </style>
diff --git a/src/avatar/demos/type.vue b/src/avatar/demos/type.vue
index 7e35e972..2a570124 100644
--- a/src/avatar/demos/type.vue
+++ b/src/avatar/demos/type.vue
@@ -1,29 +1,31 @@
 <template>
   <div class="tdesign-demo-block">
-    <t-avatar :image="image" :hide-on-load-failed="false"></t-avatar>
-    <t-avatar :icon="userIconFunc"></t-avatar>
-    <t-avatar>
-      <template #icon>
-        <user-icon />
-      </template>
-    </t-avatar>
-    <t-avatar>U</t-avatar>
+    <div class="avatar-demo">
+      <t-avatar :image="image" :hide-on-load-failed="false"></t-avatar>
+      <t-avatar :icon="userIconFunc"></t-avatar>
+      <t-avatar>
+        <template #icon>
+          <user-icon />
+        </template>
+      </t-avatar>
+      <t-avatar>U</t-avatar>
+    </div>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
 import { UserIcon } from 'tdesign-icons-vue-next';
 
-export default defineComponent({
-  components: { UserIcon },
-  setup() {
-    const image = 'https://tdesign.gtimg.com/site/avatar.jpg';
-    const userIconFunc = () => UserIcon;
-    return {
-      image,
-      userIconFunc,
-    };
-  },
-});
+const image = 'https://tdesign.gtimg.com/site/avatar.jpg';
+const userIconFunc = () => UserIcon;
 </script>
+
+<style lang="less">
+.avatar-demo {
+  margin-left: 16px;
+  margin-bottom: 16px;
+  .t-avatar {
+    margin-right: 20px;
+  }
+}
+</style>
diff --git a/src/avatar/props.ts b/src/avatar/props.ts
index f3f0d5b6..9d94ef77 100644
--- a/src/avatar/props.ts
+++ b/src/avatar/props.ts
@@ -9,8 +9,8 @@ import { PropType } from 'vue';
 
 export default {
   /** 透传至 Image 组件 */
-  ImageProps: {
-    type: Object as PropType<TdAvatarProps['ImageProps']>,
+  imageProps: {
+    type: Object as PropType<TdAvatarProps['imageProps']>,
   },
   /** 头像替换文本，仅当图片加载失败时有效 */
   alt: {
diff --git a/src/avatar/type.ts b/src/avatar/type.ts
index 6410092d..d39ba1d4 100644
--- a/src/avatar/type.ts
+++ b/src/avatar/type.ts
@@ -11,7 +11,7 @@ export interface TdAvatarProps {
   /**
    * 透传至 Image 组件
    */
-  ImageProps?: object;
+  imageProps?: object;
   /**
    * 头像替换文本，仅当图片加载失败时有效
    * @default ''
diff --git a/src/cell/cell.vue b/src/cell/cell.vue
index e180d754..ba41bf69 100644
--- a/src/cell/cell.vue
+++ b/src/cell/cell.vue
@@ -43,12 +43,15 @@ export default defineComponent({
     const noteContent = computed(() => renderContent(internalInstance, 'default', 'note'));
     const titleContent = computed(() => renderTNode(internalInstance, 'title'));
     const descriptionContent = computed(() => renderTNode(internalInstance, 'description'));
+
+    const chevronRightIcon = h(ChevronRightIcon);
     const rightIconContent = computed(() => {
       if (props.arrow) {
-        return h(ChevronRightIcon);
+        return chevronRightIcon;
       }
       return renderTNode(internalInstance, 'rightIcon');
     });
+
     const imageContent = computed(() => renderTNode(internalInstance, 'image'));
     const leftIconContent = computed(() => renderTNode(internalInstance, 'leftIcon'));
 
diff --git a/src/date-time-picker/date-time-picker.vue b/src/date-time-picker/date-time-picker.vue
index 28b47b31..70563f35 100644
--- a/src/date-time-picker/date-time-picker.vue
+++ b/src/date-time-picker/date-time-picker.vue
@@ -4,6 +4,8 @@
       ref="pickeInstance"
       :value="currentPicker"
       :title="title"
+      :confirm-btn="confirmButtonText"
+      :cancel-btn="cancelButtonText"
       :columns="(selected) => generateDatePickerColumns(selected, start, end, renderLabel)"
       @change="onChange"
       @confirm="onConfirm"
diff --git a/src/date-time-picker/demos/base.vue b/src/date-time-picker/demos/base.vue
index d04ed112..62fd526c 100644
--- a/src/date-time-picker/demos/base.vue
+++ b/src/date-time-picker/demos/base.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-cell title="选择日期(年月日)" :note="pickerValue || '年 月 日'" @click="visible = true" />
+  <t-cell title="选择日期(年月日)" :note="pickerValueText || '年 月 日'" @click="visible = true" />
   <t-popup v-model="visible" placement="bottom">
     <t-date-time-picker
       :value="pickerValue"
@@ -15,11 +15,10 @@
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { cell } from 'tdesign-mobile-vue';
 
 const visible = ref(false);
-const pickerValue = ref('');
-
+const pickerValue = ref('2021-12-23');
+const pickerValueText = ref('');
 const onChange = (value: string) => {
   console.log('change: ', value);
 };
@@ -36,6 +35,7 @@ const onCancel = () => {
 const onConfirm = (value: string) => {
   console.log('confirm: ', value);
   pickerValue.value = value;
+  pickerValueText.value = value;
   visible.value = false;
 };
 </script>
diff --git a/src/date-time-picker/demos/custom-range.vue b/src/date-time-picker/demos/custom-range.vue
index 712eafd0..74a2f4a1 100644
--- a/src/date-time-picker/demos/custom-range.vue
+++ b/src/date-time-picker/demos/custom-range.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-cell title="选择日期" :note="pickerValue || '年 月 日'" @click="visible = true" />
+  <t-cell title="选择日期" :note="pickerValueText || '年 月 日'" @click="visible = true" />
   <t-popup v-model="visible" placement="bottom">
     <t-date-time-picker
       :value="pickerValue"
@@ -17,11 +17,10 @@
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { cell } from 'tdesign-mobile-vue';
 
 const visible = ref(false);
-const pickerValue = ref('');
-
+const pickerValue = ref('2021-12-23');
+const pickerValueText = ref('');
 const onChange = (value: string) => {
   console.log('change: ', value);
 };
@@ -38,6 +37,7 @@ const onCancel = () => {
 const onConfirm = (value: string) => {
   console.log('confirm: ', value);
   pickerValue.value = value;
+  pickerValueText.value = value;
   visible.value = false;
 };
 </script>
diff --git a/src/date-time-picker/demos/full.vue b/src/date-time-picker/demos/full.vue
index 4ba638c5..9391f113 100644
--- a/src/date-time-picker/demos/full.vue
+++ b/src/date-time-picker/demos/full.vue
@@ -14,7 +14,6 @@
 </template>
 <script lang="ts" setup>
 import { reactive } from 'vue';
-import { cell } from 'tdesign-mobile-vue';
 import { DateValue } from '../type';
 
 const show = reactive({
diff --git a/src/date-time-picker/demos/mobile.vue b/src/date-time-picker/demos/mobile.vue
index 532c9fb0..c2187e53 100644
--- a/src/date-time-picker/demos/mobile.vue
+++ b/src/date-time-picker/demos/mobile.vue
@@ -13,68 +13,8 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, reactive, ref } from 'vue';
-import dayjs from 'dayjs';
-import { DateValue } from '../type';
 import baseVue from './base.vue';
 import yearMonthVue from './year-month.vue';
 import timeVue from './time.vue';
 import customRangeVue from './custom-range.vue';
-
-const modeArray = ['date', 'second'];
-
-const mode = ref(modeArray);
-const show = reactive({
-  ymdhms: false,
-  ymd: false,
-  ym: false,
-  hm: false,
-
-  ymdhms2: false,
-  ymdhms3: false,
-});
-const text = reactive({
-  ymdhms: '2020-08-10 12:50:00',
-  ymd: '2020-08-10',
-  ym: '2020-08',
-  hm: '2020-08-10 12:01',
-
-  ymdhms2: '2020-08-10 12:50:00',
-  ymdhms3: '2020-08-10 12:50:00',
-});
-
-const showHm = computed(() => {
-  return dayjs(text.hm).format('HH:mm');
-});
-
-const onChange = (value: DateValue) => {
-  console.log('date-time-picker:change', value);
-};
-
-const onPick = (value: DateValue) => {
-  console.log('date-time-picker:pick', value);
-};
-
-const onCancel = () => {
-  console.log('date-time-picker:cancel');
-  Object.keys(show).forEach((item) => (show[item] = false));
-};
-
-const onConfirm = (value: DateValue) => {
-  console.log('date-time-picker:confirm', value);
-  Object.keys(show).forEach((item) => (show[item] = false));
-};
-
-const renderLabel = (type: string, value: number) => {
-  if (type === 'year') {
-    return `${value}年`;
-  }
-  if (type === 'month') {
-    return `${value}月`;
-  }
-  if (type === 'date') {
-    return `${value}日`;
-  }
-  return value;
-};
 </script>
diff --git a/src/date-time-picker/demos/time.vue b/src/date-time-picker/demos/time.vue
index 45916dea..a6e4709a 100644
--- a/src/date-time-picker/demos/time.vue
+++ b/src/date-time-picker/demos/time.vue
@@ -15,7 +15,6 @@
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { cell } from 'tdesign-mobile-vue';
 
 const visible = ref(false);
 const pickerValue = ref('');
diff --git a/src/date-time-picker/demos/year-month.vue b/src/date-time-picker/demos/year-month.vue
index f7e0d228..17f1f5d2 100644
--- a/src/date-time-picker/demos/year-month.vue
+++ b/src/date-time-picker/demos/year-month.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-cell title="选择日期(年月)" :note="value || '年 月'" @click="visible = true" />
+  <t-cell title="选择日期(年月)" :note="valueText || '年 月'" @click="visible = true" />
   <t-popup v-model="visible" placement="bottom">
     <t-date-time-picker
       v-model="value"
@@ -15,17 +15,15 @@
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { cell } from 'tdesign-mobile-vue';
-import { DateValue } from '../type';
 
 const visible = ref(false);
-const value = ref('');
-
-const onChange = (value: DateValue) => {
+const value = ref('2021-09');
+const valueText = ref('');
+const onChange = (value: string) => {
   console.log('change: ', value);
 };
 
-const onPick = (value: DateValue) => {
+const onPick = (value: string) => {
   console.log('pick: ', value);
 };
 
@@ -34,8 +32,9 @@ const onCancel = () => {
   visible.value = false;
 };
 
-const onConfirm = (value: DateValue) => {
+const onConfirm = (value: string) => {
   console.log('confirm: ', value);
+  valueText.value = value;
   visible.value = false;
 };
 </script>
diff --git a/src/image/image.vue b/src/image/image.vue
index 9e80d238..c2aac43e 100644
--- a/src/image/image.vue
+++ b/src/image/image.vue
@@ -35,18 +35,21 @@ export default defineComponent({
 
     // 默认loading和error状态展示，slot支持Node和Function
     const internalInstance = getCurrentInstance();
+
+    const closeIcon = h(CloseIcon);
+    const ellipsisIcon = h(EllipsisIcon);
     const statusContent = computed(() => {
       if (context.slots?.loading && loadingValue.value) {
         return renderTNode(internalInstance, 'loading');
       }
       if (!context.slots?.loading && loadingValue.value) {
-        return h(EllipsisIcon);
+        return ellipsisIcon;
       }
       if (context.slots?.error && errorValue.value) {
         return renderTNode(internalInstance, 'error');
       }
       if (!context.slots?.error && errorValue.value) {
-        return h(CloseIcon);
+        return closeIcon;
       }
       return '';
     });
diff --git a/src/shared/index.ts b/src/shared/index.ts
index bd664885..013b3873 100644
--- a/src/shared/index.ts
+++ b/src/shared/index.ts
@@ -15,3 +15,4 @@ export * from './useVModel';
 export * from './useTouch';
 export * from './useScrollParent';
 export * from './useExpose';
+export * from './useTest';
diff --git a/src/shared/util.ts b/src/shared/util.ts
index f827011b..1a1d8789 100644
--- a/src/shared/util.ts
+++ b/src/shared/util.ts
@@ -1,24 +1,22 @@
-export function isArray(x: unknown): boolean {
-  return Array.isArray(x);
-}
+export const { isArray } = Array;
 
-export function isNumber(x: unknown): boolean {
+export function isNumber(x: unknown): x is number {
   return Object.prototype.toString.call(x) === '[object Number]';
 }
 
-export function isString(x: unknown): boolean {
+export function isString(x: unknown): x is string {
   return typeof x === 'string';
 }
 
-export function isBoolean(x: unknown): boolean {
+export function isBoolean(x: unknown): x is boolean {
   return typeof x === 'boolean';
 }
 
-export function isNull(s: unknown): boolean {
+export function isNull(s: unknown): s is null {
   return s === null;
 }
 
-export function isObject(x: unknown): boolean {
+export function isObject(x: unknown): x is Record<any, any> {
   return x === null ? false : Object.prototype.toString.call(x) === '[object Object]';
 }
 
@@ -26,7 +24,7 @@ export function isDate(x: unknown): x is Date {
   return Object.prototype.toString.call(x) === '[object Date]';
 }
 
-export function isFunction(x: unknown): boolean {
+export function isFunction(x: unknown): x is Function {
   return Object.prototype.toString.call(x) === '[object Function]';
 }
 
@@ -77,3 +75,5 @@ export function getCharacterLength(str: string, maxCharacter?: number) {
   }
   return len;
 }
+
+export const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); // eslint-disable-line


Test patch:
diff --git a/src/avatar/__test__/__snapshots__/demo.test.jsx.snap b/src/avatar/__test__/__snapshots__/demo.test.jsx.snap
index cb1c3d34..2021d7cf 100644
--- a/src/avatar/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/avatar/__test__/__snapshots__/demo.test.jsx.snap
@@ -3,15 +3,12 @@
 exports[`Avatar > Avatar adjustVue demo works fine 1`] = `
 <div
   class="tdesign-demo-block"
-  data-v-df42478a=""
 >
   <div
-    class="tdesign-demo-avatar"
-    data-v-df42478a=""
+    class="avatar-demo"
   >
     <div
       class="t-avatar t-avatar--circle"
-      data-v-df42478a=""
     >
       <div
         class="t-avatar__inner"
@@ -26,7 +23,6 @@ exports[`Avatar > Avatar adjustVue demo works fine 1`] = `
     </div>
     <div
       class="t-avatar t-avatar--circle"
-      data-v-df42478a=""
     >
       <div
         class="t-avatar__inner"
@@ -41,7 +37,6 @@ exports[`Avatar > Avatar adjustVue demo works fine 1`] = `
     </div>
     <div
       class="t-avatar t-avatar--circle"
-      data-v-df42478a=""
     >
       <div
         class="t-avatar__inner"
@@ -88,92 +83,142 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
     </p>
     
     <div
-      class="avatar-demo"
+      class="tdesign-demo-block"
     >
       <div
-        class="t-avatar t-avatar--circle"
+        class="avatar-demo"
       >
         <div
-          class="t-avatar__inner"
+          class="t-avatar t-avatar--circle"
         >
           <div
-            class="t-avatar__icon"
+            class="t-avatar__inner"
           >
-            <svg
-              class="t-icon t-icon-user"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
+            <div
+              class="t-avatar__icon"
             >
-              <path
-                d="M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
+              <svg
+                class="t-icon t-icon-user"
+                fill="none"
+                height="1em"
+                viewBox="0 0 16 16"
+                width="1em"
+              >
+                <path
+                  d="M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+              </svg>
+            </div>
           </div>
+          <!--v-if-->
         </div>
-        <!--v-if-->
-      </div>
-      <div
-        class="t-avatar t-avatar--circle"
-      >
         <div
-          class="t-avatar__inner"
+          class="t-avatar t-avatar--circle"
         >
-          <img
-            alt="示例图片"
-            src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-          />
+          <div
+            class="t-avatar__inner"
+          >
+            <div
+              class="t-image t-image--round"
+            >
+              <div
+                class="t-image__status"
+              >
+                <svg
+                  class="t-icon t-icon-ellipsis"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </div>
+              <img
+                alt="示例图片"
+                class="t-image__img"
+                src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+                style="object-fit: fill; object-position: center;"
+              />
+            </div>
+          </div>
+          <!--v-if-->
         </div>
-        <!--v-if-->
-      </div>
-      <div
-        class="t-avatar t-avatar--circle"
-      >
         <div
-          class="t-avatar__inner"
+          class="t-avatar t-avatar--circle"
         >
           <div
-            class="t-avatar__icon"
+            class="t-avatar__inner"
           >
-            
-            <img
-              alt="示例图片"
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-            />
-            
+            <div
+              class="t-avatar__icon"
+            >
+              
+              <img
+                alt="示例图片"
+                src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+              />
+              
+            </div>
           </div>
+          <!--v-if-->
         </div>
-        <!--v-if-->
-      </div>
-      <div
-        class="t-avatar t-avatar--round"
-      >
         <div
-          class="t-avatar__inner"
+          class="t-avatar t-avatar--round"
         >
-          <img
-            alt=""
-            src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-          />
+          <div
+            class="t-avatar__inner"
+          >
+            <div
+              class="t-image t-image--round"
+            >
+              <div
+                class="t-image__status"
+              >
+                <svg
+                  class="t-icon t-icon-ellipsis"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </div>
+              <img
+                alt=""
+                class="t-image__img"
+                src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+                style="object-fit: fill; object-position: center;"
+              />
+            </div>
+          </div>
+          <!--v-if-->
         </div>
-        <!--v-if-->
-      </div>
-      <div
-        class="t-avatar t-avatar--circle custom"
-      >
         <div
-          class="t-avatar__inner"
+          class="t-avatar t-avatar--circle custom"
         >
-          <span>
-            
-            A
-            
-          </span>
+          <div
+            class="t-avatar__inner"
+          >
+            <span>
+              
+              A
+              
+            </span>
+          </div>
+          <!--v-if-->
         </div>
-        <!--v-if-->
       </div>
     </div>
     
@@ -193,241 +238,1189 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
     </p>
     
     <div
-      class="avatar-group-demo"
+      class="tdesign-demo-block"
     >
       <div
-        class="t-avatar-group t-avatar--offset-right"
+        class="avatar-group-demo"
       >
-        
         <div
-          class="t-avatar t-size-s t-avatar--circle"
+          class="t-avatar-group t-avatar--offset-right"
         >
+          
           <div
-            class="t-avatar__inner"
+            class="t-avatar t-size-s t-avatar--circle"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-            />
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
           </div>
-          <!--v-if-->
-        </div>
-        <div
-          class="t-avatar t-size-s t-avatar--circle"
-        >
           <div
-            class="t-avatar__inner"
+            class="t-avatar t-size-s t-avatar--circle"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_2.png"
-            />
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_2.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
           </div>
-          <!--v-if-->
-        </div>
-        <div
-          class="t-avatar t-size-s t-avatar--circle"
-        >
           <div
-            class="t-avatar__inner"
+            class="t-avatar t-size-s t-avatar--circle"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_3.png"
-            />
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_3.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
           </div>
-          <!--v-if-->
-        </div>
-        <div
-          class="t-avatar t-size-s t-avatar--circle"
-        >
           <div
-            class="t-avatar__inner"
+            class="t-avatar t-size-s t-avatar--circle"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_4.png"
-            />
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_4.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
           </div>
-          <!--v-if-->
-        </div>
-        <div
-          class="t-avatar t-size-s t-avatar--circle"
-        >
           <div
-            class="t-avatar__inner"
+            class="t-avatar t-size-s t-avatar--circle"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_5.png"
-            />
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_5.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
           </div>
+          
           <!--v-if-->
         </div>
-        
-        <!--v-if-->
       </div>
-    </div>
-    <div
-      class="avatar-group-demo"
-    >
       <div
-        class="t-avatar-group t-avatar--offset-right"
+        class="avatar-group-demo"
       >
-        
         <div
-          class="t-avatar t-avatar--circle"
-          style="height: 40px; width: 40px;"
+          class="t-avatar-group t-avatar--offset-right"
         >
+          
           <div
-            class="t-avatar__inner"
+            class="t-avatar t-avatar--circle"
+            style="height: 40px; width: 40px;"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-              style="height: 40px; width: 40px;"
-            />
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+                style="height: 40px; width: 40px;"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
           </div>
-          <!--v-if-->
-        </div>
-        <div
-          class="t-avatar t-avatar--circle"
-          style="height: 40px; width: 40px;"
-        >
           <div
-            class="t-avatar__inner"
+            class="t-avatar t-avatar--circle"
+            style="height: 40px; width: 40px;"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_2.png"
-              style="height: 40px; width: 40px;"
-            />
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+                style="height: 40px; width: 40px;"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_2.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
           </div>
-          <!--v-if-->
-        </div>
-        <div
-          class="t-avatar t-avatar--circle"
-          style="height: 40px; width: 40px;"
-        >
           <div
-            class="t-avatar__inner"
+            class="t-avatar t-avatar--circle"
+            style="height: 40px; width: 40px;"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_3.png"
-              style="height: 40px; width: 40px;"
-            />
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+                style="height: 40px; width: 40px;"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_3.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
           </div>
-          <!--v-if-->
-        </div>
-        <div
-          class="t-avatar t-avatar--circle"
-          style="height: 40px; width: 40px;"
-        >
           <div
-            class="t-avatar__inner"
+            class="t-avatar t-avatar--circle"
+            style="height: 40px; width: 40px;"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_4.png"
-              style="height: 40px; width: 40px;"
-            />
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+                style="height: 40px; width: 40px;"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_4.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
           </div>
+          <div
+            class="t-avatar t-avatar--circle"
+            style="height: 40px; width: 40px;"
+          >
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+                style="height: 40px; width: 40px;"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_5.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
+          </div>
+          
           <!--v-if-->
         </div>
+      </div>
+      <div
+        class="avatar-group-demo"
+      >
         <div
-          class="t-avatar t-avatar--circle"
-          style="height: 40px; width: 40px;"
+          class="t-avatar-group t-avatar--offset-right"
         >
+          
           <div
-            class="t-avatar__inner"
+            class="t-avatar t-size-m t-avatar--circle"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_5.png"
-              style="height: 40px; width: 40px;"
-            />
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
+          </div>
+          <div
+            class="t-avatar t-size-m t-avatar--circle"
+          >
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_2.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
+          </div>
+          <div
+            class="t-avatar t-size-m t-avatar--circle"
+          >
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_3.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
+          </div>
+          <div
+            class="t-avatar t-size-m t-avatar--circle"
+          >
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_4.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
           </div>
+          <div
+            class="t-avatar t-size-m t-avatar--circle"
+          >
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_5.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
+          </div>
+          
           <!--v-if-->
         </div>
-        
-        <!--v-if-->
       </div>
     </div>
+    
+  </div>
+  <div
+    class="tdesign-mobile-demo-block"
+  >
+    <!--v-if-->
+    <p
+      class="tdesign-mobile-demo-block__summary"
+    >
+      带操作 从下往上
+    </p>
+    
     <div
-      class="avatar-group-demo"
+      class="tdesign-demo-block"
     >
       <div
-        class="t-avatar-group t-avatar--offset-right"
+        class="avatar-group-demo"
       >
-        
         <div
-          class="t-avatar t-size-m t-avatar--circle"
+          class="t-avatar-group t-avatar--offset-left"
         >
+          
           <div
-            class="t-avatar__inner"
+            class="t-avatar t-size-s t-avatar--circle"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-            />
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
           </div>
-          <!--v-if-->
-        </div>
-        <div
-          class="t-avatar t-size-m t-avatar--circle"
-        >
           <div
-            class="t-avatar__inner"
+            class="t-avatar t-size-s t-avatar--circle"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_2.png"
-            />
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_2.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
           </div>
-          <!--v-if-->
-        </div>
-        <div
-          class="t-avatar t-size-m t-avatar--circle"
-        >
           <div
-            class="t-avatar__inner"
+            class="t-avatar t-size-s t-avatar--circle"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_3.png"
-            />
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_3.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
+          </div>
+          <div
+            class="t-avatar t-size-s t-avatar--circle"
+          >
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_4.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
+          </div>
+          <div
+            class="t-avatar t-size-s t-avatar--circle"
+          >
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_5.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
           </div>
+          
           <!--v-if-->
         </div>
+      </div>
+      <div
+        class="avatar-group-demo"
+      >
         <div
-          class="t-avatar t-size-m t-avatar--circle"
+          class="t-avatar-group t-avatar--offset-left"
         >
+          
           <div
-            class="t-avatar__inner"
+            class="t-avatar t-avatar--circle"
+            style="height: 40px; width: 40px;"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_4.png"
-            />
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+                style="height: 40px; width: 40px;"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
+          </div>
+          <div
+            class="t-avatar t-avatar--circle"
+            style="height: 40px; width: 40px;"
+          >
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+                style="height: 40px; width: 40px;"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_2.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
+          </div>
+          <div
+            class="t-avatar t-avatar--circle"
+            style="height: 40px; width: 40px;"
+          >
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+                style="height: 40px; width: 40px;"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_3.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
+          </div>
+          <div
+            class="t-avatar t-avatar--circle"
+            style="height: 40px; width: 40px;"
+          >
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+                style="height: 40px; width: 40px;"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_4.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
+          </div>
+          <div
+            class="t-avatar t-avatar--circle"
+            style="height: 40px; width: 40px;"
+          >
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+                style="height: 40px; width: 40px;"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_5.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
           </div>
+          
           <!--v-if-->
         </div>
+      </div>
+      <div
+        class="avatar-group-demo"
+      >
         <div
-          class="t-avatar t-size-m t-avatar--circle"
+          class="t-avatar-group t-avatar--offset-left"
         >
+          
           <div
-            class="t-avatar__inner"
+            class="t-avatar t-size-m t-avatar--circle"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_5.png"
-            />
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
+          </div>
+          <div
+            class="t-avatar t-size-m t-avatar--circle"
+          >
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_2.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
+          </div>
+          <div
+            class="t-avatar t-size-m t-avatar--circle"
+          >
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_3.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
           </div>
+          <div
+            class="t-avatar t-size-m t-avatar--circle"
+          >
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_4.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
+          </div>
+          <div
+            class="t-avatar t-size-m t-avatar--circle"
+          >
+            <div
+              class="t-avatar__inner"
+            >
+              <div
+                class="t-image t-image--round"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_5.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
+            </div>
+            <!--v-if-->
+          </div>
+          
           <!--v-if-->
         </div>
-        
-        <!--v-if-->
       </div>
     </div>
     
@@ -435,43 +1428,72 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
   <div
     class="tdesign-mobile-demo-block"
   >
-    <!--v-if-->
+    <h2
+      class="tdesign-mobile-demo-block__title"
+    >
+      03 规格
+    </h2>
     <p
       class="tdesign-mobile-demo-block__summary"
     >
-      带操作 从下往上
+      头像大小尺寸
     </p>
     
     <div
-      class="avatar-group-demo"
+      class="tdesign-demo-avatar"
     >
       <div
-        class="t-avatar-group t-avatar--offset-left"
+        class="avatar-demo"
       >
-        
         <div
-          class="t-avatar t-size-s t-avatar--circle"
+          class="t-avatar t-size-l t-avatar--circle"
         >
           <div
             class="t-avatar__inner"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-            />
+            <div
+              class="t-avatar__icon"
+            >
+              <svg
+                class="t-icon t-icon-user"
+                fill="none"
+                height="1em"
+                viewBox="0 0 16 16"
+                width="1em"
+              >
+                <path
+                  d="M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+              </svg>
+            </div>
           </div>
           <!--v-if-->
         </div>
         <div
-          class="t-avatar t-size-s t-avatar--circle"
+          class="t-avatar t-size-m t-avatar--circle"
         >
           <div
             class="t-avatar__inner"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_2.png"
-            />
+            <div
+              class="t-avatar__icon"
+            >
+              <svg
+                class="t-icon t-icon-user"
+                fill="none"
+                height="1em"
+                viewBox="0 0 16 16"
+                width="1em"
+              >
+                <path
+                  d="M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+              </svg>
+            </div>
           </div>
           <!--v-if-->
         </div>
@@ -481,679 +1503,1045 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
           <div
             class="t-avatar__inner"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_3.png"
-            />
+            <div
+              class="t-avatar__icon"
+            >
+              <svg
+                class="t-icon t-icon-user"
+                fill="none"
+                height="1em"
+                viewBox="0 0 16 16"
+                width="1em"
+              >
+                <path
+                  d="M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+              </svg>
+            </div>
           </div>
           <!--v-if-->
         </div>
+      </div>
+      <div
+        class="avatar-demo"
+      >
         <div
-          class="t-avatar t-size-s t-avatar--circle"
+          class="t-avatar t-size-l t-avatar--circle"
         >
           <div
             class="t-avatar__inner"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_4.png"
-            />
+            <div
+              class="t-image t-image--round"
+            >
+              <div
+                class="t-image__status"
+              >
+                <svg
+                  class="t-icon t-icon-ellipsis"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </div>
+              <img
+                alt="示例图片"
+                class="t-image__img"
+                src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+                style="object-fit: fill; object-position: center;"
+              />
+            </div>
           </div>
-          <!--v-if-->
-        </div>
-        <div
-          class="t-avatar t-size-s t-avatar--circle"
-        >
           <div
-            class="t-avatar__inner"
+            class="t-avatar__badge"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_5.png"
-            />
+            <div
+              class="t-badge"
+            >
+              <div
+                class="t-badge__inner t-badge--medium t-badge--circle"
+              >
+                10
+              </div>
+              <!---->
+            </div>
           </div>
-          <!--v-if-->
         </div>
-        
-        <!--v-if-->
-      </div>
-    </div>
-    <div
-      class="avatar-group-demo"
-    >
-      <div
-        class="t-avatar-group t-avatar--offset-left"
-      >
-        
         <div
-          class="t-avatar t-avatar--circle"
-          style="height: 40px; width: 40px;"
+          class="t-avatar t-size-m t-avatar--circle"
         >
           <div
             class="t-avatar__inner"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-              style="height: 40px; width: 40px;"
-            />
+            <div
+              class="t-image t-image--round"
+            >
+              <div
+                class="t-image__status"
+              >
+                <svg
+                  class="t-icon t-icon-ellipsis"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </div>
+              <img
+                alt="示例图片"
+                class="t-image__img"
+                src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+                style="object-fit: fill; object-position: center;"
+              />
+            </div>
+          </div>
+          <div
+            class="t-avatar__badge"
+          >
+            <div
+              class="t-badge"
+            >
+              <div
+                class="t-badge__inner t-badge--medium t-badge--circle"
+              >
+                10
+              </div>
+              <!---->
+            </div>
           </div>
-          <!--v-if-->
         </div>
         <div
-          class="t-avatar t-avatar--circle"
-          style="height: 40px; width: 40px;"
+          class="t-avatar t-size-s t-avatar--circle"
         >
           <div
             class="t-avatar__inner"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_2.png"
-              style="height: 40px; width: 40px;"
-            />
+            <div
+              class="t-image t-image--round"
+            >
+              <div
+                class="t-image__status"
+              >
+                <svg
+                  class="t-icon t-icon-ellipsis"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </div>
+              <img
+                alt="示例图片"
+                class="t-image__img"
+                src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+                style="object-fit: fill; object-position: center;"
+              />
+            </div>
+          </div>
+          <div
+            class="t-avatar__badge"
+          >
+            <div
+              class="t-badge"
+            >
+              <div
+                class="t-badge__inner t-badge--medium t-badge--dot"
+              >
+                
+              </div>
+              <!---->
+            </div>
           </div>
-          <!--v-if-->
         </div>
+      </div>
+      <div
+        class="avatar-demo"
+      >
         <div
-          class="t-avatar t-avatar--circle"
-          style="height: 40px; width: 40px;"
+          class="t-avatar t-size-l t-avatar--round"
         >
           <div
             class="t-avatar__inner"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_3.png"
-              style="height: 40px; width: 40px;"
-            />
+            <div
+              class="t-image t-image--round"
+            >
+              <div
+                class="t-image__status"
+              >
+                <svg
+                  class="t-icon t-icon-ellipsis"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </div>
+              <img
+                alt="示例图片"
+                class="t-image__img"
+                src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+                style="object-fit: fill; object-position: center;"
+              />
+            </div>
+          </div>
+          <div
+            class="t-avatar__badge"
+          >
+            <div
+              class="t-badge"
+            >
+              <div
+                class="t-badge__inner t-badge--medium t-badge--circle"
+              >
+                10
+              </div>
+              <!---->
+            </div>
           </div>
-          <!--v-if-->
         </div>
         <div
-          class="t-avatar t-avatar--circle"
-          style="height: 40px; width: 40px;"
+          class="t-avatar t-size-m t-avatar--round"
         >
           <div
             class="t-avatar__inner"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_4.png"
-              style="height: 40px; width: 40px;"
-            />
+            <div
+              class="t-image t-image--round"
+            >
+              <div
+                class="t-image__status"
+              >
+                <svg
+                  class="t-icon t-icon-ellipsis"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </div>
+              <img
+                alt="示例图片"
+                class="t-image__img"
+                src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+                style="object-fit: fill; object-position: center;"
+              />
+            </div>
           </div>
-          <!--v-if-->
-        </div>
-        <div
-          class="t-avatar t-avatar--circle"
-          style="height: 40px; width: 40px;"
-        >
           <div
-            class="t-avatar__inner"
+            class="t-avatar__badge"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_5.png"
-              style="height: 40px; width: 40px;"
-            />
+            <div
+              class="t-badge"
+            >
+              <div
+                class="t-badge__inner t-badge--medium t-badge--circle"
+              >
+                10
+              </div>
+              <!---->
+            </div>
           </div>
-          <!--v-if-->
         </div>
-        
-        <!--v-if-->
-      </div>
-    </div>
-    <div
-      class="avatar-group-demo"
-    >
-      <div
-        class="t-avatar-group t-avatar--offset-left"
-      >
-        
         <div
-          class="t-avatar t-size-m t-avatar--circle"
+          class="t-avatar t-size-s t-avatar--round"
         >
           <div
             class="t-avatar__inner"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-            />
+            <div
+              class="t-image t-image--round"
+            >
+              <div
+                class="t-image__status"
+              >
+                <svg
+                  class="t-icon t-icon-ellipsis"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </div>
+              <img
+                alt="示例图片"
+                class="t-image__img"
+                src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+                style="object-fit: fill; object-position: center;"
+              />
+            </div>
           </div>
-          <!--v-if-->
-        </div>
-        <div
-          class="t-avatar t-size-m t-avatar--circle"
-        >
           <div
-            class="t-avatar__inner"
+            class="t-avatar__badge"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_2.png"
-            />
+            <div
+              class="t-badge"
+            >
+              <div
+                class="t-badge__inner t-badge--medium t-badge--dot"
+              >
+                
+              </div>
+              <!---->
+            </div>
           </div>
-          <!--v-if-->
         </div>
+      </div>
+      <div
+        class="avatar-demo"
+      >
         <div
-          class="t-avatar t-size-m t-avatar--circle"
+          class="t-avatar t-size-l t-avatar--circle custom"
         >
           <div
             class="t-avatar__inner"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_3.png"
-            />
+            <span>
+              
+              A
+              
+            </span>
           </div>
           <!--v-if-->
         </div>
         <div
-          class="t-avatar t-size-m t-avatar--circle"
+          class="t-avatar t-size-m t-avatar--circle custom"
         >
           <div
             class="t-avatar__inner"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_4.png"
-            />
+            <span>
+              
+              A
+              
+            </span>
           </div>
           <!--v-if-->
         </div>
         <div
-          class="t-avatar t-size-m t-avatar--circle"
+          class="t-avatar t-size-s t-avatar--circle custom"
         >
           <div
             class="t-avatar__inner"
           >
-            <img
-              alt=""
-              src="https://tdesign.gtimg.com/mobile/demos/avatar_5.png"
-            />
+            <span>
+              
+              A
+              
+            </span>
           </div>
           <!--v-if-->
         </div>
-        
-        <!--v-if-->
       </div>
     </div>
     
   </div>
+</div>
+`;
+
+exports[`Avatar > Avatar shapeVue demo works fine 1`] = `
+<div
+  class="tdesign-demo-block"
+>
   <div
-    class="tdesign-mobile-demo-block"
+    class="avatar-demo"
   >
-    <h2
-      class="tdesign-mobile-demo-block__title"
-    >
-      03 规格
-    </h2>
-    <p
-      class="tdesign-mobile-demo-block__summary"
+    <div
+      class="t-avatar t-avatar--circle"
     >
-      头像大小尺寸
-    </p>
-    
+      <div
+        class="t-avatar__inner"
+      >
+        <div
+          class="t-avatar__icon"
+        >
+          <svg
+            class="t-icon t-icon-user"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+      </div>
+      <!--v-if-->
+    </div>
     <div
-      class="avatar-demo"
+      class="t-avatar t-avatar--circle"
     >
       <div
-        class="t-avatar t-size-l t-avatar--circle"
+        class="t-avatar__inner"
       >
         <div
-          class="t-avatar__inner"
+          class="t-image t-image--round"
         >
           <div
-            class="t-avatar__icon"
+            class="t-image__status"
           >
             <svg
-              class="t-icon t-icon-user"
+              class="t-icon t-icon-ellipsis"
               fill="none"
               height="1em"
               viewBox="0 0 16 16"
               width="1em"
             >
               <path
-                d="M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z"
+                d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
                 fill="currentColor"
                 fill-opacity="0.9"
               />
             </svg>
           </div>
+          <img
+            alt="示例图片"
+            class="t-image__img"
+            src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+            style="object-fit: fill; object-position: center;"
+          />
+        </div>
+      </div>
+      <!--v-if-->
+    </div>
+    <div
+      class="t-avatar t-avatar--circle"
+    >
+      <div
+        class="t-avatar__inner"
+      >
+        <div
+          class="t-avatar__icon"
+        >
+          
+          <img
+            alt="示例图片"
+            src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+          />
+          
         </div>
-        <!--v-if-->
       </div>
+      <!--v-if-->
+    </div>
+    <div
+      class="t-avatar t-avatar--round"
+    >
       <div
-        class="t-avatar t-size-m t-avatar--circle"
+        class="t-avatar__inner"
       >
         <div
-          class="t-avatar__inner"
+          class="t-image t-image--round"
         >
           <div
-            class="t-avatar__icon"
+            class="t-image__status"
           >
             <svg
-              class="t-icon t-icon-user"
+              class="t-icon t-icon-ellipsis"
               fill="none"
               height="1em"
               viewBox="0 0 16 16"
               width="1em"
             >
               <path
-                d="M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z"
+                d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
                 fill="currentColor"
                 fill-opacity="0.9"
               />
             </svg>
           </div>
+          <img
+            alt=""
+            class="t-image__img"
+            src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+            style="object-fit: fill; object-position: center;"
+          />
         </div>
-        <!--v-if-->
       </div>
+      <!--v-if-->
+    </div>
+    <div
+      class="t-avatar t-avatar--circle custom"
+    >
+      <div
+        class="t-avatar__inner"
+      >
+        <span>
+          
+          A
+          
+        </span>
+      </div>
+      <!--v-if-->
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
+<div
+  class="tdesign-demo-avatar"
+>
+  <div
+    class="avatar-demo"
+  >
+    <div
+      class="t-avatar t-size-l t-avatar--circle"
+    >
       <div
-        class="t-avatar t-size-s t-avatar--circle"
+        class="t-avatar__inner"
       >
         <div
-          class="t-avatar__inner"
+          class="t-avatar__icon"
         >
-          <div
-            class="t-avatar__icon"
+          <svg
+            class="t-icon t-icon-user"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
           >
-            <svg
-              class="t-icon t-icon-user"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-          </div>
+            <path
+              d="M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
         </div>
-        <!--v-if-->
       </div>
+      <!--v-if-->
     </div>
     <div
-      class="avatar-demo"
+      class="t-avatar t-size-m t-avatar--circle"
     >
       <div
-        class="t-avatar t-size-l t-avatar--circle"
+        class="t-avatar__inner"
       >
         <div
-          class="t-avatar__inner"
+          class="t-avatar__icon"
         >
-          <img
-            alt="示例图片"
-            src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-          />
+          <svg
+            class="t-icon t-icon-user"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
         </div>
+      </div>
+      <!--v-if-->
+    </div>
+    <div
+      class="t-avatar t-size-s t-avatar--circle"
+    >
+      <div
+        class="t-avatar__inner"
+      >
         <div
-          class="t-avatar__badge"
+          class="t-avatar__icon"
         >
-          <div
-            class="t-badge"
+          <svg
+            class="t-icon t-icon-user"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
           >
-            <div
-              class="t-badge__inner t-badge--medium t-badge--circle"
-            >
-              10
-            </div>
-            <!---->
-          </div>
+            <path
+              d="M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
         </div>
       </div>
+      <!--v-if-->
+    </div>
+  </div>
+  <div
+    class="avatar-demo"
+  >
+    <div
+      class="t-avatar t-size-l t-avatar--circle"
+    >
       <div
-        class="t-avatar t-size-m t-avatar--circle"
+        class="t-avatar__inner"
       >
         <div
-          class="t-avatar__inner"
+          class="t-image t-image--round"
         >
+          <div
+            class="t-image__status"
+          >
+            <svg
+              class="t-icon t-icon-ellipsis"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </div>
           <img
             alt="示例图片"
+            class="t-image__img"
             src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+            style="object-fit: fill; object-position: center;"
           />
         </div>
+      </div>
+      <div
+        class="t-avatar__badge"
+      >
         <div
-          class="t-avatar__badge"
+          class="t-badge"
         >
           <div
-            class="t-badge"
+            class="t-badge__inner t-badge--medium t-badge--circle"
           >
-            <div
-              class="t-badge__inner t-badge--medium t-badge--circle"
-            >
-              10
-            </div>
-            <!---->
+            10
           </div>
+          <!---->
         </div>
       </div>
+    </div>
+    <div
+      class="t-avatar t-size-m t-avatar--circle"
+    >
       <div
-        class="t-avatar t-size-s t-avatar--circle"
+        class="t-avatar__inner"
       >
         <div
-          class="t-avatar__inner"
+          class="t-image t-image--round"
         >
+          <div
+            class="t-image__status"
+          >
+            <svg
+              class="t-icon t-icon-ellipsis"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </div>
           <img
             alt="示例图片"
+            class="t-image__img"
             src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+            style="object-fit: fill; object-position: center;"
           />
         </div>
+      </div>
+      <div
+        class="t-avatar__badge"
+      >
         <div
-          class="t-avatar__badge"
+          class="t-badge"
         >
           <div
-            class="t-badge"
+            class="t-badge__inner t-badge--medium t-badge--circle"
           >
-            <div
-              class="t-badge__inner t-badge--medium t-badge--dot"
-            >
-              
-            </div>
-            <!---->
+            10
           </div>
+          <!---->
         </div>
       </div>
     </div>
     <div
-      class="avatar-demo"
+      class="t-avatar t-size-s t-avatar--circle"
     >
       <div
-        class="t-avatar t-size-l t-avatar--round"
+        class="t-avatar__inner"
       >
         <div
-          class="t-avatar__inner"
+          class="t-image t-image--round"
         >
+          <div
+            class="t-image__status"
+          >
+            <svg
+              class="t-icon t-icon-ellipsis"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </div>
           <img
             alt="示例图片"
+            class="t-image__img"
             src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+            style="object-fit: fill; object-position: center;"
           />
         </div>
+      </div>
+      <div
+        class="t-avatar__badge"
+      >
         <div
-          class="t-avatar__badge"
+          class="t-badge"
         >
           <div
-            class="t-badge"
+            class="t-badge__inner t-badge--medium t-badge--dot"
           >
-            <div
-              class="t-badge__inner t-badge--medium t-badge--circle"
-            >
-              10
-            </div>
-            <!---->
+            
           </div>
+          <!---->
         </div>
       </div>
+    </div>
+  </div>
+  <div
+    class="avatar-demo"
+  >
+    <div
+      class="t-avatar t-size-l t-avatar--round"
+    >
       <div
-        class="t-avatar t-size-m t-avatar--round"
+        class="t-avatar__inner"
       >
         <div
-          class="t-avatar__inner"
+          class="t-image t-image--round"
         >
+          <div
+            class="t-image__status"
+          >
+            <svg
+              class="t-icon t-icon-ellipsis"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </div>
           <img
             alt="示例图片"
+            class="t-image__img"
             src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+            style="object-fit: fill; object-position: center;"
           />
         </div>
+      </div>
+      <div
+        class="t-avatar__badge"
+      >
         <div
-          class="t-avatar__badge"
+          class="t-badge"
         >
           <div
-            class="t-badge"
+            class="t-badge__inner t-badge--medium t-badge--circle"
           >
-            <div
-              class="t-badge__inner t-badge--medium t-badge--circle"
-            >
-              10
-            </div>
-            <!---->
+            10
           </div>
+          <!---->
         </div>
       </div>
+    </div>
+    <div
+      class="t-avatar t-size-m t-avatar--round"
+    >
       <div
-        class="t-avatar t-size-s t-avatar--round"
+        class="t-avatar__inner"
       >
         <div
-          class="t-avatar__inner"
+          class="t-image t-image--round"
         >
+          <div
+            class="t-image__status"
+          >
+            <svg
+              class="t-icon t-icon-ellipsis"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </div>
           <img
             alt="示例图片"
+            class="t-image__img"
             src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+            style="object-fit: fill; object-position: center;"
           />
         </div>
+      </div>
+      <div
+        class="t-avatar__badge"
+      >
         <div
-          class="t-avatar__badge"
+          class="t-badge"
         >
           <div
-            class="t-badge"
+            class="t-badge__inner t-badge--medium t-badge--circle"
           >
-            <div
-              class="t-badge__inner t-badge--medium t-badge--dot"
-            >
-              
-            </div>
-            <!---->
+            10
           </div>
+          <!---->
         </div>
       </div>
     </div>
     <div
-      class="avatar-demo"
+      class="t-avatar t-size-s t-avatar--round"
     >
       <div
-        class="t-avatar t-size-l t-avatar--circle custom"
-      >
-        <div
-          class="t-avatar__inner"
-        >
-          <span>
-            
-            A
-            
-          </span>
-        </div>
-        <!--v-if-->
-      </div>
-      <div
-        class="t-avatar t-size-m t-avatar--circle custom"
+        class="t-avatar__inner"
       >
         <div
-          class="t-avatar__inner"
+          class="t-image t-image--round"
         >
-          <span>
-            
-            A
-            
-          </span>
+          <div
+            class="t-image__status"
+          >
+            <svg
+              class="t-icon t-icon-ellipsis"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </div>
+          <img
+            alt="示例图片"
+            class="t-image__img"
+            src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+            style="object-fit: fill; object-position: center;"
+          />
         </div>
-        <!--v-if-->
       </div>
       <div
-        class="t-avatar t-size-s t-avatar--circle custom"
+        class="t-avatar__badge"
       >
         <div
-          class="t-avatar__inner"
+          class="t-badge"
         >
-          <span>
-            
-            A
+          <div
+            class="t-badge__inner t-badge--medium t-badge--dot"
+          >
             
-          </span>
+          </div>
+          <!---->
         </div>
-        <!--v-if-->
-      </div>
-    </div>
-    
-  </div>
-</div>
-`;
-
-exports[`Avatar > Avatar shapeVue demo works fine 1`] = `
-<div>
-  <div
-    class="tdesign-demo-block"
-  >
-    <div
-      class="t-avatar t-avatar--circle"
-    >
-      <div
-        class="t-avatar__inner"
-      >
-        <span>
-          
-          U
-          
-        </span>
-      </div>
-      <!--v-if-->
-    </div>
-    <div
-      class="t-avatar t-avatar--round"
-    >
-      <div
-        class="t-avatar__inner"
-      >
-        <span>
-          
-          U
-          
-        </span>
       </div>
-      <!--v-if-->
     </div>
   </div>
-</div>
-`;
-
-exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
-<div
-  class="tdesign-demo-avatar"
-  data-v-a1c55ea6=""
->
   <div
-    class="tdesign-demo-block"
-    data-v-a1c55ea6=""
+    class="avatar-demo"
   >
     <div
-      class="t-avatar t-size-s t-avatar--circle"
-      data-v-a1c55ea6=""
-    >
-      <div
-        class="t-avatar__inner"
-      >
-        <span>
-          
-          U
-          
-        </span>
-      </div>
-      <!--v-if-->
-    </div>
-    <div
-      class="t-avatar t-size-m t-avatar--circle"
-      data-v-a1c55ea6=""
+      class="t-avatar t-size-l t-avatar--circle custom"
     >
       <div
         class="t-avatar__inner"
       >
         <span>
           
-          U
+          A
           
         </span>
       </div>
       <!--v-if-->
     </div>
     <div
-      class="t-avatar t-size-l t-avatar--circle"
-      data-v-a1c55ea6=""
+      class="t-avatar t-size-m t-avatar--circle custom"
     >
       <div
         class="t-avatar__inner"
       >
         <span>
           
-          U
+          A
           
         </span>
       </div>
       <!--v-if-->
     </div>
     <div
-      class="t-avatar t-avatar--circle"
-      data-v-a1c55ea6=""
-      style="height: 88px; width: 88px;"
+      class="t-avatar t-size-s t-avatar--circle custom"
     >
       <div
         class="t-avatar__inner"
       >
         <span>
           
-          U
+          A
           
         </span>
       </div>
       <!--v-if-->
     </div>
   </div>
+</div>
+`;
+
+exports[`Avatar > Avatar typeVue demo works fine 1`] = `
+<div
+  class="tdesign-demo-block"
+>
   <div
-    class="tdesign-demo-block"
-    data-v-a1c55ea6=""
+    class="avatar-demo"
   >
     <div
-      class="t-avatar t-size-s t-avatar--round"
-      data-v-a1c55ea6=""
+      class="t-avatar t-avatar--circle"
     >
       <div
         class="t-avatar__inner"
       >
-        <span>
-          
-          U
-          
-        </span>
+        <div
+          class="t-image t-image--round"
+        >
+          <div
+            class="t-image__status"
+          >
+            <svg
+              class="t-icon t-icon-ellipsis"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </div>
+          <img
+            alt=""
+            class="t-image__img"
+            src="https://tdesign.gtimg.com/site/avatar.jpg"
+            style="object-fit: fill; object-position: center;"
+          />
+        </div>
       </div>
       <!--v-if-->
     </div>
     <div
-      class="t-avatar t-size-m t-avatar--round"
-      data-v-a1c55ea6=""
+      class="t-avatar t-avatar--circle"
     >
       <div
         class="t-avatar__inner"
       >
-        <span>
-          
-          U
-          
-        </span>
+        <div
+          class="t-avatar__icon"
+        />
       </div>
       <!--v-if-->
     </div>
     <div
-      class="t-avatar t-size-l t-avatar--round"
-      data-v-a1c55ea6=""
+      class="t-avatar t-avatar--circle"
     >
       <div
         class="t-avatar__inner"
       >
-        <span>
+        <div
+          class="t-avatar__icon"
+        >
           
-          U
+          <svg
+            class="t-icon t-icon-user"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
           
-        </span>
+        </div>
       </div>
       <!--v-if-->
     </div>
     <div
-      class="t-avatar t-avatar--round"
-      data-v-a1c55ea6=""
-      style="height: 88px; width: 88px;"
+      class="t-avatar t-avatar--circle"
     >
       <div
         class="t-avatar__inner"
@@ -1169,77 +2557,3 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
   </div>
 </div>
 `;
-
-exports[`Avatar > Avatar typeVue demo works fine 1`] = `
-<div
-  class="tdesign-demo-block"
->
-  <div
-    class="t-avatar t-avatar--circle"
-  >
-    <div
-      class="t-avatar__inner"
-    >
-      <img
-        alt=""
-        src="https://tdesign.gtimg.com/site/avatar.jpg"
-      />
-    </div>
-    <!--v-if-->
-  </div>
-  <div
-    class="t-avatar t-avatar--circle"
-  >
-    <div
-      class="t-avatar__inner"
-    >
-      <div
-        class="t-avatar__icon"
-      />
-    </div>
-    <!--v-if-->
-  </div>
-  <div
-    class="t-avatar t-avatar--circle"
-  >
-    <div
-      class="t-avatar__inner"
-    >
-      <div
-        class="t-avatar__icon"
-      >
-        
-        <svg
-          class="t-icon t-icon-user"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
-        >
-          <path
-            d="M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-        
-      </div>
-    </div>
-    <!--v-if-->
-  </div>
-  <div
-    class="t-avatar t-avatar--circle"
-  >
-    <div
-      class="t-avatar__inner"
-    >
-      <span>
-        
-        U
-        
-      </span>
-    </div>
-    <!--v-if-->
-  </div>
-</div>
-`;
diff --git a/src/avatar/__test__/index.test.jsx b/src/avatar/__test__/index.test.jsx
index 0418a633..a23b0c9b 100644
--- a/src/avatar/__test__/index.test.jsx
+++ b/src/avatar/__test__/index.test.jsx
@@ -1,11 +1,10 @@
 import { h, nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi } from 'vitest';
 import { UserIcon } from 'tdesign-icons-vue-next';
 import Avatar from '../avatar.vue';
 import AvatarGroup from '../avatar-group.vue';
 import Badge from '../../badge/badge.vue';
-import { vi } from 'vitest';
 
 const IMAGE = 'https://tdesign.gtimg.com/site/avatar.jpg';
 const IMAGE_FAIL = 'https://tdesign.gtimg.com/mobile/demos/avatar_11112233.png';
@@ -14,74 +13,81 @@ const userIconFunc = () => h(UserIcon);
 const shapeList = ['circle', 'round'];
 const sizeList = ['small', 'medium', 'large'];
 
-describe('Avatar.vue', async () => {
-  it('create', async () => {
-    const wrapper = mount(() => <Avatar image={IMAGE} />);
-    expect(wrapper.classes()).toContain('t-avatar');
-    const img = wrapper.find('.t-avatar__inner > img');
-    expect(img.exists()).toBeTruthy();
-    expect(img.attributes('src')).toBe(IMAGE);
-  });
+describe('avatar', () => {
+  describe('props', async () => {
+    it(': icon', async () => {
+      const wrapper = mount(() => <Avatar icon={userIconFunc} />);
+      expect(wrapper.findComponent(UserIcon).exists()).toBeTruthy();
+    });
 
-  it('icon render', async () => {
-    const wrapper = mount(() => <Avatar icon={userIconFunc} />);
-    expect(wrapper.findComponent(UserIcon).exists()).toBeTruthy();
-  });
+    it(': text', async () => {
+      const wrapper = mount(() => <Avatar>A</Avatar>);
+      const span = wrapper.find('.t-avatar__inner > span');
+      expect(span.exists()).toBeTruthy();
+      expect(span.text()).toBe('A');
+    });
 
-  it('text render', async () => {
-    const wrapper = mount(() => <Avatar>A</Avatar>);
-    const span = wrapper.find('.t-avatar__inner > span');
-    expect(span.exists()).toBeTruthy();
-    expect(span.text()).toBe('A');
-  });
+    it(': shape', async () => {
+      shapeList.forEach((s) => {
+        const wrapper = mount(() => <Avatar image={IMAGE} shape={s}></Avatar>);
+        expect(wrapper.classes()).toContain(`t-avatar--${s}`);
+      });
+    });
 
-  it('icon slot render', async () => {
-    const wrapper = mount(Avatar, {
-      slots: {
-        icon: userIconFunc,
-      },
+    it(': size', async () => {
+      sizeList.forEach((s) => {
+        const wrapper = mount(() => <Avatar image={IMAGE} size={s}></Avatar>);
+        expect(wrapper.classes()).toContain(`t-size-${s?.slice(0, 1)}`);
+      });
     });
-    const icon = wrapper.find('.t-avatar__inner > .t-avatar__icon');
-    expect(icon.exists()).toBeTruthy();
-    expect(wrapper.findComponent(UserIcon).exists()).toBeTruthy();
-  });
 
-  it('shape render', async () => {
-    shapeList.forEach((s) => {
-      const wrapper = mount(() => <Avatar image={IMAGE} shape={s}></Avatar>);
-      expect(wrapper.classes()).toContain(`t-avatar--${s}`);
+    it(': badge', async () => {
+      const wrapper = mount(() => <Avatar image={IMAGE} badgeProps={{ count: 10 }}></Avatar>);
+      expect(wrapper.findComponent(Badge).exists()).toBeTruthy();
+      const badge = wrapper.find('.t-badge > .t-badge__inner');
+      expect(badge.exists()).toBeTruthy();
+      expect(badge.text()).toBe('10');
     });
-  });
 
-  it('size render', async () => {
-    sizeList.forEach((s) => {
-      const wrapper = mount(() => <Avatar image={IMAGE} size={s}></Avatar>);
-      expect(wrapper.classes()).toContain(`t-size-${s?.slice(0, 1)}`);
+    it(': onLoad', async () => {
+      const onLoad = vi.fn();
+      const wrapper = mount(() => <Avatar image={IMAGE} onLoad={onLoad}/>);
+      expect(wrapper.classes()).toContain('t-avatar');
+      const img = wrapper.find('img');
+      expect(img.exists()).toBeTruthy();
+      expect(img.attributes('src')).toBe(IMAGE);
+      await img.trigger('load');
+      expect(onLoad).toBeCalledTimes(1);
     });
-  });
 
-  it('badge render', async () => {
-    const wrapper = mount(() => <Avatar image={IMAGE} badgeProps={{ count: 10 }}></Avatar>);
-    expect(wrapper.findComponent(Badge).exists()).toBeTruthy();
-    const badge = wrapper.find('.t-badge > .t-badge__inner');
-    expect(badge.exists()).toBeTruthy();
-    expect(badge.text()).toBe('10');
+    it(': error', async () => {
+      const onError = vi.fn();
+      const wrapper = mount(() => <Avatar image={IMAGE_FAIL} alt="加载错误" onError={onError} />);
+      const img = wrapper.find('img');
+      const status = wrapper.find(`.t-image__status`);
+      expect(status.exists()).toBeTruthy();
+      expect(img.exists()).toBeTruthy();
+      await img.trigger('error');
+      expect(onError).toBeCalledTimes(1);
+    });
   });
 
-  it('error render', async () => {
-    const onError = vi.fn();
-    const wrapper = mount(() => <Avatar image={IMAGE_FAIL} alt="加载错误" onError={onError} />);
-    const img = wrapper.find('.t-avatar__inner > img');
-    expect(img.attributes('alt')).toBe('加载错误');
-    expect(img.exists()).toBeUndefined;
-    await nextTick();
-    await img.trigger('error');
-    expect(onError).toBeCalled();
+  describe('slots', async () => {
+    it(': icon ', async () => {
+      const wrapper = mount(Avatar, {
+        slots: {
+          icon: userIconFunc,
+        },
+      });
+      const icon = wrapper.find('.t-avatar__inner > .t-avatar__icon');
+      expect(icon.exists()).toBeTruthy();
+      expect(wrapper.findComponent(UserIcon).exists()).toBeTruthy();
+    });
   });
 });
 
-describe('AvatarGroup.vue', async () => {
-  it('create', async () => {
+describe('avatar-group', async () => {
+  it(': create', async () => {
     const wrapper = mount(() => (
       <AvatarGroup>
         <Avatar image={IMAGE}></Avatar>
@@ -96,7 +102,7 @@ describe('AvatarGroup.vue', async () => {
     expect(avatarList[1].classes()).toContain('t-avatar');
   });
 
-  it('cascading render', async () => {
+  it(': cascading', async () => {
     const wrapper = mount(() => (
       <AvatarGroup cascading="left-up">
         <Avatar image={IMAGE}></Avatar>
@@ -106,7 +112,7 @@ describe('AvatarGroup.vue', async () => {
     expect(wrapper.classes()).toContain('t-avatar--offset-left');
   });
 
-  it('max render', async () => {
+  it(': max', async () => {
     const wrapper = mount(() => (
       <AvatarGroup max={1}>
         <Avatar image={IMAGE}></Avatar>
diff --git a/src/cell/__test__/__snapshots__/demo.test.jsx.snap b/src/cell/__test__/__snapshots__/demo.test.jsx.snap
index a7e77c7b..07c7db4c 100644
--- a/src/cell/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/cell/__test__/__snapshots__/demo.test.jsx.snap
@@ -649,10 +649,33 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
                 <div
                   class="t-avatar__inner"
                 >
-                  <img
-                    alt=""
-                    src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-                  />
+                  <div
+                    class="t-image t-image--round"
+                  >
+                    <div
+                      class="t-image__status"
+                    >
+                      <svg
+                        class="t-icon t-icon-ellipsis"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 16 16"
+                        width="1em"
+                      >
+                        <path
+                          d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                          fill="currentColor"
+                          fill-opacity="0.9"
+                        />
+                      </svg>
+                    </div>
+                    <img
+                      alt=""
+                      class="t-image__img"
+                      src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+                      style="object-fit: fill; object-position: center;"
+                    />
+                  </div>
                 </div>
                 <!--v-if-->
               </div>
@@ -871,10 +894,33 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
             <div
               class="t-avatar__inner"
             >
-              <img
-                alt=""
-                src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-              />
+              <div
+                class="t-image t-image--round"
+              >
+                <div
+                  class="t-image__status"
+                >
+                  <svg
+                    class="t-icon t-icon-ellipsis"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </div>
             </div>
             <!--v-if-->
           </div>
diff --git a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
index 2f6a44c4..930c5f99 100644
--- a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -102,7 +102,7 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
                   class="t-button__text"
                 >
                   
-                  确认
+                  确定
                   
                 </span>
               </button>
@@ -119,11 +119,11 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
                 >
                   <ul
                     class="t-picker-item__wrapper"
-                    style="transform: translate3d(0, 80px, 0);"
+                    style="transform: translate3d(0, -280px, 0);"
                   >
                     
                     <li
-                      class="t-picker-item__item t-picker-item__item--selected"
+                      class="t-picker-item__item"
                     >
                       2012
                     </li>
@@ -168,7 +168,7 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
                       2020
                     </li>
                     <li
-                      class="t-picker-item__item"
+                      class="t-picker-item__item t-picker-item__item--selected"
                     >
                       2021
                     </li>
@@ -235,11 +235,56 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
                 >
                   <ul
                     class="t-picker-item__wrapper"
-                    style="transform: translate3d(0, 80px, 0);"
+                    style="transform: translate3d(0, -360px, 0);"
                   >
                     
                     <li
-                      class="t-picker-item__item t-picker-item__item--selected"
+                      class="t-picker-item__item"
+                    >
+                      1
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      2
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      3
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      4
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      5
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      6
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      7
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      8
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      9
+                    </li>
+                    <li
+                      class="t-picker-item__item"
                     >
                       10
                     </li>
@@ -249,7 +294,7 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
                       11
                     </li>
                     <li
-                      class="t-picker-item__item"
+                      class="t-picker-item__item t-picker-item__item--selected"
                     >
                       12
                     </li>
@@ -261,11 +306,91 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
                 >
                   <ul
                     class="t-picker-item__wrapper"
-                    style="transform: translate3d(0, 80px, 0);"
+                    style="transform: translate3d(0, -800px, 0);"
                   >
                     
                     <li
-                      class="t-picker-item__item t-picker-item__item--selected"
+                      class="t-picker-item__item"
+                    >
+                      1
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      2
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      3
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      4
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      5
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      6
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      7
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      8
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      9
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      10
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      11
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      12
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      13
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      14
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      15
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      16
+                    </li>
+                    <li
+                      class="t-picker-item__item"
                     >
                       17
                     </li>
@@ -295,7 +420,7 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
                       22
                     </li>
                     <li
-                      class="t-picker-item__item"
+                      class="t-picker-item__item t-picker-item__item--selected"
                     >
                       23
                     </li>
@@ -464,7 +589,7 @@ exports[`DateTimePicker > DateTimePicker customRangeVue demo works fine 1`] = `
                   class="t-button__text"
                 >
                   
-                  确认
+                  确定
                   
                 </span>
               </button>
@@ -481,101 +606,276 @@ exports[`DateTimePicker > DateTimePicker customRangeVue demo works fine 1`] = `
                 >
                   <ul
                     class="t-picker-item__wrapper"
-                    style="transform: translate3d(0, 80px, 0);"
+                    style="transform: translate3d(0, 40px, 0);"
                   >
                     
                     <li
-                      class="t-picker-item__item t-picker-item__item--selected"
+                      class="t-picker-item__item"
+                    >
+                      2020
+                    </li>
+                    <li
+                      class="t-picker-item__item t-picker-item__item--selected"
+                    >
+                      2021
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      2022
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      2023
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      2024
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      2025
+                    </li>
+                    
+                  </ul>
+                </div>
+                <div
+                  class="t-picker-item"
+                >
+                  <ul
+                    class="t-picker-item__wrapper"
+                    style="transform: translate3d(0, -360px, 0);"
+                  >
+                    
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      1
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      2
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      3
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      4
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      5
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      6
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      7
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      8
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      9
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      10
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      11
+                    </li>
+                    <li
+                      class="t-picker-item__item t-picker-item__item--selected"
+                    >
+                      12
+                    </li>
+                    
+                  </ul>
+                </div>
+                <div
+                  class="t-picker-item"
+                >
+                  <ul
+                    class="t-picker-item__wrapper"
+                    style="transform: translate3d(0, -800px, 0);"
+                  >
+                    
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      1
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      2
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      3
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      4
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      5
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      6
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      7
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      8
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      9
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      10
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      11
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      12
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      13
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      14
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      15
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      16
+                    </li>
+                    <li
+                      class="t-picker-item__item"
                     >
-                      2020
+                      17
                     </li>
                     <li
                       class="t-picker-item__item"
                     >
-                      2021
+                      18
                     </li>
                     <li
                       class="t-picker-item__item"
                     >
-                      2022
+                      19
                     </li>
                     <li
                       class="t-picker-item__item"
                     >
-                      2023
+                      20
                     </li>
                     <li
                       class="t-picker-item__item"
                     >
-                      2024
+                      21
                     </li>
                     <li
                       class="t-picker-item__item"
                     >
-                      2025
+                      22
                     </li>
-                    
-                  </ul>
-                </div>
-                <div
-                  class="t-picker-item"
-                >
-                  <ul
-                    class="t-picker-item__wrapper"
-                    style="transform: translate3d(0, 80px, 0);"
-                  >
-                    
                     <li
                       class="t-picker-item__item t-picker-item__item--selected"
                     >
-                      6
+                      23
                     </li>
                     <li
                       class="t-picker-item__item"
                     >
-                      7
+                      24
                     </li>
                     <li
                       class="t-picker-item__item"
                     >
-                      8
+                      25
                     </li>
                     <li
                       class="t-picker-item__item"
                     >
-                      9
+                      26
                     </li>
                     <li
                       class="t-picker-item__item"
                     >
-                      10
+                      27
                     </li>
                     <li
                       class="t-picker-item__item"
                     >
-                      11
+                      28
                     </li>
                     <li
                       class="t-picker-item__item"
                     >
-                      12
+                      29
                     </li>
-                    
-                  </ul>
-                </div>
-                <div
-                  class="t-picker-item"
-                >
-                  <ul
-                    class="t-picker-item__wrapper"
-                    style="transform: translate3d(0, 80px, 0);"
-                  >
-                    
                     <li
-                      class="t-picker-item__item t-picker-item__item--selected"
+                      class="t-picker-item__item"
                     >
                       30
                     </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      31
+                    </li>
                     
                   </ul>
                 </div>
@@ -701,7 +1001,7 @@ exports[`DateTimePicker > DateTimePicker fullVue demo works fine 1`] = `
                   class="t-button__text"
                 >
                   
-                  确认
+                  确定
                   
                 </span>
               </button>
@@ -1965,7 +2265,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                     class="t-button__text"
                   >
                     
-                    确认
+                    确定
                     
                   </span>
                 </button>
@@ -1982,11 +2282,11 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                   >
                     <ul
                       class="t-picker-item__wrapper"
-                      style="transform: translate3d(0, 80px, 0);"
+                      style="transform: translate3d(0, -280px, 0);"
                     >
                       
                       <li
-                        class="t-picker-item__item t-picker-item__item--selected"
+                        class="t-picker-item__item"
                       >
                         2012
                       </li>
@@ -2031,7 +2331,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                         2020
                       </li>
                       <li
-                        class="t-picker-item__item"
+                        class="t-picker-item__item t-picker-item__item--selected"
                       >
                         2021
                       </li>
@@ -2098,11 +2398,56 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                   >
                     <ul
                       class="t-picker-item__wrapper"
-                      style="transform: translate3d(0, 80px, 0);"
+                      style="transform: translate3d(0, -360px, 0);"
                     >
                       
                       <li
-                        class="t-picker-item__item t-picker-item__item--selected"
+                        class="t-picker-item__item"
+                      >
+                        1
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        2
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        3
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        4
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        5
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        6
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        7
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        8
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        9
+                      </li>
+                      <li
+                        class="t-picker-item__item"
                       >
                         10
                       </li>
@@ -2112,7 +2457,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                         11
                       </li>
                       <li
-                        class="t-picker-item__item"
+                        class="t-picker-item__item t-picker-item__item--selected"
                       >
                         12
                       </li>
@@ -2124,11 +2469,91 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                   >
                     <ul
                       class="t-picker-item__wrapper"
-                      style="transform: translate3d(0, 80px, 0);"
+                      style="transform: translate3d(0, -800px, 0);"
                     >
                       
                       <li
-                        class="t-picker-item__item t-picker-item__item--selected"
+                        class="t-picker-item__item"
+                      >
+                        1
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        2
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        3
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        4
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        5
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        6
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        7
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        8
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        9
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        10
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        11
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        12
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        13
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        14
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        15
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        16
+                      </li>
+                      <li
+                        class="t-picker-item__item"
                       >
                         17
                       </li>
@@ -2158,7 +2583,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                         22
                       </li>
                       <li
-                        class="t-picker-item__item"
+                        class="t-picker-item__item t-picker-item__item--selected"
                       >
                         23
                       </li>
@@ -2320,7 +2745,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                     class="t-button__text"
                   >
                     
-                    确认
+                    确定
                     
                   </span>
                 </button>
@@ -2337,11 +2762,11 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                   >
                     <ul
                       class="t-picker-item__wrapper"
-                      style="transform: translate3d(0, 80px, 0);"
+                      style="transform: translate3d(0, -280px, 0);"
                     >
                       
                       <li
-                        class="t-picker-item__item t-picker-item__item--selected"
+                        class="t-picker-item__item"
                       >
                         2012
                       </li>
@@ -2386,7 +2811,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                         2020
                       </li>
                       <li
-                        class="t-picker-item__item"
+                        class="t-picker-item__item t-picker-item__item--selected"
                       >
                         2021
                       </li>
@@ -2433,31 +2858,76 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                       <li
                         class="t-picker-item__item"
                       >
-                        2030
+                        2030
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        2031
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        2032
+                      </li>
+                      
+                    </ul>
+                  </div>
+                  <div
+                    class="t-picker-item"
+                  >
+                    <ul
+                      class="t-picker-item__wrapper"
+                      style="transform: translate3d(0, -240px, 0);"
+                    >
+                      
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        1
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        2
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        3
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        4
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        5
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        6
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        7
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2031
+                        8
                       </li>
                       <li
-                        class="t-picker-item__item"
+                        class="t-picker-item__item t-picker-item__item--selected"
                       >
-                        2032
+                        9
                       </li>
-                      
-                    </ul>
-                  </div>
-                  <div
-                    class="t-picker-item"
-                  >
-                    <ul
-                      class="t-picker-item__wrapper"
-                      style="transform: translate3d(0, 80px, 0);"
-                    >
-                      
                       <li
-                        class="t-picker-item__item t-picker-item__item--selected"
+                        class="t-picker-item__item"
                       >
                         10
                       </li>
@@ -2589,7 +3059,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                     class="t-button__text"
                   >
                     
-                    确认
+                    确定
                     
                   </span>
                 </button>
@@ -3174,7 +3644,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                     class="t-button__text"
                   >
                     
-                    确认
+                    确定
                     
                   </span>
                 </button>
@@ -3191,16 +3661,16 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                   >
                     <ul
                       class="t-picker-item__wrapper"
-                      style="transform: translate3d(0, 80px, 0);"
+                      style="transform: translate3d(0, 40px, 0);"
                     >
                       
                       <li
-                        class="t-picker-item__item t-picker-item__item--selected"
+                        class="t-picker-item__item"
                       >
                         2020
                       </li>
                       <li
-                        class="t-picker-item__item"
+                        class="t-picker-item__item t-picker-item__item--selected"
                       >
                         2021
                       </li>
@@ -3232,11 +3702,36 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                   >
                     <ul
                       class="t-picker-item__wrapper"
-                      style="transform: translate3d(0, 80px, 0);"
+                      style="transform: translate3d(0, -360px, 0);"
                     >
                       
                       <li
-                        class="t-picker-item__item t-picker-item__item--selected"
+                        class="t-picker-item__item"
+                      >
+                        1
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        2
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        3
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        4
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        5
+                      </li>
+                      <li
+                        class="t-picker-item__item"
                       >
                         6
                       </li>
@@ -3266,7 +3761,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                         11
                       </li>
                       <li
-                        class="t-picker-item__item"
+                        class="t-picker-item__item t-picker-item__item--selected"
                       >
                         12
                       </li>
@@ -3278,14 +3773,164 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                   >
                     <ul
                       class="t-picker-item__wrapper"
-                      style="transform: translate3d(0, 80px, 0);"
+                      style="transform: translate3d(0, -800px, 0);"
                     >
                       
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        1
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        2
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        3
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        4
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        5
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        6
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        7
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        8
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        9
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        10
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        11
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        12
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        13
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        14
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        15
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        16
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        17
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        18
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        19
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        20
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        21
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        22
+                      </li>
                       <li
                         class="t-picker-item__item t-picker-item__item--selected"
+                      >
+                        23
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        24
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        25
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        26
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        27
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        28
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        29
+                      </li>
+                      <li
+                        class="t-picker-item__item"
                       >
                         30
                       </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        31
+                      </li>
                       
                     </ul>
                   </div>
@@ -3413,7 +4058,7 @@ exports[`DateTimePicker > DateTimePicker timeVue demo works fine 1`] = `
                   class="t-button__text"
                 >
                   
-                  确认
+                  确定
                   
                 </span>
               </button>
@@ -3989,7 +4634,7 @@ exports[`DateTimePicker > DateTimePicker yearMonthVue demo works fine 1`] = `
                   class="t-button__text"
                 >
                   
-                  确认
+                  确定
                   
                 </span>
               </button>
@@ -4006,11 +4651,11 @@ exports[`DateTimePicker > DateTimePicker yearMonthVue demo works fine 1`] = `
                 >
                   <ul
                     class="t-picker-item__wrapper"
-                    style="transform: translate3d(0, 80px, 0);"
+                    style="transform: translate3d(0, -280px, 0);"
                   >
                     
                     <li
-                      class="t-picker-item__item t-picker-item__item--selected"
+                      class="t-picker-item__item"
                     >
                       2012
                     </li>
@@ -4055,7 +4700,7 @@ exports[`DateTimePicker > DateTimePicker yearMonthVue demo works fine 1`] = `
                       2020
                     </li>
                     <li
-                      class="t-picker-item__item"
+                      class="t-picker-item__item t-picker-item__item--selected"
                     >
                       2021
                     </li>
@@ -4122,11 +4767,56 @@ exports[`DateTimePicker > DateTimePicker yearMonthVue demo works fine 1`] = `
                 >
                   <ul
                     class="t-picker-item__wrapper"
-                    style="transform: translate3d(0, 80px, 0);"
+                    style="transform: translate3d(0, -240px, 0);"
                   >
                     
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      1
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      2
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      3
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      4
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      5
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      6
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      7
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      8
+                    </li>
                     <li
                       class="t-picker-item__item t-picker-item__item--selected"
+                    >
+                      9
+                    </li>
+                    <li
+                      class="t-picker-item__item"
                     >
                       10
                     </li>
diff --git a/src/date-time-picker/__test__/__snapshots__/index.test.jsx.snap b/src/date-time-picker/__test__/__snapshots__/index.test.jsx.snap
new file mode 100644
index 00000000..772099b3
--- /dev/null
+++ b/src/date-time-picker/__test__/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,418 @@
+// Vitest Snapshot v1
+
+exports[`DateTimePicker > props > : onPick 1`] = `
+<div
+  class="t-date-time-picker"
+>
+  <div
+    class="t-picker"
+  >
+    <div
+      class="t-picker__toolbar"
+    >
+      <button
+        aria-disabled="false"
+        class="t-button t-size-m t-button--text t-button--default t-button--shape-rectangle t-picker__cancel"
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          取消
+          
+        </span>
+      </button>
+      <div
+        class="t-picker__title"
+      >
+        选择时间
+      </div>
+      <button
+        aria-disabled="false"
+        class="t-button t-size-m t-button--text t-button--default t-button--shape-rectangle t-picker__confirm"
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          确定
+          
+        </span>
+      </button>
+    </div>
+    <div
+      class="t-picker__main"
+    >
+      <div
+        class="t-picker-item__group"
+      >
+        
+        <div
+          class="t-picker-item"
+        >
+          <ul
+            class="t-picker-item__wrapper"
+            style="transform: translate3d(0, -400px, 0); transition: 150ms ease-out;"
+          >
+            
+            <li
+              class="t-picker-item__item"
+            >
+              2012
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2013
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2014
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2015
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2016
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2017
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2018
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2019
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2020
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2021
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2022
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2023
+            </li>
+            <li
+              class="t-picker-item__item t-picker-item__item--selected"
+            >
+              2024
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2025
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2026
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2027
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2028
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2029
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2030
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2031
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2032
+            </li>
+            
+          </ul>
+        </div>
+        <div
+          class="t-picker-item"
+        >
+          <ul
+            class="t-picker-item__wrapper"
+            style="transform: translate3d(0, -280px, 0);"
+          >
+            
+            <li
+              class="t-picker-item__item"
+            >
+              1
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              3
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              4
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              5
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              6
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              7
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              8
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              9
+            </li>
+            <li
+              class="t-picker-item__item t-picker-item__item--selected"
+            >
+              10
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              11
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              12
+            </li>
+            
+          </ul>
+        </div>
+        <div
+          class="t-picker-item"
+        >
+          <ul
+            class="t-picker-item__wrapper"
+            style="transform: translate3d(0, -400px, 0);"
+          >
+            
+            <li
+              class="t-picker-item__item"
+            >
+              1
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              3
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              4
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              5
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              6
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              7
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              8
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              9
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              10
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              11
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              12
+            </li>
+            <li
+              class="t-picker-item__item t-picker-item__item--selected"
+            >
+              13
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              14
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              15
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              16
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              17
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              18
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              19
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              20
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              21
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              22
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              23
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              24
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              25
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              26
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              27
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              28
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              29
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              30
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              31
+            </li>
+            
+          </ul>
+        </div>
+        
+      </div>
+      <div
+        class="t-picker__mask"
+      />
+      <div
+        class="t-picker__indicator"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/date-time-picker/__test__/index.test.jsx b/src/date-time-picker/__test__/index.test.jsx
new file mode 100644
index 00000000..17cc8a26
--- /dev/null
+++ b/src/date-time-picker/__test__/index.test.jsx
@@ -0,0 +1,228 @@
+import { nextTick, ref } from 'vue';
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi } from 'vitest';
+import DateTimePicker from '../date-time-picker.vue';
+import PickerItem from '../../picker/picker-item.vue';
+import { DEFAULT_ITEM_HEIGHT, ANIMATION_TIME_LIMIT } from '../../picker/picker.class';
+
+const makeTouch = (el, eventName, touchPosition) => {
+  const event = new Event(eventName);
+  if (touchPosition) {
+    event.changedTouches = [touchPosition];
+  }
+
+  el.dispatchEvent(event);
+};
+
+const simulateMoveOption = async (optionContainerEl, distance) => {
+  makeTouch(optionContainerEl, 'touchstart', { pageY: 0 });
+  makeTouch(optionContainerEl, 'touchmove', { pageY: -distance * DEFAULT_ITEM_HEIGHT });
+
+  vi.useFakeTimers().advanceTimersByTime(ANIMATION_TIME_LIMIT + 1);
+  makeTouch(optionContainerEl, 'touchend', { pageY: -distance * DEFAULT_ITEM_HEIGHT });
+  vi.useRealTimers();
+
+  await nextTick();
+}
+
+const prefix = 't'
+const name = `${prefix}-date-time-picker`;
+
+const renderLabel = (type, value) => {
+  if (type === 'year') {
+    return `${value}年`;
+  }
+  if (type === 'month') {
+    return `${value}月`;
+  }
+  if (type === 'date') {
+    return `${value}日`;
+  }
+  return value;
+};
+
+const addZero = (el) => {
+  return el < 10 ? `0${el}` : el
+}
+
+// 获取当前月份的天数
+const getDateCount = (Y, M) => {
+  var d = new Date(Y, M, 0);
+  return d.getDate();
+}
+
+// 相关日期计算
+const precisionRankRecord = ['year', 'month', 'date', 'hour', 'minute','second'];
+const currentDate = new Date('2022-10-13');
+const Y = currentDate.getFullYear();
+const M = currentDate.getMonth() + 1;
+const D = currentDate.getDate();
+const defaultDateTime = `${Y}-${addZero(M)}-${addZero(D)}`;
+
+const ret = [];
+const generateColumn = (start, end, type) => {
+  const arr = [];
+  for (let i = start; i <= end; i++) {
+    const value = i.toString();
+    arr.push({
+      label: renderLabel ? renderLabel(type, i) : value,
+      value: type === 'month' ? `${+value - 1}` : value,
+    });
+  }
+  ret.push(arr);
+};
+
+describe('DateTimePicker', () => {
+  describe('props', () => {
+    it(': title && confirmBtn && cancelBtn', async () => {
+      const title = '';
+      const confirmBtn = '';
+      const cancelBtn = '';
+      const wrapper = mount(DateTimePicker, {
+        props: {
+          title,
+          confirmBtn,
+          cancelBtn
+        }
+      })
+      const $title = wrapper.find(`.${prefix}-picker__title`);
+      const $confirmButton = wrapper.find(`.${prefix}-picker__confirm`);
+      const $cancelButton = wrapper.find(`.${prefix}-picker__cancel`);
+      expect($title.text()).toBe(title || '选择时间');
+      expect($confirmButton.text()).toBe(confirmBtn || '确定');
+      expect($cancelButton.text()).toBe(cancelBtn || '取消');
+
+      const newTitle = '标题测试';
+      const newConfirmBtn = 'confirm';
+      const newCancelBtn = 'cancel';
+      await wrapper.setProps({
+        title: newTitle,
+        confirmBtn: newConfirmBtn,
+        cancelBtn: newCancelBtn
+      })
+      expect($title.text()).toBe(newTitle || '选择时间');
+      expect($confirmButton.text()).toBe(newConfirmBtn || '确定');
+      expect($cancelButton.text()).toBe(newCancelBtn || '取消');
+    });
+
+    it(': mode', async () => {
+      const defaultValue = defaultDateTime;
+      const modeArray = ['date', 'second'];
+      const wrapper = mount(DateTimePicker, {
+        props: {
+          defaultValue,
+          title: 'mode 测试',
+          mode: modeArray,
+        }
+      })
+      // mode = ['date', 'second'], 渲染年月日时分秒，6列
+      const pickerItem = wrapper.findComponent(PickerItem);
+      expect(pickerItem.exists()).toBeTruthy();
+      const $pickerItems = wrapper.findAllComponents(PickerItem);
+      expect($pickerItems).toHaveLength(6);
+      await wrapper.setProps({
+        mode: false
+      })
+      // mode = false, 不渲染列
+      expect(pickerItem.exists()).toBeFalsy();
+    });
+
+    it(': start && end ', async () => {
+      const defaultValue = defaultDateTime;
+      const start = "2020-6-30";
+      const end = "2025-6-30";
+
+      const startYear = start.split('-')[0];
+      const endYear =end.split('-')[0];
+
+      const wrapper = mount(DateTimePicker, {
+        props: {
+          defaultValue,
+          start,
+          end,
+        }
+      })
+      const $pickerItems = wrapper.findAllComponents(PickerItem);
+      let res = {};
+      $pickerItems.forEach((item, index) => {
+        res[precisionRankRecord[index]] = item.findAll(`.${prefix}-picker-item__item`)
+      });
+      expect(res[precisionRankRecord[0]].length).toEqual(endYear - startYear + 1);
+    });
+
+    it(': renderLabel', async () => {
+      generateColumn(Y - 10, Y + 10, 'year')
+      generateColumn(1, 12, 'month')
+      generateColumn(1, getDateCount(Y, M), 'date')
+
+      const defaultValue = defaultDateTime;
+      const wrapper = mount(DateTimePicker, {
+        props: {
+          defaultValue,
+          title: '自定义label',
+          renderLabel,
+        }
+      })
+      // mode = 'date', 渲染年月日，3列
+      const $pickerItems = wrapper.findAllComponents(PickerItem);
+      expect($pickerItems.length).toEqual(3);
+
+      let res = {};
+      $pickerItems.forEach((item, index) => {
+        res[precisionRankRecord[index]] = item.findAll(`.${prefix}-picker-item__item`)
+      });
+
+      Object.keys(res).forEach((key, keyIndex) => {
+        expect(res[key].length).toEqual(ret[keyIndex].length)
+        res[key].forEach((item, itemIndex) => {
+          expect(item.text()).toEqual(ret[keyIndex][itemIndex].label)
+        })
+      })
+    })
+    it(': onCancel', async () => {
+      const onCancel = vi.fn();
+      const wrapper = mount(DateTimePicker, {
+        props: {
+          onCancel,
+        }
+      })
+      const $cancelButton = wrapper.find(`.${prefix}-picker__cancel`);
+      await $cancelButton.trigger('click');
+      expect(onCancel).toBeCalledTimes(1);
+    })
+
+    it(': onPick', async () => {
+      const initValue = ref(defaultDateTime);
+      const onConfirm = vi.fn((e) => {
+        // confirm && change && pick 事件的返回值格式是 yyyy-mm-dd hh:mm:ss, 需要自行处理。
+        // Q: 返回值是否应该按照 mode 类型返回？
+        initValue.value = String(e).split(' ')[0].trim();
+      });
+      const onChange = vi.fn();
+      const onPick = vi.fn();
+      const wrapper = mount(DateTimePicker, {
+        props: {
+          value: initValue.value,
+          onConfirm,
+          onChange,
+          onPick
+        }
+      })
+      const $confirmButton = wrapper.find(`.${prefix}-picker__confirm`);
+      await $confirmButton.trigger('click');
+      expect(onConfirm).toBeCalledTimes(1);
+      expect(onChange).toBeCalledTimes(0); // value 不变，不触发 change
+      expect(onPick).toBeCalledTimes(0);
+      const el = wrapper.findAll(`.${prefix}-picker-item`);
+      const touchItemIndex = 0;
+      const touchIndex = 2;
+      simulateMoveOption(el[touchItemIndex].element, touchIndex);
+      expect(wrapper.element).toMatchSnapshot();
+      expect(onPick).toBeCalledTimes(1);
+      await $confirmButton.trigger('click');
+      expect(onConfirm).toBeCalledTimes(2);
+      expect(onChange).toBeCalledTimes(1);
+      expect(initValue.value).toEqual(`${ret[touchItemIndex][10 + touchIndex].value}-${addZero(M)}-${addZero(D)}`)
+    })
+  });
+})
diff --git a/src/shared/useTest/index.ts b/src/shared/useTest/index.ts
new file mode 100644
index 00000000..d35df3c0
--- /dev/null
+++ b/src/shared/useTest/index.ts
@@ -0,0 +1,32 @@
+import { sleep } from '../util';
+
+/**
+ * 测试相关的工具方法
+ */
+export function useTestUtils() {
+  const makeScroll = async (dom: Element, name: 'scrollTop' | 'scrollLeft', offset: number) => {
+    const eventTarget = dom === document.documentElement ? window : dom;
+    dom[name] = offset;
+    const evt = new CustomEvent('scroll', {
+      detail: {
+        target: {
+          [name]: offset,
+        },
+      },
+    });
+    eventTarget.dispatchEvent(evt);
+    // must use setTimeout instead of nextTick to wait dom change
+    await sleep(0);
+  };
+
+  return { makeScroll, sleep };
+}
+
+/**
+ * 测试相关的vitest方法
+ */
+export function useVitest(vi: typeof import('vitest')['vitest']) {
+  const getBoundingClientRect = (dom: Element) => vi.spyOn(dom, 'getBoundingClientRect');
+
+  return { getBoundingClientRect };
+}
diff --git a/src/sticky/__test__/index.test.jsx b/src/sticky/__test__/index.test.jsx
new file mode 100644
index 00000000..b8011f53
--- /dev/null
+++ b/src/sticky/__test__/index.test.jsx
@@ -0,0 +1,212 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi } from 'vitest';
+import { nextTick } from 'vue';
+import Sticky from '../sticky.vue';
+import { useTestUtils, useVitest } from '../../shared';
+
+const _mount = (template, data = () => ({}), methods = {}) =>
+  mount(
+    {
+      components: {
+        Sticky,
+      },
+      template,
+      data,
+      methods,
+    },
+    { attachTo: document.body },
+  );
+
+const TIMEOUT = 250;
+
+/**
+ * 创建sticky测试用容器
+ */
+const stickyRectMock = (wrapper, { stickyMockReturnValue, documentMockReturnValue }) => {
+  const { getBoundingClientRect } = useVitest(vi);
+  const mockStickyRect = getBoundingClientRect(wrapper.find('.t-sticky').element).mockReturnValue(
+    stickyMockReturnValue,
+  );
+
+  const mockDocumentRect = getBoundingClientRect(document.documentElement).mockReturnValue(documentMockReturnValue);
+
+  const mockStickyRectRestore = mockStickyRect.mockRestore;
+  const mockDocumentRectRestore = mockDocumentRect.mockRestore;
+
+  const mockRestore = () => {
+    mockStickyRectRestore();
+    mockDocumentRectRestore();
+  };
+
+  return { mockStickyRect, mockDocumentRect, mockStickyRectRestore, mockDocumentRectRestore, mockRestore };
+};
+
+describe('sticky', () => {
+  describe('props', () => {
+    it(': offsetTop', async () => {
+      const { makeScroll } = useTestUtils();
+      const wrapper = _mount(`
+        <Sticky :offsetTop="30"></Sticky>
+      `);
+
+      await nextTick();
+      const { mockRestore } = stickyRectMock(wrapper, {
+        stickyMockReturnValue: {
+          height: 40,
+          width: 1000,
+          top: 29,
+        },
+        documentMockReturnValue: {
+          height: 200,
+          width: 1000,
+          top: 0,
+          bottom: 200,
+        },
+      });
+
+      expect(wrapper.find('.t-sticky__content').attributes('style')).toContain('z-index: 99;');
+      await makeScroll(document.documentElement, 'scrollTop', 200);
+
+      expect(wrapper.find('.t-sticky__content').attributes('style')).toContain(
+        'z-index: 99; position: fixed; top: 30px;',
+      );
+
+      mockRestore();
+    });
+
+    it(': z-index', async () => {
+      const { makeScroll } = useTestUtils();
+      const wrapper = _mount(`
+        <Sticky :zIndex="1000" :offsetTop="30"></Sticky>
+      `);
+
+      await nextTick();
+      const { mockRestore } = stickyRectMock(wrapper, {
+        stickyMockReturnValue: {
+          height: 40,
+          width: 1000,
+          top: 29,
+        },
+        documentMockReturnValue: {
+          height: 200,
+          width: 1000,
+          top: 0,
+          bottom: 200,
+        },
+      });
+
+      expect(wrapper.find('.t-sticky__content').attributes('style')).toContain('z-index: 1000;');
+      await makeScroll(document.documentElement, 'scrollTop', 300);
+      expect(wrapper.find('.t-sticky__content').attributes('style')).toContain(
+        'z-index: 1000; position: fixed; top: 30px;',
+      );
+      mockRestore();
+    });
+
+    it(': onScroll', async () => {
+      const { makeScroll, sleep } = useTestUtils();
+      const onScrollParameterFn = vi.fn((isFixed) => {});
+      const onScroll = ({ isFixed }) => onScrollParameterFn(isFixed);
+      const wrapper = _mount(
+        `
+        <Sticky :onScroll="onScroll"></Sticky>
+      `,
+        () => ({}),
+        {
+          onScroll,
+        },
+      );
+
+      await nextTick();
+
+      const { mockRestore } = stickyRectMock(wrapper, {
+        stickyMockReturnValue: {
+          height: 40,
+          width: 1000,
+          top: 30,
+        },
+        documentMockReturnValue: {
+          height: 200,
+          width: 1000,
+          top: 0,
+          bottom: 200,
+        },
+      });
+
+      // 未吸顶的事件
+      await makeScroll(document.documentElement, 'scrollTop', 10);
+      await sleep(TIMEOUT);
+
+      expect(wrapper.find('.t-sticky__content').attributes('style')).toContain('z-index: 99;');
+      mockRestore();
+      expect(onScrollParameterFn).toHaveBeenCalledWith(false);
+
+      // 吸顶后的事件
+      await makeScroll(document.documentElement, 'scrollTop', 200);
+      await sleep(TIMEOUT);
+
+      expect(wrapper.find('.t-sticky__content').attributes('style')).toContain(
+        'z-index: 99; position: fixed; top: 0px;',
+      );
+      mockRestore();
+      expect(onScrollParameterFn).toHaveBeenCalledWith(true);
+    });
+  });
+
+  describe('event', () => {
+    it(': onScroll', async () => {
+      const { makeScroll, sleep } = useTestUtils();
+      const onScrollParameterFn = vi.fn((isFixed) => {});
+      const onScroll = ({ isFixed }) => onScrollParameterFn(isFixed);
+
+      const wrapper = _mount(
+        `
+        <Sticky @scroll="onScroll"></Sticky>
+      `,
+        () => ({
+          onScrollParam: {
+            isFixed: undefined,
+          },
+        }),
+        {
+          onScroll,
+        },
+      );
+
+      await nextTick();
+
+      const { mockRestore } = stickyRectMock(wrapper, {
+        stickyMockReturnValue: {
+          height: 40,
+          width: 1000,
+          top: 30,
+        },
+        documentMockReturnValue: {
+          height: 200,
+          width: 1000,
+          top: 0,
+          bottom: 200,
+        },
+      });
+
+      // 未吸顶的事件
+      await makeScroll(document.documentElement, 'scrollTop', 10);
+      await sleep(TIMEOUT);
+
+      expect(wrapper.find('.t-sticky__content').attributes('style')).toContain('z-index: 99;');
+      mockRestore();
+
+      // 吸顶后的事件
+      await makeScroll(document.documentElement, 'scrollTop', 200);
+      await sleep(TIMEOUT);
+
+      expect(wrapper.find('.t-sticky__content').attributes('style')).toContain(
+        'z-index: 99; position: fixed; top: 0px;',
+      );
+      mockRestore();
+
+      expect(onScrollParameterFn).toHaveBeenCalledWith(false);
+      expect(onScrollParameterFn).toHaveBeenCalledWith(true);
+    });
+  });
+});