| | |
| | | <template>
|
| | | <div class="navbar">
|
| | | <hamburger id="hamburger-container" :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" />
|
| | | <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
|
| | | <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />
|
| | |
|
| | | <div class="right-menu">
|
| | | <template v-if="appStore.device !== 'mobile'">
|
| | |
| | | </el-tooltip>
|
| | |
|
| | | <screenfull id="screenfull" class="right-menu-item hover-effect" />
|
| | |
|
| | | <el-tooltip content="主题模式" effect="dark" placement="bottom">
|
| | | <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">
|
| | | <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />
|
| | | <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />
|
| | | </div>
|
| | | </el-tooltip>
|
| | |
|
| | | <el-tooltip content="布局大小" effect="dark" placement="bottom">
|
| | | <size-select id="size-select" class="right-menu-item hover-effect" />
|
| | |
| | | function handleCommand(command) {
|
| | | switch (command) {
|
| | | case "setLayout":
|
| | | setLayout();
|
| | | break;
|
| | | setLayout()
|
| | | break
|
| | | case "logout":
|
| | | logout();
|
| | | break;
|
| | | logout()
|
| | | break
|
| | | default:
|
| | | break;
|
| | | break
|
| | | }
|
| | | }
|
| | |
|
| | |
| | | type: 'warning'
|
| | | }).then(() => {
|
| | | userStore.logOut().then(() => {
|
| | | location.href = '/index';
|
| | | location.href = '/index'
|
| | | })
|
| | | }).catch(() => { });
|
| | | }).catch(() => { })
|
| | | }
|
| | |
|
| | | const emits = defineEmits(['setLayout'])
|
| | | function setLayout() {
|
| | | emits('setLayout');
|
| | | emits('setLayout')
|
| | | }
|
| | |
|
| | | function toggleTheme() {
|
| | | settingsStore.toggleTheme()
|
| | | }
|
| | | </script>
|
| | |
|
| | |
| | | height: 50px;
|
| | | overflow: hidden;
|
| | | position: relative;
|
| | | background: #fff;
|
| | | background: var(--navbar-bg);
|
| | | box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
| | |
|
| | | .hamburger-container {
|
| | |
| | | padding: 0 8px;
|
| | | height: 100%;
|
| | | font-size: 18px;
|
| | | color: #5a5e66;
|
| | | color: var(--navbar-text);
|
| | | vertical-align: text-bottom;
|
| | |
|
| | | &.hover-effect {
|
| | |
| | | background: rgba(0, 0, 0, 0.025);
|
| | | }
|
| | | }
|
| | |
|
| | | &.theme-switch-wrapper {
|
| | | display: flex;
|
| | | align-items: center;
|
| | |
|
| | | svg {
|
| | | transition: transform 0.3s;
|
| | | |
| | | &:hover {
|
| | | transform: scale(1.15);
|
| | | }
|
| | | }
|
| | | }
|
| | | }
|
| | |
|
| | | .avatar-container {
|