64 lines
2.2 KiB
Vue
64 lines
2.2 KiB
Vue
<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> |