yl-frontend/src/components/layout/TopBar.vue

130 lines
2.8 KiB
Vue
Raw Normal View History

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>