feat: 聊天列表自动滚动到底部&跳转下一步

src/views/asistant/components/NoticeList.vue

@@ -1,19 +1,15 @@
 <template>
-  <div class="chat-list">
-    <div class="chat-message-item" v-for="message in chatMessages" :key="message.id">
+  <div class="chat-list" ref="chatListRef">
+    <div class="chat-message-item" v-for="message in list" :key="message.id">
       <NoticeItem :value="message" @send-message="handleSendMessage" />
     </div>
-    <!-- Loading效果 -->
-    <div v-if="isLoading" class="chat-message-item">
-      <ChatLoading />
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import NoticeItem from './NoticeItem.vue'
 import ChatLoading from './ChatLoading.vue'
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
 
 // 定义消息类型
 interface ChatMessage {
@@ -23,68 +19,37 @@ interface ChatMessage {
   time: string
   thumb: string
 }
+const props = defineProps<{
+  list: ChatMessage[]
+}>()
 
-// 定义组件暴露的方法类型
-interface NoticeListExpose {
-  simulateSendMessage: () => void
+const emits = defineEmits(['send-message'])
+
+const chatListRef = ref<HTMLElement>()
+
+// 自动滚动到底部
+const scrollToBottom = (): void => {
+  if (chatListRef.value) {
+    chatListRef.value.scrollTo({
+      top: chatListRef.value.scrollHeight,
+      behavior: 'smooth'
+    })
+  }
 }
 
-const isLoading = ref<boolean>(false)
-let loadingTimer: any = null
-
-const chatMessages = ref<ChatMessage[]>([
-  {
-    id: '1',
-    content: 'I want a chic outfit for dinner.',
-    userId: '1',
-    time: '14:30',
-    thumb: ''
+// 监听消息列表变化，自动滚动到底部
+watch(
+  () => props.list,
+  async () => {
+    await nextTick()
+    scrollToBottom()
   },
-  {
-    id: '2',
-    content:
-      "Hey there! A chic dinner outfit, I love that! To give you the perfect recommendations, tell me: is this a romantic date, business dinner, or celebration with friends? And what's your go-to style vibe: classic elegance or something with more edge?",
-    userId: '2',
-    time: '14:31',
-    thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
-  },
-  {
-    id: '3',
-    content: "It's a romantic date, and I prefer classic elegance.",
-    userId: '1',
-    time: '14:32',
-    thumb: ''
-  },
-  {
-    id: '4',
-    content:
-      "Perfect! For a romantic dinner with classic elegance, I'd suggest a little black dress with delicate jewelry and elegant heels. Would you like me to show you some specific options?",
-    userId: '2',
-    time: '14:33',
-    thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
-  }
-])
+  { deep: true }
+)
 
 const handleSendMessage = (message: string): void => {
   console.log('list发送消息:', message)
-}
-
-const simulateSendMessage = (): void => {
-  isLoading.value = true
-
-  loadingTimer = setTimeout(() => {
-    const newMessage: ChatMessage = {
-      id: Date.now().toString(),
-      content:
-        "Thanks for your message! I'm processing your request and will provide you with the best fashion advice.",
-      userId: '2',
-      time: new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
-      thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
-    }
-
-    chatMessages.value.push(newMessage)
-    isLoading.value = false
-  }, 3000)
+  emits('send-message', message)
 }
 </script>