<template>
|
<div class="navbar">
|
<hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
<div class="center-menu">
|
<span class="label">LIMS实验室管理系统</span>
|
</div>
|
<div class="right-menu">
|
<div class="avatar-wrapper">
|
<el-avatar shape="square" :size="30">{{ avatarText }}</el-avatar>
|
<span class="userName">{{ userStore.nickName }}</span>
|
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
<div class="avatar-wrapper">
|
<lims-icon name="el-icon-caret-bottom" />
|
</div>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<router-link to="/user/profile">
|
<el-dropdown-item>个人中心</el-dropdown-item>
|
</router-link>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
<img class="logoout" src="@/assets/images/logoout.png" @click="logout" title="退出账号" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ElMessageBox } from 'element-plus'
|
import Hamburger from '@/components/Hamburger'
|
import useAppStore from '@/store/modules/app'
|
import useUserStore from '@/store/modules/user'
|
|
const appStore = useAppStore()
|
const userStore = useUserStore()
|
|
const avatarText = computed(() => (userStore.nickName || '').substring(0, 1))
|
|
function toggleSideBar() {
|
appStore.toggleSideBar()
|
}
|
|
function logout() {
|
ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
userStore.logOut().then(() => {
|
location.href = '/index'
|
})
|
}).catch(() => { })
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.navbar {
|
height: 50px;
|
overflow: hidden;
|
background: var(--lims-surface);
|
border-bottom: 1px solid var(--lims-divider);
|
box-shadow: none;
|
position: fixed; /* 将头部固定 */
|
top: 0; /* 在顶部固定 */
|
width: 100%; /* 宽度100%，覆盖整个视口 */
|
z-index: 1000; /* 确保头部在其他内容之上 */
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.hamburger-container {
|
line-height: 46px;
|
height: 100%;
|
cursor: pointer;
|
transition: background 0.2s;
|
-webkit-tap-highlight-color: transparent;
|
display: flex;
|
align-items: center;
|
flex-shrink: 0;
|
margin-left: 8px;
|
border-radius: var(--lims-radius-sm);
|
|
&:hover {
|
background: var(--lims-surface-hover);
|
}
|
}
|
|
.center-menu {
|
height: 100%;
|
line-height: 50px;
|
margin-right: auto;
|
margin-left: 8px;
|
display: flex;
|
align-items: center;
|
|
/* 标题左侧的主色细条，呼应弹窗标题的视觉语言 */
|
&::before {
|
content: '';
|
display: inline-block;
|
width: 3px;
|
height: 15px;
|
border-radius: 2px;
|
background: var(--el-color-primary);
|
margin-right: 10px;
|
}
|
|
.label {
|
font-size: 15px;
|
font-weight: 600;
|
color: var(--lims-text);
|
letter-spacing: 0.2px;
|
}
|
}
|
|
.right-menu {
|
height: 100%;
|
line-height: 50px;
|
display: flex;
|
align-items: center;
|
|
&:focus {
|
outline: none;
|
}
|
|
.avatar-wrapper {
|
display: flex;
|
align-items: center;
|
|
:deep(.el-avatar) {
|
background: var(--el-color-primary);
|
border-radius: var(--lims-radius-sm);
|
font-size: 14px;
|
font-weight: 600;
|
}
|
|
.userName {
|
font-size: 14px;
|
color: var(--lims-text-2);
|
margin-left: 10px;
|
}
|
.logoout {
|
margin: 0 40px;
|
cursor: pointer;
|
width: 14px;
|
opacity: 0.6;
|
transition: opacity 0.2s;
|
|
&:hover {
|
opacity: 1;
|
}
|
}
|
}
|
|
.right-menu-item {
|
display: inline-block;
|
padding: 0 8px;
|
height: 100%;
|
font-size: 18px;
|
color: var(--lims-text-2);
|
vertical-align: text-bottom;
|
|
&.hover-effect {
|
cursor: pointer;
|
transition: background 0.2s;
|
|
&:hover {
|
background: var(--lims-surface-hover);
|
}
|
}
|
}
|
|
.avatar-container {
|
display: flex;
|
align-items: center;
|
}
|
}
|
}
|
</style>
|
