fix: 应用预览及发布优化

src/composables/useBackBottom.ts

 import { ref } from 'vue'
 import { throttle } from 'lodash-es'
+import { MaybeComputedElementRef, useResizeObserver } from '@vueuse/core'
 
-export function useBackBottom(cb: () => void) {
+export function useBackBottom(el: MaybeComputedElementRef, cb: () => void) {
   const visible = ref(false)
   const lastScrollTop = ref(0)
 
+  // 点击回到底部
   function clickBackBottom() {
     visible.value = false
     cb()
   }
 
+  // 滚动处理逻辑
   function handleScrollMessageContainer(e: Event) {
     const target = e.target as HTMLElement
 
@@ -28,7 +31,25 @@ export function useBackBottom(cb: () => void) {
     lastScrollTop.value = currentScrollTop
   }
 
-  const throttleScrollMessageContainer = throttle(handleScrollMessageContainer, 100, { leading: true })
+  // 节流处理滚动事件
+  const throttleScrollContainer = throttle(handleScrollMessageContainer, 100, { leading: true })
 
-  return { visible, clickBackBottom, throttleScrollMessageContainer }
+  // 节流处理容器resize事件
+  const throttledResizeCallback = throttle(
+    (entries) => {
+      const entry = entries[0]
+      const { clientHeight, scrollHeight } = entry.target
+
+      if (clientHeight >= scrollHeight && !visible.value) {
+        visible.value = false
+      }
+    },
+    300,
+    { leading: true, trailing: true },
+  )
+
+  // 监听容器变化
+  useResizeObserver(el, throttledResizeCallback)
+
+  return { visible, clickBackBottom, throttleScrollContainer }
 }

src/views/multi-model-dialogue/components/message-list.vue

 <script setup lang="ts">
-import { nextTick, useTemplateRef, watch } from 'vue'
+import { nextTick, useTemplateRef } from 'vue'
 import { ScrollbarInst } from 'naive-ui'
 import MessageItem from './message-item.vue'
 import type { MessageItemInterface } from '../types'
-import { useBackBottom } from '@/composables/useBackBottom'
 
 interface Props {
   messageList: Map<string, MessageItemInterface>
 }
 
-const props = defineProps<Props>()
+defineProps<Props>()
 
 defineExpose({
   scrollToBottom,
@@ -17,45 +16,23 @@ defineExpose({
 
 const scrollbarRef = useTemplateRef<ScrollbarInst | null>('scrollbarRef')
 
-const { visible, clickBackBottom, throttleScrollMessageContainer } = useBackBottom(scrollToBottom)
-
 function scrollToBottom() {
   nextTick(() => {
     if (scrollbarRef.value) {
-      !visible.value && scrollbarRef.value.scrollTo({ top: 999999999, behavior: 'smooth' })
+      scrollbarRef.value.scrollTo({ top: 999999999, behavior: 'smooth' })
     }
   })
 }
-
-watch(
-  () => props.messageList.size,
-  () => {
-    clickBackBottom()
-  },
-)
 </script>
 
 <template>
   <div class="relative flex-1 overflow-hidden overflow-y-auto py-[20px]">
-    <n-scrollbar
-      ref="scrollbarRef"
-      class="min-h-full"
-      content-class="min-h-full flex"
-      @scroll="throttleScrollMessageContainer"
-    >
+    <n-scrollbar ref="scrollbarRef" class="min-h-full" content-class="min-h-full flex">
       <div class="flex flex-col-reverse overflow-hidden">
         <div class="pr-[10px]">
           <MessageItem v-for="[key, messageItem] in messageList" :key="key" :message-item="messageItem" />
         </div>
       </div>
-
-      <div
-        v-show="visible"
-        class="flex-center hover:text-theme-color absolute bottom-5 right-5 h-6 w-6 cursor-pointer rounded-full bg-white shadow-[0_0_0_1px_#ededed]"
-        @click.stop="clickBackBottom"
-      >
-        <i class="iconfont icon-decrease text-sm" />
-      </div>
     </n-scrollbar>
   </div>
 </template>

src/views/personal-space/personal-app-setting/components/agent-config/agent-preview/components/message-list.vue

@@ -22,7 +22,7 @@ defineEmits<{
 
 const { scrollRef, scrollToBottom } = useScroll()
 
-const { visible, clickBackBottom, throttleScrollMessageContainer } = useBackBottom(scrollToBottom)
+const { visible, clickBackBottom, throttleScrollContainer } = useBackBottom(scrollRef, scrollToBottom)
 
 const isShowContinueQuestion = computed(() => {
   return (
@@ -52,7 +52,7 @@ function handleScrollToBottom() {
 </script>
 
 <template>
-  <main ref="scrollRef" class="h-full overflow-y-auto overflow-x-hidden px-5" @scroll="throttleScrollMessageContainer">
+  <main ref="scrollRef" class="h-full overflow-y-auto overflow-x-hidden px-5" @scroll="throttleScrollContainer">
     <div>
       <MessageItem
         v-for="[key, messageItem] in messageList"

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

@@ -24,7 +24,7 @@ defineEmits<{
 
 const { scrollRef, scrollToBottom } = useScroll()
 
-const { visible, clickBackBottom, throttleScrollMessageContainer } = useBackBottom(scrollToBottom)
+const { visible, clickBackBottom, throttleScrollContainer } = useBackBottom(scrollRef, scrollToBottom)
 
 const isShowContinueQuestion = computed(() => {
   return (
@@ -54,7 +54,7 @@ function handleScrollToBottom() {
 </script>
 
 <template>
-  <main ref="scrollRef" class="h-full overflow-y-auto overflow-x-hidden px-5" @scroll="throttleScrollMessageContainer">
+  <main ref="scrollRef" class="h-full overflow-y-auto overflow-x-hidden px-5" @scroll="throttleScrollContainer">
     <div>
       <MessageItem
         v-for="[key, messageItem] in messageList"