diff --git a/mock/role/index.mock.ts b/mock/role/index.mock.ts
index 0a14b60..89f99dd 100644
--- a/mock/role/index.mock.ts
+++ b/mock/role/index.mock.ts
@@ -324,6 +324,14 @@ const adminList = [
         meta: {
           title: 'router.videoPlayer'
         }
+      },
+      {
+        path: 'avatars',
+        component: 'views/Components/Avatars',
+        name: 'Avatars',
+        meta: {
+          title: 'router.avatars'
+        }
       }
     ]
   },
@@ -686,6 +694,7 @@ const testList: string[] = [
   '/components/waterfall',
   '/components/image-cropping',
   '/components/video-player',
+  '/components/avatars',
   'function',
   '/function/multiple-tabs',
   '/function/multiple-tabs-demo/:id',
diff --git a/src/components/Avatars/index.ts b/src/components/Avatars/index.ts
new file mode 100644
index 0000000..35d2129
--- /dev/null
+++ b/src/components/Avatars/index.ts
@@ -0,0 +1,3 @@
+import Avatars from './src/Avatars.vue'
+
+export { Avatars }
diff --git a/src/components/Avatars/src/Avatars.vue b/src/components/Avatars/src/Avatars.vue
new file mode 100644
index 0000000..c159068
--- /dev/null
+++ b/src/components/Avatars/src/Avatars.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ComponentSize } from 'element-plus'
+import { PropType } from 'vue'
+
+defineProps({
+  size: {
+    type: String as PropType<ComponentSize>,
+    default: ''
+  }
+})
+</script>
+
+<template>
+  <div> 头像 </div>
+</template>
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 2598374..2dcf098 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -186,7 +186,8 @@ export default {
     tableVideoPreview: 'Table video preview',
     cardTable: 'Card table',
     personalCenter: 'Personal center',
-    personal: 'Personal'
+    personal: 'Personal',
+    avatars: 'Avatars'
   },
   permission: {
     hasPermission: 'Please set the operation permission value'
@@ -562,5 +563,9 @@ export default {
   inputPasswordDemo: {
     title: 'InputPassword',
     inputPasswordDes: 'Secondary packaging of Input components based on ElementPlus'
+  },
+  avatarsDemo: {
+    title:
+      'Avatar component for avatar list, secondary packaging based on element plus Avatar component'
   }
 }
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index ebf9dfe..a78185d 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -182,7 +182,8 @@ export default {
     tableVideoPreview: '表格视频预览',
     cardTable: '卡片表格',
     personalCenter: '个人中心',
-    personal: '个人'
+    personal: '个人',
+    avatars: '头像列表'
   },
   permission: {
     hasPermission: '请设置操作权限值'
@@ -552,5 +553,8 @@ export default {
   inputPasswordDemo: {
     title: '密码输入框',
     inputPasswordDes: '基于 ElementPlus 的 Input 组件二次封装'
+  },
+  avatarsDemo: {
+    title: '头像列表组件，基于element-plus的Avatar组件二次封装'
   }
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 0efe943..6440cd0 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -390,6 +390,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: t('router.videoPlayer')
         }
+      },
+      {
+        path: 'avatars',
+        component: () => import('@/views/Components/Avatars.vue'),
+        name: 'Avatars',
+        meta: {
+          title: t('router.avatars')
+        }
       }
     ]
   },
diff --git a/src/views/Components/Avatars.vue b/src/views/Components/Avatars.vue
new file mode 100644
index 0000000..eefe0dd
--- /dev/null
+++ b/src/views/Components/Avatars.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { Avatars } from '@/components/Avatars'
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <ContentWrap :title="t('router.avatars')" :message="t('avatarsDemo.title')">
+    <Avatars />
+  </ContentWrap>
+</template>