mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-11 03:46:44 +08:00
feat(ai-call):优化对话框拖拽与缩放功能- 增强对话框拖拽逻辑,防止事件冒泡
- 完善对话框缩放功能,动态调整欢迎消息区域高度 - 修正机器人欢迎文本中的错别字 - 调整消息列表区域样式,优化滚动条显示 - 监听对话框可见性变化,确保内容正确渲染
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user