<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> -->