fix: 用传递menuBtn的ref代替手动查询dom的方式

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 btn = header.value.$refs.menuBtn
-      const menuBtn = document.querySelector('.menu-btn')
+      if (btn && (btn === event.target || btn.contains(event.target))) {
-      if (menuBtn && (menuBtn === event.target || menuBtn.contains(event.target))) {
         return // 如果是菜单按钮的点击，不处理关闭
       }
 
@@ -60,7 +65,7 @@ export default {
       }
     }
 
-    return { menuVisible, hideMenu, handleMenuOutside }
+    return { menuVisible, hideMenu, handleMenuOutside, header }
   },
 }
 </script>

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 { ClientOnly } from '#components'
-import { watch, nextTick, ref, computed } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
-import { fetchUnreadCount, notificationState } from '~/utils/notification'
+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,
     }
   },
 }