2024-12-05 21:56:49 +08:00
|
|
|
<template>
|
|
|
|
<div class="top-bar">
|
|
|
|
<div class="left">
|
|
|
|
<el-icon class="menu-icon" @click="toggleSidebar">
|
|
|
|
<Expand v-if="isCollapsed" />
|
|
|
|
<Fold v-else />
|
|
|
|
</el-icon>
|
|
|
|
</div>
|
2024-12-07 22:22:29 +08:00
|
|
|
|
2024-12-05 21:56:49 +08:00
|
|
|
<div class="right">
|
|
|
|
<el-dropdown trigger="click" @command="handleCommand">
|
|
|
|
<div class="user-info">
|
|
|
|
<el-avatar :src="userInfo.avatar" />
|
|
|
|
<span class="username">{{ userInfo.nickname }}</span>
|
|
|
|
</div>
|
|
|
|
<template #dropdown>
|
|
|
|
<el-dropdown-menu>
|
|
|
|
<el-dropdown-item command="profile">
|
|
|
|
<el-icon><User /></el-icon>个人中心
|
|
|
|
</el-dropdown-item>
|
|
|
|
<el-dropdown-item command="settings">
|
|
|
|
<el-icon><Setting /></el-icon>个人设置
|
|
|
|
</el-dropdown-item>
|
|
|
|
<el-dropdown-item divided command="logout">
|
|
|
|
<el-icon><SwitchButton /></el-icon>退出登录
|
|
|
|
</el-dropdown-item>
|
|
|
|
</el-dropdown-menu>
|
|
|
|
</template>
|
|
|
|
</el-dropdown>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
2024-12-07 22:22:29 +08:00
|
|
|
import { ref, inject, onMounted } from 'vue'
|
2024-12-05 21:56:49 +08:00
|
|
|
import { useRouter } from 'vue-router'
|
|
|
|
import { ElMessageBox } from 'element-plus'
|
|
|
|
import { User, Setting, SwitchButton, Expand, Fold } from '@element-plus/icons-vue'
|
|
|
|
|
|
|
|
const router = useRouter()
|
|
|
|
const isCollapsed = inject('isCollapsed', ref(false))
|
|
|
|
|
|
|
|
// 模拟用户信息
|
|
|
|
const userInfo = ref({
|
|
|
|
nickname: '张三',
|
|
|
|
avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
|
|
|
|
})
|
|
|
|
|
2024-12-07 22:22:29 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
2024-12-05 21:56:49 +08:00
|
|
|
const toggleSidebar = () => {
|
|
|
|
isCollapsed.value = !isCollapsed.value
|
|
|
|
}
|
|
|
|
|
|
|
|
const handleCommand = async (command: string) => {
|
|
|
|
switch (command) {
|
|
|
|
case 'profile':
|
|
|
|
router.push('/profile')
|
|
|
|
break
|
|
|
|
case 'settings':
|
|
|
|
router.push('/settings')
|
|
|
|
break
|
|
|
|
case 'logout':
|
|
|
|
await handleLogout()
|
|
|
|
break
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const handleLogout = async () => {
|
|
|
|
try {
|
|
|
|
await ElMessageBox.confirm('确定要退出登录吗?', '提示', {
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
type: 'warning'
|
|
|
|
})
|
2024-12-07 22:22:29 +08:00
|
|
|
|
2024-12-05 21:56:49 +08:00
|
|
|
// 清除本地存储的用户信息和token
|
|
|
|
localStorage.removeItem('token')
|
|
|
|
localStorage.removeItem('userInfo')
|
2024-12-07 22:22:29 +08:00
|
|
|
|
2024-12-05 21:56:49 +08:00
|
|
|
// 跳转到登录页
|
|
|
|
router.push('/login')
|
|
|
|
} catch {
|
|
|
|
// 用户取消操作
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
.top-bar {
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
right: 0;
|
|
|
|
left: 0;
|
|
|
|
height: 60px;
|
|
|
|
background: #fff;
|
|
|
|
box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
padding: 0 20px;
|
|
|
|
z-index: 1000;
|
|
|
|
}
|
|
|
|
|
|
|
|
.menu-icon {
|
|
|
|
font-size: 20px;
|
|
|
|
cursor: pointer;
|
|
|
|
color: #666;
|
|
|
|
}
|
|
|
|
|
|
|
|
.user-info {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
|
|
.username {
|
|
|
|
margin-left: 8px;
|
|
|
|
font-size: 14px;
|
|
|
|
color: #666;
|
|
|
|
}
|
|
|
|
|
|
|
|
.right {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 20px;
|
|
|
|
}
|
2024-12-07 22:22:29 +08:00
|
|
|
</style>
|