jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-05-27 04:57:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add unread indicator on mobile menu button

Browse Source
This commit is contained in:
Tim
2025-07-22 20:03:04 +08:00
parent 58d9a6a2f7
commit 53e0fc681a
1 changed files with 33 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
open-isle-cli/src/components/HeaderComponent.vue
View File

@@ -2,9 +2,12 @@
<header class="header"> <header class="header">
<div class="header-content"> <div class="header-content">
<div class="header-content-left"> <div class="header-content-left">
<button v-if="showMenuBtn" class="menu-btn" @click="$emit('toggle-menu')"> <div v-if="showMenuBtn" class="menu-btn-wrapper">
<button class="menu-btn" @click="$emit('toggle-menu')">
<i class="fas fa-bars"></i> <i class="fas fa-bars"></i>
</button> </button>
<span v-if="isMobile && unreadCount > 0" class="menu-unread-dot"></span>
</div>
<div class="logo-container" @click="goToHome"> <div class="logo-container" @click="goToHome">
<img alt="OpenIsle" src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png" <img alt="OpenIsle" src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png"
width="60" height="60"> width="60" height="60">
@@ -42,6 +45,7 @@
<script> <script>
import { authState, clearToken, loadCurrentUser } from '../utils/auth' import { authState, clearToken, loadCurrentUser } from '../utils/auth'
import { watch, nextTick } from 'vue' import { watch, nextTick } from 'vue'
import { fetchUnreadCount } from '../utils/notification'
import DropdownMenu from './DropdownMenu.vue' import DropdownMenu from './DropdownMenu.vue'
import SearchDropdown from './SearchDropdown.vue' import SearchDropdown from './SearchDropdown.vue'
import { isMobile } from '../utils/screen' import { isMobile } from '../utils/screen'
@@ -58,7 +62,8 @@ export default {
data() { data() {
return { return {
avatar: '', avatar: '',
showSearch: false showSearch: false,
unreadCount: 0
} }
}, },
computed: { computed: {
@@ -85,11 +90,20 @@ export default {
} }
} }
} }
const updateUnread = async () => {
if (authState.loggedIn) {
this.unreadCount = await fetchUnreadCount()
} else {
this.unreadCount = 0
}
}
await updateAvatar() await updateAvatar()
await updateUnread()
watch(() => authState.loggedIn, async () => { watch(() => authState.loggedIn, async () => {
await updateAvatar() await updateAvatar()
await updateUnread()
}) })
watch(() => this.$route.fullPath, () => { watch(() => this.$route.fullPath, () => {
@@ -204,6 +218,21 @@ export default {
margin-right: 10px; margin-right: 10px;
} }
.menu-btn-wrapper {
position: relative;
display: inline-block;
}
.menu-unread-dot {
position: absolute;
top: 0;
right: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #ff4d4f;
}
.menu-btn:hover { .menu-btn:hover {
opacity: 0.8; opacity: 0.8;
} }