feat: 消息样式调整

src/components/shared/message/Message.vue

@@ -27,7 +27,7 @@
             @click="onReceiveMessage"
           >
             <div class="message-send-user">
-              <div class="user-name">{{ message.sendUserName }}</div>
+              <div class="user-name" :title="message.sendUserName">{{ message.sendUserName }}</div>
               <div class="message-time">{{ dayjs(message.sendTime).format('HH:mm') }}</div>
             </div>
             <pre class="flex-1 message-content" v-html="message.content"></pre>
@@ -176,10 +176,14 @@ const onSendMessage = () => {
         background-color: #f5f5f5;
       }
       .message-send-user {
-        width: 49px;
+        width: 52px;
         margin-right: 0.5em;
         font-size: $SmallFont;
+        overflow: hidden;
         .user-name {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
           font-weight: 500;
           text-align: justify;
           text-align-last: justify;
@@ -190,13 +194,13 @@ const onSendMessage = () => {
         }
       }
       .message-content {
-        word-break: break-all;
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         font-size: $SmallFont;
+        white-space: pre-wrap;
       }
     }
   }

src/components/shared/message/MessageList.vue

@@ -4,7 +4,7 @@
       <div
         v-for="message in messageList"
         :key="message.id"
-        class="radius-base fill-blank p-base message-item"
+        class="radius-base fill-blank p-base m-b-mini message-item"
         :class="{ active: currentMessage?.sendUserId === message.sendUserId }"
         @click="checkMessage(message)"
       >
@@ -139,13 +139,13 @@ getMessageList().then((result) => (currentMessage.value = result?.[0]))
       }
       .message-content {
         font-weight: 400;
-        word-break: break-all;
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         font-size: $SmallFont;
+        white-space: pre-wrap;
       }
     }
   }