fix: 修复管理界面用户菜单z-index层级问题

- 修复了querySelector语法错误,移除了无效的@click属性选择器
- 为用户菜单容器添加专门的类名user-menu-container
- 简化点击检测逻辑,提高代码可维护性
- 解决了控制台报错问题

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
shaw
2025-07-17 21:07:50 +08:00
parent 11873ed78b
commit 4372b29252
2 changed files with 6 additions and 5 deletions

View File

@@ -230,9 +230,10 @@ const app = createApp({
// 添加全局点击事件监听器,用于关闭用户菜单
document.addEventListener('click', (event) => {
// 检查点击是否在用户菜单外部
const userMenuButton = event.target.closest('.relative');
if (!userMenuButton || !userMenuButton.querySelector('button[\@click*="userMenuOpen"]')) {
// 检查点击是否在用户菜单区域外部
const isClickInsideUserMenu = event.target.closest('.user-menu-container');
if (!isClickInsideUserMenu) {
this.userMenuOpen = false;
}
});

View File

@@ -84,7 +84,7 @@
</div>
</div>
<!-- 用户菜单 -->
<div class="relative">
<div class="relative user-menu-container">
<button
@click="userMenuOpen = !userMenuOpen"
class="btn btn-primary px-4 py-3 flex items-center gap-2 relative"
@@ -97,7 +97,7 @@
<!-- 悬浮菜单 -->
<div
v-if="userMenuOpen"
class="absolute right-0 top-full mt-2 w-48 bg-white rounded-xl shadow-xl border border-gray-200 py-2"
class="absolute right-0 top-full mt-2 w-48 bg-white rounded-xl shadow-xl border border-gray-200 py-2 user-menu-dropdown"
style="z-index: 999999;"
@click.stop
>