120 lines
3.1 KiB
Vue
120 lines
3.1 KiB
Vue
·
|
|
<template>
|
|
<div class="top-bar-container border-b flex-between">
|
|
<div class="flex-center h-full">
|
|
<div class="app-title-container cursor" @click="router.push('/')">
|
|
<div class="logo flex-center">
|
|
<LogoFull />
|
|
</div>
|
|
</div>
|
|
<TopMenu></TopMenu>
|
|
</div>
|
|
<div class="flex-center avatar">
|
|
<el-button
|
|
v-if="!user.isEnterprise()"
|
|
link
|
|
type="primary"
|
|
@click="toUrl('https://maxkb.cn/pricing.html')"
|
|
class="mr-8"
|
|
>
|
|
<AppIcon iconName="app-pricing" class="mr-8" style="font-size: 20px"></AppIcon>
|
|
|
|
{{ $t('common.professional') }}
|
|
</el-button>
|
|
<el-tooltip
|
|
effect="dark"
|
|
:content="$t('layout.topbar.github')"
|
|
placement="top"
|
|
v-if="user.themeInfo?.showProject"
|
|
>
|
|
<AppIcon
|
|
iconName="app-github"
|
|
class="cursor color-secondary mr-8 ml-8"
|
|
style="font-size: 20px"
|
|
@click="toUrl(user.themeInfo?.projectUrl)"
|
|
></AppIcon>
|
|
</el-tooltip>
|
|
<el-tooltip
|
|
effect="dark"
|
|
:content="$t('layout.topbar.wiki')"
|
|
placement="top"
|
|
v-if="user.themeInfo?.showUserManual"
|
|
>
|
|
<AppIcon
|
|
iconName="app-reading"
|
|
class="cursor color-secondary mr-8 ml-8"
|
|
style="font-size: 20px"
|
|
@click="toUrl(user.themeInfo?.userManualUrl)"
|
|
></AppIcon>
|
|
</el-tooltip>
|
|
<el-tooltip
|
|
effect="dark"
|
|
:content="$t('layout.topbar.forum')"
|
|
placement="top"
|
|
v-if="user.themeInfo?.showForum"
|
|
>
|
|
<AppIcon
|
|
iconName="app-help"
|
|
class="cursor color-secondary mr-16 ml-8"
|
|
style="font-size: 20px"
|
|
@click="toUrl(user.themeInfo?.forumUrl)"
|
|
></AppIcon>
|
|
</el-tooltip>
|
|
<el-dropdown trigger="click" type="primary">
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item
|
|
v-for="(lang, index) in langList"
|
|
:key="index"
|
|
:value="lang.value"
|
|
@click="changeLang(lang.value)"
|
|
>{{ lang.label }}</el-dropdown-item
|
|
>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
<AppIcon
|
|
iconName="app-translate"
|
|
class="cursor color-secondary mr-16 ml-8"
|
|
style="font-size: 20px"
|
|
>
|
|
</AppIcon>
|
|
</el-dropdown>
|
|
<Avatar></Avatar>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import TopMenu from './top-menu/index.vue'
|
|
import Avatar from './avatar/index.vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { langList } from '@/locales/index'
|
|
import { useLocale } from '@/locales/useLocale'
|
|
|
|
import useStore from '@/stores'
|
|
const { user } = useStore()
|
|
const router = useRouter()
|
|
|
|
const { changeLocale } = useLocale()
|
|
const changeLang = (lang: string) => {
|
|
changeLocale(lang)
|
|
}
|
|
function toUrl(url: string) {
|
|
window.open(url, '_blank')
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.top-bar-container {
|
|
height: var(--app-header-height);
|
|
box-sizing: border-box;
|
|
padding: var(--app-header-padding);
|
|
|
|
.app-title-container {
|
|
margin-right: 45px;
|
|
}
|
|
|
|
.line {
|
|
height: 2em;
|
|
}
|
|
}
|
|
</style>
|