From 4325589a5df6b6c5838565af33617a21a3b0947b Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 20 Aug 2021 20:36:40 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BF=AE=E5=A4=8D=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E6=BB=9A=E5=8A=A8=E9=97=AE=E9=A2=98=E4=B8=8E=E5=B8=A6?=
 =?UTF-8?q?=E5=A4=B4=E5=83=8F=E6=B6=88=E6=81=AF=E7=9A=84=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/ChatBox/ChatMessageList/Item.tsx  | 9 ++++++++-
 web/src/components/ChatBox/ChatMessageList/index.tsx | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/web/src/components/ChatBox/ChatMessageList/Item.tsx b/web/src/components/ChatBox/ChatMessageList/Item.tsx
index 0b32b926..846d4f51 100644
--- a/web/src/components/ChatBox/ChatMessageList/Item.tsx
+++ b/web/src/components/ChatBox/ChatMessageList/Item.tsx
@@ -30,7 +30,14 @@ export const ChatMessageItem: React.FC<ChatMessageItemProps> = React.memo(
           )}
         </div>
         <div className="flex flex-col">
-          {showAvatar && <div className="font-bold">{userInfo.nickname}</div>}
+          {showAvatar && (
+            <div className="flex items-center">
+              <div className="font-bold">{userInfo.nickname}</div>
+              <div className="hidden group-hover:block opacity-40 ml-1 text-sm">
+                {formatShortTime(payload.createdAt)}
+              </div>
+            </div>
+          )}
 
           <div className="leading-6">{payload.content}</div>
         </div>
diff --git a/web/src/components/ChatBox/ChatMessageList/index.tsx b/web/src/components/ChatBox/ChatMessageList/index.tsx
index 3b379626..a4c7177f 100644
--- a/web/src/components/ChatBox/ChatMessageList/index.tsx
+++ b/web/src/components/ChatBox/ChatMessageList/index.tsx
@@ -23,7 +23,7 @@ export const ChatMessageList: React.FC<ChatMessageListProps> = React.memo(
         }
 
         ref.current.scrollTo({
-          top: ref.current.clientHeight,
+          top: ref.current.scrollHeight,
           behavior: 'smooth',
         });
       });