From 1812c0901c8e606596e808561acf17d89f4e318b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= Date: Thu, 6 Nov 2025 16:29:50 +0800 Subject: [PATCH] =?UTF-8?q?feat(portal):=20=E8=B0=83=E6=95=B4AI=E9=80=9A?= =?UTF-8?q?=E8=AF=9D=E5=BC=B9=E7=AA=97=E5=AE=BD=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 设置AI通话弹窗默认宽度为800px - 优化弹窗显示效果和用户体验 --- src/views/portal/case/AICall.vue | 134 +++++++++++++++++++++---------- 1 file changed, 93 insertions(+), 41 deletions(-) diff --git a/src/views/portal/case/AICall.vue b/src/views/portal/case/AICall.vue index b2c9ce7b..5a6dfcb3 100644 --- a/src/views/portal/case/AICall.vue +++ b/src/views/portal/case/AICall.vue @@ -2,7 +2,8 @@
@@ -135,10 +135,18 @@ export default { const headerEl = dialogEl.querySelector('.dialog-title'); if (!headerEl) return; - // 设置初始样式 - dialogEl.style.position = 'fixed'; - dialogEl.style.top = '100px'; - dialogEl.style.left = (window.innerWidth - dialogEl.offsetWidth) / 2 + 'px'; + // 检查是否有保存的位置状态 + const savedPosition = sessionStorage.getItem('aiCallDialogPosition'); + if (savedPosition) { + const { left, top } = JSON.parse(savedPosition); + dialogEl.style.left = left + 'px'; + dialogEl.style.top = top + 'px'; + } else { + // 设置初始样式 + dialogEl.style.position = 'fixed'; + dialogEl.style.top = '100px'; + dialogEl.style.left = (window.innerWidth - dialogEl.offsetWidth) / 2 + 'px'; + } dialogEl.style.margin = '0'; let isDragging = false; @@ -175,15 +183,18 @@ export default { dialogEl.style.left = (startLeft + deltaX) + 'px'; dialogEl.style.top = (startTop + deltaY) + 'px'; - - - - }; const stopDrag = () => { isDragging = false; + // 保存当前位置到 sessionStorage + const currentPosition = { + left: parseInt(dialogEl.style.left), + top: parseInt(dialogEl.style.top) + }; + sessionStorage.setItem('aiCallDialogPosition', JSON.stringify(currentPosition)); + // 移除全局事件监听 document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', stopDrag); @@ -202,10 +213,20 @@ export default { const dialogEl = el.querySelector('.el-dialog'); if (!dialogEl) return; - // 设置初始样式 - dialogEl.style.position = 'fixed'; - dialogEl.style.top = '100px'; - dialogEl.style.left = (window.innerWidth - dialogEl.offsetWidth) / 2 + 'px'; + // 检查是否有保存的尺寸状态 + const savedSize = sessionStorage.getItem('aiCallDialogSize'); + if (savedSize) { + const { width, height, left, top } = JSON.parse(savedSize); + dialogEl.style.width = width + 'px'; + dialogEl.style.height = height + 'px'; + dialogEl.style.left = left + 'px'; + dialogEl.style.top = top + 'px'; + } else { + // 设置初始样式 + dialogEl.style.position = 'fixed'; + dialogEl.style.top = '100px'; + dialogEl.style.left = (window.innerWidth - dialogEl.offsetWidth) / 2 + 'px'; + } // 创建拖拽手柄 const createHandle = (direction) => { @@ -334,65 +355,93 @@ export default { const deltaX = event.clientX - startX; const deltaY = event.clientY - startY; + let newWidth, newHeight, newLeft, newTop; + switch (resizeDirection) { case 'right': - dialogEl.style.width = Math.max(400, startWidth + deltaX) + 'px'; + newWidth = Math.max(400, startWidth + deltaX); + dialogEl.style.width = newWidth + 'px'; break; case 'left': - const newWidth = Math.max(400, startWidth - deltaX); + newWidth = Math.max(400, startWidth - deltaX); + newLeft = startLeft + startWidth - newWidth; dialogEl.style.width = newWidth + 'px'; - dialogEl.style.left = (startLeft + startWidth - newWidth) + 'px'; + dialogEl.style.left = newLeft + 'px'; break; case 'bottom': - dialogEl.style.height = Math.max(600, startHeight + deltaY) + 'px'; + newHeight = Math.max(600, startHeight + deltaY); + dialogEl.style.height = newHeight + 'px'; break; case 'top': // 当窗口高度达到最小值时，不再调整高度和位置 if (startHeight - deltaY >= 600) { - dialogEl.style.height = (startHeight - deltaY) + 'px'; - dialogEl.style.top = (startTop + deltaY) + 'px'; + newHeight = startHeight - deltaY; + newTop = startTop + deltaY; + dialogEl.style.height = newHeight + 'px'; + dialogEl.style.top = newTop + 'px'; } break; case 'bottom-right': - dialogEl.style.width = Math.max(400, startWidth + deltaX) + 'px'; - dialogEl.style.height = Math.max(600, startHeight + deltaY) + 'px'; + newWidth = Math.max(400, startWidth + deltaX); + newHeight = Math.max(600, startHeight + deltaY); + dialogEl.style.width = newWidth + 'px'; + dialogEl.style.height = newHeight + 'px'; break; case 'bottom-left': - const newWidthBL = Math.max(400, startWidth - deltaX); - dialogEl.style.width = newWidthBL + 'px'; - dialogEl.style.left = (startLeft + startWidth - newWidthBL) + 'px'; - dialogEl.style.height = Math.max(600, startHeight + deltaY) + 'px'; + newWidth = Math.max(400, startWidth - deltaX); + newHeight = Math.max(600, startHeight + deltaY); + newLeft = startLeft + startWidth - newWidth; + dialogEl.style.width = newWidth + 'px'; + dialogEl.style.left = newLeft + 'px'; + dialogEl.style.height = newHeight + 'px'; break; case 'top-right': // 当窗口高度达到最小值时，不再调整高度和位置 if (startHeight - deltaY >= 600) { - dialogEl.style.height = (startHeight - deltaY) + 'px'; - dialogEl.style.top = (startTop + deltaY) + 'px'; + newHeight = startHeight - deltaY; + newTop = startTop + deltaY; + newWidth = Math.max(400, startWidth + deltaX); + dialogEl.style.height = newHeight + 'px'; + dialogEl.style.top = newTop + 'px'; + dialogEl.style.width = newWidth + 'px'; } - dialogEl.style.width = Math.max(400, startWidth + deltaX) + 'px'; break; case 'top-left': // 当窗口高度达到最小值时，不再调整高度和位置 if (startHeight - deltaY >= 600) { - dialogEl.style.height = (startHeight - deltaY) + 'px'; - dialogEl.style.top = (startTop + deltaY) + 'px'; + newHeight = startHeight - deltaY; + newTop = startTop + deltaY; + newWidth = Math.max(400, startWidth - deltaX); + newLeft = startLeft + startWidth - newWidth; + dialogEl.style.height = newHeight + 'px'; + dialogEl.style.top = newTop + 'px'; + dialogEl.style.width = newWidth + 'px'; + dialogEl.style.left = newLeft + 'px'; } - const newWidthTL = Math.max(400, startWidth - deltaX); - dialogEl.style.width = newWidthTL + 'px'; - 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)`; + if (doc && sendBox) { + doc.style.height = `calc(${dialogEl.style.height} - ${sendBox.offsetHeight}px - 120px)`; + } }; const stopResize = () => { isResizing = false; resizeDirection = ''; + // 保存当前尺寸和位置到 sessionStorage + const currentSize = { + width: parseInt(dialogEl.style.width), + height: parseInt(dialogEl.style.height), + left: parseInt(dialogEl.style.left), + top: parseInt(dialogEl.style.top) + }; + sessionStorage.setItem('aiCallDialogSize', JSON.stringify(currentSize)); + // 移除全局事件监听 document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', stopResize); @@ -441,11 +490,11 @@ export default { watch: { dialogVisible(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)`; - }); + // this.$nextTick(() => { + // let doc = document.querySelector('.welcome-message') + // let sendBox = document.querySelector('.input-area-wrapper'); + // doc.style.height = `calc(600px - ${sendBox.offsetHeight}px - 120px)`; + // }); } // 移除之前的逻辑，因为现在通过事件机制处理状态恢复 @@ -472,6 +521,9 @@ closeMinimizedWindow() { }, onClose() { console.log('关闭弹窗') + // 清除保存的状态 + sessionStorage.removeItem('aiCallDialogSize'); + sessionStorage.removeItem('aiCallDialogPosition'); this.$emit('close') // 可以在这里执行其他逻辑 }, @@ -640,7 +692,7 @@ closeMinimizedWindow() { flex-direction: column; align-items: flex-start; margin-bottom: 10px; - //height: 200px; + height: 400px; //flex:1; overflow-y: auto;