mirror of
https://github.com/kuaifan/dootask.git
synced 2026-01-22 09:48:11 +00:00
fix(ai-assistant): 修复弹窗和下拉菜单被其他弹窗遮挡的问题
- 使用 window.modalTransferIndex + 1000 作为动态 z-index - 添加定时刷新机制:弹窗可见时 5 秒刷新,不可见时 20 秒刷新 - modal.vue 通过 zIndex prop 接收并应用 z-index - float-button.vue 通过 $parent.topZIndex 获取 z-index - Dropdown 和 Select 使用 ViewUI 新增的 z-index prop
This commit is contained in:
parent
2cb67fafe7
commit
cb6c50b071
@ -127,6 +127,7 @@ export default {
|
|||||||
top: `${this.wrapperTop}px`,
|
top: `${this.wrapperTop}px`,
|
||||||
width: `${this.wrapperWidth}px`,
|
width: `${this.wrapperWidth}px`,
|
||||||
height: `${this.wrapperHeight}px`,
|
height: `${this.wrapperHeight}px`,
|
||||||
|
zIndex: this.$parent?.topZIndex || 2000,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -478,7 +479,6 @@ $collapsed-height: 48px;
|
|||||||
|
|
||||||
.ai-float-button-wrapper {
|
.ai-float-button-wrapper {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 1000;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
|||||||
@ -2,7 +2,8 @@
|
|||||||
<AssistantModal
|
<AssistantModal
|
||||||
v-model="showModal"
|
v-model="showModal"
|
||||||
:displayMode="displayMode"
|
:displayMode="displayMode"
|
||||||
:shouldCreateNewSession="shouldCreateNewSession">
|
:shouldCreateNewSession="shouldCreateNewSession"
|
||||||
|
:zIndex="topZIndex">
|
||||||
<div slot="header" class="ai-assistant-header">
|
<div slot="header" class="ai-assistant-header">
|
||||||
<div class="ai-assistant-header-title">
|
<div class="ai-assistant-header-title">
|
||||||
<i class="taskfont"></i>
|
<i class="taskfont"></i>
|
||||||
@ -16,7 +17,8 @@
|
|||||||
v-if="sessionEnabled && hasSessionHistory"
|
v-if="sessionEnabled && hasSessionHistory"
|
||||||
trigger="click"
|
trigger="click"
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
:transfer="true">
|
:transfer="true"
|
||||||
|
:z-index="topZIndex + 1">
|
||||||
<div class="ai-assistant-header-btn" :title="$L('历史会话')">
|
<div class="ai-assistant-header-btn" :title="$L('历史会话')">
|
||||||
<i class="taskfont"></i>
|
<i class="taskfont"></i>
|
||||||
</div>
|
</div>
|
||||||
@ -28,12 +30,12 @@
|
|||||||
@click.native="loadSession(session.id)">
|
@click.native="loadSession(session.id)">
|
||||||
<div class="history-item">
|
<div class="history-item">
|
||||||
<div class="history-item-content">
|
<div class="history-item-content">
|
||||||
<span class="history-item-title">{{ session.title }}</span>
|
<div class="history-item-title">{{ session.title }}</div>
|
||||||
<span class="history-item-time">{{ formatSessionTime(session.updatedAt) }}</span>
|
<div class="history-item-delete" @click.stop="deleteSession(session.id)">
|
||||||
</div>
|
<i class="taskfont"></i>
|
||||||
<div class="history-item-delete" @click.stop="deleteSession(session.id)">
|
</div>
|
||||||
<i class="taskfont"></i>
|
|
||||||
</div>
|
</div>
|
||||||
|
<span class="history-item-time">{{ formatSessionTime(session.updatedAt) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</DropdownItem>
|
</DropdownItem>
|
||||||
<DropdownItem divided @click.native="clearSessionHistory">
|
<DropdownItem divided @click.native="clearSessionHistory">
|
||||||
@ -153,7 +155,8 @@
|
|||||||
:loading="modelsLoading"
|
:loading="modelsLoading"
|
||||||
:disabled="modelsLoading || modelGroups.length === 0"
|
:disabled="modelsLoading || modelGroups.length === 0"
|
||||||
:not-found-text="$L('暂无可用模型')"
|
:not-found-text="$L('暂无可用模型')"
|
||||||
transfer>
|
transfer
|
||||||
|
:z-index="topZIndex + 1">
|
||||||
<OptionGroup
|
<OptionGroup
|
||||||
v-for="group in modelGroups"
|
v-for="group in modelGroups"
|
||||||
:key="group.type"
|
:key="group.type"
|
||||||
@ -261,6 +264,10 @@ export default {
|
|||||||
inputHistoryCurrent: '', // 切换前的当前输入
|
inputHistoryCurrent: '', // 切换前的当前输入
|
||||||
inputHistoryCacheKey: 'aiAssistant.inputHistory',
|
inputHistoryCacheKey: 'aiAssistant.inputHistory',
|
||||||
inputHistoryLimit: 50,
|
inputHistoryLimit: 50,
|
||||||
|
|
||||||
|
// 动态 z-index(确保始终在最顶层)
|
||||||
|
topZIndex: (window.modalTransferIndex || 1000) + 1000,
|
||||||
|
zIndexTimer: null,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
@ -274,6 +281,7 @@ export default {
|
|||||||
this.loadCachedModel();
|
this.loadCachedModel();
|
||||||
this.loadInputHistory();
|
this.loadInputHistory();
|
||||||
this.mountFloatButton();
|
this.mountFloatButton();
|
||||||
|
this.startZIndexTimer(20000);
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
emitter.off('openAIAssistant', this.onOpenAIAssistant);
|
emitter.off('openAIAssistant', this.onOpenAIAssistant);
|
||||||
@ -281,6 +289,7 @@ export default {
|
|||||||
this.clearAutoSubmitTimer();
|
this.clearAutoSubmitTimer();
|
||||||
this.unmountFloatButton();
|
this.unmountFloatButton();
|
||||||
this.refreshWelcomePromptsDebounced?.cancel();
|
this.refreshWelcomePromptsDebounced?.cancel();
|
||||||
|
this.stopZIndexTimer();
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
selectedModelOption({modelMap, inputModel}) {
|
selectedModelOption({modelMap, inputModel}) {
|
||||||
@ -317,8 +326,12 @@ export default {
|
|||||||
immediate: true,
|
immediate: true,
|
||||||
},
|
},
|
||||||
showModal(value) {
|
showModal(value) {
|
||||||
if (!value) {
|
if (value) {
|
||||||
// 弹窗关闭时通知操作模块
|
// 弹窗打开时:5 秒刷新 z-index
|
||||||
|
this.startZIndexTimer(5000);
|
||||||
|
} else {
|
||||||
|
// 弹窗关闭时:20 秒刷新 z-index,并通知操作模块
|
||||||
|
this.startZIndexTimer(20000);
|
||||||
emitter.emit('aiAssistantClosed');
|
emitter.emit('aiAssistantClosed');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -1567,6 +1580,37 @@ export default {
|
|||||||
// 发送新问题
|
// 发送新问题
|
||||||
await this._doSendQuestion(newPrompt);
|
await this._doSendQuestion(newPrompt);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// ==================== z-index 管理 ====================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新 z-index 确保在最顶层
|
||||||
|
*/
|
||||||
|
updateTopZIndex() {
|
||||||
|
this.topZIndex = (window.modalTransferIndex || 1000) + 1000;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 启动 z-index 刷新定时器
|
||||||
|
* @param {number} interval - 刷新间隔(毫秒)
|
||||||
|
*/
|
||||||
|
startZIndexTimer(interval) {
|
||||||
|
this.stopZIndexTimer();
|
||||||
|
this.updateTopZIndex();
|
||||||
|
this.zIndexTimer = setInterval(() => {
|
||||||
|
this.updateTopZIndex();
|
||||||
|
}, interval);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 停止 z-index 刷新定时器
|
||||||
|
*/
|
||||||
|
stopZIndexTimer() {
|
||||||
|
if (this.zIndexTimer) {
|
||||||
|
clearInterval(this.zIndexTimer);
|
||||||
|
this.zIndexTimer = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -1901,7 +1945,7 @@ export default {
|
|||||||
|
|
||||||
.ai-assistant-history-menu {
|
.ai-assistant-history-menu {
|
||||||
min-width: 240px;
|
min-width: 240px;
|
||||||
max-width: 300px;
|
max-width: 260px;
|
||||||
max-height: 320px;
|
max-height: 320px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
@ -1916,17 +1960,20 @@ export default {
|
|||||||
|
|
||||||
.history-item {
|
.history-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
gap: 8px;
|
gap: 2px;
|
||||||
|
|
||||||
.history-item-content {
|
.history-item-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
gap: 8px;
|
||||||
gap: 2px;
|
line-height: 20px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
.history-item-title {
|
.history-item-title {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #303133;
|
color: #303133;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -1934,35 +1981,40 @@ export default {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-item-time {
|
.history-item-delete {
|
||||||
font-size: 11px;
|
flex-shrink: 0;
|
||||||
color: #909399;
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-right: -2px;
|
||||||
|
transition: opacity 0.2s, background-color 0.2s;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
> i {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-item-delete {
|
.history-item-time {
|
||||||
display: flex;
|
font-size: 11px;
|
||||||
align-items: center;
|
color: #909399;
|
||||||
justify-content: center;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 4px;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.2s, background-color 0.2s;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba(0, 0, 0, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
> i {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #909399;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover .history-item-delete {
|
&:hover {
|
||||||
opacity: 1;
|
.history-item-content {
|
||||||
|
.history-item-delete {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -72,6 +72,10 @@ export default {
|
|||||||
shouldCreateNewSession: {
|
shouldCreateNewSession: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
},
|
||||||
|
zIndex: {
|
||||||
|
type: Number,
|
||||||
|
default: 2000
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -155,15 +159,19 @@ export default {
|
|||||||
if (!this.positionLoaded) {
|
if (!this.positionLoaded) {
|
||||||
return {
|
return {
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
|
zIndex: this.zIndex,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
// 全屏时不应用自定义尺寸和位置
|
// 全屏时不应用自定义尺寸和位置
|
||||||
if (this.isFullscreen) {
|
if (this.isFullscreen) {
|
||||||
return {};
|
return {
|
||||||
|
zIndex: this.zIndex,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
const style = {
|
const style = {
|
||||||
left: `${this.left}px`,
|
left: `${this.left}px`,
|
||||||
top: `${this.top}px`,
|
top: `${this.top}px`,
|
||||||
|
zIndex: this.zIndex,
|
||||||
};
|
};
|
||||||
// 应用自定义尺寸
|
// 应用自定义尺寸
|
||||||
if (this.customSize.width) {
|
if (this.customSize.width) {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user