feat: close mobile menu on outside tap

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>

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))
+  const handleStart = (e) => (startClick = e)
-
+  const handleEnd = (e) => {
-  document.addEventListener('mouseup', (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)
 }
 
 /**