初始化

src/components/MessageList.vue

@@ -0,0 +1,64 @@
+<template>
+    <div
+        ref="messagesContainer"
+        class="flex-1 p-5 overflow-y-auto bg-gray-50 message-list-background"
+    >
+        <a-spin :spinning="loadingMessages" tip="加载消息中...">
+            <div v-if="!loadingMessages">
+                <!-- 空状态 -->
+                <div v-if="!chatStore.messages.length && chatStore.currentFriend" class="text-center text-gray-500 py-10">
+                    <MessageOutlined class="text-4xl mb-2" />
+                    <p>开始与 {{ chatStore.currentFriend.name }} 对话吧！</p>
+                </div>
+                
+                <!-- 消息列表 -->
+                <div
+                    v-for="(msg, index) in chatStore.messages"
+                    :key="index"
+                    class="mb-4 clear-both"
+                    :class="msg.senderId === userStore.currentUser.id ? 'text-right' : 'text-left'"
+                >
+                    <MessageItem :message="msg" :is-sent="msg.senderId === userStore.currentUser.id" />
+                </div>
+            </div>
+        </a-spin>
+    </div>
+</template>
+
+<script setup>
+import { ref, nextTick, watch } from 'vue';
+import { useUserStore } from '@/stores/user';
+import { useChatStore } from '@/stores/chat';
+import { MessageOutlined } from '@ant-design/icons-vue';
+import MessageItem from './MessageItem.vue';
+
+const userStore = useUserStore();
+const chatStore = useChatStore();
+
+const messagesContainer = ref(null);
+const loadingMessages = ref(false);
+
+// 滚动到底部
+const scrollToBottom = () => {
+    if (messagesContainer.value) {
+        nextTick(() => {
+            messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
+        });
+    }
+};
+
+// 监听消息变化，自动滚动到底部
+watch(() => chatStore.messages.length, () => {
+    scrollToBottom();
+});
+
+// 监听当前好友变化，重新加载消息
+watch(() => chatStore.currentFriend, () => {
+    scrollToBottom();
+});
+</script>
+<style>
+.message-list-background {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.03"><rect width="100" height="100" fill="none"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="currentColor"/></svg>')
+}
+</style>