lanecarford_front/src/views/asistant/components/NoticeList.vue

<template>
  <div class="chat-list" ref="chatListRef">
    <div class="chat-message-item" v-for="message in list" :key="message.id">
      <NoticeItem :value="message" />
    </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[]
}>()

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 }
)

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>