<template>
|
<div class="navbar" :class="'nav' + settingsStore.navType">
|
<hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
<breadcrumb v-if="settingsStore.navType == 1" id="breadcrumb-container" class="breadcrumb-container" />
|
<top-nav v-if="settingsStore.navType == 2" id="topmenu-container" class="topmenu-container" />
|
<template v-if="settingsStore.navType == 3">
|
<logo v-show="settingsStore.sidebarLogo" :collapse="false"></logo>
|
<top-bar id="topbar-container" class="topbar-container" />
|
</template>
|
|
<div class="right-menu">
|
<template v-if="appStore.device !== 'mobile'">
|
<header-search id="header-search" class="right-menu-item hover-effect" />
|
|
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
|
<el-tooltip content="主题模式" effect="dark" placement="bottom">
|
<div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">
|
<svg-icon v-if="settingsStore.isDark" icon-class="sunny" />
|
<svg-icon v-if="!settingsStore.isDark" icon-class="moon" />
|
</div>
|
</el-tooltip>
|
|
<el-tooltip content="布局大小" effect="dark" placement="bottom">
|
<size-select id="size-select" class="right-menu-item hover-effect" />
|
</el-tooltip>
|
|
<el-tooltip content="消息通知" effect="dark" placement="bottom">
|
<header-notice id="header-notice" class="right-menu-item hover-effect" />
|
</el-tooltip>
|
</template>
|
|
<el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="hover">
|
<div class="avatar-wrapper">
|
<div class="avatar-initial">{{ avatarLetter }}</div>
|
</div>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<router-link to="/user/profile">
|
<el-dropdown-item>个人中心</el-dropdown-item>
|
</router-link>
|
<el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
|
<span>布局设置</span>
|
</el-dropdown-item>
|
<el-dropdown-item command="lockScreen">
|
<span>锁定屏幕</span>
|
</el-dropdown-item>
|
<el-dropdown-item divided command="logout">
|
<span>退出登录</span>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ElMessageBox } from 'element-plus'
|
import Breadcrumb from '@/components/Breadcrumb'
|
import TopNav from './TopNav'
|
import TopBar from './TopBar'
|
import Logo from './Sidebar/Logo'
|
import Hamburger from '@/components/Hamburger'
|
import Screenfull from '@/components/Screenfull'
|
import SizeSelect from '@/components/SizeSelect'
|
import HeaderSearch from '@/components/HeaderSearch'
|
import useAppStore from '@/store/modules/app'
|
import useUserStore from '@/store/modules/user'
|
import useLockStore from '@/store/modules/lock'
|
import useSettingsStore from '@/store/modules/settings'
|
import HeaderNotice from './HeaderNotice'
|
|
const route = useRoute()
|
const router = useRouter()
|
const appStore = useAppStore()
|
const userStore = useUserStore()
|
const lockStore = useLockStore()
|
const settingsStore = useSettingsStore()
|
|
// 顶栏头像为设计稿的绿色首字母圆，取昵称首字母（无昵称时兜底 A）
|
const avatarLetter = computed(() => (userStore.nickName || 'A').charAt(0).toUpperCase())
|
|
function toggleSideBar() {
|
appStore.toggleSideBar()
|
}
|
|
function handleCommand(command) {
|
switch (command) {
|
case "setLayout":
|
setLayout()
|
break
|
case "lockScreen":
|
lockScreen()
|
break
|
case "logout":
|
logout()
|
break
|
default:
|
break
|
}
|
}
|
|
function logout() {
|
ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
userStore.logOut().then(() => {
|
location.href = '/index'
|
})
|
}).catch(() => { })
|
}
|
|
const emits = defineEmits(['setLayout'])
|
function setLayout() {
|
emits('setLayout')
|
}
|
|
function lockScreen() {
|
const currentPath = route.fullPath
|
lockStore.lockScreen(currentPath)
|
router.push('/lock')
|
}
|
|
async function toggleTheme(event) {
|
const x = event?.clientX || window.innerWidth / 2
|
const y = event?.clientY || window.innerHeight / 2
|
const wasDark = settingsStore.isDark
|
|
const isReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches
|
const isSupported = document.startViewTransition && !isReducedMotion
|
|
if (!isSupported) {
|
settingsStore.toggleTheme()
|
return
|
}
|
|
try {
|
const transition = document.startViewTransition(async () => {
|
await new Promise((resolve) => setTimeout(resolve, 10))
|
settingsStore.toggleTheme()
|
await nextTick()
|
})
|
await transition.ready
|
|
const endRadius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y))
|
const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]
|
document.documentElement.animate(
|
{
|
clipPath: !wasDark ? [...clipPath].reverse() : clipPath
|
}, {
|
duration: 650,
|
easing: "cubic-bezier(0.4, 0, 0.2, 1)",
|
fill: "forwards",
|
pseudoElement: !wasDark ? "::view-transition-old(root)" : "::view-transition-new(root)"
|
}
|
)
|
await transition.finished
|
} catch (error) {
|
console.warn("View transition failed, falling back to immediate toggle:", error)
|
settingsStore.toggleTheme()
|
}
|
}
|
</script>
|
|
<style lang='scss' scoped>
|
.navbar.nav3 {
|
.hamburger-container {
|
display: none !important;
|
}
|
}
|
|
.navbar {
|
height: 50px;
|
overflow: hidden;
|
position: relative;
|
background: var(--navbar-bg);
|
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
display: flex;
|
align-items: center;
|
// padding: 0 8px;
|
box-sizing: border-box;
|
/* 品牌深蓝顶栏：hamburger 等用 fill="currentColor" 的图标继承白字 */
|
color: #ffffff;
|
|
.hamburger-container {
|
line-height: 46px;
|
height: 100%;
|
cursor: pointer;
|
transition: background 0.3s;
|
-webkit-tap-highlight-color: transparent;
|
display: flex;
|
align-items: center;
|
flex-shrink: 0;
|
margin-right: 8px;
|
|
&:hover {
|
background: rgba(255, 255, 255, 0.12);
|
}
|
}
|
|
.breadcrumb-container {
|
flex-shrink: 0;
|
}
|
|
/* 面包屑在深蓝底上改白系（#breadcrumb-container 提权以盖过 Breadcrumb 组件内 .no-redirect 的灰字） */
|
#breadcrumb-container {
|
:deep(.el-breadcrumb__inner),
|
:deep(.el-breadcrumb__separator) {
|
color: rgba(255, 255, 255, 0.85);
|
}
|
|
:deep(.el-breadcrumb__inner.is-link:hover) {
|
color: #ffffff;
|
}
|
}
|
|
.topmenu-container {
|
position: absolute;
|
left: 50px;
|
}
|
|
.topbar-container {
|
flex: 1;
|
min-width: 0;
|
display: flex;
|
align-items: center;
|
overflow: hidden;
|
margin-left: 8px;
|
}
|
|
.right-menu {
|
height: 100%;
|
line-height: 50px;
|
display: flex;
|
align-items: center;
|
margin-left: auto;
|
|
&:focus {
|
outline: none;
|
}
|
|
/* 设计稿顶栏右侧为一排白色描边的圆形图标按钮 */
|
.right-menu-item {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 30px;
|
height: 30px;
|
padding: 0;
|
margin: 0 5px;
|
font-size: 15px;
|
color: #ffffff;
|
border: 1px solid rgba(255, 255, 255, 0.35);
|
border-radius: 50%;
|
flex-shrink: 0;
|
|
&.hover-effect {
|
cursor: pointer;
|
transition: background 0.3s, border-color 0.3s;
|
|
&:hover {
|
background: rgba(255, 255, 255, 0.12);
|
border-color: rgba(255, 255, 255, 0.6);
|
}
|
}
|
|
/* 子组件自带的行高/内边距会在圆形按钮里偏心，归零让图标居中 */
|
:deep(.size-icon--style) {
|
line-height: 1;
|
padding-right: 0;
|
}
|
|
:deep(.size-icon),
|
:deep(.search-icon) {
|
font-size: 15px;
|
}
|
|
&.theme-switch-wrapper {
|
svg {
|
transition: transform 0.3s;
|
|
&:hover {
|
transform: scale(1.15);
|
}
|
}
|
}
|
}
|
|
/* 头像容器不参与描边圆按钮：内层是设计稿的绿色首字母实心圆 */
|
.avatar-container,
|
.avatar-container.hover-effect:hover {
|
border: none;
|
background: transparent;
|
|
.avatar-wrapper {
|
display: flex;
|
align-items: center;
|
|
.avatar-initial {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 30px;
|
height: 30px;
|
border-radius: 50%;
|
background-color: #80BF40;
|
color: #ffffff;
|
font-size: 14px;
|
font-weight: 600;
|
cursor: pointer;
|
user-select: none;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
