From 89d90ea58db7349aea1b69bb50925227e2884b72 Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Fri, 18 Nov 2022 12:26:06 +0800
Subject: [PATCH] style(Avatar): using css token

---
 src/avatar/README.md                          |  11 +-
 .../__test__/__snapshots__/demo.test.js.snap  | 542 ++++++++----------
 src/avatar/__test__/demo.test.js              |   2 +-
 src/avatar/_example/action/index.wxml         |  30 +-
 src/avatar/_example/action/index.wxss         |   8 +-
 src/avatar/_example/avatar.json               |   5 +-
 src/avatar/_example/avatar.less               |   3 +
 src/avatar/_example/avatar.wxml               |  43 +-
 .../_example/{shape => badge-avatar}/index.js |   0
 .../{shape => badge-avatar}/index.json        |   0
 src/avatar/_example/badge-avatar/index.wxml   |  11 +
 src/avatar/_example/badge-avatar/index.wxss   |  14 +
 src/avatar/_example/character-avatar/index.js |   5 +
 .../_example/character-avatar/index.json      |   6 +
 .../_example/character-avatar/index.wxml      |   8 +
 .../_example/character-avatar/index.wxss      |  14 +
 src/avatar/_example/exhibition/index.wxml     |  25 +-
 src/avatar/_example/exhibition/index.wxss     |   8 +-
 src/avatar/_example/icon-avatar/index.js      |   5 +
 src/avatar/_example/icon-avatar/index.json    |   6 +
 src/avatar/_example/icon-avatar/index.wxml    |   8 +
 src/avatar/_example/icon-avatar/index.wxss    |   8 +
 src/avatar/_example/image-avatar/index.js     |   5 +
 src/avatar/_example/image-avatar/index.json   |   6 +
 src/avatar/_example/image-avatar/index.wxml   |   8 +
 src/avatar/_example/image-avatar/index.wxss   |   8 +
 src/avatar/_example/shape/index.wxml          |  22 -
 src/avatar/_example/shape/index.wxss          |  22 -
 src/avatar/_example/size/index.wxml           |  40 +-
 src/avatar/_example/size/index.wxss           |  31 +-
 src/avatar/avatar-group.less                  |  21 +-
 src/avatar/avatar-group.ts                    |  11 -
 src/avatar/avatar-group.wxml                  |   3 +-
 src/avatar/avatar.less                        | 105 ++--
 src/avatar/avatar.ts                          |   5 -
 src/avatar/avatar.wxml                        |  73 ++-
 src/avatar/avatar.wxs                         |   9 +-
 src/avatar/common.less                        |  25 -
 src/avatar/props.ts                           |  10 +
 src/avatar/type.ts                            |  16 +
 src/badge/badge.less                          |   1 +
 41 files changed, 573 insertions(+), 610 deletions(-)
 rename src/avatar/_example/{shape => badge-avatar}/index.js (100%)
 rename src/avatar/_example/{shape => badge-avatar}/index.json (100%)
 create mode 100644 src/avatar/_example/badge-avatar/index.wxml
 create mode 100644 src/avatar/_example/badge-avatar/index.wxss
 create mode 100644 src/avatar/_example/character-avatar/index.js
 create mode 100644 src/avatar/_example/character-avatar/index.json
 create mode 100644 src/avatar/_example/character-avatar/index.wxml
 create mode 100644 src/avatar/_example/character-avatar/index.wxss
 create mode 100644 src/avatar/_example/icon-avatar/index.js
 create mode 100644 src/avatar/_example/icon-avatar/index.json
 create mode 100644 src/avatar/_example/icon-avatar/index.wxml
 create mode 100644 src/avatar/_example/icon-avatar/index.wxss
 create mode 100644 src/avatar/_example/image-avatar/index.js
 create mode 100644 src/avatar/_example/image-avatar/index.json
 create mode 100644 src/avatar/_example/image-avatar/index.wxml
 create mode 100644 src/avatar/_example/image-avatar/index.wxss
 delete mode 100644 src/avatar/_example/shape/index.wxml
 delete mode 100644 src/avatar/_example/shape/index.wxss
 delete mode 100644 src/avatar/common.less

diff --git a/src/avatar/README.md b/src/avatar/README.md
index 9f690295d..392e1dbb4 100644
--- a/src/avatar/README.md
+++ b/src/avatar/README.md
@@ -17,13 +17,6 @@ isComponent: true
 }
 ```
 
-### 主题定制
-CSS 变量名|说明
---|--
---td-avatar-bg-color | 头像背景颜色;
---td-avatar-content-color | 头像内容（文字、图标）颜色;
---td-avatar-group-border-color | 组合头像边框颜色;
-
 ## 代码演示
 
 ### 基础头像
@@ -60,10 +53,12 @@ custom-style `v0.25.0` | String | - | 自定义组件样式 | N
 external-classes | Array | - | 组件类名，用于设置组件外层元素类名。`['t-class', 't-class-image', 't-class-icon', 't-class-alt', 't-class-content']` | N
 hide-on-load-failed | Boolean | false | 加载失败时隐藏图片 | N
 icon | String / Slot | - | 图标 | N
+icon-props | Object | {} | 图标属性，透传至 icon | N
 image | String | - | 图片地址 | N
-image-props | Object | - | 【开发中】透传至 Image 组件 | N
+image-props | Object | - | 透传至 Image 组件 | N
 shape | String | circle | 形状。可选项：circle/round。TS 类型：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
 size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等，默认为 large | N
+bordered | Boolean | false | 是否显示外边框 | N
 
 ### Avatar Events
 
diff --git a/src/avatar/__test__/__snapshots__/demo.test.js.snap b/src/avatar/__test__/__snapshots__/demo.test.js.snap
index 2df893610..65d2805d3 100644
--- a/src/avatar/__test__/__snapshots__/demo.test.js.snap
+++ b/src/avatar/__test__/__snapshots__/demo.test.js.snap
@@ -3,307 +3,254 @@
 exports[`Avatar Avatar action demo works fine 1`] = `
 <action>
   <wx-view
-    class="row"
+    class="demo-avatar"
   >
