hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-08 18:36:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(portal): 调整AI通话弹窗宽度

Browse Source 
- 设置AI通话弹窗默认宽度为800px
- 优化弹窗显示效果和用户体验
This commit is contained in:
陈昱达
2025-11-06 16:29:50 +08:00
parent 13281d8a7d
commit 1812c0901c
1 changed files with 93 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/views/portal/case/AICall.vue
View File

@@ -2,7 +2,8 @@
<div>
<!-- 最大化状态的弹窗 -->
<el-dialog
v-show="dialogVisible && windowState === 'maximized'"
v-show=" windowState === 'maximized'"
v-if="dialogVisible"
:visible="true"
:close-on-click-modal="false"
:show-close="true"
@@ -12,7 +13,6 @@
:append-to-body="true"
:fullscreen="false"
top="10vh"
width="800px"
v-resizeable
v-draggable
>
@@ -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;