DigitalHuman

wujingjing

2025-04-07 457cc6cf166d3b6c22be4f78c1db8802a7fbb4c7

 src/components/chat/components/ChatContainer.vue

@@ -14,13 +14,28 @@
         </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-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>

         <!-- 输入区域 -->
@@ -29,14 +44,28 @@
         </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 emitter from '/@/utils/mitt';
import { useDigitalHuman } from './playBar/hook/useDigitalHuman';

const props = defineProps<{
   loading?: boolean;
@@ -45,11 +74,33 @@
}>();

const chatListDom = ref<HTMLDivElement>();

const { openDigitalHuman, isHumanTalking, humanIsLoading,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({