From e46d0bfea31ee77a016a4ffdaa7058eb22c1a170 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 15 Feb 2023 16:03:33 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20tailchat=E6=94=AF=E6=8C=81rem?=
 =?UTF-8?q?=E6=8E=A7=E5=88=B6=E5=85=A8=E5=B1=80=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../design/components/Avatar/index.tsx        | 20 ++++++++++++++-----
 client/web/src/styles/global.less             |  5 +++++
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/client/packages/design/components/Avatar/index.tsx b/client/packages/design/components/Avatar/index.tsx
index ac0364a9..e22b5947 100644
--- a/client/packages/design/components/Avatar/index.tsx
+++ b/client/packages/design/components/Avatar/index.tsx
@@ -5,6 +5,7 @@ import _upperCase from 'lodash/upperCase';
 import _isNil from 'lodash/isNil';
 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 { isValidStr } from '../utils';
@@ -35,18 +36,27 @@ export const Avatar: React.FC<AvatarProps> = React.memo((_props) => {
       userSelect: 'none',
       ...props.style,
       backgroundColor: color,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
     }),
     [props.style, color]
   );
 
-  if (_isNumber(props.size) && typeof style.fontSize === 'undefined') {
-    // 如果props.size是数字且没有指定文字大小
-    // 则自动增加fontSize大小
-    style.fontSize = props.size * 0.4;
+  if (_isNumber(props.size)) {
+    // 为了支持rem统一管理宽度，将size转换为样式宽度(size类型上不支持rem单位)
+    style.width = props.size * (1 / 16) + 'rem';
+    style.height = props.size * (1 / 16) + 'rem';
+
+    if (typeof style.fontSize === 'undefined') {
+      // 如果props.size是数字且没有指定文字大小
+      // 则自动增加fontSize大小
+      style.fontSize = props.size * 0.4 * (1 / 16) + 'rem';
+    }
   }
 
   const inner = (
-    <AntdAvatar {...props} src={src} style={style}>
+    <AntdAvatar {..._omit(props, ['size'])} src={src} style={style}>
       {name}
     </AntdAvatar>
   );
diff --git a/client/web/src/styles/global.less b/client/web/src/styles/global.less
index b0a571f7..2a50b20d 100644
--- a/client/web/src/styles/global.less
+++ b/client/web/src/styles/global.less
@@ -1,5 +1,10 @@
+html {
+  font-size: 14px;
+}
+
 body {
   overflow: hidden; // 在mac上禁用橡皮筋弹动效果，防止出现背景白底 https://stackoverflow.com/questions/29257538/disabling-rubber-band-scrolling-on-macs
+  font-size: inherit;
 }
 
 #tailchat-app {