mirror of
https://github.com/kuaifan/dootask.git
synced 2026-01-22 01:28:12 +00:00
feat(ai-assistant): 添加全屏切换功能
- 添加全屏按钮,支持点击或双击标题栏切换全屏 - 全屏时禁用拖动和调整大小 - 全屏状态下占满视口(保留 12px 边距) - 关闭窗口时自动退出全屏状态
This commit is contained in:
parent
a3caf5ebdf
commit
b7213f8c47
@ -1281,7 +1281,7 @@ export default {
|
||||
.ai-assistant-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: 6px;
|
||||
|
||||
.ai-assistant-header-btn {
|
||||
display: flex;
|
||||
@ -1650,6 +1650,31 @@ export default {
|
||||
cursor: sw-resize;
|
||||
}
|
||||
|
||||
.ai-assistant-fullscreen {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
right: 48px;
|
||||
z-index: 1;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
stroke: #777;
|
||||
transition: stroke 0.2s;
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
svg {
|
||||
stroke: #444;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ai-assistant-close {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
@ -1673,7 +1698,7 @@ export default {
|
||||
}
|
||||
|
||||
.ai-assistant-header {
|
||||
margin: 6px 48px 6px 16px;
|
||||
margin: 6px 82px 6px 16px;
|
||||
|
||||
.ai-assistant-header-title {
|
||||
> span {
|
||||
@ -1780,6 +1805,22 @@ export default {
|
||||
.ai-assistant-input {
|
||||
padding: 4px 12px 12px;
|
||||
}
|
||||
|
||||
// 全屏状态
|
||||
&.is-fullscreen {
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
|
||||
.ai-assistant-drag-handle {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ai-assistant-modal {
|
||||
|
||||
@ -5,23 +5,37 @@
|
||||
v-if="visible"
|
||||
ref="chatWindow"
|
||||
class="ai-assistant-chat"
|
||||
:class="{'is-fullscreen': isFullscreen}"
|
||||
:style="chatStyle">
|
||||
<div class="ai-assistant-fullscreen" @click="toggleFullscreen">
|
||||
<svg v-if="isFullscreen" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="4 10 10 10 10 4"/><polyline points="14 4 14 10 20 10"/>
|
||||
<polyline points="10 20 10 14 4 14"/><polyline points="20 14 14 14 14 20"/>
|
||||
</svg>
|
||||
<svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="5 9 5 5 9 5"/><polyline points="19 9 19 5 15 5"/>
|
||||
<polyline points="5 15 5 19 9 19"/><polyline points="19 15 19 19 15 19"/>
|
||||
</svg>
|
||||
</div>
|
||||
<Icon class="ai-assistant-close" type="ios-close" @click="onClose"/>
|
||||
<div
|
||||
class="ai-assistant-drag-handle"
|
||||
@dblclick="toggleFullscreen"
|
||||
@mousedown.stop.prevent="onDragMouseDown">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
<slot></slot>
|
||||
<!-- 调整大小的控制点 -->
|
||||
<div class="ai-assistant-resize-handle ai-assistant-resize-n" @mousedown.stop.prevent="onResizeMouseDown($event, 'n')"></div>
|
||||
<div class="ai-assistant-resize-handle ai-assistant-resize-s" @mousedown.stop.prevent="onResizeMouseDown($event, 's')"></div>
|
||||
<div class="ai-assistant-resize-handle ai-assistant-resize-e" @mousedown.stop.prevent="onResizeMouseDown($event, 'e')"></div>
|
||||
<div class="ai-assistant-resize-handle ai-assistant-resize-w" @mousedown.stop.prevent="onResizeMouseDown($event, 'w')"></div>
|
||||
<div class="ai-assistant-resize-handle ai-assistant-resize-ne" @mousedown.stop.prevent="onResizeMouseDown($event, 'ne')"></div>
|
||||
<div class="ai-assistant-resize-handle ai-assistant-resize-nw" @mousedown.stop.prevent="onResizeMouseDown($event, 'nw')"></div>
|
||||
<div class="ai-assistant-resize-handle ai-assistant-resize-se" @mousedown.stop.prevent="onResizeMouseDown($event, 'se')"></div>
|
||||
<div class="ai-assistant-resize-handle ai-assistant-resize-sw" @mousedown.stop.prevent="onResizeMouseDown($event, 'sw')"></div>
|
||||
<template v-if="!isFullscreen">
|
||||
<div class="ai-assistant-resize-handle ai-assistant-resize-n" @mousedown.stop.prevent="onResizeMouseDown($event, 'n')"></div>
|
||||
<div class="ai-assistant-resize-handle ai-assistant-resize-s" @mousedown.stop.prevent="onResizeMouseDown($event, 's')"></div>
|
||||
<div class="ai-assistant-resize-handle ai-assistant-resize-e" @mousedown.stop.prevent="onResizeMouseDown($event, 'e')"></div>
|
||||
<div class="ai-assistant-resize-handle ai-assistant-resize-w" @mousedown.stop.prevent="onResizeMouseDown($event, 'w')"></div>
|
||||
<div class="ai-assistant-resize-handle ai-assistant-resize-ne" @mousedown.stop.prevent="onResizeMouseDown($event, 'ne')"></div>
|
||||
<div class="ai-assistant-resize-handle ai-assistant-resize-nw" @mousedown.stop.prevent="onResizeMouseDown($event, 'nw')"></div>
|
||||
<div class="ai-assistant-resize-handle ai-assistant-resize-se" @mousedown.stop.prevent="onResizeMouseDown($event, 'se')"></div>
|
||||
<div class="ai-assistant-resize-handle ai-assistant-resize-sw" @mousedown.stop.prevent="onResizeMouseDown($event, 'sw')"></div>
|
||||
</template>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
@ -98,6 +112,8 @@ export default {
|
||||
resizing: false,
|
||||
resizeDirection: null,
|
||||
resizeRecord: {},
|
||||
// 全屏状态
|
||||
isFullscreen: false,
|
||||
};
|
||||
},
|
||||
|
||||
@ -141,6 +157,10 @@ export default {
|
||||
opacity: 0,
|
||||
};
|
||||
}
|
||||
// 全屏时不应用自定义尺寸和位置
|
||||
if (this.isFullscreen) {
|
||||
return {};
|
||||
}
|
||||
const style = {
|
||||
left: `${this.left}px`,
|
||||
top: `${this.top}px`,
|
||||
@ -162,6 +182,9 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
this.updateWindowSize();
|
||||
});
|
||||
} else if (!val) {
|
||||
// 关闭时重置全屏状态
|
||||
this.isFullscreen = false;
|
||||
}
|
||||
},
|
||||
windowWidth() {
|
||||
@ -252,8 +275,8 @@ export default {
|
||||
* 拖动:鼠标按下
|
||||
*/
|
||||
onDragMouseDown(e) {
|
||||
// 只响应鼠标左键
|
||||
if (e.button !== 0) return;
|
||||
// 只响应鼠标左键,全屏时禁用拖动
|
||||
if (e.button !== 0 || this.isFullscreen) return;
|
||||
|
||||
this.updateWindowSize();
|
||||
this.record = {
|
||||
@ -267,6 +290,13 @@ export default {
|
||||
document.addEventListener('contextmenu', this.onContextMenu);
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换全屏
|
||||
*/
|
||||
toggleFullscreen() {
|
||||
this.isFullscreen = !this.isFullscreen;
|
||||
},
|
||||
|
||||
/**
|
||||
* 右键菜单弹出时取消拖动/调整大小
|
||||
*/
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user