48px

wujingjing

2025-04-14 77b15609b62c9bcd80fcdfd65f134a06252920b9

 src/components/chat/components/ChatContainer.vue

@@ -14,7 +14,7 @@
         </div>

         <!-- 回到底部按钮 -->
         <div class="absolute right-28 bottom-56" v-if="!isBottom">
         <div class="absolute right-28 bottom-72" 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,19 +22,27 @@
               <i class="ywifont ywicon-xiangxiajiantou !text-[20px]" />
            </div>
         </div>
         <div v-show="digitalHumanIsShow" v-loading="humanIsLoading" class="absolute right-28 bottom-[250px] w-[303.75px] 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
            v-show="digitalHumanIsShow"
            v-loading="humanIsLoading"
            class="absolute right-0 bottom-6 z-[2]"
            :style="{ width: digitalHumanWidth, height: `calc(${digitalHumanWidth} * 16 / 9 - 300px)`, overflow: 'hidden' }"
         >
            <span class="ywifont ywicon-guanbi text-[20px] cursor-pointer absolute top-2 right-8 z-[1]" @click="closeDigitalHuman"></span>
            <div class="duix-container h-full w-full" :style="{ width: digitalHumanWidth, height: `calc(${digitalHumanWidth} * 16 / 9)` }"></div>
         </div>

         <div v-if="!digitalHumanIsShow" class="absolute right-28 bottom-[250px]">
         <div v-if="!digitalHumanIsShow" class="absolute rounded-full right-[24px] bottom-[100px] z-[2] bg-white p-4">
            <el-tooltip content="数字人" placement="top">
               <div
               <button class="digital-human-button " @click="openDigitalHuman">
                  <img alt="Icon" :src="iconSrc" />
               </button>
               <!-- <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>
               </div> -->
            </el-tooltip>
         </div>

@@ -64,19 +72,29 @@
import { onActivated, onDeactivated, ref } from 'vue';
import { useChatWidth } from '../hooks/useChatWidth';
import { useScroll } from '../hooks/useScroll';
import emitter from '/@/utils/mitt';
import type { QuestionLifecycle } from '../types';
import { useDigitalHuman } from './playBar/hook/useDigitalHuman';

import { iconSrc } from './constants';
import emitter from '/@/utils/mitt';
const props = defineProps<{
   loading?: boolean;
   moreIsLoading?: boolean;
   isSharePage?: boolean;
}>();

const emit = defineEmits<{
   autoSendMessage: [string, QuestionLifecycle];
}>();

const chatListDom = ref<HTMLDivElement>();
const { openDigitalHuman, isHumanTalking, humanIsLoading,digitalHumanIsShow, closeDigitalHuman } = useDigitalHuman({
   container: '.duix-container',
});
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,
});
@@ -119,4 +137,35 @@
      height: var(--loading-size);
   }
}

.digital-human-button {
   width: 40px;
   height: 40px;
   border: none;
   border-radius: 50%;
   background-color: #ffffff;
   cursor: pointer;
   padding: 0;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
}

.digital-human-button:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.digital-human-button:active {
   transform: translateY(0);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.digital-human-button img {
   width: 48px;
   height: 48px;
   object-fit: contain;
}
</style>