88 lines
1.9 KiB
Vue
88 lines
1.9 KiB
Vue
|
<template>
|
|||
|
|
<div class="footer">
|
|||
|
|
<div v-if="!showChat" class="footer-icon" @click="chatClick">
|
|||
|
|
<Icon icon="ant-design:comment-outlined" size="22"></Icon>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="showChat" class="footer-close-icon" @click="chatClick">
|
|||
|
|
<Icon icon="ant-design:close-outlined" size="20"></Icon>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="showChat" class="ai-chat">
|
|||
|
|
<AiChat ref="aiChatRef"></AiChat>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { onMounted, ref } from 'vue';
|
|||
|
|
import AiChat from './AiChat.vue';
|
|||
|
|
import { useRouter } from 'vue-router';
|
|||
|
|
|
|||
|
|
//aiChat<61><74>ref
|
|||
|
|
const aiChatRef = ref();
|
|||
|
|
//Ӧ<><D3A6>id
|
|||
|
|
const appId = ref<string>('');
|
|||
|
|
|
|||
|
|
//<2F>Ƿ<EFBFBD><C7B7><EFBFBD>ʾ<EFBFBD><CABE><EFBFBD><EFBFBD>
|
|||
|
|
const showChat = ref<any>(false);
|
|||
|
|
const router = useRouter();
|
|||
|
|
//<2F>ж<EFBFBD><D0B6>Ƿ<EFBFBD>Ϊ<EFBFBD><CEAA>ʼ<EFBFBD><CABC>
|
|||
|
|
const isInit = ref<boolean>(false);
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* chatͼ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>¼<EFBFBD>
|
|||
|
|
*/
|
|||
|
|
function chatClick() {
|
|||
|
|
showChat.value = !showChat.value;
|
|||
|
|
if(showChat.value && !isInit.value){
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
isInit.value = true;
|
|||
|
|
aiChatRef.value.initChat(appId.value);
|
|||
|
|
},100)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
let params: any = router.currentRoute.value.params;
|
|||
|
|
appId.value = params?.appId;
|
|||
|
|
isInit.value = false;
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="less">
|
|||
|
|
.footer {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 16px;
|
|||
|
|
right: 16px;
|
|||
|
|
left: unset;
|
|||
|
|
top: unset;
|
|||
|
|
|
|||
|
|
.footer-icon {
|
|||
|
|
cursor: pointer;
|
|||
|
|
background-color: #155eef;
|
|||
|
|
color: white;
|
|||
|
|
border-radius: 100%;
|
|||
|
|
padding: 20px;
|
|||
|
|
width: 48px;
|
|||
|
|
height: 48px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
box-shadow: rgba(0, 0, 0, 0.2) 0 4px 8px 0;
|
|||
|
|
}
|
|||
|
|
.footer-close-icon {
|
|||
|
|
color: #0a3069;
|
|||
|
|
height: 48px;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 10px;
|
|||
|
|
top: 20px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
z-index: 9999;
|
|||
|
|
}
|
|||
|
|
.ai-chat {
|
|||
|
|
border: 1px solid #eeeeee;
|
|||
|
|
width: calc(100vh - 20px);
|
|||
|
|
height: calc(100vh - 200px);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|