generated from root/feiqiu-ETL
120 lines
4.1 KiB
JavaScript
120 lines
4.1 KiB
JavaScript
/**
|
|
* AI 浮动对话按钮组件
|
|
* 统一在所有需要的页面使用
|
|
*/
|
|
(function() {
|
|
// 创建样式
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
.ai-float-btn-container {
|
|
position: fixed;
|
|
right: 16px;
|
|
bottom: 96px;
|
|
z-index: 999;
|
|
}
|
|
|
|
.ai-float-btn {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
/* 渐变动画背景 */
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #667eea 100%);
|
|
background-size: 400% 400%;
|
|
animation: gradientShift 8s ease infinite;
|
|
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
|
|
}
|
|
|
|
.ai-float-btn:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.ai-float-btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(145deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(0,0,0,0.1) 100%);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 背景渐变动画 */
|
|
@keyframes gradientShift {
|
|
0% { background-position: 0% 50%; }
|
|
25% { background-position: 50% 100%; }
|
|
50% { background-position: 100% 50%; }
|
|
75% { background-position: 50% 0%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
.ai-float-btn svg {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
// 创建按钮DOM
|
|
function createAIFloatBtn() {
|
|
const container = document.createElement('div');
|
|
container.className = 'ai-float-btn-container';
|
|
|
|
const btn = document.createElement('div');
|
|
btn.className = 'ai-float-btn';
|
|
|
|
// 可爱风格的AI图标 - 小机器人助手
|
|
btn.innerHTML = `
|
|
<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- 机器人头部 -->
|
|
<rect x="5" y="7" width="14" height="12" rx="4" fill="white"/>
|
|
|
|
<!-- 天线 -->
|
|
<path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
|
<circle cx="12" cy="3" r="1.5" fill="white"/>
|
|
|
|
<!-- 眼睛 - 可爱的大眼睛 -->
|
|
<circle cx="9" cy="11.5" r="2" fill="#667eea"/>
|
|
<circle cx="15" cy="11.5" r="2" fill="#667eea"/>
|
|
|
|
<!-- 眼睛高光 -->
|
|
<circle cx="9.5" cy="11" r="0.7" fill="white"/>
|
|
<circle cx="15.5" cy="11" r="0.7" fill="white"/>
|
|
|
|
<!-- 微笑嘴巴 -->
|
|
<path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/>
|
|
|
|
<!-- 腮红 -->
|
|
<circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/>
|
|
<circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/>
|
|
|
|
<!-- 耳朵/装饰 -->
|
|
<rect x="3" y="10" width="2" height="4" rx="1" fill="white"/>
|
|
<rect x="19" y="10" width="2" height="4" rx="1" fill="white"/>
|
|
</svg>
|
|
`;
|
|
|
|
// 点击跳转到聊天页面
|
|
btn.addEventListener('click', () => {
|
|
// 可以根据需要修改跳转逻辑
|
|
window.location.href = 'chat.html';
|
|
});
|
|
|
|
container.appendChild(btn);
|
|
document.body.appendChild(container);
|
|
}
|
|
|
|
// 页面加载完成后创建按钮
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', createAIFloatBtn);
|
|
} else {
|
|
createAIFloatBtn();
|
|
}
|
|
})();
|
|
|