From 5fee90dfaee6e196a7bb5514dbafc9c0a532b8d6 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Tue, 12 Aug 2025 09:25:41 +0800
Subject: [PATCH] feat: close mobile menu on outside tap

---
 frontend_nuxt/app.vue                    |  8 ++++++--
 frontend_nuxt/directives/clickOutside.js | 17 +++++++++++------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/frontend_nuxt/app.vue b/frontend_nuxt/app.vue
index 1f73c76bd..e95e848e5 100644
--- a/frontend_nuxt/app.vue
+++ b/frontend_nuxt/app.vue
@@ -5,7 +5,7 @@
     </div>
 
     <div class="main-container">
-      <div class="menu-container">
+      <div class="menu-container" v-click-outside="handleMenuOutside">
         <MenuComponent :visible="!hideMenu && menuVisible" @item-click="menuVisible = false" />
       </div>
       <div class="content" :class="{ 'menu-open': menuVisible && !hideMenu }">
@@ -48,7 +48,11 @@ export default {
       }
     })
 
-    return { menuVisible, hideMenu }
+    const handleMenuOutside = () => {
+      if (isMobile.value) menuVisible.value = false
+    }
+
+    return { menuVisible, hideMenu, handleMenuOutside }
   },
 }
 </script>
diff --git a/frontend_nuxt/directives/clickOutside.js b/frontend_nuxt/directives/clickOutside.js
index 73dda104b..b5edb29dc 100644
--- a/frontend_nuxt/directives/clickOutside.js
+++ b/frontend_nuxt/directives/clickOutside.js
@@ -27,23 +27,28 @@ const nodeList = new Map()
 // 检查是否在客户端环境，以避免在SSR（服务器端渲染）时执行
 const isClient = typeof window !== 'undefined'
 
-// 在客户端环境中，只设置一次全局的 mousedown 和 mouseup 监听器
+// 在客户端环境中，只设置一次全局的 mousedown / mouseup 和 touchstart / touchend 监听器
 if (isClient) {
   let startClick
 
-  document.addEventListener('mousedown', (e) => (startClick = e))
-
-  document.addEventListener('mouseup', (e) => {
+  const handleStart = (e) => (startClick = e)
+  const handleEnd = (e) => {
     // 遍历所有注册的元素和它们的处理器
     for (const handlers of nodeList.values()) {
       for (const { documentHandler } of handlers) {
-        // 调用每个处理器，传入 mouseup 和 mousedown 事件
+        // 调用每个处理器，传入结束和开始事件
         documentHandler(e, startClick)
       }
     }
     // 完成后重置 startClick
     startClick = undefined
-  })
+  }
+
+  document.addEventListener('mousedown', handleStart)
+  document.addEventListener('touchstart', handleStart)
+
+  document.addEventListener('mouseup', handleEnd)
+  document.addEventListener('touchend', handleEnd)
 }
 
 /**