feat(消息页面): 添加消息详情弹框功能

实现点击对话显示消息详情的功能，包含头部信息、消息内容和关闭按钮

@@ -169,6 +169,55 @@
 
 
         <!-- 自定义TabBar -->
         <!-- 自定义TabBar -->
         <TabBar />
         <TabBar />
+
+        <!-- 消息详情弹框 -->
+        <nut-popup
+            v-model:visible="showMessageDetail"
+            position="right"
+            :style="{ width: '100%', height: '100%' }"
+            closeable
+            close-icon-position="top-right"
+            @close="closeMessageDetail"
+        >
+            <view class="message-detail-container">
+                <!-- 详情页头部 -->
+                <view class="detail-header">
+                    <view class="flex items-center">
+                        <image v-if="selectedConversation?.avatar"
+                            :src="selectedConversation.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="selectedConversation?.icon" />
+                        </view>
+                        <view class="flex-1">
+                            <text class="text-lg font-medium">{{ selectedConversation?.name }}</text>
+                            <text class="text-sm text-gray-500 block">{{ selectedConversation?.time }}</text>
+                        </view>
+                    </view>
+                </view>
+
+                <!-- 消息内容 -->
+                <view class="detail-content">
+                    <view class="message-content">
+                        <text class="text-base">{{ selectedConversation?.lastMessage }}</text>
+                    </view>
+                </view>
+
+                <!-- 底部关闭按钮 -->
+                <view class="detail-footer">
+                    <nut-button
+                        type="primary"
+                        size="large"
+                        block
+                        @click="closeMessageDetail"
+                    >
+                        关闭
+                    </nut-button>
+                </view>
+            </view>
+        </nut-popup>
     </view>
     </view>
 </template>
 </template>
 
 
@@ -199,6 +248,13 @@ const hasMore = ref(true)
 // 模拟对话数据
 // 模拟对话数据
 const conversations = ref([])
 const conversations = ref([])
 
 
+// 消息详情弹框相关
+const showMessageDetail = ref(false)
+const selectedConversation = ref(null)
+
+// 模拟消息历史记录
+const mockMessages = ref([])
+
 // 初始化数据
 // 初始化数据
 const initData = () => {
 const initData = () => {
     const mockData = []
     const mockData = []
@@ -301,12 +357,31 @@ const generateMockData = (pageNum) => {
     return mockData
     return mockData
 }
 }
 
 
-// 点击对话
+// 点击对话 - 显示消息详情弹框
 const onConversationClick = (conversation) => {
 const onConversationClick = (conversation) => {
-    // 跳转到聊天页面
-    Taro.navigateTo({
-        url: `/pages/chat/index?id=${conversation.id}&name=${conversation.name}`
-    })
+    selectedConversation.value = conversation
+
+    // 显示弹框
+    showMessageDetail.value = true
+
+    // 标记为已读
+    markAsRead(conversation.id)
+}
+
+
+// 关闭消息详情弹框
+const closeMessageDetail = () => {
+    showMessageDetail.value = false
+    selectedConversation.value = null
+    mockMessages.value = []
+}
+
+// 标记消息为已读
+const markAsRead = (conversationId) => {
+    const conversation = conversations.value.find(conv => conv.id === conversationId)
+    if (conversation && conversation.unread) {
+        conversation.unread = false
+    }
 }
 }
 
 
 // 页面加载时初始化数据
 // 页面加载时初始化数据
@@ -527,6 +602,70 @@ onMounted(() => {
         position: relative;
         position: relative;
     }
     }
 
 
+    /* 消息详情弹框样式 */
+    .message-detail-container {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        background: #ffffff;
+    }
+
+    .detail-header {
+        padding: 32rpx 24rpx;
+        border-bottom: 1rpx solid #f0f0f0;
+        background: #ffffff;
+        flex-shrink: 0;
+    }
+
+    .detail-content {
+        flex: 1;
+        padding: 24rpx;
+        overflow-y: auto;
+        background: #f8f9fa;
+    }
+
+    .message-content {
+        background: #ffffff;
+        padding: 24rpx;
+        border-radius: 16rpx;
+        margin-bottom: 24rpx;
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+    }
+
+    .message-history {
+        .message-item {
+            background: #ffffff;
+            padding: 20rpx;
+            border-radius: 12rpx;
+            margin-bottom: 16rpx;
+            box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.05);
+        }
+    }
+
+    .detail-footer {
+        padding: 24rpx;
+        background: #ffffff;
+        border-top: 1rpx solid #f0f0f0;
+        flex-shrink: 0;
+    }
+
+    .text-lg {
+        font-size: 36rpx;
+    }
+
+    .text-base {
+        font-size: 32rpx;
+        line-height: 1.5;
+    }
+
+    .mr-3 {
+        margin-right: 24rpx;
+    }
+
+    .mt-1 {
+        margin-top: 8rpx;
+    }
+
 }
 }
 /* NutUI 组件样式覆盖 */
 /* NutUI 组件样式覆盖 */
 :deep(.nut-searchbar) {
 :deep(.nut-searchbar) {