90 lines
3.0 KiB
Vue
90 lines
3.0 KiB
Vue
<template>
|
|
<header class="header">
|
|
<div class="navbar">
|
|
<div class="flex-1 flex items-center gap-1 min-w-0">
|
|
<div class="navbar-item">
|
|
<el-tooltip
|
|
class="box-item"
|
|
effect="dark"
|
|
:content="isCollapsed ? '展开菜单' : '收起菜单'"
|
|
placement="bottom"
|
|
>
|
|
<fold />
|
|
</el-tooltip>
|
|
</div>
|
|
<div class="navbar-item">
|
|
<el-tooltip class="box-item" effect="dark" content="刷新" placement="bottom">
|
|
<refresh />
|
|
</el-tooltip>
|
|
</div>
|
|
<div
|
|
class="hidden md:flex items-center min-w-0 px-2"
|
|
v-if="settingStore.showCrumb && breadcrumbs.length"
|
|
>
|
|
<breadcrumb />
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<div class="navbar-item" v-if="!isMobile">
|
|
<el-tooltip
|
|
class="box-item"
|
|
effect="dark"
|
|
:content="isFullscreen ? '退出全屏' : '全屏模式'"
|
|
placement="bottom"
|
|
>
|
|
<full-screen />
|
|
</el-tooltip>
|
|
</div>
|
|
<div class="navbar-item">
|
|
<user-drop-down />
|
|
</div>
|
|
<div class="navbar-item">
|
|
<el-tooltip class="box-item" effect="dark" content="主题设置" placement="bottom">
|
|
<setting />
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<multiple-tabs v-if="settingStore.openMultipleTabs" />
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { RouteLocationMatched } from 'vue-router'
|
|
import { useFullscreen } from '@vueuse/core'
|
|
|
|
import { useWatchRoute } from '@/hooks/useWatchRoute'
|
|
import useAppStore from '@/stores/modules/app'
|
|
import useSettingStore from '@/stores/modules/setting'
|
|
|
|
import Setting from '../setting/index.vue'
|
|
import Breadcrumb from './breadcrumb.vue'
|
|
import Fold from './fold.vue'
|
|
import FullScreen from './full-screen.vue'
|
|
import MultipleTabs from './multiple-tabs.vue'
|
|
import Refresh from './refresh.vue'
|
|
import UserDropDown from './user-drop-down.vue'
|
|
|
|
const appStore = useAppStore()
|
|
const isMobile = computed(() => appStore.isMobile)
|
|
const isCollapsed = computed(() => appStore.isCollapsed)
|
|
const settingStore = useSettingStore()
|
|
const { isFullscreen } = useFullscreen()
|
|
|
|
const breadcrumbs = ref<RouteLocationMatched[]>([])
|
|
useWatchRoute((route) => {
|
|
breadcrumbs.value = route.matched.filter((item) => item.meta && item.meta.title)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.navbar {
|
|
height: var(--navbar-height);
|
|
@apply flex px-3 bg-body;
|
|
|
|
.navbar-item {
|
|
@apply h-full flex justify-center items-center;
|
|
}
|
|
}
|
|
</style>
|