129 lines
3.2 KiB
Vue
129 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import Search from "./search/index.vue";
|
|
import Notice from "./notice/index.vue";
|
|
import QrCodeHover from "@/components/QrCodeHover/index.vue";
|
|
import mixNav from "./sidebar/mixNav.vue";
|
|
import { useNav } from "@/layout/hooks/useNav";
|
|
import Breadcrumb from "./sidebar/breadCrumb.vue";
|
|
import topCollapse from "./sidebar/topCollapse.vue";
|
|
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
|
|
import Setting from "@iconify-icons/ri/settings-3-line";
|
|
|
|
const {
|
|
layout,
|
|
device,
|
|
logout,
|
|
userProfile,
|
|
onPanel,
|
|
pureApp,
|
|
username,
|
|
nickname,
|
|
userAvatar,
|
|
avatarsStyle,
|
|
toggleSideBar
|
|
} = useNav();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="navbar bg-[#fff] shadow-sm shadow-[rgba(0, 21, 41, 0.08)] dark:shadow-[#0d0d0d]">
|
|
<topCollapse v-if="device === 'mobile'" class="hamburger-container" :is-active="pureApp.sidebar.opened"
|
|
@toggleClick="toggleSideBar" />
|
|
|
|
<Breadcrumb v-if="layout !== 'mix' && device !== 'mobile'" class="breadcrumb-container" />
|
|
|
|
<mixNav v-if="layout === 'mix'" />
|
|
|
|
<div v-if="layout === 'vertical'" class="vertical-header-right">
|
|
<!-- 二维码 -->
|
|
<QrCodeHover />
|
|
<!-- 菜单搜索 -->
|
|
<!-- <Search /> -->
|
|
<!-- 通知 -->
|
|
<!-- <Notice id="header-notice" /> -->
|
|
<!-- 退出登录 -->
|
|
<el-dropdown trigger="click">
|
|
<span class="el-dropdown-link navbar-bg-hover select-none">
|
|
<img :src="userAvatar" :style="avatarsStyle" />
|
|
<p v-if="nickname" class="dark:text-white">{{ nickname }}</p>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu class="logout">
|
|
<el-dropdown-item @click="userProfile">
|
|
<IconifyIconOffline :icon="LogoutCircleRLine" style="margin: 5px" />
|
|
个人中心
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
<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>
|
|
.navbar {
|
|
width: 100%;
|
|
height: 48px;
|
|
overflow: hidden;
|
|
|
|
.hamburger-container {
|
|
float: left;
|
|
height: 100%;
|
|
line-height: 48px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.vertical-header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
min-width: 280px;
|
|
height: 48px;
|
|
color: #000000d9;
|
|
|
|
.el-dropdown-link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
height: 48px;
|
|
padding: 10px;
|
|
color: #000000d9;
|
|
cursor: pointer;
|
|
|
|
p {
|
|
font-size: 14px;
|
|
}
|
|
|
|
img {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.breadcrumb-container {
|
|
float: left;
|
|
margin-left: 16px;
|
|
}
|
|
}
|
|
|
|
.logout {
|
|
max-width: 120px;
|
|
|
|
::v-deep(.el-dropdown-menu__item) {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
min-width: 100%;
|
|
}
|
|
}
|
|
</style>
|