mirror of
https://github.com/pure-admin/pure-admin-thin.git
synced 2025-04-25 07:57:18 +08:00
113 lines
2.6 KiB
Vue
113 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import Search from "../search/index.vue";
|
|
import Notice from "../notice/index.vue";
|
|
import { ref, watch, nextTick } from "vue";
|
|
import SidebarItem from "./sidebarItem.vue";
|
|
import { useNav } from "@/layout/hooks/useNav";
|
|
import { usePermissionStoreHook } from "@/store/modules/permission";
|
|
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
|
|
import Setting from "@iconify-icons/ri/settings-3-line";
|
|
|
|
const menuRef = ref();
|
|
|
|
const {
|
|
route,
|
|
title,
|
|
routers,
|
|
logout,
|
|
backHome,
|
|
onPanel,
|
|
menuSelect,
|
|
username,
|
|
avatarsStyle
|
|
} = useNav();
|
|
|
|
nextTick(() => {
|
|
menuRef.value?.handleResize();
|
|
});
|
|
|
|
watch(
|
|
() => route.path,
|
|
() => {
|
|
menuSelect(route.path, routers);
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-loading="usePermissionStoreHook().wholeMenus.length === 0"
|
|
class="horizontal-header"
|
|
>
|
|
<div class="horizontal-header-left" @click="backHome">
|
|
<img src="/logo.svg" alt="logo" />
|
|
<span>{{ title }}</span>
|
|
</div>
|
|
<el-menu
|
|
router
|
|
ref="menuRef"
|
|
mode="horizontal"
|
|
class="horizontal-header-menu"
|
|
:default-active="route.path"
|
|
@select="indexPath => menuSelect(indexPath, routers)"
|
|
>
|
|
<sidebar-item
|
|
v-for="route in usePermissionStoreHook().wholeMenus"
|
|
:key="route.path"
|
|
:item="route"
|
|
:base-path="route.path"
|
|
/>
|
|
</el-menu>
|
|
<div class="horizontal-header-right">
|
|
<!-- 菜单搜索 -->
|
|
<Search />
|
|
<!-- 通知 -->
|
|
<Notice id="header-notice" />
|
|
<!-- 退出登录 -->
|
|
<el-dropdown trigger="click">
|
|
<span class="el-dropdown-link navbar-bg-hover">
|
|
<img
|
|
src="https://avatars.githubusercontent.com/u/44761321?v=4"
|
|
:style="avatarsStyle"
|
|
/>
|
|
<p v-if="username" class="dark:text-white">{{ username }}</p>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu class="logout">
|
|
<el-dropdown-item @click="logout">
|
|
<IconifyIconOffline
|
|
:icon="LogoutCircleRLine"
|
|
style="margin: 5px"
|
|
/>
|
|
退出系统
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
<span
|
|
class="set-icon navbar-bg-hover"
|
|
title="打开项目配置"
|
|
@click="onPanel"
|
|
>
|
|
<IconifyIconOffline :icon="Setting" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.el-loading-mask) {
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.logout {
|
|
max-width: 120px;
|
|
|
|
::v-deep(.el-dropdown-menu__item) {
|
|
min-width: 100%;
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
</style>
|