`
}
/**
* 初始化引导
* @param {*} root
*/
const initGuide=(root)=>{
root.insertAdjacentHTML("beforeend",guideHtml)
const button=root.querySelector(".button")
const close_icon=root.querySelector('.close')
const close_func=()=>{
root.removeChild(root.querySelector('.tips'))
root.removeChild(root.querySelector('.mask'))
localStorage.setItem('maxkbMaskTip',true)
}
button.onclick=close_func
close_icon.onclick=close_func
}
const initChat=(root)=>{
// 添加对话icon
root.insertAdjacentHTML("beforeend",chatButtonHtml)
// 添加对话框
root.insertAdjacentHTML('beforeend',getChatContainerHtml('{{protocol}}','{{host}}','{{token}}'))
// 按钮元素
const chat_button=root.querySelector('.chat_button')
// 对话框元素
const chat_container=root.querySelector('#chat_container')
const viewport=root.querySelector('.openviewport')
const closeviewport=root.querySelector('.closeviewport')
const close_func=()=>{
chat_container.style['display']=chat_container.style['display']=='block'?'none':'block'
}
close_icon=chat_container.querySelector('.close')
chat_button.onclick = close_func
close_icon.onclick=close_func
const viewport_func=()=>{
if(chat_container.classList.contains('enlarge')){
chat_container.classList.remove("enlarge");
viewport.classList.remove('viewportnone')
closeviewport.classList.add('viewportnone')
}else{
chat_container.classList.add("enlarge");
viewport.classList.add('viewportnone')
closeviewport.classList.remove('viewportnone')
}
}
viewport.onclick=viewport_func
closeviewport.onclick=viewport_func
}
/**
* 第一次进来的引导提示
*/
function initMaxkb(){
initMaxkbStyle()
const root=document.createElement('div')
root.id="maxkb"
document.body.appendChild(root)
const maxkbMaskTip=localStorage.getItem('maxkbMaskTip')
if(maxkbMaskTip==null){
initGuide(root)
}
initChat(root)
}
// 初始化全局样式
function initMaxkbStyle(){
style=document.createElement('style')
style.type='text/css'
style.innerText= `/* 放大 */
#maxkb .enlarge {
width: 50%!important;
height: 100%!important;
bottom: 0!important;
right: 0 !important;
}
@media only screen and (max-width: 768px){
#maxkb .enlarge {
width: 100%!important;
height: 100%!important;
right: 0 !important;
bottom: 0!important;
}
}
/* 引导 */
#maxkb .mask {
position: fixed;
z-index: 999;
background-color: transparent;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
#maxkb .mask .content {
width: 45px;
height: 50px;
box-shadow: 1px 1px 1px 2000px rgba(0,0,0,.6);
border-radius: 50% 0 0 50%;
position: absolute;
right: 0;
bottom: 42px;
z-index: 1000;
}
#maxkb .tips {
position: absolute;
bottom: 30px;
right: 60px;
padding: 22px 24px 24px;
border-radius: 6px;
color: #ffffff;
font-size: 14px;
background: #3370FF;
z-index: 1000;
}
#maxkb .tips .arrow {
position: absolute;
background: #3370FF;
width: 10px;
height: 10px;
pointer-events: none;
transform: rotate(45deg);
box-sizing: border-box;
/* left */
right: -5px;
bottom: 33px;
border-left-color: transparent;
border-bottom-color: transparent
}
#maxkb .tips .title {
font-size: 20px;
font-weight: 500;
margin-bottom: 8px;
}
#maxkb .tips .button {
text-align: right;
margin-top: 24px;
}
#maxkb .tips .button button {
border-radius: 4px;
background: #FFF;
padding: 3px 12px;
color: #3370FF;
cursor: pointer;
outline: none;
border: none;
}
#maxkb .tips .button button::after{
border: none;
}
#maxkb .tips .close {
position: absolute;
right: 20px;
top: 20px;
cursor: pointer;
}
#chat_container {
width: 420px;
height: 600px;
display:none;
}
@media only screen and (max-width: 768px) {
#chat_container {
width: 100%;
height: 70%;
right: 0 !important;
}
}
#maxkb .chat_button{
position: fixed;
bottom: 30px;
right: 0;
cursor: pointer;
}
#maxkb #chat_container{
z-index:10000;position: relative;
border-radius: 8px;
border: 1px solid var(--N300, #DEE0E3);
background: linear-gradient(188deg, rgba(235, 241, 255, 0.20) 39.6%, rgba(231, 249, 255, 0.20) 94.3%), #EFF0F1;
box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.10);
position: fixed;bottom: 20px;right: 45px;overflow: hidden;
}
#maxkb #chat_container .close{
position: absolute;
top: 15px;
right: 10px;
cursor: pointer;
}
#maxkb #chat_container .openviewport{
position: absolute;
top: 15px;
right: 50px;
cursor: pointer;
}
#maxkb #chat_container .closeviewport{
position: absolute;
top: 15px;
right: 50px;
cursor: pointer;
}
#maxkb #chat_container .viewportnone{
display:none;
}
#maxkb #chat_container #chat{
height:100%;
width:100%;
border: none;
}
#maxkb #chat_container {
animation: appear .4s ease-in-out;
}
@keyframes appear {
from {
height: 0;;
}
to {
height: 600px;
}
}`
document.head.appendChild(style)
}
function embedChatbot() {
white_list_str='{{white_list_str}}'
white_list=white_list_str.split(',')
if ({{is_auth}}&&({{white_active}}?white_list.includes(window.location.origin):true)) {
// 初始化maxkb智能小助手
initMaxkb()
} else console.error('invalid parameter')
}
window.onload = embedChatbot