Navbar.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  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. </div>
  15. <search id="header-search" class="right-menu-item" />
  16. <error-log class="errLog-container right-menu-item hover-effect" />
  17. <screenfull id="screenfull" class="right-menu-item hover-effect" />
  18. <el-tooltip content="字号" effect="dark" placement="bottom">
  19. <size-select id="size-select" class="right-menu-item hover-effect" />
  20. </el-tooltip>
  21. </template>
  22. <el-dropdown
  23. class="avatar-container right-menu-item hover-effect"
  24. trigger="click"
  25. >
  26. <div class="avatar-wrapper">
  27. <img v-if="avatar" :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
  28. <img v-else src="../../assets/images/微信图片_20240925182706.png" 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" width="80%" :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/ai.vue";
  58. import elDragDialog from "@/directive/el-drag-dialog";
  59. export default {
  60. components: {
  61. Breadcrumb,
  62. Hamburger,
  63. ErrorLog,
  64. Screenfull,
  65. SizeSelect,
  66. Search,
  67. ChatBox,
  68. },
  69. directives: { elDragDialog },
  70. data() {
  71. return {
  72. chatDialogVisible: false, // 控制聊天对话框的显示
  73. };
  74. },
  75. computed: {
  76. ...mapGetters(["sidebar", "avatar", "device"]),
  77. },
  78. methods: {
  79. openChatDialog() {
  80. this.$store.state.app.showChat= true;
  81. this.chatDialogVisible = true;
  82. /* this.$router.push({
  83. path: "/knowledge/chatPage/index",
  84. }) */
  85. },
  86. toggleSideBar() {
  87. this.$store.dispatch("app/toggleSideBar");
  88. },
  89. async logout() {
  90. await this.$store.dispatch("user/logout");
  91. this.$router.push(`/login?redirect=${this.$route.fullPath}`);
  92. },
  93. },
  94. };
  95. </script>
  96. <style lang="scss" scoped>
  97. .navbar {
  98. height: 50px;
  99. overflow: hidden;
  100. position: relative;
  101. background: #fff;
  102. /* box-shadow: 0 1px 4px rgba(0,21,41,.08); */
  103. .hamburger-container {
  104. line-height: 46px;
  105. height: 100%;
  106. float: left;
  107. cursor: pointer;
  108. transition: background 0.3s;
  109. -webkit-tap-highlight-color: transparent;
  110. &:hover {
  111. background: rgba(0, 0, 0, 0.025);
  112. }
  113. }
  114. .breadcrumb-container {
  115. float: left;
  116. }
  117. .errLog-container {
  118. display: inline-block;
  119. vertical-align: top;
  120. }
  121. .right-menu {
  122. float: right;
  123. height: 100%;
  124. line-height: 50px;
  125. &:focus {
  126. outline: none;
  127. }
  128. .right-menu-item {
  129. display: inline-block;
  130. padding: 0 8px;
  131. height: 100%;
  132. font-size: 18px;
  133. color: #5a5e66;
  134. vertical-align: text-bottom;
  135. .svg-style {
  136. cursor: pointer;
  137. }
  138. &.hover-effect {
  139. cursor: pointer;
  140. transition: background 0.3s;
  141. &:hover {
  142. background: rgba(0, 0, 0, 0.025);
  143. }
  144. }
  145. }
  146. .avatar-container {
  147. margin-right: 30px;
  148. .avatar-wrapper {
  149. margin-top: 5px;
  150. position: relative;
  151. .user-avatar {
  152. cursor: pointer;
  153. width: 40px;
  154. height: 40px;
  155. border-radius: 10px;
  156. }
  157. .el-icon-caret-bottom {
  158. cursor: pointer;
  159. position: absolute;
  160. right: -20px;
  161. top: 25px;
  162. font-size: 12px;
  163. }
  164. }
  165. }
  166. }
  167. }
  168. </style>