@arco-design/mobile-react 2.19.2-ee92494.5 → 2.20.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.20.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.19.1...@arco-design/mobile-react@2.20.0) (2022-08-12)
+
+
+### Bug Fixes
+
+* `Button` support coverIconWhenLoading ([#33](https://github.com/arco-design/arco-design-mobile/issues/33)) ([2ef79f5](https://github.com/arco-design/arco-design-mobile/commit/2ef79f5f77081682075d00beb8639c87515aa4b3))
+* `Dropdown` support customize select icon & value of string type ([9eb6f5d](https://github.com/arco-design/arco-design-mobile/commit/9eb6f5db76d2a1975e61a478d897522cf8bcbf8e))
+* `DropdownMenu` optimize renderSelectLabel params ([1c685fd](https://github.com/arco-design/arco-design-mobile/commit/1c685fd85851f6735d1d91dc49c6f28ade0a858c))
+* `ImagePicker` optimize display when uploading ([eba85a4](https://github.com/arco-design/arco-design-mobile/commit/eba85a46bfadddc5924f8cd89f614416bdb0e3c1))
+* `NavBar` trigger caculation when showOffset changes ([06119ce](https://github.com/arco-design/arco-design-mobile/commit/06119ceeefb286ac963dae0f8b49a1112063d1b9))
+* `ShowMonitor` support flush visible status ([#31](https://github.com/arco-design/arco-design-mobile/issues/31)) ([b5e12b2](https://github.com/arco-design/arco-design-mobile/commit/b5e12b27cd464cc137be810bea828850934072b0))
+* `Steps` converge style to token ([6cf4f26](https://github.com/arco-design/arco-design-mobile/commit/6cf4f267a271dc0d03f559c4aca8199f9fcae2ec))
+* components classname optimize: `Avatar` & `Button` & `Badge` ([cba4ac4](https://github.com/arco-design/arco-design-mobile/commit/cba4ac4bfafbe4edd53019b2c2ee314e092e409b))
+
+
+### Features
+
+* add new component `ImagePicker` ([#24](https://github.com/arco-design/arco-design-mobile/issues/24)) ([73f6156](https://github.com/arco-design/arco-design-mobile/commit/73f615651f46dc670f29733f6b99ec56795fc48b))
+
+
+
+
+
 ## [2.19.1](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.19.0...@arco-design/mobile-react@2.19.1) (2022-07-22)
 
 

package/README.en-US.md

@@ -89,7 +89,7 @@ npm install babel-plugin-import -D
 plugins: [
     ["import", {
         "libraryName": "@arco-design/mobile-react",
-        "libraryDirectory": "esm",
+        "libraryDirectory": "esm", // In SSR environment, you need to use `cjs` here
         "style": (path) => `${path}/style`,
     }]
 ]
@@ -102,7 +102,7 @@ plugins: [
 ```js
 plugins: [
     ["import", {
-        "libraryName": "@arco-design/mobile-react/esm/icon",
+        "libraryName": "@arco-design/mobile-react/esm/icon", // In SSR environment, you need to replace `esm` with `cjs`
         "libraryDirectory": "",
         "camel2DashComponentName": false,
     }]
@@ -115,11 +115,11 @@ If both **component** and **Icon** need to be imported on demand, you need to ad
 plugins: [
     ["import", {
         "libraryName": "@arco-design/mobile-react",
-        "libraryDirectory": "esm",
+        "libraryDirectory": "esm", // In SSR environment, you need to use `cjs` here
         "style": (path) => `${path}/style`
     }, "@arco-design/mobile-react"],
     ["import", {
-        "libraryName": "@arco-design/mobile-react/esm/icon",
+        "libraryName": "@arco-design/mobile-react/esm/icon", // In SSR environment, you need to replace `esm` with `cjs`
         "libraryDirectory": "",
         "camel2DashComponentName": false
     }, "@arco-design/mobile-react/esm/icon"]

package/README.md

@@ -89,7 +89,7 @@ npm install babel-plugin-import -D
 plugins: [
     ["import", {
         "libraryName": "@arco-design/mobile-react",
-        "libraryDirectory": "esm",
+        "libraryDirectory": "esm", // 注意如果是 SSR 环境，这里需使用 `cjs`
         "style": (path) => `${path}/style`,
     }]
 ]
@@ -102,7 +102,7 @@ plugins: [
 ```js
 plugins: [
     ["import", {
-        "libraryName": "@arco-design/mobile-react/esm/icon",
+        "libraryName": "@arco-design/mobile-react/esm/icon", // 注意如果是 SSR 环境，这里需将 `esm` 替换为 `cjs`
         "libraryDirectory": "",
         "camel2DashComponentName": false,
     }]
@@ -115,11 +115,11 @@ plugins: [
 plugins: [
     ["import", {
         "libraryName": "@arco-design/mobile-react",
-        "libraryDirectory": "esm",
+        "libraryDirectory": "esm", // 注意如果是 SSR 环境，这里需使用 `cjs`
         "style": (path) => `${path}/style`
     }, "@arco-design/mobile-react"],
     ["import", {
-        "libraryName": "@arco-design/mobile-react/esm/icon",
+        "libraryName": "@arco-design/mobile-react/esm/icon", // 注意如果是 SSR 环境，这里需将 `esm` 替换为 `cjs`
         "libraryDirectory": "",
         "camel2DashComponentName": false
     }, "@arco-design/mobile-react/esm/icon"]

package/cjs/avatar/group.js

@@ -57,7 +57,7 @@ var Group = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: domRef,
     style: style,
-    className: (0, _mobileUtils.cls)(className, prefixCls + "-avatar-group", "group-" + size)
+    className: (0, _mobileUtils.cls)(className, prefixCls + "-avatar-group", prefixCls + "-avatar-group-size-" + size, "group-" + size)
   }, /*#__PURE__*/_react.default.createElement(AvatarGroupContext.Provider, {
     value: {
       isGroup: true,

package/cjs/avatar/index.js

@@ -38,7 +38,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function componentGenerator(Comp) {
   return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-    var _cls;
+    var _cls, _cls2;
 
     var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
         prefixCls = _useContext.prefixCls;
@@ -77,10 +77,7 @@ function componentGenerator(Comp) {
         style = _props$style === void 0 ? {} : _props$style,
         _props$imageProps = props.imageProps,
         imageProps = _props$imageProps === void 0 ? {} : _props$imageProps,
-        _props$defaultOverLap = props.defaultOverLap,
-        defaultOverLap = _props$defaultOverLap === void 0 ? /*#__PURE__*/_react.default.createElement(_IconUserFill.default, {
-      className: prefixCls + "-avatar-default"
-    }) : _props$defaultOverLap,
+        defaultOverLap = props.defaultOverLap,
         onClickDecoration = props.onClickDecoration,
         onClick = props.onClick;
     var domRef = (0, _react.useRef)(null);
@@ -140,19 +137,19 @@ function componentGenerator(Comp) {
     return /*#__PURE__*/_react.default.createElement("div", {
       ref: domRef,
       style: style,
-      className: (0, _mobileUtils.cls)(prefixCls + "-avatar-wrapper", className, size, shape, {
-        'with-info': Boolean(avatarName)
-      }),
+      className: (0, _mobileUtils.cls)(prefixCls + "-avatar-wrapper", className, size, shape, prefixCls + "-avatar-wrapper-shape-" + shape, (_cls = {}, _cls[prefixCls + "-avatar-wrapper-with-info " + prefixCls + "-avatar-wrapper-with-info-size-" + size + " with-info"] = Boolean(avatarName), _cls)),
       onClick: onClick
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _mobileUtils.cls)(prefixCls + "-avatar", size, shape, (_cls = {}, _cls[prefixCls + "-text-avatar"] = isTextAvatar, _cls[prefixCls + "-image-avatar"] = isImageAvatar, _cls['default-overlap'] = useDefaultAvatar, _cls)),
+      className: (0, _mobileUtils.cls)(prefixCls + "-avatar", prefixCls + "-avatar-size-" + size, size, prefixCls + "-avatar-shape-" + shape, shape, (_cls2 = {}, _cls2[prefixCls + "-text-avatar " + prefixCls + "-avatar-mode-text"] = isTextAvatar, _cls2[prefixCls + "-image-avatar " + prefixCls + "-avatar-mode-image"] = isImageAvatar, _cls2[prefixCls + "-avatar-default-overlap default-overlap"] = useDefaultAvatar, _cls2)),
       style: avatarStyle,
       ref: avatarRef
-    }, children, useDefaultAvatar && defaultOverLap, isImageAvatar && src && /*#__PURE__*/_react.default.createElement(Comp, (0, _extends2.default)({
+    }, children, useDefaultAvatar && (defaultOverLap === void 0 ? /*#__PURE__*/_react.default.createElement(_IconUserFill.default, {
+      className: prefixCls + "-avatar-default " + prefixCls + "-avatar-default-icon-size-" + size
+    }) : defaultOverLap), isImageAvatar && src && /*#__PURE__*/_react.default.createElement(Comp, (0, _extends2.default)({
       className: prefixCls + "-avatar-img",
       src: src
     }, imageProps)), isTextAvatar && /*#__PURE__*/_react.default.createElement("span", {
-      className: prefixCls + "-avatar-text",
+      className: prefixCls + "-avatar-text " + prefixCls + "-avatar-text-size-" + size,
       ref: avatarTextRef,
       style: {
         transform: "scale(" + textScale + ")"
@@ -163,9 +160,9 @@ function componentGenerator(Comp) {
     }, decoration)), renderInfo, !renderInfo && avatarName && /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _mobileUtils.cls)(prefixCls + "-avatar-info")
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _mobileUtils.cls)(prefixCls + "-avatar-name")
+      className: prefixCls + "-avatar-name " + prefixCls + "-avatar-name-size-" + size
     }, avatarName), avatarDesc && /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _mobileUtils.cls)(prefixCls + "-avatar-desc")
+      className: prefixCls + "-avatar-desc " + prefixCls + "-avatar-desc-size-" + size
     }, avatarDesc)));
   });
 }

package/cjs/avatar/style/css/index.css

@@ -1,74 +1,3 @@
-.arco-avatar-wrapper {
-  display: inline-block;
-}
-.arco-avatar-wrapper.with-info.ultra-small {
-  height:  1.12rem ;
-}
-.arco-avatar-wrapper.ultra-small .arco-avatar-name {
-  font-size:  0.26rem ;
-  line-height:  0.36rem ;
-}
-.arco-avatar-wrapper.ultra-small .arco-avatar-desc {
-  margin-top:  0.04rem ;
-  font-size:  0.2rem ;
-  line-height:  0.28rem ;
-}
-.arco-avatar-wrapper.with-info.smaller {
-  height:  1.28rem ;
-}
-.arco-avatar-wrapper.smaller .arco-avatar-name {
-  font-size:  0.28rem ;
-  line-height:  0.4rem ;
-}
-.arco-avatar-wrapper.smaller .arco-avatar-desc {
-  margin-top:  0 ;
-  font-size:  0.24rem ;
-  line-height:  0.32rem ;
-}
-.arco-avatar-wrapper.with-info.small {
-  height:  1.6rem ;
-}
-.arco-avatar-wrapper.small .arco-avatar-name {
-  font-size:  0.32rem ;
-  line-height:  0.48rem ;
-}
-.arco-avatar-wrapper.small .arco-avatar-desc {
-  margin-top:  0 ;
-  font-size:  0.24rem ;
-  line-height:  0.32rem ;
-}
-.arco-avatar-wrapper.with-info.medium {
-  height:  1.6rem ;
-}
-.arco-avatar-wrapper.medium .arco-avatar-name {
-  font-size:  0.36rem ;
-  line-height:  0.52rem ;
-}
-.arco-avatar-wrapper.medium .arco-avatar-desc {
-  margin-top:  0.04rem ;
-  font-size:  0.28rem ;
-  line-height:  0.4rem ;
-}
-.arco-avatar-wrapper.with-info.large {
-  height:  1.76rem ;
-}
-.arco-avatar-wrapper.large .arco-avatar-name {
-  font-size:  0.36rem ;
-  line-height:  0.52rem ;
-}
-.arco-avatar-wrapper.large .arco-avatar-desc {
-  margin-top:  0.04rem ;
-  font-size:  0.28rem ;
-  line-height:  0.4rem ;
-}
-.arco-avatar-wrapper.with-info {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-          align-items: center;
-}
 .arco-avatar {
   position: relative;
   font-size: 0;
@@ -84,104 +13,134 @@
   color:  #fff ;
   background-color:  #4080FF ;
 }
-.arco-avatar.arco-image-avatar {
+.arco-avatar-mode-image {
   background-color: transparent;
 }
-.arco-avatar.default-overlap {
+.arco-avatar-default-overlap {
   background-color:  #c9cdd4 ;
 }
-.arco-avatar.circle {
+.arco-avatar-shape-circle {
   border-radius: 50%;
 }
-.arco-avatar.circle .arco-avatar-img .image-content {
+.arco-avatar-shape-circle .arco-avatar-img .image-content {
   border-radius: 50%;
 }
-.arco-avatar.square {
+.arco-avatar-shape-square {
   border-radius: 0.08rem;
 }
-.arco-avatar.square .arco-avatar-img .image-content {
+.arco-avatar-shape-square .arco-avatar-img .image-content {
   border-radius: 0.08rem;
 }
-.arco-avatar.group-ultra-small .arco-avatar-wrapper {
-  margin-left:  -0.16rem ;
-}
-.arco-avatar.group-ultra-small .arco-avatar {
-  border-width:  0.02rem ;
-}
-.arco-avatar.ultra-small {
+.arco-avatar-size-ultra-small {
   width:  0.48rem ;
   height:  0.48rem ;
 }
-.arco-avatar.ultra-small .arco-avatar-default {
+.arco-avatar-default-icon-size-ultra-small {
   font-size:  0.24rem ;
 }
-.arco-avatar.ultra-small .arco-avatar-text {
+.arco-avatar-text-size-ultra-small {
   font-size:  0.2rem ;
 }
-.arco-avatar.group-smaller .arco-avatar-wrapper {
-  margin-left:  -0.16rem ;
+.arco-avatar-wrapper-with-info-size-ultra-small {
+  height:  1.12rem ;
 }
-.arco-avatar.group-smaller .arco-avatar {
-  border-width:  0.02rem ;
+.arco-avatar-name-size-ultra-small {
+  font-size:  0.26rem ;
+  line-height:  0.36rem ;
 }
-.arco-avatar.smaller {
+.arco-avatar-desc-size-ultra-small {
+  margin-top:  0.04rem ;
+  font-size:  0.2rem ;
+  line-height:  0.28rem ;
+}
+.arco-avatar-size-smaller {
   width:  0.64rem ;
   height:  0.64rem ;
 }
-.arco-avatar.smaller .arco-avatar-default {
+.arco-avatar-default-icon-size-smaller {
   font-size:  0.32rem ;
 }
-.arco-avatar.smaller .arco-avatar-text {
+.arco-avatar-text-size-smaller {
   font-size:  0.24rem ;
 }
-.arco-avatar.group-small .arco-avatar-wrapper {
-  margin-left:  -0.24rem ;
+.arco-avatar-wrapper-with-info-size-smaller {
+  height:  1.28rem ;
 }
-.arco-avatar.group-small .arco-avatar {
-  border-width:  0.03rem ;
+.arco-avatar-name-size-smaller {
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
 }
-.arco-avatar.small {
+.arco-avatar-desc-size-smaller {
+  margin-top:  0 ;
+  font-size:  0.24rem ;
+  line-height:  0.32rem ;
+}
+.arco-avatar-size-small {
   width:  0.8rem ;
   height:  0.8rem ;
 }
-.arco-avatar.small .arco-avatar-default {
+.arco-avatar-default-icon-size-small {
   font-size:  0.4rem ;
 }
-.arco-avatar.small .arco-avatar-text {
+.arco-avatar-text-size-small {
   font-size:  0.28rem ;
 }
-.arco-avatar.group-medium .arco-avatar-wrapper {
-  margin-left:  -0.24rem ;
+.arco-avatar-wrapper-with-info-size-small {
+  height:  1.6rem ;
 }
-.arco-avatar.group-medium .arco-avatar {
-  border-width:  0.03rem ;
+.arco-avatar-name-size-small {
+  font-size:  0.32rem ;
+  line-height:  0.48rem ;
+}
+.arco-avatar-desc-size-small {
+  margin-top:  0 ;
+  font-size:  0.24rem ;
+  line-height:  0.32rem ;
 }
-.arco-avatar.medium {
+.arco-avatar-size-medium {
   width:  0.96rem ;
   height:  0.96rem ;
 }
-.arco-avatar.medium .arco-avatar-default {
+.arco-avatar-default-icon-size-medium {
   font-size:  0.48rem ;
 }
-.arco-avatar.medium .arco-avatar-text {
+.arco-avatar-text-size-medium {
   font-size:  0.32rem ;
 }
-.arco-avatar.group-large .arco-avatar-wrapper {
-  margin-left:  -0.24rem ;
+.arco-avatar-wrapper-with-info-size-medium {
+  height:  1.6rem ;
 }
-.arco-avatar.group-large .arco-avatar {
-  border-width:  0.03rem ;
+.arco-avatar-name-size-medium {
+  font-size:  0.36rem ;
+  line-height:  0.52rem ;
+}
+.arco-avatar-desc-size-medium {
+  margin-top:  0.04rem ;
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
 }
-.arco-avatar.large {
+.arco-avatar-size-large {
   width:  1.12rem ;
   height:  1.12rem ;
 }
-.arco-avatar.large .arco-avatar-default {
+.arco-avatar-default-icon-size-large {
   font-size:  0.56rem ;
 }
-.arco-avatar.large .arco-avatar-text {
+.arco-avatar-text-size-large {
   font-size:  0.32rem ;
 }
+.arco-avatar-wrapper-with-info-size-large {
+  height:  1.76rem ;
+}
+.arco-avatar-name-size-large {
+  font-size:  0.36rem ;
+  line-height:  0.52rem ;
+}
+.arco-avatar-desc-size-large {
+  margin-top:  0.04rem ;
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
+}
 .arco-avatar-img {
   width: 100%;
   height: 100%;
@@ -195,6 +154,17 @@
           flex: 0 0 auto;
   font-weight: bold;
 }
+.arco-avatar-wrapper {
+  display: inline-block;
+}
+.arco-avatar-wrapper-with-info {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
 .arco-avatar-info {
   display: -webkit-box;
   display: -webkit-flex;
@@ -214,43 +184,43 @@
 .arco-avatar-desc {
   color:  #86909c ;
 }
-.arco-avatar-group .arco-avatar-wrapper.circle {
+.arco-avatar-group .arco-avatar-wrapper-shape-circle {
   position: relative;
 }
-.arco-avatar-group .arco-avatar-wrapper.circle:first-child {
+.arco-avatar-group .arco-avatar-wrapper-shape-circle:first-child {
   margin-left: 0;
 }
 .arco-avatar-group .arco-avatar {
   border-style: solid;
   border-color:  #ffffff ;
 }
-.arco-avatar-group.group-ultra-small .arco-avatar-wrapper {
+.arco-avatar-group-size-ultra-small .arco-avatar-wrapper {
   margin-left:  -0.16rem ;
 }
-.arco-avatar-group.group-ultra-small .arco-avatar {
+.arco-avatar-group-size-ultra-small .arco-avatar {
   border-width:  0.02rem ;
 }
-.arco-avatar-group.group-smaller .arco-avatar-wrapper {
+.arco-avatar-group-size-smaller .arco-avatar-wrapper {
   margin-left:  -0.16rem ;
 }
-.arco-avatar-group.group-smaller .arco-avatar {
+.arco-avatar-group-size-smaller .arco-avatar {
   border-width:  0.02rem ;
 }
-.arco-avatar-group.group-small .arco-avatar-wrapper {
+.arco-avatar-group-size-small .arco-avatar-wrapper {
   margin-left:  -0.24rem ;
 }
-.arco-avatar-group.group-small .arco-avatar {
+.arco-avatar-group-size-small .arco-avatar {
   border-width:  0.03rem ;
 }
-.arco-avatar-group.group-medium .arco-avatar-wrapper {
+.arco-avatar-group-size-medium .arco-avatar-wrapper {
   margin-left:  -0.24rem ;
 }
-.arco-avatar-group.group-medium .arco-avatar {
+.arco-avatar-group-size-medium .arco-avatar {
   border-width:  0.03rem ;
 }
-.arco-avatar-group.group-large .arco-avatar-wrapper {
+.arco-avatar-group-size-large .arco-avatar-wrapper {
   margin-left:  -0.24rem ;
 }
-.arco-avatar-group.group-large .arco-avatar {
+.arco-avatar-group-size-large .arco-avatar {
   border-width:  0.03rem ;
 }

package/cjs/avatar/style/index.less

@@ -2,16 +2,6 @@
 
 @size-map: @avatar-size-map;
 
-.@{prefix}-avatar-wrapper {
-    display: inline-block;
-    .set-with-info-avatar-size(length(@size-map));
-
-    &.with-info {
-        display: flex;
-        align-items: center;
-    }
-}
-
 .@{prefix}-avatar {
     position: relative;
     font-size: 0;
@@ -20,21 +10,23 @@
     justify-content: center;
     .use-var(color, avatar-text-font-color);
     .use-var(background-color, avatar-background);
-    &.@{prefix}-image-avatar {
+
+    &-mode-image {
         background-color: transparent;
     }
 
-    &.default-overlap {
+    &-default-overlap {
         .use-var(background-color, avatar-default-overlap-background);
     }
 
-    &.circle {
+    &-shape-circle {
         .set-avatar-radius(50%);
     }
 
-    &.square {
+    &-shape-square {
         .set-avatar-radius(.08rem);
     }
+
     .set-avatar-size(length(@size-map));
 
     &-img {
@@ -50,26 +42,34 @@
         flex: 0 0 auto;
         font-weight: bold;
     }
-}
 
-.@{prefix}-avatar-info {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    .rem(margin-left, 16);
-}
+    &-wrapper {
+        display: inline-block;
 
-.@{prefix}-avatar-name {
-    .use-var(color, avatar-name-color);
-}
+        &-with-info {
+            display: flex;
+            align-items: center;
+        }
+    }
 
-.@{prefix}-avatar-desc {
-    .use-var(color, avatar-desc-color);
-}
+    &-info {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        .rem(margin-left, 16);
+    }
 
+    &-name {
+        .use-var(color, avatar-name-color);
+    }
+
+    &-desc {
+        .use-var(color, avatar-desc-color);
+    }
+}
 
 .@{prefix}-avatar-group {
-    .@{prefix}-avatar-wrapper.circle {
+    .@{prefix}-avatar-wrapper-shape-circle {
         position: relative; // 为了让z-index属性生效
 
         &:first-child {
@@ -92,39 +92,12 @@
     }
 }
 
-// 循环设置各头像大小的属性
-
-.set-with-info-avatar-size(@index) when (@index > 0) {
-
-    @size: extract(@size-map, @index);
-
-    // 有辅助信息的样式
-    &.with-info.@{size} {
-        .use-var(height, "avatar-info-box-@{size}-size");
-    }
-
-    // 用户名样式
-    &.@{size} .@{prefix}-avatar-name {
-        .use-var(font-size, "avatar-name-@{size}-font-size");
-        .use-var(line-height, "avatar-name-@{size}-line-height");
-    }
-
-    // 用户描述样式
-    &.@{size} .@{prefix}-avatar-desc {
-        .use-var(margin-top, "avatar-desc-@{size}-margin-top");
-        .use-var(font-size, "avatar-desc-@{size}-font-size");
-        .use-var(line-height, "avatar-desc-@{size}-line-height");
-    }
-
-    .set-with-info-avatar-size(@index - 1);
-}
-
 // 循环设置头像叠层的样式
 .set-avatar-group-size(@index) when (@index > 0) {
 
     @size: extract(@size-map, @index);
 
-    &.group-@{size} {
+    &-size-@{size} {
         .@{prefix}-avatar-wrapper {
             .use-var(margin-left, "avatar-group-@{size}-size-offset");
         }
@@ -141,24 +114,33 @@
 
     @size: extract(@size-map, @index);
 
-    &.group-@{size} {
-        .@{prefix}-avatar-wrapper {
-            .use-var(margin-left, "avatar-group-@{size}-size-offset");
-        }
-        .@{prefix}-avatar {
-            .use-var(border-width, "avatar-group-@{size}-size-border");
-        }
-    }
-
-    &.@{size} {
+    &-size-@{size} {
         .use-var(width, "avatar-@{size}-size");
         .use-var(height, "avatar-@{size}-size");
-        .@{prefix}-avatar-default {
-            .use-var(font-size, "avatar-default-overlap-@{size}-size");
-        }
-        .@{prefix}-avatar-text {
-            .use-var(font-size, "avatar-@{size}-text-font-size");
-        }
+    }
+    &-default-icon-size-@{size} {
+        .use-var(font-size, "avatar-default-overlap-@{size}-size");
+    }
+    &-text-size-@{size} {
+        .use-var(font-size, "avatar-@{size}-text-font-size");
+    }
+
+    // 有辅助信息的样式
+    &-wrapper-with-info-size-@{size} {
+        .use-var(height, "avatar-info-box-@{size}-size");
+    }
+
+    // 用户名样式
+    &-name-size-@{size} {
+        .use-var(font-size, "avatar-name-@{size}-font-size");
+        .use-var(line-height, "avatar-name-@{size}-line-height");
+    }
+
+    // 用户描述样式
+    &-desc-size-@{size} {
+        .use-var(margin-top, "avatar-desc-@{size}-margin-top");
+        .use-var(font-size, "avatar-desc-@{size}-font-size");
+        .use-var(line-height, "avatar-desc-@{size}-line-height");
     }
 
     .set-avatar-size(@index - 1);