From 07f5e49d4031f74c296fe01bb79e913c864979e5 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期一, 07 四月 2025 17:29:52 +0800
Subject: [PATCH] 数字人
---
src/components/chat/components/ChatContainer.vue | 79 ++++++++++++++++++++++++++++++++-------
1 files changed, 65 insertions(+), 14 deletions(-)
diff --git a/src/components/chat/components/ChatContainer.vue b/src/components/chat/components/ChatContainer.vue
index 7bff6cc..6648965 100644
--- a/src/components/chat/components/ChatContainer.vue
+++ b/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 flex-auto">
<span
class="more-loading absolute text-blue-400 left-[50%] translate-x-[-50%] cursor-pointer w-10"
v-loading="moreIsLoading"
@@ -14,7 +14,7 @@
</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"
@@ -22,15 +22,38 @@
<i class="ywifont ywicon-xiangxiajiantou !text-[20px]" />
</div>
</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 "
- >
- <slot name="input-area" />
+ <div v-show="digitalHumanIsShow" class="absolute right-28 bottom-[250px] w-[400px] h-[540px]">
+ <span class="ywifont ywicon-guanbi text-[20px] cursor-pointer absolute top-2 right-2 z-[1]" @click="closeDigitalHuman"></span>
+ <div class="duix-container h-full w-full"></div>
</div>
+ <div v-if="!digitalHumanIsShow" class="absolute right-28 bottom-[250px]">
+ <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>
+
+ <!-- 杈撳叆鍖哄煙 -->
+ <div class="w-full px-6 pb-6 bg-[rgb(247,248,250)] flex justify-center z-[1] flex-0" v-if="!isSharePage">
+ <slot name="input-area" />
+ </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" />
@@ -38,24 +61,52 @@
</template>
<script setup lang="ts">
-import { ref } from 'vue';
-import { useScrollToBottom } from '../hooks/useScrollToBottom';
+import { onActivated, onDeactivated, ref } from 'vue';
+import { useChatWidth } from '../hooks/useChatWidth';
+import { useScroll } from '../hooks/useScroll';
+import emitter from '/@/utils/mitt';
+import { useDigitalHuman } from './playBar/hook/useDigitalHuman';
const props = defineProps<{
loading?: boolean;
moreIsLoading?: boolean;
isSharePage?: boolean;
- chatWidth?: string;
}>();
const chatListDom = ref<HTMLDivElement>();
-
-const { scrollToBottom, isBottom } = useScrollToBottom({
+const { openDigitalHuman, isHumanTalking, digitalHumanIsShow, closeDigitalHuman } = useDigitalHuman({
+ container: '.duix-container',
+});
+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({
chatListDom,
+ scrollToBottom,
+ chatWidth,
});
</script>
--
Gitblit v1.9.3