441 lines
7.5 KiB
Vue
441 lines
7.5 KiB
Vue
<template>
|
|
<div class="navbar">
|
|
<div class="left-menu">
|
|
<mf-icon
|
|
:class="['left-collapse', { isCollapse: isCollapse }]"
|
|
cursor="pointer"
|
|
@click="$store.dispatch('main/toggleSideBar')"
|
|
value="icon-shrink" />
|
|
<div class="logo">
|
|
<div
|
|
class="logo-wrap"
|
|
@click="handleBackHome">
|
|
<a-image
|
|
v-if="logoUrl"
|
|
height="40px"
|
|
width="150px"
|
|
:preview="false"
|
|
:src="logoUrl" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right-menu">
|
|
<div
|
|
class="right-menu-item"
|
|
v-if="!userInfo.username">
|
|
<mf-button
|
|
class="login"
|
|
type="primary"
|
|
@click="openLogin">
|
|
{{ $t('common.login') }}
|
|
</mf-button>
|
|
</div>
|
|
<div class="right-menu-item language">
|
|
<a-dropdown @select="handleSelect">
|
|
<mf-button type="text">
|
|
{{ localeName }}
|
|
<icon-down />
|
|
</mf-button>
|
|
<template #content>
|
|
<a-doption
|
|
v-for="(name, code) in localeNames"
|
|
:key="code"
|
|
:value="code">
|
|
{{ name }}
|
|
</a-doption>
|
|
</template>
|
|
</a-dropdown>
|
|
</div>
|
|
<div
|
|
class="right-menu-item user"
|
|
v-if="userInfo.username"
|
|
@click="showUser">
|
|
<span>
|
|
<a-image
|
|
class="wallet"
|
|
:preview="false"
|
|
:width="16"
|
|
fit="cover"
|
|
src="/images/nav/img_money@2x.png" />
|
|
{{ userInfo.balance || '0.00' }}
|
|
</span>
|
|
<mf-avatar
|
|
class="user-avatar"
|
|
:modelValue="myAvatar"
|
|
:name="userInfo.username"
|
|
:size="25" />
|
|
</div>
|
|
<div
|
|
class="right-menu-item logout"
|
|
v-if="userInfo.username">
|
|
<mf-button
|
|
type="text"
|
|
@click="logout">
|
|
{{ $t('common.logout') }}
|
|
</mf-button>
|
|
</div>
|
|
</div>
|
|
|
|
<Login
|
|
:register="!$datas.isEmpty(inviteCode)"
|
|
:visible="showLogin"
|
|
@open="openLogin"
|
|
@cancel="cancelLogin" />
|
|
<User
|
|
@cancel="userVisible = false"
|
|
:visible="userVisible" />
|
|
|
|
<mf-forbidden :visible="showForbidden" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
/**
|
|
* 头部导航栏
|
|
*/
|
|
import { mapGetters, mapState } from 'vuex'
|
|
import cloneDeep from 'lodash-es/cloneDeep'
|
|
import { constantRoutes } from '@/router/index.js'
|
|
import Login from './Login.vue'
|
|
import i18n, { LOCALE_NAMES } from '@/lang/i18n'
|
|
import User from './User.vue'
|
|
|
|
export default {
|
|
name: 'nav-bar',
|
|
data() {
|
|
return {
|
|
changePwdVisible: false,
|
|
themeList: [
|
|
{
|
|
value: '',
|
|
label: '亮色模式'
|
|
},
|
|
{
|
|
value: 'dark',
|
|
label: '暗黑模式'
|
|
}
|
|
],
|
|
publishVisible: false,
|
|
inviteCode: this.$route.query?.inviteCode,
|
|
userVisible: false,
|
|
logoUrl: null
|
|
}
|
|
},
|
|
components: { Login, User },
|
|
computed: {
|
|
demoEnv() {
|
|
return import.meta.env.MODE === 'demo'
|
|
},
|
|
localeNames() {
|
|
return LOCALE_NAMES
|
|
},
|
|
localeName() {
|
|
return LOCALE_NAMES[this.lang] || 'English'
|
|
},
|
|
...mapGetters([
|
|
'theme',
|
|
'permission_routes',
|
|
'lang',
|
|
'showForbidden',
|
|
'showLogin',
|
|
'sidebar'
|
|
]),
|
|
// 用户信息
|
|
userInfo() {
|
|
return this.$store.state.user.userInfo || {}
|
|
},
|
|
myAvatar() {
|
|
let userInfo = this.userInfo || {}
|
|
return userInfo.avatar || '/images/avatar.svg'
|
|
},
|
|
isCollapse() {
|
|
return !this.sidebar.opened
|
|
},
|
|
selectedKeys() {
|
|
return [this.$route.name]
|
|
},
|
|
menuItems() {
|
|
return [
|
|
{
|
|
value: 'index',
|
|
label: this.$t('route.index')
|
|
},
|
|
{
|
|
value: 'projects',
|
|
label: this.$t('route.projects')
|
|
},
|
|
{
|
|
value: 'markets',
|
|
label: this.$t('route.markets')
|
|
},
|
|
{
|
|
value: 'about',
|
|
label: this.$t('route.about')
|
|
},
|
|
{
|
|
value: 'help',
|
|
label: this.$t('route.help')
|
|
}
|
|
]
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.inviteCode) {
|
|
this.openLogin()
|
|
}
|
|
this.getLogo()
|
|
},
|
|
methods: {
|
|
openLogin() {
|
|
this.$store.dispatch('main/setShowLogin', true)
|
|
},
|
|
cancelLogin() {
|
|
this.$store.dispatch('main/setShowLogin', false)
|
|
},
|
|
getLogo() {
|
|
this.$axios({
|
|
url: 'api/user/getPortalLogo',
|
|
method: 'GET'
|
|
})
|
|
.then((res) => {
|
|
if (res.data) {
|
|
this.logoUrl = res.data
|
|
} else {
|
|
this.logoUrl = '/images/logo.png'
|
|
}
|
|
})
|
|
.catch((_) => {
|
|
this.logoUrl = '/images/logo.png'
|
|
})
|
|
},
|
|
showUser() {
|
|
this.userVisible = true
|
|
},
|
|
publishProject() {
|
|
if (this.userInfo.username) {
|
|
this.$router.push('/project-publish')
|
|
// this.publishVisible = true
|
|
} else {
|
|
this.openLogin()
|
|
}
|
|
},
|
|
handleSelect(value) {
|
|
if (value != this.lang) {
|
|
this.$store.dispatch('main/setLanguage', value)
|
|
i18n.global.locale = value
|
|
}
|
|
},
|
|
logout() {
|
|
this.$store.dispatch('user/logout2').then((_) => {
|
|
this.$router.replace('/')
|
|
})
|
|
},
|
|
menuItemClick(key) {
|
|
this.$router.push({ name: key })
|
|
},
|
|
handleBackHome() {
|
|
this.$router.push('/')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.navbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: content-box;
|
|
padding-left: 30px;
|
|
padding-right: 30px;
|
|
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
|
|
&-collapse {
|
|
display: none;
|
|
transition: 0.25s;
|
|
|
|
&.isCollapse {
|
|
transform: rotate(-180deg);
|
|
}
|
|
}
|
|
|
|
&-menu {
|
|
padding-left: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 60px;
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
cursor: pointer;
|
|
color: var(--color-text-1);
|
|
|
|
&-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-menu {
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
flex: 1;
|
|
|
|
&-item {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 60px;
|
|
margin-right: 12px;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&.language {
|
|
.mf-button {
|
|
font-size: 14px;
|
|
color: #999999;
|
|
background-color: transparent;
|
|
&:hover {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.logout {
|
|
.mf-button {
|
|
background-color: transparent;
|
|
|
|
&:hover {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
.login {
|
|
width: 100px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&.user {
|
|
width: 150px;
|
|
color: rgb(var(--primary-6));
|
|
border: 2px solid transparent;
|
|
height: 32px;
|
|
border: 1px solid #5c5d68;
|
|
background: #26272e;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-left: 16px;
|
|
padding-right: 4px;
|
|
cursor: pointer;
|
|
|
|
span {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-grow: 1;
|
|
.arco-image {
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-point-name {
|
|
color: var(--color-text-3);
|
|
}
|
|
|
|
.user-info {
|
|
width: 220px;
|
|
margin-left: -8px;
|
|
|
|
.arco-dropdown-option {
|
|
.mf-divider {
|
|
margin: 5px 0;
|
|
}
|
|
.user-info-wrap {
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
|
|
.mf-avatar {
|
|
margin-right: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.user-info-name {
|
|
width: 150px;
|
|
font-weight: 600;
|
|
color: var(--color-text-1);
|
|
font-size: 14px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.user-info-company {
|
|
width: 150px;
|
|
font-size: 12px;
|
|
color: var(--color-text-3);
|
|
// margin-top: 3px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.user-info-service {
|
|
width: 150px;
|
|
font-size: 12px;
|
|
color: var(--color-text-4);
|
|
// margin-top: 3px;
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
&:hover {
|
|
background-color: transparent;
|
|
}
|
|
cursor: text;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.navbar {
|
|
padding: 0 10px;
|
|
.left {
|
|
&-collapse {
|
|
display: block;
|
|
font-size: 18px;
|
|
}
|
|
|
|
&-menu {
|
|
display: flex;
|
|
.logo {
|
|
display: none;
|
|
}
|
|
.mf-icon {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-menu-item {
|
|
&.user {
|
|
width: 136px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|