feat: 修改单聊页面交互

src/pages/chat/chat-message/index.vue

@@ -10,15 +10,18 @@
           radius="100%"
           class="mr-8"
       ></van-image>
-      <div>
-        <TextMessage v-if="msg.type === 'text'" :message-content="msg.messageContent"
-                     :view-type="msg.viewType"></TextMessage>
-        <ImageMessage v-if="msg.type === 'image'" :message-content="msg.messageContent"
-                      :view-type="msg.viewType"></ImageMessage>
-        <AudioMessage v-if="msg.type === 'audio'" :message-content="msg.messageContent"
-                      :view-type="msg.viewType"></AudioMessage>
-        <LinkMessage v-if="msg.type === 'link'" :message-content="msg.messageContent"
-                     :view-type="msg.viewType"></LinkMessage>
+      <div class="flex flex-col" :class=" msg.viewType ?  'items-start' : 'items-end'">
+        <div v-if="showName && msg.viewType === 1" class="text-black-9 text-sm mb-2">{{msg.showName}}</div>
+        <div class="flex-grow-0 w-fit">
+          <TextMessage v-if="msg.type === 'text'" :message-content="msg.messageContent"
+                       :view-type="msg.viewType"></TextMessage>
+          <ImageMessage v-if="msg.type === 'image'" :message-content="msg.messageContent"
+                        :view-type="msg.viewType"></ImageMessage>
+          <AudioMessage v-if="msg.type === 'audio'" :message-content="msg.messageContent"
+                        :view-type="msg.viewType"></AudioMessage>
+          <LinkMessage v-if="msg.type === 'link'" :message-content="msg.messageContent"
+                       :view-type="msg.viewType"></LinkMessage>
+        </div>
       </div>
 <!--      <div class="self-center text-sm mx-5 text-black-9">发送中</div>-->
       <van-image
@@ -45,7 +48,11 @@ const user = computed(() => chatStore.user)
 const {curConversiton} = storeToRefs(chatStore)
 
 const props = defineProps({
-  message: Object
+  message: Object,
+  showName: {
+    type: Boolean,
+    default: false
+  }
 });
 
 let msg = ref(null)
@@ -53,14 +60,12 @@ const initMsg = () => {
   try {
     if (!isValidJson(props.message?.messageContent)) return
     const {createTime, getUserId, sendUserId, messageContent} = JSON.parse(props.message?.messageContent)
-    console.log(props.message, 'messagemessage', user.value)
-    console.warn(props.message?.sendUserId, user.value.pass, 'initMsg')
-
     msg.value = {
       messageContent: messageContent,
       type: getMessageType(props.message?.messageType),
       viewType: props.message?.sendUserId === user.value.pass ? 0 : 1,
-      createTime: createTime
+      createTime: createTime,
+      showName: props.message?.showName
     }
   } catch (e) {
 
@@ -76,7 +81,6 @@ initMsg()
 <style scoped lang="scss">
 .chat-message {
   margin: 20px 0;
-
   .chat-message__content {
     width: max-content;
     display: flex;