From 2f4d6e68da7ce042bcf75aea9fb43c1137fbcbc2 Mon Sep 17 00:00:00 2001
From: AnNingUI <an3533581512@gmail.com>
Date: Tue, 12 Aug 2025 21:26:24 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=94=A8=E4=BC=A0=E9=80=92menuBtn?=
 =?UTF-8?q?=E7=9A=84ref=E4=BB=A3=E6=9B=BF=E6=89=8B=E5=8A=A8=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2dom=E7=9A=84=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/app.vue                        | 15 ++++++++++-----
 frontend_nuxt/components/HeaderComponent.vue | 20 +++++++++++++-------
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/frontend_nuxt/app.vue b/frontend_nuxt/app.vue
index fcc9288a9..3c271e589 100644
--- a/frontend_nuxt/app.vue
+++ b/frontend_nuxt/app.vue
@@ -1,7 +1,11 @@
 <template>
   <div id="app">
     <div class="header-container">
-      <HeaderComponent @toggle-menu="menuVisible = !menuVisible" :show-menu-btn="!hideMenu" />
+      <HeaderComponent
+        ref="header"
+        @toggle-menu="menuVisible = !menuVisible"
+        :show-menu-btn="!hideMenu"
+      />
     </div>
 
     <div class="main-container">
@@ -42,6 +46,8 @@ export default {
       ].includes(useRoute().path)
     })
 
+    const header = useTemplateRef('header')
+
     onMounted(() => {
       if (typeof window !== 'undefined') {
         menuVisible.value = window.innerWidth > 768
@@ -49,9 +55,8 @@ export default {
     })
 
     const handleMenuOutside = (event) => {
-      // 检查点击事件是否来自菜单按钮
-      const menuBtn = document.querySelector('.menu-btn')
-      if (menuBtn && (menuBtn === event.target || menuBtn.contains(event.target))) {
+      const btn = header.value.$refs.menuBtn
+      if (btn && (btn === event.target || btn.contains(event.target))) {
         return // 如果是菜单按钮的点击，不处理关闭
       }
 
@@ -60,7 +65,7 @@ export default {
       }
     }
 
-    return { menuVisible, hideMenu, handleMenuOutside }
+    return { menuVisible, hideMenu, handleMenuOutside, header }
   },
 }
 </script>
diff --git a/frontend_nuxt/components/HeaderComponent.vue b/frontend_nuxt/components/HeaderComponent.vue
index 1a2c52f09..d4b6c2d86 100644
--- a/frontend_nuxt/components/HeaderComponent.vue
+++ b/frontend_nuxt/components/HeaderComponent.vue
@@ -3,7 +3,7 @@
     <div class="header-content">
       <div class="header-content-left">
         <div v-if="showMenuBtn" class="menu-btn-wrapper">
-          <button class="menu-btn" @click="$emit('toggle-menu')">
+          <button class="menu-btn" ref="menuBtn" @click="$emit('toggle-menu')">
             <i class="fas fa-bars"></i>
           </button>
           <span v-if="isMobile && unreadCount > 0" class="menu-unread-dot"></span>
@@ -49,14 +49,14 @@
 </template>
 
 <script>
-import { authState, clearToken, loadCurrentUser } from '~/utils/auth'
-import { watch, nextTick, ref, computed } from 'vue'
-import { fetchUnreadCount, notificationState } from '~/utils/notification'
+import { ClientOnly } from '#components'
+import { computed, nextTick, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import DropdownMenu from '~/components/DropdownMenu.vue'
 import SearchDropdown from '~/components/SearchDropdown.vue'
+import { authState, clearToken, loadCurrentUser } from '~/utils/auth'
+import { fetchUnreadCount, notificationState } from '~/utils/notification'
 import { useIsMobile } from '~/utils/screen'
-import { useRouter } from 'vue-router'
-import { ClientOnly } from '#components'
 
 export default {
   name: 'HeaderComponent',
@@ -67,7 +67,7 @@ export default {
       default: true,
     },
   },
-  setup() {
+  setup(props, { expose }) {
     const isLogin = computed(() => authState.loggedIn)
     const isMobile = useIsMobile()
     const unreadCount = computed(() => notificationState.unreadCount)
@@ -76,6 +76,11 @@ export default {
     const showSearch = ref(false)
     const searchDropdown = ref(null)
     const userMenu = ref(null)
+    const menuBtn = ref(null)
+
+    expose({
+      menuBtn,
+    })
 
     const goToHome = () => {
       router.push('/').then(() => {
@@ -183,6 +188,7 @@ export default {
       searchDropdown,
       userMenu,
       avatar,
+      menuBtn,
     }
   },
 }