+
+
+
+
`
+}
+/**
+ * 初始化引导
+ * @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(window.maxkbChatConfig.protocol,window.maxkbChatConfig.host,window.maxkbChatConfig.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() {
const t = window.maxkbChatConfig
check = auth(t.token, t.protocol, t.host)
if (t && t.token && t.protocol && t.host && check) {
- icon = `
`
- chat_button = document.createElement('div')
- chat_button.style = 'position: fixed;bottom: 30px;right: 0;cursor: pointer;'
- chat_button.innerHTML = icon
- style=document.createElement('style')
- style.type='text/css'
- style.innerText= `#chat_container {
- width: 420px;
- height: 600px;
- }
- @media only screen and (max-width: 768px) {
- #chat_container {
- width: 100%;
- height: 70%;
- right: 0 !important;
- }
- }`
- document.head.appendChild(style)
-
- chat_container = document.createElement('div')
- chat_container.id = 'chat_container'
- chat_container.style.cssText = `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;`
- chat_container.style['display'] = 'none'
-
- chat = document.createElement('iframe')
-
- chat.src = `${window.maxkbChatConfig.protocol}//${window.maxkbChatConfig.host}/ui/chat/${window.maxkbChatConfig.token}`
- chat.id = 'chat'
- chat_container.append(chat)
- chat.style.cssText = `border: none;height:100%;width:100%`
-
- close_button = document.createElement('div')
-
- close_button.innerHTML = `
`
- close_button.style.cssText = `position: absolute;
- top: 15px;
- right: 10px;
- cursor: pointer;
- `
- close_button.onclick = () => {
- chat_container.style['display']='none'
- }
-
- chat_container.append(close_button)
- document.body.append(chat_container)
-
- chat_button.onclick = ($event) => {
- chat_container.style['display']=chat_container.style['display']=='block'?'none':'block'
-
- }
- sty = document.createElement('style')
- sty.innerText = ` #chat_container {
- animation: appear .4s ease-in-out;
- }
- @keyframes appear {
- from {
- height: 0;;
- }
-
- to {
- height: 600px;
- }
- }
- `
- document.head.append(sty)
- document.body.append(chat_button)
+ // 初始化maxkb智能小助手
+ initMaxkb()
} else console.error('invalid parameter')
}
window.onload = embedChatbot