feat(ai-call):优化对话框拖拽与缩放功能- 增强对话框拖拽逻辑,防止事件冒泡

- 完善对话框缩放功能,动态调整欢迎消息区域高度
- 修正机器人欢迎文本中的错别字
- 调整消息列表区域样式,优化滚动条显示
- 监听对话框可见性变化,确保内容正确渲染
This commit is contained in:
陈昱达
2025-11-04 17:14:38 +08:00
committed by joshen
parent bc15ec9e21
commit 86ec8138dd

View File

@@ -176,6 +176,10 @@ export default {
dialogEl.style.left = (startLeft + deltaX) + 'px'; dialogEl.style.left = (startLeft + deltaX) + 'px';
dialogEl.style.top = (startTop + deltaY) + 'px'; dialogEl.style.top = (startTop + deltaY) + 'px';
}; };
const stopDrag = () => { const stopDrag = () => {
@@ -271,9 +275,11 @@ export default {
break; break;
} }
// 防止拖拽手柄的事件冒泡到标题栏 // 防止拖拽手柄的事件冒泡到标题栏
handle.addEventListener('mousedown', (e) => { handle.addEventListener('mousedown', (e) => {
e.stopPropagation(); e.stopPropagation();
}); });
dialogEl.appendChild(handle); dialogEl.appendChild(handle);
@@ -325,10 +331,10 @@ export default {
const handleMouseMove = (event) => { const handleMouseMove = (event) => {
if (!isResizing) return; if (!isResizing) return;
const deltaX = event.clientX - startX; const deltaX = event.clientX - startX;
const deltaY = event.clientY - startY; const deltaY = event.clientY - startY;
switch (resizeDirection) { switch (resizeDirection) {
case 'right': case 'right':
dialogEl.style.width = Math.max(400, startWidth + deltaX) + 'px'; dialogEl.style.width = Math.max(400, startWidth + deltaX) + 'px';
@@ -377,6 +383,11 @@ export default {
dialogEl.style.left = (startLeft + startWidth - newWidthTL) + 'px'; dialogEl.style.left = (startLeft + startWidth - newWidthTL) + 'px';
break; break;
} }
let doc = document.querySelector('.welcome-message')
let sendBox = document.querySelector('.input-area-wrapper');
// sendBox 的高度
doc.style.height = `calc(${dialogEl.style.height} - ${sendBox.offsetHeight}px - 120px)`;
}; };
const stopResize = () => { const stopResize = () => {
@@ -418,7 +429,7 @@ export default {
{ {
typing:true, typing:true,
isBot: true, // 是否为机器人 isBot: true, // 是否为机器人
text: `<p><b>您好!我是京东方案智能问答助手,随时为您服务。</b></p> text: `<p><b>您好!我是京东方案智能问答助手,随时为您服务。</b></p>
<p>我可以帮您快速查找和解读平台内的各类案例内容。只需输入您想了解的问题或关键词,我会从案例库中精准匹配相关信息,并提供清晰的解答。每条回答都会附上来源链接,方便您随时查阅原始案例全文。</p> <p>我可以帮您快速查找和解读平台内的各类案例内容。只需输入您想了解的问题或关键词,我会从案例库中精准匹配相关信息,并提供清晰的解答。每条回答都会附上来源链接,方便您随时查阅原始案例全文。</p>
<p>我还会根据您的提问,智能推荐相关延伸问题,助您更高效地探索知识、解决问题。</p> <p>我还会根据您的提问,智能推荐相关延伸问题,助您更高效地探索知识、解决问题。</p>
<p>现在,欢迎随时向我提问,开启高效的知识查询体验吧!</p>` <p>现在,欢迎随时向我提问,开启高效的知识查询体验吧!</p>`
@@ -430,7 +441,14 @@ export default {
}, },
watch: { watch: {
dialogVisible(newVal) { dialogVisible(newVal) {
console.log(newVal); if(newVal){
this.$nextTick(() => {
let doc = document.querySelector('.welcome-message')
let sendBox = document.querySelector('.input-area-wrapper');
doc.style.height = `calc(600px - ${sendBox.offsetHeight}px - 120px)`;
});
}
// 移除之前的逻辑,因为现在通过事件机制处理状态恢复 // 移除之前的逻辑,因为现在通过事件机制处理状态恢复
}, },
messageList: { messageList: {
@@ -507,7 +525,7 @@ closeMinimizedWindow() {
this.messageList = [ this.messageList = [
{ {
isBot: true, isBot: true,
text: `<p><b>您好!我是京东方案智能问答助手,随时为您服务。</b></p> text: `<p><b>您好!我是京东方案智能问答助手,随时为您服务。</b></p>
<p>我可以帮您快速查找和解读平台内的各类案例内容。只需输入您想了解的问题或关键词,我会从案例库中精准匹配相关信息,并提供清晰的解答。每条回答都会附上来源链接,方便您随时查阅原始案例全文。</p> <p>我可以帮您快速查找和解读平台内的各类案例内容。只需输入您想了解的问题或关键词,我会从案例库中精准匹配相关信息,并提供清晰的解答。每条回答都会附上来源链接,方便您随时查阅原始案例全文。</p>
<p>我还会根据您的提问,智能推荐相关延伸问题,助您更高效地探索知识、解决问题。</p> <p>我还会根据您的提问,智能推荐相关延伸问题,助您更高效地探索知识、解决问题。</p>
<p>现在,欢迎随时向我提问,开启高效的知识查询体验吧!</p>` <p>现在,欢迎随时向我提问,开启高效的知识查询体验吧!</p>`
@@ -623,7 +641,8 @@ closeMinimizedWindow() {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
margin-bottom: 10px; margin-bottom: 10px;
flex:1; //height: 200px;
//flex:1;
overflow-y: auto; overflow-y: auto;
.avatar { .avatar {