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:
kuaifan 2026-01-19 01:13:18 +00:00
parent 2cb67fafe7
commit cb6c50b071
3 changed files with 101 additions and 41 deletions

View File

@ -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;

View File

@ -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">&#xe8a1;</i> <i class="taskfont">&#xe8a1;</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">&#xe6e8;</i> <i class="taskfont">&#xe6e8;</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">&#xe6e5;</i>
<div class="history-item-delete" @click.stop="deleteSession(session.id)"> </div>
<i class="taskfont">&#xe6e5;</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;
}
}
} }
} }

View File

@ -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) {