From e3bc50e4fcd0c852221a9b357d30dda05cbdce49 Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Tue, 21 May 2024 16:05:44 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E8=A7=A3=E5=86=B3todo=E3=80=91AI=20ch?=
 =?UTF-8?q?at=20=E5=A2=9E=E5=8A=A0=E5=9B=9E=E5=88=B0=E5=BA=95=E9=83=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ai/chat/Message.vue | 39 ++++++++++++++++++++++++++++++-----
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/views/ai/chat/Message.vue b/src/views/ai/chat/Message.vue
index 2e48e003..14a63c90 100644
--- a/src/views/ai/chat/Message.vue
+++ b/src/views/ai/chat/Message.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="messageContainer" style="height: 100%;overflow-y: auto;">
+  <div ref="messageContainer" style="height: 100%;overflow-y: auto;position: relative;">
     <div class="chat-list" v-for="(item, index) in list" :key="index" >
       <!--  靠左 message  -->
       <!-- TODO 芋艿：类型判断 -->
@@ -52,6 +52,10 @@
       </div>
     </div>
   </div>
+  <!--  回到底部  -->
+  <div v-if="isScrolling" class="to-bottom" @click="handleGoBottom">
+    <el-button :icon="ArrowDownBold" circle />
+  </div>
 </template>
 <script setup lang="ts">
 import {formatDate} from "@/utils/formatTime";
@@ -59,6 +63,7 @@ import MarkdownView from "@/components/MarkdownView/index.vue";
 import {ChatMessageApi, ChatMessageVO} from "@/api/ai/chat/message";
 import {useClipboard} from "@vueuse/core";
 import {PropType} from "vue";
+import {ArrowDownBold} from "@element-plus/icons-vue";
 
 const {copy} = useClipboard() // 初始化 copy 到粘贴板
 // 判断 消息列表 滚动的位置(用于判断是否需要滚动到消息最下方)
@@ -73,7 +78,6 @@ const props = defineProps({
   }
 })
 
-
 // ============ 处理对话滚动 ==============
 
 const scrollToBottom = async (isIgnore?: boolean) =>{
@@ -125,6 +129,22 @@ const onDelete = async (id) => {
   emits('onDeleteSuccess')
 }
 
+/**
+ * 回到底部
+ */
+const handleGoBottom = async () => {
+  const scrollContainer = messageContainer.value
+  scrollContainer.scrollTop = scrollContainer.scrollHeight
+}
+
+/**
+ * 回到顶部
+ */
+const handlerGoTop = async () => {
+  const scrollContainer = messageContainer.value
+  scrollContainer.scrollTop = 0
+}
+
 // 监听 list
 const { list, conversationId } = toRefs(props)
 watch(list, async (newValue, oldValue) => {
@@ -132,11 +152,12 @@ watch(list, async (newValue, oldValue) => {
 })
 
 // 提供方法给 parent 调用
-defineExpose({scrollToBottom})
+defineExpose({scrollToBottom, handlerGoTop})
 
-//
+// 定义 emits
 const emits = defineEmits(['onDeleteSuccess'])
-//
+
+// onMounted
 onMounted(async () => {
   messageContainer.value.addEventListener('scroll', handleScroll)
 })
@@ -257,4 +278,12 @@ onMounted(async () => {
     background-color: #f6f6f6;
   }
 }
+
+// 回到底部
+.to-bottom {
+  position: absolute;
+  z-index: 1000;
+  bottom: 0;
+  right: 50%;
+}
 </style>