hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-11 03:46:44 +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

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

@@ -2,7 +2,8 @@
<div> <div>
<!-- 最大化状态的弹窗 --> <!-- 最大化状态的弹窗 -->
<el-dialog <el-dialog
v-show="dialogVisible && windowState === 'maximized'" v-show=" windowState === 'maximized'"
v-if="dialogVisible"
:visible="true" :visible="true"
:close-on-click-modal="false" :close-on-click-modal="false"
:show-close="true" :show-close="true"
@@ -12,7 +13,6 @@
:append-to-body="true" :append-to-body="true"
:fullscreen="false" :fullscreen="false"
top="10vh" top="10vh"
width="800px"
v-resizeable v-resizeable
v-draggable v-draggable
> >
@@ -135,10 +135,18 @@ export default {
const headerEl = dialogEl.querySelector('.dialog-title'); const headerEl = dialogEl.querySelector('.dialog-title');
if (!headerEl) return; if (!headerEl) return;
// 检查是否有保存的位置状态
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.position = 'fixed';
dialogEl.style.top = '100px'; dialogEl.style.top = '100px';
dialogEl.style.left = (window.innerWidth - dialogEl.offsetWidth) / 2 + 'px'; dialogEl.style.left = (window.innerWidth - dialogEl.offsetWidth) / 2 + 'px';
}
dialogEl.style.margin = '0'; dialogEl.style.margin = '0';
let isDragging = false; let isDragging = false;
@@ -175,15 +183,18 @@ 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 = () => {
isDragging = false; 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('mousemove', handleMouseMove);
document.removeEventListener('mouseup', stopDrag); document.removeEventListener('mouseup', stopDrag);
@@ -202,10 +213,20 @@ export default {
const dialogEl = el.querySelector('.el-dialog'); const dialogEl = el.querySelector('.el-dialog');
if (!dialogEl) return; if (!dialogEl) return;
// 检查是否有保存的尺寸状态
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.position = 'fixed';
dialogEl.style.top = '100px'; dialogEl.style.top = '100px';
dialogEl.style.left = (window.innerWidth - dialogEl.offsetWidth) / 2 + 'px'; dialogEl.style.left = (window.innerWidth - dialogEl.offsetWidth) / 2 + 'px';
}
// 创建拖拽手柄 // 创建拖拽手柄
const createHandle = (direction) => { const createHandle = (direction) => {
@@ -334,65 +355,93 @@ export default {
const deltaX = event.clientX - startX; const deltaX = event.clientX - startX;
const deltaY = event.clientY - startY; const deltaY = event.clientY - startY;
let newWidth, newHeight, newLeft, newTop;
switch (resizeDirection) { switch (resizeDirection) {
case 'right': case 'right':
dialogEl.style.width = Math.max(400, startWidth + deltaX) + 'px'; newWidth = Math.max(400, startWidth + deltaX);
dialogEl.style.width = newWidth + 'px';
break; break;
case 'left': 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.width = newWidth + 'px';
dialogEl.style.left = (startLeft + startWidth - newWidth) + 'px'; dialogEl.style.left = newLeft + 'px';
break; break;
case 'bottom': case 'bottom':
dialogEl.style.height = Math.max(600, startHeight + deltaY) + 'px'; newHeight = Math.max(600, startHeight + deltaY);
dialogEl.style.height = newHeight + 'px';
break; break;
case 'top': case 'top':
// 当窗口高度达到最小值时，不再调整高度和位置 // 当窗口高度达到最小值时，不再调整高度和位置
if (startHeight - deltaY >= 600) { if (startHeight - deltaY >= 600) {
dialogEl.style.height = (startHeight - deltaY) + 'px'; newHeight = startHeight - deltaY;
dialogEl.style.top = (startTop + deltaY) + 'px'; newTop = startTop + deltaY;
dialogEl.style.height = newHeight + 'px';
dialogEl.style.top = newTop + 'px';
} }
break; break;
case 'bottom-right': case 'bottom-right':
dialogEl.style.width = Math.max(400, startWidth + deltaX) + 'px'; newWidth = Math.max(400, startWidth + deltaX);
dialogEl.style.height = Math.max(600, startHeight + deltaY) + 'px'; newHeight = Math.max(600, startHeight + deltaY);
dialogEl.style.width = newWidth + 'px';
dialogEl.style.height = newHeight + 'px';
break; break;
case 'bottom-left': case 'bottom-left':
const newWidthBL = Math.max(400, startWidth - deltaX); newWidth = Math.max(400, startWidth - deltaX);
dialogEl.style.width = newWidthBL + 'px'; newHeight = Math.max(600, startHeight + deltaY);
dialogEl.style.left = (startLeft + startWidth - newWidthBL) + 'px'; newLeft = startLeft + startWidth - newWidth;
dialogEl.style.height = Math.max(600, startHeight + deltaY) + 'px'; dialogEl.style.width = newWidth + 'px';
dialogEl.style.left = newLeft + 'px';
dialogEl.style.height = newHeight + 'px';
break; break;
case 'top-right': case 'top-right':
// 当窗口高度达到最小值时，不再调整高度和位置 // 当窗口高度达到最小值时，不再调整高度和位置
if (startHeight - deltaY >= 600) { if (startHeight - deltaY >= 600) {
dialogEl.style.height = (startHeight - deltaY) + 'px'; newHeight = startHeight - deltaY;
dialogEl.style.top = (startTop + deltaY) + 'px'; 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; break;
case 'top-left': case 'top-left':
// 当窗口高度达到最小值时，不再调整高度和位置 // 当窗口高度达到最小值时，不再调整高度和位置
if (startHeight - deltaY >= 600) { if (startHeight - deltaY >= 600) {
dialogEl.style.height = (startHeight - deltaY) + 'px'; newHeight = startHeight - deltaY;
dialogEl.style.top = (startTop + deltaY) + 'px'; 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; break;
} }
let doc = document.querySelector('.welcome-message') let doc = document.querySelector('.welcome-message')
let sendBox = document.querySelector('.input-area-wrapper'); let sendBox = document.querySelector('.input-area-wrapper');
// sendBox 的高度 // sendBox 的高度
if (doc && sendBox) {
doc.style.height = `calc(${dialogEl.style.height} - ${sendBox.offsetHeight}px - 120px)`; doc.style.height = `calc(${dialogEl.style.height} - ${sendBox.offsetHeight}px - 120px)`;
}
}; };
const stopResize = () => { const stopResize = () => {
isResizing = false; isResizing = false;
resizeDirection = ''; 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('mousemove', handleMouseMove);
document.removeEventListener('mouseup', stopResize); document.removeEventListener('mouseup', stopResize);
@@ -441,11 +490,11 @@ export default {
watch: { watch: {
dialogVisible(newVal) { dialogVisible(newVal) {
if(newVal){ if(newVal){
this.$nextTick(() => { // this.$nextTick(() => {
let doc = document.querySelector('.welcome-message') // let doc = document.querySelector('.welcome-message')
let sendBox = document.querySelector('.input-area-wrapper'); // let sendBox = document.querySelector('.input-area-wrapper');
doc.style.height = `calc(600px - ${sendBox.offsetHeight}px - 120px)`; // doc.style.height = `calc(600px - ${sendBox.offsetHeight}px - 120px)`;
}); // });
} }
// 移除之前的逻辑，因为现在通过事件机制处理状态恢复 // 移除之前的逻辑，因为现在通过事件机制处理状态恢复
@@ -472,6 +521,9 @@ closeMinimizedWindow() {
}, },
onClose() { onClose() {
console.log('关闭弹窗') console.log('关闭弹窗')
// 清除保存的状态
sessionStorage.removeItem('aiCallDialogSize');
sessionStorage.removeItem('aiCallDialogPosition');
this.$emit('close') this.$emit('close')
// 可以在这里执行其他逻辑 // 可以在这里执行其他逻辑
}, },
@@ -640,7 +692,7 @@ closeMinimizedWindow() {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
margin-bottom: 10px; margin-bottom: 10px;
//height: 200px; height: 400px;
//flex:1; //flex:1;
overflow-y: auto; overflow-y: auto;