-    <t-avatar-group
-      max="5"
-      size="small"
-    >
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/2.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/3.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/4.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/5.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
-      />
-      <t-avatar
-        icon="user-add"
-        slot="collapseAvatar"
-        bind:tap="onAddTap"
-      />
-    </t-avatar-group>
-  </wx-view>
-  <wx-view
-    class="row"
-  >
-    <t-avatar-group
-      max="5"
-      size="40px"
+    <wx-view
+      class="avatar-example"
     >
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/2.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/3.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/4.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/5.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
-      />
-      <t-avatar
-        icon="user-add"
-        slot="collapseAvatar"
-        bind:tap="onAddTap"
-      />
-    </t-avatar-group>
-  </wx-view>
-  <wx-view
-    class="row"
-  >
-    <t-avatar-group
-      max="5"
-      size="medium"
+      <t-avatar-group
+        cascading="left-up"
+        max="5"
+        size="medium"
+      >
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
+        />
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/2.png"
+        />
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/3.png"
+        />
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/4.png"
+        />
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/5.png"
+        />
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
+        />
+        <t-avatar
+          bordered="{{true}}"
+          icon="user-add"
+          slot="collapseAvatar"
+          bind:tap="onAddTap"
+        />
+      </t-avatar-group>
+    </wx-view>
+    <wx-view
+      class="avatar-example"
     >
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/2.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/3.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/4.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/5.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
-      />
-      <t-avatar
-        icon="user-add"
-        slot="collapseAvatar"
-        bind:tap="onAddTap"
-      />
-    </t-avatar-group>
+      <t-avatar-group
+        max="5"
+        size="medium"
+      >
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
+        />
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/2.png"
+        />
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/3.png"
+        />
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/4.png"
+        />
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/5.png"
+        />
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
+        />
+        <t-avatar
+          bordered="{{true}}"
+          icon="user-add"
+          slot="collapseAvatar"
+          bind:tap="onAddTap"
+        />
+      </t-avatar-group>
+    </wx-view>
   </wx-view>
 </action>
 `;
 
-exports[`Avatar Avatar exhibition demo works fine 1`] = `
-<exhibition>
-  <wx-view
-    class="row"
-  >
-    <t-avatar-group
-      cascading="left-up"
-      collapseAvatar="+5"
-      max="5"
-      size="small"
-    >
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
-        size="small"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/2.png"
-        size="small"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/3.png"
-        size="small"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/4.png"
-        size="small"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/5.png"
-        size="small"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
-        size="small"
-      />
-    </t-avatar-group>
-  </wx-view>
-  <wx-view
-    class="row"
-  >
-    <t-avatar-group
-      cascading="left-up"
-      collapseAvatar="+5"
-      max="5"
-      size="40px"
-    >
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/2.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/3.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/4.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/5.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
-      />
-    </t-avatar-group>
-  </wx-view>
-  <wx-view
-    class="row"
-  >
-    <t-avatar-group
-      cascading="left-up"
-      collapseAvatar="+5"
-      max="5"
-      size="medium"
-    >
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/2.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/3.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/4.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/5.png"
-      />
-      <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
-      />
-    </t-avatar-group>
-  </wx-view>
-</exhibition>
-`;
-
-exports[`Avatar Avatar shape demo works fine 1`] = `
-<shape>
+exports[`Avatar Avatar badge-avatar demo works fine 1`] = `
+<badge-avatar>
   <wx-view
-    class="row"
+    class="demo-avatar"
   >
     <wx-view
       class="avatar-example"
     >
       <t-avatar
-        icon="user"
+        badgeProps="{{
+          Object {
+            "dot": true,
+          }
+        }}"
+        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
       />
-      <wx-text
-        class="avatar-description"
-      >
-        默认
-      </wx-text>
     </wx-view>
     <wx-view
       class="avatar-example"
     >
       <t-avatar
-        alt="avatar"
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
-      />
-      <wx-text
-        class="avatar-description"
+        badgeProps="{{
+          Object {
+            "count": 8,
+          }
+        }}"
+        tClassContent="external-class-content"
       >
-        用户
-      </wx-text>
+        A
+      </t-avatar>
     </wx-view>
     <wx-view
       class="avatar-example"
     >
       <t-avatar
-        alt="avatar"
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
-        shape="circle"
+        badgeProps="{{
+          Object {
+            "count": 12,
+          }
+        }}"
+        icon="user"
       />
-      <wx-text
-        class="avatar-description"
-      >
-        圆形
-      </wx-text>
     </wx-view>
+  </wx-view>
+</badge-avatar>
+`;
+
+exports[`Avatar Avatar character-avatar demo works fine 1`] = `
+<character-avatar>
+  <wx-view
+    class="demo-avatar"
+  >
     <wx-view
       class="avatar-example"
     >
       <t-avatar
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
-        shape="round"
-      />
-      <wx-text
-        class="avatar-description"
+        tClassContent="external-class-content"
       >
-        方形
-      </wx-text>
+        A
+      </t-avatar>
     </wx-view>
     <wx-view
-      class="avatar-example text"
+      class="avatar-example"
     >
       <t-avatar
+        shape="round"
         tClassContent="external-class-content"
       >
         A
       </t-avatar>
-      <wx-text
-        class="avatar-description"
-      >
-        自定义文字
-      </wx-text>
     </wx-view>
   </wx-view>
-</shape>
+</character-avatar>
 `;
 
-exports[`Avatar Avatar size demo works fine 1`] = `
-<size>
+exports[`Avatar Avatar exhibition demo works fine 1`] = `
+<exhibition>
   <wx-view
-    class="row"
+    class="demo-avatar"
   >
-    <wx-text
-      class="row-text-64 row-text-common"
-    >
-      L
-    </wx-text>
-    <wx-text
-      class="row-text-48 row-text-common"
+    <wx-view
+      class="avatar-example"
     >
-      M
-    </wx-text>
-    <wx-text
-      class="row-text-32 row-text-common"
+      <t-avatar-group
+        cascading="left-up"
+        collapseAvatar="+5"
+        max="5"
+        size="medium"
+      >
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
+        />
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/2.png"
+        />
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/3.png"
+        />
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/4.png"
+        />
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/5.png"
+        />
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
+        />
+      </t-avatar-group>
+    </wx-view>
+    <wx-view
+      class="avatar-example"
     >
-      S
-    </wx-text>
+      <t-avatar-group
+        collapseAvatar="+5"
+        max="5"
+        size="medium"
+      >
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
+        />
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/2.png"
+        />
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/3.png"
+        />
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/4.png"
+        />
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/5.png"
+        />
+        <t-avatar
+          bordered="{{true}}"
+          image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
+        />
+      </t-avatar-group>
+    </wx-view>
   </wx-view>
+</exhibition>
+`;
+
+exports[`Avatar Avatar icon-avatar demo works fine 1`] = `
+<icon-avatar>
   <wx-view
-    class="row"
+    class="demo-avatar"
   >
     <wx-view
       class="avatar-example"
     >
       <t-avatar
         icon="user"
-        size="large"
       />
     </wx-view>
     <wx-view
@@ -311,30 +258,46 @@ exports[`Avatar Avatar size demo works fine 1`] = `
     >
       <t-avatar
         icon="user"
-        size="medium"
+        shape="round"
       />
     </wx-view>
+  </wx-view>
+</icon-avatar>
+`;
+
+exports[`Avatar Avatar image-avatar demo works fine 1`] = `
+<image-avatar>
+  <wx-view
+    class="demo-avatar"
+  >
     <wx-view
       class="avatar-example"
     >
       <t-avatar
-        icon="user"
-        size="small"
+        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
+      />
+    </wx-view>
+    <wx-view
+      class="avatar-example"
+    >
+      <t-avatar
+        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
+        shape="round"
       />
     </wx-view>
   </wx-view>
+</image-avatar>
+`;
+
+exports[`Avatar Avatar size demo works fine 1`] = `
+<size>
   <wx-view
-    class="row"
+    class="demo-avatar"
   >
     <wx-view
       class="avatar-example"
     >
       <t-avatar
-        badgeProps="{{
-          Object {
-            "count": 16,
-          }
-        }}"
         image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
         size="large"
       />
@@ -343,93 +306,66 @@ exports[`Avatar Avatar size demo works fine 1`] = `
       class="avatar-example"
     >
       <t-avatar
