92 lines
3.8 KiB
Vue
92 lines
3.8 KiB
Vue
<template>
|
|
<!-- 消息显示区域 - 优化的卡片设计 -->
|
|
<div class="w-full h-full flex flex-col">
|
|
<div class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl flex flex-col border border-gray-100 h-full">
|
|
<!-- 消息头部 -->
|
|
<div class="p-4 border-b border-gray-100 bg-gray-50/80 backdrop-blur-sm">
|
|
<h2 class="font-semibold text-lg flex items-center">
|
|
<i class="fa-solid fa-comments text-primary mr-2"></i>
|
|
<span>消息记录</span>
|
|
<span class="ml-2 text-xs text-gray-500 px-2 py-0.5 rounded-full bg-gray-200">
|
|
{{ messages.length }}
|
|
</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<!-- 消息列表区域 - 增强的滚动体验 -->
|
|
<div ref="messageContainer" class="flex-grow h-full p-4 min-h-0 overflow-y-auto">
|
|
<!-- 自定义滚动条 -->
|
|
<div class="scrollbar-thin scrollbar-thumb-primary/30 scrollbar-track-gray-100">
|
|
<!-- 消息列表 -->
|
|
<div class="space-y-1">
|
|
<div
|
|
v-for="message in messages"
|
|
:key="message.id"
|
|
class="flex items-start animate-fadeIn"
|
|
:class="{ 'justify-end': message.sender === 'me', 'delay-300': message.isSystem }"
|
|
>
|
|
<!-- 系统消息 -->
|
|
<template v-if="message.isSystem">
|
|
<div class="w-full flex justify-start my-4">
|
|
<div class="bg-primary/5 px-4 py-2 rounded-full inline-flex items-center max-w-md border border-primary/10 transition-all duration-300 hover:bg-primary/10">
|
|
<i class="fa-solid fa-info-circle text-primary mr-2"></i>
|
|
<span class="text-sm text-gray-600">{{ message.content }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 普通消息 -->
|
|
<template v-else>
|
|
<!-- 对方头像 -->
|
|
<template v-if="message.sender !== 'me'">
|
|
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-3 flex-shrink-0 border border-gray-200 shadow-sm transition-all duration-300 hover:bg-gray-200">
|
|
<i class="fa-solid fa-user text-primary"></i>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 消息气泡 -->
|
|
<div class="flex flex-col" :class="{ 'items-end': message.sender === 'me' }">
|
|
<div class="flex items-center space-x-2 mb-1">
|
|
<span class="text-xs font-medium text-gray-500">{{ message.sender === 'me' ? '我' : message.sender }}</span>
|
|
<span class="text-xs text-gray-400">{{ message.time }}</span>
|
|
</div>
|
|
<div
|
|
:class="message.sender === 'me' ? 'bg-[#165DFF] text-white shadow-lg shadow-[#165DFF]/20 !important' : 'bg-gray-100 shadow-sm border border-gray-200'"
|
|
class="px-4 py-3 rounded-2xl max-w-md word-wrap break-word transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl"
|
|
style="background-color: #165DFF !important; color: white !important;"
|
|
>
|
|
{{ message.content }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, nextTick } from 'vue';
|
|
|
|
// Props
|
|
const props = defineProps({
|
|
messages: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
// Refs
|
|
const messageContainer = ref(null);
|
|
|
|
// 监听消息变化，自动滚动到底部
|
|
watch(() => props.messages, () => {
|
|
nextTick(() => {
|
|
if (messageContainer.value) {
|
|
messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
|
|
}
|
|
});
|
|
}, { deep: true });
|
|
</script> |