82 lines
2.5 KiB
Vue
82 lines
2.5 KiB
Vue
<template>
|
||
<el-container style="height: 100vh;width: 100vw;">
|
||
<!-- 左侧导航栏 -->
|
||
<el-aside class="left-menu-box">
|
||
<router-link to="/admin">
|
||
<h1>博客后台</h1>
|
||
</router-link>
|
||
<el-menu default-active="1" class="left-menu" @select="handleSelect" router>
|
||
<el-menu-item index="/admin/news">
|
||
<el-icon>
|
||
<document />
|
||
</el-icon>
|
||
<span>新闻管理</span>
|
||
</el-menu-item>
|
||
<el-menu-item index="/admin/posts">
|
||
<el-icon>
|
||
<document />
|
||
</el-icon>
|
||
<span>文章管理</span>
|
||
</el-menu-item>
|
||
<el-menu-item index="/admin/projects">
|
||
<el-icon>
|
||
<document />
|
||
</el-icon>
|
||
<span>项目管理</span>
|
||
</el-menu-item>
|
||
<el-menu-item index="/admin/comments">
|
||
<el-icon><chat-line-round /></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/settings">
|
||
<el-icon>
|
||
<setting />
|
||
</el-icon>
|
||
<span>系统设置</span>
|
||
</el-menu-item>
|
||
</el-menu>
|
||
</el-aside>
|
||
|
||
<!-- 右侧主体 -->
|
||
<el-container>
|
||
<el-header class="">
|
||
{{ currentTitle }}
|
||
</el-header>
|
||
|
||
<el-main class="p-4 bg-gray-50">
|
||
<!-- 这里是主内容区域，使用 <router-view> 插入子路由组件 -->
|
||
<router-view />
|
||
</el-main>
|
||
</el-container>
|
||
</el-container>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { Document, User, ChatLineRound, Setting } from '@element-plus/icons-vue'
|
||
import '@/styles/admin.css'
|
||
import { useRoute } from 'vue-router'
|
||
import { computed } from 'vue'
|
||
|
||
const route = useRoute()
|
||
|
||
const handleSelect = (index) => {
|
||
console.log("导航选择:", index)
|
||
}
|
||
|
||
const currentTitle = computed(() => {
|
||
return route.meta.title || '博客后台管理系统'
|
||
})
|
||
|
||
</script>
|
||
|
||
<!-- <style scoped>
|
||
.el-menu-vertical-demo {
|
||
border-right: none;
|
||
}
|
||
</style> --> |