From e186de0d012a1fcc1318342758dd3e2f73fe9e88 Mon Sep 17 00:00:00 2001 From: wujingjing <gersonwu@qq.com> Date: 星期五, 08 十一月 2024 11:12:58 +0800 Subject: [PATCH] format --- src/components/chat/Chat.vue | 123 ++++++++++++++++++++++------------------ 1 files changed, 68 insertions(+), 55 deletions(-) diff --git a/src/components/chat/Chat.vue b/src/components/chat/Chat.vue index 0beb392..d584d27 100644 --- a/src/components/chat/Chat.vue +++ b/src/components/chat/Chat.vue @@ -8,7 +8,7 @@ ></span> <div class="h-full relative" v-loading="chatListLoading" :style="{ width: chatWidth }"> <div - class="group flex px-4 py-6 rounded-lg relative" + class="flex px-4 py-6 rounded-lg relative" :class="{ 'flex-row-reverse': item.role === RoleEnum.user, 'px-10': isShareCheck }" v-for="(item, msgIndex) of computedMessageList" :key="`${item.historyId}_${item.role}`" @@ -36,6 +36,7 @@ <div class="text-sm rounded-[6px] p-4 leading-relaxed" :style="{ backgroundColor: item.role === RoleEnum.user ? 'rgb(197 224 255)' : 'white' }" + :class="{ group: item.role === RoleEnum.user }" > <div class="flex flex-col" v-if="item?.stepList?.length > 0"> <div class="flex items-center mb-3"> @@ -73,6 +74,38 @@ </el-steps> </div> + <div + v-if="item.role === RoleEnum.user && item.content?.values && !isSharePage && !isShareCheck" + class="absolute flex items-center bottom-0 group invisible" + > + <div class="bg-[#fff] flex items-center mr-4 space-x-2 flex-nowrap rounded-[6px] py-2 px-2 group-hover:visible"> + <el-tooltip effect="dark" content="澶嶅埗" placement="top"> + <div class="flex items-center justify-center size-[20px]"> + <i + class="p-2 ywifont ywicon-copy cursor-pointer hover:text-[#0284ff] font-medium !text-[15px] hover:!text-[18px]" + @click="copyUserClick(item)" + /> + </div> + </el-tooltip> + <el-tooltip effect="dark" content="璁句负甯哥敤璇�" placement="top"> + <div class="flex items-center justify-center size-[20px]"> + <i + class="p-2 ywifont ywicon-cubelifangti cursor-pointer hover:text-[#0284ff] text-[#000] font-[590] !text-[15px] hover:!text-[18px]" + @click="setCommonQuestionClick(item)" + /> + </div> + </el-tooltip> + <el-tooltip effect="dark" content="鍒嗕韩" placement="top"> + <div class="flex items-center justify-center size-[15px]"> + <i + :class="{ 'text-[#0284ff]': item.state === AnswerState.Unlike }" + class="p-2 ywifont ywicon-fenxiang cursor-pointer hover:text-[#0284ff] !text-[15px] hover:!text-[18px]" + @click="shareClick(item)" + /> + </div> + </el-tooltip> + </div> + </div> <template v-if="item.content?.values"> <div v-if="item.content.errCode === ErrorCode.Message" class="flex-column w-full"> <p class="text-red-500"> @@ -122,42 +155,9 @@ </template> </div> <!-- 鎿嶄綔 --> - - <div - v-if="item.role === RoleEnum.user && item.content?.values && chatDisplayMode === 'default' && !isShareCheck" - class="absolute flex items-center bottom-0 group invisible" - > - <div class="bg-[#fff] flex items-center mr-4 space-x-2 flex-nowrap rounded-[6px] py-2 px-2 group-hover:visible"> - <el-tooltip effect="dark" content="澶嶅埗" placement="top"> - <div class="flex items-center justify-center size-[20px]"> - <i - class="p-2 ywifont ywicon-copy cursor-pointer hover:text-[#0284ff] font-medium !text-[15px] hover:!text-[18px]" - @click="copyUserClick(item)" - /> - </div> - </el-tooltip> - <el-tooltip effect="dark" content="璁句负甯哥敤璇�" placement="top"> - <div class="flex items-center justify-center size-[20px]"> - <i - class="p-2 ywifont ywicon-cubelifangti cursor-pointer hover:text-[#0284ff] text-[#000] font-[590] !text-[15px] hover:!text-[18px]" - @click="setCommonQuestionClick(item)" - /> - </div> - </el-tooltip> - <el-tooltip effect="dark" content="鍒嗕韩" placement="top"> - <div class="flex items-center justify-center size-[15px]"> - <i - :class="{ 'text-[#0284ff]': item.state === AnswerState.Unlike }" - class="p-2 ywifont ywicon-fenxiang cursor-pointer hover:text-[#0284ff] !text-[15px] hover:!text-[18px]" - @click="shareClick(item)" - /> - </div> - </el-tooltip> - </div> </div> - <div - v-if="item.role === RoleEnum.assistant && item.content?.values && chatDisplayMode === 'default' && !isShareCheck" + v-if="item.role === RoleEnum.assistant && item.content?.values && !isSharePage && !isShareCheck" class="absolute flex items-center right-0 mr-4 mt-2 space-x-2" > <div @@ -246,7 +246,7 @@ <div class="sticky bottom-0 w-full p-6 bg-[rgb(247,248,250)] flex justify-center" - v-if="chatDisplayMode === 'default' && !isShareCheck" + v-if="!isSharePage && !isShareCheck" > <PlayBar v-model:voicePageIsShow="voicePageIsShow" @@ -282,18 +282,19 @@ import { extCallQuery, questionStreamByPost, shareChatHistoryByPost } from '/@/api/ai/chat'; import PlayBar from '/@/components/chat/components/playBar/PlayBar.vue'; import CustomDrawer from '/@/components/drawer/CustomDrawer.vue'; +import { SERVE_URL } from '/@/constants'; import { Logger } from '/@/model/logger/Logger'; import router from '/@/router'; import { - activeChatRoom, - activeGroupType, - activeLLMId, - activeRoomId, - activeSampleId, - activeSectionAId, - chatDisplayMode, - getRoomConfig, - roomConfig, +activeChatRoom, +activeGroupType, +activeLLMId, +activeRoomId, +activeSampleId, +activeSectionAId, +getRoomConfig, +isSharePage, +roomConfig, } from '/@/stores/chatRoom'; import { ErrorCode } from '/@/utils/request'; import { toMyFixed } from '/@/utils/util'; @@ -605,7 +606,10 @@ messageList.value.at(-1).createTime = currentTime; } }; + + const { loadRangeData, onChatListScroll, moreIsLoading, nextUserMsgEndIndex } = useScrollLoad({ + isSharePage: isSharePage, container: chatListDom, historyGroupId: currentRouteId, messageList, @@ -614,11 +618,12 @@ const chatListLoading = ref(false); -const { scrollToBottom } = useScrollToBottom({ +const { scrollToBottom, scrollToTop } = useScrollToBottom({ chatListDom: chatListDom, }); onMounted(async () => { + messageList.value = []; // 鍔犺浇鍒濆鏁版嵁 chatListLoading.value = true; @@ -629,19 +634,26 @@ if (messageList.value.length === 0) { messageContent.value = { type: AnswerType.Text, - values: activeChatRoom.value.title, + values: activeChatRoom.value?.title, }; sendChatMessage(); } else { - setTimeout(() => { - // 鍒濆鐘舵�佹粴涓�涓� - scrollToBottom(); - + if (isSharePage.value) { setTimeout(() => { - chatListDom.value.addEventListener('scroll', onChatListScroll); + // 婊氬姩鍒伴《閮� + scrollToTop(); }, 300); - }, 300); + } else { + setTimeout(() => { + // 鍒濆鐘舵�佹粴涓�涓� + scrollToBottom(); + + setTimeout(() => { + chatListDom.value.addEventListener('scroll', onChatListScroll); + }, 300); + }, 300); + } } }); //#region ====================== 鍏宠仈鏌ヨ ====================== @@ -783,8 +795,9 @@ if (!res.values) return; const shareId = Object.values(res.values)[0]; if (!shareId) return; - - return `${shareId}`; + const relativeHref = router.resolve(`share?id=${shareId}`).href; + const shareLink = `${SERVE_URL}${relativeHref}`; + return shareLink; }; //#endregion -- Gitblit v1.9.3