Newer
Older
DH_Apicture / src / layout / components / Navbar.vue
@zhangqy zhangqy on 29 Nov 4 KB first commit
  1. <template>
  2. <div class="navbar">
  3. <hamburger
  4. id="hamburger-container"
  5. :is-active="appStore.sidebar.opened"
  6. class="hamburger-container"
  7. @toggleClick="toggleSideBar"
  8. />
  9. <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />
  10. <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
  11.  
  12. <div class="right-menu">
  13. <template v-if="appStore.device !== 'mobile'">
  14. <header-search id="header-search" class="right-menu-item" />
  15. <screenfull id="screenfull" class="right-menu-item hover-effect" />
  16. <el-tooltip content="返回首页" effect="dark" placement="bottom">
  17. <back-home id="screenfull" class="right-menu-item hover-effect"></back-home>
  18. </el-tooltip>
  19. <el-tooltip content="布局大小" effect="dark" placement="bottom">
  20. <size-select id="size-select" class="right-menu-item hover-effect" />
  21. </el-tooltip>
  22. </template>
  23. <div class="avatar-container">
  24. <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
  25. <div class="avatar-wrapper">
  26. <img :src="userStore.userInfo.avatar" class="user-avatar" />
  27. <el-icon><caret-bottom /></el-icon>
  28. </div>
  29. <template #dropdown>
  30. <el-dropdown-menu>
  31. <router-link to="/user/profile">
  32. <el-dropdown-item>个人中心</el-dropdown-item>
  33. </router-link>
  34. <el-dropdown-item command="setLayout">
  35. <span>布局设置</span>
  36. </el-dropdown-item>
  37. <el-dropdown-item divided command="logout">
  38. <span>退出登录</span>
  39. </el-dropdown-item>
  40. </el-dropdown-menu>
  41. </template>
  42. </el-dropdown>
  43. </div>
  44. </div>
  45. </div>
  46. </template>
  47.  
  48. <script setup>
  49. import { ElMessageBox } from 'element-plus';
  50. import Breadcrumb from '@/components/Breadcrumb';
  51. import TopNav from '@/components/TopNav';
  52. import Hamburger from '@/components/Hamburger';
  53. import BackHome from '@/components/BackHome';
  54. import Screenfull from '@/components/Screenfull';
  55. import SizeSelect from '@/components/SizeSelect';
  56. import HeaderSearch from '@/components/HeaderSearch';
  57. import useAppStore from '@/store/modules/app';
  58. import useUserStore from '@/store/modules/user';
  59. import useSettingsStore from '@/store/modules/settings';
  60.  
  61. const appStore = useAppStore();
  62. const userStore = useUserStore();
  63. const settingsStore = useSettingsStore();
  64.  
  65. function toggleSideBar() {
  66. appStore.toggleSideBar();
  67. }
  68.  
  69. function handleCommand(command) {
  70. switch (command) {
  71. case 'setLayout':
  72. setLayout();
  73. break;
  74. case 'logout':
  75. logout();
  76. break;
  77. default:
  78. break;
  79. }
  80. }
  81.  
  82. function logout() {
  83. ElMessageBox.confirm('确定注销并退出系统吗?', '提示', {
  84. confirmButtonText: '确定',
  85. cancelButtonText: '取消',
  86. type: 'warning',
  87. })
  88. .then(() => {
  89. userStore.logOut().then(() => {
  90. location.href = '/';
  91. });
  92. })
  93. .catch(() => {});
  94. }
  95.  
  96. const emits = defineEmits(['setLayout']);
  97. function setLayout() {
  98. emits('setLayout');
  99. }
  100. </script>
  101.  
  102. <style lang="scss" scoped>
  103. .navbar {
  104. height: 50px;
  105. overflow: hidden;
  106. position: relative;
  107. background: #fff;
  108. box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  109.  
  110. .hamburger-container {
  111. line-height: 46px;
  112. height: 100%;
  113. float: left;
  114. cursor: pointer;
  115. transition: background 0.3s;
  116. -webkit-tap-highlight-color: transparent;
  117.  
  118. &:hover {
  119. background: rgba(0, 0, 0, 0.025);
  120. }
  121. }
  122.  
  123. .breadcrumb-container {
  124. float: left;
  125. }
  126.  
  127. .topmenu-container {
  128. position: absolute;
  129. left: 50px;
  130. }
  131.  
  132. .errLog-container {
  133. display: inline-block;
  134. vertical-align: top;
  135. }
  136.  
  137. .right-menu {
  138. float: right;
  139. height: 100%;
  140. line-height: 50px;
  141. display: flex;
  142.  
  143. &:focus {
  144. outline: none;
  145. }
  146.  
  147. .right-menu-item {
  148. display: inline-block;
  149. padding: 0 8px;
  150. height: 100%;
  151. font-size: 18px;
  152. color: #5a5e66;
  153. vertical-align: text-bottom;
  154.  
  155. &.hover-effect {
  156. cursor: pointer;
  157. transition: background 0.3s;
  158.  
  159. &:hover {
  160. background: rgba(0, 0, 0, 0.025);
  161. }
  162. }
  163. }
  164.  
  165. .avatar-container {
  166. margin-right: 40px;
  167.  
  168. .avatar-wrapper {
  169. margin-top: 5px;
  170. position: relative;
  171.  
  172. .user-avatar {
  173. cursor: pointer;
  174. width: 40px;
  175. height: 40px;
  176. border-radius: 10px;
  177. }
  178.  
  179. i {
  180. cursor: pointer;
  181. position: absolute;
  182. right: -20px;
  183. top: 25px;
  184. font-size: 12px;
  185. }
  186. }
  187. }
  188. }
  189. }
  190. </style>