<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="menu-search">
|
<el-select
|
v-model="selectedMenu"
|
placeholder="搜索菜单"
|
filterable
|
clearable
|
:fit-input-width="false"
|
:filter-method="filterMenus"
|
@change="handleMenuSelect"
|
@clear="resetMenuFilter"
|
>
|
<template #prefix>
|
<lims-icon name="el-icon-search" />
|
</template>
|
<el-option
|
v-for="item in filteredMenus"
|
:key="item.path"
|
:label="item.breadcrumb"
|
:value="item.path"
|
/>
|
</el-select>
|
</div>
|
<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'
|
import usePermissionStore from '@/store/modules/permission'
|
import { getNormalPath } from '@/utils/ruoyi'
|
|
const appStore = useAppStore()
|
const userStore = useUserStore()
|
const permissionStore = usePermissionStore()
|
const router = useRouter()
|
|
const avatarText = computed(() => (userStore.nickName || '').substring(0, 1))
|
|
const selectedMenu = ref(undefined)
|
const filteredMenus = ref([])
|
|
// 侧边栏菜单树拍平成可搜索列表（标题 + 完整路径面包屑）
|
const menuList = computed(() => {
|
const list = []
|
const walk = (routes, basePath, parents) => {
|
;(routes || []).forEach(route => {
|
if (!route || route.hidden || typeof route.path !== 'string') return
|
const fullPath = getNormalPath(`${basePath}/${route.path}`)
|
const title = route.meta && route.meta.title
|
const children = Array.isArray(route.children) ? route.children : []
|
if (children.length) {
|
walk(children, fullPath, title ? parents.concat(title) : parents)
|
} else if (title && fullPath) {
|
list.push({ title, path: fullPath, breadcrumb: parents.concat(title).join(' / ') })
|
}
|
})
|
}
|
walk(permissionStore.sidebarRouters, '', [])
|
return list
|
})
|
|
function filterMenus(query) {
|
const q = (query || '').trim().toLowerCase()
|
filteredMenus.value = q
|
? menuList.value.filter(item =>
|
item.title.toLowerCase().includes(q) || item.breadcrumb.toLowerCase().includes(q)
|
)
|
: menuList.value
|
}
|
|
function resetMenuFilter() {
|
filteredMenus.value = menuList.value
|
}
|
|
function handleMenuSelect(path) {
|
if (path) {
|
router.push(path).catch(() => {})
|
}
|
selectedMenu.value = undefined
|
resetMenuFilter()
|
}
|
|
watch(menuList, resetMenuFilter, { immediate: true })
|
|
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;
|
}
|
|
.menu-search {
|
margin-right: 20px;
|
|
:deep(.el-select) {
|
width: 210px;
|
}
|
|
:deep(.el-select__wrapper) {
|
border-radius: 16px;
|
}
|
}
|
|
.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>
|
