feat(admin): 添加顶部导航栏和退出登入按钮

This commit is contained in:
TianyangZhang 2026-03-25 16:34:02 +08:00
parent 1ec8734401
commit a6ebd3af87
1 changed files with 38 additions and 11 deletions

View File

@ -1,20 +1,47 @@
<template>
<el-container style="min-height: 100vh;">
<el-aside width="200px" style="background:#001529;">
<div style="padding:20px;color:#fff;font-weight:bold;font-size:16px;">管理后台</div>
<el-menu router :default-active="$route.path" background-color="#001529" text-color="#fff" active-text-color="#409eff">
<el-menu-item index="/admin/jobs">职位管理</el-menu-item>
<el-menu-item index="/admin/applications">投递管理</el-menu-item>
<template v-if="auth.isSuperAdmin">
<el-menu-item index="/admin/organizations">组织架构</el-menu-item>
<el-menu-item index="/admin/users">用户管理</el-menu-item>
<el-header style="background:#001529;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #333;">
<div style="color:#fff;font-weight:bold;font-size:16px;">管理后台</div>
<el-dropdown>
<div style="color:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;">
<span>{{ auth.user?.email }}</span>
<el-icon><ArrowDown /></el-icon>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="logout">退出登入</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-menu>
</el-aside>
<el-main><router-view /></el-main>
</el-dropdown>
</el-header>
<el-container>
<el-aside width="200px" style="background:#001529;">
<div style="padding:20px;color:#fff;font-weight:bold;font-size:16px;">菜单</div>
<el-menu router :default-active="$route.path" background-color="#001529" text-color="#fff" active-text-color="#409eff">
<el-menu-item index="/admin/jobs">职位管理</el-menu-item>
<el-menu-item index="/admin/applications">投递管理</el-menu-item>
<template v-if="auth.isSuperAdmin">
<el-menu-item index="/admin/organizations">组织架构</el-menu-item>
<el-menu-item index="/admin/users">用户管理</el-menu-item>
</template>
</el-menu>
</el-aside>
<el-main><router-view /></el-main>
</el-container>
</el-container>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { ArrowDown } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
const router = useRouter()
const auth = useAuthStore()
function logout() {
localStorage.clear()
ElMessage.success('已退出登入')
router.push({ name: 'Login' })
}
</script>