fix: 自动滚动问题

pages/search/[id].vue

@@ -9,7 +9,7 @@
                 :repo="state.repo"
                 @update-query="handleUpdateQuery"
             />
-            <div class="container min-h-svh max-w-screen-lg 2xl:max-w-screen-xl flex flex-col space-y-6 p-6 mb-6 pb-0" id="scrollElement">
+            <div class="container min-h-svh max-w-screen-lg 2xl:max-w-screen-xl flex flex-col space-y-6 p-6 mb-6 pb-0" ref="scrollElement">
                 <template v-for="(item, index) in data" :key="index">
                     <ISearchArticle>
                         <template #title>
@@ -74,7 +74,8 @@ const historyStatus = ref(200)
 const data = ref([])
 const askingData = ref({ question: $setFirstRecordTitle.value, collapse: true, actions: [], processStatus: 'start' })
 const recommendQuestions = ref([])
-let asking = ref(false)
+const asking = ref(false)
+const scrollElement = ref(null) 
 // demo [{ type: 'search_relate_repo', data: [] }], 右侧推荐图表数据
 const askingSidebarCards = ref([])
 // 处理ai generate
@@ -161,18 +162,27 @@ function resetAskingData (question) {
 }
 // 是否停止自动滚动到底部
 const isAutoToBottom = ref(true)
-watch( () => directions.top,
-    () => {
-        if (directions.top) {
-            isAutoToBottom.value = false
-        }
+watch(() => directions.top, () => {
+    if (directions.top) isAutoToBottom.value = false
+})
+watch(() => askingData.value.collapse, (newVal, oldVal) => {
+    if (!newVal && asking.value) resetAutoBottom()
+})
+watch(() => directions.bottom, () => {
+    if (directions.bottom && asking.value) handleToBottom()
+})
+function handleToBottom () {
+    const $target = scrollElement.value
+    const scrollTop = window.innerHeight + window.scrollY + 30;
+    const height = $target.parentNode.clientHeight
+    if (scrollTop >= height) {
+        isAutoToBottom.value = true
+        scrollToView()
     }
-)
+}
 function scrollToView () {
-    if (!isAutoToBottom.value) return
-    const $target = document.querySelector('#scrollElement')
-    if (!$target) return
-    y.value = $target.clientHeight
+    if (!isAutoToBottom.value || !scrollElement.value) return
+    y.value = scrollElement.value.clientHeight
 }
 function createGenerateInitItem (question, regenerate) {
     if (askingData.value.question && !regenerate) {
@@ -195,18 +205,14 @@ function handleContinueAsk (question, regenerate) {
     question = regenerate || question
     generateFetchData(question)
     setTimeout(() => {
+        isAutoToBottom.value = true
         scrollToView()
-        isAutoToBottom.value = true 
     })
 }
 function handleReGenerate () {
     const { question } = askingData.value
     handleContinueAsk(question, `根据上述回答，对问题"${question}"重新生成`)
 }
-
-function resetAnsLoading () {
-    Object.assign(askingData.value, { showActions: true })
-}
 function resetAutoBottom () {
     nextTick(() => {
         isAutoToBottom.value = true
@@ -236,9 +242,6 @@ function handleFormFetchData (fetchData) {
     } catch(error) { }
     if (Object.keys(message).length === 0) return
     const { meta, choices, error, code } = message
-    setTimeout(() => {
-        scrollToView()
-    })
     // 处理403 
     if (error && code === 403) {
         handleSetNoPermission()
@@ -251,6 +254,9 @@ function handleFormFetchData (fetchData) {
         let article = message.choices[0].message.content
         article = Array.isArray(article) ? handleFormatReports(article) : article
         Object.assign(askingData.value, { article, collapse: false, processStatus: 'finish', ansLoading: true })
+        nextTick(() => {
+            scrollToView()
+        })
         return
     }
     if (meta.type !== 'log') return
@@ -292,9 +298,8 @@ function handleCreateAiTitle () {
 }
 function handleMessage (event) {
     if (event.data === markedEnd) {
-        askingData.value.ansLoading = false
+        Object.assign(askingData.value, { ansLoading: false, showActions: true })
         handleCreateAiTitle()
-        resetAnsLoading()
         handleStopGenerate()
         return
     }
@@ -370,5 +375,4 @@ nextTick( () => {
         asking.value = false;
     }
 })
-
 </script>
\ No newline at end of file