185 lines
5.1 KiB
Vue
185 lines
5.1 KiB
Vue
<template>
|
|
<nav
|
|
class="aui-navbar"
|
|
:class="`aui-navbar--${$store.state.navbarLayoutType}`"
|
|
>
|
|
<div class="aui-navbar__header">
|
|
<h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })">
|
|
<a class="aui-navbar__brand-lg" href="javascript:;">{{
|
|
$t('brand.lg')
|
|
}}</a>
|
|
<a class="aui-navbar__brand-mini" href="javascript:;">{{
|
|
$t('brand.mini')
|
|
}}</a>
|
|
</h1>
|
|
</div>
|
|
<div class="aui-navbar__body">
|
|
<el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
|
|
<el-menu-item
|
|
index="1"
|
|
@click="$store.state.sidebarFold = !$store.state.sidebarFold"
|
|
>
|
|
<svg
|
|
class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch"
|
|
aria-hidden="true"
|
|
>
|
|
<use xlink:href="#icon-outdent"></use>
|
|
</svg>
|
|
</el-menu-item>
|
|
<el-menu-item index="2" @click="refresh()">
|
|
<svg
|
|
class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--refresh"
|
|
aria-hidden="true"
|
|
>
|
|
<use xlink:href="#icon-sync"></use>
|
|
</svg>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
<el-menu class="aui-navbar__menu" mode="horizontal">
|
|
<!-- <el-menu-item index="2">
|
|
<a href="https://www.renren.io/" target="_blank">
|
|
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-earth"></use></svg>
|
|
</a>
|
|
</el-menu-item>
|
|
<el-menu-item index="2">
|
|
<a href="https://gitee.com/renrenio/renren-security" target="_blank">
|
|
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#gitee"></use></svg>
|
|
</a>
|
|
</el-menu-item> -->
|
|
<el-menu-item index="3">
|
|
<el-dropdown
|
|
placement="bottom"
|
|
:show-timeout="0"
|
|
@command="handleCommand"
|
|
>
|
|
<span class="el-dropdown-link">
|
|
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
|
|
<use xlink:href="#icon-earth"></use>
|
|
</svg>
|
|
<!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
|
|
</span>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item :disabled="getLang() === 'zh-CN'" command="toCN"
|
|
>中文</el-dropdown-item
|
|
>
|
|
<el-dropdown-item :disabled="getLang() === 'en'" command="toEN"
|
|
>En</el-dropdown-item
|
|
>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</el-menu-item>
|
|
<el-menu-item index="4" @click="fullscreenHandle()">
|
|
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
|
|
<use xlink:href="#icon-fullscreen"></use>
|
|
</svg>
|
|
</el-menu-item>
|
|
<el-menu-item index="5" class="aui-navbar__avatar">
|
|
<el-dropdown placement="bottom" :show-timeout="0">
|
|
<span class="el-dropdown-link">
|
|
<img src="~@/assets/img/avatar.png" />
|
|
<span>{{ $store.state.user.name }}</span>
|
|
<i class="el-icon-arrow-down"></i>
|
|
</span>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item @click.native="updatePasswordHandle()">{{
|
|
$t('updatePassword.title')
|
|
}}</el-dropdown-item>
|
|
<el-dropdown-item @click.native="logoutHandle()">{{
|
|
$t('logout')
|
|
}}</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</div>
|
|
<!-- 弹窗, 修改密码 -->
|
|
<update-password
|
|
v-if="updatePasswordVisible"
|
|
ref="updatePassword"
|
|
></update-password>
|
|
</nav>
|
|
</template>
|
|
<script>
|
|
import Cookies from 'js-cookie'
|
|
import screenfull from 'screenfull'
|
|
import UpdatePassword from './main-navbar-update-password'
|
|
import { clearLoginInfo } from '@/utils'
|
|
export default {
|
|
inject: ['refresh'],
|
|
data() {
|
|
return {
|
|
updatePasswordVisible: false,
|
|
messageTip: false
|
|
}
|
|
},
|
|
components: {
|
|
UpdatePassword
|
|
},
|
|
methods: {
|
|
// 获取当前语言环境
|
|
getLang() {
|
|
return Cookies.get('language')
|
|
},
|
|
// 切换语言环境
|
|
handleCommand(command) {
|
|
// 切换语言选项时，可能需要手动刷新页面
|
|
switch (command) {
|
|
case 'toCN':
|
|
this.$root.$i18n.locale = 'zh-CN'
|
|
window.navigator.language = 'zh-cn'
|
|
break
|
|
case 'toEN':
|
|
console.log('root', this.$root.$i18n.locale)
|
|
this.$root.$i18n.locale = 'en'
|
|
location.reload()
|
|
window.navigator.language = 'en-US'
|
|
break
|
|
}
|
|
},
|
|
// 全屏
|
|
fullscreenHandle() {
|
|
if (!screenfull.enabled) {
|
|
return this.$message({
|
|
message: this.$t('fullscreen.prompt'),
|
|
type: 'warning',
|
|
duration: 500
|
|
})
|
|
}
|
|
screenfull.toggle()
|
|
},
|
|
// 修改密码
|
|
updatePasswordHandle() {
|
|
this.updatePasswordVisible = true
|
|
this.$nextTick(() => {
|
|
this.$refs.updatePassword.init()
|
|
})
|
|
},
|
|
// 退出
|
|
logoutHandle() {
|
|
this.$confirm(
|
|
this.$t('prompt.info', { handle: this.$t('logout') }),
|
|
this.$t('prompt.title'),
|
|
{
|
|
confirmButtonText: this.$t('confirm'),
|
|
cancelButtonText: this.$t('cancel'),
|
|
type: 'warning'
|
|
}
|
|
)
|
|
.then(() => {
|
|
this.$http
|
|
.post(this.$http.adornUrl('/logout'))
|
|
.then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
return this.$message.error(res.msg)
|
|
}
|
|
clearLoginInfo()
|
|
this.$router.push({ name: 'Login' })
|
|
})
|
|
.catch(() => {})
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
}
|
|
}
|
|
</script>
|