index.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <template>
  2. <div class="nav-bar-container">
  3. <el-row :gutter="15">
  4. <el-col :xs="4" :sm="12" :md="12" :lg="12" :xl="12">
  5. <div class="left-panel">
  6. <i
  7. :class="collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
  8. :title="collapse ? '展开' : '收起'"
  9. class="fold-unfold"
  10. @click="handleCollapse"
  11. ></i>
  12. <breadcrumb class="hidden-xs-only" />
  13. </div>
  14. </el-col>
  15. <el-col :xs="20" :sm="12" :md="12" :lg="12" :xl="12">
  16. <div class="right-panel">
  17. <error-log></error-log>
  18. <full-screen-bar @refresh="refreshRoute"></full-screen-bar>
  19. <theme-bar class="hidden-xs-only"></theme-bar>
  20. <vab-icon
  21. title="重载所有路由"
  22. :pulse="pulse"
  23. :icon="['fas', 'redo']"
  24. @click="refreshRoute"
  25. ></vab-icon>
  26. <avatar></avatar>
  27. <!-- <vab-icon
  28. title="退出系统"
  29. :icon="['fas', 'sign-out-alt']"
  30. @click="logout"
  31. />-->
  32. </div>
  33. </el-col>
  34. </el-row>
  35. </div>
  36. </template>
  37. <script>
  38. import { mapGetters } from "vuex";
  39. import {
  40. Avatar,
  41. Breadcrumb,
  42. ErrorLog,
  43. FullScreenBar,
  44. ThemeBar,
  45. } from "@/layouts/components";
  46. export default {
  47. name: "NavBar",
  48. components: {
  49. Avatar,
  50. Breadcrumb,
  51. ErrorLog,
  52. FullScreenBar,
  53. ThemeBar,
  54. },
  55. data() {
  56. return {
  57. pulse: false,
  58. };
  59. },
  60. computed: {
  61. ...mapGetters({
  62. collapse: "settings/collapse",
  63. visitedRoutes: "tagsBar/visitedRoutes",
  64. device: "settings/device",
  65. routes: "routes/routes",
  66. }),
  67. },
  68. methods: {
  69. handleCollapse() {
  70. this.$store.dispatch("settings/changeCollapse");
  71. },
  72. async refreshRoute() {
  73. this.$baseEventBus.$emit("reloadRouterView");
  74. this.pulse = true;
  75. setTimeout(() => {
  76. this.pulse = false;
  77. }, 1000);
  78. },
  79. },
  80. };
  81. </script>
  82. <style lang="scss" scoped>
  83. .nav-bar-container {
  84. position: relative;
  85. height: $base-nav-bar-height;
  86. padding-right: $base-padding;
  87. padding-left: $base-padding;
  88. overflow: hidden;
  89. user-select: none;
  90. background: $base-color-white;
  91. box-shadow: $base-box-shadow;
  92. .left-panel {
  93. height: $base-nav-bar-height;
  94. display: flex;
  95. align-items: center;
  96. justify-items: center;
  97. .fold-unfold {
  98. font-size: 20px;
  99. color: $base-color-gray;
  100. cursor: pointer;
  101. }
  102. ::v-deep {
  103. .breadcrumb-container {
  104. margin-left: 10px;
  105. }
  106. }
  107. }
  108. .right-panel {
  109. height: $base-nav-bar-height;
  110. display: flex;
  111. align-content: center;
  112. align-items: center;
  113. justify-content: flex-end;
  114. ::v-deep {
  115. svg {
  116. width: 1em;
  117. height: 1em;
  118. margin-right: 15px;
  119. font-size: $base-font-size-big;
  120. color: $base-color-gray;
  121. cursor: pointer;
  122. fill: $base-color-gray;
  123. }
  124. button {
  125. svg {
  126. margin-right: 0;
  127. color: $base-color-white;
  128. cursor: pointer;
  129. fill: $base-color-white;
  130. }
  131. }
  132. .el-badge {
  133. margin-right: 15px;
  134. }
  135. }
  136. }
  137. }
  138. </style>