feat(首页): 消息列表滚动置底

index.html

@@ -8,7 +8,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
-    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4711453_j0r9s4e1cc9.css" />
+    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4711453_t9t0ftzqft.css" />
     <link
       rel="preload"
       href="https://gsst-poe-sit.gz.bcebos.com/front/SourceHanSansCN-Medium.otf"

src/views/home/components/footer-operation.vue

@@ -19,6 +19,7 @@ import type { SelectRenderLabel, SelectRenderTag } from 'naive-ui'
 interface Props {
   currentSessionId: string
   messageListLength: number
+  isNotShowBackBottomBtn: boolean | undefined
 }
 
 const props = defineProps<Props>()
@@ -87,7 +88,7 @@ const messageListScrollToBottomThrottle = throttle(
   () => {
     emit('messageListScrollToBottom')
   },
-  500,
+  100,
   { leading: true, trailing: true },
 )
 
@@ -203,7 +204,7 @@ function questionSubmit() {
             reasoningContent: reasoningContent,
           })
 
-          messageListScrollToBottomThrottle()
+          props.isNotShowBackBottomBtn && messageListScrollToBottomThrottle()
         }
 
         // 回复消息
@@ -214,7 +215,7 @@ function questionSubmit() {
             content: messageContent,
           })
 
-          messageListScrollToBottomThrottle()
+          props.isNotShowBackBottomBtn && messageListScrollToBottomThrottle()
         }
 
         // 插件
@@ -223,7 +224,7 @@ function questionSubmit() {
             pluginName: data.function.name,
           })
 
-          messageListScrollToBottomThrottle()
+          props.isNotShowBackBottomBtn && messageListScrollToBottomThrottle()
         }
       },
       onend: () => {
@@ -232,8 +233,8 @@ function questionSubmit() {
             isAnswerLoading: false,
           })
 
-          messageListScrollToBottomThrottle()
-        }, 500)
+          props.isNotShowBackBottomBtn && messageListScrollToBottomThrottle()
+        }, 100)
       },
       onclose: () => {
         isAgentResponding.value = false

src/views/home/components/message-list.vue

@@ -4,6 +4,8 @@ import type { MessageItemInterface } from '../types'
 import { ref, useTemplateRef } from 'vue'
 import { ScrollbarInst } from 'naive-ui'
 import EditorDrawer from '@/components/editor-drawer/editor-drawer.vue'
+import { useElementVisibility } from '@vueuse/core'
+import { throttle } from 'lodash-es'
 
 interface Props {
   messageList: Map<string, MessageItemInterface>
@@ -11,11 +13,10 @@ interface Props {
 
 defineProps<Props>()
 
-defineExpose({
-  scrollToBottom,
-})
-
 const scrollbarRef = useTemplateRef<ScrollbarInst | null>('scrollbarRef')
+const backBottomBtnFlagRef = useTemplateRef<HTMLDivElement | null>('backBottomBtnFlagRef')
+
+const isNotShowBackBottomBtn = useElementVisibility(backBottomBtnFlagRef)
 
 const isShowEditorDrawer = ref(false)
 const contentEdit = ref('')
@@ -31,21 +32,61 @@ function onContentedit(content: string) {
 
   isShowEditorDrawer.value = true
 }
+
+const handleBackBottom = throttle(() => {
+  scrollToBottom()
+}, 500)
+
+defineExpose({
+  scrollToBottom,
+  isNotShowBackBottomBtn,
+})
 </script>
 
 <template>
-  <div class="flex-1 overflow-hidden overflow-y-auto py-[20px]">
-    <n-scrollbar ref="scrollbarRef">
-      <div class="mx-auto w-[750px] pr-[10px]">
+  <div class="relative flex-1 overflow-hidden overflow-y-auto py-[20px]">
+    <n-scrollbar ref="scrollbarRef" content-class="content-class">
+      <div class="relative mx-auto w-[750px] pr-[10px]">
         <MessageItem
           v-for="[key, messageItem] in messageList"
           :key="key"
           :message-item="messageItem"
           @contentedit="onContentedit"
         />
+
+        <div ref="backBottomBtnFlagRef" class="-z-1 absolute bottom-0 h-[40px] w-full"></div>
       </div>
     </n-scrollbar>
 
+    <Transition name="back-bottom-btn" mode="out-in">
+      <div
+        v-show="!isNotShowBackBottomBtn"
+        class="absolute bottom-[30px] left-1/2 w-[750px] text-end"
+        style="translate: calc(-50% + 30px)"
+      >
+        <button
+          class="flex-center flex-center inline-flex h-[26px] w-[26px] rounded-full bg-[#ECEFFF]"
+          @click="handleBackBottom"
+        >
+          <i class="iconfont icon-huidaodibu text-[12px]" />
+        </button>
+      </div>
+    </Transition>
+
     <EditorDrawer v-model:is-show-editor-drawer="isShowEditorDrawer" v-model:content-edit="contentEdit" />
   </div>
 </template>
+
+<style lang="scss" scoped>
+.back-bottom-btn-enter-active,
+.back-bottom-btn-leave-active {
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.2s;
+  transition-property: opacity;
+}
+
+.back-bottom-btn-enter-from,
+.back-bottom-btn-leave-to {
+  opacity: 0;
+}
+</style>

src/views/home/home.vue

 <script setup lang="ts">
-import { onMounted, ref, useTemplateRef, watch } from 'vue'
+import { ref, useTemplateRef, watch } from 'vue'
 import AgentAbout from './components/agent-about.vue'
 import FooterOperation from './components/footer-operation.vue'
 import HistoryMenuSidebar from './components/history-menu-sidebar.vue'
@@ -92,12 +92,6 @@ watch(
   createSessionId()
 })()
 
-onMounted(() => {
-  setTimeout(() => {
-    messageListScrollToBottom()
-  }, 700)
-})
-
 function createSessionId() {
   fetchCreateSessionId<string>().then((res) => {
     currentSessionId.value = res.data
@@ -192,10 +186,6 @@ function onGetMessageRecordList(recordId: string) {
         })
 
         messageList.value = new Map(messageListDraft as any)
-
-        setTimeout(() => {
-          messageListScrollToBottom()
-        }, 500)
       }
     })
     .catch(() => {
@@ -234,6 +224,7 @@ function onClearSessionReferenceFile() {
           v-model:current-fetch-event-source-controller="currentFetchEventSourceController"
           :current-session-id="currentSessionId"
           :message-list-length="messageList.size"
+          :is-not-show-back-bottom-btn="messageListRef?.isNotShowBackBottomBtn"
           @message-list-scroll-to-bottom="messageListScrollToBottom"
           @add-message-item="onAddMessageItem"
           @update-specify-message-item="onUpdateSpecifyMessageItem"