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