From d3a6e1b196489ea276be2136a7d1e6f86589aabf Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Thu, 16 Feb 2023 17:54:34 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9Avatar=E5=AE=BD?=
 =?UTF-8?q?=E5=BA=A6=E7=AD=96=E7=95=A5=E5=8F=98=E6=9B=B4=E5=90=8ECombinedA?=
 =?UTF-8?q?vatar=E6=A0=B7=E5=BC=8F=E5=BC=82=E5=B8=B8=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/packages/design/components/Avatar/combined.tsx | 5 +++--
 client/packages/design/components/Avatar/index.tsx    | 8 ++++----
 client/packages/design/components/Avatar/utils.ts     | 7 +++++++
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/client/packages/design/components/Avatar/combined.tsx b/client/packages/design/components/Avatar/combined.tsx
index 1ae5e52b..8057454f 100644
--- a/client/packages/design/components/Avatar/combined.tsx
+++ b/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,
-          height: size,
+          width: px2rem(size),
+          height: px2rem(size),
           borderRadius: shape === 'circle' ? '50%' : 3,
         }}
       >
diff --git a/client/packages/design/components/Avatar/index.tsx b/client/packages/design/components/Avatar/index.tsx
index e22b5947..b827d8da 100644
--- a/client/packages/design/components/Avatar/index.tsx
+++ b/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.height = props.size * (1 / 16) + 'rem';
+    style.width = px2rem(props.size);
+    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);
     }
   }
 
diff --git a/client/packages/design/components/Avatar/utils.ts b/client/packages/design/components/Avatar/utils.ts
index 47d7ccc6..698f8dfb 100644
--- a/client/packages/design/components/Avatar/utils.ts
+++ b/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';
+}