实现原本功能

wujingjing

2025-01-15 0647fd26414fc8a3ab077d355f50da6e3e36ad63

 src/components/chat/components/ChatContainer.vue

@@ -2,7 +2,7 @@
   <div class="flex h-full">
      <div class="flex flex-col h-full flex-auto relative">
         <!-- 消息列表区域 -->
         <div ref="chatListDom" class="relative h-full flex flex-col items-center overflow-y-auto" style="height: calc(100% - 50px)">
         <div v-resize="updateChatWidth" ref="chatListDom" class="relative h-full flex flex-col items-center overflow-y-auto" style="height: calc(100% - 50px)">
            <span
               class="more-loading absolute text-blue-400 left-[50%] translate-x-[-50%] cursor-pointer w-10"
               v-loading="moreIsLoading"
@@ -24,14 +24,9 @@
         </div>

         <!-- 输入区域 -->
         <div
            class="sticky bottom-0 w-full px-6 pt-12 pb-6 bg-[rgb(247,248,250)] flex justify-center"
            v-if="!isSharePage && !isShareCheck"
         >
         <div class="sticky bottom-0 w-full px-6 pt-12 pb-6 bg-[rgb(247,248,250)] flex justify-center z-[1]" v-if="!isSharePage">
            <slot name="input-area" />
         </div>

         <div class="sticky bottom-0 w-full p-6 bg-[rgb(247,248,250)] flex justify-center" v-if="isShareCheck" />
      </div>

      <slot name="drawer" />
@@ -40,24 +35,27 @@

<script setup lang="ts">
import { ref } from 'vue';
import { useScrollToBottom } from '../hooks/useScrollToBottom';
import { useScroll } from '../hooks/useScroll';
import { useChatWidth } from '../hooks/useChatWidth';

const props = defineProps<{
   loading?: boolean;
   moreIsLoading?: boolean;
   isSharePage?: boolean;
   isShareCheck?: boolean;
   chatWidth?: string;
}>();

const chatListDom = ref<HTMLDivElement>();

const { scrollToBottom, isBottom } = useScrollToBottom({
const { scrollToBottom, isBottom } = useScroll({
   chatListDom,
});

const { updateChatWidth, chatWidth } = useChatWidth();

defineExpose({
   chatListDom,
   scrollToBottom,
   chatWidth,
});
</script>