83 lines
2.1 KiB
Vue
83 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<div class="admin-layout">
|
||
|
|
<el-container>
|
||
|
|
<el-aside width="220px">
|
||
|
|
<div class="admin-logo">管理后台</div>
|
||
|
|
<el-menu :default-active="$route.path" router background-color="#304156" text-color="#bfcbd9" active-text-color="#409eff">
|
||
|
|
<el-menu-item index="/admin">
|
||
|
|
<el-icon><DataAnalysis /></el-icon>
|
||
|
|
<span>仪表盘</span>
|
||
|
|
</el-menu-item>
|
||
|
|
<el-menu-item index="/admin/users">
|
||
|
|
<el-icon><User /></el-icon>
|
||
|
|
<span>用户管理</span>
|
||
|
|
</el-menu-item>
|
||
|
|
<el-menu-item index="/admin/articles">
|
||
|
|
<el-icon><Document /></el-icon>
|
||
|
|
<span>文章管理</span>
|
||
|
|
</el-menu-item>
|
||
|
|
<el-menu-item index="/admin/comments">
|
||
|
|
<el-icon><ChatDotSquare /></el-icon>
|
||
|
|
<span>评论管理</span>
|
||
|
|
</el-menu-item>
|
||
|
|
<el-menu-item index="/admin/categories">
|
||
|
|
<el-icon><Menu /></el-icon>
|
||
|
|
<span>分类管理</span>
|
||
|
|
</el-menu-item>
|
||
|
|
</el-menu>
|
||
|
|
</el-aside>
|
||
|
|
<el-container>
|
||
|
|
<el-header class="admin-header">
|
||
|
|
<el-button @click="$router.push('/')">返回前台</el-button>
|
||
|
|
<el-button @click="handleLogout">退出</el-button>
|
||
|
|
</el-header>
|
||
|
|
<el-main>
|
||
|
|
<router-view />
|
||
|
|
</el-main>
|
||
|
|
</el-container>
|
||
|
|
</el-container>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { useUserStore } from '@/stores/user'
|
||
|
|
import { useRouter } from 'vue-router'
|
||
|
|
|
||
|
|
const userStore = useUserStore()
|
||
|
|
const router = useRouter()
|
||
|
|
|
||
|
|
async function handleLogout() {
|
||
|
|
await userStore.logout()
|
||
|
|
router.push('/login')
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.admin-layout {
|
||
|
|
min-height: 100vh;
|
||
|
|
}
|
||
|
|
.el-aside {
|
||
|
|
background: #304156;
|
||
|
|
}
|
||
|
|
.admin-logo {
|
||
|
|
height: 60px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.admin-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-end;
|
||
|
|
gap: 10px;
|
||
|
|
background: #fff;
|
||
|
|
border-bottom: 1px solid #e4e7ed;
|
||
|
|
}
|
||
|
|
.el-main {
|
||
|
|
background: #f5f7fa;
|
||
|
|
}
|
||
|
|
</style>
|