From a27ac2849eb2bdbadeb5a4e55bdedb5f5f050687 Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Tue, 14 Mar 2023 22:04:29 +0800
Subject: [PATCH] fix: text in avatar auto shrink with width

---
 src/common/component/Avatar.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/common/component/Avatar.tsx b/src/common/component/Avatar.tsx
index 46a33c93..df3c559c 100644
--- a/src/common/component/Avatar.tsx
+++ b/src/common/component/Avatar.tsx
@@ -36,10 +36,15 @@ const Avatar: FC<Props> = ({
   if (!error && src) {
     return <img width={width} height={height} src={src} onError={handleError} {...rest} />;
   }
+  // 长度限制在六个字符
+  let initials = getInitials(name).substring(0, 6);
+  const len = initials.length;
+  const scaleVal = len > 2 ? (11 - len) / 10 : 1;
   return (
     <div
       className={`rounded-full flex-center ${rest.className || ""}`}
       style={{
+
         width,
         height,
         fontSize: getFontSize(width),
@@ -49,7 +54,7 @@ const Avatar: FC<Props> = ({
         color: type === "channel" ? "#475467" : "#FFFFFF"
       }}
     >
-      {getInitials(name)}
+      <span className="whitespace-nowrap" style={{ transform: `scale(${scaleVal})` }}>{initials}</span>
     </div>
   );
 };