From 6b96f459513f62636c4541eae1ff0733ae466267 Mon Sep 17 00:00:00 2001
From: ChenZhaoYu <790348264@qq.com>
Date: Fri, 10 Feb 2023 10:29:38 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AE=B9=E5=99=A8=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E6=B0=B8=E8=BF=9C=E4=BF=9D=E6=8C=81=E5=9C=A8=E6=9C=80=E5=BA=95?=
 =?UTF-8?q?=E9=83=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Chat/index.vue | 22 +++++-----------------
 1 file changed, 5 insertions(+), 17 deletions(-)

diff --git a/src/views/Chat/index.vue b/src/views/Chat/index.vue
index aca6abe..e2cd6ec 100644
--- a/src/views/Chat/index.vue
+++ b/src/views/Chat/index.vue
@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { onMounted, ref } from 'vue'
+import { nextTick, onMounted, ref } from 'vue'
 import { NButton, NInput, NPopover, useMessage } from 'naive-ui'
 import { Message } from './components'
 import { fetchChatAPI } from './request'
@@ -56,16 +56,12 @@ async function handleSubmit() {
   }
   finally {
     loading.value = false
-    scrollRef.value && (scrollRef.value.scrollTop = scrollRef.value.scrollHeight)
   }
 }
 
 function addMessage(message: string, reversal = false) {
-  list.value.push({
-    dateTime: new Date().toLocaleString(),
-    message,
-    reversal,
-  })
+  list.value.push({ dateTime: new Date().toLocaleString(), message, reversal })
+  nextTick(() => scrollRef.value && (scrollRef.value.scrollTop = scrollRef.value.scrollHeight))
 }
 </script>
 
@@ -93,10 +89,7 @@ function addMessage(message: string, reversal = false) {
       <div ref="scrollRef" class="h-full p-4 overflow-hidden overflow-y-auto">
         <div>
           <Message
-            v-for="(item, index) of list"
-            :key="index"
-            :date-time="item.dateTime"
-            :message="item.message"
+            v-for="(item, index) of list" :key="index" :date-time="item.dateTime" :message="item.message"
             :reversal="item.reversal"
           />
         </div>
@@ -104,12 +97,7 @@ function addMessage(message: string, reversal = false) {
     </main>
     <footer class="p-4">
       <div class="flex items-center justify-between space-x-2">
-        <NInput
-          v-model:value="value"
-          :disabled="loading"
-          placeholder="Type a message..."
-          @keyup="handleEnter"
-        />
+        <NInput v-model:value="value" :disabled="loading" placeholder="Type a message..." @keyup="handleEnter" />
         <NButton type="primary" :loading="loading" @click="handleSubmit">
           <template #icon>
             <Icon icon="ri:send-plane-fill" />