From e1d17274894ebb219296d5d3744594f242b4b9d6 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Thu, 17 Jul 2025 14:19:15 +0800
Subject: [PATCH] feat(ui): close mobile menu on item click

---
 open-isle-cli/src/App.vue                     |  5 ++-
 .../src/components/MenuComponent.vue          | 41 ++++++++++++++++---
 2 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/open-isle-cli/src/App.vue b/open-isle-cli/src/App.vue
index 34dbd4b2d..c3c099ff3 100644
--- a/open-isle-cli/src/App.vue
+++ b/open-isle-cli/src/App.vue
@@ -6,7 +6,10 @@
     />
 
     <div class="main-container">
-      <MenuComponent :visible="!hideMenu && menuVisible" />
+      <MenuComponent
+        :visible="!hideMenu && menuVisible"
+        @item-click="menuVisible = false"
+      />
       <div class="content">
         <router-view />
       </div>
diff --git a/open-isle-cli/src/components/MenuComponent.vue b/open-isle-cli/src/components/MenuComponent.vue
index fbb465358..8ed51753f 100644
--- a/open-isle-cli/src/components/MenuComponent.vue
+++ b/open-isle-cli/src/components/MenuComponent.vue
@@ -2,26 +2,52 @@
   <transition name="slide">
     <nav v-if="visible" class="menu">
       <div class="menu-item-container">
-        <router-link class="menu-item" exact-active-class="selected" to="/">
+        <router-link
+          class="menu-item"
+          exact-active-class="selected"
+          to="/"
+          @click="handleItemClick"
+        >
           <i class="menu-item-icon fas fa-hashtag"></i>
           <span class="menu-item-text">话题</span>
         </router-link>
-        <router-link class="menu-item" exact-active-class="selected" to="/message">
+        <router-link
+          class="menu-item"
+          exact-active-class="selected"
+          to="/message"
+          @click="handleItemClick"
+        >
           <i class="menu-item-icon fas fa-envelope"></i>
           <span class="menu-item-text">我的消息</span>
           <span v-if="unreadCount > 0" class="unread-container">
             <span class="unread"> {{ showUnreadCount }} </span>
           </span>
         </router-link>
-        <router-link class="menu-item" exact-active-class="selected" to="/about">
+        <router-link
+          class="menu-item"
+          exact-active-class="selected"
+          to="/about"
+          @click="handleItemClick"
+        >
           <i class="menu-item-icon fas fa-info-circle"></i>
           <span class="menu-item-text">关于</span>
         </router-link>
-        <router-link v-if="shouldShowStats" class="menu-item" exact-active-class="selected" to="/about/stats">
+        <router-link
+          v-if="shouldShowStats"
+          class="menu-item"
+          exact-active-class="selected"
+          to="/about/stats"
+          @click="handleItemClick"
+        >
           <i class="menu-item-icon fas fa-chart-line"></i>
           <span class="menu-item-text">站点统计</span>
         </router-link>
-        <router-link class="menu-item" exact-active-class="selected" to="/new-post">
+        <router-link
+          class="menu-item"
+          exact-active-class="selected"
+          to="/new-post"
+          @click="handleItemClick"
+        >
           <i class="menu-item-icon fas fa-edit"></i>
           <span class="menu-item-text">发帖</span>
         </router-link>
@@ -162,6 +188,9 @@ export default {
   },
   methods: {
     cycleTheme,
+    handleItemClick() {
+      if (window.innerWidth <= 768) this.$emit('item-click')
+    },
     isImageIcon(icon) {
       if (!icon) return false
       return /^https?:\/\//.test(icon) || icon.startsWith('/')
@@ -173,6 +202,7 @@ export default {
         .then(() => {
           window.location.reload()
         })
+      this.handleItemClick()
     },
     gotoTag(t) {
       const value = encodeURIComponent(t.id ?? t.name)
@@ -181,6 +211,7 @@ export default {
         .then(() => {
           window.location.reload()
         })
+      this.handleItemClick()
     }
   }
 }