jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-02-25 07:30:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): close mobile menu on item click

Browse Source
This commit is contained in:
Tim
2025-07-17 14:19:15 +08:00
parent 89de4c7f0e
commit e1d1727489
2 changed files with 40 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
open-isle-cli/src/App.vue
View File

@@ -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>

41
open-isle-cli/src/components/MenuComponent.vue
View File

@@ -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()
}
}
}