98 lines
1.9 KiB
Vue
98 lines
1.9 KiB
Vue
<script setup>
|
|
import { onMounted, ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useUserStore } from '../stores/userStore'
|
|
import { useWebSocket } from '../stores/websocketStore'
|
|
|
|
const websocket = useWebSocket()
|
|
const userStore = useUserStore()
|
|
|
|
const router = useRouter()
|
|
|
|
const activeIndex = ref('/home')
|
|
|
|
onMounted(() => {
|
|
router.afterEach((to) => {
|
|
activeIndex.value = to.path
|
|
})
|
|
})
|
|
|
|
function toPath(url) {
|
|
if (url === '/login') {
|
|
console.log(userStore.isLogined())
|
|
|
|
if (userStore.isLogined()) {
|
|
websocket.disconnect()
|
|
userStore.resetUserInfo()
|
|
}
|
|
router.push(url)
|
|
}
|
|
else {
|
|
router.push(url)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="layout">
|
|
<el-menu
|
|
v-model="activeIndex"
|
|
:default-active="activeIndex"
|
|
mode="horizontal"
|
|
active-text-color="#1553f1"
|
|
>
|
|
<el-menu-item index="/home" @click="toPath('/home')">
|
|
首页
|
|
</el-menu-item>
|
|
<el-menu-item index="/im" @click="toPath('/im')">
|
|
IM即时通信
|
|
</el-menu-item>
|
|
<el-menu-item index="/login" @click="toPath('/login')">
|
|
登录
|
|
</el-menu-item>
|
|
</el-menu>
|
|
<div class="layout-main">
|
|
<router-view />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.layout {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
& *::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
& *::-webkit-scrollbar-track {
|
|
background-color: #fff;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
& *::-webkit-scrollbar-thumb {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border-radius: 3px;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
& *::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.el-menu--horizontal {
|
|
width: 100%;
|
|
}
|
|
|
|
.layout-main {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
scrollbar-gutter: stable both-edges;
|
|
}
|
|
}
|
|
</style>
|