535 lines
14 KiB
Vue
535 lines
14 KiB
Vue
|
<template>
|
|||
|
|
<div class="ai-float-wrapper">
|
|||
|
|
<div class="ai-float-container" ref="containerRef">
|
|||
|
|
<!-- 悬浮按钮 -->
|
|||
|
|
<button ref="buttonRef" @click.stop="toggleChat" @mousedown="startDrag" class="ai-float-button"
|
|||
|
|
:class="{ 'pulse-animation': isNewMessage, 'active': showChat }" :style="buttonStyle">
|
|||
|
|
<span v-if="isNewMessage" class="notification-dot"></span>
|
|||
|
|
<div class="button-content">
|
|||
|
|
<slot name="button-icon" :isChatOpen="showChat">
|
|||
|
|
<svg v-if="!showChat" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
|
|||
|
|
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|||
|
|
stroke-linecap="round" stroke-linejoin="round">
|
|||
|
|
<path d="m12 8-9.04 9.06a2.82 2.82 0 1 0 3.98 3.98L16 12" />
|
|||
|
|
<circle cx="17" cy="7" r="5" />
|
|||
|
|
</svg>
|
|||
|
|
<svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
|
|||
|
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|||
|
|
stroke-linejoin="round">
|
|||
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|||
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|||
|
|
</svg>
|
|||
|
|
</slot>
|
|||
|
|
<span class="button-text">{{ showChat ? closeText : openText }}</span>
|
|||
|
|
</div>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 聊天面板 -->
|
|||
|
|
<div v-if="showChat" class="chat-panel">
|
|||
|
|
<div class="chat-panel-content">
|
|||
|
|
<div class="chat-panel-header">
|
|||
|
|
<div class="header-title">
|
|||
|
|
<slot name="header-icon">
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
|
|||
|
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|||
|
|
stroke-linejoin="round">
|
|||
|
|
<path d="m12 8-9.04 9.06a2.82 2.82 0 1 0 3.98 3.98L16 12" />
|
|||
|
|
<circle cx="17" cy="7" r="5" />
|
|||
|
|
</svg>
|
|||
|
|
</slot>
|
|||
|
|
<h3>{{ headerTitle }}</h3>
|
|||
|
|
</div>
|
|||
|
|
<button @click="closeChat" class="close-button">×</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="chat-panel-body">
|
|||
|
|
<slot :closeChat="closeChat">
|
|||
|
|
<!-- 默认插槽内容，如果未提供则使用AIChat组件 -->
|
|||
|
|
<AIChat v-if="useDefaultAIChat" v-bind="aiChatProps" @new-message="handleNewMessage" />
|
|||
|
|
</slot>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import AIChat from './AIChat.vue';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'AIFloatButton',
|
|||
|
|
components: {
|
|||
|
|
AIChat
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
// AIChat 组件相关属性
|
|||
|
|
baseUrl: {
|
|||
|
|
type: String,
|
|||
|
|
default: null
|
|||
|
|
},
|
|||
|
|
modelAuthKey: {
|
|||
|
|
type: String,
|
|||
|
|
default: null
|
|||
|
|
},
|
|||
|
|
knowledgeBaseId: {
|
|||
|
|
type: String,
|
|||
|
|
default: null
|
|||
|
|
},
|
|||
|
|
knowledgeBaseUrl: {
|
|||
|
|
type: String,
|
|||
|
|
default: '/api/knowledgebases/query'
|
|||
|
|
},
|
|||
|
|
knowledgeBaseAuthKey: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// UI 相关属性
|
|||
|
|
openText: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'AI助手'
|
|||
|
|
},
|
|||
|
|
closeText: {
|
|||
|
|
type: String,
|
|||
|
|
default: '关闭'
|
|||
|
|
},
|
|||
|
|
headerTitle: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'AI 助手'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 行为相关属性
|
|||
|
|
useDefaultAIChat: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 位置相关属性
|
|||
|
|
initialPosition: {
|
|||
|
|
type: Object,
|
|||
|
|
default: function () { return { x: null, y: null }; } // 如果为null，则使用默认位置
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
showChat: false,
|
|||
|
|
isNewMessage: false,
|
|||
|
|
notificationTimeout: null,
|
|||
|
|
isDragging: false,
|
|||
|
|
dragState: {
|
|||
|
|
startX: 0,
|
|||
|
|
startY: 0,
|
|||
|
|
startLeft: 0,
|
|||
|
|
startTop: 0
|
|||
|
|
},
|
|||
|
|
buttonPosition: {
|
|||
|
|
x: this.initialPosition.x,
|
|||
|
|
y: this.initialPosition.y
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// 计算传递给AIChat组件的属性
|
|||
|
|
aiChatProps() {
|
|||
|
|
return {
|
|||
|
|
baseUrl: this.baseUrl,
|
|||
|
|
modelAuthKey: this.modelAuthKey,
|
|||
|
|
knowledgeBaseId: this.knowledgeBaseId,
|
|||
|
|
knowledgeBaseUrl: this.knowledgeBaseUrl,
|
|||
|
|
knowledgeBaseAuthKey: this.knowledgeBaseAuthKey
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 计算按钮样式
|
|||
|
|
buttonStyle() {
|
|||
|
|
// 如果有自定义位置，则使用自定义位置
|
|||
|
|
if (this.buttonPosition.x !== null && this.buttonPosition.y !== null) {
|
|||
|
|
return {
|
|||
|
|
left: `${this.buttonPosition.x}px`,
|
|||
|
|
top: `${this.buttonPosition.y}px`,
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 否则使用默认的右下角位置
|
|||
|
|
return {
|
|||
|
|
bottom: '20px',
|
|||
|
|
right: '20px',
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
document.addEventListener('keydown', this.handleEscapeKey);
|
|||
|
|
window.addEventListener('resize', this.handleWindowResize);
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
document.removeEventListener('keydown', this.handleEscapeKey);
|
|||
|
|
document.removeEventListener('mousemove', this.onDrag);
|
|||
|
|
document.removeEventListener('mouseup', this.stopDrag);
|
|||
|
|
window.removeEventListener('resize', this.handleWindowResize);
|
|||
|
|
if (this.notificationTimeout) {
|
|||
|
|
clearTimeout(this.notificationTimeout);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 开始拖动
|
|||
|
|
startDrag(event) {
|
|||
|
|
// 如果点击的是按钮内容（图标或文本），则不触发拖动
|
|||
|
|
if (event.target.closest('.button-content')) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
event.preventDefault();
|
|||
|
|
this.isDragging = true;
|
|||
|
|
|
|||
|
|
// 获取按钮当前位置
|
|||
|
|
const buttonRect = this.$refs.buttonRef.getBoundingClientRect();
|
|||
|
|
|
|||
|
|
this.dragState = {
|
|||
|
|
startX: event.clientX,
|
|||
|
|
startY: event.clientY,
|
|||
|
|
startLeft: buttonRect.left,
|
|||
|
|
startTop: buttonRect.top
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 如果聊天面板打开，在拖动开始时立即更新其位置
|
|||
|
|
if (this.showChat) {
|
|||
|
|
// 强制重新计算buttonStyle
|
|||
|
|
this.$forceUpdate();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加全局事件监听器
|
|||
|
|
document.addEventListener('mousemove', this.onDrag);
|
|||
|
|
document.addEventListener('mouseup', this.stopDrag);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 拖动中
|
|||
|
|
onDrag(event) {
|
|||
|
|
if (!this.isDragging) return;
|
|||
|
|
|
|||
|
|
event.preventDefault();
|
|||
|
|
|
|||
|
|
// 计算新位置
|
|||
|
|
const deltaX = event.clientX - this.dragState.startX;
|
|||
|
|
const deltaY = event.clientY - this.dragState.startY;
|
|||
|
|
|
|||
|
|
const newLeft = this.dragState.startLeft + deltaX;
|
|||
|
|
const newTop = this.dragState.startTop + deltaY;
|
|||
|
|
|
|||
|
|
// 确保按钮不会被拖出屏幕边界
|
|||
|
|
const boundedLeft = Math.max(0, Math.min(newLeft, window.innerWidth - 64));
|
|||
|
|
const boundedTop = Math.max(0, Math.min(newTop, window.innerHeight - 64));
|
|||
|
|
|
|||
|
|
// 更新按钮位置状态
|
|||
|
|
this.buttonPosition = {
|
|||
|
|
x: boundedLeft,
|
|||
|
|
y: boundedTop
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 如果聊天面板打开，在拖动过程中更新其位置
|
|||
|
|
if (this.showChat) {
|
|||
|
|
// 强制触发buttonStyle重新计算
|
|||
|
|
this.$forceUpdate();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 停止拖动
|
|||
|
|
stopDrag() {
|
|||
|
|
this.isDragging = false;
|
|||
|
|
|
|||
|
|
// 移除全局事件监听器
|
|||
|
|
document.removeEventListener('mousemove', this.onDrag);
|
|||
|
|
document.removeEventListener('mouseup', this.stopDrag);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 切换聊天面板显示状态
|
|||
|
|
toggleChat(event) {
|
|||
|
|
// 如果正在拖动，则不打开聊天面板
|
|||
|
|
if (this.isDragging) {
|
|||
|
|
this.isDragging = false;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
event.stopPropagation();
|
|||
|
|
this.showChat = !this.showChat;
|
|||
|
|
this.isNewMessage = false;
|
|||
|
|
|
|||
|
|
// 清除可能存在的定时器
|
|||
|
|
if (this.notificationTimeout) {
|
|||
|
|
clearTimeout(this.notificationTimeout);
|
|||
|
|
this.notificationTimeout = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.$emit('toggle', this.showChat);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 关闭聊天面板
|
|||
|
|
closeChat() {
|
|||
|
|
this.showChat = false;
|
|||
|
|
this.$emit('close');
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 处理新消息提醒
|
|||
|
|
handleNewMessage() {
|
|||
|
|
// 如果聊天窗口未打开，则显示新消息提醒
|
|||
|
|
if (!this.showChat) {
|
|||
|
|
this.isNewMessage = true;
|
|||
|
|
// 3秒后自动清除提醒
|
|||
|
|
if (this.notificationTimeout) {
|
|||
|
|
clearTimeout(this.notificationTimeout);
|
|||
|
|
}
|
|||
|
|
this.notificationTimeout = setTimeout(() => {
|
|||
|
|
this.isNewMessage = false;
|
|||
|
|
}, 3000);
|
|||
|
|
}
|
|||
|
|
this.$emit('new-message');
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 点击 Escape 键关闭聊天面板
|
|||
|
|
handleEscapeKey(event) {
|
|||
|
|
if (this.showChat && event.key === 'Escape') {
|
|||
|
|
this.closeChat();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 处理窗口大小变化
|
|||
|
|
handleWindowResize() {
|
|||
|
|
// 窗口大小变化时，强制重新计算面板位置
|
|||
|
|
if (this.showChat) {
|
|||
|
|
// 触发响应式更新
|
|||
|
|
this.$forceUpdate();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.ai-float-wrapper {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ai-float-container {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 20px;
|
|||
|
|
right: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ai-float-button {
|
|||
|
|
position: fixed;
|
|||
|
|
background: linear-gradient(135deg, #4a6cf7 0%, #6a11cb 100%);
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 50px;
|
|||
|
|
width: 64px;
|
|||
|
|
height: 64px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
cursor: move;
|
|||
|
|
/* 显示拖动光标 */
|
|||
|
|
box-shadow: 0 6px 20px rgba(74, 108, 247, 0.4);
|
|||
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
z-index: 1000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ai-float-button:hover:not(:active) {
|
|||
|
|
transform: translateY(-3px) scale(1.05);
|
|||
|
|
box-shadow: 0 10px 25px rgba(74, 108, 247, 0.5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ai-float-button:active {
|
|||
|
|
transform: translateY(0) scale(1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ai-float-button.active {
|
|||
|
|
display: none;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button-content {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 2px;
|
|||
|
|
pointer-events: none;
|
|||
|
|
/* 防止内容区域影响拖动 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button-text {
|
|||
|
|
font-size: 10px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.notification-dot {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -2px;
|
|||
|
|
right: -2px;
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
background: #ff4757;
|
|||
|
|
border: 2px solid white;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
animation: pulse 1.5s infinite;
|
|||
|
|
z-index: 1;
|
|||
|
|
pointer-events: none;
|
|||
|
|
/* 防止通知点影响拖动 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pulse-animation {
|
|||
|
|
animation: pulse-button 2s infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes pulse {
|
|||
|
|
0% {
|
|||
|
|
transform: scale(0.9);
|
|||
|
|
box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
70% {
|
|||
|
|
transform: scale(1);
|
|||
|
|
box-shadow: 0 0 0 8px rgba(255, 71, 87, 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
100% {
|
|||
|
|
transform: scale(0.9);
|
|||
|
|
box-shadow: 0 0 0 0 rgba(255, 71, 87, 0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes pulse-button {
|
|||
|
|
0% {
|
|||
|
|
transform: scale(1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
50% {
|
|||
|
|
transform: scale(1.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
100% {
|
|||
|
|
transform: scale(1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-panel {
|
|||
|
|
width: 450px;
|
|||
|
|
min-height: 400px;
|
|||
|
|
max-height: 80vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
|||
|
|
border-radius: 16px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
background: white;
|
|||
|
|
z-index: 1001;
|
|||
|
|
animation: slideIn 0.3s ease-out;
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 20px;
|
|||
|
|
right: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes slideIn {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateY(-5%) scale(0.95);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translateY(0) scale(1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-panel-content {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
height: 100%;
|
|||
|
|
max-height: 80vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-panel-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 14px 16px;
|
|||
|
|
background: linear-gradient(120deg, #4a6cf7 0%, #6a11cb 100%);
|
|||
|
|
color: white;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-title {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-title h3 {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close-button {
|
|||
|
|
background: rgba(255, 255, 255, 0.2);
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
font-size: 20px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
color: white;
|
|||
|
|
width: 30px;
|
|||
|
|
height: 30px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close-button:hover {
|
|||
|
|
background: rgba(255, 255, 255, 0.3);
|
|||
|
|
transform: rotate(90deg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-panel-body {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 100%;
|
|||
|
|
overflow: auto;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 600px) {
|
|||
|
|
.chat-panel {
|
|||
|
|
width: calc(100vw - 20px);
|
|||
|
|
max-height: 80vh;
|
|||
|
|
max-width: 350px;
|
|||
|
|
bottom: 10px;
|
|||
|
|
right: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-panel-content {
|
|||
|
|
max-height: 80vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-panel-body {
|
|||
|
|
min-height: 300px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ai-float-button {
|
|||
|
|
width: 56px;
|
|||
|
|
height: 56px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ai-float-button.active {
|
|||
|
|
border-radius: 20px 20px 6px 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button-text {
|
|||
|
|
font-size: 9px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|