Navbar.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. <template>
  2. <div class="navbar">
  3. <hamburger
  4. id="hamburger-container"
  5. :is-active="sidebar.opened"
  6. class="hamburger-container"
  7. @toggleClick="toggleSideBar"
  8. />
  9. <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
  10. <div class="right-menu">
  11. <template v-if="device !== 'mobile'">
  12. <div class="right-menu-item">
  13. <img src="../../assets/images/人工智能.png" alt="" style="cursor: pointer; margin-top: 14px;width: 25px;height: 25px" @click="openChatDialog">
  14. <!-- <svg-icon className="svg-style" size="120" icon-class="AI模块" /> -->
  15. </div>
  16. <search id="header-search" class="right-menu-item" />
  17. <error-log class="errLog-container right-menu-item hover-effect" />
  18. <screenfull id="screenfull" class="right-menu-item hover-effect" />
  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. <el-dropdown
  24. class="avatar-container right-menu-item hover-effect"
  25. trigger="click"
  26. >
  27. <div class="avatar-wrapper">
  28. <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
  29. <i class="el-icon-caret-bottom" />
  30. </div>
  31. <el-dropdown-menu slot="dropdown">
  32. <router-link to="/profile/index">
  33. <el-dropdown-item>用户资料</el-dropdown-item>
  34. </router-link>
  35. <!-- <router-link to="/">
  36. <el-dropdown-item>用户首页</el-dropdown-item>
  37. </router-link> -->
  38. <el-dropdown-item divided @click.native="logout">
  39. <span style="display: block">退出登录</span>
  40. </el-dropdown-item>
  41. </el-dropdown-menu>
  42. </el-dropdown>
  43. </div>
  44. <el-dialog :close-on-click-modal="false" top="20px" :visible.sync="chatDialogVisible" append-to-body v-el-drag-dialog>
  45. <ChatBox />
  46. </el-dialog>
  47. </div>
  48. </template>
  49. <script>
  50. import { mapGetters } from "vuex";
  51. import Breadcrumb from "@/components/Breadcrumb";
  52. import Hamburger from "@/components/Hamburger";
  53. import ErrorLog from "@/components/ErrorLog";
  54. import Screenfull from "@/components/Screenfull";
  55. import SizeSelect from "@/components/SizeSelect";
  56. import Search from "@/components/HeaderSearch";
  57. import ChatBox from "@/components/webAi/index.vue";
  58. export default {
  59. components: {
  60. Breadcrumb,
  61. Hamburger,
  62. ErrorLog,
  63. Screenfull,
  64. SizeSelect,
  65. Search,
  66. ChatBox,
  67. },
  68. data() {
  69. return {
  70. chatDialogVisible: false, // 控制聊天对话框的显示
  71. };
  72. },
  73. computed: {
  74. ...mapGetters(["sidebar", "avatar", "device"]),
  75. },
  76. methods: {
  77. openChatDialog() {
  78. this.chatDialogVisible = true;
  79. },
  80. toggleSideBar() {
  81. this.$store.dispatch("app/toggleSideBar");
  82. },
  83. async logout() {
  84. await this.$store.dispatch("user/logout");
  85. this.$router.push(`/login?redirect=${this.$route.fullPath}`);
  86. },
  87. },
  88. };
  89. </script>
  90. <style lang="scss" scoped>
  91. @import "~@/styles/variables.scss";
  92. .navbar {
  93. height: 50px;
  94. overflow: hidden;
  95. position: relative;
  96. background: $header_bg;
  97. /* box-shadow: 0 1px 4px rgba(0,21,41,.08); */
  98. .hamburger-container {
  99. line-height: 46px;
  100. height: 100%;
  101. float: left;
  102. cursor: pointer;
  103. transition: background 0.3s;
  104. -webkit-tap-highlight-color: transparent;
  105. &:hover {
  106. background: rgba(0, 0, 0, 0.025);
  107. }
  108. }
  109. .breadcrumb-container {
  110. float: left;
  111. }
  112. .errLog-container {
  113. display: inline-block;
  114. vertical-align: top;
  115. }
  116. .right-menu {
  117. float: right;
  118. height: 100%;
  119. line-height: 50px;
  120. &:focus {
  121. outline: none;
  122. }
  123. .right-menu-item {
  124. display: inline-block;
  125. padding: 0 8px;
  126. height: 100%;
  127. font-size: 18px;
  128. color: #5a5e66;
  129. vertical-align: text-bottom;
  130. .svg-style {
  131. cursor: pointer;
  132. }
  133. &.hover-effect {
  134. cursor: pointer;
  135. transition: background 0.3s;
  136. &:hover {
  137. background: rgba(0, 0, 0, 0.025);
  138. }
  139. }
  140. }
  141. .avatar-container {
  142. margin-right: 30px;
  143. .avatar-wrapper {
  144. margin-top: 5px;
  145. position: relative;
  146. .user-avatar {
  147. cursor: pointer;
  148. width: 40px;
  149. height: 40px;
  150. border-radius: 10px;
  151. }
  152. .el-icon-caret-bottom {
  153. cursor: pointer;
  154. position: absolute;
  155. right: -20px;
  156. top: 25px;
  157. font-size: 12px;
  158. }
  159. }
  160. }
  161. }
  162. }
  163. </style>