95 lines
2.3 KiB
Vue
95 lines
2.3 KiB
Vue
<template>
|
||
<div class="flex flex-col w-full h-full bg-base-200 overflow-hidden">
|
||
<!-- 消息气泡列表 -->
|
||
<div ref="bubbleListRef" class="flex-1 overflow-y-auto p-4 ">
|
||
<!-- 空状态 -->
|
||
<div v-if="bubbles.length === 0" class="flex items-center justify-center h-full">
|
||
<p class="text-base-content opacity-50">暂无消息，发送第一条消息开始对话吧～</p>
|
||
</div>
|
||
|
||
<!-- 消息列表 -->
|
||
<template v-else>
|
||
<ChatBubble v-for="bubble in bubbles" :key="bubble.id" :content="bubble.content" :is-self="bubble.isSelf"
|
||
:time="bubble.time" :avatar="getAvatar(bubble.isSelf)" />
|
||
</template>
|
||
</div>
|
||
|
||
<!-- 输入框区域 -->
|
||
<ChatInput @send="handleSend" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, watch } from 'vue'
|
||
import ChatBubble from './ChatBubble.vue'
|
||
import ChatInput from './ChatInput.vue'
|
||
import type { ChatBubble as ChatBubbleType } from '@/composables/useChat'
|
||
|
||
const props = defineProps<{
|
||
// 消息气泡列表
|
||
bubbles: ChatBubbleType[]
|
||
}>()
|
||
|
||
const emit = defineEmits<{
|
||
send: [content: string]
|
||
}>()
|
||
|
||
const bubbleListRef = ref<HTMLDivElement | null>(null)
|
||
|
||
// 获取头像（根据是否为自己发送的消息）
|
||
const getAvatar = (isSelf: boolean): string => {
|
||
return isSelf
|
||
? 'https://api.dicebear.com/7.x/avataaars/svg?seed=User'
|
||
: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Assistant'
|
||
}
|
||
|
||
// 滚动到底部
|
||
const scrollToBottom = () => {
|
||
const el = bubbleListRef.value
|
||
if (el) {
|
||
// 使用平滑滚动
|
||
el.scrollTo({
|
||
top: el.scrollHeight,
|
||
behavior: 'smooth'
|
||
})
|
||
}
|
||
}
|
||
|
||
// 监听消息变化，自动滚动到底部
|
||
watch(
|
||
() => props.bubbles.length,
|
||
() => {
|
||
// 下一帧滚动，确保 DOM 已更新
|
||
setTimeout(() => {
|
||
scrollToBottom()
|
||
}, 0)
|
||
},
|
||
{ immediate: true }
|
||
)
|
||
|
||
// 处理发送消息
|
||
const handleSend = (content: string) => {
|
||
emit('send', content)
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 自定义滚动条样式 */
|
||
.overflow-y-auto::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.overflow-y-auto::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
}
|
||
|
||
.overflow-y-auto::-webkit-scrollbar-thumb {
|
||
background: #c1c1c1;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
|
||
background: #a8a8a8;
|
||
}
|
||
</style>
|