refactor(MessageDetail): 简化模板代码格式并优化消息排序

将多行属性合并为单行以提高可读性后端返回的消息列表进行逆序排列以符合显示需求

refactor(MessageDetail): 简化模板代码格式并优化消息排序
将多行属性合并为单行以提高可读性后端返回的消息列表进行逆序排列以符合显示需求
hookehuyr
Commit 9b914d8eb491d52a91722da083d0350027db0e13 9b914d8e 1 parent 249cd85e
Showing 1 changed file with 22 additions and 63 deletions
src/components/MessageDetail.vue
--- a/src/components/MessageDetail.vue
View file @9b914d8
+++ b/src/components/MessageDetail.vue
View file @9b914d8
 <template>
-  <nut-popup
+  <nut-popup v-model:visible="visible" position="right" :style="{ width: '100%', height: '100%' }" closeable
-    v-model:visible="visible"
+    close-icon-position="top-right" @close="handleClose">
-    position="right"
-    :style="{ width: '100%', height: '100%' }"
-    closeable
-    close-icon-position="top-right"
-    @close="handleClose"
-  >
     <view class="message-detail-container">
       <!-- 详情页头部 -->
       <view class="detail-header">
         <view class="flex items-center">
-          <image
+          <image v-if="conversation?.avatar" :src="conversation.avatar" class="w-12 h-12 rounded-full object-cover mr-3"
-            v-if="conversation?.avatar"
+            mode="aspectFill" />
-            :src="conversation.avatar"
-            class="w-12 h-12 rounded-full object-cover mr-3"
-            mode="aspectFill"
-          />
           <view v-else class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mr-3">
             <component :is="conversation?.icon" />
           </view>
@@ -46,30 +36,18 @@
         <!-- 聊天记录样式 -->
         <view v-else class="chat-content">
-          <scroll-view
+          <scroll-view class="chat-messages" :scroll-y="true" :scroll-top="scrollTop" :scroll-into-view="scrollIntoView"
-            class="chat-messages"
+            :refresher-enabled="true" :refresher-triggered="isLoadingMessages" @refresherrefresh="handleRefresh">
-            :scroll-y="true"
-            :scroll-top="scrollTop"
-            :scroll-into-view="scrollIntoView"
-            :refresher-enabled="true"
-            :refresher-triggered="isLoadingMessages"
-            @refresherrefresh="handleRefresh"
-          >
             <!-- 数据加载完成提示 -->
-            <view v-if="!hasMoreMessages && !isInitialLoad && messages.length > 0 && hasTriedLoadMore" class="load-complete-tip">
+            <view v-if="!hasMoreMessages && !isInitialLoad && messages.length > 0 && hasTriedLoadMore"
+              class="load-complete-tip">
               <text class="tip-text">已加载完所有数据</text>
             </view>
-            <view
+            <view v-for="(message, index) in messages" :key="index" :id="`msg-${index}`" class="message-item" :class="{
-              v-for="(message, index) in messages"
+              'message-sent': message.type === 'sent',
-              :key="index"
+              'message-received': message.type === 'received'
-              :id="`msg-${index}`"
+            }">
-              class="message-item"
-              :class="{
-                'message-sent': message.type === 'sent',
-                'message-received': message.type === 'received'
-              }"
-            >
               <view class="message-bubble">
                 <text class="message-text">{{ message.content }}</text>
                 <text class="message-time">{{ message.time }}</text>
@@ -80,23 +58,10 @@
           <!-- 输入框区域 -->
           <view class="chat-input-area">
             <view class="input-container">
-              <nut-textarea
+              <nut-textarea v-model="inputMessage" placeholder="请输入回复内容..." :rows="2" :max-length="500"
-                v-model="inputMessage"
+                :cursorSpacing="100" class="message-input" @focus="handleInputFocus" />
-                placeholder="请输入回复内容..."
+              <nut-button type="primary" size="small" color="orange" @click="sendMessage"
-                :rows="2"
+                :disabled="!inputMessage.trim()" class="send-button">
-                :max-length="500"
-                :cursorSpacing="100"
-                class="message-input"
-                @focus="handleInputFocus"
-              />
-              <nut-button
-                type="primary"
-                size="small"
-                color="orange"
-                @click="sendMessage"
-                :disabled="!inputMessage.trim()"
-                class="send-button"
-              >
                 发送
               </nut-button>
             </view>
@@ -106,13 +71,7 @@
       <!-- 底部按钮 -->
       <view class="detail-footer">
-        <nut-button
+        <nut-button type="primary" size="large" block @click="handleClose" color="orange">
-          type="primary"
-          size="large"
-          block
-          @click="handleClose"
-          color="orange"
-        >
           {{ conversation?.type === 'system' ? '关闭' : '返回' }}
         </nut-button>
       </view>
@@ -186,10 +145,10 @@ const loadChatMessages = async (isLoadMore = false) => {
   }
   // 对于scrolltoupper事件，如果没有更多消息则不加载
-   // 但对于下拉刷新，总是允许尝试加载
+  // 但对于下拉刷新，总是允许尝试加载
-   if (!hasMoreMessages.value && isLoadMore && !isInitialLoad.value) {
+  if (!hasMoreMessages.value && isLoadMore && !isInitialLoad.value) {
-     // 这里可以根据具体需求决定是否允许重新加载
+    // 这里可以根据具体需求决定是否允许重新加载
-   }
+  }
   const userStore = useUserStore()
   const currentUserId = userStore.userInfo?.id
@@ -207,7 +166,7 @@ const loadChatMessages = async (isLoadMore = false) => {
     })
     if (response.code && response.data) {
-      const newMessages = response.data.list || []
+      const newMessages = (response.data.list || []).reverse() // 逆序排列，因为后端无法处理排序要求
       // 转换API数据格式为组件需要的格式
       const formattedMessages = newMessages.map(msg => ({