85 lines
1.7 KiB
Vue
85 lines
1.7 KiB
Vue
<template>
|
|
<div class="chat-list" ref="chatListRef">
|
|
<div class="chat-message-item" v-for="message in list" :key="message.id">
|
|
<NoticeItem
|
|
:value="message"
|
|
:is-streaming="isStreaming && streamingMessage?.id === message.id"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import NoticeItem from './NoticeItem.vue'
|
|
import GenerateLoading from './GenerateLoading.vue'
|
|
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
|
|
|
|
// 定义消息类型
|
|
interface ChatMessage {
|
|
id: string
|
|
content: string
|
|
userId: string
|
|
time: string
|
|
thumb: string
|
|
}
|
|
const props = defineProps<{
|
|
list: ChatMessage[]
|
|
isStreaming?: boolean
|
|
streamingMessage?: ChatMessage | null
|
|
}>()
|
|
|
|
const emits = defineEmits(['send-message'])
|
|
|
|
const chatListRef = ref<HTMLElement>()
|
|
|
|
// 自动滚动到底部
|
|
const scrollToBottom = (): void => {
|
|
if (chatListRef.value) {
|
|
chatListRef.value.scrollTo({
|
|
top: chatListRef.value.scrollHeight,
|
|
behavior: 'smooth'
|
|
})
|
|
}
|
|
}
|
|
|
|
// 监听消息列表变化，自动滚动到底部
|
|
watch(
|
|
() => props.list,
|
|
async () => {
|
|
await nextTick()
|
|
scrollToBottom()
|
|
},
|
|
{ deep: true }
|
|
)
|
|
|
|
// 监听流式消息内容变化，实时滚动
|
|
watch(
|
|
() => props.streamingMessage?.content,
|
|
async () => {
|
|
if (props.isStreaming) {
|
|
await nextTick()
|
|
scrollToBottom()
|
|
}
|
|
}
|
|
)
|
|
|
|
const handleSendMessage = (message: string): void => {
|
|
console.log('list发送消息:', message)
|
|
emits('send-message', message)
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.chat-list {
|
|
padding: 16px;
|
|
background-color: #fff;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
.chat-message-item {
|
|
margin-bottom: 4.84rem;
|
|
}
|
|
</style>
|