feat(消息页面): 新增对话数据并调整样式

- 添加5条新的对话数据示例
- 为对话项增加间距和边框样式
- 将样式语言改为less并优化响应式布局

@@ -16,7 +16,7 @@
         <nut-tabs v-model="activeTab" @click="onTabClick">
         <nut-tabs v-model="activeTab" @click="onTabClick">
             <nut-tab-pane title="全部" pane-key="all">
             <nut-tab-pane title="全部" pane-key="all">
                 <scroll-view class="conversation-list" scroll-y @scrolltolower="loadMore" :lower-threshold="50">
                 <scroll-view class="conversation-list" scroll-y @scrolltolower="loadMore" :lower-threshold="50">
-                    <view v-for="conversation in filteredConversations" :key="conversation.id" class="conversation-item"
+                    <view v-for="conversation in filteredConversations" :key="conversation.id" class="conversation-item mt-2 mb-4 border-b border-gray-100 pb-2"
                         @click="onConversationClick(conversation)">
                         @click="onConversationClick(conversation)">
                         <nut-row>
                         <nut-row>
                             <nut-col :span="4" class="avatar-container">
                             <nut-col :span="4" class="avatar-container">
@@ -235,7 +235,54 @@ const initData = () => {
             time: '昨天',
             time: '昨天',
             unread: false,
             unread: false,
             type: 'message'
             type: 'message'
-        }
+        },
+        {
+            id: 6,
+            name: '张三',
+            avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
+            lastMessage: '你好，这个商品还在吗？',
+            time: '5分钟前',
+            unread: true,
+            type: 'chat'
+        },
+        {
+            id: 7,
+            name: '李四',
+            avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
+            lastMessage: '价格可以商量吗？',
+            time: '30分钟前',
+            unread: false,
+            type: 'chat'
+        },
+        {
+            id: 8,
+            name: '系统通知',
+            avatar: '',
+            icon: markRaw(Notice),
+            lastMessage: '您的商品已通过审核',
+            time: '1小时前',
+            unread: true,
+            type: 'notification'
+        },
+        {
+            id: 9,
+            name: '王五',
+            avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
+            lastMessage: '[图片]',
+            time: '2小时前',
+            unread: true,
+            type: 'chat'
+        },
+        {
+            id: 10,
+            name: '客服留言',
+            avatar: '',
+            icon: markRaw(Message),
+            lastMessage: '感谢您的反馈，我们会尽快处理',
+            time: '昨天',
+            unread: false,
+            type: 'message'
+        },
     ]
     ]
 
 
     conversations.value = mockData
     conversations.value = mockData
@@ -328,7 +375,7 @@ onMounted(() => {
 })
 })
 </script>
 </script>
 
 
-<style scoped>
+<style lang="less" scoped>
 .messages-page {
 .messages-page {
     min-height: 100vh;
     min-height: 100vh;
     background-color: #f5f5f5;
     background-color: #f5f5f5;
@@ -346,6 +393,7 @@ onMounted(() => {
     padding: 24rpx 20rpx;
     padding: 24rpx 20rpx;
     border-bottom: 1rpx solid #f0f0f0;
     border-bottom: 1rpx solid #f0f0f0;
     transition: background-color 0.2s;
     transition: background-color 0.2s;
+    margin: 20rpx 0;
 }
 }
 
 
 .avatar-container {
 .avatar-container {
@@ -551,6 +599,7 @@ onMounted(() => {
 @media (max-width: 750rpx) {
 @media (max-width: 750rpx) {
     .conversation-item {
     .conversation-item {
         padding: 20rpx 16rpx;
         padding: 20rpx 16rpx;
+        margin: 16rpx 0;
     }
     }
 
 
     .w-12 {
     .w-12 {