159 lines
3.4 KiB
Vue
159 lines
3.4 KiB
Vue
<template>
|
|
<nav class="navbar">
|
|
<div class="navbar-left">
|
|
<router-link to="/home" class="navbar-logo">
|
|
<img :src="logo" alt="MyPlayer" />
|
|
</router-link>
|
|
</div>
|
|
<div class="navbar-right">
|
|
<router-link to="/home/search">搜索</router-link>
|
|
<router-link to="/home/friends">好友</router-link>
|
|
<router-link to="/home/group">群聊</router-link>
|
|
<router-link to="/home/playroom">Playroom</router-link>
|
|
<div class="more-dropdown" @click="toggleDropdown" @blur="closeDropdown">
|
|
更多
|
|
<ul v-if="isDropdownOpen" class="dropdown-content">
|
|
<li>设置</li>
|
|
<li @click="aboutUs">关于我们</li>
|
|
<li>帮助</li>
|
|
<li @click="logout">退出登录</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, onUnmounted } from 'vue';
|
|
import logo from '../assets/logo.png';
|
|
import { onlineSocketStore } from '@/store/Online';
|
|
import router from '@/router';
|
|
import { groupMessageStore } from '@/store/message.ts';
|
|
import { userInfoStore } from '@/store/user';
|
|
|
|
const userInfo = userInfoStore()
|
|
const socket = onlineSocketStore()
|
|
const groupMessage = groupMessageStore()
|
|
|
|
|
|
const isDropdownOpen = ref(false); // 控制下拉框的显示与隐藏
|
|
|
|
const toggleDropdown = () => {
|
|
isDropdownOpen.value = !isDropdownOpen.value; // 切换下拉框的显示状态
|
|
};
|
|
|
|
const closeDropdown = () => {
|
|
isDropdownOpen.value = false; // 关闭下拉框
|
|
};
|
|
|
|
// 监听全局点击事件
|
|
const handleGlobalClick = (event) => {
|
|
// 检查点击是否发生在下拉框外部
|
|
if (!event.target.closest('.more-dropdown')) {
|
|
closeDropdown();
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
document.addEventListener('click', handleGlobalClick);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
document.removeEventListener('click', handleGlobalClick);
|
|
});
|
|
|
|
|
|
//退出登录逻辑
|
|
const logout = () => {
|
|
//保存群聊消息
|
|
groupMessage.saveMessagesHistory(socket.u_id,groupMessage.g_id)
|
|
// 清除用户全局信息
|
|
userInfo.clearUserInfo();
|
|
localStorage.clear();
|
|
// 断开websocket链接
|
|
socket.disconnect();
|
|
// 跳转到登录页面
|
|
window.location.href = '/';
|
|
|
|
};
|
|
|
|
const aboutUs = () => {
|
|
router.push('/home/about')
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.navbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
padding: 10px 20px;
|
|
background-color: #60605e;
|
|
color: #fff;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.navbar-left,
|
|
.navbar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 10%;
|
|
margin-left: 10%;
|
|
}
|
|
|
|
.navbar-logo img {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.navbar a {
|
|
color: #fff;
|
|
margin: 0 10px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.navbar a.router-link-active {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.more-dropdown {
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dropdown-content {
|
|
position: absolute;
|
|
width: 100px;
|
|
margin-top: 22px;
|
|
right: -50px;
|
|
color: #fff;
|
|
background-color: #444444;
|
|
border: 1px solid #000000;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
|
padding: 5px;
|
|
z-index: 1000;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.dropdown-content a {
|
|
display: block;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.dropdown-content li {
|
|
height: 40px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.dropdown-content li:hover {
|
|
|
|
background-color: #ffffff;
|
|
color: #000000;
|
|
}
|
|
</style> |