123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183 |
- <template>
- <div class="navbar">
- <hamburger
- id="hamburger-container"
- :is-active="sidebar.opened"
- class="hamburger-container"
- @toggleClick="toggleSideBar"
- />
- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
- <div class="right-menu">
- <template v-if="device !== 'mobile'">
- <div class="right-menu-item">
- <img src="../../assets/images/人工智能.png" alt="" style="cursor: pointer; margin-top: 14px;width: 25px;height: 25px" @click="openChatDialog">
- <!-- <svg-icon className="svg-style" size="120" icon-class="AI模块" /> -->
- </div>
- <search id="header-search" class="right-menu-item" />
- <error-log class="errLog-container right-menu-item hover-effect" />
- <screenfull id="screenfull" class="right-menu-item hover-effect" />
- <el-tooltip content="字号" effect="dark" placement="bottom">
- <size-select id="size-select" class="right-menu-item hover-effect" />
- </el-tooltip>
- </template>
- <el-dropdown
- class="avatar-container right-menu-item hover-effect"
- trigger="click"
- >
- <div class="avatar-wrapper">
- <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
- <i class="el-icon-caret-bottom" />
- </div>
- <el-dropdown-menu slot="dropdown">
- <router-link to="/profile/index">
- <el-dropdown-item>用户资料</el-dropdown-item>
- </router-link>
- <!-- <router-link to="/">
- <el-dropdown-item>用户首页</el-dropdown-item>
- </router-link> -->
- <el-dropdown-item divided @click.native="logout">
- <span style="display: block">退出登录</span>
- </el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- </div>
- <el-dialog :close-on-click-modal="false" top="20px" :visible.sync="chatDialogVisible" append-to-body v-el-drag-dialog>
- <ChatBox />
- </el-dialog>
- </div>
- </template>
- <script>
- import { mapGetters } from "vuex";
- import Breadcrumb from "@/components/Breadcrumb";
- import Hamburger from "@/components/Hamburger";
- import ErrorLog from "@/components/ErrorLog";
- import Screenfull from "@/components/Screenfull";
- import SizeSelect from "@/components/SizeSelect";
- import Search from "@/components/HeaderSearch";
- import ChatBox from "@/components/webAi/index.vue";
- export default {
- components: {
- Breadcrumb,
- Hamburger,
- ErrorLog,
- Screenfull,
- SizeSelect,
- Search,
- ChatBox,
- },
- data() {
- return {
- chatDialogVisible: false, // 控制聊天对话框的显示
- };
- },
- computed: {
- ...mapGetters(["sidebar", "avatar", "device"]),
- },
- methods: {
- openChatDialog() {
- this.chatDialogVisible = true;
- },
- toggleSideBar() {
- this.$store.dispatch("app/toggleSideBar");
- },
- async logout() {
- await this.$store.dispatch("user/logout");
- this.$router.push(`/login?redirect=${this.$route.fullPath}`);
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- @import "~@/styles/variables.scss";
- .navbar {
- height: 50px;
- overflow: hidden;
- position: relative;
- background: $header_bg;
- /* box-shadow: 0 1px 4px rgba(0,21,41,.08); */
- .hamburger-container {
- line-height: 46px;
- height: 100%;
- float: left;
- cursor: pointer;
- transition: background 0.3s;
- -webkit-tap-highlight-color: transparent;
- &:hover {
- background: rgba(0, 0, 0, 0.025);
- }
- }
- .breadcrumb-container {
- float: left;
- }
- .errLog-container {
- display: inline-block;
- vertical-align: top;
- }
- .right-menu {
- float: right;
- height: 100%;
- line-height: 50px;
- &:focus {
- outline: none;
- }
- .right-menu-item {
- display: inline-block;
- padding: 0 8px;
- height: 100%;
- font-size: 18px;
- color: #5a5e66;
- vertical-align: text-bottom;
- .svg-style {
- cursor: pointer;
-
- }
- &.hover-effect {
- cursor: pointer;
- transition: background 0.3s;
- &:hover {
- background: rgba(0, 0, 0, 0.025);
- }
- }
- }
- .avatar-container {
- margin-right: 30px;
- .avatar-wrapper {
- margin-top: 5px;
- position: relative;
- .user-avatar {
- cursor: pointer;
- width: 40px;
- height: 40px;
- border-radius: 10px;
- }
- .el-icon-caret-bottom {
- cursor: pointer;
- position: absolute;
- right: -20px;
- top: 25px;
- font-size: 12px;
- }
- }
- }
- }
- }
- </style>
|