- <template>
- <div class="navbar">
- <!-- <hamburger :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
- <!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" /> -->
- <!-- <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" /> -->
-
- <div class="right-menu">
- <template v-if="appStore.device !== 'mobile'">
- <!-- <header-search id="header-search" class="right-menu-item" /> -->
- <screenfull id="screenfull" class="right-menu-item hover-effect" />
- <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
- <size-select id="size-select" class="right-menu-item hover-effect" />
- </el-tooltip> -->
- </template>
- <div class="avatar-container">
- <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
- <div class="avatar-wrapper">
- <img :src="userStore.userInfo.avatar ? userStore.userInfo.avatar : userImg" class="user-avatar" />
- <el-icon><caret-bottom /></el-icon>
- </div>
- <template #dropdown>
- <el-dropdown-menu>
- <el-dropdown-item @click="dialogShow = true">个人中心</el-dropdown-item>
- <!-- <el-dropdown-item command="setLayout">
- <span>布局设置</span>
- </el-dropdown-item> -->
- <el-dropdown-item command="logout">
- <span>退出登录</span>
- </el-dropdown-item>
- </el-dropdown-menu>
- </template>
- </el-dropdown>
- </div>
- </div>
- <!-- 个人中心弹窗 -->
- <el-dialog v-model="dialogShow" title="个人中心" width="1100px" append-to-body>
- <UserCenter></UserCenter>
- </el-dialog>
- </div>
- </template>
-
- <script setup>
- import { ElMessageBox } from 'element-plus';
- import Cookies from 'js-cookie';
- import Breadcrumb from '@/components/Breadcrumb';
- import TopNav from '@/components/TopNav';
- import Hamburger from '@/components/Hamburger';
- import Screenfull from '@/components/Screenfull';
- import SizeSelect from '@/components/SizeSelect';
- import HeaderSearch from '@/components/HeaderSearch';
- import useAppStore from '@/store/modules/app';
- import useUserStore from '@/store/modules/user';
- import useSettingsStore from '@/store/modules/settings';
- import UserCenter from '@/views/system/user/profile/index'; //个人中心
- import bus from '@/utils/mitt';
- import userImg from '@/assets/images/login/user.png'; //默认头像
-
- const appStore = useAppStore();
- const userStore = useUserStore();
- const settingsStore = useSettingsStore();
- const router = useRouter();
- const dialogShow = ref(false);
-
- function toggleSideBar() {
- appStore.toggleSideBar();
- }
-
- function handleCommand(command) {
- switch (command) {
- case 'setLayout':
- setLayout();
- break;
- case 'logout':
- logout();
- break;
- default:
- break;
- }
- }
- // 退出登录
- function logout() {
- ElMessageBox.confirm('确定注销并退出系统吗?', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning',
- })
- .then(() => {
- userStore.logOut().then(() => {
- location.href = '/';
- });
- Cookies.remove('xiaogan-Token'); //清除token
- })
- .catch(() => {});
- }
-
- const emits = defineEmits(['setLayout']);
- function setLayout() {
- emits('setLayout');
- }
- onMounted(() => {
- bus.on('closeUserCenter', e => {
- dialogShow.value = false;
- });
- });
- onBeforeUnmount(() => {
- bus.off('closeUserCenter');
- });
- </script>
-
- <style lang="scss" scoped>
- @import '@/assets/styles/variables.module.scss';
- .navbar {
- height: 50px;
- overflow: hidden;
- position: relative;
- background: $mainBg;
- color: #fff;
- box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-
- .hamburger-container {
- line-height: 46px;
- height: 100%;
- float: left;
- cursor: pointer;
- transition: background 0.3s;
- -webkit-tap-highlight-color: transparent;
-
- &:hover {
- background: rgba(0, 0, 0, 0.025);
- }
- }
-
- .breadcrumb-container {
- float: left;
- }
-
- .topmenu-container {
- position: absolute;
- left: 50px;
- }
-
- .errLog-container {
- display: inline-block;
- vertical-align: top;
- }
-
- .right-menu {
- float: right;
- height: 100%;
- line-height: 50px;
- display: flex;
-
- &:focus {
- outline: none;
- }
- .iconReturn {
- margin-top: 10px;
- cursor: pointer;
- }
- .right-menu-item {
- display: inline-block;
- padding: 0 8px;
- height: 100%;
- font-size: 18px;
- vertical-align: text-bottom;
-
- &.hover-effect {
- cursor: pointer;
- transition: background 0.3s;
-
- &:hover {
- background: rgba(0, 0, 0, 0.025);
- }
- }
- }
-
- .avatar-container {
- margin-right: 40px;
-
- .avatar-wrapper {
- margin-top: 5px;
- position: relative;
-
- .user-avatar {
- cursor: pointer;
- width: 40px;
- height: 40px;
- border-radius: 10px;
- }
-
- i {
- cursor: pointer;
- position: absolute;
- right: -20px;
- top: 25px;
- font-size: 12px;
- }
- }
- }
- }
- }
- </style>