feat: 进入对话滚动到底部

src/views/asistant/components/NoticeList.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="chat-list" ref="chatListRef">
     <div class="chat-message-item" v-for="message in list" :key="message.id">
-      <NoticeItem 
-        :value="message" 
+      <NoticeItem
+        :value="message"
         :is-streaming="isStreaming && streamingMessage?.id === message.id"
       />
     </div>
@@ -11,8 +11,7 @@
 
 <script setup lang="ts">
 import NoticeItem from './NoticeItem.vue'
-import GenerateLoading from './GenerateLoading.vue'
-import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import { ref, onMounted, watch, nextTick } from 'vue'
 
 // 定义消息类型
 interface ChatMessage {
@@ -63,10 +62,20 @@ watch(
   }
 )
 
+// 页面挂载时滚动到底部
+onMounted(async () => {
+  await nextTick()
+  scrollToBottom()
+})
+
 const handleSendMessage = (message: string): void => {
   console.log('list发送消息:', message)
   emits('send-message', message)
 }
+
+defineExpose({
+  scrollToBottom
+})
 </script>
 
 <style lang="less" scoped>

src/views/asistant/index.vue

@@ -29,9 +29,9 @@ import HeaderTitle from '@/components/HeaderTitle.vue'
 import NoticeList from './components/NoticeList.vue'
 import InputArea from './components/InputArea.vue'
 import GenerateLoading from './components/GenerateLoading.vue'
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onUnmounted, onActivated } from 'vue'
 import { useRouter } from 'vue-router'
-import { useUserInfoStore,useGenerateStore } from '@/stores'
+import { useUserInfoStore, useGenerateStore } from '@/stores'
 import { streamChatAddress } from '@/api/workshop'
 import { generateUUID } from '@/utils/tools'
 import { showToast } from 'vant'
@@ -47,6 +47,7 @@ defineOptions({
 // 定义NoticeList组件引用类型
 interface NoticeListRef {
   simulateSendMessage: () => void
+  scrollToBottom: () => void
 }
 // 定义消息类型
 interface ChatMessage {
@@ -66,7 +67,9 @@ const messageList = ref<ChatMessage[]>([])
 const isStreaming = ref<boolean>(false)
 const currentStreamingMessage = ref<ChatMessage | null>(null)
 
-onMounted(() => {})
+onActivated(() => {
+  noticeListRef.value?.scrollToBottom()
+})
 
 onUnmounted(() => {
   abort.abort()
@@ -133,6 +136,7 @@ const handleFetchMessage = (message: string) => {
     credentials: 'include'
   })
     .then(async (response) => {
+      console.log('response',response)
       if (!response.ok) {
         showToast({
           message: `failed to fetch: ${response.status}`,