| | |
| | | <template> |
| | | <div class="avue-top"> |
| | | <div class="top-bar__left"> |
| | | <div |
| | | class="avue-breadcrumb" |
| | | :class="[{ 'avue-breadcrumb--active': isCollapse }]" |
| | | v-if="setting.collapse && !isHorizontal" |
| | | > |
| | | <div class="avue-breadcrumb" :class="[{ 'avue-breadcrumb--active': isCollapse }]" |
| | | v-if="setting.collapse && !isHorizontal"> |
| | | <i class="icon-navicon" @click="setCollapse"></i> |
| | | </div> |
| | | </div> |
| | | <div class="top-bar__title"> |
| | | <top-menu ref="topMenu" v-if="setting.menu"></top-menu> |
| | | <!--<top-menu ref="topMenu" v-if="setting.menu"></top-menu>--> |
| | | <top-search class="top-bar__item" v-if="setting.search"></top-search> |
| | | </div> |
| | | <div class="top-bar__right"> |
| | | <div v-if="setting.color" class="top-bar__item"> |
| | | <top-color></top-color> |
| | | </div> |
| | | <div v-if="setting.theme" class="top-bar__item"> |
| | | <top-theme></top-theme> |
| | | </div> |
| | | <div v-if="setting.lock" class="top-bar__item"> |
| | | <top-lock></top-lock> |
| | | </div> |
| | | <div class="top-bar__item"> |
| | | <top-lang></top-lang> |
| | | </div> |
| | | <div class="top-bar__item" v-if="setting.fullscreen"> |
| | | <top-full></top-full> |
| | | </div> |
| | | <div class="top-bar__item" v-if="setting.debug"> |
| | | <top-logs></top-logs> |
| | | <div class="icon-box"> |
| | | <top-lock v-if="setting.lock"/> |
| | | <top-qna /> |
| | | <top-full v-if="setting.fullscreen" title="全屏"/> |
| | | <img class="gateway" @click="jumpMH" src="@/assets/images/mh.png" alt="进入门户" title="进入门户" width="20" height="20"> |
| | | </div> |
| | | <div class="top-user"> |
| | | <img class="top-bar__img" :src="userInfo.avatar" /> |
| | | <img class="top-bar__img" :src="userInfo.avatar " alt=""/> |
| | | |
| | | <el-dropdown> |
| | | <span class="el-dropdown-link"> |
| | | {{ userInfo.real_name }} |
| | |
| | | </span> |
| | | <template #dropdown> |
| | | <el-dropdown-menu> |
| | | <el-dropdown-item> |
| | | <!-- <el-dropdown-item> |
| | | <router-link to="/">{{ $t('navbar.dashboard') }}</router-link> |
| | | </el-dropdown-item> |
| | | </el-dropdown-item>--> |
| | | <el-dropdown-item> |
| | | <router-link to="/info/index">{{ $t('navbar.userinfo') }}</router-link> |
| | | </el-dropdown-item> |
| | | <el-dropdown-item @click="logout" divided |
| | | >{{ $t('navbar.logOut') }} |
| | | <el-dropdown-item @click="logout" divided>{{ $t('navbar.logOut') }} |
| | | </el-dropdown-item> |
| | | </el-dropdown-menu> |
| | | </template> |
| | |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { mapGetters } from 'vuex'; |
| | | import topLock from './top-lock.vue'; |
| | | import topMenu from './top-menu.vue'; |
| | | import topSearch from './top-search.vue'; |
| | | import topTheme from './top-theme.vue'; |
| | | import topLogs from './top-logs.vue'; |
| | | import topColor from './top-color.vue'; |
| | | import topLang from './top-lang.vue'; |
| | | import topFull from './top-full.vue'; |
| | | import topSetting from '../setting.vue'; |
| | | import { mapGetters } from 'vuex' |
| | | import topLock from './top-lock.vue' |
| | | import topMenu from './top-menu.vue' |
| | | import topSearch from './top-search.vue' |
| | | import topTheme from './top-theme.vue' |
| | | import topLogs from './top-logs.vue' |
| | | import topColor from './top-color.vue' |
| | | import topLang from './top-lang.vue' |
| | | import topFull from './top-full.vue' |
| | | import topQna from './top-qna.vue' |
| | | import topSetting from '../setting.vue' |
| | | |
| | | export default { |
| | | components: { |
| | |
| | | topColor, |
| | | topLang, |
| | | topFull, |
| | | topQna, |
| | | topSetting, |
| | | }, |
| | | name: 'top', |
| | | data() { |
| | | return {}; |
| | | data () { |
| | | return {} |
| | | }, |
| | | filters: {}, |
| | | created() {}, |
| | | created () { }, |
| | | computed: { |
| | | ...mapGetters([ |
| | | 'setting', |
| | | 'userInfo', |
| | | 'tagWel', |
| | | 'tagList', |
| | | 'bsTagList', |
| | | 'isCollapse', |
| | | 'tag', |
| | | 'logsLen', |
| | |
| | | ]), |
| | | }, |
| | | methods: { |
| | | setCollapse() { |
| | | this.$store.commit('SET_COLLAPSE'); |
| | | setCollapse () { |
| | | this.$store.commit('SET_COLLAPSE') |
| | | }, |
| | | logout() { |
| | | logout () { |
| | | this.$confirm(this.$t('logoutTip'), this.$t('tip'), { |
| | | confirmButtonText: this.$t('submitText'), |
| | | cancelButtonText: this.$t('cancelText'), |
| | | type: 'warning', |
| | | }).then(() => { |
| | | this.$store.dispatch('LogOut').then(() => { |
| | | this.$router.push({ path: '/login' }); |
| | | }); |
| | | }); |
| | | const env = import.meta.env.VITE_APP_ENV |
| | | const adminUrl = import.meta.env.VITE_APP_DASHBOARD_URL |
| | | env === 'development' ? this.$router.push({ path: '/login' }):window.location.replace(`${adminUrl}#/login`) |
| | | }) |
| | | }) |
| | | }, |
| | | jumpMH () { |
| | | const adminUrl = import.meta.env.VITE_APP_DASHBOARD_URL |
| | | window.location.href = `${adminUrl}#/gatewayPage` |
| | | }, |
| | | }, |
| | | }; |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped></style> |
| | | <style lang="scss" scoped> |
| | | .avue-top { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | padding: 0 15px; |
| | | height: 50px; |
| | | background-color: #fff; |
| | | box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); |
| | | } |
| | | |
| | | .top-bar__left { |
| | | flex: 0 0 auto; |
| | | } |
| | | |
| | | .top-bar__title { |
| | | flex: 1; |
| | | display: flex; |
| | | align-items: center; |
| | | height: pxToVh(80); |
| | | } |
| | | |
| | | .top-bar__right { |
| | | flex: 0 0 auto; |
| | | display: flex !important; |
| | | align-items: center; |
| | | height: 100%; |
| | | |
| | | .icon-box{ |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 0 20px; |
| | | .gateway{ |
| | | width: 25px; |
| | | height: 25px; |
| | | } |
| | | >*{ |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .top-bar__item { |
| | | margin-right: 15px; |
| | | display: inline-block !important; |
| | | } |
| | | |
| | | .top-user { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .top-bar__img { |
| | | width: 32px; |
| | | height: 32px; |
| | | border-radius: 50%; |
| | | margin-right: 10px; |
| | | } |
| | | |
| | | .el-dropdown-link { |
| | | cursor: pointer; |
| | | color: #606266; |
| | | } |
| | | |
| | | .el-dropdown-link:hover { |
| | | color: #409EFF; |
| | | } |
| | | </style> |