-        badgeProps="{{
-          Object {
-            "count": 8,
-          }
-        }}"
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
-        size="medium"
-      />
+        size="large"
+        tClassContent="external-class-content"
+      >
+        A
+      </t-avatar>
     </wx-view>
     <wx-view
       class="avatar-example"
     >
       <t-avatar
-        badgeProps="{{
-          Object {
-            "dot": true,
-          }
-        }}"
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
-        size="small"
+        icon="user"
+        size="large"
       />
     </wx-view>
   </wx-view>
   <wx-view
-    class="row"
+    class="demo-avatar"
   >
     <wx-view
       class="avatar-example"
     >
       <t-avatar
-        badgeProps="{{
-          Object {
-            "count": 16,
-          }
-        }}"
         image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
-        shape="round"
-        size="large"
       />
     </wx-view>
     <wx-view
       class="avatar-example"
     >
       <t-avatar
-        badgeProps="{{
-          Object {
-            "count": 8,
-          }
-        }}"
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
-        shape="round"
         size="medium"
-      />
+        tClassContent="external-class-content"
+      >
+        A
+      </t-avatar>
     </wx-view>
     <wx-view
       class="avatar-example"
     >
       <t-avatar
-        badgeProps="{{
-          Object {
-            "dot": true,
-          }
-        }}"
-        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
-        shape="round"
-        size="small"
+        icon="user"
+        size="medium"
       />
     </wx-view>
   </wx-view>
   <wx-view
-    class="row bottom-row"
+    class="demo-avatar"
   >
     <wx-view
       class="avatar-example"
     >
       <t-avatar
-        size="large"
-        tClassContent="external-class-content"
-      >
-        A
-      </t-avatar>
+        image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
+        size="small"
+      />
     </wx-view>
     <wx-view
       class="avatar-example"
     >
       <t-avatar
-        size="medium"
+        size="small"
         tClassContent="external-class-content"
       >
         A
