From eb5a5abe4baff39cefc28a30e18611486e981418 Mon Sep 17 00:00:00 2001 From: wangdan-fit2cloud Date: Thu, 16 May 2024 14:47:20 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=B9=E8=AF=9D=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E5=8E=86=E5=8F=B2=E8=AE=B0=E5=BD=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/public/embeb.js | 307 ------------------------------ ui/src/router/routes.ts | 11 +- ui/src/views/chat/base/index.vue | 106 +++++++++++ ui/src/views/chat/embed/index.vue | 144 ++++++++++++++ ui/src/views/chat/index.vue | 114 ++--------- ui/src/views/chat/pc/index.vue | 183 ++++++++++++++++++ 6 files changed, 451 insertions(+), 414 deletions(-) delete mode 100644 ui/public/embeb.js create mode 100644 ui/src/views/chat/base/index.vue create mode 100644 ui/src/views/chat/embed/index.vue create mode 100644 ui/src/views/chat/pc/index.vue diff --git a/ui/public/embeb.js b/ui/public/embeb.js deleted file mode 100644 index 23517cf59..000000000 --- a/ui/public/embeb.js +++ /dev/null @@ -1,307 +0,0 @@ -function auth(token, protocol, host) { - const XML = new XMLHttpRequest() - XML.open('POST', `${protocol}//${host}/api/application/authentication`, false) - XML.setRequestHeader('Content-Type', 'application/json') - res = XML.send(JSON.stringify({ access_token: token })) - return XML.status == 200 -} - -const guideHtml=` -
-
-
-
-
- - - -
- -
🌟 遇见问题，不再有障碍！
-

你好，我是你的智能小助手。
- 点我，开启高效解答模式，让问题变成过去式。

-
- -
- -
-` -const chatButtonHtml= -`
- - - - - - - - - - - - - - - - - - - - - - - -
` - - - -const getChatContainerHtml=(protocol,host,token)=>{ - return `
- -
-
- -
-
- - -
` -} -/** - * 初始化引导 - * @param {*} root - */ -const initGuide=(root)=>{ - root.insertAdjacentHTML("beforeend",guideHtml) - const button=root.querySelector(".maxkb-button") - const close_icon=root.querySelector('.maxkb-close') - const close_func=()=>{ - root.removeChild(root.querySelector('.maxkb-tips')) - root.removeChild(root.querySelector('.maxkb-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('.maxkb-chat-button') - // 对话框元素 - const chat_container=root.querySelector('#maxkb-chat-container') - - const viewport=root.querySelector('.maxkb-openviewport') - const closeviewport=root.querySelector('.maxkb-closeviewport') - const close_func=()=>{ - chat_container.style['display']=chat_container.style['display']=='block'?'none':'block' - } - close_icon=chat_container.querySelector('.maxkb-close') - chat_button.onclick = close_func - close_icon.onclick=close_func - const viewport_func=()=>{ - if(chat_container.classList.contains('maxkb-enlarge')){ - chat_container.classList.remove("maxkb-enlarge"); - viewport.classList.remove('maxkb-viewportnone') - closeviewport.classList.add('maxkb-viewportnone') - }else{ - chat_container.classList.add("maxkb-enlarge"); - viewport.classList.add('maxkb-viewportnone') - closeviewport.classList.remove('maxkb-viewportnone') - } - } - viewport.onclick=viewport_func - closeviewport.onclick=viewport_func -} -/** - * 第一次进来的引导提示 - */ -function initMaxkb(){ - const maxkb=document.createElement('div') - const root=document.createElement('div') - root.id="maxkb" - initMaxkbStyle(maxkb) - maxkb.appendChild(root) - document.body.appendChild(maxkb) - const maxkbMaskTip=localStorage.getItem('maxkbMaskTip') - if(maxkbMaskTip==null){ - initGuide(root) - } - initChat(root) -} - - -// 初始化全局样式 -function initMaxkbStyle(root){ - style=document.createElement('style') - style.type='text/css' - style.innerText= ` - /* 放大 */ - #maxkb .maxkb-enlarge { - width: 50%!important; - height: 100%!important; - bottom: 0!important; - right: 0 !important; - } - @media only screen and (max-width: 768px){ - #maxkb .maxkb-enlarge { - width: 100%!important; - height: 100%!important; - right: 0 !important; - bottom: 0!important; - } - } - - /* 引导 */ - - #maxkb .maxkb-mask { - position: fixed; - z-index: 999; - background-color: transparent; - height: 100%; - width: 100%; - top: 0; - left: 0; - } - #maxkb .maxkb-mask .maxkb-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 .maxkb-tips { - position: fixed; - bottom: 30px; - right: 60px; - padding: 22px 24px 24px; - border-radius: 6px; - color: #ffffff; - font-size: 14px; - background: #3370FF; - z-index: 1000; - } - #maxkb .maxkb-tips .maxkb-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 .maxkb-tips .maxkb-title { - font-size: 20px; - font-weight: 500; - margin-bottom: 8px; - } - #maxkb .maxkb-tips .maxkb-button { - text-align: right; - margin-top: 24px; - } - #maxkb .maxkb-tips .maxkb-button button { - border-radius: 4px; - background: #FFF; - padding: 3px 12px; - color: #3370FF; - cursor: pointer; - outline: none; - border: none; - } - #maxkb .maxkb-tips .maxkb-button button::after{ - border: none; - } - #maxkb .maxkb-tips .maxkb-close { - position: absolute; - right: 20px; - top: 20px; - cursor: pointer; - - } - #maxkb-chat-container { - width: 420px; - height: 600px; - display:none; - } - @media only screen and (max-width: 768px) { - #maxkb-chat-container { - width: 100%; - height: 70%; - right: 0 !important; - } - } - - #maxkb .maxkb-chat-button{ - position: fixed; - bottom: 30px; - right: 0; - cursor: pointer; - } - #maxkb #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 #maxkb-chat-container .maxkb-chat-close{ - position: absolute; - top: 15px; - right: 10px; - cursor: pointer; - } - #maxkb #maxkb-chat-container .maxkb-openviewport{ - position: absolute; - top: 15px; - right: 50px; - cursor: pointer; - } - #maxkb #maxkb-chat-container .maxkb-closeviewport{ - position: absolute; - top: 15px; - right: 50px; - cursor: pointer; - } - #maxkb #maxkb-chat-container .maxkb-viewportnone{ - display:none; - } - #maxkb #maxkb-chat-container #maxkb-chat{ - height:100%; - width:100%; - border: none; -} - #maxkb #maxkb-chat-container { - animation: appear .4s ease-in-out; - } - @keyframes appear { - from { - height: 0;; - } - - to { - height: 600px; - } - }` - root.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) { - // 初始化maxkb智能小助手 - initMaxkb() - } else console.error('invalid parameter') -} -window.onload = embedChatbot diff --git a/ui/src/router/routes.ts b/ui/src/router/routes.ts index 4edc08cae..55f4ec3cd 100644 --- a/ui/src/router/routes.ts +++ b/ui/src/router/routes.ts @@ -10,16 +10,7 @@ export const routes: Array = [ name: 'home', component: () => import('@/layout/app-layout/index.vue'), redirect: '/application', - children: [ - // TODO 待处理 - // { - // path: '/first', - // name: 'first', - // meta: { icon: 'House', title: '首页' }, - // component: () => import('@/views/first/index.vue') - // }, - ...rolesRoutes - ] + children: [...rolesRoutes] }, { diff --git a/ui/src/views/chat/base/index.vue b/ui/src/views/chat/base/index.vue new file mode 100644 index 000000000..9757829b4 --- /dev/null +++ b/ui/src/views/chat/base/index.vue @@ -0,0 +1,106 @@ + + + diff --git a/ui/src/views/chat/embed/index.vue b/ui/src/views/chat/embed/index.vue new file mode 100644 index 000000000..f04d44242 --- /dev/null +++ b/ui/src/views/chat/embed/index.vue @@ -0,0 +1,144 @@ + + + diff --git a/ui/src/views/chat/index.vue b/ui/src/views/chat/index.vue index ecb00d3db..9757829b4 100644 --- a/ui/src/views/chat/index.vue +++ b/ui/src/views/chat/index.vue @@ -1,50 +1,23 @@ +