|
|
<template>
|
|
|
<!-- el-menu 组件用于创建一个菜单，这里设置了类名为 "navbar"，模式为水平方向（horizontal），通常用于页面顶部的导航栏布局 -->
|
|
|
<el-menu class="navbar" mode="horizontal">
|
|
|
<!-- Hamburger 组件，用于实现类似汉堡包样式的图标按钮，点击可切换侧边栏状态。通过绑定 :toggleClick 事件来触发切换侧边栏的方法，:isActive 根据侧边栏的打开状态来显示相应的样式 -->
|
|
|
<hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
|
|
|
<!-- 引入 Breadcrumb 组件，可能用于展示页面的面包屑导航，显示当前页面在整个网站结构中的层级路径，但此处没有传入具体属性 -->
|
|
|
<breadcrumb></breadcrumb>
|
|
|
<!-- el-dropdown 组件用于创建一个下拉菜单，触发方式设置为点击（click），这里用于展示用户相关操作的下拉菜单，比如首页、退出等功能 -->
|
|
|
<el-dropdown class="avatar-container" trigger="click">
|
|
|
<!-- 内部的 div 作为一个容器，包裹用户头像和下拉箭头图标 -->
|
|
|
<div class="avatar-wrapper">
|
|
|
<!-- 通过绑定 :src 属性展示用户头像图片，图片的源地址由变量 "avatar" 决定 -->
|
|
|
<img class="user-avatar" :src="avatar">
|
|
|
<!-- 使用一个向下的图标（el-icon-caret-bottom）作为下拉菜单的指示箭头 -->
|
|
|
<i class="el-icon-caret-bottom"></i>
|
|
|
</div>
|
|
|
<!-- el-dropdown-menu 组件用于定义下拉菜单的具体内容，通过 slot="dropdown" 指定它在 el-dropdown 组件中的插槽位置 -->
|
|
|
<el-dropdown-menu class="user-dropdown" slot="dropdown">
|
|
|
<!-- router-link 组件用于创建路由链接，点击可跳转到对应的路由路径（这里是首页，路径为 "/"），样式设置为行内块元素 -->
|
|
|
<router-link class="inlineBlock" to="/">
|
|
|
<el-dropdown-item>
|
|
|
首页
|
|
|
</el-dropdown-item>
|
|
|
</router-link>
|
|
|
<!-- 另一个 el-dropdown-item 用于展示 "退出" 操作，添加了分割线样式（divided），通过点击内部的 span 元素触发 logout 方法来执行退出登录操作 -->
|
|
|
<el-dropdown-item divided>
|
|
|
<span @click="logout" style="display:block;">退出</span>
|
|
|
</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
</el-menu>
|
|
|
</template>
|
|
|
<script>
|
|
|
// 从 vuex 中导入 mapGetters 辅助函数，它用于将 Vuex store 中的 getter 映射到组件的计算属性中
|
|
|
import { mapGetters } from 'vuex'
|
|
|
// 导入自定义的 Breadcrumb 组件，用于页面面包屑导航展示
|
|
|
import Breadcrumb from '@/components/Breadcrumb'
|
|
|
// 导入自定义的 Hamburger 组件，用于控制侧边栏的显示隐藏切换按钮
|
|
|
import Hamburger from '@/components/Hamburger'
|
|
|
|
|
|
export default {
|
|
|
// 在组件中注册使用的子组件，这里注册了 Breadcrumb 和 Hamburger 组件，以便在模板中可以直接使用它们
|
|
|
components: {
|
|
|
Breadcrumb,
|
|
|
Hamburger
|
|
|
},
|
|
|
computed: {
|
|
|
// 使用 mapGetters 辅助函数将 Vuex store 中的'sidebar' 和 'avatar' 这两个 getter 映射到组件的计算属性中。
|
|
|
// 这样，在组件中就可以直接通过 this.sidebar 和 this.avatar 来访问对应的 store 中的数据了。
|
|
|
...mapGetters([
|
|
|
'sidebar',
|
|
|
'avatar'
|
|
|
])
|
|
|
},
|
|
|
methods: {
|
|
|
// 定义一个名为 toggleSideBar 的方法，用于触发 Vuex store 中的 ToggleSideBar 这个 action。
|
|
|
// 通常这个 action 会在 Vuex 的相关模块中定义，用于切换侧边栏的打开或关闭状态。
|
|
|
toggleSideBar() {
|
|
|
this.$store.dispatch('ToggleSideBar')
|
|
|
},
|
|
|
// 定义 logout 方法，用于执行用户退出登录操作。
|
|
|
// 首先通过 this.$store.dispatch 触发 Vuex store 中的 LogOut 这个 action，一般 LogOut action 会处理诸如清除用户登录状态、清除相关缓存等逻辑。
|
|
|
// 然后在 Promise 成功回调中（.then 部分），调用 location.reload() 方法来重新加载页面，目的是重新实例化 vue-router 对象，避免一些可能出现的路由相关的 bug。
|
|
|
logout() {
|
|
|
this.$store.dispatch('LogOut').then(() => {
|
|
|
location.reload() // 为了重新实例化vue-router对象 避免bug
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
/* 为类名为 "navbar" 的元素设置样式，以下是具体的样式属性说明 */
|
|
|
.navbar {
|
|
|
/* 设置元素的高度为 50px */
|
|
|
height: 50px;
|
|
|
/* 设置行高为 50px，使得内部文本在垂直方向上居中对齐 */
|
|
|
line-height: 50px;
|
|
|
/* 覆盖默认的边框圆角设置，将其设置为 0px，使其呈现直角样式 */
|
|
|
border-radius: 0px!important;
|
|
|
/* 为类名为 "hamburger-container" 的子元素设置样式，它属于 "navbar" 元素内部的元素 */
|
|
|
.hamburger-container {
|
|
|
/* 设置行高为 58px，用于垂直方向上的布局调整 */
|
|
|
line-height: 58px;
|
|
|
/* 设置高度与父元素（navbar）保持一致，为 50px */
|
|
|
height: 50px;
|
|
|
/* 将元素向左浮动，使其在水平方向上靠左排列 */
|
|
|
float: left;
|
|
|
/* 设置左右内边距为 10px，用于控制内部元素与边界的间距 */
|
|
|
padding: 0 10px;
|
|
|
}
|
|
|
/* 为类名为 "screenfull" 的元素设置样式，它在 "navbar" 元素内部（从样式结构看应该是与全屏相关的功能元素，但代码中未体现其完整使用场景） */
|
|
|
.screenfull {
|
|
|
/* 设置元素的定位为绝对定位，以便可以精确控制其在父元素中的位置 */
|
|
|
position: absolute;
|
|
|
/* 设置元素距离父元素右侧 90px 的位置 */
|
|
|
right: 90px;
|
|
|
/* 设置元素距离父元素顶部 16px 的位置 */
|
|
|
top: 16px;
|
|
|
/* 设置元素的颜色为红色，可能用于特定的提示等功能 */
|
|
|
color: red;
|
|
|
}
|
|
|
/* 为类名为 "avatar-container" 的元素设置样式，它同样是 "navbar" 元素内部用于包裹用户头像及下拉菜单相关内容的容器 */
|
|
|
.avatar-container {
|
|
|
/* 设置高度与父元素（navbar）一致，为 50px */
|
|
|
height: 50px;
|
|
|
/* 将元素设置为行内块级元素，使其可以在水平方向上与其他元素并排显示，同时又能设置宽度、高度等块级元素的属性 */
|
|
|
display: inline-block;
|
|
|
/* 将元素定位在父元素（navbar）的右侧，距离右侧 35px 的位置 */
|
|
|
position: absolute;
|
|
|
right: 35px;
|
|
|
/* 为类名为 "avatar-wrapper" 的子元素设置样式，它是 "avatar-container" 内部进一步包裹头像和图标的容器 */
|
|
|
.avatar-wrapper {
|
|
|
/* 设置鼠标指针样式为手型，提示用户此处可点击操作（一般用于有交互功能的元素） */
|
|
|
cursor: pointer;
|
|
|
/* 设置元素距离顶部 5px 的外边距，用于垂直方向上的位置微调 */
|
|
|
margin-top: 5px;
|
|
|
/* 设置元素为相对定位，以便内部的绝对定位元素可以基于它来进行定位 */
|
|
|
position: relative;
|
|
|
/* 为类名为 "user-avatar" 的子元素（即用户头像图片元素）设置样式 */
|
|
|
.user-avatar {
|
|
|
/* 设置图片的宽度为 40px */
|
|
|
width: 40px;
|
|
|
/* 设置图片的高度为 40px */
|
|
|
height: 40px;
|
|
|
/* 设置图片的边框圆角为 10px，使其呈现圆角矩形的外观 */
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
/* 为类名为 "el-icon-caret-bottom" 的子元素（即下拉箭头图标元素）设置样式 */
|
|
|
.el-icon-caret-bottom {
|
|
|
/* 设置元素为绝对定位，以便精确控制其在父元素（avatar-wrapper）中的位置 */
|
|
|
position: absolute;
|
|
|
/* 设置元素距离父元素右侧 -20px 的位置（负数表示向左偏移） */
|
|
|
right: -20px;
|
|
|
/* 设置元素距离父元素顶部 25px 的位置，用于垂直方向上的定位 */
|
|
|
top: 25px;
|
|
|
/* 设置图标的字体大小为 12px，调整图标大小 */
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