@@ -439,11 +375,9 @@ exports[`Avatar Avatar size demo works fine 1`] = `
       class="avatar-example"
     >
       <t-avatar
+        icon="user"
         size="small"
-        tClassContent="external-class-content"
-      >
-        A
-      </t-avatar>
+      />
     </wx-view>
   </wx-view>
 </size>
diff --git a/src/avatar/__test__/demo.test.js b/src/avatar/__test__/demo.test.js
index 2bd487f13..61d0931f4 100644
--- a/src/avatar/__test__/demo.test.js
+++ b/src/avatar/__test__/demo.test.js
@@ -5,7 +5,7 @@
 import simulate from 'miniprogram-simulate';
 import path from 'path';
 
-const mapper = ['action', 'exhibition', 'shape', 'size'];
+const mapper = ['action', 'badge-avatar', 'character-avatar', 'exhibition', 'icon-avatar', 'image-avatar', 'size'];
 
 describe('Avatar', () => {
   mapper.forEach((demoName) => {
diff --git a/src/avatar/_example/action/index.wxml b/src/avatar/_example/action/index.wxml
index 9cce1d717..b1556e1ab 100644
--- a/src/avatar/_example/action/index.wxml
+++ b/src/avatar/_example/action/index.wxml
@@ -1,18 +1,14 @@
-<view class="row">
-  <t-avatar-group max="5" size="small">
-    <t-avatar wx:for="{{pics}}" wx:for-item="pic" wx:key="index" image="{{pic}}" />
-    <t-avatar slot="collapseAvatar" icon="user-add" bindtap="onAddTap" />
-  </t-avatar-group>
-</view>
-<view class="row">
-  <t-avatar-group max="5" size="40px">
-    <t-avatar wx:for="{{pics}}" wx:for-item="pic" wx:key="index" image="{{pic}}" />
-    <t-avatar slot="collapseAvatar" icon="user-add" bindtap="onAddTap" />
-  </t-avatar-group>
-</view>
-<view class="row">
-  <t-avatar-group max="5" size="medium">
-    <t-avatar wx:for="{{pics}}" wx:for-item="pic" wx:key="index" image="{{pic}}" />
-    <t-avatar slot="collapseAvatar" icon="user-add" bindtap="onAddTap" />
-  </t-avatar-group>
+<view class="demo-avatar">
+  <view class="avatar-example">
+    <t-avatar-group max="5" cascading="left-up" size="medium">
+      <t-avatar wx:for="{{pics}}" wx:for-item="pic" wx:key="index" image="{{pic}}" bordered />
+      <t-avatar slot="collapseAvatar" icon="user-add" bindtap="onAddTap" bordered />
+    </t-avatar-group>
+  </view>
+  <view class="avatar-example">
+    <t-avatar-group max="5" size="medium">
+      <t-avatar wx:for="{{pics}}" wx:for-item="pic" wx:key="index" image="{{pic}}" bordered />
+      <t-avatar slot="collapseAvatar" icon="user-add" bindtap="onAddTap" bordered />
+    </t-avatar-group>
+  </view>
 </view>
diff --git a/src/avatar/_example/action/index.wxss b/src/avatar/_example/action/index.wxss
index da12df4ac..5e1de9bc0 100644
--- a/src/avatar/_example/action/index.wxss
+++ b/src/avatar/_example/action/index.wxss
@@ -1,3 +1,7 @@
-.row {
-  margin: 20rpx 0;
+.demo-avatar {
+  margin: 0 32rpx;
+}
+
+.avatar-example {
+  margin-bottom: 48rpx;
 }
diff --git a/src/avatar/_example/avatar.json b/src/avatar/_example/avatar.json
index 56e0632e9..86d187813 100644
--- a/src/avatar/_example/avatar.json
+++ b/src/avatar/_example/avatar.json
@@ -2,7 +2,10 @@
   "navigationBarTitleText": "Avatar",
   "navigationBarBackgroundColor": "#fff",
   "usingComponents": {
-    "shape": "./shape",
+    "imageAvatar": "./image-avatar",
+    "characterAvatar": "./character-avatar",
+    "iconAvatar": "./icon-avatar",
+    "badgeAvatar": "./badge-avatar",
     "size": "./size",
     "exhibition": "./exhibition",
     "action": "./action"
diff --git a/src/avatar/_example/avatar.less b/src/avatar/_example/avatar.less
index fbe3ba300..62af19de8 100644
--- a/src/avatar/_example/avatar.less
+++ b/src/avatar/_example/avatar.less
@@ -2,6 +2,9 @@ page {
   background: #fff;
 }
 
+.demo-avatar {
+  margin: 0 32rpx;
+}
 .desc {
   margin: 10rpx 32rpx;
   color: #999;
diff --git a/src/avatar/_example/avatar.wxml b/src/avatar/_example/avatar.wxml
index dc81ff93b..4cbb810c1 100644
--- a/src/avatar/_example/avatar.wxml
+++ b/src/avatar/_example/avatar.wxml
@@ -1,22 +1,27 @@
-<view class="demo-title">Avatar 头像</view>
-<view class="demo-desc">用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。</view>
-<t-demo title="01 类型" desc="头像样式可为默认头像、微信头像圆形、方形、自定义文字">
-  <view class="desc">
-    <shape />
-  </view>
-</t-demo>
-<t-demo title="02 特殊类型" desc="纯展示 从上往下">
-  <view class="desc">
+<view class="demo">
+  <view class="demo-title">Avatar 头像</view>
+  <view class="demo-desc">用于告知用户，该区域的状态变化或者待处理任务的数量。</view>
+  <t-demo title="01 头像类型" desc="图片头像">
+    <imageAvatar />
+  </t-demo>
+  <t-demo desc="字符头像">
+    <characterAvatar />
+  </t-demo>
+  <t-demo desc="图标头像">
+    <iconAvatar />
+  </t-demo>
+  <t-demo desc="徽标头像">
+    <badgeAvatar />
+  </t-demo>
+
+  <t-demo title="02 组合头像" desc="纯展示">
     <exhibition />
-  </view>
-</t-demo>
-<t-demo desc="带操作 从下往上">
-  <view class="desc">
+  </t-demo>
+  <t-demo desc="带操作">
     <action />
-  </view>
-</t-demo>
-<t-demo title="03 规格" desc="头像大小尺寸及消息提醒">
-  <view class="desc">
+  </t-demo>
+
+  <t-demo title="03 头像尺寸" desc="头像 large/medium/small 尺寸">
     <size />
-  </view>
-</t-demo>
+  </t-demo>
+</view>
diff --git a/src/avatar/_example/shape/index.js b/src/avatar/_example/badge-avatar/index.js
similarity index 100%
rename from src/avatar/_example/shape/index.js
rename to src/avatar/_example/badge-avatar/index.js
diff --git a/src/avatar/_example/shape/index.json b/src/avatar/_example/badge-avatar/index.json
similarity index 100%
rename from src/avatar/_example/shape/index.json
rename to src/avatar/_example/badge-avatar/index.json
diff --git a/src/avatar/_example/badge-avatar/index.wxml b/src/avatar/_example/badge-avatar/index.wxml
new file mode 100644
index 000000000..6071b94ae
--- /dev/null
+++ b/src/avatar/_example/badge-avatar/index.wxml
@@ -0,0 +1,11 @@
+<view class="demo-avatar">
+  <view class="avatar-example">
+    <t-avatar image="{{image}}" badge-props="{{ {dot: true} }}" />
+  </view>
+  <view class="avatar-example">
+    <t-avatar badge-props="{{ {count: 8} }}" t-class-content="external-class-content">A</t-avatar>
+  </view>
+  <view class="avatar-example">
+    <t-avatar icon="user" badge-props="{{ {count: 12} }}" />
+  </view>
+</view>
diff --git a/src/avatar/_example/badge-avatar/index.wxss b/src/avatar/_example/badge-avatar/index.wxss
new file mode 100644
index 000000000..481f27de1
--- /dev/null
+++ b/src/avatar/_example/badge-avatar/index.wxss
@@ -0,0 +1,14 @@
+.demo-avatar {
+  display: flex;
+  margin: 0 32rpx;
+}
+
+.avatar-example {
+  margin-right: 64rpx;
+}
+
+.external-class-content {
+  color: #fff;
+  background-color: #0052d9;
+  font-weight: 400;
+}
diff --git a/src/avatar/_example/character-avatar/index.js b/src/avatar/_example/character-avatar/index.js
new file mode 100644
index 000000000..a0fa916a6
--- /dev/null
+++ b/src/avatar/_example/character-avatar/index.js
@@ -0,0 +1,5 @@
+Component({
+  data: {
+    image: 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png',
+  },
+});
diff --git a/src/avatar/_example/character-avatar/index.json b/src/avatar/_example/character-avatar/index.json
new file mode 100644
index 000000000..bbacd2e40
--- /dev/null
+++ b/src/avatar/_example/character-avatar/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-avatar": "tdesign-miniprogram/avatar/avatar"
+  }
+}
diff --git a/src/avatar/_example/character-avatar/index.wxml b/src/avatar/_example/character-avatar/index.wxml
new file mode 100644
index 000000000..f0e042b60
--- /dev/null
+++ b/src/avatar/_example/character-avatar/index.wxml
@@ -0,0 +1,8 @@
+<view class="demo-avatar">
+  <view class="avatar-example">
+    <t-avatar t-class-content="external-class-content">A</t-avatar>
+  </view>
+  <view class="avatar-example">
+    <t-avatar shape="round" t-class-content="external-class-content">A</t-avatar>
+  </view>
+</view>
diff --git a/src/avatar/_example/character-avatar/index.wxss b/src/avatar/_example/character-avatar/index.wxss
new file mode 100644
index 000000000..481f27de1
--- /dev/null
+++ b/src/avatar/_example/character-avatar/index.wxss
@@ -0,0 +1,14 @@
+.demo-avatar {
+  display: flex;
+  margin: 0 32rpx;
+}
+
+.avatar-example {
+  margin-right: 64rpx;
+}
+
+.external-class-content {
+  color: #fff;
+  background-color: #0052d9;
+  font-weight: 400;
+}
diff --git a/src/avatar/_example/exhibition/index.wxml b/src/avatar/_example/exhibition/index.wxml
index 2121aef7e..bdbf8f36b 100644
--- a/src/avatar/_example/exhibition/index.wxml
+++ b/src/avatar/_example/exhibition/index.wxml
@@ -1,15 +1,12 @@
-<view class="row">
-  <t-avatar-group cascading="left-up" max="5" collapseAvatar="+5" size="small">
-    <t-avatar wx:for="{{pics}}" wx:for-item="pic" wx:key="index" image="{{pic}}" size="small" />
-  </t-avatar-group>
-</view>
-<view class="row">
-  <t-avatar-group cascading="left-up" max="5" collapseAvatar="+5" size="40px">
-    <t-avatar wx:for="{{pics}}" wx:for-item="pic" wx:key="index" image="{{pic}}" />
-  </t-avatar-group>
-</view>
-<view class="row">
-  <t-avatar-group max="5" cascading="left-up" collapseAvatar="+5" size="medium">
-    <t-avatar wx:for="{{pics}}" wx:for-item="pic" wx:key="index" image="{{pic}}" />
-  </t-avatar-group>
+<view class="demo-avatar">
+  <view class="avatar-example">
+    <t-avatar-group max="5" cascading="left-up" collapseAvatar="+5" size="medium">
+      <t-avatar wx:for="{{pics}}" wx:for-item="pic" wx:key="index" image="{{pic}}" bordered />
+    </t-avatar-group>
+  </view>
+  <view class="avatar-example">
+    <t-avatar-group max="5" collapseAvatar="+5" size="medium">
+      <t-avatar wx:for="{{pics}}" wx:for-item="pic" wx:key="index" image="{{pic}}" bordered />
+    </t-avatar-group>
+  </view>
 </view>
diff --git a/src/avatar/_example/exhibition/index.wxss b/src/avatar/_example/exhibition/index.wxss
index da12df4ac..5e1de9bc0 100644
--- a/src/avatar/_example/exhibition/index.wxss
+++ b/src/avatar/_example/exhibition/index.wxss
@@ -1,3 +1,7 @@
-.row {
-  margin: 20rpx 0;
+.demo-avatar {
+  margin: 0 32rpx;
+}
+
+.avatar-example {
+  margin-bottom: 48rpx;
 }
diff --git a/src/avatar/_example/icon-avatar/index.js b/src/avatar/_example/icon-avatar/index.js
new file mode 100644
index 000000000..a0fa916a6
--- /dev/null
+++ b/src/avatar/_example/icon-avatar/index.js
@@ -0,0 +1,5 @@
+Component({
+  data: {
+    image: 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png',
+  },
+});
diff --git a/src/avatar/_example/icon-avatar/index.json b/src/avatar/_example/icon-avatar/index.json
new file mode 100644
index 000000000..bbacd2e40
--- /dev/null
+++ b/src/avatar/_example/icon-avatar/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-avatar": "tdesign-miniprogram/avatar/avatar"
+  }
+}
diff --git a/src/avatar/_example/icon-avatar/index.wxml b/src/avatar/_example/icon-avatar/index.wxml
new file mode 100644
index 000000000..71aa27f9d
--- /dev/null
+++ b/src/avatar/_example/icon-avatar/index.wxml
@@ -0,0 +1,8 @@
+<view class="demo-avatar">
+  <view class="avatar-example">
+    <t-avatar icon="user" />
+  </view>
+  <view class="avatar-example">
+    <t-avatar shape="round" icon="user" />
+  </view>
+</view>
diff --git a/src/avatar/_example/icon-avatar/index.wxss b/src/avatar/_example/icon-avatar/index.wxss
new file mode 100644
index 000000000..557ab64f8
--- /dev/null
+++ b/src/avatar/_example/icon-avatar/index.wxss
@@ -0,0 +1,8 @@
+.demo-avatar {
+  display: flex;
+  margin: 0 32rpx;
+}
+
+.avatar-example {
+  margin-right: 64rpx;
+}
diff --git a/src/avatar/_example/image-avatar/index.js b/src/avatar/_example/image-avatar/index.js
new file mode 100644
index 000000000..a0fa916a6
--- /dev/null
+++ b/src/avatar/_example/image-avatar/index.js
@@ -0,0 +1,5 @@
+Component({
+  data: {
+    image: 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png',
+  },
+});
diff --git a/src/avatar/_example/image-avatar/index.json b/src/avatar/_example/image-avatar/index.json
new file mode 100644
index 000000000..bbacd2e40
--- /dev/null
+++ b/src/avatar/_example/image-avatar/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-avatar": "tdesign-miniprogram/avatar/avatar"
+  }
+}
diff --git a/src/avatar/_example/image-avatar/index.wxml b/src/avatar/_example/image-avatar/index.wxml
new file mode 100644
index 000000000..09f8ced62
--- /dev/null
+++ b/src/avatar/_example/image-avatar/index.wxml
@@ -0,0 +1,8 @@
+<view class="demo-avatar">
+  <view class="avatar-example">
+    <t-avatar image="{{image}}" />
+  </view>
+  <view class="avatar-example">
+    <t-avatar shape="round" image="{{image}}" />
+  </view>
+</view>
diff --git a/src/avatar/_example/image-avatar/index.wxss b/src/avatar/_example/image-avatar/index.wxss
new file mode 100644
index 000000000..557ab64f8
--- /dev/null
+++ b/src/avatar/_example/image-avatar/index.wxss
@@ -0,0 +1,8 @@
+.demo-avatar {
+  display: flex;
+  margin: 0 32rpx;
+}
+
+.avatar-example {
+  margin-right: 64rpx;
+}
diff --git a/src/avatar/_example/shape/index.wxml b/src/avatar/_example/shape/index.wxml
deleted file mode 100644
index 16a5f7825..000000000
--- a/src/avatar/_example/shape/index.wxml
+++ /dev/null
@@ -1,22 +0,0 @@
-<view class="row">
-  <view class="avatar-example">
-    <t-avatar icon="user" />
-    <text class="avatar-description">默认</text>
-  </view>
-  <view class="avatar-example">
-    <t-avatar image="{{image}}" alt="avatar" />
-    <text class="avatar-description">用户</text>
-  </view>
-  <view class="avatar-example">
-    <t-avatar shape="circle" image="{{image}}" alt="avatar" />
-    <text class="avatar-description">圆形</text>
-  </view>
-  <view class="avatar-example">
-    <t-avatar shape="round" image="{{image}}" />
-    <text class="avatar-description">方形</text>
-  </view>
-  <view class="avatar-example text">
-    <t-avatar t-class-content="external-class-content">A</t-avatar>
-    <text class="avatar-description">自定义文字</text>
-  </view>
-</view>
diff --git a/src/avatar/_example/shape/index.wxss b/src/avatar/_example/shape/index.wxss
deleted file mode 100644
index 2fb489adb..000000000
--- a/src/avatar/_example/shape/index.wxss
+++ /dev/null
@@ -1,22 +0,0 @@
-.row {
-  display: flex;
-  justify-content: space-between;
-}
-
-.avatar-example {
-  text-align: center;
-  font-size: 24rpx;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
-.avatar-example .avatar-description {
-  margin-top: 16rpx;
-}
-
-.external-class-content {
-  color: #fff;
-  background-color: #0052d9;
-  font-weight: 400;
-}
diff --git a/src/avatar/_example/size/index.wxml b/src/avatar/_example/size/index.wxml
index 066fc9654..5e8dcf517 100644
--- a/src/avatar/_example/size/index.wxml
+++ b/src/avatar/_example/size/index.wxml
@@ -1,49 +1,33 @@
-<view class="row">
-  <text class="row-text-64 row-text-common">L</text>
-  <text class="row-text-48 row-text-common">M</text>
-  <text class="row-text-32 row-text-common">S</text>
-</view>
-<view class="row">
-  <view class="avatar-example">
-    <t-avatar icon="user" size="large" />
-  </view>
-  <view class="avatar-example">
-    <t-avatar icon="user" size="medium" />
-  </view>
-  <view class="avatar-example">
-    <t-avatar icon="user" size="small" />
-  </view>
-</view>
-<view class="row">
+<view class="demo-avatar">
   <view class="avatar-example">
-    <t-avatar image="{{image}}" size="large" badge-props="{{ {count: 16} }}" />
+    <t-avatar image="{{image}}" size="large" />
   </view>
   <view class="avatar-example">
-    <t-avatar image="{{image}}" size="medium" badge-props="{{ {count: 8} }}" />
+    <t-avatar t-class-content="external-class-content" size="large">A</t-avatar>
   </view>
   <view class="avatar-example">
-    <t-avatar image="{{image}}" size="small" badge-props="{{ {dot: true} }}" />
+    <t-avatar icon="user" size="large" />
   </view>
 </view>
-<view class="row">
+<view class="demo-avatar">
   <view class="avatar-example">
-    <t-avatar shape="round" image="{{image}}" badge-props="{{ {count: 16} }}" size="large" />
+    <t-avatar image="{{image}}" />
   </view>
   <view class="avatar-example">
-    <t-avatar shape="round" image="{{image}}" badge-props="{{ {count: 8} }}" size="medium" />
+    <t-avatar t-class-content="external-class-content" size="medium">A</t-avatar>
   </view>
   <view class="avatar-example">
-    <t-avatar shape="round" image="{{image}}" badge-props="{{ {dot: true} }}" size="small" />
+    <t-avatar icon="user" size="medium" />
   </view>
 </view>
-<view class="row bottom-row">
+<view class="demo-avatar">
   <view class="avatar-example">
-    <t-avatar t-class-content="external-class-content" size="large">A</t-avatar>
+    <t-avatar image="{{image}}" size="small" />
   </view>
   <view class="avatar-example">
-    <t-avatar t-class-content="external-class-content" size="medium">A</t-avatar>
+    <t-avatar t-class-content="external-class-content" size="small">A</t-avatar>
   </view>
   <view class="avatar-example">
-    <t-avatar t-class-content="external-class-content" size="small">A</t-avatar>
+    <t-avatar icon="user" size="small" />
   </view>
 </view>
diff --git a/src/avatar/_example/size/index.wxss b/src/avatar/_example/size/index.wxss
index f52cdcf2e..655d2c6e2 100644
--- a/src/avatar/_example/size/index.wxss
+++ b/src/avatar/_example/size/index.wxss
@@ -1,31 +1,10 @@
-.row {
+.demo-avatar {
   display: flex;
-  margin: 20rpx 0;
+  margin: 0 32rpx 48rpx;
 }
 
 .avatar-example {
-  text-align: center;
-  font-size: 24rpx;
-  display: flex;
-  flex-direction: column;
-  margin-right: 60rpx;
-}
-
-.row-text-64 {
-  width: 128rpx;
-}
-
-.row-text-48 {
-  width: 96rpx;
-}
-
-.row-text-32 {
-  width: 64rpx;
-}
-
-.row-text-common {
-  text-align: center;
-  margin-right: 60rpx;
+  margin-right: 64rpx;
 }
 
 .external-class-content {
@@ -33,7 +12,3 @@
   background-color: #0052d9;
   font-weight: 400;
 }
-
-.bottom-row {
-  padding-bottom: 64rpx;
-}
diff --git a/src/avatar/avatar-group.less b/src/avatar/avatar-group.less
index 90e9aa278..b6f00c633 100644
--- a/src/avatar/avatar-group.less
+++ b/src/avatar/avatar-group.less
@@ -1,13 +1,4 @@
 @import '../common/style/index.less';
-@import './common.less';
-
-@avatar-group-small-width: 64rpx;
-@avatar-group-medium-width: 80rpx;
-@avatar-group-large-width: 96rpx;
-
-@avatar-group-small-font-size: @font-size-s;
-@avatar-group-medium-font-size: @font-size-m;
-@avatar-group-large-font-size: @font-size * 1.8;
 
 //组合头像偏移量
 @avatar-group-offset-small: -4px;
@@ -36,29 +27,29 @@
 
   &-offset-left {
     &-small {
-      .avatat-offset-left(@avatar-group-offset-small);
+      .avatat-offset-left(var(--td-avatar-group-margin-left-small, @avatar-group-offset-small)); // ‘small’尺寸组合头像左偏移间距
     }
 
     &-medium {
-      .avatat-offset-left(@avatar-group-offset-medium);
+      .avatat-offset-left(var(--td-avatar-group-margin-left-medium, @avatar-group-offset-medium)); // ‘medium’尺寸组合头像左偏移间距
     }
 
     &-large {
-      .avatat-offset-left(@avatar-group-offset-large);
+      .avatat-offset-left(var(--td-avatar-group-margin-left-large, @avatar-group-offset-large)); // ‘large’尺寸组合头像左偏移间距
     }
   }
 
   &-offset-right {
     &-small {
-      .avatat-offset-right(@avatar-group-offset-small);
+      .avatat-offset-right(var(--td-avatar-group-margin-left-small, @avatar-group-offset-small)); // ‘small’尺寸组合头像右偏移间距
     }
 
     &-medium {
-      .avatat-offset-right(@avatar-group-offset-medium);
+      .avatat-offset-right(var(--td-avatar-group-margin-left-medium, @avatar-group-offset-medium)); // ‘medium’尺寸组合头像右偏移间距
     }
 
     &-large {
-      .avatat-offset-right(@avatar-group-offset-large);
+      .avatat-offset-right(var(--td-avatar-group-margin-left-large, @avatar-group-offset-large)); // ‘large’尺寸组合头像右偏移间距
     }
   }
 
diff --git a/src/avatar/avatar-group.ts b/src/avatar/avatar-group.ts
index 30ebe41d6..da18a79c5 100644
--- a/src/avatar/avatar-group.ts
+++ b/src/avatar/avatar-group.ts
@@ -17,7 +17,6 @@ export default class AvatarGroup extends SuperComponent {
     hasChild: true,
     length: 0,
     className: '',
-    borderSize: '',
   };
 
   options = {
@@ -41,7 +40,6 @@ export default class AvatarGroup extends SuperComponent {
     this.handleChildSlot(this.properties.max, this.children, this.handleChildMax);
     this.handleChildSize(this.properties.size, this.children);
     this.handleChildCascading(this.properties.cascading, this.children);
-    this.handleChildBorder(this.properties.size, this.children);
   }
 
   lifetimes = {
@@ -141,14 +139,5 @@ export default class AvatarGroup extends SuperComponent {
         child.updateCascading(defaultZIndex - index * 10);
       });
     },
-    handleChildBorder(size, children) {
-      const borderSize = this.isINcludePX(size) ? 'medium' : size;
-      this.setData({
-        borderSize,
-      });
-      children.forEach((child) => {
-        child.updateBorder(borderSize);
-      });
-    },
   };
 }
diff --git a/src/avatar/avatar-group.wxml b/src/avatar/avatar-group.wxml
index 930f5eb96..7d242f171 100644
--- a/src/avatar/avatar-group.wxml
+++ b/src/avatar/avatar-group.wxml
@@ -7,8 +7,9 @@
   <!-- 默认折叠元素 -->
   <view class="{{classPrefix}}__collapse--default" wx:if="{{max && (max < length)}}">
     <t-avatar
-      t-class-image="border--{{borderSize}} {{prefix}}-class-image"
+      t-class-image="{{prefix}}-class-image"
       t-class-content="{{prefix}}-class-content"
+      bordered="{{true}}"
       size="{{size}}"
       >{{collapseAvatar || '+N'}}</t-avatar
     >
diff --git a/src/avatar/avatar.less b/src/avatar/avatar.less
index 14565990f..dea4cccfe 100644
--- a/src/avatar/avatar.less
+++ b/src/avatar/avatar.less
@@ -1,68 +1,62 @@
 @import '../common/style/index.less';
-@import './common.less';
 
-@avatar-small-width: 64rpx;
+@avatar-bg-color: @primary-color-2;
+@avatar-content-color: @primary-color;
+@avatar-small-width: 80rpx;
 @avatar-medium-width: 96rpx;
 @avatar-large-width: 128rpx;
 
-@avatar-small-font-size: @font-size-base;
-@avatar-medium-font-size: @font-size-l;
-@avatar-large-font-size: @font-size * 2.6;
+@avatar-text-small-font-size: @font-size-s;
+@avatar-text-medium-font-size: @font-size-base;
+@avatar-text-large-font-size: 16px;
 
-@avatar-bg-color: #d4e3fc;
-@avatar-content-color: #0052d9;
+@avatar-icon-small-font-size: 40rpx;
+@avatar-icon-medium-font-size: 48rpx;
+@avatar-icon-large-font-size: 64rpx;
 
-page {
-  --td-avatar-bg-color: @avatar-bg-color;
-  --td-avatar-content-color: @avatar-content-color;
-}
+@avatar-border-width-small: 4rpx;
+@avatar-border-width-medium: 6rpx;
+@avatar-border-width-large: 8rpx;
+@avatar-border-color: #fff;
+@avatar-circle-border-radius: @radius-circle;
+@avatar-round-border-radius: @radius-default;
 
 .@{prefix}-avatar {
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-
-  &__wrapper {
-    float: left;
-    position: relative;
-    background-color: var(--td-avatar-bg-color, @avatar-bg-color);
-    color: var(--td-avatar-content-color, @avatar-content-color);
-    border-radius: 999rpx;
-
-    .@{prefix}-badge {
-      &-host {
-        position: absolute;
-      }
-
-      &__round {
-        top: -10%;
-        right: -10%;
-      }
-
-      &__circle {
-        top: -5%;
-        right: -5%;
-      }
-    }
-  }
+  background-color: var(--td-avatar-bg-color, @avatar-bg-color); // 头像背景颜色
+  color: var(--td-avatar-content-color, @avatar-content-color); // 头像内容（文字、图标）颜色
 
   &.@{prefix}-size-l {
-    width: @avatar-large-width;
-    height: @avatar-large-width;
-    font-size: @avatar-large-font-size;
+    width: var(--td-avatar-large-width, @avatar-large-width); // ‘large'尺寸头像宽高
+    height: var(--td-avatar-large-width, @avatar-large-width);
+    font-size: var(--td-avatar-text-large-font-size, @avatar-text-large-font-size); // ‘large'尺寸头像文本大小
+
+    .@{prefix}-avatar__icon {
+      font-size: var(--td-avatar-icon-large-font-size, @avatar-icon-large-font-size); // ‘large'尺寸头像图标大小
+    }
   }
 
   &.@{prefix}-size-m {
-    width: @avatar-medium-width;
-    height: @avatar-medium-width;
-    font-size: @avatar-medium-font-size;
+    width: var(--td-avatar-medium-width, @avatar-medium-width); // ‘medium’尺寸头像宽高
+    height: var(--td-avatar-medium-width, @avatar-medium-width);
+    font-size: var(--td-avatar-text-medium-font-size, @avatar-text-medium-font-size); // ‘medium'尺寸头像文本大小
+
+    .@{prefix}-avatar__icon {
+      font-size: var(--ts-avatar-icon-medium-font-size, @avatar-icon-medium-font-size); // ‘medium'尺寸头像图标大小
+    }
   }
 
   &.@{prefix}-size-s {
-    width: @avatar-small-width;
-    height: @avatar-small-width;
-    font-size: @avatar-small-font-size;
+    width: var(--td-avatar-small-width, @avatar-small-width); // ‘small’尺寸头像宽高
+    height: var(--td-avatar-small-width, @avatar-small-width);
+    font-size: var(--td-avatar-text-small-font-size, @avatar-text-small-font-size); // ‘small'尺寸头像文本大小
+
+    .@{prefix}-avatar__icon {
+      font-size: var(--td-avatar-icon-small-font-size, @avatar-icon-small-font-size); // ‘small'尺寸头像图标大小
+    }
   }
 
   .@{prefix}-image,
@@ -72,27 +66,42 @@ page {
   }
 
   &--circle {
-    border-radius: 999rpx;
+    border-radius: var(--td-avatar-circle-border-radius, @avatar-circle-border-radius); // ‘circle’类型头像圆角大小
     overflow: hidden;
   }
 
   &--round {
-    border-radius: 10rpx;
+    border-radius: var(--td-avatar-round-border-radius, @avatar-round-border-radius); // ‘round’类型头像圆角大小
     overflow: hidden;
   }
 
   &__text,
   &__icon {
-    font-size: inherit;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-
     &:empty {
       width: 0;
       height: 0;
     }
   }
+
+  //头像边框
+  &--border {
+    border-color: var(--td-avatar-border-color, @avatar-border-color); // 头像边框颜色
+    border-style: solid;
+    &--small {
+      border-width: var(--td-avatar-border-width-small, @avatar-border-width-small); // ‘small'尺寸头像边框宽度
+    }
+
+    &--medium {
+      border-width: var(--td-avatar-border-width-medium, @avatar-border-width-medium); // ‘medium'尺寸头像边框宽度
+    }
+
+    &--large {
+      border-width: var(--td-avatar-border-width-large, @avatar-border-width-large); // ‘large'尺寸头像边框宽度
+    }
+  }
 }
diff --git a/src/avatar/avatar.ts b/src/avatar/avatar.ts
index b8adffd96..69a20e0f1 100644
--- a/src/avatar/avatar.ts
+++ b/src/avatar/avatar.ts
@@ -27,7 +27,6 @@ export default class Avatar extends SuperComponent {
     isShow: true,
     zIndex: 0,
     isChild: false,
-    borderSize: '',
   };
 
   relations: RelationsOptions = {
@@ -71,10 +70,6 @@ export default class Avatar extends SuperComponent {
     updateCascading(zIndex) {
       this.setData({ zIndex });
     },
-
-    updateBorder(borderSize) {
-      this.setData({ borderSize });
-    },
   };
 
   onLoadError(e: any) {
diff --git a/src/avatar/avatar.wxml b/src/avatar/avatar.wxml
index 6d0061477..5635d4840 100644
--- a/src/avatar/avatar.wxml
+++ b/src/avatar/avatar.wxml
@@ -1,40 +1,51 @@
 <wxs src="./avatar.wxs" module="this" />
 
 <view class="{{classPrefix}}__wrapper {{prefix}}-class" style="{{this.getAvatarStyles(isShow, zIndex, customStyle)}}">
-  <view
-    class="{{this.getAvatarOuterClass(classPrefix, size, shape)}} border--{{borderSize}} {{prefix}}-class-image "
-    style="{{this.getAvatarSizePx(size)}}"
-  >
-    <t-image
-      wx:if="{{image}}"
-      class="{{prefix}}-image"
-      t-class-load="{{prefix}}-class-alt"
-      t-class="{{classPrefix}}__image"
-      src="{{image}}"
-      mode="aspectFill"
-      binderror="onLoadError"
-      loadFailed="{{alt}}"
-    />
-    <view
-      wx:elif="{{icon}}"
-      class="{{classPrefix}}__icon {{this.getIconClass(classPrefix, size)}} {{prefix}}-class-icon"
-    >
-      <t-icon name="{{icon}}" />
-    </view>
-    <view wx:else class="{{classPrefix}}__text {{prefix}}-class-content">
-      <slot />
-    </view>
-  </view>
   <t-badge
-    class="{{prefix}}-badge-host {{prefix}}-badge__{{shape === 'circle' ? 'circle' : 'round'}}"
-    wx:if="{{badgeProps.dot || badgeProps.count}}"
     color="{{badgeProps.color}}"
+    content="{{badgeProps.content}}"
     count="{{badgeProps.count}}"
-    max-count="{{badgeProps.maxCount || 100}}"
     dot="{{badgeProps.dot}}"
-    content="{{badgeProps.content}}"
-    size="{{badgeProps.size}}"
-    visible="{{badgeProps.visible}}"
+    max-count="{{badgeProps.maxCount || 99}}"
     offset="{{badgeProps.offset}}"
-  />
+    shape="{{badgeProps.shape || 'circle'}}"
+    show-zero="{{badgeProps.showZero}}"
+    size="{{badgeProps.size || 'medium'}}"
+    t-class="{{badgeProps.tClass}}"
+    t-class-content="{{badgeProps.tClassContent}}"
+    t-class-count="{{badgeProps.tClassCount}}"
+  >
+    <view
+      class="{{this.getAvatarOuterClass(classPrefix, size, shape, bordered)}} {{prefix}}-class-image "
+      style="{{this.getAvatarSizePx(size)}}"
+    >
+      <t-image
+        wx:if="{{image}}"
+        class="{{prefix}}-image"
+        t-class="{{classPrefix}}__image"
+        t-class-load="{{prefix}}-class-alt"
+        customStyle="{{imageProps.customStyle}}"
+        src="{{image}}"
+        mode="{{imageProps.mode || 'aspectFill'}}"
+        lazy="{{imageProps.lazy}}"
+        loading="{{imageProps.loading}}"
+        shape="{{imageProps.shape || 'round'}}"
+        webp="{{imageProps.webp}}"
+        error="{{alt}}"
+        bind:error="onLoadError"
+      />
+      <t-icon
+        wx:elif="{{icon}}"
+        name="{{icon || iconProps.name}}"
+        prefix="{{iconProps.prefix}}"
+        size="{{iconProps.size}}"
+        color="{{iconProps.color}}"
+        customStyle="{{iconProps.customStyle}}"
+        class="{{classPrefix}}__icon {{prefix}}-class-icon"
+      ></t-icon>
+      <view wx:else class="{{classPrefix}}__text {{prefix}}-class-content">
+        <slot />
+      </view>
+    </view>
+  </t-badge>
 </view>
diff --git a/src/avatar/avatar.wxs b/src/avatar/avatar.wxs
index b6f3531ee..c248c03d3 100644
--- a/src/avatar/avatar.wxs
+++ b/src/avatar/avatar.wxs
@@ -1,9 +1,11 @@
 module.exports = {
-  getAvatarOuterClass: function (classPrefix, size, shape) {
+  getAvatarOuterClass: function (classPrefix, size, shape, bordered) {
     var isIncludePx = size.indexOf('px') > -1;
+    var borderSize = isIncludePx ? 'medium' : size;
     var classNames = [
       classPrefix,
       classPrefix + (shape === 'round' ? '--round' : '--circle'),
+      bordered ? classPrefix + '--border' + ' ' + classPrefix + '--border--' + borderSize : '',
       isIncludePx ? '' : 't-size-' + (size || 'medium').slice(0, 1),
     ];
     return classNames.join(' ');
@@ -21,9 +23,4 @@ module.exports = {
     var zIndexStyle = zIndex ? 'z-index:' + zIndex + ';' : '';
     return displayStyle + zIndexStyle + customStyle;
   },
-
-  getIconClass: function (classPrefix, size) {
-    if (size.indexOf('px') > -1) return;
-    return classPrefix + '__icon--default-' + (size || 'medium').slice(0, 1);
-  },
 };
diff --git a/src/avatar/common.less b/src/avatar/common.less
deleted file mode 100644
index 4c43488cc..000000000
--- a/src/avatar/common.less
+++ /dev/null
@@ -1,25 +0,0 @@
-//组合头像边框大小
-@avatar-border-width-small: 4rpx;
-@avatar-border-width-medium: 6rpx;
-@avatar-border-width-large: 8rpx;
-
-@avatar-group-border-color: #fff;
-
-page {
-  --td-avatar-group-border-color: @avatar-group-border-color;
-}
-
-//组合头像边框
-.border {
-  &--small {
-    border: @avatar-border-width-small solid var(--td-avatar-group-border-color, @avatar-group-border-color);
-  }
-
-  &--medium {
-    border: @avatar-border-width-medium solid var(--td-avatar-group-border-color, @avatar-group-border-color);
-  }
-
-  &--large {
-    border: @avatar-border-width-large solid var(--td-avatar-group-border-color, @avatar-group-border-color);
-  }
-}
diff --git a/src/avatar/props.ts b/src/avatar/props.ts
index cdecfc103..668d4ecc7 100644
--- a/src/avatar/props.ts
+++ b/src/avatar/props.ts
@@ -33,6 +33,11 @@ const props: TdAvatarProps = {
   icon: {
     type: String,
   },
+  /** 图标属性，透传至 icon */
+  iconProps: {
+    type: Object,
+    value: {},
+  },
   /** 图片地址 */
   image: {
     type: String,
@@ -52,6 +57,11 @@ const props: TdAvatarProps = {
     type: String,
     value: '',
   },
+  /** 是否显示外边框 */
+  bordered: {
+    type: Boolean,
+    value: false,
+  },
 };
 
 export default props;
diff --git a/src/avatar/type.ts b/src/avatar/type.ts
index eff1080f7..c790d0ca7 100644
--- a/src/avatar/type.ts
+++ b/src/avatar/type.ts
@@ -52,6 +52,14 @@ export interface TdAvatarProps {
     type: StringConstructor;
     value?: string;
   };
+  /**
+   * 图标属性，透传至 icon
+   * @default {}
+   */
+  iconProps?: {
+    type: ObjectConstructor;
+    value?: object;
+  };
   /**
    * 图片地址
    * @default ''
@@ -83,6 +91,14 @@ export interface TdAvatarProps {
     type: StringConstructor;
     value?: string;
   };
+  /**
+   * 是否显示外边框
+   * @default true
+   */
+  bordered?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
 }
 
 export interface TdAvatarGroupProps {
diff --git a/src/badge/badge.less b/src/badge/badge.less
index b3990f6f7..ea918041e 100644
--- a/src/badge/badge.less
+++ b/src/badge/badge.less
@@ -15,6 +15,7 @@
 .@{prefix}-badge {
   position: relative;
   display: inline-block;
+  vertical-align: top;
 
   &--basic {
     display: inline-block;