AI 客服
This commit is contained in:
Your Name
@@ -60,6 +60,109 @@
|
||||
document.head.appendChild(link);
|
||||
})();
|
||||
</script>
|
||||
<!-- Dify AI 客服机器人（全局悬浮气泡） -->
|
||||
<script>
|
||||
window.difyChatbotConfig = {
|
||||
token: 'OcRvj5VVR76cME9J',
|
||||
baseUrl: 'http://chat.zhenyangtang.com.cn:8088/',
|
||||
draggable: true,
|
||||
dragAxis: 'both',
|
||||
inputs: {},
|
||||
systemVariables: {},
|
||||
userVariables: {}
|
||||
}
|
||||
</script>
|
||||
<script
|
||||
src="http://chat.zhenyangtang.com.cn:8088/embed.min.js"
|
||||
id="OcRvj5VVR76cME9J"
|
||||
defer
|
||||
></script>
|
||||
<style>
|
||||
/* 气泡按钮使用自定义 AI 图标（base 为 /admin/，public 资源在该路径下） */
|
||||
#dify-chatbot-bubble-button {
|
||||
background-color: #fff !important;
|
||||
background-image: url('/admin/ai-chat-icon.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
/* 隐藏 embed.min.js 内置的笑脸/关闭 SVG 图标 */
|
||||
#dify-chatbot-bubble-button svg {
|
||||
display: none !important;
|
||||
}
|
||||
/* 聊天窗口 iframe 默认透明。小窗口布局顶栏是白色文字，
|
||||
顶部 56px 垫深蓝衬托，下方近白作聊天区底色 */
|
||||
#dify-chatbot-bubble-window {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#1c64f2 0,
|
||||
#1c64f2 56px,
|
||||
#f7f8fc 56px
|
||||
) !important;
|
||||
}
|
||||
/* 全屏（宽屏布局）顶栏是深色文字，用整片近白底色 */
|
||||
#dify-chatbot-bubble-window.dify-chatbot-fullscreen {
|
||||
background: #f7f8fc !important;
|
||||
}
|
||||
/* 全屏态：#dify-chatbot-bubble-window 是 iframe 本身，用 !important 覆盖其内联样式 */
|
||||
#dify-chatbot-bubble-window.dify-chatbot-fullscreen {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
max-width: 100vw !important;
|
||||
max-height: 100vh !important;
|
||||
min-width: 0 !important;
|
||||
min-height: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
/* 聊天窗口控制按钮（全屏切换 / 关闭），仅窗口打开时显示，位置由脚本计算 */
|
||||
#dify-fullscreen-toggle,
|
||||
#dify-chat-close {
|
||||
position: fixed;
|
||||
display: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background-color: rgba(255, 255, 255, 0.18);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
z-index: 2147483646;
|
||||
}
|
||||
#dify-fullscreen-toggle:hover,
|
||||
#dify-chat-close:hover {
|
||||
background-color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
/* 全屏时顶栏是浅色的，按钮改用实色圆形放在左上角 */
|
||||
#dify-fullscreen-toggle.is-fullscreen,
|
||||
#dify-chat-close.is-fullscreen {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background-color: #1c64f2;
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0 4px 8px 0;
|
||||
line-height: 40px;
|
||||
}
|
||||
#dify-fullscreen-toggle.is-fullscreen:hover,
|
||||
#dify-chat-close.is-fullscreen:hover {
|
||||
background-color: #1a56db;
|
||||
}
|
||||
/* 遮盖聊天窗口底部的 POWERED BY Dify 版权条（该区域在 iframe 内部，只能覆盖） */
|
||||
#dify-brand-cover,
|
||||
#dify-brand-transition-cover {
|
||||
position: fixed;
|
||||
display: none;
|
||||
background: #f2f4f7;
|
||||
z-index: 2147483641;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
@@ -70,5 +173,185 @@
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
<script>
|
||||
// Dify 聊天窗口全屏切换：#dify-chatbot-bubble-window 是 iframe 本身，
|
||||
// 无法往其内部挂按钮，故在气泡旁放一个独立按钮，窗口打开时才显示
|
||||
(function () {
|
||||
var btn = document.createElement('button')
|
||||
btn.type = 'button'
|
||||
btn.id = 'dify-fullscreen-toggle'
|
||||
btn.title = '全屏 / 还原'
|
||||
btn.textContent = '⛶'
|
||||
var transitionUntil = 0
|
||||
// 全屏切换（放大和还原都算）后的过渡期：Dify 内部重排期间版权位置不定，
|
||||
// 用大面积遮盖兜底，并逐帧跟踪窗口尺寸动画
|
||||
function startTransition() {
|
||||
transitionUntil = Date.now() + TRANSITION_MS
|
||||
function loop() {
|
||||
sync()
|
||||
if (Date.now() < transitionUntil) requestAnimationFrame(loop)
|
||||
}
|
||||
loop()
|
||||
}
|
||||
btn.addEventListener('click', function () {
|
||||
var win = document.getElementById('dify-chatbot-bubble-window')
|
||||
if (!win) return
|
||||
win.classList.toggle('dify-chatbot-fullscreen')
|
||||
startTransition()
|
||||
})
|
||||
document.body.appendChild(btn)
|
||||
|
||||
// 自定义关闭按钮：窗口打开时气泡被隐藏，由它代替气泡的关闭功能
|
||||
var closeBtn = document.createElement('button')
|
||||
closeBtn.type = 'button'
|
||||
closeBtn.id = 'dify-chat-close'
|
||||
closeBtn.title = '关闭'
|
||||
closeBtn.textContent = '✕'
|
||||
closeBtn.addEventListener('click', function () {
|
||||
var win = document.getElementById('dify-chatbot-bubble-window')
|
||||
var difyBubble = document.getElementById('dify-chatbot-bubble-button')
|
||||
if (win) win.classList.remove('dify-chatbot-fullscreen')
|
||||
// 复用 embed.min.js 的开关逻辑，保证气泡图标状态同步
|
||||
if (difyBubble) difyBubble.click()
|
||||
sync()
|
||||
})
|
||||
document.body.appendChild(closeBtn)
|
||||
|
||||
// 隐藏 Dify 头部自带的展开按钮：该按钮仅在收到 isToggledByButton:true 时渲染
|
||||
// （embed.min.js 默认发送），在其后补发 false 覆盖即可
|
||||
var DIFY_ORIGIN = 'http://chat.zhenyangtang.com.cn:8088'
|
||||
window.addEventListener('message', function (event) {
|
||||
if (event.origin !== DIFY_ORIGIN) return
|
||||
if (!event.data || event.data.type !== 'dify-chatbot-iframe-ready') return
|
||||
var win = document.getElementById('dify-chatbot-bubble-window')
|
||||
if (!win || event.source !== win.contentWindow) return
|
||||
setTimeout(function () {
|
||||
win.contentWindow.postMessage(
|
||||
{
|
||||
type: 'dify-chatbot-config',
|
||||
payload: { isToggledByButton: false, isDraggable: false }
|
||||
},
|
||||
DIFY_ORIGIN
|
||||
)
|
||||
}, 200)
|
||||
})
|
||||
|
||||
var cover = document.createElement('div')
|
||||
cover.id = 'dify-brand-cover'
|
||||
document.body.appendChild(cover)
|
||||
var transitionCover = document.createElement('div')
|
||||
transitionCover.id = 'dify-brand-transition-cover'
|
||||
document.body.appendChild(transitionCover)
|
||||
|
||||
var BRAND_BAR_HEIGHT = 38
|
||||
// 全屏后 Dify 内部布局重排的过渡时长，期间用大面积遮盖兜底
|
||||
var TRANSITION_MS = 1500
|
||||
// Dify 宽屏布局断点 40rem：窄窗口版权条在底部，宽窗口（展开/全屏）移到顶栏右侧
|
||||
var WIDE_BREAKPOINT = 640
|
||||
|
||||
function sync() {
|
||||
var win = document.getElementById('dify-chatbot-bubble-window')
|
||||
var opened = win && win.style.display !== 'none'
|
||||
var difyBubble = document.getElementById('dify-chatbot-bubble-button')
|
||||
btn.style.display = opened ? 'block' : 'none'
|
||||
closeBtn.style.display = opened ? 'block' : 'none'
|
||||
if (!opened) {
|
||||
cover.style.display = 'none'
|
||||
transitionCover.style.display = 'none'
|
||||
// 窗口关闭后恢复气泡（可拖动）
|
||||
if (difyBubble) difyBubble.style.display = ''
|
||||
return
|
||||
}
|
||||
var rect = win.getBoundingClientRect()
|
||||
var fullscreen = win.classList.contains('dify-chatbot-fullscreen')
|
||||
var inTransition = Date.now() < transitionUntil
|
||||
cover.style.display = 'block'
|
||||
// 窗口打开期间隐藏气泡（气泡可能被拖到任意位置，浮在窗口上很突兀），
|
||||
// 控制按钮统一停靠在窗口顶栏
|
||||
if (difyBubble) difyBubble.style.display = 'none'
|
||||
btn.classList.toggle('is-fullscreen', fullscreen)
|
||||
closeBtn.classList.toggle('is-fullscreen', fullscreen)
|
||||
if (fullscreen) {
|
||||
// 全屏：实色圆钮放左上角，避开右上角版权遮盖区和底部输入区
|
||||
btn.style.top = '12px'
|
||||
btn.style.left = '12px'
|
||||
closeBtn.style.top = '12px'
|
||||
closeBtn.style.left = '60px'
|
||||
} else {
|
||||
// 小窗口：白色幽灵按钮停靠在蓝色顶栏右侧，避开 iframe 内部右上角的重置按钮
|
||||
btn.style.top = rect.top + 12 + 'px'
|
||||
btn.style.left = rect.right - 132 + 'px'
|
||||
closeBtn.style.top = rect.top + 12 + 'px'
|
||||
closeBtn.style.left = rect.right - 92 + 'px'
|
||||
}
|
||||
if (inTransition) {
|
||||
// 过渡期：版权可能出现在顶部或底部，两处都盖住并跟随窗口动画；
|
||||
// 顶部遮盖的配色须与当前状态的 iframe 背景一致
|
||||
cover.style.left = rect.left + 'px'
|
||||
cover.style.top = rect.top + 'px'
|
||||
cover.style.width = rect.width + 'px'
|
||||
cover.style.height = '100px'
|
||||
cover.style.borderRadius = fullscreen ? '0' : '1rem 1rem 0 0'
|
||||
cover.style.background = fullscreen
|
||||
? '#f7f8fc'
|
||||
: 'linear-gradient(to bottom, #1c64f2 0, #1c64f2 56px, #f7f8fc 56px)'
|
||||
transitionCover.style.display = 'block'
|
||||
transitionCover.style.left = rect.left + 'px'
|
||||
transitionCover.style.top = rect.bottom - BRAND_BAR_HEIGHT + 'px'
|
||||
transitionCover.style.bottom = 'auto'
|
||||
transitionCover.style.width = rect.width + 'px'
|
||||
transitionCover.style.height = BRAND_BAR_HEIGHT + 'px'
|
||||
transitionCover.style.background = '#f7f8fc'
|
||||
return
|
||||
}
|
||||
transitionCover.style.display = 'none'
|
||||
if (fullscreen) {
|
||||
// 全屏：版权信息在顶栏右侧，遮到窗口右边缘
|
||||
cover.style.left = rect.right - 390 + 'px'
|
||||
cover.style.top = rect.top + 'px'
|
||||
cover.style.width = '390px'
|
||||
cover.style.height = '56px'
|
||||
cover.style.borderRadius = '0'
|
||||
cover.style.background = '#f7f8fc'
|
||||
} else if (rect.width >= WIDE_BREAKPOINT) {
|
||||
// 宽窗口（浏览器缩放等场景）：版权信息在顶栏右侧
|
||||
cover.style.left = rect.right - 390 + 'px'
|
||||
cover.style.top = rect.top + 'px'
|
||||
cover.style.width = '390px'
|
||||
cover.style.height = '84px'
|
||||
cover.style.borderRadius = '0'
|
||||
cover.style.background = '#f7f8fc'
|
||||
} else {
|
||||
// 窄窗口布局：版权条横贯底部
|
||||
cover.style.left = rect.left + 'px'
|
||||
cover.style.top = rect.bottom - BRAND_BAR_HEIGHT + 'px'
|
||||
cover.style.width = rect.width + 'px'
|
||||
cover.style.height = BRAND_BAR_HEIGHT + 'px'
|
||||
cover.style.borderRadius = '0 0 1rem 1rem'
|
||||
cover.style.background = '#f2f4f7'
|
||||
}
|
||||
}
|
||||
// 监听 iframe 的创建及 display 切换（embed.min.js 通过内联 style 开关窗口），
|
||||
// 再加低频轮询兜底，跟住窗口尺寸过渡动画和视口变化
|
||||
var observer = new MutationObserver(sync)
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
attributes: true,
|
||||
attributeFilter: ['style', 'class']
|
||||
})
|
||||
window.addEventListener('resize', sync)
|
||||
window.addEventListener('keydown', function (event) {
|
||||
if (event.key !== 'Escape') return
|
||||
var win = document.getElementById('dify-chatbot-bubble-window')
|
||||
if (win && win.classList.contains('dify-chatbot-fullscreen')) {
|
||||
win.classList.remove('dify-chatbot-fullscreen')
|
||||
startTransition()
|
||||
}
|
||||
})
|
||||
setInterval(sync, 300)
|
||||
sync()
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Reference in New Issue
Block a user