From 0fbcb32565beb547c93886ceb0d2a4c2ad54d0b9 Mon Sep 17 00:00:00 2001
From: yj <1336058017@qq.com>
Date: Thu, 20 Feb 2025 15:44:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96&bug=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UserName/index.tsx             |  4 +++
 src/page/Home/User/index.tsx                  |  3 +++
 src/page/Login/index.tsx                      |  3 +++
 .../Meeting/ChatBigWindow/index.module.scss   |  4 +++
 src/page/Meeting/ChatBigWindow/index.tsx      | 25 ++++++++++++-----
 .../Meeting/ChatSmallWindow/index.module.scss |  2 +-
 src/page/Meeting/NoticeWindow/index.tsx       |  5 +++-
 src/page/Meeting/index.module.scss            |  6 +++++
 src/page/Meeting/index.tsx                    | 27 +++++++++++++------
 9 files changed, 62 insertions(+), 17 deletions(-)

diff --git a/src/components/UserName/index.tsx b/src/components/UserName/index.tsx
index e60c209..6189dbb 100644
--- a/src/components/UserName/index.tsx
+++ b/src/components/UserName/index.tsx
@@ -47,6 +47,10 @@ const UserName = forwardRef((props: any, ref: any) => {
               onClick={async () => {
                 const stateInfo = await JSON.parse(storage.getItem('stateInfo') as string);
                 if (info.userName) {
+                  if (info.userName.length > 10) {
+                    message.error('用户名称最多10个字！')
+                    return
+                  }
                   PutAlterUname({
                     nickName: info.userName,
                     roomNum: stateInfo.channelId,
diff --git a/src/page/Home/User/index.tsx b/src/page/Home/User/index.tsx
index e297033..8ef9195 100644
--- a/src/page/Home/User/index.tsx
+++ b/src/page/Home/User/index.tsx
@@ -458,6 +458,9 @@ const User: React.FC = () => {
               if (!addUserFrom.UserName && isCreateUser !== 'batch') {
                 return message.error('请输入用户名称！')
               }
+              if (addUserFrom.UserName.length > 10) {
+                return message.error('用户名称最多10个字！')
+              }
               if (addUserFrom.year === '') {
                 return message.error('请输入届！')
               }
diff --git a/src/page/Login/index.tsx b/src/page/Login/index.tsx
index e722f49..2fb463b 100644
--- a/src/page/Login/index.tsx
+++ b/src/page/Login/index.tsx
@@ -315,6 +315,9 @@ const Login: React.FC = () => {
               if (!anonInfo.nickName) {
                 return message.error('请输入参会昵称！')
               }
+              if (anonInfo.nickName.length > 10) {
+                return message.error('参会昵称最多10个字！')
+              }
               storage.setItem('loading', true)
               PostAnonLogin(anonInfo).then(async (res) => {
                 if (res.code == 200) {
diff --git a/src/page/Meeting/ChatBigWindow/index.module.scss b/src/page/Meeting/ChatBigWindow/index.module.scss
index 6b65512..6c6b70b 100644
--- a/src/page/Meeting/ChatBigWindow/index.module.scss
+++ b/src/page/Meeting/ChatBigWindow/index.module.scss
@@ -46,6 +46,8 @@
           font-size: 14px;
           color: #F3F3F5;
           margin-left: 4px;
+          display: flex;
+          align-items: center;
         }
 
         >div {}
@@ -77,6 +79,8 @@
         >span {
           font-size: 14px;
           color: #F3F3F5;
+          display: flex;
+          align-items: center;
         }
 
         >div {
diff --git a/src/page/Meeting/ChatBigWindow/index.tsx b/src/page/Meeting/ChatBigWindow/index.tsx
index e87418b..a777ce3 100644
--- a/src/page/Meeting/ChatBigWindow/index.tsx
+++ b/src/page/Meeting/ChatBigWindow/index.tsx
@@ -206,19 +206,30 @@ const ChatBigWindow: React.FC = () => {
                     >移出会议</Button> : null}
                   </div> : <div style={{ color: 'white' }}>用户不在房间内</div>
                 }>
-                <div>
+                <div title={item.userName}>
                   <div><Avatar name={item.userName} /></div>
                   {item.uid !== user.uid ?
-                    <span>{item.userName} <span style={{ fontSize: '12px', color: '#ccc', marginLeft: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')}</span></span> :
-                    <span> <span style={{ fontSize: '12px', color: '#ccc', marginRight: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')} </span>{item.userName}</span>
+                    <span>
+                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '150px' }}>{item.userName}</span>
+                      <span style={{ fontSize: '12px', color: '#ccc', marginLeft: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')}</span>
+                    </span> :
+                    <span>
+                      <span style={{ fontSize: '12px', color: '#ccc', marginRight: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')}</span>
+                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '150px' }}>{item.userName}</span>
+                    </span>
                   }
-
                 </div>
-              </Popover> : <div>
+              </Popover> : <div title={item.userName}>
                 <div><Avatar name={item.userName} /></div>
                 {item.uid !== user.uid ?
-                  <span>{item.userName}<span style={{ fontSize: '12px', color: '#ccc', marginLeft: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')}</span></span> :
-                  <span><span style={{ fontSize: '12px', color: '#ccc', marginRight: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')} </span>{item.userName}</span>
+                  <span>
+                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '150px' }}>{item.userName}</span>
+                    <span style={{ fontSize: '12px', color: '#ccc', marginLeft: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')}</span>
+                  </span> :
+                  <span>
+                    <span style={{ fontSize: '12px', color: '#ccc', marginRight: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')}</span>
+                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '150px' }}>{item.userName}</span>
+                  </span>
                 }
               </div>}
               <div>{item.message}</div>
diff --git a/src/page/Meeting/ChatSmallWindow/index.module.scss b/src/page/Meeting/ChatSmallWindow/index.module.scss
index a5de0b3..b0dd6c1 100644
--- a/src/page/Meeting/ChatSmallWindow/index.module.scss
+++ b/src/page/Meeting/ChatSmallWindow/index.module.scss
@@ -31,7 +31,7 @@
         display: flex;
 
         >span:nth-child(1) {
-          white-space: nowrap;
+          word-break: break-all;
           color: #ff970f;
         }
 
diff --git a/src/page/Meeting/NoticeWindow/index.tsx b/src/page/Meeting/NoticeWindow/index.tsx
index 6a00b7b..58930d2 100644
--- a/src/page/Meeting/NoticeWindow/index.tsx
+++ b/src/page/Meeting/NoticeWindow/index.tsx
@@ -21,7 +21,10 @@ const NoticeWindow: React.FC = () => {
           api.open({
             message: '',
             description: <div>
-              <span style={{ fontSize: '16px' }}>{noticeItem.uname}申请发言</span>
+              <div style={{ fontSize: '16px' }}>
+                <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={noticeItem.uname}>{noticeItem.uname}</div>
+                <div>申请发言</div>
+              </div>
               <div style={{ display: 'flex', justifyContent: 'flex-end' }} className='drag'>
                 <Button
                   type="primary"
diff --git a/src/page/Meeting/index.module.scss b/src/page/Meeting/index.module.scss
index ac1ef37..3fcc979 100644
--- a/src/page/Meeting/index.module.scss
+++ b/src/page/Meeting/index.module.scss
@@ -549,6 +549,8 @@
                   font-size: 14px;
                   color: #F3F3F5;
                   margin-left: 4px;
+                  display: flex;
+                  align-items: center;
                 }
 
                 >div {
@@ -660,6 +662,8 @@
                   font-size: 14px;
                   color: #F3F3F5;
                   margin-left: 4px;
+                  display: flex;
+                  align-items: center;
                 }
               }
 
@@ -689,6 +693,8 @@
                 >span {
                   font-size: 14px;
                   color: #F3F3F5;
+                  display: flex;
+                  align-items: center;
                 }
 
                 >div {
diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
index e7c43e7..5bc43e6 100644
--- a/src/page/Meeting/index.tsx
+++ b/src/page/Meeting/index.tsx
@@ -2943,7 +2943,7 @@ const Meeting: React.FC = () => {
                               <div>
                                 <div><Avatar name={item.userName} /></div>
                                 <span>
-                                  {item.userName}{item.uid === user.uid ? '(我)' : ''}
+                                  <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '80px' }} title={item.userName}>{item.userName}</span>{item.uid === user.uid ? '(我)' : ''}
                                   {role.ID.includes(item.roleId) || item.isRoomManager ?
                                     <span style={{ color: '#02B188', marginLeft: '4px' }}>
                                       {role.ID.includes(item.roleId) ? '管理员' : '发言人'}
@@ -3163,19 +3163,30 @@ const Meeting: React.FC = () => {
                                     >移出会议</Button> : null}
                                   </div> : <div style={{ color: 'white' }}>用户不在房间内</div>
                                 }>
-                                <div>
+                                <div title={item.userName}>
                                   <div><Avatar name={item.userName} /></div>
                                   {item.uid !== user.uid ?
-                                    <span>{item.userName} <span style={{ fontSize: '12px', color: '#ccc', marginLeft: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')}</span></span> :
-                                    <span> <span style={{ fontSize: '12px', color: '#ccc', marginRight: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')} </span>{item.userName}</span>
+                                    <span>
+                                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '150px' }}>{item.userName}</span>
+                                      <span style={{ fontSize: '12px', color: '#ccc', marginLeft: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')}</span>
+                                    </span> :
+                                    <span>
+                                      <span style={{ fontSize: '12px', color: '#ccc', marginRight: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')}</span>
+                                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '150px' }}>{item.userName}</span>
+                                    </span>
                                   }
-
                                 </div>
-                              </Popover> : <div>
+                              </Popover> : <div title={item.userName}>
                                 <div><Avatar name={item.userName} /></div>
                                 {item.uid !== user.uid ?
-                                  <span>{item.userName}<span style={{ fontSize: '12px', color: '#ccc', marginLeft: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')}</span></span> :
-                                  <span><span style={{ fontSize: '12px', color: '#ccc', marginRight: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')} </span>{item.userName}</span>
+                                  <span>
+                                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '150px' }}>{item.userName}</span>
+                                    <span style={{ fontSize: '12px', color: '#ccc', marginLeft: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')}</span>
+                                  </span> :
+                                  <span>
+                                    <span style={{ fontSize: '12px', color: '#ccc', marginRight: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')}</span>
+                                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '150px' }}>{item.userName}</span>
+                                  </span>
                                 }
                               </div>}
                               <div>{item.message}</div>