fix: 修改Avatar宽度策略变更后CombinedAvatar样式异常的bug

client/packages/design/components/Avatar/combined.tsx

@@ -2,6 +2,7 @@ import { Avatar, AvatarProps } from '.';
 import React from 'react';
 import _take from 'lodash/take';
 import './combined.css';
+import { px2rem } from './utils';
 
 interface CombinedAvatarProps {
   shape?: 'circle' | 'square';
@@ -81,8 +82,8 @@ export const CombinedAvatar: React.FC<CombinedAvatarProps> = React.memo(
       <div
         className={`td-combined-avatar td-combined-avatar-${length}`}
         style={{
-          width: size,
+          width: px2rem(size),
-          height: size,
+          height: px2rem(size),
           borderRadius: shape === 'circle' ? '50%' : 3,
         }}
       >

client/packages/design/components/Avatar/index.tsx

@@ -7,7 +7,7 @@ import _isEmpty from 'lodash/isEmpty';
 import _isNumber from 'lodash/isNumber';
 import _omit from 'lodash/omit';
 import type { AvatarProps as AntdAvatarProps } from 'antd/lib/avatar';
-import { getTextColorHex } from './utils';
+import { getTextColorHex, px2rem } from './utils';
 import { isValidStr } from '../utils';
 
 export { getTextColorHex };
@@ -45,13 +45,13 @@ export const Avatar: React.FC<AvatarProps> = React.memo((_props) => {
 
   if (_isNumber(props.size)) {
     // 为了支持rem统一管理宽度，将size转换为样式宽度(size类型上不支持rem单位)
-    style.width = props.size * (1 / 16) + 'rem';
+    style.width = px2rem(props.size);
-    style.height = props.size * (1 / 16) + 'rem';
+    style.height = px2rem(props.size);
 
     if (typeof style.fontSize === 'undefined') {
       // 如果props.size是数字且没有指定文字大小
       // 则自动增加fontSize大小
-      style.fontSize = props.size * 0.4 * (1 / 16) + 'rem';
+      style.fontSize = px2rem(props.size * 0.4);
     }
   }
 

client/packages/design/components/Avatar/utils.ts

@@ -32,3 +32,10 @@ export function getTextColorHex(text: unknown): string {
   const id = str2int(text);
   return colors[id % colors.length];
 }
+
+/**
+ * 将像素转换为rem单位
+ */
+export function px2rem(size: number): string {
+  return size * (1 / 16) + 'rem';
+}