112 lines
3.0 KiB
Vue
112 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { ArrowDown, User } from '@element-plus/icons-vue'
|
|
import { useFullscreen } from '@vueuse/core'
|
|
import { computed } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { useAppStore, useSettingsStore, useUserStore } from '@/store'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const appStore = useAppStore()
|
|
const userStore = useUserStore()
|
|
const settingsStore = useSettingsStore()
|
|
|
|
const { isFullscreen, toggle: toggleFullscreen } = useFullscreen()
|
|
|
|
/** 面包屑：取 matched 中带标题的层级 */
|
|
const breadcrumbs = computed(() =>
|
|
route.matched.filter((item) => item.meta?.title).map((item) => item.meta.title as string),
|
|
)
|
|
|
|
function handleThemeChange(color: string | null) {
|
|
if (color) {
|
|
settingsStore.setThemeColor(color)
|
|
}
|
|
}
|
|
|
|
async function handleCommand(command: string) {
|
|
if (command === 'logout') {
|
|
await ElMessageBox.confirm('确认退出登录吗？', '提示', { type: 'warning' })
|
|
await userStore.logout()
|
|
ElMessage.success('已退出登录')
|
|
void router.replace('/login')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="navbar">
|
|
<div class="navbar__left">
|
|
<el-icon class="navbar__icon" @click="appStore.toggleSidebar()">
|
|
<component :is="appStore.sidebarCollapsed ? 'Expand' : 'Fold'" />
|
|
</el-icon>
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item v-for="(title, index) in breadcrumbs" :key="index">
|
|
{{ title }}
|
|
</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
|
|
<div class="navbar__right">
|
|
<el-color-picker
|
|
v-model="settingsStore.themeColor"
|
|
size="small"
|
|
@change="handleThemeChange"
|
|
/>
|
|
<el-icon class="navbar__icon" @click="toggleFullscreen()">
|
|
<component :is="isFullscreen ? 'Aim' : 'FullScreen'" />
|
|
</el-icon>
|
|
<el-dropdown trigger="click" @command="handleCommand">
|
|
<span class="navbar__user">
|
|
<el-icon><User /></el-icon>
|
|
<span>{{ userStore.nickname || userStore.userInfo?.username }}</span>
|
|
<el-icon><ArrowDown /></el-icon>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.navbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: $navbar-height;
|
|
padding: 0 16px;
|
|
background-color: #fff;
|
|
border-bottom: 1px solid $border-color-light;
|
|
|
|
&__left,
|
|
&__right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
&__icon {
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
color: $text-color-regular;
|
|
|
|
&:hover {
|
|
color: $color-primary;
|
|
}
|
|
}
|
|
|
|
&__user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
cursor: pointer;
|
|
outline: none;
|
|
color: $text-color-regular;
|
|
}
|
|
}
|
|
</style>
|