From b9d28bd6af15026741099c25a6e72fe947ad3772 Mon Sep 17 00:00:00 2001 From: wujingjing <gersonwu@qq.com> Date: 星期四, 10 四月 2025 17:31:50 +0800 Subject: [PATCH] 修改数字人对话 --- src/components/chat/components/ChatContainer.vue | 75 +++++++++++++++++++++++++++++++++++-- 1 files changed, 70 insertions(+), 5 deletions(-) diff --git a/src/components/chat/components/ChatContainer.vue b/src/components/chat/components/ChatContainer.vue index 2154a53..404af42 100644 --- a/src/components/chat/components/ChatContainer.vue +++ b/src/components/chat/components/ChatContainer.vue @@ -14,13 +14,33 @@ </div> <!-- 鍥炲埌搴曢儴鎸夐挳 --> - <div class="absolute right-28 bottom-40" v-if="!isBottom"> + <div class="absolute right-28 bottom-56" v-if="!isBottom"> <div class="flex items-center justify-center size-[38px] cursor-pointer hover:text-[#0284ff] border rounded-full hover:bg-[#f6f7f9] shadow bg-white" @click="scrollToBottom" > <i class="ywifont ywicon-xiangxiajiantou !text-[20px]" /> </div> + </div> + <div + v-show="digitalHumanIsShow" + v-loading="humanIsLoading" + class="absolute right-0 bottom-0 z-[2]" + :style="{ width: digitalHumanWidth, height: `calc(${digitalHumanWidth} * 16 / 9)` }" + > + <span class="ywifont ywicon-guanbi text-[20px] cursor-pointer absolute top-7 right-7 z-[1]" @click="closeDigitalHuman"></span> + <div class="duix-container h-full w-full"></div> + </div> + + <div v-if="!digitalHumanIsShow" class="absolute right-[24px] bottom-[100px] z-[2]"> + <el-tooltip content="鏁板瓧浜�" placement="top"> + <div + class="flex items-center justify-center size-[38px] cursor-pointer hover:text-[#0284ff] border rounded-full hover:bg-[#f6f7f9] shadow bg-white" + @click="openDigitalHuman" + > + <i class="ywifont ywicon-shuziren !text-[20px]" /> + </div> + </el-tooltip> </div> <!-- 杈撳叆鍖哄煙 --> @@ -29,27 +49,72 @@ </div> </div> + <div class="w-[30%] flex-0 flex flex-col" v-if="fileContentIsShow"> + <div class="bg-[#f9fbff] flex items-center justify-between p-4 border-b"> + <div class="text-lg font-medium">{{ fileContent.title }}</div> + <div class="cursor-pointer hover:text-[#0284ff]" @click="fileContentIsShow = false"> + <i class="ywifont ywicon-guanbi text-[20px]" /> + </div> + </div> + <span class="bg-[#edf2fb] flex-1 overflow-y-auto p-4 break-words whitespace-pre-wrap"> + {{ fileContent.content }} + </span> + </div> + <slot name="drawer" /> </div> </template> <script setup lang="ts"> -import { ref } from 'vue'; -import { useScroll } from '../hooks/useScroll'; +import { onActivated, onDeactivated, ref } from 'vue'; import { useChatWidth } from '../hooks/useChatWidth'; - +import { useScroll } from '../hooks/useScroll'; +import type { QuestionLifecycle } from '../types'; +import { useDigitalHuman } from './playBar/hook/useDigitalHuman'; +import emitter from '/@/utils/mitt'; const props = defineProps<{ loading?: boolean; moreIsLoading?: boolean; isSharePage?: boolean; }>(); -const chatListDom = ref<HTMLDivElement>(); +const emit = defineEmits<{ + autoSendMessage: [string, QuestionLifecycle]; +}>(); +const chatListDom = ref<HTMLDivElement>(); +const { openDigitalHuman, isHumanTalking, humanIsLoading, digitalHumanIsShow, closeDigitalHuman, digitalHumanWidth } = useDigitalHuman( + { + container: '.duix-container', + autoSendMessage: (question: string, lifecycleCall?: QuestionLifecycle) => { + emit('autoSendMessage', question, lifecycleCall); + }, + } +); const { scrollToBottom, isBottom } = useScroll({ chatListDom, }); +const fileContentIsShow = ref(false); + +const fileContent = ref({ + title: '', + content: '', +}); + +const setFileContent = (data: { title: string; content: string }) => { + fileContentIsShow.value = true; + fileContent.value = data; +}; + +onActivated(() => { + emitter.on('setFileContent', setFileContent); +}); + +onDeactivated(() => { + emitter.off('setFileContent', setFileContent); +}); + const { updateChatWidth, chatWidth } = useChatWidth(); defineExpose({ -- Gitblit v1.9.3