| | |
| | | <template> |
| | | <div class="avue-top"> |
| | | <div class="top-bar__left"> |
| | | <div class="avue-breadcrumb" |
| | | <div |
| | | class="avue-breadcrumb" |
| | | :class="[{ 'avue-breadcrumb--active': isCollapse }]" |
| | | v-if="showCollapse"> |
| | | <i class="icon-navicon" |
| | | @click="setCollapse"></i> |
| | | v-if="showCollapse" |
| | | > |
| | | <i class="icon-navicon" @click="setCollapse"></i> |
| | | </div> |
| | | </div> |
| | | <div class="top-bar__title"> |
| | | <div class="top-bar__item top-bar__item--show" |
| | | v-if="showMenu"> |
| | | <div class="top-bar__item top-bar__item--show" v-if="showMenu"> |
| | | <top-menu ref="topMenu"></top-menu> |
| | | </div> |
| | | <span class="top-bar__item" |
| | | v-if="showSearch"> |
| | | <span class="top-bar__item" v-if="showSearch"> |
| | | <top-search></top-search> |
| | | </span> |
| | | </div> |
| | | <div class="top-bar__right"> |
| | | <el-tooltip v-if="showColor" |
| | | <el-tooltip |
| | | v-if="showColor" |
| | | effect="dark" |
| | | :content="$t('navbar.color')" |
| | | placement="bottom"> |
| | | placement="bottom" |
| | | > |
| | | <div class="top-bar__item"> |
| | | <top-color></top-color> |
| | | </div> |
| | | </el-tooltip> |
| | | <el-tooltip v-if="showDebug" |
| | | <el-tooltip |
| | | v-if="showDebug" |
| | | effect="dark" |
| | | :content="logsFlag?$t('navbar.bug'):logsLen+$t('navbar.bugs')" |
| | | placement="bottom"> |
| | | placement="bottom" |
| | | > |
| | | <div class="top-bar__item"> |
| | | <top-logs></top-logs> |
| | | </div> |
| | | </el-tooltip> |
| | | <el-tooltip v-if="showLock" |
| | | <el-tooltip |
| | | v-if="showLock" |
| | | effect="dark" |
| | | :content="$t('navbar.lock')" |
| | | placement="bottom"> |
| | | placement="bottom" |
| | | > |
| | | <div class="top-bar__item"> |
| | | <top-lock></top-lock> |
| | | </div> |
| | | </el-tooltip> |
| | | <el-tooltip v-if="showTheme" |
| | | <el-tooltip |
| | | v-if="showTheme" |
| | | effect="dark" |
| | | :content="$t('navbar.theme')" |
| | | placement="bottom"> |
| | | placement="bottom" |
| | | > |
| | | <div class="top-bar__item top-bar__item--show"> |
| | | <top-theme></top-theme> |
| | | </div> |
| | | </el-tooltip> |
| | | <el-tooltip effect="dark" |
| | | <el-tooltip |
| | | v-if="false" |
| | | effect="dark" |
| | | :content="$t('navbar.notice')" |
| | | placement="bottom"> |
| | | placement="bottom" |
| | | > |
| | | <div class="top-bar__item top-bar__item--show"> |
| | | <top-notice></top-notice> |
| | | </div> |
| | | </el-tooltip> |
| | | <el-tooltip effect="dark" |
| | | :content="$t('navbar.language')" |
| | | placement="bottom"> |
| | | <el-tooltip effect="dark" :content="$t('navbar.language')" placement="bottom"> |
| | | <div class="top-bar__item top-bar__item--show"> |
| | | <top-lang></top-lang> |
| | | </div> |
| | | </el-tooltip> |
| | | <el-tooltip v-if="showFullScren" |
| | | <el-tooltip |
| | | v-if="showFullScren" |
| | | effect="dark" |
| | | :content="isFullScren?$t('navbar.screenfullF'):$t('navbar.screenfull')" |
| | | placement="bottom"> |
| | | placement="bottom" |
| | | > |
| | | <div class="top-bar__item"> |
| | | <i :class="isFullScren?'icon-tuichuquanping':'icon-quanping'" |
| | | @click="handleScreen"></i> |
| | | <i |
| | | :class="isFullScren?'icon-tuichuquanping':'icon-quanping'" |
| | | @click="handleScreen" |
| | | ></i> |
| | | </div> |
| | | </el-tooltip> |
| | | <img class="top-bar__img" |
| | | :src="userInfo.avatar"> |
| | | <img class="top-bar__img" :src="userInfo.avatar" /> |
| | | <el-dropdown> |
| | | <span class="el-dropdown-link"> |
| | | {{userInfo.userName}} |
| | |
| | | <el-dropdown-item> |
| | | <router-link to="/info/index">{{$t('navbar.userinfo')}}</router-link> |
| | | </el-dropdown-item> |
| | | <el-dropdown-item @click.native="logout" |
| | | divided>{{$t('navbar.logOut')}} |
| | | </el-dropdown-item> |
| | | <el-dropdown-item @click.native="logout" divided>{{$t('navbar.logOut')}}</el-dropdown-item> |
| | | </el-dropdown-menu> |
| | | </el-dropdown> |
| | | </div> |
| | |
| | | </template> |
| | | <script> |
| | | import {resetRouter} from '@/router/router' |
| | | import {mapGetters, mapState} from "vuex"; |
| | | import {fullscreenToggel, listenfullscreen} from "@/util/util"; |
| | | import topLock from "./top-lock"; |
| | | import topMenu from "./top-menu"; |
| | | import topSearch from "./top-search"; |
| | | import topTheme from "./top-theme"; |
| | | import topLogs from "./top-logs"; |
| | | import topColor from "./top-color"; |
| | | import { mapGetters, mapState } from "vuex" |
| | | import { fullscreenToggel, listenfullscreen } from "@/util/util" |
| | | import topLock from "./top-lock" |
| | | import topMenu from "./top-menu" |
| | | import topSearch from "./top-search" |
| | | import topTheme from "./top-theme" |
| | | import topLogs from "./top-logs" |
| | | import topColor from "./top-color" |
| | | import topNotice from './top-notice' |
| | | import topLang from "./top-lang"; |
| | | import topLang from "./top-lang" |
| | | |
| | | export default { |
| | | components: { |
| | |
| | | }, |
| | | name: "top", |
| | | data() { |
| | | return {}; |
| | | return {} |
| | | }, |
| | | filters: {}, |
| | | created() { |
| | | }, |
| | | mounted() { |
| | | listenfullscreen(this.setScreen); |
| | | listenfullscreen(this.setScreen) |
| | | }, |
| | | computed: { |
| | | ...mapState({ |
| | |
| | | }, |
| | | methods: { |
| | | handleScreen() { |
| | | fullscreenToggel(); |
| | | fullscreenToggel() |
| | | }, |
| | | setCollapse() { |
| | | this.$store.commit("SET_COLLAPSE"); |
| | | this.$store.commit("SET_COLLAPSE") |
| | | }, |
| | | setScreen() { |
| | | this.$store.commit("SET_FULLSCREN"); |
| | | this.$store.commit("SET_FULLSCREN") |
| | | }, |
| | | logout() { |
| | | this.$confirm(this.$t("logoutTip"), this.$t("tip"), { |
| | |
| | | type: "warning" |
| | | }).then(() => { |
| | | this.$store.dispatch("LogOut").then(() => { |
| | | resetRouter(); |
| | | this.$router.push({path: "/login"}); |
| | | }); |
| | | }); |
| | | resetRouter() |
| | | this.$router.push({ path: "/login" }) |
| | | }) |
| | | }) |
| | | } |
| | | } |
| | | }; |