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

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

View File

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